chore(web): remove obsolete optimization documentation files

- Delete CHANGES_SUMMARY.md (1080x1920 device adaptation summary)
- Delete DEVICE_OPTIMIZATION.md (device optimization specifications)
- Delete KIOSK_LAYOUT_OPTIMIZATION.md (kiosk layout design documentation)
- Update SsChatReplyMarkdown.vue component styling
- Clean up documentation that has been superseded by implemented features and code comments

web/CHANGES_SUMMARY.md

@@ -1,153 +0,0 @@
-# 1080x1920 设备适配修改总结
-
-## 修改文件清单
-
-### 1. 核心样式文件
-- **web/src/assets/base.css**
-  - 添加 CSS 变量系统（字体、间距、圆角、触摸目标）
-  - 添加 1080x1920 设备媒体查询
-  - 优化 body 行高为 1.75
-
-### 2. 组件样式更新
-
-#### web/src/components/SsHeadline.vue
-- 使用 CSS 变量替代硬编码尺寸
-- 添加中等设备媒体查询
-- 增大标题和副标题间距
-
-#### web/src/components/SsCommonProblem.vue
-- 最小高度从 16rem → 20rem
-- 标题从 1rem → 1.5rem
-- 列表项从 0.8rem → 1rem
-- 图标从 2.13rem → 3rem
-- 添加最小触摸目标 44px
-- 增强阴影效果
-
-#### web/src/components/SsService.vue
-- 卡片高度从 7.5rem → 9rem
-- 标题从 0.88rem → 1.125rem
-- 中心卡片从 12rem → 14rem
-- 使用 CSS 变量管理间距
-- 添加最小触摸目标
-
-#### web/src/components/SsInputBox.vue
-- Padding 从 1.25rem → 1.75rem
-- 使用 CSS 变量管理圆角和字体
-- 按钮增大至 44px 最小尺寸
-- 增强阴影从 0.25rem → 0.5rem
-- 输入框字体使用 `--body-font-size`
-
-#### web/src/components/SsGridEntrance.vue
-- Padding 从 1.5rem → 2rem
-- 标题从 0.88rem → 1.25rem
-- 正文从 0.8rem → 1rem
-- 图标从 6rem → 7rem
-- 添加最小触摸目标
-
-#### web/src/components/SsPanel.vue
-- 标题从 1rem → 1.25rem
-- 刷新按钮从 0.88rem → 1rem
-- 添加最小触摸目标 44px
-
-#### web/src/components/SsHeader.vue
-- Logo 从 1.88rem → 2.5rem
-- 标题从 1rem → 1.25rem
-- 微信入口字体从 0.88rem → 1rem
-- Padding 从 1rem → 1.5rem
-
-#### web/src/views/HomeView.vue
-- 添加垂直布局支持（`.ss-row-vertical`）
-- **服务导航占 100% 宽度，位于上方**
-- **常见问题占 100% 宽度，位于下方**
-- 顶部 padding 从 4rem → 5rem
-- 底部 padding 从 2rem → 3rem
-- 列间距从 0.9rem → 1rem
-- 行间距从 1.68rem → 2rem
-
-### 3. 文档文件
-- **web/DEVICE_OPTIMIZATION.md**: 详细优化说明
-- **web/CHANGES_SUMMARY.md**: 本文件
-
-## 关键设计决策
-
-### 1. CSS 变量优先
-使用 CSS 变量而非硬编码值，便于：
-- 统一管理尺寸
-- 快速调整适配
-- 保持一致性
-- 减少重复代码
-
-### 2. 媒体查询策略
-```
-桌面端（>1200px）→ 1080x1920（751-1200px, >1800px高）→ 移动端（<750px）
-```
-
-### 3. 垂直布局
-在 1080x1920 设备上：
-- **服务导航：100% 宽度，位于上方**
-- **常见问题：100% 宽度，位于下方**
-- 避免横向拥挤，提升可读性
-
-### 4. 触摸优化
-所有交互元素最小 44px × 44px：
-- 符合 WCAG 2.1 AAA 标准
-- 提升触摸准确性
-- 减少误触
-
-### 5. 视觉层次
-- 增大阴影：0.25rem → 0.5rem
-- 增大圆角：1.25rem → 1.5rem
-- 增大间距：使用 `--spacing-unit` 倍数
-- 增强对比度
-
-## 未修改的文件
-
-以下组件未修改，因为：
-1. 不在首页显示
-2. 已有合适的响应式设计
-3. 不需要特殊优化
-
-- SsFooter.vue
-- SsNavigation.vue
-- SsRecording.vue
-- SsDisclaimer.vue
-- SsHotline.vue
-- SsOpinion.vue
-- ss_chat/* 组件
-
-## 测试检查清单
-
-- [ ] 在 1080x1920 设备/模拟器中打开页面
-- [ ] 验证标题文字清晰可读（约 32px）
-- [ ] 验证输入框高度充足（≥50px）
-- [ ] 验证所有按钮可轻松点击（≥44px）
-- [ ] 验证服务导航垂直布局正确（位于上方）
-- [ ] 验证常见问题垂直布局正确（位于下方）
-- [ ] 验证卡片阴影和圆角效果
-- [ ] 验证文字行高舒适（1.75）
-- [ ] 验证间距合理，不拥挤
-- [ ] 验证滚动流畅
-- [ ] 验证不影响桌面端（>1200px）
-- [ ] 验证不影响移动端（<750px）
-
-## 回滚方案
-
-如需回滚，恢复以下文件：
-1. web/src/assets/base.css
-2. web/src/components/*.vue（所有修改的组件）
-3. web/src/views/HomeView.vue
-
-或使用 Git：
-```bash
-git checkout HEAD -- web/src/assets/base.css
-git checkout HEAD -- web/src/components/
-git checkout HEAD -- web/src/views/HomeView.vue
-```
-
-## 后续优化建议
-
-1. **性能测试**：在实际设备上测试渲染性能
-2. **用户测试**：收集真实用户反馈
-3. **微调**：根据反馈调整字体和间距
-4. **扩展**：考虑其他中等尺寸设备（如 iPad）
-5. **动画**：优化过渡动画在中等设备上的表现

web/DEVICE_OPTIMIZATION.md

@@ -1,95 +0,0 @@
-# 1080x1920 设备优化说明
-
-## 优化目标
-针对 1080x1920 分辨率设备（如平板电脑、大屏手机）进行界面适配优化。
-
-## 实施方案
-
-### 1. CSS 变量系统（base.css）
-在 `:root` 中定义响应式设计变量：
-- `--base-font-size`: 基础字体大小（18px）
-- `--title-font-size`: 标题字体（2rem）
-- `--body-font-size`: 正文字体（1.125rem）
-- `--small-font-size`: 小字体（1rem）
-- `--spacing-unit`: 间距单位（1.25rem）
-- `--border-radius`: 圆角半径（1.5rem）
-- `--min-touch-target`: 最小触摸目标（44px）
-
-### 2. 媒体查询断点
-```css
-@media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1800px)
-```
-
-### 3. 优化内容
-
-#### 3.1 字体和排版
-- 标题文字：2rem（约32px），加粗
-- 正文字体：1.125rem（约18px）
-- 小字体：1rem（约16px）
-- 行高：1.75（增强可读性）
-
-#### 3.2 输入框（SsInputBox.vue）
-- 高度：增大至 1.75rem padding
-- 圆角：使用 CSS 变量 `--border-radius`
-- 按钮：最小尺寸 44px × 44px
-- 阴影：增强至 0.5rem
-
-#### 3.3 常见问题（SsCommonProblem.vue）
-- 最小高度：20rem
-- 标题：1.5rem
-- 列表项：1rem，行高 1.5em
-- 图标：3rem × 3rem
-- 间距：增大至 3rem
-
-#### 3.4 服务导航（SsService.vue）
-- 卡片高度：9rem
-- 标题：1.125rem
-- 中心卡片：14rem × 14rem
-- 图标：增大至 7rem × 7rem
-- 阴影：增强视觉层次
-
-#### 3.5 布局结构（HomeView.vue）
-- 垂直布局：**服务导航在上**（100%宽度），**常见问题在下**
-- 间距：统一增大至 2rem
-- 内边距：5rem 顶部，3rem 底部
-
-#### 3.6 其他组件
-- **SsGridEntrance**: 增大 padding 和字体
-- **SsPanel**: 标题 1.25rem
-- **SsHeader**: Logo 2.5rem，文字 1.25rem
-- **SsHeadline**: 增大间距
-
-### 4. 触摸优化
-所有可点击元素最小尺寸：44px × 44px
-- 按钮
-- 卡片
-- 列表项
-- 图标
-
-### 5. 视觉增强
-- 阴影：从 0.25rem 增强至 0.5rem
-- 圆角：统一使用 CSS 变量
-- 间距：使用 `--spacing-unit` 倍数
-- 对比度：保持原有配色，增大元素尺寸
-
-## 设计原则
-
-1. **渐进增强**：基于现有桌面端设计，不破坏原有布局
-2. **CSS 变量**：使用变量系统，便于维护和调整
-3. **响应式断点**：清晰的媒体查询边界（桌面 > 1080x1920 > 移动）
-4. **触摸友好**：所有交互元素符合 44px 最小尺寸标准
-5. **可读性优先**：增大字体、行高和间距
-
-## 测试建议
-
-1. 在 1080x1920 设备或模拟器中测试
-2. 验证所有交互元素可点击性
-3. 检查文字可读性
-4. 确认布局不会溢出或重叠
-5. 测试垂直滚动流畅性
-
-## 兼容性
-
-- 不影响现有桌面端布局（>1200px）
-- 不影响移动端布局（<750px）
-- 仅在目标设备范围内生效

web/KIOSK_LAYOUT_OPTIMIZATION.md

@@ -1,190 +0,0 @@
-# 立式一体机对话界面优化
-
-## 设计目标
-
-针对 1080×1920 分辨率立式一体机，优化对话界面布局，确保所有可操作元素位于用户易触及区域（Y≤1500px）。
-
-## 核心改动
-
-### 1. 设备检测
-- **检测条件**：宽度 1000-1200px，高度 1700-2000px
-- **实现位置**：`HomeView.vue` 和 `SsInputBox.vue`
-- **状态管理**：使用 `computed` 从窗口尺寸派生，无额外状态
-
-### 2. 四段式布局（仅对话模式）
-
-```
-┌──────────────────────────────┐ Y=0
-│ 顶部导航栏（100px）           │ ← 返回首页 + 标题
-├──────────────────────────────┤ Y=100
-│ 服务快捷栏（100px）           │ ← 四川特色、政策解读等
-├──────────────────────────────┤ Y=200
-│                              │
-│ 中部对话区（flex: 1）         │ ← 消息列表 + 输入框
-│                              │
-├──────────────────────────────┤ Y≈1500
-│ 底部常见问题区（420px）       │ ← 仅展示，不可点击
-└──────────────────────────────┘ Y=1920
-```
-
-### 3. 统一宽度对齐
-
-**设计原则**：所有内容区域与顶部导航栏的内容区域对齐
-
-**对齐策略**：使用 CSS 变量定义统一的内容宽度
-```css
---kiosk-content-padding: 2rem;
---kiosk-content-width: calc(100vw - var(--kiosk-content-padding) * 2);
-```
-
-**应用范围**：
-- 顶部导航栏：`padding: 0 2rem`（定义内容区域边界）
-- 服务快捷栏：`width: var(--kiosk-content-width)`
-- 聊天消息区：`max-width: var(--kiosk-content-width)`
-- 输入框：`max-width: var(--kiosk-content-width)`
-- 常见问题：`width: var(--kiosk-content-width)`
-
-**计算结果**：
-- 在 1080px 宽的屏幕上：`calc(100vw - 4rem)` = 1080px - 64px = 1016px
-- 所有内容区域左右边缘与"返回首页"按钮和"商小川智能助手"标题对齐
-
-**优势**：
-- 响应式设计：自动适配不同屏幕宽度
-- 完美对齐：所有内容与顶部导航栏内容区域对齐
-- 代码简洁：使用 CSS 变量避免重复计算
-
-### 4. 关键特性
-
-#### 顶部导航栏（100px）
-- 固定定位，始终可见
-- 包含：返回首页按钮（左）+ 应用标题（中）
-- 按钮尺寸：120×60px，满足最小触控目标
-
-#### 服务快捷栏（100px）
-- **复用原有设计**：保留 `SsService` 组件的渐变背景、阴影效果
-- **均匀分布**：5个服务项使用 `flex: 1` 和 `justify-content: space-between` 均匀分布
-- **样式类复用**：使用与原组件相同的 `itemClass` 逻辑
-- **背景色**：
-  - 默认：`linear-gradient(180deg, rgba(250, 255, 253, 0.8), rgba(225, 245, 248, 0.8))`
-  - 黄色：`linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 240, 239, 0.7))`
-  - 中心：`linear-gradient(90deg, #c2dff9, #c6e2fa)`
-- **尺寸**：每项 `flex: 1`，最小宽度 140px，高度 70px，图标半透明显示
-
-#### 中部对话区
-- 使用 flexbox 自适应高度
-- 包含消息滚动区域和输入框
-- 输入框位置确保在 Y≤1400px 范围内（200px + 1200px）
-
-#### 底部常见问题区（420px）
-- 固定高度，仅用于信息展示
-- 从 `global.commonProblem` 取前 5 条
-- 不可点击，避免用户弯腰操作
-
-### 5. 侧边栏处理
-- 对话模式下通过 `v-if` 完全不渲染侧边栏
-- 条件：`v-if="!(global.spread && isKioskDevice)"`
-
-## 文件修改清单
-
-### web/src/views/HomeView.vue
-- 添加 `isKioskDevice` computed 属性（设备检测）
-- 添加 `kioskFaqList` computed 属性（常见问题列表）
-- 添加 `getServiceClass` 方法（复用服务项样式逻辑）
-- 添加 `kiosk-top-nav` 顶部导航栏组件
-- 添加 `kiosk-service-bar` 服务快捷栏（复用原有设计）
-- 添加 `kiosk-bottom-faq` 底部展示区
-- 添加 `.kiosk-mode` 样式规则
-- 定义 `--kiosk-content-width` CSS 变量（768px）
-
-### web/src/components/SsInputBox.vue
-- 添加 `isKioskDevice` computed 属性
-- 添加 `.kiosk-chat` 类名支持
-- 调整 flexbox 布局以适配四段式结构
-- **定义 CSS 变量**：`--kiosk-content-width: calc(100vw - 4rem)` 用于统一宽度对齐
-- **修改宽度设置**：`.ss-chat-container` 和 `.input-container` 使用 `var(--kiosk-content-width)`
-
-## 设计原则遵循
-
-✅ **单一数据源**：设备检测通过 computed 从窗口尺寸派生，无冗余状态  
-✅ **组件复用**：复用 `SsService` 的样式设计和 `SsCommonProblem` 数据  
-✅ **清晰注释**：关键逻辑添加中文注释说明设计意图  
-✅ **最小改动**：仅在必要位置添加条件渲染和样式  
-✅ **响应式设计**：使用 media query 隔离立式一体机样式  
-✅ **视觉一致性**：保持原有的渐变背景、阴影、图标等视觉元素
-
-## 使用说明
-
-### 触发条件
-当同时满足以下条件时，自动启用立式一体机布局：
-1. 窗口宽度：1000-1200px
-2. 窗口高度：1700-2000px
-3. 用户进入对话模式（`global.spread === true`）
-
-### 退出方式
-点击顶部"返回首页"按钮，调用 `goHome()` 方法重置状态。
-
-## 可操作区域分布
-
-| 区域 | Y 坐标范围 | 高度 | 可操作性 |
-|------|-----------|------|---------|
-| 顶部导航 | 0-100px | 100px | ✅ 强烈推荐 |
-| 服务快捷栏 | 100-200px | 100px | ✅ 强烈推荐 |
-| 对话区域 | 200-1500px | ~1300px | ✅ 核心操作区 |
-| 常见问题 | 1500-1920px | 420px | ⚠️ 仅展示 |
-
-## 宽度对齐说明
-
-**核心原则**：所有内容区域与顶部导航栏的内容区域完美对齐
-
-**实现方式**：
-1. 顶部导航栏定义内容边界：`padding: 0 2rem`
-2. 使用 CSS 变量计算内容宽度：
-   ```css
-   --kiosk-content-padding: 2rem;
-   --kiosk-content-width: calc(100vw - var(--kiosk-content-padding) * 2);
-   ```
-3. 所有内容区域使用相同的宽度变量
-
-**应用组件**：
-- 服务快捷栏：`width: var(--kiosk-content-width)`
-- 聊天消息区：`max-width: var(--kiosk-content-width)`
-- 输入框：`max-width: var(--kiosk-content-width)`
-- 常见问题：`width: var(--kiosk-content-width)`
-
-**计算示例**（1080px 屏幕）：
-- `100vw` = 1080px
-- `var(--kiosk-content-padding) * 2` = 2rem * 2 = 4rem = 64px
-- `var(--kiosk-content-width)` = 1080px - 64px = 1016px
-
-**对齐效果**：
-```
-┌─────────────────────────────┐ 屏幕边缘
-│  ← 返回首页  商小川智能助手  │ ← padding: 0 2rem
-│  ↑                        ↑ │
-│  └────────────────────────┘ │ ← 内容区域宽度 1016px
-│  ┌────────────────────────┐ │
-│  │    服务快捷栏 1016px    │ │
-│  └────────────────────────┘ │
-│  ┌────────────────────────┐ │
-│  │   聊天消息区 1016px     │ │
-│  │   + 输入框 1016px      │ │
-│  └────────────────────────┘ │
-│  ┌────────────────────────┐ │
-│  │   热门问题 1016px       │ │
-│  └────────────────────────┘ │
-└─────────────────────────────┘
-```
-
-**优势**：
-- ✅ 完美对齐：所有内容左右边缘与顶部导航栏内容对齐
-- ✅ 响应式：自动适配不同屏幕宽度
-- ✅ 可维护：修改 padding 时所有组件自动调整
-- ✅ 语义清晰：通过 CSS 变量明确表达设计意图
-
-## 后续优化建议
-
-1. **超时返回**：60 秒无操作自动返回首页（保护隐私）
-2. **语音输入**：在顶部导航栏添加语音输入快捷按钮
-3. **字体调优**：根据实际设备测试进一步调整字号和行高
-4. **无障碍支持**：添加 ARIA 标签和键盘导航支持
-5. **服务栏滚动指示**：添加左右箭头提示可滚动查看更多服务

web/src/components/ss_chat/components/SsChatReplyMarkdown.vue

@@ -416,6 +416,21 @@ const addLinkTargetBlank = () => {
   }, 500);
 }
 
+/**
+ * 自动播放TTS
+ * 当回复完成时（last && !global.inReply），自动触发语音播放
+ */
+const autoPlayTTS = () => {
+  // 检查是否应该自动播放
+  if (props.last && !global.inReply && props.content.trim() !== '') {
+    // 确保当前没有其他音频在播放
+    if (audioStatus.value === 'wait' && global.audioChatId === '') {
+      console.log('自动播放TTS:', props.chatId)
+      textToSpeech()
+    }
+  }
+}
+
 onUnmounted(() => {
   ttsAudioPlayer.value?.stop();
 })
@@ -435,6 +450,19 @@ watch(() => global.audioChatId, (newVal, oldVal) => {
 watch(() => props.content, (newVal, oldVal) => {
   addLinkTargetBlank();
 });
+
+// 监听回复完成状态，自动播放TTS
+watch(() => [props.last, global.inReply, props.content], ([newLast, newInReply, newContent], [oldLast, oldInReply, oldContent]) => {
+  // 当回复从进行中变为完成时，触发自动播放
+  if (newLast && !newInReply && oldInReply && newContent.trim() !== '') {
+    // 延迟一小段时间，确保UI渲染完成
+    nextTick(() => {
+      setTimeout(() => {
+        autoPlayTTS()
+      }, 300)
+    })
+  }
+}, { immediate: false });
 </script>
 
 <template>