luo/gt-agent-company

Fork 0

Files

sexygoat 3c62cc1cd1 first

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

28 KiB

Raw Permalink Blame History

代理/企业管理系统 - 设计规范

风格参考: 小米米家APP - 亮色、简约、大气 应用类型: 单页面应用 (SPA) 用户角色: 代理端 + 企业端

🎨 设计理念

小米米家风格特征

简约克制: 大量留白,信息层级清晰
卡片化布局: 圆角卡片承载功能模块
浅色系主导: 白色/浅灰背景 + 橙色点缀
扁平化图标: 线性图标为主,避免过度装饰
网格化排列: 规整的网格系统,整齐有序

🎯 页面结构 (单页面SPA)

导航结构

顶部: 固定导航栏 (角色切换 + 搜索)
├─ 代理端
│  ├─ 📊 数据概览 (Dashboard)
│  ├─ 💰 佣金管理
│  │  ├─ 佣金钱包详情
│  │  ├─ 佣金提现申请
│  │  └─ 提现记录列表
│  ├─ 💳 余额管理
│  │  └─ 余额钱包详情
│  ├─ 📦 资产管理
│  │  ├─ 资产列表
│  │  └─ 资产详情
│  └─ 🎁 套餐管理
│     ├─ 套餐列表
│     └─ 套餐详情
│
└─ 企业端
   ├─ 📊 数据概览
   ├─ 📦 资产管理
   │  ├─ 资产列表
   │  └─ 资产详情
   ├─ 🎁 套餐管理
   │  ├─ 套餐列表
   │  └─ 套餐详情
   └─ 🏷️ 标签管理
      ├─ 标签列表
      └─ 标签分配

🎨 小米米家配色方案

主色调 (保持您的橙色品牌)

// 品牌主色
--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 配置更新

// 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)    │  │         │    │
│  │             │  │         │    │
│  │  [图标]资产 │  │ [卡片]  │    │
│  │  [图标]套餐 │  │ [卡片]  │    │
│  │  [图标]佣金 │  │ [卡片]  │    │
│  │  ...        │  │         │    │
│  └──────────────┘  └─────────┘    │
│                                    │
└────────────────────────────────────┘

响应式断点

// 移动端 (< 768px) - 底部Tab导航
< 768px:  隐藏侧边栏 → 顶部汉堡菜单 + 底部Tab

// 平板 (768px - 1024px) - 可折叠侧边栏
768px+:   侧边栏可折叠为图标模式 (80px)

// 桌面 (> 1024px) - 完整侧边栏
1024px+:  完整侧边栏 (240px) + 宽松内容区

🎴 组件样式 (小米米家风格)

1. 顶部导航栏

<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. 侧边导航栏 (小米风格)

<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. 卡片组件 (米家风格)

<!-- 小米风格卡片 - 柔和阴影 -->
<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. 按钮样式 (小米风格)

<!-- 主要按钮 (橙色) -->
<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. 列表项 (米家风格)

<!-- 资产列表项 -->
<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. 表单样式 (小米风格)

<!-- 输入框 -->
<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)

布局结构

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

💰 佣金钱包详情页

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

🏷️ 标签管理页 (企业端独有)

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

<!-- 隐藏侧边栏,使用底部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
表单输入框有清晰的焦点状态
重要操作有二次确认
加载状态有明确反馈

📦 完整页面清单

代理端页面

✅ 数据概览 (Dashboard)
✅ 佣金钱包详情
⏳ 余额钱包详情 (类似佣金钱包)
⏳ 佣金提现申请
⏳ 提现记录列表
⏳ 资产列表
⏳ 资产详情
⏳ 套餐列表
⏳ 套餐详情

企业端页面

✅ 数据概览 (Dashboard)
✅ 标签管理 (企业独有)
⏳ 资产列表
⏳ 资产详情
⏳ 套餐列表
⏳ 套餐详情

风格总结: 保持小米米家的简约、大气、留白充足的设计语言,使用柔和的阴影和圆角,橙色作为点缀色,整体以白色和浅灰为主,营造干净、专业的视觉效果。

28 KiB Raw Permalink Blame History