支持拖拽排序

package-lock.json

@@ -18,7 +18,8 @@
         "quasar": "^2.7.0",
         "raw-loader": "^4.0.2",
         "vue": "^3.0.0",
-        "vue-router": "^4.0.0"
+        "vue-router": "^4.0.0",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@babel/eslint-parser": "^7.13.14",
@@ -9493,6 +9494,12 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -10520,6 +10527,18 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/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/watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -18197,6 +18216,11 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -18940,6 +18964,14 @@
         }
       }
     },
+    "vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "requires": {
+        "sortablejs": "1.14.0"
+      }
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",

package.json

@@ -21,7 +21,8 @@
     "quasar": "^2.7.0",
     "raw-loader": "^4.0.2",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.0.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",

src/components/CommandCard.vue

@@ -5,7 +5,7 @@
       'card-wrapper': 1,
       'card-wrapper-hover': isWarpperHover,
     }"
-    v-show="canRunInConfigurationPage || cardStyle.code > 1"
+    v-if="canRunInConfigurationPage || cardStyle.code > 1"
     :id="commandInfo.features.code"
     @mouseenter="isWarpperHover = true"
     @mouseleave="if (!$refs.controlButtons?.isMenuOpen) isWarpperHover = false;"

src/components/card/ControlButtons.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 开关按钮 -->
-    <div class="absolute" style="z-index: 1; left: 19px; bottom: 16px">
+    <div class="absolute" style="z-index: 1; left: 12px; bottom: 10px">
       <q-toggle
         :model-value="isActivated"
         checked-icon="flash_on"
@@ -14,7 +14,7 @@
     <!-- 控制按钮组 -->
     <div
       class="absolute control-buttons"
-      style="z-index: 1; right: 16px; top: 16px"
+      style="z-index: 1; right: 16px; top: 10px"
       :class="{ 'buttons-visible': isVisible }"
     >
       <q-btn

src/components/config/CommandPanels.vue

@@ -24,24 +24,35 @@
           opacity: 0.5,
         }"
       >
-        <div class="row center q-pa-xs">
+        <draggable
-          <CommandCard
+          v-model="sortedCommands"
-            v-for="commandInfo in currentTagQuickCommands"
+          :component-data="{
-            :key="commandInfo.features.code"
+            type: 'div',
-            :commandInfo="commandInfo"
+            class: 'row center q-pa-xs'
-            :isCommandActivated="
+          }"
-              activatedQuickCommandFeatureCodes.includes(
+          item-key="features.code"
-                commandInfo.features.code
+          @start="drag=true"
-              )
+          @end="onDragEnd"
-            "
+          handle=".q-card"
-            :cardStyle="cardStyleSheet[$root.profile.commandCardStyle]"
+          :disabled="currentTag === '默认' || currentTag === '搜索结果'"
-            @commandChanged="$emit('command-changed', $event)"
+        >
-            :style="{
+          <template #item="{element: commandInfo}">
+            <div :key="commandInfo.features.code" :style="{
               width: cardStyleSheet[$root.profile.commandCardStyle].width,
-            }"
+            }" class="relative-position q-pa-sm command-item">
-            class="relative-position q-pa-sm"
+              <CommandCard
-          ></CommandCard>
+                :commandInfo="commandInfo"
-        </div>
+                :isCommandActivated="
+                  activatedQuickCommandFeatureCodes.includes(
+                    commandInfo.features.code
+                  )
+                "
+                :cardStyle="cardStyleSheet[$root.profile.commandCardStyle]"
+                @commandChanged="$emit('command-changed', $event)"
+              ></CommandCard>
+            </div>
+          </template>
+        </draggable>
       </q-scroll-area>
     </q-tab-panel>
   </q-tab-panels>
@@ -49,11 +60,13 @@
 
 <script>
 import CommandCard from "components/CommandCard.vue";
+import draggable from 'vuedraggable';
 
 export default {
   name: "CommandPanels",
   components: {
     CommandCard,
+    draggable
   },
   data() {
     return {
@@ -75,6 +88,8 @@ export default {
           code: 4,
         },
       },
+      sortedCommands: [],
+      drag: false
     };
   },
   props: {
@@ -113,7 +128,28 @@ export default {
       },
     },
   },
-  emits: ["update:modelValue", "command-changed"],
+  watch: {
+    currentTagQuickCommands: {
+      immediate: true,
+      handler(newCommands) {
+        this.sortedCommands = [...newCommands];
+      }
+    }
+  },
+  methods: {
+    onDragEnd() {
+      this.drag = false;
+      this.$emit('commands-reordered', {
+        tag: this.currentTag,
+        commands: this.sortedCommands
+      });
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "command-changed",
+    "commands-reordered"
+  ],
 };
 </script>
 
@@ -127,4 +163,8 @@ export default {
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
     opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+.command-item {
+  transition: all 0.5s;
+}
 </style>

src/pages/ConfigurationPage.vue

@@ -24,6 +24,7 @@
           activatedQuickCommandFeatureCodes
         "
         @command-changed="commandChanged"
+        @commands-reordered="handleCommandsReorder"
       />
       <!-- 底栏 -->
       <FooterBar
@@ -102,11 +103,19 @@ export default {
     // 当前标签下的所有快捷命令
     currentTagQuickCommands() {
       let commands = Object.values(_.cloneDeep(this.allQuickCommands));
+
+      // 根据 order 排序
+      const sortByOrder = (cmds) => {
+        return cmds.sort((a, b) => {
+          const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+          const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+          return orderA - orderB;
+        });
+      };
+
       switch (this.currentTag) {
         case "未分类":
-          return commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0);
+          return sortByOrder(commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0));
-        // case "来自分享":
-        //   return commands.filter((cmd) => cmd.fromShare);
         case "搜索结果":
           if (this.commandSearchKeyword?.length < 2) return;
           let searchResult = [];
@@ -130,8 +139,10 @@ export default {
             searchResult.push(cmd);
           });
           return searchResult;
-        default:
+        case "默认":
           return commands.filter((cmd) => cmd.tags?.includes(this.currentTag));
+        default:
+          return sortByOrder(commands.filter((cmd) => cmd.tags?.includes(this.currentTag)));
       }
     },
     // 标签栏宽度
@@ -462,6 +473,33 @@ export default {
         this.isCommandEditorShow = false;
       }
     },
+    handleCommandsReorder({ tag, commands }) {
+      // 更新当前tag下的命令顺序
+      const tagCommands = {};
+      commands.forEach((command, index) => {
+        tagCommands[command.features.code] = {
+          ...command,
+          order: index // 添加排序信息
+        };
+      });
+
+      // 更新存储
+      this.allQuickCommands = {
+        ...this.allQuickCommands,
+        ...tagCommands
+      };
+
+      // 只保存被修改的命令
+      this.saveCurrentTagOrderedCommand(tagCommands);
+    },
+    saveCurrentTagOrderedCommand(tagCommands) {
+      // 只保存被修改的命令
+      Object.entries(tagCommands).forEach(([code, command]) => {
+        if (!this.isDefaultCommand(code)) {
+          this.$root.utools.putDB(_.cloneDeep(command), "qc_" + code);
+        }
+      });
+    },
   },
 };
 </script>