mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-07 13:34:08 +08:00
支持拖拽排序
This commit is contained in:
parent
a3bcf6674f
commit
7b01082856
34
package-lock.json
generated
34
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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;"
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user