diff --git a/assets/styles/doc.scss b/assets/styles/doc.scss
index 5374b8654483f4736119c31f810fc3be105eaad8..f64233f34f52c769d80966b1c771e17fafdd8038 100644
--- a/assets/styles/doc.scss
+++ b/assets/styles/doc.scss
@@ -80,6 +80,14 @@
         transition: all 300ms ease-in-out;
         word-break: break-all;
     }
+    img{
+        width: 50%;
+    }
+    ol{
+        li{
+            word-break: break-all;
+        }
+    }
     a:hover{
         color: hsl(226, 90%, 50%);
         text-decoration: underline;
diff --git a/components/doc/content.vue b/components/doc/content.vue
index 7b38ebd6b33ab901c2fbb630dc52f7ed28674228..0a4e59c8da1faa0abb71d3a05eb517f3856ceb1e 100644
--- a/components/doc/content.vue
+++ b/components/doc/content.vue
@@ -1,9 +1,9 @@
 <template>
-    <d-row type="flex" class="docs-devui-row" :gutter="24">
-        <d-col flex="220px" :xs="0" :sm="0" :md="1" class="side">
+    <d-row type="flex" class="docs-devui-row" :gutter="30">
+        <d-col flex="200px" :xs="0" :sm="0" :md="1" class="side">
             <Side></Side>
         </d-col>
-        <d-col flex="auto">
+        <d-col flex="0 1 auto">
             <d-content class="content__doc">
                 <nav-menu></nav-menu>
                 <div class="content__doc__docs-wrapper">
@@ -12,30 +12,71 @@
                 <h2>本文贡献者</h2>
                 <ul>
                     <li v-for="author in authors">
-                        <a :href="'mailto:' + author.email">{{author.name}}</a>
+                        <a :href="'mailto:' + author.email">{{ author.name }}</a>
                     </li>
                 </ul>
             </d-content>
         </d-col>
+        <d-col flex="1 0 200px" :xs="0" :sm="0" :md="1" class="toc">
+            <d-tree :data="treeData" @node-click="nodeClick"></d-tree>
+        </d-col>
     </d-row>
 </template>
 
 <script lang="ts" setup>
 import Side from './side.vue';
 import NavMenu from './navMenu.vue';
-import {ref} from 'vue';
-import type {Ref} from 'vue';
-const {page} = useContent();
-const rawAuthors:Ref<string[]> = ref(page.value?.author);
-const authors = computed(()=>{
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { ITreeNode } from 'vue-devui/types/tree';
+interface Toc {
+    title: string;
+    searchDepth: number;
+    depth: number;
+    links: {
+        id: string;
+        depth: string;
+        text: string;
+        children?: Toc['links']
+    }[]
+}
+const router = useRouter();
+const { page, toc } = useContent();
+const rawAuthors: Ref<string[]> = ref(page.value?.author);
+const authors = computed(() => {
     return rawAuthors.value?.map((author) => {
         const splitArray = author.trim().split(' ');
         const authorName = splitArray[0].trim();
-        const authorEmail = splitArray[1].slice(1,-1);
+        const authorEmail = splitArray[1].slice(1, -1);
         return {
             name: authorName,
             email: authorEmail
         }
     })
 })
+const normalize = (items?: Toc['links'][0]['children']) => {
+    if (items?.length) {
+        return items.map((item) => {
+            return {
+                id: item.id,
+                label: item.text
+            }
+        });
+    }
+}
+
+const treeData = computed(() => {
+    return (toc as Ref<Toc>).value.links.map((link) => {
+        return {
+            id: link.id,
+            label: link.text,
+            children: normalize(link.children)
+        }
+    }) as ITreeNode[];
+})
+
+const nodeClick = (node: ITreeNode) => {
+    const { id } = node;
+    router.push(`#${id}`);
+}
 </script>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ec50ec05aa53634a15262b18b6ec99641c4e5c0b..26556ab415969d72faaee2151963dde78358117d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -53,7 +53,7 @@ export default defineNuxtConfig({
         ws: {
             hostname: 'localhost'
         }
-    },
+    }
   },
   css: ['vue-devui/style.css', '@devui-design/icons/icomoon/devui-icon.css', '~/assets/styles/common.scss'],
   postcss: {
diff --git a/pages/doc/[...slug].vue b/pages/doc/[...slug].vue
index cb31f2ac0e2032d1c9d164baa77291d617015b54..38e1f6ea7543bca12e58e65fcc7b5611be1c8f7a 100644
--- a/pages/doc/[...slug].vue
+++ b/pages/doc/[...slug].vue
@@ -19,10 +19,11 @@
 import Banner from '~/components/common/banner/index.vue'
 import Content from '~/components/doc/content.vue';
 import { useImage } from '@/hooks/useImage';
-import { ref } from 'vue';
-const { page } = useContent();
+import { ref, Ref } from 'vue';
+const { page, toc } = useContent();
 const currentTitle = ref(page.value?.title ?? '');
 const bannerImage = ref(useImage((page.value?.bg as string) ?? ''));
+// let obj = { "title": "", "searchDepth": 2, "depth": 2, "links": [{ "id": "家庭暴力的构成", "depth": 2, "text": "家庭暴力的构成", "children": [{ "id": "施暴方", "depth": 3, "text": "施暴方" }, { "id": "受害方", "depth": 3, "text": "受害方" }] }, { "id": "辨别", "depth": 2, "text": "辨别", "children": [{ "id": "身体上", "depth": 3, "text": "身体上" }, { "id": "精神上", "depth": 3, "text": "精神上" }, { "id": "经济上", "depth": 3, "text": "经济上" }] }, { "id": "危害", "depth": 2, "text": "危害" }, { "id": "解决", "depth": 2, "text": "解决" }, { "id": "数字安全", "depth": 2, "text": "数字安全" }, { "id": "图片来源声明", "depth": 2, "text": "图片来源声明" }, { "id": "footnote-label", "depth": 2, "text": "Footnotes" }] }
 </script>
 <style lang="scss">
 @import "~/assets/styles/doc.scss";
@@ -40,7 +41,8 @@ const bannerImage = ref(useImage((page.value?.bg as string) ?? ''));
     }
 }
 
-.side {
+.side,
+.toc {
     position: sticky;
     top: 10px;
 }