feat(desktop): ✨ 实现一些功能

1. 实现任务暂停功能 2. 实现页面的国际化功能 3.优化项目的结构以及BUG 4. 优化系统架构 5. 实现一大堆的功能
2026-01-25 03:30:23 +08:00
parent 3f7347427e
commit 455dd1f4cd
88 changed files with 13451 additions and 581 deletions
--- a/.trae/skills/frontend-design/SKILL.md
+++ b/.trae/skills/frontend-design/SKILL.md
@@ -0,0 +1,491 @@
+---
+name: frontend-design
+description: Creates unique, production-grade frontend interfaces with exceptional design quality. Use when user asks to build web components, pages, materials, posters, or applications (e.g., websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI). Generates creative, polished code and UI designs that avoid mediocre AI aesthetics.
+---
+
+# Frontend Design Skill
+
+此技能指导创建独特的生产级前端界面，避免平庸的"AI 粗糙"美学。实现真正可用的代码，并高度关注美学细节和创意选择。
+
+## When to Use This Skill
+
+使用此技能当用户请求：
+- 构建 Web 组件、页面或完整应用程序
+- 创建着陆页、仪表盘或营销页面
+- 设计 React、Vue 或原生 HTML/CSS 界面
+- 美化或重新设计现有的 Web UI
+- 创建海报、素材或视觉设计元素（用于 Web）
+- 需要高设计品质和独特美学的任何前端项目
+
+**关键触发词**: Web 组件、页面、应用、网站、着陆页、仪表盘、React 组件、HTML/CSS、UI 设计、美化、前端
+
+## 核心原则
+
+在编写代码之前，必须进行深入的设计思考。每个界面都应该是独特的、有意图的、令人难忘的。
+
+### 设计思维流程
+
+在实现任何代码之前，回答以下问题：
+
+#### 1. 目的 (Purpose)
+- **问题**: 此界面解决什么问题？
+- **用户**: 谁使用它？在什么情境下使用？
+- **目标**: 用户需要完成什么任务？
+
+#### 2. 风格方向 (Style Direction)
+选择一个**明确且大胆**的美学方向。不要选择"现代简约"这样的通用描述，而是选择极致的风格：
+
+**风格选项**（但不限于这些）：
+- **极简主义**: 极度克制，大量留白，精准排版
+- **极致混乱**: 密集布局，重叠元素，视觉冲击
+- **复古未来主义**: 80年代霓虹色，网格，合成波风格
+- **有机/自然**: 流动形状，自然色调，柔和曲线
+- **奢华/精致**: 优雅字体，金色点缀，精细细节
+- **俏皮/玩具感**: 明亮色彩，圆角，趣味动画
+- **编辑/杂志风格**: 大胆排版，网格系统，黑白为主
+- **粗犷/原始**: 单色，硬边，实用主义
+- **装饰艺术/几何**: 对称图案，几何形状，高对比度
+- **柔和/粉彩**: 温和色彩，渐变，梦幻感
+- **工业/实用**: 系统字体，单色，功能优先
+- **新拟态**: 柔和阴影，浮雕效果，微妙深度
+- **玻璃态**: 模糊背景，透明度，光感
+
+**关键**: 选择清晰的概念方向并精准执行。大胆的极致主义和精致的极简主义都有效——关键在于**意图**，而不是强度。
+
+#### 3. 技术限制 (Constraints)
+- 使用什么框架？（React, Vue, 原生 HTML/CSS）
+- 性能要求？（动画复杂度，文件大小）
+- 可访问性要求？（ARIA 标签，键盘导航，色彩对比度）
+- 浏览器兼容性？
+
+#### 4. 差异化 (Differentiation)
+- **记忆点**: 是什么让它令人难忘？
+- **独特性**: 用户会记住哪一个细节？
+- **惊喜**: 哪里会让用户眼前一亮？
+
+## 前端美学指南
+
+### 1. 排版 (Typography)
+
+**原则**: 字体选择是设计的灵魂。
+
+**Do**:
+- ✅ 选择**独特且有个性**的字体
+- ✅ 标题使用引人注目的字体，正文使用易读字体
+- ✅ 尝试意想不到的字体配对
+- ✅ 使用字体变体（font-weight, font-style）创造层次
+- ✅ 精确控制字间距（letter-spacing）和行高（line-height）
+
+**Don't**:
+- ❌ 使用通用字体：Arial, Helvetica, Inter, Roboto, 系统字体
+- ❌ 所有文本使用相同的字体和大小
+- ❌ 忽略字体加载性能（使用 font-display: swap）
+
+**推荐字体来源**:
+- Google Fonts (选择小众、独特的字体)
+- 自定义字体（如果项目允许）
+
+**示例字体组合**:
+```css
+/* 极简编辑风格 */
+--font-heading: 'Playfair Display', serif;
+--font-body: 'Source Sans Pro', sans-serif;
+
+/* 现代科技风格 */
+--font-heading: 'Space Mono', monospace;
+--font-body: 'DM Sans', sans-serif;
+
+/* 优雅奢华风格 */
+--font-heading: 'Cormorant Garamond', serif;
+--font-body: 'Lato', sans-serif;
+```
+
+### 2. 颜色与主题 (Color & Theme)
+
+**原则**: 颜色定义情绪和品牌。
+
+**Do**:
+- ✅ 使用 CSS 变量保持一致性
+- ✅ 主色调 + 鲜明点缀色的组合
+- ✅ 考虑色彩心理学（蓝色=信任，红色=紧迫，绿色=成功）
+- ✅ 使用渐变营造深度（但要有品味）
+- ✅ 保持色彩对比度（WCAG AA 标准：至少 4.5:1）
+
+**Don't**:
+- ❌ 俗套配色：白色背景 + 紫色渐变
+- ❌ 过多颜色（3-5 个主色已足够）
+- ❌ 忽略可访问性
+
+**示例主题**:
+```css
+:root {
+  /* 极简黑白 */
+  --color-primary: #000000;
+  --color-secondary: #ffffff;
+  --color-accent: #ff3366;
+
+  /* 复古未来 */
+  --color-primary: #1a1a2e;
+  --color-secondary: #16213e;
+  --color-accent: #00fff5;
+  --color-highlight: #ff006e;
+
+  /* 自然有机 */
+  --color-primary: #2d6a4f;
+  --color-secondary: #52b788;
+  --color-accent: #ffc857;
+}
+```
+
+### 3. 动效 (Animation & Motion)
+
+**原则**: 动画应该增强体验，而不是分散注意力。
+
+**Do**:
+- ✅ 优先使用 CSS 动画（性能更好）
+- ✅ 设计页面加载动画（首次印象）
+- ✅ 使用 `animation-delay` 实现元素逐个显示
+- ✅ 悬停状态添加微妙过渡
+- ✅ 滚动触发动画（Intersection Observer）
+- ✅ 对于 React，使用 Framer Motion 或 React Spring
+
+**Don't**:
+- ❌ 过度使用动画（每个元素都在动）
+- ❌ 动画持续时间过长（> 500ms 会让人不耐烦）
+- ❌ 忽略 `prefers-reduced-motion` 媒体查询
+
+**示例动画**:
+```css
+/* 页面加载 - 元素逐个淡入 */
+.fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
+.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
+.fade-in-up:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 悬停效果 */
+.card {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+```
+
+### 4. 空间构成 (Spatial Composition)
+
+**原则**: 布局应该引导视线，创造视觉节奏。
+
+**Do**:
+- ✅ 尝试不对称布局
+- ✅ 使用重叠元素创造深度
+- ✅ 对角线流程引导视线
+- ✅ 打破网格的元素（但有意图）
+- ✅ 宽敞的留白或精心控制的密度
+- ✅ 使用 Grid 和 Flexbox 创造复杂布局
+
+**Don't**:
+- ❌ 所有元素居中对齐
+- ❌ 均匀分布的网格（无聊）
+- ❌ 忽略响应式设计
+
+**示例布局技巧**:
+```css
+/* 不对称网格 */
+.grid-asymmetric {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 40px;
+}
+
+/* 重叠效果 */
+.overlap-container {
+  position: relative;
+}
+
+.overlap-item {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-20%, -20%);
+}
+
+/* 对角线流程 */
+.diagonal-section {
+  transform: skewY(-3deg);
+  padding: 100px 0;
+}
+
+.diagonal-section > * {
+  transform: skewY(3deg);
+}
+```
+
+### 5. 背景和视觉细节 (Background & Visual Details)
+
+**原则**: 背景营造氛围和深度。
+
+**Do**:
+- ✅ 渐变网格
+- ✅ 噪点纹理
+- ✅ 几何图案
+- ✅ 分层透明度
+- ✅ 戏剧性阴影
+- ✅ 装饰性边框
+- ✅ 自定义光标（如果适合风格）
+- ✅ 颗粒叠加效果
+
+**Don't**:
+- ❌ 纯色背景（除非极简风格）
+- ❌ 低质量或不相关的库存图片
+- ❌ 过度使用阴影（box-shadow 污染）
+
+**示例背景效果**:
+```css
+/* 渐变网格背景 */
+.gradient-grid {
+  background:
+    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
+    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
+    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background-size: 50px 50px, 50px 50px, 100% 100%;
+}
+
+/* 噪点纹理 */
+.noise-texture {
+  position: relative;
+}
+
+.noise-texture::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
+  pointer-events: none;
+}
+
+/* 玻璃态效果 */
+.glass-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+```
+
+## 避免通用 AI 美学
+
+**绝对禁止的元素**:
+- ❌ 过度使用的字体：Inter, Roboto, Arial, 系统字体
+- ❌ 俗套配色：白色背景 + 紫色渐变
+- ❌ 可预测的布局模式（居中卡片网格）
+- ❌ 缺乏特定上下文特征的千篇一律设计
+
+**如何避免**:
+- ✅ 为每个项目选择**不同**的字体
+- ✅ 在浅色/深色主题之间变化
+- ✅ 尝试不同的布局结构
+- ✅ 添加独特的品牌元素和个性
+
+## 实现复杂性与美学匹配
+
+**关键原则**: 代码复杂度应与设计愿景相匹配。
+
+### 极繁主义设计 → 复杂代码
+- 大量动画和过渡效果
+- 多层叠加元素
+- 复杂的交互状态
+- 详细的视觉效果（粒子、渐变、纹理）
+
+```jsx
+// 示例：复杂的动画卡片
+<motion.div
+  initial={{ opacity: 0, scale: 0.8, rotateX: -15 }}
+  animate={{ opacity: 1, scale: 1, rotateX: 0 }}
+  whileHover={{
+    scale: 1.05,
+    rotateY: 5,
+    boxShadow: "0 25px 50px rgba(0,0,0,0.2)"
+  }}
+  transition={{
+    type: "spring",
+    stiffness: 300,
+    damping: 20
+  }}
+>
+  {/* 复杂内容 */}
+</motion.div>
+```
+
+### 极简主义设计 → 精准代码
+- 克制的动画（仅在关键时刻）
+- 精确的间距和排版
+- 细微的过渡效果
+- 关注细节而非数量
+
+```css
+/* 示例：精致的极简主义 */
+.minimal-card {
+  padding: 60px;
+  background: #ffffff;
+  border: 1px solid rgba(0,0,0,0.08);
+  transition: border-color 0.3s ease;
+}
+
+.minimal-card:hover {
+  border-color: rgba(0,0,0,0.2);
+}
+
+.minimal-card h2 {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 2.5rem;
+  font-weight: 300;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin: 0 0 20px 0;
+}
+```
+
+## 工作流程
+
+### 第 1 步：理解需求
+- 阅读用户请求，提取关键信息
+- 确定项目类型（组件、页面、完整应用）
+- 识别技术栈（React、Vue、原生 HTML/CSS）
+
+### 第 2 步：设计思考
+- 回答设计思维流程中的 4 个问题
+- 选择明确的美学方向
+- 在心中可视化最终效果
+
+### 第 3 步：技术决策
+- 选择框架和工具
+- 决定动画库（Framer Motion、CSS、React Spring）
+- 确定字体来源
+
+### 第 4 步：实现
+- 编写语义化 HTML 结构
+- 实现 CSS 样式（使用 CSS 变量）
+- 添加交互和动画
+- 确保响应式设计
+
+### 第 5 步：精细化
+- 调整间距和排版
+- 优化动画时间
+- 测试不同屏幕尺寸
+- 确保可访问性（ARIA、键盘导航）
+
+## 示例场景
+
+### 场景 1: 创建着陆页
+
+**用户请求**: "帮我创建一个 SaaS 产品的着陆页"
+
+**设计思考**:
+- 目的：展示产品价值，吸引用户注册
+- 风格：现代科技 + 编辑风格，使用 Space Grotesk 字体，黑白 + 蓝色点缀
+- 布局：不对称，英雄区域占据 70% 屏幕，对角线流程
+- 差异化：独特的字体配对，大胆的排版层次
+
+**实现重点**:
+- Hero section 使用大字号标题（4-6rem）
+- 滚动触发的淡入动画
+- 玻璃态 CTA 按钮
+- 响应式网格展示功能
+
+### 场景 2: 设计仪表盘
+
+**用户请求**: "创建一个数据分析仪表盘"
+
+**设计思考**:
+- 目的：清晰展示数据，支持快速决策
+- 风格：实用主义 + 精致，使用 IBM Plex Sans，深色主题
+- 布局：网格系统，卡片式布局，数据可视化优先
+- 差异化：微妙的动画过渡，悬停显示详细信息
+
+**实现重点**:
+- 深色背景减少眼睛疲劳
+- 卡片使用柔和阴影和边框
+- 图表使用鲜明的点缀色
+- 加载状态使用骨架屏
+
+### 场景 3: React 组件库
+
+**用户请求**: "创建一套自定义按钮组件"
+
+**设计思考**:
+- 目的：可复用、可定制的按钮系统
+- 风格：灵活，支持多种变体
+- 技术：使用 styled-components 或 CSS modules
+- 差异化：独特的悬停效果和加载状态
+
+**实现重点**:
+- 主按钮、次要按钮、文本按钮变体
+- 大小变体（small, medium, large）
+- 加载和禁用状态
+- 平滑的过渡动画
+
+## 代码质量标准
+
+### 必须遵守:
+- ✅ 语义化 HTML（`<header>`, `<nav>`, `<main>`, `<article>`）
+- ✅ BEM 命名规范或 CSS Modules
+- ✅ CSS 变量用于颜色和间距
+- ✅ 移动优先的响应式设计
+- ✅ 可访问性（ARIA 标签，键盘导航）
+- ✅ 性能优化（图片懒加载，字体优化）
+
+### 禁止:
+- ❌ 内联样式（除非动态值）
+- ❌ 不必要的 `!important`
+- ❌ 硬编码的颜色值（使用 CSS 变量）
+- ❌ 未优化的图片
+- ❌ 无意义的类名（`.box1`, `.container2`）
+
+## 技术栈参考
+
+### 推荐工具:
+- **字体**: Google Fonts, Font Squirrel
+- **颜色**: Coolors.co, Adobe Color
+- **动画**: Framer Motion (React), Anime.js, GreenSock
+- **图标**: Heroicons, Lucide, Phosphor Icons
+- **CSS 框架**: Tailwind CSS (自定义配置), styled-components
+
+### 避免:
+- ❌ Bootstrap, Material-UI（容易产生通用外观）
+- ❌ 默认 Tailwind 配置（需要自定义）
+
+## 检查清单
+
+在完成实现后，验证以下内容:
+
+- [ ] 选择了独特的字体组合（不是 Inter/Roboto/Arial）
+- [ ] 颜色方案有明确的美学方向
+- [ ] 至少有 1-2 处精心设计的动画
+- [ ] 布局不是简单的居中网格
+- [ ] 有独特的视觉细节（背景、纹理、阴影）
+- [ ] 响应式设计在手机和桌面都好看
+- [ ] 可访问性标准达标（对比度、ARIA）
+- [ ] 代码清晰、可维护
+- [ ] 性能良好（无卡顿动画，快速加载）
+
+## 最后提醒
+
+> **创造性诠释是关键**。不要问用户"你想要什么颜色？"，而是基于上下文做出大胆的设计决策。每个设计都应该是独一无二的。在不同项目之间变化浅色/深色主题、字体和美学风格。
+
+> **追求卓越，而非完美**。一个有强烈个性的设计胜过一个"安全"但平庸的设计。敢于尝试，为用户带来惊喜。