@appthen/cli 1.2.11 → 1.2.13

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

@@ -0,0 +1,316 @@
+/**
+ * 赛博朋克用户列表
+ * 充满未来科技感的用户管理页面，采用霓虹配色和全息效果
+ *
+ * @type Page
+ * @route /cyberpunk-user-list-test112
+ * @screen 1920x1080 #0a0a0f
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  selectedUser?: any;
+  modalVisible?: boolean;
+  searchKeyword?: string;
+  statusFilter?: string;
+  users?: {
+    /* @example 1 */id?: number,
+    /* @example 霓虹行者 */name?: string,
+    /* @example neon@cyber.net */email?: string,
+    /* @example 管理员 */role?: string,
+    /* @example active */status?: string,
+    /* @example 99 */level?: number,
+    /* @example https://api.dicebear.com/7.x/bottts/svg?seed=neon */avatar?: string,
+    /* @example 2077-01-15 */joinDate?: string,
+    /* @example 2077-12-01 23:45:12 */lastLogin?: string,
+  }[];
+  loading?: boolean;
+  cyberMode?: boolean;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    selectedUser: null,
+    modalVisible: false,
+    searchKeyword: '',
+    statusFilter: 'all',
+    users: [
+      {
+        id: 1,
+        name: '霓虹行者',
+        email: 'neon@cyber.net',
+        role: '管理员',
+        status: 'active',
+        level: 99,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=neon',
+        joinDate: '2077-01-15',
+        lastLogin: '2077-12-01 23:45:12',
+      },
+      {
+        id: 2,
+        name: '数据幽灵',
+        email: 'ghost@cyber.net',
+        role: '开发者',
+        status: 'active',
+        level: 87,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=ghost',
+        joinDate: '2077-03-22',
+        lastLogin: '2077-12-01 22:30:45',
+      },
+      {
+        id: 3,
+        name: '赛博黑客',
+        email: 'hacker@cyber.net',
+        role: '操作员',
+        status: 'warning',
+        level: 72,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=hacker',
+        joinDate: '2077-05-10',
+        lastLogin: '2077-11-30 18:20:33',
+      },
+      {
+        id: 4,
+        name: '量子行者',
+        email: 'quantum@cyber.net',
+        role: '开发者',
+        status: 'active',
+        level: 95,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=quantum',
+        joinDate: '2077-02-28',
+        lastLogin: '2077-12-01 21:15:27',
+      },
+      {
+        id: 5,
+        name: '暗影猎手',
+        email: 'shadow@cyber.net',
+        role: '操作员',
+        status: 'offline',
+        level: 65,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=shadow',
+        joinDate: '2077-06-15',
+        lastLogin: '2077-11-25 10:45:00',
+      },
+      {
+        id: 6,
+        name: '网络守护者',
+        email: 'guardian@cyber.net',
+        role: '管理员',
+        status: 'active',
+        level: 91,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=guardian',
+        joinDate: '2077-01-08',
+        lastLogin: '2077-12-01 23:50:18',
+      },
+      {
+        id: 7,
+        name: '代码刺客',
+        email: 'assassin@cyber.net',
+        role: '开发者',
+        status: 'active',
+        level: 83,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=assassin',
+        joinDate: '2077-04-12',
+        lastLogin: '2077-12-01 20:10:55',
+      },
+      {
+        id: 8,
+        name: '数字浪人',
+        email: 'ronin@cyber.net',
+        role: '操作员',
+        status: 'warning',
+        level: 58,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=ronin',
+        joinDate: '2077-07-20',
+        lastLogin: '2077-11-28 14:30:22',
+      },
+    ],
+    loading: false,
+    cyberMode: true,
+  };
+
+  handleView(user) {
+    this.setState({
+      selectedUser: user,
+      modalVisible: true,
+    });
+  }
+
+  handleEdit(user) {
+    this.utils.showToast(`编辑用户: ${user.name}`);
+  }
+
+  handleDelete(user) {
+    this.utils.showToast(`删除用户: ${user.name}`);
+  }
+
+  handleAdd() {
+    this.utils.showToast('添加新用户');
+  }
+
+  toggleCyberMode() {
+    this.setState({
+      cyberMode: !this.state.cyberMode,
+    });
+  }
+
+  closeModal() {
+    this.setState({
+      modalVisible: false,
+    });
+  }
+
+  render() {
+    return (
+      <Page style={styles.container}>
+        <View style={styles.scanlines} />
+        <View style={styles.grid} />
+        <View style={styles.particles} />
+        <View style={styles.header}>
+          <View style={styles.headerLeft}>
+            <Text style={styles.title}>用户管理</Text>
+            <Text style={styles.subtitle}>USER MANAGEMENT SYSTEM</Text>
+          </View>
+          <View style={styles.headerRight}>
+            <Button
+              style={styles.cyberButton}
+              onClick={() => this.toggleCyberMode()}
+            >
+              <Text style={styles.buttonText}>
+                {this.state.cyberMode ? '关闭特效' : '开启特效'}
+              </Text>
+            </Button>
+            <Button
+              style={[styles.cyberButton, styles.primaryButton]}
+              onClick={() => this.handleAdd()}
+            >
+              <Text style={styles.buttonText}>+ 新增用户</Text>
+            </Button>
+          </View>
+        </View>
+        <View style={styles.mainContent}>
+          <ProTable
+            columns={this.columns}
+            dataSource={this.state.users}
+            rowKey="id"
+            loading={this.state.loading}
+            pagination={{
+              pageSize: 10,
+              showSizeChanger: true,
+              showQuickJumper: true,
+            }}
+            rowClassName={record =>
+              record.status === 'offline' ? styles.offlineRow : ''
+            }
+            toolBarRender={() => (
+              <Space>
+                <Text style={styles.totalText}>
+                  总计:{this.state.users?.length}位用户
+                </Text>
+              </Space>
+            )}
+            toolBarRenderOpen={true}
+            style={styles.tableContainer}
+            headerStyle={styles.tableHeader}
+          />
+        </View>
+        {!!this.state.modalVisible && (
+          <View style={styles.modalOverlay} onClick={() => this.closeModal()}>
+            <View style={styles.modal} onClick={e => e.stopPropagation()}>
+              <View style={styles.modalHeader}>
+                <Text style={styles.modalTitle}>用户详情</Text>
+                <Button
+                  style={styles.closeButton}
+                  onClick={() => this.closeModal()}
+                >
+                  <Text style={styles.closeButtonText}>✕</Text>
+                </Button>
+              </View>
+              <View style={styles.modalContent}>
+                <View style={styles.modalAvatarSection}>
+                  <Avatar
+                    src={this.state.selectedUser?.avatar}
+                    size={80}
+                    style={styles.modalAvatar}
+                  />
+                  <Text style={styles.modalUserName}>
+                    {this.state.selectedUser?.name}
+                  </Text>
+                  <Tag color="#ff00ff" style={styles.modalRoleTag}>
+                    <Text>{this.state.selectedUser?.role}</Text>
+                  </Tag>
+                </View>
+                <View style={styles.modalInfoGrid}>
+                  <View style={styles.infoItem}>
+                    <Text style={styles.infoLabel}>邮箱</Text>
+                    <Text style={styles.infoValue}>
+                      {this.state.selectedUser?.email}
+                    </Text>
+                  </View>
+                  <View style={styles.infoItem}>
+                    <Text style={styles.infoLabel}>等级</Text>
+                    <Text style={styles.infoValue}>
+                      LV.{this.state.selectedUser?.level}
+                    </Text>
+                  </View>
+                  <View style={styles.infoItem}>
+                    <Text style={styles.infoLabel}>状态</Text>
+                    <Text
+                      style={[
+                        styles.infoValue,
+                        styles[
+                          'infoValue' +
+                            this.state.selectedUser?.status
+                              .charAt(0)
+                              .toUpperCase() +
+                            this.state.selectedUser?.status.slice(1)
+                        ],
+                      ]}
+                    >
+                      {this.state.selectedUser?.status === 'active'
+                        ? '在线'
+                        : this.state.selectedUser?.status === 'warning'
+                        ? '警告'
+                        : '离线'}
+                    </Text>
+                  </View>
+                  <View style={styles.infoItem}>
+                    <Text style={styles.infoLabel}>加入时间</Text>
+                    <Text style={styles.infoValue}>
+                      {this.state.selectedUser?.joinDate}
+                    </Text>
+                  </View>
+                  <View style={styles.infoItem}>
+                    <Text style={styles.infoLabel}>最后登录</Text>
+                    <Text style={styles.infoValue}>
+                      {this.state.selectedUser?.lastLogin}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+              <View style={styles.modalFooter}>
+                <Button
+                  style={[styles.cyberButton, styles.modalButton]}
+                  onClick={() => this.closeModal()}
+                >
+                  <Text style={styles.buttonText}>关闭</Text>
+                </Button>
+              </View>
+            </View>
+          </View>
+        )}
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,334 @@
+/**
+ * 仪表板 V2
+ * 数据可视化仪表板
+ *
+ * @type Page
+ * @route /dashboard/v2
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  dashboardId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  statistics?: any[];
+  loading?: boolean;
+  dateRange?: any[];
+  selectedMetric?: string;
+  refreshInterval?: number;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    statistics: [
+      {
+        id: 1,
+        name: '今日访问',
+        value: 12586,
+        trend: 12,
+        icon: '👀',
+        color: 'blue',
+      },
+      {
+        id: 2,
+        name: '新增用户',
+        value: 328,
+        trend: 8,
+        icon: '👤',
+        color: 'green',
+      },
+      {
+        id: 3,
+        name: '订单数',
+        value: 156,
+        trend: -5,
+        icon: '📦',
+        color: 'orange',
+      },
+      {
+        id: 4,
+        name: '收入',
+        value: 45680,
+        trend: 15,
+        icon: '💰',
+        color: 'red',
+      },
+    ],
+    loading: false,
+    dateRange: [
+      new Date().toISOString().split('T')[0],
+      new Date().toISOString().split('T')[0],
+    ],
+    selectedMetric: 'all',
+    refreshInterval: 30,
+  };
+
+  handleDateRangeChange(dates) {
+    this.setState({
+      dateRange: dates,
+    });
+  }
+
+  handleMetricChange(metric) {
+    this.setState({
+      selectedMetric: metric,
+    });
+  }
+
+  handleRefresh() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+  }
+
+  render() {
+    // 💀 死亡：变量声明 - 解构赋值
+    const { statistics, loading, dateRange, selectedMetric, refreshInterval } =
+      this.state;
+
+    // 💀 死亡：变量声明 - 计算属性
+    // 💀 死亡：变量声明 - 计算属性
+    const totalTrend = statistics.reduce((sum, stat) => sum + stat.trend, 0);
+    const avgTrend = Math.round(totalTrend / statistics.length);
+    const positiveCount = statistics.filter(s => s.trend > 0).length;
+    const negativeCount = statistics.filter(s => s.trend < 0).length;
+
+    // 💀 死亡：变量声明 - 过滤后的数据
+    // 💀 死亡：变量声明 - 过滤后的数据
+    const filteredStats =
+      selectedMetric === 'all'
+        ? statistics
+        : statistics.filter(s => s.id.toString() === selectedMetric);
+
+    // 💀 死亡：变量声明 - 日期范围文本
+    // 💀 死亡：变量声明 - 日期范围文本
+    const dateRangeText =
+      dateRange?.length === 2
+        ? `${dateRange[0]} 至 ${dateRange[1]}`
+        : '请选择日期范围';
+
+    // 💀 死亡：if 语句 - 条件渲染
+    // 💀 死亡：if 语句 - 条件渲染
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+
+    // 💀 死亡：变量声明 - 配置选项
+    // 💀 死亡：变量声明 - 配置选项
+    const metricOptions = [
+      {
+        label: '全部指标',
+        value: 'all',
+      },
+      {
+        label: '访问量',
+        value: '1',
+      },
+      {
+        label: '新增用户',
+        value: '2',
+      },
+      {
+        label: '订单数',
+        value: '3',
+      },
+      {
+        label: '收入',
+        value: '4',
+      },
+    ];
+
+    // 💀 死亡：变量声明 - 颜色配置
+    // 💀 死亡：变量声明 - 颜色配置
+    const trendColors = {
+      positive: '#52c41a',
+      negative: '#ff4d4f',
+      neutral: '#8c8c8c',
+    };
+
+    // 💀 死亡：变量声明 - JSX 片段函数
+    // 💀 死亡：变量声明 - JSX 片段函数
+    const statCard = stat => (
+      <Card key={stat.id} className="hover:shadow-lg transition-shadow">
+        <View className="flex items-center justify-between">
+          <View>
+            <Text className="text-4xl">{stat.icon}</Text>
+            <Text className="block text-gray-500 mt-2">{stat.name}</Text>
+            <Text className="text-2xl font-bold mt-1">
+              {stat.value.toLocaleString()}
+            </Text>
+          </View>
+          <View>
+            <Tag color={stat.trend > 0 ? 'green' : 'red'}>
+              {stat.trend > 0 ? '+' : ''}
+              {stat.trend}%
+            </Tag>
+          </View>
+        </View>
+      </Card>
+    );
+
+    // 💀 死亡：变量声明 - 进度数据
+    // 💀 死亡：变量声明 - 进度数据
+    const progressData = [
+      {
+        name: '目标完成度',
+        percent: 75,
+        color: '#1890ff',
+      },
+      {
+        name: '任务完成率',
+        percent: 60,
+        color: '#52c41a',
+      },
+      {
+        name: '用户满意度',
+        percent: 85,
+        color: '#faad14',
+      },
+    ];
+
+    // 💀 死亡：变量声明 - 快捷日期选项
+    // 💀 死亡：变量声明 - 快捷日期选项
+    const quickDateOptions = [
+      {
+        label: '今天',
+        value: 'today',
+      },
+      {
+        label: '昨天',
+        value: 'yesterday',
+      },
+      {
+        label: '最近7天',
+        value: '7days',
+      },
+      {
+        label: '最近30天',
+        value: '30days',
+      },
+    ];
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <Text className="text-2xl font-bold text-[#1f2937]">仪表板 V2</Text>
+          <Text className="text-[#6b7280] text-sm mt-[4px]">
+            数据可视化仪表板
+          </Text>
+        </View>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <View className="gap-4 flex items-center">
+              <DatePicker.RangePicker
+                value={dateRange}
+                onChange={dates => this.handleDateRangeChange(dates)}
+              />
+              <Select
+                value={selectedMetric}
+                onChange={value => this.handleMetricChange(value)}
+                placeholder="选择指标"
+                className=""
+              >
+                {metricOptions.map((opt, index) => (
+                  <Select.Option key={opt.value} value={opt.value}>
+                    <Text>{opt.label}</Text>
+                  </Select.Option>
+                ))}
+              </Select>
+            </View>
+            <View className="gap-2 flex items-center">
+              <Text className="text-[#6b7280] text-sm">
+                自动刷新:{refreshInterval}秒
+              </Text>
+              <Button onClick={() => this.handleRefresh()}>刷新</Button>
+              <Button type="primary">导出报表</Button>
+            </View>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <Row gutter={16}>
+            {filteredStats.map((stat, index) => (
+              <Col span={6} key={stat.id}>
+                <Text>{statCard(stat)}</Text>
+              </Col>
+            ))}
+          </Row>
+        </Card>
+        <Card className="mb-[24px]">
+          <Text className="block text-lg font-bold mb-[16px]">趋势分析</Text>
+          <Row gutter={16}>
+            <Col span={8}>
+              <Card className="bg-[var(--blue-50)]">
+                <Statistic
+                  title="正向指标"
+                  value={positiveCount}
+                  suffix={`/ ${statistics.length}`}
+                  valueStyle={{ color: trendColors.positive }}
+                />
+              </Card>
+            </Col>
+            <Col span={8}>
+              <Card className="bg-[var(--red-50)]">
+                <Statistic
+                  title="负向指标"
+                  value={negativeCount}
+                  suffix={`/ ${statistics.length}`}
+                  valueStyle={{ color: trendColors.negative }}
+                />
+              </Card>
+            </Col>
+            <Col span={8}>
+              <Card className="bg-[var(--gray-50)]">
+                <Statistic
+                  title="平均趋势"
+                  value={avgTrend}
+                  suffix="%"
+                  valueStyle={{ color: trendColors.neutral }}
+                />
+              </Card>
+            </Col>
+          </Row>
+        </Card>
+        <Card className="mb-[24px]">
+          <Text className="block text-lg font-bold mb-[16px]">目标进度</Text>
+          <View className="space-y-4">
+            {progressData.map((item, index) => (
+              <View key={index}>
+                <View className="flex justify-between mb-[8px]">
+                  <Text>{item.name}</Text>
+                  <Text>{item.percent}%</Text>
+                </View>
+                <Progress percent={item.percent} strokeColor={item.color} />
+              </View>
+            ))}
+          </View>
+        </Card>
+        <Card>
+          <Text className="block text-lg font-bold mb-[16px]">快捷日期</Text>
+          <View className="gap-2 flex">
+            {quickDateOptions.map((opt, index) => (
+              <Button key={opt.value} onClick={() => console.log(opt.value)}>
+                <Text>{opt.label}</Text>
+              </Button>
+            ))}
+          </View>
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;