Jelajahi Sumber

refactor(Tree): 优化树形结构页面布局和样式

- 设置树形结构高度自适应,添加垂直滚动条
wzg 4 bulan lalu
induk
melakukan
0877bc0e09
2 mengubah file dengan 22 tambahan dan 12 penghapusan
  1. 8 0
      src/css/Tree.module.css
  2. 14 12
      src/page/audio/tree.tsx

+ 8 - 0
src/css/Tree.module.css

@@ -11,4 +11,12 @@
 
 .site-tree-search-value {
   color: #f50;
+}
+
+.tit {
+  height: 70px;
+}
+.tree {
+  height: calc(100% - 70px);
+  overflow-y:auto;
 }

+ 14 - 12
src/page/audio/tree.tsx

@@ -121,18 +121,20 @@ const TreeComponent: React.FC<ChildComponentProps> = ({ onSelectFn }) => {
   };
   return (
     <div className={styles.ct}>
-      <div className={styles.title}>责任部门</div>
-      <Input
-        defaultValue={inputValue}
-        placeholder="请输入部门名称搜索"
-        allowClear
-        onChange={handleChange}
-        onCompositionStart={handleCompositionStart}
-        onCompositionEnd={handleCompositionEnd}
-        suffix={<SearchOutlined style={{ color: "#c2c8d1" }} />}
-        style={{ marginBottom: 8 }}
-      />
-      <div>
+      <div className={styles.tit}>
+        <div className={styles.title}>责任部门</div>
+        <Input
+          defaultValue={inputValue}
+          placeholder="请输入部门名称搜索"
+          allowClear
+          onChange={handleChange}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
+          suffix={<SearchOutlined style={{ color: "#c2c8d1" }} />}
+          style={{ marginBottom: 8 }}
+        />
+      </div>
+      <div className={styles.tree}>
         <Tree
           blockNode={true}
           treeData={treeData as TreeDataNode[]}