From f29d8e053ab07af6cc6b09c1c4cdb66104911aeb Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Sat, 26 Sep 2026 18:38:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=84=E8=AE=BA=EF=BC=9A=E5=8C=BA=E5=9D=97?=
 =?UTF-8?q?=E6=8C=82=E5=9C=A8=20site.comments=5Fenabled=20=E4=B8=8A?=
 =?UTF-8?q?=EF=BC=8C=E5=90=8E=E7=AB=AF=E5=B0=B1=E7=BB=AA=E5=89=8D=E7=BA=BF?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=8D=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

阶段一刚推上去就暴露一个问题：线上 8080 是真实环境，评论区组件照常渲染，
而 /api/comments 还不存在 —— 真实访客看到「请求失败（404）」和
「站点还没配置登录方式」。

修法：CommentSection 用 v-if="!!Number(site.comments_enabled)" 兜住。
settings 是 KV 字符串，'1'/1/true 都算开；后端阶段二把这个字段加进
model.Settings 后 /api/site 自然下发，区块自动出现，前端不用再动。
mock 里手动 site.comments_enabled = true，评审不受影响。

实测：mock 模式照常显示（共 8 条评论）；线上 8080 的 .cm-sec 不再渲染、
无 404 错误。
---
 frontend/src/components/comments/CommentSection.vue | 8 +++++++-
 frontend/src/mocks/comments.js                      | 3 +++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/comments/CommentSection.vue b/frontend/src/components/comments/CommentSection.vue
index daf83ff..6a2f105 100644
--- a/frontend/src/components/comments/CommentSection.vue
+++ b/frontend/src/components/comments/CommentSection.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
+import { site } from '../../site'
 import { reader, loadReader, signIn, signOut } from '../../reader'
 import { readerApi } from '../../api'
 import { useComments } from '../../composables/useComments'
@@ -19,6 +20,11 @@ const props = defineProps({
 const api = useComments(props.postId)
 const { s, remaining, load, setSort, submit, saveEdit, remove, loadMoreReplies, startReply, startEdit, cancel } = api
 
+// 总开关在站点设置里。后端阶段二才会下发 comments_enabled —— 在那之前整个
+// 区块不渲染，线上访客不会看到一个请求 404 的半成品；后端一加就自动出现。
+// settings 是 KV 字符串，'1' / 1 / true 都算开。
+const enabled = computed(() => !!Number(site.comments_enabled))
+
 const sorts = [
   { value: 'default', label: '默认' },
   { value: 'newest', label: '最新' },
@@ -83,7 +89,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <section id="comments" class="cm-sec">
+  <section v-if="enabled" id="comments" class="cm-sec">
     <div class="cm-head">
       <span class="cm-count">共 {{ s.total }} 条评论</span>
       <div class="seg cm-sort" role="tablist" aria-label="排序方式">
diff --git a/frontend/src/mocks/comments.js b/frontend/src/mocks/comments.js
index e736ac9..67f4619 100644
--- a/frontend/src/mocks/comments.js
+++ b/frontend/src/mocks/comments.js
@@ -102,6 +102,9 @@ export function install() {
   const state = q.get('state') || 'default'
   applyState(state)
 
+  // 评论区总开关：真后端没这个字段前线上是关的，mock 里手动打开
+  site.comments_enabled = true
+
   // 评审用：?ui=classic 强制走 classic 那套壳。站点平时是 vivid，classic 分支
   // 平时根本渲染不出来，不加这个就没法给它截图 / 做探针。
   // 改 ui_id 会触发 site.js 里的 watcher，applyTheme 由它调。