@appthen/cli 1.2.10 → 1.2.12

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

@@ -0,0 +1,233 @@
+/**
+ * 商品列表
+ * 查看和管理所有商品信息
+ *
+ * @type Page
+ * @route /goods
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  goods?: {
+    /* @example 1 */id?: number,
+    /* @example iPhone 15 Pro */name?: string,
+    /* @example 手机 */category?: string,
+    /* @example 8999 */price?: number,
+    /* @example 100 */stock?: number,
+    /* @example onsale */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    goods: [
+      {
+        id: 1,
+        name: 'iPhone 15 Pro',
+        category: '手机',
+        price: 8999,
+        stock: 100,
+        status: 'onsale',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: 'MacBook Air M2',
+        category: '电脑',
+        price: 7999,
+        stock: 50,
+        status: 'onsale',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: 'AirPods Pro',
+        category: '耳机',
+        price: 1999,
+        stock: 200,
+        status: 'onsale',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: 'iPad Air',
+        category: '平板',
+        price: 4799,
+        stock: 0,
+        status: 'outofstock',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: 'Apple Watch',
+        category: '手表',
+        price: 2999,
+        stock: 80,
+        status: 'onsale',
+        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 === 'onsale') {
+      return <Tag color="green">在售</Tag>;
+    }
+    if (status === 'outofstock') {
+      return <Tag color="red">缺货</Tag>;
+    }
+    return <Tag color="gray">下架</Tag>;
+  }
+
+  getCategoryTag(category) {
+    const config = {
+      手机: {
+        text: '手机',
+        color: 'blue',
+      },
+      电脑: {
+        text: '电脑',
+        color: 'purple',
+      },
+      耳机: {
+        text: '耳机',
+        color: 'cyan',
+      },
+      平板: {
+        text: '平板',
+        color: 'orange',
+      },
+      手表: {
+        text: '手表',
+        color: 'green',
+      },
+    };
+    const configItem = config[category] || {
+      text: category,
+      color: 'default',
+    };
+    return <Tag color={configItem.color}>{configItem.text}</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: 'name', key: 'name' },
+              {
+                title: '分类',
+                dataIndex: 'category',
+                key: 'category',
+                render: function (text) {
+                  return this.getCategoryTag(text);
+                },
+              },
+              {
+                title: '价格',
+                dataIndex: 'price',
+                key: 'price',
+                render: function (text) {
+                  return `¥${text}`;
+                },
+              },
+              { title: '库存', dataIndex: 'stock', key: 'stock' },
+              {
+                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.goods}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;