feat: 添加留言板功能，集成 Giscus 评论系统并更新相关配置

app/pages/comments.vue

@@ -0,0 +1,68 @@
+<template>
+    <section class="container mx-auto py-8">
+        <p v-if="!giscus || !giscus.repo" class="text-sm text-red-500 mb-4">Giscus 未配置。</p>
+        <ClientOnly>
+            <section class="card panel flex flex-col gap-2.5">
+                <h2 class="m-0 mb-1 text-lg font-semibold">留言板</h2>
+                <p class="text-sm text-white/60 mb-3">在这里留下想说的话吧 · Comments</p>
+                <div class="giscus-wrapper">
+                    <component v-if="GiscusComponent" :is="GiscusComponent" :repo="giscus.repo" :repo-id="giscus.repoId"
+                        :category="giscus.category" :category-id="giscus.categoryId" :mapping="giscus.mapping"
+                        :strict="giscus.strict" :reactions-enabled="giscus.reactionsEnabled"
+                        :emit-metadata="giscus.emitMetadata" :input-position="giscus.inputPosition"
+                        :theme="'/css/giscus.css'" lang="zh-CN" class="giscus" />
+                    <div v-else id="giscus-container" class="giscus" />
+                </div>
+            </section>
+        </ClientOnly>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { definePageMeta } from "#imports";
+import { onMounted, shallowRef, markRaw } from "vue";
+import siteConfig from "~/config/siteConfig";
+
+const giscus = siteConfig.comments.giscus || {};
+const GiscusComponent = shallowRef(null as any);
+
+async function tryUseOfficialComponent() {
+    try {
+        const mod = await import("@giscus/vue");
+        const comp = mod.default ?? mod;
+        if (comp) GiscusComponent.value = markRaw(comp);
+        return !!comp;
+    } catch (e) {
+        console.error("Failed to import Giscus component:", e);
+        return false;
+    }
+}
+
+
+onMounted(async () => {
+    // 如果没有配置 giscus，显示提示（由模板处理）
+    if (!siteConfig.comments.enable) return;
+    if (!giscus || !giscus.repo) return;
+    const ok = await tryUseOfficialComponent();
+});
+
+definePageMeta({
+    order: 5,
+    label: "留言",
+});
+</script>
+
+<style scoped>
+.container {
+    max-width: 880px;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+h1 {
+    color: #e6eef8;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
+}
+</style>
+
+<!-- <style src="../styles/giscus.css"></style> -->