新增树分割组件TreePanel

src/assets/styles/ruoyi.scss

@@ -332,6 +332,28 @@
   display: block;
 }
 
+/* tree-sidebar content */
+.tree-sidebar-manage-wrap {
+  display: flex;
+  gap: 0;
+  min-height: calc(100vh - 130px);
+  padding: 0 !important;
+  overflow: hidden;
+}
+
+.tree-sidebar-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  background: #fff;
+
+  .content-inner {
+    padding: 12px 16px;
+    height: 100%;
+    overflow-y: auto;
+  }
+}
+
 /* error */
 .error-title { color: #c0392b !important; }
 .error-title i { color: #c0392b !important; }
@@ -415,8 +437,3 @@
 .top-right-btn {
   margin-left: auto;
 }
-
-/* 分割面板样式 */
-.splitpanes.default-theme .splitpanes__pane {
-  background-color: var(--splitpanes-default-bg) !important;
-}

src/assets/styles/variables.module.scss

@@ -194,25 +194,36 @@ html.dark {
   }
 
   /* 分割窗格覆盖 */
-  .splitpanes {
-    background-color: var(--splitpanes-bg);
-
-    .splitpanes__pane {
-      background-color: var(--splitpanes-bg);
-      border-color: var(--splitpanes-border);
+  .tree-sidebar-manage-wrap {
+    .tree-sidebar-content {
+      background: var(--splitpanes-bg);
     }
-
-    .splitpanes__splitter {
-      background-color: var(--splitpanes-splitter-bg);
-      border-color: var(--splitpanes-border);
-
-      &:hover {
-        background-color: var(--splitpanes-splitter-hover-bg);
+    .tree-sidebar {
+      border-right: 1px solid var(--splitpanes-splitter-bg);
+      background: var(--splitpanes-bg);
+      .tree-header {
+        background: var(--splitpanes-bg);
+        border-color: var(--splitpanes-border);
       }
-
-      &:before,
-      &:after {
-        background-color: var(--splitpanes-border);
+      .tree-title {
+        color: var(--el-color-primary-light-2);
+      }
+      .collapse-button-container {
+        background: var(--splitpanes-bg) !important;
+      }
+      .collapse-button {
+        &:hover {
+          color: var(--el-color-primary-light-2);
+          background: var(--splitpanes-bg);
+        }
+      }
+      .resize-handle {
+        &:hover {
+          background: var(--splitpanes-splitter-hover-bg);
+        }
+        &.active {
+          background: var(--splitpanes-splitter-hover-bg);
+        }
       }
     }
   }