@appthen/cli 1.2.11 → 1.2.13

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

@@ -0,0 +1,195 @@
+/**
+ * 订单列表
+ * 查看和管理所有订单信息
+ *
+ * @type Page
+ * @route /orders-list
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  orders?: {
+    /* @example 1 */id?: number,
+    /* @example ORD-2024-001 */orderNo?: string,
+    /* @example 张三 */customer?: string,
+    /* @example 12999 */amount?: number,
+    /* @example completed */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    orders: [
+      {
+        id: 1,
+        orderNo: 'ORD-2024-001',
+        customer: '张三',
+        amount: 12999,
+        status: 'completed',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        orderNo: 'ORD-2024-002',
+        customer: '李四',
+        amount: 5999,
+        status: 'pending',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        orderNo: 'ORD-2024-003',
+        customer: '王五',
+        amount: 8999,
+        status: 'shipped',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        orderNo: 'ORD-2024-004',
+        customer: '赵六',
+        amount: 25999,
+        status: 'processing',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        orderNo: 'ORD-2024-005',
+        customer: '钱七',
+        amount: 799,
+        status: 'cancelled',
+        createTime: '2024-05-12',
+      },
+    ],
+    loading: false,
+    searchKeyword: '',
+  };
+
+  handleSearch(value) {
+    this.setState({
+      searchKeyword: value,
+    });
+  }
+
+  handleAdd() {
+    console.log('添加订单');
+  }
+
+  handleEdit(record) {
+    console.log('编辑订单', record);
+  }
+
+  handleDelete(record) {
+    console.log('删除订单', record);
+  }
+
+  getStatusTag(status) {
+    if (status === 'completed') {
+      return <Tag color="green">已完成</Tag>;
+    }
+    if (status === 'pending') {
+      return <Tag color="orange">待付款</Tag>;
+    }
+    if (status === 'processing') {
+      return <Tag color="blue">处理中</Tag>;
+    }
+    if (status === 'shipped') {
+      return <Tag color="cyan">已发货</Tag>;
+    }
+    return <Tag color="gray">已取消</Tag>;
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <h1 className="text-2xl font-bold text-[#1f2937]">订单列表</h1>
+          <p className="text-[#6b7280] text-sm mt-[4px]">
+            管理系统中的所有订单信息
+          </p>
+        </View>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <Input
+              placeholder="搜索订单号/客户姓名"
+              value={this.state.searchKeyword}
+              onChange={e => this.handleSearch(e.target.value)}
+              prefix="🔍"
+              className=""
+            />
+            <Button type="primary" onClick={() => this.handleAdd()}>
+              + 新增订单
+            </Button>
+          </View>
+        </Card>
+        <Card>
+          <Table
+            loading={this.state.loading}
+            columns={[
+              { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+              { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
+              { title: '客户', dataIndex: 'customer', key: 'customer' },
+              {
+                title: '金额',
+                dataIndex: 'amount',
+                key: 'amount',
+                render: function (text) {
+                  return `¥${text}`;
+                },
+              },
+              {
+                title: '状态',
+                dataIndex: 'status',
+                key: 'status',
+                render: function (text) {
+                  return this.getStatusTag(text);
+                },
+              },
+              { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
+              {
+                title: '操作',
+                key: 'action',
+                render: (text, record) => (
+                  <Space>
+                    <Button type="link" onClick={() => this.handleEdit(record)}>
+                      编辑
+                    </Button>
+                    <Button
+                      type="link"
+                      danger={true}
+                      onClick={() => this.handleDelete(record)}
+                    >
+                      删除
+                    </Button>
+                  </Space>
+                ),
+              },
+            ]}
+            dataSource={this.state.orders}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;