# 代理/企业管理系统 - 移动端 H5

> **小米米家APP风格** - 亮色、简约、大气的移动端单页应用

---

## 🚀 快速启动

```bash
# 启动开发服务器
pnpm dev:h5

# 访问地址
http://localhost:5173/
```

**默认入口**: `pages/agent-system/mobile.vue`

---

## ✨ 功能清单

### 代理端

| 模块 | 功能 | 状态 |
|------|------|------|
| 📊 数据概览 | 今日收益、累计佣金、资产统计 | ✅ |
| 💰 佣金钱包 | 佣金余额、收益明细 | ✅ |
| 💳 余额钱包 | 余额查询、充值记录 | ⏳ |
| 🏦 提现管理 | 提现申请、提现记录 | ⏳ |
| 📦 资产管理 | 资产列表 | ✅ |
| 🎁 套餐管理 | 套餐列表 | ⏳ |

### 企业端

| 模块 | 功能 | 状态 |
|------|------|------|
| 📊 数据概览 | 资产统计、套餐统计 | ✅ |
| 📦 资产管理 | 资产列表 | ✅ |
| 🎁 套餐管理 | 套餐列表 | ⏳ |
| 🏷️ 标签管理 | 标签列表、分配标签 | ✅ |

**注意**: 企业端没有佣金和钱包功能

---

## 🎨 设计风格

### 配色 (小米米家)

```scss
#ff6700  // 主色 - 小米橙
#ff8533  // Hover状态
#fff7f0  // 橙色背景

#fafafa  // 页面背景
#ffffff  // 卡片背景
#f5f5f5  // 输入框背景
#eeeeee  // 分割线
```

### 布局特点

- **顶部固定导航** - Logo + 角色切换 + 搜索
- **卡片化布局** - 2列网格统计卡片
- **圆角** - 12px卡片, 8px按钮
- **柔和阴影** - `shadow-[0_2px_8px_rgba(0,0,0,0.04)]`

---

## 📱 页面结构

```
┌─────────────────────────────────┐
│  Logo          [代理端][企业端]  │ ← 固定顶部
│  [搜索框]                        │
├─────────────────────────────────┤
│                                 │
│  数据概览 (默认页)               │
│  ┌────┬────┐                    │
│  │统计│统计│                    │
│  ├────┼────┤                    │
│  │统计│统计│                    │
│  └────┴────┘                    │
│                                 │
│  快捷操作 (4格)                 │
│  收益趋势图                     │
│  最近动态列表                   │
│                                 │
└─────────────────────────────────┘
```

---

## 🧭 导航逻辑

### 页面切换

点击快捷操作按钮切换页面:

- **数据概览** (`dashboard`) - 默认首页
- **佣金钱包** (`commission`) - 佣金余额 + 明细
- **资产管理** (`assets`) - 资产列表
- **标签管理** (`tags`) - 企业端独有

### 返回逻辑

所有子页面都有**返回按钮**,点击返回数据概览

```vue
<button @click="navigateTo('dashboard')">
  <i class="i-mdi-chevron-left" />
  返回
</button>
```

---

## 💡 使用说明

### 1. 切换角色

顶部右侧角色切换:

```
[代理端] [企业端]
```

### 2. 快捷操作

数据概览页的 4 格快捷操作:

**代理端**:
- 申请提现
- 佣金钱包
- 余额钱包
- 我的资产

**企业端**:
- 标签管理
- 添加资产
- 套餐管理
- 数据统计

### 3. 查看详情

- 点击资产卡片 → 资产详情 (待实现)
- 点击标签卡片 → 标签分配 (待实现)
- 点击佣金记录 → 记录详情 (待实现)

---

## 🎯 下一步开发

### 优先级 P0

- [ ] **余额钱包页** (复制佣金钱包结构)
- [ ] **提现申请表单**
  - 输入金额
  - 选择提现方式
  - 提交按钮
- [ ] **提现记录列表**

### 优先级 P1

- [ ] **资产详情页**
- [ ] **套餐列表页**
- [ ] **套餐详情页**

### 优先级 P2

- [ ] **图表集成** (ECharts for H5)
- [ ] **下拉刷新** (z-paging)
- [ ] **上拉加载更多**
- [ ] **标签分配拖拽**

---

## 🔧 代码示例

### 添加新页面

```vue
<script setup>
const currentView = ref('dashboard')

function navigateTo(view: string) {
  currentView.value = view
}
</script>

<template>
  <!-- 新页面 -->
  <view v-if="currentView === 'new-page'" class="px-4">
    <button @click="navigateTo('dashboard')">
      <i class="i-mdi-chevron-left" />
      返回
    </button>

    <text class="text-20px font-700">新页面</text>
    <!-- 页面内容 -->
  </view>
</template>
```

### 小米风格卡片

```vue
<view class="
  bg-white rounded-12px p-4
  shadow-[0_2px_8px_rgba(0,0,0,0.04)]
">
  <text class="text-16px font-600 text-[#212121]">
    卡片标题
  </text>
</view>
```

### 橙色渐变卡片

```vue
<view class="
  bg-gradient-to-br from-[#ff6700] to-[#ff8533]
  rounded-16px p-6
  shadow-[0_8px_24px_rgba(255,103,0,0.2)]
">
  <text class="text-white text-40px font-700">
    ¥ 12,580.00
  </text>
</view>
```

---

## 📐 尺寸规范

### 字号

```
40px  - 主要金额
24px  - 统计数值
20px  - Logo
16px  - 卡片标题
15px  - 列表标题
14px  - 正文
13px  - 小标签/按钮
12px  - 次要信息
11px  - 徽章/状态
```

### 圆角

```
16px  - 大卡片 (余额卡)
12px  - 标准卡片
8px   - 按钮
full  - 圆形/药丸形
```

### 间距

```
gap-2  - 8px  (小间距)
gap-3  - 12px (标准间距)
gap-4  - 16px (大间距)
gap-6  - 24px (章节间距)

p-4    - 16px (卡片内边距)
px-4   - 16px (页面左右边距)
```

---

## ✅ 检查清单

提交代码前确认:

- [ ] 使用十六进制颜色 (不用CSS变量)
- [ ] 卡片圆角 12px
- [ ] 按钮圆角 8px
- [ ] 阴影透明度 0.04
- [ ] 图标使用 MDI
- [ ] 橙色仅用于强调
- [ ] 测试代理/企业切换
- [ ] 测试返回按钮
- [ ] 页面可滚动

---

## 📂 文件位置

```
src/pages/agent-system/
├── mobile.vue          # 移动端主页面 (当前)
└── index.vue           # PC端页面 (已废弃)
```

---

**设计理念**: 参考小米米家APP - 简约、卡片化、橙色点缀 🎨