first

2026-03-31 18:41:52 +08:00
commit 3c62cc1cd1
527 changed files with 96725 additions and 0 deletions
--- a/README-AGENT-SYSTEM.md
+++ b/README-AGENT-SYSTEM.md
@@ -0,0 +1,232 @@
+# 代理/企业管理系统 🎨
+
+> **小米米家风格** - 亮色、简约、大气的单页面管理系统
+
+## ✨ 特性
+
+- ✅ **单页面应用** - 所有功能都在一个页面,通过侧边栏切换
+- ✅ **双角色支持** - 代理端 + 企业端一键切换
+- ✅ **小米米家风格** - 白色/浅灰背景 + 橙色点缀
+- ✅ **响应式布局** - 适配桌面/平板/手机
+
+---
+
+## 🚀 快速启动
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动H5开发服务器
+pnpm dev:h5
+
+# 访问地址
+http://localhost:5173/
+```
+
+**默认入口页面**: `pages/agent-system/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/
+└── index.vue                         # 主页面 (所有功能都在这里)
+
+.claude/
+├── AGENT-SYSTEM-DESIGN.md            # 完整设计规范 (50+ 页)
+├── AGENT-SYSTEM-QUICKSTART.md        # 快速启动指南
+└── COMPONENT-PATTERNS.md             # 组件模式库
+```
+
+---
+
+## 💡 使用说明
+
+### 1. 切换角色
+
+页面顶部有角色切换按钮:
+
+```
+[代理端] [企业端]
+```
+
+点击即可切换,侧边栏菜单会自动更新。
+
+### 2. 侧边导航
+
+所有功能通过侧边栏访问:
+
+- 点击菜单项切换页面内容
+- 激活项会有橙色背景高亮
+- 部分菜单项显示红色徽章(待处理数量)
+
+### 3. 功能区域
+
+页面分为三部分:
+
+```
+┌─────────────────────────────────────┐
+│  顶部导航栏 (Logo + 角色切换 + 搜索) │
+├──────────┬──────────────────────────┤
+│  侧边栏  │  主内容区                 │
+│  菜单    │  (根据选中菜单显示内容)   │
+│          │                          │
+└──────────┴──────────────────────────┘
+```
+
+---
+
+## 🔧 开发指南
+
+### 添加新菜单项
+
+修改 `src/pages/agent-system/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和强调
+- [ ] 留白充足,不拥挤
+
+---
+
+**设计理念**: 保持小米米家的简约、大气、留白充足的设计语言 🎯