diff --git a/src/assets/svgs/folder-menu.svg b/src/assets/svgs/folder-menu.svg
new file mode 100644
index 0000000..73755ab
--- /dev/null
+++ b/src/assets/svgs/folder-menu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719849026635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5677" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m372.363636 0l279.272728 0q372.363636 0 372.363636 372.363636l0 279.272728q0 372.363636-372.363636 372.363636l-279.272728 0q-372.363636 0-372.363636-372.363636l0-279.272728q0-372.363636 372.363636-372.363636Z" fill="#F7A647" p-id="5678"></path><path d="M232.727273 303.872C232.727273 290.327273 243.781818 279.272727 257.326545 279.272727h148.631273c5.620364 0 10.984727 2.292364 14.848 6.283637l50.897455 52.805818c1.186909 1.233455 2.210909 2.594909 3.037091 4.049454h259.874909c31.138909 0 56.657455 25.460364 56.657454 56.610909V688.058182c0 31.150545-25.518545 56.669091-56.657454 56.669091H289.396364C258.245818 744.727273 232.727273 719.208727 232.727273 688.058182V303.872zM726.702545 556.218182h-239.825454a10.216727 10.216727 0 0 0-10.205091 10.205091v25.390545c0 5.620364 4.584727 10.205091 10.205091 10.205091h239.825454a10.216727 10.216727 0 0 0 10.205091-10.205091v-25.390545a10.216727 10.216727 0 0 0-10.205091-10.205091z m-0.058181-87.691637h-239.825455a10.216727 10.216727 0 0 0-10.205091 10.205091h-0.069818v25.390546c0 5.632 4.573091 10.216727 10.205091 10.216727h239.895273a10.216727 10.216727 0 0 0 10.205091-10.216727V478.72a10.216727 10.216727 0 0 0-10.205091-10.205091z" fill="#FFFFFF" p-id="5679"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/folder-open.svg b/src/assets/svgs/folder-open.svg
new file mode 100644
index 0000000..997faad
--- /dev/null
+++ b/src/assets/svgs/folder-open.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719917310599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13113" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M841.6 238.4c-9.6-9.6-21.6-14.4-33.6-14.4H432L326.4 118.4c-4-4-9.6-8-15.2-10.4-6.4-2.4-12-4-18.4-4H80c-12 0-24.8 4.8-33.6 14.4S32 140 32 152v712c0 12 4.8 24.8 14.4 33.6S68 912 80 912h728c12 0 24.8-4.8 33.6-14.4 9.6-9.6 14.4-21.6 14.4-33.6V272c0-12-4.8-24.8-14.4-33.6z" fill="#FFD766" p-id="13114"></path><path d="M858.4 877.6c-3.2 9.6-8.8 18.4-17.6 24.8-8.8 6.4-18.4 9.6-28.8 9.6H88.8c-14.4 0-28.8-6.4-38.4-19.2s-12-28.8-7.2-42.4l139.2-464c3.2-9.6 8.8-18.4 17.6-24.8 8.8-6.4 18.4-9.6 28.8-9.6h724c14.4 0 28.8 6.4 38.4 19.2 9.6 12.8 12 28.8 7.2 42.4l-140 464z" fill="#FFAC33" p-id="13115"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/folder.svg b/src/assets/svgs/folder.svg
index 73755ab..39a9141 100644
--- a/src/assets/svgs/folder.svg
+++ b/src/assets/svgs/folder.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719849026635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5677" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m372.363636 0l279.272728 0q372.363636 0 372.363636 372.363636l0 279.272728q0 372.363636-372.363636 372.363636l-279.272728 0q-372.363636 0-372.363636-372.363636l0-279.272728q0-372.363636 372.363636-372.363636Z" fill="#F7A647" p-id="5678"></path><path d="M232.727273 303.872C232.727273 290.327273 243.781818 279.272727 257.326545 279.272727h148.631273c5.620364 0 10.984727 2.292364 14.848 6.283637l50.897455 52.805818c1.186909 1.233455 2.210909 2.594909 3.037091 4.049454h259.874909c31.138909 0 56.657455 25.460364 56.657454 56.610909V688.058182c0 31.150545-25.518545 56.669091-56.657454 56.669091H289.396364C258.245818 744.727273 232.727273 719.208727 232.727273 688.058182V303.872zM726.702545 556.218182h-239.825454a10.216727 10.216727 0 0 0-10.205091 10.205091v25.390545c0 5.620364 4.584727 10.205091 10.205091 10.205091h239.825454a10.216727 10.216727 0 0 0 10.205091-10.205091v-25.390545a10.216727 10.216727 0 0 0-10.205091-10.205091z m-0.058181-87.691637h-239.825455a10.216727 10.216727 0 0 0-10.205091 10.205091h-0.069818v25.390546c0 5.632 4.573091 10.216727 10.205091 10.216727h239.895273a10.216727 10.216727 0 0 0 10.205091-10.216727V478.72a10.216727 10.216727 0 0 0-10.205091-10.205091z" fill="#FFFFFF" p-id="5679"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719917303539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12770" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M977.6 238.4c-9.6-9.6-21.6-14.4-33.6-14.4H472L366.4 118.4c-4-4-9.6-8-15.2-10.4-6.4-2.4-12-4-18.4-4H80c-12 0-24.8 4.8-33.6 14.4S32 140 32 152v280h960V272c0-12-4.8-24.8-14.4-33.6z" fill="#FFD766" p-id="12771"></path><path d="M944 912H80c-26.4 0-48-21.6-48-48V352h960v512c0 26.4-21.6 48-48 48z" fill="#FFAC33" p-id="12772"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/txt.svg b/src/assets/svgs/txt.svg
new file mode 100644
index 0000000..a373397
--- /dev/null
+++ b/src/assets/svgs/txt.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719917331788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13284" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M160 32c-12 0-24.8 4.8-33.6 14.4S112 68 112 80v864c0 12 4.8 24.8 14.4 33.6 9.6 9.6 21.6 14.4 33.6 14.4h704c12 0 24.8-4.8 33.6-14.4 9.6-9.6 14.4-21.6 14.4-33.6V304L640 32H160z" fill="#E5E5E5" p-id="13285"></path><path d="M912 304H688c-12 0-24.8-4.8-33.6-14.4-9.6-8.8-14.4-21.6-14.4-33.6V32l272 272z" fill="#CCCCCC" p-id="13286"></path><path d="M264 376h208c13.6 0 24-10.4 24-24s-10.4-24-24-24H264c-13.6 0-24 10.4-24 24s10.4 24 24 24zM264 536h496c13.6 0 24-10.4 24-24s-10.4-24-24-24H264c-13.6 0-24 10.4-24 24s10.4 24 24 24zM760 648H264c-13.6 0-24 10.4-24 24s10.4 24 24 24h496c13.6 0 24-10.4 24-24s-10.4-24-24-24z" fill="#FFFFFF" p-id="13287"></path></svg>
\ No newline at end of file
diff --git a/src/router/route.ts b/src/router/route.ts
index 546102e..49a942f 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -77,7 +77,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
           link: "",
           iframe: false,
           roles: ["admin"],
