feat: 插件优先级更改功能

pkg/api/http/controller/groups/plugins.py

@@ -29,3 +29,9 @@ class PluginsRouterGroup(group.RouterGroup):
             target_enabled = data.get('target_enabled')
             await self.ap.plugin_mgr.update_plugin_status(plugin_name, target_enabled)
             return self.success()
+
+        @self.route('/reorder', methods=['PUT'])
+        async def _() -> str:
+            data = await quart.request.json
+            await self.ap.plugin_mgr.reorder_plugins(data.get('plugins'))
+            return self.success()

pkg/plugin/manager.py

@@ -203,3 +203,18 @@ class PluginManager:
             return True
         else:
             return False
+
+    async def reorder_plugins(self, plugins: list[dict]):
+        
+        for plugin in plugins:
+            plugin_name = plugin.get('name')
+            plugin_priority = plugin.get('priority')
+
+            for plugin in self.plugins:
+                if plugin.plugin_name == plugin_name:
+                    plugin.priority = plugin_priority
+                    break
+
+        self.plugins.sort(key=lambda x: x.priority, reverse=True)
+
+        await self.setting.dump_container_setting(self.plugins)

web/package-lock.json

@@ -20,6 +20,7 @@
         "core-js": "^3.37.1",
         "roboto-fontface": "*",
         "vue": "^3.4.31",
+        "vuedraggable": "^4.1.0",
         "vuetify": "^3.6.11",
         "vuex": "^4.0.2"
       },
@@ -4627,6 +4628,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5256,6 +5263,18 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
     "node_modules/vuetify": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.2.tgz",

web/package.json

@@ -20,6 +20,7 @@
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
+    "vuedraggable": "^4.1.0",
     "vuetify": "^3.6.11",
     "vuex": "^4.0.2"
   },

web/src/pages/Plugins.vue

@@ -8,6 +8,40 @@
                 <template v-slot:activator="{ props }">
                     <v-btn prepend-icon="mdi-priority-high" v-bind="props">
                         编排
+
+                        <v-dialog activator="parent" max-width="500" persistent v-model="isOrchestrationDialogActive">
+                            <template v-slot:default="{ isActive }">
+                                <v-card prepend-icon="mdi-priority-high" 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="isOrchestrationDialogActive = false"></v-btn>
+                                        <v-btn color="primary" prepend-icon="mdi-content-save-outline" @click="saveOrder">应用</v-btn>
+                                    </template>
+                                </v-card>
+                            </template>
+                        </v-dialog>
                     </v-btn>
                 </template>
             </v-tooltip>
@@ -17,7 +51,8 @@
         </div>
     </v-card>
     <div class="plugins-container">
-        <PluginCard class="plugin-card" v-for="plugin in plugins" :key="plugin.name" :plugin="plugin" @toggle="togglePlugin" />
+        <PluginCard class="plugin-card" v-for="plugin in plugins" :key="plugin.name" :plugin="plugin"
+            @toggle="togglePlugin" />
     </div>
 </template>
 
@@ -26,9 +61,11 @@
 import PageTitle from '@/components/PageTitle.vue'
 import PluginCard from '@/components/PluginCard.vue'
 
+import draggable from 'vuedraggable'
+
 import { ref, getCurrentInstance, onMounted } from 'vue'
 
-import {inject} from "vue";
+import { inject } from "vue";
 
 const snackbar = inject('snackbar');
 
@@ -64,19 +101,35 @@ const togglePlugin = (plugin) => {
     })
 }
 
+const isOrchestrationDialogActive = ref(false)
 
+const saveOrder = () => {
+    // 为所有插件的 priority 赋值，倒序
+    plugins.value.forEach(plugin => {
+        plugin.priority = plugins.value.length - plugins.value.indexOf(plugin)
+    })
+
+    proxy.$axios.put('/plugins/reorder', {
+        plugins: plugins.value
+    }).then(res => {
+        refresh()
+        snackbar.success('插件优先级已保存')
+        isOrchestrationDialogActive.value = false
+    }).catch(error => {
+        snackbar.error(error)
+    })
+}
 </script>
 
 <style scoped>
-
 #plugins-toolbar {
-  margin-top: 1rem;
-  margin-inline: 1rem;
-  height: 3.2rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
+    margin-top: 1rem;
+    margin-inline: 1rem;
+    height: 3.2rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 }
 
 #view-btns {
@@ -98,6 +151,7 @@ const togglePlugin = (plugin) => {
 .plugins-container {
     display: flex;
     flex-direction: row;
+    justify-content: flex-start;
     flex-wrap: wrap;
     gap: 16px;
     margin-inline: 1rem;
@@ -108,4 +162,49 @@ const togglePlugin = (plugin) => {
     height: 8rem;
 }
 
-</style>
+#plugin-orchestration-list {
+    max-height: 20rem;
+    overflow-y: auto;
+    margin-inline: 1rem;
+    width: calc(100% - 2rem);
+    /* background-color: aqua; */
+}
+
+#plugin-orchestration-draggable {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.plugin-orchestration-item {
+    cursor: move;
+    width: calc(100% - 2rem);
+    box-shadow: 0.1rem 0.1rem 0.2rem 0.05rem #ccc;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: row;
+    padding: 0.5rem;
+    justify-content: space-between;
+}
+
+.plugin-orchestration-item-title {
+    display: flex;
+    flex-direction: column;
+}
+
+.plugin-orchestration-item-author {
+    color: #666;
+    font-size: 0.7rem;
+}
+
+.plugin-orchestration-item-name {
+    font-size: 1.1rem;
+    font-weight: 500;
+}
+
+.plugin-orchestration-item-action {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+</style>