@appthen/cli 1.2.11 → 1.2.12

package/tests/test-app/.appthen/space-config.json

@@ -3,6 +3,6 @@
   "projectRoot": "/Users/huanglei/Documents/work/ruoqing/editor/packages/cli/tests/test-app",
   "projectId": "66123f22b93b36e6a40dbcb9",
   "userId": 100001,
-  "createdAt": "2026-01-27T03:47:59.733Z",
-  "lastAccess": "2026-01-27T03:47:59.733Z"
+  "createdAt": "2026-02-08T07:47:23.181Z",
+  "lastAccess": "2026-02-08T07:47:23.181Z"
 }

package/tests/test-app/src/components/MessageCenter.tsx

@@ -0,0 +1,506 @@
+/**
+ * 消息中心
+ * 系统消息和通知管理
+ *
+ * @type Page
+ * @route /messages
+ * @screen 800x800 #fff
+ * @frames web
+ */
+import React from 'react';
+import { AtIcon, Component, Text, View } from '@appthen/react';
+import { Button, Pagination, Tabs } from '@appthen/antd';
+
+
+class IProps {
+  userId?: number;
+  messageType?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  messages?: {
+    /* @example 1 */id?: number,
+    /* @example system */type?: string,
+    /* @example 系统升级通知 */title?: string,
+    /* @example 系统将于今晚22:00进行升级维护 */content?: string,
+    /* @example 2024-01-15 10:30 */time?: string,
+    /* @example false */read?: boolean,
+    /* @example high */priority?: string,
+    /* @example 系统管理员 */sender?: string,
+  }[];
+  loading?: boolean;
+  activeTab?: string;
+  @Form({
+    setter: "JsonSetter"
+  })
+  selectedIds?: string[];
+  searchKeyword?: string;
+  showUnreadOnly?: boolean;
+  totalCount?: number;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    messages: [
+      {
+        id: 1,
+        type: 'system',
+        title: '系统升级通知',
+        content: '系统将于今晚22:00进行升级维护',
+        time: '2024-01-15 10:30',
+        read: false,
+        priority: 'high',
+        sender: '系统管理员',
+      },
+      {
+        id: 2,
+        type: 'system',
+        title: '安全提醒',
+        content: '检测到您的账号在异地登录',
+        time: '2024-01-14 15:20',
+        read: false,
+        priority: 'high',
+        sender: '安全中心',
+      },
+      {
+        id: 3,
+        type: 'notice',
+        title: '新功能上线',
+        content: '数据分析模块已上线，欢迎体验',
+        time: '2024-01-13 09:00',
+        read: true,
+        priority: 'normal',
+        sender: '产品团队',
+      },
+      {
+        id: 4,
+        type: 'notice',
+        title: '活动通知',
+        content: '新春特惠活动即将开始',
+        time: '2024-01-12 16:45',
+        read: false,
+        priority: 'normal',
+        sender: '运营团队',
+      },
+      {
+        id: 5,
+        type: 'todo',
+        title: '待办任务',
+        content: '请完成本月的数据报表',
+        time: '2024-01-11 11:30',
+        read: true,
+        priority: 'low',
+        sender: '系统',
+      },
+      {
+        id: 6,
+        type: 'todo',
+        title: '审核待办',
+        content: '有3个订单需要审核',
+        time: '2024-01-10 14:20',
+        read: true,
+        priority: 'medium',
+        sender: '系统',
+      },
+    ],
+    loading: false,
+    activeTab: 'all',
+    selectedIds: [],
+    searchKeyword: '',
+    showUnreadOnly: false,
+    totalCount: 6,
+  };
+
+  handleTabChange(key) {
+    this.setState({
+      activeTab: key,
+    });
+  }
+
+  handleSearch(value) {
+    this.setState({
+      searchKeyword: value,
+    });
+  }
+
+  toggleShowUnread(checked) {
+    this.setState({
+      showUnreadOnly: checked,
+    });
+  }
+
+  handleSelectAll(checked) {
+    if (checked) {
+      this.setState({
+        selectedIds: this.state.messages.map(m => m.id),
+      });
+    } else {
+      this.setState({
+        selectedIds: [],
+      });
+    }
+  }
+
+  handleSelectMessage(id, checked) {
+    if (checked) {
+      this.setState({
+        selectedIds: [...this.state.selectedIds, id],
+      });
+    } else {
+      this.setState({
+        selectedIds: this.state.selectedIds.filter(id => id !== id),
+      });
+    }
+  }
+
+  markAsRead(id) {
+    this.setState({
+      messages: this.state.messages.map(m => {
+        if (m.id === id) {
+          return {
+            ...m,
+            read: true,
+          };
+        }
+        return m;
+      }),
+    });
+  }
+
+  markAllAsRead() {
+    this.setState({
+      messages: this.state.messages.map(m => ({
+        ...m,
+        read: true,
+      })),
+    });
+  }
+
+  deleteMessage(id) {
+    this.setState({
+      messages: this.state.messages.filter(m => m.id !== id),
+      totalCount: this.state.totalCount - 1,
+    });
+  }
+
+  batchDelete() {
+    this.setState({
+      messages: this.state.messages.filter(
+        m => !this.state.selectedIds.includes(m.id)
+      ),
+      selectedIds: [],
+      totalCount: this.state.totalCount - this.state.selectedIds.length,
+    });
+  }
+
+  refreshMessages() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+  }
+
+  render() {
+    const messages = this.state.messages;
+    const loading = this.state.loading;
+    const activeTab = this.state.activeTab;
+    const selectedIds = this.state.selectedIds;
+    const searchKeyword = this.state.searchKeyword;
+    const showUnreadOnly = this.state.showUnreadOnly;
+    const unreadCount = messages.filter(m => !m.read).length;
+    const filteredMessages = messages.filter(message => {
+      const matchTab = activeTab === 'all' || message.type === activeTab;
+      const matchSearch =
+        message.title.includes(searchKeyword) ||
+        message.content.includes(searchKeyword);
+      const matchUnread = !showUnreadOnly || !message.read;
+      return matchTab && matchSearch && matchUnread;
+    });
+    const priorityColors = {
+      high: 'red',
+      medium: 'orange',
+      normal: 'blue',
+      low: 'gray',
+    };
+    const typeLabels = {
+      system: '系统消息',
+      notice: '通知公告',
+      todo: '待办事项',
+    };
+    const messageCard = message => (
+      <Card
+        key={message.id}
+        className={`mb-3 ${message.read ? 'bg-gray-50' : 'bg-white'}`}
+        extra={
+          <View className="flex items-center gap-2">
+            <Switch
+              checked={selectedIds.includes(message.id)}
+              onChange={checked =>
+                this.handleSelectMessage(message.id, checked)
+              }
+              size="small"
+            />
+            {!message.read && <Badge status="processing" />}
+          </View>
+        }
+      >
+        <View className="flex items-start gap-3">
+          <Avatar size={40}>{message.sender.charAt(0)}</Avatar>
+          <View className="flex-1">
+            <View className="flex justify-between items-start">
+              <View>
+                <Text className="font-bold">{message.title}</Text>
+                <View className="flex items-center gap-2 mt-1">
+                  <Tag color={priorityColors[message.priority]}>
+                    {message.priority}
+                  </Tag>
+                  <Tag>{typeLabels[message.type]}</Tag>
+                </View>
+              </View>
+              <Text className="text-gray-400 text-sm">{message.time}</Text>
+            </View>
+            <Text className="text-gray-600 mt-2">{message.content}</Text>
+            <View className="flex gap-2 mt-3">
+              {!message.read && (
+                <Button
+                  type="link"
+                  size="small"
+                  onClick={() => this.markAsRead(message.id)}
+                >
+                  标为已读
+                </Button>
+              )}
+              <Popconfirm
+                title="确认删除"
+                description="删除后无法恢复，确认删除吗？"
+                onConfirm={() => this.deleteMessage(message.id)}
+              >
+                <Button type="link" size="small" danger>
+                  删除
+                </Button>
+              </Popconfirm>
+            </View>
+          </View>
+        </View>
+      </Card>
+    );
+    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>
+        <Card className="mb-[24px]">
+          <Row gutter={16}>
+            <Col span={6}>
+              <Badge count={unreadCount} showZero={true}>
+                <Statistic title="未读消息" value={unreadCount} suffix="条" />
+              </Badge>
+            </Col>
+            <Col span={6}>
+              <Statistic title="总消息" value={totalCount} suffix="条" />
+            </Col>
+            <Col span={6}>
+              <Statistic
+                title="系统消息"
+                value={
+                  messages.filter(function (m) {
+                    return m.type === 'system';
+                  }).length
+                }
+                suffix="条"
+              />
+            </Col>
+            <Col span={6}>
+              <Statistic
+                title="待办事项"
+                value={
+                  messages.filter(function (m) {
+                    return m.type === 'todo';
+                  }).length
+                }
+                suffix="条"
+              />
+            </Col>
+          </Row>
+        </Card>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <View className="gap-4 flex items-center">
+              <Input
+                placeholder="搜索消息"
+                value={searchKeyword}
+                onChange={e => this.handleSearch(e.target.value)}
+                className=""
+              />
+              <View className="gap-2 flex items-center">
+                <Text>只看未读：</Text>
+                <Switch
+                  checked={showUnreadOnly}
+                  onChange={checked => this.toggleShowUnread(checked)}
+                />
+              </View>
+            </View>
+            <View className="gap-2 flex items-center">
+              <Switch
+                checked={
+                  selectedIds.length > 0 &&
+                  selectedIds.length === filteredMessages.length
+                }
+                onChange={checked => this.handleSelectAll(checked)}
+              />
+              <Text>全选</Text>
+              {!!(selectedIds.length > 0) && (
+                <Button
+                  type="primary"
+                  danger={true}
+                  onClick={() => this.batchDelete()}
+                >{`批量删除 (${selectedIds.length})`}</Button>
+              )}
+              <Button onClick={() => this.markAllAsRead()}>全部标为已读</Button>
+              <Button onClick={() => this.refreshMessages()}>刷新</Button>
+            </View>
+          </View>
+        </Card>
+        <Card>
+          <Tabs
+            activeKey={activeTab}
+            onChange={key => this.handleTabChange(key)}
+          >
+            <Tabs.TabPane tab={`全部 (${messages.length})`} key="all">
+              {!!(filteredMessages.length === 0) && (
+                <Empty description="暂无消息" />
+              )}
+              {!(filteredMessages.length === 0) && (
+                <Text>
+                  {filteredMessages.map(function (message) {
+                    return messageCard(message);
+                  })}
+                </Text>
+              )}
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              tab={
+                <Badge
+                  count={
+                    messages.filter(function (m) {
+                      return m.type === 'system' && !m.read;
+                    }).length
+                  }
+                  overflowCount={99}
+                >
+                  系统消息
+                </Badge>
+              }
+              key="system"
+            >
+              {!!(
+                filteredMessages.filter(function (m) {
+                  return m.type === 'system';
+                }).length === 0
+              ) && <Empty description="暂无系统消息" />}
+              {!(
+                filteredMessages.filter(function (m) {
+                  return m.type === 'system';
+                }).length === 0
+              ) && (
+                <Text>
+                  {filteredMessages
+                    .filter(function (m) {
+                      return m.type === 'system';
+                    })
+                    .map(function (message) {
+                      return messageCard(message);
+                    })}
+                </Text>
+              )}
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              tab={
+                <Badge
+                  count={
+                    messages.filter(function (m) {
+                      return m.type === 'notice' && !m.read;
+                    }).length
+                  }
+                  overflowCount={99}
+                >
+                  通知公告
+                </Badge>
+              }
+              key="notice"
+            >
+              {!!(
+                filteredMessages.filter(function (m) {
+                  return m.type === 'notice';
+                }).length === 0
+              ) && <Empty description="暂无通知公告" />}
+              {!(
+                filteredMessages.filter(function (m) {
+                  return m.type === 'notice';
+                }).length === 0
+              ) && (
+                <Text>
+                  {filteredMessages
+                    .filter(function (m) {
+                      return m.type === 'notice';
+                    })
+                    .map(function (message) {
+                      return messageCard(message);
+                    })}
+                </Text>
+              )}
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              tab={
+                <Badge
+                  count={
+                    messages.filter(function (m) {
+                      return m.type === 'todo' && !m.read;
+                    }).length
+                  }
+                  overflowCount={99}
+                >
+                  待办事项
+                </Badge>
+              }
+              key="todo"
+            >
+              {!!(
+                filteredMessages.filter(function (m) {
+                  return m.type === 'todo';
+                }).length === 0
+              ) && <Empty description="暂无待办事项" />}
+              {!(
+                filteredMessages.filter(function (m) {
+                  return m.type === 'todo';
+                }).length === 0
+              ) && (
+                <Text>
+                  {filteredMessages
+                    .filter(function (m) {
+                      return m.type === 'todo';
+                    })
+                    .map(function (message) {
+                      return messageCard(message);
+                    })}
+                </Text>
+              )}
+            </Tabs.TabPane>
+          </Tabs>
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;