From 1a2732fe19c2902b015d6e121e52d0b8304f9784 Mon Sep 17 00:00:00 2001
From: bbb-lsy07 <pitas_hadron0w@icloud.com>
Date: Sun, 21 Jun 2026 12:20:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BD=BB=E5=BA=95=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0=20UI=20=E4=B8=8E=E5=AF=B9=E8=AF=9D=E4=B8=8A?=
 =?UTF-8?q?=E4=B8=8B=E6=96=87=E5=BC=95=E7=94=A8=E6=A8=A1=E5=9D=97=EF=BC=8C?=
 =?UTF-8?q?=E5=85=A8=E9=9D=A2=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=20(v1.0.4)=20(#6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 对话气泡增加引用摘要模块，解决多用户混杂交谈上下文不清晰问题

- 后端 ConversationMessage Record 新增 quoteOwner/quoteContent 字段
- 后端 getConversation 方法重写，构建 Reply 映射字典溯源引用关系
- 前端 ConversationMessage 类型定义新增 quoteOwner/quoteContent
- 前端新增 truncateQuote 截断方法（复用 stripHtml，限30字符）
- 前端对话气泡模板渲染灰色引用条（bg-black/5 + border-l-2）

* chore: 补充 .gitignore 规则（*.jar、ui/dist 等）

* feat: Markdown 引用注入法 - AI回复自动拼接引用块（主题无关通用方案）

- 后端 CommentReplyPublisher.doPublish 重写，发布前查询被回复对象并拼接 Markdown Blockquote
- 新增 buildQuoteMarkdown 辅助方法，Jsoup 清除 HTML 后截断 40 字符生成引用
- 前端 LogsView 恢复简洁气泡模板，移除 quoteOwner/quoteContent 前端引用逻辑
- renderContent 新增换行符处理，确保 Markdown 引用块正确渲染

* style: 重写 LogsView.vue - 纯 Tailwind 标签替代 Emoji，移除 300+ 行自定义 CSS

- 状态/情感标签改用纯色 Tailwind 背景标签，去除所有 Emoji
- 删除 300+ 行自定义 CSS，全部替换为 Tailwind 原子类
- 对话弹窗 Markdown 引用块正则提取，去除气泡和机器人 Emoji
- 优化移动端响应式布局，解决排版错位问题

* style: 重写 SettingsView.vue - 纯 Tailwind 栅格布局，移除自定义 CSS

- 标签导航改用 Tailwind flex + overflow-x-auto
- 所有设置面板（basic/persona/model/prompt/cleanup）改用 Tailwind 原子类
- 开关改用 peer-checked 伪类实现，移除自定义 toggle CSS
- 滑块刻度改用 flex justify-between 实现
- 侧边栏 lg:sticky lg:top-24，移动端自然折叠到底部
- 弹窗（评论者选择/角色编辑）改用 fixed inset-0 + backdrop-blur
- 删除 600+ 行自定义 CSS

* refactor: 返璞归真 - 剥离 Markdown 注入，利用 Halo 原生层级回复

- 后端 CommentReplyPublisher 删除 buildQuoteMarkdown 和 Markdown 拼接逻辑
- AI 回复直接存入纯净文本，由 Halo 原生 quoteReply 字段渲染前台层级关系
- 前端 ConversationMessage 恢复 quoteOwner/quoteContent 字段
- 前端对话弹窗添加原生 Tailwind 引用摘要框（灰色 border-l-[3px]）
- 简化 renderContent，删除 Markdown 引用正则匹配

* chore: 版本号升级至 1.0.1，强制刷新 Halo 前端缓存

- plugin.yaml version: 1.0.0 -> 1.0.1
- build.gradle version: 1.0.0 -> 1.0.1
- LogsView truncateQuote/renderContent 增加历史 Markdown 引用文本清理正则
- 防止旧版测试数据 (💬 **@某人**:) 在界面套娃显示

* style: 彻底重写 LogsView & SettingsView - 原生 Scoped CSS 替代 Tailwind

- LogsView.vue: 移除所有 Tailwind 类，改用 <style scoped> 原生 CSS
- SettingsView.vue: 移除所有 Tailwind 类，改用 <style scoped> 原生 CSS
- 标签配色、气泡样式、引用框全部使用纯 CSS 实现，避免 Halo 主题冲突
- 版本号升级至 1.0.2 强制刷新前端缓存

* feat: SettingsView 完整功能版 - AI角色/数据清理/导入导出

- 5个设置面板：基本设置、AI角色、模型设置、Prompt、数据清理
- AI角色：CRUD、Gravatar头像、性别/唤醒词/默认角色
- 数据清理：自动清理开关、保留天数滑块、手动清理
- 导入导出：JSON配置导入导出
- 评论者黑名单弹窗选择
- 全部使用原生 Scoped CSS

* chore: 版本号升级至 1.0.3

* v1.0.4: 美化 LogsView 和 SettingsView UI，优化引用框样式与移动端适配

---------

Co-authored-by: bbb-lsy07 <bbb-lsy07@users.noreply.github.com>
---
 .gitignore                                    |    7 +
 build.gradle                                  |    2 +-
 .../endpoint/CommentAiAutopilotEndpoint.java  |   49 +-
 .../service/CommentReplyPublisher.java        |  100 +-
 src/main/resources/plugin.yaml                |    2 +-
 ui/src/views/LogsView.vue                     | 1079 ++--------
 ui/src/views/SettingsView.vue                 | 1824 +++--------------
 7 files changed, 636 insertions(+), 2427 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1b20f46..59379dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -63,6 +63,7 @@ lerna-debug.log*
 *.ctxt
 
 ### Package Files
+*.jar
 *.war
 *.nar
 *.ear
@@ -70,6 +71,12 @@ lerna-debug.log*
 *.tar.gz
 *.rar
 
+### UI build output
+ui/dist/
+ui/dist-ssr/
+ui/*.local
+ui/.eslintcache
+
 ### Local file
 application-local.yml
 application-local.yaml
diff --git a/build.gradle b/build.gradle
index 6af1ed1..4d6cd49 100644
--- a/build.gradle
+++ b/build.gradle
@@ -5,7 +5,7 @@ plugins {
 }
 
 group 'top.nxxy335.commentaiautopilot'
-version '1.0.0'
+version '1.0.4'
 
 repositories {
     mavenCentral()
diff --git a/src/main/java/top/nxxy335/commentaiautopilot/endpoint/CommentAiAutopilotEndpoint.java b/src/main/java/top/nxxy335/commentaiautopilot/endpoint/CommentAiAutopilotEndpoint.java
index 4910205..135a523 100644
--- a/src/main/java/top/nxxy335/commentaiautopilot/endpoint/CommentAiAutopilotEndpoint.java
+++ b/src/main/java/top/nxxy335/commentaiautopilot/endpoint/CommentAiAutopilotEndpoint.java
@@ -291,26 +291,51 @@ public class CommentAiAutopilotEndpoint implements CustomEndpoint {
                 var commentTime = String.valueOf(comment.getMetadata().getCreationTimestamp());
                 var isCommentAi = isAiOwner(comment.getSpec().getOwner());
 
+                // 首条评论没有引用对象
                 var commentMsg = new ConversationMessage(
-                    "comment", commentOwner, commentContent, commentTime, isCommentAi
+                    "comment", commentOwner, commentContent, commentTime, isCommentAi, null, null
                 );
 
                 return client.list(Reply.class,
                         reply -> commentName.equals(reply.getSpec().getCommentName()),
                         null)
                     .sort(Comparator.comparing(r -> r.getMetadata().getCreationTimestamp()))
-                    .map(reply -> {
-                        var replyOwner = extractOwnerName(reply.getSpec().getOwner());
-                        var replyContent = extractContent(reply.getSpec().getRaw(), reply.getSpec().getContent());
-                        var replyTime = String.valueOf(reply.getMetadata().getCreationTimestamp());
-                        var isAi = isAiOwner(reply.getSpec().getOwner());
-                        return new ConversationMessage("reply", replyOwner, replyContent, replyTime, isAi);
-                    })
-                    .collectList()
+                    .collectList() // 收集为List以便统一处理引用映射
                     .map(replyList -> {
                         List<ConversationMessage> messages = new ArrayList<>();
                         messages.add(commentMsg);
-                        messages.addAll(replyList);
+
+                        // 构建 Reply 的映射字典，方便查找引用关系
+                        Map<String, Reply> replyMap = new HashMap<>();
+                        for (Reply r : replyList) {
+                            replyMap.put(r.getMetadata().getName(), r);
+                        }
+
+                        for (Reply reply : replyList) {
+                            var replyOwner = extractOwnerName(reply.getSpec().getOwner());
+                            var replyContent = extractContent(reply.getSpec().getRaw(), reply.getSpec().getContent());
+                            var replyTime = String.valueOf(reply.getMetadata().getCreationTimestamp());
+                            var isAi = isAiOwner(reply.getSpec().getOwner());
+
+                            String quoteOwner = null;
+                            String quoteContent = null;
+
+                            // 获取引用的 Reply 名称 (Halo中如果为空，代表直接回复顶级 Comment)
+                            String quoteReplyName = reply.getSpec().getQuoteReply();
+                            if (quoteReplyName != null && !quoteReplyName.isBlank()) {
+                                Reply quotedReply = replyMap.get(quoteReplyName);
+                                if (quotedReply != null) {
+                                    quoteOwner = extractOwnerName(quotedReply.getSpec().getOwner());
+                                    quoteContent = extractContent(quotedReply.getSpec().getRaw(), quotedReply.getSpec().getContent());
+                                }
+                            } else {
+                                // 没有 quoteReply 表示直接回复首条评论
+                                quoteOwner = commentOwner;
+                                quoteContent = commentContent;
+                            }
+
+                            messages.add(new ConversationMessage("reply", replyOwner, replyContent, replyTime, isAi, quoteOwner, quoteContent));
+                        }
                         return messages;
                     });
             })
@@ -712,7 +737,9 @@ public class CommentAiAutopilotEndpoint implements CustomEndpoint {
         String owner,
         String content,
         String time,
-        boolean isAi
+        boolean isAi,
+        String quoteOwner,
+        String quoteContent
     ) {}
 
     public record CommenterInfo(
diff --git a/src/main/java/top/nxxy335/commentaiautopilot/service/CommentReplyPublisher.java b/src/main/java/top/nxxy335/commentaiautopilot/service/CommentReplyPublisher.java
index 82428d9..4c56b17 100644
--- a/src/main/java/top/nxxy335/commentaiautopilot/service/CommentReplyPublisher.java
+++ b/src/main/java/top/nxxy335/commentaiautopilot/service/CommentReplyPublisher.java
@@ -80,63 +80,63 @@ public class CommentReplyPublisher {
     private Mono<Reply> doPublish(String parentCommentName, String replyContent,
                                    String postName, String quoteReplyName, boolean autoPublish,
                                    String personaName) {
-        return resolvePersona(personaName).flatMap(persona -> {
-            String displayName = persona.displayName();
-            String email = persona.email();
 
-            Reply reply = new Reply();
-            reply.setMetadata(new Metadata());
-            reply.getMetadata().setName(generateReplyName());
-            reply.setSpec(new Reply.ReplySpec());
+        // 解析 AI 角色并直接发布纯净的回复内容
+        return resolvePersona(personaName)
+            .flatMap(persona -> {
+                String displayName = persona.displayName();
+                String email = persona.email();
 
-            var spec = reply.getSpec();
-            spec.setCommentName(parentCommentName);
-            spec.setRaw(replyContent);
-            spec.setContent(replyContent);
-            spec.setApproved(autoPublish);
-            if (autoPublish) {
-                spec.setApprovedTime(Instant.now());
-            }
-            spec.setPriority(0);
-            spec.setTop(false);
-            spec.setAllowNotification(false);
-            spec.setHidden(false);
+                Reply reply = new Reply();
+                reply.setMetadata(new Metadata());
+                reply.getMetadata().setName(generateReplyName());
+                reply.setSpec(new Reply.ReplySpec());
 
-            if (quoteReplyName != null && !quoteReplyName.isBlank()) {
-                spec.setQuoteReply(quoteReplyName);
-            }
+                var spec = reply.getSpec();
+                spec.setCommentName(parentCommentName);
 
-            var owner = new Comment.CommentOwner();
-            owner.setKind(Comment.CommentOwner.KIND_EMAIL);
-            if (email != null && !email.isBlank()) {
-                owner.setName(email);
-            } else {
-                owner.setName(AI_PERSONA_OWNER_PREFIX + displayName);
-            }
-            owner.setDisplayName(displayName + " AI");
+                // 直接存入纯净的 AI 回复内容，不加任何 Markdown 前缀
+                spec.setRaw(replyContent);
+                spec.setContent(replyContent);
 
-            Map<String, String> ownerAnnotations = new HashMap<>();
-            ownerAnnotations.put("comment-ai-autopilot.nxxy335.top/is-ai", "true");
-            // 使用Gravatar邮箱头像
-            if (email != null && !email.isBlank()) {
-                String gravatarUrl = GravatarUtil.generateUrl(email);
-                ownerAnnotations.put(Comment.CommentOwner.AVATAR_ANNO, gravatarUrl);
-            }
-            owner.setAnnotations(ownerAnnotations);
-            spec.setOwner(owner);
+                spec.setApproved(autoPublish);
+                if (autoPublish) {
+                    spec.setApprovedTime(Instant.now());
+                }
+                spec.setPriority(0);
+                spec.setTop(false);
+                spec.setAllowNotification(false);
+                spec.setHidden(false);
 
-            log.info("[Publisher] Creating reply for comment: {}, owner: kind={}, name={}, displayName={}, annotations={}",
-                parentCommentName, owner.getKind(), owner.getName(), owner.getDisplayName(), ownerAnnotations);
+                // Halo 原生评论组件正是靠这个字段来渲染 "回复 @某人" 的
+                if (quoteReplyName != null && !quoteReplyName.isBlank()) {
+                    spec.setQuoteReply(quoteReplyName);
+                }
 
-            return client.create(reply)
-                .doOnSuccess(created -> {
-                    var createdOwner = created.getSpec().getOwner();
-                    log.info("[Publisher] AI Persona '{}' reply published for comment: {}, quoteReply: {}, owner annotations after create: {}",
-                        displayName, parentCommentName, quoteReplyName,
-                        createdOwner != null ? createdOwner.getAnnotations() : "null");
-                })
-                .doOnError(e -> log.error("[Publisher] Failed to publish AI reply: {}", e.getMessage()));
-        });
+                var owner = new Comment.CommentOwner();
+                owner.setKind(Comment.CommentOwner.KIND_EMAIL);
+                if (email != null && !email.isBlank()) {
+                    owner.setName(email);
+                } else {
+                    owner.setName(AI_PERSONA_OWNER_PREFIX + displayName);
+                }
+                owner.setDisplayName(displayName + " AI");
+
+                Map<String, String> ownerAnnotations = new HashMap<>();
+                ownerAnnotations.put("comment-ai-autopilot.nxxy335.top/is-ai", "true");
+                if (email != null && !email.isBlank()) {
+                    String gravatarUrl = GravatarUtil.generateUrl(email);
+                    ownerAnnotations.put(Comment.CommentOwner.AVATAR_ANNO, gravatarUrl);
+                }
+                owner.setAnnotations(ownerAnnotations);
+                spec.setOwner(owner);
+
+                log.info("[Publisher] Creating reply for comment: {}, content length: {}", parentCommentName, replyContent.length());
+
+                return client.create(reply)
+                    .doOnSuccess(created -> log.info("[Publisher] AI Persona '{}' reply published for comment: {}", displayName, parentCommentName))
+                    .doOnError(e -> log.error("[Publisher] Failed to publish AI reply: {}", e.getMessage()));
+            });
     }
 
     /**
diff --git a/src/main/resources/plugin.yaml b/src/main/resources/plugin.yaml
index cea8919..d2c7f1d 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.0"
+  version: "1.0.4"
diff --git a/ui/src/views/LogsView.vue b/ui/src/views/LogsView.vue
index ff337eb..5c33315 100644
--- a/ui/src/views/LogsView.vue
+++ b/ui/src/views/LogsView.vue
@@ -1,59 +1,33 @@
 <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>
 
-    <!-- Batch Operation Toolbar -->
-    <div v-if="selectedNames.size > 0" class="m-4 mb-0 flex items-center gap-3 bg-blue-50 border border-blue-200 rounded-lg px-4 py-2.5">
-      <span class="text-sm text-blue-700 font-medium">已选择 {{ selectedNames.size }} 项</span>
-      <button
-        class="batch-btn batch-btn--approve"
-        @click="batchApprove"
-      >
-        批量通过
-      </button>
-      <button
-        class="batch-btn batch-btn--reject"
-        @click="batchReject"
-      >
-        批量拒绝
-      </button>
-      <button
-        class="batch-btn batch-btn--delete"
-        @click="batchDelete"
-      >
-        批量删除
-      </button>
-      <button
-        class="batch-btn batch-btn--cancel"
-        @click="selectedNames.clear(); selectAll = false"
-      >
-        取消选择
-      </button>
+    <!-- 批量操作工具栏 -->
+    <div v-if="selectedNames.size > 0" class="toolbar batch-toolbar">
+      <span class="batch-text">已选择 {{ selectedNames.size }} 项</span>
+      <div class="batch-actions">
+        <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>
 
-    <!-- Filter Bar -->
-    <div class="m-4 mb-0 flex items-center gap-3">
-      <select
-        v-model="filterStatus"
-        class="filter-select"
-      >
+    <!-- 过滤工具栏 -->
+    <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="filter-select"
-      >
+      <select v-model="filterSentiment" class="filter-select">
         <option value="">全部情感</option>
         <option value="VERY_POSITIVE">非常正面</option>
         <option value="POSITIVE">正面</option>
@@ -61,264 +35,99 @@
         <option value="NEGATIVE">负面</option>
         <option value="VERY_NEGATIVE">非常负面</option>
       </select>
-      <div class="relative flex-1 max-w-xs">
-        <svg class="filter-search-icon" 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="filter-input"
-        />
-      </div>
-      <button
-        class="filter-reset-btn"
-        @click="resetFilters"
-      >
-        <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 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" 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>暂无AI回复记录</span>
-      </div>
-
-      <div v-else class="space-y-3">
-        <div v-if="replies.length > 0" class="flex items-center gap-2 mb-2 px-1">
-          <input
-            type="checkbox"
-            :checked="selectAll"
-            @change="toggleSelectAll"
-            class="h-4 w-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-lg border border-gray-200 overflow-hidden hover:shadow-sm transition-all"
-        >
-          <!-- Card body -->
-          <div class="p-4">
-            <div class="flex items-start gap-3">
-              <input
-                type="checkbox"
-                :checked="selectedNames.has(reply.metadata.name)"
-                @change="toggleSelect(reply.metadata.name)"
-                class="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 shrink-0"
-              />
-              <div class="flex-1 min-w-0">
-                <!-- Row 1: Status tags + time -->
-                <div class="flex items-center justify-between mb-3">
-                  <div class="flex items-center gap-1.5 flex-wrap">
-                    <span
-                      class="status-tag"
-                      :class="getStatusClass(reply.spec.status)"
-                    >
-                      {{ getStatusLabel(reply.spec.status) }}
-                    </span>
-                    <span
-                      class="status-tag"
-                      :class="reply.spec.published ? 'status-tag--published' : 'status-tag--unpublished'"
-                    >
-                      {{ reply.spec.published ? '已发布' : '未发布' }}
-                    </span>
-                    <span
-                      v-if="reply.spec.isAiConversation"
-                      class="status-tag status-tag--conversation"
-                    >
-                      对话
-                    </span>
-                    <span
-                      v-if="reply.spec.sentiment"
-                      class="status-tag"
-                      :class="getSentimentClass(reply.spec.sentiment)"
-                    >
-                      {{ getSentimentLabel(reply.spec.sentiment) }}
-                    </span>
-                  </div>
-                  <span class="text-xs text-gray-400 flex-shrink-0 ml-2">{{ formatDate(reply.metadata.creationTimestamp) }}</span>
-                </div>
-
-                <!-- Row 2: AI reply content (truncated) -->
-                <div class="text-sm text-gray-800 leading-relaxed break-words line-clamp-3 mt-2">
-                  {{ stripHtml(reply.spec.reply) || '(空)' }}
+        
+        <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="card-time">{{ formatDate(reply.metadata.creationTimestamp) }}</span>
               </div>
+              <div class="card-text">{{ stripHtml(reply.spec.reply) || '(空)' }}</div>
             </div>
           </div>
-
-          <!-- Card footer: meta info + actions -->
-          <div class="px-4 py-2.5 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
-            <div class="flex items-center gap-4 text-xs text-gray-400">
-              <span class="flex items-center gap-1.5">
-                评分 <span :class="getScoreClass(reply.spec.score)" class="font-semibold">{{ reply.spec.score }}</span>
-                <span class="score-label" :class="getScoreLabelClass(reply.spec.score)">{{ getScoreLabel(reply.spec.score) }}</span>
-              </span>
-              <span v-if="reply.spec.postSlug && reply.spec.postKind === 'Post'" class="flex items-center gap-1">
-                文章
-                <a
-                  :href="getPostUrl(reply.spec.postSlug)"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-blue-500 hover:text-blue-700 hover:underline"
-                >{{ reply.spec.postSlug }}</a>
-                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                </svg>
-              </span>
-              <span v-else-if="reply.spec.postSlug && reply.spec.postKind === 'SinglePage'" class="flex items-center gap-1">
-                页面
-                <a
-                  :href="getPageUrl(reply.spec.postSlug)"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-blue-500 hover:text-blue-700 hover:underline"
-                >{{ reply.spec.postSlug }}</a>
-                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                </svg>
-              </span>
-              <span v-if="reply.spec.retryCount > 0">
-                重试 <span class="text-gray-600">{{ reply.spec.retryCount }}</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" class="post-link">{{ reply.spec.postSlug }}</a>
               </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="inline-flex items-center gap-1 text-xs text-green-600 hover:text-green-800 transition-colors px-2 py-1 rounded hover:bg-green-50"
-                  @click="handleApprove(reply.metadata.name)"
-                >
-                  审核通过
-                </button>
-                <button
-                  class="inline-flex items-center gap-1 text-xs text-red-500 hover:text-red-700 transition-colors px-2 py-1 rounded hover:bg-red-50"
-                  @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="inline-flex items-center gap-1 text-xs text-blue-500 hover:text-blue-700 transition-colors px-2 py-1 rounded hover:bg-blue-50"
-                @click="openConversation(reply)"
-              >
-                <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                </svg>
-                查看
-              </button>
-              <button
-                class="text-xs text-red-400 hover:text-red-600 transition-colors px-2 py-1 rounded hover:bg-red-50"
-                @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>
-
-      <!-- Pagination -->
-      <div v-if="totalPages > 1" class="flex items-center justify-between mt-4 px-1">
-        <span class="text-xs text-gray-400">共 {{ total }} 条</span>
-        <div class="flex gap-2">
+      
+      <div v-if="totalPages > 1" class="pagination">
+        <span>共 {{ total }} 条</span>
+        <div class="pagination-btns">
           <VButton size="sm" :disabled="page <= 1" @click="page--">上一页</VButton>
           <VButton size="sm" :disabled="page >= totalPages" @click="page++">下一页</VButton>
         </div>
       </div>
     </div>
 
-    <!-- Conversation Dialog -->
+    <!-- 完整对话弹窗 -->
     <teleport to="body">
-      <div
-        v-if="showDialog"
-        class="fixed inset-0 z-[9999] flex items-center justify-center"
-      >
-        <!-- Overlay -->
-        <div
-          class="absolute inset-0 bg-black/40"
-          @click="showDialog = false"
-        ></div>
-
-        <!-- Dialog -->
-        <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] mx-4 flex flex-col overflow-hidden">
-          <!-- Dialog header -->
-          <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
-            <div class="flex items-center gap-2">
-              <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-              </svg>
-              <h3 class="text-base font-semibold text-gray-800">完整对话</h3>
-            </div>
-            <button
-              class="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-lg hover:bg-gray-100"
-              @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"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
           </div>
-
-          <!-- Dialog body: conversation -->
-          <div class="flex-1 overflow-y-auto px-5 py-4 space-y-4">
+          <div class="dialog-body">
             <VLoading v-if="conversationLoading" />
+            <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'">
+                    
+                    <!-- 现代化的精美引用框 (无左边框) -->
+                    <div v-if="msg.quoteOwner && msg.quoteContent" class="quote-box">
+                      <div class="quote-header">
+                        <svg class="quote-icon" fill="currentColor" viewBox="0 0 24 24"><path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/></svg>
+                        <span class="quote-owner">{{ msg.quoteOwner }}</span>
+                      </div>
+                      <div class="quote-content">{{ truncateQuote(msg.quoteContent) }}</div>
+                    </div>
 
-            <div v-else-if="conversationMessages.length === 0" class="text-center text-gray-400 py-8">
-              暂无对话内容
-            </div>
-
-            <div v-else>
-              <div
-                v-for="(msg, idx) in conversationMessages"
-                :key="idx"
-                class="flex"
-                :class="msg.isAi ? 'justify-start' : 'justify-end'"
-              >
-                <div class="max-w-[80%]">
-                  <!-- Owner name -->
-                  <div
-                    class="text-xs mb-1"
-                    :class="msg.isAi ? 'text-blue-500' : 'text-gray-500'"
-                  >
-                    <span class="font-medium">{{ msg.owner }}</span>
-                  </div>
-                  <!-- Bubble -->
-                  <div
-                    class="rounded-2xl px-4 py-2.5 text-sm leading-relaxed break-words"
-                    :class="msg.isAi
-                      ? 'bg-blue-50 text-gray-800 rounded-tl-md'
-                      : 'bg-gray-100 text-gray-800 rounded-tr-md'"
-                    v-html="renderContent(msg.content)"
-                  ></div>
-                  <!-- Time -->
-                  <div class="text-[10px] text-gray-300 mt-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>
           </div>
-
-          <!-- Dialog footer -->
-          <div class="px-5 py-3 border-t border-gray-100 flex justify-end">
-            <button
-              class="px-4 py-1.5 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
-              @click="showDialog = false"
-            >
-              关闭
-            </button>
-          </div>
         </div>
       </div>
     </teleport>
@@ -331,637 +140,161 @@ 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
-}
+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)
-
-// Selection state
-const selectedNames = ref<Set<string>>(new Set())
-const selectAll = ref(false)
-
-// Filter state
-const filterStatus = ref("")
-const filterSentiment = ref("")
-const filterKeyword = ref("")
-
-const toggleSelect = (name: string) => {
-  if (selectedNames.value.has(name)) {
-    selectedNames.value.delete(name)
-  } else {
-    selectedNames.value.add(name)
-  }
-  // Update selectAll state
-  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
-  }
-}
-
-// Conversation dialog state
-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 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 { 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) {
-    console.error("Failed to fetch replies", e)
-  } finally {
-    loading.value = false
-  }
+    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}`,
-    )
+    const { data } = await axiosInstance.get(`/apis/console.api.comment-ai-autopilot.nxxy335.top/v1alpha1/conversation/${reply.spec.commentId}`)
     conversationMessages.value = data.messages || []
-  } catch (e) {
-    console.error("Failed to fetch conversation", e)
-    Toast.error("获取对话失败")
-  } finally {
-    conversationLoading.value = false
-  }
+  } catch (e) { Toast.error("获取对话失败") } finally { conversationLoading.value = false }
 }
 
-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) {
-    console.error("Failed to delete reply", e)
-    Toast.error("删除失败")
-  }
+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 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 stripHtml = (html: string) => html ? html.replace(/<[^>]+>/g, "").replace(/\n+/g, " ").trim() : ""
+
+const truncateQuote = (content: string, length = 35) => {
+  if (!content) return ""
+  let plain = stripHtml(content)
+  plain = plain.replace(/^>\s*(?:💬\s*)?\*\*(.*?)\*\*\s*[:：]\s*/gm, '').trim()
+  return plain.length > length ? plain.substring(0, length) + "..." : plain
 }
 
