🎈 perf: 优化iframe窗口，加入了关闭按钮

dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue

@@ -9,14 +9,17 @@ const sidebarMenu = shallowRef(sidebarItems);
 
 const showIframe = ref(false);
 
-const dragButtonStyle = {
+const dragHeaderStyle = {
   width: '100%',
   padding: '4px',
-  cursor: 'move',
   background: '#f0f0f0',
   borderBottom: '1px solid #ccc',
   borderTopLeftRadius: '8px',
-  borderTopRightRadius: '8px'
+  borderTopRightRadius: '8px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  cursor: 'move'
 };
 
 function toggleIframe() {
@@ -27,27 +30,36 @@ let offsetX = 0;
 let offsetY = 0;
 let isDragging = false;
 
-// @ts-ignore
 function onMouseDown(event) {
+  // 如果点击的是关闭按钮则不启动拖拽
+  // 可通过 event.target 判断（这里通过在关闭按钮上添加 .stop 处理）
   isDragging = true;
-  offsetX = event.clientX - event.target.parentElement.getBoundingClientRect().left;
-  offsetY = event.clientY - event.target.parentElement.getBoundingClientRect().top;
+  const dm = document.getElementById('draggable-iframe');
+  const rect = dm.getBoundingClientRect();
+  offsetX = event.clientX - rect.left;
+  offsetY = event.clientY - rect.top;
+  // 禁用文字选中
+  document.body.style.userSelect = 'none';
+  // 绑定全局事件，确保拖拽不中断
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
 }
-// @ts-ignore
+
 function onMouseMove(event) {
   if (isDragging) {
     const dm = document.getElementById('draggable-iframe');
-    // @ts-ignore
     dm.style.left = (event.clientX - offsetX) + 'px';
-    // @ts-ignore
     dm.style.top = (event.clientY - offsetY) + 'px';
   }
 }
 
 function onMouseUp() {
   isDragging = false;
+  document.body.style.userSelect = ''; // 恢复文字选中
+  // 移除全局事件监听
+  document.removeEventListener('mousemove', onMouseMove);
+  document.removeEventListener('mouseup', onMouseUp);
 }
-
 </script>
 
 <template>
@@ -65,7 +77,7 @@ function onMouseUp() {
     <div style="position: absolute; bottom: 32px; width: 100%; font-size: 13px;" class="text-center">
       <v-list-item v-if="!customizer.mini_sidebar" @click="toggleIframe">
         <v-btn variant="plain" size="small">
-          🤔 点击查看悬浮文档！
+          🤔 点击此处 查看/关闭 悬浮文档！
         </v-btn>
       </v-list-item>
       <small style="display: block;" v-if="buildVer">WebUI 版本: {{ buildVer }}</small>
@@ -78,18 +90,33 @@ function onMouseUp() {
 
       <small style="display: block; margin-top: 8px;">AGPL-3.0</small>
     </div>
-
   </v-navigation-drawer>
+  
+  <!-- 修改后的拖拽 iframe -->
   <div v-if="showIframe"
     id="draggable-iframe"
-    style="position: fixed; bottom: 16px; right: 16px; width: 500px; height: 400px; border: 1px solid #ccc; background: white; resize: both; overflow: auto; z-index: 10000000; border-radius: 8px;"
-    @mousemove="onMouseMove"
-    @mouseup="onMouseUp"
-    @mouseleave="onMouseUp">
-    <div :style="dragButtonStyle" @mousedown="onMouseDown">
-      <v-icon icon="mdi-cursor-move" />
+    style="position: fixed; bottom: 16px; right: 16px; width: 500px; height: 400px; min-width: 300px; min-height: 200px; border: 1px solid #ccc; background: white; resize: both; overflow: auto; z-index: 10000000; border-radius: 8px;">
+    
+    <!-- 拖拽头部，整个区域均可拖拽，内部的关闭按钮阻止事件冒泡 -->
+    <div :style="dragHeaderStyle" @mousedown="onMouseDown">
+      <div style="display: flex; align-items: center;">
+        <v-icon icon="mdi-cursor-move" />
+        <span style="margin-left: 8px;">拖拽</span>
+      </div>
+      <!-- 关闭按钮：点击时停止事件传播，避免触发拖拽 -->
+      <v-btn 
+        icon 
+        @click.stop="toggleIframe" 
+        @mousedown.stop
+        style="border: 1px solid #ccc; border-radius: 8px; padding: 4px; width: 32px; height: 32px;"
+      >
+        <v-icon icon="mdi-close" />
+      </v-btn>
+
     </div>
-    <iframe src="https://astrbot.app" style="width: 100%; height: calc(100% - 24px); border: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;"></iframe>
+    
+    <!-- iframe 区域 -->
+    <iframe src="https://astrbot.app" style="width: 100%; height: calc(100% - 32px); border: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;"></iframe>
   </div>
 </template>
 
@@ -106,8 +133,8 @@ export default {
     hasWebUIUpdate: false,
   }),
   mounted() {
-    this.get_version()
-    this.check_webui_update()
+    this.get_version();
+    this.check_webui_update();
   },
   methods: {
     get_version() {
@@ -131,4 +158,4 @@ export default {
     }
   },
 };
-</script>
+</script>