study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-08 06:16:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

重构ConfigurationPage，优化数据传递

Browse Source
This commit is contained in:
fofolee 2025-02-13 21:43:18 +08:00
parent a1c00e962c
commit 9ffa941e72
12 changed files with 291 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
plugin/lib/lodashMini.js
View File

@ -249,27 +249,6 @@ const lodashMini = {
);
},
/**
* 移除数组中所有给定值
* @param {Array} array - 要修改的数组
* @param {...*} values - 要移除的值
* @returns {Array} 返回数组本身
* @example
* pull([1, 2, 3, 1, 2, 3], 2, 3) => [1, 1]
*/
pull: function (array, ...values) {
if (!array || !array.length || !values.length) return array;
let i = 0;
while (i < array.length) {
if (values.includes(array[i])) {
array.splice(i, 1);
} else {
i++;
}
}
return array;
},
/**
* 截断字符串
* @param {string} [string=''] - 要截断的字符串

5
src/components/CommandEditor.vue
View File

@ -161,11 +161,6 @@ export default {
this.commandInit();
this.sidebarInit();
},
computed: {
configurationPage() {
return this.$root.$refs.view;
},
},
methods: {
// 命令初始化
commandInit() {

17
src/components/ComposerEditor.vue
View File

@ -15,13 +15,11 @@ import CommandComposer from "components/composer/CommandComposer.vue";
import CommandRunResult from "components/CommandRunResult";
import { findCommandByValue } from "js/composer/composerConfig";
import programs from "js/options/programs.js";
import { provide, ref } from "vue";
import { ref } from "vue";
export default {
components: { CommandComposer, CommandRunResult },
setup(props) {
provide("allQuickCommandTags", props.allQuickCommandTags);
const retoreToFullCommand = (command) => {
const { flows } = command;
if (!flows) return command;
@ -100,9 +98,13 @@ export default {
...defaultCommand,
...retoreToFullCommand(savedCommand),
});
const isRunComposePage = ref(props.action.type === "composer");
return {
quickcommandInfo,
getLitedComposerCommand,
isRunComposePage,
};
},
emits: ["editorEvent"],
@ -111,15 +113,6 @@ export default {
type: Object,
required: true,
},
allQuickCommandTags: {
type: Array,
default: () => [],
},
},
data() {
return {
isRunComposePage: this.action.type === "composer",
};
},
methods: {
handleComposerAction(actionType, command) {

156
src/components/config/CommandPanels.vue
View File

@ -25,21 +25,24 @@
}"
>
<draggable
v-model="sortedCommands"
:model-value="currentTagQuickCommands"
@update:model-value="handleCommandsReorder"
:component-data="{
type: 'div',
class: 'row center q-pa-xs'
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 command-item">
<template #item="{ element: commandInfo }">
<div
:key="commandInfo.features.code"
:style="{
width: cardStyleSheet[$root.profile.commandCardStyle].width,
}"
class="relative-position q-pa-sm command-item"
>
<CommandCard
:commandInfo="commandInfo"
:isCommandActivated="
@ -60,16 +63,20 @@
<script>
import CommandCard from "components/CommandCard.vue";
import draggable from 'vuedraggable';
import draggable from "vuedraggable";
import pinyinMatch from "pinyin-match";
import { useCommandManager } from "js/commandManager.js";
import { dbManager } from "js/utools.js";
export default {
name: "CommandPanels",
components: {
CommandCard,
draggable
draggable,
},
data() {
return {
commandManager: useCommandManager(),
cardStyleSheet: {
mini: {
width: "20%",
@ -88,8 +95,6 @@ export default {
code: 4,
},
},
sortedCommands: [],
drag: false
};
},
props: {
@ -101,55 +106,110 @@ export default {
type: String,
required: true,
},
modelValue: {
type: String,
required: true,
},
allQuickCommandTags: {
type: Array,
required: true,
},
currentTagQuickCommands: {
type: Array,
required: true,
},
activatedQuickCommandFeatureCodes: {
type: Array,
required: true,
},
},
computed: {
currentTag: {
get() {
return this.modelValue;
return this.commandManager.state.currentTag;
},
set(value) {
this.$emit("update:modelValue", value);
this.commandManager.state.currentTag = value;
},
},
},
watch: {
currentTagQuickCommands: {
immediate: true,
handler(newCommands) {
this.sortedCommands = [...newCommands];
allQuickCommandTags() {
return this.commandManager.state.allQuickCommandTags;
},
activatedQuickCommandFeatureCodes() {
return this.commandManager.state.activatedQuickCommandFeatureCodes;
},
commandSearchKeyword() {
return this.commandManager.state.commandSearchKeyword;
},
allQuickCommands() {
return this.commandManager.state.allQuickCommands;
},
// 当前标签下的所有快捷命令
currentTagQuickCommands() {
let commands = Object.values(
window.lodashM.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 sortByOrder(
commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0)
);
case "搜索结果":
if (this.commandSearchKeyword?.length < 2) return;
let searchResult = [];
commands.forEach((cmd) => {
// 拼音搜索
let explain = cmd.features.explain;
let matchedWordPositions = pinyinMatch.match(
explain,
this.commandSearchKeyword
);
if (!matchedWordPositions) return;
let matchedWords = explain.slice(
matchedWordPositions[0],
matchedWordPositions[1] + 1
);
// 高亮
cmd.features.explain = explain.replace(
matchedWords,
`<strong style="color:#ed6237">${matchedWords}</strong>`
);
searchResult.push(cmd);
});
return searchResult;
case "默认":
return commands.filter((cmd) => cmd.tags?.includes(this.currentTag));
default:
return sortByOrder(
commands.filter((cmd) => cmd.tags?.includes(this.currentTag))
);
}
}
},
},
methods: {
onDragEnd() {
this.drag = false;
this.$emit('commands-reordered', {
tag: this.currentTag,
commands: this.sortedCommands
handleCommandsReorder(commands) {
// 更新当前tag下的命令顺序
const tagCommands = {};
commands.forEach((command, index) => {
tagCommands[command.features.code] = {
...command,
order: index, // 添加排序信息
};
});
}
// 更新存储
this.commandManager.state.allQuickCommands = {
...this.allQuickCommands,
...tagCommands,
};
// 只保存被修改的命令
this.saveCurrentTagOrderedCommand(tagCommands);
},
saveCurrentTagOrderedCommand(tagCommands) {
// 只保存被修改的命令
Object.entries(tagCommands).forEach(([code, command]) => {
if (!this.commandManager.isDefaultCommand(code)) {
dbManager.putDB(window.lodashM.cloneDeep(command), "qc_" + code);
}
});
},
},
emits: [
"update:modelValue",
"command-changed",
"commands-reordered"
],
emits: ["command-changed"],
};
</script>

56
src/components/config/FooterBar.vue
View File

@ -7,7 +7,7 @@
<!-- 搜索栏 -->
<div class="col">
<q-input
:model-value="searchKeyword"
:model-value="commandSearchKeyword"
@update:model-value="updateSearch"
debounce="200"
filled
@ -103,10 +103,7 @@
icon="settings"
:style="{ height: height }"
>
<ConfigurationMenu
:isTagStared="isTagStared"
:currentTag="currentTag"
/>
<ConfigurationMenu />
</q-btn>
</q-btn-group>
</div>
@ -116,6 +113,7 @@
<script>
import ConfigurationMenu from "components/menu";
import { useCommandManager } from "js/commandManager.js";
export default {
name: "FooterBar",
@ -131,30 +129,33 @@ export default {
type: String,
required: true,
},
isTagStared: {
type: Boolean,
required: true,
},
emits: ["add-new"],
computed: {
commandSearchKeyword() {
return this.commandManager.state.commandSearchKeyword;
},
currentTag: {
type: String,
required: true,
currentTag() {
return this.commandManager.state.currentTag;
},
searchKeyword: {
type: String,
default: "",
allQuickCommandTags: {
get() {
return this.commandManager.state.allQuickCommandTags;
},
set(value) {
this.commandManager.state.allQuickCommandTags = value;
},
},
},
emits: ["update:search", "add-new"],
data() {
return {
commandManager: useCommandManager(),
isDarkMode: this.$q.dark.isActive,
isDev: utools.isDev(),
lastTag: "",
};
},
methods: {
updateSearch(value) {
this.$emit("update:search", value);
},
toggleDarkMode() {
this.$q.dark.toggle();
this.isDarkMode = this.$q.dark.isActive;
@ -162,6 +163,25 @@ export default {
goShareCenter() {
utools.shellOpenExternal("https://qc.qaz.ink/");
},
// 搜索方法
updateSearch(value) {
this.commandManager.state.commandSearchKeyword = value;
// 记录当前标签页
let searchTagName = "搜索结果";
if (this.currentTag !== searchTagName) this.lastTag = this.currentTag;
if (this.commandSearchKeyword?.length > 1) {
if (!this.allQuickCommandTags.includes(searchTagName))
this.allQuickCommandTags.push(searchTagName);
// 搜索时跳转到搜索结果标签
this.commandManager.changeCurrentTag(searchTagName);
} else {
// 清空搜索回跳到之前标签
if (this.allQuickCommandTags.slice(-1)[0] === searchTagName)
this.allQuickCommandTags.pop();
if (this.currentTag !== this.lastTag)
this.commandManager.changeCurrentTag(this.lastTag);
}
},
},
};
</script>

40
src/components/config/TagBar.vue
View File

@ -14,8 +14,7 @@
v-model="currentTag"
vertical
switch-indicator
:key="denseTagBar"
:dense="denseTagBar"
:dense="$root.profile.denseTagBar"
>
<!-- 可拖拽标签 -->
<draggable
@ -31,7 +30,7 @@
<template #item="{ element }">
<q-tab
:name="element"
:data-active-panel="activatedQuickPanels.includes(element)"
:data-active-panel="isTagStared(element)"
class="draggable-tag"
>
{{ element }}
@ -44,7 +43,7 @@
:key="tag"
:name="tag"
:data-search-result="tag === '搜索结果'"
:data-active-panel="activatedQuickPanels.includes(tag)"
:data-active-panel="isTagStared(tag)"
class="fixed-tag"
>
{{ tag }}
@ -60,6 +59,7 @@
<script>
import draggable from "vuedraggable";
import { dbManager } from "js/utools.js";
import { useCommandManager } from "js/commandManager.js";
const FIXED_TAGS = ["未分类", "默认", "搜索结果"];
const TAG_ORDER_KEY = "cfg_tagOrder";
@ -69,31 +69,15 @@ export default {
components: {
draggable,
},
emits: ["update:modelValue", "tags-reordered"],
props: {
tabBarWidth: {
type: String,
required: true,
},
allQuickCommandTags: {
type: Array,
required: true,
},
activatedQuickPanels: {
type: Array,
required: true,
},
modelValue: {
type: String,
required: true,
},
denseTagBar: {
type: Boolean,
default: false,
},
},
data() {
return {
commandManager: useCommandManager(),
savedTagOrder: null, // 缓存标签顺序
};
},
@ -108,12 +92,15 @@ export default {
computed: {
currentTag: {
get() {
return this.modelValue;
return this.commandManager.state.currentTag;
},
set(value) {
this.$emit("update:modelValue", value);
this.commandManager.state.currentTag = value;
},
},
allQuickCommandTags() {
return this.commandManager.state.allQuickCommandTags;
},
// 固定标签（不可拖拽）
fixedTags() {
return FIXED_TAGS.filter((tag) => this.allQuickCommandTags.includes(tag));
@ -147,8 +134,6 @@ export default {
this.savedTagOrder = value;
// 保存到数据库
dbManager.putDB(value, TAG_ORDER_KEY);
// 触发标签重排序事件
this.$emit("tags-reordered", value);
},
},
},
@ -160,10 +145,11 @@ export default {
this.savedTagOrder = newOrder;
// 保存到数据库
dbManager.putDB(newOrder, TAG_ORDER_KEY);
// 触发重新加载标签
this.$emit("tags-reordered", newOrder);
}
},
isTagStared(tag) {
return this.commandManager.state.activatedQuickPanels.includes(tag);
},
},
};
</script>

28
src/components/editor/CommandConfig.vue
View File

@ -10,9 +10,7 @@
<q-avatar size="36px" square class="featureIco">
<q-img
@click.stop="showIconPicker = true"
:src="
currentCommand.features.icon
"
:src="currentCommand.features.icon"
/>
</q-avatar>
</div>
@ -157,7 +155,7 @@
</template>
<script>
import { defineComponent, inject, computed } from "vue";
import { defineComponent, computed } from "vue";
import iconPicker from "components/popup/IconPicker.vue";
import outputTypes from "js/options/outputTypes.js";
import platformTypes from "js/options/platformTypes.js";
@ -165,6 +163,7 @@ import CheckGroup from "components/composer/common/CheckGroup.vue";
import ButtonGroup from "components/composer/common/ButtonGroup.vue";
import commandTypes from "js/options/commandTypes.js";
import MatchRuleEditor from "components/editor/MatchRuleEditor.vue";
import { useCommandManager } from "js/commandManager.js";
export default defineComponent({
name: "CommandConfig",
@ -181,20 +180,9 @@ export default defineComponent({
},
},
emits: ["update:modelValue"],
setup(props) {
const allQuickCommandTags = inject("allQuickCommandTags").filter(
(tag) => !["默认", "未分类", "搜索结果"].includes(tag)
);
const currentCommand = computed(() => props.modelValue);
return {
allQuickCommandTags,
currentCommand,
};
},
data() {
return {
commandManager: useCommandManager(),
isExpanded: false,
showIconPicker: false,
showMatchRuleJson: false,
@ -209,6 +197,14 @@ export default defineComponent({
};
},
computed: {
allQuickCommandTags() {
return this.commandManager.state.allQuickCommandTags.filter(
(tag) => !["默认", "未分类", "搜索结果"].includes(tag)
);
},
currentCommand() {
return this.modelValue;
},
commandTypesOptions() {
const options = Object.values(this.commandTypes);
return this.currentCommand.features.mainPush

70
src/components/menu/CommandManageMenu.vue
View File

@ -2,13 +2,21 @@
<q-menu anchor="top end" self="top start">
<q-list>
<!-- 导入 -->
<q-item clickable v-close-popup @click="importCommand(importCommandFromFile())">
<q-item
clickable
v-close-popup
@click="importCommand(importCommandFromFile())"
>
<q-item-section side>
<q-icon name="text_snippet" />
</q-item-section>
<q-item-section>从文件导入命令</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="importCommand(importCommandFromClipboard())">
<q-item
clickable
v-close-popup
@click="importCommand(importCommandFromClipboard())"
>
<q-item-section side>
<q-icon name="content_paste" />
</q-item-section>
@ -34,7 +42,12 @@
<q-item-section>禁用本页所有命令</q-item-section>
</q-item>
<!-- 清空 -->
<q-item style="color: red" clickable v-close-popup @click="clearAllCommands">
<q-item
style="color: red"
clickable
v-close-popup
@click="clearAllCommands"
>
<q-item-section side>
<q-icon name="delete" />
</q-item-section>
@ -45,16 +58,18 @@
</template>
<script>
import { useCommandManager } from "src/js/commandManager";
export default {
name: 'CommandManageMenu',
computed: {
configurationPage() {
return this.$root.$refs.view;
}
name: "CommandManageMenu",
data() {
return {
commandManager: useCommandManager(),
};
},
methods: {
importCommand(command) {
this.configurationPage.importCommand(command);
this.commandManager.importCommand(command);
},
importCommandFromFile() {
let options = {
@ -68,20 +83,39 @@ export default {
importCommandFromClipboard() {
return window.clipboardReadText();
},
exportAllCommands() {
this.configurationPage.exportAllCommands();
// 全部导出
exportAllCommands(saveAsFile = true) {
if (this.commandManager.exportAllCommands(saveAsFile)) {
quickcommand.showMessageBox("导出成功！");
}
},
// 清空
clearAllCommands() {
this.configurationPage.clearAllCommands();
quickcommand
.showConfirmBox("将会清空所有自定义命令，停用所有实用功能，请确认！")
.then((isConfirmed) => {
if (!isConfirmed) {
return quickcommand.showMessageBox("取消操作", "info");
}
this.commandManager.clearAllCommands();
quickcommand.showMessageBox(
"清空完毕，为防止误操作，已将所有命令复制到剪贴板，可通过导入命令恢复",
"success",
2000,
"bottom-right"
);
});
},
enableAllCommands() {
document.querySelectorAll('.q-toggle[aria-checked="false"]')
.forEach(x => x.click());
document
.querySelectorAll('.q-toggle[aria-checked="false"]')
.forEach((x) => x.click());
},
disableAllCommands() {
document.querySelectorAll('.q-toggle[aria-checked="true"]')
.forEach(x => x.click());
}
}
document
.querySelectorAll('.q-toggle[aria-checked="true"]')
.forEach((x) => x.click());
},
},
};
</script>

44
src/components/menu/index.vue
View File

@ -52,7 +52,12 @@
</q-item>
<!-- 收藏 -->
<q-item v-if="isTagStared" clickable v-close-popup @click="unMarkTag">
<q-item
v-if="activatedQuickPanels.includes(currentTag)"
clickable
v-close-popup
@click="unMarkTag"
>
<q-item-section side>
<q-icon name="star_border" />
</q-item-section>
@ -86,7 +91,10 @@
<AboutThis />
</q-dialog>
<q-dialog v-model="showPanelConf">
<PanelSetting :isTagStared="isTagStared" :currentTag="currentTag" />
<PanelSetting
:currentTag="currentTag"
@update-activated-quick-panels="activatedQuickPanels = $event"
/>
</q-dialog>
<q-dialog v-model="showUserData">
<UserData :showInsertBtn="false" />
@ -104,6 +112,7 @@ import EnvConfigMenu from "./EnvConfigMenu.vue";
import PersonalizeMenu from "./PersonalizeMenu.vue";
import UserData from "../popup/UserData.vue";
import { utoolsFull } from "js/utools.js";
import { useCommandManager } from "src/js/commandManager";
export default {
name: "ConfigurationMenu",
@ -119,35 +128,38 @@ export default {
},
data() {
return {
commandManager: useCommandManager(),
showAbout: false,
showPanelConf: false,
showUserData: false,
utools: utoolsFull,
};
},
props: {
isTagStared: Boolean,
currentTag: String,
},
computed: {
configurationPage() {
return this.$root.$refs.view;
activatedQuickPanels: {
get() {
return this.commandManager.state.activatedQuickPanels;
},
set(value) {
this.commandManager.state.activatedQuickPanels = value;
},
},
currentTag() {
return this.commandManager.state.currentTag;
},
allQuickCommandsLength() {
return Object.keys(this.configurationPage.allQuickCommands).length;
return Object.keys(this.commandManager.state.allQuickCommands).length;
},
allFeaturesLength() {
return this.configurationPage.activatedQuickCommandFeatureCodes.length;
return this.commandManager.state.activatedQuickCommandFeatureCodes.length;
},
},
methods: {
unMarkTag() {
this.utools.removeFeature(
`panel_${window.hexEncode(this.currentTag)}`
);
window.lodashM.pull(
this.$root.$refs.view.activatedQuickPanels,
this.currentTag
this.utools.removeFeature(`panel_${window.hexEncode(this.currentTag)}`);
const newPanels = [...this.activatedQuickPanels];
this.activatedQuickPanels = newPanels.filter(
(panel) => panel !== this.currentTag
);
quickcommand.showMessageBox("取消收藏成功");
},

3
src/components/popup/PanelSetting.vue
View File

@ -55,6 +55,7 @@ import { utoolsFull } from "js/utools.js";
export default {
components: { IconPicker },
emits: ["update-activated-quick-panels"],
data() {
return {
utools: utoolsFull,
@ -74,7 +75,7 @@ export default {
methods: {
markTag() {
this.utools.setFeature(window.lodashM.cloneDeep(this.features));
this.$root.$refs.view.activatedQuickPanels.push(this.currentTag);
this.$emit("update-activated-quick-panels", this.currentTag);
quickcommand.showMessageBox(
`主输入框输入『${this.features.cmds.join("、")}』即可直接进入『${
this.currentTag

16
src/js/commandManager.js
View File

@ -1,4 +1,4 @@
import { reactive } from "vue";
import { reactive, nextTick } from "vue";
import quickcommandParser from "js/common/quickcommandParser.js";
import importAll from "js/common/importAll.js";
import { utoolsFull, dbManager } from "js/utools.js";
@ -16,6 +16,8 @@ const state = reactive({
allQuickCommandTags: [],
activatedQuickCommandFeatureCodes: [],
activatedQuickPanels: [],
currentTag: "",
commandSearchKeyword: "",
});
const getCmdType = (cmds) => {
@ -238,6 +240,17 @@ export function useCommandManager() {
dbManager.delAll("qc_");
clearAllFeatures();
getAllQuickCommands();
state.currentTag = "默认";
};
// 修改并定位当前标签事件
const changeCurrentTag = (tagName) => {
state.currentTag = tagName;
nextTick(() => {
document.querySelector(".q-tab--active").scrollIntoView({
behavior: "smooth",
});
});
};
return {
@ -254,5 +267,6 @@ export function useCommandManager() {
getActivatedFeatures,
clearAllFeatures,
clearAllCommands,
changeCurrentTag,
};
}

202
src/pages/ConfigurationPage.vue
View File

@ -4,33 +4,16 @@
<div class="main-content">
<BackgroundLayer />
<!-- 标签栏 -->
<TagBar
v-model="currentTag"
:tab-bar-width="tabBarWidth"
:all-quick-command-tags="allQuickCommandTags"
:activated-quick-panels="activatedQuickPanels"
:dense-tag-bar="$root.profile.denseTagBar"
/>
<TagBar :tab-bar-width="tabBarWidth" />
<CommandPanels
v-model="currentTag"
:footer-bar-height="footerBarHeight"
:tab-bar-width="tabBarWidth"
:all-quick-command-tags="allQuickCommandTags"
:current-tag-quick-commands="currentTagQuickCommands"
:activated-quick-command-feature-codes="
activatedQuickCommandFeatureCodes
"
@command-changed="commandChanged"
@commands-reordered="handleCommandsReorder"
/>
<!-- 底栏 -->
<FooterBar
:height="footerBarHeight"
:left="tabBarWidth"
:is-tag-stared="activatedQuickPanels.includes(currentTag)"
:current-tag="currentTag"
:search-keyword="commandSearchKeyword"
@update:search="updateSearch"
@add-new="addNewCommand"
/>
</div>
@ -42,7 +25,6 @@
:is="commandEditorAction.component"
:action="commandEditorAction"
@editorEvent="editorEvent"
:allQuickCommandTags="allQuickCommandTags"
/>
</div>
</transition>
@ -59,7 +41,6 @@ import { defineAsyncComponent } from "vue";
import { useCommandManager } from "js/commandManager.js";
import changeLog from "js/options/changeLog.js";
import { utoolsFull, dbManager } from "js/utools.js";
import pinyinMatch from "pinyin-match";
import CommandEditor from "components/CommandEditor";
import ComposerEditor from "components/ComposerEditor";
import FooterBar from "src/components/config/FooterBar.vue";
@ -81,16 +62,10 @@ export default {
BackgroundLayer,
CommandPanels,
},
setup() {
const commandManager = useCommandManager();
return { commandManager };
},
data() {
return {
commandManager: useCommandManager(),
utools: utoolsFull,
currentTag: "",
lastTag: "",
commandSearchKeyword: "",
isEditorShow: false,
commandEditorAction: {},
footerBarHeight: "40px",
@ -103,62 +78,13 @@ export default {
allQuickCommandTags() {
return this.commandManager.state.allQuickCommandTags;
},
activatedQuickCommandFeatureCodes() {
return this.commandManager.state.activatedQuickCommandFeatureCodes;
},
activatedQuickPanels() {
return this.commandManager.state.activatedQuickPanels;
},
// 当前标签下的所有快捷命令
currentTagQuickCommands() {
let commands = Object.values(
window.lodashM.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 sortByOrder(
commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0)
);
case "搜索结果":
if (this.commandSearchKeyword?.length < 2) return;
let searchResult = [];
commands.forEach((cmd) => {
// 拼音搜索
let explain = cmd.features.explain;
let matchedWordPositions = pinyinMatch.match(
explain,
this.commandSearchKeyword
);
if (!matchedWordPositions) return;
let matchedWords = explain.slice(
matchedWordPositions[0],
matchedWordPositions[1] + 1
);
// 高亮
cmd.features.explain = explain.replace(
matchedWords,
`<strong style="color:#ed6237">${matchedWords}</strong>`
);
searchResult.push(cmd);
});
return searchResult;
case "默认":
return commands.filter((cmd) => cmd.tags?.includes(this.currentTag));
default:
return sortByOrder(
commands.filter((cmd) => cmd.tags?.includes(this.currentTag))
);
}
currentTag: {
get() {
return this.commandManager.state.currentTag;
},
set(value) {
this.commandManager.state.currentTag = value;
},
},
// 标签栏宽度
tabBarWidth() {
@ -189,16 +115,10 @@ export default {
}
this.showChangeLog();
// 异步读取
setTimeout(this.getActivatedFeatures, 0);
setTimeout(this.getAllQuickCommands, 0);
},
// 获取所有已启用的命令的 features 以及面板名称
getActivatedFeatures() {
this.commandManager.getActivatedFeatures();
},
// 获取所有的命令（导出的格式）
getAllQuickCommands() {
this.commandManager.getAllQuickCommands();
// 获取所有已启用的命令的 features 以及面板名称
setTimeout(this.commandManager.getActivatedFeatures(), 0);
// 获取所有的命令（导出的格式）
setTimeout(this.commandManager.getAllQuickCommands(), 0);
},
// 监听命令变更事件
commandChanged(event) {
@ -222,6 +142,9 @@ export default {
return;
}
},
changeCurrentTag(tagName) {
this.commandManager.changeCurrentTag(tagName);
},
runCommand(code) {
this.$refs.result.runCurrentCommand(this.allQuickCommands[code]);
},
@ -254,10 +177,6 @@ export default {
};
this.isEditorShow = true;
},
// 是否为默认命令
isDefaultCommand(code) {
return this.commandManager.isDefaultCommand(code);
},
// 导入命令
async importCommand(quickCommandInfo) {
const command = await this.commandManager.importCommand(quickCommandInfo);
@ -284,62 +203,6 @@ export default {
.scrollIntoView({ behavior: "smooth" });
});
},
// 修改并定位当前标签事件
changeCurrentTag(tagName) {
this.currentTag = tagName;
this.$nextTick(() => {
document
.querySelector(".q-tab--active")
.scrollIntoView({ behavior: "smooth" });
});
},
// 全部导出
exportAllCommands(saveAsFile = true) {
if (this.commandManager.exportAllCommands(saveAsFile)) {
quickcommand.showMessageBox("导出成功！");
}
},
// 清空
clearAllCommands() {
quickcommand
.showConfirmBox("将会清空所有自定义命令，停用所有实用功能，请确认！")
.then((isConfirmed) => {
if (!isConfirmed) {
return quickcommand.showMessageBox("取消操作", "info");
}
this.commandManager.clearAllCommands();
this.changeCurrentTag("默认");
quickcommand.showMessageBox(
"清空完毕，为防止误操作，已将所有命令复制到剪贴板，可通过导入命令恢复",
"success",
2000,
"bottom-right"
);
});
},
// 删除所有 features
clearAllFeatures() {
this.commandManager.clearAllFeatures();
},
// 搜索方法
updateSearch(value) {
this.commandSearchKeyword = value;
// 记录当前标签页
let searchTagName = "搜索结果";
if (this.currentTag !== searchTagName) this.lastTag = this.currentTag;
if (this.commandSearchKeyword?.length > 1) {
if (!this.allQuickCommandTags.includes(searchTagName))
this.allQuickCommandTags.push(searchTagName);
// 搜索时跳转到搜索结果标签
this.changeCurrentTag(searchTagName);
} else {
// 清空搜索回跳到之前标签
if (this.allQuickCommandTags.slice(-1)[0] === searchTagName)
this.allQuickCommandTags.pop();
if (this.currentTag !== this.lastTag)
this.changeCurrentTag(this.lastTag);
}
},
// 新建命令
addNewCommand(component = "CommandEditor") {
this.commandEditorAction = {
@ -369,8 +232,7 @@ export default {
showChangeLog() {
let lastNeedLogEvent = changeLog[changeLog.length - 1];
let loggedVersion =
this.utools.dbStorage.getItem("cfg_loggedVersion") ||
"0.0.0";
this.utools.dbStorage.getItem("cfg_loggedVersion") || "0.0.0";
if (loggedVersion < lastNeedLogEvent.version) {
quickcommand.showConfirmBox(
'<pre style="white-space: pre-wrap;word-wrap: break-word;">' +
@ -386,36 +248,6 @@ export default {
);
}
},
handleCommandsReorder({ tag, commands }) {
// 更新当前tag下的命令顺序
const tagCommands = {};
commands.forEach((command, index) => {
tagCommands[command.features.code] = {
...command,
order: index, // 添加排序信息
};
});
// 更新存储
this.commandManager.state.allQuickCommands = {
...this.allQuickCommands,
...tagCommands,
};
// 只保存被修改的命令
this.saveCurrentTagOrderedCommand(tagCommands);
},
saveCurrentTagOrderedCommand(tagCommands) {
// 只保存被修改的命令
Object.entries(tagCommands).forEach(([code, command]) => {
if (!this.isDefaultCommand(code)) {
dbManager.putDB(
window.lodashM.cloneDeep(command),
"qc_" + code
);
}
});
},
},
};
</script>