@appthen/cli 1.2.11 → 1.2.12

package/tests/test-app/src/pages/order-management.tsx

@@ -0,0 +1,563 @@
+/**
+ * 订单管理中心
+ * 统一管理所有订单，支持筛选、搜索、导出
+ *
+ * @type Page
+ * @route /orders
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  defaultStatus?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 订单列表数据 */
+  orders?: {
+    /* @example ORD-2024-1218-001 */id?: string,
+    /* @example 张三 */customer?: string,
+    /* @example 138****1234 */phone?: string,
+    /* @example 12999 */amount?: number,
+    /* @example completed */status?: string,
+    /* @example alipay */payment?: string,
+    /* @example 2024-12-18 10:30:25 */createTime?: string,
+    /* @example 2024-12-18 11:15:30 */updateTime?: string,
+    /* @example 广东省深圳市南山区科技园 */address?: string,
+  }[];
+  /* 加载状态 */
+  loading?: boolean;
+  /* 选中的状态筛选 */
+  statusFilter?: string;
+  /* 搜索关键词 */
+  searchKeyword?: string;
+  /* 选中的订单ID列表 */
+  selectedRowKeys?: string[];
+  /* 统计数据 */
+  statistics?: {
+    /* @example 2856 */total?: number,
+    /* @example 128 */today?: number,
+    /* @example 45 */pending?: number,
+    /* @example 32 */processing?: number,
+    /* @example 86 */shipped?: number,
+    /* @example 2385 */completed?: number,
+    /* @example 256 */refunded?: number,
+    /* @example 52 */cancelled?: number,
+    /* @example 8526320 */totalAmount?: number,
+    /* @example 86250 */todayAmount?: number,
+  };
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    orders: [
+      {
+        id: 'ORD-2024-1218-001',
+        customer: '张三',
+        phone: '138****1234',
+        amount: 12999,
+        status: 'completed',
+        payment: 'alipay',
+        createTime: '2024-12-18 10:30:25',
+        updateTime: '2024-12-18 11:15:30',
+        address: '广东省深圳市南山区科技园',
+      },
+      {
+        id: 'ORD-2024-1218-002',
+        customer: '李四',
+        phone: '139****5678',
+        amount: 5999,
+        status: 'pending',
+        payment: 'wechat',
+        createTime: '2024-12-18 10:15:18',
+        updateTime: '2024-12-18 10:15:18',
+        address: '浙江省杭州市西湖区文三路',
+      },
+      {
+        id: 'ORD-2024-1218-003',
+        customer: '王五',
+        phone: '137****9012',
+        amount: 8999,
+        status: 'shipped',
+        payment: 'alipay',
+        createTime: '2024-12-18 09:50:33',
+        updateTime: '2024-12-18 14:20:15',
+        address: '江苏省南京市鼓楼区新街口',
+      },
+      {
+        id: 'ORD-2024-1218-004',
+        customer: '赵六',
+        phone: '136****3456',
+        amount: 25999,
+        status: 'processing',
+        payment: 'wechat',
+        createTime: '2024-12-18 09:30:12',
+        updateTime: '2024-12-18 10:45:20',
+        address: '北京市朝阳区建国路',
+      },
+      {
+        id: 'ORD-2024-1218-005',
+        customer: '钱七',
+        phone: '135****7890',
+        amount: 799,
+        status: 'cancelled',
+        payment: 'alipay',
+        createTime: '2024-12-18 08:45:28',
+        updateTime: '2024-12-18 09:20:15',
+        address: '上海市浦东新区陆家嘴',
+      },
+      {
+        id: 'ORD-2024-1218-006',
+        customer: '孙八',
+        phone: '134****2345',
+        amount: 1599,
+        status: 'completed',
+        payment: 'wechat',
+        createTime: '2024-12-18 08:20:45',
+        updateTime: '2024-12-18 12:30:00',
+        address: '四川省成都市高新区天府大道',
+      },
+      {
+        id: 'ORD-2024-1218-007',
+        customer: '周九',
+        phone: '133****6789',
+        amount: 3299,
+        status: 'refunded',
+        payment: 'alipay',
+        createTime: '2024-12-18 07:55:18',
+        updateTime: '2024-12-18 15:10:25',
+        address: '湖北省武汉市武昌区中南路',
+      },
+      {
+        id: 'ORD-2024-1218-008',
+        customer: '吴十',
+        phone: '132****0123',
+        amount: 899,
+        status: 'completed',
+        payment: 'wechat',
+        createTime: '2024-12-18 07:30:50',
+        updateTime: '2024-12-18 10:00:00',
+        address: '福建省厦门市思明区环岛路',
+      },
+    ],
+    loading: false,
+    statusFilter: 'all',
+    searchKeyword: '',
+    selectedRowKeys: [],
+    statistics: {
+      total: 2856,
+      today: 128,
+      pending: 45,
+      processing: 32,
+      shipped: 86,
+      completed: 2385,
+      refunded: 256,
+      cancelled: 52,
+      totalAmount: 8526320,
+      todayAmount: 86250,
+    },
+  };
+
+  handleSearch(value) {
+    this.setState({
+      searchKeyword: value,
+    });
+  }
+
+  handleStatusChange(value) {
+    this.setState({
+      statusFilter: value,
+    });
+  }
+
+  handleExport() {
+    console.log('导出订单');
+  }
+
+  handleRefresh() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+  }
+
+  getStatusConfig(status) {
+    const config = {
+      pending: {
+        text: '待付款',
+        color: 'orange',
+        bg: 'bg-orange-100 text-orange-700',
+      },
+      processing: {
+        text: '处理中',
+        color: 'blue',
+        bg: 'bg-blue-100 text-blue-700',
+      },
+      shipped: {
+        text: '已发货',
+        color: 'cyan',
+        bg: 'bg-cyan-100 text-cyan-700',
+      },
+      completed: {
+        text: '已完成',
+        color: 'green',
+        bg: 'bg-green-100 text-green-700',
+      },
+      refunded: {
+        text: '已退款',
+        color: 'purple',
+        bg: 'bg-purple-100 text-purple-700',
+      },
+      cancelled: {
+        text: '已取消',
+        color: 'red',
+        bg: 'bg-red-100 text-red-700',
+      },
+    };
+    return config[status] || config.pending;
+  }
+
+  getPaymentIcon(payment) {
+    const icons = {
+      alipay: '🔵',
+      wechat: '🟢',
+      creditcard: '💳',
+      balance: '💰',
+    };
+    return icons[payment] || '💳';
+  }
+
+  render() {
+    return (
+      <Page className="bg-gradient-to-br from-[#f8fafc] via-blue-50 to-[var(--cyan-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 ml-[auto] mr-[auto]">
+            <View>
+              <h1 className="bg-gradient-to-r from-blue-600 to-[var(--cyan-600)] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-2xl font-bold">
+                📦 订单管理中心
+              </h1>
+              <p className="text-[#6b7280] text-sm mt-[4px]">
+                统一管理所有订单，实时追踪订单状态
+              </p>
+            </View>
+            <Space>
+              <Button
+                onClick={() => this.handleRefresh()}
+                loading={this.state.loading}
+              >
+                🔄 刷新
+              </Button>
+              <Button type="primary" onClick={() => this.handleExport()}>
+                📥 导出数据
+              </Button>
+            </Space>
+          </View>
+        </View>
+        <View className="p-[24px] ml-[auto] mr-[auto]">
+          <Row gutter={[16, 16]} className="mb-[24px]">
+            <Col xs={12} sm={8} md={6} lg={4}>
+              <Card className="hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border-blue-500 border-l-[16px] border-l-solid">
+                <View className="text-[#6b7280] text-sm mb-[4px]">总订单</View>
+                <View className="text-2xl font-bold text-[var(--blue-600)]">
+                  <Text>{this.state.statistics?.total?.toLocaleString()}</Text>
+                </View>
+                <View className="text-xs text-[#9ca3af] mt-[4px]">
+                  累计订单数
+                </View>
+              </Card>
+            </Col>
+            <Col xs={12} sm={8} md={6} lg={4}>
+              <Card className="hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border-green-500 border-l-[16px] border-l-solid">
+                <View className="text-[#6b7280] text-sm mb-[4px]">
+                  今日订单
+                </View>
+                <View className="text-2xl font-bold text-[var(--green-600)]">
+                  <Text>{this.state.statistics?.today?.toLocaleString()}</Text>
+                </View>
+                <View className="text-xs text-[#9ca3af] mt-[4px]">
+                  今日新增
+                </View>
+              </Card>
+            </Col>
+            <Col xs={12} sm={8} md={6} lg={4}>
+              <Card className="hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border-orange-500 border-l-[16px] border-l-solid">
+                <View className="text-[#6b7280] text-sm mb-[4px]">待处理</View>
+                <View className="text-2xl font-bold text-[var(--orange-600)]">
+                  <Text>
+                    {this.state.statistics?.pending?.toLocaleString()}
+                  </Text>
+                </View>
+                <View className="text-xs text-[#9ca3af] mt-[4px]">
+                  待付款订单
+                </View>
+              </Card>
+            </Col>
+            <Col xs={12} sm={8} md={6} lg={4}>
+              <Card className="hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border-blue-500 border-l-[16px] border-l-solid">
+                <View className="text-[#6b7280] text-sm mb-[4px]">处理中</View>
+                <View className="text-2xl font-bold text-[var(--blue-600)]">
+                  <Text>
+                    {this.state.statistics?.processing?.toLocaleString()}
+                  </Text>
+                </View>
+                <View className="text-xs text-[#9ca3af] mt-[4px]">
+                  正在处理
+                </View>
+              </Card>
+            </Col>
+            <Col xs={12} sm={8} md={6} lg={4}>
+              <Card className="hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border-cyan-500 border-l-[16px] border-l-solid">
+                <View className="text-[#6b7280] text-sm mb-[4px]">已发货</View>
+                <View className="text-2xl font-bold text-[var(--cyan-600)]">
+                  <Text>
+                    {this.state.statistics?.shipped?.toLocaleString()}
+                  </Text>
+                </View>
+                <View className="text-xs text-[#9ca3af] mt-[4px]">运输中</View>
+              </Card>
+            </Col>
+            <Col xs={12} sm={8} md={6} lg={4}>
+              <Card className="hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border-green-500 border-l-[16px] border-l-solid">
+                <View className="text-[#6b7280] text-sm mb-[4px]">已完成</View>
+                <View className="text-2xl font-bold text-[var(--green-600)]">
+                  <Text>
+                    {this.state.statistics?.completed?.toLocaleString()}
+                  </Text>
+                </View>
+                <View className="text-xs text-[#9ca3af] mt-[4px]">
+                  交易完成
+                </View>
+              </Card>
+            </Col>
+          </Row>
+          <Row gutter={[16, 16]} className="mb-[24px]">
+            <Col xs={24} md={12}>
+              <Card className="hover:shadow-xl transition-all duration-300 bg-gradient-to-r from-blue-500 to-blue-600 text-[#ffffff]">
+                <View className="flex items-center justify-between">
+                  <View>
+                    <View className="text-[var(--blue-100)] text-sm mb-[4px]">
+                      总成交金额
+                    </View>
+                    <View className="text-3xl font-bold">
+                      ¥
+                      <Text>
+                        {this.state.statistics?.totalAmount?.toLocaleString()}
+                      </Text>
+                    </View>
+                    <View className="text-[var(--blue-200)] text-sm mt-[4px]">
+                      历史累计
+                    </View>
+                  </View>
+                  <View className="text-6xl [opacity:0.2]">💰</View>
+                </View>
+              </Card>
+            </Col>
+            <Col xs={24} md={12}>
+              <Card className="hover:shadow-xl transition-all duration-300 bg-gradient-to-r from-[var(--cyan-500)] to-[var(--teal-500)] text-[#ffffff]">
+                <View className="flex items-center justify-between">
+                  <View>
+                    <View className="text-[var(--cyan-100)] text-sm mb-[4px]">
+                      今日成交
+                    </View>
+                    <View className="text-3xl font-bold">
+                      ¥
+                      <Text>
+                        {this.state.statistics?.todayAmount?.toLocaleString()}
+                      </Text>
+                    </View>
+                    <View className="text-[var(--cyan-200)] text-sm mt-[4px]">
+                      今日实时
+                    </View>
+                  </View>
+                  <View className="text-6xl [opacity:0.2]">📈</View>
+                </View>
+              </Card>
+            </Col>
+          </Row>
+          <Card className="mb-[24px]">
+            <Row gutter={[16, 16]} align="middle">
+              <Col xs={24} sm={12} md={6}>
+                <View>
+                  <View className="text-[#6b7280] text-sm mb-[8px]">
+                    订单状态
+                  </View>
+                  <Select
+                    value={this.state.statusFilter}
+                    onChange={value => this.handleStatusChange(value)}
+                    className="w-full"
+                  >
+                    <Select.Option value="all">全部状态</Select.Option>
+                    <Select.Option value="pending">待付款</Select.Option>
+                    <Select.Option value="processing">处理中</Select.Option>
+                    <Select.Option value="shipped">已发货</Select.Option>
+                    <Select.Option value="completed">已完成</Select.Option>
+                    <Select.Option value="refunded">已退款</Select.Option>
+                    <Select.Option value="cancelled">已取消</Select.Option>
+                  </Select>
+                </View>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <View>
+                  <View className="text-[#6b7280] text-sm mb-[8px]">
+                    搜索订单
+                  </View>
+                  <Input
+                    placeholder="订单号/客户姓名/手机号"
+                    value={this.state.searchKeyword}
+                    onChange={e => this.handleSearch(e.target.value)}
+                    prefix="🔍"
+                  />
+                </View>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <View>
+                  <View className="text-[#6b7280] text-sm mb-[8px]">
+                    创建时间
+                  </View>
+                  <Input type="date" className="w-full" />
+                </View>
+              </Col>
+              <Col xs={24} sm={12} md={6} className="text-[var(--right)]">
+                <View>
+                  <View className="text-[#6b7280] text-sm mb-[8px]">操作</View>
+                  <Button block={true} type="primary">
+                    🔍 查询订单
+                  </Button>
+                </View>
+              </Col>
+            </Row>
+          </Card>
+          <Card>
+            <Table
+              loading={this.state.loading}
+              columns={[
+                {
+                  title: '订单信息',
+                  key: 'order',
+                  render: (text, record) => (
+                    <View>
+                      <View className="font-semibold text-[#1f2937]">
+                        <Text>{record.id}</Text>
+                      </View>
+                      <View className="text-xs text-[#6b7280] mt-[4px]">
+                        <Text>{record.createTime}</Text>
+                      </View>
+                    </View>
+                  ),
+                },
+                {
+                  title: '客户信息',
+                  key: 'customer',
+                  render: (text, record) => (
+                    <View>
+                      <View className="font-medium text-[#1f2937]">
+                        <Text>{record.customer}</Text>
+                      </View>
+                      <View className="text-xs text-[#6b7280]">
+                        <Text>{record.phone}</Text>
+                      </View>
+                      <View className="text-xs text-[#9ca3af] overflow-hidden [textOverflow:ellipsis] [whiteSpace:nowrap] max-w-[128px]">
+                        <Text>{record.address}</Text>
+                      </View>
+                    </View>
+                  ),
+                },
+                {
+                  title: '订单金额',
+                  key: 'amount',
+                  render: (text, record) => (
+                    <View>
+                      <View className="font-bold text-lg text-[var(--blue-600)]">
+                        ¥<Text>{record.amount?.toLocaleString()}</Text>
+                      </View>
+                      <View className="text-xs text-[#6b7280] flex items-center">
+                        <Text className="mr-[4px]">
+                          {this.getPaymentIcon(record.payment)}
+                        </Text>
+                        {record.payment === 'alipay'
+                          ? '支付宝'
+                          : record.payment === 'wechat'
+                          ? '微信支付'
+                          : '其他'}
+                      </View>
+                    </View>
+                  ),
+                },
+                {
+                  title: '订单状态',
+                  key: 'status',
+                  render: (text, record) =>
+                    (() => {
+                      const config = this.getStatusConfig(record.status);
+                      return (
+                        <View>
+                          <Tag color={config.color} className="font-medium">
+                            <Text>{config.text}</Text>
+                          </Tag>
+                          <View className="text-xs text-[#6b7280] mt-[4px]">
+                            <Text>{record.updateTime}</Text>
+                          </View>
+                        </View>
+                      );
+                    })(),
+                },
+                {
+                  title: '操作',
+                  key: 'action',
+                  render: (text, record) => (
+                    <Space size="small">
+                      <Button
+                        size="small"
+                        type="link"
+                        className="text-[var(--blue-600)]"
+                      >
+                        查看详情
+                      </Button>
+                      <Button
+                        size="small"
+                        type="link"
+                        className="text-[#4b5563]"
+                      >
+                        编辑
+                      </Button>
+                      <Button
+                        size="small"
+                        type="link"
+                        className="text-[var(--orange-600)]"
+                      >
+                        备注
+                      </Button>
+                    </Space>
+                  ),
+                },
+              ]}
+              dataSource={this.state.orders}
+              rowKey="id"
+              pagination={{
+                total: this.state.statistics?.total,
+                pageSize: 10,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                showTotal: function (total) {
+                  return `共 ${total} 条记录`;
+                },
+              }}
+            />
+          </Card>
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;