luo/gt-agent-company

Fork 0

Files

sexygoat 3c62cc1cd1 first

2026-03-31 18:41:52 +08:00

5.9 KiB

Raw Blame History

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

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

🚀 快速启动

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

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

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

✨ 功能清单

代理端

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

企业端

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

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

🎨 设计风格

配色 (小米米家)

#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) - 企业端独有

返回逻辑

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

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

💡 使用说明

1. 切换角色

顶部右侧角色切换:

[代理端] [企业端]

2. 快捷操作

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

代理端:

申请提现
佣金钱包
余额钱包
我的资产

企业端:

标签管理
添加资产
套餐管理
数据统计

3. 查看详情

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

🎯 下一步开发

优先级 P0

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

优先级 P1

资产详情页
套餐列表页
套餐详情页

优先级 P2

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

🔧 代码示例

添加新页面

<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>

小米风格卡片

<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>

橙色渐变卡片

<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 - 简约、卡片化、橙色点缀 🎨

5.9 KiB Raw Blame History