# 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` - 设计规范文档
