Security 组件

源码: src/components/security/

组件列表

组件	文件	说明
MnemonicDisplay	mnemonic-display.tsx	助记词展示
MnemonicInput	mnemonic-input.tsx	助记词输入
MnemonicConfirm	mnemonic-confirm.tsx	助记词确认
PasswordInput	password-input.tsx	密码输入
PatternLock	pattern-lock.tsx	图案锁
PatternLockSetup	pattern-lock-setup.tsx	图案锁设置

---

MnemonicDisplay

助记词展示组件，支持显示/隐藏、复制。

Props

interface MnemonicDisplayProps {
  mnemonic: string[]           // 12/24 个单词
  hidden?: boolean             // 隐藏模式
  onToggleHidden?: () => void
  copyable?: boolean
  numbered?: boolean           // 显示序号
  columns?: 2 | 3 | 4          // 列数
  className?: string
}

渲染结构

┌─────────────────────────────────────────────┐
│ 1. apple    2. banana   3. cherry           │
│ 4. dog      5. elephant 6. fish             │
│ 7. grape    8. house    9. ice              │
│ 10.jungle  11. king    12. lemon            │
│                                    [👁️] [📋]│
└─────────────────────────────────────────────┘

使用示例

<MnemonicDisplay
  mnemonic={words}
  hidden={isHidden}
  onToggleHidden={() => setHidden(!isHidden)}
  copyable
  numbered
  columns={3}
/>

---

MnemonicInput

助记词输入组件，支持粘贴、单词建议。

Props

interface MnemonicInputProps {
  value: string[]
  onChange: (words: string[]) => void
  wordCount?: 12 | 24
  error?: string
  onPaste?: () => void
  className?: string
}

功能

• 单词建议: 输入时显示 BIP39 单词建议
• 粘贴支持: 一键粘贴完整助记词
• 格式验证: 实时校验单词有效性
• 自动跳转: 输入完成自动跳到下一个

渲染结构

┌─────────────────────────────────────────────┐
│ [1.apple ] [2.banana] [3.     ]             │
│ [4.      ] [5.      ] [6.      ]            │
│ ...                                         │
│                                    [粘贴]   │
└─────────────────────────────────────────────┘

---

MnemonicConfirm

助记词备份确认，随机选择单词验证。

Props

interface MnemonicConfirmProps {
  mnemonic: string[]
  onConfirm: () => void
  onBack?: () => void
  verifyCount?: number         // 需验证的单词数 (默认 3)
  className?: string
}

流程

1. 随机选择 N 个位置
2. 用户按顺序选择正确单词
3. 全部正确后激活确认按钮

渲染结构

┌─────────────────────────────────────────────┐
│ 请选择第 3 个单词                           │
│                                             │
│ [apple] [banana] [cherry] [dog]             │
│ [elephant] [fish] [grape] [house]           │
│                                             │
│ 已选: 1.✓ 2.✓ 3.?                          │
└─────────────────────────────────────────────┘

---

PasswordInput

密码输入组件，支持显示/隐藏、强度指示。

Props

interface PasswordInputProps {
  value: string
  onChange: (value: string) => void
  placeholder?: string
  showStrength?: boolean
  minLength?: number
  error?: string
  autoFocus?: boolean
  className?: string
}

密码强度

强度	颜色	条件
弱	红色	< 8 字符
中	黄色	8+ 字符，无特殊字符
强	绿色	8+ 字符，含数字+特殊字符

渲染结构

┌─────────────────────────────────────────────┐
│ 密码                                        │
│ ┌─────────────────────────────────────────┐ │
│ │ ••••••••                          [👁️] │ │
│ └─────────────────────────────────────────┘ │
│ [████████░░░░░░░░░░░░] 中等强度             │
└─────────────────────────────────────────────┘

---

PatternLock

图案锁组件。

Props

interface PatternLockProps {
  value?: number[]             // 已选择的点
  onChange?: (pattern: number[]) => void
  onComplete?: (pattern: number[]) => void
  error?: boolean
  disabled?: boolean
  size?: 'sm' | 'md' | 'lg'
  className?: string
}

布局

┌─────────────────────────────────────────────┐
│     ●───────●───────●                       │
│     │       │       │                       │
│     ●───────●───────●                       │
│     │       │       │                       │
│     ●───────●───────●                       │
└─────────────────────────────────────────────┘

使用示例

<PatternLock
  onComplete={(pattern) => {
    if (pattern.length >= 4) {
      verifyPattern(pattern)
    }
  }}
  error={isError}
/>

---

PatternLockSetup

图案锁设置流程。

Props

interface PatternLockSetupProps {
  onComplete: (pattern: number[]) => void
  onCancel?: () => void
  minLength?: number           // 最小点数 (默认 4)
  className?: string
}

流程

1. 绘制图案
2. 再次绘制确认
3. 两次一致则完成

渲染结构

┌─────────────────────────────────────────────┐
│           设置解锁图案                      │
│                                             │
│     ●───────●───────●                       │
│     │               │                       │
│     ●       ●───────●                       │
│                                             │
│ 请再次绘制以确认                            │
└─────────────────────────────────────────────┘