richard/ai-password-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
richarjiang
2025-07-22 10:07:39 +08:00
parent ebbbabab6c
commit b5d4724d06
17 changed files with 4739 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.kilocode/mcp.json Normal file
View File

@@ -0,0 +1,15 @@
{
"mcpServers": {
"figma-dev-mode": {
"type": "sse",
"url": "http://127.0.0.1:3845/sse",
"alwaysAllow": [
"get_image",
"create_design_system_rules",
"get_code",
"get_variable_defs",
"get_code_connect_map"
]
}
}
}

385
CLAUDE.md Normal file
View File

@@ -0,0 +1,385 @@
# AI密码管理器 - Figma设计系统集成规则
## 项目概述
这是一个基于React Native Expo的AI驱动密码管理器项目，需要与Figma设计系统无缝集成。
## 设计系统结构
### 1. Token定义
#### 颜色令牌 (Colors)
位置：[`constants/Colors.ts`](constants/Colors.ts)
当前结构：
```typescript
export const Colors = {
light: {
text: '#11181C',
background: '#fff',
tint: '#0a7ea4',
icon: '#687076',
tabIconDefault: '#687076',
tabIconSelected: '#0a7ea4',
},
dark: {
text: '#ECEDEE',
background: '#151718',
tint: '#fff',
icon: '#9BA1A6',
tabIconDefault: '#9BA1A6',
tabIconSelected: '#fff',
},
};
```
**需要扩展为AI密码管理器的完整颜色系统：**
```typescript
export const Colors = {
// 主色调
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9', // 主色
600: '#0284c7',
900: '#0c4a6e',
},
// AI渐变色
ai: {
primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
secondary: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
accent: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
},
// 安全状态色
security: {
high: '#10b981', // 绿色 - 安全
medium: '#f59e0b', // 橙色 - 警告
low: '#ef4444', // 红色 - 危险
critical: '#dc2626', // 深红 - 严重
},
// 功能色
success: '#10b981',
warning: '#f59e0b',
error: '#ef4444',
info: '#3b82f6',
// 中性色
gray: {
50: '#f9fafb',
100: '#f3f4f6',
500: '#6b7280',
900: '#111827',
},
// 暗色模式
dark: {
background: {
primary: '#000000',
secondary: '#1c1c1e',
tertiary: '#2c2c2e',
},
text: {
primary: '#ffffff',
secondary: '#ebebf5',
tertiary: '#ebebf599',
}
}
};
```
#### 字体令牌 (Typography)
需要在 `constants/` 目录下创建 `Typography.ts`：
```typescript
export const Typography = {
fontFamily: {
primary: 'SF Pro Display', // iOS系统字体
secondary: 'SF Pro Text',
mono: 'SF Mono',
},
fontSize: {
xs: 12,
sm: 14,
base: 16,
lg: 18,
xl: 20,
'2xl': 24,
'3xl': 30,
'4xl': 36,
},
fontWeight: {
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
heavy: '800',
},
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.75,
}
};
```
#### 间距令牌 (Spacing)
需要创建 `constants/Spacing.ts`：
```typescript
export const Spacing = {
xs: 4,
sm: 8,
md: 16,
lg: 24,
xl: 32,
'2xl': 48,
'3xl': 64,
'4xl': 80,
'5xl': 96,
};
```
### 2. 组件库
#### 当前组件结构
位置：[`components/`](components/)
现有组件：
- [`ThemedText.tsx`](components/ThemedText.tsx) - 主题化文本组件
- [`ThemedView.tsx`](components/ThemedView.tsx) - 主题化视图组件
- [`ui/`](components/ui/) - UI基础组件
**需要扩展的AI密码管理器组件：**
```
components/
├── ui/ # 基础UI组件
│ ├── Button.tsx # 按钮组件 (Primary/Secondary/AI)
│ ├── Input.tsx # 输入框 (Text/Password/Search)
│ ├── Card.tsx # 卡片组件
│ ├── Badge.tsx # 徽章组件
│ ├── Progress.tsx # 进度组件
│ ├── Switch.tsx # 开关组件
│ └── Loading.tsx # 加载组件
├── password/ # 密码相关组件
│ ├── PasswordEntryCard.tsx
│ ├── PasswordStrengthIndicator.tsx
│ └── SecurityScoreCard.tsx
├── ai/ # AI功能组件
│ ├── AIAssistantCard.tsx
│ ├── AIBadge.tsx
│ └── AISearchBar.tsx
└── navigation/ # 导航组件
├── TopNavigation.tsx
└── TabBar.tsx
```
#### 组件架构模式
使用React Native + TypeScript + 主题化设计：
```typescript
// 示例：Button组件
interface ButtonProps {
variant: 'primary' | 'secondary' | 'ai';
size: 'sm' | 'md' | 'lg';
disabled?: boolean;
loading?: boolean;
onPress: () => void;
children: React.ReactNode;
}
export const Button: React.FC<ButtonProps> = ({
variant,
size,
disabled,
loading,
onPress,
children
}) => {
// 实现逻辑
};
```
### 3. 框架和库
#### UI框架
- **React Native**: 0.79.5
- **Expo**: SDK 53
- **React**: 19.0.0
#### 样式库
- **React Native StyleSheet**: 原生样式系统
- **React Native Reanimated**: 3.17.4 (动画)
- **React Native Gesture Handler**: 2.24.0 (手势)
#### 路由系统
- **Expo Router**: 5.1.4 (基于文件系统的路由)
### 4. 资源管理
#### 图片和图标
位置：[`assets/`](assets/)
当前结构：
```
assets/
├── images/
│ ├── icon.png
│ ├── splash-icon.png
│ └── favicon.png
└── fonts/
└── SpaceMono-Regular.ttf
```
**需要扩展为：**
```
assets/
├── images/
│ ├── app-icons/ # 应用图标
│ ├── website-icons/ # 网站图标
│ └── illustrations/ # 插画素材
├── icons/
│ ├── security/ # 安全相关图标
│ ├── ai/ # AI功能图标
│ └── ui/ # 界面图标
└── fonts/ # 字体文件
```
#### 图标系统
使用 **Expo Vector Icons** (@expo/vector-icons):
```typescript
import { Ionicons, MaterialIcons } from '@expo/vector-icons';
// AI图标示例
<Ionicons name="robot" size={24} color={Colors.ai.primary} />
// 安全图标示例
<MaterialIcons name="security" size={24} color={Colors.security.high} />
```
### 5. 样式方法
#### React Native StyleSheet
```typescript
import { StyleSheet } from 'react-native';
import { Colors, Typography, Spacing } from '@/constants';
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.light.background,
padding: Spacing.md,
},
title: {
fontSize: Typography.fontSize['2xl'],
fontWeight: Typography.fontWeight.bold,
color: Colors.light.text,
},
});
```
#### 主题化组件模式
基于现有的 `useThemeColor` hook：
```typescript
import { useThemeColor } from '@/hooks/useThemeColor';
export function ThemedButton({ lightColor, darkColor, ...props }) {
const backgroundColor = useThemeColor(
{ light: lightColor, dark: darkColor },
'tint'
);
return (
<Pressable style={[{ backgroundColor }, styles.button]} {...props} />
);
}
```
### 6. 项目结构
#### 当前结构
```
ai-password-manager/
├── app/ # Expo Router页面
│ ├── (tabs)/ # 标签页面
│ └── _layout.tsx # 根布局
├── components/ # 可复用组件
├── constants/ # 常量和令牌
├── hooks/ # 自定义Hooks
├── assets/ # 静态资源
└── src/ # 源代码 (待扩展)
```
**建议的完整结构：**
```
ai-password-manager/
├── app/ # Expo Router页面
│ ├── (auth)/ # 认证页面
│ ├── (tabs)/ # 主要功能页面
│ │ ├── index.tsx # Dashboard
│ │ ├── vault.tsx # 密码库
│ │ ├── ai-assistant.tsx # AI助手
│ │ └── settings.tsx # 设置
│ └── modal/ # 模态页面
├── src/
│ ├── components/ # 组件库
│ ├── services/ # 业务服务
│ │ ├── api/ # API调用
│ │ ├── crypto/ # 加密服务
│ │ ├── biometric/ # 生物识别
│ │ └── ai/ # AI功能
│ ├── stores/ # 状态管理
│ ├── utils/ # 工具函数
│ ├── types/ # TypeScript类型
│ └── hooks/ # 自定义Hooks
├── constants/ # 设计令牌
├── assets/ # 静态资源
└── docs/ # 设计文档
```
## Figma集成规则
### 1. 设计令牌同步
- Figma中的颜色样式 → `constants/Colors.ts`
- Figma中的文字样式 → `constants/Typography.ts`
- Figma中的效果样式 → `constants/Effects.ts`
### 2. 组件映射
- Figma组件 → React Native组件
- 组件变体 → TypeScript接口属性
- 组件状态 → 组件props
### 3. 资源导出
- 图标：SVG格式 → `assets/icons/`
- 图片：PNG @1x/@2x/@3x → `assets/images/`
- 字体：TTF/OTF → `assets/fonts/`
### 4. 代码生成规则
使用Figma MCP工具生成的代码应该：
- 使用设计令牌而非硬编码值
- 遵循React Native最佳实践
- 包含TypeScript类型定义
- 支持主题切换
### 5. AI元素特殊处理
- AI渐变：使用`react-native-linear-gradient`
- AI动画：使用`react-native-reanimated`
- AI发光效果：使用`shadowColor`和`elevation`
## 开发工作流
### 1. 设计阶段
1. 在Figma中创建设计
2. 使用统一的设计令牌
3. 创建组件变体和状态
### 2. 开发阶段
1. 使用Figma MCP工具获取设计
2. 生成React Native代码
3. 集成到项目组件库
### 3. 测试阶段
1. 在不同设备尺寸测试
2. 验证暗色模式适配
3. 检查无障碍功能
这个规则文档确保了Figma设计与React Native代码的完美集成，同时保持了AI密码管理器的设计一致性和技术可行性。

361
docs/architecture.md Normal file
View File

@@ -0,0 +1,361 @@
# AI 密码管理器 - 系统架构设计
## 项目概述
基于 React Native Expo 的 AI 驱动密码管理器，支持跨应用自动填充、生物识别认证、智能密码分析和自然语言搜索。
### 技术栈分析
- **前端框架**: React Native 0.79.5 + Expo SDK 53
- **路由**: Expo Router 5.1.4 (基于文件系统的路由)
- **状态管理**: 待定 (建议 Zustand + React Query)
- **UI 组件**: 自定义组件 + Expo 原生组件
- **动画**: React Native Reanimated 3.17.4
- **手势**: React Native Gesture Handler 2.24.0
## 整体系统架构
```mermaid
graph TB
subgraph "客户端层 (React Native)"
A[主应用] --> B[密码管理模块]
A --> C[AI 功能模块]
A --> D[自动填充模块]
A --> E[生物识别模块]
A --> F[同步模块]
end
subgraph "扩展层 (iOS)"
G[AutoFill Extension]
H[Keyboard Extension]
I[Share Extension]
end
subgraph "云端服务层"
J[API Gateway]
K[认证服务]
L[密码存储服务]
M[AI 分析服务]
N[同步服务]
end
subgraph "AI 服务层"
O[网站分类 AI]
P[密码强度分析]
Q[安全评分引擎]
R[自然语言处理]
end
subgraph "数据层"
S[加密数据库]
T[用户配置]
U[AI 模型存储]
end
A --> G
A --> H
A --> I
B --> J
C --> M
F --> N
J --> K
J --> L
J --> M
M --> O
M --> P
M --> Q
M --> R
L --> S
K --> T
M --> U
```
## 核心模块设计
### 1. 前端架构 (React Native)
#### 1.1 目录结构
```
src/
├── app/ # Expo Router 页面
│ ├── (auth)/ # 认证相关页面
│ ├── (tabs)/ # 主要功能页面
│ └── modal/ # 模态页面
├── components/ # 可复用组件
│ ├── ui/ # 基础 UI 组件
│ ├── forms/ # 表单组件
│ └── password/ # 密码相关组件
├── services/ # 业务服务层
│ ├── api/ # API 调用
│ ├── crypto/ # 加密服务
│ ├── biometric/ # 生物识别
│ └── ai/ # AI 功能
├── stores/ # 状态管理
├── utils/ # 工具函数
├── types/ # TypeScript 类型
├── constants/ # 常量配置
└── hooks/ # 自定义 Hooks
```
#### 1.2 状态管理架构
```typescript
// 使用 Zustand 进行状态管理
interface AppState {
// 用户状态
user: UserState;
// 密码库状态
vault: VaultState;
// AI 功能状态
ai: AIState;
// 设置状态
settings: SettingsState;
}
```
### 2. iOS 扩展架构
#### 2.1 AutoFill Password Extension
- **功能**: 在 Safari 和其他应用中提供密码自动填充
- **实现**: iOS AutoFill Password Extension API
- **通信**: 通过 App Groups 与主应用共享数据
#### 2.2 Custom Keyboard Extension
- **功能**: 在任何应用中提供密码输入
- **实现**: iOS Custom Keyboard Extension
- **安全**: 限制网络访问，本地处理
#### 2.3 Share Extension
- **功能**: 从其他应用快速保存密码
- **实现**: iOS Share Extension
- **集成**: 与主应用密码库同步
### 3. 云端服务架构
#### 3.1 API Gateway
- **技术**: Node.js + Express / Fastify
- **功能**:
- 请求路由和负载均衡
- 身份验证和授权
- 请求限流和监控
- API 版本管理
#### 3.2 微服务设计
```mermaid
graph LR
A[API Gateway] --> B[用户服务]
A --> C[密码服务]
A --> D[AI 服务]
A --> E[同步服务]
A --> F[通知服务]
B --> G[用户数据库]
C --> H[密码数据库]
D --> I[AI 模型存储]
E --> J[同步队列]
```
### 4. AI 服务架构
#### 4.1 自建 AI 服务栈
```mermaid
graph TB
A[AI API Gateway] --> B[模型管理服务]
A --> C[推理服务]
A --> D[训练服务]
B --> E[模型版本控制]
C --> F[GPU 推理集群]
D --> G[训练数据管道]
subgraph "AI 模型"
H[网站分类模型]
I[密码强度模型]
J[NLP 搜索模型]
K[安全评分模型]
end
C --> H
C --> I
C --> J
C --> K
```
#### 4.2 AI 功能模块
1. **网站分类识别**
- 基于 URL 和页面内容的网站类型分类
- 自动标签生成和分类建议
2. **密码强度分析**
- 实时密码强度评估
- 个性化密码建议生成
3. **智能安全评分**
- 综合账户安全性评估
- 风险预警和改进建议
4. **自然语言搜索**
- 语义化密码搜索
- 智能查询理解和结果排序
## 数据模型设计
### 1. 核心数据结构
```typescript
// 密码条目
interface PasswordEntry {
id: string;
title: string;
username: string;
password: string; // 加密存储
url: string;
notes: string;
tags: string[];
category: string;
createdAt: Date;
updatedAt: Date;
lastUsed: Date;
// AI 增强字段
aiCategory?: string;
securityScore?: number;
riskLevel?: 'low' | 'medium' | 'high';
suggestions?: string[];
}
// 用户配置
interface UserSettings {
biometricEnabled: boolean;
autoFillEnabled: boolean;
syncEnabled: boolean;
aiFeatures: {
autoTagging: boolean;
securityAnalysis: boolean;
smartSearch: boolean;
};
security: {
sessionTimeout: number;
requireBiometricForView: boolean;
autoLockDelay: number;
};
}
```
### 2. 加密方案
#### 2.1 端到端加密架构
```mermaid
graph LR
A[用户主密码] --> B[PBKDF2 派生]
B --> C[主加密密钥]
C --> D[数据加密]
E[生物识别] --> F[设备密钥]
F --> G[本地密钥存储]
G --> C
C --> H[AES-256-GCM]
H --> I[加密数据]
```
#### 2.2 密钥管理
- **主密钥**: 用户主密码通过 PBKDF2 派生
- **设备密钥**: 生物识别保护的本地密钥
- **传输加密**: TLS 1.3 + 证书固定
- **存储加密**: AES-256-GCM 对称加密
## 安全架构
### 1. 多层安全防护
```mermaid
graph TB
A[用户界面层] --> B[应用安全层]
B --> C[传输安全层]
C --> D[服务安全层]
D --> E[数据安全层]
subgraph "安全措施"
F[生物识别认证]
G[应用锁定]
H[TLS 加密]
I[API 认证]
J[数据库加密]
end
A -.-> F
B -.-> G
C -.-> H
D -.-> I
E -.-> J
```
### 2. 威胁防护
- **中间人攻击**: 证书固定 + TLS 1.3
- **数据泄露**: 端到端加密 + 零知识架构
- **设备丢失**: 生物识别 + 远程擦除
- **恶意软件**: 应用签名验证 + 运行时保护
## 性能优化
### 1. 前端性能
- **懒加载**: 按需加载密码条目
- **虚拟化**: 大列表虚拟滚动
- **缓存策略**: 智能本地缓存
- **预加载**: 预测性数据加载
### 2. 后端性能
- **数据库优化**: 索引优化 + 查询缓存
- **CDN 加速**: 静态资源分发
- **负载均衡**: 多实例部署
- **缓存层**: Redis 分布式缓存
## 部署架构
### 1. 云端部署
```mermaid
graph TB
A[负载均衡器] --> B[API Gateway 集群]
B --> C[微服务集群]
C --> D[数据库集群]
E[CDN] --> F[静态资源]
G[监控系统] --> H[日志聚合]
I[备份系统] --> J[灾难恢复]
```
### 2. 容器化部署
- **容器编排**: Kubernetes
- **服务网格**: Istio
- **监控**: Prometheus + Grafana
- **日志**: ELK Stack
## 开发工具链
### 1. 前端工具
- **开发环境**: Expo Development Build
- **调试**: Flipper + React Native Debugger
- **测试**: Jest + Detox
- **代码质量**: ESLint + Prettier + TypeScript
### 2. 后端工具
- **API 文档**: OpenAPI/Swagger
- **测试**: Jest + Supertest
- **部署**: Docker + CI/CD
- **监控**: APM + 健康检查
## 合规性和隐私
### 1. 数据保护
- **GDPR 合规**: 数据最小化 + 用户控制
- **数据本地化**: 区域数据存储
- **审计日志**: 完整操作记录
- **数据删除**: 安全数据擦除
### 2. 安全认证
- **SOC 2 Type II**: 安全控制审计
- **ISO 27001**: 信息安全管理
- **渗透测试**: 定期安全评估
- **漏洞管理**: 持续安全监控
---
*此架构设计为 AI 密码管理器提供了完整的技术蓝图，确保安全性、可扩展性和用户体验的最佳平衡。*

