@appthen/cli 1.2.11 → 1.2.12

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

@@ -0,0 +1,395 @@
+/**
+ * 项目时间线
+ * 项目进度跟踪和时间线展示
+ *
+ * @type Page
+ * @route /timeline
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  projectId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  events?: {
+    /* @example 1 */id?: number,
+    /* @example milestone */type?: string,
+    /* @example 项目启动 */title?: string,
+    /* @example 2024-01-01 */date?: string,
+    /* @example completed */status?: string,
+    /* @example 项目正式启动，团队组建完成 */description?: string,
+    /* @example 项目经理 */assignee?: string,
+  }[];
+  loading?: boolean;
+  selectedDate?: string;
+  viewMode?: string;
+  currentProject?: {
+    /* @example 1 */id?: number,
+    /* @example 电商平台开发 */name?: string,
+    /* @example 45 */progress?: number,
+    /* @example 2024-01-01 */startDate?: string,
+    /* @example 2024-01-30 */endDate?: string,
+  };
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    events: [
+      {
+        id: 1,
+        type: 'milestone',
+        title: '项目启动',
+        date: '2024-01-01',
+        status: 'completed',
+        description: '项目正式启动，团队组建完成',
+        assignee: '项目经理',
+      },
+      {
+        id: 2,
+        type: 'task',
+        title: '需求分析',
+        date: '2024-01-05',
+        status: 'completed',
+        description: '完成需求调研和分析文档',
+        assignee: '产品经理',
+      },
+      {
+        id: 3,
+        type: 'task',
+        title: 'UI设计',
+        date: '2024-01-10',
+        status: 'completed',
+        description: '完成UI设计和交互原型',
+        assignee: 'UI设计师',
+      },
+      {
+        id: 4,
+        type: 'task',
+        title: '前端开发',
+        date: '2024-01-15',
+        status: 'inProgress',
+        description: '前端页面开发',
+        assignee: '前端工程师',
+      },
+      {
+        id: 5,
+        type: 'task',
+        title: '后端开发',
+        date: '2024-01-15',
+        status: 'inProgress',
+        description: '后端接口开发',
+        assignee: '后端工程师',
+      },
+      {
+        id: 6,
+        type: 'milestone',
+        title: '中期评审',
+        date: '2024-01-20',
+        status: 'pending',
+        description: '项目中期评审和调整',
+        assignee: '项目经理',
+      },
+      {
+        id: 7,
+        type: 'task',
+        title: '测试',
+        date: '2024-01-25',
+        status: 'pending',
+        description: '系统测试和bug修复',
+        assignee: '测试工程师',
+      },
+      {
+        id: 8,
+        type: 'milestone',
+        title: '项目交付',
+        date: '2024-01-30',
+        status: 'pending',
+        description: '项目正式上线',
+        assignee: '项目经理',
+      },
+    ],
+    loading: false,
+    selectedDate: '[object Object]',
+    viewMode: 'timeline',
+    currentProject: {
+      id: 1,
+      name: '电商平台开发',
+      progress: 45,
+      startDate: '2024-01-01',
+      endDate: '2024-01-30',
+    },
+  };
+
+  handleDateChange(date) {
+    this.setState({
+      selectedDate: date,
+    });
+  }
+
+  handleViewModeChange(mode) {
+    this.setState({
+      viewMode: mode,
+    });
+  }
+
+  addEvent(type) {
+    console.log('添加事件:', type);
+  }
+
+  updateEvent(eventId, updates) {
+    this.setState({
+      events: this.state.events.map(e => {
+        if (e.id === eventId) {
+          return {
+            ...e,
+            ...updates,
+          };
+        }
+        return e;
+      }),
+    });
+  }
+
+  deleteEvent(eventId) {
+    this.setState({
+      events: this.state.events.filter(e => e.id !== eventId),
+    });
+  }
+
+  render() {
+    // 💀 死亡：变量声明 - 解构赋值
+    const { events, loading, selectedDate, viewMode, currentProject } =
+      this.state;
+
+    // 💀 死亡：变量声明 - 计算完成进度
+    // 💀 死亡：变量声明 - 计算完成进度
+    const completedEvents = this.state.events.filter(
+      e => e.status === 'completed'
+    ).length;
+    const totalEvents = this.state.events.length;
+    const progress = Math.round((completedEvents / totalEvents) * 100);
+
+    // 💀 死亡：变量声明 - 按日期分组
+    // 💀 死亡：变量声明 - 按日期分组
+    const eventsByDate = this.state.events.reduce((acc, event) => {
+      const date = event.date;
+      if (!acc[date]) {
+        acc[date] = [];
+      }
+      acc[date].push(event);
+      return acc;
+    }, {});
+
+    // 💀 死亡：if 语句 - 条件渲染
+    // 💀 死亡：if 语句 - 条件渲染
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+
+    // 💀 死亡：变量声明 - 日期列表
+    // 💀 死亡：变量声明 - 日期列表
+    const dateList = Object.keys(eventsByDate).sort();
+
+    // 💀 死亡：变量声明 - 类型配置
+    // 💀 死亡：变量声明 - 类型配置
+    const typeConfig = {
+      milestone: {
+        color: 'red',
+        icon: '🎯',
+        label: '里程碑',
+      },
+      task: {
+        color: 'blue',
+        icon: '📋',
+        label: '任务',
+      },
+      review: {
+        color: 'orange',
+        icon: '👁️',
+        label: '评审',
+      },
+    };
+
+    // 💀 死亡：变量声明 - 状态配置
+    // 💀 死亡：变量声明 - 状态配置
+    const statusConfig = {
+      completed: {
+        color: 'green',
+        label: '已完成',
+      },
+      inProgress: {
+        color: 'blue',
+        label: '进行中',
+      },
+      pending: {
+        color: 'gray',
+        label: '待开始',
+      },
+    };
+
+    // 💀 死亡：变量声明 - JSX 片段
+    // 💀 死亡：变量声明 - JSX 片段
+    const eventCard = event => (
+      <Card
+        key={event.id}
+        className={`mb-3 ${
+          event.status === 'completed' ? 'border-green-500' : ''
+        }`}
+      >
+        <View className="flex items-start justify-between">
+          <View className="flex items-start gap-3">
+            <Text className="text-2xl">{typeConfig[event.type]?.icon}</Text>
+            <View>
+              <Text className="font-bold">{event.title}</Text>
+              <Text className="text-sm text-gray-500">{event.description}</Text>
+              <View className="flex items-center gap-2 mt-2">
+                <Tag color={statusConfig[event.status]?.color}>
+                  {statusConfig[event.status]?.label}
+                </Tag>
+                <Tag color={typeConfig[event.type]?.color}>
+                  {typeConfig[event.type]?.label}
+                </Tag>
+              </View>
+            </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]">
+          <View className="flex items-center justify-between">
+            <View>
+              <Text className="text-xl font-bold">{currentProject.name}</Text>
+              <Text className="text-[#6b7280]">
+                周期:{currentProject.startDate}至{currentProject.endDate}
+              </Text>
+            </View>
+            <View className="text-[var(--right)]">
+              <Text className="text-3xl font-bold text-[var(--blue-600)]">
+                {progress}%
+              </Text>
+              <Progress percent={progress} />
+            </View>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <View className="gap-4 grid grid-cols-4">
+            <View className="text-[var(--center)] p-[16px] bg-[var(--blue-50)] rounded">
+              <Text className="text-2xl font-bold text-[var(--blue-600)]">
+                {totalEvents}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                总事件
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--green-50)] rounded">
+              <Text className="text-2xl font-bold text-[var(--green-600)]">
+                {completedEvents}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                已完成
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--orange-50)] rounded">
+              <Text className="text-2xl font-bold text-[var(--orange-600)]">
+                {events.filter(e => e.status === 'inProgress').length}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                进行中
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--gray-50)] rounded">
+              <Text className="text-2xl font-bold text-[#4b5563]">
+                {events.filter(e => e.status === 'pending').length}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                待开始
+              </Text>
+            </View>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <View className="gap-4 flex items-center">
+              <Select
+                value={viewMode}
+                onChange={value => this.handleViewModeChange(value)}
+                className=""
+              >
+                <Select.Option value="timeline">时间线</Select.Option>
+                <Select.Option value="calendar">日历</Select.Option>
+                <Select.Option value="list">列表</Select.Option>
+              </Select>
+            </View>
+            <Button type="primary">+ 添加事件</Button>
+          </View>
+        </Card>
+        {!!(viewMode === 'timeline') && (
+          <Card>
+            <Timeline>
+              {events.map((event, index) => (
+                <Timeline.Item
+                  key={event.id}
+                  color={statusConfig[event.status]?.color}
+                  dot={typeConfig[event.type]?.icon}
+                >
+                  <View>
+                    <Text className="font-bold">{event.title}</Text>
+                    <Text className="block text-[#6b7280] text-sm">
+                      {event.date}
+                    </Text>
+                    <Text className="text-[#4b5563]">{event.description}</Text>
+                    <View className="gap-2 flex mt-[8px]">
+                      <Tag color={statusConfig[event.status]?.color}>
+                        <Text>{statusConfig[event.status]?.label}</Text>
+                      </Tag>
+                      <Tag>
+                        <Text>{event.assignee}</Text>
+                      </Tag>
+                    </View>
+                  </View>
+                </Timeline.Item>
+              ))}
+            </Timeline>
+          </Card>
+        )}
+        {!!(viewMode === 'list') && (
+          <Card>
+            {dateList.map((date, index) => (
+              <View key={date} className="mb-[24px]">
+                <Text className="block text-lg font-bold mb-[12px]">
+                  {date}
+                </Text>
+                {eventsByDate[date].map((event, index) => (
+                  <Text>{eventCard(event)}</Text>
+                ))}
+              </View>
+            ))}
+          </Card>
+        )}
+        {!!(viewMode === 'calendar') && (
+          <Card>
+            <Calendar />
+          </Card>
+        )}
+      </Page>
+    );
+  }
+}
+
+export default Document;