From 2259a61fa1779d91e8a3130a9b852fc4f2408179 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Tue, 25 Mar 2025 17:00:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=AC=AC=E4=B8=80=E6=AC=A1?=
 =?UTF-8?q?=E8=BF=90=E8=A1=8C=E7=BC=96=E6=8E=92=E6=97=B6=E7=9A=84=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComposerEditor.vue | 48 ++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/ComposerEditor.vue b/src/components/ComposerEditor.vue
index 4d8c771..938d22a 100644
--- a/src/components/ComposerEditor.vue
+++ b/src/components/ComposerEditor.vue
@@ -6,6 +6,37 @@
     :disabled-control-buttons="disabledControlButtons"
     class="fixed-full"
   />
+  <q-dialog v-model="showHelpDialog">
+    <q-card style="width: 450px">
+      <div class="q-pa-md">
+        <div class="text-h6 q-mb-md">👏🏻 欢迎使用可视化编排</div>
+        <div class="q-mb-sm">由于编排功能众多，推荐先查看教程再使用</div>
+        <div class="q-mb-sm">
+          <q-btn dense color="primary" flat @click="showHelp('#TMtYg')">
+            完整教程
+          </q-btn>
+        </div>
+        <div class="q-mb-sm">
+          <q-btn dense color="primary" flat @click="showHelp('#JqM2f')">
+            快速入门：浏览器控制典型案例
+          </q-btn>
+        </div>
+        <div class="row items-center">
+          <div>你随时可以点击右上角的</div>
+          <q-icon name="help" class="q-ml-xs" size="13px" />
+          <div>帮助按钮，再次查看教程</div>
+        </div>
+      </div>
+      <div class="flex justify-end q-pa-sm">
+        <q-btn
+          flat
+          dense
+          label="我知道了"
+          @click="showHelpDialog = false"
+        />
+      </div>
+    </q-card>
+  </q-dialog>
   <!-- 运行结果 -->
   <CommandRunResult ref="result"></CommandRunResult>
 </template>
@@ -15,22 +46,15 @@ import CommandComposer from "components/composer/CommandComposer.vue";
 import CommandRunResult from "components/CommandRunResult";
 import { useCommandManager } from "js/commandManager.js";
 import { dbManager } from "js/utools";
+import { ref } from "vue";
 
 export default {
   components: { CommandComposer, CommandRunResult },
   setup() {
     const hasRunComposer = dbManager.getStorage("st_hasRunComposer");
-
+    const showHelpDialog = ref(false);
     if (!hasRunComposer) {
-      quickcommand.showConfirmBox(
-        `<div>👏🏻 欢迎使用可视化编排，由于编排功能众多，推荐先查看教程再使用</div>
-        <div>查看教程<a href="javascript:void(0)" onclick="utools.ubrowser.goto('https://www.yuque.com/fofolee/qcdocs3/bg31vl#TMtYg').run({width: 1280, height: 720})">戳我</a></div>
-        <div>或者看一个<a href="javascript:void(0)" onclick="utools.ubrowser.goto('https://www.yuque.com/fofolee/qcdocs3/bg31vl#JqM2f').run({width: 1280, height: 720})">浏览器控制典型案例</a>快速入门</div>
-        <div>你随时可以点击右上角的<span style="font-weight: bolder;">帮助</span>按钮（图标为问号），再次查看教程</div>`,
-        "帮助",
-        true,
-        600
-      );
+      showHelpDialog.value = true;
       dbManager.setStorage("st_hasRunComposer", true);
     }
 
@@ -47,6 +71,7 @@ export default {
 
     return {
       commandManager,
+      showHelpDialog,
     };
   },
   emits: ["editorEvent"],
@@ -76,6 +101,9 @@ export default {
     runCurrentCommand(command) {
       this.$refs.result.runCurrentCommand(command);
     },
+    showHelp(id) {
+      window.showUb.help(id);
+    },
   },
 };
 </script>