mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-28 20:02:44 +08:00
增强 FlowTabs 和变量管理：引入了 VariableManager 组件以更好地处理变量，更新了 ComposerFlow 以支持自定义变量，并改进了 VariableList 中的变量选择界面。增加了切换变量管理的功能，并调整了代码生成以包含参数和局部变量。
This commit is contained in:
fofolee
parent
26fd4f5e19
commit
839ea69921
@ -77,17 +77,28 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flow-container">
|
||||
<div
|
||||
class="flow-container"
|
||||
v-for="flow in flows"
|
||||
:key="flow.id"
|
||||
v-show="activeTab === flow.id"
|
||||
>
|
||||
<ComposerFlow
|
||||
v-for="flow in flows"
|
||||
v-show="activeTab === flow.id"
|
||||
:key="flow.id"
|
||||
class="flow-wrapper"
|
||||
v-model="flow.commands"
|
||||
:generate-code="() => generateFlowCode(flow)"
|
||||
:show-close-button="flows.length > 1"
|
||||
@action="(type, payload) => handleAction(type, payload)"
|
||||
ref="flowRefs"
|
||||
/>
|
||||
<VariableManager
|
||||
v-model="showVariableManager"
|
||||
:variables="flow.customVariables"
|
||||
@update:variables="flow.customVariables = $event"
|
||||
:is-main-flow="flow.id === 'main'"
|
||||
:output-variables="outputVariables"
|
||||
class="variable-panel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -96,6 +107,7 @@
|
||||
import { defineComponent, provide, ref, computed } from "vue";
|
||||
import ComposerFlow from "./ComposerFlow.vue";
|
||||
import ComposerButtons from "./flow/ComposerButtons.vue";
|
||||
import VariableManager from "./flow/VariableManager.vue";
|
||||
import { generateCode } from "js/composer/generateCode";
|
||||
import { findCommandByValue } from "js/composer/composerConfig";
|
||||
import { generateUniqSuffix } from "js/composer/variableManager";
|
||||
@ -107,6 +119,7 @@ export default defineComponent({
|
||||
ComposerFlow,
|
||||
ComposerButtons,
|
||||
draggable,
|
||||
VariableManager,
|
||||
},
|
||||
props: {
|
||||
showCloseButton: {
|
||||
@ -120,6 +133,7 @@ export default defineComponent({
|
||||
name: "main",
|
||||
label: "主流程",
|
||||
commands: [],
|
||||
customVariables: [],
|
||||
});
|
||||
|
||||
const subFlows = ref([]);
|
||||
@ -130,6 +144,7 @@ export default defineComponent({
|
||||
return {
|
||||
label: flow.label,
|
||||
value: flow.name,
|
||||
id: flow.id,
|
||||
};
|
||||
});
|
||||
};
|
||||
@ -139,11 +154,14 @@ export default defineComponent({
|
||||
|
||||
const activeTab = ref("main");
|
||||
|
||||
// 获取当前函数所有变量
|
||||
const getCurrentVariables = () => {
|
||||
const getCurrentFlow = () => {
|
||||
return flows.value.find((flow) => flow.id === activeTab.value);
|
||||
};
|
||||
|
||||
// 获取当前函数所有输出变量
|
||||
const getOutputVariables = (flow = getCurrentFlow()) => {
|
||||
const variables = [];
|
||||
const currentFlow = flows.value.find((flow) => flow.id === activeTab.value);
|
||||
for (const [index, cmd] of currentFlow.commands.entries()) {
|
||||
for (const [index, cmd] of flow.commands.entries()) {
|
||||
if (cmd.saveOutput && cmd.outputVariable) {
|
||||
variables.push(
|
||||
...parseVariables(cmd.outputVariable).map((variable) => ({
|
||||
@ -154,6 +172,7 @@ export default defineComponent({
|
||||
id: cmd.id,
|
||||
index,
|
||||
},
|
||||
type: "output",
|
||||
}))
|
||||
);
|
||||
}
|
||||
@ -161,13 +180,48 @@ export default defineComponent({
|
||||
return variables;
|
||||
};
|
||||
|
||||
const getFunctionParams = (flowId) => {
|
||||
const flow = flows.value.find((f) => f.id === flowId);
|
||||
return flow.customVariables.filter((v) => v.type === "param");
|
||||
};
|
||||
|
||||
provide("getFunctionParams", getFunctionParams);
|
||||
|
||||
/**
|
||||
* 获取当前函数所有变量
|
||||
* 返回格式：
|
||||
* [
|
||||
* { name: "变量名", type: "变量类型", sourceCommand: { label: "变量来源" , index?: 来源命令索引, id?: 来源命令id} }
|
||||
* ]
|
||||
*/
|
||||
const getCurrentVariables = () => {
|
||||
const currentFlow = getCurrentFlow();
|
||||
const variables = getOutputVariables(currentFlow);
|
||||
const customVariables = currentFlow.customVariables.map((v) => ({
|
||||
name: v.name,
|
||||
type: v.type,
|
||||
sourceCommand: {
|
||||
label: v.type === "param" ? "函数参数" : "局部变量",
|
||||
},
|
||||
}));
|
||||
return [...customVariables, ...variables];
|
||||
};
|
||||
|
||||
provide("getCurrentVariables", getCurrentVariables);
|
||||
|
||||
return { flows, mainFlow, subFlows, activeTab };
|
||||
return {
|
||||
flows,
|
||||
mainFlow,
|
||||
subFlows,
|
||||
activeTab,
|
||||
getOutputVariables,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAllCollapsed: false,
|
||||
showVariableManager: false,
|
||||
outputVariables: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -189,6 +243,7 @@ export default defineComponent({
|
||||
name,
|
||||
label: name.replace("func_", "函数"),
|
||||
commands: [],
|
||||
customVariables: [],
|
||||
});
|
||||
this.activeTab = id;
|
||||
},
|
||||
@ -225,6 +280,10 @@ export default defineComponent({
|
||||
case "expandAll":
|
||||
this.expandAll();
|
||||
break;
|
||||
case "toggleVariableManager":
|
||||
this.showVariableManager = !this.showVariableManager;
|
||||
this.outputVariables = this.getOutputVariables();
|
||||
break;
|
||||
default:
|
||||
this.$emit("action", type, this.generateAllFlowCode());
|
||||
}
|
||||
@ -432,8 +491,19 @@ export default defineComponent({
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.body--dark .tabs-header {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.05);
|
||||
.flow-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.variable-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
|
||||
@ -8,46 +8,59 @@
|
||||
@click="({ variables, functions } = getAvailableVariablesAndFunctions())"
|
||||
>
|
||||
<q-list class="variable-list">
|
||||
<q-item-label header class="variable-label">
|
||||
<q-icon name="functions" />
|
||||
<span>选择变量或函数</span>
|
||||
</q-item-label>
|
||||
|
||||
<q-separator class="q-my-xs" />
|
||||
|
||||
<template v-if="variables.length || functions.length">
|
||||
<q-item
|
||||
v-for="variable in variables"
|
||||
:key="variable.name"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="insertValue(variable.name)"
|
||||
class="variable-item"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="variable-name">
|
||||
{{ variable.name }}
|
||||
</q-item-label>
|
||||
<q-item-label caption class="variable-source">
|
||||
来自: {{ variable.sourceCommand.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator v-if="variables.length" />
|
||||
<q-item
|
||||
v-for="func in functions"
|
||||
:key="func.value"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="insertValue(func.value + '()')"
|
||||
class="variable-item"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="variable-name">
|
||||
{{ func.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<div v-if="variables.length">
|
||||
<q-item-label header class="variable-label">
|
||||
<q-separator class="separator-left" />
|
||||
<div class="label-content">
|
||||
<span>变量</span>
|
||||
</div>
|
||||
<q-separator class="separator-right" />
|
||||
</q-item-label>
|
||||
<q-item
|
||||
v-for="variable in variables"
|
||||
:key="variable.name"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="insertValue(variable.name)"
|
||||
class="variable-item"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="variable-name">
|
||||
{{ variable.name }}
|
||||
</q-item-label>
|
||||
<q-item-label caption class="variable-source">
|
||||
来自: {{ variable.sourceCommand.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div v-if="functions.length">
|
||||
<q-item-label header class="variable-label">
|
||||
<q-separator class="separator-left" />
|
||||
<div class="label-content">
|
||||
<span>函数</span>
|
||||
</div>
|
||||
<q-separator class="separator-right" />
|
||||
</q-item-label>
|
||||
<q-item
|
||||
v-for="func in functions"
|
||||
:key="func.id"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="insertValue(func.value + getInsertFunctionParams(func.id))"
|
||||
class="variable-item"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="variable-name">
|
||||
{{ func.value }}
|
||||
</q-item-label>
|
||||
<q-item-label caption class="variable-source">
|
||||
{{ func.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<q-item>
|
||||
@ -88,8 +101,13 @@ export default defineComponent({
|
||||
const commandIndex = inject("commandIndex", null);
|
||||
|
||||
const getAvailableVariables = () => {
|
||||
return getCurrentVariables().filter(
|
||||
(variable) => variable.sourceCommand.index < commandIndex.value
|
||||
const variables = getCurrentVariables();
|
||||
return variables.filter((variable) =>
|
||||
// 输出变量只显示在当前命令之前的
|
||||
variable.type === "output"
|
||||
? variable.sourceCommand.index < commandIndex.value
|
||||
: // 参数和局部变量显示所有
|
||||
true
|
||||
);
|
||||
};
|
||||
|
||||
@ -102,8 +120,11 @@ export default defineComponent({
|
||||
};
|
||||
};
|
||||
|
||||
const getFunctionParams = inject("getFunctionParams");
|
||||
|
||||
return {
|
||||
getAvailableVariablesAndFunctions,
|
||||
getFunctionParams,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@ -116,6 +137,15 @@ export default defineComponent({
|
||||
insertValue(value) {
|
||||
this.$emit("emitValue", "var", value);
|
||||
},
|
||||
getInsertFunctionParams(funcId) {
|
||||
return (
|
||||
"(" +
|
||||
this.getFunctionParams(funcId)
|
||||
.map((p) => p.name)
|
||||
.join(", ") +
|
||||
")"
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -129,7 +159,6 @@ export default defineComponent({
|
||||
}
|
||||
/* 变量列表样式 */
|
||||
.variable-list {
|
||||
min-width: 200px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
@ -137,7 +166,8 @@ export default defineComponent({
|
||||
border-radius: 4px;
|
||||
padding: 0px 16px;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 40px;
|
||||
min-height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.variable-item:hover {
|
||||
@ -150,6 +180,25 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.separator-left {
|
||||
min-width: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.separator-right {
|
||||
min-width: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.label-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.variable-name {
|
||||
@ -160,6 +209,7 @@ export default defineComponent({
|
||||
.variable-source {
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
|
||||
@ -11,6 +11,15 @@
|
||||
<q-tooltip>{{ isAllCollapsed ? "展开所有" : "折叠所有" }}</q-tooltip>
|
||||
</q-btn>
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
icon="data_object"
|
||||
dense
|
||||
flat
|
||||
@click="$emit('action', 'toggleVariableManager')"
|
||||
>
|
||||
<q-tooltip>变量管理</q-tooltip>
|
||||
</q-btn>
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
@click="$q.dark.toggle()"
|
||||
:icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"
|
||||
|
||||
363
src/components/composer/flow/VariableManager.vue
Normal file
363
src/components/composer/flow/VariableManager.vue
Normal file
@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div class="variable-manager" :class="{ 'is-visible': modelValue }">
|
||||
<div class="variable-content">
|
||||
<div class="variable-header">
|
||||
<div class="header-title">变量管理</div>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="close"
|
||||
size="sm"
|
||||
@click="$emit('update:modelValue', false)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 参数管理部分 -->
|
||||
<div class="section" v-if="!isMainFlow">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<q-icon name="functions" size="16px" />
|
||||
<div>函数参数</div>
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="add"
|
||||
size="sm"
|
||||
@click="addVariable('param')"
|
||||
/>
|
||||
</div>
|
||||
<div class="var-list">
|
||||
<div
|
||||
v-for="(variable, index) in paramVariables"
|
||||
:key="index"
|
||||
class="var-item"
|
||||
>
|
||||
<q-input
|
||||
v-model="variable.name"
|
||||
dense
|
||||
borderless
|
||||
class="var-input"
|
||||
@blur="validateVariable(variable, 'param')"
|
||||
@keydown.enter="validateVariable(variable, 'param')"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="close"
|
||||
size="xs"
|
||||
@click="removeVariable(index, 'param')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手动变量管理部分 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<q-icon name="data_object" size="16px" />
|
||||
<div>局部变量</div>
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="add"
|
||||
size="sm"
|
||||
@click="addVariable('var')"
|
||||
/>
|
||||
</div>
|
||||
<div class="var-list">
|
||||
<div
|
||||
v-for="(variable, index) in customVars"
|
||||
:key="index"
|
||||
class="var-item"
|
||||
>
|
||||
<div class="var-inputs">
|
||||
<q-input
|
||||
v-model="variable.name"
|
||||
dense
|
||||
borderless
|
||||
class="var-input"
|
||||
placeholder="变量名"
|
||||
@blur="validateVariable(variable, 'var')"
|
||||
@keydown.enter="validateVariable(variable, 'var')"
|
||||
/>
|
||||
<q-separator vertical />
|
||||
<q-input
|
||||
v-model="variable.value"
|
||||
dense
|
||||
borderless
|
||||
class="var-input"
|
||||
placeholder="变量值"
|
||||
/>
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="close"
|
||||
size="xs"
|
||||
@click="removeVariable(index, 'var')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输出变量展示部分 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<q-icon name="output" size="16px" />
|
||||
<div>来自输出</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="var-list">
|
||||
<div
|
||||
v-for="(variable, index) in outputVariables"
|
||||
:key="index"
|
||||
class="var-item output-var"
|
||||
>
|
||||
<div class="var-name">{{ variable.name }}</div>
|
||||
<div class="var-source">{{ variable.sourceCommand.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "VariableManager",
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
isMainFlow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
variables: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
outputVariables: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue", "update:variables"],
|
||||
computed: {
|
||||
customVariables: {
|
||||
get() {
|
||||
return this.variables || [];
|
||||
},
|
||||
set(value) {
|
||||
this.$emit("update:variables", value);
|
||||
},
|
||||
},
|
||||
paramVariables() {
|
||||
return this.customVariables.filter((v) => v.type === "param");
|
||||
},
|
||||
customVars() {
|
||||
return this.customVariables.filter((v) => v.type === "var");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addVariable(type) {
|
||||
const prefix = type === "param" ? "param_" : "var_";
|
||||
const count = this.customVariables.filter((v) => v.type === type).length;
|
||||
this.customVariables = [
|
||||
...this.customVariables,
|
||||
{
|
||||
name: prefix + (count + 1),
|
||||
type,
|
||||
value: type === "var" ? "" : undefined,
|
||||
},
|
||||
];
|
||||
},
|
||||
removeVariable(index, type) {
|
||||
const typeVars = this.customVariables.filter((v) => v.type === type);
|
||||
const globalIndex = this.customVariables.indexOf(typeVars[index]);
|
||||
if (globalIndex > -1) {
|
||||
const newVars = [...this.customVariables];
|
||||
newVars.splice(globalIndex, 1);
|
||||
this.customVariables = newVars;
|
||||
}
|
||||
},
|
||||
validateVariable(variable, type) {
|
||||
if (!variable.name) {
|
||||
const prefix = type === "param" ? "param_" : "var_";
|
||||
const count = this.customVariables.filter(
|
||||
(v) => v.type === type
|
||||
).length;
|
||||
variable.name = prefix + count;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.variable-manager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 8px 0;
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.variable-manager.is-visible {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.body--dark .variable-manager {
|
||||
background: rgba(35, 35, 35, 0.95);
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.variable-content {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
min-width: 200px;
|
||||
padding: 8px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.variable-manager.is-visible .variable-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.variable-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
margin: -8px -8px 8px -8px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--q-primary);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.var-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.var-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
transition: background-color 0.2s ease;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.var-item:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.body--dark .var-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.var-inputs {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.var-input {
|
||||
width: 0;
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
|
||||
.var-input :deep(.q-field__control) {
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.var-input :deep(.q-field__native) {
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.var-input :deep(.q-field__native::placeholder) {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.body--dark .var-input :deep(.q-field__native::placeholder) {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.output-var {
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.var-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.var-source {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,9 @@
|
||||
export function generateCode(flow) {
|
||||
const { commands, name, label } = flow;
|
||||
const { commands, name, label, customVariables = [] } = flow;
|
||||
|
||||
const params = customVariables.filter((v) => v.type === "param") || [];
|
||||
const manualVars =
|
||||
customVariables.filter((v) => v.type === "var") || [];
|
||||
// 检查是否包含异步函数
|
||||
const hasAsyncFunction = commands.some((cmd) => cmd.isAsync);
|
||||
|
||||
@ -8,8 +12,13 @@ export function generateCode(flow) {
|
||||
|
||||
code.push(`// ${label}`);
|
||||
// 生成函数声明
|
||||
code.push(`${hasAsyncFunction ? "async " : ""}function ${funcName}() {`);
|
||||
code.push(
|
||||
`${hasAsyncFunction ? "async " : ""}function ${funcName}(${params
|
||||
.map((p) => p.name)
|
||||
.join(", ")}) {`
|
||||
);
|
||||
|
||||
code.push(manualVars.map((v) => ` let ${v.name} = ${v.value};`).join("\n"));
|
||||
const indent = " ";
|
||||
|
||||
commands.forEach((cmd) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user