@appthen/cli 1.2.11 → 1.2.13

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

@@ -0,0 +1,212 @@
+/**
+ * 用户列表
+ * 查看和管理所有用户信息
+ *
+ * @type Page
+ * @route /users
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  users?: {
+    /* @example 1 */id?: number,
+    /* @example 张三 */name?: string,
+    /* @example zhangsan@example.com */email?: string,
+    /* @example 138****1234 */phone?: string,
+    /* @example active */status?: string,
+    /* @example admin */role?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    users: [
+      {
+        id: 1,
+        name: '张三',
+        email: 'zhangsan@example.com',
+        phone: '138****1234',
+        status: 'active',
+        role: 'admin',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: '李四',
+        email: 'lisi@example.com',
+        phone: '139****5678',
+        status: 'active',
+        role: 'user',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: '王五',
+        email: 'wangwu@example.com',
+        phone: '137****9012',
+        status: 'inactive',
+        role: 'user',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: '赵六',
+        email: 'zhaoliu@example.com',
+        phone: '136****3456',
+        status: 'active',
+        role: 'user',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: '钱七',
+        email: 'qianqi@example.com',
+        phone: '135****7890',
+        status: 'active',
+        role: 'manager',
+        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 === 'active') {
+      return <Tag color="green">活跃</Tag>;
+    }
+    return <Tag color="gray">禁用</Tag>;
+  }
+
+  getRoleTag(role) {
+    const config = {
+      admin: {
+        text: '管理员',
+        color: 'red',
+      },
+      manager: {
+        text: '经理',
+        color: 'blue',
+      },
+      user: {
+        text: '用户',
+        color: 'default',
+      },
+    };
+    const configItem = config[role] || config.user;
+    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: 'email', key: 'email' },
+              { title: '手机号', dataIndex: 'phone', key: 'phone' },
+              {
+                title: '状态',
+                dataIndex: 'status',
+                key: 'status',
+                render: function (text) {
+                  return this.getStatusTag(text);
+                },
+              },
+              {
+                title: '角色',
+                dataIndex: 'role',
+                key: 'role',
+                render: function (text) {
+                  return this.getRoleTag(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.users}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/wrong-page.tsx

@@ -0,0 +1,50 @@
+/**
+ * 错误示例页面
+ * @type Page
+ * @route /wrong
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  count?: number;
+  @Form({
+    setter: "JsonSetter"
+  })
+  users?: string[];
+  loading?: boolean;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = { count: 0, users: [], loading: false };
+
+  handleClick() {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  }
+
+  render() {
+    // ❌ 违反规范：render() 中使用解构赋值
+    const { count, users, loading } = this.state;
+    return (
+      <Page className="p-[24px]">
+        <h1 className="text-2xl font-bold mb-[16px]">错误示例</h1>
+        <p>计数:{count}</p>
+        <Button onClick={() => this.handleClick()}>点击</Button>
+      </Page>
+    );
+  }
+}
+
+export default Document;