feat: 调试面板支持移动端，变量按作用域分组

- 调试逻辑下沉到 composables/debug.ts，桌面和移动端共用；模态框抽成 DebugModal.vue（桌面 80vw / 移动 96vw），用 update:show 收口，关闭按钮、Esc、遮罩三条路径都会清理状态 - 移动端在"操作"菜单里补上调试入口（仅 Python） - 变量面板改为分组展示：栈顶帧的局部变量在前、全局变量在后，顺序用 pg_encoder 的 ordered_globals / ordered_varnames， __return__ 显示成"返回值"。原来两者是 merge 成一份的，在函数里分不清哪个是局部、哪个是外面的全局 - 面板关闭时还原全局 output / status，否则主页输出区会停在某一调试步 - 输入切分不再过滤空行，只丢掉末尾换行产生的空串：程序可能正需要读一个空行，过滤掉会让输入提前耗尽、误报"需要更多输入" - 后端超时/超限的 detail 透传到提示里，调试按钮加 loading 态 - 清掉 computed 和高亮更新里遗留的 console.log（自动播放时 500ms 刷一次） Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019QGZaLUWzGPEMTk6A5RShC
2026-09-07 04:46:01 -06:00
parent 2afc81e9ab
commit aa928dd3f5
7 changed files with 245 additions and 142 deletions
--- a/src/components/DebugEditor.vue
+++ b/src/components/DebugEditor.vue
@@ -214,13 +214,6 @@ function onReady(payload: {
 // 更新高亮的函数
 function updateHighlight() {
  if (editorView.value) {
-    console.log(
-      "Updating highlight - currentLine:",
-      props.currentLine,
-      "nextLine:",
-      props.nextLine,
-    )
-
    // 如果当前行和下一步相同，只高亮当前行，不显示下一步
    const nextLine =
      props.currentLine === props.nextLine ? undefined : props.nextLine
--- a/src/components/DebugModal.vue
+++ b/src/components/DebugModal.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import DebugPanel from "./DebugPanel.vue"
+import { isMobile } from "../composables/breakpoints"
+import { closeDebug, debugData, showDebugModal } from "../composables/debug"
+
+// 用 update:show 而不是 @close：关闭按钮、Esc、遮罩点击都会走到这里
+function onUpdateShow(value: boolean) {
+  if (!value) closeDebug()
+}
+</script>
+
+<template>
+  <n-modal
+    :show="showDebugModal"
+    preset="card"
+    title="调试"
+    size="large"
+    :mask-closable="false"
+    :auto-focus="false"
+    :style="
+      isMobile ? { width: '96vw' } : { width: '80vw', maxWidth: '1000px' }
+    "
+    @update:show="onUpdateShow"
+  >
+    <DebugPanel :initial-debug-data="debugData" />
+  </n-modal>
+</template>
--- a/src/components/DebugPanel.vue
+++ b/src/components/DebugPanel.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // Vue 核心
-import { ref, computed, watch } from "vue"
+import { ref, computed, onBeforeUnmount, watch } from "vue"

 // 第三方库
 import copyTextToClipboard from "copy-text-to-clipboard"
@@ -81,7 +81,6 @@ const currentLine = computed(() => {
    debugData.value.trace[currentStep.value]
  ) {
    const line = debugData.value.trace[currentStep.value].line
-    console.log(`Step ${currentStep.value}: currentLine = ${line}`)
    return line && line > 0 ? line : undefined
  }
  return undefined
@@ -94,10 +93,8 @@ const nextLine = computed(() => {
    debugData.value.trace[currentStep.value + 1]
  ) {
    const line = debugData.value.trace[currentStep.value + 1].line
-    console.log(`Step ${currentStep.value}: nextLine = ${line}`)
    return line && line > 0 && line !== currentLine.value ? line : undefined
  }
-  console.log(`Step ${currentStep.value}: nextLine = undefined (no next step)`)
  return undefined
 })

@@ -106,40 +103,45 @@ const currentTraceEntry = computed(() => {
  return debugData.value?.trace?.[currentStep.value] ?? null
 })

-// 调试信息相关：优先显示栈顶（高亮）帧的局部变量，没有则用全局
-const currentVariables = computed(() => {
-  const entry = currentTraceEntry.value
-  if (!entry) return {}
-  const stack = entry.stack_to_render ?? []
-  const topFrame = stack.find((f: any) => f.is_highlighted) ?? stack[stack.length - 1]
-  if (topFrame && topFrame.encoded_locals) {
-    return { ...(entry.globals ?? {}), ...topFrame.encoded_locals }
-  }
-  return entry.globals ?? {}
-})
+// pg_encoder 的类型标签 -> 展示用的类型名
+const TYPE_LABELS: Record<string, string> = {
+  LIST: "list",
+  TUPLE: "tuple",
+  SET: "set",
+  DICT: "dict",
+  FUNCTION: "function",
+  INSTANCE: "object",
+  INSTANCE_PPRINT: "object",
+  CLASS: "class",
+}

-// 格式化变量显示
-const formattedVariables = computed(() => {
-  const variables = currentVariables.value
-  if (!variables || Object.keys(variables).length === 0) {
-    return []
-  }
+/**
+ * 把一组编码变量转成可展示的列表。
+ * orderedNames 用 pg_encoder 给的定义顺序（ordered_globals / ordered_varnames），
+ * 比 Object.keys 更贴近代码里出现的先后。
+ */
+function formatVariables(
+  encoded: Record<string, any> | undefined,
+  orderedNames: string[] | undefined,
+  heap: Record<string, any>,
+) {
+  if (!encoded) return []

-  const heap: Record<string, any> =
-    debugData.value?.trace?.[currentStep.value]?.heap ?? {}
+  const names = orderedNames?.length
+    ? orderedNames.filter((name) => name in encoded)
+    : Object.keys(encoded)

-  return Object.entries(variables)
-    .filter(([, value]) => {
+  return names
+    .filter((name) => {
+      const value = encoded[name]
      // 隐藏导入的模块/函数占位符
-      if (
-        Array.isArray(value) &&
-        value[0] === "IMPORTED_FAUX_PRIMITIVE"
-      )
+      if (Array.isArray(value) && value[0] === "IMPORTED_FAUX_PRIMITIVE")
        return false
      if (Array.isArray(value) && value[0] === "FUNCTION") return false
      return true
    })
-    .map(([key, value]) => {
+    .map((name) => {
+      const value = encoded[name]
      const displayValue = decodeValue(value, heap)
      // resolve REF before checking tag
      const resolved =
@@ -147,21 +149,51 @@ const formattedVariables = computed(() => {
          ? heap[String(value[1])]
          : value
      const tag = Array.isArray(resolved) ? resolved[0] : null
-      const typeMap: Record<string, string> = {
-        LIST: "list",
-        TUPLE: "tuple",
-        SET: "set",
-        DICT: "dict",
-        FUNCTION: "function",
-        INSTANCE: "object",
-        INSTANCE_PPRINT: "object",
-        CLASS: "class",
-      }
      const displayType =
-        tag && typeMap[tag] ? typeMap[tag] : typeof value
+        tag && TYPE_LABELS[tag] ? TYPE_LABELS[tag] : typeof value

-      return { name: key, value: displayValue, type: displayType }
+      return {
+        // __return__ 是 pg_logger 给返回值起的内部名字，直接显示不友好
+        name: name === "__return__" ? "返回值" : name,
+        value: displayValue,
+        type: displayType,
+      }
    })
+}
+
+/**
+ * 变量按作用域分组：栈顶（高亮）帧的局部变量在前，全局变量在后。
+ * 之前是把两者 merge 成一份展示的，函数里看不出哪个是局部、哪个是外面的全局。
+ */
+const variableGroups = computed(() => {
+  const entry = currentTraceEntry.value
+  if (!entry) return []
+
+  const heap: Record<string, any> = entry.heap ?? {}
+  const stack = entry.stack_to_render ?? []
+  const topFrame =
+    stack.find((f: any) => f.is_highlighted) ?? stack[stack.length - 1]
+
+  const groups = []
+  if (topFrame?.encoded_locals) {
+    groups.push({
+      key: "locals",
+      title: `局部变量 · ${topFrame.func_name}()`,
+      variables: formatVariables(
+        topFrame.encoded_locals,
+        topFrame.ordered_varnames,
+        heap,
+      ),
+    })
+  }
+  groups.push({
+    // 不在函数里时没有对照组，标题就用朴素的"变量"
+    key: "globals",
+    title: topFrame ? "全局变量" : "变量",
+    variables: formatVariables(entry.globals, entry.ordered_globals, heap),
+  })
+
+  return groups.filter((group) => group.variables.length > 0)
 })

 // 计算输出行数
@@ -310,6 +342,18 @@ const currentOutput = computed(() => {
  return outputText
 })

+// 下面的 watch 会把当前调试步的输出/状态写进全局 output、status，
+// 面板关闭后必须还原，否则主页面的输出区会停在某一步的内容、
+// 状态标签也可能被改成「运行错误」。setup 期取值即进入面板时的快照，
+// 放在 onBeforeUnmount 还原可以覆盖所有关闭方式（关闭按钮、Esc、遮罩）。
+const outputBeforeDebug = output.value
+const statusBeforeDebug = status.value
+
+onBeforeUnmount(() => {
+  output.value = outputBeforeDebug
+  status.value = statusBeforeDebug
+})
+
 // 把外部状态的同步放到 watch 里（computed 不能有副作用）
 watch(
  [currentOutput, () => debugData.value?.trace],
@@ -346,16 +390,6 @@ watch(
      if (newData.trace && newData.trace.length > 5000) {
        message.warning(`超过 5000 步，请优化代码或减少循环次数`)
      }
-
-      // 显示前几个 trace 条目的行号
-      if (newData.trace) {
-        console.log("First few trace entries:")
-        newData.trace.slice(0, 5).forEach((entry: any, index: number) => {
-          console.log(
-            `  Step ${index}: line ${entry.line}, event: ${entry.event}`,
-          )
-        })
-      }
    }
  },
  { immediate: true },
@@ -504,36 +538,38 @@ function autoRun() {

    <!-- 右侧：调试信息面板 -->
    <n-card :bordered="true" title="调试信息" size="small" style="width: 350px">
-      <!-- 变量部分 -->
+      <!-- 变量部分：局部 / 全局分组 -->
      <n-flex vertical style="margin-bottom: 16px">
-        <n-text strong style="margin-bottom: 8px">变量</n-text>
-        <n-scrollbar style="max-height: 260px">
+        <n-scrollbar style="max-height: 300px">
          <n-flex
-            v-if="formattedVariables.length === 0"
+            v-if="variableGroups.length === 0"
            vertical
            style="padding: 20px; text-align: center"
          >
            <n-text type="info">暂无变量</n-text>
          </n-flex>
-          <n-flex v-else vertical>
-            <n-card
-              v-for="variable in formattedVariables"
-              :key="variable.name"
-              size="small"
-              :bordered="true"
-            >
-              <n-flex vertical>
-                <n-flex justify="space-between" align="center">
-                  <n-text class="debug-text-title" strong type="primary">{{
-                    variable.name
-                  }}</n-text>
-                  <n-tag size="small" type="info">{{ variable.type }}</n-tag>
+          <n-flex v-else vertical size="large">
+            <n-flex v-for="group in variableGroups" :key="group.key" vertical>
+              <n-text strong depth="2">{{ group.title }}</n-text>
+              <n-card
+                v-for="variable in group.variables"
+                :key="`${group.key}-${variable.name}`"
+                size="small"
+                :bordered="true"
+              >
+                <n-flex vertical>
+                  <n-flex justify="space-between" align="center">
+                    <n-text class="debug-text-title" strong type="primary">{{
+                      variable.name
+                    }}</n-text>
+                    <n-tag size="small" type="info">{{ variable.type }}</n-tag>
+                  </n-flex>
+                  <n-text code class="debug-text">
+                    {{ variable.value }}
+                  </n-text>
                </n-flex>
-                <n-text code class="debug-text">
-                  {{ variable.value }}
-                </n-text>
-              </n-flex>
-            </n-card>
+              </n-card>
+            </n-flex>
          </n-flex>
        </n-scrollbar>
      </n-flex>
--- a/src/composables/debug.ts
+++ b/src/composables/debug.ts
@@ -0,0 +1,74 @@
+import { ref } from "vue"
+import { debug as fetchDebugTrace } from "../api"
+import { code, input } from "./code"
+
+export const showDebugModal = ref(false)
+export const debugData = ref<any>(null)
+export const debugLoading = ref(false)
+
+/**
+ * 把输入框内容切成 stdin 行。
+ * 只丢掉末尾换行产生的那个空串，中间的空行必须保留 ——
+ * 程序可能正需要读一个空行（input() 返回 ""），过滤掉会导致输入提前耗尽。
+ */
+function splitInputLines(text: string): string[] {
+  if (!text) return []
+  const lines = text.split("\n")
+  if (lines[lines.length - 1] === "") lines.pop()
+  return lines
+}
+
+/**
+ * trace 末尾停在 raw_input 即说明输入不足
+ * （pg_logger 在缺输入时会立刻 done=True，trace 中至多只有 1 个 raw_input 事件，
+ * 所以不能用计数对比，只能看末尾）
+ */
+function endsAtRawInput(data: any): boolean {
+  const trace = data?.trace
+  if (!trace?.length) return false
+  return trace[trace.length - 1].event === "raw_input"
+}
+
+export type DebugResult =
+  | { ok: true }
+  | { ok: false; level: "error" | "warning"; message: string }
+
+/**
+ * 请求调试数据并打开面板。
+ * 提示文案交给调用方展示：useMessage() 只能在组件的 setup 里取。
+ */
+export async function startDebug(): Promise<DebugResult> {
+  if (debugLoading.value) return { ok: true }
+
+  debugLoading.value = true
+  let res
+  try {
+    res = await fetchDebugTrace(code.value, splitInputLines(input.value))
+  } catch (err: any) {
+    return {
+      ok: false,
+      level: "error",
+      message: `调试失败: ${err?.response?.data?.detail ?? err?.message ?? "未知错误"}`,
+    }
+  } finally {
+    debugLoading.value = false
+  }
+
+  debugData.value = res.data
+
+  if (endsAtRawInput(res.data)) {
+    return {
+      ok: false,
+      level: "warning",
+      message: "程序需要更多输入，请在输入框补全后重新点击调试",
+    }
+  }
+
+  showDebugModal.value = true
+  return { ok: true }
+}
+
+export function closeDebug() {
+  showDebugModal.value = false
+  debugData.value = null
+}
--- a/src/desktop/CodeSection.vue
+++ b/src/desktop/CodeSection.vue
@@ -1,22 +1,13 @@
 <script lang="ts" setup>
-import { ref } from "vue"
 import copyTextToClipboard from "copy-text-to-clipboard"
 import { useMessage } from "naive-ui"
 import CodeEditor from "../components/CodeEditor.vue"
-import DebugPanel from "../components/DebugPanel.vue"
-import { code, format, input, reset, size } from "../composables/code"
-import { debug } from "../api"
+import DebugModal from "../components/DebugModal.vue"
+import { code, format, reset, size } from "../composables/code"
+import { debugLoading, startDebug } from "../composables/debug"

 const message = useMessage()

-const showDebugModal = ref(false)
-const debugData = ref<any>(null)
-
-function closeDebug() {
-  showDebugModal.value = false
-  debugData.value = null
-}
-
 function copy() {
  copyTextToClipboard(code.value)
  message.success("已经复制好了")
@@ -33,38 +24,9 @@ async function handleFormat() {
  }
 }

-/**
- * trace 末尾停在 raw_input 即说明输入不足
- * （pg_logger 在缺输入时会立刻 done=True，trace 中至多只有 1 个 raw_input 事件，
- * 所以不能用计数对比，只能看末尾）
- */
-function endsAtRawInput(debugData: any): boolean {
-  const trace = debugData?.trace
-  if (!trace?.length) return false
-  return trace[trace.length - 1].event === "raw_input"
-}
-
 async function handleDebug() {
-  const inputs = input.value
-    ? input.value.split("\n").filter((line) => line.trim() !== "")
-    : []
-
-  let res
-  try {
-    res = await debug(code.value, inputs)
-  } catch (err: any) {
-    message.error(`调试请求失败: ${err?.message ?? err}`)
-    return
-  }
-
-  debugData.value = res.data
-
-  if (endsAtRawInput(res.data)) {
-    message.warning("程序需要更多输入，请在输入框补全后重新点击调试")
-    return
-  }
-
-  showDebugModal.value = true
+  const result = await startDebug()
+  if (!result.ok) message[result.level](result.message)
 }
 </script>

@@ -84,7 +46,8 @@ async function handleDebug() {
        v-if="code.language === 'python'"
        quaternary
        type="error"
-        :disabled="!code.value"
+        :loading="debugLoading"
+        :disabled="!code.value || debugLoading"
        @click="handleDebug"
      >
        调试
@@ -92,16 +55,5 @@ async function handleDebug() {
    </template>
  </CodeEditor>

-  <n-modal
-    v-model:show="showDebugModal"
-    preset="card"
-    title="调试"
-    size="large"
-    :mask-closable="false"
-    :auto-focus="false"
-    @close="closeDebug"
-    style="width: 80vw; max-width: 1000px"
-  >
-    <DebugPanel :initial-debug-data="debugData" @close="closeDebug" />
-  </n-modal>
+  <DebugModal />
 </template>
--- a/src/mobile/Header.vue
+++ b/src/mobile/Header.vue
@@ -2,7 +2,9 @@
 import { Icon } from "@iconify/vue"
 import copyTextToClipboard from "copy-text-to-clipboard"
 import { useMessage, type DropdownOption } from "naive-ui"
+import { computed } from "vue"
 import { code, loading, reset, run, share } from "../composables/code"
+import { debugLoading, startDebug } from "../composables/debug"
 import { tab } from "../composables/tab"

 const message = useMessage()
@@ -24,11 +26,28 @@ function handleShare() {
  }
 }

-const menu: DropdownOption[] = [
-  { label: "复制", key: "copy", props: { onClick: copy } },
-  { label: "清空", key: "reset", props: { onClick: reset } },
-  { label: "分享", key: "share", props: { onClick: handleShare } },
-]
+async function handleDebug() {
+  const result = await startDebug()
+  if (!result.ok) message[result.level](result.message)
+}
+
+const menu = computed<DropdownOption[]>(() => {
+  const options: DropdownOption[] = [
+    { label: "复制", key: "copy", props: { onClick: copy } },
+    { label: "清空", key: "reset", props: { onClick: reset } },
+    { label: "分享", key: "share", props: { onClick: handleShare } },
+  ]
+  // 调试只支持 Python，跟桌面端的按钮保持一致
+  if (code.language === "python") {
+    options.push({
+      label: debugLoading.value ? "调试中…" : "调试",
+      key: "debug",
+      disabled: debugLoading.value || !code.value,
+      props: { onClick: handleDebug },
+    })
+  }
+  return options
+})
 </script>
 <template>
  <n-layout-header class="container" bordered>
--- a/src/mobile/index.vue
+++ b/src/mobile/index.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+import DebugModal from "../components/DebugModal.vue"
 import Content from "./Content.vue"
 import Header from "./Header.vue"
 </script>
 <template>
  <Header />
  <Content />
+  <DebugModal />
 </template>