-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) {
-    console.error("Failed to approve reply", 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) {
-    console.error("Failed to reject reply", e)
-    Toast.error("拒绝操作失败")
-  }
-}
-
-const batchApprove = async () => {
-  if (selectedNames.value.size === 0) 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 === 0) 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 === 0) 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 getScoreClass = (score: number) => {
-  if (score >= 85) return "text-green-600"
-  if (score >= 60) return "text-yellow-600"
-  return "text-red-600"
-}
-
-const getScoreLabelClass = (score: number) => {
-  if (score >= 85) return "score-label--excellent"
-  if (score >= 70) return "score-label--good"
-  if (score >= 50) return "score-label--average"
-  if (score > 0) return "score-label--poor"
-  return ""
-}
-
-const getScoreLabel = (score: number) => {
-  if (score >= 85) return "优秀"
-  if (score >= 70) return "良好"
-  if (score >= 50) return "一般"
-  if (score > 0) return "较差"
-  return ""
-}
-
-const getStatusClass = (status: string) => {
-  switch (status) {
-    case "PASS":
-      return "status-tag--pass"
-    case "FAIL":
-      return "status-tag--fail"
-    case "PENDING":
-      return "status-tag--pending"
-    case "REJECTED":
-      return "status-tag--rejected"
-    default:
-      return "status-tag--pending"
-  }
-}
-
-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 "status-tag--very-positive"
-    case "POSITIVE":
-      return "status-tag--positive"
-    case "NEGATIVE":
-      return "status-tag--negative"
-    case "VERY_NEGATIVE":
-      return "status-tag--very-negative"
-    case "NEUTRAL":
-      return "status-tag--neutral-sentiment"
-    default:
-      return "status-tag--neutral-sentiment"
-  }
-}
-
-const getSentimentLabel = (sentiment: string) => {
-  switch (sentiment) {
-    case "VERY_POSITIVE":
-      return "非常正面"
-    case "POSITIVE":
-      return "正面"
-    case "NEGATIVE":
-      return "负面"
-    case "VERY_NEGATIVE":
-      return "非常负面"
-    case "NEUTRAL":
-      return "中性"
-    default:
-      return sentiment
-  }
-}
-
-const formatDate = (timestamp: string) => {
-  if (!timestamp) return ""
-  return new Date(timestamp).toLocaleString("zh-CN")
-}
-
-const getPostUrl = (slug: string) => {
-  return `${window.location.origin}/archives/${slug}`
-}
-
-const getPageUrl = (slug: string) => {
-  return `${window.location.origin}/pages/${slug}`
-}
-
-/**
- * Strip HTML tags for plain text display (card preview)
- */
-const stripHtml = (html: string) => {
-  if (!html) return ""
-  return html
-    .replace(/<p[^>]*>/gi, "")
-    .replace(/<\/p>/gi, "\n")
-    .replace(/<br\s*\/?>/gi, "\n")
-    .replace(/<[^>]+>/g, "")
-    .replace(/\n{3,}/g, "\n\n")
-    .trim()
-}
-
-/**
- * Sanitize and render HTML content for conversation bubbles.
- * Only allows safe inline tags, strips dangerous elements.
- */
 const renderContent = (content: string) => {
-  if (!content) return "<span class='text-gray-400'>(空)</span>"
-  return content
-    .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
-    .replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi, "")
-    .replace(/<object[^>]*>[\s\S]*?<\/object>/gi, "")
-    .replace(/<embed[^>]*>/gi, "")
-    .replace(/<form[^>]*>[\s\S]*?<\/form>/gi, "")
-    .replace(/on\w+\s*=\s*["'][^"']*["']/gi, "")
-    .replace(/on\w+\s*=\s*[^\s>]*/gi, "")
-    .replace(/<p[^>]*>/gi, "<p style='margin:0 0 0.5em 0'>")
-    .replace(/<a /gi, "<a target='_blank' rel='noopener noreferrer' ")
+  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()
-})
-
+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-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.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; }
 
