调整quasar组件在paramimporter中的引入方式

src/components/composer/param/ParamImporter.vue

@@ -5,7 +5,7 @@
     v-bind="componentProps"
     @update:model-value="$emit('update:modelValue', $event)"
   >
-    <template v-if="isQuasarInput" #prepend>
+    <template #prepend>
       <q-icon v-if="config.icon" :name="config.icon" />
     </template>
   </component>
@@ -23,6 +23,7 @@ import ControlInput from "components/composer/common/ControlInput.vue";
 import CheckGroup from "components/composer/common/CheckGroup.vue";
 import CheckButton from "components/composer/common/CheckButton.vue";
 import CodeEditor from "components/composer/common/CodeEditor.vue";
+import { QInput, QSelect, QToggle, QCheckbox } from "quasar";
 
 export default defineComponent({
   name: "ParamInput",
@@ -36,6 +37,10 @@ export default defineComponent({
     CheckGroup,
     CheckButton,
     CodeEditor,
+    QToggle,
+    QInput,
+    QSelect,
+    QCheckbox,
   },
   props: {
     config: {
@@ -58,19 +63,27 @@ export default defineComponent({
       },
     },
     isQuasarInput() {
-      return ["q-select", "q-input"].includes(this.config?.component);
+      return (
+        this.config.component === "QInput" ||
+        this.config.component === "QSelect"
+      );
     },
     isQuasarSelect() {
-      return ["q-select"].includes(this.config?.component);
+      return this.config.component === "QSelect";
     },
     componentProps() {
-      return {
+      const props = { ...this.config, dense: true };
-        ...this.config,
+
-        filled: true,
+      if (this.isQuasarInput) {
-        dense: true,
+        props.filled = true;
-        emitValue: this.isQuasarSelect,
+      }
-        mapOptions: this.isQuasarSelect,
+
-      };
+      if (this.isQuasarSelect) {
+        props.emitValue = true;
+        props.mapOptions = true;
+      }
+
+      return props;
     },
   },
 });

src/js/composer/commands/audioCommands.js

@@ -59,7 +59,7 @@ const SPEECH_CONFIG = {
     },
     lang: {
       label: "语言",
-      component: "q-select",
+      component: "QSelect",
       options: LANGUAGES,
       width: 3,
     },
@@ -87,12 +87,12 @@ const MEDIA_PLAY_CONFIG = {
     },
     loop: {
       label: "循环播放",
-      component: "q-toggle",
+      component: "CheckButton",
       width: 4,
     },
     autoPlay: {
       label: "自动播放",
-      component: "q-toggle",
+      component: "CheckButton",
       width: 4,
     },
   },
@@ -216,7 +216,7 @@ export const audioCommands = {
       config: [
         {
           label: "音效类型",
-          component: "q-select",
+          component: "QSelect",
           icon: "music_note",
           width: 6,
           options: SYSTEM_SOUNDS,

src/js/composer/commands/dataCommands.js

@@ -90,7 +90,7 @@ export const dataCommands = {
             },
             {
               label: "模式",
-              component: "q-select",
+              component: "QSelect",
               icon: "settings",
               options: [
                 { label: "两端", value: "both" },
@@ -115,7 +115,7 @@ export const dataCommands = {
             },
             {
               label: "转换为",
-              component: "q-select",
+              component: "QSelect",
               icon: "settings",
               options: [
                 { label: "大写", value: "upper" },
@@ -159,7 +159,7 @@ export const dataCommands = {
             },
             {
               label: "填充位置",
-              component: "q-select",
+              component: "QSelect",
               icon: "settings",
               options: [
                 { label: "左侧", value: "start" },
@@ -246,7 +246,7 @@ export const dataCommands = {
             },
             {
               label: "提取类型",
-              component: "q-select",
+              component: "QSelect",
               icon: "settings",
               options: [
                 { label: "数字", value: "number" },
@@ -273,7 +273,7 @@ export const dataCommands = {
             },
             {
               label: "统计类型",
-              component: "q-select",
+              component: "QSelect",
               icon: "settings",
               options: [
                 { label: "字符数", value: "char" },
@@ -324,7 +324,7 @@ export const dataCommands = {
             },
             {
               label: "对齐方式",
-              component: "q-select",
+              component: "QSelect",
               icon: "settings",
               options: [
                 { label: "左对齐", value: "left" },
@@ -377,7 +377,7 @@ export const dataCommands = {
             },
             {
               label: "编码",
-              component: "q-select",
+              component: "QSelect",
               icon: "code",
               options: [
                 { label: "UTF-8", value: "utf8" },
@@ -407,7 +407,7 @@ export const dataCommands = {
             },
             {
               label: "编码",
-              component: "q-select",
+              component: "QSelect",
               icon: "code",
               options: [
                 { label: "UTF-8", value: "utf8" },
@@ -469,7 +469,7 @@ export const dataCommands = {
             },
             {
               label: "编码",
-              component: "q-select",
+              component: "QSelect",
               icon: "code",
               options: [
                 { label: "UTF-8", value: "utf8" },
@@ -517,7 +517,7 @@ export const dataCommands = {
             },
             {
               label: "编码",
-              component: "q-select",
+              component: "QSelect",
               icon: "code",
               options: [
                 { label: "UTF-8", value: "utf8" },
@@ -662,7 +662,7 @@ export const dataCommands = {
             },
             {
               label: "编码",
-              component: "q-select",
+              component: "QSelect",
               icon: "code",
               options: [
                 { label: "UTF-8", value: "utf8" },
@@ -692,7 +692,7 @@ export const dataCommands = {
             },
             {
               label: "字节大小",
-              component: "q-select",
+              component: "QSelect",
               icon: "memory",
               options: [
                 { label: "16位", value: 16 },
@@ -875,7 +875,7 @@ export const dataCommands = {
             },
             {
               label: "排序方式",
-              component: "q-select",
+              component: "QSelect",
               icon: "sort",
               options: [
                 { label: "升序", value: "asc" },
@@ -964,7 +964,7 @@ export const dataCommands = {
             },
             {
               label: "聚合操作",
-              component: "q-select",
+              component: "QSelect",
               icon: "functions",
               options: [
                 { label: "求和", value: "sum" },
@@ -1182,7 +1182,7 @@ export const dataCommands = {
             },
             {
               label: "格式",
-              component: "q-select",
+              component: "QSelect",
               icon: "format_shapes",
               width: 4,
               options: [
@@ -1215,7 +1215,7 @@ export const dataCommands = {
             },
             {
               label: "原格式",
-              component: "q-select",
+              component: "QSelect",
               icon: "format_shapes",
               width: 4,
               options: [
@@ -1252,7 +1252,7 @@ export const dataCommands = {
             },
             {
               label: "单位",
-              component: "q-select",
+              component: "QSelect",
               icon: "straighten",
               width: 6,
               options: [
@@ -1289,7 +1289,7 @@ export const dataCommands = {
             },
             {
               label: "返回单位",
-              component: "q-select",
+              component: "QSelect",
               icon: "straighten",
               width: 6,
               options: [
@@ -1326,7 +1326,7 @@ export const dataCommands = {
             },
             {
               label: "单位",
-              component: "q-select",
+              component: "QSelect",
               icon: "straighten",
               width: 3,
               options: [
@@ -1342,7 +1342,7 @@ export const dataCommands = {
             },
             {
               label: "类型",
-              component: "q-select",
+              component: "QSelect",
               icon: "settings",
               width: 3,
               options: [
@@ -1367,7 +1367,7 @@ export const dataCommands = {
             },
             {
               label: "格式",
-              component: "q-select",
+              component: "QSelect",
               icon: "format_shapes",
               width: 4,
               options: [

src/js/composer/commands/fileCommands.js

@@ -71,7 +71,7 @@ export const fileCommands = {
       config: [
         {
           label: "操作类型",
-          component: "q-select",
+          component: "QSelect",
           icon: "settings",
           width: 6,
           defaultValue: "compress",
@@ -82,7 +82,7 @@ export const fileCommands = {
         },
         {
           label: "归档格式",
-          component: "q-select",
+          component: "QSelect",
           icon: "format_shapes",
           width: 6,
           defaultValue: "zip",

src/js/composer/commands/imageCommands.js

@@ -117,7 +117,7 @@ export const imageCommands = {
         },
         {
           label: "保持宽高比",
-          component: "q-select",
+          component: "QSelect",
           icon: "aspect_ratio",
           width: 6,
           defaultValue: "true",
@@ -370,7 +370,7 @@ export const imageCommands = {
         },
         {
           label: "位置",
-          component: "q-select",
+          component: "QSelect",
           icon: "place",
           width: 6,
           defaultValue: "bottomRight",
@@ -456,7 +456,7 @@ export const imageCommands = {
         },
         {
           label: "输出格式",
-          component: "q-select",
+          component: "QSelect",
           icon: "transform",
           width: 6,
           defaultValue: "jpeg",
@@ -519,7 +519,7 @@ export const imageCommands = {
         },
         {
           label: "输出格式",
-          component: "q-select",
+          component: "QSelect",
           icon: "transform",
           width: 3,
           defaultValue: "ico",

src/js/composer/commands/macosCommands.js

@@ -1,4 +1,5 @@
 import { newVarInputVal } from "js/composer/varInputValManager";
+import { browserCommands } from "js/composer/commands/browserCommands";
 
 export const macosCommands = {
   label: "Mac自动化",
@@ -311,541 +312,29 @@ export const macosCommands = {
       label: "浏览器控制",
       icon: "web",
       isAsync: true,
-      subCommands: [
+      config: [
         {
-          value: "quickcomposer.macos.browser.getUrl",
+          component: "ButtonGroup",
-          label: "获取当前地址",
+          defaultValue: "Microsoft Edge",
-          icon: "link",
+          options: [
-          config: [
             {
-              component: "ButtonGroup",
+              label: "Edge 浏览器",
-              defaultValue: "Microsoft Edge",
+              value: "Microsoft Edge",
-              options: [
+            },
-                {
+            {
-                  label: "Edge 浏览器",
+              label: "Chrome 浏览器",
-                  value: "Microsoft Edge",
+              value: "Google Chrome",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.setUrl",
-          label: "设置当前地址",
-          icon: "link",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "网址",
-              component: "VariableInput",
-              icon: "link",
-              width: 12,
-              placeholder: "输入网址",
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.getTabs",
-          label: "获取标签列表",
-          icon: "tab",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.activateTab",
-          label: "切换标签",
-          icon: "tab_unselected",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "标签索引",
-              component: "NumberInput",
-              icon: "tab",
-              min: 1,
-              defaultValue: 1,
-              width: 12,
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.executeScript",
-          label: "执行脚本",
-          icon: "code",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "脚本内容",
-              component: "CodeEditor",
-              icon: "code",
-              width: 12,
-              placeholder: "输入JavaScript代码",
-            },
-            {
-              topLabel: "要传递的参数",
-              component: "DictEditor",
-              icon: "data_array",
-              width: 12,
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.clickElement",
-          label: "点击元素",
-          icon: "mouse",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "选择器",
-              component: "VariableInput",
-              icon: "code",
-              width: 12,
-              placeholder: "输入CSS选择器",
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.inputText",
-          label: "输入文本",
-          icon: "edit",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "选择器",
-              component: "VariableInput",
-              icon: "code",
-              width: 12,
-              placeholder: "输入CSS选择器",
-            },
-            {
-              label: "文本内容",
-              component: "VariableInput",
-              icon: "edit",
-              width: 12,
-              placeholder: "输入要填写的文本",
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.getText",
-          label: "获取文本",
-          icon: "text_fields",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "选择器",
-              component: "VariableInput",
-              icon: "code",
-              width: 12,
-              placeholder: "输入CSS选择器",
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.hideElement",
-          label: "隐藏元素",
-          icon: "visibility_off",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "选择器",
-              component: "VariableInput",
-              icon: "code",
-              width: 12,
-              placeholder: "输入CSS选择器",
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.showElement",
-          label: "显示元素",
-          icon: "visibility",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "选择器",
-              component: "VariableInput",
-              icon: "code",
-              width: 12,
-              placeholder: "输入CSS选择器",
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.injectCSS",
-          label: "注入CSS",
-          icon: "style",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "CSS内容",
-              component: "CodeEditor",
-              icon: "style",
-              width: 12,
-              placeholder: "输入CSS代码",
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.setCookie",
-          label: "设置Cookie",
-          icon: "cookie",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "Cookie",
-              component: "ArrayEditor",
-              icon: "cookie",
-              width: 12,
-              columns: {
-                name: {
-                  label: "名称",
-                  defaultValue: newVarInputVal("str"),
-                },
-                value: {
-                  label: "值",
-                  defaultValue: newVarInputVal("str"),
-                },
-              },
-            },
-            {
-              label: "选项",
-              component: "OptionEditor",
-              icon: "settings",
-              width: 12,
-              options: {
-                expires: {
-                  label: "过期时间",
-                  component: "q-select",
-                  icon: "timer",
-                  width: 6,
-                  options: [
-                    { label: "关闭浏览器失效", value: false },
-                    { label: "1小时", value: 1 },
-                    { label: "1天", value: 24 },
-                    { label: "1年", value: 24 * 365 },
-                  ],
-                },
-                path: {
-                  label: "路径",
-                  component: "VariableInput",
-                  icon: "folder",
-                  width: 6,
-                },
-                domain: {
-                  label: "域名",
-                  component: "VariableInput",
-                  icon: "domain",
-                  width: 6,
-                },
-                secure: {
-                  label: "安全",
-                  component: "CheckButton",
-                  icon: "lock",
-                  width: 6,
-                },
-              },
-              defaultValue: {
-                expires: false,
-                path: newVarInputVal("str", "/"),
-                domain: newVarInputVal("str", ""),
-                secure: false,
-              },
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.getCookie",
-          label: "获取Cookie",
-          icon: "cookie",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "名称",
-              component: "VariableInput",
-              icon: "label",
-              width: 12,
-              placeholder: "输入Cookie名称",
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.scrollTo",
-          label: "滚动到位置",
-          icon: "open_in_full",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "X坐标",
-              component: "NumberInput",
-              icon: "arrow_right",
-              width: 12,
-              defaultValue: 0,
-            },
-            {
-              label: "Y坐标",
-              component: "NumberInput",
-              icon: "arrow_drop_down",
-              width: 12,
-              defaultValue: 0,
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.scrollToElement",
-          label: "滚动到元素",
-          icon: "open_in_full",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "选择器",
-              component: "VariableInput",
-              icon: "code",
-              width: 12,
-              placeholder: "输入CSS选择器",
-            },
-          ],
-        },
-        {
-          value: "quickcomposer.macos.browser.waitForElement",
-          label: "等待元素",
-          icon: "hourglass_empty",
-          config: [
-            {
-              component: "ButtonGroup",
-              defaultValue: "Microsoft Edge",
-              options: [
-                {
-                  label: "Edge 浏览器",
-                  value: "Microsoft Edge",
-                },
-                {
-                  label: "Chrome 浏览器",
-                  value: "Google Chrome",
-                },
-              ],
-              width: 12,
-            },
-            {
-              label: "选择器",
-              component: "VariableInput",
-              icon: "code",
-              width: 12,
-              placeholder: "输入CSS选择器",
-            },
-            {
-              label: "超时时间",
-              component: "NumberInput",
-              icon: "timer",
-              width: 12,
-              defaultValue: 5000,
-              min: 1000,
-              step: 1000,
             },
           ],
+          width: 12,
         },
       ],
+      subCommands: browserCommands.commands.find(
+        (command) => command.label === "浏览器操作"
+      ).subCommands.map((command) => ({
+        ...command,
+        value: command.value.replace("quickcomposer.browser.", "quickcomposer.macos.browser."),
+      })),
     },
   ],
 };

src/js/composer/commands/networkCommands.js

@@ -265,7 +265,7 @@ export const networkCommands = {
             {
               label: "IP版本",
               icon: "settings_ethernet",
-              component: "q-select",
+              component: "QSelect",
               options: [
                 { label: "自动", value: 0 },
                 { label: "IPv4", value: 4 },

src/js/composer/commands/systemCommands.js

@@ -497,7 +497,7 @@ export const systemCommands = {
         },
         {
           label: "信号",
-          component: "q-select",
+          component: "QSelect",
           icon: "signal_cellular_alt",
           options: [
             { label: "正常终止 (15)", value: "SIGTERM" },

src/js/composer/commands/uiCommands.js

@@ -129,7 +129,7 @@ export const uiCommands = {
           config: [
             {
               label: "图标类型",
-              component: "q-select",
+              component: "QSelect",
               defaultValue: "success",
               icon: "lightbulb",
               width: 6,

src/js/composer/commands/userdataCommands.js

@@ -10,7 +10,8 @@ export const userdataCommands = {
       config: [
         {
           label: "数据标识",
-          component: "q-input",
+          component: "QInput",
+          icon: "title",
         },
       ],
       outputVariable: "userData",
@@ -31,11 +32,13 @@ export const userdataCommands = {
         {
           label: "数据",
           component: "VariableInput",
+          icon: "text_fields",
           width: 7,
         },
         {
           label: "数据标识",
-          component: "q-input",
+          component: "QInput",
+          icon: "title",
           width: 3,
         },
         {
@@ -53,7 +56,8 @@ export const userdataCommands = {
       config: [
         {
           label: "数据标识",
-          component: "q-input",
+          component: "QInput",
+          icon: "title",
         },
       ],
     },

src/js/composer/commands/utoolsCommand.js

@@ -33,7 +33,7 @@ export const utoolsCommands = {
       icon: "exit_to_app",
       config: [
         {
-          component: "q-select",
+          component: "QSelect",
           options: [
             { label: "杀死插件进程", value: true },
             { label: "插件隐藏到后台", value: false },