# 🚀 VaultScreen 优化 - 快速参考

## 一分钟快速开始

### 1. 导入新组件
```typescript
import { VaultButton, LabeledInput, AssetCard } from '@/components/vault';
import { useAddFlow, useMnemonicFlow } from '@/hooks/vault';
```

### 2. 使用 Hooks
```typescript
// 替换 8 个状态变量
const addFlow = useAddFlow();

// 替换 8 个助记词相关状态
const mnemonicFlow = useMnemonicFlow();
```

### 3. 快速替换示例

| 你想替换 | 用这个 | 代码行数减少 |
|----------|--------|-------------|
| 按钮 | `<VaultButton>` | 15 行 → 3 行 |
| 输入框 | `<LabeledInput>` | 8 行 → 5 行 |
| 资产卡片 | `<AssetCard>` | 66 行 → 5 行 |
| 状态管理 | `useAddFlow()` | 8 个变量 → 1 个对象 |

---

## 📋 组件速查表

### VaultButton

```typescript
// Primary 按钮（渐变蓝色）
<VaultButton variant="primary" icon="plus" onPress={handleAdd}>
  Add Treasure
</VaultButton>

// Secondary 按钮（透明背景）
<VaultButton variant="secondary" onPress={handleCancel}>
  Cancel
</VaultButton>

// Danger 按钮（红色）
<VaultButton variant="danger" loading={isDeleting} onPress={handleDelete}>
  Delete
</VaultButton>

// Ghost 按钮（完全透明）
<VaultButton variant="ghost" onPress={handleBack}>
  Back
</VaultButton>
```

**Props:**
- `variant`: 'primary' | 'secondary' | 'danger' | 'ghost'
- `icon`: Feather icon 名称（可选）
- `loading`: boolean（显示加载动画）
- `disabled`: boolean
- `fullWidth`: boolean
- `onPress`: () => void

---

### LabeledInput

```typescript
// 单行输入
<LabeledInput
  label="TITLE"
  placeholder="Enter title"
  value={value}
  onChangeText={setValue}
/>

// 多行输入
<LabeledInput
  label="CONTENT"
  value={content}
  onChangeText={setContent}
  multiline
/>

// 带错误提示
<LabeledInput
  label="EMAIL"
  value={email}
  onChangeText={setEmail}
  error={emailError}
/>
```

**Props:**
- `label`: string
- `placeholder`: string（可选）
- `value`: string
- `onChangeText`: (text: string) => void
- `multiline`: boolean（可选）
- `error`: string（可选）
- 支持所有 TextInput 的 props

---

### AssetCard

```typescript
<AssetCard
  asset={asset}
  index={index}
  onPress={handleOpenDetail}
/>
```

**Props:**
- `asset`: VaultAsset 对象
- `index`: number（用于动画延迟）
- `onPress`: (asset: VaultAsset) => void

**特性:**
- ✅ 自动入场动画
- ✅ 显示资产类型图标
- ✅ 显示创建日期
- ✅ 加密状态徽章

---

## 🎣 Hooks 速查表

### useAddFlow

```typescript
const addFlow = useAddFlow();

// 访问状态
addFlow.state.step          // 当前步骤 (1-3)
addFlow.state.label         // 标题
addFlow.state.content       // 内容
addFlow.state.selectedType  // 资产类型
addFlow.state.verified      // 是否已验证
addFlow.state.method        // 'text' | 'file' | 'scan'
addFlow.state.accountProvider // 'bank' | 'steam' | 'facebook' | 'custom'

// 更新状态
addFlow.setStep(2)
addFlow.setLabel('My Treasure')
addFlow.setContent('Secret content')
addFlow.setType('private_key')
addFlow.setVerified(true)
addFlow.setMethod('text')
addFlow.setProvider('bank')

// 工具方法
addFlow.canProceed()  // 检查是否可以进入下一步
addFlow.reset()       // 重置所有状态
```

---

### useMnemonicFlow

```typescript
const mnemonicFlow = useMnemonicFlow();

// 访问状态
mnemonicFlow.state.words         // 助记词数组
mnemonicFlow.state.parts         // 分组后的助记词
mnemonicFlow.state.step          // 步骤 (1-5)
mnemonicFlow.state.heirStep      // 继承人步骤
mnemonicFlow.state.replaceIndex  // 替换的单词索引
mnemonicFlow.state.progressIndex // 进度索引
mnemonicFlow.state.isCapturing   // 是否正在截图

// 更新状态
mnemonicFlow.setWords(words)
mnemonicFlow.setParts(parts)
mnemonicFlow.setStep(2)
mnemonicFlow.setHeirStep('asset')
mnemonicFlow.replaceWord(3, 'newWord')

// 工具方法
mnemonicFlow.reset()  // 重置所有状态
```

