增强 FlowTabs 和变量管理:引入了 VariableManager 组件以更好地处理变量,更新了 ComposerFlow 以支持自定义变量,并改进了 VariableList 中的变量选择界面。增加了切换变量管理的功能,并调整了代码生成以包含参数和局部变量。

This commit is contained in:
fofolee 2025-01-22 12:01:16 +08:00
parent 26fd4f5e19
commit 839ea69921
5 changed files with 557 additions and 56 deletions

View File

@ -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 {

View File

@ -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;
}
/* 暗色模式适配 */

View File

@ -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'"

View 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>

View File

@ -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) => {