@appthen/cli 1.2.10 → 1.2.12

package/tests/test-app/src/pages/data-analytics.tsx

@@ -0,0 +1,1872 @@
+/**
+ * 企业级数据分析平台2
+ * 提供全面的数据分析、实时监控和智能洞察
+ *
+ * @type Page
+ * @route /data-analytics
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+import { Page, Text, View } from '@appthen/react';
+import { Col, Row, Tabs, Tag } from '@appthen/antd';
+
+
+class IProps {
+  autoRefresh?: boolean;
+  refreshInterval?: number;
+  defaultTab?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 当前选中的标签页 */
+  activeTab?: string;
+  /* 选中的时间范围 */
+  timeRange?: string;
+  /* 选中的地区 */
+  selectedRegion?: string;
+  /* 选中的产品类别 */
+  selectedCategory?: string;
+  /* 总销售额 */
+  totalSales?: number;
+  /* 今日访问 */
+  todayVisits?: number;
+  /* 新增用户 */
+  newUsers?: number;
+  /* 转化率 */
+  conversionRate?: number;
+  /* 平均客单价 */
+  avgOrderValue?: number;
+  /* 完成订单 */
+  completedOrders?: number;
+  /* 退款率 */
+  refundRate?: number;
+  /* 客户满意度 */
+  satisfactionRate?: number;
+  /* 复购率 */
+  repurchaseRate?: number;
+  /* 平均订单时长 */
+  avgOrderTime?: number;
+  /* 客户留存率 */
+  retentionRate?: number;
+  /* 月度销售数据 */
+  monthlySales?: any[];
+  /* 分类销售占比 */
+  categorySales?: {
+    /* @example 电子产品 */name?: string,
+    /* @example 38 */value?: number,
+    /* @example #3b82f6 */color?: string,
+    /* @example 📱 */icon?: string,
+    /* @example 1845670 */sales?: number,
+  }[];
+  /* 渠道流量 */
+  channelTraffic?: {
+    /* @example 直接访问 */name?: string,
+    /* @example 35 */value?: number,
+    /* @example #6366f1 */color?: string,
+    /* @example 99960 */visits?: number,
+    /* @example 6.8 */conversion?: number,
+  }[];
+  /* 热门地区 */
+  hotRegions?: {
+    /* @example 广东省 */name?: string,
+    /* @example 4580 */value?: number,
+    /* @example 22.5 */percentage?: number,
+    /* @example 15.2 */growth?: number,
+    cities?: string[],
+  }[];
+  /* 活跃时段 */
+  activeHours?: {
+    /* @example 0-2 */hour?: string,
+    /* @example 420 */value?: number,
+    /* @example 85 */orders?: number,
+  }[];
+  /* 最新活动 */
+  recentActivities?: {
+    /* @example order */type?: string,
+    /* @example 用户 38562 */user?: string,
+    /* @example 完成了一笔订单 */action?: string,
+    /* @example ¥12,580 */amount?: string,
+    /* @example 1分钟前 */time?: string,
+    /* @example iPhone 15 Pro ×1 */detail?: string,
+  }[];
+  /* 用户年龄段 */
+  userAgeDistribution?: {
+    /* @example 18-24 */range?: string,
+    /* @example 28 */value?: number,
+    /* @example #3b82f6 */color?: string,
+  }[];
+  /* 用户性别分布 */
+  userGenderDistribution?: {
+    /* @example 58 */male?: number,
+    /* @example 42 */female?: number,
+  };
+  /* 用户设备分布 */
+  userDeviceDistribution?: {
+    /* @example 手机 */name?: string,
+    /* @example 65 */value?: number,
+    /* @example #3b82f6 */color?: string,
+  }[];
+  /* 产品库存 */
+  productInventory?: {
+    /* @example iPhone 15 Pro */name?: string,
+    /* @example 2580 */stock?: number,
+    /* @example 1580 */sales?: number,
+    /* @example normal */status?: string,
+  }[];
+  /* 供应商表现 */
+  supplierPerformance?: {
+    /* @example 苹果官方 */name?: string,
+    /* @example 5680 */orders?: number,
+    /* @example 98.5 */onTime?: number,
+    /* @example 95 */score?: number,
+    /* @example excellent */status?: string,
+  }[];
+  /* 营销活动效果 */
+  marketingCampaigns?: {
+    /* @example 618大促 */name?: string,
+    /* @example 500000 */budget?: number,
+    /* @example 485000 */spent?: number,
+    /* @example 4.2 */roi?: number,
+    /* @example 12850 */conversions?: number,
+    /* @example active */status?: string,
+  }[];
+  /* 客服数据 */
+  customerService?: {
+    /* @example 856 */totalTickets?: number,
+    /* @example 728 */resolved?: number,
+    /* @example 95 */pending?: number,
+    /* @example 3.2 */avgResponseTime?: number,
+    /* @example 96.5 */satisfaction?: number,
+  };
+  /* 物流数据 */
+  logisticsData?: {
+    /* @example 顺丰速运 */name?: string,
+    /* @example 4580 */orders?: number,
+    /* @example 1.2 */avgTime?: number,
+    /* @example 98.5 */satisfaction?: number,
+    /* @example 99.2 */onTime?: number,
+  }[];
+  /* 风险预警 */
+  riskAlerts?: {
+    /* @example critical */type?: string,
+    /* @example 库存预警 */title?: string,
+    /* @example MacBook Pro 库存低于安全线（45台） */message?: string,
+    /* @example 刚刚 */time?: string,
+  }[];
+  /* 员工绩效 */
+  employeePerformance?: {
+    /* @example 张经理 */name?: string,
+    /* @example 销售一部 */team?: string,
+    /* @example 856000 */sales?: number,
+    /* @example 800000 */target?: number,
+    /* @example 107 */rate?: number,
+  }[];
+  /* 实时订单 */
+  realtimeOrders?: {
+    /* @example ORD-2024-1218-001 */id?: string,
+    /* @example 张** */user?: string,
+    /* @example 12999 */amount?: number,
+    /* @example 刚刚 */time?: string,
+    /* @example 广东省 */region?: string,
+  }[];
+  /* 热门搜索词 */
+  hotSearchKeywords?: {
+    /* @example iPhone 15 Pro */keyword?: string,
+    /* @example 15280 */searches?: number,
+    /* @example 25.6 */growth?: number,
+  }[];
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    activeTab: 'overview',
+    timeRange: 'today',
+    selectedRegion: 'all',
+    selectedCategory: 'all',
+    totalSales: 4856780,
+    todayVisits: 28560,
+    newUsers: 1856,
+    conversionRate: 5.8,
+    avgOrderValue: 458,
+    completedOrders: 10580,
+    refundRate: 1.8,
+    satisfactionRate: 97.2,
+    repurchaseRate: 42.5,
+    avgOrderTime: 3.2,
+    retentionRate: 78.5,
+    monthlySales: [
+      { month: '1月', sales: 285000, target: 250000, growth: 12.5 },
+      { month: '2月', sales: 323000, target: 250000, growth: 13.4 },
+      { month: '3月', sales: 378000, target: 300000, growth: 17.2 },
+      { month: '4月', sales: 345000, target: 300000, growth: -8.7 },
+      { month: '5月', sales: 412000, target: 350000, growth: 19.4 },
+      { month: '6月', sales: 456000, target: 400000, growth: 10.7 },
+      { month: '7月', sales: 498000, target: 450000, growth: 9.2 },
+      { month: '8月', sales: 525000, target: 450000, growth: 5.4 },
+      { month: '9月', sales: 468000, target: 450000, growth: -10.9 },
+      { month: '10月', sales: 489000, target: 450000, growth: 4.5 },
+      { month: '11月', sales: 556000, target: 500000, growth: 13.7 },
+      { month: '12月', sales: 612000, target: 600000, growth: 10.1 },
+    ],
+    categorySales: [
+      {
+        name: '电子产品',
+        value: 38,
+        color: '#3b82f6',
+        icon: '📱',
+        sales: 1845670,
+      },
+      {
+        name: '服装服饰',
+        value: 26,
+        color: '#10b981',
+        icon: '👕',
+        sales: 1262763,
+      },
+      {
+        name: '家居生活',
+        value: 18,
+        color: '#f59e0b',
+        icon: '🏠',
+        sales: 874220,
+      },
+      {
+        name: '美妆个护',
+        value: 12,
+        color: '#ec4899',
+        icon: '💄',
+        sales: 582814,
+      },
+      {
+        name: '食品饮料',
+        value: 4,
+        color: '#ef4444',
+        icon: '🍔',
+        sales: 194271,
+      },
+      {
+        name: '运动户外',
+        value: 2,
+        color: '#8b5cf6',
+        icon: '🏃',
+        sales: 97135,
+      },
+    ],
+    channelTraffic: [
+      {
+        name: '直接访问',
+        value: 35,
+        color: '#6366f1',
+        visits: 99960,
+        conversion: 6.8,
+      },
+      {
+        name: '搜索引擎',
+        value: 32,
+        color: '#ec4899',
+        visits: 91392,
+        conversion: 5.2,
+      },
+      {
+        name: '社交媒体',
+        value: 18,
+        color: '#14b8a6',
+        visits: 51408,
+        conversion: 4.8,
+      },
+      {
+        name: '广告投放',
+        value: 10,
+        color: '#f97316',
+        visits: 28560,
+        conversion: 5.5,
+      },
+      {
+        name: '邮件营销',
+        value: 3,
+        color: '#84cc16',
+        visits: 8568,
+        conversion: 8.2,
+      },
+      {
+        name: '其他',
+        value: 2,
+        color: '#06b6d4',
+        visits: 5712,
+        conversion: 3.5,
+      },
+    ],
+    hotRegions: [
+      {
+        name: '广东省',
+        value: 4580,
+        percentage: 22.5,
+        growth: 15.2,
+        cities: ['广州', '深圳', '东莞'],
+      },
+      {
+        name: '浙江省',
+        value: 3860,
+        percentage: 17.2,
+        growth: 12.8,
+        cities: ['杭州', '宁波', '温州'],
+      },
+      {
+        name: '江苏省',
+        value: 3280,
+        percentage: 15.1,
+        growth: 10.5,
+        cities: ['南京', '苏州', '无锡'],
+      },
+      {
+        name: '北京市',
+        value: 2560,
+        percentage: 12.3,
+        growth: 8.7,
+        cities: ['北京市'],
+      },
+      {
+        name: '上海市',
+        value: 2420,
+        percentage: 11.2,
+        growth: 9.2,
+        cities: ['上海市'],
+      },
+      {
+        name: '四川省',
+        value: 1850,
+        percentage: 8.5,
+        growth: 18.5,
+        cities: ['成都', '绵阳'],
+      },
+      {
+        name: '湖北省',
+        value: 1520,
+        percentage: 6.2,
+        growth: 11.3,
+        cities: ['武汉', '宜昌'],
+      },
+    ],
+    activeHours: [
+      { hour: '0-2', value: 420, orders: 85 },
+      { hour: '2-4', value: 280, orders: 56 },
+      { hour: '4-6', value: 250, orders: 48 },
+      { hour: '6-8', value: 680, orders: 135 },
+      { hour: '8-10', value: 2850, orders: 586 },
+      { hour: '10-12', value: 3680, orders: 742 },
+      { hour: '12-14', value: 2850, orders: 586 },
+      { hour: '14-16', value: 3250, orders: 665 },
+      { hour: '16-18', value: 3850, orders: 780 },
+      { hour: '18-20', value: 4580, orders: 928 },
+      { hour: '20-22', value: 3850, orders: 785 },
+      { hour: '22-24', value: 1280, orders: 265 },
+    ],
+    recentActivities: [
+      {
+        type: 'order',
+        user: '用户 38562',
+        action: '完成了一笔订单',
+        amount: '¥12,580',
+        time: '1分钟前',
+        detail: 'iPhone 15 Pro ×1',
+      },
+      {
+        type: 'register',
+        user: '新用户',
+        action: '注册成功',
+        amount: '-',
+        time: '3分钟前',
+        detail: '来自微信',
+      },
+      {
+        type: 'refund',
+        user: '用户 28234',
+        action: '申请退款',
+        amount: '¥2,980',
+        time: '5分钟前',
+        detail: 'AirPods Pro',
+      },
+      {
+        type: 'review',
+        user: '用户 56921',
+        action: '发布了评价',
+        amount: '⭐⭐⭐⭐⭐',
+        time: '8分钟前',
+        detail: 'MacBook Air M2',
+      },
+      {
+        type: 'order',
+        user: '用户 78123',
+        action: '完成了一笔订单',
+        amount: '¥8,950',
+        time: '10分钟前',
+        detail: 'iPad Air ×1',
+      },
+      {
+        type: 'return',
+        user: '用户 45678',
+        action: '申请退货',
+        amount: '¥15,990',
+        time: '12分钟前',
+        detail: 'MacBook Pro',
+      },
+      {
+        type: 'order',
+        user: '用户 23456',
+        action: '完成了一笔订单',
+        amount: '¥3,280',
+        time: '15分钟前',
+        detail: 'Apple Watch ×1',
+      },
+    ],
+    userAgeDistribution: [
+      { range: '18-24', value: 28, color: '#3b82f6' },
+      { range: '25-34', value: 35, color: '#10b981' },
+      { range: '35-44', value: 22, color: '#f59e0b' },
+      { range: '45-54', value: 10, color: '#ef4444' },
+      { range: '55+', value: 5, color: '#8b5cf6' },
+    ],
+    userGenderDistribution: { male: 58, female: 42 },
+    userDeviceDistribution: [
+      { name: '手机', value: 65, color: '#3b82f6' },
+      { name: '平板', value: 18, color: '#10b981' },
+      { name: '电脑', value: 15, color: '#f59e0b' },
+      { name: '其他', value: 2, color: '#ef4444' },
+    ],
+    productInventory: [
+      { name: 'iPhone 15 Pro', stock: 2580, sales: 1580, status: 'normal' },
+      { name: 'MacBook Air M2', stock: 680, sales: 680, status: 'normal' },
+      { name: 'AirPods Pro', stock: 2200, sales: 2200, status: 'normal' },
+      { name: 'iPad Air', stock: 120, sales: 420, status: 'low' },
+      { name: 'Apple Watch', stock: 860, sales: 860, status: 'normal' },
+      { name: 'MacBook Pro', stock: 45, sales: 185, status: 'critical' },
+    ],
+    supplierPerformance: [
+      {
+        name: '苹果官方',
+        orders: 5680,
+        onTime: 98.5,
+        score: 95,
+        status: 'excellent',
+      },
+      {
+        name: '华为供应链',
+        orders: 3250,
+        onTime: 96.2,
+        score: 92,
+        status: 'good',
+      },
+      {
+        name: '小米官方',
+        orders: 2850,
+        onTime: 94.8,
+        score: 89,
+        status: 'good',
+      },
+      {
+        name: '三星电子',
+        orders: 1920,
+        onTime: 92.5,
+        score: 86,
+        status: 'normal',
+      },
+      {
+        name: 'OPPO官方',
+        orders: 1680,
+        onTime: 89.2,
+        score: 82,
+        status: 'normal',
+      },
+    ],
+    marketingCampaigns: [
+      {
+        name: '618大促',
+        budget: 500000,
+        spent: 485000,
+        roi: 4.2,
+        conversions: 12850,
+        status: 'active',
+      },
+      {
+        name: '新用户首单',
+        budget: 100000,
+        spent: 95600,
+        roi: 3.8,
+        conversions: 4580,
+        status: 'active',
+      },
+      {
+        name: '会员专享',
+        budget: 200000,
+        spent: 185000,
+        roi: 2.8,
+        conversions: 5860,
+        status: 'active',
+      },
+      {
+        name: '品牌推广',
+        budget: 300000,
+        spent: 250000,
+        roi: 1.5,
+        conversions: 1850,
+        status: 'paused',
+      },
+    ],
+    customerService: {
+      totalTickets: 856,
+      resolved: 728,
+      pending: 95,
+      avgResponseTime: 3.2,
+      satisfaction: 96.5,
+    },
+    logisticsData: [
+      {
+        name: '顺丰速运',
+        orders: 4580,
+        avgTime: 1.2,
+        satisfaction: 98.5,
+        onTime: 99.2,
+      },
+      {
+        name: '京东物流',
+        orders: 3850,
+        avgTime: 1.5,
+        satisfaction: 97.8,
+        onTime: 98.8,
+      },
+      {
+        name: '中通快递',
+        orders: 2850,
+        avgTime: 2.8,
+        satisfaction: 94.5,
+        onTime: 95.2,
+      },
+      {
+        name: '圆通速递',
+        orders: 1920,
+        avgTime: 3.2,
+        satisfaction: 92.8,
+        onTime: 93.5,
+      },
+    ],
+    riskAlerts: [
+      {
+        type: 'critical',
+        title: '库存预警',
+        message: 'MacBook Pro 库存低于安全线（45台）',
+        time: '刚刚',
+      },
+      {
+        type: 'warning',
+        title: '退款率上升',
+        message: '上周退款率较前周上升 0.5%',
+        time: '30分钟前',
+      },
+      {
+        type: 'info',
+        title: '流量高峰',
+        message: '预计18:00-20:00将迎来流量高峰',
+        time: '1小时前',
+      },
+      {
+        type: 'info',
+        title: '活动预热',
+        message: '双11活动预热开始，关注转化率变化',
+        time: '2小时前',
+      },
+    ],
+    employeePerformance: [
+      {
+        name: '张经理',
+        team: '销售一部',
+        sales: 856000,
+        target: 800000,
+        rate: 107,
+      },
+      {
+        name: '李主管',
+        team: '销售二部',
+        sales: 728000,
+        target: 750000,
+        rate: 97,
+      },
+      {
+        name: '王总监',
+        team: '销售三部',
+        sales: 685000,
+        target: 600000,
+        rate: 114,
+      },
+      {
+        name: '赵经理',
+        team: '大客户部',
+        sales: 925000,
+        target: 900000,
+        rate: 103,
+      },
+    ],
+    realtimeOrders: [
+      {
+        id: 'ORD-2024-1218-001',
+        user: '张**',
+        amount: 12999,
+        time: '刚刚',
+        region: '广东省',
+      },
+      {
+        id: 'ORD-2024-1218-002',
+        user: '李**',
+        amount: 5999,
+        time: '30秒前',
+        region: '浙江省',
+      },
+      {
+        id: 'ORD-2024-1218-003',
+        user: '王**',
+        amount: 8999,
+        time: '1分钟前',
+        region: '北京市',
+      },
+      {
+        id: 'ORD-2024-1218-004',
+        user: '赵**',
+        amount: 25999,
+        time: '2分钟前',
+        region: '上海市',
+      },
+      {
+        id: 'ORD-2024-1218-005',
+        user: '钱**',
+        amount: 799,
+        time: '3分钟前',
+        region: '江苏省',
+      },
+      {
+        id: 'ORD-2024-1218-006',
+        user: '孙**',
+        amount: 1599,
+        time: '4分钟前',
+        region: '四川省',
+      },
+      {
+        id: 'ORD-2024-1218-007',
+        user: '周**',
+        amount: 3299,
+        time: '5分钟前',
+        region: '湖北省',
+      },
+      {
+        id: 'ORD-2024-1218-008',
+        user: '吴**',
+        amount: 899,
+        time: '6分钟前',
+        region: '福建省',
+      },
+    ],
+    hotSearchKeywords: [
+      { keyword: 'iPhone 15 Pro', searches: 15280, growth: 25.6 },
+      { keyword: 'MacBook Air', searches: 12850, growth: 18.2 },
+      { keyword: 'AirPods Pro', searches: 9860, growth: 15.8 },
+      { keyword: 'Apple Watch', searches: 8250, growth: 12.5 },
+      { keyword: 'iPad Pro', searches: 6280, growth: 22.3 },
+      { keyword: '华为 Mate 60', searches: 5850, growth: 45.2 },
+      { keyword: '小米 14', searches: 4860, growth: 35.8 },
+      { keyword: '三星 S24', searches: 3850, growth: 28.5 },
+    ],
+  };
+
+  handleTabChange(key) {
+    this.setState({
+      activeTab: key,
+    });
+  }
+
+  handleTimeRangeChange(range) {
+    this.setState({
+      timeRange: range,
+    });
+  }
+
+  async loadData() {
+    // 数据加载逻辑
+  }
+
+  getActivityIcon(type) {
+    const icons = {
+      order: '🛒',
+      register: '👤',
+      refund: '↩️',
+      review: '⭐',
+      return: '📦',
+    };
+    return icons[type] || '📌';
+  }
+
+  getActivityColor(type) {
+    const colors = {
+      order: 'bg-green-100 text-green-700',
+      register: 'bg-blue-100 text-blue-700',
+      refund: 'bg-red-100 text-red-700',
+      review: 'bg-yellow-100 text-yellow-700',
+      return: 'bg-orange-100 text-orange-700',
+    };
+    return colors[type] || 'bg-gray-100 text-gray-700';
+  }
+
+  getRiskAlertStyle(type) {
+    const styles = {
+      critical: 'bg-red-500/20 border-red-500/50 text-red-400',
+      warning: 'bg-yellow-500/20 border-yellow-500/50 text-yellow-400',
+      info: 'bg-blue-500/20 border-blue-500/50 text-blue-400',
+    };
+    return styles[type] || styles.info;
+  }
+
+  getStockStatus(status) {
+    const config = {
+      normal: {
+        text: '正常',
+        color: 'bg-green-500/20 text-green-400',
+      },
+      low: {
+        text: '偏低',
+        color: 'bg-yellow-500/20 text-yellow-400',
+      },
+      critical: {
+        text: '紧急',
+        color: 'bg-red-500/20 text-red-400',
+      },
+    };
+    return config[status] || config.normal;
+  }
+
+  getPerformanceStatus(score) {
+    if (score >= 95)
+      return {
+        text: '优秀',
+        color: 'bg-green-500/20 text-green-400',
+      };
+    if (score >= 90)
+      return {
+        text: '良好',
+        color: 'bg-blue-500/20 text-blue-400',
+      };
+    if (score >= 85)
+      return {
+        text: '正常',
+        color: 'bg-yellow-500/20 text-yellow-400',
+      };
+    return {
+      text: '待改进',
+      color: 'bg-red-500/20 text-red-400',
+    };
+  }
+
+  render() {
+    return (
+      <Page className="bg-gradient-to-br from-[#0f172a] via-purple-900 to-[#0f172a] min-h-screen">
+        <View className="bg-slate-900/60 backdrop-blur-xl border-white/10 pl-[32px] pr-[32px] pt-[20px] pb-[20px] border-b-[1px] border-b-solid sticky top-[0px] z-50">
+          <View className="flex items-center justify-between ml-[auto] mr-[auto]">
+            <View>
+              <h1 className="bg-gradient-to-r from-blue-400 via-purple-400 to-[#f472b6] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-3xl font-bold">
+                🎯 企业级数据分析平台
+              </h1>
+              <p className="text-[#9ca3af] mt-[4px] text-sm">
+                实时监控 · 智能分析 · 数据驱动决策
+              </p>
+            </View>
+            <View className="space-x-4 flex items-center">
+              <View className="space-x-2 bg-slate-800/50 flex items-center rounded-lg p-[4px]">
+                {['today', 'week', 'month', 'year'].map((range, index) => (
+                  <button
+                    key={range}
+                    onClick={() => this.handleTimeRangeChange(range)}
+                    className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-300 ${
+                      this.state.timeRange === range
+                        ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white'
+                        : 'text-gray-400 hover:text-white'
+                    }`}
+                  >
+                    {range === 'today'
+                      ? '今日'
+                      : range === 'week'
+                      ? '本周'
+                      : range === 'month'
+                      ? '本月'
+                      : '本年'}
+                  </button>
+                ))}
+              </View>
+              <View className="bg-green-500/20 border-green-500/30 pl-[16px] pr-[16px] pt-[8px] pb-[8px] rounded-full border border-solid">
+                <Text
+                  _unsafe_MixedSetter_children_select="StringSetter"
+                  className="text-[var(--green-400)] text-sm font-medium flex items-center"
+                >
+                  1231232132133333
+                </Text>
+              </View>
+              <button
+                onClick={() => this.loadData()}
+                className="hover:shadow-lg hover:scale-105 transition-all duration-300 bg-gradient-to-r from-purple-500 to-[#ec4899] pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-lg font-medium"
+              >
+                🔄 刷新
+              </button>
+            </View>
+          </View>
+        </View>
+        <View className="p-[24px] ml-[auto] mr-[auto]">
+          <Row gutter={[16, 16]} className="mb-[24px]">
+            {this.state.riskAlerts?.slice(0, 2).map((alert, index) => (
+              <Col xs={24} sm={12} md={6} key={index}>
+                <View
+                  className={`p-4 rounded-xl border backdrop-blur-sm ${this.getRiskAlertStyle(
+                    alert.type
+                  )} hover:scale-105 transition-transform duration-300`}
+                >
+                  <View className="flex items-center justify-between mb-[8px]">
+                    <Text className="font-bold">{alert.title}</Text>
+                    <Text className="text-xs">{alert.time}</Text>
+                  </View>
+                  <p className="text-sm [opacity:0.9]">{alert.message}</p>
+                </View>
+              </Col>
+            ))}
+          </Row>
+          <Row gutter={[20, 20]} className="mb-[32px]">
+            <Col xs={24} sm={12} lg={6}>
+              <View className="backdrop-blur-sm border-blue-500/30 hover:shadow-2xl hover:border-blue-400/50 transition-all duration-300 group bg-gradient-to-br from-[var(--blue-500/20)] to-[var(--blue-600/10)] border border-solid rounded-2xl p-[24px]">
+                <View className="flex items-center justify-between mb-[16px]">
+                  <View className="group-hover:scale-110 transition-transform duration-300 text-4xl">
+                    💰
+                  </View>
+                  <View className="space-x-2 flex items-center">
+                    <Tag color="green">+15.2%</Tag>
+                  </View>
+                </View>
+                <View className="text-[#9ca3af] text-sm mb-[4px]">
+                  总销售额
+                </View>
+                <View className="text-3xl font-bold text-[#ffffff] mb-[8px]">
+                  ¥<Text>{this.state.totalSales?.toLocaleString()}</Text>
+                </View>
+                <View className="text-[#6b7280] text-xs">目标达成率 97.2%</View>
+              </View>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <View className="backdrop-blur-sm border-purple-500/30 hover:shadow-2xl hover:border-purple-400/50 transition-all duration-300 group bg-gradient-to-br from-[var(--purple-500/20)] to-[var(--purple-600/10)] border border-solid rounded-2xl p-[24px]">
+                <View className="flex items-center justify-between mb-[16px]">
+                  <View className="group-hover:scale-110 transition-transform duration-300 text-4xl">
+                    👁️
+                  </View>
+                  <Tag color="green">+8.5%</Tag>
+                </View>
+                <View className="text-[#9ca3af] text-sm mb-[4px]">
+                  今日访问
+                </View>
+                <View className="text-3xl font-bold text-[#ffffff] mb-[8px]">
+                  <Text>{this.state.todayVisits?.toLocaleString()}</Text>
+                </View>
+                <View className="text-[#6b7280] text-xs">较昨日增加 2,230</View>
+              </View>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <View className="backdrop-blur-sm border-pink-500/30 hover:shadow-2xl hover:border-pink-400/50 transition-all duration-300 group bg-gradient-to-br from-[var(--pink-500/20)] to-[var(--pink-600/10)] border border-solid rounded-2xl p-[24px]">
+                <View className="flex items-center justify-between mb-[16px]">
+                  <View className="group-hover:scale-110 transition-transform duration-300 text-4xl">
+                    👥
+                  </View>
+                  <Tag color="green">+12.3%</Tag>
+                </View>
+                <View className="text-[#9ca3af] text-sm mb-[4px]">
+                  新增用户
+                </View>
+                <View className="text-3xl font-bold text-[#ffffff] mb-[8px]">
+                  <Text>{this.state.newUsers?.toLocaleString()}</Text>
+                </View>
+                <View className="text-[#6b7280] text-xs">用户总数 42,852</View>
+              </View>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <View className="backdrop-blur-sm border-cyan-500/30 hover:shadow-2xl hover:border-cyan-400/50 transition-all duration-300 group bg-gradient-to-br from-[var(--cyan-500/20)] to-[var(--cyan-600/10)] border border-solid rounded-2xl p-[24px]">
+                <View className="flex items-center justify-between mb-[16px]">
+                  <View className="group-hover:scale-110 transition-transform duration-300 text-4xl">
+                    📊
+                  </View>
+                  <Tag color="green">+0.8%</Tag>
+                </View>
+                <View className="text-[#9ca3af] text-sm mb-[4px]">转化率</View>
+                <View className="text-3xl font-bold text-[#ffffff] mb-[8px]">
+                  <Text>{this.state.conversionRate}</Text>%
+                </View>
+                <View className="text-[#6b7280] text-xs">行业平均 3.5%</View>
+              </View>
+            </Col>
+          </Row>
+          <Row gutter={[16, 16]} className="mb-[32px]">
+            <Col xs={12} sm={8} md={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">
+                  平均客单价
+                </View>
+                <View className="text-xl font-bold text-[#ffffff]">
+                  ¥<Text>{this.state.avgOrderValue}</Text>
+                </View>
+              </View>
+            </Col>
+            <Col xs={12} sm={8} md={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">
+                  完成订单
+                </View>
+                <View className="text-xl font-bold text-[#ffffff]">
+                  <Text>{this.state.completedOrders?.toLocaleString()}</Text>
+                </View>
+              </View>
+            </Col>
+            <Col xs={12} sm={8} md={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">退款率</View>
+                <View className="text-xl font-bold text-[#ffffff]">
+                  <Text>{this.state.refundRate}</Text>%
+                </View>
+              </View>
+            </Col>
+            <Col xs={12} sm={8} md={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">
+                  客户满意度
+                </View>
+                <View className="text-xl font-bold text-[var(--green-400)]">
+                  <Text>{this.state.satisfactionRate}</Text>%
+                </View>
+              </View>
+            </Col>
+            <Col xs={12} sm={8} md={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">复购率</View>
+                <View className="text-xl font-bold text-[#ffffff]">
+                  <Text>{this.state.repurchaseRate}</Text>%
+                </View>
+              </View>
+            </Col>
+            <Col xs={12} sm={8} md={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">
+                  客户留存率
+                </View>
+                <View className="text-xl font-bold text-[#ffffff]">
+                  <Text>{this.state.retentionRate}</Text>%
+                </View>
+              </View>
+            </Col>
+          </Row>
+          <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 border border-solid rounded-2xl overflow-hidden mb-[32px]">
+            <Tabs
+              activeKey={this.state.activeTab}
+              onChange={this.handleTabChange}
+              items={[
+                {
+                  key: 'overview',
+                  label: (
+                    <Text className="text-[#d1d5db]">
+                      <Text className="mr-[8px]">📊</Text>数据概览
+                    </Text>
+                  ),
+                  children: (
+                    <View className="p-[24px]">
+                      <Row gutter={[24, 24]}>
+                        <Col xs={24}>
+                          <View className="mb-[24px]">
+                            <h3 className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                              月度销售趋势
+                            </h3>
+                            <View className="space-y-3">
+                              {this.state.monthlySales.map((item, index) => {
+                                const actualPercent =
+                                  (item.sales / 620000) * 100;
+                                const targetPercent =
+                                  (item.target / 620000) * 100;
+                                const isOverTarget = item.sales >= item.target;
+                                return (
+                                  <View
+                                    key={index}
+                                    className="flex items-center"
+                                  >
+                                    <View className="w-[56px] text-[#9ca3af] text-sm">
+                                      <Text>{item.month}</Text>
+                                    </View>
+                                    <View className="space-x-2 flex-1 flex items-center">
+                                      <View className="bg-slate-700/50 flex-1 rounded-full h-[24px] overflow-hidden relative">
+                                        <View
+                                          className="absolute top-0 left-0 h-full bg-gradient-to-r from-purple-500 to-pink-500 transition-all duration-500"
+                                          style={{ width: `${actualPercent}%` }}
+                                        />
+                                        <View
+                                          className="absolute top-0 left-0 h-full border-2 border-dashed border-white/30 transition-all duration-500"
+                                          style={{ width: `${targetPercent}%` }}
+                                        />
+                                      </View>
+                                    </View>
+                                    <View className="w-[112px] text-[var(--right)]">
+                                      <View
+                                        className={`text-sm font-medium ${
+                                          isOverTarget
+                                            ? 'text-green-400'
+                                            : 'text-white'
+                                        }`}
+                                      >
+                                        ¥
+                                        <Text>
+                                          {(item.sales / 10000).toFixed(1)}
+                                        </Text>
+                                        万
+                                      </View>
+                                      <View
+                                        className={`text-xs ${
+                                          item.growth >= 0
+                                            ? 'text-green-400'
+                                            : 'text-red-400'
+                                        }`}
+                                      >
+                                        {item.growth >= 0 ? '↑' : '↓'}
+                                        <Text>{Math.abs(item.growth)}</Text>%
+                                      </View>
+                                    </View>
+                                  </View>
+                                );
+                              })}
+                            </View>
+                          </View>
+                        </Col>
+                      </Row>
+                    </View>
+                  ),
+                },
+                {
+                  key: 'products',
+                  label: (
+                    <Text className="text-[#d1d5db]">
+                      <Text className="mr-[8px]">📦</Text>产品分析
+                    </Text>
+                  ),
+                  children: (
+                    <View className="p-[24px]">
+                      <Row gutter={[24, 24]}>
+                        <Col xs={24} lg={12}>
+                          <h3 className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                            分类销售占比
+                          </h3>
+                          <View className="space-y-4">
+                            {this.state.categorySales.map((item, index) => (
+                              <View key={index}>
+                                <View className="flex items-center justify-between mb-[8px]">
+                                  <View className="flex items-center">
+                                    <Text className="text-2xl mr-[12px]">
+                                      {item.icon}
+                                    </Text>
+                                    <Text className="text-[#d1d5db] font-medium">
+                                      {item.name}
+                                    </Text>
+                                  </View>
+                                  <View className="text-[var(--right)]">
+                                    <Text className="text-[#ffffff] font-bold">
+                                      {item.value}%
+                                    </Text>
+                                    <View className="text-xs text-[#6b7280]">
+                                      ¥
+                                      <Text>
+                                        {(item.sales / 10000).toFixed(0)}
+                                      </Text>
+                                      万
+                                    </View>
+                                  </View>
+                                </View>
+                                <View className="bg-slate-700/50 w-full rounded-full h-[12px] overflow-hidden">
+                                  <View
+                                    className="h-full rounded-full transition-all duration-500"
+                                    style={{
+                                      width: `${item.value}%`,
+                                      backgroundColor: item.color,
+                                    }}
+                                  />
+                                </View>
+                              </View>
+                            ))}
+                          </View>
+                        </Col>
+                        <Col xs={24} lg={12}>
+                          <h3 className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                            库存状态监控
+                          </h3>
+                          <View className="space-y-3">
+                            {this.state.productInventory.map(
+                              (product, index) => {
+                                const status = this.getStockStatus(
+                                  product.status
+                                );
+                                const stockPercent = Math.min(
+                                  (product.stock / 3000) * 100,
+                                  100
+                                );
+                                return (
+                                  <View
+                                    key={index}
+                                    className="bg-slate-700/30 p-[16px] rounded-xl"
+                                  >
+                                    <View className="flex items-center justify-between mb-[8px]">
+                                      <Text className="text-[#ffffff] font-medium">
+                                        {product.name}
+                                      </Text>
+                                      <Text
+                                        className={`px-2 py-1 text-xs rounded-full ${status.color}`}
+                                      >
+                                        {status.text}
+                                      </Text>
+                                    </View>
+                                    <View className="space-x-4 flex items-center text-sm text-[#9ca3af]">
+                                      <Text>库存:{product.stock}</Text>
+                                      <Text>销量:{product.sales}</Text>
+                                      <Text>
+                                        周转:
+                                        {(
+                                          (product.sales / product.stock) *
+                                          100
+                                        ).toFixed(0)}
+                                        %
+                                      </Text>
+                                    </View>
+                                    <View className="bg-slate-700/50 w-full rounded-full h-[8px] mt-[12px]">
+                                      <View
+                                        className="h-full rounded-full transition-all duration-500"
+                                        style={{
+                                          width: `${stockPercent}%`,
+                                          backgroundColor:
+                                            product.status === 'critical'
+                                              ? '#ef4444'
+                                              : product.status === 'low'
+                                              ? '#f59e0b'
+                                              : '#10b981',
+                                        }}
+                                      />
+                                    </View>
+                                  </View>
+                                );
+                              }
+                            )}
+                          </View>
+                        </Col>
+                      </Row>
+                    </View>
+                  ),
+                },
+                {
+                  key: 'users',
+                  label: (
+                    <Text className="text-[#d1d5db]">
+                      <Text className="mr-[8px]">👥</Text>用户画像
+                    </Text>
+                  ),
+                  children: (
+                    <View className="p-[24px]">
+                      <Row gutter={[24, 24]}>
+                        <Col xs={24} lg={8}>
+                          <h3 className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                            年龄段分布
+                          </h3>
+                          <View className="space-y-3">
+                            {this.state.userAgeDistribution.map(
+                              (item, index) => (
+                                <View key={index}>
+                                  <View className="flex items-center justify-between mb-[8px]">
+                                    <Text className="text-[#d1d5db]">
+                                      {item.range}岁
+                                    </Text>
+                                    <Text className="text-[#ffffff] font-bold">
+                                      {item.value}%
+                                    </Text>
+                                  </View>
+                                  <View className="bg-slate-700/50 w-full rounded-full h-[12px] overflow-hidden">
+                                    <View
+                                      className="h-full rounded-full transition-all duration-500"
+                                      style={{
+                                        width: `${item.value}%`,
+                                        backgroundColor: item.color,
+                                      }}
+                                    />
+                                  </View>
+                                </View>
+                              )
+                            )}
+                          </View>
+                        </Col>
+                        <Col xs={24} lg={8}>
+                          <h3 className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                            性别分布
+                          </h3>
+                          <View className="flex items-center justify-center pt-[32px] pb-[32px]">
+                            <View className="relative w-[160px] h-[160px]">
+                              <svg
+                                viewBox="0 0 36 36"
+                                className="w-full h-full"
+                              >
+                                <path
+                                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                                  fill="none"
+                                  stroke="#3b82f6"
+                                  strokeWidth="3"
+                                  strokeDasharray={`${this.state.userGenderDistribution?.male}, 100`}
+                                />
+                                <path
+                                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                                  fill="none"
+                                  stroke="#ec4899"
+                                  strokeWidth="3"
+                                  strokeDasharray={`${this.state.userGenderDistribution?.female}, 100`}
+                                  strokeDashoffset={`-${this.state.userGenderDistribution?.male}`}
+                                />
+                              </svg>
+                              <View className="inset-0 absolute flex items-center justify-center">
+                                <View className="text-[var(--center)]">
+                                  <View className="text-2xl font-bold text-[#ffffff]">
+                                    <Text>
+                                      {this.state.userGenderDistribution?.male +
+                                        this.state.userGenderDistribution
+                                          ?.female}
+                                    </Text>
+                                    %
+                                  </View>
+                                  <View className="text-xs text-[#9ca3af]">
+                                    总用户
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                            <View className="space-y-3 ml-[32px]">
+                              <View className="flex items-center">
+                                <View className="w-[12px] h-[12px] bg-[#3b82f6] rounded-full mr-[8px]" />
+                                <Text className="text-[#d1d5db]">
+                                  男性{this.state.userGenderDistribution?.male}%
+                                </Text>
+                              </View>
+                              <View className="flex items-center">
+                                <View className="w-[12px] h-[12px] bg-[#ec4899] rounded-full mr-[8px]" />
+                                <Text className="text-[#d1d5db]">
+                                  女性
+                                  {this.state.userGenderDistribution?.female}%
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </Col>
+                        <Col xs={24} lg={8}>
+                          <h3 className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                            设备分布
+                          </h3>
+                          <View className="space-y-3">
+                            {this.state.userDeviceDistribution.map(
+                              (item, index) => (
+                                <View key={index}>
+                                  <View className="flex items-center justify-between mb-[8px]">
+                                    <Text className="text-[#d1d5db]">
+                                      {item.name}
+                                    </Text>
+                                    <Text className="text-[#ffffff] font-bold">
+                                      {item.value}%
+                                    </Text>
+                                  </View>
+                                  <View className="bg-slate-700/50 w-full rounded-full h-[12px] overflow-hidden">
+                                    <View
+                                      className="h-full rounded-full transition-all duration-500"
+                                      style={{
+                                        width: `${item.value}%`,
+                                        backgroundColor: item.color,
+                                      }}
+                                    />
+                                  </View>
+                                </View>
+                              )
+                            )}
+                          </View>
+                        </Col>
+                      </Row>
+                    </View>
+                  ),
+                },
+                {
+                  key: 'marketing',
+                  label: (
+                    <Text className="text-[#d1d5db]">
+                      <Text className="mr-[8px]">📣</Text>营销活动
+                    </Text>
+                  ),
+                  children: (
+                    <View className="p-[24px]">
+                      <Row gutter={[24, 24]}>
+                        <Col xs={24}>
+                          <h3 className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                            活动效果分析
+                          </h3>
+                          <View className="space-y-4">
+                            {this.state.marketingCampaigns.map(
+                              (campaign, index) => (
+                                <View
+                                  key={index}
+                                  className="bg-slate-700/30 p-[16px] rounded-xl"
+                                >
+                                  <View className="flex items-center justify-between mb-[12px]">
+                                    <View className="space-x-4 flex items-center">
+                                      <Text className="text-[#ffffff] font-bold text-lg">
+                                        {campaign.name}
+                                      </Text>
+                                      <Tag
+                                        color={
+                                          campaign.status === 'active'
+                                            ? 'green'
+                                            : 'default'
+                                        }
+                                      >
+                                        {campaign.status === 'active'
+                                          ? '进行中'
+                                          : '已暂停'}
+                                      </Tag>
+                                    </View>
+                                    <View className="text-[var(--right)]">
+                                      <View className="text-[var(--green-400)] font-bold">
+                                        ROI:<Text>{campaign.roi}</Text>x
+                                      </View>
+                                      <View className="text-xs text-[#6b7280]">
+                                        转化:
+                                        <Text>
+                                          {campaign.conversions?.toLocaleString()}
+                                        </Text>
+                                      </View>
+                                    </View>
+                                  </View>
+                                  <View className="gap-4 grid grid-cols-3 text-sm">
+                                    <View>
+                                      <View className="text-[#9ca3af]">
+                                        预算
+                                      </View>
+                                      <View className="text-[#ffffff] font-medium">
+                                        ¥
+                                        <Text>
+                                          {campaign.budget?.toLocaleString()}
+                                        </Text>
+                                      </View>
+                                    </View>
+                                    <View>
+                                      <View className="text-[#9ca3af]">
+                                        已使用
+                                      </View>
+                                      <View className="text-[#ffffff] font-medium">
+                                        ¥
+                                        <Text>
+                                          {campaign.spent?.toLocaleString()}
+                                        </Text>
+                                      </View>
+                                    </View>
+                                    <View>
+                                      <View className="text-[#9ca3af]">
+                                        使用率
+                                      </View>
+                                      <View className="text-[#ffffff] font-medium">
+                                        <Text>
+                                          {(
+                                            (campaign.spent / campaign.budget) *
+                                            100
+                                          ).toFixed(0)}
+                                        </Text>
+                                        %
+                                      </View>
+                                    </View>
+                                  </View>
+                                  <View className="bg-slate-700/50 w-full rounded-full h-[8px] mt-[12px]">
+                                    <View
+                                      className="h-full rounded-full bg-gradient-to-r from-purple-500 to-pink-500"
+                                      style={{
+                                        width: `${
+                                          (campaign.spent / campaign.budget) *
+                                          100
+                                        }%`,
+                                      }}
+                                    />
+                                  </View>
+                                </View>
+                              )
+                            )}
+                          </View>
+                        </Col>
+                      </Row>
+                    </View>
+                  ),
+                },
+                {
+                  key: 'operations',
+                  label: (
+                    <Text className="text-[#d1d5db]">
+                      <Text className="mr-[8px]">⚙️</Text>运营监控
+                    </Text>
+                  ),
+                  children: (
+                    <View className="p-[24px]">
+                      <Row gutter={[24, 24]}>
+                        <Col xs={24} lg={12}>
+                          <h3 className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                            供应商表现
+                          </h3>
+                          <View className="space-y-3">
+                            {this.state.supplierPerformance.map(
+                              (supplier, index) => {
+                                const status = this.getPerformanceStatus(
+                                  supplier.score
+                                );
+                                return (
+                                  <View
+                                    key={index}
+                                    className="bg-slate-700/30 p-[16px] rounded-xl"
+                                  >
+                                    <View className="flex items-center justify-between mb-[8px]">
+                                      <View className="flex items-center">
+                                        <View
+                                          className={`w-8 h-8 rounded-lg flex items-center justify-center mr-3 text-white text-sm font-bold ${
+                                            index === 0
+                                              ? 'bg-gradient-to-br from-yellow-400 to-yellow-600'
+                                              : index === 1
+                                              ? 'bg-gradient-to-br from-gray-400 to-gray-600'
+                                              : index === 2
+                                              ? 'bg-gradient-to-br from-orange-400 to-orange-600'
+                                              : 'bg-slate-600'
+                                          }`}
+                                        >
+                                          <Text>{index + 1}</Text>
+                                        </View>
+                                        <View>
+                                          <View className="text-[#ffffff] font-medium">
+                                            <Text>{supplier.name}</Text>
+                                          </View>
+                                          <View className="text-xs text-[#6b7280]">
+                                            订单:
+                                            <Text>
+                                              {supplier.orders?.toLocaleString()}
+                                            </Text>
+                                          </View>
+                                        </View>
+                                      </View>
+                                      <View className="text-[var(--right)]">
+                                        <View className="text-[#ffffff] font-bold">
+                                          评分:<Text>{supplier.score}</Text>
+                                        </View>
+                                        <View
+                                          className={`text-xs px-2 py-1 rounded-full ${status.color}`}
+                                        >
+                                          <Text>{status.text}</Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View className="gap-2 grid grid-cols-2 text-xs text-[#9ca3af]">
+                                      <View>
+                                        准时率:<Text>{supplier.onTime}</Text>%
+                                      </View>
+                                    </View>
+                                  </View>
+                                );
+                              }
+                            )}
+                          </View>
+                        </Col>
+                        <Col xs={24} lg={12}>
+                          <h3 className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                            物流数据
+                          </h3>
+                          <View className="space-y-3">
+                            {this.state.logisticsData.map(
+                              (logistics, index) => (
+                                <View
+                                  key={index}
+                                  className="bg-slate-700/30 p-[16px] rounded-xl"
+                                >
+                                  <View className="flex items-center justify-between mb-[8px]">
+                                    <Text className="text-[#ffffff] font-medium">
+                                      {logistics.name}
+                                    </Text>
+                                    <Text className="text-[#9ca3af] text-sm">
+                                      {logistics.orders?.toLocaleString()}单
+                                    </Text>
+                                  </View>
+                                  <View className="gap-2 grid grid-cols-3 text-sm text-[#9ca3af]">
+                                    <View>
+                                      <View className="text-xs">平均时效</View>
+                                      <View className="text-[#ffffff]">
+                                        <Text>{logistics.avgTime}</Text>天
+                                      </View>
+                                    </View>
+                                    <View>
+                                      <View className="text-xs">满意度</View>
+                                      <View className="text-[#ffffff]">
+                                        <Text>{logistics.satisfaction}</Text>%
+                                      </View>
+                                    </View>
+                                    <View>
+                                      <View className="text-xs">准时率</View>
+                                      <View className="text-[#ffffff]">
+                                        <Text>{logistics.onTime}</Text>%
+                                      </View>
+                                    </View>
+                                  </View>
+                                </View>
+                              )
+                            )}
+                          </View>
+                        </Col>
+                      </Row>
+                    </View>
+                  ),
+                },
+              ]}
+            />
+          </View>
+          <Row gutter={[24, 24]} className="mb-[32px]">
+            <Col xs={24} lg={14}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-green-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`热门地区 TOP 7`}</h2>
+                <View className="space-y-4">
+                  {this.state.hotRegions.map((region, index) => (
+                    <View
+                      key={index}
+                      className="bg-slate-700/30 hover:bg-slate-700/50 transition-all duration-300 flex items-center justify-between p-[12px] rounded-xl"
+                    >
+                      <View className="flex items-center flex-1">
+                        <View
+                          className={`w-8 h-8 rounded-lg flex items-center justify-center mr-3 text-white font-bold text-sm ${
+                            index === 0
+                              ? 'bg-gradient-to-br from-yellow-400 to-yellow-600'
+                              : index === 1
+                              ? 'bg-gradient-to-br from-gray-400 to-gray-600'
+                              : index === 2
+                              ? 'bg-gradient-to-br from-orange-400 to-orange-600'
+                              : 'bg-gradient-to-br from-slate-500 to-slate-600'
+                          }`}
+                        >
+                          <Text>{index + 1}</Text>
+                        </View>
+                        <View className="flex-1">
+                          <View className="text-[#ffffff] font-medium">
+                            <Text>{region.name}</Text>
+                          </View>
+                          <View className="text-xs text-[#6b7280]">
+                            <Text>{region.cities?.join('、')}</Text>
+                          </View>
+                        </View>
+                      </View>
+                      <View className="text-[var(--right)] ml-[16px]">
+                        <View className="text-[#ffffff] font-bold">
+                          <Text>{region.value?.toLocaleString()}</Text>
+                        </View>
+                        <View
+                          className={`text-xs font-medium ${
+                            region.growth >= 0
+                              ? 'text-green-400'
+                              : 'text-red-400'
+                          }`}
+                        >
+                          {region.growth >= 0 ? '↑' : '↓'}
+                          <Text>{Math.abs(region.growth)}</Text>%
+                        </View>
+                      </View>
+                      <View className="ml-[16px] w-[64px] text-[var(--right)]">
+                        <View className="text-xs text-[#6b7280]">
+                          <Text>{region.percentage}</Text>%
+                        </View>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+            <Col xs={24} lg={10}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-pink-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`渠道流量来源`}</h2>
+                <View className="space-y-4">
+                  {this.state.channelTraffic.map((item, index) => (
+                    <View key={index}>
+                      <View className="flex items-center justify-between mb-[8px]">
+                        <Text className="text-[#d1d5db] font-medium">
+                          {item.name}
+                        </Text>
+                        <View className="text-[var(--right)]">
+                          <Text className="text-[#ffffff] font-bold">
+                            {item.value}%
+                          </Text>
+                          <View className="text-xs text-[#6b7280]">
+                            转化:<Text>{item.conversion}</Text>%
+                          </View>
+                        </View>
+                      </View>
+                      <View className="bg-slate-700/50 w-full rounded-full h-[12px] overflow-hidden">
+                        <View
+                          className="h-full rounded-full transition-all duration-500 hover:brightness-110"
+                          style={{
+                            width: `${item.value}%`,
+                            backgroundColor: item.color,
+                          }}
+                        />
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+          </Row>
+          <Row gutter={[24, 24]} className="mb-[32px]">
+            <Col xs={24} lg={12}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-blue-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`实时订单流`}</h2>
+                <View className="space-y-3 max-h-[320px] overflow-y-auto">
+                  {this.state.realtimeOrders.map((order, index) => (
+                    <View
+                      key={index}
+                      className="bg-slate-700/30 hover:bg-slate-700/50 transition-all duration-300 flex items-center justify-between p-[12px] rounded-xl cursor-pointer"
+                    >
+                      <View className="flex items-center flex-1">
+                        <View className="text-[var(--green-400)] mr-[12px] text-lg">
+                          💰
+                        </View>
+                        <View className="flex-1">
+                          <View className="text-[#ffffff] font-medium">
+                            <Text>{order.id}</Text>
+                          </View>
+                          <View className="text-xs text-[#6b7280]">
+                            <Text>{order.user}</Text>·
+                            <Text>{order.region}</Text>
+                          </View>
+                        </View>
+                      </View>
+                      <View className="text-[var(--right)] ml-[16px]">
+                        <View className="text-[#ffffff] font-bold">
+                          ¥<Text>{order.amount?.toLocaleString()}</Text>
+                        </View>
+                        <View className="text-xs text-[#6b7280]">
+                          <Text>{order.time}</Text>
+                        </View>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+            <Col xs={24} lg={12}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-orange-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`热门搜索词`}</h2>
+                <View className="space-y-3">
+                  {this.state.hotSearchKeywords.map((item, index) => (
+                    <View
+                      key={index}
+                      className="bg-slate-700/30 hover:bg-slate-700/50 transition-all duration-300 flex items-center justify-between p-[12px] rounded-xl cursor-pointer"
+                    >
+                      <View className="flex items-center">
+                        <View
+                          className={`w-6 h-6 rounded-full flex items-center justify-center mr-3 text-white text-xs font-bold ${
+                            index < 3
+                              ? 'bg-gradient-to-br from-orange-400 to-pink-500'
+                              : 'bg-slate-600'
+                          }`}
+                        >
+                          <Text>{index + 1}</Text>
+                        </View>
+                        <Text className="text-[#ffffff] font-medium">
+                          {item.keyword}
+                        </Text>
+                      </View>
+                      <View className="text-[var(--right)]">
+                        <View className="text-[#ffffff] font-bold">
+                          <Text>{item.searches?.toLocaleString()}</Text>
+                        </View>
+                        <View
+                          className={`text-xs ${
+                            item.growth >= 0 ? 'text-green-400' : 'text-red-400'
+                          }`}
+                        >
+                          {item.growth >= 0 ? '↑' : '↓'}
+                          <Text>{Math.abs(item.growth)}</Text>%
+                        </View>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+          </Row>
+          <Row gutter={[24, 24]} className="mb-[32px]">
+            <Col xs={24} lg={12}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-purple-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`员工绩效排行`}</h2>
+                <View className="space-y-4">
+                  {this.state.employeePerformance.map((employee, index) => (
+                    <View
+                      key={index}
+                      className="bg-slate-700/30 p-[16px] rounded-xl"
+                    >
+                      <View className="flex items-center justify-between mb-[8px]">
+                        <View className="flex items-center">
+                          <View
+                            className={`w-8 h-8 rounded-lg flex items-center justify-center mr-3 text-white text-sm font-bold ${
+                              index === 0
+                                ? 'bg-gradient-to-br from-yellow-400 to-yellow-600'
+                                : index === 1
+                                ? 'bg-gradient-to-br from-gray-400 to-gray-600'
+                                : index === 2
+                                ? 'bg-gradient-to-br from-orange-400 to-orange-600'
+                                : 'bg-slate-600'
+                            }`}
+                          >
+                            <Text>{index + 1}</Text>
+                          </View>
+                          <View>
+                            <View className="text-[#ffffff] font-medium">
+                              <Text>{employee.name}</Text>
+                            </View>
+                            <View className="text-xs text-[#6b7280]">
+                              <Text>{employee.team}</Text>
+                            </View>
+                          </View>
+                        </View>
+                        <View className="text-[var(--right)]">
+                          <View className="text-[#ffffff] font-bold">
+                            ¥<Text>{employee.sales?.toLocaleString()}</Text>
+                          </View>
+                          <View
+                            className={`text-xs px-2 py-1 rounded-full ${
+                              employee.rate >= 100
+                                ? 'bg-green-500/20 text-green-400'
+                                : 'bg-yellow-500/20 text-yellow-400'
+                            }`}
+                          >
+                            {employee.rate >= 100 ? '↑' : '↓'}
+                            <Text>{Math.abs(employee.rate - 100)}</Text>%
+                          </View>
+                        </View>
+                      </View>
+                      <View className="flex items-center justify-between text-xs text-[#6b7280]">
+                        <Text>目标: ¥{employee.target?.toLocaleString()}</Text>
+                        <Text>完成率:{employee.rate}%</Text>
+                      </View>
+                      <View className="bg-slate-700/50 w-full rounded-full h-[8px] mt-[8px]">
+                        <View
+                          className={`h-full rounded-full transition-all duration-500 ${
+                            employee.rate >= 100
+                              ? 'bg-gradient-to-r from-green-500 to-emerald-500'
+                              : 'bg-gradient-to-r from-yellow-500 to-orange-500'
+                          }`}
+                          style={{ width: `${Math.min(employee.rate, 100)}%` }}
+                        />
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+            <Col xs={24} lg={12}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-cyan-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`客服数据`}</h2>
+                <View className="gap-4 grid grid-cols-2 mb-[24px]">
+                  <View className="bg-slate-700/30 p-[16px] rounded-xl text-[var(--center)]">
+                    <View className="text-3xl font-bold text-[#ffffff] mb-[4px]">
+                      <Text>{this.state.customerService?.totalTickets}</Text>
+                    </View>
+                    <View className="text-xs text-[#6b7280]">总工单</View>
+                  </View>
+                  <View className="bg-green-500/20 p-[16px] rounded-xl text-[var(--center)]">
+                    <View className="text-3xl font-bold text-[var(--green-400)] mb-[4px]">
+                      <Text>{this.state.customerService?.resolved}</Text>
+                    </View>
+                    <View className="text-xs text-[#9ca3af]">已解决</View>
+                  </View>
+                  <View className="bg-yellow-500/20 p-[16px] rounded-xl text-[var(--center)]">
+                    <View className="text-3xl font-bold text-[var(--yellow-400)] mb-[4px]">
+                      <Text>{this.state.customerService?.pending}</Text>
+                    </View>
+                    <View className="text-xs text-[#9ca3af]">处理中</View>
+                  </View>
+                  <View className="bg-purple-500/20 p-[16px] rounded-xl text-[var(--center)]">
+                    <View className="text-3xl font-bold text-[var(--purple-400)] mb-[4px]">
+                      <Text>{this.state.customerService?.satisfaction}</Text>%
+                    </View>
+                    <View className="text-xs text-[#9ca3af]">满意度</View>
+                  </View>
+                </View>
+                <View className="bg-slate-700/30 p-[16px] rounded-xl">
+                  <View className="flex items-center justify-between">
+                    <Text className="text-[#9ca3af]">平均响应时间</Text>
+                    <Text className="text-[#ffffff] font-bold">
+                      {this.state.customerService?.avgResponseTime}分钟
+                    </Text>
+                  </View>
+                  <View className="bg-slate-700/50 w-full rounded-full h-[8px] mt-[8px]">
+                    <View className="h-full rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 w-[64%]" />
+                  </View>
+                  <View className="text-xs text-[#6b7280] mt-[4px]">
+                    目标: &#60;5 分钟
+                  </View>
+                </View>
+              </View>
+            </Col>
+          </Row>
+          <Row gutter={[24, 24]}>
+            <Col xs={24}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-indigo-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`最新动态`}</h2>
+                <View className="space-y-3">
+                  {this.state.recentActivities.map((activity, index) => (
+                    <View
+                      key={index}
+                      className="bg-slate-700/30 hover:bg-slate-700/50 transition-all duration-300 flex items-center justify-between p-[16px] rounded-xl cursor-pointer"
+                    >
+                      <View className="flex items-center flex-1">
+                        <View
+                          className={`w-10 h-10 rounded-full flex items-center justify-center mr-4 ${this.getActivityColor(
+                            activity.type
+                          )}`}
+                        >
+                          <Text className="text-lg">
+                            {this.getActivityIcon(activity.type)}
+                          </Text>
+                        </View>
+                        <View className="flex-1">
+                          <View className="space-x-2 flex items-center">
+                            <Text className="text-[#ffffff] font-medium">
+                              {activity.user}
+                            </Text>
+                            <Text className="text-[#9ca3af]">
+                              {activity.action}
+                            </Text>
+                          </View>
+                          <View className="text-sm text-[#6b7280] mt-[4px]">
+                            <Text>{activity.detail}</Text>
+                          </View>
+                        </View>
+                      </View>
+                      <View className="text-[var(--right)] ml-[16px]">
+                        <View className="text-[#ffffff] font-bold">
+                          <Text>{activity.amount}</Text>
+                        </View>
+                        <View className="text-xs text-[#6b7280]">
+                          <Text>{activity.time}</Text>
+                        </View>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+          </Row>
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;