9.7 KiB
9.7 KiB
GT Agent Company - UI 组件库
🎨 设计令牌 (Design Tokens)
所有组件使用 CSS 变量,定义在 src/static/styles/theme.scss
快速参考
<!-- 颜色 -->
<view class="text-primary"> <!-- 主文字 #212121 -->
<view class="text-secondary"> <!-- 正文 #666666 -->
<view class="text-tertiary"> <!-- 辅助 #999999 -->
<view class="text-brand"> <!-- 品牌橙 #ff6700 -->
<!-- 背景 -->
<view class="bg-page"> <!-- 页面背景 #fafafa -->
<view class="bg-container"> <!-- 卡片背景 #ffffff -->
<view class="bg-muted"> <!-- 静音背景 #f5f5f5 -->
<!-- 阴影 -->
<view class="shadow-sm"> <!-- 轻阴影 -->
<view class="shadow-md"> <!-- 中阴影 -->
<view class="shadow-lg"> <!-- 重阴影 -->
<view class="shadow-brand"> <!-- 品牌阴影(橙色) -->
<!-- 圆角 -->
<view class="radius-sm"> <!-- 8px -->
<view class="radius-md"> <!-- 12px -->
<view class="radius-lg"> <!-- 16px -->
<view class="radius-full"> <!-- 9999px 圆形 -->
<!-- 过渡 -->
<view class="transition-fast"> <!-- 150ms -->
<view class="transition-all"> <!-- 250ms -->
📦 基础组件
1. 卡片 Card
标准卡片
<view class="card shadow-md">
<text class="text-base font-600 text-primary">卡片内容</text>
</view>
可点击卡片
<view class="card shadow-sm cursor-pointer transition-fast hover:shadow-md active:scale-98">
<!-- 内容 -->
</view>
渐变卡片 (品牌色)
<view class="rounded-xl p-4 shadow-brand bg-gradient-to-br from-brand-primary to-brand-primary-light">
<text class="text-inverse">渐变背景内容</text>
</view>
2. 按钮 Button
主要按钮
<view class="btn btn-primary">
<text class="text-base font-500 text-inverse">确认</text>
</view>
图标按钮
<view class="w-10 h-10 radius-full bg-brand shadow-brand center cursor-pointer transition-fast active:scale-95">
<i class="i-mdi-plus text-xl text-inverse" />
</view>
幽灵按钮
<view class="px-4 py-2 radius-sm border border-brand text-brand cursor-pointer transition-fast">
<text class="text-sm font-500">次要操作</text>
</view>
3. 输入框 Input
基础输入框
<view class="bg-container radius-sm shadow-sm">
<view class="flex items-center px-3 py-2">
<i class="i-mdi-magnify text-lg text-tertiary mr-2" />
<input
v-model="keyword"
class="flex-1 text-base text-primary placeholder:text-quaternary"
placeholder="搜索..."
>
<i
v-if="keyword"
class="i-mdi-close-circle text-lg text-tertiary cursor-pointer"
@click="keyword = ''"
/>
</view>
</view>
4. 徽章 Badge
状态徽章
<!-- 成功 -->
<view class="badge badge-success">
<text>激活</text>
</view>
<!-- 警告 -->
<view class="badge badge-warning">
<text>待审核</text>
</view>
<!-- 错误 -->
<view class="badge badge-error">
<text>停用</text>
</view>
<!-- 自定义 -->
<view class="badge" style="background-color: rgba(255, 103, 0, 0.1); color: var(--brand-primary);">
<text>代理</text>
</view>
5. 统计卡片 Stats Card
三列统计
<view class="card shadow-md">
<view class="flex items-center justify-around">
<!-- 统计项 -->
<view class="flex-1 text-center">
<text class="text-3xl font-bold text-primary block leading-tight">128</text>
<text class="text-xs text-tertiary mt-1 block">总数</text>
</view>
<!-- 分割线 -->
<view class="w-px h-10 bg-border-secondary" />
<!-- 统计项 2 -->
<view class="flex-1 text-center">
<text class="text-3xl font-bold text-brand block leading-tight">95</text>
<text class="text-xs text-tertiary mt-1 block">在线</text>
</view>
<!-- 分割线 -->
<view class="w-px h-10 bg-border-secondary" />
<!-- 统计项 3 -->
<view class="flex-1 text-center">
<text class="text-3xl font-bold text-secondary block leading-tight">33</text>
<text class="text-xs text-tertiary mt-1 block">离线</text>
</view>
</view>
</view>
数据卡片 (渐变背景)
<view class="rounded-xl p-4 shadow-brand bg-gradient-to-br from-brand-primary to-brand-primary-light cursor-pointer transition-fast active:scale-98">
<view class="flex items-center justify-between mb-2">
<text class="text-xs text-inverse opacity-90">累计佣金</text>
<i class="i-mdi-cash-multiple text-lg text-inverse opacity-75" />
</view>
<text class="text-4xl font-bold text-inverse block leading-tight">
¥12,580.00
</text>
<text class="text-xs text-inverse opacity-75 mt-1">
今日 +¥138.00
</text>
</view>
6. 列表项 List Item
基础列表项
<view class="card shadow-sm cursor-pointer transition-fast active:scale-98 flex items-center justify-between">
<view class="flex items-center gap-3">
<!-- 图标 -->
<view class="w-10 h-10 radius-lg bg-muted center">
<i class="i-mdi-account text-xl text-brand" />
</view>
<!-- 文字 -->
<text class="text-base text-secondary">个人信息</text>
</view>
<!-- 箭头 -->
<i class="i-mdi-chevron-right text-xl text-quaternary" />
</view>
资产卡片列表项
<view class="card shadow-sm cursor-pointer transition-fast hover:shadow-md active:scale-98">
<!-- 头部 -->
<view class="flex items-start justify-between mb-3">
<view class="flex items-start gap-2 flex-1 min-w-0">
<!-- 状态指示点 -->
<view class="w-2 h-2 rounded-full mt-1 flex-shrink-0 bg-success" />
<!-- 主要信息 -->
<view class="flex-1 min-w-0">
<text class="text-base font-600 text-primary block truncate">
设备名称/卡号
</text>
<text class="text-xs text-tertiary mt-1 block">
详细信息描述
</text>
</view>
</view>
<!-- 类型徽章 -->
<view class="px-2 py-1 radius-sm text-xs font-500 ml-2 flex-shrink-0 bg-brand-light">
<text class="text-brand">卡片</text>
</view>
</view>
<!-- 底部状态栏 -->
<view class="flex items-center justify-between pt-3 border-t border-border-secondary">
<view class="flex items-center gap-1">
<view class="w-1.5 h-1.5 rounded-full bg-success" />
<text class="text-sm font-500 text-success">正常</text>
</view>
<i class="i-mdi-chevron-right text-xl text-quaternary" />
</view>
</view>
7. 筛选标签 Filter Tags
<view class="flex items-center gap-2">
<view
v-for="(option, index) in statusOptions"
:key="index"
class="px-4 py-2 radius-full shadow-sm transition-fast cursor-pointer"
:class="activeStatus === option.value ? 'bg-brand text-inverse shadow-brand' : 'bg-container text-secondary'"
@click="activeStatus = option.value"
>
<text class="text-sm font-500">{{ option.label }}</text>
</view>
</view>
8. 空状态 Empty State
<view class="card shadow-sm text-center py-12">
<i class="i-mdi-package-variant-closed text-6xl text-quaternary block mb-3" />
<text class="text-base text-tertiary block mb-1">暂无数据</text>
<text class="text-sm text-quaternary">请联系管理员添加</text>
</view>
9. 加载状态 Loading
<view class="card shadow-sm text-center py-8">
<i class="i-mdi-loading animate-spin text-3xl text-brand block mb-2" />
<text class="text-sm text-tertiary">加载中...</text>
</view>
添加到 style 中:
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin {
animation: spin 1s linear infinite;
}
10. 分隔线 Divider
<view class="divider" />
🎯 布局模式
页面容器
<view class="bg-page safe-area-bottom min-h-screen">
<!-- 顶部区域 -->
<view class="safe-area-top px-4 pt-4 pb-3 bg-gradient-to-b from-white to-[#fafafa]">
<!-- 内容 -->
</view>
<!-- 主内容区 -->
<view class="px-4 py-4">
<!-- 内容 -->
</view>
</view>
网格布局
<!-- 2列网格 -->
<view class="grid grid-cols-2 gap-3">
<view class="card">项目 1</view>
<view class="card">项目 2</view>
</view>
<!-- 4列网格 -->
<view class="grid grid-cols-4 gap-2">
<view class="card">1</view>
<view class="card">2</view>
<view class="card">3</view>
<view class="card">4</view>
</view>
✅ 设计检查清单
提交代码前确认:
- 使用 CSS 变量 (
var(--text-primary)) 而非硬编码颜色 - 所有图标使用 MDI (
i-mdi-*) - 触摸目标 ≥ 44px (
min-h-44px min-w-44px) - 文字大小 ≥ 14px (
text-base) - 使用语义化类名 (
text-primary,bg-brand) - 交互元素有过渡效果 (
transition-fast) - 点击状态有缩放反馈 (
active:scale-98) - 安全区域适配 (
safe-area-top,safe-area-bottom) - 支持暗色模式 (使用 CSS 变量)
🎨 常用图标
i-mdi-account 用户
i-mdi-account-circle 用户头像
i-mdi-home 首页
i-mdi-view-list 列表
i-mdi-magnify 搜索
i-mdi-filter 筛选
i-mdi-plus 添加
i-mdi-close 关闭
i-mdi-chevron-right 右箭头
i-mdi-chevron-down 下箭头
i-mdi-check 完成
i-mdi-alert-circle 警告
i-mdi-information 信息
i-mdi-wallet 钱包
i-mdi-cash 现金
i-mdi-sim SIM卡
i-mdi-devices 设备
i-mdi-loading 加载
i-mdi-refresh 刷新
i-mdi-logout 退出
📝 使用示例
查看优化后的页面:
src/pages/agent-system/home/index.vue- 首页src/pages/agent-system/assets/index.vue- 资产列表
参考设计系统:
src/static/styles/theme.scss- 完整设计令牌.claude/DESIGN-SYSTEM.md- 设计规范文档