mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-15 18:56:57 +08:00
重构了CommandComposer和FlowTabs组件:移除了未使用的方法并简化了变量管理。更新了变量名称生成逻辑以提高清晰度和一致性。
This commit is contained in:
parent
31e9ca6956
commit
26fd4f5e19
@ -4,7 +4,7 @@
|
|||||||
<div class="composer-body row no-wrap">
|
<div class="composer-body row no-wrap">
|
||||||
<!-- 左侧命令列表 -->
|
<!-- 左侧命令列表 -->
|
||||||
<div class="command-section" style="width: 180px">
|
<div class="command-section" style="width: 180px">
|
||||||
<ComposerList :commands="availableCommands" @add-command="addCommand" />
|
<ComposerList :commands="availableCommands" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 右侧命令流程 -->
|
<!-- 右侧命令流程 -->
|
||||||
@ -22,11 +22,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, provide, ref } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import ComposerList from "./ComposerList.vue";
|
import ComposerList from "./ComposerList.vue";
|
||||||
import FlowTabs from "./FlowTabs.vue";
|
import FlowTabs from "./FlowTabs.vue";
|
||||||
import { availableCommands } from "js/composer/composerConfig";
|
import { availableCommands } from "js/composer/composerConfig";
|
||||||
import { parseVariables } from "js/composer/variableManager";
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "CommandComposer",
|
name: "CommandComposer",
|
||||||
@ -34,36 +33,6 @@ export default defineComponent({
|
|||||||
ComposerList,
|
ComposerList,
|
||||||
FlowTabs,
|
FlowTabs,
|
||||||
},
|
},
|
||||||
setup() {
|
|
||||||
const commandFlow = ref([]);
|
|
||||||
|
|
||||||
// 提供获取当前变量的函数,直接返回解析后的变量列表
|
|
||||||
const getCurrentVariables = () => {
|
|
||||||
const variables = [];
|
|
||||||
for (const [index, cmd] of commandFlow.value.entries()) {
|
|
||||||
if (cmd.saveOutput && cmd.outputVariable) {
|
|
||||||
variables.push(
|
|
||||||
...parseVariables(cmd.outputVariable).map((variable) => ({
|
|
||||||
name: variable,
|
|
||||||
// 提供来源命令的标志信息
|
|
||||||
sourceCommand: {
|
|
||||||
label: cmd.label,
|
|
||||||
id: cmd.id,
|
|
||||||
index,
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return variables;
|
|
||||||
};
|
|
||||||
|
|
||||||
provide("getCurrentVariables", getCurrentVariables);
|
|
||||||
|
|
||||||
return {
|
|
||||||
commandFlow,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
availableCommands,
|
availableCommands,
|
||||||
@ -78,15 +47,6 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
emits: ["use-composer"],
|
emits: ["use-composer"],
|
||||||
methods: {
|
methods: {
|
||||||
addCommand(action) {
|
|
||||||
let newAction = window.lodashM.cloneDeep(action);
|
|
||||||
this.commandFlow.push({
|
|
||||||
...newAction,
|
|
||||||
id: this.$root.getUniqueId(),
|
|
||||||
saveOutput: false,
|
|
||||||
outputVariable: null,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleComposer(type, code) {
|
handleComposer(type, code) {
|
||||||
// 直接转发事件和代码
|
// 直接转发事件和代码
|
||||||
this.$emit("use-composer", { type, code });
|
this.$emit("use-composer", { type, code });
|
||||||
|
@ -93,14 +93,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, provide, ref } from "vue";
|
import { defineComponent, provide, ref, computed } from "vue";
|
||||||
import ComposerFlow from "./ComposerFlow.vue";
|
import ComposerFlow from "./ComposerFlow.vue";
|
||||||
import ComposerButtons from "./flow/ComposerButtons.vue";
|
import ComposerButtons from "./flow/ComposerButtons.vue";
|
||||||
import { generateCode } from "js/composer/generateCode";
|
import { generateCode } from "js/composer/generateCode";
|
||||||
import { findCommandByValue } from "js/composer/composerConfig";
|
import { findCommandByValue } from "js/composer/composerConfig";
|
||||||
import { generateUniqSuffix } from "js/composer/variableManager";
|
import { generateUniqSuffix } from "js/composer/variableManager";
|
||||||
import draggable from "vuedraggable";
|
import draggable from "vuedraggable";
|
||||||
|
import { parseVariables } from "js/composer/variableManager";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "FlowTabs",
|
name: "FlowTabs",
|
||||||
components: {
|
components: {
|
||||||
@ -115,7 +115,16 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
|
const mainFlow = ref({
|
||||||
|
id: "main",
|
||||||
|
name: "main",
|
||||||
|
label: "主流程",
|
||||||
|
commands: [],
|
||||||
|
});
|
||||||
|
|
||||||
const subFlows = ref([]);
|
const subFlows = ref([]);
|
||||||
|
|
||||||
|
// 获取所有函数
|
||||||
const getCurrentFunctions = () => {
|
const getCurrentFunctions = () => {
|
||||||
return subFlows.value.map((flow) => {
|
return subFlows.value.map((flow) => {
|
||||||
return {
|
return {
|
||||||
@ -125,31 +134,42 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
provide("getCurrentFunctions", getCurrentFunctions);
|
provide("getCurrentFunctions", getCurrentFunctions);
|
||||||
return { subFlows };
|
|
||||||
|
const flows = computed(() => [mainFlow.value, ...subFlows.value]);
|
||||||
|
|
||||||
|
const activeTab = ref("main");
|
||||||
|
|
||||||
|
// 获取当前函数所有变量
|
||||||
|
const getCurrentVariables = () => {
|
||||||
|
const variables = [];
|
||||||
|
const currentFlow = flows.value.find((flow) => flow.id === activeTab.value);
|
||||||
|
for (const [index, cmd] of currentFlow.commands.entries()) {
|
||||||
|
if (cmd.saveOutput && cmd.outputVariable) {
|
||||||
|
variables.push(
|
||||||
|
...parseVariables(cmd.outputVariable).map((variable) => ({
|
||||||
|
name: variable,
|
||||||
|
// 提供来源命令的标志信息
|
||||||
|
sourceCommand: {
|
||||||
|
label: cmd.label,
|
||||||
|
id: cmd.id,
|
||||||
|
index,
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return variables;
|
||||||
|
};
|
||||||
|
|
||||||
|
provide("getCurrentVariables", getCurrentVariables);
|
||||||
|
|
||||||
|
return { flows, mainFlow, subFlows, activeTab };
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeTab: "main",
|
|
||||||
isAllCollapsed: false,
|
isAllCollapsed: false,
|
||||||
mainFlow: {
|
|
||||||
id: "main",
|
|
||||||
name: "main",
|
|
||||||
label: "主流程",
|
|
||||||
commands: [],
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
flows: {
|
|
||||||
get() {
|
|
||||||
return [this.mainFlow, ...this.subFlows];
|
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.mainFlow = value[0];
|
|
||||||
this.subFlows = value.slice(1);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
generateFlowName(baseName = "func_") {
|
generateFlowName(baseName = "func_") {
|
||||||
return (
|
return (
|
||||||
@ -240,7 +260,7 @@ export default defineComponent({
|
|||||||
if (!savedFlows) return;
|
if (!savedFlows) return;
|
||||||
|
|
||||||
const flowsData = JSON.parse(savedFlows);
|
const flowsData = JSON.parse(savedFlows);
|
||||||
this.flows = flowsData.map((flow) => ({
|
const newFlows = flowsData.map((flow) => ({
|
||||||
...flow,
|
...flow,
|
||||||
commands: flow.commands.map((cmd) => {
|
commands: flow.commands.map((cmd) => {
|
||||||
const command = findCommandByValue(cmd.value);
|
const command = findCommandByValue(cmd.value);
|
||||||
@ -250,7 +270,9 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
}));
|
}));
|
||||||
this.activeTab = this.flows[0].id;
|
this.mainFlow = newFlows[0];
|
||||||
|
this.subFlows = newFlows.slice(1);
|
||||||
|
this.activeTab = this.mainFlow.id;
|
||||||
},
|
},
|
||||||
runFlows(flow) {
|
runFlows(flow) {
|
||||||
const code = flow
|
const code = flow
|
||||||
|
@ -50,7 +50,7 @@ export function parseVariables(value) {
|
|||||||
* @param {string} [currentName] - 当前的变量名(如果有)
|
* @param {string} [currentName] - 当前的变量名(如果有)
|
||||||
* @returns {string} 有效的变量名
|
* @returns {string} 有效的变量名
|
||||||
*/
|
*/
|
||||||
function generateValidVarName(baseName, existingVars, currentName = null) {
|
function generateValidVarName(currentName, existingVars) {
|
||||||
// 如果当前名称有效且不重复,直接返回
|
// 如果当前名称有效且不重复,直接返回
|
||||||
if (
|
if (
|
||||||
currentName &&
|
currentName &&
|
||||||
@ -60,13 +60,13 @@ function generateValidVarName(baseName, existingVars, currentName = null) {
|
|||||||
return currentName;
|
return currentName;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果变量名无效,生成一个随机变量名
|
// 如果变量名无效,改为var开头
|
||||||
if (!validateVariableName(baseName).isValid) {
|
if (!validateVariableName(currentName).isValid) {
|
||||||
baseName = "var" + generateRandomSuffix(existingVars.length);
|
currentName = "var";
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果变量名重复,添加随机后缀直到不重复
|
// 添加随机后缀直到不重复
|
||||||
let finalName = baseName + generateUniqSuffix(baseName, existingVars);
|
let finalName = currentName + generateUniqSuffix(currentName, existingVars);
|
||||||
|
|
||||||
return finalName;
|
return finalName;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user