feat: 完成异步任务跟踪架构基础

web/src/components/PluginCard.vue

@@ -95,7 +95,7 @@ const menuItems = [
     },
     {
         title: '删除',
-        condition: (plugin) => plugin.source != '',
+        condition: (plugin) => true,
         action: uninstallPlugin
     }
 ]

web/src/components/TaskCard.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="task-card">
+        <div class="task-card-icon">
+            <v-progress-circular :size="25" :width="2" indeterminate v-if="task.runtime.state == 'PENDING'" />
+            <v-icon v-else-if="task.runtime.state == 'FINISHED'" style="color: #4caf50;" :size="25" icon="mdi-check" />
+            <v-icon v-else-if="task.runtime.state == 'CANCELLED'" style="color: #f44336;" :size="25" icon="mdi-close" />
+        </div>
+
+        <div class="task-card-content">
+            <div class="task-card-kind">{{ task.kind }}</div>
+            <div class="task-card-label">{{ task.label }}</div>
+            <v-chip class="task-card-action" color="primary" variant="outlined" size="small" density="compact">正在执行: {{ task.task_context.current_action }}</v-chip>
+        </div>
+
+        <div class="task-card-actions">
+            <!-- <v-icon icon="mdi-details" /> -->
+             <v-btn icon="mdi-information-outline" variant="text" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    task: {
+        type: Object,
+        required: true
+    }
+})
+</script>
+
+<style scoped>
+.task-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding-inline: 0.5rem;
+}
+
+.task-card-icon {
+    margin-right: 1rem;
+    margin-left: 0.8rem;
+}
+
+.task-card-content {
+    flex: 1;
+    margin-left: 0.4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.02rem;
+    user-select: none;
+}
+
+.task-card-kind {
+    font-size: 0.6rem;
+    color: #666;
+}
+
+.task-card-label {
+    font-size: 0.8rem;
+    color: #333;
+}
+
+.task-card-action {
+    font-size: 0.6rem;
+    width: fit-content;
+    padding-inline: 0.3rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.task-card-actions {
+    justify-self: flex-end;
+}
+
+</style>

web/src/components/TaskDialog.vue

@@ -1,27 +1,9 @@
 <template>
-    <v-card prepend-icon="mdi-align-horizontal-left" text="用户发起的任务列表" title="任务列表">
-        <v-list id="plugin-orchestration-list">
-            <draggable v-model="plugins" item-key="name" group="plugins" @start="drag = true"
-                id="plugin-orchestration-draggable"
-                @end="drag = false">
-                <template #item="{ element }">
-                    <div class="plugin-orchestration-item">
-                        <div class="plugin-orchestration-item-title">
-                            <div class="plugin-orchestration-item-author">
-                                {{ element.author }} /
-                            </div>
-                            <div class="plugin-orchestration-item-name">
-                                {{ element.name }}
-                            </div>
-                        </div>
-
-                        <div class="plugin-orchestration-item-action">
-                            <v-icon>mdi-drag</v-icon>
-                        </div>
-                    </div>
-                </template>
-            </draggable>
+    <v-card class="task-dialog" prepend-icon="mdi-align-horizontal-left" text="用户发起的任务列表" title="任务列表">
+        <v-list id="task-list" v-if="taskList.length > 0">
+            <TaskCard class="task-card" v-for="task in taskList" :key="task.id" :task="task" />
         </v-list>
+        <div v-else><v-alert color="warning" icon="$warning" title="暂无任务" text="暂无已添加的用户任务项" density="compact" style="margin-inline: 1rem;"></v-alert></div>
 
         <template v-slot:actions>
             <v-btn class="ml-auto" text="关闭" prepend-icon="mdi-close" @click="close"></v-btn>
@@ -35,7 +17,11 @@ defineProps({
 
 const emit = defineEmits(['close'])
 
-import { ref } from 'vue'
+import TaskCard from '@/components/TaskCard.vue'
+
+import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
 
 import { inject } from 'vue'
 
@@ -44,8 +30,61 @@ const snackbar = inject('snackbar')
 const close = () => {
     emit('close')
 }
+
+const taskList = ref([])
+
+const refresh = () => {
+    proxy.$axios.get('/system/tasks', {
+        params: {
+            type: 'user'
+        }
+    }).then(response => {
+        if (response.data.code != 0) {
+            snackbar.error(response.data.message)
+            return
+        }
+        taskList.value = response.data.data.tasks
+
+        // 倒序
+        taskList.value.reverse()
+    }).catch(error => {
+        snackbar.error(error.message)
+    })
+}
+
+let refreshTask = null
+onMounted(() => {
+    refresh()
+    refreshTask = setInterval(refresh, 500)
+})
+
+onUnmounted(() => {
+    clearInterval(refreshTask)
+})
+
 </script>
 
 <style scoped>
+.task-dialog {
+    width: 100%;
+}
 
-</style>
+#task-list {
+    max-height: 20rem;
+    overflow-y: auto;
+    margin-inline: 1rem;
+    width: calc(100% - 2.2rem);
+    padding-inline: 0.6rem;
+}
+
+.task-card {
+    /* margin-bottom: 0.1rem; */
+    display: flex;
+    flex-direction: row;
+    /* box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); */
+    height: 4rem;
+    /* border: 0.08rem solid #ccc; */
+    box-shadow: 0.1rem 0.1rem 0.2rem 0.05rem #ccc;
+    background-color: #ffffff;
+}
+</style>