236 lines
5.6 KiB
Markdown
236 lines
5.6 KiB
Markdown
# 代理/企业管理系统 🎨
|
|
|
|
> **小米米家风格** - 亮色、简约、大气的单页面管理系统
|
|
|
|
## ✨ 特性
|
|
|
|
- ✅ **单页面应用** - 所有功能都在一个页面,通过侧边栏切换
|
|
- ✅ **双角色支持** - 代理端 + 企业端一键切换
|
|
- ✅ **小米米家风格** - 白色/浅灰背景 + 橙色点缀
|
|
- ✅ **响应式布局** - 适配桌面/平板/手机
|
|
|
|
---
|
|
|
|
## 🚀 快速启动
|
|
|
|
```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和强调
|
|
- [ ] 留白充足,不拥挤
|
|
|
|
---
|
|
|
|
**设计理念**: 保持小米米家的简约、大气、留白充足的设计语言 🎯
|