From 2397062b81cfb276041eac4b7e44784fa4484763 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Tue, 10 Mar 2026 16:51:25 +0800
Subject: [PATCH 01/22] feat(bar): frontend

---
 frontend/src/App.vue                          |   2 +
 frontend/src/assets/images/background_1.png   |   3 +
 frontend/src/assets/images/background_2.png   |   3 +
 frontend/src/assets/images/bag.png            |   3 +
 frontend/src/assets/images/board_down.png     |   3 +
 frontend/src/assets/images/board_med.png      |   3 +
 frontend/src/assets/images/board_up.png       |   3 +
 frontend/src/assets/images/note.png           |   3 +
 frontend/src/assets/images/note_1.png         |   3 +
 frontend/src/assets/images/note_2.png         |   3 +
 frontend/src/assets/images/note_3.png         |   3 +
 frontend/src/assets/images/note_pro.png       |   3 +
 frontend/src/assets/images/paper.png          |   3 +
 frontend/src/components/overlay/BarPage.vue   | 993 ++++++++++++++++++
 .../src/components/scene/SpritesLayer.vue     |   2 +-
 frontend/src/stores/ui.ts                     |   4 +-
 16 files changed, 1034 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/assets/images/background_1.png
 create mode 100644 frontend/src/assets/images/background_2.png
 create mode 100755 frontend/src/assets/images/bag.png
 create mode 100644 frontend/src/assets/images/board_down.png
 create mode 100644 frontend/src/assets/images/board_med.png
 create mode 100644 frontend/src/assets/images/board_up.png
 create mode 100644 frontend/src/assets/images/note.png
 create mode 100644 frontend/src/assets/images/note_1.png
 create mode 100644 frontend/src/assets/images/note_2.png
 create mode 100644 frontend/src/assets/images/note_3.png
 create mode 100755 frontend/src/assets/images/note_pro.png
 create mode 100644 frontend/src/assets/images/paper.png
 create mode 100644 frontend/src/components/overlay/BarPage.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b47ed11f..d08cbc1d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,6 +6,7 @@
   <CarPage />
   <MemoryPanel />
   <CommunityPanel />
+  <BarPage />
   <ChatPanel />
   <WhisperPanel />
   <TaskPanel />
@@ -21,6 +22,7 @@ import RoleSelectPanel from '@/components/overlay/RoleSelectPanel.vue'
 import CarPage from '@/components/overlay/CarPage.vue'
 import MemoryPanel from '@/components/overlay/MemoryPanel.vue'
 import CommunityPanel from '@/components/overlay/CommunityPanel.vue'
+import BarPage from '@/components/overlay/BarPage.vue'
 import ChatPanel from '@/components/overlay/ChatPanel.vue'
 import WhisperPanel from '@/components/overlay/WhisperPanel.vue'
 import TaskPanel from '@/components/overlay/TaskPanel.vue'
