支持在varInput中选择函数

src/components/composer/FlowTabs.vue

@@ -23,8 +23,8 @@
           narrow-indicator
           outside-arrows
         >
-          <template v-for="flow in nonMainFlows" :key="flow.id">
-            <q-tab :name="flow.id" class="flow-tab">
+          <template v-for="flow in subFlows" :key="flow.id">
+            <q-tab :name="flow.id" class="flow-tab" no-caps>
               <div class="flow-tab-content">
                 <template v-if="flow.isEditing">
                   <q-input
@@ -76,7 +76,7 @@
         v-model="flow.commands"
         :generate-code="() => generateFlowCode(flow)"
         :show-close-button="flows.length > 1"
-        @action="(type, payload) => handleFlowAction(type, payload, flow)"
+        @action="(type, payload) => handleAction(type, payload)"
         ref="flowRefs"
       />
     </div>
@@ -84,7 +84,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, provide, reactive } from "vue";
 import ComposerFlow from "./ComposerFlow.vue";
 import ComposerButtons from "./flow/ComposerButtons.vue";
 import { generateCode } from "js/composer/generateCode";
@@ -103,27 +103,44 @@ export default defineComponent({
       default: true,
     },
   },
+  setup() {
+    const subFlows = reactive([]);
+    const getCurrentFunctions = () => {
+      return subFlows.map((flow) => {
+        return {
+          label: flow.label,
+          value: flow.name,
+        };
+      });
+    };
+    provide("getCurrentFunctions", getCurrentFunctions);
+    return { subFlows };
+  },
   data() {
     return {
-      flows: [
-        {
+      activeTab: "main",
+      isAllCollapsed: false,
+      mainFlow: {
         id: "main",
         name: "main",
         label: "主流程",
         commands: [],
       },
-      ],
-      activeTab: "main",
-      isAllCollapsed: false,
     };
   },
   computed: {
-    nonMainFlows() {
-      return this.flows.filter((f) => f.id !== "main");
+    flows: {
+      get() {
+        return [this.mainFlow, ...this.subFlows];
+      },
+      set(value) {
+        this.mainFlow = value[0];
+        this.subFlows = value.slice(1);
+      },
     },
   },
   methods: {
-    generateFlowName(baseName = "flow_") {
+    generateFlowName(baseName = "func_") {
       return (
         baseName +
         generateUniqSuffix(
@@ -136,18 +153,18 @@ export default defineComponent({
     addFlow() {
       const id = this.$root.getUniqueId();
       const name = this.generateFlowName();
-      this.flows.push({
+      this.subFlows.push({
         id,
         name,
-        label: name.replace("flow_", "子流程"),
+        label: name.replace("func_", "函数"),
         commands: [],
       });
       this.activeTab = id;
     },
     removeFlow(flow) {
       const index = this.flows.findIndex((f) => f.id === flow.id);
-      if (index > -1 && flow.id !== "main") {
-        this.flows.splice(index, 1);
+      if (index > -1) {
+        this.subFlows.splice(index, 1);
         this.activeTab = this.flows[0].id;
       }
     },
@@ -156,22 +173,10 @@ export default defineComponent({
     },
     generateAllFlowCode() {
       // 生成所有flow的代码
-      return this.flows
-        .reverse()
+      return [...this.subFlows, this.mainFlow]
         .map((flow) => this.generateFlowCode(flow))
         .join("\n\n");
     },
-    handleFlowAction(type, payload, flow) {
-      if (type === "close") {
-        const index = this.flows.findIndex((f) => f.id === flow.id);
-        if (index > -1 && this.flows.length > 1) {
-          this.flows.splice(index, 1);
-          this.activeTab = this.flows[0].id;
-        }
-      } else {
-        this.handleAction(type, payload);
-      }
-    },
     handleAction(type, payload) {
       switch (type) {
         case "save":
@@ -269,7 +274,7 @@ export default defineComponent({
     finishEdit(flow) {
       flow.isEditing = false;
       if (!flow.label) {
-        flow.label = this.generateFlowName().replace("flow_", "子流程");
+        flow.label = this.generateFlowName().replace("func_", "函数");
       }
     },
   },

src/components/composer/common/VariableInput.vue

@@ -145,7 +145,9 @@ export default defineComponent({
         });
       },
       typeToggleTooltip() {
-        const currentType = this.isString ? "字符串" : "变量、数字、表达式等";
+        const currentType = this.isString
+          ? "字符串"
+          : "变量、数字、表达式、函数等";
         const toggleText = this.disableToggleType ? "" : "，点击切换";
         return `当前类型是：${currentType}${toggleText}`;
       },

src/components/composer/common/varinput/VariableList.vue

@@ -5,23 +5,23 @@
     stretch
     size="sm"
     class="variable-dropdown"
-    @click="variables = getAvailableVariables()"
+    @click="({ variables, functions } = getAvailableVariablesAndFunctions())"
   >
     <q-list class="variable-list">
       <q-item-label header class="variable-label">
         <q-icon name="functions" />
-        <span>选择变量</span>
+        <span>选择变量或函数</span>
       </q-item-label>
 
       <q-separator class="q-my-xs" />
 
-      <template v-if="variables.length">
+      <template v-if="variables.length || functions.length">
         <q-item
           v-for="variable in variables"
           :key="variable.name"
           clickable
           v-close-popup
-          @click="insertVariable(variable)"
+          @click="insertValue(variable.name)"
           class="variable-item"
         >
           <q-item-section>
@@ -33,6 +33,21 @@
             </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>
       </template>
       <template v-else>
         <q-item>
@@ -41,12 +56,17 @@
               <div class="q-gutter-md">
                 <div class="row items-center justify-center text-grey-6">
                   <q-icon name="info" size="20px" class="q-mr-sm" />
-                  <span>当前命令没有可用变量</span>
+                  <span>当前命令没有可用变量或函数</span>
                 </div>
                 <div class="row items-center justify-center text-grey-7">
-                  <div class="text-grey-7">点击其他命令卡片右上角的</div>
+                  <div>点击其他命令右上角</div>
                   <q-icon name="output" size="16px" class="q-mx-xs" />
-                  <div>按钮添加输出变量</div>
+                  <div>按钮添加变量</div>
+                </div>
+                <div class="row items-center justify-center text-grey-7">
+                  <div>或点击主流程右边的</div>
+                  <q-icon name="add" size="16px" class="q-mx-xs" />
+                  <div>按钮添加函数</div>
                 </div>
               </div>
             </q-item-label>
@@ -73,18 +93,28 @@ export default defineComponent({
       );
     };
 
+    const getCurrentFunctions = inject("getCurrentFunctions");
+
+    const getAvailableVariablesAndFunctions = () => {
       return {
-      getAvailableVariables,
+        variables: getAvailableVariables(),
+        functions: getCurrentFunctions(),
+      };
+    };
+
+    return {
+      getAvailableVariablesAndFunctions,
     };
   },
   data() {
     return {
       variables: [],
+      functions: [],
     };
   },
   methods: {
-    insertVariable(variable) {
-      this.$emit("emitValue", "var", variable.name);
+    insertValue(value) {
+      this.$emit("emitValue", "var", value);
     },
   },
 });