# 代理/企业管理系统 🎨

> **小米米家风格** - 亮色、简约、大气的单页面管理系统

## ✨ 特性

- ✅ **单页面应用** - 所有功能都在一个页面,通过侧边栏切换
- ✅ **双角色支持** - 代理端 + 企业端一键切换
- ✅ **小米米家风格** - 白色/浅灰背景 + 橙色点缀
- ✅ **响应式布局** - 适配桌面/平板/手机

---

## 🚀 快速启动

```bash
# 安装依赖
pnpm install

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

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

**默认入口页面**: `pages/agent-system/home/index`

---

## 📋 功能清单

### 代理端

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

### 企业端

| 功能模块 | 说明 | 状态 |
|---------|------|------|
| 📊 数据概览 | 资产总数、套餐统计、访问量 | ✅ |
| 📦 资产管理 | 资产列表、资产详情 | ✅ (列表) |
| 🎁 套餐管理 | 套餐列表、套餐详情 | ⏳ |
| 🏷️ 标签管理 | 标签列表、分配标签给资产 | ✅ |

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

---

## 🎨 设计风格

### 配色方案

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

// 中性灰 (米家风格)
#fafafa  // 页面背景
#f5f5f5  // 卡片背景
#eeeeee  // 分割线
#212121  // 标题文字
#757575  // 常规文字
```

### 设计要点

- **圆角**: 卡片 12px, 按钮 8px
- **阴影**: 柔和阴影 `shadow-[0_2px_8px_rgba(0,0,0,0.04)]`
- **间距**: 统一使用 6px 倍数 (gap-3, gap-6, p-6)
- **图标**: MDI 线性图标 (`i-mdi-*`)

---

## 📁 文件结构

```
src/pages/agent-system/
├── home/index.vue                    # 当前首页入口
├── commission-center/index.vue       # 佣金中心
├── withdraw/index.vue                # 提现管理
└── ...                               # 其他独立业务页面

.claude/
├── AGENT-SYSTEM-DESIGN.md            # 完整设计规范 (50+ 页)
├── AGENT-SYSTEM-QUICKSTART.md        # 快速启动指南
└── COMPONENT-PATTERNS.md             # 组件模式库
```

---

## 💡 使用说明

### 1. 切换角色

页面顶部有角色切换按钮:

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

点击即可切换,侧边栏菜单会自动更新。

### 2. 侧边导航

所有功能通过侧边栏访问:

- 点击菜单项切换页面内容
- 激活项会有橙色背景高亮
- 部分菜单项显示红色徽章(待处理数量)

### 3. 功能区域

页面分为三部分:

```
┌─────────────────────────────────────┐
│  顶部导航栏 (Logo + 角色切换 + 搜索) │
├──────────┬──────────────────────────┤
│  侧边栏  │  主内容区                 │
│  菜单    │  (根据选中菜单显示内容)   │
│          │                          │
└──────────┴──────────────────────────┘
```

---

## 🔧 开发指南

### 添加新菜单项

当前实现已拆分为多页面，请修改对应业务页，例如 `src/pages/agent-system/home/index.vue`:

```vue
<script setup>
const menuItems = computed(() => {
  if (currentRole.value === 'agent') {
    return [
      { id: 1, label: '数据概览', icon: 'i-mdi-view-dashboard', route: '/dashboard' },
      // 添加新菜单项
      { id: 7, label: '新功能', icon: 'i-mdi-star', route: '/new-feature' },
    ]
  }
  // ...
})
</script>
```

### 添加新页面内容

在模板中添加对应路由的内容:

```vue
<template>
  <!-- 其他页面... -->

  <!-- 新功能页面 -->
  <view v-if="currentRoute === '/new-feature'" class="p-6">
    <text class="text-24px font-700">新功能页面</text>
    <!-- 页面内容 -->
  </view>
</template>
```

---

## 📚 详细文档

- **设计规范**: `.claude/AGENT-SYSTEM-DESIGN.md`
- **快速指南**: `.claude/AGENT-SYSTEM-QUICKSTART.md`
- **组件库**: `.claude/COMPONENT-PATTERNS.md`

---

## ✅ 已实现功能

- ✅ 顶部导航栏(Logo + 角色切换 + 搜索)
- ✅ 侧边导航栏(动态菜单)
- ✅ 数据概览页(统计卡片 + 图表区域 + 最近动态)
- ✅ 佣金钱包详情(余额卡片 + 收益明细)
- ✅ 资产列表(卡片展示 + 标签)
- ✅ 标签管理(标签网格 + 创建标签)
- ✅ 角色切换功能
- ✅ 路由切换功能

---

## 🎯 下一步开发

### 优先级 P0 (核心功能)

- [ ] 余额钱包详情页
- [ ] 佣金提现申请表单
- [ ] 提现记录列表

### 优先级 P1 (重要功能)

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

### 优先级 P2 (增强功能)

- [ ] 图表集成 (ECharts)
- [ ] 数据导出功能
- [ ] 搜索功能实现
- [ ] 标签拖拽分配

---

## 🎨 小米米家风格检查清单

提交代码前确认:

- [ ] 颜色使用十六进制色值 (如 `#ff6700`)
- [ ] 卡片圆角 12px (`rounded-12px`)
- [ ] 按钮圆角 8px (`rounded-8px`)
- [ ] 阴影柔和 (透明度 0.04 ~ 0.08)
- [ ] 图标使用 MDI (`i-mdi-*`)
- [ ] 间距使用 6 的倍数
- [ ] 橙色仅用于主CTA和强调
- [ ] 留白充足,不拥挤

---

**设计理念**: 保持小米米家的简约、大气、留白充足的设计语言 🎯