301 lines
5.9 KiB
Markdown
301 lines
5.9 KiB
Markdown
# 代理/企业管理系统 - 移动端 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 - 简约、卡片化、橙色点缀 🎨
|