设计系统 · UI 规范
先马 AI 设计平台 · 品牌色 #2563EB · React + shadcn/ui + Tailwind CSS
设计基础 Design Foundation
主题色
蓝色系 #2563EB，仅用于主题、主操作、选中态、焦点态。大面积背景保持白色/浅中性色。
中性色
从浅到深 11 档灰度。Gray 900 用于标题，Gray 700 用于正文，Gray 500 用于辅助文字。
状态色
语义色，仅用于表达操作结果和状态反馈。
字体 & 文本层级
字体栈: Inter → system-ui → PingFang SC → Microsoft YaHei
肖子雄公子，幸会先马。愿助君挥毫泼墨，绘尽万里锦绣山河。
间距 · 4px 栅格
所有间距为 4 的倍数。区块之间统一 mb-6 (24px)。
圆角
阴影
规则：卡片"阴影 / 边框"二选一，不叠加。
基础组件 Basic
按钮
输入框 & 表单
请输入正确的格式
标签 & 徽章
卡片
卡片描述文字，使用 --text-secondary 辅助色。
Hover 试试效果。border → shadow 切换。
表单与选择 Form & Selection
下拉选择 Select
选项较多时的单选，如模型切换、分类筛选。高 40px、8px 圆角、灰色边框。
单选 Radio · 模型选择
用于从互斥选项中选中一个，如选择模型、比例、画质。
复选 Checkbox · 参数选择
用于非互斥的多选场景，如生成选项、功能开关组合。
开关 Switch
布尔值切换，如启用/禁用某项功能。
滑块 Slider
连续值调整，如强度、数量参数。
数量选择 · 九宫格
用于选择生成数量（1-9）。选中项：白色底 + 阴影，灰色底槽。
比例选择 · 图形化
用于选择图片输出比例。每个选项用边框图形直观展示比例。选中项：白色底 + 阴影。
模型下拉选择
点击触发按钮展开下拉面板，选项以卡片形式展示完整信息。选中项：蓝色边框 + 浅蓝底 + 右下角「已选」。用于模型、模板等需展示辅助信息的选择。
参数调节下拉面板
select-card 触发按钮 + dropdown-panel 下拉面板（非弹窗）。面板内含清晰度/尺寸/张数等参数区。用于参数组合选择。
Tabs · 标签页 & 分段控件
Tabs 用于页面/面板级视图切换；分段控件用于互斥模式/参数选择（禁止彩色边框、彩色选中底）。
数据展示 Data Display
表格 Table
数据列表。白底 + 水平分隔线，表头灰底，行 hover 浅灰。
| 任务 ID | 任务名称 | 模型 | 状态 | 时间 | 消耗 |
|---|---|---|---|---|---|
| T-001 | 夏季T恤模特图 | Wan 2.7 | 已完成 | 2026-07-20 | 12 积分 |
| T-002 | 新品连衣裙买家秀 | Nano Banana 2 | 处理中 | 2026-07-20 | 8 积分 |
| T-003 | 运动鞋白底图优化 | Doubao | 失败 | 2026-07-19 | 6 积分 |
| T-004 | 防晒衣多角度 | GPT Image 2 | 排队中 | 2026-07-19 | 15 积分 |
分页 Pagination
列表翻页。当前页蓝色实底，其他灰色。
反馈 Feedback
进度条 Progress
任务进度展示，蓝色填充 + 灰色底槽。
上传入口 Upload
图片/文件上传区域。高 88px、8px 圆角、白底虚线边框。Hover 边框变蓝。
Toast 通知
全局操作反馈，右上角弹出。成功/失败/警告/信息四种。自动消失或手动关闭。
骨架屏 Skeleton
内容加载占位。灰色矩形 + 脉冲动画，避免页面跳动。
空状态 Empty State
所有列表/数据区必须处理。线性图标(32px) + 说明文字 + 引导动作。
弹层 Overlay
弹窗 Dialog / Modal
居中弹窗。标题 + 内容 + 底部按钮。点击遮罩或关闭按钮关闭。
侧出面板 Sheet / Drawer
从右侧滑出。用于详情、筛选、移动端菜单。点击遮罩关闭。