Worktree Manager 设计系统

配色方案与组件示例

配色方案

背景色

slate-950
#0f172a
slate-900
#1e293b
slate-800
#334155

文字色

slate-100
主文字
slate-300
次要文字
slate-500
辅助文字

品牌色

blue-500
主按钮
blue-600
悬停状态
blue-400
高亮/链接

辅助色

green-500
成功/特性
purple-400
特殊/链接
orange-500
警告/强调

按钮组件

卡片组件

🚀

默认卡片

这是一个标准的卡片组件示例

✨

悬停卡片

鼠标悬停查看边框和阴影效果

🎨

渐变卡片

带渐变背景的特殊卡片

表单元素

代码块

安装命令 
# 克隆项目
git clone https://github.com/guoyongchang/worktree-manager.git
cd worktree-manager

# 安装依赖
npm install

# 开发模式运行
npm run tauri dev

徽章 (Badges)

蓝色徽章 绿色徽章 紫色徽章 橙色徽章 灰色徽章

渐变文字

蓝紫渐变标题

绿蓝渐变标题

橙粉渐变标题

间距系统

4px (1)
8px (2)
12px (3)
16px (4)
24px (6)
32px (8)

阴影系统

shadow-sm
shadow
shadow-md
shadow-lg