fix: 修改独立窗口样式

src/views/paper/question/DeptTree.vue

@@ -1,29 +1,53 @@
 <template>
-  <div class="head-container">
-    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入知识点">
-      <template #prefix>
-        <Icon icon="ep:search" />
-      </template>
-    </el-input>
-  </div>
-  <div class="head-container " >
-    <el-tree
-      ref="treeRef"
-      :data="deptList"
-      :expand-on-click-node="false"
-      :filter-node-method="filterNode"
-      :props="defaultProps"
-      default-expand-all
-      highlight-current
-      node-key="id"
-      @node-click="handleNodeClick"
-    />
+  <div style="height: 100%; display: flex; flex-direction: column">
+    <!-- 搜索框固定在顶部 -->
+    <div style="flex-shrink: 0; margin-bottom: 16px">
+      <el-input
+        v-model="deptName"
+        clearable
+        placeholder="搜索知识点..."
+        style="
+          --el-input-border-radius: 20px;
+          --el-input-bg-color: #f8f9fa;
+          --el-input-border-color: transparent;
+        "
+        size="default"
+      >
+        <template #prefix>
+          <el-icon style="color: #67c23a">
+            <Search />
+          </el-icon>
+        </template>
+      </el-input>
+    </div>
+    <!-- 树形内容区域可滚动 -->
+    <div
+      style="flex: 1; overflow: auto; margin: -2px; padding: 2px 8px 8px 2px; border-radius: 6px"
+    >
+      <el-tree
+        ref="treeRef"
+        :data="deptList"
+        :expand-on-click-node="false"
+        :filter-node-method="filterNode"
+        :props="defaultProps"
+        default-expand-all
+        highlight-current
+        node-key="id"
+        @node-click="handleNodeClick"
+        style="
+          --el-tree-node-hover-bg-color: #f0f9ff;
+          --el-tree-node-content-height: auto;
+          padding-bottom: 8px;
+        "
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, watch } from 'vue'
 import { ElTree } from 'element-plus'
-import * as DeptApi from '@/api/system/dept'
+import { Search } from '@element-plus/icons-vue'
 import { defaultProps, handleTree } from '@/utils/tree'
 import * as SpecialtyApi from '@/api/points'
 
@@ -62,3 +86,66 @@ onMounted(async () => {
   await getTree()
 })
 </script>
+
+<style scoped>
+/* 树节点内容样式 - 彻底解决长文本显示问题 */
+:deep(.el-tree-node__content) {
+  height: auto !important;
+  min-height: 32px !important;
+  padding: 6px 20px 6px 0 !important;
+  white-space: normal !important;
+  word-wrap: break-word !important;
+  word-break: break-all !important;
+  line-height: 1.4 !important;
+  display: flex !important;
+  align-items: flex-start !important;
+}
+
+/* 树节点标签样式 */
+:deep(.el-tree-node__label) {
+  white-space: normal !important;
+  word-wrap: break-word !important;
+  word-break: break-all !important;
+  line-height: 1.4 !important;
+  flex: 1 !important;
+  padding-top: 2px;
+}
+
+/* 展开/收起图标对齐 */
+:deep(.el-tree-node__expand-icon) {
+  margin-top: 6px !important;
+  flex-shrink: 0 !important;
+}
+
+/* 为不同层级的节点设置不同的样式 */
+:deep(.el-tree-node[data-level='1'] .el-tree-node__content) {
+  font-weight: 600;
+  color: #303133;
+}
+
+:deep(.el-tree-node[data-level='2'] .el-tree-node__content) {
+  font-weight: 500;
+  color: #606266;
+}
+
+:deep(.el-tree-node[data-level='3'] .el-tree-node__content) {
+  font-weight: 400;
+  color: #909399;
+}
+
+/* 悬停效果 */
+:deep(.el-tree-node__content:hover) {
+  background-color: #f0f9ff !important;
+}
+
+/* 选中状态 */
+:deep(.el-tree-node.is-current > .el-tree-node__content) {
+  background-color: #e1f5fe !important;
+  color: #409eff !important;
+}
+
+/* 滚动条样式 */
+:deep(.el-tree) {
+  padding-bottom: 12px;
+}
+</style>