flnxi-Wu/设计系统.md

设计系统规范

概述

本文档定义了项目的统一视觉设计系统，确保所有界面元素保持一致的外观和交互体验。

设计原则

1. 一致性：所有组件使用统一的圆角、阴影、间距
2. 层次感：通过阴影和颜色建立清晰的视觉层次
3. 响应式：适配各种屏幕尺寸
4. 可访问性：确保足够的对比度和可读性

视觉规范

1. 圆角 (Border Radius)

用途	类名	值	示例
小元素（按钮、标签）	rounded-lg	8px	小按钮、徽章
标准卡片	rounded-xl	12px	标准卡片、输入框
大卡片	rounded-2xl	16px	主要内容卡片
超大容器	rounded-3xl	24px	特殊展示区域

统一规则：

• 按钮、输入框：rounded-xl (12px)
• 卡片：rounded-2xl (16px)
• 导航项：rounded-xl (12px)
• 特殊容器：rounded-3xl (24px)

2. 阴影 (Box Shadow)

层级	类名	值	用途
无阴影	shadow-none	-	扁平元素
轻微阴影	shadow-sm	0 1px 2px rgba(0,0,0,0.05)	输入框、小卡片
标准阴影	shadow-md	0 4px 6px rgba(0,0,0,0.07)	悬停状态
明显阴影	shadow-lg	0 10px 15px rgba(0,0,0,0.1)	主要卡片
强烈阴影	shadow-xl	0 20px 25px rgba(0,0,0,0.1)	模态框、重要卡片
极强阴影	shadow-2xl	0 25px 50px rgba(0,0,0,0.15)	浮动面板

统一规则：

• 默认卡片：shadow-lg
• 悬停状态：hover:shadow-xl
• 模态框/弹窗：shadow-2xl
• 输入框：shadow-sm 或 shadow-none

3. 间距 (Spacing)

使用 Tailwind 标准间距系统：

用途	类名	值	示例
紧密间距	gap-2 / space-y-2	8px	相关元素组
标准间距	gap-4 / space-y-4	16px	卡片内元素
宽松间距	gap-6 / space-y-6	24px	卡片之间
大间距	gap-8 / space-y-8	32px	区块之间

统一规则：

• 卡片内边距：p-6 (24px)
• 卡片间距：gap-6 (24px)
• 区块间距：space-y-8 (32px)
• 表单元素间距：space-y-4 (16px)

4. 边框 (Border)

用途	类名	值	示例
标准边框	border	1px	卡片、输入框
强调边框	border-2	2px	选中状态
左侧强调	border-l-4	4px	导航项、列表项

统一规则：

• 默认边框：border border-slate-200 dark:border-slate-700
• 输入框边框：border border-slate-300 dark:border-slate-600
• 选中状态：border-2 border-indigo-500

5. 颜色系统

主色调

• 主色：Indigo (indigo-500 = #6366f1)
• 辅助色：Purple (purple-500 = #a855f7)
• 成功色：Green (green-500 = #22c55e)
• 警告色：Yellow (yellow-500 = #eab308)
• 错误色：Red (red-500 = #ef4444)

中性色

• 背景色：
  • 浅色模式：bg-white / bg-gray-50
  • 深色模式：bg-slate-900 / bg-slate-800
• 文本色：
  • 浅色模式：text-gray-900 / text-gray-600
  • 深色模式：text-white / text-slate-300

6. 过渡动画

属性	类名	值	用途
标准过渡	transition-all	all 200ms ease	通用交互
快速过渡	transition-all duration-150	all 150ms	悬停反馈
慢速过渡	transition-all duration-300	all 300ms	状态变化

统一规则：

• 所有交互元素：transition-all duration-200
• 悬停效果：hover:scale-[1.02] 或 hover:shadow-xl
• 点击效果：active:scale-[0.98]

组件样式规范

卡片 (Card)

// 标准卡片
className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-lg p-6"

// 悬停卡片
className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-lg hover:shadow-xl transition-all duration-200 p-6"

按钮 (Button)

// 主要按钮
className="px-6 py-3 rounded-xl bg-indigo-600 text-white font-medium shadow-lg shadow-indigo-500/30 hover:bg-indigo-700 hover:shadow-xl transition-all duration-200"

// 次要按钮
className="px-6 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-all duration-200"

输入框 (Input)

className="w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-800 outline-none transition-all"

导航项 (Nav Item)

className="px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:border-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-all duration-200"

实施指南

1. 使用 Tailwind 工具类

优先使用 Tailwind 预设的工具类，避免自定义样式：

// ✅ 正确
<div className="rounded-2xl shadow-lg p-6">

// ❌ 错误
<div className="rounded-[16px] shadow-[0_10px_15px_rgba(0,0,0,0.1)] p-[24px]">

2. 创建可复用组件

将常用样式封装为组件：

// components/ui/Card.tsx
export function Card({ children, className = '' }) {
  return (
    <div className={`rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-lg p-6 ${className}`}>
      {children}
    </div>
  )
}

3. 使用 CSS 变量（可选）

对于需要动态调整的值，使用 CSS 变量：

:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

检查清单

在开发新组件时，请确保：

• 使用统一的圆角值（rounded-xl 或 rounded-2xl）
• 使用统一的阴影层级（shadow-lg 或 shadow-xl）
• 使用统一的间距系统（p-6, gap-6, space-y-6）
• 使用统一的颜色系统（Indigo 主色）
• 添加过渡动画（transition-all duration-200）
• 支持深色模式（dark: 前缀）
• 确保足够的对比度

迁移计划

1. 阶段一：更新 Tailwind 配置，添加统一的设计令牌
2. 阶段二：创建可复用的 UI 组件库
3. 阶段三：逐步迁移现有组件到新规范
4. 阶段四：建立代码审查流程，确保新代码遵循规范