@appthen/cli 1.2.11 → 1.2.12

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;