From c9bcd42ada424eedbc2d3b1c8d122b4ca74d5615 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sun, 22 Dec 2024 02:06:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B0=83=E8=AF=95=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/code.ts |  1 +
 src/desktop/Debug.vue   | 25 +++++++++++++++++++++++++
 src/desktop/Header.vue  | 11 +++++++++--
 src/desktop/index.vue   | 12 +++++++++++-
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/desktop/Debug.vue

diff --git a/src/composables/code.ts b/src/composables/code.ts
index d622e30..a000a0b 100644
--- a/src/composables/code.ts
+++ b/src/composables/code.ts
@@ -29,6 +29,7 @@ export const output = ref("")
 export const status = ref(Status.NotStarted)
 export const loading = ref(false)
 export const size = ref(0)
+export const debug = ref(false)
 
 watch(size, (value: number) => {
   cache.fontsize.value = value
diff --git a/src/desktop/Debug.vue b/src/desktop/Debug.vue
new file mode 100644
index 0000000..ab22372
--- /dev/null
+++ b/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>
diff --git a/src/desktop/Header.vue b/src/desktop/Header.vue
index ffd9011..9b61358 100644
--- a/src/desktop/Header.vue
+++ b/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"
diff --git a/src/desktop/index.vue b/src/desktop/index.vue
index 702c90c..29fb00d 100644
--- a/src/desktop/index.vue
+++ b/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"