luo/gt-agent-company

Fork 0

Files

sexygoat 52311fae0a

构建并部署前端到测试环境 / build-and-deploy (push) Has been cancelled

Details

fix: bug

2026-05-11 15:14:38 +08:00

5.6 KiB

Raw Permalink Blame History

代理/企业管理系统 🎨

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

✨ 特性

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

🚀 快速启动

# 安装依赖
pnpm install

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

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

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

📋 功能清单

代理端

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

企业端

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

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

🎨 设计风格

配色方案

// 主色 - 小米橙
#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:

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

添加新页面内容

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

<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和强调
留白充足,不拥挤

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

5.6 KiB Raw Permalink Blame History