@appthen/cli 1.2.11 → 1.2.12

package/tests/test-app/src/pages/demo-error-page.tsx

@@ -0,0 +1,119 @@
+/**
+ * 演示错误页面
+ * @type Page
+ * @route /demo-error
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  pageTitle?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  userList?: string[];
+  loading?: boolean;
+  selectedUser?: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = { userList: [], loading: false, selectedUser: null };
+
+  loadData() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+        userList: [
+          {
+            id: 1,
+            name: '张三',
+            email: 'zhangsan@example.com',
+            age: 25,
+          },
+          {
+            id: 2,
+            name: '李四',
+            email: 'lisi@example.com',
+            age: 30,
+          },
+          {
+            id: 3,
+            name: '王五',
+            email: 'wangwu@example.com',
+            age: 28,
+          },
+        ],
+      });
+    }, 1000);
+  }
+
+  selectUser(user) {
+    this.setState({
+      selectedUser: user,
+    });
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px]">
+        <Card title="用户管理">
+          <Space direction="vertical" className="w-full">
+            <Button type="primary" onClick={() => this.loadData()}>
+              加载数据
+            </Button>
+            {!!this.state.loading && <View>加载中...</View>}
+            <Table
+              columns={[
+                {
+                  title: 'ID',
+                  dataIndex: 'id',
+                  render: id => <Text>#{id}</Text>,
+                },
+                {
+                  title: '姓名',
+                  dataIndex: 'name',
+                  render: name => <Text>{name}</Text>,
+                },
+                {
+                  title: '邮箱',
+                  dataIndex: 'email',
+                  render: email => <Text>{email}</Text>,
+                },
+              ]}
+              dataSource={this.state.userList}
+              loading={this.state.loading}
+            />
+            {this.state.userList.map((user, index) => (
+              <View key={user.id}>
+                <Text>{user.name}</Text>
+                <Text>{user.email}</Text>
+                <Text>{user.age}</Text>
+                <Button size="small" onClick={() => this.selectUser(user)}>
+                  选择
+                </Button>
+              </View>
+            ))}
+            {!!this.state.selectedUser && (
+              <Card title="已选用户">
+                <p>姓名:{this.state.selectedUser.name}</p>
+                <p>邮箱:{this.state.selectedUser.email}</p>
+                <p>年龄:{this.state.selectedUser.age}</p>
+              </Card>
+            )}
+          </Space>
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,183 @@
+/**
+ * 部门列表
+ * 查看和管理所有部门信息
+ *
+ * @type Page
+ * @route /departments
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  departments?: {
+    /* @example 1 */id?: number,
+    /* @example 技术部 */name?: string,
+    /* @example 张三 */manager?: string,
+    /* @example 25 */memberCount?: number,
+    /* @example enabled */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    departments: [
+      {
+        id: 1,
+        name: '技术部',
+        manager: '张三',
+        memberCount: 25,
+        status: 'enabled',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: '市场部',
+        manager: '李四',
+        memberCount: 18,
+        status: 'enabled',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: '人事部',
+        manager: '王五',
+        memberCount: 8,
+        status: 'enabled',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: '财务部',
+        manager: '赵六',
+        memberCount: 12,
+        status: 'enabled',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: '运营部',
+        manager: '钱七',
+        memberCount: 15,
+        status: 'enabled',
+        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 === 'enabled') {
+      return <Tag color="green">启用</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: 'name', key: 'name' },
+              { title: '部门经理', dataIndex: 'manager', key: 'manager' },
+              {
+                title: '成员数量',
+                dataIndex: 'memberCount',
+                key: 'memberCount',
+              },
+              {
+                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.departments}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

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;