-/* ===== Batch Operation Buttons ===== */
-.batch-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px 12px;
-  font-size: 12px;
-  font-weight: 500;
-  border-radius: 6px;
-  border: none;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  line-height: 1.5;
-}
-.batch-btn--approve {
-  background-color: #16a34a;
-  color: #fff;
-}
-.batch-btn--approve:hover {
-  background-color: #15803d;
-}
-.batch-btn--reject {
-  background-color: #f97316;
-  color: #fff;
-}
-.batch-btn--reject:hover {
-  background-color: #ea580c;
-}
-.batch-btn--delete {
-  background-color: #dc2626;
-  color: #fff;
-}
-.batch-btn--delete:hover {
-  background-color: #b91c1c;
-}
-.batch-btn--cancel {
-  background: none;
-  color: #6b7280;
-  margin-left: auto;
-}
-.batch-btn--cancel:hover {
-  color: #374151;
-  background: #f3f4f6;
-}
+/* 响应式工具栏 */
+.toolbar { display: flex; flex-direction: column; gap: 12px; margin: 16px; align-items: stretch; }
+@media (min-width: 768px) { .toolbar { flex-direction: row; 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; }
+.batch-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
+@media (min-width: 768px) { .batch-actions { width: auto; margin-left: auto; } }
+.btn-batch { padding: 6px 12px; border-radius: 6px; border: none; font-size: 12px; cursor: pointer; color: #fff; white-space: nowrap; }
+.btn-pass { background: #16a34a; } .btn-reject { background: #f97316; } .btn-delete { background: #dc2626; }
+.btn-cancel { background: transparent; color: #6b7280; border: 1px solid #d1d5db; }
+.filter-select, .filter-input { width: 100%; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px; outline: none; }
+@media (min-width: 768px) { .filter-select { width: auto; min-width: 120px; } .filter-input { flex: 1; } }
+.btn-reset { padding: 8px 16px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; cursor: pointer; white-space: nowrap; width: 100%; }
+@media (min-width: 768px) { .btn-reset { width: auto; } }
 
-/* ===== Filter Bar ===== */
-.filter-select {
-  padding: 6px 32px 6px 12px;
-  font-size: 13px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #f9fafb;
-  color: #374151;
-  outline: none;
-  cursor: pointer;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  background-size: 16px;
-  transition: all 0.15s ease;
-}
-.filter-select:focus {
-  border-color: #3b82f6;
-  background-color: #fff;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-.filter-search-icon {
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  color: #9ca3af;
-  pointer-events: none;
-}
-.filter-input {
-  width: 100%;
-  padding: 6px 12px 6px 34px;
-  font-size: 13px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #f9fafb;
-  color: #374151;
-  outline: none;
-  transition: all 0.15s ease;
-}
-.filter-input:focus {
-  border-color: #3b82f6;
-  background-color: #fff;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-.filter-input::placeholder {
-  color: #9ca3af;
-}
-.filter-reset-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  font-size: 13px;
-  color: #6b7280;
-  background: #f3f4f6;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.filter-reset-btn:hover {
-  color: #374151;
-  background: #e5e7eb;
-}
+/* 列表区 */
+.list-area { margin: 16px; }
+.empty-state { text-align: center; padding: 60px 0; color: #9ca3af; font-size: 14px; }
+.reply-list { display: flex; flex-direction: column; gap: 16px; }
+.select-all-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7280; padding: 0 4px; }
+.reply-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
+.card-main { display: flex; gap: 12px; padding: 16px; align-items: flex-start; }
+.card-main input { margin-top: 4px; }
+.card-content { flex: 1; min-width: 0; }
+.card-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
+@media (min-width: 640px) { .card-header { flex-direction: row; justify-content: space-between; align-items: center; } }
+.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; flex-direction: column; gap: 12px; padding: 12px 16px; background: #f9fafb; border-top: 1px solid #f3f4f6; }
+@media (min-width: 640px) { .card-footer { flex-direction: row; justify-content: space-between; align-items: center; } }
+.footer-info { font-size: 12px; color: #6b7280; display: flex; flex-wrap: wrap; gap: 12px; }
+.post-link { color: #3b82f6; text-decoration: none; } .post-link:hover { text-decoration: underline; }
+.retry-text { color: #f59e0b; }
+.footer-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; justify-content: flex-end; }
+@media (min-width: 640px) { .footer-actions { width: auto; } }
+.action-btn { padding: 4px 10px; border-radius: 4px; font-size: 12px; border: none; cursor: pointer; white-space: nowrap; }
+.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; }
 
-/* ===== Status Tags ===== */
-.status-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1.5;
-}
-.status-tag--pass {
-  background: #dcfce7;
-  color: #166534;
-}
-.status-tag--fail {
-  background: #fee2e2;
-  color: #991b1b;
-}
-.status-tag--pending {
-  background: #f3f4f6;
-  color: #374151;
-}
-.status-tag--rejected {
-  background: #fee2e2;
-  color: #991b1b;
-}
-.status-tag--published {
-  background: #dbeafe;
-  color: #1e40af;
-}
-.status-tag--unpublished {
-  background: #f3f4f6;
-  color: #9ca3af;
-}
-.status-tag--conversation {
-  background: #ede9fe;
-  color: #5b21b6;
-}
+/* 标签体系 */
+.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; }
 
-/* Sentiment tags */
-.status-tag--very-positive {
-  background: #dcfce7;
-  color: #166534;
-}
-.status-tag--positive {
-  background: #bbf7d0;
-  color: #15803d;
-}
-.status-tag--neutral-sentiment {
-  background: #f3f4f6;
-  color: #4b5563;
-}
-.status-tag--negative {
-  background: #fecaca;
-  color: #b91c1c;
-}
-.status-tag--very-negative {
-  background: #fee2e2;
-  color: #991b1b;
-}
+/* 对话弹窗与响应式气泡 */
+.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); padding: 16px; box-sizing: border-box; }
+.dialog-box { width: 100%; max-width: 600px; background: #fff; border-radius: 16px; display: flex; flex-direction: column; max-height: 90vh; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
+.dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #f3f4f6; }
+.dialog-header h3 { margin: 0; font-size: 16px; font-weight: bold; }
+.close-btn { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 0; display: flex; align-items: center; justify-content: center; }
+.close-btn:hover { color: #4b5563; }
+.dialog-body { padding: 20px; overflow-y: auto; background: #f8fafc; flex: 1; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
 
-/* ===== Score Label ===== */
-.score-label {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
-  margin-left: 4px;
-}
-.score-label--excellent {
-  background: #dcfce7;
-  color: #166534;
-}
-.score-label--good {
-  background: #dbeafe;
-  color: #1e40af;
-}
-.score-label--average {
-  background: #fef3c7;
-  color: #92400e;
-}
-.score-label--poor {
-  background: #fee2e2;
-  color: #991b1b;
-}
+.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: 90%; display: flex; flex-direction: column; }
+@media (min-width: 640px) { .chat-message { max-width: 75%; } }
+.chat-owner { font-size: 12px; margin-bottom: 6px; font-weight: bold; }
+.row-ai .chat-owner { color: #2563eb; text-align: left; margin-left: 4px; }
+.row-user .chat-owner { color: #6b7280; text-align: right; margin-right: 4px; }
+.chat-time { font-size: 11px; color: #9ca3af; margin-top: 6px; }
+.row-ai .chat-time { text-align: left; margin-left: 4px; }
+.row-user .chat-time { text-align: right; margin-right: 4px; }
 
-/* ===== Mobile Responsive ===== */
-@media (max-width: 768px) {
-  .comment-ai-autopilot-logs :deep(.page-header) {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
+/* 气泡样式 */
+.chat-bubble { padding: 10px 14px; 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 #e2e8f0; border-top-left-radius: 2px; }
+.bubble-user { background: #2563eb; color: #ffffff; border-top-right-radius: 2px; }
 
-  /* Batch toolbar: wrap buttons */
-  .comment-ai-autopilot-logs .m-4.mb-0.flex {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-  .batch-btn--cancel {
-    margin-left: 0;
-  }
+/* 全新精美引用框 (无左黑条，微信风格) */
+.quote-box { margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; display: block; width: 100%; box-sizing: border-box; }
+.bubble-ai .quote-box { background: rgba(0,0,0,0.04); color: #6b7280; }
+.bubble-user .quote-box { background: rgba(255,255,255,0.15); color: #d1d5db; }
+.quote-header { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
+.quote-icon { width: 12px; height: 12px; opacity: 0.7; }
+.quote-owner { font-weight: 600; font-size: 11px; }
+.bubble-ai .quote-owner { color: #374151; }
+.bubble-user .quote-owner { color: #ffffff; }
+.quote-content { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
 
-  /* Filter bar: stack vertically */
-  .comment-ai-autopilot-logs .m-4.mb-0.flex.items-center.gap-3:not(.bg-blue-50) {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-  .filter-select {
-    flex: 1;
-    min-width: 120px;
-  }
-  .relative.flex-1.max-w-xs {
-    max-width: 100%;
-    flex: 1 1 100%;
-    order: 10;
-  }
-  .filter-reset-btn {
-    flex-shrink: 0;
-  }
-
-  /* Card footer: stack meta and actions */
-  .comment-ai-autopilot-logs .px-4.py-2\.5.bg-gray-50 {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-  .comment-ai-autopilot-logs .px-4.py-2\.5.bg-gray-50 .flex.items-center.gap-4 {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-  .comment-ai-autopilot-logs .px-4.py-2\.5.bg-gray-50 .flex.items-center.gap-2 {
-    align-self: flex-end;
-  }
-
-  /* Status tags row: allow wrapping */
-  .comment-ai-autopilot-logs .flex.items-center.justify-between.mb-3 {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-  }
-
-  /* Pagination */
-  .comment-ai-autopilot-logs .flex.items-center.justify-between.mt-4 {
-    flex-direction: column;
-    gap: 8px;
-    align-items: center;
-  }
-
-  /* Conversation dialog */
-  .comment-ai-autopilot-logs .relative.bg-white {
-    max-width: calc(100vw - 32px);
-    margin: 16px;
-    max-height: 90vh;
-  }
-}
+.pagination { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 20px; font-size: 14px; color: #6b7280; }
+@media (min-width: 640px) { .pagination { flex-direction: row; justify-content: space-between; } }
+.pagination-btns { display: flex; gap: 8px; }
 </style>
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index 3f7e84e..77ac4f2 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -1,151 +1,76 @@
 <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>
+        <div class="header-actions">
+          <VButton size="sm" @click="exportConfig">导出</VButton>
+          <label class="btn-import">导入<input type="file" accept=".json" class="hidden" @change="handleImportFile" /></label>
           <VButton size="sm" @click="$router.push({ name: 'CommentAiAutopilot' })">返回概览</VButton>
-        </VSpace>
+        </div>
       </template>
     </VPageHeader>
 
-    <div class="m-4">
+    <div class="settings-main">
       <VLoading v-if="loading" />
 
-      <div v-if="!loading">
-        <!-- Tab Navigation (full width, above the grid) -->
-        <div class="settings-tabs">
-          <button
-            v-for="tab in tabItems"
-            :key="tab.value"
-            class="settings-tab"
-            :class="{ 'settings-tab--active': activeTab === tab.value }"
-            @click="activeTab = tab.value"
-          >
-            {{ tab.label }}
-          </button>
-        </div>
+      <div v-else class="settings-layout">
+        <!-- 左侧主体 -->
+        <div class="settings-content">
+          <!-- 标签导航 (移动端横向滚动) -->
+          <div class="tabs-wrap">
+            <button v-for="tab in tabItems" :key="tab.value" 
+              class="tab-btn" :class="{ 'active': activeTab === tab.value }"
+              @click="activeTab = tab.value">
+              {{ tab.label }}
+            </button>
+          </div>
 
-        <!-- Settings Grid: sections (left) + sidebar (right) -->
-        <div class="settings-container">
-          <!-- Left: Settings Sections -->
-          <div class="settings-sections space-y-5">
-            <!-- ========== 基本设置 ========== -->
-            <section v-if="activeTab === 'basic'" class="settings-section">
-              <div class="section-header section-header--blue">
-                <div class="section-header__icon">
-                  <svg 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 class="section-header__text">
-                  <h3>基本设置</h3>
-                  <p>控制AI回复的基本行为</p>
-                </div>
+          <!-- 各个设置面板 -->
+          <!-- 1. 基本设置 -->
+          <div v-if="activeTab === 'basic'" class="setting-panel">
+            <div class="panel-header section-header--blue">
+              <div class="section-header__text"><h3>基本设置</h3><p>控制AI回复的基本行为</p></div>
+            </div>
+            <div class="panel-body">
+              <div class="form-row">
+                <div class="form-row__label"><span class="form-label">自动回复</span><span class="form-hint">启用后，AI将自动回复新评论</span></div>
+                <label class="toggle"><input type="checkbox" v-model="settings.basic.autoReply" /><span class="toggle__track"><span class="toggle__thumb"></span></span></label>
               </div>
-              <div class="section-body">
-                <!-- Switch Row: 自动回复 -->
-                <div class="form-row">
-                  <div class="form-row__label">
-                    <span class="form-label">自动回复</span>
-                    <span class="form-hint">启用后，AI将自动回复新评论</span>
-                  </div>
-                  <label class="toggle">
-                    <input type="checkbox" v-model="settings.basic.autoReply" />
-                    <span class="toggle__track"><span class="toggle__thumb"></span></span>
-                  </label>
-                </div>
-                <!-- Switch Row: 自动发布 -->
-                <div class="form-row">
-                  <div class="form-row__label">
-                    <span class="form-label">自动发布</span>
-                    <span class="form-hint">关闭后AI回复将存为草稿，需手动审核发布</span>
-                  </div>
-                  <label class="toggle">
-                    <input type="checkbox" v-model="settings.basic.autoPublish" />
-                    <span class="toggle__track"><span class="toggle__thumb"></span></span>
-                  </label>
-                </div>
-                <!-- Slider: 最大对话轮次 -->
-                <div class="form-field">
-                  <div class="form-field__header">
-                    <span class="form-label">最大对话轮次</span>
-                    <span class="form-badge">{{ settings.basic.maxConversationRounds }}</span>
-                  </div>
-                  <span class="form-hint">同一评论线程中AI最多自动回复的轮次</span>
-                  <div class="slider">
-                    <input type="range" v-model.number="settings.basic.maxConversationRounds" min="1" max="100" class="slider__input" />
-                    <div class="slider__marks">
-                      <span>1</span><span>50</span><span>100</span>
-                    </div>
-                  </div>
-                </div>
-                <!-- Input: 速率限制 -->
-                <div class="form-field">
-                  <label class="form-label">速率限制</label>
-                  <span class="form-hint">每分钟最大AI回复数量</span>
-                  <input type="number" v-model.number="settings.basic.rateLimitPerMinute" min="1" max="100" class="form-input" placeholder="10" />
-                </div>
-                <!-- Slider: 最大重试次数 -->
-                <div class="form-field">
-                  <div class="form-field__header">
-                    <span class="form-label">最大重试次数</span>
-                    <span class="form-badge">{{ settings.basic.maxRetryCount }}</span>
-                  </div>
-                  <span class="form-hint">AI生成失败时的最大重试次数，采用指数退避策略</span>
-                  <div class="slider">
-                    <input type="range" v-model.number="settings.basic.maxRetryCount" min="1" max="10" class="slider__input" />
-                    <div class="slider__marks">
-                      <span>1</span><span>5</span><span>10</span>
-                    </div>
-                  </div>
-                </div>
-                <!-- Textarea: 评论者黑名单 -->
-                <div class="form-field">
-                  <div class="form-field__header">
-                    <span class="form-label">评论者黑名单</span>
-                    <button class="btn-link" @click="openCommenterDialog">
-                      <svg 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>
-                  <span class="form-hint">支持名称、邮箱和正则表达式。正则以 regex: 开头，如 regex:^spam.*</span>
-                  <textarea v-model="settings.basic.blockedCommenters" rows="2" class="form-textarea" placeholder="例如：张三, spam@example.com, 李四"></textarea>
-                </div>
+              <div class="form-row">
+                <div class="form-row__label"><span class="form-label">自动发布</span><span class="form-hint">关闭后需手动审核发布</span></div>
+                <label class="toggle"><input type="checkbox" v-model="settings.basic.autoPublish" /><span class="toggle__track"><span class="toggle__thumb"></span></span></label>
               </div>
-            </section>
+              <div class="form-field">
+                <div class="form-field__header"><span class="form-label">最大对话轮次</span><span class="form-badge">{{ settings.basic.maxConversationRounds }}</span></div>
+                <input type="range" v-model.number="settings.basic.maxConversationRounds" min="1" max="100" class="slider__input" />
+              </div>
+              <div class="form-field">
+                <label class="form-label">速率限制</label>
+                <input type="number" v-model.number="settings.basic.rateLimitPerMinute" class="form-input" placeholder="10" />
+              </div>
+              <div class="form-field">
+                <div class="form-field__header"><span class="form-label">最大重试次数</span><span class="form-badge">{{ settings.basic.maxRetryCount }}</span></div>
+                <input type="range" v-model.number="settings.basic.maxRetryCount" min="1" max="10" class="slider__input" />
+              </div>
+              <div class="form-field">
+                <div class="form-field__header"><span class="form-label">评论者黑名单</span><button class="btn-link" @click="openCommenterDialog">添加评论者</button></div>
+                <textarea v-model="settings.basic.blockedCommenters" rows="2" class="form-textarea" placeholder="例如：张三, spam@example.com"></textarea>
+              </div>
+            </div>
+          </div>
 
-            <!-- ========== AI角色设置 ========== -->
-            <section v-if="activeTab === 'persona'" class="settings-section">
-              <div class="section-header section-header--purple">
-                <div class="section-header__icon">
-                  <svg 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 class="section-header__text">
-                  <h3>AI角色设置</h3>
-                  <p>定义AI虚拟评论者的身份和风格</p>
-                </div>
-              </div>
-              <div class="section-body">
-                <!-- Persona List -->
-                <VLoading v-if="personasLoading" />
-                <div v-else-if="personas.length === 0" class="persona-empty">
-                  <svg 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>请添加至少一个AI角色</span>
-                </div>
-                <div v-else class="persona-list">
-                  <div v-for="p in personas" :key="p.metadata.name" class="persona-card">
+          <!-- 2. AI角色设置 -->
+          <div v-if="activeTab === 'persona'" class="setting-panel">
+            <div class="panel-header section-header--purple">
+              <div class="section-header__text"><h3>AI角色设置</h3><p>定义AI虚拟评论者的身份和风格</p></div>
+            </div>
+            <div class="panel-body">
+              <VLoading v-if="personasLoading" />
+              <div v-else-if="personas.length === 0" class="persona-empty"><span>请添加至少一个AI角色</span></div>
+              <div v-else class="persona-list">
+                <div v-for="p in personas" :key="p.metadata.name" class="persona-card">
+                  <div class="persona-card__main">
                     <div class="persona-card__avatar">
                       <img v-if="getPersonaAvatar(p)" :src="getPersonaAvatar(p)" alt="头像" />
                       <span v-else class="persona-card__avatar-fallback">{{ (p.spec.displayName || '?').charAt(0) }}</span>
@@ -153,323 +78,152 @@
                     <div class="persona-card__info">
                       <div class="persona-card__name">
                         {{ p.spec.displayName || '未命名' }}
-                        <span v-if="p.spec.gender === 'female'" class="persona-card__badge persona-card__badge--female">女</span>
-                        <span v-else-if="p.spec.gender === 'male'" class="persona-card__badge persona-card__badge--male">男</span>
-                        <span v-if="p.spec.neutralVoice" class="persona-card__badge persona-card__badge--neutral-voice">中性语气</span>
-                        <span v-if="p.spec.wakeWord" class="persona-card__badge persona-card__badge--wake-word">唤醒: {{ p.spec.wakeWord }}</span>
-                        <span v-if="p.spec.isDefault" class="persona-card__badge">默认</span>
+                        <span class="persona-card__badge" :class="'badge-' + p.spec.gender">{{ p.spec.gender === 'female' ? '女' : '男' }}</span>
+                        <span v-if="p.spec.neutralVoice" class="persona-card__badge">中性语气</span>
+                        <span v-if="p.spec.wakeWord" class="persona-card__badge badge-wake">唤醒: {{ p.spec.wakeWord }}</span>
+                        <span v-if="p.spec.isDefault" class="persona-card__badge badge-default">默认</span>
                       </div>
                       <div class="persona-card__prompt">{{ p.spec.prompt || '暂无提示词' }}</div>
                     </div>
-                    <div class="persona-card__actions">
-                      <button class="btn-icon" title="编辑" @click="openPersonaDialog(p)">
-                        <svg 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="btn-icon btn-icon--danger" title="删除" @click="deletePersona(p)">
-                        <svg 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="btn-icon" title="设为默认" @click="setDefaultPersona(p)">
-                        <svg 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 style="width:16px;height:16px" 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>
-
-            <!-- ========== 模型设置 ========== -->
-            <section v-if="activeTab === 'model'" class="settings-section">
-              <div class="section-header section-header--green">
-                <div class="section-header__icon">
-                  <svg 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 class="section-header__text">
-                  <h3>模型设置</h3>
-                  <p>配置AI Foundation提供的模型</p>
+                  <div class="persona-card__actions">
+                    <button class="btn-action btn-edit" @click="openPersonaDialog(p)">编辑</button>
+                    <button v-if="!p.spec?.isDefault" class="btn-action btn-del" @click="deletePersona(p)">删除</button>
+                    <button v-if="!p.spec?.isDefault" class="btn-action btn-def" @click="setDefaultPersona(p)">设为默认</button>
+                  </div>
                 </div>
               </div>
-              <div class="section-body">
-                <div class="form-field">
-                  <label class="form-label">AI模型名称</label>
-                  <span class="form-hint">留空使用AI Foundation默认模型，填写AiModel资源名称可指定模型</span>
-                  <input type="text" v-model="settings.model.modelName" class="form-input" placeholder="留空使用默认模型" />
-                </div>
-              </div>
-            </section>
-
-            <!-- ========== Prompt设置 ========== -->
-            <section v-if="activeTab === 'prompt'" class="settings-section">
-              <div class="section-header section-header--amber">
-                <div class="section-header__icon">
-                  <svg 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 class="section-header__text">
-                  <h3>Prompt设置</h3>
-                  <p>自定义AI回复的提示词模板</p>
-                </div>
-              </div>
-              <div class="section-body">
-                <!-- Preset Selection -->
-                <div class="form-field">
-                  <label class="form-label">Prompt预设</label>
-                  <span class="form-hint">选择预设风格，可多选</span>
-                  <div class="preset-grid">
-                    <label v-for="p in promptPresets" :key="p.key" class="preset-item" :class="{ 'preset-item--active': isPresetEnabled(p.key) }">
-                      <input type="checkbox" :checked="isPresetEnabled(p.key)" @change="togglePreset(p.key)" class="preset-checkbox" />
-                      <div class="preset-item__content">
-                        <span class="preset-item__label">{{ p.label }}</span>
-                        <span class="preset-item__desc">{{ p.desc }}</span>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div class="form-field">
-                  <div class="form-field__header">
-                    <label class="form-label">自定义Prompt模板</label>
-                    <span class="form-hint--inline">留空使用默认模板</span>
-                  </div>
-                  <div class="var-tags">
-                    <span v-for="v in promptVariables" :key="v.name" class="var-tag">
-                      <code>{{ v.name }}</code> {{ v.desc }}
-                    </span>
-                  </div>
-                  <textarea v-model="settings.prompt.customPromptTemplate" rows="10" class="form-textarea form-textarea--mono" placeholder="自定义Prompt模板"></textarea>
-                </div>
-              </div>
-            </section>
-
-            <!-- ========== 数据清理 ========== -->
-            <section v-if="activeTab === 'cleanup'" class="settings-section">
-              <div class="section-header section-header--red">
-                <div class="section-header__icon">
-                  <svg 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 class="section-header__text">
-                  <h3>数据清理</h3>
-                  <p>自动清理过期的AI回复记录</p>
-                </div>
-              </div>
-              <div class="section-body">
-                <!-- Switch: 启用自动清理 -->
-                <div class="form-row">
-                  <div class="form-row__label">
-                    <span class="form-label">启用自动清理</span>
-                    <span class="form-hint">每天自动清理超过保留天数的记录</span>
-                  </div>
-                  <label class="toggle">
-                    <input type="checkbox" v-model="settings.cleanup.cleanupEnabled" />
-                    <span class="toggle__track"><span class="toggle__thumb"></span></span>
-                  </label>
-                </div>
-                <!-- Slider: 保留天数 -->
-                <div class="form-field">
-                  <div class="form-field__header">
-                    <span class="form-label">保留天数</span>
-                    <span class="form-badge">{{ settings.cleanup.retentionDays }} 天</span>
-                  </div>
-                  <span class="form-hint">超过此天数的AI回复记录将被自动清理</span>
-                  <div class="slider">
-                    <input type="range" v-model.number="settings.cleanup.retentionDays" min="1" max="365" class="slider__input" />
-                    <div class="slider__marks">
-                      <span>1天</span><span>180天</span><span>365天</span>
-                    </div>
-                  </div>
-                </div>
-                <!-- Manual Cleanup -->
-                <div class="form-row form-row--bordered">
-                  <div class="form-row__label">
-                    <span class="form-label">手动清理</span>
-                    <span class="form-hint">立即执行一次清理操作</span>
-                  </div>
-                  <div class="form-row__action">
-                    <VButton size="sm" type="secondary" @click="performCleanup" :disabled="cleanupLoading">
-                      {{ cleanupLoading ? '清理中...' : '立即清理' }}
-                    </VButton>
-                  </div>
-                </div>
-                <div v-if="cleanupResult !== null" class="cleanup-result">
-                  <svg 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>
+              <button class="btn-add-persona" @click="openPersonaDialog(null)">+ 添加角色</button>
+            </div>
           </div>
 
-          <!-- Right: Sticky Save Bar -->
-          <div class="settings-sidebar">
-            <div class="settings-sidebar__inner">
-              <div class="sidebar-card sidebar-card--primary">
-                <div class="sidebar-card__header">
-                  <h4 class="sidebar-card__title">操作</h4>
-                  <span v-if="hasUnsavedChanges" class="sidebar-card__badge">未保存</span>
-                </div>
-                <div class="sidebar-card__actions">
-                  <VButton block type="primary" @click="saveSettings" :disabled="saving">
-                    <template v-if="!saving">
-                      <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="M5 13l4 4L19 7"/></svg>
-                    </template>
-                    {{ saving ? '保存中...' : '保存设置' }}
-                  </VButton>
-                  <VButton block @click="fetchSettings" :disabled="saving">
-                    <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 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="sidebar-card">
-                <h4 class="sidebar-card__title">可用模板变量</h4>
-                <div class="sidebar-card__vars">
-                  <div v-for="v in promptVariables" :key="v.name" class="sidebar-var">
-                    <code>{{ v.name }}</code>
-                    <span>{{ v.desc }}</span>
-                  </div>
-                </div>
+          <!-- 3. 模型设置 -->
+          <div v-if="activeTab === 'model'" class="setting-panel">
+            <div class="panel-header section-header--green">
+              <div class="section-header__text"><h3>模型设置</h3><p>配置AI Foundation提供的模型</p></div>
+            </div>
+            <div class="panel-body">
+              <div class="form-field">
+                <label class="form-label">AI模型名称</label>
+                <input type="text" v-model="settings.model.modelName" class="form-input" placeholder="留空使用默认模型" />
               </div>
             </div>
           </div>
+
+          <!-- 4. Prompt设置 -->
+          <div v-if="activeTab === 'prompt'" class="setting-panel">
+            <div class="panel-header section-header--amber">
+              <div class="section-header__text"><h3>Prompt设置</h3><p>自定义AI回复的提示词模板</p></div>
+            </div>
+            <div class="panel-body">
+              <div class="form-field">
+                <label class="form-label">Prompt预设</label>
+                <div class="preset-grid">
+                  <label v-for="p in promptPresets" :key="p.key" class="preset-item" :class="{ 'preset-item--active': isPresetEnabled(p.key) }">
+                    <input type="checkbox" :checked="isPresetEnabled(p.key)" @change="togglePreset(p.key)" class="preset-checkbox" />
+                    <div class="preset-item__content"><span class="preset-item__label">{{ p.label }}</span><span class="preset-item__desc">{{ p.desc }}</span></div>
+                  </label>
+                </div>
+              </div>
+              <div class="form-field">
+                <label class="form-label">自定义Prompt模板</label>
+                <textarea v-model="settings.prompt.customPromptTemplate" rows="10" class="form-textarea form-textarea--mono" placeholder="自定义Prompt模板"></textarea>
+              </div>
+            </div>
+          </div>
+
+          <!-- 5. 数据清理 -->
+          <div v-if="activeTab === 'cleanup'" class="setting-panel">
+            <div class="panel-header section-header--red">
+              <div class="section-header__text"><h3>数据清理</h3><p>自动清理过期的AI回复记录</p></div>
+            </div>
+            <div class="panel-body">
+              <div class="form-row">
+                <div class="form-row__label"><span class="form-label">启用自动清理</span><span class="form-hint">每天自动清理</span></div>
+                <label class="toggle"><input type="checkbox" v-model="settings.cleanup.cleanupEnabled" /><span class="toggle__track"><span class="toggle__thumb"></span></span></label>
+              </div>
+              <div class="form-field">
+                <div class="form-field__header"><span class="form-label">保留天数</span><span class="form-badge">{{ settings.cleanup.retentionDays }} 天</span></div>
+                <input type="range" v-model.number="settings.cleanup.retentionDays" min="1" max="365" class="slider__input" />
+              </div>
+              <div class="form-row form-row--bordered">
+                <span class="form-label">手动清理</span>
+                <VButton size="sm" type="secondary" @click="performCleanup" :disabled="cleanupLoading">{{ cleanupLoading ? '清理中...' : '立即清理' }}</VButton>
+              </div>
+              <div v-if="cleanupResult !== null" class="cleanup-result">清理完成，共删除 {{ cleanupResult }} 条记录</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 class="info-title">可用变量</h4>
+            <div class="sidebar-var" v-for="v in promptVariables" :key="v.name"><code>{{ v.name }}</code><span>{{ v.desc }}</span></div>
+          </div>
         </div>
       </div>
     </div>
 
-    <!-- Commenter Selection Dialog -->
+    <!-- 弹窗：评论者黑名单 -->
     <div v-if="showCommenterDialog" class="dialog-overlay" @click.self="showCommenterDialog = false">
       <div class="dialog">
         <div class="dialog__header">
           <h3>选择评论者</h3>
-          <button class="dialog__close" @click="showCommenterDialog = false">
-            <svg 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>
+          <button class="dialog__close" @click="showCommenterDialog = false">×</button>
         </div>
-        <div class="dialog__search">
-          <svg class="dialog__search-icon" 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="dialog__search-input" placeholder="搜索评论者名称或邮箱..." />
-        </div>
-        <div class="dialog__body">
+        <div class="dialog__body p-4">
+          <input v-model="commenterSearch" type="text" class="form-input mb-3" placeholder="搜索名称或邮箱..." />
           <VLoading v-if="commenterLoading" />
-          <div v-else-if="filteredCommenters.length === 0" class="dialog__empty">
-            <svg 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>暂无评论者数据</span>
-          </div>
           <div v-else class="dialog__list">
             <button v-for="c in filteredCommenters" :key="c.displayName + c.email" class="dialog__item" @click="addCommenter(c)">
-              <div class="dialog__item-avatar">
-                <img v-if="c.avatarUrl" :src="c.avatarUrl" alt="" class="w-full h-full object-cover rounded-full" />
-                <span v-else>{{ c.displayName?.charAt(0) || '?' }}</span>
-              </div>
-              <div class="dialog__item-info">
-                <div class="dialog__item-name">{{ c.displayName }}</div>
-                <div v-if="c.email" class="dialog__item-email">{{ c.email }}</div>
-              </div>
-              <svg class="dialog__item-add" 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 class="dialog__item-avatar"><img v-if="c.avatarUrl" :src="c.avatarUrl" alt="" /><span v-else>{{ c.displayName?.charAt(0) || '?' }}</span></div>
+              <div class="dialog__item-info"><div class="dialog__item-name">{{ c.displayName }}</div><div class="dialog__item-email">{{ c.email }}</div></div>
             </button>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Persona Edit Dialog -->
+    <!-- 弹窗：AI角色编辑 -->
     <div v-if="showPersonaDialog" class="dialog-overlay" @click.self="showPersonaDialog = false">
-      <div class="dialog" style="max-width:520px">
+      <div class="dialog">
         <div class="dialog__header">
           <h3>{{ personaEditing ? '编辑角色' : '添加角色' }}</h3>
-          <button class="dialog__close" @click="showPersonaDialog = false">
-            <svg 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>
+          <button class="dialog__close" @click="showPersonaDialog = false">×</button>
         </div>
-        <div class="dialog__body" style="max-height:none;padding:20px 24px;display:flex;flex-direction:column;gap:16px">
-          <!-- Avatar Preview -->
+        <div class="dialog__body p-4">
           <div class="persona-dialog-preview">
-            <div class="persona-card__avatar">
-              <img v-if="personaDialogAvatar" :src="personaDialogAvatar" alt="Gravatar头像" />
-              <span v-else class="persona-card__avatar-fallback">{{ (personaForm.displayName || '?').charAt(0) }}</span>
-            </div>
-            <div style="font-size:13px;color:#6b7280">{{ personaDialogAvatar ? 'Gravatar头像预览' : '未设置邮箱，将使用默认头像' }}</div>
+            <div class="persona-card__avatar"><img v-if="personaDialogAvatar" :src="personaDialogAvatar" alt="" /><span v-else class="persona-card__avatar-fallback">{{ (personaForm.displayName || '?').charAt(0) }}</span></div>
+            <div class="preview-text">{{ personaDialogAvatar ? 'Gravatar预览' : '未设置邮箱' }}</div>
           </div>
-          <!-- Nickname -->
-          <div class="form-field">
-            <label class="form-label">昵称</label>
-            <input type="text" v-model="personaForm.displayName" class="form-input" placeholder="小回" />
+          <div class="form-field mt-3"><label class="form-label">昵称</label><input type="text" v-model="personaForm.displayName" class="form-input" /></div>
+          <div class="form-field mt-3"><label class="form-label">邮箱</label><input type="email" v-model="personaForm.email" class="form-input" /></div>
+          <div class="form-field mt-3">
+            <label class="form-label">性别</label>
+            <select v-model="personaForm.gender" class="form-input"><option value="female">女</option><option value="male">男</option></select>
           </div>
-          <!-- Email -->
-          <div class="form-field">
-            <label class="form-label">邮箱</label>
-            <span class="form-hint">用于Gravatar头像服务，留空使用默认头像</span>
-            <input type="email" v-model="personaForm.email" class="form-input" placeholder="ai@example.com" />
-          </div>
-          <!-- Gender & Neutral Voice -->
-          <div class="form-field">
-            <label class="form-label">性别与语气</label>
-            <div class="gender-voice-row">
-              <div class="gender-select">
-                <label class="gender-option" :class="{ 'gender-option--active': personaForm.gender === 'female' }">
-                  <input type="radio" v-model="personaForm.gender" value="female" class="gender-radio" />
-                  <span class="gender-option__label">女</span>
-                </label>
-                <label class="gender-option" :class="{ 'gender-option--active': personaForm.gender === 'male' }">
-                  <input type="radio" v-model="personaForm.gender" value="male" class="gender-radio" />
-                  <span class="gender-option__label">男</span>
-                </label>
-              </div>
-              <div class="voice-toggle">
-                <input type="checkbox" v-model="personaForm.neutralVoice" class="form-checkbox" id="neutralVoice" />
-                <label for="neutralVoice" class="text-sm text-gray-600 cursor-pointer">中性语气</label>
-              </div>
-            </div>
-            <span class="form-hint">勾选中性语气则使用中性语气，取消勾选则跟随性别语气</span>
-          </div>
-          <!-- Wake Word -->
-          <div class="form-field">
-            <label class="form-label">唤醒词</label>
-            <span class="form-hint">评论以此词开头则唤醒该角色回复，留空不启用。</span>
-            <input type="text" v-model="personaForm.wakeWord" class="form-input" placeholder="如：小回小回" />
-          </div>
-          <!-- Prompt -->
-          <div class="form-field">
-            <label class="form-label">人格提示词</label>
-            <span class="form-hint">定义AI角色的性格、语气和回复风格</span>
-            <textarea v-model="personaForm.prompt" rows="3" class="form-textarea" placeholder="例如：你是「小回」，一个友善的评论者。你的回复简洁自然，像朋友聊天一样。"></textarea>
-          </div>
-          <!-- Is Default -->
-          <div class="form-row">
-            <div class="form-row__label">
-              <span class="form-label">设为默认角色</span>
-              <span class="form-hint">默认角色将用于没有指定角色的场景</span>
-            </div>
-            <label class="toggle">
-              <input type="checkbox" v-model="personaForm.isDefault" />
-              <span class="toggle__track"><span class="toggle__thumb"></span></span>
-            </label>
-          </div>
-          <!-- Actions -->
-          <div style="display:flex;justify-content:flex-end;gap:8px;padding-top:4px">
+          <div class="form-row mt-3 px-0 bg-transparent border-0"><label class="form-label">中性语气</label><label class="toggle"><input type="checkbox" v-model="personaForm.neutralVoice" /><span class="toggle__track"><span class="toggle__thumb"></span></span></label></div>
+          <div class="form-field mt-3"><label class="form-label">唤醒词</label><input type="text" v-model="personaForm.wakeWord" class="form-input" /></div>
+          <div class="form-field mt-3"><label class="form-label">提示词</label><textarea v-model="personaForm.prompt" rows="3" class="form-textarea"></textarea></div>
+          <div class="form-row mt-3 px-0 bg-transparent border-0"><label class="form-label">设为默认</label><label class="toggle"><input type="checkbox" v-model="personaForm.isDefault" /><span class="toggle__track"><span class="toggle__thumb"></span></span></label></div>
+          <div class="dialog-footer mt-4">
             <VButton @click="showPersonaDialog = false">取消</VButton>
-            <VButton type="primary" @click="savePersona" :disabled="personaSaving">
-              {{ personaSaving ? '保存中...' : '保存' }}
-            </VButton>
+            <VButton type="primary" @click="savePersona" :disabled="personaSaving">{{ personaSaving ? '保存中...' : '保存' }}</VButton>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- 导入确认对话框 -->
+    <!-- 弹窗：导入配置确认 -->
     <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>
+      <p style="font-size:14px;color:#4b5563">导入将覆盖当前配置，此操作不可撤销。确定要继续吗？</p>
+      <template #footer><VSpace><VButton @click="showImportConfirm = false">取消</VButton><VButton type="primary" :loading="importLoading" @click="confirmImport">确认</VButton></VSpace></template>
     </VModal>
 
   </div>
@@ -490,13 +244,10 @@ const tabItems = [
 ]
 
 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: '{{persona_prompt}}', desc: '角色设定' },
   { name: '{{comment}}', desc: '评论内容' },
+  { name: '{{article}}', desc: '文章内容' },
+  { name: '{{conversation_history}}', desc: '对话历史' },
 ]
 
 const promptPresets = [
@@ -506,57 +257,6 @@ const promptPresets = [
   { 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 },
   model: { modelName: "" },
@@ -564,1067 +264,209 @@ const settings = reactive({
   cleanup: { cleanupEnabled: true, retentionDays: 30 },
 })
 
-// Track unsaved changes: snapshot of settings after last fetch/save
+const loading = ref(false)
+const saving = ref(false)
 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('导出配置失败')
-  }
+// Preset Logic
+const enabledPresetKeys = computed({
+  get: () => Array.isArray(settings.prompt.enabledPresets) ? settings.prompt.enabledPresets : [],
+  set: (keys: string[]) => { settings.prompt.enabledPresets = keys }
+})
+const togglePreset = (key: string) => {
+  const keys = [...enabledPresetKeys.value]; 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)
 
+// Import / Export
 const importLoading = ref(false)
 const showImportConfirm = ref(false)
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const importFileData = ref<any>(null)
+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.json`; a.click(); URL.revokeObjectURL(url); Toast.success('配置已导出') } catch(e) { Toast.error('导出配置失败') } }
+const handleImportFile = (event: Event) => { const input = event.target as HTMLInputElement; if (!input.files?.length) return; const reader = new FileReader(); reader.onload = (e) => { try { importFileData.value = JSON.parse(e.target?.result as string); showImportConfirm.value = true } catch { Toast.error('解析失败') } }; reader.readAsText(input.files[0]); input.value = '' }
+const confirmImport = async () => { importLoading.value = true; try { await axiosInstance.post(`${apiBase}/import`, importFileData.value); Toast.success('导入成功'); showImportConfirm.value = false; await fetchSettings(); await fetchPersonas(); await computePersonaAvatars() } catch(e) { Toast.error('导入失败') } finally { importLoading.value = false } }
 
-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)
-  // 重置 input 以允许重复选择同一文件
-  input.value = ''
-}
+// Commenters & Cleanup
+const showCommenterDialog = ref(false); const commenterList = ref<any[]>([]); const commenterSearch = ref(""); const commenterLoading = ref(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 openCommenterDialog = async () => { showCommenterDialog.value = true; commenterLoading.value = true; try { const { data } = await axiosInstance.get(`${apiBase}/commenters`); commenterList.value = data.items || data } catch(e) { commenterList.value = [] } finally { commenterLoading.value = false } }
+const addCommenter = (c: any) => { const v = c.email || c.displayName; const cur = settings.basic.blockedCommenters.split(",").map(s=>s.trim()).filter(Boolean); if(cur.includes(v)) return; cur.push(v); settings.basic.blockedCommenters = cur.join(","); Toast.success("已添加"); showCommenterDialog.value = false }
+const cleanupLoading = ref(false); const cleanupResult = ref<number | null>(null)
+const performCleanup = async () => { cleanupLoading.value=true; try { const { data } = await axiosInstance.post(`${apiBase}/cleanup`); cleanupResult.value = data.deletedCount ?? data ?? 0; Toast.success("清理完成") } catch(e){ Toast.error("清理失败") } finally { cleanupLoading.value=false } }
 
-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
-    // 刷新数据
-    await fetchPersonas()
-    await computePersonaAvatars()
-  } catch (e) {
-    console.error('Failed to import config', e)
-    Toast.error('导入配置失败')
-  } finally {
-    importLoading.value = false
-  }
-}
+// Persona
+const personasApiBase = `${apiBase}/personas`
+const personas = ref<any[]>([]); const personasLoading = ref(false); const showPersonaDialog = ref(false); const personaEditing = ref<any>(null); const personaSaving = ref(false); const personaDialogAvatar = ref('')
+const personaForm = reactive({ displayName: '', email: '', gender: 'female', neutralVoice: false, wakeWord: '', prompt: '', isDefault: false })
+const computeGravatarHash = async (e: string) => { const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(e.trim().toLowerCase())); return Array.from(new Uint8Array(buf)).map(b=>b.toString(16).padStart(2,'0')).join('') }
+const fetchPersonas = async () => { personasLoading.value=true; try { const { data } = await axiosInstance.get(personasApiBase); personas.value = (data.items || data).sort((a:any,b:any) => (a.spec?.isDefault ? -1 : 1)) } catch(e){} finally { personasLoading.value=false } }
+const computePersonaAvatars = async () => { for (const p of personas.value) { if(p.spec?.email) { try { p._avatarUrl = `https://cn.cravatar.com/avatar/${await computeGravatarHash(p.spec.email)}` } catch{} } else { p._avatarUrl = '' } } }
+const getPersonaAvatar = (p:any) => p._avatarUrl || ''
+const openPersonaDialog = async (p: any) => { personaEditing.value = p; if(p){ Object.assign(personaForm, p.spec) } else { Object.assign(personaForm, { displayName:'', email:'', gender:'female', neutralVoice:false, wakeWord:'', prompt:'', isDefault:false }) }; if(personaForm.email) personaDialogAvatar.value = `https://cn.cravatar.com/avatar/${await computeGravatarHash(personaForm.email)}`; else personaDialogAvatar.value = ''; showPersonaDialog.value = true }
+const savePersona = async () => { personaSaving.value=true; try { if(personaForm.isDefault) { for(const p of personas.value) { if(p.spec?.isDefault && p.metadata.name !== personaEditing.value?.metadata.name) { const {data:l} = await axiosInstance.get(`${personasApiBase}/${p.metadata.name}`); l.spec.isDefault=false; await axiosInstance.put(`${personasApiBase}/${p.metadata.name}`, l) } } } const payload = { spec: { ...personaForm }, apiVersion: 'comment-ai-autopilot.nxxy335.top/v1alpha1', kind: 'AiPersona', metadata: personaEditing.value ? { name: personaEditing.value.metadata.name } : { generateName: 'persona-' } }; if(personaEditing.value) { const {data:ex} = await axiosInstance.get(`${personasApiBase}/${personaEditing.value.metadata.name}`); await axiosInstance.put(`${personasApiBase}/${personaEditing.value.metadata.name}`, {...ex, spec: payload.spec}); Toast.success('已更新') } else { await axiosInstance.post(personasApiBase, payload); Toast.success('已添加') }; showPersonaDialog.value=false; await fetchPersonas(); await computePersonaAvatars() } catch(e){ Toast.error('保存失败') } finally { personaSaving.value=false } }
+const deletePersona = async (p:any) => { if(p.spec?.isDefault) return Toast.warning('默认不可删'); if(confirm('确认删除？')) { await axiosInstance.delete(`${personasApiBase}/${p.metadata.name}`); await fetchPersonas(); await computePersonaAvatars() } }
+const setDefaultPersona = async (p:any) => { for(const cp of personas.value){ if(cp.spec?.isDefault) { const {data:l} = await axiosInstance.get(`${personasApiBase}/${cp.metadata.name}`); l.spec.isDefault=false; await axiosInstance.put(`${personasApiBase}/${cp.metadata.name}`, l) } }; const {data:t} = await axiosInstance.get(`${personasApiBase}/${p.metadata.name}`); t.spec.isDefault=true; await axiosInstance.put(`${personasApiBase}/${p.metadata.name}`, t); await fetchPersonas() }
 
-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
-  }
-}
+let emailDebounce: any; watch(() => personaForm.email, v => { clearTimeout(emailDebounce); if(!v) personaDialogAvatar.value=''; else emailDebounce = setTimeout(async () => { personaDialogAvatar.value = `https://cn.cravatar.com/avatar/${await computeGravatarHash(v)}` }, 500) })
 
-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 parseCfg = (d:any, k:string) => { const v = d[k]; if(!v) return {}; if(typeof v === 'string') { try{ return JSON.parse(v) }catch{ return {} } } return v }
+const fetchSettings = async () => { loading.value=true; try { const { data } = await coreApiClient.configMap.getConfigMap({ name: configMapName }); if(data.data) { const d:any = data.data; const b = parseCfg(d,'basic'); const m = parseCfg(d,'model'); const p = parseCfg(d,'prompt'); const c = parseCfg(d,'cleanup'); if(b.autoReply !== undefined) Object.assign(settings.basic, b); if(m.modelName !== undefined) settings.model.modelName = m.modelName; if(p.customPromptTemplate !== undefined) { settings.prompt.customPromptTemplate = p.customPromptTemplate; settings.prompt.enabledPresets = Array.isArray(p.enabledPresets) ? p.enabledPresets : (p.enabledPresets||'').split(',').filter(Boolean) }; if(c.retentionDays !== undefined) Object.assign(settings.cleanup, c) } } catch(e){} finally { loading.value=false; lastSavedSnapshot.value = JSON.stringify(settings) } }
+const saveSettings = async () => { saving.value=true; try { const { data:l } = await coreApiClient.configMap.getConfigMap({ name: configMapName }); l.data = { ...l.data, basic: JSON.stringify(settings.basic), model: JSON.stringify(settings.model), prompt: JSON.stringify(settings.prompt), cleanup: JSON.stringify(settings.cleanup) }; await coreApiClient.configMap.updateConfigMap({ name: configMapName, configMap: l }); Toast.success("保存成功"); lastSavedSnapshot.value = JSON.stringify(settings) } catch(e){ Toast.error("保存失败") } finally { saving.value=false } }
 
-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 || [])
-    // 默认角色排到最上方
-    // 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
-  }
-  // 防止取消唯一默认角色的默认标记
-  if (!personaForm.isDefault && personaEditing.value?.spec?.isDefault) {
-    Toast.warning('必须保留至少一个默认角色，请先将其他角色设为默认')
-    return
-  }
-  personaSaving.value = true
-  try {
-    // 如果设为默认角色，先取消当前默认角色的标记
-    if (personaForm.isDefault) {
-      for (const p of personas.value) {
-        if (p.spec?.isDefault) {
-          // 编辑时跳过自身
-          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 {
-    // 先取消当前默认角色：获取最新数据后更新
-    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)
-      }
-    }
-    // 设置新默认角色：获取最新数据后更新
-    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 fetchSettings = async () => {
-  loading.value = true
-  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 }
-    }
-  } catch (e) {
-    console.error("Failed to fetch settings", e)
-    Toast.error("加载设置失败，请刷新页面重试")
-  }
-  finally {
-    loading.value = false
-    // Update snapshot after fetch to reset unsaved indicator
-    lastSavedSnapshot.value = JSON.stringify(settings)
-  }
-}
-
-const saveSettings = async () => {
-  saving.value = true
-  try {
-    const { data: latest } = await coreApiClient.configMap.getConfigMap({ name: configMapName })
-    const updated = { ...latest }
-    updated.data = {
-      ...updated.data,
-      basic: JSON.stringify(settings.basic),
-      model: JSON.stringify(settings.model),
-      prompt: JSON.stringify(settings.prompt),
-      cleanup: JSON.stringify(settings.cleanup),
-    }
-    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("保存设置失败") }
-  finally { saving.value = false }
-}
-
-onMounted(async () => {
-  await fetchSettings()
-  await fetchPersonas()
-  await computePersonaAvatars()
-})
+onMounted(async () => { await fetchSettings(); await fetchPersonas(); await computePersonaAvatars() })
 </script>
 
 <style scoped>
-/* ===== Layout ===== */
-.settings-tabs {
-  display: flex;
-  gap: 4px;
-  margin-bottom: 20px;
-  padding: 4px;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  overflow-x: auto;
-}
-.settings-tab {
-  flex: 1;
-  padding: 10px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #6b7280;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-  text-align: center;
-}
-.settings-tab:hover {
-  background: #f3f4f6;
-  color: #374151;
-}
-.settings-tab--active {
-  background: #3b82f6;
-  color: #fff;
-}
-.settings-tab--active:hover {
-  background: #2563eb;
-  color: #fff;
+/* 核心重置与基础布局 */
+.settings-container { padding-bottom: 30px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+.header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.btn-import { font-size: 13px; font-weight: 500; background: #fff; border: 1px solid #d1d5db; padding: 4px 10px; border-radius: 6px; cursor: pointer; color: #374151; white-space: nowrap; transition: 0.2s; display: inline-flex; align-items: center; }
+.btn-import:hover { background: #f9fafb; border-color: #9ca3af; }
+.settings-main { margin: 16px; }
+
+/* 响应式主网格 */
+.settings-layout { display: flex; flex-direction: column; gap: 24px; }
+@media (min-width: 1024px) {
+  .settings-main { margin: 24px; }
+  .settings-layout { flex-direction: row; align-items: flex-start; }
 }
 
-.settings-container {
-  display: grid;
-  grid-template-columns: 1fr 280px;
-  gap: 24px;
-  align-items: start;
-}
-@media (max-width: 1024px) {
-  .settings-container { grid-template-columns: 1fr; }
-}
+.settings-content { flex: 1; width: 100%; min-width: 0; }
+.settings-sidebar { width: 100%; display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }
+@media (min-width: 1024px) { .settings-sidebar { width: 300px; position: sticky; top: 24px; } }
 
-/* ===== Section ===== */
-.settings-section {
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  overflow: hidden;
-}
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  border-left: 4px solid transparent;
-}
-.section-header--blue  { border-left-color: #3b82f6; background: linear-gradient(90deg, #eff6ff 0%, #fff 100%); }
-.section-header--purple { border-left-color: #8b5cf6; background: linear-gradient(90deg, #f5f3ff 0%, #fff 100%); }
-.section-header--green  { border-left-color: #10b981; background: linear-gradient(90deg, #ecfdf5 0%, #fff 100%); }
-.section-header--amber  { border-left-color: #f59e0b; background: linear-gradient(90deg, #fffbeb 0%, #fff 100%); }
-.section-header--red    { border-left-color: #ef4444; background: linear-gradient(90deg, #fef2f2 0%, #fff 100%); }
+/* 导航 Tabs (支持横向滚动) */
+.tabs-wrap { display: flex; gap: 6px; background: #fff; padding: 6px; border-radius: 10px; border: 1px solid #e5e7eb; margin-bottom: 20px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+.tabs-wrap::-webkit-scrollbar { display: none; }
+.tab-btn { flex: 1; padding: 10px 16px; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: #6b7280; font-weight: 600; font-size: 14px; transition: 0.2s ease; }
+.tab-btn:hover { background: #f3f4f6; color: #374151; }
+.tab-btn.active { background: #2563eb; color: #fff; box-shadow: 0 2px 4px rgba(37,99,235,0.2); }
 
-.section-header__icon {
-  width: 36px; height: 36px;
-  border-radius: 10px;
-  display: flex; align-items: center; justify-content: center;
-  flex-shrink: 0;
-}
-.section-header--blue  .section-header__icon { background: #dbeafe; color: #2563eb; }
-.section-header--purple .section-header__icon { background: #ede9fe; color: #7c3aed; }
-.section-header--green  .section-header__icon { background: #d1fae5; color: #059669; }
-.section-header--amber  .section-header__icon { background: #fef3c7; color: #d97706; }
-.section-header--red    .section-header__icon { background: #fee2e2; color: #dc2626; }
-.section-header__icon svg { width: 18px; height: 18px; }
+/* 面板样式 */
+.setting-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); overflow: hidden; }
+.panel-header { padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
+.section-header--blue { border-top: 4px solid #3b82f6; background: linear-gradient(to right, #eff6ff, #fff); }
+.section-header--purple { border-top: 4px solid #8b5cf6; background: linear-gradient(to right, #f5f3ff, #fff); }
+.section-header--green { border-top: 4px solid #10b981; background: linear-gradient(to right, #ecfdf5, #fff); }
+.section-header--amber { border-top: 4px solid #f59e0b; background: linear-gradient(to right, #fffbeb, #fff); }
+.section-header--red { border-top: 4px solid #ef4444; background: linear-gradient(to right, #fef2f2, #fff); }
+.section-header__text h3 { margin: 0 0 4px; font-size: 16px; font-weight: bold; color: #111827; }
+.section-header__text p { margin: 0; font-size: 13px; color: #6b7280; }
+.panel-body { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
 
-.section-header__text h3 {
-  font-size: 15px; font-weight: 600; color: #111827; margin: 0; line-height: 1.3;
-}
-.section-header__text p {
-  font-size: 13px; color: #6b7280; margin: 2px 0 0; line-height: 1.4;
-}
+/* 表单行与控件 */
+.form-row { display: flex; justify-content: space-between; align-items: center; padding: 14px; background: #f8fafc; border-radius: 8px; flex-wrap: wrap; gap: 12px; border: 1px solid #f1f5f9; }
+.form-row--bordered { background: transparent; border: none; border-top: 1px solid #e5e7eb; border-radius: 0; padding: 16px 20px; margin: 0 -20px; }
+.form-field { display: flex; flex-direction: column; gap: 8px; }
+.form-field__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
+.form-label { font-size: 14px; font-weight: 600; color: #374151; }
+.form-hint { font-size: 13px; color: #6b7280; margin-top: 2px; display: block; }
+.form-badge { background: #eff6ff; color: #2563eb; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
 
-.section-body {
-  padding: 20px;
-  display: flex; flex-direction: column; gap: 20px;
-}
+.form-input, .form-textarea { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none; transition: 0.2s; background: #fff; box-sizing: border-box; }
+.form-input:focus, .form-textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
+.form-textarea--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.5; }
 
-/* ===== Form Row (Switch) ===== */
-.form-row {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 12px 16px;
-  background: #f9fafb;
-  border-radius: 10px;
-  border: 1px solid #f3f4f6;
-}
-.form-row--bordered {
-  border-top: 1px solid #e5e7eb;
-  border-radius: 0;
-  background: transparent;
-  margin: 0 -20px;
-  padding: 16px 20px;
-}
-.form-row__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.form-row__action { flex-shrink: 0; margin-left: 16px; }
-
-/* ===== Form Field ===== */
-.form-field {
-  display: flex; flex-direction: column; gap: 6px;
-}
-.form-field__header {
-  display: flex; align-items: center; justify-content: space-between; gap: 8px;
-}
-
-/* ===== Form Typography ===== */
-.form-label {
-  font-size: 14px; font-weight: 500; color: #1f2937; line-height: 1.4;
-}
-.form-hint {
-  font-size: 13px; color: #6b7280; line-height: 1.5;
-}
-.form-hint--inline {
-  font-size: 12px; color: #9ca3af;
-}
-.form-badge {
-  display: inline-flex; align-items: center; justify-content: center;
-  min-width: 32px; padding: 2px 8px;
-  background: #eff6ff; color: #2563eb;
-  border-radius: 6px; font-size: 13px; font-weight: 600;
-}
-
-/* ===== Form Inputs ===== */
-.form-input, .form-textarea {
-  width: 100%;
-  padding: 10px 14px;
-  font-size: 14px; line-height: 1.5;
-  color: #1f2937;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  outline: none;
-  transition: all 0.15s ease;
-}
-.form-input:focus, .form-textarea:focus {
-  background: #fff;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-.form-input::placeholder, .form-textarea::placeholder {
-  color: #9ca3af;
-}
-.form-textarea--mono {
-  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-/* ===== Toggle Switch ===== */
-.toggle {
-  position: relative; display: inline-block; cursor: pointer;
-  flex-shrink: 0;
-}
-.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
-.toggle__track {
-  display: block; width: 48px; height: 28px;
-  background: #d1d5db; border-radius: 14px;
-  transition: background 0.2s ease;
-  position: relative;
-}
-.toggle__thumb {
-  position: absolute; top: 3px; left: 3px;
-  width: 22px; height: 22px;
-  background: #fff; border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
-  transition: transform 0.2s ease;
-}
-.toggle input:checked + .toggle__track { background: #3b82f6; }
+/* 按钮与开关 */
+.toggle { position: relative; display: inline-block; cursor: pointer; width: 44px; height: 24px; flex-shrink: 0; }
+.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
+.toggle__track { position: absolute; inset: 0; background: #e5e7eb; border-radius: 12px; transition: 0.3s; }
+.toggle__thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
+.toggle input:checked + .toggle__track { background: #10b981; }
 .toggle input:checked + .toggle__track .toggle__thumb { transform: translateX(20px); }
 
-/* ===== Slider ===== */
-.slider { padding: 4px 0; }
-.slider__input {
-  width: 100%; height: 6px;
-  -webkit-appearance: none; appearance: none;
-  background: #e5e7eb; border-radius: 3px;
-  outline: none; cursor: pointer;
-}
-.slider__input::-webkit-slider-thumb {
-  -webkit-appearance: none; appearance: none;
-  width: 20px; height: 20px;
-  background: #3b82f6; border-radius: 50%;
-  border: 3px solid #fff;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-  cursor: pointer;
-}
-.slider__marks {
-  display: flex; justify-content: space-between;
-  font-size: 11px; color: #9ca3af;
-  margin-top: 4px; padding: 0 2px;
-}
+.slider__input { width: 100%; accent-color: #3b82f6; cursor: pointer; }
 
-/* ===== Variable Tags ===== */
-.var-tags {
-  display: flex; flex-wrap: wrap; gap: 6px;
-}
-.var-tag {
-  display: inline-flex; align-items: center; gap: 4px;
-  padding: 4px 10px;
-  background: #f3f4f6; border-radius: 6px;
-  font-size: 12px; color: #4b5563;
-}
-.var-tag code {
-  font-family: 'Menlo', 'Monaco', monospace;
-  font-size: 11px;
-  background: #e5e7eb; padding: 1px 4px; border-radius: 3px;
-  color: #7c3aed;
-}
+/* 链接及预设块 */
+.btn-link { background: none; border: none; color: #3b82f6; cursor: pointer; font-size: 13px; font-weight: 500; padding: 0; }
+.btn-link:hover { color: #2563eb; text-decoration: underline; }
 
-/* ===== Preset Grid ===== */
-.preset-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  margin-top: 4px;
-}
-.preset-item {
-  display: flex; align-items: flex-start; gap: 10px;
-  padding: 12px 14px;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.preset-item:hover {
-  border-color: #d1d5db;
-  background: #f3f4f6;
-}
-.preset-item--active {
-  border-color: #3b82f6;
-  background: #eff6ff;
-}
-.preset-checkbox {
-  width: 18px; height: 18px;
-  margin-top: 2px; flex-shrink: 0;
-  accent-color: #3b82f6;
-  cursor: pointer;
-}
-.preset-item__content {
-  display: flex; flex-direction: column; gap: 2px; min-width: 0;
-}
-.preset-item__label {
-  font-size: 14px; font-weight: 500; color: #1f2937;
-}
-.preset-item__desc {
-  font-size: 12px; color: #6b7280; line-height: 1.4;
-}
+.preset-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
+@media (min-width: 640px) { .preset-grid { grid-template-columns: 1fr 1fr; } }
+.preset-item { display: flex; gap: 10px; padding: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: 0.2s; }
+.preset-item:hover { border-color: #cbd5e1; }
+.preset-item--active { border-color: #3b82f6; background: #eff6ff; }
+.preset-checkbox { width: 16px; height: 16px; margin-top: 2px; accent-color: #3b82f6; flex-shrink: 0; cursor: pointer; }
+.preset-item__label { font-weight: 600; font-size: 14px; color: #1e293b; display: block; margin-bottom: 2px; }
+.preset-item__desc { font-size: 12px; color: #64748b; line-height: 1.4; }
 
-/* ===== Persona Preview ===== */
-.persona-preview {
-  display: flex; align-items: center; gap: 16px;
-  padding: 16px 20px;
-  background: linear-gradient(135deg, #faf5ff 0%, #f9fafb 100%);
-  border: 1px solid #ede9fe;
-  border-radius: 12px;
-}
-.persona-preview__avatar {
-  position: relative; width: 56px; height: 56px; flex-shrink: 0;
-}
-.persona-preview__avatar img {
-  width: 56px; height: 56px; border-radius: 50%;
-  object-fit: cover; border: 2px solid #e9d5ff;
-}
-.persona-preview__avatar-fallback {
-  width: 56px; height: 56px; border-radius: 50%;
-  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
-  display: flex; align-items: center; justify-content: center;
-  color: #fff; font-size: 20px; font-weight: 700;
-}
-.persona-preview__status {
-  position: absolute; bottom: 0; right: 0;
-  width: 14px; height: 14px;
-  background: #22c55e; border-radius: 50%;
-  border: 2.5px solid #fff;
-}
-.persona-preview__name {
-  font-size: 15px; font-weight: 600; color: #1f2937;
-}
-.persona-preview__role {
-  font-size: 13px; color: #6b7280; margin-top: 2px;
-}
+/* 角色卡片 (彻底修复排版，增加优雅感) */
+.persona-empty { padding: 40px 20px; text-align: center; color: #9ca3af; font-size: 14px; background: #f8fafc; border-radius: 8px; border: 1px dashed #cbd5e1; }
+.persona-list { display: flex; flex-direction: column; gap: 12px; }
+.persona-card { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.2s; }
+.persona-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 6px rgba(0,0,0,0.04); transform: translateY(-1px); }
+@media (min-width: 640px) { .persona-card { flex-direction: row; align-items: center; justify-content: space-between; } }
 
-/* ===== Persona List & Card ===== */
-.persona-empty {
-  padding: 32px 0; text-align: center; color: #9ca3af;
-  display: flex; flex-direction: column; align-items: center; gap: 8px;
-}
-.persona-empty svg { width: 32px; height: 32px; }
-.persona-empty span { font-size: 14px; }
+.persona-card__main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
+.persona-card__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #e5e7eb; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
+.persona-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
+.persona-card__avatar-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; font-weight: bold; font-size: 18px; }
 
-.persona-list {
-  display: flex; flex-direction: column; gap: 10px;
-}
+.persona-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.persona-card__name { font-size: 15px; font-weight: 700; color: #1e293b; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
+.persona-card__badge { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; background: #f1f5f9; color: #475569; }
+.badge-female { background: #fce7f3; color: #be185d; }
+.badge-male { background: #dbeafe; color: #1d4ed8; }
+.badge-wake { background: #fef3c7; color: #b45309; }
+.badge-default { background: #10b981; color: #fff; }
+.persona-card__prompt { font-size: 13px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
-.persona-card {
-  display: flex; align-items: center; gap: 14px;
-  padding: 14px 16px;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  transition: all 0.15s ease;
-}
-.persona-card:hover {
-  border-color: #d1d5db;
-  background: #f3f4f6;
-}
+.persona-card__actions { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
+@media (min-width: 640px) { .persona-card__actions { width: auto; flex-shrink: 0; flex-wrap: nowrap; } }
+.btn-action { padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; border: 1px solid transparent; background: #f1f5f9; color: #475569; transition: 0.2s; flex: 1; text-align: center; }
+@media (min-width: 640px) { .btn-action { flex: none; } }
+.btn-action:hover { background: #e2e8f0; color: #0f172a; }
+.btn-del { color: #ef4444; background: #fef2f2; border-color: #fee2e2; }
+.btn-del:hover { background: #fee2e2; color: #dc2626; }
+.btn-edit { background: #fff; border-color: #cbd5e1; }
+.btn-edit:hover { border-color: #94a3b8; background: #f8fafc; }
 
-.persona-card__avatar {
-  width: 44px; height: 44px; flex-shrink: 0;
-  position: relative;
-}
-.persona-card__avatar img {
-  width: 44px; height: 44px; border-radius: 50%;
-  object-fit: cover; border: 2px solid #e9d5ff;
-}
-.persona-card__avatar-fallback {
-  width: 44px; height: 44px; border-radius: 50%;
-  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
-  display: flex; align-items: center; justify-content: center;
-  color: #fff; font-size: 16px; font-weight: 700;
-}
+.btn-add-persona { width: 100%; padding: 12px; background: #f8fafc; color: #3b82f6; border: 1px dashed #cbd5e1; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; transition: 0.2s; margin-top: 10px; }
+.btn-add-persona:hover { background: #eff6ff; border-color: #93c5fd; }
 
-.persona-card__info {
-  flex: 1; min-width: 0;
-}
-.persona-card__name {
-  font-size: 14px; font-weight: 600; color: #1f2937;
-  display: flex; align-items: center; gap: 6px;
-}
-.persona-card__badge {
-  display: inline-flex; align-items: center;
-  padding: 1px 8px; font-size: 11px; font-weight: 500;
-  background: #dbeafe; color: #2563eb; border-radius: 4px;
-}
-.persona-card__badge--female {
-  background: #fce7f3; color: #be185d;
-}
-.persona-card__badge--male {
-  background: #dbeafe; color: #1d4ed8;
-}
-.persona-card__badge--neutral-voice {
-  background: #f3f4f6; color: #4b5563;
-}
-.persona-card__badge--wake-word {
-  background: #fef3c7; color: #b45309;
-}
-.persona-card__prompt {
-  font-size: 12px; color: #6b7280; margin-top: 2px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  max-width: 400px;
-}
+/* 侧边栏按钮区 */
+.sidebar-card { background: #fff; border: 1px solid #e5e7eb; padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
+.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.sidebar-header h4 { margin: 0; font-size: 15px; font-weight: bold; color: #1e293b; }
+.unsaved-badge { background: #fef08a; color: #854d0e; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
+.btn-save { width: 100%; padding: 12px; background: #2563eb; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; margin-bottom: 10px; font-size: 14px; transition: 0.2s; box-shadow: 0 2px 4px rgba(37,99,235,0.2); }
+.btn-save:hover:not(:disabled) { background: #1d4ed8; }
+.btn-save:disabled { opacity: 0.7; cursor: not-allowed; }
+.btn-reset { width: 100%; padding: 10px; background: #fff; color: #475569; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: 0.2s; }
+.btn-reset:hover:not(:disabled) { background: #f8fafc; color: #0f172a; }
+.info-title { font-size: 14px; font-weight: 600; margin: 0 0 12px 0; color: #334155; }
+.sidebar-var { margin-bottom: 10px; font-size: 13px; color: #64748b; display: flex; flex-direction: column; gap: 4px; }
+.sidebar-var code { background: #f1f5f9; color: #8b5cf6; padding: 2px 6px; border-radius: 4px; font-size: 12px; width: max-content; }
 
-.persona-card__actions {
-  display: flex; gap: 4px; flex-shrink: 0;
-}
+/* 弹窗通用 (手机端撑满，电脑端居中) */
+.dialog-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); padding: 16px; box-sizing: border-box; }
+.dialog { width: 100%; max-width: 480px; background: #fff; border-radius: 16px; display: flex; flex-direction: column; max-height: 90vh; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
+.dialog__header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #f1f5f9; }
+.dialog__header h3 { margin: 0; font-size: 16px; font-weight: bold; color: #1e293b; }
+.dialog__close { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 24px; line-height: 1; padding: 0 4px; border-radius: 4px; }
+.dialog__close:hover { color: #475569; background: #f1f5f9; }
+.dialog__body { overflow-y: auto; flex: 1; padding: 20px; }
+.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; }
 
-.btn-icon {
-  width: 32px; height: 32px; border-radius: 8px;
-  display: flex; align-items: center; justify-content: center;
-  background: none; border: 1px solid transparent;
-  cursor: pointer; color: #6b7280; transition: all 0.15s;
-}
-.btn-icon:hover {
-  background: #f3f4f6; border-color: #e5e7eb; color: #374151;
-}
-.btn-icon svg { width: 16px; height: 16px; }
-.btn-icon--danger:hover {
-  background: #fef2f2; border-color: #fecaca; color: #dc2626;
-}
+/* 弹窗内名单与预览 */
+.dialog__list { display: flex; flex-direction: column; gap: 4px; }
+.dialog__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: none; border: 1px solid transparent; cursor: pointer; border-radius: 8px; text-align: left; transition: 0.2s; width: 100%; }
+.dialog__item:hover { background: #f8fafc; border-color: #e2e8f0; }
+.dialog__item-avatar { width: 36px; height: 36px; border-radius: 50%; background: #94a3b8; color: #fff; display: flex; justify-content: center; align-items: center; font-weight: bold; overflow: hidden; flex-shrink: 0; }
+.dialog__item-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.dialog__item-info { flex: 1; min-width: 0; }
+.dialog__item-name { font-size: 14px; font-weight: 600; color: #1e293b; }
+.dialog__item-email { font-size: 12px; color: #64748b; margin-top: 2px; }
 
-/* ===== Persona Dialog Preview ===== */
-.persona-dialog-preview {
-  display: flex; align-items: center; gap: 12px;
-  padding: 12px 16px;
-  background: linear-gradient(135deg, #faf5ff 0%, #f9fafb 100%);
-  border: 1px solid #ede9fe;
-  border-radius: 10px;
-}
+.persona-dialog-preview { display: flex; align-items: center; gap: 12px; background: #f8fafc; padding: 16px; border-radius: 10px; border: 1px solid #e2e8f0; }
+.preview-text { font-size: 13px; color: #64748b; }
+.cleanup-result { background: #ecfdf5; color: #059669; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: bold; margin-top: 12px; text-align: center; border: 1px solid #a7f3d0; }
 
-.form-checkbox {
-  width: 16px; height: 16px;
-  accent-color: #3b82f6;
-  cursor: pointer;
-}
-
-/* ===== Gender Select ===== */
-.gender-voice-row {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-.gender-select {
-  display: flex; gap: 8px;
-}
-.gender-option {
-  flex: 1;
-  display: flex; align-items: center; justify-content: center;
-  padding: 8px 12px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  background: #f9fafb;
-}
-.gender-option:hover {
-  border-color: #d1d5db;
-  background: #f3f4f6;
-}
-.gender-option--active {
-  border-color: #3b82f6;
-  background: #eff6ff;
-}
-.gender-radio {
-  display: none;
-}
-.gender-option__label {
-  font-size: 14px; font-weight: 500; color: #374151;
-}
-.gender-option--active .gender-option__label {
-  color: #2563eb;
-}
-
-.voice-toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-/* ===== Button Link ===== */
-.btn-link {
-  display: inline-flex; align-items: center; gap: 4px;
-  font-size: 13px; font-weight: 500; color: #3b82f6;
-  background: none; border: none; cursor: pointer;
-  padding: 0; transition: color 0.15s;
-}
-.btn-link:hover { color: #2563eb; }
-.btn-link svg { width: 16px; height: 16px; }
-
-/* ===== Cleanup Result ===== */
-.cleanup-result {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 8px 14px;
-  background: #ecfdf5; color: #059669;
-  border-radius: 8px; font-size: 13px; font-weight: 500;
-}
-.cleanup-result svg { width: 16px; height: 16px; }
-
-/* ===== Sidebar ===== */
-.settings-sidebar {
-  position: sticky; top: 80px;
-}
-.settings-sidebar__inner {
-  display: flex; flex-direction: column; gap: 16px;
-}
-.sidebar-card {
-  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
-  padding: 20px;
-}
-.sidebar-card--primary {
-  border-color: #dbeafe;
-  background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
-}
-.sidebar-card__header {
-  display: flex; align-items: center; justify-content: space-between;
-  margin-bottom: 14px; padding-bottom: 10px;
-  border-bottom: 1px solid #f3f4f6;
-}
-.sidebar-card__badge {
-  display: inline-flex; align-items: center;
-  padding: 2px 8px; font-size: 11px; font-weight: 500;
-  background: #fef3c7; color: #d97706; border-radius: 4px;
-}
-.sidebar-card__title {
-  font-size: 14px; font-weight: 600; color: #1f2937;
-  margin: 0 0 14px; padding-bottom: 10px;
-  border-bottom: 1px solid #f3f4f6;
-}
-.sidebar-card--primary .sidebar-card__title {
-  margin-bottom: 0; padding-bottom: 0; border-bottom: none;
-}
-.sidebar-card__actions {
-  display: flex; flex-direction: column; gap: 8px;
-}
-/* Align icon + text inside VButton (btn-content wraps the default slot) */
-.sidebar-card__actions :deep(.btn-content),
-.section-body :deep(.btn-content) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-.sidebar-card__vars {
-  display: flex; flex-direction: column; gap: 8px;
-}
-.sidebar-var {
-  display: flex; flex-direction: column; gap: 1px;
-}
-.sidebar-var code {
-  font-family: 'Menlo', 'Monaco', monospace;
-  font-size: 11px; background: #f3f4f6;
-  padding: 2px 6px; border-radius: 4px;
-  color: #7c3aed; display: inline-block; width: fit-content;
-}
-.sidebar-var span {
-  font-size: 12px; color: #6b7280;
-}
-
-/* ===== Dialog ===== */
-.dialog-overlay {
-  position: fixed; inset: 0; z-index: 50;
-  display: flex; align-items: center; justify-content: center;
-  background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
-}
-.dialog {
-  width: 100%; max-width: 480px;
-  background: #fff; border-radius: 16px;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
-  overflow: hidden;
-}
-.dialog__header {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 20px 24px 0;
-}
-.dialog__header h3 { font-size: 16px; font-weight: 600; color: #111827; margin: 0; }
-.dialog__close {
-  width: 32px; height: 32px; border-radius: 8px;
-  display: flex; align-items: center; justify-content: center;
-  background: none; border: none; cursor: pointer;
-  color: #9ca3af; transition: all 0.15s;
-}
-.dialog__close:hover { background: #f3f4f6; color: #374151; }
-.dialog__close svg { width: 20px; height: 20px; }
-
-.dialog__search {
-  padding: 16px 24px; position: relative;
-}
-.dialog__search-icon {
-  position: absolute; left: 38px; top: 50%; transform: translateY(-50%);
-  width: 16px; height: 16px; color: #9ca3af;
-}
-.dialog__search-input {
-  width: 100%; padding: 10px 14px 10px 38px;
-  font-size: 14px; border: 1px solid #e5e7eb;
-  border-radius: 10px; outline: none; background: #f9fafb;
-  transition: all 0.15s;
-}
-.dialog__search-input:focus {
-  background: #fff; border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
-}
-
-.dialog__body {
-  max-height: 320px; overflow-y: auto; padding: 0 16px 16px;
-}
-.dialog__empty {
-  padding: 40px 0; text-align: center; color: #9ca3af;
-  display: flex; flex-direction: column; align-items: center; gap: 8px;
-}
-.dialog__empty svg { width: 32px; height: 32px; }
-.dialog__empty span { font-size: 14px; }
-
-.dialog__list { display: flex; flex-direction: column; gap: 2px; }
-.dialog__item {
-  display: flex; align-items: center; gap: 12px;
-  width: 100%; padding: 10px 12px;
-  background: none; border: none; border-radius: 10px;
-  cursor: pointer; text-align: left; transition: background 0.15s;
-}
-.dialog__item:hover { background: #eff6ff; }
-.dialog__item-avatar {
-  width: 36px; height: 36px; border-radius: 50%;
-  background: #f3f4f6; display: flex; align-items: center; justify-content: center;
-  font-size: 13px; font-weight: 600; color: #6b7280; flex-shrink: 0;
-}
-.dialog__item-info { min-width: 0; flex: 1; }
-.dialog__item-name { font-size: 14px; font-weight: 500; color: #1f2937; }
-.dialog__item-email { font-size: 12px; color: #9ca3af; margin-top: 1px; }
-.dialog__item-add { width: 18px; height: 18px; color: #3b82f6; flex-shrink: 0; }
-
-/* ===== Mobile Responsive ===== */
-@media (max-width: 768px) {
-  .settings-page :deep(.page-header) {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-  .settings-page :deep(.page-header-actions) {
-    width: 100%;
-    overflow-x: auto;
-  }
-  .settings-page :deep(.page-header-actions .space-x-2) {
-    display: flex;
-    gap: 8px;
-    flex-wrap: nowrap;
-  }
-
-  .settings-tabs {
-    gap: 2px;
-    padding: 3px;
-    border-radius: 10px;
-  }
-  .settings-tab {
-    padding: 8px 10px;
-    font-size: 13px;
-  }
-
-  .settings-container {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-
-  .settings-sidebar {
-    position: static;
-    order: -1;
-  }
-  .sidebar-card__actions {
-    flex-direction: row;
-    gap: 8px;
-  }
-  .sidebar-card__actions :deep(.btn) {
-    flex: 1;
-  }
-
-  .section-header {
-    padding: 12px 16px;
-  }
-  .section-body {
-    padding: 16px;
-  }
-
-  .preset-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .form-row {
-    padding: 10px 12px;
-  }
-  .form-row--bordered {
-    margin: 0 -16px;
-    padding: 12px 16px;
-  }
-
-  .persona-card {
-    padding: 10px 12px;
-  }
-  .persona-card__prompt {
-    max-width: 100%;
-  }
-
-  .dialog {
-    max-width: calc(100vw - 32px);
-    margin: 16px;
-    border-radius: 12px;
-  }
-  .dialog__header {
-    padding: 16px 16px 0;
-  }
-  .dialog__search {
-    padding: 12px 16px;
-  }
-  .dialog__search-icon {
-    left: 28px;
-  }
-  .dialog__body {
-    max-height: 260px;
-  }
-}
+/* 实用工具 */
+.p-4 { padding: 16px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mb-3 { margin-bottom: 12px; } .px-0 { padding-left: 0; padding-right: 0; } .border-0 { border: none; } .bg-transparent { background: transparent; }
 </style>