ai-password-manager/docs/figma-components-spec.md

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密码管理器界面的一致性和可用性，同时体现了安全、智能、未来感的设计理念。