fix: polish tutorial/theme copy and align review dialog themes

android-webview-app/APP_CHANGELOG.md

@@ -1,5 +1,17 @@
 # App 更新说明
 
+# 1.0.18
+- 新增完整「新手教程」系统（高光 + 悬浮说明窗）：覆盖桌面端与手机端核心功能入口
+- 教程交互统一优化：仅保留“下一步”，支持自动点击与点击特效，避免误触真实页面
+- 手机端教程新增专属流程：菜单展开、对话记录、工作文件、新建对话、模型/思考模式、个人空间全链路引导
+- 教程定位与层级修复：高光区域更贴合小目标；教程弹窗始终保持最高图层，不再被移动端菜单遮挡
+- 个人空间教程体验优化：教程期间支持滚动查看内容；移动端标签自动横向滚动到可见后再点击；桌面端标签自动纵向滚动后再点击
+- 新增“连接状态指示灯”教程步骤：绿色表示连接正常，红色表示与后端断开
+- 教程入口页精简：移除“已完成/重新开始”状态文案，统一为“开始新手教程”
+- 主题命名文案统一：将“Claude 经典”调整为“经典”，并同步更新相关引导文案
+- 模型偏好页优化：移除“默认思考模型”中“思考模式”的“推荐”标记
+- 修复“对话回顾”弹窗多主题适配问题：经典/明亮/夜间主题下的背景、边框、文本、按钮与状态样式统一跟随主题变量
+
 # 1.0.17
 - 登录/注册页改为 Vue 实现，统一前端技术栈
 - 登录/注册页接入主题变量体系，自动跟随已保存主题（Claude / 浅色 / 深色）

android-webview-app/app/build.gradle.kts

@@ -16,8 +16,8 @@ android {
         applicationId = "com.cyjai.agent"
         minSdk = 24
         targetSdk = 35
-        versionCode = 19
+        versionCode = 20
-        versionName = "1.0.17"
+        versionName = "1.0.18"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
     }

static/src/components/overlay/ConversationReviewDialog.vue

@@ -159,7 +159,7 @@ const formatUpdatedAt = (value: string | number) => {
 .review-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(18, 19, 22, 0.4);
+  background: var(--theme-overlay-scrim, rgba(18, 19, 22, 0.4));
   backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
@@ -171,13 +171,13 @@ const formatUpdatedAt = (value: string | number) => {
 .review-window {
   width: min(1100px, 96vw);
   height: min(720px, 88vh);
-  background: #ffffff;
+  background: var(--theme-surface-card, var(--claude-panel));
   border-radius: 20px;
-  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25);
+  box-shadow: var(--theme-shadow-strong, 0 28px 80px rgba(15, 23, 42, 0.25));
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border: 1px solid rgba(15, 23, 42, 0.06);
+  border: 1px solid var(--theme-control-border, var(--claude-border));
 }
 
 .review-header,
@@ -186,18 +186,18 @@ const formatUpdatedAt = (value: string | number) => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: rgba(249, 248, 245, 0.8);
+  background: var(--theme-surface-muted, var(--claude-left-rail));
 }
 
 .review-header .title {
   font-size: 18px;
   font-weight: 700;
-  color: #182033;
+  color: var(--claude-text);
 }
 
 .review-header .subtitle {
   font-size: 13px;
-  color: #6b7280;
+  color: var(--claude-text-secondary);
   margin-top: 4px;
 }
 
