性能验证报告左侧树调整为可拉拽

src/views/business/performance/xnyzReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <div class="tree-container">
+    <div class="tree-container" ref="treeContainer" :style="{ width: treeWidth + 'px' }">
       <!-- 搜索框 -->
       <div class="search-box">
         <el-input
@@ -25,7 +25,15 @@
         </el-tree>
       </div>
     </div>
-    <div class="form-container">
+    
+    <!-- 可拖拽的分隔条 -->
+    <div 
+      class="resizer" 
+      @mousedown="startResize"
+      :class="{ 'resizing': isResizing }"
+    ></div>
+    
+    <div class="form-container" :style="{ width: 'calc(100% - ' + treeWidth + 'px)' }">
       <div v-if="showForm">
         <el-form id="pdfDom" :model="form" :label-width="formLabelWidth">
 
@@ -127,7 +135,13 @@ export default {
         children: 'children',
         isLeaf: (data) => !data.children || data.children.length === 0
       },
-      showForm: false
+      showForm: false,
+      
+      // 新增：拖拽相关数据
+      treeWidth: 380, // 初始宽度
+      isResizing: false,
+      startX: 0,
+      startWidth: 0
     }
   },
   methods: {
@@ -234,6 +248,43 @@ export default {
         // 恢复显示标题和导出按钮
         headerElement.style.display = originalDisplay
       })
+    },
+    
+    // 新增：拖拽方法
+    startResize(event) {
+      this.isResizing = true
+      this.startX = event.clientX
+      this.startWidth = this.treeWidth
+      
+      // 添加全局事件监听
+      document.addEventListener('mousemove', this.handleResize)
+      document.addEventListener('mouseup', this.stopResize)
+      
+      // 防止文本选择
+      event.preventDefault()
+    },
+    
+    handleResize(event) {
+      if (!this.isResizing) return
+      
+      const deltaX = event.clientX - this.startX
+      const newWidth = this.startWidth + deltaX
+      
+      // 设置最小和最大宽度限制
+      const minWidth = 280
+      const maxWidth = 600
+      
+      if (newWidth >= minWidth && newWidth <= maxWidth) {
+        this.treeWidth = newWidth
+      }
+    },
+    
+    stopResize() {
+      this.isResizing = false
+      
+      // 移除全局事件监听
+      document.removeEventListener('mousemove', this.handleResize)
+      document.removeEventListener('mouseup', this.stopResize)
     }
   },
   async created() {
@@ -246,6 +297,12 @@ export default {
     } catch (error) {
       console.error('Failed to fetch initial tree data:', error)
     }
+  },
+  
+  // 新增：组件销毁时清理事件监听
+  beforeDestroy() {
+    document.removeEventListener('mousemove', this.handleResize)
+    document.removeEventListener('mouseup', this.stopResize)
   }
 }
 </script>
@@ -255,15 +312,44 @@ export default {
   display: flex;
   width: 100%;
   height: 100vh;
+  position: relative;
 }
 
 .tree-container {
-  width: 380px;
+  width: 380px; /* 初始宽度 */
   height: 100vh;
   display: flex;
   flex-direction: column;
   border-right: 1px solid #dcdfe6;
   background: #fff;
+  min-width: 280px; /* 最小宽度 */
+  max-width: 600px; /* 最大宽度 */
+  transition: none; /* 拖拽时不需要过渡效果 */
+}
+
+/* 可拖拽的分隔条 */
+.resizer {
+  width: 6px;
+  height: 100%;
+  background: #f0f0f0;
+  cursor: col-resize;
+  position: relative;
+  z-index: 10;
+  
+  &:hover, &.resizing {
+    background: #c1c1c1;
+  }
+  
+  /* 添加分隔条两侧的边框 */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 2px;
+    width: 2px;
+    height: 100%;
+    background: #dcdfe6;
+  }
 }
 
 .search-box {
@@ -278,11 +364,12 @@ export default {
 }
 
 .form-container {
-  width: calc(100% - 380px);
+  width: calc(100% - 380px); /* 初始宽度计算 */
   height: 100vh;
   overflow: auto;
   padding: 20px;
   background: #fff;
+  min-width: calc(100% - 600px); /* 对应树区域最大宽度 */
 }
 
 .title {
@@ -420,4 +507,12 @@ export default {
 .form-container::-webkit-scrollbar-button {
   display: none;
 }
+
+// 拖拽时禁用文本选择
+body.resizing * {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
 </style>