refactor: tree ui (#6228)

* refactor: tree ui

* feat: update code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/components/dir-view-mode/dir-views/index.css

@@ -0,0 +1,7 @@
+.dir-content-nav .tree-section:first-child {
+  margin-top: 12px;
+}
+
+.dir-content-nav .tree-section:last-child {
+  margin-bottom: 28px;
+}

frontend/src/components/dir-view-mode/dir-views/index.js

@@ -8,6 +8,8 @@ import metadataManagerAPI from '../../metadata-manage/api';
 import toaster from '../../toast';
 import MetadataViews from '../../metadata-manage/metadata-views';
 
+import './index.css';
+
 const DirViews = ({ userPerm, repoID }) => {
   const enableMetadataManagement = useMemo(() => {
     return window.app.pageOptions.enableMetadataManagement;

frontend/src/components/metadata-manage/metadata-views/index.css

@@ -1,5 +1,10 @@
+.metadata-tree-view .tree-node-inner {
+  height: 28px;
+  padding: 2px 0;
+}
+
 .metadata-tree-view .tree-node-inner .left-icon {
-  top: 8px;
+  top: 6px;
   padding-left: 8px;
 }
 

frontend/src/components/tree-section/index.css

@@ -12,7 +12,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 8px;
-  height: 32px;
+  height: 28px;
   width: 100%;
   border-radius: 3px;
 }

frontend/src/css/lib-content-view.css

@@ -71,8 +71,8 @@
 
 .tree-node-inner {
   position: relative;
-  height: 32px;
-  padding: 4px 0;
+  height: 28px;
+  padding: 2px;
   cursor: pointer;
   line-height: 1.625;
 }
@@ -96,7 +96,7 @@
   position: absolute;
   display:flex;
   align-items:center;
-  top: 4px;
+  top: 2px;
   left: 0;
   padding-left: 1.5rem;
 }
@@ -125,7 +125,7 @@
 
 .tree-node-inner .right-icon {
   position: absolute;
-  top: 4px;
+  top: 2px;
   right: 0.5rem;
   bottom: 0;
   width: 1rem;

frontend/src/css/side-panel.css

@@ -98,8 +98,8 @@
 
 .tree-node-inner {
   position: relative;
-  height: 32px;
-  padding: 4px 0;
+  height: 28px;
+  padding: 2px 0;
   cursor: pointer;
   line-height: 1.625;
 }
@@ -124,7 +124,7 @@
   display:flex;
   justify-content:center;
   align-items:center;
-  top: 4px;
+  top: 2px;
   left: 0;
   padding-left: 1.5rem;
 }
@@ -149,7 +149,7 @@
 
 .tree-node-inner .right-icon {
   position: absolute;
-  top: 4px;
+  top: 2px;
   right: 1rem;
   bottom: 0;
   width: 1.5rem;