CI Check / check (push) Has been cancelled

Details

- 创建统一UI三层架构系统（基础层、颜色层、组合层）
- 拆分Admin页面为独立Tab组件（MonitorTab、UsersTab、DepartmentsTab等）
- 提取公共逻辑到Hooks（useToast、useDataFetch、useUserOperations等）
- 提取工具函数（validators、formatters、api等）
- 创建统一弹窗组件（Modal）和useModal Hook
- 添加错误边界和统一状态组件
- 完善类型定义和可访问性支持
- 更新文档（优化记录、优化计划、更新日志）

2025-11-22 15:17:10 +08:00

3.9 KiB

Raw Blame History

设计系统迁移示例

概述

本文档展示了如何将现有组件迁移到统一的设计系统。以 AppearanceSettingsPanel.tsx 为例。

迁移步骤

1. 导入样式工具

// 迁移前
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'

// 迁移后
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { cardStyles, buttonStyles, inputStyles, navItemStyles, cn } from '@/lib/ui-styles'

2. 替换卡片样式

// 迁移前
<div className="rounded-2xl border border-slate-200/60 dark:border-slate-700/60 bg-white/80 dark:bg-slate-900/60 p-8">

// 迁移后
<div className={cn(cardStyles.base, 'flex flex-col items-center gap-4')}>

3. 替换按钮样式

// 迁移前
<button className="px-6 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all">

// 迁移后
<button className={buttonStyles.secondary}>

4. 替换输入框样式

// 迁移前
<input className="w-full px-4 py-3 rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-900 text-slate-900 dark:text-white focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-600 outline-none transition-all" />

// 迁移后
<input className={inputStyles.base} />

5. 替换导航项样式

// 迁移前
const navButtonClass = (key: SectionKey) =>
  `w-full px-4 py-3 rounded-2xl border text-left group transition-all duration-500 ${
    activeNav === key
      ? 'border-indigo-400/70 bg-white dark:bg-slate-900 shadow-lg shadow-indigo-500/30'
      : 'border-slate-200/70 dark:border-slate-700/70 hover:border-indigo-400/50 hover:bg-indigo-50/70 dark:hover:bg-indigo-900/20'
  }`

// 迁移后
const navButtonClass = (key: SectionKey) =>
  cn(
    'w-full text-left group',
    activeNav === key ? navItemStyles.active : navItemStyles.hover
  )

6. 使用 cn() 组合样式

// 迁移前
<div className={`rounded-3xl border border-slate-200/70 dark:border-slate-700/40 bg-white dark:bg-[#141e32] shadow-xl p-6 space-y-6 ${sectionRevealClass('brand')} ${staggerDelays.brand}`}>

// 迁移后
<div className={cn(
  cardStyles.large,
  'space-y-6',
  sectionRevealClass('brand'),
  staggerDelays.brand
)}>

迁移统计

在 AppearanceSettingsPanel.tsx 中：

✅ 替换了 6 个卡片样式
✅ 替换了 8 个按钮样式
✅ 替换了 8 个输入框样式
✅ 替换了导航项样式函数
✅ 使用 cn() 函数统一组合样式

注意事项

1. 保留特殊样式

对于有特殊需求的组件（如渐变背景），可以保留部分自定义样式：

// 保留渐变背景的特殊按钮
<button className={cn(
  'px-5 py-2.5 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-500 text-white text-sm font-semibold shadow-lg shadow-indigo-500/40 hover:shadow-xl transition-all duration-200',
  'disabled:opacity-60 disabled:cursor-not-allowed'
)}>

2. 条件样式

使用 cn() 函数处理条件样式：

<div className={cn(
  cardStyles.base,
  isActive && 'ring-2 ring-indigo-500',
  isDisabled && 'opacity-50'
)}>

3. 额外类名

在统一样式基础上添加额外的 Tailwind 类：

<input className={cn(inputStyles.base, 'text-sm font-mono')} />

验证清单

迁移完成后，请检查：

所有卡片使用统一的圆角（rounded-2xl 或 rounded-3xl）
所有按钮使用统一的样式工具类
所有输入框使用统一的样式工具类
导航项使用统一的样式工具类
深色模式正常工作
悬停和交互效果正常
响应式布局正常
没有 lint 错误

下一步

继续迁移其他组件
在代码审查中检查是否遵循设计系统
更新组件文档，说明使用的样式工具类

3.9 KiB Raw Blame History Unescape Escape