# 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密码管理器的设计一致性和技术可行性。