From 2f05f5b4560aee29c9b4812e9096825b08361d14 Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Thu, 24 Oct 2024 18:28:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=A1=86=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue                   | 39 ++++++++++++++++++++++-
 web/src/components/TaskDialog.vue | 51 +++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/TaskDialog.vue

diff --git a/web/src/App.vue b/web/src/App.vue
index 54763a0..94d0b51 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -34,6 +34,23 @@
         <template v-slot:append>
           <div>
             <v-list density="compact" nav>
+              <!-- <v-list-item id="system-tasks-list-item" title="系统任务" prepend-icon="mdi-align-horizontal-left" v-tooltip="系统任务" @click="showTaskDialog" v-bind="props">
+                <v-dialog activator="parent" max-width="500" persistent v-model="taskDialogShow">
+                  <template v-slot:default="{ isActive }">
+                  </template>
+                </v-dialog>
+              </v-list-item> -->
+              <v-dialog max-width="500" persistent v-model="taskDialogShow">
+                <template v-slot:activator="{ props: activatorProps }">
+                  <v-list-item id="system-tasks-list-item" title="系统任务" prepend-icon="mdi-align-horizontal-left" v-tooltip="任务列表" v-bind="activatorProps">
+                  </v-list-item>
+                </template>
+
+                <template v-slot:default="{ isActive }">
+                  <TaskDialog :dialog="{ show: isActive }" @close="closeTaskDialog" />
+                </template>
+              </v-dialog>
+
               <v-list-item id="about-list-item" title="系统信息" prepend-icon="mdi-cog-outline" v-tooltip="系统信息">
               </v-list-item>
             </v-list>
@@ -52,6 +69,8 @@
 import { getCurrentInstance } from 'vue'
 import {provide, ref, watch} from 'vue';
 
+import TaskDialog from '@/components/TaskDialog.vue'
+
 const { proxy } = getCurrentInstance()
 
 const snackbar = ref(false);
@@ -84,6 +103,15 @@ function info(content) {
   text.value = content;
 }
 
+const taskDialogShow = ref(false)
+
+function showTaskDialog() {
+  taskDialogShow.value = true
+}
+
+function closeTaskDialog() {
+  taskDialogShow.value = false
+}
 
 provide('snackbar', {success, error, warning, info, location, timeout});
 </script>
@@ -141,4 +169,13 @@ provide('snackbar', {success, error, warning, info, location, timeout});
 #about-list-item:active {
   background-color: #ddd;
 }
-</style>
\ No newline at end of file
+
+#system-tasks-list-item:hover {
+  cursor: pointer;
+  background-color: #eee;
+}
+
+#system-tasks-list-item:active {
+  background-color: #ddd;
+}
+</style>
diff --git a/web/src/components/TaskDialog.vue b/web/src/components/TaskDialog.vue
new file mode 100644
index 0000000..a6ce9f5
--- /dev/null
+++ b/web/src/components/TaskDialog.vue
@@ -0,0 +1,51 @@
+<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-list>
+
+        <template v-slot:actions>
+            <v-btn class="ml-auto" text="关闭" prepend-icon="mdi-close" @click="close"></v-btn>
+        </template>
+    </v-card>
+</template>
+
+<script setup>
+defineProps({
+})
+
+const emit = defineEmits(['close'])
+
+import { ref } from 'vue'
+
+import { inject } from 'vue'
+
+const snackbar = inject('snackbar')
+
+const close = () => {
+    emit('close')
+}
+</script>
+
+<style scoped>
+
+</style>