324
docs/design-system-specs.md Normal file
View File

@@ -0,0 +1,324 @@
# AI密码管理器 - 设计系统详细规范
## 🎨 视觉设计原则
### 核心设计理念
1. **AI优先**: 所有设计元素都体现智能化特征
2. **安全感**: 通过视觉传达信任和安全
3. **未来感**: 现代化、前瞻性的界面设计
4. **简洁性**: 复杂功能的简单化呈现
5. **一致性**: 统一的视觉语言和交互模式
## 🌈 颜色系统详细规范
### 主色调 (Primary Blue)
```
用途：主要品牌色、重要按钮、链接、选中状态
- Primary 50: #f0f9ff (浅色背景)
- Primary 100: #e0f2fe (悬停背景)
- Primary 200: #bae6fd (边框色)
- Primary 300: #7dd3fc (禁用状态)
- Primary 400: #38bdf8 (悬停状态)
- Primary 500: #0ea5e9 (默认主色)
- Primary 600: #0284c7 (按下状态)
- Primary 700: #0369a1 (深色主题)
- Primary 800: #075985 (强调色)
- Primary 900: #0c4a6e (最深色)
```
### AI渐变色系
```
用途：AI功能标识、智能建议、未来感元素
- AI Gradient 1: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
- AI Gradient 2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
- AI Gradient 3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
- AI Glow: #667eea with 20% opacity blur
```
### 安全状态色系
```
高安全级别 (绿色系)
- Success 50: #ecfdf5
- Success 100: #d1fae5
- Success 500: #10b981 (主要成功色)
- Success 600: #059669 (深色成功色)
- Success 900: #064e3b
中等安全级别 (橙色系)
- Warning 50: #fffbeb
- Warning 100: #fef3c7
- Warning 500: #f59e0b (主要警告色)
- Warning 600: #d97706 (深色警告色)
- Warning 900: #92400e
低安全级别 (红色系)
- Error 50: #fef2f2
- Error 100: #fee2e2
- Error 500: #ef4444 (主要错误色)
- Error 600: #dc2626 (深色错误色)
- Error 900: #7f1d1d
```
### 中性色系
```
用途：文本、背景、边框、图标
- Gray 25: #fcfcfd (最浅背景)
- Gray 50: #f9fafb (卡片背景)
- Gray 100: #f3f4f6 (分割线)
- Gray 200: #e5e7eb (边框)
- Gray 300: #d1d5db (禁用边框)
- Gray 400: #9ca3af (占位符文本)
- Gray 500: #6b7280 (次要文本)
- Gray 600: #4b5563 (标签文本)
- Gray 700: #374151 (正文文本)
- Gray 800: #1f2937 (标题文本)
- Gray 900: #111827 (主要文本)
```
### 暗色模式色系
```
背景色
- Dark BG Primary: #000000 (主背景)
- Dark BG Secondary: #1c1c1e (卡片背景)
- Dark BG Tertiary: #2c2c2e (输入框背景)
- Dark BG Quaternary: #3a3a3c (悬停背景)
文本色
- Dark Text Primary: #ffffff (主要文本)
- Dark Text Secondary: #ebebf5 (次要文本)
- Dark Text Tertiary: #ebebf599 (60% 透明度)
- Dark Text Quaternary: #ebebf54d (30% 透明度)
边框色
- Dark Border Primary: #38383a
- Dark Border Secondary: #48484a
```
## 📝 字体系统
### 字体族
```
主字体：SF Pro Display (iOS) / Roboto (Android)
代码字体：SF Mono / Roboto Mono
```
### 字体大小和行高
```
Display (展示用)
- Display XL: 48px / 56px (1.167) - 主要标题
- Display LG: 36px / 44px (1.222) - 页面标题
- Display MD: 30px / 38px (1.267) - 卡片标题
Heading (标题用)
- H1: 24px / 32px (1.333) - 页面主标题
- H2: 20px / 28px (1.4) - 区块标题
- H3: 18px / 24px (1.333) - 小节标题
Body (正文用)
- Body XL: 18px / 28px (1.556) - 重要正文
- Body LG: 16px / 24px (1.5) - 标准正文
- Body MD: 14px / 20px (1.429) - 次要正文
- Body SM: 12px / 16px (1.333) - 辅助文本
Label (标签用)
- Label XL: 16px / 20px (1.25) - 大标签
- Label LG: 14px / 18px (1.286) - 标准标签
- Label MD: 12px / 16px (1.333) - 小标签
- Label SM: 10px / 14px (1.4) - 微标签
```
### 字重系统
```
- Thin: 100 (装饰用)
- Light: 300 (次要信息)
- Regular: 400 (正文)
- Medium: 500 (强调)
- Semibold: 600 (小标题)
- Bold: 700 (重要标题)
- Heavy: 800 (特殊强调)
- Black: 900 (品牌标题)
```
## 📏 间距系统
### 基础间距单位
```
基础单位：4px (0.25rem)
间距级别：
- 0: 0px
- 1: 4px (0.25rem)
- 2: 8px (0.5rem)
- 3: 12px (0.75rem)
- 4: 16px (1rem) - 标准间距
- 5: 20px (1.25rem)
- 6: 24px (1.5rem)
- 8: 32px (2rem)
- 10: 40px (2.5rem)
- 12: 48px (3rem)
- 16: 64px (4rem)
- 20: 80px (5rem)
- 24: 96px (6rem)
```
### 组件内间距
```
按钮内边距：
- Small: 8px 12px
- Medium: 12px 16px
- Large: 16px 24px
卡片内边距：
- Small: 12px
- Medium: 16px
- Large: 24px
输入框内边距：
- Height: 48px
- Horizontal: 16px
- Vertical: 12px
```
## 🎭 阴影系统
### 卡片阴影
```
Card Shadow XS:
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
Card Shadow SM:
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
Card Shadow MD:
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
Card Shadow LG:
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
Card Shadow XL:
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
```
### 按钮阴影
```
Button Shadow:
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
Button Shadow Hover:
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
Button Shadow Active:
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
```
### AI发光效果
```
AI Glow Subtle:
- box-shadow: 0 0 20px rgba(102, 126, 234, 0.15)
AI Glow Medium:
- box-shadow: 0 0 30px rgba(102, 126, 234, 0.25)
AI Glow Strong:
- box-shadow: 0 0 40px rgba(102, 126, 234, 0.35)
```
## 🔘 圆角系统
### 圆角级别
```
- None: 0px (直角)
- XS: 2px (微圆角)
- SM: 4px (小圆角)
- MD: 6px (中圆角)
- LG: 8px (大圆角)
- XL: 12px (特大圆角)
- 2XL: 16px (超大圆角)
- 3XL: 24px (巨大圆角)
- Full: 9999px (完全圆形)
```
### 组件圆角应用
```
按钮：8px (LG)
输入框：8px (LG)
卡片：12px (XL)
模态框：16px (2XL)
头像：9999px (Full)
标签：4px (SM)
```
## 🎯 图标系统
### 图标尺寸
```
- XS: 12px (微图标)
- SM: 16px (小图标)
- MD: 20px (标准图标)
- LG: 24px (大图标)
- XL: 32px (特大图标)
- 2XL: 48px (超大图标)
```
### 图标风格
```
- 线性图标：2px 线宽，圆角端点
- 填充图标：用于选中状态
- 双色图标：主色 + 灰色组合
- AI图标：渐变色处理
```
### 安全状态图标
```
- 高安全：🛡️ (盾牌) - 绿色
- 中等安全：⚠️ (警告) - 橙色
- 低安全：🚨 (警报) - 红色
- AI功能：🤖 (机器人) - 渐变色
- 生物识别：👆 (指纹) / 👁️ (面容)
```
## 📱 移动端适配
### 屏幕尺寸断点
```
- Small: 375px (iPhone SE)
- Medium: 390px (iPhone 14)
- Large: 430px (iPhone 14 Pro Max)
```
### 触摸目标尺寸
```
最小触摸目标：44px × 44px
推荐触摸目标：48px × 48px
舒适触摸目标：56px × 56px
```
### 安全区域
```
顶部安全区域：44px (状态栏)
底部安全区域：34px (Home Indicator)
侧边安全区域：16px (最小边距)
```
## 🌙 暗色模式适配
### 适配原则
```
1. 保持品牌色不变
2. 降低整体对比度
3. 使用真黑色背景
4. 适当调整阴影效果
5. 保持可读性标准
```
### 颜色映射
```
浅色模式 → 暗色模式
White (#ffffff) → Dark BG Primary (#000000)
Gray 50 (#f9fafb) → Dark BG Secondary (#1c1c1e)
Gray 100 (#f3f4f6) → Dark BG Tertiary (#2c2c2e)
Gray 900 (#111827) → Dark Text Primary (#ffffff)
Gray 500 (#6b7280) → Dark Text Secondary (#ebebf5)
```
这个详细的设计系统规范将确保整个AI密码管理器应用的视觉一致性和用户体验质量。请按照这些规范在Figma中创建您的设计系统。

513
docs/figma-ai-animations-spec.md Normal file
View File

