feat(docs): add comprehensive design system and AI password manager architecture

- Add complete Figma design system with color, typography, and component specifications - Create detailed UI/UX design architecture for React Native implementation - Include AI-specific design elements with gradients, animations, and visual language - Add implementation guides for developers and step-by-step Figma instructions - Configure MCP server integration for Figma design workflow - Create SplashScreen component with AI gradient background and loading animations
2025-07-22 10:07:39 +08:00
parent ebbbabab6c
commit b5d4724d06
17 changed files with 4739 additions and 1 deletions
--- a/docs/figma-components-spec.md
+++ b/docs/figma-components-spec.md
@@ -0,0 +1,443 @@
+# AI密码管理器 - Figma组件规范
+
+## 🧩 核心组件库
+
+### 1. 按钮组件 (Button)
+
+#### Primary Button
+```
+尺寸：最小宽度120px，高度48px
+背景：Primary/500 (#0ea5e9)
+圆角：12px
+文字：白色，Body/Large，SemiBold
+内边距：16px水平，12px垂直
+阴影：Shadow/SM
+
+状态变体：
+- Default: Primary/500背景
+- Hover: Primary/600背景
+- Pressed: Primary/700背景 + 轻微缩放(0.98)
+- Disabled: Gray/300背景，Gray/500文字
+```
+
+#### Secondary Button  
+```
+尺寸：最小宽度120px，高度48px
+背景：透明
+边框：1px Primary/500
+圆角：12px
+文字：Primary/500，Body/Large，SemiBold
+内边距：16px水平，12px垂直
+
+状态变体：
+- Default: 透明背景，Primary/500边框和文字
+- Hover: Primary/50背景
+- Pressed: Primary/100背景
+- Disabled: Gray/300边框和文字
+```
+
+#### AI Button (特殊渐变按钮)
+```
+尺寸：最小宽度120px，高度48px
+背景：AI渐变 (135deg, #667eea 0%, #764ba2 100%)
+圆角：12px
+文字：白色，Body/Large，SemiBold
+内边距：16px水平，12px垂直
+特效：外发光 (#667eea, 模糊8px, 扩散2px)
+
+状态变体：
+- Default: AI渐变 + 发光效果
+- Hover: 渐变加深 + 发光增强
+- Pressed: 缩放0.98 + 发光减弱
+```
+
+#### Icon Button
+```
+尺寸：44×44px (最小触摸目标)
+背景：透明或Gray/100
+圆角：22px (圆形) 或 12px (圆角方形)
+图标：24×24px，居中
+颜色：Gray/600 或 Primary/500
+
+变体：
+- Round: 圆形背景
+- Square: 圆角方形背景
+- Ghost: 无背景，仅图标
+```
+
+### 2. 输入框组件 (Input)
+
+#### Text Input
+```
+尺寸：宽度358px，高度48px
+背景：白色
+边框：1px Gray/300，聚焦时Primary/500
+圆角：12px
+内边距：16px水平，12px垂直
+文字：Body/Medium，Gray/900
+占位符：Body/Medium，Gray/400
+
+状态变体：
+- Default: Gray/300边框
+- Focus: Primary/500边框 + 外发光
+- Error: Security/Low边框 + 错误图标
+- Disabled: Gray/100背景，Gray/400文字
+```
+
+#### Password Input
+```
+基于Text Input，增加：
+右侧图标区域：48×48px
+显示/隐藏图标：👁️ / 👁️‍🗨️，24×24px
+密码强度指示器：底部2px高度条，根据强度显示颜色
+
+强度颜色：
+- 很弱(0-20): Security/Low
+- 弱(21-40): Security/Medium  
+- 中等(41-60): #f59e0b
+- 强(61-80): Security/High
+- 很强(81-100): #059669
+```
+
+#### Search Input
+```
+基于Text Input，增加：
+左侧搜索图标：🔍，20×20px，距左边16px
+右侧AI图标：🤖，24×24px，AI渐变色
+背景：Gray/50 (更浅的背景)
+占位符："搜索密码或说'银行相关的密码'"
+```
+
+### 3. 卡片组件 (Card)
+
+#### Base Card
+```
+背景：白色
+圆角：12px
+阴影：Shadow/MD
+内边距：16px
+边框：无 (依靠阴影分层)
+
+变体：
+- Default: 标准阴影
+- Hover: 阴影增强到Shadow/LG
+- Pressed: 阴影减弱到Shadow/SM
+```
+
+#### Password Entry Card
+```
+基于Base Card
+尺寸：358×72px (紧凑版) 或 358×96px (展开版)
+
+布局结构：
+┌─[32×32px图标]─[网站名称]────────[⭐收藏]─┐
+│                [用户名]              │
+│  [强度指示器]  [标签]  [使用时间]      │
+└─────────────────────────────────────┘
+
+组件元素：
+- 网站图标：32×32px，圆角6px
+- 网站名称：Body/Large，Bold，Gray/900
+- 用户名：Body/Small，Gray/500
+- 强度指示器：5个圆点，根据强度显示颜色
+- 标签：小型徽章，圆角12px
+- 收藏星标：⭐，16×16px，可切换状态
+- 使用时间：Caption，Gray/400
+```
+
+#### Security Score Card
+```
+基于Base Card
+尺寸：358×100px (小版本) 或 358×160px (大版本)
+
+小版本布局：
+┌─[评分圆环60px]─[问题列表]─┐
+│                        │
+└────────────────────────┘
+
+大版本布局：
+┌─────────────────────────┐
+│    [评分圆环120px]       │
+│      居中显示           │
+└─────────────────────────┘
+
+评分圆环：
+- 外径：60px或120px
+- 线宽：4px或8px  
+- 背景色：Gray/200
+- 进度色：根据评分显示渐变
+- 中心数字：H2或H1样式
+- 状态文字：Body/Small或H3样式
+```
+
+#### AI Suggestion Card
+```
+基于Base Card，特殊样式：
+背景：AI渐变 (135deg, #667eea 0%, #764ba2 100%)
+文字：全部白色
+圆角：16px (更大圆角)
+外发光：AI/Glow效果
+
+内容结构：
+- 标题：💡 AI 建议，Body/Large，Bold
+- 建议列表：• 开头的要点，Body/Medium
+- 底部装饰：微妙的粒子动画效果
+```
+
+### 4. 徽章组件 (Badge)
+
+#### Status Badge
+```
+基础尺寸：自适应宽度，高度24px
+圆角：12px
+内边距：8px水平，4px垂直
+文字：Caption，Bold
+
+颜色变体：
+- Success: Security/High背景，白色文字
+- Warning: Security/Medium背景，白色文字
+- Error: Security/Low背景，白色文字
+- Info: Primary/500背景，白色文字
+- Neutral: Gray/500背景，白色文字
+```
+
+#### Tag Badge
+```
+基础尺寸：自适应宽度，高度28px
+圆角：14px
+内边距：12px水平，6px垂直
+文字：Body/Small，Medium
+
+样式变体：
+- Primary: Primary/100背景，Primary/700文字
+- Secondary: Gray/100背景，Gray/700文字
+- AI: AI渐变背景，白色文字 + AI图标
+```
+
+#### AI Badge (特殊标识)
+```
+尺寸：32×16px
+背景：AI渐变
+圆角：8px
+文字："AI"，10px，Bold，白色
+外发光：微妙的AI色发光
+用途：标识AI增强功能
+```
+
+### 5. 进度组件 (Progress)
+
+#### Linear Progress
+```
+容器：宽度100%，高度4px
+背景：Gray/200
+圆角：2px
+进度条：根据类型显示不同颜色，圆角2px
+
+颜色类型：
+- Default: Primary/500
+- Success: Security/High
+- Warning: Security/Medium
+- Error: Security/Low
+```
+
+#### Circular Progress
+```
+外径：60px或120px
+线宽：4px或8px
+背景圆环：Gray/200
+进度圆环：根据进度值显示颜色
+
+进度颜色映射：
+- 0-20%: Security/Low
+- 21-40%: Security/Medium
+- 41-60%: #f59e0b
+- 61-80%: Security/High  
+- 81-100%: #059669
+
+中心内容：
+- 数值：H2或H1样式
+- 单位：Body/Small，Gray/500
+- 状态：Body/Small或H3样式
+```
+
+#### Password Strength Indicator
+```
+容器：宽度100px，高度16px
+布局：5个圆点，间距4px
+圆点：直径8px
+
+强度显示：
+- 很弱(0-20): ●○○○○ Security/Low
+- 弱(21-40): ●●○○○ Security/Medium
+- 中等(41-60): ●●●○○ #f59e0b
+- 强(61-80): ●●●●○ Security/High
+- 很强(81-100): ●●●●● #059669
+```
+
+### 6. 开关组件 (Switch)
+
+#### Toggle Switch
+```
+轨道尺寸：44×24px
+轨道圆角：12px
+滑块尺寸：20×20px
+滑块圆角：10px (圆形)
+滑块边距：2px
+
+状态样式：
+- 关闭: Gray/300轨道，白色滑块，左对齐
+- 开启: Primary/500轨道，白色滑块，右对齐
+- 禁用: Gray/200轨道，Gray/300滑块
+
+动画：
+- 过渡时长：200ms
+- 缓动函数：ease-in-out
+- 滑块移动 + 轨道颜色变化
+```
+
+### 7. 导航组件 (Navigation)
+
+#### Top Navigation Bar
+```
+尺寸：390×76px (44px状态栏 + 32px内容)
+背景：模糊白色 (backdrop-filter: blur(20px))
+边框：底部1px Gray/100
+
+布局：
+- 左侧：返回按钮或Logo + 标题
+- 右侧：操作图标 (通知、设置、更多)
+- 内边距：16px水平
+
+标题样式：H3，Gray/900，SemiBold
+图标尺寸：24×24px，Gray/600
+```
+
+#### Tab Bar
+```
+尺寸：390×83px (49px内容 + 34px安全区域)
+背景：模糊白色
+边框：顶部1px Gray/100
+
+标签项：
+- 尺寸：每个约78px宽
+- 图标：24×24px
+- 文字：Caption，居中
+- 间距：图标和文字4px
+
+状态：
+- 未选中：Gray/400图标，Gray/500文字
+- 选中：Primary/500图标，Primary/500文字
+- 激活动画：图标轻微缩放 + 颜色过渡
+```
+
+### 8. 模态组件 (Modal)
+
+#### Bottom Sheet
+```
+背景：白色
+圆角：顶部16px
+阴影：Shadow/XL
+拖拽指示器：36×4px，Gray/300，圆角2px
+
+动画：
+- 进入：从底部滑入，300ms ease-out
+- 退出：向底部滑出，250ms ease-in
+- 背景遮罩：黑色，透明度0.4
+```
+
+#### Alert Dialog
+```
+容器：最大宽度320px
+背景：白色
+圆角：16px
+阴影：Shadow/XL
+内边距：24px
+
+布局：
+- 标题：H3，Gray/900，居中
+- 内容：Body/Medium，Gray/600，居中
+- 按钮区：水平排列，间距12px
+
+按钮样式：
+- 主要操作：Primary Button
+- 次要操作：Secondary Button
+```
+
+### 9. 列表组件 (List)
+
+#### List Item
+```
+尺寸：358×48px (标准) 或 358×64px (扩展)
+背景：白色
+分割线：底部1px Gray/100
+
+布局：
+- 左侧：图标区域 (可选)
+- 中间：标题 + 副标题 (可选)
+- 右侧：值/开关/箭头
+
+样式：
+- 标题：Body/Medium，Gray/900
+- 副标题：Body/Small，Gray/500
+- 值：Body/Medium，Gray/600
+- 箭头：16×16px，Gray/400
+```
+
+### 10. 加载组件 (Loading)
+
+#### Skeleton Screen
+```
+基础形状：圆角矩形，Gray/200背景
+动画：从左到右的光泽扫过效果
+时长：1.5s，无限循环
+
+常用尺寸：
+- 文字行：宽度100%，高度16px
+- 标题：宽度60%，高度24px
+- 头像：48×48px圆形
+- 卡片：358×72px矩形
+```
+
+#### Loading Spinner
+```
+尺寸：24×24px (小) 或 32×32px (大)
+样式：圆环，线宽2px或3px
+颜色：Primary/500
+动画：360度旋转，1s线性无限循环
+
+AI版本：
+- 颜色：AI渐变
+- 外发光：微妙的AI色发光
+- 脉冲效果：配合旋转的透明度变化
+```
+
+## 🎨 组件使用指南
+
+### 组件命名规范
+```
+组件类型/变体/状态
+例如：Button/Primary/Default
+     Card/PasswordEntry/Hover
+     Badge/AI/Default
+```
+
+### 组件状态管理
+每个交互组件都应包含以下状态：
+- Default (默认)
+- Hover (悬停) - 仅Web端
+- Pressed (按下)
+- Disabled (禁用)
+- Loading (加载中) - 如适用
+
+### 响应式适配
+- 小屏 (375px): 组件宽度减少16px
+- 大屏 (430px): 组件宽度增加40px
+- 间距保持8px网格对齐
+
+### 无障碍支持
+- 最小触摸目标：44×44px
+- 颜色对比度：符合WCAG AA标准
+- 状态指示：不仅依赖颜色，还有图标/文字
+- 语义标记：为屏幕阅读器提供适当标签
+
+这个组件规范确保了整个AI密码管理器界面的一致性和可用性，同时体现了安全、智能、未来感的设计理念。