---

## 🎨 样式使用

```typescript
import { modalStyles } from '@/styles/vault/modalStyles';

// 在 Modal 中使用
<View style={modalStyles.modalOverlay}>
  <View style={modalStyles.modalContent}>
    <View style={modalStyles.modalHandle} />
    <View style={modalStyles.modalHeader}>
      <Text style={modalStyles.modalTitle}>Title</Text>
    </View>
  </View>
</View>
```

---

## 💻 常见替换模式

### 模式 1: 按钮组替换

**之前:**
```typescript
<View style={styles.modalButtons}>
  <TouchableOpacity style={styles.cancelButton} onPress={handleCancel}>
    <Text style={styles.cancelButtonText}>Cancel</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.confirmButton} onPress={handleConfirm}>
    <LinearGradient colors={[...]} style={styles.confirmButtonGradient}>
      <Text style={styles.confirmButtonText}>Confirm</Text>
    </LinearGradient>
  </TouchableOpacity>
</View>
```

**之后:**
```typescript
<View style={styles.modalButtons}>
  <VaultButton variant="secondary" onPress={handleCancel} fullWidth>
    Cancel
  </VaultButton>
  <VaultButton variant="primary" onPress={handleConfirm} fullWidth>
    Confirm
  </VaultButton>
</View>
```

---

### 模式 2: 表单输入替换

**之前:**
```typescript
<Text style={styles.modalLabel}>TITLE</Text>
<TextInput
  style={styles.input}
  placeholder="Enter title"
  placeholderTextColor={colors.nautical.sage}
  value={title}
  onChangeText={setTitle}
/>
<Text style={styles.modalLabel}>CONTENT</Text>
<TextInput
  style={[styles.input, styles.inputMultiline]}
  placeholder="Enter content"
  value={content}
  onChangeText={setContent}
  multiline
/>
```

**之后:**
```typescript
<LabeledInput label="TITLE" placeholder="Enter title" value={title} onChangeText={setTitle} />
<LabeledInput label="CONTENT" placeholder="Enter content" value={content} onChangeText={setContent} multiline />
```

---

### 模式 3: 状态管理替换

**之前:**
```typescript
const [step, setStep] = useState(1);
const [verified, setVerified] = useState(false);
const [label, setLabel] = useState('');

// 使用
if (step === 1) { /* ... */ }
setStep(2);
setLabel('New Value');
```

**之后:**
```typescript
const flow = useAddFlow();

// 使用
if (flow.state.step === 1) { /* ... */ }
flow.setStep(2);
flow.setLabel('New Value');
```

---

## ⚡ 性能优化 Tips

```typescript
// 1. 使用 useCallback 包装事件处理函数
const handleOpenDetail = useCallback((asset: VaultAsset) => {
  setSelectedAsset(asset);
  setShowDetail(true);
}, []);

// 2. 使用 React.memo 包装组件
const AssetList = React.memo(({ assets, onPress }) => (
  assets.map((asset, index) => (
    <AssetCard key={asset.id} asset={asset} index={index} onPress={onPress} />
  ))
));

// 3. 延迟加载大型模态框
const AddTreasureModal = React.lazy(() => import('./modals/AddTreasureModal'));
```

---

## 📦 完整示例

```typescript
import React, { useState } from 'react';
import { View, ScrollView } from 'react-native';
import { VaultButton, LabeledInput, AssetCard } from '@/components/vault';
import { useAddFlow } from '@/hooks/vault';

export default function VaultScreen() {
  const addFlow = useAddFlow();
  const [showModal, setShowModal] = useState(false);

  return (
    <View style={{ flex: 1 }}>
      <ScrollView>
        {assets.map((asset, index) => (
          <AssetCard
            key={asset.id}
            asset={asset}
            index={index}
            onPress={handleOpenDetail}
          />
        ))}
      </ScrollView>

      <VaultButton
        variant="primary"
        icon="plus"
        onPress={() => {
          addFlow.reset();
          setShowModal(true);
        }}
      >
        Add Treasure
      </VaultButton>
    </View>
  );
}
```

---

## 📚 完整文档

- 📖 **[VAULT_REFACTOR_GUIDE.md](./VAULT_REFACTOR_GUIDE.md)** - 完整重构指南
- 💡 **[VAULT_USAGE_EXAMPLE.tsx](./VAULT_USAGE_EXAMPLE.tsx)** - 实用代码示例
- 📝 **[VAULT_OPTIMIZATION_SUMMARY.md](./VAULT_OPTIMIZATION_SUMMARY.md)** - 优化总结

---

**快速开始，立即提升代码质量！** ⚡