update

src/desktop/Content.vue

@@ -7,6 +7,7 @@ import { analyse, analyzeError, showAnalyse } from "../composables/analyse"
 import {
   clearInput,
   code,
+  debug,
   input,
   output,
   reset,
@@ -22,6 +23,9 @@ function copy() {
   copyTextToClipboard(code.value)
   message.success("已经复制好了")
 }
+function handleDebug() {
+  debug.value = true
+}
 </script>
 
 <template>
@@ -36,6 +40,14 @@ function copy() {
           :language="code.language"
         >
           <template #actions>
+            <n-button
+              quaternary
+              type="error"
+              v-if="code.value && code.language === 'python'"
+              @click="handleDebug"
+            >
+              调试
+            </n-button>
             <n-button quaternary type="primary" @click="copy">复制</n-button>
             <n-button quaternary @click="reset">清空</n-button>
           </template>

src/desktop/Debug.vue

@@ -1,25 +1,60 @@
-<template>
-  <iframe width="100%" height="350" frameborder="0" :src="src"> </iframe>
-</template>
-<script lang="ts" setup>
-import qs from "query-string"
-import { onMounted, ref } from "vue"
-import { code } from "../composables/code"
-
-const src = ref("")
-
-onMounted(() => {
-  // const url = "http://localhost:8000"
-  const url = "https://pythontutor.xuyue.cc"
-  const base = url + "/iframe-embed.html"
-
-  const part1 = qs.stringify({
-    code: code.value,
-    codeDivWidth: 300,
-  })
-  const part2 =
-    "&cumulative=false&curInstr=0&heapPrimitives=nevernest&origin=opt-frontend.js&py=3&rawInputLstJSON=%5B%5D&textReferences=true"
-  const query = part1 + part2
-  src.value = base + "#" + query
-})
-</script>
+<template>
+  <div class="loading" v-if="loading">正在加载中...（第一次打开会有点慢）</div>
+  <div v-if="!loading">
+    <p class="tip">提醒：</p>
+    <p>1. 点击【下一步】开始调试（也可以拖动进度条）</p>
+    <p>
+      2. 点击
+      <n-button text type="primary" @click="close">修改代码</n-button>
+      完成修改后可再次调试
+    </p>
+  </div>
+  <iframe
+    width="100%"
+    height="350"
+    frameborder="0"
+    :src="src"
+    ref="main"
+  ></iframe>
+</template>
+<script lang="ts" setup>
+import qs from "query-string"
+import { onMounted, ref, useTemplateRef } from "vue"
+import { code, debug } from "../composables/code"
+
+const src = ref("")
+const loading = ref(true)
+const main = useTemplateRef("main")
+
+onMounted(() => {
+  // const url = "http://localhost:8000"
+  const url = "https://pythontutor.xuyue.cc"
+  const base = url + "/iframe-embed.html"
+
+  const part1 = qs.stringify({
+    code: code.value,
+    codeDivWidth: 300,
+  })
+  const part2 =
+    "&cumulative=false&curInstr=0&heapPrimitives=nevernest&origin=opt-frontend.js&py=3&rawInputLstJSON=%5B%5D&textReferences=true"
+  const query = part1 + part2
+  src.value = base + "#" + query
+
+  main.value!.addEventListener("load", () => {
+    loading.value = false
+  })
+})
+
+function close() {
+  debug.value = false
+}
+</script>
+<style scoped>
+.loading {
+  font-size: 16px;
+}
+
+.tip {
+  margin-top: 0;
+}
+</style>

src/desktop/Header.vue

@@ -3,7 +3,7 @@ import { Icon } from "@iconify/vue"
 import { useMessage } from "naive-ui"
 import SelectLanguage from "../components/SelectLanguage.vue"
 import ThemeButton from "../components/ThemeButton.vue"
-import { code, debug, loading, run, share, size } from "../composables/code"
+import { loading, run, share, size } from "../composables/code"
 
 const message = useMessage()
 
@@ -11,10 +11,6 @@ function handleShare() {
   share()
   message.success("分享链接已复制")
 }
-
-function handleDebug() {
-  debug.value = true
-}
 </script>
 
 <template>
@@ -25,9 +21,6 @@ function handleDebug() {
         <div class="title">徐越的自测猫</div>
       </n-flex>
       <n-flex>
-        <n-button quaternary type="error" v-if="code.value && code.language === 'python'" @click="handleDebug">
-          调试
-        </n-button>
         <n-button quaternary @click="handleShare">分享</n-button>
         <ThemeButton />
         <n-input-number

src/desktop/Query.vue

@@ -27,10 +27,10 @@
 </template>
 <script setup lang="ts">
 import { useMessage } from "naive-ui"
+import qs from "query-string"
 import { onMounted, ref } from "vue"
 import { createCode, listCode, removeCode } from "../api"
 import { code } from "../composables/code"
-import qs from "query-string"
 
 const message = useMessage()