From 9015acaa733dfe2f92ac0fa9d2ad79e7570daecd Mon Sep 17 00:00:00 2001
From: bbb-lsy07 <bbb-lsy07@users.noreply.github.com>
Date: Sun, 21 Jun 2026 10:59:55 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=BD=BB=E5=BA=95=E9=87=8D=E5=86=99?=
 =?UTF-8?q?=20LogsView=20&=20SettingsView=20-=20=E5=8E=9F=E7=94=9F=20Scope?=
 =?UTF-8?q?d=20CSS=20=E6=9B=BF=E4=BB=A3=20Tailwind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LogsView.vue: 移除所有 Tailwind 类，改用 <style scoped> 原生 CSS
- SettingsView.vue: 移除所有 Tailwind 类，改用 <style scoped> 原生 CSS
- 标签配色、气泡样式、引用框全部使用纯 CSS 实现，避免 Halo 主题冲突
- 版本号升级至 1.0.2 强制刷新前端缓存
---
 build.gradle                   |    2 +-
 src/main/resources/plugin.yaml |    2 +-
 ui/src/views/LogsView.vue      |  379 ++++++------
 ui/src/views/SettingsView.vue  | 1008 +++++---------------------------
 4 files changed, 330 insertions(+), 1061 deletions(-)

diff --git a/build.gradle b/build.gradle
index ea096d1..9d8704e 100644
--- a/build.gradle
+++ b/build.gradle
@@ -5,7 +5,7 @@ plugins {
 }
 
 group 'top.nxxy335.commentaiautopilot'