@@ -0,0 +1,513 @@
# AI密码管理器 - AI元素与动画效果规范
## 🤖 AI视觉元素设计
### 1. AI渐变色系统
#### 主要AI渐变
```
AI/Primary:
- 角度：135度
- 起始色：#667eea (蓝紫色)
- 结束色：#764ba2 (深紫色)
- 用途：主要AI功能、按钮、卡片背景
AI/Secondary:
- 角度：135度
- 起始色：#f093fb (粉紫色)
- 结束色：#f5576c (珊瑚红)
- 用途：次要AI功能、强调元素
AI/Accent:
- 角度：135度
- 起始色：#4facfe (天蓝色)
- 结束色：#00f2fe (青色)
- 用途：AI状态指示、进度条、特殊效果
```
#### 渐变应用场景
- **AI助手卡片背景**：使用AI/Primary渐变
- **AI功能按钮**：使用AI/Primary渐变 + 发光效果
- **智能搜索栏AI图标**：使用AI/Primary渐变
- **AI建议徽章**：使用AI/Secondary渐变
- **AI处理进度条**：使用AI/Accent渐变
### 2. AI发光效果系统
#### 基础发光效果
```
AI/Glow/Subtle (微妙发光):
- 类型：外发光 (Drop Shadow)
- 颜色：#667eea
- X偏移：0px
- Y偏移：0px
- 模糊：6px
- 扩散：1px
- 透明度：25%
AI/Glow/Medium (中等发光):
- 类型：外发光
- 颜色：#667eea
- X偏移：0px
- Y偏移：0px
- 模糊：12px
- 扩散：2px
- 透明度：35%
AI/Glow/Strong (强发光):
- 类型：外发光
- 颜色：#667eea
- X偏移：0px
- Y偏移：0px
- 模糊：20px
- 扩散：4px
- 透明度：45%
```
#### 发光应用规则
- **AI按钮默认状态**：使用Subtle发光
- **AI按钮悬停状态**：使用Medium发光
- **AI功能激活状态**：使用Strong发光
- **AI徽章**：使用Subtle发光
- **AI处理中状态**：使用Medium发光 + 脉冲动画
### 3. AI图标系统
#### AI机器人图标
```
设计规范：
- 基础尺寸：24×24px
- 线条粗细：2px
- 圆角：2px
- 颜色：AI渐变填充或单色
图标元素：
- 头部：圆角矩形
- 眼睛：两个小圆点
- 嘴部：小横线
- 身体：矩形
- 天线：顶部两个小点
状态变化：
- 默认：静态AI渐变
- 思考中：眼睛闪烁动画
- 处理中：整体脉冲动画
- 完成：短暂的发光效果
```
#### AI徽章设计
```
尺寸：32×16px
背景：AI/Primary渐变
圆角：8px
文字："AI"
字体：10px, Bold
颜色：白色
效果：AI/Glow/Subtle
变体：
- 小尺寸：24×12px，8px字体
- 大尺寸：40×20px，12px字体
- 圆形：16×16px圆形，"AI"居中
```
### 4. 智能状态指示器
#### AI处理状态
```
等待状态：
- AI图标：静态，AI/Primary渐变
- 文字："AI准备就绪"
- 颜色：Gray/500
思考状态：
- AI图标：缓慢脉冲动画
- 文字："AI正在分析..."
- 颜色：AI/Primary
- 动画：1.5s循环，透明度60%-100%
处理状态：
- AI图标：快速脉冲 + 旋转
- 文字："AI正在处理..."
- 颜色：AI/Accent
- 动画：0.8s循环，多重效果
完成状态：
- AI图标：短暂强发光
- 文字："AI分析完成"
- 颜色：Security/High
- 动画：一次性发光效果
```
## 🎬 动画效果系统
### 1. 基础动画参数
#### 时长标准
```
微交互 (Micro): 150ms
- 按钮点击反馈
- 开关切换
- 小图标变化
快速 (Fast): 200ms
- 卡片悬停效果
- 颜色变化
- 小组件状态切换
标准 (Normal): 300ms
- 页面转场
- 模态框出现/消失
- 大组件状态变化
慢速 (Slow): 500ms
- 复杂动画
- 多步骤动画
- 强调性动画
```
#### 缓动函数
```
Ease Out: 快速开始，缓慢结束
- 用途：元素进入、按钮反馈
- 贝塞尔：cubic-bezier(0.25, 0.46, 0.45, 0.94)
Ease In: 缓慢开始，快速结束
- 用途：元素退出、消失动画
- 贝塞尔：cubic-bezier(0.55, 0.055, 0.675, 0.19)
Ease In Out: 两端缓慢，中间快速
- 用途：状态切换、循环动画
- 贝塞尔：cubic-bezier(0.645, 0.045, 0.355, 1)
AI Bounce: AI特有的弹性效果
- 用途：AI功能激活、完成反馈
- 贝塞尔：cubic-bezier(0.68, -0.55, 0.265, 1.55)
```
### 2. 页面转场动画
#### 推入转场 (Push Transition)
```
动画类型：Smart Animate
时长：300ms
缓动：Ease Out
效果：
- 新页面从右侧滑入
- 当前页面向左滑出
- 同时进行，无重叠
适用场景：
- 主要页面导航
- 详情页面进入
- 设置页面导航
```
#### 模态转场 (Modal Transition)
```
动画类型：Dissolve + Move In
时长：250ms
缓动：Ease Out
效果：
- 背景遮罩淡入 (透明度0→40%)
- 模态框从底部滑入
- 轻微的缩放效果 (95%→100%)
适用场景：
- 底部抽屉
- 确认对话框
- 操作菜单
```
### 3. AI特效动画
#### 脉冲呼吸动画 (AI Pulse)
```
动画类型：Scale + Opacity
时长：1.5s
循环：无限
缓动：Ease In Out
关键帧：
0%: Scale 1.0, Opacity 1.0
50%: Scale 1.05, Opacity 0.7
100%: Scale 1.0, Opacity 1.0
应用场景：
- AI思考状态
- 等待AI响应
- AI功能激活提示
```
#### 渐变流动动画 (Gradient Flow)
```
动画类型：Background Position
时长：3s
循环：无限
缓动：Linear
效果：
- 渐变背景位置移动
- 创造流动光效
- 角度保持135度不变
实现方式：
- 创建更大的渐变背景
- 通过遮罩控制可见区域
- 背景位置循环移动
应用场景：
- AI卡片背景
- AI按钮激活状态
- AI处理进度指示
```
#### 粒子扫描动画 (Particle Scan)
```
动画类型：Position + Opacity + Scale
时长：2s
循环：无限
缓动：Ease In Out
粒子属性：
- 数量：8-12个
- 尺寸：2-4px圆点
- 颜色：AI/Accent渐变
- 轨迹：弧形或直线
运动模式：
- 从左到右扫过
- 透明度渐变
- 轻微的缩放变化
应用场景：
- 安全扫描过程
- AI分析进度
- 数据处理状态
```
### 4. 交互反馈动画
#### 按钮点击反馈
```
AI Button 点击：
1. 按下：Scale 0.98 (150ms, Ease Out)
2. 释放：Scale 1.0 + 发光增强 (200ms, AI Bounce)
3. 完成：发光恢复正常 (300ms, Ease Out)
Primary Button 点击：
1. 按下：Scale 0.98 + 颜色加深 (150ms, Ease Out)
2. 释放：Scale 1.0 + 颜色恢复 (200ms, Ease Out)
Secondary Button 点击：
1. 按下：背景色出现 (150ms, Ease Out)
2. 释放：背景色消失 (200ms, Ease Out)
```
#### 卡片交互反馈
```
悬停效果：
- 阴影：Shadow/MD → Shadow/LG (200ms, Ease Out)
- 位移：Y轴向上2px (200ms, Ease Out)
点击效果：
- 缩放：Scale 0.98 (150ms, Ease Out)
- 阴影：Shadow/LG → Shadow/SM (150ms, Ease Out)
AI卡片特殊效果：
- 悬停：发光效果增强 (200ms, Ease Out)
- 点击：短暂的渐变流动加速
```
#### 开关切换动画
```
滑块移动：
- 距离：24px (开关宽度 - 滑块宽度)
- 时长：200ms
- 缓动：Ease In Out
轨道颜色变化：
- 同步进行
- Gray/300 ↔ Primary/500
- 时长：200ms
状态指示：
- 开启：轻微的发光效果
- 关闭：发光消失
```
### 5. 加载动画
#### 旋转加载器 (Spinner)
```
基础版本：
- 圆环：2px线宽，Primary/500颜色
- 旋转：360度，1s，Linear，无限循环
- 尺寸：24×24px或32×32px
AI版本：
- 圆环：AI/Primary渐变
- 旋转：360度，1.2s，Ease In Out，无限循环
- 发光：AI/Glow/Subtle
- 脉冲：配合旋转的透明度变化
```
#### 骨架屏动画 (Skeleton)
```
基础效果：
- 背景：Gray/200
- 动画：从左到右的光泽扫过
- 时长：1.5s，无限循环
光泽效果：
- 宽度：100px
- 颜色：白色渐变 (透明→50%→透明)
- 移动：从-100px到容器宽度+100px
- 缓动：Ease In Out
```
#### 进度条动画
```
线性进度：
- 宽度变化：0% → 目标百分比
- 时长：根据进度值计算 (最长2s)
- 缓动：Ease Out
AI进度条：
- 基础进度：AI/Accent渐变
- 流动效果：渐变位置移动
- 脉冲效果：轻微的高度变化
```
### 6. 状态转换动画
#### 密码强度变化
```
圆点填充动画：
- 每个圆点依次填充
- 间隔：100ms
- 颜色渐变：Gray/300 → 目标颜色
- 缩放：轻微的放大效果 (1.0 → 1.1 → 1.0)
强度提升特效：
- 新填充的圆点：短暂发光
- 颜色变化：平滑过渡
- 完成时：整体轻微脉冲
```
#### 安全评分变化
```
圆形进度条：
- 进度弧度：平滑增长
- 时长：1.5s
- 缓动：Ease Out
数字计数：
- 从当前值到目标值
- 时长：1s
- 缓动：Ease Out
- 数字跳动效果
评分提升庆祝：
- 完成时：短暂的发光效果
- 粒子效果：小星星从中心散开
- 颜色变化：根据新评分调整
```
### 7. AI功能专用动画
#### 语音识别动画
```
麦克风图标：
- 基础：静态状态
- 激活：脉冲动画 + 发光
- 识别中：音波扩散效果
- 完成：短暂的成功发光
音波效果：
- 3个同心圆
- 依次扩散
- 透明度：100% → 0%
- 时长：1s，无限循环
```
#### AI分析动画
```
分析过程：
1. 数据收集：粒子向中心聚集
2. 处理中：中心旋转 + 脉冲
3. 结果生成：粒子向外扩散
4. 完成：结果卡片滑入
时长分配：
- 收集：1s
- 处理：2-3s (根据实际处理时间)
- 生成：0.5s
- 完成：0.3s
```
#### 智能建议出现
```
建议卡片动画：
1. 从底部滑入 (300ms, Ease Out)
2. 轻微的弹性效果 (AI Bounce)
3. 发光效果渐现 (200ms)
4. 内容文字依次显示 (每行间隔100ms)
特殊效果：
- 背景渐变流动
- 边框发光脉冲
- AI图标旋转
```
## 🎯 动画实施指南
### Figma中的动画设置
#### Smart Animate设置
```
1. 创建组件的多个状态
2. 确保图层命名一致
3. 设置Prototype连接
4. 选择Smart Animate
5. 调整时长和缓动
```
#### 复杂动画实现
```
1. 使用多个中间帧
2. 创建动画序列
3. 利用延迟设置
4. 组合多种动画类型
```
### 开发实现建议
#### React Native Reanimated
```javascript
// AI脉冲动画示例
const pulseAnimation = useSharedValue(1);
useEffect(() => {
pulseAnimation.value = withRepeat(
withTiming(1.05, { duration: 750 }),
-1,
true
);
}, []);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ scale: pulseAnimation.value }],
opacity: interpolate(pulseAnimation.value, [1, 1.05], [1, 0.7])
}));
```
#### 性能优化
- 使用原生动画驱动
- 避免在主线程执行动画
- 合理控制同时运行的动画数量
- 使用shouldRasterizeIOS优化复杂动画
这个AI元素和动画规范确保了整个密码管理器界面具有一致的AI视觉语言和流畅的用户体验，同时体现了未来感和科技感。

443
docs/figma-components-spec.md Normal file
View File

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

443
docs/figma-design-guide.md Normal file
View File

