添加调试模块

src/desktop/Debug.vue

@@ -0,0 +1,25 @@
+<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>

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

src/desktop/index.vue

@@ -19,12 +19,22 @@
   >
     <Query />
   </n-modal>
+  <n-modal
+    v-model:show="debug"
+    preset="card"
+    style="width: 700px"
+    :mask-closable="false"
+    title="可视化调试（测试版）"
+  >
+    <Debug />
+  </n-modal>
 </template>
 <script lang="ts" setup>
 import { useMagicKeys, whenever } from "@vueuse/core"
 import { ref } from "vue"
-import { run } from "../composables/code"
+import { debug, run } from "../composables/code"
 import Content from "./Content.vue"
+import Debug from "./Debug.vue"
 import File from "./File.vue"
 import Header from "./Header.vue"
 import Query from "./Query.vue"