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: チャンネルページ

2026-05-24 17:04:11 +09:00
parent 1ca0cbf3bf
commit beb0e25ad9
7 changed files with 300 additions and 15 deletions
@@ -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>