运行脚本和新建代码片段支持引入变量

src/components/CommandEditor.vue

@@ -187,7 +187,7 @@ export default {
           this.showComposer = true;
           break;
         case "insert-text":
-          this.$refs.editor.repacleEditorSelection(data);
+          this.$refs.editor.replaceEditorSelection(data);
           break;
         case "restore":
           this.restoreHistory(data);

src/components/composer/script/ScriptEditor.vue

@@ -2,6 +2,7 @@
   <div class="script-editor">
     <!-- 代码编辑器 -->
     <CodeEditor
+      ref="codeEditor"
       :model-value="argvs.code"
       @update:modelValue="updateArgvs('code', $event)"
       :language="argvs.language"
@@ -34,6 +35,19 @@
           </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>
 
       <!-- 编码设置 -->
       <q-select
@@ -137,6 +151,7 @@ import BorderLabel from "components/composer/common/BorderLabel.vue";
 import CheckButton from "components/composer/common/CheckButton.vue";
 import { parseFunction, stringifyArgv } from "js/composer/formatString";
 import programs from "js/options/programs";
+import VariableList from "components/composer/common/varinput/VariableList.vue";
 
 export default defineComponent({
   name: "ScriptEditor",
@@ -146,6 +161,7 @@ export default defineComponent({
     ArrayEditor,
     BorderLabel,
     CheckButton,
+    VariableList,
   },
   props: {
     modelValue: Object,
@@ -212,10 +228,19 @@ export default defineComponent({
       }
     },
     generateCode(argvs = this.argvs) {
+      const variables = argvs.code.match(/___([^_]+?)___/g);
+      const replaceStr =
+        variables
+          ?.map((variable) => {
+            return `.replace("${variable}", ${variable.slice(3, -3)})`;
+          })
+          .join("") || "";
       if (this.isCodeSnippet) {
-        return `quickcomposer.coding.base64Decode("${quickcomposer.coding.base64Encode(
+        return (
+          `quickcomposer.coding.base64Decode("${quickcomposer.coding.base64Encode(
             argvs.code
-        )}")`;
+          )}")` + replaceStr
+        );
       }
       const options = {
         language: argvs.language,
@@ -239,7 +264,7 @@ export default defineComponent({
 
       return `${this.modelValue.value}(${stringifyArgv(
         argvs.code
-      )}, ${stringifyArgv(options)})`;
+      )}${replaceStr}, ${stringifyArgv(options)})`;
     },
     getSummary(argvs) {
       return `运行${argvs.language}代码`;
@@ -268,6 +293,9 @@ export default defineComponent({
         argvs,
       });
     },
+    insertVariable(_, variable) {
+      this.$refs.codeEditor.replaceEditorSelection("___" + variable + "___");
+    },
   },
   mounted() {
     const argvs = this.modelValue.argvs || this.defaultArgvs;

src/components/editor/CodeEditor.vue

@@ -388,7 +388,7 @@ export default defineComponent({
       );
     },
     // 替换选中的文本，供外部调用
-    repacleEditorSelection(text) {
+    replaceEditorSelection(text) {
       var selection = this.codeEditor.getSelection();
       var range = new monaco.Range(
         selection.startLineNumber,
@@ -413,7 +413,7 @@ export default defineComponent({
       if (type === "replace") {
         this.codeEditor.setValue(value);
       } else if (type === "insert") {
-        this.repacleEditorSelection(value);
+        this.replaceEditorSelection(value);
       }
       this.$emit("saveHistory", value);
     },