@appthen/cli 1.2.11 → 1.2.12

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

@@ -0,0 +1,230 @@
+/**
+ * 订单列表
+ * 管理所有订单信息
+ *
+ * @type Page
+ * @route /orders
+ * @screen 375x90 #fff
+ * @frames web
+ * @clients h5, weapp, web
+ */
+import React from 'react';
+import { AtDivider, Component, Text, View } from 'cross-ui';
+
+
+class IProps {
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  orders?: {
+    /* @example 1 */id?: number,
+    /* @example ORD202401001 */orderNo?: string,
+    /* @example 张三 */customer?: string,
+    /* @example 1299 */amount?: number,
+    /* @example pending */status?: string,
+    /* @example 2024-01-15 10:30:00 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+  selectedOrder?: any;
+  showDetail?: boolean;
+  filterStatus?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    orders: [
+      {
+        id: 1,
+        orderNo: 'ORD202401001',
+        customer: '张三',
+        amount: 1299,
+        status: 'pending',
+        createTime: '2024-01-15 10:30:00',
+      },
+      {
+        id: 2,
+        orderNo: 'ORD202401002',
+        customer: '李四',
+        amount: 2580.5,
+        status: 'paid',
+        createTime: '2024-01-16 14:20:00',
+      },
+      {
+        id: 3,
+        orderNo: 'ORD202401003',
+        customer: '王五',
+        amount: 899,
+        status: 'shipped',
+        createTime: '2024-01-17 09:15:00',
+      },
+      {
+        id: 4,
+        orderNo: 'ORD202401004',
+        customer: '赵六',
+        amount: 3456,
+        status: 'completed',
+        createTime: '2024-01-18 16:45:00',
+      },
+      {
+        id: 5,
+        orderNo: 'ORD202401005',
+        customer: '钱七',
+        amount: 1567.8,
+        status: 'cancelled',
+        createTime: '2024-01-19 11:30:00',
+      },
+    ],
+    loading: false,
+    searchKeyword: '',
+    selectedOrder: null,
+    showDetail: false,
+    filterStatus: '',
+  };
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  getStatusColor(status) {
+    const colors = {
+      pending: 'orange',
+      paid: 'blue',
+      shipped: 'cyan',
+      completed: 'green',
+      cancelled: 'red',
+    };
+    return colors[status] || 'default';
+  }
+
+  handleViewDetail(order) {
+    this.setState({
+      selectedOrder: order,
+      showDetail: true,
+    });
+  }
+
+  formatAmount(amount) {
+    return `¥${amount.toFixed(2)}`;
+  }
+
+  handleFilterStatus(status) {
+    this.setState({
+      filterStatus: status,
+    });
+  }
+
+  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="gap-4 mb-[24px] flex items-center">
+          <Input
+            placeholder="搜索订单号/客户"
+            value={this.state.searchKeyword}
+            onChange={e => this.handleSearch(e.target.value)}
+            className=""
+          />
+          <Select
+            placeholder="筛选状态"
+            value={this.state.filterStatus || undefined}
+            onChange={value => this.handleFilterStatus(value)}
+            className=""
+          >
+            <Select.Option value="">全部</Select.Option>
+            <Select.Option value="pending">待支付</Select.Option>
+            <Select.Option value="paid">已支付</Select.Option>
+            <Select.Option value="shipped">已发货</Select.Option>
+            <Select.Option value="completed">已完成</Select.Option>
+            <Select.Option value="cancelled">已取消</Select.Option>
+          </Select>
+          <Button type="primary">新增订单</Button>
+        </View>
+        <Table
+          loading={this.state.loading}
+          columns={[
+            { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
+            { title: '客户', dataIndex: 'customer', key: 'customer' },
+            {
+              title: '金额',
+              dataIndex: 'amount',
+              key: 'amount',
+              render: amount => <Text>{this.formatAmount(amount)}</Text>,
+            },
+            {
+              title: '状态',
+              dataIndex: 'status',
+              key: 'status',
+              render: status => (
+                <Text style={{ color: this.getStatusColor(status) }}>
+                  {status}
+                </Text>
+              ),
+            },
+            { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
+            {
+              title: '操作',
+              key: 'action',
+              render: (text, record) => (
+                <Space>
+                  <Button
+                    type="link"
+                    onClick={() => this.handleViewDetail(record)}
+                  >
+                    查看详情
+                  </Button>
+                  <Button type="link">编辑</Button>
+                  <Button type="link" danger={true}>
+                    删除
+                  </Button>
+                </Space>
+              ),
+            },
+          ]}
+          dataSource={this.state.orders?.filter(function (order) {
+            const matchKeyword =
+              order?.customer?.includes(this.state.searchKeyword) ||
+              order?.orderNo?.includes(this.state.searchKeyword);
+            const matchStatus =
+              !this.state.filterStatus ||
+              order?.status === this.state.filterStatus;
+            return matchKeyword && matchStatus;
+          })}
+          rowKey="id"
+          pagination={{
+            pageSize: 10,
+            showTotal: function (total) {
+              return `共 ${total} 条`;
+            },
+          }}
+        />
+        <Modal
+          animate="pop"
+          renderView={() => (
+            <View className="bg-[#ffffff] w-[800px] h-[600px] p-[24px]">
+              <Text>订单号:{this.state.selectedOrder?.orderNo}</Text>
+              <Text>客户:{this.state.selectedOrder?.customer}</Text>
+              <Text>金额:{this.state.selectedOrder?.amount}</Text>
+              <Text>状态:{this.state.selectedOrder?.status}</Text>
+            </View>
+          )}
+          maskClosable={true}
+        />
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,184 @@
+/**
+ * 角色列表
+ * 查看和管理所有系统角色
+ *
+ * @type Page
+ * @route /roles
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+import { Page, View } from '@appthen/react';
+import { Button, Card, Input, Space, Table, Tag } from '@appthen/antd';
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  roles?: {
+    /* @example 1 */id?: number,
+    /* @example 超级管理员 */name?: string,
+    /* @example 拥有系统所有权限 */description?: string,
+    /* @example 5 */userCount?: number,
+    /* @example enabled */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    roles: [
+      {
+        id: 1,
+        name: '超级管理员',
+        description: '拥有系统所有权限',
+        userCount: 5,
+        status: 'enabled',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: '管理员',
+        description: '拥有大部分管理权限',
+        userCount: 25,
+        status: 'enabled',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: '编辑',
+        description: '可以编辑内容',
+        userCount: 50,
+        status: 'enabled',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: '普通用户',
+        description: '基础用户权限',
+        userCount: 12580,
+        status: 'enabled',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: '游客',
+        description: '只读权限',
+        userCount: 8560,
+        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: 'description',
+                key: 'description',
+              },
+              { title: '用户数量', dataIndex: 'userCount', key: 'userCount' },
+              {
+                title: '状态3',
+                dataIndex: 'status',
+                key: 'status',
+                render: text => <View>{this.getStatusTag(text)}</View>,
+              },
+              { 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.roles}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: (total, range) => `共 ${total} 条`,
+            }}
+            showHeader={true}
+            size="default"
+            tableLayout=""
+            scroll={{ scrollToFirstRowOnChange: true }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/simple/simplePage.tsx

@@ -0,0 +1,92 @@
+/**
+ * 极简主义页面
+ * @type Page
+ * @route /simple-minimalist-demo-2024
+ * @screen 1400x800 #ffffff
+ * @frames web
+ */
+import React from 'react';
+
+
+class IProps {
+  /* 页面标题 */
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 主标题 */
+  title?: string;
+  /* 描述文字 */
+  description?: string;
+  /* 特性列表 */
+  features?: {
+    /* @example ✨ */icon?: string,
+    /* @example 简洁优雅 */text?: string,
+  }[];
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    title: '极简之美',
+    description:
+      '少即是多。在这个复杂的数字世界中，我们追求简单与纯粹。让每一次交互都回归本质，让每一个设计都服务于功能。',
+    features: [
+      { icon: '✨', text: '简洁优雅' },
+      { icon: '🎯', text: '专注核心' },
+      { icon: '⚡', text: '高效体验' },
+    ],
+  };
+
+  handleGetStarted() {
+    this.utils.toast('开始探索极简之旅');
+  }
+
+  handleLearnMore() {
+    this.utils.toast('了解更多');
+  }
+
+  render() {
+    return (
+      <Page className="min-h-screen bg-[#ffffff] flex items-center justify-center pl-[24px] pr-[24px]">
+        <View className="w-full text-[var(--center)]">
+          <h1 className="text-5xl font-light text-[var(--blue-600)] mb-[32px] tracking-[-0.025em]">
+            <Text>{this.state.title}</Text>
+          </h1>
+          <p className="text-xl text-[#8b5cf6] font-light [lineHeight:1.625] mb-[64px]">
+            <Text>{this.state.description}</Text>
+          </p>
+          <View className="space-x-16 flex justify-center mb-[64px]">
+            {this.state.features.map((feature, index) => (
+              <View key={index} className="flex flex-col items-center">
+                <Text className="text-4xl mb-[12px]">{feature.icon}</Text>
+                <Text className="text-sm text-[#4b5563] font-light tracking-[0.025em]">
+                  {feature.text}
+                </Text>
+              </View>
+            ))}
+          </View>
+          <View className="space-x-6 flex justify-center">
+            <button
+              onClick={() => this.handleGetStarted()}
+              className="bg-blue-500 hover:bg-blue-600 transition-colors duration-300 pl-[32px] pr-[32px] pt-[12px] pb-[12px] text-[#ffffff] text-sm font-light tracking-[0.05em]"
+            >
+              探索未来
+            </button>
+            <button
+              onClick={() => this.handleLearnMore()}
+              className="border-purple-400 text-purple-600 text-sm hover:border-purple-500 hover:text-purple-700 transition-colors duration-300 pl-[32px] pr-[32px] pt-[12px] pb-[12px] border border-solid font-light tracking-[0.05em]"
+            >
+              更多信息
+            </button>
+          </View>
+          <View className="mt-[80px] w-[48px] h-[0px] bg-[var(--blue-300)] ml-[auto] mr-[auto]" />
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,43 @@
+/**
+ * 简单页面
+ * @type Page
+ * @route /simple
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  count?: number;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = { count: 0 };
+
+  handleClick() {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px] bg-[#ffffff] min-h-screen">
+        <Card>
+          <h1 className="text-2xl font-bold mb-[16px]">简单页面</h1>
+          <p className="mb-[16px]">计数:{this.state.count}</p>
+          <Button onClick={() => this.handleClick()}>点击增加</Button>
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,44 @@
+/**
+ * 测试解构赋值
+ * @type Page
+ * @route /test-destructure
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  count?: number;
+  name?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = { count: 0, name: '测试' };
+
+  handleClick() {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  }
+
+  render() {
+    // ❌ 违反规范：render() 中有解构赋值
+    const { count, name } = this.state;
+    return (
+      <Page className="p-[24px]">
+        <h1>{name}</h1>
+        <p>计数:{count}</p>
+        <Button onClick={() => this.handleClick()}>点击</Button>
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,75 @@
+/**
+ * 测试错误页面
+ * @type Page
+ * @route /users
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  count?: number;
+  users?: string[];
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = { count: 0, users: [], searchKeyword: '' };
+
+  handleClick(event) {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  }
+
+  getData() {
+    return Promise.resolve([]);
+  }
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px]">
+        <h1>{this.props.title}</h1>
+        <p>计数:{this.state.count}</p>
+        <Input
+          placeholder="搜索"
+          value={this.state.searchKeyword}
+          onChange={e => this.handleSearch(e.target.value)}
+        />
+        <Table
+          columns={[
+            {
+              title: '姓名',
+              dataIndex: 'name',
+              render: text => <Text>{text}</Text>,
+            },
+            {
+              title: '邮箱',
+              dataIndex: 'email',
+              render: email => <Text>{email}</Text>,
+            },
+          ]}
+          dataSource={this.state.users}
+        />
+        <Button onClick={() => this.handleClick()}>点击我</Button>
+      </Page>
+    );
+  }
+}
+
+export default Document;