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

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>