luo/gt-agent-company

Fork 0

Files

sexygoat 3c62cc1cd1 first

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

12 KiB

Raw Permalink Blame History

代理/企业管理系统 - 快速启动指南

✨ 项目概述

一个基于小米米家APP风格的代理/企业管理系统单页面应用(SPA),支持:

✅ 代理端: 资产管理、套餐管理、佣金钱包、余额钱包、提现管理
✅ 企业端: 资产管理、套餐管理、标签管理(分配标签给资产)
✅ 亮色风格: 白色/浅灰背景 + 小米橙点缀
✅ 简约大气: 大量留白、卡片化布局、扁平图标

🚀 快速启动

1. 访问页面

# 开发环境
pnpm dev:h5

# 访问地址
http://localhost:5173/#/pages/agent-system/index

2. 切换角色

页面顶部有角色切换按钮:

代理端 - 显示佣金、余额、提现功能
企业端 - 显示标签管理功能(无佣金和钱包)

📁 文件结构

src/pages/agent-system/
└── index.vue                    # 主页面 (单页面SPA)

.claude/
├── AGENT-SYSTEM-DESIGN.md       # 完整设计规范文档
├── AGENT-SYSTEM-QUICKSTART.md   # 本文件 - 快速启动
└── COMPONENT-PATTERNS.md        # 可复用组件模式

🎨 设计风格特点

小米米家风格关键要素

特征	实现	代码示例
柔和阴影	浅色阴影避免过重	`shadow-[0_2px_8px_rgba(0,0,0,0.04)]`
圆角统一	卡片12px,按钮8px	`rounded-12px` / `rounded-8px`
中性灰色	使用gray-50~900	`bg-[#fafafa]` / `text-[#212121]`
橙色点缀	仅用于CTA和强调	`bg-[#ff6700]`
扁平图标	MDI线性图标	`i-mdi-*`
卡片布局	网格排列,整齐有序	`grid grid-cols-4 gap-6`

配色方案

// 主色
#ff6700  // 小米橙 (主CTA)
#ff8533  // 浅橙 (hover)
#fff7f0  // 橙色背景

// 中性灰 (米家风格)
#fafafa  // 页面背景
#f5f5f5  // 卡片背景
#eeeeee  // 分割线
#e0e0e0  // 边框
#bdbdbd  // 禁用文字
#9e9e9e  // 次要文字
#757575  // 常规文字
#212121  // 标题文字

// 功能色
#4caf50  // 成功绿
#ff9800  // 警告橙
#f44336  // 错误红
#2196f3  // 信息蓝

🧩 页面功能清单

代理端页面

路由	功能	状态
`/dashboard`	数据概览	✅ 已实现
`/commission`	佣金钱包详情	✅ 已实现
`/balance`	余额钱包详情	⏳ 待实现
`/withdraw`	提现申请&记录	⏳ 待实现
`/assets`	资产列表	✅ 已实现
`/assets/:id`	资产详情	⏳ 待实现
`/packages`	套餐列表	⏳ 待实现
`/packages/:id`	套餐详情	⏳ 待实现

企业端页面

路由	功能	状态
`/dashboard`	数据概览	✅ 已实现
`/assets`	资产列表	✅ 已实现
`/assets/:id`	资产详情	⏳ 待实现
`/packages`	套餐列表	⏳ 待实现
`/packages/:id`	套餐详情	⏳ 待实现
`/tags`	标签管理	✅ 已实现

🔧 组件使用示例

1. 统计卡片