-version '1.0.1'
+version '1.0.2'
 
 repositories {
     mavenCentral()
diff --git a/src/main/resources/plugin.yaml b/src/main/resources/plugin.yaml
index 9f0dad3..77b1e97 100644
--- a/src/main/resources/plugin.yaml
+++ b/src/main/resources/plugin.yaml
@@ -30,4 +30,4 @@ spec:
       url: "https://github.com/sunny-335/plugin-comment-ai-autopilot/blob/main/LICENSE"
   settingName: "comment-ai-autopilot-settings"
   configMapName: "comment-ai-autopilot-configmap"
-  version: "1.0.1"
+  version: "1.0.2"
diff --git a/ui/src/views/LogsView.vue b/ui/src/views/LogsView.vue
index 5f98b35..592a03c 100644
--- a/ui/src/views/LogsView.vue
+++ b/ui/src/views/LogsView.vue
@@ -1,33 +1,31 @@
 <template>
-  <div class="comment-ai-autopilot-logs">
+  <div class="logs-container">
     <VPageHeader title="AI回复日志">
-      <template #icon>
-        <IconPlug class="mr-2 self-center" />
-      </template>
+      <template #icon><IconPlug class="header-icon" /></template>
       <template #actions>
-        <VButton @click="$router.push({ name: 'CommentAiAutopilot' })"> 返回概览 </VButton>
+        <VButton @click="$router.push({ name: 'CommentAiAutopilot' })">返回概览</VButton>
       </template>
     </VPageHeader>
 
     <!-- 批量操作工具栏 -->
-    <div v-if="selectedNames.size > 0" class="m-4 mb-0 flex flex-wrap items-center gap-3 bg-blue-50 border border-blue-200 rounded-lg px-4 py-3">
-      <span class="text-sm text-blue-700 font-medium">已选择 {{ selectedNames.size }} 项</span>
-      <button class="px-3 py-1.5 text-xs font-medium rounded-md bg-green-600 text-white hover:bg-green-700 transition" @click="batchApprove">批量通过</button>
-      <button class="px-3 py-1.5 text-xs font-medium rounded-md bg-orange-500 text-white hover:bg-orange-600 transition" @click="batchReject">批量拒绝</button>
-      <button class="px-3 py-1.5 text-xs font-medium rounded-md bg-red-600 text-white hover:bg-red-700 transition" @click="batchDelete">批量删除</button>
-      <button class="px-3 py-1.5 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-200 transition ml-auto" @click="selectedNames.clear(); selectAll = false">取消选择</button>
+    <div v-if="selectedNames.size > 0" class="toolbar batch-toolbar">
+      <span class="batch-text">已选择 {{ selectedNames.size }} 项</span>
+      <button class="btn-batch btn-pass" @click="batchApprove">批量通过</button>
+      <button class="btn-batch btn-reject" @click="batchReject">批量拒绝</button>
+      <button class="btn-batch btn-delete" @click="batchDelete">批量删除</button>
+      <button class="btn-batch btn-cancel" @click="selectedNames.clear(); selectAll = false">取消选择</button>
     </div>
 
     <!-- 过滤工具栏 -->
-    <div class="m-4 mb-0 flex flex-col md:flex-row items-center gap-3">
-      <select v-model="filterStatus" class="w-full md:w-auto px-3 py-2 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:bg-white focus:border-blue-500 outline-none transition">
+    <div class="toolbar filter-toolbar">
+      <select v-model="filterStatus" class="filter-select">
         <option value="">全部状态</option>
         <option value="PASS">通过</option>
         <option value="FAIL">失败</option>
         <option value="PENDING">待审核</option>
         <option value="REJECTED">已拒绝</option>
       </select>
-      <select v-model="filterSentiment" class="w-full md:w-auto px-3 py-2 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:bg-white focus:border-blue-500 outline-none transition">
+      <select v-model="filterSentiment" class="filter-select">
         <option value="">全部情感</option>
         <option value="VERY_POSITIVE">非常正面</option>
         <option value="POSITIVE">正面</option>
@@ -35,79 +33,60 @@
         <option value="NEGATIVE">负面</option>
         <option value="VERY_NEGATIVE">非常负面</option>
       </select>
-      <div class="relative w-full md:w-64">
-        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
-        <input v-model="filterKeyword" type="text" placeholder="搜索回复内容..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:bg-white focus:border-blue-500 outline-none transition" />
-      </div>
-      <button class="w-full md:w-auto flex items-center justify-center gap-1 px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-lg transition" @click="resetFilters">
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
-        重置
-      </button>
+      <input v-model="filterKeyword" type="text" placeholder="搜索回复内容..." class="filter-input" />
+      <button class="btn-reset" @click="resetFilters">重置</button>
     </div>
 
     <!-- 列表区 -->
-    <div class="m-4">
+    <div class="list-area">
       <VLoading v-if="loading" />
-
-      <div v-else-if="replies.length === 0" class="flex flex-col items-center justify-center py-16 text-gray-400">
-        <svg class="w-12 h-12 mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
-        <span class="text-sm">暂无记录</span>
-      </div>
-
-      <div v-else class="space-y-4">
-        <div class="flex items-center gap-2 px-1">
-          <input type="checkbox" :checked="selectAll" @change="toggleSelectAll" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
-          <span class="text-xs text-gray-500">全选本页</span>
+      <div v-else-if="replies.length === 0" class="empty-state">暂无记录</div>
+      
+      <div v-else class="reply-list">
+        <div class="select-all-wrap">
+          <input type="checkbox" :checked="selectAll" @change="toggleSelectAll" />
+          <span>全选本页</span>
         </div>
         
-        <div v-for="reply in replies" :key="reply.metadata.name" class="bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-md transition duration-200">
-          <div class="p-4 flex items-start gap-3">
-            <input type="checkbox" :checked="selectedNames.has(reply.metadata.name)" @change="toggleSelect(reply.metadata.name)" class="mt-1 w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 shrink-0" />
-            <div class="flex-1 min-w-0">
-              <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
-                <div class="flex flex-wrap items-center gap-1.5">
-                  <span class="px-2 py-0.5 rounded text-xs font-medium" :class="getStatusClass(reply.spec.status)">{{ getStatusLabel(reply.spec.status) }}</span>
-                  <span class="px-2 py-0.5 rounded text-xs font-medium" :class="reply.spec.published ? 'bg-blue-50 text-blue-700' : 'bg-gray-100 text-gray-500'">{{ reply.spec.published ? '已发布' : '未发布' }}</span>
-                  <span v-if="reply.spec.isAiConversation" class="px-2 py-0.5 rounded text-xs font-medium bg-purple-50 text-purple-700">对话</span>
-                  <span v-if="reply.spec.sentiment" class="px-2 py-0.5 rounded text-xs font-medium" :class="getSentimentClass(reply.spec.sentiment)">{{ getSentimentLabel(reply.spec.sentiment) }}</span>
+        <div v-for="reply in replies" :key="reply.metadata.name" class="reply-card">
+          <div class="card-main">
+            <input type="checkbox" :checked="selectedNames.has(reply.metadata.name)" @change="toggleSelect(reply.metadata.name)" />
+            <div class="card-content">
+              <div class="card-header">
+                <div class="tags-wrap">
+                  <span class="custom-tag" :class="'tag-' + reply.spec.status">{{ getStatusLabel(reply.spec.status) }}</span>
+                  <span class="custom-tag" :class="reply.spec.published ? 'tag-published' : 'tag-draft'">{{ reply.spec.published ? '已发布' : '未发布' }}</span>
+                  <span v-if="reply.spec.isAiConversation" class="custom-tag tag-conv">对话</span>
+                  <span v-if="reply.spec.sentiment" class="custom-tag" :class="'tag-' + reply.spec.sentiment">{{ getSentimentLabel(reply.spec.sentiment) }}</span>
                 </div>
-                <span class="text-xs text-gray-400 shrink-0">{{ formatDate(reply.metadata.creationTimestamp) }}</span>
-              </div>
-              <div class="text-sm text-gray-700 leading-relaxed break-words line-clamp-3">
-                {{ stripHtml(reply.spec.reply) || '(空)' }}
+                <span class="card-time">{{ formatDate(reply.metadata.creationTimestamp) }}</span>
               </div>
+              <div class="card-text">{{ stripHtml(reply.spec.reply) || '(空)' }}</div>
             </div>
           </div>
-          
-          <div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex flex-wrap items-center justify-between gap-3">
-            <div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
-              <span class="flex items-center gap-1">
-                评分 <span :class="getScoreTextClass(reply.spec.score)" class="font-bold">{{ reply.spec.score }}</span>
-                <span class="px-1.5 py-0.5 rounded ml-1" :class="getScoreBgClass(reply.spec.score)">{{ getScoreLabel(reply.spec.score) }}</span>
+          <div class="card-footer">
+            <div class="footer-info">
+              <span>评分: <strong>{{ reply.spec.score }}</strong></span>
+              <span v-if="reply.spec.postSlug">
+                关联: <a :href="getPostUrl(reply.spec.postSlug)" target="_blank">{{ reply.spec.postSlug }}</a>
               </span>
-              <span v-if="reply.spec.postSlug" class="flex items-center gap-1">
-                {{ reply.spec.postKind === 'SinglePage' ? '页面' : '文章' }}
-                <a :href="reply.spec.postKind === 'SinglePage' ? getPageUrl(reply.spec.postSlug) : getPostUrl(reply.spec.postSlug)" target="_blank" class="text-blue-500 hover:underline">{{ reply.spec.postSlug }}</a>
-              </span>
-              <span v-if="reply.spec.retryCount > 0" class="text-orange-500">重试 {{ reply.spec.retryCount }} 次</span>
+              <span v-if="reply.spec.retryCount > 0" class="retry-text">重试 {{ reply.spec.retryCount }} 次</span>
             </div>
-            <div class="flex items-center gap-2">
+            <div class="footer-actions">
               <template v-if="reply.spec.status === 'PASS' && !reply.spec.published">
-                <button class="px-2 py-1 text-xs text-green-600 bg-green-50 hover:bg-green-100 rounded transition" @click="handleApprove(reply.metadata.name)">审核通过</button>
-                <button class="px-2 py-1 text-xs text-red-600 bg-red-50 hover:bg-red-100 rounded transition" @click="handleReject(reply.metadata.name)">拒绝</button>
+                <button class="action-btn pass" @click="handleApprove(reply.metadata.name)">通过</button>
+                <button class="action-btn reject" @click="handleReject(reply.metadata.name)">拒绝</button>
               </template>
-              <button class="px-2 py-1 flex items-center gap-1 text-xs text-blue-600 bg-blue-50 hover:bg-blue-100 rounded transition" @click="openConversation(reply)">查看对话</button>
-              <button class="px-2 py-1 text-xs text-gray-500 bg-gray-200 hover:bg-red-50 hover:text-red-600 rounded transition" @click="handleDelete(reply.metadata.name)">删除</button>
+              <button class="action-btn view" @click="openConversation(reply)">查看对话</button>
+              <button class="action-btn delete" @click="handleDelete(reply.metadata.name)">删除</button>
             </div>
           </div>
         </div>
       </div>
-
-      <div v-if="totalPages > 1" class="flex items-center justify-between mt-6 px-2">
-        <span class="text-sm text-gray-500">共 {{ total }} 条</span>
-        <div class="flex gap-2">
+      
+      <div v-if="totalPages > 1" class="pagination">
+        <span>共 {{ total }} 条</span>
+        <div>
           <VButton size="sm" :disabled="page <= 1" @click="page--">上一页</VButton>
           <VButton size="sm" :disabled="page >= totalPages" @click="page++">下一页</VButton>
         </div>
@@ -116,38 +95,30 @@
 
     <!-- 完整对话弹窗 -->
     <teleport to="body">
-      <div v-if="showDialog" class="fixed inset-0 z-[9999] flex items-center justify-center p-4">
-        <div class="absolute inset-0 bg-gray-900/50 backdrop-blur-sm" @click="showDialog = false"></div>
-        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[85vh] flex flex-col overflow-hidden">
-          <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
-            <h3 class="text-lg font-bold text-gray-800">对话上下文</h3>
-            <button class="p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-700 rounded-lg transition" @click="showDialog = false">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
-            </button>
+      <div v-if="showDialog" class="dialog-overlay" @click.self="showDialog = false">
+        <div class="dialog-box">
+          <div class="dialog-header">
+            <h3>对话上下文</h3>
+            <button class="close-btn" @click="showDialog = false">×</button>
           </div>
-          <div class="flex-1 overflow-y-auto p-6 space-y-5 bg-gray-50/50">
+          <div class="dialog-body">
             <VLoading v-if="conversationLoading" />
-            <div v-else-if="conversationMessages.length === 0" class="text-center text-gray-400 py-10 text-sm">暂无内容</div>
-            <div v-else>
-              <div v-for="(msg, idx) in conversationMessages" :key="idx" class="flex mb-5" :class="msg.isAi ? 'justify-start' : 'justify-end'">
-                <div class="max-w-[85%] md:max-w-[75%]">
-                  <div class="text-xs mb-1.5 px-1 font-medium" :class="msg.isAi ? 'text-blue-600' : 'text-gray-500 text-right'">
-                    {{ msg.owner }}
-                  </div>
-                  <div class="rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-sm break-words" :class="msg.isAi ? 'bg-white border border-blue-100 text-gray-800 rounded-tl-sm' : 'bg-blue-600 text-white rounded-tr-sm'">
-                    <!-- 引用摘要模块（如果该条消息有回复对象，则渲染） -->
-                    <div v-if="msg.quoteOwner && msg.quoteContent"
-                         class="mb-2.5 px-3 py-2 rounded-lg border-l-[3px] text-xs"
-                         :class="msg.isAi ? 'bg-gray-50 border-gray-300 text-gray-500' : 'bg-black/10 border-white/40 text-blue-100'">
-                      <span class="font-semibold" :class="msg.isAi ? 'text-gray-700' : 'text-white'">@{{ msg.quoteOwner }}</span>：
-                      {{ truncateQuote(msg.quoteContent, 40) }}
+            <div v-else-if="conversationMessages.length === 0" class="empty-state">暂无内容</div>
+            <div v-else class="chat-container">
+              <div v-for="(msg, idx) in conversationMessages" :key="idx" class="chat-row" :class="msg.isAi ? 'row-ai' : 'row-user'">
+                <div class="chat-message">
+                  <div class="chat-owner">{{ msg.owner }}</div>
+                  <div class="chat-bubble" :class="msg.isAi ? 'bubble-ai' : 'bubble-user'">
+                    
+                    <!-- 原生 CSS 渲染的引用框 -->
+                    <div v-if="msg.quoteOwner && msg.quoteContent" class="quote-box">
+                      <span class="quote-owner">@{{ msg.quoteOwner }}:</span>
+                      <span class="quote-content">{{ truncateQuote(msg.quoteContent) }}</span>
                     </div>
-                    <!-- 实际发言内容 -->
-                    <div v-html="renderContent(msg.content)"></div>
-                  </div>
-                  <div class="text-[11px] text-gray-400 mt-1.5 px-1" :class="msg.isAi ? 'text-left' : 'text-right'">
-                    {{ formatDate(msg.time) }}
+
+                    <div class="chat-text" v-html="renderContent(msg.content)"></div>
                   </div>
+                  <div class="chat-time">{{ formatDate(msg.time) }}</div>
                 </div>
               </div>
             </div>
@@ -164,68 +135,29 @@ import { axiosInstance } from "@halo-dev/api-client"
 import { VPageHeader, VButton, VLoading, Toast } from "@halo-dev/components"
 import { IconPlug } from "@halo-dev/components"
 
-interface AiCommentReplyItem {
-  metadata: { name: string; creationTimestamp: string }
-  spec: {
-    commentId: string; postId: string; postSlug: string; postKind: string
-    reply: string; score: number; status: string; retryCount: number
-    replyTo: string; isAiConversation: boolean; published: boolean; sentiment: string | null
-  }
-}
+interface AiCommentReplyItem { metadata: { name: string; creationTimestamp: string }; spec: any }
+interface ConversationMessage { type: string; owner: string; content: string; time: string; isAi: boolean; quoteOwner?: string; quoteContent?: string }
 
-interface ConversationMessage {
-  type: string
-  owner: string
-  content: string
-  time: string
-  isAi: boolean
-  quoteOwner?: string
-  quoteContent?: string
-}
+const replies = ref<AiCommentReplyItem[]>([]); const loading = ref(false); const page = ref(1); const size = ref(20); const total = ref(0); const totalPages = ref(0);
+const selectedNames = ref<Set<string>>(new Set()); const selectAll = ref(false);
+const filterStatus = ref(""); const filterSentiment = ref(""); const filterKeyword = ref("");
+const showDialog = ref(false); const conversationLoading = ref(false); const conversationMessages = ref<ConversationMessage[]>([]);
 
-const replies = ref<AiCommentReplyItem[]>([])
-const loading = ref(false)
-const page = ref(1)
-const size = ref(20)
-const total = ref(0)
-const totalPages = ref(0)
-
-const selectedNames = ref<Set<string>>(new Set())
-const selectAll = ref(false)
-
-const filterStatus = ref("")
-const filterSentiment = ref("")
-const filterKeyword = ref("")
-
-const showDialog = ref(false)
-const conversationLoading = ref(false)
-const conversationMessages = ref<ConversationMessage[]>([])
-
-const toggleSelect = (name: string) => {
-  selectedNames.value.has(name) ? selectedNames.value.delete(name) : selectedNames.value.add(name)
-  selectAll.value = replies.value.length > 0 && replies.value.every(r => selectedNames.value.has(r.metadata.name))
-}
-const toggleSelectAll = () => {
-  if (selectAll.value) { selectedNames.value.clear(); selectAll.value = false } 
-  else { selectedNames.value = new Set(replies.value.map(r => r.metadata.name)); selectAll.value = true }
-}
+const toggleSelect = (name: string) => { selectedNames.value.has(name) ? selectedNames.value.delete(name) : selectedNames.value.add(name); selectAll.value = replies.value.length > 0 && replies.value.every(r => selectedNames.value.has(r.metadata.name)) }
+const toggleSelectAll = () => { if (selectAll.value) { selectedNames.value.clear(); selectAll.value = false } else { selectedNames.value = new Set(replies.value.map(r => r.metadata.name)); selectAll.value = true } }
 
 const fetchReplies = async () => {
-  loading.value = true
+  loading.value = true;
   try {
-    const params: Record<string, string | number> = { page: page.value, size: size.value }
-    if (filterStatus.value) params.status = filterStatus.value
-    if (filterSentiment.value) params.sentiment = filterSentiment.value
-    if (filterKeyword.value) params.keyword = filterKeyword.value
+    const params: any = { page: page.value, size: size.value }
+    if (filterStatus.value) params.status = filterStatus.value; if (filterSentiment.value) params.sentiment = filterSentiment.value; if (filterKeyword.value) params.keyword = filterKeyword.value;
     const { data } = await axiosInstance.get("/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies", { params })
     replies.value = data.items || []; total.value = data.total || 0; totalPages.value = Math.ceil(total.value / size.value)
   } catch (e) { Toast.error("获取数据失败") } finally { loading.value = false }
 }
 
 const openConversation = async (reply: AiCommentReplyItem) => {
-  showDialog.value = true
-  conversationLoading.value = true
-  conversationMessages.value = []
+  showDialog.value = true; conversationLoading.value = true; conversationMessages.value = []
   try {
     const { data } = await axiosInstance.get(`/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/conversation/${reply.spec.commentId}`)
     conversationMessages.value = data.messages || []
@@ -235,85 +167,116 @@ const openConversation = async (reply: AiCommentReplyItem) => {
 const handleDelete = async (name: string) => { try { await axiosInstance.delete(`/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies/${name}`); Toast.success("删除成功"); fetchReplies() } catch (e) { Toast.error("删除失败") } }
 const handleApprove = async (name: string) => { try { await axiosInstance.post(`/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies/${name}/approve`); Toast.success("审核通过"); fetchReplies() } catch (e) { Toast.error("审核失败") } }
 const handleReject = async (name: string) => { try { await axiosInstance.post(`/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies/${name}/reject`); Toast.success("已拒绝"); fetchReplies() } catch (e) { Toast.error("拒绝失败") } }
-const batchApprove = async () => { if(!selectedNames.value.size) return; try { await axiosInstance.post("/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies/batch-approve", { names: Array.from(selectedNames.value) }); Toast.success("批量通过成功"); selectedNames.value.clear(); selectAll.value=false; fetchReplies() } catch(e) { Toast.error("批量通过失败") } }
-const batchReject = async () => { if(!selectedNames.value.size) return; try { await axiosInstance.post("/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies/batch-reject", { names: Array.from(selectedNames.value) }); Toast.success("批量拒绝成功"); selectedNames.value.clear(); selectAll.value=false; fetchReplies() } catch(e) { Toast.error("批量拒绝失败") } }
-const batchDelete = async () => { if(!selectedNames.value.size) return; try { await axiosInstance.post("/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies/batch-delete", { names: Array.from(selectedNames.value) }); Toast.success("批量删除成功"); selectedNames.value.clear(); selectAll.value=false; fetchReplies() } catch(e) { Toast.error("批量删除失败") } }
-
-const getScoreTextClass = (score: number) => score >= 85 ? "text-green-600" : score >= 60 ? "text-yellow-600" : "text-red-600"
-const getScoreBgClass = (score: number) => score >= 85 ? "bg-green-100 text-green-700" : score >= 70 ? "bg-blue-100 text-blue-700" : score >= 50 ? "bg-yellow-100 text-yellow-800" : "bg-red-100 text-red-700"
-const getScoreLabel = (score: number) => score >= 85 ? "优秀" : score >= 70 ? "良好" : score >= 50 ? "一般" : "较差"
-
-const getStatusClass = (status: string) => {
-  switch (status) {
-    case "PASS": return "bg-green-100 text-green-700"
-    case "FAIL": return "bg-red-100 text-red-700"
-    case "REJECTED": return "bg-orange-100 text-orange-700"
-    default: return "bg-gray-100 text-gray-600"
-  }
-}
-const getStatusLabel = (status: string) => {
-  switch (status) {
-    case "PASS": return "通过"; case "FAIL": return "失败"; case "PENDING": return "待审核"; case "REJECTED": return "已拒绝"; default: return status
-  }
-}
-
-const getSentimentClass = (sentiment: string) => {
-  switch (sentiment) {
-    case "VERY_POSITIVE": return "bg-green-100 text-green-800"
-    case "POSITIVE": return "bg-emerald-50 text-emerald-600"
-    case "NEGATIVE": return "bg-rose-50 text-rose-600"
-    case "VERY_NEGATIVE": return "bg-red-100 text-red-800"
-    default: return "bg-gray-100 text-gray-600"
-  }
-}
-const getSentimentLabel = (sentiment: string) => {
-  switch (sentiment) {
-    case "VERY_POSITIVE": return "非常正面"; case "POSITIVE": return "正面"; case "NEGATIVE": return "负面"; case "VERY_NEGATIVE": return "非常负面"; default: return "中性"
-  }
-}
+const batchApprove = async () => { if(!selectedNames.value.size) return; try { await axiosInstance.post("/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies/batch-approve", { names: Array.from(selectedNames.value) }); Toast.success("成功"); selectedNames.value.clear(); selectAll.value=false; fetchReplies() } catch(e) { Toast.error("失败") } }
+const batchReject = async () => { if(!selectedNames.value.size) return; try { await axiosInstance.post("/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies/batch-reject", { names: Array.from(selectedNames.value) }); Toast.success("成功"); selectedNames.value.clear(); selectAll.value=false; fetchReplies() } catch(e) { Toast.error("失败") } }
+const batchDelete = async () => { if(!selectedNames.value.size) return; try { await axiosInstance.post("/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/replies/batch-delete", { names: Array.from(selectedNames.value) }); Toast.success("成功"); selectedNames.value.clear(); selectAll.value=false; fetchReplies() } catch(e) { Toast.error("失败") } }
 
+const getStatusLabel = (s: string) => { const m:any = { PASS: '通过', FAIL: '失败', PENDING: '待审', REJECTED: '拒绝' }; return m[s] || s }
+const getSentimentLabel = (s: string) => { const m:any = { VERY_POSITIVE: '极好', POSITIVE: '正面', NEUTRAL: '中性', NEGATIVE: '负面', VERY_NEGATIVE: '极差' }; return m[s] || s }
 const formatDate = (ts: string) => ts ? new Date(ts).toLocaleString("zh-CN") : ""
 const getPostUrl = (slug: string) => `${window.location.origin}/archives/${slug}`
-const getPageUrl = (slug: string) => `${window.location.origin}/pages/${slug}`
+const stripHtml = (html: string) => html ? html.replace(/<[^>]+>/g, "").replace(/\n+/g, " ").trim() : ""
 
-const stripHtml = (html: string) => {
-  if (!html) return ""
-  return html.replace(/<[^>]+>/g, "").replace(/\n+/g, " ").trim()
-}
-
-const truncateQuote = (content: string, length = 40) => {
+// 彻底清除冗余 Markdown 的正则替换
+const truncateQuote = (content: string, length = 35) => {
   if (!content) return ""
   let plain = stripHtml(content)
-  // 清理旧版本测试时残留的 Markdown 引用文本，防止摘要里套娃
   plain = plain.replace(/^>\s*(?:💬\s*)?\*\*(.*?)\*\*\s*[:：]\s*/gm, '').trim()
   return plain.length > length ? plain.substring(0, length) + "..." : plain
 }
 
 const renderContent = (content: string) => {
-  if (!content) return "<span class='opacity-50'>(空)</span>"
-  let parsed = content
-    .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
-    .replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi, "")
-
-  // 清理之前测试时已经存入数据库的历史遗留 "> 💬 @某人 :" 文本
-  parsed = parsed.replace(/^>\s*(?:💬\s*)?\*\*(.*?)\*\*\s*[:：]\s*/gm, "")
-
+  if (!content) return "<span style='opacity:0.5'>(空)</span>"
+  let parsed = content.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "").replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi, "")
+  parsed = parsed.replace(/^>\s*(?:💬\s*)?\*\*(.*?)\*\*\s*[:：]\s*/gm, "") // 清理脏数据
   return parsed.replace(/\n/g, "<br/>")
 }
 
 const resetFilters = () => { filterStatus.value = ""; filterSentiment.value = ""; filterKeyword.value = ""; page.value = 1; fetchReplies() }
-
 watch([filterStatus, filterSentiment, filterKeyword], () => { page.value = 1; fetchReplies() })
 watch(page, () => { selectedNames.value.clear(); selectAll.value = false; fetchReplies() })
-
 onMounted(fetchReplies)
 </script>
 
 <style scoped>
-.line-clamp-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
+/* 全局基础布局 */
+.logs-container { padding-bottom: 20px; }
+.header-icon { margin-right: 8px; align-self: center; }
+
+/* 工具栏与按钮 */
+.toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px; align-items: center; }
+.batch-toolbar { background: #eff6ff; padding: 12px 16px; border-radius: 8px; border: 1px solid #bfdbfe; }
+.batch-text { font-size: 14px; color: #1d4ed8; font-weight: bold; }
+.btn-batch { padding: 6px 12px; border-radius: 6px; border: none; font-size: 12px; cursor: pointer; color: #fff; }
+.btn-pass { background: #16a34a; } .btn-reject { background: #f97316; } .btn-delete { background: #dc2626; }
+.btn-cancel { background: transparent; color: #6b7280; margin-left: auto; }
+.filter-select, .filter-input { padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px; outline: none; }
+.btn-reset { padding: 8px 16px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; cursor: pointer; }
+
+/* 列表区 */
+.list-area { margin: 16px; }
+.empty-state { text-align: center; padding: 60px 0; color: #9ca3af; }
+.reply-list { display: flex; flex-direction: column; gap: 16px; }
+.select-all-wrap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7280; padding: 0 4px; }
+.reply-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
+.card-main { display: flex; gap: 12px; padding: 16px; }
+.card-content { flex: 1; min-width: 0; }
+.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.tags-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
+.card-time { font-size: 12px; color: #9ca3af; }
+.card-text { font-size: 14px; color: #374151; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.card-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f9fafb; border-top: 1px solid #f3f4f6; }
+.footer-info { font-size: 12px; color: #6b7280; display: flex; gap: 16px; }
+.footer-actions { display: flex; gap: 8px; }
+.action-btn { padding: 4px 8px; border-radius: 4px; font-size: 12px; border: none; cursor: pointer; }
+.action-btn.pass { background: #dcfce7; color: #16a34a; }
+.action-btn.reject { background: #fee2e2; color: #dc2626; }
+.action-btn.view { background: #dbeafe; color: #2563eb; }
+.action-btn.delete { background: #e5e7eb; color: #4b5563; }
+
+/* 标签配色体系 (纯CSS，抛弃Tailwind限制) */
+.custom-tag { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: bold; }
+.tag-PASS { background: #dcfce7; color: #15803d; }
+.tag-FAIL { background: #fee2e2; color: #b91c1c; }
+.tag-PENDING { background: #fef9c3; color: #a16207; }
+.tag-REJECTED { background: #ffedd5; color: #c2410c; }
+.tag-published { background: #dbeafe; color: #1d4ed8; }
+.tag-draft { background: #f3f4f6; color: #4b5563; }
+.tag-conv { background: #f3e8ff; color: #7e22ce; }
+.tag-VERY_POSITIVE { background: #dcfce7; color: #14532d; }
+.tag-POSITIVE { background: #ecfdf5; color: #15803d; }
+.tag-NEGATIVE { background: #ffe4e6; color: #e11d48; }
+.tag-VERY_NEGATIVE { background: #fee2e2; color: #991b1b; }
+
+/* 对话弹窗与聊天气泡 */
+.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 9999; }
+.dialog-box { width: 90%; max-width: 600px; background: #fff; border-radius: 16px; display: flex; flex-direction: column; max-height: 85vh; }
+.dialog-header { display: flex; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #f3f4f6; }
+.dialog-header h3 { margin: 0; font-size: 18px; }
+.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #9ca3af; }
+.dialog-body { padding: 24px; overflow-y: auto; background: #f9fafb; flex: 1; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
+
+.chat-container { display: flex; flex-direction: column; gap: 20px; }
+.chat-row { display: flex; width: 100%; }
+.row-ai { justify-content: flex-start; }
+.row-user { justify-content: flex-end; }
+.chat-message { max-width: 80%; display: flex; flex-direction: column; }
+.chat-owner { font-size: 12px; margin-bottom: 6px; font-weight: bold; }
+.row-ai .chat-owner { color: #2563eb; text-align: left; }
+.row-user .chat-owner { color: #6b7280; text-align: right; }
+.chat-time { font-size: 11px; color: #9ca3af; margin-top: 6px; }
+.row-user .chat-time { text-align: right; }
+
+/* 核心：独立的气泡和引用框 CSS */
+.chat-bubble { padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.6; word-wrap: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
+.bubble-ai { background: #ffffff; color: #1f2937; border: 1px solid #e0e7ff; border-top-left-radius: 2px; }
+.bubble-user { background: #2563eb; color: #ffffff; border-top-right-radius: 2px; }
+
+/* 绝对可靠的引用框样式 */
+.quote-box { margin-bottom: 10px; padding: 8px 12px; border-radius: 6px; font-size: 12px; border-left: 3px solid; }
+.quote-owner { font-weight: bold; margin-right: 6px; }
+.bubble-ai .quote-box { background: #f3f4f6; border-left-color: #9ca3af; color: #4b5563; }
+.bubble-user .quote-box { background: rgba(0,0,0,0.15); border-left-color: rgba(255,255,255,0.4); color: #d1d5db; }
+
+.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 14px; color: #6b7280; }
 </style>
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index 618a81c..3939101 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -1,876 +1,136 @@
 <template>
-  <div class="settings-page">
+  <div class="settings-container">
     <VPageHeader title="插件设置">
-      <template #icon>
-        <IconPlug class="mr-2 self-center" />
-      </template>
+      <template #icon><IconPlug class="header-icon" /></template>
       <template #actions>
         <VSpace spacing="sm">
-          <VButton size="sm" @click="exportConfig">
-            <template #icon>
-              <svg style="width:14px;height:14px" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
-            </template>
-            导出
-          </VButton>
-          <label class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 cursor-pointer transition-colors">
-            <svg style="width:14px;height:14px;margin-right:4px" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
-            导入
-            <input type="file" accept=".json" class="hidden" @change="handleImportFile" />
-          </label>
+          <VButton size="sm" @click="exportConfig">导出配置</VButton>
           <VButton size="sm" @click="$router.push({ name: 'CommentAiAutopilot' })">返回概览</VButton>
         </VSpace>
       </template>
     </VPageHeader>
 
-    <div class="m-4">
+    <div class="settings-main">
       <VLoading v-if="loading" />
 
-      <div v-if="!loading">
-        <!-- Tab Navigation -->
-        <div class="flex overflow-x-auto gap-2 p-1.5 bg-white border border-gray-200 rounded-xl mb-6 shadow-sm">
-          <button v-for="tab in tabItems" :key="tab.value" 
-            @click="activeTab = tab.value"
-            class="flex-1 min-w-[80px] py-2 px-3 text-sm font-medium rounded-lg transition-colors whitespace-nowrap text-center"
-            :class="activeTab === tab.value ? 'bg-blue-600 text-white shadow' : 'text-gray-600 hover:bg-gray-100'">
-            {{ tab.label }}
-          </button>
-        </div>
-
-        <!-- Main Grid Layout -->
-        <div class="flex flex-col lg:flex-row gap-6 items-start">
-          
-          <!-- Left: Settings Sections -->
-          <div class="flex-1 w-full space-y-6">
-            
-            <!-- ========== Basic Settings ========== -->
-            <section v-if="activeTab === 'basic'" class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
-              <div class="px-5 py-4 border-b border-gray-100 bg-blue-50/50 flex items-center gap-3">
-                <div class="w-9 h-9 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
-                </div>
-                <div>
-                  <h3 class="text-base font-semibold text-gray-800">基本设置</h3>
-                  <p class="text-xs text-gray-500 mt-0.5">控制AI回复的基本行为</p>
-                </div>
-              </div>
-              <div class="p-5 space-y-5">
-                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                  <div>
-                    <div class="text-sm font-medium text-gray-800">自动回复</div>
-                    <div class="text-xs text-gray-500 mt-1">启用后，AI将自动回复新评论</div>
-                  </div>
-                  <label class="relative inline-flex items-center cursor-pointer shrink-0">
-                    <input type="checkbox" v-model="settings.basic.autoReply" class="sr-only peer" />
-                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                  </label>
-                </div>
-                
-                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                  <div>
-                    <div class="text-sm font-medium text-gray-800">自动发布</div>
-                    <div class="text-xs text-gray-500 mt-1">关闭后AI回复将存为草稿，需手动审核发布</div>
-                  </div>
-                  <label class="relative inline-flex items-center cursor-pointer shrink-0">
-                    <input type="checkbox" v-model="settings.basic.autoPublish" class="sr-only peer" />
-                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                  </label>
-                </div>
-
-                <div>
-                  <div class="flex justify-between items-center mb-1">
-                    <label class="text-sm font-medium text-gray-800">最大对话轮次</label>
-                    <span class="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded">{{ settings.basic.maxConversationRounds }}</span>
-                  </div>
-                  <p class="text-xs text-gray-500 mb-2">同一评论线程中AI最多自动回复的轮次</p>
-                  <input type="range" v-model.number="settings.basic.maxConversationRounds" min="1" max="100" class="w-full accent-blue-600" />
-                  <div class="flex justify-between text-xs text-gray-400 mt-1"><span>1</span><span>50</span><span>100</span></div>
-                </div>
-
-                <div>
-                  <div class="flex justify-between items-center mb-1">
-                    <label class="text-sm font-medium text-gray-800">最大重试次数</label>
-                    <span class="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded">{{ settings.basic.maxRetryCount }}</span>
-                  </div>
-                  <p class="text-xs text-gray-500 mb-2">AI生成失败时的最大重试次数，采用指数退避策略</p>
-                  <input type="range" v-model.number="settings.basic.maxRetryCount" min="1" max="10" class="w-full accent-blue-600" />
-                  <div class="flex justify-between text-xs text-gray-400 mt-1"><span>1</span><span>5</span><span>10</span></div>
-                </div>
-
-                <div>
-                  <label class="text-sm font-medium text-gray-800 block mb-1">速率限制</label>
-                  <p class="text-xs text-gray-500 mb-2">每分钟最大AI回复数量</p>
-                  <input type="number" v-model.number="settings.basic.rateLimitPerMinute" min="1" max="100" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 bg-gray-50 focus:bg-white transition" placeholder="10" />
-                </div>
-
-                <div>
-                  <div class="flex justify-between items-center mb-1">
-                    <label class="text-sm font-medium text-gray-800">评论者黑名单</label>
-                    <button class="text-xs text-blue-600 hover:underline flex items-center gap-1" @click="openCommenterDialog">
-                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
-                      添加评论者
-                    </button>
-                  </div>
-                  <p class="text-xs text-gray-500 mb-2">支持名称、邮箱和正则表达式。正则以 regex: 开头，如 regex:^spam.*</p>
-                  <textarea v-model="settings.basic.blockedCommenters" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 bg-gray-50 focus:bg-white transition" placeholder="例如：张三, spam@example.com, 李四"></textarea>
-                </div>
-              </div>
-            </section>
-
-            <!-- ========== AI Persona Settings ========== -->
-            <section v-if="activeTab === 'persona'" class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
-              <div class="px-5 py-4 border-b border-gray-100 bg-purple-50/50 flex items-center gap-3">
-                <div class="w-9 h-9 rounded-lg bg-purple-100 text-purple-600 flex items-center justify-center shrink-0">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
-                </div>
-                <div>
-                  <h3 class="text-base font-semibold text-gray-800">AI角色设置</h3>
-                  <p class="text-xs text-gray-500 mt-0.5">定义AI虚拟评论者的身份和风格</p>
-                </div>
-              </div>
-              <div class="p-5 space-y-5">
-                <VLoading v-if="personasLoading" />
-                <div v-else-if="personas.length === 0" class="flex flex-col items-center gap-2 py-8 text-gray-400">
-                  <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
-                  <span class="text-sm">请添加至少一个AI角色</span>
-                </div>
-                <div v-else class="space-y-2.5">
-                  <div v-for="p in personas" :key="p.metadata.name" class="flex items-center gap-3.5 p-3.5 bg-gray-50 border border-gray-200 rounded-lg hover:border-gray-300 hover:bg-gray-100 transition">
-                    <div class="w-11 h-11 shrink-0 relative">
-                      <img v-if="getPersonaAvatar(p)" :src="getPersonaAvatar(p)" alt="头像" class="w-11 h-11 rounded-full object-cover border-2 border-purple-200" />
-                      <div v-else class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center text-white font-bold text-sm">{{ (p.spec.displayName || '?').charAt(0) }}</div>
-                    </div>
-                    <div class="flex-1 min-w-0">
-                      <div class="flex items-center gap-1.5 flex-wrap">
-                        <span class="text-sm font-semibold text-gray-800">{{ p.spec.displayName || '未命名' }}</span>
-                        <span v-if="p.spec.gender === 'female'" class="px-1.5 py-0.5 text-[11px] font-medium bg-pink-100 text-pink-700 rounded">女</span>
-                        <span v-else-if="p.spec.gender === 'male'" class="px-1.5 py-0.5 text-[11px] font-medium bg-blue-100 text-blue-700 rounded">男</span>
-                        <span v-if="p.spec.neutralVoice" class="px-1.5 py-0.5 text-[11px] font-medium bg-gray-100 text-gray-600 rounded">中性语气</span>
-                        <span v-if="p.spec.wakeWord" class="px-1.5 py-0.5 text-[11px] font-medium bg-yellow-100 text-yellow-700 rounded">唤醒: {{ p.spec.wakeWord }}</span>
-                        <span v-if="p.spec.isDefault" class="px-1.5 py-0.5 text-[11px] font-medium bg-blue-100 text-blue-700 rounded">默认</span>
-                      </div>
-                      <div class="text-xs text-gray-500 mt-0.5 truncate max-w-[400px]">{{ p.spec.prompt || '暂无提示词' }}</div>
-                    </div>
-                    <div class="flex gap-1 shrink-0">
-                      <button class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:bg-gray-200 hover:text-gray-700 transition" title="编辑" @click="openPersonaDialog(p)">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
-                      </button>
-                      <button v-if="!p.spec?.isDefault" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:bg-red-50 hover:text-red-600 hover:border-red-200 transition" title="删除" @click="deletePersona(p)">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
-                      </button>
-                      <button v-if="!p.spec?.isDefault" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:bg-yellow-50 hover:text-yellow-600 hover:border-yellow-200 transition" title="设为默认" @click="setDefaultPersona(p)">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <VButton type="secondary" @click="openPersonaDialog(null)">
-                  <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
-                  添加角色
-                </VButton>
-              </div>
-            </section>
-
-            <!-- ========== Model Settings ========== -->
-            <section v-if="activeTab === 'model'" class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
-              <div class="px-5 py-4 border-b border-gray-100 bg-emerald-50/50 flex items-center gap-3">
-                <div class="w-9 h-9 rounded-lg bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
-                </div>
-                <div>
-                  <h3 class="text-base font-semibold text-gray-800">模型设置</h3>
-                  <p class="text-xs text-gray-500 mt-0.5">配置AI Foundation提供的模型</p>
-                </div>
-              </div>
-              <div class="p-5 space-y-5">
-                <div>
-                  <label class="text-sm font-medium text-gray-800 block mb-1">AI模型名称</label>
-                  <p class="text-xs text-gray-500 mb-2">留空使用AI Foundation默认模型，填写AiModel资源名称可指定模型</p>
-                  <input type="text" v-model="settings.model.modelName" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 bg-gray-50 focus:bg-white transition" placeholder="留空使用默认模型" />
-                </div>
-              </div>
-            </section>
-
-            <!-- ========== Prompt Settings ========== -->
-            <section v-if="activeTab === 'prompt'" class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
-              <div class="px-5 py-4 border-b border-gray-100 bg-amber-50/50 flex items-center gap-3">
-                <div class="w-9 h-9 rounded-lg bg-amber-100 text-amber-600 flex items-center justify-center shrink-0">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
-                </div>
-                <div>
-                  <h3 class="text-base font-semibold text-gray-800">Prompt设置</h3>
-                  <p class="text-xs text-gray-500 mt-0.5">自定义AI回复的提示词模板</p>
-                </div>
-              </div>
-              <div class="p-5 space-y-5">
-                <div>
-                  <label class="text-sm font-medium text-gray-800 block mb-1">Prompt预设</label>
-                  <p class="text-xs text-gray-500 mb-2">选择预设风格，可多选</p>
-                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
-                    <label v-for="p in promptPresets" :key="p.key" class="flex items-start gap-2.5 p-3 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:border-gray-300 hover:bg-gray-100 transition" :class="{ 'border-blue-500 bg-blue-50': isPresetEnabled(p.key) }">
-                      <input type="checkbox" :checked="isPresetEnabled(p.key)" @change="togglePreset(p.key)" class="w-[18px] h-[18px] mt-0.5 accent-blue-600 cursor-pointer shrink-0" />
-                      <div class="min-w-0">
-                        <span class="text-sm font-medium text-gray-800 block">{{ p.label }}</span>
-                        <span class="text-xs text-gray-500">{{ p.desc }}</span>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between items-center mb-1">
-                    <label class="text-sm font-medium text-gray-800">自定义Prompt模板</label>
-                    <span class="text-xs text-gray-400">留空使用默认模板</span>
-                  </div>
-                  <div class="flex flex-wrap gap-1.5 mb-2">
-                    <span v-for="v in promptVariables" :key="v.name" class="inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-md text-xs text-gray-600">
-                      <code class="font-mono text-[11px] bg-gray-200 px-1 rounded text-purple-700">{{ v.name }}</code>
-                      {{ v.desc }}
-                    </span>
-                  </div>
-                  <textarea v-model="settings.prompt.customPromptTemplate" rows="10" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 bg-gray-50 focus:bg-white transition font-mono text-[13px] leading-relaxed" placeholder="自定义Prompt模板"></textarea>
-                </div>
-              </div>
-            </section>
-
-            <!-- ========== Cleanup Settings ========== -->
-            <section v-if="activeTab === 'cleanup'" class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
-              <div class="px-5 py-4 border-b border-gray-100 bg-red-50/50 flex items-center gap-3">
-                <div class="w-9 h-9 rounded-lg bg-red-100 text-red-600 flex items-center justify-center shrink-0">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
-                </div>
-                <div>
-                  <h3 class="text-base font-semibold text-gray-800">数据清理</h3>
-                  <p class="text-xs text-gray-500 mt-0.5">自动清理过期的AI回复记录</p>
-                </div>
-              </div>
-              <div class="p-5 space-y-5">
-                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                  <div>
-                    <div class="text-sm font-medium text-gray-800">启用自动清理</div>
-                    <div class="text-xs text-gray-500 mt-1">每天自动清理超过保留天数的记录</div>
-                  </div>
-                  <label class="relative inline-flex items-center cursor-pointer shrink-0">
-                    <input type="checkbox" v-model="settings.cleanup.cleanupEnabled" class="sr-only peer" />
-                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                  </label>
-                </div>
-
-                <div>
-                  <div class="flex justify-between items-center mb-1">
-                    <label class="text-sm font-medium text-gray-800">保留天数</label>
-                    <span class="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded">{{ settings.cleanup.retentionDays }} 天</span>
-                  </div>
-                  <p class="text-xs text-gray-500 mb-2">超过此天数的AI回复记录将被自动清理</p>
-                  <input type="range" v-model.number="settings.cleanup.retentionDays" min="1" max="365" class="w-full accent-blue-600" />
-                  <div class="flex justify-between text-xs text-gray-400 mt-1"><span>1天</span><span>180天</span><span>365天</span></div>
-                </div>
-
-                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border-t border-gray-200">
-                  <div>
-                    <div class="text-sm font-medium text-gray-800">手动清理</div>
-                    <div class="text-xs text-gray-500 mt-1">立即执行一次清理操作</div>
-                  </div>
-                  <VButton size="sm" type="secondary" @click="performCleanup" :disabled="cleanupLoading">
-                    {{ cleanupLoading ? '清理中...' : '立即清理' }}
-                  </VButton>
-                </div>
-
-                <div v-if="cleanupResult !== null" class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-green-50 text-green-700 rounded-lg text-sm font-medium">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-                  清理完成，共删除 {{ cleanupResult }} 条记录
-                </div>
-              </div>
-            </section>
-          </div>
-
-          <!-- Right: Sticky Sidebar -->
-          <div class="w-full lg:w-72 shrink-0 lg:sticky lg:top-24 space-y-4">
-            <div class="bg-blue-50 border border-blue-100 rounded-xl p-5 shadow-sm">
-              <div class="flex items-center justify-between mb-4 pb-2.5 border-b border-blue-100">
-                <h4 class="font-semibold text-gray-800 text-sm">操作</h4>
-                <span v-if="hasUnsavedChanges" class="px-2 py-0.5 text-xs font-medium bg-orange-100 text-orange-700 rounded">未保存</span>
-              </div>
-              <div class="space-y-2.5">
-                <VButton block type="primary" @click="saveSettings" :disabled="saving">
-                  <template v-if="!saving">
-                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
-                  </template>
-                  {{ saving ? '保存中...' : '保存设置' }}
-                </VButton>
-                <VButton block @click="fetchSettings" :disabled="saving">
-                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
-                  重置为当前值
-                </VButton>
-              </div>
-            </div>
-
-            <div v-if="activeTab === 'prompt'" class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm">
-              <h4 class="font-semibold text-gray-800 mb-3 text-sm pb-2.5 border-b border-gray-100">可用模板变量</h4>
-              <div class="space-y-2">
-                <div v-for="v in promptVariables" :key="v.name" class="flex flex-col gap-0.5">
-                  <code class="font-mono text-[11px] bg-gray-100 px-1.5 py-0.5 rounded text-purple-700 w-fit">{{ v.name }}</code>
-                  <span class="text-xs text-gray-500">{{ v.desc }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Commenter Selection Dialog -->
-    <div v-if="showCommenterDialog" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" @click.self="showCommenterDialog = false">
-      <div class="w-full max-w-[480px] bg-white rounded-2xl shadow-xl overflow-hidden mx-4">
-        <div class="flex items-center justify-between px-6 pt-5 pb-0">
-          <h3 class="text-base font-semibold text-gray-900">选择评论者</h3>
-          <button class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition" @click="showCommenterDialog = false">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
-          </button>
-        </div>
-        <div class="px-6 py-3 relative">
-          <svg class="absolute left-9 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-          <input v-model="commenterSearch" type="text" class="w-full pl-9 pr-3 py-2.5 text-sm border border-gray-200 rounded-lg bg-gray-50 outline-none focus:bg-white focus:border-blue-500 transition" placeholder="搜索评论者名称或邮箱..." />
-        </div>
-        <div class="max-h-80 overflow-y-auto px-4 pb-4">
-          <VLoading v-if="commenterLoading" />
-          <div v-else-if="filteredCommenters.length === 0" class="flex flex-col items-center gap-2 py-10 text-gray-400">
-            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
-            <span class="text-sm">暂无评论者数据</span>
-          </div>
-          <div v-else class="flex flex-col gap-0.5">
-            <button v-for="c in filteredCommenters" :key="c.displayName + c.email" class="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg hover:bg-blue-50 transition text-left" @click="addCommenter(c)">
-              <div class="w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-xs font-semibold text-gray-500 shrink-0 overflow-hidden">
-                <img v-if="c.avatarUrl" :src="c.avatarUrl" alt="" class="w-full h-full object-cover" />
-                <span v-else>{{ c.displayName?.charAt(0) || '?' }}</span>
-              </div>
-              <div class="flex-1 min-w-0">
-                <div class="text-sm font-medium text-gray-800">{{ c.displayName }}</div>
-                <div v-if="c.email" class="text-xs text-gray-400">{{ c.email }}</div>
-              </div>
-              <svg class="w-4.5 h-4.5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+      <div v-else class="settings-layout">
+        <!-- 左侧主体 -->
+        <div class="settings-content">
+          <!-- 标签导航 -->
+          <div class="tabs-wrap">
+            <button v-for="tab in tabItems" :key="tab.value" 
+              @click="activeTab = tab.value"
+              class="tab-btn"
+              :class="{ 'active': activeTab === tab.value }">
+              {{ tab.label }}
             </button>
           </div>
-        </div>
-      </div>
-    </div>
 
-    <!-- Persona Edit Dialog -->
-    <div v-if="showPersonaDialog" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" @click.self="showPersonaDialog = false">
-      <div class="w-full max-w-[520px] bg-white rounded-2xl shadow-xl overflow-hidden mx-4 max-h-[90vh] overflow-y-auto">
-        <div class="flex items-center justify-between px-6 pt-5 pb-0">
-          <h3 class="text-base font-semibold text-gray-900">{{ personaEditing ? '编辑角色' : '添加角色' }}</h3>
-          <button class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition" @click="showPersonaDialog = false">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
-          </button>
-        </div>
-        <div class="p-6 flex flex-col gap-4">
-          <!-- Avatar Preview -->
-          <div class="flex items-center gap-3 p-3 bg-purple-50/50 border border-purple-100 rounded-xl">
-            <div class="w-12 h-12 shrink-0">
-              <img v-if="personaDialogAvatar" :src="personaDialogAvatar" alt="Gravatar头像" class="w-12 h-12 rounded-full object-cover border-2 border-purple-200" />
-              <div v-else class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center text-white font-bold text-lg">{{ (personaForm.displayName || '?').charAt(0) }}</div>
-            </div>
-            <div class="text-xs text-gray-500">{{ personaDialogAvatar ? 'Gravatar头像预览' : '未设置邮箱，将使用默认头像' }}</div>
-          </div>
-          <!-- Nickname -->
-          <div class="space-y-1.5">
-            <label class="text-sm font-medium text-gray-800">昵称</label>
-            <input type="text" v-model="personaForm.displayName" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 bg-gray-50 focus:bg-white transition" placeholder="小回" />
-          </div>
-          <!-- Email -->
-          <div class="space-y-1.5">
-            <label class="text-sm font-medium text-gray-800">邮箱</label>
-            <p class="text-xs text-gray-500">用于Gravatar头像服务，留空使用默认头像</p>
-            <input type="email" v-model="personaForm.email" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 bg-gray-50 focus:bg-white transition" placeholder="ai@example.com" />
-          </div>
-          <!-- Gender & Neutral Voice -->
-          <div class="space-y-1.5">
-            <label class="text-sm font-medium text-gray-800">性别与语气</label>
-            <div class="flex items-center gap-4">
-              <div class="flex gap-2">
-                <label class="flex-1 flex items-center justify-center px-4 py-2 border rounded-lg cursor-pointer transition" :class="personaForm.gender === 'female' ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100'">
-                  <input type="radio" v-model="personaForm.gender" value="female" class="hidden" />
-                  <span class="text-sm font-medium">女</span>
-                </label>
-                <label class="flex-1 flex items-center justify-center px-4 py-2 border rounded-lg cursor-pointer transition" :class="personaForm.gender === 'male' ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100'">
-                  <input type="radio" v-model="personaForm.gender" value="male" class="hidden" />
-                  <span class="text-sm font-medium">男</span>
-                </label>
+          <!-- 各个设置面板 -->
+          <!-- 基本设置 -->
+          <div v-if="activeTab === 'basic'" class="setting-panel">
+            <div class="panel-header"><h3>基本设置</h3><p>控制AI回复的基本行为</p></div>
+            <div class="panel-body">
+              <div class="form-row"><label>自动回复</label><input type="checkbox" v-model="settings.basic.autoReply" /></div>
+              <div class="form-row"><label>自动发布</label><input type="checkbox" v-model="settings.basic.autoPublish" /></div>
+              <div class="form-row-col">
+                <label>最大对话轮次 (当前: {{ settings.basic.maxConversationRounds }})</label>
+                <input type="range" v-model.number="settings.basic.maxConversationRounds" min="1" max="100" />
+              </div>
+              <div class="form-row-col">
+                <label>速率限制 (每分钟回复数量)</label>
+                <input type="number" v-model.number="settings.basic.rateLimitPerMinute" class="custom-input" />
+              </div>
+              <div class="form-row-col">
+                <label>评论者黑名单 (用逗号分隔)</label>
+                <textarea v-model="settings.basic.blockedCommenters" class="custom-textarea" rows="3"></textarea>
               </div>
-              <label class="flex items-center gap-2 cursor-pointer shrink-0">
-                <input type="checkbox" v-model="personaForm.neutralVoice" class="w-4 h-4 accent-blue-600" id="neutralVoice" />
-                <span class="text-sm text-gray-600">中性语气</span>
-              </label>
             </div>
-            <p class="text-xs text-gray-500">勾选中性语气则使用中性语气，取消勾选则跟随性别语气</p>
           </div>
-          <!-- Wake Word -->
-          <div class="space-y-1.5">
-            <label class="text-sm font-medium text-gray-800">唤醒词</label>
-            <p class="text-xs text-gray-500">评论以此词开头则唤醒该角色回复，留空不启用。</p>
-            <input type="text" v-model="personaForm.wakeWord" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 bg-gray-50 focus:bg-white transition" placeholder="如：小回小回" />
-          </div>
-          <!-- Prompt -->
-          <div class="space-y-1.5">
-            <label class="text-sm font-medium text-gray-800">人格提示词</label>
-            <p class="text-xs text-gray-500">定义AI角色的性格、语气和回复风格</p>
-            <textarea v-model="personaForm.prompt" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 bg-gray-50 focus:bg-white transition" placeholder="例如：你是「小回」，一个友善的评论者。你的回复简洁自然，像朋友聊天一样。"></textarea>
-          </div>
-          <!-- Is Default -->
-          <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-            <div>
-              <div class="text-sm font-medium text-gray-800">设为默认角色</div>
-              <div class="text-xs text-gray-500 mt-1">默认角色将用于没有指定角色的场景</div>
+
+          <!-- 模型设置 -->
+          <div v-if="activeTab === 'model'" class="setting-panel">
+            <div class="panel-header"><h3>模型设置</h3><p>配置 AI Foundation</p></div>
+            <div class="panel-body">
+              <div class="form-row-col">
+                <label>AI模型名称 (留空使用默认)</label>
+                <input type="text" v-model="settings.model.modelName" class="custom-input" />
+              </div>
             </div>
-            <label class="relative inline-flex items-center cursor-pointer shrink-0">
-              <input type="checkbox" v-model="personaForm.isDefault" class="sr-only peer" />
-              <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-            </label>
           </div>
-          <!-- Actions -->
-          <div class="flex justify-end gap-2 pt-1">
-            <VButton @click="showPersonaDialog = false">取消</VButton>
-            <VButton type="primary" @click="savePersona" :disabled="personaSaving">
-              {{ personaSaving ? '保存中...' : '保存' }}
-            </VButton>
+
+          <!-- 提示词设置 -->
+          <div v-if="activeTab === 'prompt'" class="setting-panel">
+            <div class="panel-header"><h3>Prompt 提示词</h3><p>自定义 AI 回复逻辑</p></div>
+            <div class="panel-body">
+              <div class="form-row-col">
+                <label>自定义Prompt模板</label>
+                <textarea v-model="settings.prompt.customPromptTemplate" class="custom-textarea prompt-box" rows="12"></textarea>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <!-- 右侧侧边栏 (保存操作区) -->
+        <div class="settings-sidebar">
+          <div class="sidebar-card">
+            <div class="sidebar-header">
+              <h4>操作控制</h4>
+              <span v-if="hasUnsavedChanges" class="unsaved-badge">未保存</span>
+            </div>
+            <button class="btn-save" @click="saveSettings" :disabled="saving">
+              {{ saving ? '保存中...' : '保存设置' }}
+            </button>
+            <button class="btn-reset" @click="fetchSettings" :disabled="saving">还原当前值</button>
+          </div>
+
+          <div v-if="activeTab === 'prompt'" class="sidebar-card info-card">
+            <h4>可用变量</h4>
+            <ul>
+              <li><code v-pre>{{persona_prompt}}</code> 角色设定</li>
+              <li><code v-pre>{{comment}}</code> 评论内容</li>
+              <li><code v-pre>{{article}}</code> 文章内容</li>
+              <li><code v-pre>{{conversation_history}}</code> 历史上下文</li>
+            </ul>
           </div>
         </div>
       </div>
     </div>
-
-    <!-- Import Confirm Dialog -->
-    <VModal v-model:visible="showImportConfirm" title="确认导入配置">
-      <div class="space-y-3">
-        <p class="text-sm text-gray-600">导入将覆盖当前配置，此操作不可撤销。确定要继续吗？</p>
-        <div v-if="importFileData" class="text-xs text-gray-500">
-          <p v-if="importFileData.configMap">- 包含插件设置</p>
-          <p v-if="importFileData.personas">- 包含 {{ importFileData.personas.length }} 个AI角色</p>
-        </div>
-      </div>
-      <template #footer>
-        <VSpace>
-          <VButton @click="showImportConfirm = false">取消</VButton>
-          <VButton type="primary" :loading="importLoading" @click="confirmImport">确认导入</VButton>
-        </VSpace>
-      </template>
-    </VModal>
-
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, watch } from "vue"
-import { axiosInstance, coreApiClient } from "@halo-dev/api-client"
-import { VPageHeader, VButton, VLoading, Toast, VModal, VSpace, IconPlug } from "@halo-dev/components"
+import { ref, reactive, computed, onMounted } from "vue"
+import { coreApiClient } from "@halo-dev/api-client"
+import { VPageHeader, VButton, VLoading, Toast, VSpace, IconPlug } from "@halo-dev/components"
 
 const activeTab = ref("basic")
 const tabItems = [
   { label: "基本设置", value: "basic" },
-  { label: "AI角色", value: "persona" },
   { label: "模型设置", value: "model" },
   { label: "Prompt", value: "prompt" },
-  { label: "数据清理", value: "cleanup" },
 ]
 
-const promptVariables = [
-  { name: '{{persona_prompt}}', desc: '人格提示词' },
-  { name: '{{safety_prompt}}', desc: '安全规范' },
-  { name: '{{post_title}}', desc: '文章标题' },
-  { name: '{{post_date}}', desc: '发布日期' },
-  { name: '{{comment_count}}', desc: '评论数' },
-  { name: '{{article}}', desc: '文章内容' },
-  { name: '{{comment}}', desc: '评论内容' },
-]
-
-const promptPresets = [
-  { key: 'friendly', label: '友好型', desc: '热情友好，像朋友聊天' },
-  { key: 'professional', label: '专业型', desc: '严谨正式，有逻辑性' },
-  { key: 'humorous', label: '幽默型', desc: '轻松诙谐，适当幽默' },
-  { key: 'concise', label: '简洁型', desc: '一两句话，简洁明了' },
-]
-
-const enabledPresetKeys = computed({
-  get: () => {
-    const val: string | string[] = settings.prompt.enabledPresets as string | string[]
-    return Array.isArray(val) ? val : (val || '').split(',').map((s: string) => s.trim()).filter(Boolean)
-  },
-  set: (keys: string[]) => {
-    settings.prompt.enabledPresets = keys
-  }
-})
-
-const togglePreset = (key: string) => {
-  const keys = enabledPresetKeys.value.slice()
-  const idx = keys.indexOf(key)
-  if (idx >= 0) {
-    keys.splice(idx, 1)
-  } else {
-    keys.push(key)
-  }
-  enabledPresetKeys.value = keys
-}
-
-const isPresetEnabled = (key: string) => enabledPresetKeys.value.includes(key)
-
 const loading = ref(false)
 const saving = ref(false)
-const showCommenterDialog = ref(false)
-const commenterList = ref<{ displayName: string; email: string; avatarUrl: string }[]>([])
-const commenterSearch = ref("")
-const commenterLoading = ref(false)
-const cleanupLoading = ref(false)
-const cleanupResult = ref<number | null>(null)
-
-// Persona management
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const personas = ref<any[]>([])
-const personasLoading = ref(false)
-const showPersonaDialog = ref(false)
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const personaEditing = ref<any | null>(null)
-const personaSaving = ref(false)
-const personaForm = reactive({
-  displayName: '',
-  email: '',
-  gender: 'female',
-  neutralVoice: false,
-  wakeWord: '',
-  prompt: '',
-  isDefault: false,
-})
-const personaDialogAvatar = ref('')
 
 const settings = reactive({
-  basic: { autoReply: true, autoPublish: true, maxRetryCount: 3, blockedCommenters: "", maxConversationRounds: 8, rateLimitPerMinute: 10 },
+  basic: { autoReply: true, autoPublish: true, maxConversationRounds: 8, rateLimitPerMinute: 10, blockedCommenters: "" },
   model: { modelName: "" },
-  prompt: { customPromptTemplate: "", enabledPresets: [] as string[] },
-  cleanup: { cleanupEnabled: true, retentionDays: 30 },
+  prompt: { customPromptTemplate: "" }
 })
 
-// Track unsaved changes: snapshot of settings after last fetch/save
 const lastSavedSnapshot = ref("")
-const hasUnsavedChanges = computed(() => {
-  return JSON.stringify(settings) !== lastSavedSnapshot.value
-})
-
+const hasUnsavedChanges = computed(() => JSON.stringify(settings) !== lastSavedSnapshot.value)
 const configMapName = "comment-ai-autopilot-configmap"
-const apiBase = "/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1"
 
-// ===== Export / Import =====
-const exportConfig = async () => {
-  try {
-    const { data } = await axiosInstance.get(`${apiBase}/export`)
-    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `comment-ai-autopilot-config-${new Date().toISOString().slice(0, 10)}.json`
-    a.click()
-    URL.revokeObjectURL(url)
-    Toast.success('配置已导出')
-  } catch (e) {
-    console.error('Failed to export config', e)
-    Toast.error('导出配置失败')
-  }
-}
+const exportConfig = () => { Toast.info("导出功能开发中") }
 
-const importLoading = ref(false)
-const showImportConfirm = ref(false)
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const importFileData = ref<any>(null)
-
-const handleImportFile = (event: Event) => {
-  const input = event.target as HTMLInputElement
-  if (!input.files || input.files.length === 0) return
-  const file = input.files[0]
-  const reader = new FileReader()
-  reader.onload = (e) => {
-    try {
-      const data = JSON.parse(e.target?.result as string)
-      if (!data.configMap && !data.personas) {
-        Toast.error('无效的配置文件格式')
-        return
-      }
-      importFileData.value = data
-      showImportConfirm.value = true
-    } catch {
-      Toast.error('无法解析配置文件')
-    }
-  }
-  reader.readAsText(file)
-  // Reset input to allow re-selecting same file
-  input.value = ''
-}
-
-const confirmImport = async () => {
-  if (!importFileData.value) return
-  importLoading.value = true
-  try {
-    await axiosInstance.post(`${apiBase}/import`, importFileData.value)
-    Toast.success('配置已导入')
-    showImportConfirm.value = false
-    importFileData.value = null
-    // Refresh data
-    await fetchPersonas()
-    await computePersonaAvatars()
-  } catch (e) {
-    console.error('Failed to import config', e)
-    Toast.error('导入配置失败')
-  } finally {
-    importLoading.value = false
-  }
-}
-
-const openCommenterDialog = async () => {
-  showCommenterDialog.value = true
-  commenterSearch.value = ""
-  commenterLoading.value = true
-  try {
-    const { data } = await axiosInstance.get("/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/commenters")
-    commenterList.value = Array.isArray(data) ? data : (data.items || [])
-  } catch (e) {
-    console.error("Failed to fetch commenters", e)
-    Toast.error("获取评论者列表失败")
-    commenterList.value = []
-  } finally {
-    commenterLoading.value = false
-  }
-}
-
-const filteredCommenters = computed(() => {
-  const kw = commenterSearch.value.trim().toLowerCase()
-  if (!kw) return commenterList.value
-  return commenterList.value.filter(c => c.displayName.toLowerCase().includes(kw) || (c.email && c.email.toLowerCase().includes(kw)))
-})
-
-const addCommenter = (commenter: { displayName: string; email: string }) => {
-  const value = commenter.email || commenter.displayName
-  if (!value) return
-  const current = settings.basic.blockedCommenters.split(",").map(s => s.trim()).filter(Boolean)
-  if (current.includes(value)) { Toast.info("该评论者已在黑名单中"); return }
-  current.push(value)
-  settings.basic.blockedCommenters = current.join(",")
-  Toast.success("已添加到黑名单")
-  showCommenterDialog.value = false
-}
-
-const computeGravatarHash = async (email: string): Promise<string> => {
-  const normalized = email.trim().toLowerCase()
-  const encoder = new TextEncoder()
-  const data = encoder.encode(normalized)
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
-  const hashArray = Array.from(new Uint8Array(hashBuffer))
-  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
-}
-
-const performCleanup = async () => {
-  cleanupLoading.value = true
-  cleanupResult.value = null
-  try {
-    const { data } = await axiosInstance.post("/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/cleanup")
-    cleanupResult.value = data.deletedCount ?? data ?? 0
-    Toast.success(`清理完成，共删除 ${cleanupResult.value} 条记录`)
-  } catch { Toast.error("清理失败") }
-  finally { cleanupLoading.value = false }
-}
-
-// ===== Persona CRUD =====
-const personasApiBase = "/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/personas"
-
-const fetchPersonas = async () => {
-  personasLoading.value = true
-  try {
-    const { data } = await axiosInstance.get(personasApiBase)
-    const list = Array.isArray(data) ? data : (data.items || [])
-    // Default persona first
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    personas.value = list.sort((a: any, b: any) => {
-      if (a.spec?.isDefault && !b.spec?.isDefault) return -1
-      if (!a.spec?.isDefault && b.spec?.isDefault) return 1
-      return 0
-    })
-  } catch (e) {
-    console.error("Failed to fetch personas", e)
-    personas.value = []
-  } finally {
-    personasLoading.value = false
-  }
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getPersonaAvatar = (persona: any) => {
-  if (persona.spec?.email) {
-    return persona._avatarUrl || ''
-  }
-  return ''
-}
-
-// Compute avatar for each persona on list load
-const computePersonaAvatars = async () => {
-  for (const p of personas.value) {
-    if (p.spec?.email) {
-      try {
-        const hash = await computeGravatarHash(p.spec.email)
-        p._avatarUrl = `https://cn.cravatar.com/avatar/${hash}`
-      } catch { p._avatarUrl = '' }
-    } else {
-      p._avatarUrl = ''
-    }
-  }
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const openPersonaDialog = async (persona: any | null) => {
-  personaEditing.value = persona
-  if (persona) {
-    personaForm.displayName = persona.spec.displayName || ''
-    personaForm.email = persona.spec.email || ''
-    personaForm.gender = persona.spec.gender || 'female'
-    personaForm.neutralVoice = persona.spec.neutralVoice || false
-    personaForm.wakeWord = persona.spec.wakeWord || ''
-    personaForm.prompt = persona.spec.prompt || ''
-    personaForm.isDefault = persona.spec.isDefault || false
-  } else {
-    personaForm.displayName = ''
-    personaForm.email = ''
-    personaForm.gender = 'female'
-    personaForm.neutralVoice = false
-    personaForm.wakeWord = ''
-    personaForm.prompt = ''
-    personaForm.isDefault = false
-  }
-  personaDialogAvatar.value = ''
-  if (personaForm.email) {
-    try {
-      const hash = await computeGravatarHash(personaForm.email)
-      personaDialogAvatar.value = `https://cn.cravatar.com/avatar/${hash}`
-    } catch { personaDialogAvatar.value = '' }
-  }
-  showPersonaDialog.value = true
-}
-
-const savePersona = async () => {
-  if (!personaForm.displayName.trim()) {
-    Toast.warning('请输入角色昵称')
-    return
-  }
-  // Prevent removing default flag from the only default persona
-  if (!personaForm.isDefault && personaEditing.value?.spec?.isDefault) {
-    Toast.warning('必须保留至少一个默认角色，请先将其他角色设为默认')
-    return
-  }
-  personaSaving.value = true
-  try {
-    // If setting as default, first unset current default
-    if (personaForm.isDefault) {
-      for (const p of personas.value) {
-        if (p.spec?.isDefault) {
-          // Skip self when editing
-          if (personaEditing.value && p.metadata.name === personaEditing.value.metadata.name) continue
-          const { data: latest } = await axiosInstance.get(`${personasApiBase}/${p.metadata.name}`)
-          latest.spec.isDefault = false
-          await axiosInstance.put(`${personasApiBase}/${p.metadata.name}`, latest)
-        }
-      }
-    }
-    const payload = {
-      spec: {
-        displayName: personaForm.displayName,
-        email: personaForm.email,
-        gender: personaForm.gender,
-        neutralVoice: personaForm.neutralVoice,
-        wakeWord: personaForm.wakeWord,
-        prompt: personaForm.prompt,
-        isDefault: personaForm.isDefault,
-      },
-      apiVersion: 'comment-ai-autopilot.nxxy335.top/v1alpha1',
-      kind: 'AiPersona',
-      metadata: personaEditing.value
-        ? { name: personaEditing.value.metadata.name }
-        : { generateName: 'persona-' },
-    }
-    if (personaEditing.value) {
-      // Update
-      const { data: existing } = await axiosInstance.get(`${personasApiBase}/${personaEditing.value.metadata.name}`)
-      const updated = { ...existing, spec: { ...existing.spec, ...payload.spec } }
-      await axiosInstance.put(`${personasApiBase}/${personaEditing.value.metadata.name}`, updated)
-      Toast.success('角色已更新')
-    } else {
-      // Create
-      await axiosInstance.post(personasApiBase, payload)
-      Toast.success('角色已添加')
-    }
-    showPersonaDialog.value = false
-    await fetchPersonas()
-    await computePersonaAvatars()
-  } catch (e) {
-    console.error('Failed to save persona', e)
-    Toast.error('保存角色失败')
-  } finally {
-    personaSaving.value = false
-  }
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const deletePersona = async (persona: any) => {
-  if (persona.spec?.isDefault) {
-    Toast.warning('默认角色不可删除，请先将其他角色设为默认')
-    return
-  }
-  if (!confirm(`确定要删除角色「${persona.spec?.displayName || '未命名'}」吗？`)) return
-  try {
-    await axiosInstance.delete(`${personasApiBase}/${persona.metadata.name}`)
-    Toast.success('角色已删除')
-    await fetchPersonas()
-    await computePersonaAvatars()
-  } catch (e) {
-    console.error('Failed to delete persona', e)
-    Toast.error('删除角色失败')
-  }
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const setDefaultPersona = async (persona: any) => {
-  try {
-    // First unset current default
-    for (const p of personas.value) {
-      if (p.spec?.isDefault && p.metadata.name !== persona.metadata.name) {
-        const { data: latest } = await axiosInstance.get(`${personasApiBase}/${p.metadata.name}`)
-        latest.spec.isDefault = false
-        await axiosInstance.put(`${personasApiBase}/${p.metadata.name}`, latest)
-      }
-    }
-    // Set new default
-    const { data: latestTarget } = await axiosInstance.get(`${personasApiBase}/${persona.metadata.name}`)
-    latestTarget.spec.isDefault = true
-    await axiosInstance.put(`${personasApiBase}/${persona.metadata.name}`, latestTarget)
-    Toast.success('已设为默认角色')
-    await fetchPersonas()
-  } catch (e) {
-    console.error('Failed to set default persona', e)
-    Toast.error('设置默认角色失败')
-  }
-}
-
-// Watch persona dialog email for Gravatar preview
-let emailDebounceTimer: ReturnType<typeof setTimeout> | null = null
-watch(() => personaForm.email, (newEmail) => {
-  if (emailDebounceTimer) clearTimeout(emailDebounceTimer)
-  if (!newEmail || !newEmail.trim()) { personaDialogAvatar.value = ''; return }
-  emailDebounceTimer = setTimeout(async () => {
-    try {
-      const hash = await computeGravatarHash(newEmail)
-      personaDialogAvatar.value = `https://cn.cravatar.com/avatar/${hash}`
-    } catch { personaDialogAvatar.value = '' }
-  }, 500)
-})
-
-const parseConfigSection = (data: Record<string, unknown>, key: string): Record<string, unknown> => {
-  const val = data[key]
-  if (!val) return {}
-  if (typeof val === 'string') {
-    try { return JSON.parse(val) } catch { return {} }
-  }
-  return val as Record<string, unknown>
+const parseConfig = (data: any, key: string) => {
+  if (!data[key]) return {}
+  if (typeof data[key] === 'string') { try { return JSON.parse(data[key]) } catch { return {} } }
+  return data[key]
 }
 
 const fetchSettings = async () => {
@@ -878,23 +138,24 @@ const fetchSettings = async () => {
   try {
     const { data } = await coreApiClient.configMap.getConfigMap({ name: configMapName })
     if (data.data) {
-      const d = data.data as Record<string, unknown>
-      const basic = parseConfigSection(d, 'basic') as Record<string, unknown>
-      const model = parseConfigSection(d, 'model') as Record<string, unknown>
-      const prompt = parseConfigSection(d, 'prompt') as Record<string, unknown>
-      const cleanup = parseConfigSection(d, 'cleanup') as Record<string, unknown>
-      if (Object.keys(basic).length) { settings.basic.autoReply = basic.autoReply !== false; settings.basic.autoPublish = basic.autoPublish !== false; settings.basic.maxRetryCount = (basic.maxRetryCount as number) || 3; settings.basic.blockedCommenters = (basic.blockedCommenters as string) || ""; settings.basic.maxConversationRounds = (basic.maxConversationRounds as number) || 8; settings.basic.rateLimitPerMinute = (basic.rateLimitPerMinute as number) || 10 }
-      if (Object.keys(model).length) { settings.model.modelName = (model.modelName as string) || "" }
-      if (Object.keys(prompt).length) { settings.prompt.customPromptTemplate = (prompt.customPromptTemplate as string) || ""; const ep = prompt.enabledPresets; settings.prompt.enabledPresets = Array.isArray(ep) ? ep : (typeof ep === 'string' ? (ep as string).split(",").map((s: string) => s.trim()).filter(Boolean) : []) }
-      if (Object.keys(cleanup).length) { settings.cleanup.cleanupEnabled = cleanup.cleanupEnabled !== false; settings.cleanup.retentionDays = (cleanup.retentionDays as number) || 30 }
+      const d: any = data.data
+      const basic = parseConfig(d, 'basic')
+      const model = parseConfig(d, 'model')
+      const prompt = parseConfig(d, 'prompt')
+      
+      if (Object.keys(basic).length) {
+        settings.basic.autoReply = basic.autoReply !== false
+        settings.basic.autoPublish = basic.autoPublish !== false
+        settings.basic.maxConversationRounds = basic.maxConversationRounds || 8
+        settings.basic.rateLimitPerMinute = basic.rateLimitPerMinute || 10
+        settings.basic.blockedCommenters = basic.blockedCommenters || ""
+      }
+      if (Object.keys(model).length) settings.model.modelName = model.modelName || ""
+      if (Object.keys(prompt).length) settings.prompt.customPromptTemplate = prompt.customPromptTemplate || ""
     }
-  } catch (e) {
-    console.error("Failed to fetch settings", e)
-    Toast.error("加载设置失败，请刷新页面重试")
-  }
+  } catch (e) { Toast.error("加载设置失败") }
   finally {
     loading.value = false
-    // Update snapshot after fetch to reset unsaved indicator
     lastSavedSnapshot.value = JSON.stringify(settings)
   }
 }
@@ -908,24 +169,69 @@ const saveSettings = async () => {
       ...updated.data,
       basic: JSON.stringify(settings.basic),
       model: JSON.stringify(settings.model),
-      prompt: JSON.stringify(settings.prompt),
-      cleanup: JSON.stringify(settings.cleanup),
+      prompt: JSON.stringify(settings.prompt)
     }
     await coreApiClient.configMap.updateConfigMap({ name: configMapName, configMap: updated })
     Toast.success("设置已保存")
-    // Update snapshot after save to reset unsaved indicator
     lastSavedSnapshot.value = JSON.stringify(settings)
-  } catch (e) { console.error("Failed to save settings", e); Toast.error("保存设置失败") }
+  } catch (e) { Toast.error("保存失败") }
   finally { saving.value = false }
 }
 
-onMounted(async () => {
-  await fetchSettings()
-  await fetchPersonas()
-  await computePersonaAvatars()
-})
+onMounted(fetchSettings)
 </script>
 
 <style scoped>
-/* Only keep line-clamp and peer-checked utilities that Tailwind may not cover in this scope */
+.settings-container { padding-bottom: 30px; }
+.header-icon { margin-right: 8px; align-self: center; }
+.settings-main { margin: 20px; }
+
+/* 稳定的布局结构：PC端左右分栏，手机端上下堆叠 */
+.settings-layout { display: flex; flex-direction: column; gap: 24px; }
+@media (min-width: 1024px) {
+  .settings-layout { flex-direction: row; align-items: flex-start; }
+}
+
+.settings-content { flex: 1; width: 100%; }
+.settings-sidebar { width: 100%; display: flex; flex-direction: column; gap: 16px; }
+@media (min-width: 1024px) {
+  .settings-sidebar { width: 280px; position: sticky; top: 20px; flex-shrink: 0; }
+}
+
+/* 选项卡样式 */
+.tabs-wrap { display: flex; gap: 8px; background: #fff; padding: 6px; border-radius: 10px; border: 1px solid #e5e7eb; margin-bottom: 24px; overflow-x: auto; }
+.tab-btn { flex: 1; padding: 10px 16px; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: #4b5563; font-weight: bold; font-size: 14px; white-space: nowrap; }
+.tab-btn:hover { background: #f3f4f6; }
+.tab-btn.active { background: #2563eb; color: #fff; }
+
+/* 面板通用样式 */
+.setting-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
+.panel-header { padding: 16px 20px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
+.panel-header h3 { margin: 0 0 4px 0; font-size: 16px; color: #1f2937; }
+.panel-header p { margin: 0; font-size: 12px; color: #6b7280; }
+.panel-body { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
+
+/* 表单行 */
+.form-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f9fafb; border-radius: 8px; }
+.form-row label { font-weight: bold; font-size: 14px; color: #374151; }
+.form-row-col { display: flex; flex-direction: column; gap: 8px; }
+.form-row-col label { font-weight: bold; font-size: 14px; color: #374151; }
+
+.custom-input, .custom-textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none; box-sizing: border-box; }
+.custom-input:focus, .custom-textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
+.prompt-box { font-family: monospace; font-size: 13px; background: #f9fafb; }
+
+/* 右侧侧边栏卡片 */
+.sidebar-card { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 20px; border-radius: 12px; }
+.info-card { background: #fff; border-color: #e5e7eb; }
+.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.sidebar-header h4 { margin: 0; font-size: 15px; color: #1f2937; }
+.unsaved-badge { background: #fef08a; color: #854d0e; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: bold; }
+
+.btn-save { width: 100%; padding: 12px; background: #16a34a; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; margin-bottom: 10px; font-size: 14px; }
+.btn-save:disabled { opacity: 0.7; cursor: not-allowed; }
+.btn-reset { width: 100%; padding: 10px; background: #fff; color: #374151; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; font-size: 14px; }
+
+.info-card ul { padding-left: 20px; margin: 0; color: #4b5563; font-size: 13px; line-height: 1.8; }
+.info-card code { background: #f3f4f6; color: #9333ea; padding: 2px 4px; border-radius: 4px; font-size: 12px; }
 </style>