OutPutEditor支持下拉选择变量和函数

src/components/composer/card/CommandButtons.vue

@@ -10,8 +10,10 @@
         <q-icon
           name="output"
           v-if="!command.neverHasOutput"
-          class="output-btn"
-          :color="command.outputVariable ? 'primary' : ''"
+          :class="[
+            'output-btn',
+            command.outputVariable ? 'output-btn-active' : '',
+          ]"
           @click="showOutputEditor = true"
         >
           <q-tooltip>
@@ -195,6 +197,11 @@ export default {
   color: var(--q-primary);
 }
 
+.output-btn-active {
+  color: var(--q-primary);
+  opacity: 1;
+}
+
 /* 暗色模式适配 */
 .body--dark .output-btn {
   border-color: rgba(255, 255, 255, 0.1);

src/components/composer/card/OutputEditor.vue

@@ -11,6 +11,7 @@
           v-model="simpleOutputVar"
           :label="currentOutputs?.label || '输出变量名'"
           autofocus
+          :show-variable-list="true"
           class="q-px-sm"
         />
       </SectionBlock>
@@ -75,6 +76,7 @@
                 label="回调函数"
                 placeholder="新函数名则自动创建"
                 class="col-8"
+                :show-function-list="true"
               />
             </template>
           </div>

src/components/composer/card/output/OutputField.vue

@@ -12,6 +12,14 @@
     <template v-slot:prepend>
       <div class="variable-label">{{ label }}</div>
     </template>
+    <template v-slot:append>
+      <VariableList
+        :show-variable-list="showVariableList"
+        :show-function-list="showFunctionList"
+        @emit-value="updateValBySelect"
+        class="variable-list-btn"
+      />
+    </template>
   </q-input>
   <q-select
     v-else
@@ -28,8 +36,12 @@
 
 <script>
 import { defineComponent } from "vue";
+import VariableList from "components/composer/common/varinput/VariableList.vue";
 
 export default defineComponent({
+  components: {
+    VariableList,
+  },
   name: "OutputField",
   props: {
     modelValue: {
@@ -51,8 +63,21 @@ export default defineComponent({
       type: null,
       default: null,
     },
+    showVariableList: {
+      type: Boolean,
+      default: false,
+    },
+    showFunctionList: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:modelValue"],
+  methods: {
+    updateValBySelect(_type, val) {
+      this.$emit("update:modelValue", val);
+    },
+  },
 });
 </script>
 
@@ -73,6 +98,14 @@ export default defineComponent({
   font-size: 12px;
 }
 
+.output-field:not(.q-select) :deep(.q-field__control) {
+  padding-right: 0;
+}
+
+.output-field.q-select :deep(.q-field__append) {
+  font-size: 16px;
+}
+
 /* 去除filled输入框边框 */
 .output-field :deep(.q-field__control:before) {
   border: none;
@@ -83,4 +116,18 @@ export default defineComponent({
   height: 0;
   border-bottom: none;
 }
+
+.variable-list-btn {
+  padding: 0 12px;
+}
+
+/* 去掉下拉按钮的焦点效果 */
+.variable-list-btn :deep(.q-focus-helper) {
+  display: none !important;
+}
+
+/* 移除波纹效果 */
+.variable-list-btn :deep(.q-ripple) {
+  display: none;
+}
 </style>