@appthen/cli 1.2.11 → 1.2.13

package/tests/test-app/src/pages/admin/dashboard.tsx

@@ -0,0 +1,591 @@
+/**
+ * 数据概览 - 仪表盘8
+ * 展示关键业务指标和数据统计
+ *
+ * @type Page
+ * @route /dashboard
+ * @screen 1200w
+ * @frames web
+ */
+import React from 'react';
+import { Page, Text, View } from '@appthen/react';
+import { Card, Col, Row } from '@appthen/antd';
+
+
+class IProps {
+  refreshInterval?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 总订单数 */
+  totalOrders?: number;
+  /* 总收入 */
+  totalRevenue?: number;
+  /* 活跃用户数 */
+  activeUsers?: number;
+  /* 待处理订单 */
+  pendingOrders?: number;
+  /* 今日订单 */
+  todayOrders?: number;
+  /* 今日收入 */
+  todayRevenue?: number;
+  /* 昨日收入 */
+  yesterdayRevenue?: number;
+  /* 本周收入 */
+  weekRevenue?: number;
+  /* 订单状态分布 */
+  orderStatus?: {
+    /* @example 已完成 */name?: string,
+    /* @example 9850 */value?: number,
+    /* @example #52c41a */color?: string,
+    /* @example bg-green-500 */bgColor?: string,
+  }[];
+  /* 销售趋势 */
+  salesTrend?: any[];
+  /* 商品销量排行 */
+  topProducts?: {
+    /* @example 1 */id?: number,
+    /* @example iPhone 15 Pro */name?: string,
+    /* @example 1580 */sales?: number,
+    /* @example 1580000 */revenue?: number,
+    /* @example 📱 */image?: string,
+  }[];
+  /* 最近订单 */
+  recentOrders?: {
+    /* @example ORD-2024-001 */id?: string,
+    /* @example 张三 */customer?: string,
+    /* @example 12999 */amount?: number,
+    /* @example completed */status?: string,
+    /* @example 10分钟前 */time?: string,
+  }[];
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    totalOrders: 12580,
+    totalRevenue: 856320,
+    activeUsers: 3268,
+    pendingOrders: 45,
+    todayOrders: 128,
+    todayRevenue: 8620,
+    yesterdayRevenue: 9530,
+    weekRevenue: 62850,
+    orderStatus: [
+      {
+        name: '已完成',
+        value: 9850,
+        color: '#52c41a',
+        bgColor: 'bg-green-500',
+      },
+      {
+        name: '待处理',
+        value: 450,
+        color: '#faad14',
+        bgColor: 'bg-yellow-500',
+      },
+      { name: '已取消', value: 2280, color: '#ff4d4f', bgColor: 'bg-red-500' },
+    ],
+    salesTrend: [
+      { date: '周一', revenue: 8500, orders: 120, growth: 8.5 },
+      { date: '周二', revenue: 9200, orders: 135, growth: 12.2 },
+      { date: '周三', revenue: 8800, orders: 128, growth: -4.3 },
+      { date: '周四', revenue: 10500, orders: 150, growth: 19.3 },
+      { date: '周五', revenue: 12000, orders: 168, growth: 14.3 },
+      { date: '周六', revenue: 14800, orders: 195, growth: 23.3 },
+      { date: '周日', revenue: 16200, orders: 215, growth: 9.5 },
+    ],
+    topProducts: [
+      {
+        id: 1,
+        name: 'iPhone 15 Pro',
+        sales: 1580,
+        revenue: 1580000,
+        image: '📱',
+      },
+      { id: 2, name: 'MacBook Air', sales: 680, revenue: 680000, image: '💻' },
+      { id: 3, name: 'AirPods Pro', sales: 2200, revenue: 440000, image: '🎧' },
+      { id: 4, name: 'iPad Air', sales: 420, revenue: 252000, image: '📱' },
+      { id: 5, name: 'Apple Watch', sales: 860, revenue: 258000, image: '⌚' },
+    ],
+    recentOrders: [
+      {
+        id: 'ORD-2024-001',
+        customer: '张三',
+        amount: 12999,
+        status: 'completed',
+        time: '10分钟前',
+      },
+      {
+        id: 'ORD-2024-002',
+        customer: '李四',
+        amount: 5999,
+        status: 'pending',
+        time: '25分钟前',
+      },
+      {
+        id: 'ORD-2024-003',
+        customer: '王五',
+        amount: 8999,
+        status: 'completed',
+        time: '1小时前',
+      },
+      {
+        id: 'ORD-2024-004',
+        customer: '赵六',
+        amount: 25999,
+        status: 'completed',
+        time: '2小时前',
+      },
+      {
+        id: 'ORD-2024-005',
+        customer: '钱七',
+        amount: 799,
+        status: 'cancelled',
+        time: '3小时前',
+      },
+    ],
+  };
+
+  componentDidMount() {
+    this.loadDashboardData();
+  }
+
+  async loadDashboardData() {
+    // 这里可以连接真实的数据源
+  }
+
+  refreshData() {
+    this.loadDashboardData();
+  }
+
+  getStatusBadge(status) {
+    const statusConfig = {
+      completed: {
+        text: '已完成',
+        bgColor: 'bg-green-100',
+        textColor: 'text-green-700',
+      },
+      pending: {
+        text: '待处理',
+        bgColor: 'bg-yellow-100',
+        textColor: 'text-yellow-700',
+      },
+      cancelled: {
+        text: '已取消',
+        bgColor: 'bg-red-100',
+        textColor: 'text-red-700',
+      },
+    };
+    const config = statusConfig[status] || statusConfig.pending;
+    return (
+      <span
+        className={`px-2 py-1 text-xs font-medium rounded-full ${config.bgColor} ${config.textColor}`}
+      >
+        {config.text}
+      </span>
+    );
+  }
+
+  render() {
+    return (
+      <Page className="bg-gradient-to-br from-[#f8fafc] via-blue-50 to-indigo-50 min-h-screen">
+        <View className="bg-white/80 backdrop-blur-sm border-gray-200 border-b-[1px] border-b-solid pl-[24px] pr-[24px] pt-[16px] pb-[16px] sticky top-[0px] z-10">
+          <View className="flex items-center justify-between">
+            <View>
+              <h1 className="bg-gradient-to-r from-blue-600 to-purple-600 [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] text-2xl font-bold">
+                📊 数据概览
+              </h1>
+              <p className="text-[#6b7280] text-sm mt-[4px]">
+                实时监控您的业务数据
+              </p>
+            </View>
+            <button
+              onClick={() => this.refreshData()}
+              className="hover:shadow-lg hover:scale-105 transition-all duration-300 bg-gradient-to-r from-blue-500 to-purple-500 pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-lg font-medium"
+            >
+              🔄 刷新数据
+            </button>
+          </View>
+        </View>
+        <View className="p-[24px] ml-[auto] mr-[auto]">
+          <Row gutter={[20, 20]} className="mb-[32px]">
+            <Col xs={24} sm={12} lg={6} order={0}>
+              <Card
+                className="hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 overflow-hidden"
+                actions={[]}
+                bordered={false}
+                hoverable={false}
+                loading={false}
+                size="default"
+                type="default"
+              >
+                <View className="-translate-y-1/2 translate-x-1/2 bg-gradient-to-br from-blue-400 to-blue-600 absolute top-[0px] right-[0px] w-[128px] h-[128px] rounded-full [opacity:0.1]" />
+                <View className="relative">
+                  <View className="text-[#6b7280] text-sm font-medium mb-[8px] flex items-center">
+                    <Text className="w-[32px] h-[32px] rounded-lg bg-[var(--blue-100)] flex items-center justify-center mr-[8px]">
+                      📦
+                    </Text>
+                    总订单数
+                  </View>
+                  <View className="text-3xl font-bold mb-[4px]">
+                    <Text>{this.state.totalOrders?.toLocaleString()}</Text>
+                  </View>
+                  <View className="text-sm text-[#10b981] flex items-center">
+                    <Text className="mr-[4px]">↑</Text>12.5% 较上周
+                  </View>
+                </View>
+              </Card>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <Card
+                className="hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 overflow-hidden"
+                actions={[]}
+                bordered={false}
+                hoverable={false}
+                loading={false}
+                size="default"
+                type="default"
+              >
+                <View className="-translate-y-1/2 translate-x-1/2 bg-gradient-to-br from-green-400 to-green-600 absolute top-[0px] right-[0px] w-[128px] h-[128px] rounded-full [opacity:0.1]" />
+                <View className="relative">
+                  <View className="text-[#6b7280] text-sm font-medium mb-[8px] flex items-center">
+                    <Text className="w-[32px] h-[32px] rounded-lg bg-[var(--green-100)] flex items-center justify-center mr-[8px]">
+                      💰
+                    </Text>
+                    总收入
+                  </View>
+                  <View className="text-3xl font-bold mb-[4px]">
+                    ¥
+                    <Text numberOfLines={1}>
+                      {this.state.totalRevenue?.toLocaleString()}
+                    </Text>
+                  </View>
+                  <View className="text-sm text-[#10b981] flex items-center">
+                    <Text className="mr-[4px]">↑</Text>18.3% 较上周
+                  </View>
+                </View>
+              </Card>
+            </Col>
+            <Col xs={24} sm={12} lg={6} order={0}>
+              <Card
+                className="hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 overflow-hidden"
+                actions={[]}
+                bordered={false}
+                hoverable={false}
+                loading={false}
+                size="default"
+                type="default"
+              >
+                <View className="-translate-y-1/2 translate-x-1/2 bg-gradient-to-br from-purple-400 to-purple-600 absolute top-[0px] right-[0px] w-[128px] h-[128px] rounded-full [opacity:0.1]" />
+                <View className="relative">
+                  <View className="text-[#6b7280] text-sm font-medium mb-[8px] flex items-center">
+                    <Text className="w-[32px] h-[32px] rounded-lg bg-[var(--purple-100)] flex items-center justify-center mr-[8px]">
+                      👥
+                    </Text>
+                    活跃用户
+                  </View>
+                  <View className="text-3xl font-bold mb-[4px]">
+                    <Text>{this.state.activeUsers?.toLocaleString()}</Text>
+                  </View>
+                  <View className="text-sm text-[#10b981] flex items-center">
+                    <Text className="mr-[4px]">↑</Text>8.7% 较上周
+                  </View>
+                </View>
+              </Card>
+            </Col>
+            <Col xs={24} sm={12} lg={6} order={0}>
+              <Card
+                className="hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 overflow-hidden"
+                actions={[]}
+                bordered={false}
+                hoverable={false}
+                loading={false}
+                size="default"
+                type="default"
+              >
+                <View className="-translate-y-1/2 translate-x-1/2 bg-gradient-to-br from-[#fb923c] to-[#ea580c] absolute top-[0px] right-[0px] w-[128px] h-[128px] rounded-full [opacity:0.1]" />
+                <View className="relative">
+                  <View className="text-[#6b7280] text-sm font-medium mb-[8px] flex items-center">
+                    <Text className="w-[32px] h-[32px] rounded-lg bg-[var(--orange-100)] flex items-center justify-center mr-[8px]">
+                      ⏰
+                    </Text>
+                    待处理订单
+                  </View>
+                  <View className="text-3xl font-bold mb-[4px]">
+                    <Text>{this.state.pendingOrders}</Text>
+                  </View>
+                  <View className="text-sm flex items-center">
+                    <Text className="mr-[4px]">⚡</Text>需要处理
+                  </View>
+                </View>
+              </Card>
+            </Col>
+          </Row>
+          <Row gutter={[20, 20]} className="mb-[32px]">
+            <Col xs={24} md={8}>
+              <Card className="hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-blue-500 to-blue-600 text-[#ffffff] overflow-hidden">
+                <View className="translate-x-1/3 translate-y-1/3 absolute bottom-[0px] right-[0px] w-[160px] h-[160px] bg-[#ffffff] [opacity:0.1] rounded-full" />
+                <View className="relative">
+                  <View className="text-white/80 text-sm font-medium mb-[4px]">
+                    今日订单
+                  </View>
+                  <View className="text-4xl font-bold mb-[8px]">
+                    <Text>{this.state.todayOrders}</Text>
+                  </View>
+                  <View className="text-white/70 text-sm flex items-center">
+                    <Text className="mr-[4px]">↑</Text>较昨日 +12%
+                  </View>
+                </View>
+              </Card>
+            </Col>
+            <Col xs={24} md={8} order={0}>
+              <Card className="hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-green-500 to-green-600 text-[#ffffff] overflow-hidden">
+                <View className="translate-x-1/3 translate-y-1/3 absolute bottom-[0px] right-[0px] w-[160px] h-[160px] bg-[#ffffff] [opacity:0.1] rounded-full" />
+                <View className="relative">
+                  <View className="text-white/80 text-sm font-medium mb-[4px]">
+                    今日收入
+                  </View>
+                  <View className="text-4xl font-bold mb-[8px]">
+                    ¥<Text>{this.state.todayRevenue?.toLocaleString()}</Text>
+                  </View>
+                  <View className="text-white/70 text-sm flex items-center">
+                    <Text className="mr-[4px]">↓</Text>较昨日 -9.6%
+                  </View>
+                </View>
+              </Card>
+            </Col>
+            <Col xs={24} md={8}>
+              <Card className="hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-purple-500 to-purple-600 text-[#ffffff] overflow-hidden">
+                <View className="translate-x-1/3 translate-y-1/3 absolute bottom-[0px] right-[0px] w-[160px] h-[160px] bg-[#ffffff] [opacity:0.1] rounded-full" />
+                <View className="relative">
+                  <View className="text-white/80 text-sm font-medium mb-[4px]">
+                    本周收入
+                  </View>
+                  <View className="text-4xl font-bold mb-[8px]">
+                    ¥<Text>{this.state.weekRevenue?.toLocaleString()}</Text>
+                  </View>
+                  <View className="text-white/70 text-sm flex items-center">
+                    <Text className="mr-[4px]">↑</Text>较上周 +15.3%
+                  </View>
+                </View>
+              </Card>
+            </Col>
+          </Row>
+          <Row gutter={[20, 20]} className="mb-[32px]">
+            <Col xs={24} lg={14}>
+              <Card
+                title={
+                  <View className="flex items-center">
+                    <Text className="mr-[8px]">📈</Text>
+                    <Text className="font-bold text-[#1f2937]">
+                      销售趋势（近7天）
+                    </Text>
+                  </View>
+                }
+                className="hover:shadow-xl transition-all duration-300"
+              >
+                <View className="space-y-3">
+                  {this.state.salesTrend.map((item, index) => (
+                    <View
+                      key={index}
+                      className="hover:from-blue-50 hover:to-indigo-50 transition-all duration-300 bg-gradient-to-r from-[#f9fafb] to-blue-50 flex items-center justify-between p-[16px] rounded-lg"
+                    >
+                      <View className="flex items-center">
+                        <View
+                          className={`w-12 h-12 rounded-xl flex items-center justify-center mr-4 ${
+                            index % 2 === 0 ? 'bg-blue-500' : 'bg-purple-500'
+                          } text-white font-bold`}
+                        >
+                          <Text>{item.date.substring(1)}</Text>
+                        </View>
+                        <View>
+                          <View className="font-semibold text-[#1f2937]">
+                            <Text>{item.date}</Text>
+                          </View>
+                          <View className="text-sm text-[#6b7280]">
+                            <Text>{item.orders}</Text>订单
+                          </View>
+                        </View>
+                      </View>
+                      <View className="">
+                        <View className="font-bold text-lg text-[#1f2937]">
+                          ¥<Text>{item.revenue?.toLocaleString()}</Text>
+                        </View>
+                        <View
+                          className={`text-sm font-medium ${
+                            item.growth >= 0 ? 'text-green-500' : 'text-red-500'
+                          }`}
+                        >
+                          {item.growth >= 0 ? '↑' : '↓'}
+                          <Text>{Math.abs(item.growth)}</Text>%
+                        </View>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </Card>
+            </Col>
+            <Col xs={24} lg={10} order={0}>
+              <Card
+                title={
+                  <View className="flex items-center">
+                    <Text className="mr-[8px]">🏆</Text>
+                    <Text className="font-bold text-[#1f2937]">
+                      商品销量 TOP 5
+                    </Text>
+                  </View>
+                }
+                className="hover:shadow-xl transition-all duration-300"
+              >
+                <View className="space-y-3">
+                  {this.state.topProducts.map((product, index) => (
+                    <View
+                      key={product.id}
+                      className="hover:from-yellow-50 hover:to-orange-50 transition-all duration-300 group bg-gradient-to-r from-[#f9fafb] to-[#f3f4f6] flex items-center justify-between p-[16px] rounded-xl cursor-pointer"
+                    >
+                      <View className="flex items-center">
+                        <View
+                          className={`w-10 h-10 rounded-full flex items-center justify-center mr-3 text-xl ${
+                            index === 0
+                              ? 'bg-gradient-to-br from-yellow-400 to-yellow-600'
+                              : index === 1
+                              ? 'bg-gradient-to-br from-gray-300 to-gray-500'
+                              : index === 2
+                              ? 'bg-gradient-to-br from-orange-400 to-orange-600'
+                              : 'bg-gradient-to-br from-gray-200 to-gray-300'
+                          }`}
+                        >
+                          <Text>{index + 1}</Text>
+                        </View>
+                        <View className="group-hover:scale-110 transition-transform duration-300 text-2xl mr-[12px]">
+                          <Text>{product.image}</Text>
+                        </View>
+                        <View>
+                          <View className="text-gray-800 group-hover:text-blue-600 transition-colors font-semibold">
+                            <Text>{product.name}</Text>
+                          </View>
+                          <View className="text-sm text-[#6b7280]">
+                            销量:<Text>{product.sales}</Text>
+                          </View>
+                        </View>
+                      </View>
+                      <View className="">
+                        <View className="font-bold">
+                          ¥<Text>{product.revenue?.toLocaleString()}</Text>
+                        </View>
+                        <View className="text-xs text-[#6b7280]">营收</View>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </Card>
+            </Col>
+          </Row>
+          <Row gutter={[20, 20]}>
+            <Col xs={24} lg={12}>
+              <Card
+                title={
+                  <View className="flex items-center">
+                    <Text className="mr-[8px]">📊</Text>
+                    <Text className="font-bold text-[#1f2937]">
+                      订单状态分布
+                    </Text>
+                  </View>
+                }
+                className="hover:shadow-xl transition-all duration-300"
+              >
+                <View className="space-y-6">
+                  {this.state.orderStatus.map((item, index) => {
+                    const percentage = (
+                      (item.value / this.state.totalOrders) *
+                      100
+                    ).toFixed(1);
+                    return (
+                      <View key={index}>
+                        <View className="flex items-center justify-between mb-[8px]">
+                          <View className="flex items-center">
+                            <View
+                              className={`w-3 h-3 rounded-full ${item.bgColor} mr-2`}
+                            />
+                            <Text className="font-medium text-[#374151]">
+                              {item.name}
+                            </Text>
+                          </View>
+                          <Text className="font-bold text-[#1f2937]">
+                            {item.value.toLocaleString()}单
+                          </Text>
+                        </View>
+                        <View className="w-full bg-[#e5e7eb] rounded-full h-[16px] overflow-hidden">
+                          <View
+                            className="h-full rounded-full transition-all duration-500 ease-out flex items-center justify-end pr-2"
+                            style={{
+                              width: `${percentage}%`,
+                              backgroundColor: item.color,
+                            }}
+                          >
+                            <Text className="text-xs text-[#ffffff] font-medium">
+                              {percentage}%
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    );
+                  })}
+                </View>
+              </Card>
+            </Col>
+            <Col xs={24} lg={12}>
+              <Card
+                title={
+                  <View className="flex items-center">
+                    <Text className="mr-[8px]">📋</Text>
+                    <Text className="font-bold text-[#1f2937]">最近订单</Text>
+                  </View>
+                }
+                className="hover:shadow-xl transition-all duration-300"
+                actions={[]}
+                bordered={false}
+                hoverable={false}
+                loading={false}
+                size="default"
+                type="default"
+              >
+                <View className="space-y-3">
+                  {this.state.recentOrders.map((order, index) => (
+                    <View
+                      key={index}
+                      className="hover:from-blue-100 hover:to-purple-100 transition-all duration-300 group bg-gradient-to-r from-[#f9fafb] to-blue-50 flex items-center justify-between p-[16px] rounded-xl cursor-pointer"
+                    >
+                      <View className="flex-1">
+                        <View className="flex items-center justify-between">
+                          <View className="text-gray-800 group-hover:text-blue-600 transition-colors font-semibold">
+                            <Text>{order.id}</Text>
+                          </View>
+                          <Text>{this.getStatusBadge(order.status)}</Text>
+                        </View>
+                        <View className="text-sm text-[#6b7280] mt-[4px]">
+                          <Text>{order.customer}</Text>·
+                          <Text>{order.time}</Text>
+                        </View>
+                      </View>
+                      <View className="ml-[16px]">
+                        <View className="font-bold text-lg text-[#1f2937]">
+                          ¥<Text>{order.amount?.toLocaleString()}</Text>
+                        </View>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </Card>
+            </Col>
+          </Row>
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;