From b541eee3979e44eeddefdcb33ed8ed014c62d5f2 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Mon, 24 Feb 2025 10:26:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=BF=90=E8=A1=8C=E8=84=9A?=
 =?UTF-8?q?=E6=9C=AC=E5=92=8C=E6=96=B0=E5=BB=BA=E4=BB=A3=E7=A0=81=E7=89=87?=
 =?UTF-8?q?=E6=AE=B5=E5=BC=95=E5=85=A5=E5=8F=98=E9=87=8F=E7=9A=84=E5=BD=A2?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composer/common/varinput/VariableList.vue |  9 ++++
 .../composer/script/ScriptEditor.vue          | 52 +++++++++++++------
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/components/composer/common/varinput/VariableList.vue b/src/components/composer/common/varinput/VariableList.vue
index 214761a..ffbb367 100644
--- a/src/components/composer/common/varinput/VariableList.vue
+++ b/src/components/composer/common/varinput/VariableList.vue
@@ -8,6 +8,11 @@
     :no-icon-animation="icon !== 'arrow_drop_down'"
     @click="({ variables, functions } = getAvailableVariablesAndFunctions())"
   >
+    <template #label>
+      <div class="variable-label" v-if="!!label">
+        <span>{{ label }}</span>
+      </div>
+    </template>
     <q-list class="variable-list">
       <template v-if="variables.length || functions.length">
         <div v-if="variables.length && showVariableList">
@@ -228,6 +233,10 @@ export default defineComponent({
       type: String,
       default: "arrow_drop_down",
     },
+    label: {
+      type: String,
+      default: "",
+    },
   },
 });
 </script>
diff --git a/src/components/composer/script/ScriptEditor.vue b/src/components/composer/script/ScriptEditor.vue
index 60b6a72..bef3d96 100644
--- a/src/components/composer/script/ScriptEditor.vue
+++ b/src/components/composer/script/ScriptEditor.vue
@@ -35,18 +35,21 @@
           </q-item>
         </template>
       </q-select>
-      <q-field filled dense class="col-auto">
-        <template v-slot:control>
-          <div class="variable-label">插入变量</div>
-        </template>
-        <template v-slot:append>
-          <VariableList
-            :show-variable-list="true"
-            :show-function-list="false"
-            :show-global-variables="true"
-            @emit-value="insertVariable"
-          />
-        </template>
+      <q-field filled dense class="col-auto variable-list-field">
+        <VariableList
+          label="插入变量"
+          :show-variable-list="true"
+          :show-function-list="false"
+          :show-global-variables="true"
+          @emit-value="insertVariable"
+        />
+        <q-tooltip>
+          <div>引入当前流程的变量到代码中</div>
+          <div class="text-primary" v-if="!isCodeSnippet">
+            注意，所有变量的值都是以<span class="text-weight-bold">字符串</span
+            >的形式传入，不要删除两边的引号
+          </div>
+        </q-tooltip>
       </q-field>
 
       <!-- 编码设置 -->
@@ -54,6 +57,7 @@
         class="col-3"
         filled
         dense
+        options-dense
         v-if="!isCodeSnippet"
         :model-value="argvs.scriptCode"
         @update:modelValue="updateArgvs('scriptCode', $event)"
@@ -66,6 +70,7 @@
         class="col-3"
         filled
         dense
+        options-dense
         v-if="!isCodeSnippet"
         :model-value="argvs.outputCode"
         @update:modelValue="updateArgvs('outputCode', $event)"
@@ -115,6 +120,7 @@
                     label="Windows终端"
                     filled
                     dense
+                    options-dense
                     emit-value
                     map-options
                     class="col-6"
@@ -127,6 +133,7 @@
                     label="macOS终端"
                     filled
                     dense
+                    options-dense
                     emit-value
                     map-options
                     class="col-6"
@@ -228,11 +235,18 @@ export default defineComponent({
       }
     },
     generateCode(argvs = this.argvs) {
-      const variables = argvs.code.match(/___([^_]+?)___/g);
+      const variables = argvs.code.match(/"?___([^_]+?)___"?/g);
       const replaceStr =
         variables
           ?.map((variable) => {
-            return `.replace("${variable}", ${variable.slice(3, -3)})`;
+            if (variable.startsWith('"') && variable.endsWith('"')) {
+              return `.replace('${variable}', JSON.stringify(${variable.slice(
+                4,
+                -4
+              )}))`;
+            } else {
+              return `.replace('${variable}', ${variable.slice(3, -3)})`;
+            }
           })
           .join("") || "";
       if (this.isCodeSnippet) {
@@ -294,7 +308,10 @@ export default defineComponent({
       });
     },
     insertVariable(_, variable) {
-      this.$refs.codeEditor.replaceEditorSelection("___" + variable + "___");
+      const replaceVar = this.isCodeSnippet
+        ? "___" + variable + "___"
+        : '"___' + variable + '___"';
+      this.$refs.codeEditor.replaceEditorSelection(replaceVar);
     },
   },
   mounted() {
@@ -312,4 +329,9 @@ export default defineComponent({
   flex-direction: column;
   gap: 8px;
 }
+
+.variable-list-field :deep(.q-field__control) {
+  padding: 0;
+  color: var(--utools-font-color);
+}
 </style>