last2014/lynq-chat
2
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Chg: MikroORMのinfoログをLoggerでもINFOとして扱うように / Chg: MikroORMのdiscoveryログをLoggerでINFOとして扱うように / New: 左側メニューにtitle属性を追加 / Del: 最上位RouterViewのkey / Fix: .route-mainのflex-directionがcolumn出ない問題 / Fix: .route-mainの高さ指定がmin-heightである問題 / Feat: コミュニティのページでチャンネルが表示できるように / Feat: チャンネルページ

Browse Source
This commit is contained in:
Last2014
2026-05-24 17:04:11 +09:00
parent 1ca0cbf3bf
commit beb0e25ad9
7 changed files with 300 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/backend/src/mikro-orm.config.ts
+13 -1
View File
@@ -20,7 +20,19 @@ export default defineConfig({
metadataProvider: TsMorphMetadataProvider,
debug: process.env.NODE_ENV !== "production",
logger: (message) => {
logger.log(message);
const smartMsg = message.replace("[MikroORM] ", "");
switch (true) {
case smartMsg.startsWith("[info]"):
logger.info(message.replace("[info] ", ""));
break;
case smartMsg.startsWith("[discovery]"):
logger.info(message);
break;
default:
logger.log(message);
break;
}
},
dbName: config.database.database,
packages/frontend/src/Layout.vue
+29 -8
View File
@@ -14,6 +14,7 @@
:class='$route.path === "/"
? "isActive"
: ""'
title="ホーム"
>
<img :src='"icon" in serverInfo
? serverInfo.icon
@@ -24,9 +25,10 @@
<RouterLink
v-for="community of communitys"
:to="`/community/${community.id}`"
:class='$route.path === `/community/${community.id}`
:class='$route.path.startsWith(`/community/${community.id}`)
? "isActive"
: ""'
:title="community.name"
>
<img
v-if="community.icon"
@@ -50,10 +52,13 @@
}}
</div>
<div class="route-main">
<RouterView
:key="$route.fullPath"
/>
<div
class="route-main"
:class='isFullRoute
? "full-route"
: ""'
>
<RouterView />
</div>
</div>
</main>
@@ -151,10 +156,16 @@ main.layout {
.route-main {
display: flex;
flex-direction: column;
padding: 1.25rem;
padding-bottom: 0;
overflow: scroll;
min-height: 100%;
height: 100%;
}
.content-main .route-main.full-route {
padding: 0;
overflow: hidden;
}
.router-progress {
@@ -190,14 +201,24 @@ import routerStatus, { title } from "@/lib/router";
import { Icon } from "@iconify/vue";
import Progress from "@/components/Progress.vue";
import { communitys, serverInfo } from "@/lib/account";
import { onBeforeUnmount, onMounted, watch } from "vue";
import { computed, onBeforeUnmount, onMounted, watch } from "vue";
import { createModal } from "@/lib/modal";
import ErrorModal from "@/components/Modal/Error.vue";
const router = useRouter();
const route = useRoute();
watch(route, () => {
const isFullRoute = computed(() => route.meta.isFullRoute === true);
watch(route, (to, from) => {
if (
to.matched[0]?.path === from.matched[0]?.path &&
from.meta.canReloadTitle === false
) {
routerStatus.isLoad = false;
return false;
}
if (typeof route.meta.title === "string")
title.value = route.meta.title;
});
packages/frontend/src/lib/account.ts
+1
View File
@@ -6,6 +6,7 @@ await initClient();
export let serverInfo = ref<ApiMap["server-info"]["response"]>(await client.value.request("server-info"));
export let account = ref<ApiMap["me"]["response"]>(await client.value.request("me"));
export let presentCommunity = ref<Extract<ApiMap["community/list"]["response"], { communitys: any }>["communitys"][number]>();
let communitys = ref<Extract<ApiMap["community/list"]["response"], { communitys: any }>["communitys"]>([]);
let lastLoadedCommunity = ref<string>();
packages/frontend/src/main.ts
+21 -1
View File
@@ -47,11 +47,23 @@ const router = createRouter({
component: () => import("@/routes/signin.vue"),
},
{
path: "/community/:id",
path: "/community/:communityId",
meta: {
title: "コミュニティ",
isFullRoute: true,
canReloadTitle: false,
},
component: () => import("@/routes/community/index.vue"),
children: [
{
path: "",
component: () => import("@/routes/community/index.inner.vue"),
},
{
path: ":channelId",
component: () => import("@/routes/community/channel.vue"),
},
],
},
{
path: "/:NotFound(.*)*",
@@ -75,6 +87,14 @@ router.afterEach((to, from) => {
return false;
}
if (
to.matched[0]?.path === from.matched[0]?.path &&
from.meta.canReloadTitle === false
) {
routerStatus.isLoad = false;
return false;
}
const title = to.meta.title;
let serverName = "LynqChat";
packages/frontend/src/routes/community/channel.vue
+113
View File
@@ -0,0 +1,113 @@
<template>
<Progress
v-if="isProcessing"
:size="20"
class="processing-progress"
/>
<div
v-if="!isProcessing && channel"
class="channel"
>
</div>
</template>
<style scoped>
.channel {
position: relative;
display: flex;
flex-direction: column-reverse;
}
</style>
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { account, presentCommunity, serverInfo } from "@/lib/account";
import client from "@/lib/client";
import { createModal } from "@/lib/modal";
import GoHomeError from "@/components/Modal/GoHomeError.vue";
import { ref } from "vue";
import Progress from "@/components/Progress.vue";
import { title } from "@/lib/router";
import type ApiMap from "lynqchat-js/1.0.0-alpha.0/map";
const route = useRoute();
const router = useRouter();
const isProcessing = ref<boolean>(false);
const channel = ref<Extract<ApiMap["channel/list"]["response"], { channels: any }>["channels"][number]>();
if (!serverInfo.value.success) {
throw new Error("サーバー情報の取得に失敗しました。");
}
if (!serverInfo.value.isInitialized) {
router.replace("/setup/initialization");
}
if (!account.value.success) {
switch (account.value.error.bad) {
case "client":
router.replace("/signin");
break;
default:
throw new Error("アカウント情報の取得に失敗しました。");
}
}
(async () => {
isProcessing.value = true;
if (!serverInfo.value.success) {
throw new Error("サーバー情報の取得に失敗しました。");
}
const channelId = route.params.channelId;
if (typeof channelId !== "string") {
isProcessing.value = false;
createModal({
component: GoHomeError,
onClose: async () => await router.push("/"),
props: {
error: "不正なアクセスです。",
},
});
return;
}
if (presentCommunity.value === undefined) {
isProcessing.value = false;
createModal({
component: GoHomeError,
onClose: async () => await router.push("/"),
props: {
error: "不正なアクセスです。",
},
});
return;
}
const channelRes = await client.value.request("channel/get", {
id: channelId,
});
if (!channelRes.success) {
isProcessing.value = false;
createModal({
component: GoHomeError,
onClose: async () => await router.push("/"),
props: {
error: "チャンネルが取得できませんでした。",
},
});
return;
}
channel.value = channelRes.channel;
document.title = `${channelRes.channel.name} - ${presentCommunity.value.name} | ${serverInfo.value.name}`;
title.value = `${channelRes.channel.name} - ${presentCommunity.value.name}`;
isProcessing.value = false;
})();
</script>
packages/frontend/src/routes/community/index.inner.vue
+2
View File
@@ -0,0 +1,2 @@
<template>
</template>
packages/frontend/src/routes/community/index.vue
+121 -5
View File
@@ -1,32 +1,128 @@
<template>
<Progress
v-if="isProcessing"
:size="24"
:size="20"
class="processing-progress"
/>
<div
v-if="!isProcessing && channels"
class="community"
>
<div class="channels">
<RouterLink
v-for="channel of channels"
:to="`/community/${$route.params.communityId}/${channel.id}`"
:class='route.fullPath === `/community/${$route.params.communityId}/${channel.id}`
? "isActive"
: ""'
>
<Icon icon="material-symbols:chat-rounded" />
<span>{{ channel.name }}</span>
</RouterLink>
</div>
<span class="border" />
<div class="community-inner">
<RouterView
:key="route.fullPath"
/>
</div>
</div>
</template>
<style scoped>
.processing-progress {
margin: auto;
}
.community {
width: 100%;
height: 100%;
display: flex;
}
.channels {
display: flex;
flex-direction: column;
padding: 1rem;
width: 16rem;
height: 100%;
border-top-right-radius: 2rem;
border-bottom-right-radius: 2rem;
}
.channels a {
display: flex;
color: var(--text-color);
text-decoration: none;
gap: 0.25rem;
width: 100%;
height: 2rem;
border: 1px solid transparent;
border-radius: 1rem;
padding: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.channels a:hover,
.channels a.isActive {
background-color: oklch(from var(--route-bg-color) calc(l - 0.02) c h);
}
.channels a.isActive {
border: 1px solid var(--border-color);
}
.channels a * {
margin: auto 0;
}
.channels a svg {
width: 1.25rem;
height: 1.25rem;
}
.channels a span {
font-size: 1.25rem;
}
.community .border {
width: 1px;
height: 100%;
margin-right: 1rem;
margin-left: 1rem;
background-color: var(--border-color);
}
.community .community-inner {
padding-top: 1rem;
flex-grow: 1;
height: 100%;
}
</style>
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { account, serverInfo } from "@/lib/account";
import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
import { account, presentCommunity, serverInfo } from "@/lib/account";
import client from "@/lib/client";
import { createModal } from "@/lib/modal";
import GoHomeError from "@/components/Modal/GoHomeError.vue";
import { ref } from "vue";
import Progress from "@/components/Progress.vue";
import { title } from "@/lib/router";
import type ApiMap from "lynqchat-js/1.0.0-alpha.0/map";
import { Icon } from "@iconify/vue";
const route = useRoute();
const router = useRouter();
const isProcessing = ref<boolean>(false);
const channels = ref<Extract<ApiMap["channel/list"]["response"], { channels: any }>["channels"]>();
if (!serverInfo.value.success) {
throw new Error("サーバー情報の取得に失敗しました。");
}
@@ -52,7 +148,7 @@ if (!account.value.success) {
throw new Error("サーバー情報の取得に失敗しました。");
}
const communityId = route.params.id;
const communityId = route.params.communityId;
if (typeof communityId !== "string") {
isProcessing.value = false;
createModal({
@@ -81,9 +177,29 @@ if (!account.value.success) {
return;
}
presentCommunity.value = community.community;
document.title = `${community.community.name} | ${serverInfo.value.name}`;
title.value = community.community.name;
const channelsRes = await client.value.request("channel/list", {
community: communityId,
});
if (!channelsRes.success) {
isProcessing.value = false;
createModal({
component: GoHomeError,
onClose: async () => await router.push("/"),
props: {
error: "チャンネルが取得できませんでした。",
},
});
return;
}
channels.value = channelsRes.channels;
isProcessing.value = false;
})();
</script>