399 lines
9.7 KiB
Markdown
399 lines
9.7 KiB
Markdown
# GT Agent Company - UI 组件库
|
|
|
|
## 🎨 设计令牌 (Design Tokens)
|
|
|
|
所有组件使用 CSS 变量,定义在 `src/static/styles/theme.scss`
|
|
|
|
### 快速参考
|
|
|
|
```vue
|
|
<!-- 颜色 -->
|
|
<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
|
|
|
|
**标准卡片**
|
|
```vue
|
|
<view class="card shadow-md">
|
|
<text class="text-base font-600 text-primary">卡片内容</text>
|
|
</view>
|
|
```
|
|
|
|
**可点击卡片**
|
|
```vue
|
|
<view class="card shadow-sm cursor-pointer transition-fast hover:shadow-md active:scale-98">
|
|
<!-- 内容 -->
|
|
</view>
|
|
```
|
|
|
|
**渐变卡片 (品牌色)**
|
|
```vue
|
|
<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
|
|
|
|
**主要按钮**
|
|
```vue
|
|
<view class="btn btn-primary">
|
|
<text class="text-base font-500 text-inverse">确认</text>
|
|
</view>
|
|
```
|
|
|
|
**图标按钮**
|
|
```vue
|
|
<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>
|
|
```
|
|
|
|
**幽灵按钮**
|
|
```vue
|
|
<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
|
|
|
|
**基础输入框**
|
|
```vue
|
|
<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
|
|
|
|
**状态徽章**
|
|
```vue
|
|
<!-- 成功 -->
|
|
<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
|
|
|
|
**三列统计**
|
|
```vue
|
|
<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>
|
|
```
|
|
|
|
**数据卡片 (渐变背景)**
|
|
```vue
|
|
<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
|
|
|
|
**基础列表项**
|
|
```vue
|
|
<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>
|
|
```
|
|
|
|
**资产卡片列表项**
|
|
```vue
|
|
<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
|
|
|
|
```vue
|
|
<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
|
|
|
|
```vue
|
|
<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
|
|
|
|
```vue
|
|
<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 中:**
|
|
```scss
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### 10. 分隔线 Divider
|
|
|
|
```vue
|
|
<view class="divider" />
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 布局模式
|
|
|
|
### 页面容器
|
|
```vue
|
|
<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>
|
|
```
|
|
|
|
### 网格布局
|
|
```vue
|
|
<!-- 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` - 设计规范文档
|