@@ -209,11 +209,11 @@ const formatUpdatedAt = (value: string | number) => {
 
 .hint {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--claude-text-secondary);
   padding: 6px 10px;
   border-radius: 10px;
-  background: #f3f4f6;
+  background: var(--theme-surface-soft, var(--claude-panel));
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--theme-control-border, var(--claude-border));
   max-width: 280px;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -228,7 +228,7 @@ const formatUpdatedAt = (value: string | number) => {
 }
 
 .review-left {
-  border-right: 1px solid rgba(15, 23, 42, 0.06);
+  border-right: 1px solid var(--theme-control-border, var(--claude-border));
   padding: 12px 14px 14px;
   display: flex;
   flex-direction: column;
@@ -240,22 +240,22 @@ const formatUpdatedAt = (value: string | number) => {
   justify-content: space-between;
   align-items: center;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--claude-text);
   margin-bottom: 8px;
 }
 
 .counts {
   font-size: 12px;
-  color: #6b7280;
+  color: var(--claude-text-secondary);
 }
 
 .conversation-list {
   flex: 1 1 auto;
   overflow-y: auto;
   overflow-x: hidden;
-  border: 1px solid rgba(15, 23, 42, 0.06);
+  border: 1px solid var(--theme-control-border, var(--claude-border));
   border-radius: 12px;
-  background: #ffffff;
+  background: var(--theme-surface-card, var(--claude-panel));
   padding: 8px;
   display: flex;
   flex-direction: column;
@@ -272,8 +272,8 @@ const formatUpdatedAt = (value: string | number) => {
   max-width: 360px;
   align-self: center;
   text-align: left;
-  background: #ffffff;
+  background: var(--theme-surface-card, var(--claude-panel));
-  border: 1px solid rgba(15, 23, 42, 0.08);
+  border: 1px solid var(--theme-control-border, var(--claude-border));
   border-radius: 10px;
   padding: 14px 14px;
   cursor: pointer;
@@ -284,14 +284,14 @@ const formatUpdatedAt = (value: string | number) => {
 }
 
 .conversation-item:hover {
-  border-color: rgba(218, 119, 86, 0.4);
+  border-color: var(--claude-accent);
-  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
+  box-shadow: var(--theme-shadow-soft, 0 6px 18px rgba(15, 23, 42, 0.12));
   transform: translateY(-1px);
 }
 
 .conversation-item.active {
-  border-color: rgba(218, 119, 86, 0.8);
+  border-color: var(--claude-accent-strong);
-  box-shadow: 0 8px 22px rgba(218, 119, 86, 0.2);
+  box-shadow: 0 8px 22px rgba(218, 119, 86, 0.22);
 }
 
 .conversation-item.current {
@@ -303,7 +303,7 @@ const formatUpdatedAt = (value: string | number) => {
   align-items: center;
   gap: 8px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--claude-text);
 }
 
 .conversation-item .title {
@@ -316,8 +316,8 @@ const formatUpdatedAt = (value: string | number) => {
 .conversation-item .tag {
   padding: 2px 8px;
   border-radius: 999px;
-  background: rgba(79, 70, 229, 0.12);
+  background: var(--theme-surface-soft, rgba(79, 70, 229, 0.12));
-  color: #4f46e5;
+  color: var(--claude-text-secondary);
   font-size: 12px;
 }
 
@@ -329,14 +329,14 @@ const formatUpdatedAt = (value: string | number) => {
 .conversation-item .meta {
   margin-top: 6px;
   font-size: 12px;
-  color: #6b7280;
+  color: var(--claude-text-secondary);
   display: flex;
   gap: 10px;
 }
 
 .empty {
   text-align: center;
-  color: #6b7280;
+  color: var(--claude-text-secondary);
   padding: 20px 0;
 }
 
@@ -351,7 +351,7 @@ const formatUpdatedAt = (value: string | number) => {
   flex-direction: column;
   padding: 12px;
   min-height: 0;
-  background: #ffffff;
+  background: var(--theme-surface-card, var(--claude-panel));
 }
 
 .preview-header {
@@ -359,20 +359,20 @@ const formatUpdatedAt = (value: string | number) => {
   justify-content: space-between;
   align-items: center;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--claude-text);
   padding: 8px 0;
 }
 
 .preview-count {
   font-size: 12px;
-  color: #6b7280;
+  color: var(--claude-text-secondary);
 }
 
 .preview-box {
   flex: 1 1 auto;
-  border: 1px solid rgba(15, 23, 42, 0.06);
+  border: 1px solid var(--theme-control-border, var(--claude-border));
   border-radius: 12px;
-  background: #ffffff;
+  background: var(--theme-surface-card, var(--claude-panel));
   padding: 10px;
   overflow: auto;
   width: 100%;
@@ -384,7 +384,7 @@ const formatUpdatedAt = (value: string | number) => {
   gap: 6px;
   font-family: Menlo, Consolas, 'SFMono-Regular', monospace;
   font-size: 13px;
-  color: #1f2937;
+  color: var(--claude-text);
   white-space: pre-wrap;
   word-break: break-all;
 }
@@ -392,13 +392,13 @@ const formatUpdatedAt = (value: string | number) => {
 .preview-line {
   padding: 6px 8px;
   border-radius: 8px;
-  background: #fff;
+  background: var(--theme-surface-soft, var(--claude-panel));
-  border: 1px solid rgba(15, 23, 42, 0.05);
+  border: 1px solid var(--theme-control-border, var(--claude-border));
 }
 
 .placeholder {
   text-align: center;
-  color: #4b5563;
+  color: var(--claude-text-secondary);
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -421,11 +421,11 @@ const formatUpdatedAt = (value: string | number) => {
 
 .text-sub {
   font-size: 13px;
-  color: #6b7280;
+  color: var(--claude-text-secondary);
 }
 
 .placeholder.error .text-main {
-  color: #b91c1c;
+  color: #dc2626;
 }
 
 .review-footer {
@@ -451,7 +451,7 @@ const formatUpdatedAt = (value: string | number) => {
   align-items: center;
   gap: 8px;
   font-size: 14px;
-  color: #374151;
+  color: var(--claude-text);
 }
 
 .toggle-send input {
@@ -462,7 +462,7 @@ const formatUpdatedAt = (value: string | number) => {
   width: 38px;
   height: 22px;
   border-radius: 999px;
-  background: #e5e7eb;
+  background: var(--theme-control-border, var(--claude-border));
   position: relative;
   transition: background 0.2s ease;
 }
@@ -473,7 +473,7 @@ const formatUpdatedAt = (value: string | number) => {
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #ffffff;
+  background: var(--theme-surface-card, #ffffff);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
   top: 2px;
   left: 2px;
@@ -481,7 +481,7 @@ const formatUpdatedAt = (value: string | number) => {
 }
 
 .toggle-send input:checked + .switch {
-  background: #d14b31;
+  background: var(--claude-accent-strong);
 }
 
 .toggle-send input:checked + .switch::after {
@@ -493,16 +493,17 @@ const formatUpdatedAt = (value: string | number) => {
 }
 
 .ghost-btn {
-  background: #f3f4f6;
+  background: var(--theme-surface-soft, var(--claude-panel));
-  color: #1f2937;
+  color: var(--claude-text);
+  border: 1px solid var(--theme-control-border, var(--claude-border));
 }
 
 .ghost-btn:hover:not(:disabled) {
-  background: #e5e7eb;
+  background: var(--theme-surface-muted, var(--claude-left-rail));
 }
 
 .primary-btn {
-  background: linear-gradient(135deg, #da7756, #d44b31);
+  background: linear-gradient(135deg, var(--claude-accent), var(--claude-accent-strong));
   color: #fffaf0;
   box-shadow: 0 10px 24px rgba(212, 75, 49, 0.28);
 }
@@ -525,7 +526,7 @@ const formatUpdatedAt = (value: string | number) => {
   }
   .review-left {
     border-right: none;
-    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+    border-bottom: 1px solid var(--theme-control-border, var(--claude-border));
   }
 }
 </style>

static/src/components/personalization/PersonalizationDrawer.vue

@@ -834,7 +834,7 @@
                       <div class="theme-header">
                         <div>
                           <h3>界面主题</h3>
-                          <p>在浅色、深色和 Claude 经典之间一键切换。会立即应用并保存在本地。</p>
+                          <p>在经典、明亮和夜间之间一键切换。会立即应用并保存在本地。</p>
                         </div>
                         <div class="theme-badge">Beta</div>
                       </div>
@@ -1012,7 +1012,7 @@ const baseTabs = [
   { id: 'behavior', label: '模型行为', description: '工具提示与界面表现' },
   { id: 'skills', label: 'Skills', description: '可用技能开关' },
   { id: 'image', label: '图片压缩', description: '发送图片的尺寸策略' },
-  { id: 'theme', label: '主题切换', description: '浅色 / 深色 / Claude' },
+  { id: 'theme', label: '主题切换', description: '经典 / 明亮 / 夜间' },
   { id: 'tutorial', label: '新手教程', description: '功能引导与使用说明' }
 ] as const;
 
@@ -1057,7 +1057,7 @@ type CompressionField =
 
 const runModeOptions: Array<{ id: string; label: string; desc: string; value: RunModeValue; badge?: string }> = [
   { id: 'fast', label: '快速模式', desc: '追求响应速度，跳过思考模型', value: 'fast' },
-  { id: 'thinking', label: '思考模式', desc: '首轮回复会先输出思考过程', value: 'thinking', badge: '推荐' },
+  { id: 'thinking', label: '思考模式', desc: '首轮回复会先输出思考过程', value: 'thinking' },
   { id: 'deep', label: '深度思考', desc: '整轮对话都使用思考模型', value: 'deep' }
 ];
 
@@ -1475,14 +1475,14 @@ const { setTheme, loadTheme } = useTheme();
 const themeOptions: Array<{ id: ThemeKey; label: string; desc: string; swatches: string[] }> = [
   {
     id: 'claude',
-    label: 'Claude 经典',
+    label: '经典',
-    desc: '仿 Claude 的米色质感，柔和高对比',
+    desc: '米色质感，柔和高对比',
     swatches: ['#eeece2', '#f7f3ea', '#da7756']
   },
   {
     id: 'light',
     label: '明亮',
-    desc: '纯白底色 + 优雅灰，类似 ChatGPT 风格',
+    desc: '纯白底色 + 优雅灰，简洁清爽',
     swatches: ['#ffffff', '#f7f7f8', '#6b7280']
   },
   {

static/src/stores/tutorial.ts

@@ -96,7 +96,7 @@ const DEFAULT_STEPS: TutorialStep[] = [
   { id: 'tab-image', title: '图片压缩', description: '下一步自动切换到“图片压缩”。', target: '[data-tutorial="personal-tab-image"]', mode: 'info', autoClick: true, placement: 'right' },
   { id: 'page-image', title: '图片压缩内容', description: '可选择原图、1080p、720p、540p 压缩策略。', target: '[data-tutorial="personal-content-shell"]', mode: 'info', placement: 'right' },
   { id: 'tab-theme', title: '主题切换', description: '下一步自动切换到“主题切换”。', target: '[data-tutorial="personal-tab-theme"]', mode: 'info', autoClick: true, placement: 'right' },
-  { id: 'page-theme', title: '主题切换内容', description: '可在 Claude、明亮、夜间主题间切换。', target: '[data-tutorial="personal-content-shell"]', mode: 'info', placement: 'right' },
+  { id: 'page-theme', title: '主题切换内容', description: '可在经典、明亮、夜间主题间切换。', target: '[data-tutorial="personal-content-shell"]', mode: 'info', placement: 'right' },
   { id: 'close-personal-space', title: '关闭个人空间', description: '下一步自动关闭个人空间并结束导览。', target: '[data-tutorial="personal-close"]', mode: 'info', autoClick: true, placement: 'bottom' },
   {
     id: 'done',