feat(task): 任务列表添加进度条

- 新增 Progress 组件用于显示任务进度
- 在 TaskView2 组件中集成 Progress组件
- 优化任务列表数据结构，增加 progressVal 和 progressSum 字段

src/editor/widgets/task/Progress.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ElProgress } from "element-plus";
+import { type ICellRendererParams, } from "ag-grid-enterprise";
+import { Typeof } from "@ease-forge/shared";
+
+// 定义组件选项
+defineOptions({
+    name: 'Progress',
+});
+
+// 定义 Props 类型
+interface ProgressProps {
+
+}
+
+/** 单元格组件Props */
+interface CellComponentProps<T = {}> {
+    params: ICellRendererParams<any, any, any> & T;
+}
+
+// 读取组件 props 属性
+const props = defineProps<CellComponentProps<ProgressProps>>();
+
+// 定义 State 类型
+interface ProgressState {
+}
+
+// state 属性
+const state = reactive<ProgressState>({});
+
+const params = props.params;
+const progressVal = params?.data?.progressVal ?? 0;
+const progressSum = params?.data?.progressSum;
+
+export type {
+    ProgressProps,
+    ProgressState,
+}
+</script>
+
+<template>
+    <ElProgress
+        v-if="Typeof.isNum(progressSum)"
+        class="ag-cell-progress flex-item-fill"
+        :percentage="progressVal/(Math.max(progressSum, 1))*100"
+        :textInside="true"
+        :format="()=>`${progressVal}/${progressSum}`"
+        :striped="true"
+        :stripedFlow="true"
+        :strokeWidth="18"
+    />
+</template>
+
+<style>
+.ag-cell-value:has(> .ag-cell-progress), .ag-group-value:has(> .ag-cell-progress) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ag-cell-progress .el-progress-bar__innerText {
+    color: #434343;
+}
+</style>

src/editor/widgets/task/TaskView2.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import { markRaw, onMounted, reactive } from "vue";
 import { AgGridVue } from "ag-grid-vue3";
 import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.locale";
 import { Request } from "@ease-forge/shared";
@@ -7,6 +7,7 @@ import type { GridOptions } from "ag-grid-enterprise";
 import type { GridApi, GridReadyEvent } from "ag-grid-community";
 import { Refresh } from "@element-plus/icons-vue";
 import { ElButton, ElInput, ElSwitch } from "element-plus";
+import Progress from "./Progress.vue";
 
 defineOptions({
     name: 'TaskView',
@@ -54,7 +55,13 @@ const data: TaskViewData = {
             { field: 'type', headerName: '类型', width: 120 },
             { field: 'status', headerName: '状态', width: 120 },
             { field: 'err', headerName: '异常' },
-            { field: 'progress', headerName: '进度' },
+            {
+                field: 'progress', headerName: '进度' ,
+                cellRenderer: "Progress",
+                cellRendererParams: {
+                    aaa: "AAA",
+                },
+            },
             { field: 'payload', headerName: '任务负载', width: 600 },
             { field: 'priority', headerName: '优先级', width: 120 },
             { field: 'info', headerName: '任务明细', width: 800 },
@@ -74,6 +81,9 @@ const data: TaskViewData = {
         onGridReady(event: GridReadyEvent) {
             data.api = event.api;
         },
+        components: {
+            Progress: markRaw(Progress),
+        },
     },
 };
 onMounted(reload);
@@ -171,7 +181,9 @@ function toTreeData(data: Array<any>) {
             bizNode.children.push(planNode);
             tree.push(planNode);
         }
-        bizNode.progress = `${bizNode.children.filter(item => item.status === PlanTaskStatus.FINISHED).length}/${bizNode.children.length}`;
+        bizNode.progressVal = bizNode.children.filter(item => item.status === PlanTaskStatus.FINISHED).length;
+        bizNode.progressSum = bizNode.children.length;
+        bizNode.progress = `${bizNode.progressVal}/${bizNode.progressSum}`;
         tree.push(bizNode);
     }
     return tree;