@@ -0,0 +1,443 @@
# AI密码管理器 - Figma设计实施指南
## 🎯 设计目标
创建一个体现**安全性**、**智能化**和**未来感**的AI密码管理器界面，重点突出AI功能的无缝集成和直观的用户体验。
## 📐 Figma文件设置
### 1. 创建新文件
- 文件名：`AI密码管理器 - 设计系统`
- 画板尺寸：iPhone 14 (390 × 844px)
- 网格：8px基础网格系统
### 2. 页面结构
```
📄 Cover (封面页)
📄 Design System (设计系统)
📄 Components (组件库)
📄 Screens (界面设计)
📄 Prototypes (交互原型)
```
## 🎨 设计系统实施
### 第一步：创建颜色样式
#### 主色调系统
```
Primary/50: #f0f9ff
Primary/100: #e0f2fe
Primary/500: #0ea5e9 (主色)
Primary/600: #0284c7
Primary/900: #0c4a6e
```
#### AI渐变色
```
AI/Primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
AI/Secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
AI/Accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
```
#### 安全状态色
```
Security/High: #10b981 (安全-绿色)
Security/Medium: #f59e0b (警告-橙色)
Security/Low: #ef4444 (危险-红色)
Security/Critical: #dc2626 (严重-深红)
```
### 第二步：创建文字样式
#### 标题系统
```
H1/Bold: SF Pro Display, 32px, Bold, 32px行高
H2/Bold: SF Pro Display, 24px, Bold, 28px行高
H3/SemiBold: SF Pro Display, 20px, SemiBold, 24px行高
H4/Medium: SF Pro Display, 18px, Medium, 22px行高
```
#### 正文系统
```
Body/Large: SF Pro Text, 18px, Regular, 24px行高
Body/Medium: SF Pro Text, 16px, Regular, 22px行高
Body/Small: SF Pro Text, 14px, Regular, 20px行高
Caption: SF Pro Text, 12px, Regular, 16px行高
```
### 第三步：创建效果样式
#### 阴影系统
```
Shadow/SM: Y:1, Blur:2, Opacity:5%
Shadow/MD: Y:4, Blur:6, Opacity:10%
Shadow/LG: Y:10, Blur:15, Opacity:15%
Shadow/XL: Y:20, Blur:25, Opacity:25%
```
#### AI发光效果
```
AI/Glow: 外发光, 颜色:#667eea, 模糊:8px, 扩散:2px
Security/Glow: 外发光, 颜色:#10b981, 模糊:6px, 扩散:1px
```
## 📱 界面设计详细规范
### 1. 启动页面 (Splash Screen)
#### 设计要点
- **背景**：AI主渐变 (135度，#667eea到#764ba2)
- **Logo**：120×120px，白色，居中放置
- **标题**："AI密码管家"，H1样式，白色，Logo下方24px
- **加载器**：5个圆点，白色，流动动画效果
#### 具体实施步骤
1. 创建390×844px画板，命名"Splash Screen"
2. 添加渐变背景，使用AI/Primary渐变
3. 放置Logo图标（可用圆形+锁图标组合）
4. 添加标题文字，应用H1样式
5. 创建加载动画组件（5个圆点，透明度变化）
### 2. 认证页面 (Authentication)
#### 布局结构
```
┌─────────────────────────────────┐
│ Status Bar (44px) │
├─────────────────────────────────┤
│ Safe Area Top (48px) │
├─────────────────────────────────┤
│ │
│ Logo (80×80px) │ ← 距顶部120px
│ 欢迎回来 (H1) │ ← Logo下方32px
│ 请验证您的身份 (Body/Medium) │ ← 标题下方8px
│ │
│ [生物识别区域] │ ← 中心区域
│ 指纹图标 (64×64px) │
│ 使用生物识别 (Body/Large) │
│ │
│ ──── 或 ──── (分割线) │
│ │
│ [输入主密码] (Secondary Button) │
│ │
│ 忘记密码？(Text Button) │
│ │
├─────────────────────────────────┤
│ Safe Area Bottom (34px) │
└─────────────────────────────────┘
```
#### 生物识别状态设计
- **等待状态**：指纹图标，Gray/400颜色
- **识别中**：指纹图标，AI渐变色 + 脉冲动画
- **成功状态**：✓图标，Security/High颜色
- **失败状态**：✗图标，Security/Low颜色
### 3. 主界面 (Dashboard)
#### 导航栏设计
```
高度：76px (44px状态栏 + 32px内容)
背景：模糊效果 + 半透明白色
左侧：🔒 + "AI密码管家" (H3样式)
右侧：通知图标 + 设置图标 (24×24px)
```
#### 搜索栏设计
```
高度：48px
背景：Gray/50，圆角24px
左侧：搜索图标 (20×20px)
占位符："搜索密码或说'银行相关的密码'"
右侧：AI机器人图标 (24×24px，AI渐变色)
```
#### 安全状态卡片
```
尺寸：358×100px (左右边距16px)
背景：白色，圆角12px，Shadow/MD
布局：左侧评分圆环 + 右侧问题列表
左侧评分区域：
- 圆形进度条：直径60px，线宽4px
- 评分数字：H2样式，居中
- 状态文字：Body/Small，Gray/500
右侧问题区域：
- ⚠️ 5个弱密码 (Security/Medium色)
- 🔄 3个过期密码 (Security/Medium色)
- 🔐 建议2FA (Security/High色)
```
#### 快速操作按钮
```
布局：三个等宽按钮，间距12px
按钮尺寸：110×56px，圆角12px
样式：白色背景，Shadow/SM，图标+文字
按钮内容：
1. ➕ 添加密码
2. 📱 扫码登录
3. 🎲 生成密码
```
#### 密码条目卡片
```
尺寸：358×72px
背景：白色，圆角8px，Shadow/SM
布局：左侧图标 + 中间信息 + 右侧状态
左侧：网站图标 (32×32px，圆角6px)
中间：
- 网站名称 (Body/Large，Bold)
- 用户名 (Body/Small，Gray/500)
右侧：
- 密码强度指示器
- 标签徽章
- 收藏星标
```
### 4. 密码库页面 (Vault)
#### 筛选标签栏
```
高度：40px
背景：透明
标签样式：圆角20px，内边距12×8px
选中状态：Primary/500背景，白色文字
未选中：Gray/100背景，Gray/700文字
标签内容：[全部] [收藏] [分类] [标签]
```
#### 排序选择器
```
高度：32px
样式：Body/Small + 下拉箭头
默认：最近使用 ↓
选项：最近使用、字母排序、安全评分
```
#### 密码条目（展开版）
```
尺寸：358×96px
背景：白色，圆角8px，Shadow/SM
布局：
- 顶部：网站图标 + 网站全名
- 中部：用户名/账号
- 底部：安全信息行 + 标签行
安全信息行：
- 密码强度：🔒●●●●○ 强度：80/100
- 使用时间：3天前使用
标签行：
- 标签徽章：🏷️工作 🏷️开发
- 收藏星标：⭐
```
### 5. AI助手页面
#### 安全评分卡片（大版本）
```
尺寸：358×160px
背景：白色，圆角16px，Shadow/LG
中心圆形进度条：
- 直径：120px
- 线宽：8px
- 渐变色：根据评分显示不同颜色
- 中心数字：H1样式，48px
- 状态文字：H3样式，评分下方
```
#### 安全问题卡片
```
尺寸：358×64px
背景：白色，圆角12px，Shadow/SM
左边框：4px宽，根据严重程度显示颜色
布局：
- 左侧：问题图标 (24×24px)
- 中间：问题描述 (Body/Medium)
- 右侧：箭头图标 (16×16px)
颜色编码：
- 严重：Security/Low (红色边框)
- 警告：Security/Medium (橙色边框)
- 建议：Security/High (绿色边框)
```
#### AI建议卡片
```
尺寸：358×120px
背景：AI渐变背景
圆角：16px
文字：白色
布局：
- 顶部：🤖 + "基于您的使用习惯，我发现："
- 中部：建议列表（• 开头的要点）
- 底部：微妙的AI粒子动画效果
```
### 6. 搜索页面
#### 语音搜索按钮
```
尺寸：358×48px
背景：AI渐变
圆角：24px
内容：🎤 + "语音搜索"
文字：白色，Body/Large
```
#### 智能分类卡片
```
尺寸：358×56px
背景：白色，圆角12px，Shadow/SM
布局：
- 左侧：分类图标 (32×32px，圆形背景)
- 中间：分类名称 + 数量
- 右侧：预览文字 (Gray/400)
分类图标背景色：
- 🏦 银行金融：蓝色渐变
- 💼 工作相关：紫色渐变
- 🛒 购物网站：橙色渐变
- 🎮 游戏娱乐：绿色渐变
```
### 7. 密码详情页面
#### 大图标区域
```
尺寸：80×80px
背景：Gray/100，圆角16px
图标：网站favicon或默认图标
位置：页面顶部居中，距导航栏32px
```
#### 信息字段
```
字段容器：358×48px，底部边框1px Gray/200
字段布局：
- 标签：Body/Small，Gray/500，顶部对齐
- 内容：Body/Medium，Gray/900，标签下方4px
- 操作按钮：右侧，24×24px图标
密码字段特殊处理：
- 默认显示：●●●●●●●●●●●●
- 显示按钮：👁️ 图标
- 复制按钮：📋 图标
```
#### AI建议区域
```
背景：AI渐变，圆角12px
内边距：16px
文字：白色
内容：
- 标题：💡 AI 建议 (Body/Large，Bold)
- 建议列表：• 开头的要点 (Body/Medium)
- 微妙的发光效果边框
```
#### 标签组
```
布局：横向排列，可换行
标签样式：
- 背景：Primary/100
- 文字：Primary/700
- 圆角：16px
- 内边距：8×12px
- 间距：8px
```
### 8. 设置页面
#### 用户信息卡片
```
尺寸：358×80px
背景：白色，圆角12px，Shadow/SM
布局：
- 左侧：用户头像 (48×48px，圆形)
- 中间：用户名 + 邮箱
- 右侧：编辑图标
```
#### 设置分组
```
分组标题：
- 样式：Body/Small，Gray/500，Bold
- 位置：距上一组24px，距设置项12px
设置项：
- 高度：48px
- 背景：白色
- 分割线：底部1px，Gray/100
设置项布局：
- 左侧：图标 (24×24px) + 标题
- 右侧：开关/值/箭头
```
#### 开关组件
```
尺寸：44×24px
轨道：圆角12px
滑块：20×20px圆形，2px边距
状态：
- 开启：Primary/500背景，白色滑块
- 关闭：Gray/300背景，白色滑块
- 动画：200ms缓动过渡
```
## 🎭 AI元素和未来感设计
### AI视觉元素
1. **渐变运用**：所有AI功能使用蓝紫科技渐变
2. **发光效果**：重要AI功能添加微妙外发光
3. **动画效果**：
- 脉冲呼吸：AI处理时的呼吸灯效果
- 渐变流动：AI卡片的渐变色流动
- 粒子效果：安全扫描的微粒动画
4. **智能徽章**：AI增强功能显示渐变"AI"标识
### 未来感设计元素
1. **毛玻璃效果**：导航栏和浮层使用模糊背景
2. **微妙阴影**：营造层次感和深度
3. **圆角设计**：现代化的圆角处理
4. **渐变色彩**：科技感的渐变色运用
5. **动态反馈**：流畅的交互动画
### 安全视觉语言
1. **颜色编码**：一致的安全状态颜色系统
2. **图标系统**：统一的安全状态图标
3. **进度可视化**：密码强度的直观表示
4. **状态反馈**：即时的视觉状态变化
## 🔄 交互原型设计
### 页面转场动画
- **推入效果**：新页面从右侧滑入
- **时长**：300ms
- **缓动**：ease-out
### 组件交互
- **按钮点击**：轻微缩放 + 颜色变化
- **卡片点击**：轻微阴影增强
- **开关切换**：滑块平滑移动
### AI功能交互
- **语音搜索**：麦克风图标脉冲动画
- **AI分析**：进度条 + 粒子效果
- **智能建议**：卡片从下方滑入
这个设计指南将帮助您在Figma中创建出专业、一致且具有未来感的AI密码管理器界面。每个界面都体现了安全性、智能化和用户友好的设计理念。

212
docs/figma-design-summary.md Normal file
View File

@@ -0,0 +1,212 @@
# AI密码管理器 - Figma设计完整总结
## 🎯 项目概述
我已经为您的AI密码管理器创建了一套完整的Figma设计系统和界面设计规范。这个设计体现了**安全性**、**智能化**和**未来感**的核心理念，为用户提供直观、高效的密码管理体验。
## 📚 设计文档结构
### 1. 核心设计文档
- **[`figma-design-system-rules.md`](figma-design-system-rules.md)** - 设计系统基础规范
- **[`figma-design-guide.md`](figma-design-guide.md)** - 详细设计指南
- **[`figma-components-spec.md`](figma-components-spec.md)** - 组件库规范
- **[`figma-implementation-steps.md`](figma-implementation-steps.md)** - 实施步骤指南
- **[`figma-ai-animations-spec.md`](figma-ai-animations-spec.md)** - AI元素和动画规范
### 2. 原始需求文档
- **[`architecture.md`](architecture.md)** - 系统架构设计
- **[`interface-designs.md`](interface-designs.md)** - 界面设计规范
- **[`ui-ux-design.md`](ui-ux-design.md)** - UI/UX设计架构
## 🎨 设计系统亮点
### 颜色系统
- **主色调**：科技蓝 (#0ea5e9) 体现专业和信任
- **AI渐变**：蓝紫渐变 (#667eea → #764ba2) 突出AI功能
- **安全状态色**：绿色(安全)、橙色(警告)、红色(危险)的直观编码
- **暗色模式**：完整的暗色主题支持
### 字体系统
- **主字体**：SF Pro Display/Text (iOS系统字体)
- **层级清晰**：H1-H4标题 + Body正文 + Caption说明
- **可访问性**：符合WCAG AA标准的对比度
### AI视觉语言
- **渐变运用**：所有AI功能使用统一的蓝紫渐变
- **发光效果**：三级发光强度 (微妙/中等/强烈)
- **智能徽章**：AI标识的一致性应用
- **动画反馈**：脉冲、流动、粒子等AI特效
## 📱 核心界面设计
### 1. 启动页面 (Splash Screen)
- **背景**：AI主渐变营造科技感
- **Logo**：120×120px，白色，居中设计
- **加载器**：5个圆点流动动画
### 2. 认证页面 (Authentication)
- **生物识别**：64×64px指纹图标，多状态设计
- **状态反馈**：等待/识别中/成功/失败的视觉变化
- **备选方案**：主密码输入的优雅降级
### 3. 主界面 (Dashboard)
- **安全评分**：大型圆形进度条，直观显示安全状态
- **快速操作**：添加密码、扫码、生成密码的便捷入口
- **智能搜索**：支持自然语言的AI搜索栏
- **密码条目**：信息丰富的卡片式设计
### 4. 密码库 (Vault)
- **筛选系统**：全部/收藏/分类/标签的多维度筛选
- **排序选项**：最近使用/字母/安全评分的灵活排序
- **条目展示**：紧凑版(72px)和展开版(96px)两种模式
### 5. AI助手 (AI Assistant)
- **安全仪表板**：大型评分圆环(120×120px)
- **问题分析**：颜色编码的安全问题卡片
- **智能建议**：AI渐变背景的建议卡片
- **快速修复**：一键解决安全问题
### 6. 搜索功能 (Search)
- **语音搜索**：AI渐变按钮，支持自然语言
- **智能分类**：AI自动分类的密码组织
- **快速筛选**：常用筛选条件的快速访问
- **搜索历史**：个性化的搜索记录
### 7. 密码详情 (Password Detail)
- **大图标**：80×80px网站图标展示
- **信息字段**：清晰的标签-内容-操作布局
- **AI建议**：个性化的安全改进建议
- **标签系统**：灵活的分类标签管理
### 8. 设置页面 (Settings)
- **用户信息**：头像+基本信息的卡片设计
- **分组设置**：安全/AI功能/同步/应用的逻辑分组
- **开关控件**：44×24px的标准iOS开关
## 🧩 组件库系统
### 基础组件 (10类)
1. **Button** - 主要/次要/AI/图标按钮
2. **Input** - 文本/密码/搜索输入框
3. **Card** - 基础/密码条目/安全评分/AI建议卡片
4. **Badge** - 状态/标签/AI徽章
5. **Progress** - 线性/圆形/密码强度进度条
6. **Switch** - iOS风格的开关控件
7. **Navigation** - 顶部导航/标签栏
8. **Modal** - 底部抽屉/警告对话框
9. **List** - 列表项组件
10. **Loading** - 骨架屏/加载器
### 组件特色
- **状态完整**：Default/Hover/Pressed/Disabled四种状态
- **响应式**：适配不同屏幕尺寸
- **无障碍**：44×44px最小触摸目标
- **AI增强**：特殊的AI版本组件
## 🎬 动画效果系统
### 动画分类
- **页面转场**：300ms推入效果
- **组件交互**：150-200ms微交互
- **AI特效**：脉冲/渐变流动/粒子扫描
- **状态反馈**：即时的视觉反馈
### AI专用动画
- **脉冲呼吸**：1.5s循环，AI思考状态
- **渐变流动**：3s循环，AI卡片背景
- **粒子扫描**：2s循环，安全分析过程
- **语音识别**：音波扩散效果
## 🚀 实施指南
### Figma文件结构
```
AI密码管理器设计系统/
├── 🎨 Design System (颜色/字体/效果样式)
├── 🧩 Components (组件库)
├── 📱 Screens (界面设计)
├── 🔄 Prototypes (交互原型)
└── 📚 Documentation (设计文档)
```
### 开发交接
- **设计标注**：完整的尺寸和间距标注
- **资源导出**：SVG图标、多倍率图片
- **代码生成**：React Native组件代码
- **动画实现**：Reanimated动画参数
## ✨ 设计亮点
### 1. AI驱动的视觉语言
- 统一的AI渐变色系统
- 智能状态的视觉反馈
- AI功能的特殊标识
- 未来感的动画效果
### 2. 安全优先的设计理念
- 直观的安全状态编码
- 密码强度的可视化
- 生物识别的友好界面
- 安全问题的清晰提示
### 3. 用户体验优化
- 自然语言搜索支持
- 手势操作的便捷性
- 信息层级的清晰性
- 无障碍功能的完整支持
### 4. 技术实现友好
- 基于React Native的组件设计
- 性能优化的动画参数
- 响应式的布局系统
- 模块化的组件架构
## 📋 质量保证
### 设计一致性
- ✅ 统一的设计令牌系统
- ✅ 一致的组件状态设计
- ✅ 规范的间距和圆角
- ✅ 协调的颜色和字体
### 可用性标准
- ✅ WCAG AA无障碍标准
- ✅ 44×44px最小触摸目标
- ✅ 高对比度的颜色搭配
- ✅ 清晰的状态反馈
### 技术可行性
- ✅ React Native兼容的设计
- ✅ 性能友好的动画效果
- ✅ 可扩展的组件架构
- ✅ 完整的开发文档
## 🎯 下一步行动
### 立即可执行
1. **在Figma中创建新文件**，按照实施步骤指南开始设计
2. **建立设计系统**，创建颜色、字体、效果样式
3. **构建组件库**，从基础组件开始逐步完善
4. **设计核心界面**，优先完成主要用户流程
### 团队协作
1. **设计评审**：与团队成员讨论设计方案
2. **用户测试**：验证界面的可用性和易用性
3. **开发对接**：确保设计的技术可实现性
4. **迭代优化**：根据反馈持续改进设计
## 📞 技术支持
如果在实施过程中遇到任何问题，可以参考：
- 详细的组件规范文档
- 完整的实施步骤指南
- AI动画效果的具体参数
- 开发友好的设计标注
这套设计系统将帮助您创建出专业、现代、具有未来感的AI密码管理器界面，为用户提供安全、智能、愉悦的使用体验。
---
*设计完成时间：2024年1月*
*设计师：AI Assistant*
*项目：AI密码管理器 Figma设计系统*

352
docs/figma-design-system-rules.md Normal file
View File

@@ -0,0 +1,352 @@
# AI密码管理器 - Figma设计系统规范
## 项目概述
基于React Native Expo的AI驱动密码管理器，需要体现安全性、智能化和未来感的设计理念。
## 设计系统结构
### 1. Token定义
#### 颜色系统
```typescript
// 主色调 - AI科技感蓝紫渐变
Primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9', // 主色
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
// AI渐变色
AI_Gradient: {
primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
secondary: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
accent: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
}
// 安全状态色
Security: {
high: '#10b981', // 绿色 - 安全
medium: '#f59e0b', // 橙色 - 警告
low: '#ef4444', // 红色 - 危险
critical: '#dc2626', // 深红 - 严重
}
// 功能色
Functional: {
success: '#10b981',
warning: '#f59e0b',
error: '#ef4444',
info: '#3b82f6',
}
// 中性色
Gray: {
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
400: '#9ca3af',
500: '#6b7280',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
900: '#111827',
}
// 暗色模式
Dark: {
background: {
primary: '#000000',
secondary: '#1c1c1e',
tertiary: '#2c2c2e',
},
text: {
primary: '#ffffff',
secondary: '#ebebf5',
tertiary: '#ebebf599',
}
}
```
#### 字体系统
```typescript
Typography: {
// 字体族
fontFamily: {
primary: 'SF Pro Display', // iOS系统字体
secondary: 'SF Pro Text',
mono: 'SF Mono',
},
// 字体大小
fontSize: {
xs: 12,
sm: 14,
base: 16,
lg: 18,
xl: 20,
'2xl': 24,
'3xl': 30,
'4xl': 36,
},
// 字重
fontWeight: {
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
heavy: '800',
},
// 行高
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.75,
}
}
```
#### 间距系统
```typescript
Spacing: {
xs: 4,
sm: 8,
md: 16,
lg: 24,
xl: 32,
'2xl': 48,
'3xl': 64,
'4xl': 80,
'5xl': 96,
}
```
#### 圆角系统
```typescript
BorderRadius: {
none: 0,
sm: 4,
md: 8,
lg: 12,
xl: 16,
'2xl': 24,
full: 9999,
}
```
#### 阴影系统
```typescript
Shadow: {
sm: {
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 1,
},
md: {
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 6,
elevation: 3,
},
lg: {
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.15,
shadowRadius: 15,
elevation: 6,
},
xl: {
shadowOffset: { width: 0, height: 20 },
shadowOpacity: 0.25,
shadowRadius: 25,
elevation: 10,
}
}
```
### 2. 组件库架构
#### 基础组件
- **Button**: 主要按钮、次要按钮、文本按钮、图标按钮
- **Input**: 文本输入、密码输入、搜索输入
- **Card**: 基础卡片、密码条目卡片、安全状态卡片
- **Badge**: 状态徽章、标签徽章、AI徽章
- **Avatar**: 用户头像、网站图标
- **Progress**: 进度条、圆形进度、安全评分
#### 复合组件
- **PasswordStrengthIndicator**: 密码强度指示器
- **SecurityScoreCard**: 安全评分卡片
- **PasswordEntryCard**: 密码条目卡片
- **AIAssistantCard**: AI助手卡片
- **SearchBar**: 智能搜索栏
- **BiometricPrompt**: 生物识别提示
#### 布局组件
- **Screen**: 页面容器
- **Section**: 区块容器
- **List**: 列表容器
- **Grid**: 网格容器
### 3. 图标系统
#### 图标库
- **系统图标**: SF Symbols (iOS), Material Icons (Android)
- **自定义图标**: 安全相关、AI相关、密码管理相关
- **网站图标**: Favicon获取和显示
#### 图标规范
- **尺寸**: 16px, 20px, 24px, 32px, 48px, 64px
- **样式**: 线性、填充、双色调
- **颜色**: 继承文本颜色或指定颜色
### 4. 动画系统
#### 过渡动画
```typescript
Transitions: {
// 页面转场
screen: {
duration: 300,
easing: 'ease-out',
},
// 组件状态变化
component: {
duration: 200,
easing: 'ease-in-out',
},
// 微交互
micro: {
duration: 150,
easing: 'ease-out',
}
}
```
#### AI特效动画
- **脉冲效果**: AI处理时的呼吸灯效果
- **渐变流动**: AI功能的渐变色流动
- **粒子效果**: 安全扫描的粒子动画
- **发光效果**: 重要AI功能的发光边框
### 5. 响应式设计
#### 断点系统
```typescript
Breakpoints: {
// iPhone SE (3rd gen)
small: { width: 375, height: 667 },
// iPhone 14
medium: { width: 390, height: 844 },
// iPhone 14 Pro Max
large: { width: 430, height: 932 },
// iPad
tablet: { width: 768, height: 1024 },
}
```
#### 适配策略
- **小屏**: 单列布局，紧凑间距
- **中屏**: 标准布局，正常间距
- **大屏**: 利用额外空间显示更多信息
- **横屏**: 双列或分栏布局
### 6. 无障碍设计
#### 可访问性标准
- **对比度**: 符合WCAG AA标准 (4.5:1)
- **字体大小**: 支持动态字体调整
- **触摸目标**: 最小44x44pt
- **屏幕阅读器**: 完整的VoiceOver支持
#### 语义化标记
- **角色定义**: button, link, heading, list等
- **状态描述**: selected, disabled, expanded等
- **标签关联**: label与input的关联
### 7. 设计原则
#### AI元素设计
1. **渐变运用**: AI功能使用蓝紫科技渐变
2. **发光效果**: 重要AI功能添加微妙发光
3. **动画反馈**: AI处理时显示智能动画
4. **智能徽章**: AI增强功能显示"AI"标识
#### 安全视觉语言
1. **颜色编码**: 绿色=安全，橙色=警告，红色=危险
2. **图标系统**: 统一的安全状态图标
3. **进度指示**: 密码强度的视觉化表示
4. **状态反馈**: 即时的视觉状态反馈
#### 交互设计
1. **手势操作**: 左右滑动的快捷操作
2. **触觉反馈**: 重要操作的震动反馈
3. **状态动画**: 流畅的状态转换动画
4. **加载状态**: 优雅的加载和骨架屏
### 8. Figma组织结构
#### 文件结构
```
AI密码管理器设计系统/
├── 🎨 Design Tokens
│ ├── Colors
│ ├── Typography
│ ├── Spacing
│ └── Effects
├── 🧩 Components
│ ├── Atoms
│ ├── Molecules
│ └── Organisms
├── 📱 Screens
│ ├── Authentication
│ ├── Dashboard
│ ├── Vault
│ ├── AI Assistant
│ ├── Search
│ └── Settings
├── 🔄 Prototypes
│ ├── User Flows
│ └── Interactions
└── 📚 Documentation
├── Style Guide
└── Component Specs
```
#### 命名规范
- **页面**: `Screen/功能名称`
- **组件**: `Component/组件类型/组件名称`
- **状态**: `组件名称/状态名称`
- **变体**: `尺寸-状态-主题`
### 9. 开发交接规范
#### 设计标注
- **间距**: 使用8px网格系统
- **字体**: 指定字重和行高
- **颜色**: 使用设计令牌名称
- **动画**: 指定时长和缓动函数
#### 资源导出
- **图标**: SVG格式，多尺寸
- **图片**: PNG/WebP，@1x/@2x/@3x
- **动画**: Lottie JSON格式
#### 组件文档
- **用法说明**: 何时使用该组件
- **属性列表**: 所有可配置属性
- **状态变化**: 不同状态的视觉表现
- **交互行为**: 用户交互的反馈
这个设计系统将确保AI密码管理器在视觉和交互上保持一致性，同时体现出安全、智能、未来感的品牌特质。

478
docs/figma-implementation-steps.md Normal file
View File

@@ -0,0 +1,478 @@
# AI密码管理器 - Figma实施步骤指南
## 🚀 开始之前
### 准备工作
1. **创建新的Figma文件**
- 文件名：`AI密码管理器 - 设计系统`
- 团队：选择合适的团队空间
- 权限：设置为团队可编辑
2. **安装推荐插件**
- **Iconify**: 丰富的图标库
- **Unsplash**: 高质量图片素材
- **Content Reel**: 真实内容填充
- **Auto Layout**: 自动布局优化
- **Component Utilities**: 组件管理工具
## 📋 第一阶段：设计系统建立
### Step 1: 创建页面结构
```
1. 右键点击页面标签 → Rename → "🎨 Design System"
2. 点击 + 号添加新页面：
- "🧩 Components"
- "📱 Screens"
- "🔄 Prototypes"
- "📚 Documentation"
```
### Step 2: 建立颜色样式
```
在 Design System 页面：
1. 创建颜色样式面板
- 创建矩形 → 填充颜色 → 右侧面板点击样式图标 → Create Style
2. 主色调系统：
Primary/50: #f0f9ff
Primary/100: #e0f2fe
Primary/500: #0ea5e9 (主色)
Primary/600: #0284c7
Primary/900: #0c4a6e
3. AI渐变色：
- 创建矩形 → 填充 → Linear gradient
- AI/Primary: 135°, #667eea → #764ba2
- AI/Secondary: 135°, #f093fb → #f5576c
- AI/Accent: 135°, #4facfe → #00f2fe
4. 安全状态色：
Security/High: #10b981
Security/Medium: #f59e0b
Security/Low: #ef4444
Security/Critical: #dc2626
5. 中性色系：
Gray/50 到 Gray/900 (9个层级)
```
### Step 3: 建立文字样式
```
1. 创建文本框 → 输入示例文字 → 设置字体属性
2. 标题系统：
H1/Bold: SF Pro Display, 32px, Bold, 32px行高
H2/Bold: SF Pro Display, 24px, Bold, 28px行高
H3/SemiBold: SF Pro Display, 20px, SemiBold, 24px行高
H4/Medium: SF Pro Display, 18px, Medium, 22px行高
3. 正文系统：
Body/Large: SF Pro Text, 18px, Regular, 24px行高
Body/Medium: SF Pro Text, 16px, Regular, 22px行高
Body/Small: SF Pro Text, 14px, Regular, 20px行高
Caption: SF Pro Text, 12px, Regular, 16px行高
4. 每个样式创建后：
选中文本 → 右侧面板 Text 区域 → 点击样式图标 → Create Style
```
### Step 4: 建立效果样式
```
1. 阴影系统：
- 创建矩形 → Effects → Drop Shadow
Shadow/SM: Y:1, Blur:2, Color:#000000, Opacity:5%
Shadow/MD: Y:4, Blur:6, Color:#000000, Opacity:10%
Shadow/LG: Y:10, Blur:15, Color:#000000, Opacity:15%
Shadow/XL: Y:20, Blur:25, Color:#000000, Opacity:25%
2. AI发光效果：
- Effects → Drop Shadow → 设置为外发光
AI/Glow: Color:#667eea, Blur:8px, Spread:2px, Opacity:30%
3. 保存效果样式：
选中对象 → Effects → 点击样式图标 → Create Style
```
## 📱 第二阶段：核心组件创建
### Step 5: 创建按钮组件
```
在 Components 页面：
1. Primary Button:
- 创建矩形 390×48px → 圆角12px
- 填充 Primary/500 → 应用 Shadow/SM
- 添加文本 "按钮文字" → 应用 Body/Large/SemiBold
- 文字颜色设为白色
- 选中所有元素 → Cmd+Alt+K 创建组件
- 命名：Button/Primary
2. 创建变体：
- 选中组件 → 右侧面板 → Add Variant
- 创建 State 属性：Default, Hover, Pressed, Disabled
- 为每个状态设置不同的颜色和效果
3. Secondary Button:
- 复制 Primary Button → 修改样式
- 背景改为透明 → 添加 1px Primary/500 边框
- 文字颜色改为 Primary/500
4. AI Button:
- 复制 Primary Button → 背景改为 AI/Primary 渐变
- 添加 AI/Glow 效果
```
### Step 6: 创建输入框组件
```
1. Text Input:
- 创建矩形 358×48px → 圆角12px
- 填充白色 → 边框 1px Gray/300
- 添加占位符文本 → 应用 Body/Medium
- 文字颜色 Gray/400
- 设置内边距：左右16px
2. Password Input:
- 复制 Text Input
- 右侧添加眼睛图标 24×24px
- 底部添加强度指示器 (2px高度条)
3. Search Input:
- 复制 Text Input → 背景改为 Gray/50
- 左侧添加搜索图标 20×20px
- 右侧添加 AI 机器人图标 24×24px
- 占位符："搜索密码或说'银行相关的密码'"
```
### Step 7: 创建卡片组件
```
1. Base Card:
- 创建矩形 358×100px → 圆角12px
- 填充白色 → 应用 Shadow/MD
- 创建组件 → 命名：Card/Base
2. Password Entry Card:
- 基于 Base Card，尺寸改为 358×72px
- 添加布局元素：
* 左侧：网站图标占位 32×32px
* 中间：网站名称 + 用户名文本
* 右侧：强度指示器 + 收藏星标
- 使用 Auto Layout 进行布局
3. Security Score Card:
- 基于 Base Card，尺寸 358×100px
- 左侧：圆形进度条 60×60px
- 右侧：问题列表文本
- 创建大版本：358×160px，居中显示120×120px进度圆环
4. AI Suggestion Card:
- 基于 Base Card → 圆角改为16px
- 背景改为 AI/Primary 渐变
- 添加 AI/Glow 效果
- 所有文字改为白色
```
## 📱 第三阶段：界面设计
### Step 8: 启动页面设计
```
在 Screens 页面：
1. 创建画板：
- 按 F 键 → 选择 iPhone 14 (390×844px)
- 命名：Splash Screen
2. 背景设计：
- 创建矩形覆盖整个画板
- 填充 AI/Primary 渐变
3. Logo 区域：
- 距离顶部约280px位置
- 创建圆形 120×120px → 填充白色
- 内部添加锁图标 64×64px
- 或使用 Iconify 插件搜索 "shield lock" 图标
4. 标题文字：
- Logo 下方24px位置
- 文本："AI密码管家"
- 应用 H1/Bold 样式，颜色白色
5. 加载指示器：
- 标题下方48px位置
- 5个圆点，直径8px，间距12px
- 颜色白色，透明度60%
```
### Step 9: 认证页面设计
```
1. 创建新画板：iPhone 14 → 命名：Authentication
2. 状态栏：
- 高度44px → 填充透明
- 添加时间、信号等状态元素
3. Logo 区域：
- 距离状态栏下方120px
- 圆形图标 80×80px
- 使用与启动页相同的设计，但尺寸缩小
4. 标题区域：
- Logo 下方32px
- "欢迎回来" - H1 样式
- "请验证您的身份" - Body/Medium，Gray/500
5. 生物识别区域：
- 标题下方64px
- 指纹图标 64×64px，居中
- 使用 Iconify 搜索 "fingerprint" 图标
- 图标颜色：Gray/400 (等待状态)
- 下方文字："使用生物识别" - Body/Large
6. 分割线：
- 生物识别区域下方48px
- 水平线 + "或" 文字
7. 主密码按钮：
- 使用 Button/Secondary 组件
- 文字："输入主密码"
8. 忘记密码链接：
- 底部安全区域上方
- Text Button 样式
```
### Step 10: 主界面设计
```
1. 创建新画板：iPhone 14 → 命名：Dashboard
2. 导航栏：
- 高度76px (44px状态栏 + 32px内容)
- 背景：白色，透明度95%，模糊效果
- 左侧：🔒 图标 + "AI密码管家" 文字
- 右侧：通知图标 + 设置图标
3. 搜索栏：
- 导航栏下方16px
- 使用 Search Input 组件
- 宽度358px，居中
4. 安全状态卡片：
- 搜索栏下方24px
- 使用 Security Score Card 组件
- 左侧显示评分85/100
- 右侧显示问题列表
5. 快速操作区域：
- 安全卡片下方24px
- 三个按钮水平排列，间距12px
- 按钮尺寸：110×56px
- 内容：图标 + 文字垂直排列
6. 最近使用区域：
- 快速操作下方32px
- 区域标题："最近使用" + "查看全部"链接
- 下方放置3个 Password Entry Card
- 卡片间距12px
```
### Step 11: 密码库页面设计
```
1. 创建新画板：iPhone 14 → 命名：Vault
2. 导航栏：
- 左侧：返回箭头 + "密码库"
- 右侧：搜索图标 + 更多图标
3. 筛选标签栏：
- 导航栏下方16px
- 四个标签：[全部] [收藏] [分类] [标签]
- 选中状态：Primary/500背景，白色文字
- 未选中：Gray/100背景，Gray/700文字
4. 排序选择器：
- 标签栏下方16px
- "排序：最近使用 ↓" - Body/Small
5. 密码列表：
- 排序器下方16px
- 使用 Password Entry Card (展开版96px高度)
- 显示更多信息：网站全名、安全评分、标签等
- 卡片间距8px
```
### Step 12: AI助手页面设计
```
1. 创建新画板：iPhone 14 → 命名：AI Assistant
2. 导航栏：
- 标题："AI 安全助手"
- 右侧：AI机器人图标 (渐变色)
3. 安全评分区域：
- 使用 Security Score Card (大版本160px)
- 居中显示120×120px圆形进度条
- 评分85，状态"良好"
4. 安全问题区域：
- 标题："🔍 安全问题分析"
- 三个问题卡片：
* ⚠️ 弱密码问题 (橙色左边框)
* 🔄 过期密码 (橙色左边框)
* 🔐 两步验证 (绿色左边框)
5. AI建议区域：
- 标题："💡 智能建议"
- 使用 AI Suggestion Card 组件
- 渐变背景 + 发光效果
6. 快速操作：
- 底部两个按钮：
* "🛠️ 一键修复" - Primary Button
* "📊 详细报告" - Secondary Button
```
### Step 13: 搜索页面设计
```
1. 创建新画板：iPhone 14 → 命名：Search
2. 搜索输入区域：
- 顶部：Search Input 组件
- 下方提示："💬 试试说：'银行相关的密码'"
3. 语音搜索按钮：
- 搜索框下方16px
- AI Button 样式，渐变背景
- 🎤 图标 + "语音搜索"
4. 快速筛选：
- 语音按钮下方24px
- 标题："快速筛选"
- 四个标签按钮水平排列
5. 智能分类：
- 筛选下方24px
- 标题："智能分类"
- 四个分类卡片：
* 🏦 银行金融 (8)
* 💼 工作相关 (12)
* 🛒 购物网站 (15)
* 🎮 游戏娱乐 (6)
6. 搜索历史：
- 分类下方24px
- 标题："搜索历史"
- 历史标签："工作邮箱" "银行密码" "社交媒体"
```
## 🔄 第四阶段：交互原型
### Step 14: 创建页面连接
```
在 Prototypes 页面：
1. 复制所有设计好的画板到此页面
2. 设置页面流程：
Splash Screen → Authentication → Dashboard
3. 添加交互热区：
- 选择元素 → 右侧 Prototype 面板
- Interaction: On Tap → Navigate to → 目标页面
- Animation: Smart Animate, 300ms, Ease Out
4. 主要交互流程：
- 生物识别按钮 → Dashboard
- 主密码按钮 → 密码输入页面
- 搜索栏 → Search 页面
- 密码卡片 → 密码详情页面
- AI助手入口 → AI Assistant 页面
```
### Step 15: 添加微交互
```
1. 按钮交互：
- 选中按钮 → Prototype 面板
- While Pressing → 缩放到98%
- Animation: 150ms, Ease Out
2. 卡片悬停效果：
- While Hovering → 阴影增强
- Animation: 200ms, Ease In Out
3. 开关切换：
- On Tap → 切换到另一个状态
- Animation: 200ms, Ease In Out
4. 加载状态：
- 创建加载动画组件
- 使用 Smart Animate 实现旋转效果
```
## 📚 第五阶段：文档和交付
### Step 16: 创建设计规范
```
在 Documentation 页面：
1. 颜色规范：
- 展示所有颜色样式
- 标注 HEX 值和使用场景
2. 字体规范：
- 展示所有文字样式
- 标注字号、行高、字重
3. 组件规范：
- 每个组件的使用说明
- 不同状态的展示
- 尺寸和间距标注
4. 间距规范：
- 8px 网格系统说明
- 常用间距值展示
```
### Step 17: 开发者交接
```
1. 创建 Dev Mode 视图：
- 选择画板 → 右上角 Share → Dev Mode
- 添加标注和说明
2. 导出资源：
- 图标：SVG 格式
- 图片：PNG @1x, @2x, @3x
- 颜色：CSS 变量格式
3. 组件代码：
- 使用 Figma to Code 插件
- 生成 React Native 组件代码
```
## ✅ 质量检查清单
### 设计一致性
- [ ] 所有颜色都使用了设计系统中的样式
- [ ] 所有文字都应用了正确的文字样式
- [ ] 间距遵循8px网格系统
- [ ] 圆角使用统一的规范值
### 可用性检查
- [ ] 最小触摸目标44×44px
- [ ] 颜色对比度符合WCAG AA标准
- [ ] 重要信息不仅依赖颜色区分
- [ ] 所有交互元素都有明确的状态反馈
### 技术可行性
- [ ] 所有设计都可以用React Native实现
- [ ] 动画效果合理，不影响性能
- [ ] 图标和图片资源已准备好导出
- [ ] 组件结构便于开发实现
### AI和安全元素
- [ ] AI功能都有明确的视觉标识
- [ ] 安全状态使用一致的颜色编码
- [ ] 密码强度指示器清晰易懂
- [ ] 未来感设计元素恰当使用
这个详细的实施指南将帮助您在Figma中创建出专业、一致且具有未来感的AI密码管理器界面设计。

121
docs/figma-quick-start-guide.md Normal file
View File

@@ -0,0 +1,121 @@
# Figma快速开始指南 - AI密码管理器设计
## 🚀 第一步：创建Figma文件和画板
### 1. 打开Figma并创建文件
1. 在浏览器中访问 [figma.com](https://figma.com)
2. 点击右上角 **"New design file"** 按钮
3. 文件会自动创建并打开
### 2. 重命名文件
1. 点击左上角的 **"Untitled"** 文件名
2. 输入：**"AI密码管理器设计系统"**
3. 按回车确认
### 3. 创建iPhone画板
1. 按键盘 **F** 键（或点击左侧工具栏的Frame图标）
2. 在右侧面板中找到 **"Phone"** 分类
3. 点击 **"iPhone 14"** (390 × 844px)
4. 画板会自动创建在画布中央
### 4. 重命名画板
1. 确保画板被选中（边框显示蓝色）
2. 在右侧面板顶部，将名称改为：**"Splash Screen"**
## 🎨 第二步：创建第一个设计元素
### 方法一：创建矩形（推荐）
1. 按键盘 **R** 键（或点击左侧工具栏的矩形图标）
2. 在画板内拖拽创建一个矩形
3. 矩形会自动被选中（显示蓝色边框和控制点）
### 方法二：创建文本
1. 按键盘 **T** 键（或点击左侧工具栏的文本图标）
2. 在画板内点击任意位置
3. 输入文字：**"AI密码管家"**
4. 按Esc键完成编辑，文本会被选中
### 方法三：创建圆形
1. 按键盘 **O** 键（或点击左侧工具栏的椭圆图标）
2. 按住Shift键并拖拽，创建一个正圆
3. 圆形会自动被选中
## ✅ 第三步：确认元素已选中
### 选中状态的标志：
- 元素周围有**蓝色边框**
- 四个角有**蓝色控制点**
- 右侧面板显示该元素的属性
- 左侧图层面板中该元素名称被高亮
### 如果元素没有被选中：
1. 用鼠标**单击**该元素
2. 或者在左侧图层面板中**点击**元素名称
## 🔧 第四步：验证MCP工具连接
当您完成上述步骤并确保有元素被选中后，我就可以使用Figma MCP工具来：
1. **获取当前设计图像** - 查看您创建的元素
2. **生成React Native代码** - 为设计元素生成对应的代码
3. **分析设计变量** - 获取颜色、字体等设计属性
4. **优化设计** - 根据AI密码管理器的需求调整设计
## 🎯 推荐的开始方式
### 创建启动页面背景：
1. 按 **R** 键创建矩形
2. 调整大小覆盖整个画板 (390×844px)
3. 在右侧面板的Fill区域：
- 点击颜色方块
- 选择 **Linear** 渐变
- 设置渐变角度为 **135度**
- 第一个颜色：**#667eea** (蓝紫色)
- 第二个颜色：**#764ba2** (深紫色)
### 添加Logo占位符：
1. 按 **O** 键创建圆形
2. 设置尺寸为 **120×120px**
3. 填充白色 **#FFFFFF**
4. 居中放置在画板中
### 添加标题文字：
1. 按 **T** 键创建文本
2. 输入：**"AI密码管家"**
3. 设置字体大小：**32px**
4. 设置颜色：**白色 #FFFFFF**
5. 居中对齐
## 🚨 常见问题解决
### 问题1：找不到iPhone 14画板
- 按F键后，在右侧面板向下滚动找到"Phone"分类
- 或者手动创建Frame，设置尺寸为390×844px
### 问题2：元素创建后没有被选中
- 用鼠标单击该元素
- 或按V键切换到选择工具，然后点击元素
### 问题3：无法看到渐变选项
- 确保元素被选中
- 在右侧面板的Fill区域，点击颜色方块
- 在弹出的颜色选择器中，点击顶部的渐变图标
### 问题4：MCP工具提示"Nothing is selected"
- 确保在Figma中有元素被选中（显示蓝色边框）
- 刷新浏览器页面重新选择元素
- 确保Figma标签页是当前活跃的标签页
## 📞 准备就绪的信号
当您看到以下情况时，就可以告诉我"已经选中元素"：
✅ Figma中有一个元素被选中（蓝色边框）
✅ 右侧面板显示该元素的属性
✅ 左侧图层面板中元素名称被高亮
然后我就可以使用MCP工具来帮您开始设计AI密码管理器的界面了！
---
**提示**：如果您在任何步骤遇到困难，请告诉我具体在哪一步，我会提供更详细的指导。

0
docs/frontend-architecture.md Normal file
View File

373
docs/interface-designs.md Normal file
View File

@@ -0,0 +1,373 @@
# AI密码管理器 - 界面设计详细规范
## 📱 核心界面设计
### 1. 启动页面 (Splash Screen)
```
画板尺寸：390 × 844px (iPhone 14)
布局结构：
┌─────────────────────────────────┐
│ │
│ │
│ [Logo] │ ← 居中，120×120px
│ AI密码管家 │ ← H1, 24px, Bold
│ │
│ │
│ ●●●○○ │ ← 加载指示器
│ │
│ │
│ │
│ │
└─────────────────────────────────┘
设计要点：
- 背景：Primary 500 渐变到 Primary 700
- Logo：白色图标，带AI发光效果
- 标题：白色文字，下方有微妙的发光
- 加载器：白色圆点，流动动画
```
### 2. 认证页面 (Authentication)
```
画板尺寸：390 × 844px
布局结构：
┌─────────────────────────────────┐
│ ← │ ← 返回按钮 (如果需要)
│ │
│ [Logo] │ ← 80×80px
│ 欢迎回来 │ ← H1, 24px
│ 请验证您的身份 │ ← Body MD, Gray 500
│ │
│ [指纹图标] │ ← 64×64px, AI渐变色
│ 使用生物识别 │ ← Label LG, 16px
│ │
│ │
│ ──────── 或 ──────── │ ← 分割线
│ │
│ [输入主密码按钮] │ ← Secondary Button
│ │
│ │
│ 忘记密码？ │ ← Text Button
│ │
└─────────────────────────────────┘
生物识别状态：
- 等待：指纹图标，灰色
- 识别中：指纹图标，AI渐变 + 脉冲动画
- 成功：✓ 图标，绿色
- 失败：✗ 图标，红色 + 震动反馈
```
### 3. 主界面 (Dashboard)
```
画板尺寸：390 × 844px
布局结构：
┌─────────────────────────────────┐
│ 🔒 AI密码管家 🔔 ⚙️ │ ← 导航栏，高度76px
├─────────────────────────────────┤
│ 🔍 搜索密码或说"银行相关的密码" 🤖 │ ← 搜索栏，高度48px
├─────────────────────────────────┤
│ │
│ ┌─────────────────────────────┐ │ ← 安全状态卡片
│ │ 85 │ ⚠️ 5个弱密码 │ │ 高度100px
│ │ /100 │ 🔄 3个过期密码 │ │ 圆角12px
│ │ 良好 │ 🔐 建议2FA │ │ 阴影MD
│ └─────────────────────────────┘ │
│ │
│ [➕添加密码] [📱扫码] [🎲生成] │ ← 快速操作，高度56px
│ │
│ 最近使用 查看全部 │ ← 区块标题
│ │
│ ┌─ 🌐 GitHub ─────────────────┐ │ ← 密码条目卡片
│ │ username@email.com │ │ 高度72px
│ │ 🔒●●●●○ 🏷️工作 ⭐ │ │ 圆角8px
│ └─────────────────────────────┘ │
│ ┌─ 🏦 中国银行 ───────────────┐ │
│ │ 1234****5678 │ │
│ │ 🔒●●●●● 🏷️银行 │ │
│ └─────────────────────────────┘ │
│ ┌─ 📧 Gmail ──────────────────┐ │
│ │ user@gmail.com │ │
│ │ 🔒●●○○○ ⚠️弱密码 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘
关键元素：
- 安全评分：大数字85，圆形进度条背景
- 问题统计：图标+数字+描述，颜色编码
- 快速操作：三个等宽按钮，图标+文字
- 密码条目：网站图标+标题+用户名+安全指示+标签
```
### 4. 密码库页面 (Vault)
```
画板尺寸：390 × 844px
布局结构：
┌─────────────────────────────────┐
│ ← 密码库 🔍 ⋯ │ ← 导航栏
├─────────────────────────────────┤
│ [全部] [收藏] [分类] [标签] │ ← 筛选标签，高度40px
├─────────────────────────────────┤
│ 排序：最近使用 ↓ │ ← 排序选择器
├─────────────────────────────────┤
│ │
│ ┌─ 🌐 GitHub ─────────────────┐ │ ← 密码条目（展开版）
│ │ GitHub Inc. │ │ 高度96px
│ │ username@email.com │ │
│ │ 🔒●●●●○ 强度：80/100 │ │
│ │ 🏷️工作 🏷️开发 ⭐ 3天前使用 │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─ 🏦 中国银行 ───────────────┐ │
│ │ 中国银行手机银行 │ │
│ │ 1234****5678 │ │
│ │ 🔒●●●●● 强度：95/100 │ │
│ │ 🏷️银行 🏷️重要 1周前使用 │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─ 📧 Gmail ──────────────────┐ │
│ │ Google Mail │ │
│ │ user@gmail.com │ │
│ │ 🔒●●○○○ ⚠️弱密码 强度：35 │ │
│ │ 🏷️邮箱 2周前使用 │ │
│ └─────────────────────────────┘ │
│ │
└─────────────────────────────────┘
交互设计：
- 左滑：快速复制用户名
- 右滑：快速复制密码
- 长按：显示操作菜单
- 点击：进入详情页
```
### 5. 密码详情页面 (Password Detail)
```
画板尺寸：390 × 844px
布局结构：
┌─────────────────────────────────┐
│ ← GitHub ⋯ 编辑 │ ← 导航栏
├─────────────────────────────────┤
│ │
│ 🌐 │ ← 大图标，80×80px
│ │
│ GitHub Inc. │ ← H2, 20px, Bold
│ https://github.com │ ← Body SM, Gray 500
│ │
├─────────────────────────────────┤
│ 用户名 │ ← Label MD
│ username@email.com [复制] │ ← 可复制字段
├─────────────────────────────────┤
│ 密码 │
│ ●●●●●●●●●●●● [显示] [复制] │ ← 密码字段
├─────────────────────────────────┤
│ 安全信息 │ ← 区块标题
│ 🔒 强度：强 (80/100) │
│ 📅 创建：2024-01-15 │
│ 🕐 最后使用：3天前 │
│ 🔄 上次更新：1个月前 │
├─────────────────────────────────┤
│ 💡 AI 建议 │ ← AI建议卡片
│ ┌─────────────────────────────┐ │ 背景：AI渐变
│ │ • 建议启用两步验证 │ │ 圆角12px
│ │ • 密码已使用180天，建议更新 │ │ 文字：白色
│ │ • 检测到数据泄露风险 │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────┤
│ 标签 │
│ [🏷️工作] [🏷️开发] [🏷️重要] │ ← 标签组
├─────────────────────────────────┤
│ 备注 │
│ 公司开发账户，包含重要代码仓库 │ ← 备注文本
│ │
│ │
│ [🔄 更新密码] [🗑️ 删除] │ ← 底部操作按钮
└─────────────────────────────────┘
```
### 6. AI助手页面 (AI Assistant)
```
画板尺寸：390 × 844px
布局结构：
┌─────────────────────────────────┐
│ AI 安全助手 🤖 │ ← 导航栏，AI图标渐变
├─────────────────────────────────┤
│ │
│ ┌─────────────────────────────┐ │ ← 安全评分卡片
│ │ │ │ 高度160px
│ │ ●●●●●●●●○○ │ │ 圆形进度条
│ │ 85 │ │ 中心大数字
│ │ /100 │ │
│ │ 良好 │ │ 状态文字
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 🔍 安全问题分析 │ ← 区块标题
│ │
│ ┌─ ⚠️ 弱密码问题 ──────────────┐ │ ← 问题卡片
│ │ 发现 5 个弱密码需要立即更新 │ │ 高度64px
│ │ 点击查看详情 → │ │ 橙色左边框
│ └─────────────────────────────┘ │
│ │
│ ┌─ 🔄 过期密码 ────────────────┐ │
│ │ 3 个密码超过90天未更新 │ │
│ │ 建议定期更新 → │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─ 🔐 两步验证 ────────────────┐ │
│ │ 2 个重要账户建议启用2FA │ │
│ │ 提升安全等级 → │ │
│ └─────────────────────────────┘ │
│ │
│ 💡 智能建议 │ ← AI建议区块
│ │
│ ┌─────────────────────────────┐ │ ← AI建议卡片
│ │ 🤖 基于您的使用习惯，我发现： │ │ AI渐变背景
│ │ │ │ 白色文字
│ │ • 您经常使用银行类网站，建议 │ │
│ │ 为金融账户设置更强密码 │ │
│ │ │ │
│ │ • 检测到工作相关密码较多， │ │
│ │ 建议创建"工作"分类 │ │
│ └─────────────────────────────┘ │
│ │
│ [🛠️ 一键修复] [📊 详细报告] │ ← 快速操作
└─────────────────────────────────┘
```
### 7. 搜索页面 (Search)
```
画板尺寸：390 × 844px
布局结构：
┌─────────────────────────────────┐
│ 🔍 搜索密码... ✕ │ ← 搜索输入框
│ 💬 试试说："银行相关的密码" │ ← 提示文字，AI色彩
├─────────────────────────────────┤
│ 🎤 语音搜索 │ ← 语音输入按钮
├─────────────────────────────────┤
│ 快速筛选 │ ← 区块标题
│ [最近使用] [收藏] [弱密码] [过期] │ ← 快速筛选标签
├─────────────────────────────────┤
│ 智能分类 │ ← AI分类区块
│ │
│ ┌─ 🏦 银行金融 (8) ────────────┐ │ ← 分类卡片
│ │ 中国银行、工商银行、支付宝... │ │ 显示数量
│ └─────────────────────────────┘ │ 预览内容
│ │
│ ┌─ 💼 工作相关 (12) ───────────┐ │
│ │ GitHub、Slack、Notion... │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─ 🛒 购物网站 (15) ───────────┐ │
│ │ 淘宝、京东、亚马逊... │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─ 🎮 游戏娱乐 (6) ────────────┐ │
│ │ Steam、网易、腾讯... │ │
│ └─────────────────────────────┘ │
│ │
│ 搜索历史 │ ← 历史记录
│ "工作邮箱" "银行密码" "社交媒体" │ ← 历史标签
│ │
└─────────────────────────────────┘
搜索结果页面：
┌─────────────────────────────────┐
│ ← "银行"的搜索结果 (3) │ ← 结果导航
├─────────────────────────────────┤
│ 🤖 AI理解：您在寻找银行相关账户 │ ← AI理解提示
├─────────────────────────────────┤
│ ┌─ 🏦 中国银行 ───────────────┐ │ ← 搜索结果
│ │ 1234****5678 │ │ 高亮匹配词
│ │ 🔒●●●●● 🏷️银行 1周前使用 │ │
│ └─────────────────────────────┘ │
│ ┌─ 🏦 工商银行 ───────────────┐ │
│ │ icbc_user │ │
│ │ 🔒●●●○○ 🏷️银行 1月前使用 │ │
│ └─────────────────────────────┘ │
│ ┌─ 💰 支付宝 ─────────────────┐ │
│ │ 138****8888 │ │
│ │ 🔒●●●●○ 🏷️支付 3天前使用 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘
```
### 8. 设置页面 (Settings)
```
画板尺寸：390 × 844px
布局结构：
┌─────────────────────────────────┐
│ ← 设置 │ ← 导航栏
├─────────────────────────────────┤
│ │
│ ┌─ 👤 账户信息 ────────────────┐ │ ← 用户信息卡片
│ │ [头像] 用户名 │ │ 高度80px
│ │ user@email.com │ │
│ └─────────────────────────────┘ │
│ │
│ 🔒 安全设置 │ ← 设置分组
│ │
│ 生物识别解锁 [开关] │ ← 设置项
│ 自动锁定 [5分钟] │
│ 查看密码需要验证 [开关] │
│ 更改主密码 > │
│ │
│ 🤖 AI 功能 │ ← AI设置分组
│ │
│ 智能分类 [开关] │
│ 安全分析 [开关] │
│ 智能搜索 [开关] │
│ 密码建议 [开关] │
│ │
│ 🔄 同步设置 │ ← 同步设置
│ │
│ iCloud 同步 [开关] │
│ 自动备份 [开关] │
│ 同步状态 [正常] │
│ │
│ ⚙️ 应用设置 │ ← 应用设置
│ │
│ 暗色模式 [自动] │
│ 语言 [中文] │
│ 通知 [开关] │
│ │
│ ℹ️ 关于 │ ← 关于信息
│ │
│ 版本信息 1.0.0 │
│ 隐私政策 > │
│ 用户协议 > │
│ 联系我们 > │
│ │
│ [🚪 退出登录] │ ← 退出按钮
└─────────────────────────────────┘
```
## 🎨 视觉设计要点
### AI元素设计
1. **渐变色运用**：AI功能使用蓝紫渐变
2. **发光效果**：重要AI功能添加微妙发光
3. **动画效果**：AI处理时显示脉冲动画
4. **智能徽章**：AI增强功能显示"AI"标识
### 安全视觉语言
1. **颜色编码**：绿色=安全，橙色=警告，红色=危险
2. **图标系统**：统一的安全状态图标
3. **进度指示**：密码强度的视觉化表示
4. **状态反馈**：即时的视觉状态反馈
### 交互设计
1. **手势操作**：左右滑动的快捷操作
2. **触觉反馈**：重要操作的震动反馈
3. **状态动画**：流畅的状态转换动画
4. **加载状态**：优雅的加载和骨架屏
这些详细的界面设计规范将帮助您在Figma中创建出专业、一致且用户友好的AI密码管理器界面。

483
docs/ui-ux-design.md Normal file
View File

@@ -0,0 +1,483 @@
# AI 密码管理器 - UI/UX 设计架构
## 设计理念
### 核心原则
1. **安全优先**: 所有设计决策都以安全性为首要考虑
2. **简洁直观**: 复杂功能的简单化呈现
3. **智能辅助**: AI 功能无缝集成，提升用户体验
4. **无障碍访问**: 支持各种辅助功能和可访问性标准
5. **一致性**: 跨平台和功能模块的统一体验
## 用户体验流程设计
### 1. 首次使用流程
```mermaid
graph TD
A[应用启动] --> B{是否首次使用}
B -->|是| C[欢迎引导]
B -->|否| D[身份验证]
C --> E[创建主密码]
E --> F[设置生物识别]
F --> G[导入现有密码]
G --> H[AI 功能介绍]
H --> I[完成设置]
D --> J{认证方式}
J -->|生物识别| K[指纹/面容识别]
J -->|主密码| L[输入主密码]
K --> M[进入主界面]
L --> M
I --> M
```
### 2. 日常使用流程
```mermaid
graph TD
A[主界面] --> B[密码库]
A --> C[AI 助手]
A --> D[设置]
A --> E[搜索]
B --> F[查看密码]
B --> G[添加密码]
B --> H[编辑密码]
C --> I[安全评分]
C --> J[密码建议]
C --> K[智能分类]
E --> L[自然语言搜索]
E --> M[筛选排序]
F --> N[自动填充]
G --> O[AI 辅助填写]
H --> P[AI 优化建议]
```
### 3. 自动填充流程
```mermaid
graph TD
A[用户访问登录页面] --> B[系统检测登录表单]
B --> C{是否有匹配密码}
C -->|是| D[显示自动填充建议]
C -->|否| E[提示保存新密码]
D --> F[用户选择密码]
F --> G[生物识别验证]
G --> H[自动填充表单]
E --> I[用户输入密码]
I --> J[AI 分析网站类型]
J --> K[自动分类和标签]
K --> L[保存到密码库]
```
## 界面架构设计
### 1. 导航结构
```
主界面 (Tab Navigation)
├── 密码库 (Vault)
│ ├── 全部密码
│ ├── 收藏夹
│ ├── 最近使用
│ └── 分类浏览
├── AI 助手 (AI Assistant)
│ ├── 安全仪表板
│ ├── 密码健康检查
│ ├── 智能建议
│ └── 安全报告
├── 搜索 (Search)
│ ├── 快速搜索
│ ├── 高级筛选
│ └── 智能搜索
└── 设置 (Settings)
├── 安全设置
├── 同步设置
├── AI 功能设置
└── 应用设置
```
### 2. 页面层级结构
```mermaid
graph TD
A[启动页] --> B[认证页]
B --> C[主界面]
C --> D[密码库页面]
C --> E[AI 助手页面]
C --> F[搜索页面]
C --> G[设置页面]
D --> H[密码详情页]
D --> I[添加密码页]
D --> J[编辑密码页]
E --> K[安全仪表板]
E --> L[密码分析页]
H --> M[密码查看模态]
I --> N[密码生成器]
J --> O[AI 建议模态]
```
## 核心界面设计
### 1. 主界面 (Dashboard)
#### 布局结构
```
┌─────────────────────────────────┐
│ 状态栏 + 导航栏 │
├─────────────────────────────────┤
│ 搜索栏 + AI 快捷入口 │
├─────────────────────────────────┤
│ 安全状态卡片 │
│ ┌─────────┐ ┌─────────┐ │
│ │安全评分 │ │弱密码数 │ │
│ └─────────┘ └─────────┘ │
├─────────────────────────────────┤
│ 快速操作 │
│ [添加密码] [扫描二维码] [生成密码] │
├─────────────────────────────────┤
│ 最近使用 / 收藏夹 │
│ ┌─────────────────────────────┐ │
│ │ 密码条目列表 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘
```
#### 关键组件
- **安全状态卡片**: 实时显示账户安全评分
- **智能搜索栏**: 支持自然语言搜索
- **快速操作按钮**: 常用功能的快速访问
- **密码条目卡片**: 显示网站图标、标题、用户名
### 2. 密码库界面
#### 列表视图
```
┌─────────────────────────────────┐
│ 筛选栏: [全部] [收藏] [分类] [标签] │
├─────────────────────────────────┤
│ 排序: [最近使用] [字母] [安全评分] │
├─────────────────────────────────┤
│ ┌─ 密码条目 ─────────────────────┐ │
│ │ 🌐 [网站图标] 网站名称 │ │
│ │ 用户名: user@example.com │ │
│ │ 🔒 强度: ●●●●○ 🏷️ 工作 │ │
│ │ ⏰ 3天前使用 │ │
│ └─────────────────────────────┘ │
│ ┌─ 密码条目 ─────────────────────┐ │
│ │ 📱 [应用图标] 应用名称 │ │
│ │ 用户名: username │ │
│ │ 🔒 强度: ●●○○○ ⚠️ 弱密码 │ │
│ │ ⏰ 1周前使用 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘
```
#### 详情视图
```
┌─────────────────────────────────┐
│ ← 返回 网站名称 ⋯ 更多 │
├─────────────────────────────────┤
│ 🌐 大图标 │
│ │
│ 网站名称 │
│ https://example.com │
├─────────────────────────────────┤
│ 用户名 │
│ user@example.com [复制] │
├─────────────────────────────────┤
│ 密码 │
│ ●●●●●●●●●●●● [显示] [复制] │
├─────────────────────────────────┤
│ 安全信息 │
│ 🔒 强度: 强 (85/100) │
│ 📅 创建: 2024-01-15 │
│ 🕐 最后使用: 3天前 │
├─────────────────────────────────┤
│ AI 建议 │
│ 💡 建议启用两步验证 │
│ 🔄 密码已使用180天，建议更新 │
├─────────────────────────────────┤
│ 标签 │
│ [工作] [重要] [银行] │
├─────────────────────────────────┤
│ 备注 │
│ 公司邮箱账户，重要！ │
└─────────────────────────────────┘
```
### 3. AI 助手界面
#### 安全仪表板
```
┌─────────────────────────────────┐
│ AI 安全助手 │
├─────────────────────────────────┤
│ 总体安全评分 │
│ ┌─────────────────────────────┐ │
│ │ 85/100 │ │
│ │ ●●●●●●●●○○ │ │
│ │ 良好 │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────┤
│ 安全问题 │
│ ⚠️ 5个弱密码需要更新 │
│ 🔄 3个密码超过90天未更新 │
│ 🔐 2个账户建议启用两步验证 │
├─────────────────────────────────┤
│ 智能建议 │
│ 💡 检测到您经常使用银行网站， │
│ 建议为金融账户设置更强密码 │
├─────────────────────────────────┤
│ 快速操作 │
│ [修复弱密码] [更新旧密码] [安全检查] │
└─────────────────────────────────┘
```
### 4. 搜索界面
#### 智能搜索
```
┌─────────────────────────────────┐
│ 🔍 搜索密码... │
│ 💬 试试说："银行相关的密码" │
├─────────────────────────────────┤
│ 快速筛选 │
│ [最近使用] [收藏] [弱密码] [过期] │
├─────────────────────────────────┤
│ 分类浏览 │
│ 🏦 银行金融 (8) │
│ 💼 工作相关 (12) │
│ 🛒 购物网站 (15) │
│ 🎮 游戏娱乐 (6) │
│ 📧 邮箱通讯 (4) │
├─────────────────────────────────┤
│ 搜索历史 │
│ "工作邮箱" │
│ "银行密码" │
│ "社交媒体" │
└─────────────────────────────────┘
```
## 组件设计系统
### 1. 设计令牌 (Design Tokens)
#### 颜色系统
```typescript
export const Colors = {
// 主色调
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
600: '#0284c7',
900: '#0c4a6e',
},
// 安全状态色
security: {
high: '#10b981', // 绿色 - 安全
medium: '#f59e0b', // 橙色 - 警告
low: '#ef4444', // 红色 - 危险
},
// 功能色
success: '#10b981',
warning: '#f59e0b',
error: '#ef4444',
info: '#3b82f6',
// 中性色
gray: {
50: '#f9fafb',
100: '#f3f4f6',
500: '#6b7280',
900: '#111827',
},
};
```
#### 字体系统
```typescript
export const Typography = {
// 字体大小
fontSize: {
xs: 12,
sm: 14,
base: 16,
lg: 18,
xl: 20,
'2xl': 24,
'3xl': 30,
},
// 字重
fontWeight: {
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
},
// 行高
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.75,
},
};
```
#### 间距系统
```typescript
export const Spacing = {
xs: 4,
sm: 8,
md: 16,
lg: 24,
xl: 32,
'2xl': 48,
'3xl': 64,
};
```
### 2. 核心组件
#### 密码强度指示器
```typescript
interface PasswordStrengthProps {
strength: number; // 0-100
showLabel?: boolean;
size?: 'sm' | 'md' | 'lg';
}
// 视觉表现：
// 0-20: ●○○○○ 很弱 (红色)
// 21-40: ●●○○○ 弱 (橙色)
// 41-60: ●●●○○ 中等 (黄色)
// 61-80: ●●●●○ 强 (浅绿)
// 81-100: ●●●●● 很强 (深绿)
```
#### 安全评分卡片
```typescript
interface SecurityScoreCardProps {
score: number;
trend: 'up' | 'down' | 'stable';
issues: SecurityIssue[];
onViewDetails: () => void;
}
```
#### 密码条目卡片
```typescript
interface PasswordEntryCardProps {
entry: PasswordEntry;
showPassword?: boolean;
onCopy: (field: 'username' | 'password') => void;
onEdit: () => void;
onDelete: () => void;
}
```
### 3. 交互设计
#### 手势操作
- **左滑**: 快速复制用户名
- **右滑**: 快速复制密码
- **长按**: 显示操作菜单
- **双击**: 快速查看密码
#### 动画效果
- **页面转场**: 流畅的滑动动画
- **状态变化**: 微妙的缓动效果
- **加载状态**: 骨架屏 + 进度指示
- **反馈动画**: 成功/错误状态的视觉反馈
## 响应式设计
### 1. 屏幕适配
#### iPhone 尺寸适配
```typescript
const ScreenSizes = {
// iPhone SE (3rd gen)
small: { width: 375, height: 667 },
// iPhone 14
medium: { width: 390, height: 844 },
// iPhone 14 Pro Max
large: { width: 430, height: 932 },
};
```
#### 布局适配策略
- **小屏**: 单列布局，紧凑间距
- **中屏**: 标准布局，正常间距
- **大屏**: 利用额外空间显示更多信息
### 2. 横屏适配
- **密码库**: 双列网格布局
- **详情页**: 左右分栏布局
- **搜索页**: 侧边栏筛选
## 无障碍设计
### 1. 可访问性支持
- **VoiceOver**: 完整的屏幕阅读器支持
- **动态字体**: 支持系统字体大小调整
- **高对比度**: 适配高对比度模式
- **减少动画**: 尊重用户的动画偏好
### 2. 键盘导航
- **Tab 顺序**: 逻辑的焦点顺序
- **快捷键**: 常用操作的键盘快捷键
- **焦点指示**: 清晰的焦点状态
## 暗色模式设计
### 1. 颜色适配
```typescript
export const DarkColors = {
background: {
primary: '#000000',
secondary: '#1c1c1e',
tertiary: '#2c2c2e',
},
text: {
primary: '#ffffff',
secondary: '#ebebf5',
tertiary: '#ebebf599',
},
// 保持品牌色和安全状态色不变
primary: Colors.primary,
security: Colors.security,
};
```
### 2. 对比度优化
- 确保所有文本达到 WCAG AA 标准
- 重要信息使用更高对比度
- 适当调整阴影和边框
## 性能优化
### 1. 渲染优化
- **虚拟列表**: 大量密码条目的高效渲染
- **图片懒加载**: 网站图标的按需加载
- **组件缓存**: 复用相同的组件实例
### 2. 动画优化
- **原生动画**: 使用 React Native Reanimated
- **60fps**: 确保流畅的动画体验
- **减少重绘**: 优化动画属性选择
---
*此 UI/UX 设计架构确保了密码管理器在提供强大功能的同时，保持简洁直观的用户体验，并充分利用 AI 功能提升用户的使用效率和安全性。*

12
package-lock.json generated
View File

@@ -18,6 +18,7 @@
"expo-font": "~13.3.2", "expo-font": "~13.3.2",
"expo-haptics": "~14.1.4", "expo-haptics": "~14.1.4",
"expo-image": "~2.4.0", "expo-image": "~2.4.0",
"expo-linear-gradient": "~14.1.5",
"expo-linking": "~7.1.7", "expo-linking": "~7.1.7",
"expo-router": "~5.1.4", "expo-router": "~5.1.4",
"expo-splash-screen": "~0.30.10", "expo-splash-screen": "~0.30.10",
@@ -6213,6 +6214,17 @@
"react": "*" "react": "*"
} }
}, },
"node_modules/expo-linear-gradient": {
"version": "14.1.5",
"resolved": "https://mirrors.tencent.com/npm/expo-linear-gradient/-/expo-linear-gradient-14.1.5.tgz",
"integrity": "sha512-BSN3MkSGLZoHMduEnAgfhoj3xqcDWaoICgIr4cIYEx1GcHfKMhzA/O4mpZJ/WC27BP1rnAqoKfbclk1eA70ndQ==",
"license": "MIT",
"peerDependencies": {
"expo": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo-linking": { "node_modules/expo-linking": {
"version": "7.1.7", "version": "7.1.7",
"resolved": "https://mirrors.tencent.com/npm/expo-linking/-/expo-linking-7.1.7.tgz", "resolved": "https://mirrors.tencent.com/npm/expo-linking/-/expo-linking-7.1.7.tgz",

3
package.json
View File

@@ -36,7 +36,8 @@
"react-native-safe-area-context": "5.4.0", "react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1", "react-native-screens": "~4.11.1",
"react-native-web": "~0.20.0", "react-native-web": "~0.20.0",
"react-native-webview": "13.13.5" "react-native-webview": "13.13.5",
"expo-linear-gradient": "~14.1.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.25.2", "@babel/core": "^7.25.2",

222
src/components/screens/SplashScreen.tsx Normal file
View File

@@ -0,0 +1,222 @@
import { LinearGradient } from 'expo-linear-gradient';
import React, { useEffect } from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import Animated, {
interpolate,
useAnimatedStyle,
useSharedValue,
withRepeat,
withTiming,
} from 'react-native-reanimated';
const { width, height } = Dimensions.get('window');
// AI密码管理器启动页面
export default function SplashScreen() {
// 加载动画值
const pulseAnimation = useSharedValue(0);
const fadeAnimation = useSharedValue(0);
useEffect(() => {
// 启动脉冲动画
pulseAnimation.value = withRepeat(
withTiming(1, { duration: 1500 }),
-1,
true
);
// 启动淡入动画
fadeAnimation.value = withTiming(1, { duration: 1000 });
}, []);
// Logo脉冲动画样式
const logoAnimatedStyle = useAnimatedStyle(() => {
const scale = interpolate(pulseAnimation.value, [0, 1], [1, 1.05]);
const opacity = interpolate(pulseAnimation.value, [0, 1], [0.9, 1]);
return {
transform: [{ scale }],
opacity,
};
});
// 内容淡入动画样式
const contentAnimatedStyle = useAnimatedStyle(() => {
return {
opacity: fadeAnimation.value,
transform: [
{
translateY: interpolate(fadeAnimation.value, [0, 1], [20, 0]),
},
],
};
});
return (
<View style={styles.container}>
{/* AI渐变背景 */}
<LinearGradient
colors={['#667eea', '#764ba2']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.background}
/>
{/* 主要内容 */}
<Animated.View style={[styles.content, contentAnimatedStyle]}>
{/* Logo区域 */}
<Animated.View style={[styles.logoContainer, logoAnimatedStyle]}>
<View style={styles.logoCircle}>
{/* 锁图标 - 可以替换为实际的SVG图标 */}
<View style={styles.lockIcon}>
<View style={styles.lockBody} />
<View style={styles.lockShackle} />
</View>
</View>
{/* AI发光效果 */}
<View style={styles.glowEffect} />
</Animated.View>
{/* 应用标题 */}
<Text style={styles.title}>AI密码管家</Text>
<Text style={styles.subtitle}>智能 · 安全 · 未来</Text>
{/* 加载指示器 */}
<View style={styles.loadingContainer}>
{[0, 1, 2, 3, 4].map((index) => (
<LoadingDot key={index} delay={index * 200} />
))}
</View>
</Animated.View>
</View>
);
}
// 加载点组件
function LoadingDot({ delay }: { delay: number }) {
const opacity = useSharedValue(0.3);
useEffect(() => {
opacity.value = withRepeat(
withTiming(1, { duration: 800 }),
-1,
true
);
}, []);
const animatedStyle = useAnimatedStyle(() => {
return {
opacity: opacity.value,
};
});
return <Animated.View style={[styles.loadingDot, animatedStyle]} />;
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#667eea', // 备用背景色
},
background: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 32,
},
logoContainer: {
alignItems: 'center',
marginBottom: 48,
},
logoCircle: {
width: 120,
height: 120,
borderRadius: 60,
backgroundColor: 'rgba(255, 255, 255, 0.95)',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.2,
shadowRadius: 16,
elevation: 8,
},
glowEffect: {
position: 'absolute',
width: 140,
height: 140,
borderRadius: 70,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
shadowColor: '#ffffff',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0.3,
shadowRadius: 20,
},
lockIcon: {
width: 48,
height: 48,
justifyContent: 'center',
alignItems: 'center',
},
lockBody: {
width: 28,
height: 20,
backgroundColor: '#667eea',
borderRadius: 4,
position: 'absolute',
bottom: 8,
},
lockShackle: {
width: 20,
height: 16,
borderWidth: 3,
borderColor: '#667eea',
borderRadius: 10,
borderBottomWidth: 0,
position: 'absolute',
top: 8,
},
title: {
fontSize: 32,
fontWeight: 'bold',
color: '#ffffff',
textAlign: 'center',
marginBottom: 8,
textShadowColor: 'rgba(0, 0, 0, 0.1)',
textShadowOffset: { width: 0, height: 2 },
textShadowRadius: 4,
},
subtitle: {
fontSize: 16,
color: 'rgba(255, 255, 255, 0.8)',
textAlign: 'center',
marginBottom: 64,
letterSpacing: 2,
},
loadingContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
gap: 12,
},
loadingDot: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
},
});