1067 lines
28 KiB
Markdown
1067 lines
28 KiB
Markdown
# 代理/企业管理系统 - 设计规范
|
|
|
|
**风格参考**: 小米米家APP - 亮色、简约、大气
|
|
**应用类型**: 单页面应用 (SPA)
|
|
**用户角色**: 代理端 + 企业端
|
|
|
|
---
|
|
|
|
## 🎨 设计理念
|
|
|
|
### 小米米家风格特征
|
|
|
|
1. **简约克制**: 大量留白,信息层级清晰
|
|
2. **卡片化布局**: 圆角卡片承载功能模块
|
|
3. **浅色系主导**: 白色/浅灰背景 + 橙色点缀
|
|
4. **扁平化图标**: 线性图标为主,避免过度装饰
|
|
5. **网格化排列**: 规整的网格系统,整齐有序
|
|
|
|
---
|
|
|
|
## 🎯 页面结构 (单页面SPA)
|
|
|
|
### 导航结构
|
|
|
|
```
|
|
顶部: 固定导航栏 (角色切换 + 搜索)
|
|
├─ 代理端
|
|
│ ├─ 📊 数据概览 (Dashboard)
|
|
│ ├─ 💰 佣金管理
|
|
│ │ ├─ 佣金钱包详情
|
|
│ │ ├─ 佣金提现申请
|
|
│ │ └─ 提现记录列表
|
|
│ ├─ 💳 余额管理
|
|
│ │ └─ 余额钱包详情
|
|
│ ├─ 📦 资产管理
|
|
│ │ ├─ 资产列表
|
|
│ │ └─ 资产详情
|
|
│ └─ 🎁 套餐管理
|
|
│ ├─ 套餐列表
|
|
│ └─ 套餐详情
|
|
│
|
|
└─ 企业端
|
|
├─ 📊 数据概览
|
|
├─ 📦 资产管理
|
|
│ ├─ 资产列表
|
|
│ └─ 资产详情
|
|
├─ 🎁 套餐管理
|
|
│ ├─ 套餐列表
|
|
│ └─ 套餐详情
|
|
└─ 🏷️ 标签管理
|
|
├─ 标签列表
|
|
└─ 标签分配
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 小米米家配色方案
|
|
|
|
### 主色调 (保持您的橙色品牌)
|
|
|
|
```scss
|
|
// 品牌主色
|
|
--mi-orange: #ff6700; // 小米橙 (主要CTA)
|
|
--mi-orange-light: #ff8533; // 浅橙 (hover)
|
|
--mi-orange-bg: #fff7f0; // 橙色背景
|
|
|
|
// 中性色 (米家风格 - 更柔和)
|
|
--mi-gray-50: #fafafa; // 页面背景
|
|
--mi-gray-100: #f5f5f5; // 卡片背景
|
|
--mi-gray-200: #eeeeee; // 分割线
|
|
--mi-gray-300: #e0e0e0; // 边框
|
|
--mi-gray-400: #bdbdbd; // 禁用文字
|
|
--mi-gray-500: #9e9e9e; // 次要文字
|
|
--mi-gray-600: #757575; // 常规文字
|
|
--mi-gray-900: #212121; // 标题文字
|
|
|
|
// 功能色 (柔和版本)
|
|
--mi-success: #4caf50; // 成功绿
|
|
--mi-warning: #ff9800; // 警告橙
|
|
--mi-error: #f44336; // 错误红
|
|
--mi-info: #2196f3; // 信息蓝
|
|
|
|
// 背景渐变 (可选)
|
|
--mi-bg-gradient: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
|
|
```
|
|
|
|
### UnoCSS 配置更新
|
|
|
|
```typescript
|
|
// uno.config.ts 添加小米风格配色
|
|
theme: {
|
|
colors: {
|
|
// 保留原有主题色
|
|
'primary': 'var(--theme-primary)',
|
|
|
|
// 添加米家风格色
|
|
'mi-orange': '#ff6700',
|
|
'mi-orange-light': '#ff8533',
|
|
'mi-orange-bg': '#fff7f0',
|
|
'mi-gray': {
|
|
50: '#fafafa',
|
|
100: '#f5f5f5',
|
|
200: '#eeeeee',
|
|
300: '#e0e0e0',
|
|
400: '#bdbdbd',
|
|
500: '#9e9e9e',
|
|
600: '#757575',
|
|
900: '#212121',
|
|
},
|
|
},
|
|
borderRadius: {
|
|
'mi-card': '12px', // 卡片圆角
|
|
'mi-button': '8px', // 按钮圆角
|
|
},
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 📐 布局规范
|
|
|
|
### 页面布局
|
|
|
|
```
|
|
┌────────────────────────────────────┐
|
|
│ 固定顶栏 (60px) │
|
|
│ [Logo] [角色切换] [搜索] [头像] │
|
|
├────────────────────────────────────┤
|
|
│ │
|
|
│ 主内容区 │
|
|
│ ┌──────────────┐ ┌─────────┐ │
|
|
│ │ 侧边导航 │ │ 内容区 │ │
|
|
│ │ (240px) │ │ │ │
|
|
│ │ │ │ │ │
|
|
│ │ [图标]资产 │ │ [卡片] │ │
|
|
│ │ [图标]套餐 │ │ [卡片] │ │
|
|
│ │ [图标]佣金 │ │ [卡片] │ │
|
|
│ │ ... │ │ │ │
|
|
│ └──────────────┘ └─────────┘ │
|
|
│ │
|
|
└────────────────────────────────────┘
|
|
```
|
|
|
|
### 响应式断点
|
|
|
|
```scss
|
|
// 移动端 (< 768px) - 底部Tab导航
|
|
< 768px: 隐藏侧边栏 → 顶部汉堡菜单 + 底部Tab
|
|
|
|
// 平板 (768px - 1024px) - 可折叠侧边栏
|
|
768px+: 侧边栏可折叠为图标模式 (80px)
|
|
|
|
// 桌面 (> 1024px) - 完整侧边栏
|
|
1024px+: 完整侧边栏 (240px) + 宽松内容区
|
|
```
|
|
|
|
---
|
|
|
|
## 🎴 组件样式 (小米米家风格)
|
|
|
|
### 1. 顶部导航栏
|
|
|
|
```vue
|
|
<template>
|
|
<view class="
|
|
fixed top-0 left-0 right-0 h-60px
|
|
bg-white
|
|
border-b border-mi-gray-200
|
|
z-100
|
|
shadow-sm
|
|
">
|
|
<view class="
|
|
h-full px-6
|
|
flex items-center justify-between
|
|
max-w-[1440px] mx-auto
|
|
">
|
|
<!-- 左侧 Logo + 角色切换 -->
|
|
<view class="flex items-center gap-6">
|
|
<text class="text-24px font-700 text-mi-gray-900">
|
|
GT Agent
|
|
</text>
|
|
|
|
<!-- 角色切换 -->
|
|
<view class="
|
|
flex items-center gap-2
|
|
bg-mi-gray-100 rounded-full px-3 py-1.5
|
|
">
|
|
<button
|
|
:class="{
|
|
'bg-white shadow-sm': role === 'agent',
|
|
'text-mi-gray-500': role !== 'agent'
|
|
}"
|
|
class="
|
|
px-4 py-1.5 rounded-full
|
|
text-14px font-500
|
|
transition-all duration-200
|
|
"
|
|
@click="switchRole('agent')"
|
|
>
|
|
代理端
|
|
</button>
|
|
<button
|
|
:class="{
|
|
'bg-white shadow-sm': role === 'enterprise',
|
|
'text-mi-gray-500': role !== 'enterprise'
|
|
}"
|
|
class="
|
|
px-4 py-1.5 rounded-full
|
|
text-14px font-500
|
|
transition-all duration-200
|
|
"
|
|
@click="switchRole('enterprise')"
|
|
>
|
|
企业端
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右侧 搜索 + 头像 -->
|
|
<view class="flex items-center gap-4">
|
|
<!-- 搜索框 -->
|
|
<view class="
|
|
relative w-320px
|
|
bg-mi-gray-100 rounded-full
|
|
flex items-center
|
|
px-4 py-2
|
|
">
|
|
<i class="i-mdi-magnify w-20px h-20px text-mi-gray-500"></i>
|
|
<input
|
|
type="text"
|
|
placeholder="搜索资产、套餐..."
|
|
class="
|
|
flex-1 ml-2
|
|
bg-transparent
|
|
text-14px text-mi-gray-900
|
|
outline-none
|
|
placeholder:text-mi-gray-400
|
|
"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 用户头像 -->
|
|
<button class="
|
|
w-36px h-36px
|
|
rounded-full
|
|
bg-mi-orange/10
|
|
center
|
|
cursor-pointer
|
|
hover:bg-mi-orange/20
|
|
transition-colors duration-200
|
|
">
|
|
<i class="i-mdi-account w-20px h-20px text-mi-orange"></i>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
```
|
|
|
|
### 2. 侧边导航栏 (小米风格)
|
|
|
|
```vue
|
|
<template>
|
|
<aside class="
|
|
fixed left-0 top-60px bottom-0
|
|
w-240px
|
|
bg-white
|
|
border-r border-mi-gray-200
|
|
overflow-y-auto
|
|
">
|
|
<nav class="p-4">
|
|
<view
|
|
v-for="item in menuItems"
|
|
:key="item.id"
|
|
:class="{
|
|
'bg-mi-orange-bg text-mi-orange': currentRoute === item.route,
|
|
'text-mi-gray-600': currentRoute !== item.route
|
|
}"
|
|
class="
|
|
flex items-center gap-3
|
|
px-4 py-3
|
|
rounded-mi-card
|
|
mb-2
|
|
cursor-pointer
|
|
transition-all duration-200
|
|
hover:bg-mi-gray-100
|
|
"
|
|
@click="navigateTo(item.route)"
|
|
>
|
|
<i :class="item.icon" class="w-20px h-20px"></i>
|
|
<text class="text-14px font-500">{{ item.label }}</text>
|
|
|
|
<!-- 新消息徽章 -->
|
|
<view
|
|
v-if="item.badge"
|
|
class="
|
|
ml-auto
|
|
w-20px h-20px
|
|
bg-mi-error
|
|
text-white
|
|
text-11px
|
|
rounded-full
|
|
center
|
|
"
|
|
>
|
|
{{ item.badge }}
|
|
</view>
|
|
</view>
|
|
</nav>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{ role: 'agent' | 'enterprise' }>()
|
|
|
|
const menuItems = computed(() => {
|
|
if (props.role === 'agent') {
|
|
return [
|
|
{ id: 1, label: '数据概览', icon: 'i-mdi-view-dashboard', route: '/dashboard' },
|
|
{ id: 2, label: '资产管理', icon: 'i-mdi-package-variant', route: '/assets' },
|
|
{ id: 3, label: '套餐管理', icon: 'i-mdi-gift', route: '/packages' },
|
|
{ id: 4, label: '佣金钱包', icon: 'i-mdi-wallet', route: '/commission', badge: 3 },
|
|
{ id: 5, label: '余额钱包', icon: 'i-mdi-cash', route: '/balance' },
|
|
{ id: 6, label: '提现管理', icon: 'i-mdi-bank-transfer', route: '/withdraw' },
|
|
]
|
|
} else {
|
|
return [
|
|
{ id: 1, label: '数据概览', icon: 'i-mdi-view-dashboard', route: '/dashboard' },
|
|
{ id: 2, label: '资产管理', icon: 'i-mdi-package-variant', route: '/assets' },
|
|
{ id: 3, label: '套餐管理', icon: 'i-mdi-gift', route: '/packages' },
|
|
{ id: 4, label: '标签管理', icon: 'i-mdi-tag-multiple', route: '/tags' },
|
|
]
|
|
}
|
|
})
|
|
</script>
|
|
```
|
|
|
|
### 3. 卡片组件 (米家风格)
|
|
|
|
```vue
|
|
<!-- 小米风格卡片 - 柔和阴影 -->
|
|
<view class="
|
|
bg-white
|
|
rounded-mi-card
|
|
p-6
|
|
shadow-[0_2px_8px_rgba(0,0,0,0.04)]
|
|
hover:shadow-[0_4px_16px_rgba(0,0,0,0.08)]
|
|
transition-all duration-300
|
|
border border-mi-gray-200
|
|
">
|
|
<slot></slot>
|
|
</view>
|
|
|
|
<!-- 统计卡片 -->
|
|
<view class="
|
|
bg-white
|
|
rounded-mi-card
|
|
p-6
|
|
shadow-[0_2px_8px_rgba(0,0,0,0.04)]
|
|
border border-mi-gray-200
|
|
">
|
|
<view class="flex items-center justify-between mb-4">
|
|
<text class="text-14px text-mi-gray-500">佣金总额</text>
|
|
<i class="i-mdi-trending-up w-20px h-20px text-mi-success"></i>
|
|
</view>
|
|
|
|
<text class="text-32px font-700 text-mi-gray-900 block mb-1">
|
|
¥ 12,580.00
|
|
</text>
|
|
|
|
<text class="text-12px text-mi-gray-400">
|
|
较上月 <text class="text-mi-success">+12.5%</text>
|
|
</text>
|
|
</view>
|
|
```
|
|
|
|
### 4. 按钮样式 (小米风格)
|
|
|
|
```vue
|
|
<!-- 主要按钮 (橙色) -->
|
|
<button class="
|
|
bg-mi-orange text-white
|
|
px-6 py-3
|
|
rounded-mi-button
|
|
text-14px font-500
|
|
min-h-44px
|
|
shadow-[0_2px_4px_rgba(255,103,0,0.2)]
|
|
hover:bg-mi-orange-light
|
|
hover:shadow-[0_4px_8px_rgba(255,103,0,0.3)]
|
|
active:scale-98
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
">
|
|
确认提现
|
|
</button>
|
|
|
|
<!-- 次要按钮 (描边) -->
|
|
<button class="
|
|
bg-white text-mi-gray-600
|
|
border border-mi-gray-300
|
|
px-6 py-3
|
|
rounded-mi-button
|
|
text-14px font-500
|
|
min-h-44px
|
|
hover:border-mi-orange
|
|
hover:text-mi-orange
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
">
|
|
取消
|
|
</button>
|
|
|
|
<!-- 文字按钮 -->
|
|
<button class="
|
|
text-mi-orange
|
|
text-14px font-500
|
|
px-4 py-2
|
|
hover:bg-mi-orange-bg
|
|
rounded-mi-button
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
">
|
|
查看详情 →
|
|
</button>
|
|
```
|
|
|
|
### 5. 列表项 (米家风格)
|
|
|
|
```vue
|
|
<!-- 资产列表项 -->
|
|
<view class="
|
|
bg-white
|
|
rounded-mi-card
|
|
p-4
|
|
mb-3
|
|
shadow-[0_2px_8px_rgba(0,0,0,0.04)]
|
|
border border-mi-gray-200
|
|
hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]
|
|
hover:border-mi-orange/30
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
">
|
|
<view class="flex items-center gap-4">
|
|
<!-- 缩略图 -->
|
|
<view class="
|
|
w-64px h-64px
|
|
bg-mi-gray-100
|
|
rounded-8px
|
|
center
|
|
flex-shrink-0
|
|
">
|
|
<i class="i-mdi-package-variant w-32px h-32px text-mi-gray-400"></i>
|
|
</view>
|
|
|
|
<!-- 信息 -->
|
|
<view class="flex-1">
|
|
<text class="text-16px font-600 text-mi-gray-900 block mb-1">
|
|
资产名称 A1
|
|
</text>
|
|
<text class="text-13px text-mi-gray-500 block">
|
|
编号: AST-2024-001
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 标签 -->
|
|
<view class="flex gap-2">
|
|
<span class="
|
|
px-3 py-1
|
|
bg-mi-orange-bg text-mi-orange
|
|
text-12px font-500
|
|
rounded-full
|
|
">
|
|
热门
|
|
</span>
|
|
</view>
|
|
|
|
<!-- 箭头 -->
|
|
<i class="i-mdi-chevron-right w-20px h-20px text-mi-gray-400"></i>
|
|
</view>
|
|
</view>
|
|
```
|
|
|
|
### 6. 表单样式 (小米风格)
|
|
|
|
```vue
|
|
<!-- 输入框 -->
|
|
<view class="mb-6">
|
|
<label class="block text-14px font-500 text-mi-gray-900 mb-2">
|
|
提现金额
|
|
</label>
|
|
<input
|
|
type="number"
|
|
placeholder="请输入提现金额"
|
|
class="
|
|
w-full px-4 py-3 min-h-44px
|
|
bg-mi-gray-100
|
|
border-2 border-transparent
|
|
rounded-mi-button
|
|
text-16px text-mi-gray-900
|
|
focus:bg-white
|
|
focus:border-mi-orange
|
|
focus:outline-none
|
|
transition-all duration-200
|
|
placeholder:text-mi-gray-400
|
|
"
|
|
/>
|
|
<text class="text-12px text-mi-gray-500 mt-1 block">
|
|
可提现余额: ¥12,580.00
|
|
</text>
|
|
</view>
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 数据概览页 (Dashboard)
|
|
|
|
### 布局结构
|
|
|
|
```vue
|
|
<template>
|
|
<view class="p-6 bg-mi-gray-50 min-h-screen">
|
|
<!-- 顶部统计卡片 (4列网格) -->
|
|
<view class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
|
<StatCard
|
|
title="今日收益"
|
|
value="¥ 1,280.00"
|
|
trend="+8.2%"
|
|
icon="i-mdi-cash"
|
|
color="success"
|
|
/>
|
|
<StatCard
|
|
title="累计佣金"
|
|
value="¥ 12,580.00"
|
|
trend="+12.5%"
|
|
icon="i-mdi-wallet"
|
|
color="orange"
|
|
/>
|
|
<StatCard
|
|
title="资产总数"
|
|
value="156"
|
|
trend="+3"
|
|
icon="i-mdi-package-variant"
|
|
color="info"
|
|
/>
|
|
<StatCard
|
|
title="套餐数量"
|
|
value="24"
|
|
trend="+2"
|
|
icon="i-mdi-gift"
|
|
color="warning"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 图表 + 快捷操作 -->
|
|
<view class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
|
<!-- 收益趋势图 (2列) -->
|
|
<view class="lg:col-span-2">
|
|
<view class="
|
|
bg-white rounded-mi-card p-6
|
|
shadow-[0_2px_8px_rgba(0,0,0,0.04)]
|
|
border border-mi-gray-200
|
|
">
|
|
<text class="text-18px font-600 text-mi-gray-900 block mb-4">
|
|
收益趋势
|
|
</text>
|
|
<!-- 图表占位 -->
|
|
<view class="h-280px bg-mi-gray-50 rounded-8px center">
|
|
<text class="text-mi-gray-400">图表区域</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快捷操作 (1列) -->
|
|
<view>
|
|
<view class="
|
|
bg-white rounded-mi-card p-6
|
|
shadow-[0_2px_8px_rgba(0,0,0,0.04)]
|
|
border border-mi-gray-200
|
|
">
|
|
<text class="text-18px font-600 text-mi-gray-900 block mb-4">
|
|
快捷操作
|
|
</text>
|
|
|
|
<view class="space-y-3">
|
|
<button class="
|
|
w-full flex items-center gap-3
|
|
bg-mi-gray-50 hover:bg-mi-orange-bg
|
|
px-4 py-3 rounded-8px
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
">
|
|
<i class="i-mdi-bank-transfer w-20px h-20px text-mi-orange"></i>
|
|
<text class="text-14px font-500 text-mi-gray-900">申请提现</text>
|
|
</button>
|
|
|
|
<button class="
|
|
w-full flex items-center gap-3
|
|
bg-mi-gray-50 hover:bg-mi-orange-bg
|
|
px-4 py-3 rounded-8px
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
">
|
|
<i class="i-mdi-package-variant-plus w-20px h-20px text-mi-orange"></i>
|
|
<text class="text-14px font-500 text-mi-gray-900">添加资产</text>
|
|
</button>
|
|
|
|
<button class="
|
|
w-full flex items-center gap-3
|
|
bg-mi-gray-50 hover:bg-mi-orange-bg
|
|
px-4 py-3 rounded-8px
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
">
|
|
<i class="i-mdi-tag-plus w-20px h-20px text-mi-orange"></i>
|
|
<text class="text-14px font-500 text-mi-gray-900">创建标签</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 最近动态 -->
|
|
<view class="
|
|
bg-white rounded-mi-card p-6
|
|
shadow-[0_2px_8px_rgba(0,0,0,0.04)]
|
|
border border-mi-gray-200
|
|
">
|
|
<view class="flex items-center justify-between mb-4">
|
|
<text class="text-18px font-600 text-mi-gray-900">最近动态</text>
|
|
<button class="text-14px text-mi-orange">查看全部 →</button>
|
|
</view>
|
|
|
|
<view class="space-y-3">
|
|
<view
|
|
v-for="item in recentActivities"
|
|
:key="item.id"
|
|
class="
|
|
flex items-center gap-4
|
|
p-3 rounded-8px
|
|
hover:bg-mi-gray-50
|
|
transition-colors duration-200
|
|
"
|
|
>
|
|
<view :class="`bg-${item.color}-bg`" class="w-40px h-40px rounded-full center">
|
|
<i :class="item.icon" class="w-20px h-20px" :class="`text-${item.color}`"></i>
|
|
</view>
|
|
<view class="flex-1">
|
|
<text class="text-14px text-mi-gray-900 block">{{ item.title }}</text>
|
|
<text class="text-12px text-mi-gray-500">{{ item.time }}</text>
|
|
</view>
|
|
<text :class="`text-${item.color}`" class="text-14px font-600">
|
|
{{ item.amount }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
```
|
|
|
|
---
|
|
|
|
## 💰 佣金钱包详情页
|
|
|
|
```vue
|
|
<template>
|
|
<view class="p-6 bg-mi-gray-50 min-h-screen">
|
|
<!-- 钱包余额卡片 (大卡片) -->
|
|
<view class="
|
|
bg-gradient-to-br from-mi-orange to-mi-orange-light
|
|
rounded-mi-card p-8
|
|
shadow-[0_8px_24px_rgba(255,103,0,0.2)]
|
|
mb-6
|
|
">
|
|
<text class="text-14px text-white/80 block mb-2">
|
|
佣金余额
|
|
</text>
|
|
<text class="text-48px font-700 text-white block mb-4">
|
|
¥ 12,580.00
|
|
</text>
|
|
|
|
<view class="flex items-center gap-6">
|
|
<view>
|
|
<text class="text-12px text-white/60 block">本月收益</text>
|
|
<text class="text-18px font-600 text-white">¥ 3,280.00</text>
|
|
</view>
|
|
<view class="w-1px h-24px bg-white/20"></view>
|
|
<view>
|
|
<text class="text-12px text-white/60 block">待结算</text>
|
|
<text class="text-18px font-600 text-white">¥ 1,520.00</text>
|
|
</view>
|
|
</view>
|
|
|
|
<button class="
|
|
mt-6
|
|
bg-white text-mi-orange
|
|
px-6 py-3 rounded-mi-button
|
|
text-14px font-600
|
|
shadow-[0_2px_8px_rgba(255,255,255,0.3)]
|
|
hover:shadow-[0_4px_12px_rgba(255,255,255,0.4)]
|
|
active:scale-98
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
">
|
|
立即提现
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 收益明细 -->
|
|
<view class="
|
|
bg-white rounded-mi-card p-6
|
|
shadow-[0_2px_8px_rgba(0,0,0,0.04)]
|
|
border border-mi-gray-200
|
|
">
|
|
<view class="flex items-center justify-between mb-4">
|
|
<text class="text-18px font-600 text-mi-gray-900">收益明细</text>
|
|
|
|
<!-- 筛选按钮 -->
|
|
<view class="flex gap-2">
|
|
<button class="
|
|
px-3 py-1.5 rounded-full
|
|
bg-mi-orange-bg text-mi-orange
|
|
text-13px font-500
|
|
">
|
|
全部
|
|
</button>
|
|
<button class="
|
|
px-3 py-1.5 rounded-full
|
|
text-mi-gray-500
|
|
text-13px font-500
|
|
hover:bg-mi-gray-100
|
|
">
|
|
本月
|
|
</button>
|
|
<button class="
|
|
px-3 py-1.5 rounded-full
|
|
text-mi-gray-500
|
|
text-13px font-500
|
|
hover:bg-mi-gray-100
|
|
">
|
|
上月
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 明细列表 -->
|
|
<view class="space-y-3">
|
|
<view
|
|
v-for="record in commissionRecords"
|
|
:key="record.id"
|
|
class="
|
|
flex items-center justify-between
|
|
p-4 rounded-8px
|
|
border border-mi-gray-200
|
|
hover:border-mi-orange/30
|
|
hover:bg-mi-gray-50
|
|
transition-all duration-200
|
|
"
|
|
>
|
|
<view class="flex items-center gap-3">
|
|
<view class="w-40px h-40px bg-mi-orange-bg rounded-full center">
|
|
<i class="i-mdi-currency-cny w-20px h-20px text-mi-orange"></i>
|
|
</view>
|
|
<view>
|
|
<text class="text-14px font-500 text-mi-gray-900 block">
|
|
{{ record.title }}
|
|
</text>
|
|
<text class="text-12px text-mi-gray-500">
|
|
{{ record.date }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="text-right">
|
|
<text class="text-18px font-600 text-mi-success block">
|
|
+¥ {{ record.amount }}
|
|
</text>
|
|
<text class="text-12px text-mi-gray-500">
|
|
{{ record.status }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
```
|
|
|
|
---
|
|
|
|
## 🏷️ 标签管理页 (企业端独有)
|
|
|
|
```vue
|
|
<template>
|
|
<view class="p-6 bg-mi-gray-50 min-h-screen">
|
|
<!-- 顶部操作栏 -->
|
|
<view class="flex items-center justify-between mb-6">
|
|
<text class="text-24px font-700 text-mi-gray-900">标签管理</text>
|
|
|
|
<button class="
|
|
bg-mi-orange text-white
|
|
px-5 py-2.5 rounded-mi-button
|
|
text-14px font-500
|
|
flex items-center gap-2
|
|
shadow-[0_2px_4px_rgba(255,103,0,0.2)]
|
|
hover:bg-mi-orange-light
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
">
|
|
<i class="i-mdi-plus w-18px h-18px"></i>
|
|
创建标签
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 标签网格 -->
|
|
<view class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-8">
|
|
<view
|
|
v-for="tag in tags"
|
|
:key="tag.id"
|
|
class="
|
|
bg-white rounded-mi-card p-5
|
|
shadow-[0_2px_8px_rgba(0,0,0,0.04)]
|
|
border-2 border-mi-gray-200
|
|
hover:border-mi-orange
|
|
hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]
|
|
transition-all duration-200
|
|
cursor-pointer
|
|
"
|
|
>
|
|
<view class="flex items-start justify-between mb-3">
|
|
<view
|
|
:style="{ backgroundColor: tag.color }"
|
|
class="w-40px h-40px rounded-full center"
|
|
>
|
|
<i class="i-mdi-tag w-20px h-20px text-white"></i>
|
|
</view>
|
|
|
|
<button class="
|
|
w-32px h-32px center
|
|
hover:bg-mi-gray-100 rounded-full
|
|
transition-colors duration-200
|
|
">
|
|
<i class="i-mdi-dots-vertical w-18px h-18px text-mi-gray-500"></i>
|
|
</button>
|
|
</view>
|
|
|
|
<text class="text-16px font-600 text-mi-gray-900 block mb-1">
|
|
{{ tag.name }}
|
|
</text>
|
|
<text class="text-13px text-mi-gray-500 block mb-3">
|
|
{{ tag.description }}
|
|
</text>
|
|
|
|
<view class="flex items-center justify-between">
|
|
<text class="text-12px text-mi-gray-400">
|
|
已分配 {{ tag.assetCount }} 个资产
|
|
</text>
|
|
<button class="
|
|
text-13px text-mi-orange font-500
|
|
hover:underline
|
|
">
|
|
分配 →
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 标签分配面板 -->
|
|
<view class="
|
|
bg-white rounded-mi-card p-6
|
|
shadow-[0_2px_8px_rgba(0,0,0,0.04)]
|
|
border border-mi-gray-200
|
|
">
|
|
<text class="text-18px font-600 text-mi-gray-900 block mb-4">
|
|
标签分配
|
|
</text>
|
|
|
|
<!-- 拖拽区域 -->
|
|
<view class="grid grid-cols-2 gap-6">
|
|
<!-- 未分配资产 -->
|
|
<view>
|
|
<text class="text-14px font-500 text-mi-gray-600 block mb-3">
|
|
未分配资产 (32)
|
|
</text>
|
|
<view class="
|
|
min-h-400px
|
|
bg-mi-gray-50
|
|
border-2 border-dashed border-mi-gray-300
|
|
rounded-8px
|
|
p-4
|
|
">
|
|
<view
|
|
v-for="asset in unassignedAssets"
|
|
:key="asset.id"
|
|
class="
|
|
bg-white
|
|
p-3 rounded-8px
|
|
mb-2
|
|
border border-mi-gray-200
|
|
cursor-move
|
|
hover:shadow-md
|
|
transition-all duration-200
|
|
"
|
|
>
|
|
<text class="text-14px text-mi-gray-900">{{ asset.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 已分配资产 -->
|
|
<view>
|
|
<text class="text-14px font-500 text-mi-gray-600 block mb-3">
|
|
已分配资产 (18)
|
|
</text>
|
|
<view class="
|
|
min-h-400px
|
|
bg-mi-orange-bg/30
|
|
border-2 border-dashed border-mi-orange/30
|
|
rounded-8px
|
|
p-4
|
|
">
|
|
<view
|
|
v-for="asset in assignedAssets"
|
|
:key="asset.id"
|
|
class="
|
|
bg-white
|
|
p-3 rounded-8px
|
|
mb-2
|
|
border border-mi-orange/30
|
|
cursor-move
|
|
hover:shadow-md
|
|
transition-all duration-200
|
|
"
|
|
>
|
|
<view class="flex items-center justify-between">
|
|
<text class="text-14px text-mi-gray-900">{{ asset.name }}</text>
|
|
<span class="
|
|
px-2 py-0.5
|
|
bg-mi-orange-bg text-mi-orange
|
|
text-11px rounded-full
|
|
">
|
|
热门
|
|
</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex justify-end gap-3 mt-6">
|
|
<button class="
|
|
bg-white text-mi-gray-600
|
|
border border-mi-gray-300
|
|
px-5 py-2.5 rounded-mi-button
|
|
text-14px font-500
|
|
">
|
|
取消
|
|
</button>
|
|
<button class="
|
|
bg-mi-orange text-white
|
|
px-5 py-2.5 rounded-mi-button
|
|
text-14px font-500
|
|
shadow-[0_2px_4px_rgba(255,103,0,0.2)]
|
|
">
|
|
保存分配
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 响应式适配
|
|
|
|
### 移动端 (< 768px)
|
|
|
|
```vue
|
|
<!-- 隐藏侧边栏,使用底部Tab导航 -->
|
|
<view class="
|
|
fixed bottom-0 left-0 right-0
|
|
bg-white
|
|
border-t border-mi-gray-200
|
|
pb-safe
|
|
z-100
|
|
lg:hidden
|
|
">
|
|
<view class="flex justify-around py-2">
|
|
<button
|
|
v-for="item in bottomNavItems"
|
|
:key="item.id"
|
|
class="
|
|
flex flex-col items-center gap-1
|
|
min-w-60px py-2
|
|
cursor-pointer
|
|
"
|
|
>
|
|
<i :class="item.icon" class="w-24px h-24px text-mi-gray-500"></i>
|
|
<text class="text-11px text-mi-gray-500">{{ item.label }}</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ 小米风格设计检查清单
|
|
|
|
### 视觉设计
|
|
- [ ] 使用柔和的阴影 `shadow-[0_2px_8px_rgba(0,0,0,0.04)]`
|
|
- [ ] 卡片圆角统一为 12px (`rounded-mi-card`)
|
|
- [ ] 按钮圆角统一为 8px (`rounded-mi-button`)
|
|
- [ ] 图标使用线性风格 (MDI outlined icons)
|
|
- [ ] 颜色使用中性灰 (gray-50 ~ gray-900)
|
|
- [ ] 橙色仅用于主要CTA和强调元素
|
|
|
|
### 交互设计
|
|
- [ ] 悬停状态有微妙的阴影变化
|
|
- [ ] 按钮点击有 `active:scale-98` 缩放反馈
|
|
- [ ] 过渡动画使用 200-300ms
|
|
- [ ] 卡片边框在hover时变为橙色
|
|
- [ ] 所有交互元素有 `cursor-pointer`
|
|
|
|
### 布局设计
|
|
- [ ] 内容区使用 6px 或 8px 统一间距
|
|
- [ ] 卡片网格使用 `gap-6` (24px)
|
|
- [ ] 统计数据突出显示 (大字号 + 粗体)
|
|
- [ ] 次要信息使用小字号 + 灰色
|
|
- [ ] 留白充足,不拥挤
|
|
|
|
### 可用性
|
|
- [ ] 移动端使用底部Tab导航
|
|
- [ ] 触摸目标 ≥ 44px
|
|
- [ ] 表单输入框有清晰的焦点状态
|
|
- [ ] 重要操作有二次确认
|
|
- [ ] 加载状态有明确反馈
|
|
|
|
---
|
|
|
|
## 📦 完整页面清单
|
|
|
|
### 代理端页面
|
|
1. ✅ 数据概览 (Dashboard)
|
|
2. ✅ 佣金钱包详情
|
|
3. ⏳ 余额钱包详情 (类似佣金钱包)
|
|
4. ⏳ 佣金提现申请
|
|
5. ⏳ 提现记录列表
|
|
6. ⏳ 资产列表
|
|
7. ⏳ 资产详情
|
|
8. ⏳ 套餐列表
|
|
9. ⏳ 套餐详情
|
|
|
|
### 企业端页面
|
|
1. ✅ 数据概览 (Dashboard)
|
|
2. ✅ 标签管理 (企业独有)
|
|
3. ⏳ 资产列表
|
|
4. ⏳ 资产详情
|
|
5. ⏳ 套餐列表
|
|
6. ⏳ 套餐详情
|
|
|
|
---
|
|
|
|
**风格总结**: 保持小米米家的简约、大气、留白充足的设计语言,使用柔和的阴影和圆角,橙色作为点缀色,整体以白色和浅灰为主,营造干净、专业的视觉效果。
|