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

优化减少组件间数组传递

Browse Source
This commit is contained in:
fofolee 2025-02-15 23:04:55 +08:00
parent 49631ac60d
commit ddd1fc11d7
12 changed files with 167 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/App.vue
View File

@ -11,6 +11,7 @@
import { defineComponent } from "vue";
import { setCssVar } from "quasar";
import { utoolsFull, dbManager } from "./js/utools.js";
import { useCommandManager } from "./js/commandManager.js";
import programmings from "./js/options/programs.js";
import defaultProfile from "./js/options/defaultProfile.js";
import Cron from "croner";
@ -22,6 +23,7 @@ export default defineComponent({
name: "App",
data() {
return {
commandManager: useCommandManager(),
setCssVar: setCssVar,
programs: programmings,
isRunningCommand: false,
@ -65,7 +67,7 @@ export default defineComponent({
});
window.isAppVersion4() &&
this.utools.onMainPush(
async ({ code, type, payload }) => {
async ({ code, payload }) => {
let result = await this.runCommand(code, payload, 5000);
return result.map((x) => {
return {
@ -73,7 +75,7 @@ export default defineComponent({
};
});
},
({ code, type, payload, option }) => {
({ option }) => {
window.quickcommand.writeClipboard(option.text);
window.utools.showNotification("已复制");
}
@ -97,10 +99,7 @@ export default defineComponent({
);
},
saveProfile() {
dbManager.putDB(
window.lodashM.cloneDeep(this.profile),
"cfg_profile"
);
dbManager.putDB(window.lodashM.cloneDeep(this.profile), "cfg_profile");
dbManager.putDB(
window.lodashM.cloneDeep(this.nativeProfile),
"cfg_" + utools.getNativeId() + "_profile"
@ -124,19 +123,21 @@ export default defineComponent({
}
},
enterPlugin(enter) {
// 使用情况统计
// this.usageStatistics(enter.code, this.parseDate(new Date()));
this.updateExp();
this.$q.dark.set(utools.isDarkColors());
this.enterData = enter;
// 自动分离目前还没有好的方案
// if (this.$root.profile.autoDetachFeatures?.includes(enter.code)) {
// autoDetach.autoDetach();
// }
this.$router.push(enter.code);
},
outPlugin() {
this.$refs.view.$refs?.commandEditor?.saveCodeHistory();
// 退出时保存RunCode和RunComposer的命令
if (!["code", "composer"].includes(this.$route.name)) return;
const currentCommand = window.lodashM.cloneDeep(
this.commandManager.state.currentCommand
);
dbManager.putDB(currentCommand, `cfg_${this.$route.name}History`);
this.$router.push("/");
this.saveProfile();
},

123
src/components/CommandEditor.vue
View File

@ -2,28 +2,27 @@
<div class="command-editor">
<!-- 编程语言栏 -->
<CommandLanguageBar
v-model="quickcommandInfo"
v-model="commandManager.state.currentCommand"
:canCommandSave="canCommandSave"
:isRunCodePage="isRunCodePage"
@action="handleAction"
/>
<!-- 命令设置栏 -->
<CommandConfig
v-if="!isRunCodePage"
:model-value="commandConfig"
v-model="commandManager.state.currentCommand"
@update:is-expanded="isConfigExpanded = $event"
:expand-on-focus="true"
class="command-config"
@update:model-value="updateCommandConfig"
/>
<!-- 编辑器 -->
<CodeEditor
v-model="quickcommandInfo.cmd"
v-model="commandManager.state.currentCommand.cmd"
v-model:cursor-position="
commandManager.state.currentCommand.cursorPosition
"
:language="getLanguage()"
:cursor-position="quickcommandInfo.cursorPosition"
@update:cursor-position="quickcommandInfo.cursorPosition = $event"
placeholder="请输入代码"
class="codeEditor"
ref="editor"
@ -34,7 +33,7 @@
<EditorTools
ref="editorTools"
v-show="!isConfigExpanded"
:commandCode="quickcommandInfo?.features?.code || 'temp'"
:commandCode="currentCommand.features?.code || 'temp'"
@restore="restoreHistory"
/>
@ -49,7 +48,7 @@
</q-dialog>
<!-- 运行结果 -->
<CommandRunResult :action="action" ref="result"></CommandRunResult>
<CommandRunResult ref="result"></CommandRunResult>
</template>
<script>
@ -61,6 +60,7 @@ import CommandRunResult from "components/CommandRunResult";
import CommandComposer from "components/composer/CommandComposer.vue";
import programs from "js/options/programs.js";
import { dbManager } from "js/utools.js";
import { useCommandManager } from "js/commandManager.js";
// 预加载 MonacoEditor
const CodeEditorPromise = import("components/editor/CodeEditor.vue");
@ -102,64 +102,23 @@ export default {
},
};
},
props: {
action: {
type: Object,
required: true,
},
},
setup(props) {
const isRunCodePage = ref(props.action.type === "run");
const canCommandSave = ref(!isRunCodePage.value);
setup() {
const commandManager = useCommandManager();
const commandAction = window.lodashM.cloneDeep(props.action);
const savedCommand = isRunCodePage.value
? dbManager.getDB("cfg_codeHistory")
: commandAction.data || {};
const defaultCommand = commandManager.getDefaultCommand("quickcommand");
const defaultCommand = {
program: "quickcommand",
features: {
icon: programs.quickcommand.icon,
explain: "",
platform: ["win32", "linux", "darwin"],
mainPush: false,
cmds: [],
},
output: "text",
tags: [],
cmd: "",
scptarg: "",
charset: {
scriptCode: "",
outputCode: "",
},
customOptions: {
bin: "",
argv: "",
ext: "",
},
};
const quickcommandInfo = ref({
commandManager.state.currentCommand = {
...defaultCommand,
...savedCommand,
});
...commandManager.state.currentCommand,
};
// 默认命令不可编辑
if (quickcommandInfo.value.tags?.includes("默认") && !utools.isDev()) {
canCommandSave.value = false;
}
const commandConfig = computed(() => {
const { tags, output, features, program } = quickcommandInfo.value;
return { tags, output, features, program };
const currentCommand = computed(() => {
return commandManager.state.currentCommand;
});
return {
quickcommandInfo,
isRunCodePage,
canCommandSave,
commandConfig,
commandManager,
currentCommand,
};
},
mounted() {
@ -169,6 +128,17 @@ export default {
beforeUnmount() {
document.removeEventListener("keydown", this.handleKeydown);
},
computed: {
isRunCodePage() {
return this.$route.name === "code";
},
canCommandSave() {
if (this.isRunCodePage) return false;
if (window.utools.isDev()) return true;
if (this.currentCommand.tags?.includes("默认")) return false;
return true;
},
},
methods: {
handleComposerAction(actionType, actionData) {
switch (actionType) {
@ -179,7 +149,7 @@ export default {
case "apply":
// actionData 命令的cmd
this.showComposer = false;
this.quickcommandInfo.cmd = actionData;
this.commandManager.state.currentCommand.cmd = actionData;
this.$refs.editor.formatDocument();
break;
case "close":
@ -189,22 +159,17 @@ export default {
},
// 保存
saveCurrentCommand() {
this.$emit("editorEvent", "save", this.quickcommandInfo);
this.$emit("editorEvent", "save", this.currentCommand);
this.saveToHistory(); // 保存时记录历史
},
// 运行
runCurrentCommand(command) {
if (!command) {
this.saveToHistory(); // 运行时不保存但记录历史
command = { ...this.quickcommandInfo };
command = { ...this.currentCommand };
}
this.$refs.result.runCurrentCommand(command);
},
saveCodeHistory() {
if (!this.isRunCodePage) return;
let command = window.lodashM.cloneDeep(this.quickcommandInfo);
dbManager.putDB(command, "cfg_codeHistory");
},
handleAction(event, data) {
switch (event) {
case "run":
@ -228,8 +193,8 @@ export default {
},
saveToHistory() {
this.$refs.editorTools.tryToSave(
this.quickcommandInfo.cmd,
this.quickcommandInfo.program
this.currentCommand.cmd,
this.currentCommand.program
);
},
restoreHistory(item) {
@ -237,22 +202,16 @@ export default {
this.saveToHistory();
// 恢复历史内容
this.quickcommandInfo.cmd = item.content;
this.quickcommandInfo.program = item.program;
},
updateCommandConfig(value) {
this.quickcommandInfo = {
...this.quickcommandInfo,
...value,
};
this.currentCommand.cmd = item.content;
this.currentCommand.program = item.program;
},
getLanguage() {
if (this.quickcommandInfo.program !== "custom") {
return this.quickcommandInfo.program;
if (this.currentCommand.program !== "custom") {
return this.currentCommand.program;
}
if (!this.quickcommandInfo.customOptions.ext) return;
if (!this.currentCommand.customOptions.ext) return;
let language = Object.values(programs).find(
(program) => program.ext === this.quickcommandInfo.customOptions.ext
(program) => program.ext === this.currentCommand.customOptions.ext
);
if (!language) return;
return language.name;

14
src/components/CommandRunResult.vue
View File

@ -100,22 +100,12 @@ export default {
/^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/,
};
},
props: {
/**
* run： 「RunCode界面」 无侧栏，运行结果弹窗显示，保存命令历史
* edit： 「编辑命令界面』 有侧栏，运行结果弹窗显示，需要对payload临时赋值
* new： 『新建命令界面」 有侧栏，运行结果弹窗显示，需要对payload临时赋值
* config： 「配置界面』 运行结果弹窗显示，需要对payload临时赋值
* input： 『主输入框进入」 运行结果直接展示，动态调整窗体高度
*/
action: Object,
},
computed: {
fromUtools() {
return this.action.type === "input";
return this.$route.name === "command";
},
needTempPayload() {
return ["edit", "new", "config"].includes(this.action.type);
return !["command", "code", "composer"].includes(this.$route.name);
},
maxHeight() {
return this.fromUtools ? 600 : 400;

60
src/components/ComposerEditor.vue
View File

@ -2,27 +2,29 @@
<CommandComposer
ref="composer"
@action="handleComposerAction"
v-model="quickcommandInfo"
v-model="commandManager.state.currentCommand"
:disabled-control-buttons="disabledControlButtons"
class="fixed-full"
/>
<!-- 运行结果 -->
<CommandRunResult :action="action" ref="result"></CommandRunResult>
<CommandRunResult ref="result"></CommandRunResult>
</template>
<script>
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 { ref, computed } from "vue";
import { useCommandManager } from "js/commandManager.js";
export default {
components: { CommandComposer, CommandRunResult },
setup(props) {
setup() {
const commandManager = useCommandManager();
const retoreToFullCommand = (command) => {
const { flows } = command;
if (!flows) return command;
const newCommand = window.lodashM.cloneDeep(command);
const { flows } = newCommand;
if (!flows) return newCommand;
const newFlows = flows.map((flow) => ({
...flow,
commands: flow.commands.map((cmd) => {
@ -71,45 +73,25 @@ export default {
};
};
const commandAction = window.lodashM.cloneDeep(props.action);
const savedCommand = commandAction.data || {};
const defaultCommand = {
program: "quickcomposer",
features: {
icon: programs.quickcommand.icon,
explain: "",
platform: ["win32", "linux", "darwin"],
mainPush: false,
cmds: [],
},
flows: [],
output: "text",
tags: [],
};
const quickcommandInfo = ref({
const defaultCommand = commandManager.getDefaultCommand("quickcomposer");
commandManager.state.currentCommand = {
...defaultCommand,
...retoreToFullCommand(savedCommand),
});
const isRunComposePage = computed(() => {
return props.action.type === "composer";
});
const disabledControlButtons = computed(() => {
return isRunComposePage.value ? ["close", "save", "apply"] : ["apply"];
});
...retoreToFullCommand(commandManager.state.currentCommand),
};
return {
quickcommandInfo,
commandManager,
getLitedComposerCommand,
disabledControlButtons,
};
},
emits: ["editorEvent"],
props: {
action: {
type: Object,
required: true,
computed: {
isRunComposerPage() {
return this.$route.name === "composer";
},
disabledControlButtons() {
return this.isRunComposerPage ? ["close", "save", "apply"] : ["apply"];
},
},
methods: {

10
src/components/composer/FlowTabs.vue
View File

@ -74,7 +74,7 @@
>
<CommandConfig
class="command-config-panel"
v-if="flow.id === 'main' && commandConfig.features"
v-if="flow.id === 'main' && showCommandConfig"
:model-value="commandConfig"
@update:model-value="updateCommandConfig"
/>
@ -267,6 +267,14 @@ export default defineComponent({
outputVariables: [],
};
},
computed: {
isRunComposerPage() {
return this.$route.name === "composer";
},
showCommandConfig() {
return !this.isRunComposerPage && this.commandConfig.features;
},
},
methods: {
generateFlowName(baseName = "func_") {
return (

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

@ -77,7 +77,7 @@
<q-btn
split
flat
@click="$emit('add-new', 'CommandEditor')"
@click="$emit('add-new', 'quickcommand')"
color="primary"
class="new-btn"
>
@ -87,7 +87,7 @@
<q-btn
split
flat
@click="$emit('add-new', 'ComposerEditor')"
@click="$emit('add-new', 'quickcomposer')"
color="primary"
class="new-btn"
>

7
src/components/editor/CommandLanguageBar.vue
View File

@ -238,10 +238,6 @@ export default {
type: Boolean,
default: true,
},
isRunCodePage: {
type: Boolean,
default: false,
},
},
emits: ["update:modelValue", "action"],
components: {
@ -261,6 +257,9 @@ export default {
currentCommand() {
return this.modelValue;
},
isRunCodePage() {
return this.$route.name === "code";
},
},
methods: {
handleProgramChange(newProgram) {

35
src/js/commandManager.js
View File

@ -3,6 +3,7 @@ import quickcommandParser from "js/common/quickcommandParser.js";
import importAll from "js/common/importAll.js";
import { utoolsFull, dbManager } from "js/utools.js";
import { getUniqueId } from "js/common/uuid.js";
import programs from "js/options/programs.js";
import outputTypes from "js/options/outputTypes.js";
// 默认命令
@ -18,6 +19,7 @@ const state = reactive({
activatedQuickPanels: [],
currentTag: "",
commandSearchKeyword: "",
currentCommand: {},
});
const getCmdType = (cmds) => {
@ -253,6 +255,38 @@ export function useCommandManager() {
});
};
const getDefaultCommand = (program = "quickcommand") => {
const quickcomposerCommand = {
program,
features: {
icon: programs.quickcommand.icon,
explain: "",
platform: ["win32", "linux", "darwin"],
mainPush: false,
cmds: [],
},
output: "text",
tags: [],
};
const quickcommandCommand = {
...quickcomposerCommand,
cmd: "",
scptarg: "",
charset: {
scriptCode: "",
outputCode: "",
},
customOptions: {
bin: "",
argv: "",
ext: "",
},
};
return program === "quickcomposer"
? quickcomposerCommand
: quickcommandCommand;
};
return {
state,
getAllQuickCommands,
@ -268,5 +302,6 @@ export function useCommandManager() {
clearAllFeatures,
clearAllCommands,
changeCurrentTag,
getDefaultCommand,
};
}

6
src/pages/CommandPage.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<CommandRunResult :action="action" ref="result"></CommandRunResult>
<CommandRunResult ref="result"></CommandRunResult>
</div>
</template>
@ -13,10 +13,6 @@ export default {
data() {
return {
utools: utoolsFull,
action: {
type: "input",
data: {},
},
featureCode: this.$route.path.slice(1),
};
},

42
src/pages/ConfigurationPage.vue
View File

@ -21,18 +21,11 @@
<!-- 命令编辑界面 -->
<transition name="slide">
<div v-if="isEditorShow" class="editor-container">
<component
:is="commandEditorAction.component"
:action="commandEditorAction"
@editorEvent="handleEditorEvent"
/>
<component :is="editorComponent" @editorEvent="handleEditorEvent" />
</div>
</transition>
<CommandRunResult
:action="{ type: 'config' }"
ref="result"
></CommandRunResult>
<CommandRunResult ref="result"></CommandRunResult>
</div>
</template>
@ -69,6 +62,7 @@ export default {
isEditorShow: false,
commandEditorAction: {},
footerBarHeight: "40px",
editorComponent: "CommandEditor",
};
},
computed: {
@ -170,18 +164,19 @@ export default {
typeof commandOrCode === "string"
? this.allQuickCommands[commandOrCode]
: commandOrCode;
this.commandEditorAction = {
type: "edit",
data: window.lodashM.cloneDeep(command),
component: command.flows ? "ComposerEditor" : "CommandEditor",
};
this.editorComponent =
command.program === "quickcomposer"
? "ComposerEditor"
: "CommandEditor";
this.commandManager.state.currentCommand =
window.lodashM.cloneDeep(command);
this.isEditorShow = true;
},
// 导入命令
async importCommand(quickCommandInfo) {
const command = await this.commandManager.importCommand(quickCommandInfo);
if (command) {
this.locateToCommand(command.tags, command.features?.code);
async importCommand(command) {
const result = await this.commandManager.importCommand(command);
if (result) {
this.locateToCommand(result.tags, result.features?.code);
}
},
// 定位命令, 包含changeCurrentTag
@ -204,12 +199,11 @@ export default {
});
},
// 新建命令
addNewCommand(component = "CommandEditor") {
this.commandEditorAction = {
type: "new",
data: {},
component,
};
addNewCommand(program = "quickcommand") {
this.editorComponent =
program === "quickcomposer" ? "ComposerEditor" : "CommandEditor";
this.commandManager.state.currentCommand =
this.commandManager.getDefaultCommand(program);
this.isEditorShow = true;
},
saveCommand(command) {

17
src/pages/RunCodePage.vue
View File

@ -1,18 +1,21 @@
<template>
<CommandEditor ref="commandEditor" :action="action" />
<CommandEditor />
</template>
<script>
import CommandEditor from "components/CommandEditor";
import { dbManager } from "js/utools.js";
import { useCommandManager } from "js/commandManager.js";
export default {
components: { CommandEditor },
data() {
return {
action: {
type: "run",
data: {},
},
setup() {
const commandManager = useCommandManager();
const savedCommand = dbManager.getDB("cfg_codeHistory");
const defaultCommand = commandManager.getDefaultCommand("quickcommand");
commandManager.state.currentCommand = {
...defaultCommand,
...savedCommand,
};
},
};

18
src/pages/RunComposerPage.vue
View File

@ -1,20 +1,24 @@
<template>
<div>
<ComposerEditor :action="action"></ComposerEditor>
<ComposerEditor />
</div>
</template>
<script>
import ComposerEditor from "components/ComposerEditor";
import { dbManager } from "js/utools.js";
import { useCommandManager } from "js/commandManager.js";
export default {
components: { ComposerEditor },
data() {
return {
action: {
type: "composer",
data: {},
},
setup() {
const commandManager = useCommandManager();
const savedCommand = dbManager.getDB("cfg_composerHistory");
const defaultCommand = commandManager.getDefaultCommand("quickcomposer");
commandManager.state.currentCommand = {
...defaultCommand,
...savedCommand,
program: "quickcomposer",
};
},
};