diff --git a/frontend/src/assets/images/background_1.png b/frontend/src/assets/images/background_1.png
new file mode 100644
index 00000000..6435de6d
--- /dev/null
+++ b/frontend/src/assets/images/background_1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:295811c4c818c4ee71c3e085be0b72132c4adf9fd1b87c7ca6b6e82816319185
+size 2990321
diff --git a/frontend/src/assets/images/background_2.png b/frontend/src/assets/images/background_2.png
new file mode 100644
index 00000000..d4bbf3ef
--- /dev/null
+++ b/frontend/src/assets/images/background_2.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:326378a38ec6119c0c0dfbfc67d5c43cc414796d7da0faf9b256ba3f43cdd3ee
+size 652450
diff --git a/frontend/src/assets/images/bag.png b/frontend/src/assets/images/bag.png
new file mode 100755
index 00000000..b2936ad3
--- /dev/null
+++ b/frontend/src/assets/images/bag.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d0b7188949856aa287a9f9ffa5ce5f0a55671ba45c5c31bef0cea2584c4f1f34
+size 3716310
diff --git a/frontend/src/assets/images/board_down.png b/frontend/src/assets/images/board_down.png
new file mode 100644
index 00000000..571a9c0b
--- /dev/null
+++ b/frontend/src/assets/images/board_down.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9dfae9aa139b039a1ae042362ddabc12c8e39fa0112f3ac90fdc1401c5bbdf73
+size 542389
diff --git a/frontend/src/assets/images/board_med.png b/frontend/src/assets/images/board_med.png
new file mode 100644
index 00000000..4d9ca32e
--- /dev/null
+++ b/frontend/src/assets/images/board_med.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:81c9cf46dd46c3160e71e95d137c4db41e30dccbfad4482d25a47da52db8457c
+size 3971325
diff --git a/frontend/src/assets/images/board_up.png b/frontend/src/assets/images/board_up.png
new file mode 100644
index 00000000..a31b7c7e
--- /dev/null
+++ b/frontend/src/assets/images/board_up.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:998c1e1c4bd9da064a29c53f3c06c6fcb1577cd9d119ae2e6456ff33962f6b67
+size 703839
diff --git a/frontend/src/assets/images/note.png b/frontend/src/assets/images/note.png
new file mode 100644
index 00000000..f9d0fef4
--- /dev/null
+++ b/frontend/src/assets/images/note.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a5bc30e1453a6ad0fabcdefd2c269684be3c35d89bc16a34d4deb65026806261
+size 1212385
diff --git a/frontend/src/assets/images/note_1.png b/frontend/src/assets/images/note_1.png
new file mode 100644
index 00000000..7b4cb834
--- /dev/null
+++ b/frontend/src/assets/images/note_1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bc318717f5b86e26bc017d4dc0a98c69e6cbdbe911b17555349f1ad5836f694a
+size 2422795
diff --git a/frontend/src/assets/images/note_2.png b/frontend/src/assets/images/note_2.png
new file mode 100644
index 00000000..94b783c2
--- /dev/null
+++ b/frontend/src/assets/images/note_2.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:351f76a8560459b425817d5b513604cbfc4e7386e0120a7d4296419d8fee40fa
+size 1204957
diff --git a/frontend/src/assets/images/note_3.png b/frontend/src/assets/images/note_3.png
new file mode 100644
index 00000000..293a98bb
--- /dev/null
+++ b/frontend/src/assets/images/note_3.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8fde17eb9d97cbab720b017f8af539a933c183f744ecba037eac58a0b7fb05b2
+size 2498427
diff --git a/frontend/src/assets/images/note_pro.png b/frontend/src/assets/images/note_pro.png
new file mode 100755
index 00000000..fc36ce2d
--- /dev/null
+++ b/frontend/src/assets/images/note_pro.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c4aff588be785aea224771e1bbe02b13780e7ae94a3e68799efe4a3b3d281719
+size 952410
diff --git a/frontend/src/assets/images/paper.png b/frontend/src/assets/images/paper.png
new file mode 100644
index 00000000..b0453c37
--- /dev/null
+++ b/frontend/src/assets/images/paper.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fbf45219ed4943826bdb6ddf7e8d3d279e96eb7094f419494976adfdb72de3c1
+size 3643110
diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
new file mode 100644
index 00000000..de1df13d
--- /dev/null
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -0,0 +1,993 @@
+<template>
+  <Transition name="bar-page">
+    <div v-if="visible" class="bar-page">
+      <button class="close-btn" @click="close" aria-label="关闭">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <div class="bar-background">
+        <img class="bg-top" :src="bgTop" draggable="false" />
+        <img class="bg-bottom" :src="bgBottom" draggable="false" />
+
+        <!-- 内容层：独立于背景 -->
+        <div class="bar-content">
+          <!-- Left: Board -->
+          <div class="board-container">
+            <img class="board-frame-top" :src="boardUp" draggable="false" />
+            <div class="board-scroll-area" ref="scrollAreaRef">
+              <div class="notes-scatter" :style="{ minHeight: scatterHeight }">
+                <div v-if="loading" class="board-loading">加载中...</div>
+                <div v-else-if="posts.length === 0" class="board-empty">暂无帖子</div>
+                <div
+                  v-for="post in posts"
+                  :key="post.id"
+                  class="note-card"
+                  :style="getCardStyle(post)"
+                  @click="openDetail(post)"
+                >
+                  <img class="note-bg" :src="getNoteImage(post)" draggable="false" />
+                  <div class="note-content">
+                    <h4>{{ post.title }}</h4>
+                    <p>{{ post.content_preview }}</p>
+                    <span class="note-meta">{{ post.author.nickname }} · {{ post.answer_count }} 评论</span>
+                  </div>
+                </div>
+                <div ref="sentinelRef" class="load-sentinel" />
+              </div>
+            </div>
+            <img class="board-frame-bottom" :src="boardDown" draggable="false" />
+          </div>
+
+          <!-- Right: Action buttons -->
+          <div class="side-actions">
+            <button class="side-btn" @click="openCompose" aria-label="发帖">
+              <img :src="noteImg" draggable="false" />
+            </button>
+            <button class="side-btn" @click="openCollections" aria-label="收藏">
+              <img :src="bagImg" draggable="false" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Paper Modal -->
+      <Transition name="paper-fade">
+        <div v-if="paperMode" class="paper-overlay" @click.self="closePaper">
+          <div class="paper-modal">
+            <img class="paper-bg" :src="paperImg" draggable="false" />
+            <button class="paper-close" @click="closePaper">✕</button>
+            <div class="paper-content">
+              <!-- Compose mode -->
+              <template v-if="paperMode === 'compose'">
+                <h3 class="paper-title">发布帖子</h3>
+                <input
+                  v-model="newPost.title"
+                  class="paper-input"
+                  placeholder="标题"
+                />
+                <textarea
+                  v-model="newPost.content"
+                  class="paper-textarea"
+                  placeholder="写点什么..."
+                  rows="6"
+                />
+                <button
+                  class="paper-submit"
+                  :disabled="posting || !newPost.title.trim() || !newPost.content.trim()"
+                  @click="onCreatePost"
+                >
+                  {{ posting ? '发布中...' : '发布' }}
+                </button>
+              </template>
+
+              <!-- Detail mode -->
+              <template v-if="paperMode === 'detail' && selectedDetail">
+                <h3 class="paper-title">{{ selectedDetail.title }}</h3>
+                <div class="detail-author">
+                  <span class="author-name">{{ selectedDetail.author.nickname }}</span>
+                  <span v-if="selectedDetail.author.display_tag" class="author-tag">{{ selectedDetail.author.display_tag }}</span>
+                </div>
+                <div class="detail-body">{{ selectedDetail.content }}</div>
+
+                <div class="detail-actions-bar">
+                  <button class="detail-action-btn" @click="onLikeDetailQuestion">
+                    <span :class="['icon-like', { active: selectedDetail.is_liked }]">&#9829;</span>
+                    {{ selectedDetail.like_count }}
+                  </button>
+                  <button class="detail-action-btn" @click="onCollectQuestion">
+                    <span :class="['icon-collect', { active: selectedDetail.is_collected }]">{{ selectedDetail.is_collected ? '&#9733;' : '&#9734;' }}</span>
+                    {{ selectedDetail.collection_count }}
+                  </button>
+                </div>
+
+                <div class="comments-section">
+                  <h4 class="comments-title">评论 ({{ selectedDetail.answer_count }})</h4>
+                  <div v-if="loadingAnswers" class="comments-loading">加载中...</div>
+                  <div v-for="a in answers" :key="a.id" class="comment-card">
+                    <div class="comment-header">
+                      <span class="comment-author">{{ a.author.nickname }}</span>
+                      <span v-if="a.author.display_tag" class="author-tag">{{ a.author.display_tag }}</span>
+                    </div>
+                    <p class="comment-body">{{ a.content }}</p>
+                    <div class="comment-actions">
+                      <button class="comment-like-btn" @click="onLikeAnswer(a)">
+                        <span :class="['icon-like', { active: a.is_liked }]">&#9829;</span> {{ a.like_count }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="reply-area">
+                  <input
+                    v-model="replyText"
+                    class="reply-input"
+                    placeholder="写下你的评论..."
+                    @keydown.enter="onSubmitReply"
+                  />
+                  <button class="reply-btn" :disabled="!replyText.trim()" @click="onSubmitReply">发送</button>
+                </div>
+              </template>
+
+              <!-- Collections mode -->
+              <template v-if="paperMode === 'collections'">
+                <h3 class="paper-title">我的收藏</h3>
+                <div v-if="loadingCollections" class="comments-loading">加载中...</div>
+                <div v-else-if="collectionItems.length === 0" class="board-empty">暂无收藏</div>
+                <div
+                  v-for="item in collectionItems"
+                  :key="item.id"
+                  class="collection-item"
+                  @click="openDetail(item)"
+                >
+                  <h4>{{ item.title }}</h4>
+                  <p>{{ item.content_preview }}</p>
+                  <span class="note-meta">{{ item.author.nickname }} · {{ item.answer_count }} 评论</span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted, nextTick } from 'vue'
+import { useUiStore } from '@/stores/ui'
+import {
+  getQuestions,
+  getQuestion,
+  getAnswers,
+  createQuestion,
+  createAnswer,
+  toggleLike,
+  toggleCollection,
+  getMyCollections,
+  type QuestionListItem,
+  type QuestionDetail,
+  type AnswerListItem,
+} from '@/lib/api/community'
+import { getErrorMessage } from '@/lib/apiClient'
+
+import bgTop from '@/assets/images/background_1.png'
+import bgBottom from '@/assets/images/background_2.png'
+import boardUp from '@/assets/images/board_up.png'
+import boardDown from '@/assets/images/board_down.png'
+import noteImg from '@/assets/images/note.png'
+import note1 from '@/assets/images/note_1.png'
+import note2 from '@/assets/images/note_2.png'
+import note3 from '@/assets/images/note_3.png'
+import notePro from '@/assets/images/note_pro.png'
+import bagImg from '@/assets/images/bag.png'
+import paperImg from '@/assets/images/paper.png'
+
+const uiStore = useUiStore()
+
+const visible = computed(() => uiStore.activePanel === 'bar')
+
+// Posts state
+const posts = ref<QuestionListItem[]>([])
+const loading = ref(false)
+const loadingMore = ref(false)
+const currentPage = ref(1)
+const totalPages = ref(1)
+const PAGE_SIZE = 15
+
+// Paper modal state
+type PaperMode = 'compose' | 'detail' | 'collections' | null
+const paperMode = ref<PaperMode>(null)
+
+// Compose state
+const newPost = ref({ title: '', content: '' })
+const posting = ref(false)
+
+// Detail state
+const selectedDetail = ref<QuestionDetail | null>(null)
+const answers = ref<AnswerListItem[]>([])
+const loadingAnswers = ref(false)
+const replyText = ref('')
+
+// Collections state
+const collectionItems = ref<QuestionListItem[]>([])
+const loadingCollections = ref(false)
+
+// Refs for infinite scroll
+const scrollAreaRef = ref<HTMLElement | null>(null)
+const sentinelRef = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
+
+// Note image variants
+const NOTE_VARIANTS = [note1, note2, note3]
+
+function simpleHash(str: string): number {
+  let h = 0
+  for (let i = 0; i < str.length; i++) {
+    h = ((h << 5) - h + str.charCodeAt(i)) | 0
+  }
+  return Math.abs(h)
+}
+
+function getNoteImage(post: QuestionListItem): string {
+  if (post.author.is_certified) return notePro
+  return NOTE_VARIANTS[simpleHash(post.id) % 3]
+}
+
+function getCardStyle(post: QuestionListItem) {
+  const idx = posts.value.indexOf(post)
+  const hash = simpleHash(post.id)
+  const col = idx % 3
+  const row = Math.floor(idx / 3)
+  const baseLeft = 8 + col * 30
+  const baseTop = 5 + row * 28
+  const jitterX = ((hash % 17) - 8) * 0.8
+  const jitterY = (((hash >> 4) % 13) - 6) * 0.7
+  const rotation = (((hash >> 8) % 21) - 10) * 0.8
+  return {
+    left: `${baseLeft + jitterX}%`,
+    top: `${baseTop + jitterY}%`,
+    transform: `rotate(${rotation}deg)`,
+    zIndex: (hash % 5) + 1,
+  }
+}
+
+const scatterHeight = computed(() => {
+  const rows = Math.ceil(posts.value.length / 3)
+  return `${Math.max(100, rows * 28 + 10)}%`
+})
+
+// API calls
+async function fetchPosts(page = 1) {
+  if (page === 1) {
+    loading.value = true
+  } else {
+    loadingMore.value = true
+  }
+  try {
+    const res = await getQuestions({ page, page_size: PAGE_SIZE })
+    if (page === 1) {
+      posts.value = res.items
+    } else {
+      posts.value = [...posts.value, ...res.items]
+    }
+    currentPage.value = res.page
+    totalPages.value = res.total_pages
+  } catch {
+    // silent
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+function close() {
+  uiStore.closePanel()
+}
+
+function openCompose() {
+  newPost.value = { title: '', content: '' }
+  paperMode.value = 'compose'
+}
+
+async function openDetail(q: QuestionListItem) {
+  paperMode.value = 'detail'
+  selectedDetail.value = null
+  answers.value = []
+  loadingAnswers.value = true
+  try {
+    const [detail, answerRes] = await Promise.all([
+      getQuestion(q.id),
+      getAnswers(q.id, { page: 1, page_size: 50 }),
+    ])
+    selectedDetail.value = detail
+    answers.value = answerRes.items
+  } catch {
+    // silent
+  } finally {
+    loadingAnswers.value = false
+  }
+}
+
+async function openCollections() {
+  paperMode.value = 'collections'
+  collectionItems.value = []
+  loadingCollections.value = true
+  try {
+    const res = await getMyCollections({ page: 1, page_size: 50 })
+    collectionItems.value = res.items.map((c) => c.question)
+  } catch {
+    // silent
+  } finally {
+    loadingCollections.value = false
+  }
+}
+
+function closePaper() {
+  paperMode.value = null
+  selectedDetail.value = null
+  answers.value = []
+  replyText.value = ''
+}
+
+async function onCreatePost() {
+  if (!newPost.value.title.trim() || !newPost.value.content.trim()) return
+  posting.value = true
+  try {
+    await createQuestion({
+      title: newPost.value.title,
+      content: newPost.value.content,
+      channel: 'experience',
+    })
+    paperMode.value = null
+    newPost.value = { title: '', content: '' }
+    await fetchPosts(1)
+  } catch (e) {
+    alert(getErrorMessage(e))
+  } finally {
+    posting.value = false
+  }
+}
+
+async function onLikeDetailQuestion() {
+  if (!selectedDetail.value) return
+  try {
+    const res = await toggleLike('question', selectedDetail.value.id, selectedDetail.value.is_liked)
+    selectedDetail.value = {
+      ...selectedDetail.value,
+      is_liked: res.is_liked,
+      like_count: res.new_count,
+    }
+    posts.value = posts.value.map((item) =>
+      item.id === selectedDetail.value!.id
+        ? { ...item, is_liked: res.is_liked, like_count: res.new_count }
+        : item,
+    )
+  } catch {
+    // silent
+  }
+}
+
+async function onCollectQuestion() {
+  if (!selectedDetail.value) return
+  try {
+    const res = await toggleCollection(selectedDetail.value.id, selectedDetail.value.is_collected)
+    selectedDetail.value = {
+      ...selectedDetail.value,
+      is_collected: res.is_collected,
+      collection_count: res.new_count,
+    }
+    posts.value = posts.value.map((item) =>
+      item.id === selectedDetail.value!.id
+        ? { ...item, is_collected: res.is_collected, collection_count: res.new_count }
+        : item,
+    )
+  } catch {
+    // silent
+  }
+}
+
+async function onLikeAnswer(a: AnswerListItem) {
+  try {
+    const res = await toggleLike('answer', a.id, a.is_liked)
+    answers.value = answers.value.map((ans) =>
+      ans.id === a.id ? { ...ans, is_liked: res.is_liked, like_count: res.new_count } : ans,
+    )
+  } catch {
+    // silent
+  }
+}
+
+async function onSubmitReply() {
+  if (!replyText.value.trim() || !selectedDetail.value) return
+  try {
+    await createAnswer(selectedDetail.value.id, replyText.value)
+    replyText.value = ''
+    const answerRes = await getAnswers(selectedDetail.value.id, { page: 1, page_size: 50 })
+    answers.value = answerRes.items
+    selectedDetail.value = {
+      ...selectedDetail.value,
+      answer_count: selectedDetail.value.answer_count + 1,
+    }
+  } catch (e) {
+    alert(getErrorMessage(e))
+  }
+}
+
+// Infinite scroll
+function setupObserver() {
+  if (observer) observer.disconnect()
+  if (!sentinelRef.value || !scrollAreaRef.value) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && !loadingMore.value && currentPage.value < totalPages.value) {
+        fetchPosts(currentPage.value + 1)
+      }
+    },
+    { root: scrollAreaRef.value, threshold: 0.1 },
+  )
+  observer.observe(sentinelRef.value)
+}
+
+watch(visible, (v) => {
+  if (v) {
+    fetchPosts(1)
+    nextTick(setupObserver)
+  } else {
+    paperMode.value = null
+    if (observer) observer.disconnect()
+  }
+})
+
+watch(posts, () => {
+  nextTick(setupObserver)
+})
+
+onUnmounted(() => {
+  if (observer) observer.disconnect()
+})
+</script>
+
+<style scoped>
+.bar-page {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  overflow: hidden;
+  background-color: #3a2f28;
+}
+
+.close-btn {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 160;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.close-btn:hover {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+/* Background layout */
+.bar-background {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 背景图：独立绝对定位 */
+.bg-top,
+.bg-bottom {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.bg-top {
+  top: 0;
+}
+
+.bg-bottom {
+  bottom: 0;
+}
+
+/* 内容层 */
+.bar-content {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 4%;
+  padding-bottom: 5vh;
+}
+
+/* Board container */
+.board-container {
+  width: 80%;
+  height: 65vh;
+  align-self: flex-start;
+  margin-top: 1vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.board-frame-top,
+.board-frame-bottom {
+  width: 100%;
+  display: block;
+  flex-shrink: 0;
+  z-index: 3;
+  position: relative;
+}
+
+.board-scroll-area {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+  background: url('@/assets/images/board_med.png') repeat-y center / 100% auto;
+  min-height: 0;
+  position: relative;
+}
+
+.board-scroll-area::-webkit-scrollbar {
+  display: none;
+}
+
+/* Notes scatter */
+.notes-scatter {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+}
+
+.board-loading,
+.board-empty {
+  text-align: center;
+  padding: 40px 0;
+  color: #5a3e2b;
+  font-size: 14px;
+}
+
+.note-card {
+  position: absolute;
+  width: 26%;
+  cursor: pointer;
+  transition: transform 0.2s, z-index 0s;
+}
+
+.note-card:hover {
+  transform: scale(1.05) !important;
+  z-index: 10 !important;
+}
+
+.note-bg {
+  width: 100%;
+  display: block;
+  pointer-events: none;
+}
+
+.note-content {
+  position: absolute;
+  inset: 15% 12% 18% 12%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.note-content h4 {
+  font-size: 11px;
+  font-weight: 700;
+  color: #3a2a1a;
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.note-content p {
+  font-size: 9px;
+  color: #5a4a3a;
+  line-height: 1.4;
+  margin: 0;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.note-meta {
+  font-size: 8px;
+  color: #8a7a6a;
+  margin-top: auto;
+}
+
+.load-sentinel {
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+}
+
+/* Side actions */
+.side-actions {
+  width: 18%;
+  margin-left: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: 0 2%;
+}
+
+.side-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.2s;
+}
+
+.side-btn:hover {
+  transform: scale(1.08);
+}
+
+.side-btn img {
+  width: min(100px, 12vw);
+  height: auto;
+}
+
+/* Paper overlay */
+.paper-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 150;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.paper-modal {
+  position: relative;
+  width: min(500px, 85vw);
+  max-height: 85vh;
+}
+
+.paper-bg {
+  width: 100%;
+  display: block;
+  pointer-events: none;
+}
+
+.paper-close {
+  position: absolute;
+  top: 8%;
+  right: 10%;
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #5a3e2b;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.paper-content {
+  position: absolute;
+  inset: 12% 14% 10% 14%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.paper-content::-webkit-scrollbar {
+  display: none;
+}
+
+.paper-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #3a2a1a;
+  margin: 0 0 12px;
+}
+
+.paper-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #c4a882;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.4);
+  font-size: 14px;
+  color: #3a2a1a;
+  outline: none;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+}
+
+.paper-input:focus {
+  border-color: #8a6a4a;
+}
+
+.paper-textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #c4a882;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.4);
+  font-size: 14px;
+  color: #3a2a1a;
+  outline: none;
+  resize: vertical;
+  font-family: inherit;
+  margin-bottom: 12px;
+  box-sizing: border-box;
+}
+
+.paper-textarea:focus {
+  border-color: #8a6a4a;
+}
+
+.paper-submit {
+  align-self: flex-end;
+  padding: 8px 24px;
+  background: #8a6a4a;
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.paper-submit:hover {
+  background: #6a4a2a;
+}
+
+.paper-submit:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Detail mode */
+.detail-author {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #5a4a3a;
+}
+
+.author-name {
+  font-weight: 600;
+}
+
+.author-tag {
+  display: inline-block;
+  padding: 1px 8px;
+  background: rgba(180, 130, 80, 0.2);
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #8a6a4a;
+}
+
+.detail-body {
+  font-size: 14px;
+  color: #3a2a1a;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(90, 62, 43, 0.15);
+}
+
+.detail-actions-bar {
+  display: flex;
+  gap: 14px;
+  margin-bottom: 16px;
+}
+
+.detail-action-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  background: rgba(138, 106, 74, 0.1);
+  border: 1px solid rgba(138, 106, 74, 0.2);
+  border-radius: 8px;
+  color: #5a4a3a;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.detail-action-btn:hover {
+  background: rgba(138, 106, 74, 0.2);
+}
+
+.icon-like {
+  color: #8a7a6a;
+  transition: color 0.15s;
+}
+
+.icon-like.active {
+  color: #e74c5e;
+}
+
+.icon-collect {
+  font-size: 14px;
+}
+
+.icon-collect.active {
+  color: #e7a84c;
+}
+
+/* Comments section */
+.comments-section {
+  flex: 1;
+  min-height: 0;
+}
+
+.comments-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3a2a1a;
+  margin: 0 0 10px;
+}
+
+.comments-loading {
+  text-align: center;
+  padding: 20px 0;
+  color: #8a7a6a;
+  font-size: 13px;
+}
+
+.comment-card {
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(90, 62, 43, 0.1);
+}
+
+.comment-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.comment-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: #3a2a1a;
+}
+
+.comment-body {
+  font-size: 13px;
+  color: #5a4a3a;
+  line-height: 1.5;
+  margin: 0 0 4px;
+}
+
+.comment-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.comment-like-btn {
+  background: none;
+  border: none;
+  color: #8a7a6a;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* Reply area */
+.reply-area {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  flex-shrink: 0;
+}
+
+.reply-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #c4a882;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.4);
+  font-size: 13px;
+  color: #3a2a1a;
+  outline: none;
+}
+
+.reply-input:focus {
+  border-color: #8a6a4a;
+}
+
+.reply-btn {
+  padding: 8px 16px;
+  background: #8a6a4a;
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.reply-btn:disabled {
+  opacity: 0.5;
+}
+
+/* Collections mode */
+.collection-item {
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(90, 62, 43, 0.1);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.collection-item:hover {
+  background: rgba(138, 106, 74, 0.06);
+}
+
+.collection-item h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3a2a1a;
+  margin: 0 0 4px;
+}
+
+.collection-item p {
+  font-size: 12px;
+  color: #5a4a3a;
+  line-height: 1.4;
+  margin: 0 0 4px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Transitions */
+.bar-page-enter-active,
+.bar-page-leave-active {
+  transition: opacity 0.35s ease;
+}
+
+.bar-page-enter-from,
+.bar-page-leave-to {
+  opacity: 0;
+}
+
+.paper-fade-enter-active,
+.paper-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.paper-fade-enter-from,
+.paper-fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/frontend/src/components/scene/SpritesLayer.vue b/frontend/src/components/scene/SpritesLayer.vue
index 13b774ef..53a82421 100644
--- a/frontend/src/components/scene/SpritesLayer.vue
+++ b/frontend/src/components/scene/SpritesLayer.vue
@@ -131,7 +131,7 @@ function onSpriteClick(id: string) {
   else if (id === 'shell') uiStore.openFeature('memory')
   else if (id === 'star') uiStore.openFeature('task')
   else if (id === 'conque') uiStore.openFeature('whisper')
-  else if (id === 'bar') uiStore.openFeature('community')
+  else if (id === 'bar') uiStore.openFeature('bar')
   else if (id === 'stone') uiStore.openFeature('chat')
   else if (id === 'crab') showCrabHint()
 }
diff --git a/frontend/src/stores/ui.ts b/frontend/src/stores/ui.ts
index 8879b85e..cd836995 100644
--- a/frontend/src/stores/ui.ts
+++ b/frontend/src/stores/ui.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { useAuthStore } from './auth'
 
-export type PanelName = 'auth' | 'role' | 'memory' | 'community' | 'chat' | 'car' | 'whisper' | 'task' | null
+export type PanelName = 'auth' | 'role' | 'memory' | 'community' | 'chat' | 'car' | 'bar' | 'whisper' | 'task' | null
 export type AuthMode = 'login' | 'register' | 'guest'
 
 export const useUiStore = defineStore('ui', () => {
@@ -28,7 +28,7 @@ export const useUiStore = defineStore('ui', () => {
   }
 
   /** Open a feature panel, but intercept if guest → force auth */
-  function openFeature(panel: 'car' | 'memory' | 'community' | 'chat' | 'whisper' | 'task') {
+  function openFeature(panel: 'car' | 'memory' | 'community' | 'chat' | 'bar' | 'whisper' | 'task') {
     const auth = useAuthStore()
     if (!auth.isAuthenticated && !auth.isGuest) {
       openAuth()

From eef303e3bfcead1dd2f65b2cbe3eeee9d5d3648d Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Tue, 10 Mar 2026 19:33:14 +0800
Subject: [PATCH 02/22] feat(bar): transform

---
 frontend/src/components/overlay/BarPage.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index de1df13d..e494ed46 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -500,10 +500,13 @@ onUnmounted(() => {
 
 .bg-top {
   top: 0;
+  transform: scale(1.25);
+  transform-origin: top center;
 }
 
 .bg-bottom {
   bottom: 0;
+  clip-path: inset(25% 0 0 0);
 }
 
 /* 内容层 */
@@ -652,10 +655,26 @@ onUnmounted(() => {
 }
 
 .side-btn img {
-  width: min(100px, 12vw);
+  width: min(200px, 24vw);
   height: auto;
 }
 
+.side-btn:first-child {
+  transform: translateY(-60px);
+}
+
+.side-btn:last-child {
+  transform: translateY(60px);
+}
+
+.side-btn:first-child:hover {
+  transform: translateY(-60px) scale(1.08);
+}
+
+.side-btn:last-child:hover {
+  transform: translateY(60px) scale(1.08);
+}
+
 /* Paper overlay */
 .paper-overlay {
   position: fixed;

From 11aa9a9496d7d33f2d33e688fe67b9e1d6e02235 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Tue, 10 Mar 2026 20:55:30 +0800
Subject: [PATCH 03/22] feat(bar): bg-2:scaleY0.8

---
 frontend/src/components/overlay/BarPage.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index e494ed46..893aa10f 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -500,13 +500,14 @@ onUnmounted(() => {
 
 .bg-top {
   top: 0;
-  transform: scale(1.25);
+  transform: scaleY(1.25);
   transform-origin: top center;
 }
 
 .bg-bottom {
   bottom: 0;
-  clip-path: inset(25% 0 0 0);
+  transform: scaleY(0.75);
+  transform-origin: bottom center;
 }
 
 /* 内容层 */

From e75c85b1218ada43c5430632498c8f4d76247388 Mon Sep 17 00:00:00 2001
From: Koishi <koishi510@sjtu.edu.cn>
Date: Tue, 10 Mar 2026 22:29:54 +0800
Subject: [PATCH 04/22] feat(bar): restructure board layers and fix avatar
 fallback

- Move board frame images inside scroll area with position: sticky
  so notes (z-index 2-6) render above frames (z-index 1) and
  below bg-bottom (z-index 3)
- Add @error fallback on avatar <img> tags in CommunityPanel and
  CarPage to show default avatar when file is missing
- Update bag.png asset and bg-bottom scaleY

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/images/bag.png            |  4 +--
 frontend/src/components/overlay/BarPage.vue   | 28 ++++++++++++-------
 frontend/src/components/overlay/CarPage.vue   | 16 ++++++++---
 .../src/components/overlay/CommunityPanel.vue | 16 ++++++++---
 4 files changed, 44 insertions(+), 20 deletions(-)
 mode change 100755 => 100644 frontend/src/assets/images/bag.png

diff --git a/frontend/src/assets/images/bag.png b/frontend/src/assets/images/bag.png
old mode 100755
new mode 100644
index b2936ad3..9512178a
--- a/frontend/src/assets/images/bag.png
+++ b/frontend/src/assets/images/bag.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d0b7188949856aa287a9f9ffa5ce5f0a55671ba45c5c31bef0cea2584c4f1f34
-size 3716310
+oid sha256:cc08c036e714a39495077764fa0a4e7774c792dbd8050c9af7e5bd158ca82d45
+size 2423652
diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 893aa10f..19d43bdb 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -15,8 +15,8 @@
         <div class="bar-content">
           <!-- Left: Board -->
           <div class="board-container">
-            <img class="board-frame-top" :src="boardUp" draggable="false" />
             <div class="board-scroll-area" ref="scrollAreaRef">
+              <img class="board-frame-top" :src="boardUp" draggable="false" />
               <div class="notes-scatter" :style="{ minHeight: scatterHeight }">
                 <div v-if="loading" class="board-loading">加载中...</div>
                 <div v-else-if="posts.length === 0" class="board-empty">暂无帖子</div>
@@ -36,8 +36,8 @@
                 </div>
                 <div ref="sentinelRef" class="load-sentinel" />
               </div>
+              <img class="board-frame-bottom" :src="boardDown" draggable="false" />
             </div>
-            <img class="board-frame-bottom" :src="boardDown" draggable="false" />
           </div>
 
           <!-- Right: Action buttons -->
@@ -249,7 +249,7 @@ function getCardStyle(post: QuestionListItem) {
     left: `${baseLeft + jitterX}%`,
     top: `${baseTop + jitterY}%`,
     transform: `rotate(${rotation}deg)`,
-    zIndex: (hash % 5) + 1,
+    zIndex: (hash % 5) + 2,
   }
 }
 
@@ -506,8 +506,10 @@ onUnmounted(() => {
 
 .bg-bottom {
   bottom: 0;
-  transform: scaleY(0.75);
+  transform: scaleY(1);
   transform-origin: bottom center;
+  z-index: 3;
+  pointer-events: none;
 }
 
 /* 内容层 */
@@ -529,8 +531,6 @@ onUnmounted(() => {
   height: 65vh;
   align-self: flex-start;
   margin-top: 1vh;
-  display: flex;
-  flex-direction: column;
   min-height: 0;
 }
 
@@ -538,13 +538,21 @@ onUnmounted(() => {
 .board-frame-bottom {
   width: 100%;
   display: block;
-  flex-shrink: 0;
-  z-index: 3;
-  position: relative;
+  z-index: 1;
+  position: sticky;
+  pointer-events: none;
+}
+
+.board-frame-top {
+  top: 0;
+}
+
+.board-frame-bottom {
+  bottom: 0;
 }
 
 .board-scroll-area {
-  flex: 1;
+  height: 100%;
   overflow-y: auto;
   scrollbar-width: none;
   background: url('@/assets/images/board_med.png') repeat-y center / 100% auto;
diff --git a/frontend/src/components/overlay/CarPage.vue b/frontend/src/components/overlay/CarPage.vue
index c6e1e346..718f7eb0 100644
--- a/frontend/src/components/overlay/CarPage.vue
+++ b/frontend/src/components/overlay/CarPage.vue
@@ -37,11 +37,11 @@
         <div class="right-section">
           <div class="avatars">
             <div class="avatar-wrapper">
-              <img class="avatar-photo" :class="{ 'avatar-custom': hasPartnerCustomAvatar }" :src="partnerAvatarUrl" alt="partner avatar" />
+              <img class="avatar-photo" :class="{ 'avatar-custom': hasPartnerCustomAvatar }" :src="partnerAvatarUrl" alt="partner avatar" @error="onAvatarImgError" />
               <img class="avatar-frame" :src="avatarFrame" alt="partner frame" />
             </div>
             <div class="avatar-wrapper">
-              <img class="avatar-photo" :class="{ 'avatar-custom': hasCustomAvatar }" :src="profileAvatarUrl" alt="my avatar" />
+              <img class="avatar-photo" :class="{ 'avatar-custom': hasCustomAvatar }" :src="profileAvatarUrl" alt="my avatar" @error="onAvatarImgError" />
               <img class="avatar-frame" :src="avatarFrame" alt="my frame" />
             </div>
           </div>
@@ -168,7 +168,7 @@
 
             <div class="profile-header">
               <div class="profile-avatar" @click="triggerAvatarUpload">
-                <img v-if="profileAvatarUrl" :src="profileAvatarUrl" alt="avatar" />
+                <img v-if="profileAvatarUrl" :src="profileAvatarUrl" alt="avatar" @error="onAvatarImgError" />
                 <span v-else class="avatar-placeholder">{{ displayInitial }}</span>
                 <span class="avatar-edit-hint">{{ avatarUploading ? '...' : '✎' }}</span>
                 <input
@@ -299,7 +299,7 @@
                     <label class="form-label">头像</label>
                     <div class="avatar-upload-row">
                       <div class="avatar-preview-small">
-                        <img v-if="profileAvatarUrl" :src="profileAvatarUrl" alt="avatar" />
+                        <img v-if="profileAvatarUrl" :src="profileAvatarUrl" alt="avatar" @error="onAvatarImgError" />
                         <span v-else class="avatar-placeholder-small">{{ displayInitial }}</span>
                       </div>
                       <button class="upload-btn" :disabled="avatarUploading" @click="triggerAvatarUpload">
@@ -640,6 +640,14 @@ const profileAvatarUrl = computed(() => profile.value?.avatar_url || auth.user?.
 const hasCustomAvatar = computed(() => !!(profile.value?.avatar_url || auth.user?.avatar_url))
 const partnerAvatarUrl = computed(() => profile.value?.partner?.avatar_url || avatarDefault)
 const hasPartnerCustomAvatar = computed(() => !!profile.value?.partner?.avatar_url)
+
+function onAvatarImgError(e: Event) {
+  const img = e.target as HTMLImageElement
+  if (!img.dataset.fallback) {
+    img.dataset.fallback = '1'
+    img.src = avatarDefault
+  }
+}
 const roleName = computed(() => roleMap[profile.value?.role || auth.user?.role || 'mom'] || '溯源者')
 const isAdmin = computed(() => !!(profile.value?.is_admin || auth.user?.is_admin))
 const { backgroundMusicVolume, isBackgroundMusicPlaying, setBackgroundMusicVolume } = useBackgroundMusicControls()
diff --git a/frontend/src/components/overlay/CommunityPanel.vue b/frontend/src/components/overlay/CommunityPanel.vue
index a03f8732..63dd005c 100644
--- a/frontend/src/components/overlay/CommunityPanel.vue
+++ b/frontend/src/components/overlay/CommunityPanel.vue
@@ -44,7 +44,7 @@
               <span v-for="tag in q.tags" :key="tag.id" class="q-tag">{{ tag.name }}</span>
             </div>
             <div class="q-meta">
-              <img :src="getAvatar(q.author)" class="meta-avatar" />
+              <img :src="getAvatar(q.author)" class="meta-avatar" @error="onAvatarError" />
               <span>{{ q.author.nickname }}</span>
               <span class="author-tag">{{ q.author.display_tag }}</span>
               <span>· {{ q.answer_count }} 回答</span>
@@ -116,7 +116,7 @@
             <template v-else>
               <h2 class="detail-title">{{ selectedDetail.title }}</h2>
               <div class="detail-author">
-                <img :src="getAvatar(selectedDetail.author)" class="author-avatar" />
+                <img :src="getAvatar(selectedDetail.author)" class="author-avatar" @error="onAvatarError" />
                 <span>{{ selectedDetail.author.nickname }}</span>
                 <span class="author-tag">{{ selectedDetail.author.display_tag }}</span>
                 <span v-if="canModify(selectedDetail.author.id)" class="modify-actions">
@@ -146,7 +146,7 @@
               <div v-if="loadingAnswers" class="loading-state">加载中...</div>
               <div v-for="a in answers" :key="a.id" class="answer-card">
                 <div class="answer-author">
-                  <img :src="getAvatar(a.author)" class="author-avatar" />
+                  <img :src="getAvatar(a.author)" class="author-avatar" @error="onAvatarError" />
                   <span>{{ a.author.nickname }}</span>
                   <span class="author-tag">{{ a.author.display_tag }}</span>
                   <span v-if="canModify(a.author.id)" class="modify-actions">
@@ -178,7 +178,7 @@
                   <template v-else>
                     <div v-for="c in commentsMap[a.id] || []" :key="c.id" class="comment-item">
                       <div class="comment-header">
-                        <img :src="getAvatar(c.author)" class="comment-avatar" />
+                        <img :src="getAvatar(c.author)" class="comment-avatar" @error="onAvatarError" />
                         <span class="comment-author">{{ c.author.nickname }}</span>
                         <span v-if="c.reply_to_user" class="reply-to">@{{ c.reply_to_user.nickname }}</span>
                       </div>
@@ -304,6 +304,14 @@ function getAvatar(author: { avatar_url: string | null; role: string }) {
   return author.avatar_url || avatarDefault
 }
 
+function onAvatarError(e: Event) {
+  const img = e.target as HTMLImageElement
+  if (!img.dataset.fallback) {
+    img.dataset.fallback = '1'
+    img.src = avatarDefault
+  }
+}
+
 async function fetchQuestions(page = 1) {
   if (page === 1) {
     loading.value = true

From dad4128acfd733c08a55db6ec26f250265afc3d6 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Tue, 10 Mar 2026 23:39:50 +0800
Subject: [PATCH 05/22] feat(bar): louzhonglou

---
 frontend/src/components/overlay/BarPage.vue | 193 +++++++++++++++++++-
 1 file changed, 185 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 19d43bdb..88115fba 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -115,15 +115,57 @@
                       <button class="comment-like-btn" @click="onLikeAnswer(a)">
                         <span :class="['icon-like', { active: a.is_liked }]">&#9829;</span> {{ a.like_count }}
                       </button>
+                      <button class="comment-like-btn" @click="toggleAnswerComments(a)">
+                        &#128172; {{ a.comment_count }}
+                      </button>
+                      <button class="comment-like-btn" @click="setReplyTarget(a.id)">
+                        回复
+                      </button>
+                    </div>
+
+                    <!-- Nested comments -->
+                    <div v-if="loadingComments[a.id]" class="sub-comments-loading">加载中...</div>
+                    <div v-if="answerComments[a.id]" class="sub-comments">
+                      <div v-for="c in answerComments[a.id]" :key="c.id" class="sub-comment">
+                        <span class="sub-comment-author">{{ c.author.nickname }}</span>
+                        <span v-if="c.reply_to_user" class="sub-comment-reply-hint">回复 {{ c.reply_to_user.nickname }}</span>
+                        <span class="sub-comment-text">{{ c.content }}</span>
+                        <div class="sub-comment-actions">
+                          <button class="comment-like-btn" @click="onLikeComment(a.id, c)">
+                            <span :class="['icon-like', { active: c.is_liked }]">&#9829;</span> {{ c.like_count }}
+                          </button>
+                          <button class="comment-like-btn" @click="setReplyTarget(a.id, c.id, c.author.nickname)">
+                            回复
+                          </button>
+                        </div>
+                        <!-- Nested replies -->
+                        <div v-for="r in c.replies" :key="r.id" class="sub-comment nested">
+                          <span class="sub-comment-author">{{ r.author.nickname }}</span>
+                          <span v-if="r.reply_to_user" class="sub-comment-reply-hint">回复 {{ r.reply_to_user.nickname }}</span>
+                          <span class="sub-comment-text">{{ r.content }}</span>
+                          <div class="sub-comment-actions">
+                            <button class="comment-like-btn" @click="onLikeComment(a.id, r)">
+                              <span :class="['icon-like', { active: r.is_liked }]">&#9829;</span> {{ r.like_count }}
+                            </button>
+                            <button class="comment-like-btn" @click="setReplyTarget(a.id, r.id, r.author.nickname)">
+                              回复
+                            </button>
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
 
                 <div class="reply-area">
+                  <div v-if="replyTarget" class="reply-target-hint">
+                    回复 {{ replyTarget.replyToName || '评论' }}
+                    <button class="reply-target-clear" @click="clearReplyTarget">✕</button>
+                  </div>
                   <input
                     v-model="replyText"
                     class="reply-input"
-                    placeholder="写下你的评论..."
+                    :placeholder="replyTarget ? `回复 ${replyTarget.replyToName || '评论'}...` : '写下你的评论...'"
                     @keydown.enter="onSubmitReply"
                   />
                   <button class="reply-btn" :disabled="!replyText.trim()" @click="onSubmitReply">发送</button>
@@ -163,12 +205,15 @@ import {
   getAnswers,
   createQuestion,
   createAnswer,
+  getComments,
+  createComment,
   toggleLike,
   toggleCollection,
   getMyCollections,
   type QuestionListItem,
   type QuestionDetail,
   type AnswerListItem,
+  type CommentListItem,
 } from '@/lib/api/community'
 import { getErrorMessage } from '@/lib/apiClient'
 
@@ -210,6 +255,15 @@ const answers = ref<AnswerListItem[]>([])
 const loadingAnswers = ref(false)
 const replyText = ref('')
 
+// Nested comments state
+const answerComments = ref<Record<string, CommentListItem[]>>({})
+const loadingComments = ref<Record<string, boolean>>({})
+const replyTarget = ref<{
+  answerId: string
+  parentId?: string
+  replyToName?: string
+} | null>(null)
+
 // Collections state
 const collectionItems = ref<QuestionListItem[]>([])
 const loadingCollections = ref(false)
@@ -329,6 +383,9 @@ function closePaper() {
   selectedDetail.value = null
   answers.value = []
   replyText.value = ''
+  answerComments.value = {}
+  loadingComments.value = {}
+  replyTarget.value = null
 }
 
 async function onCreatePost() {
@@ -399,22 +456,80 @@ async function onLikeAnswer(a: AnswerListItem) {
   }
 }
 
+async function toggleAnswerComments(a: AnswerListItem) {
+  if (answerComments.value[a.id]) {
+    delete answerComments.value[a.id]
+    return
+  }
+  loadingComments.value[a.id] = true
+  try {
+    answerComments.value[a.id] = await getComments(a.id)
+  } catch {
+    // silent
+  } finally {
+    loadingComments.value[a.id] = false
+  }
+}
+
+function setReplyTarget(answerId: string, parentId?: string, replyToName?: string) {
+  replyTarget.value = { answerId, parentId, replyToName }
+  replyText.value = ''
+}
+
+function clearReplyTarget() {
+  replyTarget.value = null
+}
+
 async function onSubmitReply() {
   if (!replyText.value.trim() || !selectedDetail.value) return
   try {
-    await createAnswer(selectedDetail.value.id, replyText.value)
-    replyText.value = ''
-    const answerRes = await getAnswers(selectedDetail.value.id, { page: 1, page_size: 50 })
-    answers.value = answerRes.items
-    selectedDetail.value = {
-      ...selectedDetail.value,
-      answer_count: selectedDetail.value.answer_count + 1,
+    if (replyTarget.value) {
+      const { answerId, parentId } = replyTarget.value
+      await createComment(answerId, {
+        content: replyText.value,
+        parent_id: parentId,
+      })
+      answerComments.value[answerId] = await getComments(answerId)
+      replyTarget.value = null
+    } else {
+      await createAnswer(selectedDetail.value.id, replyText.value)
+      const answerRes = await getAnswers(selectedDetail.value.id, { page: 1, page_size: 50 })
+      answers.value = answerRes.items
+      selectedDetail.value = {
+        ...selectedDetail.value,
+        answer_count: selectedDetail.value.answer_count + 1,
+      }
     }
+    replyText.value = ''
   } catch (e) {
     alert(getErrorMessage(e))
   }
 }
 
+function updateCommentInList(
+  list: CommentListItem[],
+  targetId: string,
+  res: { is_liked: boolean; new_count: number },
+): CommentListItem[] {
+  return list.map((c) =>
+    c.id === targetId
+      ? { ...c, is_liked: res.is_liked, like_count: res.new_count }
+      : { ...c, replies: updateCommentInList(c.replies, targetId, res) },
+  )
+}
+
+async function onLikeComment(answerId: string, c: CommentListItem) {
+  try {
+    const res = await toggleLike('comment', c.id, c.is_liked)
+    const comments = answerComments.value[answerId]
+    if (comments) {
+      answerComments.value[answerId] = updateCommentInList(comments, c.id, res)
+    }
+  } catch {
+    // silent
+  }
+}
+
 // Infinite scroll
 function setupObserver() {
   if (observer) observer.disconnect()
@@ -937,6 +1052,68 @@ onUnmounted(() => {
   gap: 8px;
   margin-top: 12px;
   flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.reply-target-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: #8a6a4a;
+  margin-bottom: 4px;
+  width: 100%;
+}
+
+.reply-target-clear {
+  background: none;
+  border: none;
+  color: #8a7a6a;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+}
+
+/* Nested comments */
+.sub-comments {
+  margin-top: 6px;
+  padding-left: 16px;
+  border-left: 2px solid rgba(90, 62, 43, 0.1);
+}
+
+.sub-comments-loading {
+  padding: 6px 0 6px 16px;
+  color: #8a7a6a;
+  font-size: 11px;
+}
+
+.sub-comment {
+  padding: 4px 0;
+  font-size: 12px;
+  color: #5a4a3a;
+  line-height: 1.5;
+}
+
+.sub-comment.nested {
+  padding-left: 16px;
+}
+
+.sub-comment-author {
+  font-weight: 600;
+  color: #3a2a1a;
+  margin-right: 4px;
+}
+
+.sub-comment-reply-hint {
+  color: #8a7a6a;
+  margin-right: 4px;
+  font-size: 11px;
+}
+
+.sub-comment-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 2px;
 }
 
 .reply-input {

From e8253bc0cede15b73540796156cb0a558410af82 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Tue, 10 Mar 2026 23:46:29 +0800
Subject: [PATCH 06/22] feat(bar): at

---
 frontend/src/components/overlay/BarPage.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 88115fba..c46cd1a3 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -128,7 +128,7 @@
                     <div v-if="answerComments[a.id]" class="sub-comments">
                       <div v-for="c in answerComments[a.id]" :key="c.id" class="sub-comment">
                         <span class="sub-comment-author">{{ c.author.nickname }}</span>
-                        <span v-if="c.reply_to_user" class="sub-comment-reply-hint">回复 {{ c.reply_to_user.nickname }}</span>
+                        <span v-if="c.reply_to_user" class="sub-comment-reply-hint">回复 @{{ c.reply_to_user.nickname }}</span>
                         <span class="sub-comment-text">{{ c.content }}</span>
                         <div class="sub-comment-actions">
                           <button class="comment-like-btn" @click="onLikeComment(a.id, c)">
@@ -141,7 +141,7 @@
                         <!-- Nested replies -->
                         <div v-for="r in c.replies" :key="r.id" class="sub-comment nested">
                           <span class="sub-comment-author">{{ r.author.nickname }}</span>
-                          <span v-if="r.reply_to_user" class="sub-comment-reply-hint">回复 {{ r.reply_to_user.nickname }}</span>
+                          <span v-if="r.reply_to_user" class="sub-comment-reply-hint">回复 @{{ r.reply_to_user.nickname }}</span>
                           <span class="sub-comment-text">{{ r.content }}</span>
                           <div class="sub-comment-actions">
                             <button class="comment-like-btn" @click="onLikeComment(a.id, r)">
@@ -159,13 +159,13 @@
 
                 <div class="reply-area">
                   <div v-if="replyTarget" class="reply-target-hint">
-                    回复 {{ replyTarget.replyToName || '评论' }}
+                    回复 @{{ replyTarget.replyToName || '评论' }}
                     <button class="reply-target-clear" @click="clearReplyTarget">✕</button>
                   </div>
                   <input
                     v-model="replyText"
                     class="reply-input"
-                    :placeholder="replyTarget ? `回复 ${replyTarget.replyToName || '评论'}...` : '写下你的评论...'"
+                    :placeholder="replyTarget ? `回复 @${replyTarget.replyToName || '评论'}...` : '写下你的评论...'"
                     @keydown.enter="onSubmitReply"
                   />
                   <button class="reply-btn" :disabled="!replyText.trim()" @click="onSubmitReply">发送</button>

From 35407d09442fc10db1d155a346a835aa2e3623c2 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Tue, 10 Mar 2026 23:58:38 +0800
Subject: [PATCH 07/22] feat(bar): the comments area scroll independently
 within its flex-allocated space

---
 frontend/src/components/overlay/BarPage.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index c46cd1a3..96f07eef 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -991,6 +991,8 @@ onUnmounted(() => {
 .comments-section {
   flex: 1;
   min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: none;
 }
 
 .comments-title {

From d3a19c2f123f93d0b564efe34446228f16f78970 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Wed, 11 Mar 2026 00:07:55 +0800
Subject: [PATCH 08/22] feat(bar): add avatars

---
 frontend/src/components/overlay/BarPage.vue | 56 ++++++++++++++++++++-
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 96f07eef..907bc6e5 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -31,7 +31,7 @@
                   <div class="note-content">
                     <h4>{{ post.title }}</h4>
                     <p>{{ post.content_preview }}</p>
-                    <span class="note-meta">{{ post.author.nickname }} · {{ post.answer_count }} 评论</span>
+                    <span class="note-meta"><img :src="getAvatar(post.author)" class="note-meta-avatar" @error="onAvatarError" />{{ post.author.nickname }} · {{ post.answer_count }} 评论</span>
                   </div>
                 </div>
                 <div ref="sentinelRef" class="load-sentinel" />
@@ -86,6 +86,7 @@
               <template v-if="paperMode === 'detail' && selectedDetail">
                 <h3 class="paper-title">{{ selectedDetail.title }}</h3>
                 <div class="detail-author">
+                  <img :src="getAvatar(selectedDetail.author)" class="detail-avatar" @error="onAvatarError" />
                   <span class="author-name">{{ selectedDetail.author.nickname }}</span>
                   <span v-if="selectedDetail.author.display_tag" class="author-tag">{{ selectedDetail.author.display_tag }}</span>
                 </div>
@@ -107,6 +108,7 @@
                   <div v-if="loadingAnswers" class="comments-loading">加载中...</div>
                   <div v-for="a in answers" :key="a.id" class="comment-card">
                     <div class="comment-header">
+                      <img :src="getAvatar(a.author)" class="comment-avatar" @error="onAvatarError" />
                       <span class="comment-author">{{ a.author.nickname }}</span>
                       <span v-if="a.author.display_tag" class="author-tag">{{ a.author.display_tag }}</span>
                     </div>
@@ -127,6 +129,7 @@
                     <div v-if="loadingComments[a.id]" class="sub-comments-loading">加载中...</div>
                     <div v-if="answerComments[a.id]" class="sub-comments">
                       <div v-for="c in answerComments[a.id]" :key="c.id" class="sub-comment">
+                        <img :src="getAvatar(c.author)" class="sub-comment-avatar" @error="onAvatarError" />
                         <span class="sub-comment-author">{{ c.author.nickname }}</span>
                         <span v-if="c.reply_to_user" class="sub-comment-reply-hint">回复 @{{ c.reply_to_user.nickname }}</span>
                         <span class="sub-comment-text">{{ c.content }}</span>
@@ -140,6 +143,7 @@
                         </div>
                         <!-- Nested replies -->
                         <div v-for="r in c.replies" :key="r.id" class="sub-comment nested">
+                          <img :src="getAvatar(r.author)" class="sub-comment-avatar" @error="onAvatarError" />
                           <span class="sub-comment-author">{{ r.author.nickname }}</span>
                           <span v-if="r.reply_to_user" class="sub-comment-reply-hint">回复 @{{ r.reply_to_user.nickname }}</span>
                           <span class="sub-comment-text">{{ r.content }}</span>
@@ -185,7 +189,7 @@
                 >
                   <h4>{{ item.title }}</h4>
                   <p>{{ item.content_preview }}</p>
-                  <span class="note-meta">{{ item.author.nickname }} · {{ item.answer_count }} 评论</span>
+                  <span class="note-meta"><img :src="getAvatar(item.author)" class="note-meta-avatar" @error="onAvatarError" />{{ item.author.nickname }} · {{ item.answer_count }} 评论</span>
                 </div>
               </template>
             </div>
@@ -228,6 +232,21 @@ import note3 from '@/assets/images/note_3.png'
 import notePro from '@/assets/images/note_pro.png'
 import bagImg from '@/assets/images/bag.png'
 import paperImg from '@/assets/images/paper.png'
+import avatarDefault from '@/assets/images/avatar.png'
+import aiAvatar from '@/assets/images/ai_avatar.png'
+
+function getAvatar(author: { avatar_url: string | null; role: string }) {
+  if (author.role === 'ai_assistant') return aiAvatar
+  return author.avatar_url || avatarDefault
+}
+
+function onAvatarError(e: Event) {
+  const img = e.target as HTMLImageElement
+  if (!img.dataset.fallback) {
+    img.dataset.fallback = '1'
+    img.src = avatarDefault
+  }
+}
 
 const uiStore = useUiStore()
 
@@ -747,6 +766,39 @@ onUnmounted(() => {
   margin-top: auto;
 }
 
+/* Avatar styles */
+.note-meta-avatar {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  object-fit: cover;
+  vertical-align: middle;
+  margin-right: 2px;
+}
+
+.detail-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.comment-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.sub-comment-avatar {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  object-fit: cover;
+  vertical-align: middle;
+  margin-right: 2px;
+}
+
 .load-sentinel {
   height: 1px;
   width: 100%;

From 53795b5fc592d88d954948a21d1792a0f20d2395 Mon Sep 17 00:00:00 2001
From: Koishi <koishi510@sjtu.edu.cn>
Date: Wed, 11 Mar 2026 00:17:02 +0800
Subject: [PATCH 09/22] feat(bar): board scrolls as whole unit and AI replies
 to all posts

- Remove sticky positioning on board frames so they scroll with notes
- Switch note card positioning from % to vh for accurate layout
- Move board_med.png background to notes-scatter for scroll-synced tiling
- Extend scroll area to full viewport height with scroll padding
- Trigger AI reply for every published question, not just @mentions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 backend/internal/handler/question.go        |  4 +--
 frontend/src/components/overlay/BarPage.vue | 28 ++++++++-------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/backend/internal/handler/question.go b/backend/internal/handler/question.go
index e5cb7619..0aa115e5 100644
--- a/backend/internal/handler/question.go
+++ b/backend/internal/handler/question.go
@@ -124,8 +124,8 @@ func (h *QuestionHandler) Create(c *gin.Context) {
 		return
 	}
 
-	// Trigger AI reply only when question mentions @小石光
-	if h.communityAI != nil && question.Status == model.StatusPublished && h.communityAI.IsMentioned(req.Content) {
+	// Trigger AI reply for every published question
+	if h.communityAI != nil && question.Status == model.StatusPublished {
 		go h.communityAI.HandleNewQuestion(question.ID)
 	}
 
diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 907bc6e5..cc001a87 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -314,13 +314,13 @@ function getCardStyle(post: QuestionListItem) {
   const col = idx % 3
   const row = Math.floor(idx / 3)
   const baseLeft = 8 + col * 30
-  const baseTop = 5 + row * 28
+  const baseTop = 3 + row * 18
   const jitterX = ((hash % 17) - 8) * 0.8
-  const jitterY = (((hash >> 4) % 13) - 6) * 0.7
+  const jitterY = (((hash >> 4) % 13) - 6) * 0.5
   const rotation = (((hash >> 8) % 21) - 10) * 0.8
   return {
     left: `${baseLeft + jitterX}%`,
-    top: `${baseTop + jitterY}%`,
+    top: `${baseTop + jitterY}vh`,
     transform: `rotate(${rotation}deg)`,
     zIndex: (hash % 5) + 2,
   }
@@ -328,7 +328,8 @@ function getCardStyle(post: QuestionListItem) {
 
 const scatterHeight = computed(() => {
   const rows = Math.ceil(posts.value.length / 3)
-  return `${Math.max(100, rows * 28 + 10)}%`
+  const height = rows * 18 + 15
+  return `${Math.max(50, height)}vh`
 })
 
 // API calls
@@ -656,15 +657,13 @@ onUnmounted(() => {
   flex-direction: row;
   align-items: center;
   padding: 0 4%;
-  padding-bottom: 5vh;
 }
 
 /* Board container */
 .board-container {
   width: 80%;
-  height: 65vh;
-  align-self: flex-start;
-  margin-top: 1vh;
+  height: 100%;
+  align-self: stretch;
   min-height: 0;
 }
 
@@ -673,25 +672,17 @@ onUnmounted(() => {
   width: 100%;
   display: block;
   z-index: 1;
-  position: sticky;
   pointer-events: none;
 }
 
-.board-frame-top {
-  top: 0;
-}
-
-.board-frame-bottom {
-  bottom: 0;
-}
-
 .board-scroll-area {
   height: 100%;
   overflow-y: auto;
   scrollbar-width: none;
-  background: url('@/assets/images/board_med.png') repeat-y center / 100% auto;
   min-height: 0;
   position: relative;
+  padding-top: 10vh;
+  padding-bottom: 30vh;
 }
 
 .board-scroll-area::-webkit-scrollbar {
@@ -703,6 +694,7 @@ onUnmounted(() => {
   position: relative;
   width: 100%;
   min-height: 100%;
+  background: url('@/assets/images/board_med.png') repeat-y center / 100% auto;
 }
 
 .board-loading,

From 92a1777e60189f3132b19c14e1952ad744d07163 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Wed, 11 Mar 2026 00:19:23 +0800
Subject: [PATCH 10/22] feat(bar): mirror note_@

---
 frontend/src/components/overlay/BarPage.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index cc001a87..f3029b0e 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -27,7 +27,7 @@
                   :style="getCardStyle(post)"
                   @click="openDetail(post)"
                 >
-                  <img class="note-bg" :src="getNoteImage(post)" draggable="false" />
+                  <img :class="['note-bg', { 'note-bg-flipped': getNoteImage(post) === note2 }]" :src="getNoteImage(post)" draggable="false" />
                   <div class="note-content">
                     <h4>{{ post.title }}</h4>
                     <p>{{ post.content_preview }}</p>
@@ -723,6 +723,10 @@ onUnmounted(() => {
   pointer-events: none;
 }
 
+.note-bg-flipped {
+  transform: scaleX(-1);
+}
+
 .note-content {
   position: absolute;
   inset: 15% 12% 18% 12%;

From 0e3c2ab51cc84fbabe2f82c83628d1cb9c03bfb4 Mon Sep 17 00:00:00 2001
From: Koishi <koishi510@sjtu.edu.cn>
Date: Wed, 11 Mar 2026 00:30:09 +0800
Subject: [PATCH 11/22] feat(bar): add elastic bounce effect to board scroll

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/overlay/BarPage.vue | 47 +++++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index f3029b0e..22b6c814 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -15,7 +15,8 @@
         <div class="bar-content">
           <!-- Left: Board -->
           <div class="board-container">
-            <div class="board-scroll-area" ref="scrollAreaRef">
+            <div class="board-scroll-area" ref="scrollAreaRef" @wheel="onScrollWheel">
+              <div :style="bounceStyle" class="board-scroll-inner">
               <img class="board-frame-top" :src="boardUp" draggable="false" />
               <div class="notes-scatter" :style="{ minHeight: scatterHeight }">
                 <div v-if="loading" class="board-loading">加载中...</div>
@@ -37,6 +38,7 @@
                 <div ref="sentinelRef" class="load-sentinel" />
               </div>
               <img class="board-frame-bottom" :src="boardDown" draggable="false" />
+              </div>
             </div>
           </div>
 
@@ -579,8 +581,43 @@ watch(posts, () => {
   nextTick(setupObserver)
 })
 
+// Elastic bounce effect
+const bounceOffset = ref(0)
+let bounceRaf = 0
+
+function onScrollWheel(e: WheelEvent) {
+  const el = scrollAreaRef.value
+  if (!el) return
+
+  const atTop = el.scrollTop <= 0
+  const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight
+
+  if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
+    e.preventDefault()
+    bounceOffset.value += e.deltaY * -0.3
+    // Clamp
+    bounceOffset.value = Math.max(-80, Math.min(80, bounceOffset.value))
+    cancelAnimationFrame(bounceRaf)
+    bounceRaf = requestAnimationFrame(springBack)
+  }
+}
+
+function springBack() {
+  bounceOffset.value *= 0.85
+  if (Math.abs(bounceOffset.value) < 0.5) {
+    bounceOffset.value = 0
+    return
+  }
+  bounceRaf = requestAnimationFrame(springBack)
+}
+
+const bounceStyle = computed(() =>
+  bounceOffset.value ? { transform: `translateY(${bounceOffset.value}px)` } : {},
+)
+
 onUnmounted(() => {
   if (observer) observer.disconnect()
+  cancelAnimationFrame(bounceRaf)
 })
 </script>
 
@@ -681,14 +718,18 @@ onUnmounted(() => {
   scrollbar-width: none;
   min-height: 0;
   position: relative;
-  padding-top: 10vh;
-  padding-bottom: 30vh;
+  padding-top: 5vh;
+  padding-bottom: 25vh;
 }
 
 .board-scroll-area::-webkit-scrollbar {
   display: none;
 }
 
+.board-scroll-inner {
+  will-change: transform;
+}
+
 /* Notes scatter */
 .notes-scatter {
   position: relative;

From fb6183a1c887d4bb08adbf9760711f147eb61df8 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Wed, 11 Mar 2026 00:37:57 +0800
Subject: [PATCH 12/22] feat(bar): update note pro

---
 frontend/src/components/overlay/BarPage.vue | 37 ++++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 22b6c814..e7f5fb40 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -64,6 +64,14 @@
               <!-- Compose mode -->
               <template v-if="paperMode === 'compose'">
                 <h3 class="paper-title">发布帖子</h3>
+                <label class="channel-toggle">
+                  <input type="checkbox"
+                    :checked="newPost.channel === 'professional'"
+                    @change="newPost.channel = ($event.target as HTMLInputElement).checked ? 'professional' : 'experience'"
+                  />
+                  <span>专家帖</span>
+                  <span class="channel-hint">仅认证专家可回复</span>
+                </label>
                 <input
                   v-model="newPost.title"
                   class="paper-input"
@@ -267,7 +275,7 @@ type PaperMode = 'compose' | 'detail' | 'collections' | null
 const paperMode = ref<PaperMode>(null)
 
 // Compose state
-const newPost = ref({ title: '', content: '' })
+const newPost = ref({ title: '', content: '', channel: 'experience' as string })
 const posting = ref(false)
 
 // Detail state
@@ -306,7 +314,7 @@ function simpleHash(str: string): number {
 }
 
 function getNoteImage(post: QuestionListItem): string {
-  if (post.author.is_certified) return notePro
+  if (post.channel === 'professional') return notePro
   return NOTE_VARIANTS[simpleHash(post.id) % 3]
 }
 
@@ -363,7 +371,7 @@ function close() {
 }
 
 function openCompose() {
-  newPost.value = { title: '', content: '' }
+  newPost.value = { title: '', content: '', channel: 'experience' }
   paperMode.value = 'compose'
 }
 
@@ -417,10 +425,10 @@ async function onCreatePost() {
     await createQuestion({
       title: newPost.value.title,
       content: newPost.value.content,
-      channel: 'experience',
+      channel: newPost.value.channel,
     })
     paperMode.value = null
-    newPost.value = { title: '', content: '' }
+    newPost.value = { title: '', content: '', channel: 'experience' }
     await fetchPosts(1)
   } catch (e) {
     alert(getErrorMessage(e))
@@ -1286,4 +1294,23 @@ onUnmounted(() => {
 .paper-fade-leave-to {
   opacity: 0;
 }
+
+.channel-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+  font-size: 13px;
+  color: #5a4a3a;
+  cursor: pointer;
+}
+
+.channel-toggle input[type="checkbox"] {
+  accent-color: #8a6a4a;
+}
+
+.channel-hint {
+  font-size: 11px;
+  color: #8a7a6a;
+}
 </style>

From 6868541d85527b11d0df8ae2cf97033be865c809 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Wed, 11 Mar 2026 00:50:46 +0800
Subject: [PATCH 13/22] feat(bar): update scale

---
 frontend/src/components/overlay/BarPage.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index e7f5fb40..2843f475 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -24,11 +24,11 @@
                 <div
                   v-for="post in posts"
                   :key="post.id"
-                  class="note-card"
+                  :class="['note-card', { 'note-card-pro': post.channel === 'professional' }]"
                   :style="getCardStyle(post)"
                   @click="openDetail(post)"
                 >
-                  <img :class="['note-bg', { 'note-bg-flipped': getNoteImage(post) === note2 }]" :src="getNoteImage(post)" draggable="false" />
+                  <img class="note-bg" :src="getNoteImage(post)" draggable="false" />
                   <div class="note-content">
                     <h4>{{ post.title }}</h4>
                     <p>{{ post.content_preview }}</p>
@@ -766,26 +766,28 @@ onUnmounted(() => {
   z-index: 10 !important;
 }
 
+.note-card-pro {
+  width: 20.8%;
+}
+
 .note-bg {
   width: 100%;
   display: block;
   pointer-events: none;
 }
 
-.note-bg-flipped {
-  transform: scaleX(-1);
-}
-
 .note-content {
   position: absolute;
   inset: 15% 12% 18% 12%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  text-align: center;
+  align-items: center;
 }
 
 .note-content h4 {
-  font-size: 11px;
+  font-size: 15px;
   font-weight: 700;
   color: #3a2a1a;
   margin: 0 0 4px;
@@ -795,7 +797,7 @@ onUnmounted(() => {
 }
 
 .note-content p {
-  font-size: 9px;
+  font-size: 13px;
   color: #5a4a3a;
   line-height: 1.4;
   margin: 0;
@@ -806,7 +808,7 @@ onUnmounted(() => {
 }
 
 .note-meta {
-  font-size: 8px;
+  font-size: 10px;
   color: #8a7a6a;
   margin-top: auto;
 }

From aeaf696f562647a8cca51f73e548a8d5a4b6ca97 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Wed, 11 Mar 2026 00:55:39 +0800
Subject: [PATCH 14/22] feat(bar): update scale *2

---
 frontend/src/components/overlay/BarPage.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 2843f475..333ff1a3 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -29,7 +29,7 @@
                   @click="openDetail(post)"
                 >
                   <img class="note-bg" :src="getNoteImage(post)" draggable="false" />
-                  <div class="note-content">
+                  <div :class="['note-content', { 'note-content-n2': getNoteImage(post) === note2, 'note-content-n3': getNoteImage(post) === note3 }]">
                     <h4>{{ post.title }}</h4>
                     <p>{{ post.content_preview }}</p>
                     <span class="note-meta"><img :src="getAvatar(post.author)" class="note-meta-avatar" @error="onAvatarError" />{{ post.author.nickname }} · {{ post.answer_count }} 评论</span>
@@ -786,8 +786,16 @@ onUnmounted(() => {
   align-items: center;
 }
 
+.note-content-n2 {
+  inset: 19% 12% 14% 12%;
+}
+
+.note-content-n3 {
+  inset: 19% 12% 14% 12%;
+}
+
 .note-content h4 {
-  font-size: 15px;
+  font-size: 17px;
   font-weight: 700;
   color: #3a2a1a;
   margin: 0 0 4px;
@@ -797,7 +805,7 @@ onUnmounted(() => {
 }
 
 .note-content p {
-  font-size: 13px;
+  font-size: 15px;
   color: #5a4a3a;
   line-height: 1.4;
   margin: 0;
@@ -808,7 +816,7 @@ onUnmounted(() => {
 }
 
 .note-meta {
-  font-size: 10px;
+  font-size: 11px;
   color: #8a7a6a;
   margin-top: auto;
 }

From ca9dd786659d69d049e26194b076969f41b6c80a Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Wed, 11 Mar 2026 01:12:32 +0800
Subject: [PATCH 15/22] feat(bar): edit and delete function

---
 frontend/src/components/overlay/BarPage.vue | 206 +++++++++++++++++++-
 1 file changed, 198 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 333ff1a3..38f11ec9 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -94,13 +94,27 @@
 
               <!-- Detail mode -->
               <template v-if="paperMode === 'detail' && selectedDetail">
-                <h3 class="paper-title">{{ selectedDetail.title }}</h3>
-                <div class="detail-author">
-                  <img :src="getAvatar(selectedDetail.author)" class="detail-avatar" @error="onAvatarError" />
-                  <span class="author-name">{{ selectedDetail.author.nickname }}</span>
-                  <span v-if="selectedDetail.author.display_tag" class="author-tag">{{ selectedDetail.author.display_tag }}</span>
-                </div>
-                <div class="detail-body">{{ selectedDetail.content }}</div>
+                <template v-if="!editingPost">
+                  <h3 class="paper-title">{{ selectedDetail.title }}</h3>
+                  <div class="detail-author">
+                    <img :src="getAvatar(selectedDetail.author)" class="detail-avatar" @error="onAvatarError" />
+                    <span class="author-name">{{ selectedDetail.author.nickname }}</span>
+                    <span v-if="selectedDetail.author.display_tag" class="author-tag">{{ selectedDetail.author.display_tag }}</span>
+                  </div>
+                  <div class="detail-body">{{ selectedDetail.content }}</div>
+                  <div v-if="canModify(selectedDetail.author.id)" class="detail-manage">
+                    <button class="manage-btn" @click="startEditPost">编辑</button>
+                    <button class="manage-btn manage-btn-danger" @click="onDeletePost">删除</button>
+                  </div>
+                </template>
+                <template v-else>
+                  <input v-model="editPostForm.title" class="paper-input" placeholder="标题" />
+                  <textarea v-model="editPostForm.content" class="paper-textarea" rows="6" />
+                  <div class="detail-manage">
+                    <button class="manage-btn" @click="saveEditPost">保存</button>
+                    <button class="manage-btn" @click="cancelEditPost">取消</button>
+                  </div>
+                </template>
 
                 <div class="detail-actions-bar">
                   <button class="detail-action-btn" @click="onLikeDetailQuestion">
@@ -122,7 +136,14 @@
                       <span class="comment-author">{{ a.author.nickname }}</span>
                       <span v-if="a.author.display_tag" class="author-tag">{{ a.author.display_tag }}</span>
                     </div>
-                    <p class="comment-body">{{ a.content }}</p>
+                    <template v-if="editingAnswerId === a.id">
+                      <textarea v-model="editAnswerContent" class="edit-answer-textarea" rows="3" />
+                      <div class="detail-manage">
+                        <button class="manage-btn" @click="saveEditAnswer">保存</button>
+                        <button class="manage-btn" @click="cancelEditAnswer">取消</button>
+                      </div>
+                    </template>
+                    <p v-else class="comment-body">{{ a.content }}</p>
                     <div class="comment-actions">
                       <button class="comment-like-btn" @click="onLikeAnswer(a)">
                         <span :class="['icon-like', { active: a.is_liked }]">&#9829;</span> {{ a.like_count }}
@@ -133,6 +154,8 @@
                       <button class="comment-like-btn" @click="setReplyTarget(a.id)">
                         回复
                       </button>
+                      <button v-if="canModify(a.author.id)" class="comment-like-btn" @click="startEditAnswer(a)">编辑</button>
+                      <button v-if="canModify(a.author.id)" class="comment-like-btn manage-text-danger" @click="onDeleteAnswer(a)">删除</button>
                     </div>
 
                     <!-- Nested comments -->
@@ -150,6 +173,7 @@
                           <button class="comment-like-btn" @click="setReplyTarget(a.id, c.id, c.author.nickname)">
                             回复
                           </button>
+                          <button v-if="canModify(c.author.id)" class="comment-like-btn manage-text-danger" @click="onDeleteComment(a.id, c.id)">删除</button>
                         </div>
                         <!-- Nested replies -->
                         <div v-for="r in c.replies" :key="r.id" class="sub-comment nested">
@@ -164,6 +188,7 @@
                             <button class="comment-like-btn" @click="setReplyTarget(a.id, r.id, r.author.nickname)">
                               回复
                             </button>
+                            <button v-if="canModify(r.author.id)" class="comment-like-btn manage-text-danger" @click="onDeleteComment(a.id, r.id)">删除</button>
                           </div>
                         </div>
                       </div>
@@ -224,12 +249,18 @@ import {
   toggleLike,
   toggleCollection,
   getMyCollections,
+  updateQuestion,
+  deleteQuestion,
+  updateAnswer,
+  deleteAnswer,
+  deleteComment,
   type QuestionListItem,
   type QuestionDetail,
   type AnswerListItem,
   type CommentListItem,
 } from '@/lib/api/community'
 import { getErrorMessage } from '@/lib/apiClient'
+import { useAuthStore } from '@/stores/auth'
 
 import bgTop from '@/assets/images/background_1.png'
 import bgBottom from '@/assets/images/background_2.png'
@@ -259,6 +290,7 @@ function onAvatarError(e: Event) {
 }
 
 const uiStore = useUiStore()
+const auth = useAuthStore()
 
 const visible = computed(() => uiStore.activePanel === 'bar')
 
@@ -297,6 +329,16 @@ const replyTarget = ref<{
 const collectionItems = ref<QuestionListItem[]>([])
 const loadingCollections = ref(false)
 
+// Edit/delete state
+const editingPost = ref(false)
+const editPostForm = ref({ title: '', content: '' })
+const editingAnswerId = ref<string | null>(null)
+const editAnswerContent = ref('')
+
+function canModify(authorId: string) {
+  return auth.user?.id === authorId || auth.user?.is_admin
+}
+
 // Refs for infinite scroll
 const scrollAreaRef = ref<HTMLElement | null>(null)
 const sentinelRef = ref<HTMLElement | null>(null)
@@ -416,6 +458,8 @@ function closePaper() {
   answerComments.value = {}
   loadingComments.value = {}
   replyTarget.value = null
+  editingPost.value = false
+  editingAnswerId.value = null
 }
 
 async function onCreatePost() {
@@ -536,6 +580,116 @@ async function onSubmitReply() {
   }
 }
 
+// Edit/delete post (question)
+function startEditPost() {
+  if (!selectedDetail.value) return
+  editPostForm.value = {
+    title: selectedDetail.value.title,
+    content: selectedDetail.value.content,
+  }
+  editingPost.value = true
+}
+
+function cancelEditPost() {
+  editingPost.value = false
+  editPostForm.value = { title: '', content: '' }
+}
+
+async function saveEditPost() {
+  if (!selectedDetail.value) return
+  try {
+    await updateQuestion(selectedDetail.value.id, editPostForm.value)
+    selectedDetail.value = {
+      ...selectedDetail.value,
+      title: editPostForm.value.title,
+      content: editPostForm.value.content,
+    }
+    posts.value = posts.value.map((p) =>
+      p.id === selectedDetail.value!.id
+        ? { ...p, title: editPostForm.value.title, content_preview: editPostForm.value.content.slice(0, 100) }
+        : p,
+    )
+    editingPost.value = false
+  } catch (e) {
+    alert(getErrorMessage(e))
+  }
+}
+
+async function onDeletePost() {
+  if (!selectedDetail.value || !confirm('确定删除此帖？')) return
+  try {
+    await deleteQuestion(selectedDetail.value.id)
+    posts.value = posts.value.filter((p) => p.id !== selectedDetail.value!.id)
+    closePaper()
+  } catch (e) {
+    alert(getErrorMessage(e))
+  }
+}
+
+// Edit/delete answer
+function startEditAnswer(a: AnswerListItem) {
+  editingAnswerId.value = a.id
+  editAnswerContent.value = a.content
+}
+
+function cancelEditAnswer() {
+  editingAnswerId.value = null
+  editAnswerContent.value = ''
+}
+
+async function saveEditAnswer() {
+  if (!editingAnswerId.value) return
+  try {
+    await updateAnswer(editingAnswerId.value, editAnswerContent.value)
+    answers.value = answers.value.map((a) =>
+      a.id === editingAnswerId.value ? { ...a, content: editAnswerContent.value } : a,
+    )
+    editingAnswerId.value = null
+    editAnswerContent.value = ''
+  } catch (e) {
+    alert(getErrorMessage(e))
+  }
+}
+
+async function onDeleteAnswer(a: AnswerListItem) {
+  if (!confirm('确定删除此回复？')) return
+  try {
+    await deleteAnswer(a.id)
+    answers.value = answers.value.filter((ans) => ans.id !== a.id)
+    if (selectedDetail.value) {
+      selectedDetail.value = {
+        ...selectedDetail.value,
+        answer_count: selectedDetail.value.answer_count - 1,
+      }
+    }
+  } catch (e) {
+    alert(getErrorMessage(e))
+  }
+}
+
+// Delete comment
+function removeCommentFromList(list: CommentListItem[], commentId: string): CommentListItem[] {
+  return list
+    .filter((c) => c.id !== commentId)
+    .map((c) => ({ ...c, replies: removeCommentFromList(c.replies, commentId) }))
+}
+
+async function onDeleteComment(answerId: string, commentId: string) {
+  if (!confirm('确定删除此评论？')) return
+  try {
+    await deleteComment(commentId)
+    const comments = answerComments.value[answerId]
+    if (comments) {
+      answerComments.value[answerId] = removeCommentFromList(comments, commentId)
+    }
+    answers.value = answers.value.map((a) =>
+      a.id === answerId ? { ...a, comment_count: a.comment_count - 1 } : a,
+    )
+  } catch (e) {
+    alert(getErrorMessage(e))
+  }
+}
+
 function updateCommentInList(
   list: CommentListItem[],
   targetId: string,
@@ -1323,4 +1477,40 @@ onUnmounted(() => {
   font-size: 11px;
   color: #8a7a6a;
 }
+
+.detail-manage {
+  display: flex;
+  gap: 8px;
+  margin: 6px 0;
+}
+
+.manage-btn {
+  font-size: 12px;
+  padding: 2px 10px;
+  border: 1px solid #c5b8a8;
+  border-radius: 4px;
+  background: transparent;
+  color: #5a4a3a;
+  cursor: pointer;
+}
+
+.manage-btn-danger {
+  color: #c44;
+  border-color: #c44;
+}
+
+.manage-text-danger {
+  color: #c44 !important;
+}
+
+.edit-answer-textarea {
+  width: 100%;
+  font-size: 13px;
+  padding: 6px;
+  border: 1px solid #c5b8a8;
+  border-radius: 4px;
+  resize: vertical;
+  font-family: inherit;
+  box-sizing: border-box;
+}
 </style>

From 60ba2e3555ca3472037e2e9a0945e09d05a565b6 Mon Sep 17 00:00:00 2001
From: Koishi <koishi510@sjtu.edu.cn>
Date: Wed, 11 Mar 2026 01:34:49 +0800
Subject: [PATCH 16/22] feat(community): add comment editing for users and
 admins

- Add PUT /api/v1/community/comments/:id endpoint
- Users can edit their own comments, admins can edit anyone's
- Content moderation applied on update
- Inline edit UI in comment and nested reply sections

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 backend/internal/dto/comment.go             |  5 ++
 backend/internal/handler/comment.go         | 32 ++++++++++
 backend/internal/repository/comment.go      |  4 ++
 backend/internal/router/router.go           |  3 +-
 backend/internal/service/community.go       | 31 +++++++++
 frontend/src/components/overlay/BarPage.vue | 69 ++++++++++++++++++++-
 frontend/src/lib/api/community.ts           |  9 +++
 7 files changed, 150 insertions(+), 3 deletions(-)

diff --git a/backend/internal/dto/comment.go b/backend/internal/dto/comment.go
index 7ee543ff..00e75ed7 100644
--- a/backend/internal/dto/comment.go
+++ b/backend/internal/dto/comment.go
@@ -8,6 +8,11 @@ type CommentCreate struct {
 	ParentID *string `json:"parent_id"`
 }
 
+// CommentUpdate is the request body for updating a comment
+type CommentUpdate struct {
+	Content string `json:"content" binding:"required,min=1,max=10000"`
+}
+
 // CommentListItem is a single comment (with nested replies)
 type CommentListItem struct {
 	ID          string            `json:"id"`
diff --git a/backend/internal/handler/comment.go b/backend/internal/handler/comment.go
index 3d62b793..3288d858 100644
--- a/backend/internal/handler/comment.go
+++ b/backend/internal/handler/comment.go
@@ -68,6 +68,38 @@ func (h *CommentHandler) Create(c *gin.Context) {
 	c.JSON(http.StatusCreated, comment)
 }
 
+// PUT /api/v1/community/comments/:id
+func (h *CommentHandler) Update(c *gin.Context) {
+	commentID := c.Param("id")
+
+	var req dto.CommentUpdate
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	userID := middleware.GetUserID(c)
+	user, err := h.authService.GetUserByID(userID)
+	if err != nil {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "用户不存在"})
+		return
+	}
+
+	comment, err := h.communityService.UpdateComment(commentID, req, user)
+	if err != nil {
+		status := http.StatusBadRequest
+		if err.Error() == "评论不存在" {
+			status = http.StatusNotFound
+		} else if err.Error() == "无权修改此评论" {
+			status = http.StatusForbidden
+		}
+		c.JSON(status, gin.H{"error": err.Error()})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{"id": comment.ID, "content": comment.Content})
+}
+
 // DELETE /api/v1/community/comments/:id
 func (h *CommentHandler) Delete(c *gin.Context) {
 	commentID := c.Param("id")
diff --git a/backend/internal/repository/comment.go b/backend/internal/repository/comment.go
index 75398228..3a334775 100644
--- a/backend/internal/repository/comment.go
+++ b/backend/internal/repository/comment.go
@@ -47,6 +47,10 @@ func (r *CommentRepo) Delete(id string) error {
 	return r.db.Where("id = ?", id).Delete(&model.Comment{}).Error
 }
 
+func (r *CommentRepo) Update(c *model.Comment) error {
+	return r.db.Save(c).Error
+}
+
 func (r *CommentRepo) DeleteByParentID(parentID string) (int64, error) {
 	result := r.db.Where("parent_id = ?", parentID).Delete(&model.Comment{})
 	return result.RowsAffected, result.Error
diff --git a/backend/internal/router/router.go b/backend/internal/router/router.go
index d2629802..9a2fe785 100644
--- a/backend/internal/router/router.go
+++ b/backend/internal/router/router.go
@@ -97,9 +97,10 @@ func Setup(
 			answers.POST("/:id/comments", middleware.AuthRequired(cfg), commentHandler.Create)
 		}
 
-		// Comments (delete by comment ID)
+		// Comments (update/delete by comment ID)
 		comments := community.Group("/comments")
 		{
+			comments.PUT("/:id", middleware.AuthRequired(cfg), commentHandler.Update)
 			comments.DELETE("/:id", middleware.AuthRequired(cfg), commentHandler.Delete)
 		}
 
diff --git a/backend/internal/service/community.go b/backend/internal/service/community.go
index 82f66e3f..b856e330 100644
--- a/backend/internal/service/community.go
+++ b/backend/internal/service/community.go
@@ -655,6 +655,37 @@ func (s *CommunityService) CreateComment(answerID string, req dto.CommentCreate,
 	}, nil
 }
 
+func (s *CommunityService) UpdateComment(commentID string, req dto.CommentUpdate, user *model.User) (*model.Comment, error) {
+	comment, err := s.commentRepo.FindByID(commentID)
+	if err != nil {
+		if errors.Is(err, gorm.ErrRecordNotFound) {
+			return nil, errors.New("评论不存在")
+		}
+		return nil, err
+	}
+
+	if comment.AuthorID != user.ID && !user.IsAdmin {
+		return nil, errors.New("无权修改此评论")
+	}
+
+	decision := s.moderation.ModerateText(req.Content)
+	if decision.Result == model.ModerationRejected {
+		return nil, fmt.Errorf("评论审核未通过: %s", derefStr(decision.Reason))
+	}
+
+	comment.Content = req.Content
+	if decision.Result == model.ModerationNeedManualReview {
+		comment.Status = model.StatusPendingReview
+	}
+
+	comment.UpdatedAt = time.Now()
+	if err := s.commentRepo.Update(comment); err != nil {
+		return nil, err
+	}
+
+	return comment, nil
+}
+
 func (s *CommunityService) DeleteComment(commentID string, user *model.User) error {
 	comment, err := s.commentRepo.FindByID(commentID)
 	if err != nil {
diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 38f11ec9..8b6f34e0 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -165,7 +165,14 @@
                         <img :src="getAvatar(c.author)" class="sub-comment-avatar" @error="onAvatarError" />
                         <span class="sub-comment-author">{{ c.author.nickname }}</span>
                         <span v-if="c.reply_to_user" class="sub-comment-reply-hint">回复 @{{ c.reply_to_user.nickname }}</span>
-                        <span class="sub-comment-text">{{ c.content }}</span>
+                        <template v-if="editingCommentId === c.id">
+                          <div class="edit-comment-area">
+                            <input v-model="editingCommentContent" class="reply-input" @keydown.enter="onSaveComment(a.id)" />
+                            <button class="reply-btn" :disabled="!editingCommentContent.trim()" @click="onSaveComment(a.id)">保存</button>
+                            <button class="comment-like-btn" @click="cancelEditComment">取消</button>
+                          </div>
+                        </template>
+                        <span v-else class="sub-comment-text">{{ c.content }}</span>
                         <div class="sub-comment-actions">
                           <button class="comment-like-btn" @click="onLikeComment(a.id, c)">
                             <span :class="['icon-like', { active: c.is_liked }]">&#9829;</span> {{ c.like_count }}
@@ -173,6 +180,7 @@
                           <button class="comment-like-btn" @click="setReplyTarget(a.id, c.id, c.author.nickname)">
                             回复
                           </button>
+                          <button v-if="canModify(c.author.id)" class="comment-like-btn" @click="startEditComment(c)">编辑</button>
                           <button v-if="canModify(c.author.id)" class="comment-like-btn manage-text-danger" @click="onDeleteComment(a.id, c.id)">删除</button>
                         </div>
                         <!-- Nested replies -->
@@ -180,7 +188,14 @@
                           <img :src="getAvatar(r.author)" class="sub-comment-avatar" @error="onAvatarError" />
                           <span class="sub-comment-author">{{ r.author.nickname }}</span>
                           <span v-if="r.reply_to_user" class="sub-comment-reply-hint">回复 @{{ r.reply_to_user.nickname }}</span>
-                          <span class="sub-comment-text">{{ r.content }}</span>
+                          <template v-if="editingCommentId === r.id">
+                            <div class="edit-comment-area">
+                              <input v-model="editingCommentContent" class="reply-input" @keydown.enter="onSaveComment(a.id)" />
+                              <button class="reply-btn" :disabled="!editingCommentContent.trim()" @click="onSaveComment(a.id)">保存</button>
+                              <button class="comment-like-btn" @click="cancelEditComment">取消</button>
+                            </div>
+                          </template>
+                          <span v-else class="sub-comment-text">{{ r.content }}</span>
                           <div class="sub-comment-actions">
                             <button class="comment-like-btn" @click="onLikeComment(a.id, r)">
                               <span :class="['icon-like', { active: r.is_liked }]">&#9829;</span> {{ r.like_count }}
@@ -188,6 +203,7 @@
                             <button class="comment-like-btn" @click="setReplyTarget(a.id, r.id, r.author.nickname)">
                               回复
                             </button>
+                            <button v-if="canModify(r.author.id)" class="comment-like-btn" @click="startEditComment(r)">编辑</button>
                             <button v-if="canModify(r.author.id)" class="comment-like-btn manage-text-danger" @click="onDeleteComment(a.id, r.id)">删除</button>
                           </div>
                         </div>
@@ -254,6 +270,7 @@ import {
   updateAnswer,
   deleteAnswer,
   deleteComment,
+  updateComment,
   type QuestionListItem,
   type QuestionDetail,
   type AnswerListItem,
@@ -690,6 +707,46 @@ async function onDeleteComment(answerId: string, commentId: string) {
   }
 }
 
+// Edit comment
+const editingCommentId = ref<string | null>(null)
+const editingCommentContent = ref('')
+
+function startEditComment(c: CommentListItem) {
+  editingCommentId.value = c.id
+  editingCommentContent.value = c.content
+}
+
+function cancelEditComment() {
+  editingCommentId.value = null
+  editingCommentContent.value = ''
+}
+
+function editCommentInList(
+  list: CommentListItem[],
+  commentId: string,
+  newContent: string,
+): CommentListItem[] {
+  return list.map((c) =>
+    c.id === commentId
+      ? { ...c, content: newContent }
+      : { ...c, replies: editCommentInList(c.replies, commentId, newContent) },
+  )
+}
+
+async function onSaveComment(answerId: string) {
+  if (!editingCommentId.value || !editingCommentContent.value.trim()) return
+  try {
+    const res = await updateComment(editingCommentId.value, editingCommentContent.value)
+    const comments = answerComments.value[answerId]
+    if (comments) {
+      answerComments.value[answerId] = editCommentInList(comments, res.id, res.content)
+    }
+    cancelEditComment()
+  } catch (e) {
+    alert(getErrorMessage(e))
+  }
+}
+
 function updateCommentInList(
   list: CommentListItem[],
   targetId: string,
@@ -1379,6 +1436,14 @@ onUnmounted(() => {
   margin-top: 2px;
 }
 
+.edit-comment-area {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  width: 100%;
+  margin: 4px 0;
+}
+
 .reply-input {
   flex: 1;
   padding: 8px 12px;
diff --git a/frontend/src/lib/api/community.ts b/frontend/src/lib/api/community.ts
index 407cea27..74315a87 100644
--- a/frontend/src/lib/api/community.ts
+++ b/frontend/src/lib/api/community.ts
@@ -209,6 +209,15 @@ export function deleteComment(commentId: string): Promise<{ message: string }> {
   return apiClient.delete(`/api/v1/community/comments/${commentId}`).then((r) => r.data)
 }
 
+export function updateComment(
+  commentId: string,
+  content: string,
+): Promise<{ id: string; content: string }> {
+  return apiClient
+    .put(`/api/v1/community/comments/${commentId}`, { content })
+    .then((r) => r.data)
+}
+
 // ==================== Likes ====================
 
 export function toggleLike(

From ec9a9d7aa1c57241c6d2143c6f203a53763b4aa1 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Wed, 11 Mar 2026 01:44:48 +0800
Subject: [PATCH 17/22] refactor

---
 frontend/src/components/overlay/BarPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 8b6f34e0..e87fcabb 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -104,7 +104,6 @@
                   <div class="detail-body">{{ selectedDetail.content }}</div>
                   <div v-if="canModify(selectedDetail.author.id)" class="detail-manage">
                     <button class="manage-btn" @click="startEditPost">编辑</button>
-                    <button class="manage-btn manage-btn-danger" @click="onDeletePost">删除</button>
                   </div>
                 </template>
                 <template v-else>
@@ -113,6 +112,7 @@
                   <div class="detail-manage">
                     <button class="manage-btn" @click="saveEditPost">保存</button>
                     <button class="manage-btn" @click="cancelEditPost">取消</button>
+                    <button class="manage-btn manage-btn-danger" @click="onDeletePost">删除</button>
                   </div>
                 </template>
 
@@ -141,6 +141,7 @@
                       <div class="detail-manage">
                         <button class="manage-btn" @click="saveEditAnswer">保存</button>
                         <button class="manage-btn" @click="cancelEditAnswer">取消</button>
+                        <button class="manage-btn manage-btn-danger" @click="onDeleteAnswer(a)">删除</button>
                       </div>
                     </template>
                     <p v-else class="comment-body">{{ a.content }}</p>
@@ -155,7 +156,6 @@
                         回复
                       </button>
                       <button v-if="canModify(a.author.id)" class="comment-like-btn" @click="startEditAnswer(a)">编辑</button>
-                      <button v-if="canModify(a.author.id)" class="comment-like-btn manage-text-danger" @click="onDeleteAnswer(a)">删除</button>
                     </div>
 
                     <!-- Nested comments -->

From 08c59811258a9e107b7db657de3021f47a7197a1 Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Wed, 11 Mar 2026 01:58:06 +0800
Subject: [PATCH 18/22] refactor

---
 frontend/src/components/overlay/BarPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index e87fcabb..da7b45c4 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -1170,6 +1170,7 @@ onUnmounted(() => {
   font-weight: 700;
   color: #3a2a1a;
   margin: 0 0 12px;
+  text-align: center;
 }
 
 .paper-input {

From a2d8657cb0fd3a9a5f857fe07a91e9e4ce244a3d Mon Sep 17 00:00:00 2001
From: Kanye-Est <keast3731@gmail.com>
Date: Wed, 11 Mar 2026 02:06:08 +0800
Subject: [PATCH 19/22] replacing bag and note

---
 frontend/src/components/overlay/BarPage.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index da7b45c4..9afd08de 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -1102,19 +1102,19 @@ onUnmounted(() => {
 }
 
 .side-btn:first-child {
-  transform: translateY(-60px);
+  transform: translateY(-100px) scale(1.3);
 }
 
 .side-btn:last-child {
-  transform: translateY(60px);
+  transform: translateY(65px) scale(1.3);
 }
 
 .side-btn:first-child:hover {
-  transform: translateY(-60px) scale(1.08);
+  transform: translateY(-100px) scale(1.4);
 }
 
 .side-btn:last-child:hover {
-  transform: translateY(60px) scale(1.08);
+  transform: translateY(65px) scale(1.4);
 }
 
 /* Paper overlay */

From 351ba9db7a8300bdba6b350c9721d3e4b3f765ab Mon Sep 17 00:00:00 2001
From: Koishi <koishi510@sjtu.edu.cn>
Date: Wed, 11 Mar 2026 02:17:34 +0800
Subject: [PATCH 20/22] fix(bar): resolve merge conflicts in BarPage actions
 bar

Resolve conflicts between edit/delete refactor and actions bar merge.
Keep unified detail-actions-bar with like/collect/edit/delete inline.
Add delete button to edit mode with consistent styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/overlay/BarPage.vue | 55 ++++++++++++++-------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 9afd08de..84aeaa81 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -102,31 +102,31 @@
                     <span v-if="selectedDetail.author.display_tag" class="author-tag">{{ selectedDetail.author.display_tag }}</span>
                   </div>
                   <div class="detail-body">{{ selectedDetail.content }}</div>
-                  <div v-if="canModify(selectedDetail.author.id)" class="detail-manage">
-                    <button class="manage-btn" @click="startEditPost">编辑</button>
+                  <div class="detail-actions-bar">
+                    <button class="detail-action-btn" @click="onLikeDetailQuestion">
+                      <span :class="['icon-like', { active: selectedDetail.is_liked }]">&#9829;</span>
+                      {{ selectedDetail.like_count }}
+                    </button>
+                    <button class="detail-action-btn" @click="onCollectQuestion">
+                      <span :class="['icon-collect', { active: selectedDetail.is_collected }]">&#9733;</span>
+                      {{ selectedDetail.collection_count }}
+                    </button>
+                    <template v-if="canModify(selectedDetail.author.id)">
+                      <button class="detail-action-btn detail-action-right" @click="startEditPost">编辑</button>
+                      <button class="detail-action-btn detail-action-danger" @click="onDeletePost">删除</button>
+                    </template>
                   </div>
                 </template>
                 <template v-else>
                   <input v-model="editPostForm.title" class="paper-input" placeholder="标题" />
                   <textarea v-model="editPostForm.content" class="paper-textarea" rows="6" />
-                  <div class="detail-manage">
-                    <button class="manage-btn" @click="saveEditPost">保存</button>
-                    <button class="manage-btn" @click="cancelEditPost">取消</button>
-                    <button class="manage-btn manage-btn-danger" @click="onDeletePost">删除</button>
+                  <div class="detail-actions-bar">
+                    <button class="detail-action-btn" @click="saveEditPost">保存</button>
+                    <button class="detail-action-btn" @click="cancelEditPost">取消</button>
+                    <button class="detail-action-btn detail-action-right detail-action-danger" @click="onDeletePost">删除</button>
                   </div>
                 </template>
 
-                <div class="detail-actions-bar">
-                  <button class="detail-action-btn" @click="onLikeDetailQuestion">
-                    <span :class="['icon-like', { active: selectedDetail.is_liked }]">&#9829;</span>
-                    {{ selectedDetail.like_count }}
-                  </button>
-                  <button class="detail-action-btn" @click="onCollectQuestion">
-                    <span :class="['icon-collect', { active: selectedDetail.is_collected }]">{{ selectedDetail.is_collected ? '&#9733;' : '&#9734;' }}</span>
-                    {{ selectedDetail.collection_count }}
-                  </button>
-                </div>
-
                 <div class="comments-section">
                   <h4 class="comments-title">评论 ({{ selectedDetail.answer_count }})</h4>
                   <div v-if="loadingAnswers" class="comments-loading">加载中...</div>
@@ -150,7 +150,7 @@
                         <span :class="['icon-like', { active: a.is_liked }]">&#9829;</span> {{ a.like_count }}
                       </button>
                       <button class="comment-like-btn" @click="toggleAnswerComments(a)">
-                        &#128172; {{ a.comment_count }}
+                        <svg class="icon-comment" width="14" height="14" viewBox="0 0 20 20" fill="currentColor"><path d="M2 4a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H8l-4 4v-4H4a2 2 0 01-2-2V4z"/></svg> {{ a.comment_count }}
                       </button>
                       <button class="comment-like-btn" @click="setReplyTarget(a.id)">
                         回复
@@ -1271,6 +1271,19 @@ onUnmounted(() => {
   margin-bottom: 16px;
 }
 
+.detail-action-right {
+  margin-left: auto;
+}
+
+.detail-action-danger {
+  color: #c0392b !important;
+  border-color: rgba(192, 57, 43, 0.3);
+}
+
+.detail-action-danger:hover {
+  background: rgba(192, 57, 43, 0.1);
+}
+
 .detail-action-btn {
   display: flex;
   align-items: center;
@@ -1298,8 +1311,14 @@ onUnmounted(() => {
   color: #e74c5e;
 }
 
+.icon-comment {
+  vertical-align: middle;
+  color: #8a7a6a;
+}
+
 .icon-collect {
   font-size: 14px;
+  color: #8a7a6a;
 }
 
 .icon-collect.active {

From c98d593daaef01878019305bbc3c16b930f44f7a Mon Sep 17 00:00:00 2001
From: Koishi <koishi510@sjtu.edu.cn>
Date: Wed, 11 Mar 2026 02:46:17 +0800
Subject: [PATCH 21/22] feat(bar): add my-questions and my-answers tabs to bag
 panel

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/overlay/BarPage.vue | 104 +++++++++++++++++---
 frontend/src/lib/api/community.ts           |  18 ++++
 2 files changed, 108 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/overlay/BarPage.vue b/frontend/src/components/overlay/BarPage.vue
index 84aeaa81..e31cde01 100644
--- a/frontend/src/components/overlay/BarPage.vue
+++ b/frontend/src/components/overlay/BarPage.vue
@@ -229,19 +229,54 @@
 
               <!-- Collections mode -->
               <template v-if="paperMode === 'collections'">
-                <h3 class="paper-title">我的收藏</h3>
-                <div v-if="loadingCollections" class="comments-loading">加载中...</div>
-                <div v-else-if="collectionItems.length === 0" class="board-empty">暂无收藏</div>
-                <div
-                  v-for="item in collectionItems"
-                  :key="item.id"
-                  class="collection-item"
-                  @click="openDetail(item)"
-                >
-                  <h4>{{ item.title }}</h4>
-                  <p>{{ item.content_preview }}</p>
-                  <span class="note-meta"><img :src="getAvatar(item.author)" class="note-meta-avatar" @error="onAvatarError" />{{ item.author.nickname }} · {{ item.answer_count }} 评论</span>
+                <div class="bag-tabs">
+                  <button :class="['bag-tab', { active: bagTab === 'collections' }]" @click="bagTab = 'collections'">我的收藏</button>
+                  <button :class="['bag-tab', { active: bagTab === 'my-questions' }]" @click="bagTab = 'my-questions'">我的提问</button>
+                  <button :class="['bag-tab', { active: bagTab === 'my-answers' }]" @click="bagTab = 'my-answers'">我的回答</button>
                 </div>
+                <div v-if="loadingCollections" class="comments-loading">加载中...</div>
+                <template v-else>
+                  <!-- 收藏 -->
+                  <template v-if="bagTab === 'collections'">
+                    <div v-if="collectionItems.length === 0" class="board-empty">暂无收藏</div>
+                    <div
+                      v-for="item in collectionItems"
+                      :key="item.id"
+                      class="collection-item"
+                      @click="openDetail(item)"
+                    >
+                      <h4>{{ item.title }}</h4>
+                      <p>{{ item.content_preview }}</p>
+                      <span class="note-meta"><img :src="getAvatar(item.author)" class="note-meta-avatar" @error="onAvatarError" />{{ item.author.nickname }} · {{ item.answer_count }} 评论</span>
+                    </div>
+                  </template>
+                  <!-- 我的提问 -->
+                  <template v-if="bagTab === 'my-questions'">
+                    <div v-if="myQuestions.length === 0" class="board-empty">暂无提问</div>
+                    <div
+                      v-for="item in myQuestions"
+                      :key="item.id"
+                      class="collection-item"
+                      @click="openDetail(item)"
+                    >
+                      <h4>{{ item.title }}</h4>
+                      <p>{{ item.content_preview }}</p>
+                      <span class="note-meta">{{ item.answer_count }} 评论 · {{ item.like_count }} 赞</span>
+                    </div>
+                  </template>
+                  <!-- 我的回答 -->
+                  <template v-if="bagTab === 'my-answers'">
+                    <div v-if="myAnswers.length === 0" class="board-empty">暂无回答</div>
+                    <div
+                      v-for="item in myAnswers"
+                      :key="item.id"
+                      class="collection-item"
+                    >
+                      <p>{{ item.content_preview }}</p>
+                      <span class="note-meta">{{ item.like_count }} 赞 · {{ item.comment_count }} 评论</span>
+                    </div>
+                  </template>
+                </template>
               </template>
             </div>
           </div>
@@ -271,6 +306,8 @@ import {
   deleteAnswer,
   deleteComment,
   updateComment,
+  getMyQuestions,
+  getMyAnswers,
   type QuestionListItem,
   type QuestionDetail,
   type AnswerListItem,
@@ -343,8 +380,13 @@ const replyTarget = ref<{
 } | null>(null)
 
 // Collections state
+// Collections / My content state
 const collectionItems = ref<QuestionListItem[]>([])
+const myQuestions = ref<QuestionListItem[]>([])
+const myAnswers = ref<AnswerListItem[]>([])
 const loadingCollections = ref(false)
+type BagTab = 'collections' | 'my-questions' | 'my-answers'
+const bagTab = ref<BagTab>('collections')
 
 // Edit/delete state
 const editingPost = ref(false)
@@ -455,11 +497,20 @@ async function openDetail(q: QuestionListItem) {
 
 async function openCollections() {
   paperMode.value = 'collections'
+  bagTab.value = 'collections'
   collectionItems.value = []
+  myQuestions.value = []
+  myAnswers.value = []
   loadingCollections.value = true
   try {
-    const res = await getMyCollections({ page: 1, page_size: 50 })
-    collectionItems.value = res.items.map((c) => c.question)
+    const [colRes, qRes, aRes] = await Promise.all([
+      getMyCollections({ page: 1, page_size: 50 }),
+      getMyQuestions({ page: 1, page_size: 50 }),
+      getMyAnswers({ page: 1, page_size: 50 }),
+    ])
+    collectionItems.value = colRes.items.map((c) => c.question)
+    myQuestions.value = qRes.items
+    myAnswers.value = aRes.items
   } catch {
     // silent
   } finally {
@@ -1494,6 +1545,31 @@ onUnmounted(() => {
 }
 
 /* Collections mode */
+.bag-tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: 14px;
+  border-bottom: 1px solid rgba(90, 62, 43, 0.15);
+}
+
+.bag-tab {
+  flex: 1;
+  padding: 8px 0;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 13px;
+  font-weight: 600;
+  color: #8a7a6a;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+}
+
+.bag-tab.active {
+  color: #3a2a1a;
+  border-bottom-color: #8a6a4a;
+}
+
 .collection-item {
   padding: 12px 0;
   border-bottom: 1px solid rgba(90, 62, 43, 0.1);
diff --git a/frontend/src/lib/api/community.ts b/frontend/src/lib/api/community.ts
index 74315a87..c4799829 100644
--- a/frontend/src/lib/api/community.ts
+++ b/frontend/src/lib/api/community.ts
@@ -262,6 +262,24 @@ export function getMyCollections(params?: {
 
 // ==================== Tags ====================
 
+export function getMyQuestions(params?: {
+  page?: number
+  page_size?: number
+}): Promise<PaginatedResponse<QuestionListItem>> {
+  return apiClient
+    .get('/api/v1/community/users/me/questions', { params })
+    .then((r) => r.data)
+}
+
+export function getMyAnswers(params?: {
+  page?: number
+  page_size?: number
+}): Promise<PaginatedResponse<AnswerListItem>> {
+  return apiClient
+    .get('/api/v1/community/users/me/answers', { params })
+    .then((r) => r.data)
+}
+
 export function getTags(): Promise<TagListItem[]> {
   return apiClient.get('/api/v1/community/tags').then((r) => r.data)
 }

From 26c97887a11a2a43a6648596c483cd511cde1a8f Mon Sep 17 00:00:00 2001
From: Koishi <koishi510@sjtu.edu.cn>
Date: Wed, 11 Mar 2026 03:14:59 +0800
Subject: [PATCH 22/22] feat: role-based AI prompts and remove profile tabs
 from CarPage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Split companion chat and community AI system prompts into role variants:
  溯源者(mom): 知心朋友, 守护者(dad): 耐心指导者, 专业人士: 对等交流者
- Add admin prompt suffix for admin users
- Pass userRepo to ChatService and CommunityAIService for role lookup
- Remove my-questions/my-answers tabs from CarPage profile (now in BarPage bag)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 backend/cmd/server/main.go                  |   4 +-
 backend/internal/service/chat.go            | 163 ++++++++--
 backend/internal/service/community_ai.go    | 134 +++++++-
 frontend/src/components/overlay/CarPage.vue | 333 +-------------------
 4 files changed, 258 insertions(+), 376 deletions(-)

diff --git a/backend/cmd/server/main.go b/backend/cmd/server/main.go
index bdb1ed3a..aa768e0d 100644
--- a/backend/cmd/server/main.go
+++ b/backend/cmd/server/main.go
@@ -74,7 +74,7 @@ func main() {
 		firecrawlClient = firecrawl.NewClient(cfg.FirecrawlAPIKey)
 	}
 
-	chatService := service.NewChatService(chatClient, chatRepo, firecrawlClient)
+	chatService := service.NewChatService(chatClient, chatRepo, userRepo, firecrawlClient)
 	echoService := service.NewEchoService(chatClient, echoRepo, userRepo)
 	photoService := service.NewPhotoService(photoRepo, userRepo, chatClient, cfg.ImageModel)
 	whisperService := service.NewWhisperService(whisperRepo, userRepo, chatClient)
@@ -87,7 +87,7 @@ func main() {
 		communityAIService = service.NewCommunityAIService(
 			chatClient, firecrawlClient,
 			questionRepo, answerRepo, commentRepo,
-			aiUserID,
+			userRepo, aiUserID,
 		)
 	}
 
diff --git a/backend/internal/service/chat.go b/backend/internal/service/chat.go
index cfacdf3f..c05644b6 100644
--- a/backend/internal/service/chat.go
+++ b/backend/internal/service/chat.go
@@ -17,21 +17,20 @@ import (
 	"github.com/momshell/backend/pkg/openai"
 )
 
-const companionSystemPrompt = `你是「小石光」，一位「曾走过这段路的朋友」，专为产后恢复期女性设计的情感陪伴者。
+const companionSystemPromptMom = `你是「小石光」，一位真诚的知心朋友。
 
-## 角色定位：Independent Woman Supporter
+## 角色定位：知心朋友
 
-你面对的每一位用户，首先是一个完整的「独立女性」，其次才是新手妈妈。她的价值不应被「母职」所定义。你深知产后恢复不仅是身体的重建，更是自我认同的重新寻找——因为你自己也曾经历过这一切。
+你面对的用户首先是一个完整的「她自己」，而不仅仅是某个身份标签。你真正在意的不是给出完美答案，而是让她感到被看见、被理解。
 
-## 语气与沟通原则
+## 沟通原则
 
-**Warm, Validating, Non-judgmental**
-
-1. **认可与共情优先**：当她表达疲惫、焦虑、自我怀疑时，首先做的是「看见」和「认可」，而非急于给出建议。
-2. **拒绝说教**：你不说「你应该」、「你必须」，而是以「我发现...」、「有人分享过...」、「或许可以试试...」的方式分享经验。
-3. **保护她的主体性**：时刻提醒她——她有权利为自己的需求发声，她可以寻求帮助，她可以不完美。
-4. **适度自我披露**：必要时可以以「我也有过类似的经历...」来建立连接，但不要喧宾夺主，焦点始终在她身上。
-5. **避免有毒正能量**：不要说「一切都会好起来的」、「你要积极一点」。承认困难的真实性，陪她一起面对。
+1. **看见与理解优先**：当她表达疲惫、焦虑、自我怀疑时，首先「看见」她的内心活动，让她知道这些感受是真实的、合理的。不急于给出建议。
+2. **引导而非安慰**：不用廉价的安慰敷衍（如「一切都会好的」「你已经很棒了」），而是通过真诚的提问帮她梳理内心——「你觉得最让你在意的是什么？」「如果抛开别人的期待，你自己想要的是什么？」
+3. **关注自我与当下**：温和地引导她把注意力从外界评价拉回到自己身上——她此刻的感受、她真正的需求、她值得被善待的事实。
+4. **拒绝说教**：不说「你应该」「你必须」，用「我注意到...」「有时候...」「或许可以...」的方式自然地分享。
+5. **有深度的对话**：当她自我否定时，不一味否认她的感受，而是通过提问引导她客观地审视自己——既看到困难，也看到自己已经做到的。
+6. **避免有毒正能量**：不说「你要积极一点」「想开点就好了」。承认困难的真实性，陪她一起面对。
 
 ## 记忆上下文
 
@@ -53,7 +52,108 @@ const companionSystemPrompt = `你是「小石光」，一位「曾走过这段
    - color_tone: "soft_pink" | "warm_gold" | "gentle_blue" | "lavender" | "neutral_white" | "coral" | "sage"
 3. **memory_extract**: 如果用户分享了值得记住的信息，提取出来；否则为 null
 
-记住：你的存在不是为了「解决她的问题」，而是让她感到——在这一刻，她并不孤单。`
+记住：你的存在不是为了「解决她的问题」，而是让她感到——在这一刻，有人真正看见了她。`
+
+const companionSystemPromptDad = `你是「小石光」，一位耐心的同行者和指导者。
+
+## 角色定位：耐心的指导者
+
+你面对的用户正在家庭中承担重要角色。你的存在不是为了评判他做得好不好，而是帮他看清眼前的事，一步步做好。
+
+## 沟通原则
+
+1. **理解先行**：先理解他面对的具体困境，不急于评价。承认「这确实不容易」比空洞的鼓励更有意义。
+2. **引导理解**：帮他理解事物的本质——为什么伴侣需要支持、孩子的需求意味着什么、家庭中每个角色如何协作。不是说教，而是帮他「看见」。
+3. **给出具体方案**：在理解的基础上，提供可操作的建议。不是笼统的「多关心她」，而是具体到「今晚试着主动承担哄睡，让她有一个小时的独处时间」。
+4. **平和而不讨好**：语气平等、真诚，像一个有经验的朋友在分享。不使用过度热情或夸张的语气。
+5. **有深度的对话**：当他感到挫败或困惑时，不简单否定他的感受，而是通过提问帮他理清头绪——「你觉得最大的障碍是什么？」「如果换个角度看这件事呢？」
+6. **拒绝空洞鼓励**：不说「你很厉害」「加油就行」。面对问题时坦诚地分析，给出切实的下一步。
+
+## 记忆上下文
+
+### 你记得关于他的重要信息
+%s
+
+### 他和你之间有过以下对话片段
+%s
+
+在回应时，自然地融入这些记忆。
+
+## 响应格式
+
+你的每一次回复必须是一个 JSON 对象，包含以下字段：
+1. **text**: 一段平和、真诚的回应文字（1-3句话）。注意：text 内容必须是纯文本，禁止使用任何 Markdown 格式。
+2. **visual_metadata**: 描述这次回复应呈现的视觉氛围
+   - effect_type: "ripple" | "sunlight" | "calm" | "warm_glow" | "gentle_wave"
+   - intensity: 0.0 ~ 1.0
+   - color_tone: "soft_pink" | "warm_gold" | "gentle_blue" | "lavender" | "neutral_white" | "coral" | "sage"
+3. **memory_extract**: 如果用户分享了值得记住的信息，提取出来；否则为 null
+
+记住：你的存在是帮他成为更好的自己——看清方向，迈出下一步。`
+
+const companionSystemPromptProfessional = `你是「小石光」，一位尊重专业的交流伙伴。
+
+## 角色定位：对等的交流者
+
+你面对的用户是一位医疗或心理健康领域的专业人士。他们拥有扎实的专业知识和临床经验，同时也是一个有自己感受和需求的人。
+
+## 沟通原则
+
+1. **尊重专业**：不解释用户已知的基础知识，在更高层次上交流。涉及他们的专业领域时，可以直接讨论核心问题。
+2. **对等交流**：语气平等坦诚，像同行之间的讨论。不需要过多铺垫和修饰。
+3. **关注个人层面**：专业人士也有自己的疲惫、困惑和情感需求。帮助他们在专业角色之外看见自己作为一个人的需要。
+4. **有深度的对话**：可以进行更深入、更直接的讨论。当他们分享观点时，认真对待并回应，必要时坦诚提出不同视角。
+5. **避免说教**：他们不需要被「教育」。当他们自我怀疑时，不廉价安慰，而是帮他们客观审视处境。
+6. **拒绝讨好**：不因为对方是专业人士就过度恭维。真诚比礼貌更重要。
+
+## 记忆上下文
+
+### 你记得关于对方的重要信息
+%s
+
+### 对方和你之间有过以下对话片段
+%s
+
+在回应时，自然地融入这些记忆。
+
+## 响应格式
+
+你的每一次回复必须是一个 JSON 对象，包含以下字段：
+1. **text**: 一段坦诚、直接的回应文字（1-3句话）。注意：text 内容必须是纯文本，禁止使用任何 Markdown 格式。
+2. **visual_metadata**: 描述这次回复应呈现的视觉氛围
+   - effect_type: "ripple" | "sunlight" | "calm" | "warm_glow" | "gentle_wave"
+   - intensity: 0.0 ~ 1.0
+   - color_tone: "soft_pink" | "warm_gold" | "gentle_blue" | "lavender" | "neutral_white" | "coral" | "sage"
+3. **memory_extract**: 如果用户分享了值得记住的信息，提取出来；否则为 null
+
+记住：你的存在是提供一个对等的、可以卸下专业面具的空间。`
+
+const adminPromptSuffix = "\n\n## 额外信息\n该用户是社区管理员。保持一贯的真诚态度，涉及社区管理话题时可以更直接高效地交流。"
+
+func getCompanionPrompt(role model.UserRole, isAdmin bool) string {
+	var prompt string
+	if model.ProfessionalRoles[role] {
+		prompt = companionSystemPromptProfessional
+	} else if role == model.RoleDad {
+		prompt = companionSystemPromptDad
+	} else {
+		prompt = companionSystemPromptMom
+	}
+	if isAdmin {
+		prompt += adminPromptSuffix
+	}
+	return prompt
+}
+
+func pronounFor(role model.UserRole) string {
+	if model.ProfessionalRoles[role] {
+		return "对方"
+	}
+	if role == model.RoleDad {
+		return "他"
+	}
+	return "她"
+}
 
 const (
 	maxGuestSessions = 1000 // Maximum number of guest sessions in memory
@@ -62,6 +162,7 @@ const (
 type ChatService struct {
 	client    *openai.Client
 	chatRepo  *repository.ChatRepo
+	userRepo  *repository.UserRepo
 	firecrawl *firecrawl.Client
 	// In-memory storage for guest sessions
 	mu            sync.RWMutex
@@ -69,10 +170,11 @@ type ChatService struct {
 	guestProfiles map[string]map[string]interface{}
 }
 
-func NewChatService(client *openai.Client, chatRepo *repository.ChatRepo, fc *firecrawl.Client) *ChatService {
+func NewChatService(client *openai.Client, chatRepo *repository.ChatRepo, userRepo *repository.UserRepo, fc *firecrawl.Client) *ChatService {
 	return &ChatService{
 		client:        client,
 		chatRepo:      chatRepo,
+		userRepo:      userRepo,
 		firecrawl:     fc,
 		guestMemory:   make(map[string][]map[string]interface{}),
 		guestProfiles: make(map[string]map[string]interface{}),
@@ -87,12 +189,21 @@ func (s *ChatService) Chat(ctx context.Context, msg dto.UserMessage, userID stri
 }
 
 func (s *ChatService) chatAuthenticated(ctx context.Context, msg dto.UserMessage, userID string) (*dto.VisualResponse, error) {
+	// Look up user role
+	role := model.RoleMom
+	isAdmin := false
+	if user, err := s.userRepo.FindByID(userID); err == nil {
+		role = user.Role
+		isAdmin = user.IsAdmin
+	}
+	pronoun := pronounFor(role)
+
 	// Load memory from DB
 	profile, turns := s.loadUserMemory(userID)
 
-	systemPrompt := fmt.Sprintf(companionSystemPrompt,
-		formatProfile(profile),
-		formatTurns(turns),
+	systemPrompt := fmt.Sprintf(getCompanionPrompt(role, isAdmin),
+		formatProfile(profile, pronoun),
+		formatTurns(turns, pronoun),
 	)
 
 	webResults := s.searchWebForChat(ctx, msg.Content)
@@ -165,9 +276,9 @@ func (s *ChatService) chatGuest(ctx context.Context, msg dto.UserMessage) (*dto.
 	turns := s.guestMemory[sessionID]
 	s.mu.Unlock()
 
-	systemPrompt := fmt.Sprintf(companionSystemPrompt,
-		formatProfile(profile),
-		formatTurns(turns),
+	systemPrompt := fmt.Sprintf(getCompanionPrompt(model.RoleMom, false),
+		formatProfile(profile, "她"),
+		formatTurns(turns, "她"),
 	)
 
 	webResults := s.searchWebForChat(ctx, msg.Content)
@@ -280,21 +391,21 @@ func (s *ChatService) saveUserMemory(userID string, profile map[string]interface
 	}
 }
 
-func formatProfile(profile map[string]interface{}) string {
+func formatProfile(profile map[string]interface{}, pronoun string) string {
 	if len(profile) == 0 {
 		return "（暂无记录）"
 	}
 	parts := ""
 	if name, ok := profile["preferred_name"].(string); ok && name != "" {
-		parts += fmt.Sprintf("- 她喜欢被称为：%s\n", name)
+		parts += fmt.Sprintf("- %s喜欢被称为：%s\n", pronoun, name)
 	}
 	if hasPets, ok := profile["has_pets"].(bool); ok && hasPets {
 		if details, ok := profile["pet_details"].(string); ok {
-			parts += fmt.Sprintf("- 她有宠物：%s\n", details)
+			parts += fmt.Sprintf("- %s有宠物：%s\n", pronoun, details)
 		}
 	}
 	if interests, ok := profile["interests"].([]interface{}); ok && len(interests) > 0 {
-		parts += "- 她的兴趣："
+		parts += fmt.Sprintf("- %s的兴趣：", pronoun)
 		for i, v := range interests {
 			if i > 0 {
 				parts += ", "
@@ -304,7 +415,7 @@ func formatProfile(profile map[string]interface{}) string {
 		parts += "\n"
 	}
 	if concerns, ok := profile["concerns"].([]interface{}); ok && len(concerns) > 0 {
-		parts += "- 她曾表达的担忧："
+		parts += fmt.Sprintf("- %s曾表达的担忧：", pronoun)
 		for i, v := range concerns {
 			if i > 0 {
 				parts += ", "
@@ -319,7 +430,7 @@ func formatProfile(profile map[string]interface{}) string {
 	return parts
 }
 
-func formatTurns(turns []map[string]interface{}) string {
+func formatTurns(turns []map[string]interface{}, pronoun string) string {
 	if len(turns) == 0 {
 		return "（这是你们的第一次对话）"
 	}
@@ -329,7 +440,7 @@ func formatTurns(turns []map[string]interface{}) string {
 		start = len(turns) - 5
 	}
 	for _, t := range turns[start:] {
-		result += fmt.Sprintf("她说：%v\n你回复：%v\n", t["user_input"], t["assistant_response"])
+		result += fmt.Sprintf("%s说：%v\n你回复：%v\n", pronoun, t["user_input"], t["assistant_response"])
 	}
 	return result
 }
diff --git a/backend/internal/service/community_ai.go b/backend/internal/service/community_ai.go
index af8b22e3..5a21a8d2 100644
--- a/backend/internal/service/community_ai.go
+++ b/backend/internal/service/community_ai.go
@@ -22,6 +22,7 @@ type CommunityAIService struct {
 	questionRepo *repository.QuestionRepo
 	answerRepo   *repository.AnswerRepo
 	commentRepo  *repository.CommentRepo
+	userRepo     *repository.UserRepo
 	aiUserID     string
 }
 
@@ -31,6 +32,7 @@ func NewCommunityAIService(
 	questionRepo *repository.QuestionRepo,
 	answerRepo *repository.AnswerRepo,
 	commentRepo *repository.CommentRepo,
+	userRepo *repository.UserRepo,
 	aiUserID string,
 ) *CommunityAIService {
 	return &CommunityAIService{
@@ -39,6 +41,7 @@ func NewCommunityAIService(
 		questionRepo: questionRepo,
 		answerRepo:   answerRepo,
 		commentRepo:  commentRepo,
+		userRepo:     userRepo,
 		aiUserID:     aiUserID,
 	}
 }
@@ -88,7 +91,8 @@ func (s *CommunityAIService) HandleNewQuestion(questionID string) {
 	threadCtx := fmt.Sprintf("帖子标题：%s\n帖子内容：%s", q.Title, q.Content)
 	searchCtx, sources := s.searchWeb(ctx, q.Title)
 
-	reply, err := s.generateReply(ctx, threadCtx, searchCtx, sources)
+	authorRole, authorIsAdmin := s.lookupUserRole(q.AuthorID)
+	reply, err := s.generateReply(ctx, threadCtx, searchCtx, sources, authorRole, authorIsAdmin)
 	if err != nil {
 		log.Printf("[CommunityAI] failed to generate reply for question %s: %v", questionID, err)
 		return
@@ -135,7 +139,8 @@ func (s *CommunityAIService) HandleNewAnswer(questionID, answerID string) {
 
 	searchCtx, sources := s.searchWeb(ctx, q.Title)
 
-	reply, err := s.generateReply(ctx, sb.String(), searchCtx, sources)
+	authorRole, authorIsAdmin := s.lookupUserRole(answer.AuthorID)
+	reply, err := s.generateReply(ctx, sb.String(), searchCtx, sources, authorRole, authorIsAdmin)
 	if err != nil {
 		log.Printf("[CommunityAI] failed to generate reply for answer %s: %v", answerID, err)
 		return
@@ -194,15 +199,16 @@ func (s *CommunityAIService) HandleNewComment(answerID, commentID string) {
 
 	searchCtx, sources := s.searchWeb(ctx, q.Title)
 
-	reply, err := s.generateReply(ctx, sb.String(), searchCtx, sources)
+	triggerComment, err := s.commentRepo.FindByID(commentID)
 	if err != nil {
-		log.Printf("[CommunityAI] failed to generate comment reply: %v", err)
+		log.Printf("[CommunityAI] failed to find trigger comment %s: %v", commentID, err)
 		return
 	}
 
-	triggerComment, err := s.commentRepo.FindByID(commentID)
+	authorRole, authorIsAdmin := s.lookupUserRole(triggerComment.AuthorID)
+	reply, err := s.generateReply(ctx, sb.String(), searchCtx, sources, authorRole, authorIsAdmin)
 	if err != nil {
-		log.Printf("[CommunityAI] failed to find trigger comment %s: %v", commentID, err)
+		log.Printf("[CommunityAI] failed to generate comment reply: %v", err)
 		return
 	}
 
@@ -260,16 +266,29 @@ func (s *CommunityAIService) searchWeb(ctx context.Context, query string) (strin
 	return sb.String(), sources
 }
 
-const communityAISystemPrompt = `你是「小石光」，一位温柔且专业的产后恢复陪伴者，正在社区帖子中回复用户的提问。
+func (s *CommunityAIService) lookupUserRole(userID string) (model.UserRole, bool) {
+	if s.userRepo == nil {
+		return model.RoleMom, false
+	}
+	user, err := s.userRepo.FindByID(userID)
+	if err != nil {
+		return model.RoleMom, false
+	}
+	return user.Role, user.IsAdmin
+}
+
+const communityAISystemPromptMom = `你是「小石光」，一位真诚的知心朋友，正在社区帖子中回复用户。
 
-## 角色定位
-你面对的每一位用户，首先是一个完整的「独立女性」，其次才是新手妈妈。你用温暖、真诚、专业的语气回应她们的问题和困惑。
+## 角色定位：知心朋友
+你面对的用户首先是一个完整的「她自己」。你真正在意的不是给出完美答案，而是让她感到被看见、被理解。
 
 ## 回复原则
-1. **认可与共情优先**：先看见和认可她的感受，再提供建议
-2. **拒绝说教**：用「我了解到...」「有研究表明...」「或许可以试试...」的方式分享
-3. **保护主体性**：提醒她有权利为自己发声，可以寻求帮助
-4. **避免有毒正能量**：承认困难的真实性
+1. **看见与理解优先**：先看见和理解她的内心活动，让她知道这些感受是真实的、合理的
+2. **引导而非安慰**：不用「一切都会好的」「你已经很棒了」这类廉价安慰，而是通过提问帮她梳理内心——「你觉得最在意的是什么？」
+3. **关注自我与当下**：温和地引导她把注意力拉回自己身上——她此刻的感受、她真正的需求
+4. **拒绝说教**：用「我了解到...」「有研究表明...」「或许可以试试...」的方式分享
+5. **有深度的回应**：当她自我否定时，不一味否认，而是通过提问引导她客观审视自己——既看到困难，也看到已经做到的
+6. **避免有毒正能量**：承认困难的真实性
 
 ## 帖子上下文
 %s
@@ -279,8 +298,8 @@ const communityAISystemPrompt = `你是「小石光」，一位温柔且专业
 
 ## 防幻觉规则（严格遵守）
 1. 只基于上述帖子上下文和搜索结果回答
-2. 仅在提供事实性信息时引用来源（如医学知识、研究数据、具体机构推荐），日常共情和鼓励不需要引用
-3. 如果不确定，明确说「关于这一点我不太确定，建议咨询专业医生/心理咨询师」
+2. 仅在提供事实性信息时引用来源（如医学知识、研究数据），日常共情和鼓励不需要引用
+3. 如果不确定，明确说「关于这一点我不太确定，建议咨询专业人士」
 4. 绝不编造医疗数据、药物剂量、具体治疗方案
 5. 涉及医疗问题时，始终建议咨询专业医生
 
@@ -291,12 +310,93 @@ const communityAISystemPrompt = `你是「小石光」，一位温柔且专业
 - 不要重复用户说过的话
 - 移除@提及，直接回复内容`
 
-func (s *CommunityAIService) generateReply(ctx context.Context, threadContext, searchContext string, sources []sourceRef) (string, error) {
+const communityAISystemPromptDad = `你是「小石光」，一位耐心的同行者和指导者，正在社区帖子中回复用户。
+
+## 角色定位：耐心的指导者
+你面对的用户正在家庭中承担重要角色。你的存在不是为了评判他做得好不好，而是帮他看清眼前的事，一步步做好。
+
+## 回复原则
+1. **理解先行**：先理解他面对的具体困境，不急于评价。承认「这确实不容易」比空洞的鼓励更有意义
+2. **引导理解**：帮他理解事物的本质——伴侣的需求、孩子的成长、家庭角色的协作。不是说教，而是帮他「看见」
+3. **给出具体方案**：在理解的基础上，提供可操作的建议。不是笼统的「多关心她」，而是具体的行动
+4. **平和而不讨好**：语气平等、真诚，像一个有经验的朋友在分享
+5. **有深度的回应**：当他感到挫败时，不简单否定感受，而是通过提问帮他理清头绪——「你觉得最大的障碍是什么？」
+6. **拒绝空洞鼓励**：不说「你很厉害」「加油就行」。面对问题时坦诚分析，给出切实的下一步
+
+## 帖子上下文
+%s
+
+## 联网搜索结果
+%s
+
+## 防幻觉规则（严格遵守）
+1. 只基于上述帖子上下文和搜索结果回答
+2. 仅在提供事实性信息时引用来源（如医学知识、研究数据），日常建议不需要引用
+3. 如果不确定，明确说「关于这一点我不太确定，建议咨询专业人士」
+4. 绝不编造医疗数据、药物剂量、具体治疗方案
+5. 涉及医疗问题时，始终建议咨询专业医生
+
+## 回复要求
+- 用纯文本回复，不要使用 JSON 格式
+- 语气平和真诚
+- 1-3段话即可，不要过长
+- 不要重复用户说过的话
+- 移除@提及，直接回复内容`
+
+const communityAISystemPromptProfessional = `你是「小石光」，正在社区帖子中与一位医疗/心理健康领域的专业人士交流。
+
+## 角色定位：对等的交流者
+你面对的用户拥有专业知识和临床经验。尊重他们的专业背景，在更高层次上交流。
+
+## 回复原则
+1. **尊重专业**：不解释基础知识，直接讨论核心问题
+2. **对等交流**：语气平等坦诚，像同行之间的讨论
+3. **关注个人层面**：即使是专业人士，分享困惑时也需要被认真对待
+4. **有深度的回应**：可以更直接、更深入地讨论，不需要简化
+5. **避免讨好**：不因对方是专业人士就过度恭维，真诚比礼貌更重要
+6. **坦诚交流**：如果信息超出范围，直接说明
+
+## 帖子上下文
+%s
+
+## 联网搜索结果
+%s
+
+## 防幻觉规则（严格遵守）
+1. 只基于上述帖子上下文和搜索结果回答
+2. 仅在提供事实性信息时引用来源
+3. 如果不确定，坦诚说明
+4. 绝不编造医疗数据、药物剂量、具体治疗方案
+5. 涉及具体诊疗方案时，建议结合临床实际判断
+
+## 回复要求
+- 用纯文本回复，不要使用 JSON 格式
+- 语气平等直接
+- 1-3段话即可，不要过长
+- 不要重复用户说过的话
+- 移除@提及，直接回复内容`
+
+func getCommunityAIPrompt(role model.UserRole, isAdmin bool) string {
+	var prompt string
+	if model.ProfessionalRoles[role] {
+		prompt = communityAISystemPromptProfessional
+	} else if role == model.RoleDad {
+		prompt = communityAISystemPromptDad
+	} else {
+		prompt = communityAISystemPromptMom
+	}
+	if isAdmin {
+		prompt += "\n\n## 额外信息\n该用户是社区管理员。保持真诚态度，涉及社区管理话题时可以更直接高效地交流。"
+	}
+	return prompt
+}
+
+func (s *CommunityAIService) generateReply(ctx context.Context, threadContext, searchContext string, sources []sourceRef, role model.UserRole, isAdmin bool) (string, error) {
 	if searchContext == "" {
 		searchContext = "（无搜索结果）"
 	}
 
-	systemPrompt := fmt.Sprintf(communityAISystemPrompt, threadContext, searchContext)
+	systemPrompt := fmt.Sprintf(getCommunityAIPrompt(role, isAdmin), threadContext, searchContext)
 
 	messages := []openai.Message{
 		{Role: "system", Content: systemPrompt},
diff --git a/frontend/src/components/overlay/CarPage.vue b/frontend/src/components/overlay/CarPage.vue
index 718f7eb0..d98a2eef 100644
--- a/frontend/src/components/overlay/CarPage.vue
+++ b/frontend/src/components/overlay/CarPage.vue
@@ -221,77 +221,7 @@
               </div>
             </div>
 
-            <div class="tab-bar">
-              <button
-                v-for="tab in profileTabs"
-                :key="tab.key"
-                :class="['tab-btn', { active: activeTab === tab.key }]"
-                @click="activeTab = tab.key"
-              >
-                {{ tab.label }}
-              </button>
-            </div>
-
-            <div class="tab-content">
-              <template v-if="activeTab === 'questions'">
-                <div v-if="questionsLoading && myQuestions.length === 0" class="loading-state">加载中...</div>
-                <div v-else-if="myQuestions.length === 0" class="empty-state">还没有发布过问题</div>
-                <template v-else>
-                  <div class="item-list">
-                    <div v-for="q in myQuestions" :key="q.id" class="item-card">
-                      <div class="item-top">
-                        <h4 class="item-title">{{ q.title }}</h4>
-                        <span class="status-badge" :class="'status-' + q.status">{{ statusText(q.status) }}</span>
-                      </div>
-                      <p class="item-preview">{{ q.content_preview }}</p>
-                      <div class="item-meta">
-                        <span>💬 {{ q.answer_count }}</span>
-                        <span>❤️ {{ q.like_count }}</span>
-                        <span>{{ formatDate(q.created_at) }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <button
-                    v-if="questionsPage < questionsTotalPages"
-                    class="load-more-btn"
-                    :disabled="questionsLoading"
-                    @click="loadMoreQuestions"
-                  >
-                    {{ questionsLoading ? '加载中...' : '加载更多' }}
-                  </button>
-                </template>
-              </template>
-
-              <template v-if="activeTab === 'answers'">
-                <div v-if="answersLoading && myAnswers.length === 0" class="loading-state">加载中...</div>
-                <div v-else-if="myAnswers.length === 0" class="empty-state">还没有回答过问题</div>
-                <template v-else>
-                  <div class="item-list">
-                    <div v-for="a in myAnswers" :key="a.id" class="item-card">
-                      <div class="item-top">
-                        <span class="item-ref">{{ a.question.title }}</span>
-                        <span class="status-badge" :class="'status-' + a.status">{{ statusText(a.status) }}</span>
-                      </div>
-                      <p class="item-preview">{{ a.content_preview }}</p>
-                      <div class="item-meta">
-                        <span>❤️ {{ a.like_count }}</span>
-                        <span v-if="a.is_accepted" class="accepted-tag">✓ 已采纳</span>
-                        <span>{{ formatDate(a.created_at) }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <button
-                    v-if="answersPage < answersTotalPages"
-                    class="load-more-btn"
-                    :disabled="answersLoading"
-                    @click="loadMoreAnswers"
-                  >
-                    {{ answersLoading ? '加载中...' : '加载更多' }}
-                  </button>
-                </template>
-              </template>
-
-              <template v-if="activeTab === 'settings'">
+            <div class="settings-content">
                 <!-- Profile Info -->
                 <div class="settings-section">
                   <h3 class="settings-heading">个人资料</h3>
@@ -482,7 +412,6 @@
                 <div class="settings-section">
                   <button class="logout-btn" @click="onLogout">退出登录</button>
                 </div>
-              </template>
             </div>
           </div>
         </div>
@@ -510,12 +439,8 @@ import {
   generateShellCode,
   bindPartner,
   unbindPartner,
-  getMyQuestions,
-  getMyAnswers,
   changePassword,
   type UserProfile,
-  type MyQuestionListItem,
-  type MyAnswerListItem,
 } from '@/lib/api/user'
 import { getErrorMessage } from '@/lib/apiClient'
 import { useBackgroundMusicControls } from '@/composables/useBackgroundMusicLoop'
@@ -567,23 +492,11 @@ const editSaving = ref(false)
 // ── Profile modal state ──
 const showProfile = ref(false)
 const profile = ref<UserProfile | null>(null)
-const activeTab = ref<'questions' | 'answers' | 'settings'>('questions')
-
 const editingNickname = ref(false)
 const nicknameValue = ref('')
 const nicknameError = ref('')
 const nicknameInput = ref<HTMLInputElement | null>(null)
 
-const myQuestions = ref<MyQuestionListItem[]>([])
-const questionsPage = ref(1)
-const questionsTotalPages = ref(1)
-const questionsLoading = ref(false)
-
-const myAnswers = ref<MyAnswerListItem[]>([])
-const answersPage = ref(1)
-const answersTotalPages = ref(1)
-const answersLoading = ref(false)
-
 const pwForm = ref({ old_password: '', new_password: '', confirm_password: '' })
 const pwError = ref('')
 const pwSuccess = ref('')
@@ -622,12 +535,6 @@ const unbindLoading = ref(false)
 const isBound = computed(() => !!profile.value?.partner)
 const isMom = computed(() => (profile.value?.role || auth.user?.role) === 'mom')
 
-const profileTabs = [
-  { key: 'questions' as const, label: '我的提问' },
-  { key: 'answers' as const, label: '我的回答' },
-  { key: 'settings' as const, label: '设置' },
-]
-
 const roleMap: Record<string, string> = {
   mom: '溯源者',
   dad: '守护者',
@@ -822,32 +729,16 @@ async function onSaveDetail() {
 // ── Profile methods ──
 function openProfile() {
   showProfile.value = true
-  activeTab.value = 'questions'
-  myQuestions.value = []
-  myAnswers.value = []
-  questionsPage.value = 1
-  answersPage.value = 1
   pwForm.value = { old_password: '', new_password: '', confirm_password: '' }
   pwError.value = ''
   pwSuccess.value = ''
   fetchProfile()
-  fetchQuestions(1)
 }
 
 function closeProfile() {
   showProfile.value = false
 }
 
-function statusText(status: string): string {
-  const map: Record<string, string> = {
-    published: '已发布',
-    pending_review: '审核中',
-    hidden: '已隐藏',
-    draft: '草稿',
-  }
-  return map[status] || status
-}
-
 function formatDate(iso: string): string {
   const d = new Date(iso)
   const m = d.getMonth() + 1
@@ -893,55 +784,12 @@ async function fetchProfile() {
   try {
     profile.value = await getUserProfile()
     syncProfileForm()
+    selectedRole.value = profile.value?.role || auth.user?.role || 'mom'
   } catch {
     syncProfileForm()
   }
 }
 
-async function fetchQuestions(page: number) {
-  questionsLoading.value = true
-  try {
-    const res = await getMyQuestions({ page, page_size: 10 })
-    if (page === 1) {
-      myQuestions.value = res.items
-    } else {
-      myQuestions.value = [...myQuestions.value, ...res.items]
-    }
-    questionsPage.value = res.page
-    questionsTotalPages.value = res.total_pages
-  } catch {
-    // silent
-  } finally {
-    questionsLoading.value = false
-  }
-}
-
-async function fetchAnswers(page: number) {
-  answersLoading.value = true
-  try {
-    const res = await getMyAnswers({ page, page_size: 10 })
-    if (page === 1) {
-      myAnswers.value = res.items
-    } else {
-      myAnswers.value = [...myAnswers.value, ...res.items]
-    }
-    answersPage.value = res.page
-    answersTotalPages.value = res.total_pages
-  } catch {
-    // silent
-  } finally {
-    answersLoading.value = false
-  }
-}
-
-function loadMoreQuestions() {
-  fetchQuestions(questionsPage.value + 1)
-}
-
-function loadMoreAnswers() {
-  fetchAnswers(answersPage.value + 1)
-}
-
 function triggerAvatarUpload() {
   avatarInput.value?.click()
 }
@@ -1134,20 +982,6 @@ watch(visible, async (isVisible) => {
     }
   }
 })
-
-watch(activeTab, (tab) => {
-  if (tab === 'answers' && myAnswers.value.length === 0) {
-    fetchAnswers(1)
-  }
-  if (tab === 'settings') {
-    syncProfileForm()
-    profileFormError.value = ''
-    profileFormSuccess.value = ''
-    selectedRole.value = profile.value?.role || auth.user?.role || 'mom'
-    roleError.value = ''
-    roleSuccess.value = ''
-  }
-})
 </script>
 
 <style scoped>
@@ -1906,169 +1740,6 @@ watch(activeTab, (tab) => {
   letter-spacing: 0.5px;
 }
 
-.tab-bar {
-  display: flex;
-  gap: 4px;
-  margin-bottom: 18px;
-  background: rgba(255, 255, 255, 0.06);
-  border-radius: 14px;
-  padding: 4px;
-}
-
-.tab-btn {
-  flex: 1;
-  padding: 10px 0;
-  border-radius: 11px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.tab-btn.active {
-  background: rgba(255, 255, 255, 0.14);
-  color: var(--text-primary);
-}
-
-.tab-content {
-  min-height: 200px;
-}
-
-.loading-state,
-.empty-state {
-  text-align: center;
-  padding: 40px 0;
-  color: var(--text-secondary);
-  font-size: 14px;
-}
-
-.item-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.item-card {
-  padding: 16px 18px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 16px;
-  transition: background 0.2s;
-}
-
-.item-card:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.item-top {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 6px;
-}
-
-.item-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary);
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.item-ref {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--accent-warm);
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.status-badge {
-  flex-shrink: 0;
-  padding: 2px 8px;
-  border-radius: 8px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.3px;
-}
-
-.status-published {
-  background: rgba(72, 199, 142, 0.18);
-  color: #48c78e;
-}
-
-.status-pending_review {
-  background: rgba(255, 210, 76, 0.18);
-  color: #ffd24c;
-}
-
-.status-hidden {
-  background: rgba(160, 160, 160, 0.18);
-  color: #a0a0a0;
-}
-
-.status-draft {
-  background: rgba(160, 160, 160, 0.18);
-  color: #a0a0a0;
-}
-
-.item-preview {
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.5;
-  margin-bottom: 8px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.item-meta {
-  font-size: 12px;
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.accepted-tag {
-  color: #48c78e;
-  font-weight: 600;
-}
-
-.load-more-btn {
-  display: block;
-  width: 100%;
-  margin-top: 16px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 14px;
-  color: var(--text-secondary);
-  font-size: 14px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.load-more-btn:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.load-more-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .settings-section {
   margin-bottom: 28px;
 }