update

src/components/DebugPanel.vue

@@ -27,9 +27,12 @@ const formattedVariables = computed(() => {
     let displayValue = ""
     let displayType = typeof value
 
-    if (Array.isArray(value) && value.length === 2 && 
+    if (
+      Array.isArray(value) &&
+      value.length === 2 &&
       value[0] === "IMPORTED_FAUX_PRIMITIVE" &&
-        value[1] === "imported object") {
+      value[1] === "imported object"
+    ) {
       displayValue = ""
       displayType = "function"
     } else if (typeof value === "object" && value !== null) {
@@ -97,12 +100,7 @@ function closePanel() {
           </template>
 
           <div v-if="formattedVariables.length === 0">
-              <n-text
-                type="info"
-                class="no-variables-text"
-              >
-                暂无变量
-              </n-text>
+            <n-text type="info" class="no-variables-text"> 暂无变量 </n-text>
           </div>
           <n-space v-else vertical :size="12">
             <n-card
@@ -119,12 +117,11 @@ function closePanel() {
                 <n-text strong :type="'primary'">{{ variable.name }}</n-text>
                 <n-tag size="small" type="info">{{ variable.type }}</n-tag>
               </n-flex>
-                <n-text
-                  code
-                  class="variable-value"
-                >
+              <n-scrollbar style="max-height: 200px">
+                <n-text code class="variable-value">
                   {{ variable.value }}
                 </n-text>
+              </n-scrollbar>
             </n-card>
           </n-space>
         </n-collapse-item>
@@ -138,17 +135,16 @@ function closePanel() {
               <n-icon>
                 <Icon icon="mdi:console" :width="14" :height="14" />
               </n-icon>
-                <n-text>输出 ({{ outputLines }} 行)</n-text>
+              <n-text>输出({{ outputLines }}行)</n-text>
             </n-flex>
           </template>
 
           <n-card size="small" :bordered="true">
-              <n-text
-                code
-                class="output-text"
-              >
+            <n-scrollbar style="max-height: 400px">
+              <n-text code class="output-text">
                 {{ formattedOutput }}
               </n-text>
+            </n-scrollbar>
           </n-card>
         </n-collapse-item>
       </n-collapse>
@@ -170,8 +166,6 @@ function closePanel() {
   font-size: 12px;
   white-space: pre-wrap;
   word-break: break-all;
-  max-height: 400px;
-  overflow-y: auto;
   display: block;
 }
 

src/desktop/DebugSection.vue

@@ -10,7 +10,7 @@ import { useIntervalFn } from "@vueuse/core"
 
 // 组件
 import DebugEditor from "../components/DebugEditor.vue"
-import FloatingPanel from "../components/FloatingPanel.vue"
+import DebugPanel from "../components/DebugPanel.vue"
 
 // 组合式函数和类型
 import { code, input, reset, size, output, status } from "../composables/code"
@@ -492,8 +492,8 @@ function autoRun() {
       :next-line-text="nextLineText"
     />
 
-    <!-- 浮动调试面板 -->
-    <FloatingPanel
+    <!-- 调试面板 -->
+    <DebugPanel
       :visible="showFloatingPanel"
       :variables="currentVariables"
       :output="currentOutput"

src/main.ts

@@ -26,6 +26,7 @@ import {
   NText,
   NTooltip,
   NSlider,
+  NScrollbar,
   create,
 } from "naive-ui"
 import "normalize.css"
@@ -61,6 +62,7 @@ const naive = create({
     NText,
     NTooltip,
     NSlider,
+    NScrollbar,
   ],
 })