@appthen/cli 1.2.10 → 1.2.12

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

@@ -0,0 +1,179 @@
+/**
+ * 分类列表
+ * 查看和管理所有商品分类
+ *
+ * @type Page
+ * @route /categories
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  categories?: {
+    /* @example 1 */id?: number,
+    /* @example 手机数码 */name?: string,
+    /* @example 无 */parent?: string,
+    /* @example 2580 */goodsCount?: number,
+    /* @example enabled */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    categories: [
+      {
+        id: 1,
+        name: '手机数码',
+        parent: '无',
+        goodsCount: 2580,
+        status: 'enabled',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: '电脑办公',
+        parent: '无',
+        goodsCount: 1680,
+        status: 'enabled',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: '手机',
+        parent: '手机数码',
+        goodsCount: 1280,
+        status: 'enabled',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: '笔记本电脑',
+        parent: '电脑办公',
+        goodsCount: 980,
+        status: 'enabled',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: '服装鞋帽',
+        parent: '无',
+        goodsCount: 5860,
+        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: 'parent', key: 'parent' },
+              { title: '商品数量', dataIndex: 'goodsCount', key: 'goodsCount' },
+              {
+                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.categories}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,194 @@
+/**
+ * 评论列表
+ * 查看和管理所有用户评论
+ *
+ * @type Page
+ * @route /comments
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  comments?: {
+    /* @example 1 */id?: number,
+    /* @example 张三 */author?: string,
+    /* @example 这篇文章写得非常好，受益匪浅！ */content?: string,
+    /* @example React入门教程 */article?: string,
+    /* @example 128 */likes?: number,
+    /* @example approved */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    comments: [
+      {
+        id: 1,
+        author: '张三',
+        content: '这篇文章写得非常好，受益匪浅！',
+        article: 'React入门教程',
+        likes: 128,
+        status: 'approved',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        author: '李四',
+        content: '希望能有更多关于TypeScript的教程',
+        article: 'JavaScript高级特性',
+        likes: 56,
+        status: 'approved',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        author: '王五',
+        content: '这个观点我不太认同，需要更多证据',
+        article: '2024年前端趋势',
+        likes: 23,
+        status: 'pending',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        author: '赵六',
+        content: '感谢分享，学到了很多',
+        article: 'Vue3最佳实践',
+        likes: 89,
+        status: 'approved',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        author: '钱七',
+        content: '代码示例很清晰，值得收藏',
+        article: 'TypeScript入门指南',
+        likes: 156,
+        status: 'approved',
+        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 === 'approved') {
+      return <Tag color="green">已通过</Tag>;
+    }
+    if (status === 'pending') {
+      return <Tag color="orange">待审核</Tag>;
+    }
+    return <Tag color="red">已拒绝</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: 'author', key: 'author' },
+              {
+                title: '评论内容',
+                dataIndex: 'content',
+                key: 'content',
+                ellipsis: true,
+              },
+              { title: '文章标题', dataIndex: 'article', key: 'article' },
+              { title: '点赞数', dataIndex: 'likes', key: 'likes' },
+              {
+                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.comments}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/component/WorkOrderCard.tsx

@@ -0,0 +1,140 @@
+/**
+ * 工单卡片
+ * @type Component
+ * @screen 375x194 #f5f5f5
+ * @frames app, web
+ */
+import React from 'react';
+import { AtIcon, Component, Text, View } from 'cross-ui';
+
+
+class IProps {
+  /* 工单状态 */
+  status: string;
+  /* 跳转详情函数 */
+  onGoDetail: Function;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {}
+
+class Document extends React.Component<IProps, IState> {
+  static defaultProps = { status: '' };
+  state = {};
+
+  render() {
+    return (
+      <React.Fragment>
+        <View className="pr-[1px] flex flex-row">
+          <View
+            __hidePh={true}
+            inlineStyle={[
+              {
+                enable: this.props.status == 'completed',
+                name: '动态样式1',
+                style: { backgroundColor: '#3b82f6' },
+              },
+            ]}
+            className="bottom-[0px] top-[0px] left-[0px] w-[17px] rounded-tl-[20px] rounded-bl-[20px] mr-[-11px]"
+          />
+          <View
+            __hidePh={true}
+            className="bg-[#ffffff] rounded-xl relative flex-1 pt-[10px] pb-[10px] pl-[10px] pr-[10px]"
+          >
+            <View className="flex flex-row items-center">
+              <View className="flex-1">
+                <Text className="text-sm text-[#666666]">WO-2023110001</Text>
+              </View>
+              <View className="bg-[#22c55e] pt-[6px] pr-[10px] pb-[6px] pl-[10px] rounded-[15px]">
+                <Text className="text-xs text-[#ffffff]">已完成</Text>
+              </View>
+            </View>
+            <View className="mt-[10px]">
+              <Text className="text-sm text-[#333] font-bold">
+                设备故障维修申请
+              </Text>
+            </View>
+            <View className="mt-[10px]">
+              <Text numberOfLines={1} className="text-xs text-[#333]">
+                3号生产线主轴电机出现异常噪音，需要紧急检修以比
+              </Text>
+            </View>
+            <View className="mt-[10px] flex flex-row items-center">
+              <View className="flex flex-row">
+                <AtIcon
+                  color="#666"
+                  size={20}
+                  svg="&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34; ?&#62;&#10;&#60;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; xmlns:xlink=&#34;http://www.w3.org/1999/xlink&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 12 12&#34;&#62;&#10;\t&#60;defs&#62;&#10;\t\t&#60;clipPath id=&#34;clipPath5115394031&#34;&#62;&#10;\t\t\t&#60;path d=&#34;M0 0L12 0L12 12L0 12L0 0Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0 0)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;/clipPath&#62;&#10;\t&#60;/defs&#62;&#10;\t&#60;g clip-path=&#34;url(#clipPath5115394031)&#34;&#62;&#10;\t\t&#60;path d=&#34;M1.67816 6.0308L1.67816 2.65931C1.67816 2.45221 1.51027 2.28431 1.30316 2.28431C1.09606 2.28431 0.928164 2.45221 0.928164 2.65931L0.928164 6.0308Q0.936713 6.57501 1.32039 6.95267Q1.70406 7.33034 2.24242 7.33034Q2.78078 7.33034 3.16446 6.95267Q3.54813 6.57501 3.55663 6.03672L3.55973 1.61191Q3.56967 0.794366 2.99203 0.209683Q2.4144 -0.375 1.5925 -0.375Q0.770602 -0.375 0.192968 0.209683Q-0.384667 0.794366 -0.374698 1.6162L-0.374726 6.06056Q-0.390517 7.14867 0.377193 7.92757Q1.1449 8.70648 2.23856 8.70648Q3.33221 8.70648 4.09992 7.92758Q4.86763 7.14867 4.8518 6.05513L4.85184 1.90322C4.85184 1.69611 4.68394 1.52822 4.47684 1.52822C4.26973 1.52822 4.10184 1.69611 4.10184 1.90322L4.10188 6.06599Q4.11316 6.84572 3.56576 7.4011Q3.01836 7.95648 2.23856 7.95648Q1.45875 7.95648 0.911348 7.4011Q0.363947 6.84572 0.375274 6.06056L0.375246 1.60711Q0.369078 1.09857 0.726504 0.736788Q1.08393 0.375 1.5925 0.375Q2.10107 0.375 2.4585 0.736788Q2.81592 1.09858 2.80973 1.6114L2.80673 6.02487Q2.80308 6.25601 2.63833 6.41817Q2.47359 6.58034 2.24242 6.58034Q2.01126 6.58034 1.84651 6.41817Q1.68177 6.25601 1.67816 6.0308Z&#34; fill-rule=&#34;evenodd&#34; transform=&#34;matrix(1 0 0 1 3.76121 1.84069)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t&#60;/g&#62;&#10;&#60;/svg&#62;&#10;"
+                />
+              </View>
+              <View className="ml-[5px]">
+                <Text className="text-xs text-[#666666]">2个附件</Text>
+              </View>
+            </View>
+            <View className="mt-[10px] flex flex-row">
+              <View className="flex flex-row items-center">
+                <View className="w-[28px] h-[28px] bg-[#add2ff] rounded-[15px] flex flex-col justify-center items-center">
+                  <Text className="text-sm text-[#3b82f6]">李</Text>
+                </View>
+                <View className="ml-[10px]">
+                  <Text className="text-sm text-[#666666]">李明</Text>
+                </View>
+              </View>
+              <View className="flex-row flex-1 flex justify-end">
+                <View
+                  __hidePh={true}
+                  onClick={e => {
+                    this.props.onGoDetail();
+                  }}
+                  className="bg-[#f3f4f6] w-[40px] h-[40px] rounded-[20px] flex flex-col justify-center items-center mr-[10px]"
+                >
+                  <AtIcon
+                    color="#666"
+                    size={20}
+                    svg="&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34; ?&#62;&#10;&#60;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; xmlns:xlink=&#34;http://www.w3.org/1999/xlink&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 20 20&#34;&#62;&#10;\t&#60;defs&#62;&#10;\t\t&#60;clipPath id=&#34;clipPath0894376390&#34;&#62;&#10;\t\t\t&#60;path d=&#34;M0 0L20 0L20 20L0 20L0 0Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0 0)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;/clipPath&#62;&#10;\t&#60;/defs&#62;&#10;\t&#60;g clip-path=&#34;url(#clipPath0894376390)&#34;&#62;&#10;\t\t&#60;circle cx=&#34;2.5&#34; cy=&#34;2.5&#34; r=&#34;2.5&#34; transform=&#34;matrix(1 0 0 1 7.5 7.5)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;path d=&#34;M18.5492 5.57031C17.5156 3.97188 16.1746 2.61406 14.6715 1.64336C13.0086 0.568359 11.1727 0 9.36252 0C7.70158 0 6.06837 0.474609 4.50822 1.41055C2.9172 2.36484 1.4758 3.75898 0.223843 5.55391C0.079313 5.76135 0.00477175 5.99146 0.000219643 6.24425C-0.00433246 6.49703 0.0618755 6.72968 0.198843 6.94219C1.23048 8.55664 2.55822 9.91641 4.03791 10.8738C5.70392 11.9531 7.49689 12.5 9.36252 12.5C11.1871 12.5 13.027 11.9363 14.6828 10.8703C16.1852 9.90273 17.5235 8.53984 18.5531 6.92812C18.6852 6.72088 18.7509 6.49438 18.7501 6.24865C18.7494 6.00291 18.6825 5.7768 18.5492 5.57031ZM9.3758 10C8.34026 10 7.45638 9.63388 6.72415 8.90165C5.99191 8.16942 5.6258 7.28553 5.6258 6.25C5.6258 5.21447 5.99191 4.33058 6.72415 3.59835C7.45638 2.86612 8.34026 2.5 9.3758 2.5C10.4113 2.5 11.2952 2.86612 12.0274 3.59835C12.7597 4.33058 13.1258 5.21447 13.1258 6.25C13.1246 7.28504 12.7581 8.16851 12.0262 8.90039C11.2943 9.63228 10.4108 9.99882 9.3758 10Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0.624204 3.75)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t&#60;/g&#62;&#10;&#60;/svg&#62;&#10;"
+                  />
+                </View>
+                <View
+                  __hidePh={true}
+                  className="bg-[#f3f4f6] w-[40px] h-[40px] rounded-[20px] flex flex-col justify-center items-center mr-[10px]"
+                >
+                  <AtIcon
+                    color="#666"
+                    size={20}
+                    svg="&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34; ?&#62;&#10;&#60;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; xmlns:xlink=&#34;http://www.w3.org/1999/xlink&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 20 20&#34;&#62;&#10;\t&#60;defs&#62;&#10;\t\t&#60;clipPath id=&#34;clipPath2557746411&#34;&#62;&#10;\t\t\t&#60;path d=&#34;M0 0L20 0L20 20L0 20L0 0Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0 0)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;/clipPath&#62;&#10;\t&#60;/defs&#62;&#10;\t&#60;g clip-path=&#34;url(#clipPath2557746411)&#34;&#62;&#10;\t\t&#60;path d=&#34;M12.7935 -0.418716L12.7938 -0.419009Q13.2343 -0.859375 13.8572 -0.859375Q14.4804 -0.859375 14.921 -0.418751L14.9505 -0.389229Q15.3907 0.0513004 15.3907 0.674075Q15.3907 1.29685 14.9502 1.7376L14.4897 2.19815Q14.4299 2.258 14.3595 2.30503Q14.2891 2.35205 14.2109 2.38444Q14.1327 2.41683 14.0497 2.43334Q13.9667 2.44986 13.882 2.44986Q13.7974 2.44986 13.7144 2.43334Q13.6314 2.41683 13.5532 2.38444Q13.475 2.35205 13.4046 2.30503Q13.3342 2.258 13.2744 2.19815L12.3327 1.25649Q12.2729 1.19661 12.2259 1.12621Q12.1789 1.05582 12.1465 0.977606Q12.1142 0.899394 12.0977 0.816373Q12.0812 0.733351 12.0812 0.64871Q12.0813 0.564069 12.0978 0.481061Q12.1144 0.398054 12.1468 0.319869Q12.1792 0.241685 12.2263 0.171328Q12.2733 0.100972 12.3332 0.0411472L12.7935 -0.418716ZM10.6665 1.70781L0.035724 12.3648Q-0.084919 12.4857 -0.150137 12.6436L-0.794278 14.203Q-0.826593 14.2812 -0.843025 14.3643Q-0.859457 14.4473 -0.859375 14.5319Q-0.859292 14.6166 -0.842699 14.6996Q-0.826106 14.7826 -0.793639 14.8607Q-0.761172 14.9389 -0.71408 15.0092Q-0.666988 15.0796 -0.607079 15.1394Q-0.547171 15.1992 -0.476749 15.2461Q-0.406327 15.2931 -0.328097 15.3254Q-0.170506 15.3905 7.45058e-09 15.3905Q0.170506 15.3905 0.328097 15.3254L1.88747 14.6812Q2.04536 14.616 2.1663 14.4954L12.8225 3.8653Q12.8825 3.80553 12.9296 3.73521Q12.9767 3.66489 13.0092 3.58673Q13.0417 3.50857 13.0583 3.42558Q13.0749 3.34259 13.075 3.25794Q13.0751 3.1733 13.0587 3.09027Q13.0423 3.00723 13.01 2.929Q12.9777 2.85076 12.9308 2.78032Q12.8838 2.70989 12.824 2.64997L11.8819 1.70781Q11.822 1.64796 11.7517 1.60094Q11.6813 1.55391 11.6031 1.52152Q11.5249 1.48913 11.4419 1.47262Q11.3589 1.45611 11.2742 1.45611Q11.1896 1.45611 11.1066 1.47262Q11.0235 1.48913 10.9453 1.52152Q10.8672 1.55391 10.7968 1.60094Q10.7264 1.64796 10.6665 1.70781Z&#34; fill-rule=&#34;evenodd&#34; transform=&#34;matrix(1 0 0 1 2.73438 2.73452)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t&#60;/g&#62;&#10;&#60;/svg&#62;&#10;"
+                  />
+                </View>
+                <View
+                  __hidePh={true}
+                  className="bg-[#f3f4f6] w-[40px] h-[40px] rounded-[20px] flex flex-col justify-center items-center"
+                >
+                  <AtIcon
+                    color="#666"
+                    size={20}
+                    svg="&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34; ?&#62;&#10;&#60;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; xmlns:xlink=&#34;http://www.w3.org/1999/xlink&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 20 20&#34;&#62;&#10;\t&#60;defs&#62;&#10;\t\t&#60;clipPath id=&#34;clipPath0406936548&#34;&#62;&#10;\t\t\t&#60;path d=&#34;M0 0L20 0L20 20L0 20L0 0Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0 0)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;/clipPath&#62;&#10;\t&#60;/defs&#62;&#10;\t&#60;g clip-path=&#34;url(#clipPath0406936548)&#34;&#62;&#10;\t\t&#60;path d=&#34;M12.5003 6.875C11.6972 6.875 10.9206 6.51641 10.3128 5.86563C9.72178 5.23086 9.36084 4.38438 9.29717 3.48281C9.2292 2.52109 9.52256 1.63672 10.123 0.992188C10.7233 0.347657 11.5628 0 12.5003 0C13.4312 0 14.273 0.353906 14.8714 0.996875C15.4757 1.64609 15.7698 2.52891 15.7019 3.48242C15.6366 4.38516 15.2761 5.23125 14.6862 5.86523C14.08 6.51641 13.3038 6.875 12.5003 6.875ZM17.6499 13.75L7.35108 13.75C7.18329 13.7509 7.02391 13.7147 6.87293 13.6415C6.72196 13.5683 6.59488 13.4655 6.4917 13.3332C6.3823 13.1898 6.30957 13.0298 6.27353 12.853C6.23748 12.6763 6.24172 12.5006 6.28623 12.3258C6.61514 11.0051 7.42999 9.90976 8.64248 9.15859C9.71866 8.49219 11.0886 8.125 12.5003 8.125C13.9398 8.125 15.2737 8.47656 16.3562 9.14258C17.5714 9.88984 18.3874 10.9914 18.7148 12.3281C18.7587 12.503 18.7625 12.6788 18.726 12.8554C18.6896 13.032 18.6166 13.1919 18.5069 13.3352C18.4039 13.4669 18.2771 13.5691 18.1265 13.642C17.976 13.7149 17.8171 13.7509 17.6499 13.75ZM5.11749 7.03125C3.74288 7.03125 2.53428 5.75313 2.42217 4.18242C2.3667 3.37773 2.61749 2.63359 3.1253 2.08789C3.62764 1.54766 4.33624 1.25 5.11749 1.25C5.89874 1.25 6.60186 1.54922 7.10694 2.09258C7.61866 2.64258 7.86866 3.38516 7.81006 4.1832C7.69795 5.75352 6.48975 7.03125 5.11749 7.03125ZM7.68233 8.25977C6.99522 7.92383 6.10342 7.75586 5.11788 7.75586C3.96709 7.75586 2.84952 8.05586 1.97061 8.60039C0.974126 9.21875 0.303814 10.1191 0.0331106 11.2063C-0.00701755 11.3646 -0.010671 11.5239 0.0221504 11.6839C0.0549717 11.844 0.120995 11.9889 0.22022 12.1187C0.314407 12.2397 0.430431 12.3336 0.568293 12.4006C0.706154 12.4676 0.851718 12.5007 1.00499 12.5L5.34092 12.5C5.41644 12.5 5.48318 12.4758 5.54114 12.4274C5.59911 12.379 5.63485 12.3177 5.64834 12.2434C5.65264 12.2187 5.65811 12.1941 5.66436 12.1699C5.99561 10.8395 6.77178 9.71523 7.91866 8.8957C8.01024 8.82968 8.05338 8.74029 8.04808 8.62751C8.04277 8.51473 7.99143 8.42978 7.89405 8.37265C7.83272 8.33672 7.76241 8.29883 7.68233 8.25977Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0.624702 3.125)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t&#60;/g&#62;&#10;&#60;/svg&#62;&#10;"
+                  />
+                </View>
+              </View>
+            </View>
+            <View className="mt-[10px] flex flex-row items-center justify-between">
+              <View>
+                <Text className="text-sm text-[#9b9b9b]">
+                  创建于 2023-11-05
+                </Text>
+              </View>
+              <View>
+                <Text className="text-sm text-[#ef4444]">
+                  期望完成：2023-11-08
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,42 @@
+/**
+ * 封面管理
+ * 封面列表与操作
+ *
+ * @type Page
+ * @screen 400x250
+ * @frames app, web
+ * @clients weapp
+ */
+import React from 'react';
+import { Page, Text, View } from '@appthen/react';
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  newField?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {};
+
+  render() {
+    return (
+      <Page
+        statusBarMode="light"
+        backgroundImage="https://cdn.appthen.com/Fmk8IZVxeE9QYk9hKJM-D2L4Q52_"
+      >
+        <View className="h-[250px] bg-[rgba(58,58,58,0.74)] flex flex-col justify-center items-center">
+          <Text className="text-[40px] text-[#40a9ff] font-bold">
+            快速上手指南
+          </Text>
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;