From 953ca3720fe2a354f59999eee08651717db9952f Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 22 Oct 2025 12:41:06 +0800
Subject: [PATCH] update

---
 .../{FloatingPanel.vue => DebugPanel.vue}     | 126 +++++++++---------
 src/desktop/DebugSection.vue                  |   6 +-
 src/main.ts                                   |   2 +
 3 files changed, 65 insertions(+), 69 deletions(-)
 rename src/components/{FloatingPanel.vue => DebugPanel.vue} (54%)

diff --git a/src/components/FloatingPanel.vue b/src/components/DebugPanel.vue
similarity index 54%
rename from src/components/FloatingPanel.vue
rename to src/components/DebugPanel.vue
index 67af302..6beb273 100644
--- a/src/components/FloatingPanel.vue
+++ b/src/components/DebugPanel.vue
@@ -26,10 +26,13 @@ const formattedVariables = computed(() => {
     // 处理特殊类型
     let displayValue = ""
     let displayType = typeof value
-    
-    if (Array.isArray(value) && value.length === 2 && 
-        value[0] === "IMPORTED_FAUX_PRIMITIVE" && 
-        value[1] === "imported object") {
+
+    if (
+      Array.isArray(value) &&
+      value.length === 2 &&
+      value[0] === "IMPORTED_FAUX_PRIMITIVE" &&
+      value[1] === "imported object"
+    ) {
       displayValue = ""
       displayType = "function"
     } else if (typeof value === "object" && value !== null) {
@@ -84,74 +87,67 @@ function closePanel() {
     </template>
 
     <n-space vertical :size="16" class="panel-content">
-        <!-- 变量部分 -->
-        <n-collapse :default-expanded-names="['variables']">
-          <n-collapse-item title="变量" name="variables">
-            <template #header>
-              <n-flex align="center" :gap="8">
-                <n-icon>
-                  <Icon icon="mdi:variable" :width="14" :height="14" />
-                </n-icon>
-                <n-text>变量</n-text>
-              </n-flex>
-            </template>
+      <!-- 变量部分 -->
+      <n-collapse :default-expanded-names="['variables']">
+        <n-collapse-item title="变量" name="variables">
+          <template #header>
+            <n-flex align="center" :gap="8">
+              <n-icon>
+                <Icon icon="mdi:variable" :width="14" :height="14" />
+              </n-icon>
+              <n-text>变量</n-text>
+            </n-flex>
+          </template>
 
-            <div v-if="formattedVariables.length === 0">
-              <n-text
-                type="info"
-                class="no-variables-text"
+          <div v-if="formattedVariables.length === 0">
+            <n-text type="info" class="no-variables-text"> 暂无变量 </n-text>
+          </div>
+          <n-space v-else vertical :size="12">
+            <n-card
+              v-for="variable in formattedVariables"
+              :key="variable.name"
+              size="small"
+              :bordered="true"
+            >
+              <n-flex
+                justify="space-between"
+                align="center"
+                class="variable-header"
               >
-                暂无变量
-              </n-text>
-            </div>
-            <n-space v-else vertical :size="12">
-              <n-card
-                v-for="variable in formattedVariables"
-                :key="variable.name"
-                size="small"
-                :bordered="true"
-              >
-                <n-flex
-                  justify="space-between"
-                  align="center"
-                  class="variable-header"
-                >
-                  <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-text strong :type="'primary'">{{ variable.name }}</n-text>
+                <n-tag size="small" type="info">{{ variable.type }}</n-tag>
+              </n-flex>
+              <n-scrollbar style="max-height: 200px">
+                <n-text code class="variable-value">
                   {{ variable.value }}
                 </n-text>
-              </n-card>
-            </n-space>
-          </n-collapse-item>
-        </n-collapse>
+              </n-scrollbar>
+            </n-card>
+          </n-space>
+        </n-collapse-item>
+      </n-collapse>
 
-        <!-- 输出部分 -->
-        <n-collapse v-if="formattedOutput" :default-expanded-names="['output']">
-          <n-collapse-item :title="`输出 (${outputLines} 行)`" name="output">
-            <template #header>
-              <n-flex align="center">
-                <n-icon>
-                  <Icon icon="mdi:console" :width="14" :height="14" />
-                </n-icon>
-                <n-text>输出 ({{ outputLines }} 行)</n-text>
-              </n-flex>
-            </template>
+      <!-- 输出部分 -->
+      <n-collapse v-if="formattedOutput" :default-expanded-names="['output']">
+        <n-collapse-item :title="`输出 (${outputLines} 行)`" name="output">
+          <template #header>
+            <n-flex align="center">
+              <n-icon>
+                <Icon icon="mdi:console" :width="14" :height="14" />
+              </n-icon>
+              <n-text>输出({{ outputLines }}行)</n-text>
+            </n-flex>
+          </template>
 
-            <n-card size="small" :bordered="true">
-              <n-text
-                code
-                class="output-text"
-              >
+          <n-card size="small" :bordered="true">
+            <n-scrollbar style="max-height: 400px">
+              <n-text code class="output-text">
                 {{ formattedOutput }}
               </n-text>
-            </n-card>
-          </n-collapse-item>
-        </n-collapse>
+            </n-scrollbar>
+          </n-card>
+        </n-collapse-item>
+      </n-collapse>
     </n-space>
   </n-card>
 </template>
@@ -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;
 }
 
diff --git a/src/desktop/DebugSection.vue b/src/desktop/DebugSection.vue
index f565723..0919f66 100644
--- a/src/desktop/DebugSection.vue
+++ b/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"
diff --git a/src/main.ts b/src/main.ts
index 3d4b8db..abafe6b 100644
--- a/src/main.ts
+++ b/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,
   ],
 })