style(ui): 优化 SystemPrompt 和 Settings 页面布局设计

[tt-a1i]

Summary

• 优化 SystemPrompt.vue 页面布局和视觉设计
• 优化 Settings.vue 模态框布局和交互体验
• 优化删除会话确认对话框设计

Changes

SystemPrompt.vue

• 新增带渐变图标的页面标题区，使用 Teal 主色
• 卡片式分层设计（header + body），悬停时有微妙的边框和阴影效果
• "全局" 标签使用 Amber 强调色
• 保存按钮改为渐变背景，带保存状态反馈
• 文本框聚焦时有 Teal 色环效果
• 添加 placeholder 提示文字

Settings.vue

• 全新模态框布局，圆角更大
• 头部带渐变背景和图标
• 操作项改为卡片式设计，每个操作有独立图标区域
• 语义化颜色：导入(Teal)、导出(Amber)、删除(Red)
• 确认对话框增加警告图标，带背景模糊效果
• 添加淡入淡出过渡动画
• 文字改为中文，添加操作描述

Sidebar.vue - 删除会话对话框

• 替换 Naive UI dialog 为自定义精致对话框
• 删除当前会话：琥珀色渐变警告图标
• 删除所有会话：红色渐变危险图标
• 添加加载状态反馈和平滑动画过渡
• 支持点击遮罩关闭、按钮禁用状态

Design

统一遵循项目 "Fluid Elegance" 设计语言，使用 tokens.css 设计令牌，支持亮色/暗色模式

Test plan

• TypeScript 类型检查通过
• ESLint 检查通过
• 测试亮色模式下的视觉效果
• 测试暗色模式下的视觉效果
• 验证 SystemPrompt 保存功能正常
• 验证 Settings 导入/导出/删除功能正常
• 验证删除当前会话功能正常
• 验证删除所有会话功能正常

[claude]

代码审查反馈

✅ 总体评价

这是一次高质量的 UI 重构，很好地遵循了项目的 Fluid Elegance 设计语言。代码整体质量优秀，视觉一致性强，用户体验改进明显。

---

🎨 设计与用户体验

优点：

• ✨ 设计令牌应用一致：完美使用了 tokens.css 中定义的设计变量（--primary-、--accent-、--space-、--radius-），确保了与项目整体设计的一致性
• 🎯 语义化颜色选择：Teal（主色）、Amber（强调色）、Red（危险操作）的配色方案清晰合理
• 🌓 暗色模式支持完善：所有新样式都完美适配了亮色/暗色模式
• 💫 微交互细节：悬停效果、过渡动画、渐变背景等细节处理精致
• 📱 卡片式布局：分层清晰，信息层次感强

建议：

• 💡 考虑为 isSaving 状态添加视觉加载指示器（如 spinner 图标），当前只有文字变化可能不够明显

---

💻 代码质量

优点：

• ✅ 异常处理改进：onSubmit() 函数新增了 try-finally 块确保 isSaving 状态正确重置
• ✅ TypeScript 类型安全：没有引入任何类型错误
• ✅ 组件复用：ImportButton 和 ExportButton 组件得到了良好复用
• ✅ CSS 作用域隔离：使用 scoped 样式避免全局污染
• ✅ 可访问性基础：保留了语义化的 HTML 标签（header、section、button）

---

🔍 潜在问题与建议

1. textarea ref 冲突（高优先级）

问题： SystemPrompt.vue 中两个 textarea 元素都绑定了同一个 ref="textarea"

位置： src/components/chat/SystemPrompt.vue:92 和 :113

影响： 第二个 textarea 会覆盖第一个的 ref，导致 useTextareaAutosize 只对第二个生效

建议修复： 使用独立的 ref 名称

2. 无障碍访问改进

Settings.vue 中的关闭按钮建议添加 aria-label="关闭设置"

3. 键盘导航支持

确认对话框缺少键盘快捷键支持（Escape 关闭、Enter 确认）

4. CSS 变量回退值

部分 CSS 变量建议添加回退值，例如：color: var(--text-primary, #1c1917)

---

🧪 测试建议

建议补充：

• 🧪 添加单元测试验证 onSubmit 的异常处理逻辑
• 🧪 测试键盘导航（Tab 顺序、Enter/Escape 快捷键）
• 🧪 测试移动端响应式表现
• 🧪 测试超长文本输入的 UI 表现
• 🧪 E2E 测试覆盖完整的保存/删除流程

---

📊 性能考虑

优点：

• ✅ CSS 使用原生变量和转换，性能优秀
• ✅ 过渡动画使用了高性能的 transform 和 opacity

观察点：

• ⚠️ 确认对话框的 backdrop-filter: blur(4px) 可能在低端设备上性能较差，建议在性能测试中重点关注

---

🎯 总结与优先级

🔴 高优先级（建议在合并前修复）

1. 修复 textarea ref 冲突问题 - 影响功能

🟡 中优先级（建议后续 PR 优化）

2. 添加键盘导航支持
3. 完善无障碍标签
4. 补充自动化测试

🟢 低优先级（可选优化）

5. CSS 变量回退值
6. 保存按钮加载动画优化

---

🌟 亮点

1. 设计系统应用标杆：完美示范了如何使用设计令牌构建一致的 UI
2. 用户体验细节：渐变背景、微妙的阴影和过渡效果显著提升了视觉品质
3. 可维护性高：CSS 变量使用让主题切换和后续调整变得简单
4. 国际化友好：所有文字已本地化为中文，与项目目标一致

---

感谢贡献！这是一个很棒的 UI 改进。🎉