支持拖拽排序

This commit is contained in:
fofolee 2024-12-22 01:25:36 +08:00
parent a3bcf6674f
commit 7b01082856
6 changed files with 138 additions and 27 deletions

34
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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;"

View File

@ -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

View File

@ -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>

View File

@ -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>