支持拖拽排序

2025-06-07 13:34:08 +08:00 · 2024-12-22 01:25:36 +08:00 · 2024-12-22 01:25:36 +08:00 · 7b01082856
commit 7b01082856
parent a3bcf6674f
6 changed files with 138 additions and 27 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/CommandCard.vue
+++ b/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;"
--- a/src/components/card/ControlButtons.vue
+++ b/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
--- a/src/components/config/CommandPanels.vue
+++ b/src/components/config/CommandPanels.vue
@ -24,24 +24,35 @@
          opacity: 0.5,
        }"
      >
-        <div class="row center q-pa-xs">
-          <CommandCard
-            v-for="commandInfo in currentTagQuickCommands"
-            :key="commandInfo.features.code"
-            :commandInfo="commandInfo"
-            :isCommandActivated="
-              activatedQuickCommandFeatureCodes.includes(
-                commandInfo.features.code
-              )
-            "
-            :cardStyle="cardStyleSheet[$root.profile.commandCardStyle]"
-            @commandChanged="$emit('command-changed', $event)"
-            :style="{
+        <draggable
+          v-model="sortedCommands"
+          :component-data="{
+            type: 'div',
+            class: 'row center q-pa-xs'
+          }"
+          item-key="features.code"
+          @start="drag=true"
+          @end="onDragEnd"
+          handle=".q-card"
+          :disabled="currentTag === '默认' || currentTag === '搜索结果'"
+        >
+          <template #item="{element: commandInfo}">
+            <div :key="commandInfo.features.code" :style="{
              width: cardStyleSheet[$root.profile.commandCardStyle].width,
-            }"
-            class="relative-position q-pa-sm"
-          ></CommandCard>
-        </div>
+            }" class="relative-position q-pa-sm command-item">
+              <CommandCard
+                :commandInfo="commandInfo"
+                :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>
--- a/src/pages/ConfigurationPage.vue
+++ b/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);
-        // case "来自分享":
-        //   return commands.filter((cmd) => cmd.fromShare);
+          return sortByOrder(commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0));
        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>