@appthen/cli 1.2.11 → 1.2.12

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

@@ -0,0 +1,298 @@
+/**
+ * 数据报表
+ * 数据统计和分析报表
+ *
+ * @type Page
+ * @route /report
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  reportType?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  reportData?: {
+    /* @example 1 */id?: number,
+    /* @example 2024-01-15 */date?: string,
+    /* @example 电子产品 */category?: string,
+    /* @example 12500 */revenue?: number,
+    /* @example 45 */orders?: number,
+    /* @example 23 */users?: number,
+  }[];
+  summary?: {
+    totalRevenue?: number,
+    totalOrders?: number,
+    totalUsers?: number,
+    conversionRate?: number,
+  };
+  loading?: boolean;
+  dateRange?: string;
+  reportType?: string;
+  selectedCategory?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    reportData: [
+      {
+        id: 1,
+        date: '2024-01-15',
+        category: '电子产品',
+        revenue: 12500,
+        orders: 45,
+        users: 23,
+      },
+      {
+        id: 2,
+        date: '2024-01-16',
+        category: '电子产品',
+        revenue: 15800,
+        orders: 52,
+        users: 28,
+      },
+      {
+        id: 3,
+        date: '2024-01-17',
+        category: '服装',
+        revenue: 9800,
+        orders: 38,
+        users: 19,
+      },
+      {
+        id: 4,
+        date: '2024-01-18',
+        category: '食品',
+        revenue: 6200,
+        orders: 85,
+        users: 42,
+      },
+      {
+        id: 5,
+        date: '2024-01-19',
+        category: '电子产品',
+        revenue: 18900,
+        orders: 67,
+        users: 35,
+      },
+    ],
+    summary: {
+      totalRevenue: 63200,
+      totalOrders: 287,
+      totalUsers: 147,
+      conversionRate: 52.3,
+    },
+    loading: false,
+    dateRange: '2024-01-01,2024-01-31',
+    reportType: 'daily',
+    selectedCategory: 'all',
+  };
+
+  handleDateChange(dates) {
+    this.setState({
+      dateRange: dates,
+    });
+  }
+
+  calculateTotal(data, field) {
+    return data.reduce((sum, item) => sum + (item[field] || 0), 0);
+  }
+
+  formatCurrency(amount) {
+    return `¥${amount.toLocaleString()}`;
+  }
+
+  getCategoryColor(category) {
+    const colors = {
+      电子产品: 'blue',
+      服装: 'green',
+      食品: 'orange',
+      家居: 'purple',
+    };
+    return colors[category] || 'default';
+  }
+
+  handleExport(format) {
+    console.log('导出报表:', format, this.state.reportData);
+  }
+
+  render() {
+    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>
+        <Row gutter={16} className="mb-[24px]">
+          <Col span={6}>
+            <Card>
+              <Statistic
+                title="总收入"
+                value={this.state.summary.totalRevenue}
+                prefix="¥"
+                precision={2}
+              />
+            </Card>
+          </Col>
+          <Col span={6}>
+            <Card>
+              <Statistic
+                title="总订单数"
+                value={this.state.summary.totalOrders}
+                suffix="单"
+              />
+            </Card>
+          </Col>
+          <Col span={6}>
+            <Card>
+              <Statistic
+                title="总用户数"
+                value={this.state.summary.totalUsers}
+                suffix="人"
+              />
+            </Card>
+          </Col>
+          <Col span={6}>
+            <Card>
+              <Statistic
+                title="转化率"
+                value={this.state.summary.conversionRate}
+                suffix="%"
+                precision={2}
+              />
+            </Card>
+          </Col>
+        </Row>
+        <Card className="mb-[24px]">
+          <View className="gap-4 flex items-center">
+            <View>
+              <Text className="block mb-[8px]">日期范围</Text>
+              <DatePicker.RangePicker
+                value={this.state.dateRange}
+                onChange={dates => this.handleDateChange(dates)}
+                className=""
+              />
+            </View>
+            <View>
+              <Text className="block mb-[8px]">报表类型</Text>
+              <Select
+                value={this.state.reportType}
+                onChange={value =>
+                  this.setState({
+                    reportType: value,
+                  })
+                }
+                className=""
+              >
+                <Select.Option value="daily">日报表</Select.Option>
+                <Select.Option value="weekly">周报表</Select.Option>
+                <Select.Option value="monthly">月报表</Select.Option>
+              </Select>
+            </View>
+            <View>
+              <Text className="block mb-[8px]">分类筛选</Text>
+              <Select
+                value={this.state.selectedCategory}
+                onChange={value =>
+                  this.setState({
+                    selectedCategory: value,
+                  })
+                }
+                className=""
+              >
+                <Select.Option value="all">全部</Select.Option>
+                <Select.Option value="电子产品">电子产品</Select.Option>
+                <Select.Option value="服装">服装</Select.Option>
+                <Select.Option value="食品">食品</Select.Option>
+                <Select.Option value="家居">家居</Select.Option>
+              </Select>
+            </View>
+            <View className="ml-[auto]">
+              <Button type="default" onClick={() => this.handleExport('excel')}>
+                导出 Excel
+              </Button>
+              <Button
+                type="primary"
+                onClick={() => this.handleExport('pdf')}
+                className="ml-[8px]"
+              >
+                导出 PDF
+              </Button>
+            </View>
+          </View>
+        </Card>
+        <Card>
+          <Table
+            loading={this.state.loading}
+            columns={[
+              { title: '日期', dataIndex: 'date', key: 'date' },
+              {
+                title: '分类',
+                dataIndex: 'category',
+                key: 'category',
+                render: category => (
+                  <Tag color={this.getCategoryColor(category)}>
+                    <Text>{category}</Text>
+                  </Tag>
+                ),
+              },
+              {
+                title: '收入',
+                dataIndex: 'revenue',
+                key: 'revenue',
+                render: revenue => <Text>{this.formatCurrency(revenue)}</Text>,
+              },
+              {
+                title: '订单数',
+                dataIndex: 'orders',
+                key: 'orders',
+                render: orders => <Text>{orders}单</Text>,
+              },
+              {
+                title: '用户数',
+                dataIndex: 'users',
+                key: 'users',
+                render: users => <Text>{users}人</Text>,
+              },
+              {
+                title: '操作',
+                key: 'action',
+                render: (text, record) => (
+                  <Button
+                    type="link"
+                    onClick={() => console.log('查看详情:', record)}
+                  >
+                    查看详情
+                  </Button>
+                ),
+              },
+            ]}
+            dataSource={this.state.reportData?.filter(function (item) {
+              if (this.state.selectedCategory === 'all') return true;
+              return item?.category === this.state.selectedCategory;
+            })}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+        {!!this.state.loading && <View className="p-[24px]">加载中...</View>}
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,317 @@
+/**
+ * 数据统计
+ * 数据分析和统计展示
+ *
+ * @type Page
+ * @route /statistics
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  userId?: number;
+  startDate?: string;
+  endDate?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  statistics?: {
+    /* @example 1 */id?: number,
+    /* @example 总访问量 */name?: string,
+    /* @example 125860 */value?: number,
+    /* @example +12% */trend?: string,
+    /* @example up */status?: string,
+    /* @example 流量 */category?: string,
+  }[];
+  loading?: boolean;
+  chartData?: string[];
+  timeRange?: string;
+  selectedMetric?: string;
+  showComparison?: boolean;
+  summary?: {
+    totalUsers?: number,
+    activeUsers?: number,
+    conversionRate?: number,
+    revenue?: number,
+  };
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    statistics: [
+      {
+        id: 1,
+        name: '总访问量',
+        value: 125860,
+        trend: '+12%',
+        status: 'up',
+        category: '流量',
+      },
+      {
+        id: 2,
+        name: '独立访客',
+        value: 45230,
+        trend: '+8%',
+        status: 'up',
+        category: '流量',
+      },
+      {
+        id: 3,
+        name: '转化率',
+        value: 3.24,
+        trend: '+0.5%',
+        status: 'up',
+        category: '转化',
+      },
+      {
+        id: 4,
+        name: '客单价',
+        value: 286.5,
+        trend: '-2.3%',
+        status: 'down',
+        category: '转化',
+      },
+      {
+        id: 5,
+        name: '订单量',
+        value: 856,
+        trend: '+15%',
+        status: 'up',
+        category: '订单',
+      },
+      {
+        id: 6,
+        name: '退货率',
+        value: 2.8,
+        trend: '-0.5%',
+        status: 'up',
+        category: '订单',
+      },
+    ],
+    loading: false,
+    chartData: [],
+    timeRange: '7d',
+    selectedMetric: 'all',
+    showComparison: true,
+    summary: {
+      totalUsers: 45230,
+      activeUsers: 32150,
+      conversionRate: 3.24,
+      revenue: 245680.5,
+    },
+  };
+
+  handleTimeRangeChange(range) {
+    this.setState({
+      timeRange: range,
+    });
+  }
+
+  handleMetricChange(metric) {
+    this.setState({
+      selectedMetric: metric,
+    });
+  }
+
+  toggleComparison() {
+    this.setState({
+      showComparison: !this.state.showComparison,
+    });
+  }
+
+  refreshData() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+  }
+
+  exportReport(format) {
+    console.log('导出报表:', format);
+  }
+
+  render() {
+    // 💀 死亡：变量声明 - 解构赋值
+    const {
+      statistics,
+      loading,
+      timeRange,
+      selectedMetric,
+      showComparison,
+      summary,
+    } = this.state;
+
+    // 💀 死亡：变量声明 - 计算属性
+    // 💀 死亡：变量声明 - 计算属性
+    const totalVisits =
+      this.state.statistics.find(s => s.name === '总访问量')?.value || 0;
+    const totalRevenue =
+      this.state.statistics.find(s => s.name === '客单价')?.value *
+        this.state.statistics.find(s => s.name === '订单量')?.value || 0;
+
+    // 💀 死亡：变量声明 - 过滤后的数据
+    // 💀 死亡：变量声明 - 过滤后的数据
+    const filteredStats = this.state.statistics.filter(stat => {
+      if (selectedMetric === 'all') return true;
+      return stat.category === selectedMetric;
+    });
+
+    // 💀 死亡：if 语句 - 条件渲染
+    // 💀 死亡：if 语句 - 条件渲染
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+
+    // 💀 死亡：变量声明 - JSX 片段
+    // 💀 死亡：变量声明 - JSX 片段
+    const statCard = stat => (
+      <Card className="hover:shadow-lg transition-shadow">
+        <View className="flex justify-between items-start">
+          <View>
+            <Text className="text-gray-500 text-sm">{stat.name}</Text>
+            <Text className="text-2xl font-bold mt-1">
+              {stat.value.toLocaleString()}
+            </Text>
+          </View>
+          <Tag color={stat.status === 'up' ? 'green' : 'red'}>{stat.trend}</Tag>
+        </View>
+      </Card>
+    );
+
+    // 💀 死亡：变量声明 - 指标类型
+    // 💀 死亡：变量声明 - 指标类型
+    const metricTypes = ['all', '流量', '转化', '订单'];
+    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]">
+          <View className="flex items-center justify-between">
+            <View className="gap-4 flex items-center">
+              <Select
+                value={timeRange}
+                onChange={value => this.handleTimeRangeChange(value)}
+                className=""
+              >
+                <Select.Option value="7d">最近7天</Select.Option>
+                <Select.Option value="30d">最近30天</Select.Option>
+                <Select.Option value="90d">最近90天</Select.Option>
+                <Select.Option value="custom">自定义</Select.Option>
+              </Select>
+              <Select
+                value={selectedMetric}
+                onChange={value => this.handleMetricChange(value)}
+                className=""
+              >
+                {metricTypes.map((type, index) => (
+                  <Select.Option key={type} value={type}>
+                    {type === 'all' ? '全部指标' : type}
+                  </Select.Option>
+                ))}
+              </Select>
+            </View>
+            <View className="gap-2 flex items-center">
+              <Button onClick={() => this.toggleComparison()}>
+                {showComparison ? '隐藏对比' : '显示对比'}
+              </Button>
+              <Button onClick={() => this.refreshData()}>刷新数据</Button>
+              <Button type="primary" onClick={() => this.exportReport('excel')}>
+                导出报表
+              </Button>
+            </View>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <Row gutter={16}>
+            <Col span={6}>
+              <Statistic
+                title="总用户数"
+                value={summary?.totalUsers}
+                suffix="人"
+                valueStyle={{ color: '#3f8600' }}
+              />
+            </Col>
+            <Col span={6}>
+              <Statistic
+                title="活跃用户"
+                value={summary?.activeUsers}
+                suffix="人"
+                valueStyle={{ color: '#cf1322' }}
+              />
+            </Col>
+            <Col span={6}>
+              <Statistic
+                title="转化率"
+                value={summary?.conversionRate}
+                suffix="%"
+                precision={2}
+              />
+            </Col>
+            <Col span={6}>
+              <Statistic
+                title="总收入"
+                value={summary?.revenue}
+                prefix="¥"
+                precision={2}
+              />
+            </Col>
+          </Row>
+        </Card>
+        <Card className="mb-[24px]">
+          <Row gutter={16}>
+            {filteredStats.map((stat, index) => (
+              <Col span={8} key={stat.id}>
+                <Text>{statCard(stat)}</Text>
+              </Col>
+            ))}
+          </Row>
+        </Card>
+        <Card className="mb-[24px]">
+          <Text className="block text-lg font-bold mb-[16px]">
+            目标达成情况
+          </Text>
+          <View className="space-y-4">
+            {statistics.map((stat, index) => (
+              <View key={stat.id}>
+                <View className="flex justify-between mb-[8px]">
+                  <Text>{stat.name}</Text>
+                  <Text>{stat.trend}</Text>
+                </View>
+                <Progress
+                  percent={Math.random() * 100}
+                  status={stat.status === 'up' ? 'active' : 'exception'}
+                />
+              </View>
+            ))}
+          </View>
+        </Card>
+        {!!showComparison && (
+          <Card>
+            <Text className="block text-lg font-bold mb-[16px]">趋势对比</Text>
+            <View className="h-[400px] flex items-center justify-center bg-[#f3f4f6]">
+              <Text className="text-[#9ca3af]">
+                图表区域 - 实际项目中可集成 ECharts
+              </Text>
+            </View>
+          </Card>
+        )}
+      </Page>
+    );
+  }
+}
+
+export default Document;