@appthen/cli 1.2.11 → 1.2.13

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

@@ -0,0 +1,467 @@
+/**
+ * 任务管理
+ * 项目任务跟踪和管理
+ *
+ * @type Page
+ * @route /tasks
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  projectId?: number;
+  taskId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  tasks?: {
+    /* @example 1 */id?: number,
+    /* @example 用户登录功能开发 */title?: string,
+    /* @example 进行中 */status?: string,
+    /* @example high */priority?: string,
+    /* @example 张三 */assignee?: string,
+    /* @example 60 */progress?: number,
+    /* @example 2024-01-20 */deadline?: string,
+    /* @example 4 */rating?: number,
+    tags?: string[],
+  }[];
+  loading?: boolean;
+  activeTab?: string;
+  filters?: {
+    status?: string,
+    priority?: string,
+    assignee?: string,
+  };
+  @Form({
+    setter: "JsonSetter"
+  })
+  selectedTaskIds?: string[];
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    tasks: [
+      {
+        id: 1,
+        title: '用户登录功能开发',
+        status: '进行中',
+        priority: 'high',
+        assignee: '张三',
+        progress: 60,
+        deadline: '2024-01-20',
+        rating: 4,
+        tags: ['前端', '登录'],
+      },
+      {
+        id: 2,
+        title: '订单系统优化',
+        status: '待开始',
+        priority: 'high',
+        assignee: '李四',
+        progress: 0,
+        deadline: '2024-01-25',
+        rating: 0,
+        tags: ['后端', '订单'],
+      },
+      {
+        id: 3,
+        title: '数据报表导出功能',
+        status: '进行中',
+        priority: 'medium',
+        assignee: '王五',
+        progress: 30,
+        deadline: '2024-01-22',
+        rating: 3,
+        tags: ['报表', '导出'],
+      },
+      {
+        id: 4,
+        title: '移动端适配',
+        status: '已完成',
+        priority: 'medium',
+        assignee: '赵六',
+        progress: 100,
+        deadline: '2024-01-15',
+        rating: 5,
+        tags: ['移动端', '适配'],
+      },
+      {
+        id: 5,
+        title: '权限管理模块',
+        status: '待审核',
+        priority: 'high',
+        assignee: '张三',
+        progress: 90,
+        deadline: '2024-01-18',
+        rating: 4,
+        tags: ['权限', '安全'],
+      },
+      {
+        id: 6,
+        title: 'API 接口文档',
+        status: '已完成',
+        priority: 'low',
+        assignee: '李四',
+        progress: 100,
+        deadline: '2024-01-12',
+        rating: 5,
+        tags: ['文档', 'API'],
+      },
+    ],
+    loading: false,
+    activeTab: 'all',
+    filters: { status: 'all', priority: 'all', assignee: 'all' },
+    selectedTaskIds: [],
+  };
+
+  handleTabChange(key) {
+    this.setState({
+      activeTab: key,
+    });
+  }
+
+  handleFilterChange(field, value) {
+    this.setState({
+      filters: {
+        ...this.state.filters,
+        [field]: value,
+      },
+    });
+  }
+
+  handleSelectTask(taskId, checked) {
+    if (checked) {
+      this.setState({
+        selectedTaskIds: [...this.state.selectedTaskIds, taskId],
+      });
+    } else {
+      this.setState({
+        selectedTaskIds: this.state.selectedTaskIds.filter(id => id !== taskId),
+      });
+    }
+  }
+
+  handleBatchDelete() {
+    this.setState({
+      tasks: this.state.tasks.filter(
+        t => !this.state.selectedTaskIds.includes(t.id)
+      ),
+      selectedTaskIds: [],
+    });
+  }
+
+  updateTaskProgress(taskId, progress) {
+    this.setState({
+      tasks: this.state.tasks.map(t => {
+        if (t.id === taskId) {
+          return {
+            ...t,
+            progress,
+          };
+        }
+        return t;
+      }),
+    });
+  }
+
+  rateTask(taskId, rating) {
+    this.setState({
+      tasks: this.state.tasks.map(t => {
+        if (t.id === taskId) {
+          return {
+            ...t,
+            rating,
+          };
+        }
+        return t;
+      }),
+    });
+  }
+
+  render() {
+    const tasks = this.state.tasks;
+    const loading = this.state.loading;
+    const activeTab = this.state.activeTab;
+    const filters = this.state.filters;
+    const selectedTaskIds = this.state.selectedTaskIds;
+    const statusColors = {
+      待开始: 'default',
+      进行中: 'processing',
+      待审核: 'warning',
+      已完成: 'success',
+    };
+    const priorityColors = {
+      high: 'red',
+      medium: 'orange',
+      low: 'green',
+    };
+    const assignees = [...new Set(tasks.map(t => t.assignee))];
+    const filteredTasks = tasks.filter(task => {
+      const matchStatus = activeTab === 'all' || task.status === activeTab;
+      const matchPriority =
+        filters.priority === 'all' || task.priority === filters.priority;
+      const matchAssignee =
+        filters.assignee === 'all' || task.assignee === filters.assignee;
+      return matchStatus && matchPriority && matchAssignee;
+    });
+    const taskStats = {
+      total: tasks.length,
+      inProgress: tasks.filter(t => t.status === '进行中').length,
+      completed: tasks.filter(t => t.status === '已完成').length,
+      avgProgress: Math.round(
+        tasks.reduce((sum, t) => sum + t.progress, 0) / tasks.length
+      ),
+    };
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+    const taskCard = task => (
+      <Card
+        key={task.id}
+        className={`mb-3 hover:shadow-lg transition-shadow ${
+          task.status === '已完成' ? 'bg-green-50' : ''
+        }`}
+      >
+        <View className="flex items-start justify-between">
+          <View className="flex-1">
+            <View className="flex items-center gap-2 mb-2">
+              <Tag color={statusColors[task.status]}>{task.status}</Tag>
+              <Tag color={priorityColors[task.priority]}>{task.priority}</Tag>
+              {task.tags.map(tag => (
+                <Tag key={tag} color="blue">
+                  {tag}
+                </Tag>
+              ))}
+            </View>
+            <Text className="text-lg font-bold">{task.title}</Text>
+            <View className="flex items-center gap-4 mt-3 text-gray-500 text-sm">
+              <View className="flex items-center gap-1">
+                <Avatar size={20}>{task.assignee.charAt(0)}</Avatar>
+                <Text>{task.assignee}</Text>
+              </View>
+              <Text>截止: {task.deadline}</Text>
+            </View>
+            <View className="mt-3">
+              <Text className="text-sm text-gray-500">进度</Text>
+              <Progress percent={task.progress} size="small" />
+            </View>
+            {task.status === '已完成' && (
+              <View className="mt-2 flex items-center gap-2">
+                <Text className="text-sm text-gray-500">评价:</Text>
+                <Rate
+                  value={task.rating}
+                  onChange={value => this.rateTask(task.id, value)}
+                />
+              </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="gap-4 grid grid-cols-4">
+            <View className="text-[var(--center)] p-[16px] bg-[var(--blue-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--blue-600)]">
+                {taskStats.total}
+              </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-3xl font-bold text-[var(--orange-600)]">
+                {taskStats.inProgress}
+              </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-3xl font-bold text-[var(--green-600)]">
+                {taskStats.completed}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                已完成
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--purple-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--purple-600)]">
+                {taskStats.avgProgress}%
+              </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={filters.priority}
+                onChange={value => this.handleFilterChange('priority', value)}
+                placeholder="优先级"
+                className=""
+              >
+                <Select.Option value="all">全部优先级</Select.Option>
+                <Select.Option value="high">高</Select.Option>
+                <Select.Option value="medium">中</Select.Option>
+                <Select.Option value="low">低</Select.Option>
+              </Select>
+              <Select
+                value={filters.assignee}
+                onChange={value => this.handleFilterChange('assignee', value)}
+                placeholder="负责人"
+                className=""
+              >
+                <Select.Option value="all">全部人员</Select.Option>
+                {assignees.map((assignee, index) => (
+                  <Select.Option key={assignee} value={assignee}>
+                    <Text>{assignee}</Text>
+                  </Select.Option>
+                ))}
+              </Select>
+            </View>
+            <Button type="primary">+ 新建任务</Button>
+          </View>
+        </Card>
+        <Card>
+          <Tabs
+            activeKey={activeTab}
+            onChange={key => this.handleTabChange(key)}
+          >
+            <Tabs.TabPane tab={`全部 (${tasks.length})`} key="all">
+              {!!(filteredTasks.length === 0) && (
+                <View className="text-[#9ca3af] pt-[32px] pb-[32px]">
+                  暂无任务
+                </View>
+              )}
+              {!(filteredTasks.length === 0) && (
+                <Text>
+                  {filteredTasks.map(function (task) {
+                    return taskCard(task);
+                  })}
+                </Text>
+              )}
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              tab={`进行中 (${
+                tasks.filter(function (t) {
+                  return t.status === '进行中';
+                }).length
+              })`}
+              key="进行中"
+            >
+              {!!(
+                filteredTasks.filter(function (t) {
+                  return t.status === '进行中';
+                }).length === 0
+              ) && (
+                <View className="text-[#9ca3af] pt-[32px] pb-[32px]">
+                  暂无进行中任务
+                </View>
+              )}
+              {!(
+                filteredTasks.filter(function (t) {
+                  return t.status === '进行中';
+                }).length === 0
+              ) && (
+                <Text>
+                  {filteredTasks
+                    .filter(function (t) {
+                      return t.status === '进行中';
+                    })
+                    .map(function (task) {
+                      return taskCard(task);
+                    })}
+                </Text>
+              )}
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              tab={`待审核 (${
+                tasks.filter(function (t) {
+                  return t.status === '待审核';
+                }).length
+              })`}
+              key="待审核"
+            >
+              {!!(
+                filteredTasks.filter(function (t) {
+                  return t.status === '待审核';
+                }).length === 0
+              ) && (
+                <View className="text-[#9ca3af] pt-[32px] pb-[32px]">
+                  暂无待审核任务
+                </View>
+              )}
+              {!(
+                filteredTasks.filter(function (t) {
+                  return t.status === '待审核';
+                }).length === 0
+              ) && (
+                <Text>
+                  {filteredTasks
+                    .filter(function (t) {
+                      return t.status === '待审核';
+                    })
+                    .map(function (task) {
+                      return taskCard(task);
+                    })}
+                </Text>
+              )}
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              tab={`已完成 (${
+                tasks.filter(function (t) {
+                  return t.status === '已完成';
+                }).length
+              })`}
+              key="已完成"
+            >
+              {!!(
+                filteredTasks.filter(function (t) {
+                  return t.status === '已完成';
+                }).length === 0
+              ) && (
+                <View className="text-[#9ca3af] pt-[32px] pb-[32px]">
+                  暂无已完成任务
+                </View>
+              )}
+              {!(
+                filteredTasks.filter(function (t) {
+                  return t.status === '已完成';
+                }).length === 0
+              ) && (
+                <Text>
+                  {filteredTasks
+                    .filter(function (t) {
+                      return t.status === '已完成';
+                    })
+                    .map(function (task) {
+                      return taskCard(task);
+                    })}
+                </Text>
+              )}
+            </Tabs.TabPane>
+          </Tabs>
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;