@appthen/cli 1.2.11 → 1.2.12

package/tests/test-app/src/pages/ProductManagement.tsx

@@ -0,0 +1,521 @@
+/**
+ * 产品管理
+ * 管理所有产品信息
+ *
+ * @type Page
+ * @route /products
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  categoryId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  products?: {
+    /* @example 1 */id?: number,
+    /* @example iPhone 15 Pro */name?: string,
+    /* @example 7999 */price?: number,
+    /* @example 手机 */category?: string,
+    /* @example 50 */stock?: number,
+    /* @example available */status?: string,
+    /* @example https://via.placeholder.com/100 */image?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  categories?: string[];
+  loading?: boolean;
+  searchKeyword?: string;
+  selectedProduct?: any;
+  showAddModal?: boolean;
+  showEditModal?: boolean;
+  formData?: {
+    name?: string,
+    price?: number,
+    category?: string,
+    stock?: number,
+    status?: string,
+  };
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    products: [
+      {
+        id: 1,
+        name: 'iPhone 15 Pro',
+        price: 7999,
+        category: '手机',
+        stock: 50,
+        status: 'available',
+        image: 'https://via.placeholder.com/100',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: 'MacBook Pro',
+        price: 12999,
+        category: '电脑',
+        stock: 30,
+        status: 'available',
+        image: 'https://via.placeholder.com/100',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: 'AirPods Pro',
+        price: 1999,
+        category: '耳机',
+        stock: 100,
+        status: 'available',
+        image: 'https://via.placeholder.com/100',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: 'iPad Air',
+        price: 4999,
+        category: '平板',
+        stock: 0,
+        status: 'out_of_stock',
+        image: 'https://via.placeholder.com/100',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: 'Apple Watch',
+        price: 2999,
+        category: '手表',
+        stock: 25,
+        status: 'available',
+        image: 'https://via.placeholder.com/100',
+        createTime: '2024-05-12',
+      },
+    ],
+    categories: ['手机', '电脑', '耳机', '平板', '手表', '配件'],
+    loading: false,
+    searchKeyword: '',
+    selectedProduct: null,
+    showAddModal: false,
+    showEditModal: false,
+    formData: {
+      name: '',
+      price: 0,
+      category: '',
+      stock: 0,
+      status: 'available',
+    },
+  };
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  getProductById(id) {
+    return this.state.products.find(product => product.id === id);
+  }
+
+  formatPrice(price) {
+    return `¥${price.toFixed(2)}`;
+  }
+
+  getStatusTag(status) {
+    if (status === 'available') {
+      return <Tag color="green">有货</Tag>;
+    } else if (status === 'out_of_stock') {
+      return <Tag color="red">缺货</Tag>;
+    }
+    return <Tag color="orange">预定</Tag>;
+  }
+
+  handleAddProduct() {
+    this.setState({
+      showAddModal: true,
+      formData: {
+        name: '',
+        price: 0,
+        category: '',
+        stock: 0,
+        status: 'available',
+      },
+    });
+  }
+
+  async handleSubmit(type) {
+    await new Promise(resolve => setTimeout(resolve, 500));
+    if (type === 'add') {
+      console.log('添加产品:', this.state.formData);
+    } else {
+      console.log('编辑产品:', this.state.formData);
+    }
+    this.setState({
+      showAddModal: false,
+      showEditModal: false,
+    });
+  }
+
+  handleEditProduct(product) {
+    this.setState({
+      selectedProduct: product,
+      formData: {
+        ...product,
+      },
+      showEditModal: true,
+    });
+  }
+
+  handleDeleteProduct(id) {
+    const confirm = window.confirm('确定要删除这个产品吗？');
+    if (confirm) {
+      console.log('删除产品:', id);
+    }
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <Text className="text-2xl font-bold text-[#1f2937]">产品管理</Text>
+          <Text className="text-[#6b7280] text-sm mt-[4px]">
+            管理所有产品信息
+          </Text>
+        </View>
+        {!!this.state.loading && <View className="p-[24px]">加载中...</View>}
+        <View className="mb-[24px] flex items-center justify-between">
+          <View className="gap-4 flex items-center">
+            <Input
+              placeholder="搜索产品名称/分类"
+              value={this.state.searchKeyword}
+              onChange={e => this.handleSearch(e.target.value)}
+              prefix="🔍"
+              className=""
+            />
+          </View>
+          <Button type="primary" onClick={() => this.handleAddProduct()}>
+            + 新增产品
+          </Button>
+        </View>
+        <Table
+          loading={this.state.loading}
+          columns={[
+            {
+              title: '图片',
+              dataIndex: 'image',
+              key: 'image',
+              render: image => <Image src={image} width={60} height={60} />,
+            },
+            { title: '产品名称', dataIndex: 'name', key: 'name' },
+            {
+              title: '价格',
+              dataIndex: 'price',
+              key: 'price',
+              render: price => <Text>{this.formatPrice(price)}</Text>,
+            },
+            {
+              title: '分类',
+              dataIndex: 'category',
+              key: 'category',
+              render: category => (
+                <Tag color="blue">
+                  <Text>{category}</Text>
+                </Tag>
+              ),
+            },
+            { title: '库存', dataIndex: 'stock', key: 'stock' },
+            {
+              title: '状态',
+              dataIndex: 'status',
+              key: 'status',
+              render: function (status) {
+                return this.getStatusTag(status);
+              },
+            },
+            { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
+            {
+              title: '操作',
+              key: 'action',
+              render: (text, record) => (
+                <Space>
+                  <Button
+                    type="link"
+                    onClick={() => this.handleEditProduct(record)}
+                  >
+                    编辑
+                  </Button>
+                  <Button
+                    type="link"
+                    danger={true}
+                    onClick={() => this.handleDeleteProduct(record.id)}
+                  >
+                    删除
+                  </Button>
+                </Space>
+              ),
+            },
+          ]}
+          dataSource={this.state.products?.filter(function (product) {
+            return (
+              product?.name?.includes(this.state.searchKeyword) ||
+              product?.category?.includes(this.state.searchKeyword)
+            );
+          })}
+          rowKey="id"
+          pagination={{
+            pageSize: 10,
+            showTotal: function (total) {
+              return `共 ${total} 条`;
+            },
+          }}
+        />
+        <Modal
+          animate="pop"
+          visible={this.state.showAddModal}
+          renderView={() => (
+            <View className="bg-[#ffffff] w-[600px] h-[500px] p-[24px]">
+              <Text className="text-xl font-bold mb-[16px]">新增产品</Text>
+              <View className="space-y-4">
+                <View>
+                  <Text className="block mb-[8px]">产品名称</Text>
+                  <Input
+                    value={this.state.formData.name}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          name: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入产品名称"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">价格</Text>
+                  <Input
+                    type="number"
+                    value={this.state.formData.price}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          price: Number(e.target.value),
+                        },
+                      })
+                    }
+                    placeholder="请输入价格"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">分类</Text>
+                  <Select
+                    value={this.state.formData.category}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          category: value,
+                        },
+                      })
+                    }
+                    placeholder="请选择分类"
+                    className="w-full"
+                  >
+                    {this.state.categories.map((category, index) => (
+                      <Select.Option key={category} value={category}>
+                        <Text>{category}</Text>
+                      </Select.Option>
+                    ))}
+                  </Select>
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">库存</Text>
+                  <Input
+                    type="number"
+                    value={this.state.formData.stock}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          stock: Number(e.target.value),
+                        },
+                      })
+                    }
+                    placeholder="请输入库存"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">状态</Text>
+                  <Select
+                    value={this.state.formData.status}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          status: value,
+                        },
+                      })
+                    }
+                    placeholder="请选择状态"
+                    className="w-full"
+                  >
+                    <Select.Option value="available">有货</Select.Option>
+                    <Select.Option value="out_of_stock">缺货</Select.Option>
+                    <Select.Option value="preorder">预定</Select.Option>
+                  </Select>
+                </View>
+                <View className="gap-2 flex justify-end mt-[24px]">
+                  <Button
+                    onClick={() =>
+                      this.setState({
+                        showAddModal: false,
+                      })
+                    }
+                  >
+                    取消
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => this.handleSubmit('add')}
+                  >
+                    确认
+                  </Button>
+                </View>
+              </View>
+            </View>
+          )}
+          maskClosable={true}
+        />
+        <Modal
+          animate="pop"
+          visible={this.state.showEditModal}
+          renderView={() => (
+            <View className="bg-[#ffffff] w-[600px] h-[500px] p-[24px]">
+              <Text className="text-xl font-bold mb-[16px]">
+                编辑产品:{this.state.selectedProduct?.name}
+              </Text>
+              <View className="space-y-4">
+                <View>
+                  <Text className="block mb-[8px]">产品名称</Text>
+                  <Input
+                    value={this.state.formData.name}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          name: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入产品名称"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">价格</Text>
+                  <Input
+                    type="number"
+                    value={this.state.formData.price}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          price: Number(e.target.value),
+                        },
+                      })
+                    }
+                    placeholder="请输入价格"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">分类</Text>
+                  <Select
+                    value={this.state.formData.category}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          category: value,
+                        },
+                      })
+                    }
+                    placeholder="请选择分类"
+                    className="w-full"
+                  >
+                    {this.state.categories.map((category, index) => (
+                      <Select.Option key={category} value={category}>
+                        <Text>{category}</Text>
+                      </Select.Option>
+                    ))}
+                  </Select>
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">库存</Text>
+                  <Input
+                    type="number"
+                    value={this.state.formData.stock}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          stock: Number(e.target.value),
+                        },
+                      })
+                    }
+                    placeholder="请输入库存"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">状态</Text>
+                  <Select
+                    value={this.state.formData.status}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          status: value,
+                        },
+                      })
+                    }
+                    placeholder="请选择状态"
+                    className="w-full"
+                  >
+                    <Select.Option value="available">有货</Select.Option>
+                    <Select.Option value="out_of_stock">缺货</Select.Option>
+                    <Select.Option value="preorder">预定</Select.Option>
+                  </Select>
+                </View>
+                <View className="gap-2 flex justify-end mt-[24px]">
+                  <Button
+                    onClick={() =>
+                      this.setState({
+                        showEditModal: false,
+                      })
+                    }
+                  >
+                    取消
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => this.handleSubmit('edit')}
+                  >
+                    确认
+                  </Button>
+                </View>
+              </View>
+            </View>
+          )}
+          maskClosable={true}
+        />
+      </Page>
+    );
+  }
+}
+
+export default Document;