@appthen/cli 1.2.11 → 1.2.13

package/tests/test-app/src/pages/mobile_terminal/uiHandsOnPractice.tsx

@@ -1,5 +1,5 @@
 /**
- * UI上手练习(整页)
+ * UI上手练习
  * @type Page
  * @screen 1200w
  * @frames app

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

@@ -0,0 +1,217 @@
+/**
+ * 通知列表
+ * 查看和管理所有系统通知
+ *
+ * @type Page
+ * @route /notices
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  notices?: {
+    /* @example 1 */id?: number,
+    /* @example 系统维护通知 */title?: string,
+    /* @example 系统将于12月20日凌晨进行维护 */content?: string,
+    /* @example system */type?: string,
+    /* @example published */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    notices: [
+      {
+        id: 1,
+        title: '系统维护通知',
+        content: '系统将于12月20日凌晨进行维护',
+        type: 'system',
+        status: 'published',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        title: '新功能上线',
+        content: '订单管理功能已更新',
+        type: 'feature',
+        status: 'published',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        title: '优惠活动预告',
+        content: '双12活动即将开始',
+        type: 'activity',
+        status: 'draft',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        title: '安全提醒',
+        content: '请及时修改密码',
+        type: 'security',
+        status: 'published',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        title: '版本更新说明',
+        content: 'v2.0版本已发布',
+        type: 'system',
+        status: 'published',
+        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 === 'published') {
+      return <Tag color="green">已发布</Tag>;
+    }
+    return <Tag color="orange">草稿</Tag>;
+  }
+
+  getTypeTag(type) {
+    const config = {
+      system: {
+        text: '系统',
+        color: 'blue',
+      },
+      feature: {
+        text: '功能',
+        color: 'purple',
+      },
+      activity: {
+        text: '活动',
+        color: 'orange',
+      },
+      security: {
+        text: '安全',
+        color: 'red',
+      },
+    };
+    const configItem = config[type] || {
+      text: type,
+      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: 'title', key: 'title' },
+              {
+                title: '通知内容',
+                dataIndex: 'content',
+                key: 'content',
+                ellipsis: true,
+              },
+              {
+                title: '类型',
+                dataIndex: 'type',
+                key: 'type',
+                render: function (text) {
+                  return this.getTypeTag(text);
+                },
+              },
+              {
+                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.notices}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/order-detail.tsx

@@ -0,0 +1,330 @@
+/**
+ * 订单详情页 - 展示订单的完整信息
+ * @type Page
+ * @route /order/detail
+ * @screen 1200x800 #f5f5f5
+ * @frames web, app
+ * @clients web, h5, weapp
+ */
+import React from 'react';
+
+
+
+class IProps {
+  orderId?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  loading?: boolean;
+  order?: any;
+  showStatusModal?: boolean;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = { loading: true, order: null, showStatusModal: false };
+
+  componentDidMount() {
+    this.loadOrderDetail();
+  }
+
+  async loadOrderDetail() {
+    try {
+      const orderId = this.props.orderId || '123456';
+      const mockData = {
+        id: 'ORD202412010001',
+        orderNo: 'ORD202412010001',
+        status: 'completed',
+        statusText: '已完成',
+        createTime: '2024-12-01 14:30:25',
+        payTime: '2024-12-01 14:35:10',
+        deliveryTime: '2024-12-02 10:20:00',
+        receiverName: '张三',
+        receiverPhone: '138****5678',
+        receiverAddress: '北京市朝阳区建国路88号SOHO现代城A座12层1201室',
+        totalAmount: 2999.0,
+        discountAmount: 200.0,
+        freightAmount: 10.0,
+        realAmount: 2809.0,
+        paymentMethod: '微信支付',
+        remark: '请在工作日配送',
+        items: [
+          {
+            id: 1,
+            productName: '无线蓝牙耳机 Pro',
+            productImage: 'https://via.placeholder.com/80x80',
+            skuName: '白色 / 降噪版',
+            price: 1299.0,
+            quantity: 2,
+            subtotal: 2598.0,
+          },
+          {
+            id: 2,
+            productName: '手机保护壳',
+            productImage: 'https://via.placeholder.com/80x80',
+            skuName: '透明 / 适用于iPhone 15',
+            price: 39.0,
+            quantity: 2,
+            subtotal: 78.0,
+          },
+          {
+            id: 3,
+            productName: '数据线 Type-C',
+            productImage: 'https://via.placeholder.com/80x80',
+            skuName: '1米 / 白色',
+            price: 29.0,
+            quantity: 1,
+            subtotal: 29.0,
+          },
+        ],
+        timeline: [
+          {
+            time: '2024-12-02 10:20:00',
+            title: '已签收',
+            description: '您的订单已签收，感谢您的购买',
+          },
+          {
+            time: '2024-12-01 18:30:00',
+            title: '派送中',
+            description: '快递员正在为您派送',
+          },
+          {
+            time: '2024-12-01 15:00:00',
+            title: '已发货',
+            description: '订单已出库，顺丰快递：SF1234567890',
+          },
+          {
+            time: '2024-12-01 14:35:10',
+            title: '已付款',
+            description: '您已成功支付订单',
+          },
+          {
+            time: '2024-12-01 14:30:25',
+            title: '订单创建',
+            description: '订单创建成功，等待付款',
+          },
+        ],
+      };
+      this.setState({
+        order: mockData,
+        loading: false,
+      });
+    } catch (error) {
+      this.setState({
+        loading: false,
+      });
+      this.utils.showToast('加载订单详情失败');
+    }
+  }
+
+  getStatusColor(status) {
+    const colorMap = {
+      pending: 'default',
+      paid: 'processing',
+      shipped: 'warning',
+      completed: 'success',
+      cancelled: 'error',
+    };
+    return colorMap[status] || 'default';
+  }
+
+  handleCancelOrder() {
+    this.utils.showComponentModal('CancelOrderModal', {
+      orderId: this.state.order?.id,
+      onSuccess: () => {
+        this.utils.showToast('订单已取消');
+        this.loadOrderDetail();
+      },
+    });
+  }
+
+  handlePay() {
+    this.utils.showToast('跳转到支付页面');
+  }
+
+  handleConfirmReceipt() {
+    this.utils.showComponentModal('ConfirmReceiptModal', {
+      orderId: this.state.order?.id,
+      onSuccess: () => {
+        this.utils.showToast('已确认收货');
+        this.loadOrderDetail();
+      },
+    });
+  }
+
+  handleContactService() {
+    this.utils.showComponentModal('CustomerServiceModal');
+  }
+
+  handleBuyAgain() {
+    this.utils.showToast('已加入购物车');
+  }
+
+  render() {
+    return (
+      <Page className="bg-[#f3f4f6] min-h-screen">
+        <View className="p-[16px] ml-[auto] mr-[auto]">
+          <Card className="mb-[16px] shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]">
+            <View className="flex items-center justify-between">
+              <View className="flex items-center">
+                <Tag
+                  color={this.getStatusColor(this.state.order?.status)}
+                  className="text-base pl-[16px] pr-[16px] pt-[4px] pb-[4px]"
+                >
+                  <Text>{this.state.order?.statusText}</Text>
+                </Tag>
+                <Text className="ml-[16px] text-[#4b5563]">
+                  订单编号：{this.state.order?.orderNo}
+                </Text>
+              </View>
+              <View className="gap-2 flex">
+                <Button type="link" onClick={() => this.handleContactService()}>
+                  联系客服
+                </Button>
+              </View>
+            </View>
+          </Card>
+          <Card
+            title="订单进度"
+            className="mb-[16px] shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]"
+          >
+            <Steps
+              direction="vertical"
+              current={0}
+              items={(this.state.order?.timeline).map((item, index) => (
+                <View>
+                  <Text>{item.description}</Text>
+                  <Text className="block text-[#9ca3af] text-sm mt-[4px]">
+                    {item.time}
+                  </Text>
+                </View>
+              ))}
+            />
+          </Card>
+          <Card
+            title="买家信息"
+            className="mb-[16px] shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]"
+          >
+            <Descriptions column={2}>
+              <Descriptions.Item label="收货人">
+                <Text>{this.state.order?.receiverName}</Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="联系电话">
+                <Text>{this.state.order?.receiverPhone}</Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="收货地址" span={2}>
+                <Text>{this.state.order?.receiverAddress}</Text>
+              </Descriptions.Item>
+            </Descriptions>
+          </Card>
+          <Card
+            title="订单货品信息"
+            className="mb-[16px] shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]"
+          >
+            {(this.state.order?.items).map((item, index) => (
+              <View
+                key={item.id || index}
+                className="border-b border-gray-100 last:border-0 flex pt-[16px] pb-[16px]"
+              >
+                <Image
+                  src={item.productImage}
+                  className="w-[80px] h-[80px] [objectFit:cover] rounded"
+                />
+                <View className="flex-1 ml-[16px]">
+                  <Text className="font-medium text-base">
+                    {item.productName}
+                  </Text>
+                  <Text className="block text-[#6b7280] text-sm mt-[4px]">
+                    {item.skuName}
+                  </Text>
+                  <View className="flex justify-between mt-[8px]">
+                    <Text className="text-[#ef4444] font-medium">
+                      ¥{item.price?.toFixed(2)}
+                    </Text>
+                    <Text className="text-[#4b5563]">x{item.quantity}</Text>
+                  </View>
+                </View>
+                <View className="text-[var(--right)]">
+                  <Text className="font-medium text-base">
+                    ¥{item.subtotal?.toFixed(2)}
+                  </Text>
+                </View>
+              </View>
+            ))}
+            <Divider className="mt-[16px] mb-[16px]" />
+            <View className="space-y-2">
+              <View className="flex justify-between">
+                <Text className="text-[#4b5563]">商品总额</Text>
+                <Text>¥{this.state.order?.totalAmount?.toFixed(2)}</Text>
+              </View>
+              <View className="flex justify-between">
+                <Text className="text-[#4b5563]">优惠金额</Text>
+                <Text className="text-[#ef4444]">
+                  -¥{this.state.order?.discountAmount?.toFixed(2)}
+                </Text>
+              </View>
+              <View className="flex justify-between">
+                <Text className="text-[#4b5563]">运费</Text>
+                <Text>¥{this.state.order?.freightAmount?.toFixed(2)}</Text>
+              </View>
+              <View className="flex justify-between items-center pt-[8px]">
+                <Text className="text-base font-medium">实付金额</Text>
+                <Text className="text-[#ef4444] text-xl font-bold">
+                  ¥{this.state.order?.realAmount?.toFixed(2)}
+                </Text>
+              </View>
+            </View>
+          </Card>
+          <Card
+            title="支付信息"
+            className="mb-[16px] shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]"
+          >
+            <Descriptions column={2}>
+              <Descriptions.Item label="支付方式">
+                <Text>{this.state.order?.paymentMethod}</Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="支付时间">
+                <Text>{this.state.order?.payTime}</Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="下单时间" span={2}>
+                <Text>{this.state.order?.createTime}</Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="订单备注" span={2}>
+                无
+              </Descriptions.Item>
+            </Descriptions>
+          </Card>
+          <Card className="shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]">
+            <View className="gap-3 flex justify-end">
+              <Button onClick={() => this.handleBuyAgain()}>再次购买</Button>
+              {!!(this.state.order?.status === 'shipped') && (
+                <Button
+                  type="primary"
+                  onClick={() => this.handleConfirmReceipt()}
+                >
+                  确认收货
+                </Button>
+              )}
+              {!!(this.state.order?.status === 'completed') && (
+                <Button type="default">申请售后</Button>
+              )}
+              {!!(this.state.order?.status === 'pending') && (
+                <Button
+                  type="primary"
+                  danger={true}
+                  onClick={() => this.handleCancelOrder()}
+                >
+                  取消订单
+                </Button>
+              )}
+            </View>
+          </Card>
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;