<view class="
  bg-white
  rounded-12px
  p-6
  shadow-[0_2px_8px_rgba(0,0,0,0.04)]
  border border-[#eeeeee]
  hover:shadow-[0_4px_16px_rgba(0,0,0,0.08)]
  transition-all duration-300
">
  <view class="flex items-center justify-between mb-4">
    <text class="text-14px text-[#9e9e9e]">今日收益</text>
    <i class="i-mdi-cash w-20px h-20px text-[#4caf50]" />
  </view>

  <text class="text-32px font-700 text-[#212121] block mb-1">
    ¥ 1,280.00
  </text>

  <text class="text-12px text-[#bdbdbd]">
    较上期 <text class="text-[#4caf50]">+8.2%</text>
  </text>
</view>

2. 主要按钮 (小米橙)

<button class="
  bg-[#ff6700] text-white
  px-6 py-3 rounded-8px
  text-14px font-500
  min-h-44px
  shadow-[0_2px_4px_rgba(255,103,0,0.2)]
  hover:bg-[#ff8533]
  active:scale-98
  transition-all duration-200
  cursor-pointer
">
  确认提交
</button>

3. 列表项 (资产/套餐)

<view class="
  bg-white
  rounded-12px
  p-4
  shadow-[0_2px_8px_rgba(0,0,0,0.04)]
  border border-[#eeeeee]
  hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]
  hover:border-[#ff6700]/30
  transition-all duration-200
  cursor-pointer
">
  <view class="flex items-center gap-4">
    <!-- 缩略图 -->
    <view class="w-64px h-64px bg-[#f5f5f5] rounded-8px center">
      <i class="i-mdi-package-variant w-32px h-32px text-[#bdbdbd]" />
    </view>

    <!-- 信息 -->
    <view class="flex-1">
      <text class="text-16px font-600 text-[#212121] block mb-1">
        资产名称 A1
      </text>
      <text class="text-13px text-[#9e9e9e]">
        编号: AST-2024-001
      </text>
    </view>

    <!-- 标签 -->
    <span class="
      px-3 py-1
      bg-[#fff7f0] text-[#ff6700]
      text-12px font-500
      rounded-full
    ">
      热门
    </span>

    <!-- 箭头 -->
    <i class="i-mdi-chevron-right w-20px h-20px text-[#bdbdbd]" />
  </view>
</view>

4. 侧边导航项

<view
  :class="{
    'bg-[#fff7f0] text-[#ff6700]': isActive,
    'text-[#757575]': !isActive
  }"
  class="
    flex items-center gap-3
    px-4 py-3
    rounded-12px
    mb-2
    cursor-pointer
    transition-all duration-200
    hover:bg-[#f5f5f5]
  "
  @click="navigateTo('/dashboard')"
>
  <i class="i-mdi-view-dashboard w-20px h-20px" />
  <text class="text-14px font-500">数据概览</text>

  <!-- 徽章 (可选) -->
  <view class="
    ml-auto
    w-20px h-20px
    bg-[#f44336]
    text-white
    text-11px
    rounded-full
    center
  ">
    3
  </view>
</view>

🎯 待完成功能清单

高优先级

余额钱包详情页 (复制佣金钱包逻辑)
佣金提现申请表单
- 输入金额
- 选择提现方式 (银行卡/支付宝/微信)
- 实名验证
- 提交按钮
提现记录列表
- 状态筛选 (全部/审核中/已通过/已拒绝)
- 时间排序
- 详情查看

中优先级

资产详情页
- 资产信息展示
- 关联套餐列表
- 收益统计图表
- 操作按钮 (编辑/删除)
套餐列表页
- 网格布局
- 筛选功能
- 搜索功能
套餐详情页
- 套餐信息
- 价格配置
- 关联资产

低优先级

标签拖拽分配功能 (企业端)
- 使用 SortableJS 实现拖拽
- 实时保存分配状态
图表集成 (ECharts)
- 收益趋势图
- 资产分布图
- 佣金统计图
数据导出功能
- 导出佣金记录 (Excel)
- 导出资产列表 (CSV)

📝 开发规范

颜色使用

<!-- ✅ GOOD: 使用十六进制色值 (小米风格) -->
<view class="bg-[#fafafa] text-[#212121]">

<!-- ❌ BAD: 使用CSS变量 (不符合小米简约风格) -->
<view class="bg-primary text-main">

圆角规范

<!-- 卡片: 12px -->
<view class="rounded-12px">

<!-- 按钮: 8px -->
<button class="rounded-8px">

<!-- 徽章/标签: 全圆角 -->
<span class="rounded-full">

阴影规范

<!-- 小卡片/列表项: 2px偏移 4% 透明度 -->
<view class="shadow-[0_2px_8px_rgba(0,0,0,0.04)]">

<!-- Hover状态: 4px偏移 8% 透明度 -->
<view class="hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]">

<!-- 大卡片/模态框: 8px偏移 橙色阴影 -->
<view class="shadow-[0_8px_24px_rgba(255,103,0,0.2)]">

间距规范

<!-- 卡片间距: 24px (gap-6) -->
<view class="grid gap-6">

<!-- 卡片内边距: 24px (p-6) -->
<view class="p-6">

<!-- 小元素间距: 12px (gap-3) -->
<view class="flex gap-3">

🎨 图标使用

图标颜色搭配

<!-- 成功 - 绿色 -->
<i class="i-mdi-check-circle text-[#4caf50]" />

<!-- 警告 - 橙色 -->
<i class="i-mdi-alert text-[#ff9800]" />

<!-- 错误 - 红色 -->
<i class="i-mdi-alert-circle text-[#f44336]" />

<!-- 信息 - 蓝色 -->
<i class="i-mdi-information text-[#2196f3]" />

<!-- 主色 - 小米橙 -->
<i class="i-mdi-wallet text-[#ff6700]" />

<!-- 中性 - 灰色 -->
<i class="i-mdi-package-variant text-[#bdbdbd]" />

🔍 调试技巧

1. 查看当前路由

<script setup>
import { ref } from 'vue'
const currentRoute = ref('/dashboard')

// 在控制台打印
console.log('当前路由:', currentRoute.value)
</script>

2. 切换角色测试

// 在浏览器控制台执行
// 切换到企业端
currentRole.value = 'enterprise'

// 切换到代理端
currentRole.value = 'agent'

3. 快速跳转路由

// 在浏览器控制台执行
currentRoute.value = '/commission'  // 佣金钱包
currentRoute.value = '/assets'      // 资产列表
currentRoute.value = '/tags'        // 标签管理

📱 响应式测试

测试断点

# 移动端
375px  - iPhone SE
414px  - iPhone Pro Max

# 平板
768px  - iPad
1024px - iPad Pro

# 桌面
1280px - 小屏笔记本
1440px - 标准桌面
1920px - 大屏显示器

当前响应式支持

✅ 桌面端 (> 1024px): 完整布局,侧边栏固定
⚠️ 平板端 (768px - 1024px): 需要调整网格列数
❌ 移动端 (< 768px): 需要隐藏侧边栏,使用底部Tab

待实现: 移动端适配

<!-- 移动端底部导航 (待实现) -->
<view class="
  fixed bottom-0 left-0 right-0
  bg-white
  border-t border-[#eeeeee]
  pb-safe
  z-100
  lg:hidden
">
  <view class="flex justify-around py-2">
    <button class="flex flex-col items-center gap-1">
      <i class="i-mdi-view-dashboard w-24px h-24px" />
      <text class="text-11px">首页</text>
    </button>
    <!-- 其他Tab项 -->
  </view>
</view>

🚀 性能优化建议

1. 图片懒加载

<image
  :src="thumbnailUrl"
  mode="aspectFill"
  lazy-load
  class="w-64px h-64px rounded-8px"
/>

2. 列表虚拟滚动

<!-- 对于长列表使用 z-paging -->
<z-paging
  ref="pagingRef"
  v-model="dataList"
  @query="queryList"
>
  <view v-for="item in dataList" :key="item.id">
    <!-- 列表项 -->
  </view>
</z-paging>

3. 数据分页加载

const currentPage = ref(1)
const pageSize = ref(20)
const hasMore = ref(true)

async function loadMore() {
  if (!hasMore.value)
    return

  const data = await fetchData({
    page: currentPage.value,
    size: pageSize.value,
  })

  // 追加数据
  assets.value.push(...data.list)

  // 更新状态
  currentPage.value++
  hasMore.value = data.hasMore
}

📚 相关文档

完整设计规范: .claude/AGENT-SYSTEM-DESIGN.md
组件模式库: .claude/COMPONENT-PATTERNS.md
全局设计系统: .claude/DESIGN-SYSTEM.md
图标库: MDI Icons

✅ 检查清单

提交代码前检查:

颜色使用十六进制 (不使用CSS变量)
圆角统一 (卡片12px, 按钮8px)
阴影柔和 (0.04 ~ 0.08 透明度)
图标使用MDI (不使用emoji)
按钮hover有反馈
卡片hover有边框变化
所有交互元素有cursor-pointer
间距符合6px倍数规范
测试角色切换功能
测试路由跳转功能

小米米家风格精髓: 简约、留白、柔和、整齐、大气 🎨

12 KiB Raw Permalink Blame History

代理/企业管理系统 - 快速启动指南

✨ 项目概述

🚀 快速启动

1. 访问页面

2. 切换角色

📁 文件结构

🎨 设计风格特点

小米米家风格关键要素

配色方案

🧩 页面功能清单

代理端页面

企业端页面

🔧 组件使用示例

1. 统计卡片

2. 主要按钮 (小米橙)

3. 列表项 (资产/套餐)

4. 侧边导航项

🎯 待完成功能清单

高优先级

中优先级

低优先级

📝 开发规范

颜色使用

圆角规范

阴影规范

间距规范

🎨 图标使用

推荐图标集 (MDI - Material Design Icons)

图标颜色搭配

🔍 调试技巧

1. 查看当前路由

2. 切换角色测试

3. 快速跳转路由

📱 响应式测试

测试断点

当前响应式支持

待实现: 移动端适配

🚀 性能优化建议

1. 图片懒加载

2. 列表虚拟滚动

3. 数据分页加载

📚 相关文档

✅ 检查清单

12 KiB

Raw Permalink Blame History