-          svgIcon: "folder"
+          svgIcon: "folder-menu"
         },
         children: [
           {
diff --git a/src/style/global-theme.scss b/src/style/global-theme.scss
index e1724e3..65537f9 100644
--- a/src/style/global-theme.scss
+++ b/src/style/global-theme.scss
@@ -46,7 +46,7 @@ $color-text-3: var(--color-text-3); // 次要信息 二级字体色
 $color-text-4: var(--color-text-4); // 置灰信息
 
 // 背景色
-$color-bg-1: var(--color-bg-1); // 整体背景色-可用于main窗口背景
+$color-bg-1: var(--color-bg-1); // 整体背景色-可用于main窗口卡片背景
 $color-bg-2: var(--color-bg-2); // 一级容器背景
 $color-bg-3: var(--color-bg-3); // 二级容器背景
 $color-bg-4: var(--color-bg-4); // 三级容器背景
diff --git a/src/views/file-management/document-library/document-library.vue b/src/views/file-management/document-library/document-library.vue
index 5c681aa..6e18f0f 100644
--- a/src/views/file-management/document-library/document-library.vue
+++ b/src/views/file-management/document-library/document-library.vue
@@ -4,7 +4,9 @@
       <div class="container-main">
         <div class="left-box">
           <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
-            <div style="height: 4000px; width: 100%; background-color: var(--color-primary-light-4)">Content</div>
+            <div class="left-tree-box">
+              <a-tree :data="treeData" :show-line="true"> </a-tree>
+            </div>
           </a-scrollbar>
         </div>
         <div class="right-box"></div>
@@ -13,7 +15,62 @@
   </FillPage>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const treeData = ref([
+  {
+    title: "Trunk 1",
+    key: "0-0",
+    children: [
+      {
+        title: "Trunk 1-0",
+        key: "0-0-0",
+        children: [
+          { title: "leaf", key: "0-0-0-0" },
+          {
+            title: "leaf",
+            key: "0-0-0-1",
+            children: [{ title: "leaf", key: "0-0-0-1-0" }]
+          },
+          { title: "leaf", key: "0-0-0-2" }
+        ]
+      },
+      {
+        title: "Trunk 1-1",
+        key: "0-0-1"
+      },
+      {
+        title: "Trunk 1-2",
+        key: "0-0-2",
+        children: [
+          { title: "leaf", key: "0-0-2-0" },
+          {
+            title: "leaf",
+            key: "0-0-2-1"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: "Trunk 2",
+    key: "0-1"
+  },
+  {
+    title: "Trunk 3",
+    key: "0-2",
+    children: [
+      {
+        title: "Trunk 3-0",
+        key: "0-2-0",
+        children: [
+          { title: "leaf", key: "0-2-0-0" },
+          { title: "leaf", key: "0-2-0-1" }
+        ]
+      }
+    ]
+  }
+]);
+</script>
 
 <style lang="scss" scoped>
 .container {
@@ -21,26 +78,27 @@
   padding: $padding;
   box-sizing: border-box;
   overflow: hidden;
-  box-shadow: $shadow-border-1;
 }
 .container-main {
   height: 100%;
   display: flex;
-  border: 1px solid gold;
   overflow: hidden;
   .left-box {
     width: 300px;
     height: 100%;
-    border: 1px solid red;
+    background: $color-bg-1;
     .scrollbar {
       height: 100%;
     }
+    .left-tree-box {
+      padding: $padding;
+    }
   }
   .right-box {
     margin-left: $padding;
     width: calc(100% - 220px - $padding);
     height: 100%;
-    border: 1px solid cyan;
+    background: $color-bg-1;
   }
 }
 </style>