diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 7f220f84..555807b8 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -1,14 +1,114 @@
 import { defineConfig } from 'vitepress';
-import Jsx from "@vitejs/plugin-vue-jsx";
+import Jsx from '@vitejs/plugin-vue-jsx';
+import { sidebar } from './theme/layout/navItem';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  base:'/',
+  base: '/',
   title: 'semi-design-vue',
   description: 'Vue3 UI components based on semi-design and Vue',
   srcDir: 'src',
-  outDir:'./.vitepress/out/semi-design-vue',
-  vite:{
+  outDir: './.vitepress/out/semi-design-vue',
+  head: [
+    [
+      'script',
+      {},
+      `var _hmt = _hmt || [];
+(function() {
+  var hm = document.createElement("script");
+  hm.src = "https://hm.baidu.com/hm.js?25817a9438bb74d48fe729cf3a2f7a6a";
+  var s = document.getElementsByTagName("script")[0]; 
+  s.parentNode.insertBefore(hm, s);
+})();`,
+    ],
+  ],
+  markdown: {
+    config: (md) => {
+      // 使用 markdown-it 插件
+      md.use((md, params) => {
+        // 定义一个新的代码块规则
+        md.block.ruler.before('fence', 'overview', (state, startLine, endLine, silent) => {
+          const start = state.bMarks[startLine] + state.tShift[startLine];
+          const max = state.eMarks[startLine];
+
+          // 检查是否以 ```overview 开头
+          if (state.src.slice(start, max).trim() !== '```overview') {
+            return false;
+          }
+
+          let nextLine = startLine + 1;
+
+          // 查找结束标记 ```
+          while (nextLine < endLine) {
+            const start = state.bMarks[nextLine] + state.tShift[nextLine];
+            const max = state.eMarks[nextLine];
+
+            if (state.src.slice(start, max).trim() === '```') {
+              break;
+            }
+
+            nextLine++;
+          }
+
+          // 如果没有找到结束标记，则返回 false
+          if (nextLine >= endLine) {
+            return false;
+          }
+
+          // 如果是静默模式，则返回 true
+          if (silent) {
+            return true;
+          }
+
+          // 添加 token
+          const token = state.push('overview', 'div', 0);
+          token.content = state.getLines(startLine + 1, nextLine, state.tShift[startLine], true);
+          token.map = [startLine, nextLine];
+
+          state.line = nextLine + 1;
+          return true;
+        });
+
+        // 定义渲染规则
+        md.renderer.rules.overview = (tokens, idx) => {
+          const content = tokens[idx].content.trim();
+          const contentArr = content.trim().split(',');
+          function card(item: string) {
+            const arr = item.trim().split(' ');
+            const url = `https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/${arr[0]}.jpg`;
+            let cUrl = '';
+            sidebar.forEach((item0) => {
+              item0.items.forEach((item) => {
+                if (item.link.toLowerCase().indexOf(arr[0].toLowerCase()) > -1) {
+                  cUrl = item.link;
+                }
+              });
+            });
+            return `  <a 
+            href="${cUrl}" 
+        >
+            <div
+                class="semi-overview-card"
+            >
+                <img src="${url}" alt="" class="semi-overview-card-image" />
+                <div class="semi-overview-card-text">${item}</div>
+            </div>
+        </a>
+`;
+          }
+          // <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/" alt=""/>
+          return `<div class="semi-overview-list" style="background-color: var(--semi-color-bg-0)">
+            ${contentArr.map((item, index) => card(item)).join(' ')}
+        </div>
+        `;
+        };
+      }, {});
+
+      // 你可以在这里添加更多的 markdown-it 插件
+      // md.use(require('markdown-it-some-plugin'));
+    },
+  },
+  vite: {
     plugins: [Jsx()],
     // optimizeDeps: {
     //   disabled: true,
@@ -23,8 +123,8 @@ export default defineConfig({
           @import "@douyinfe/semi-theme-default/scss/global.scss";
           @import "@douyinfe/semi-theme-default/scss/index.scss";
         `,
-        }
-      }
+        },
+      },
     },
   },
   themeConfig: {
@@ -107,27 +207,26 @@ export default defineConfig({
             link: '/basic/grid/',
             text: 'Grid 栅格',
           },
-          // {
-          //   link: '/basic/icon/',
-          //   text: 'Icon 图标',
-          // },
+          {
+            link: '/basic/icon/',
+            text: 'Icon 图标',
+          },
           {
             link: '/basic/layout/',
             text: 'Layout 布局',
           },
-          // {
-          //   link: '/basic/tokens/',
-          //   text: 'Tokens 设计变量',
-          //
-          // },
-          // {
-          //   link: '/basic/space/',
-          //   text: 'Space 间距',
-          // },
-          // {
-          //   link: '/basic/typography/',
-          //   text: 'Typography 版式',
-          // },
+          {
+            link: '/basic/tokens/',
+            text: 'Tokens 设计变量',
+          },
+          {
+            link: '/basic/space/',
+            text: 'Space 间距',
+          },
+          {
+            link: '/basic/typography/',
+            text: 'Typography 版式',
+          },
         ],
       },
       {
@@ -135,266 +234,266 @@ export default defineConfig({
         text: '输入类',
 
         items: [
-          // {
-          //   link: '/input/autocomplete/',
-          //   text: 'AutoComplete 自动完成',
-          // },
+          {
+            link: '/input/autocomplete/',
+            text: 'AutoComplete 自动完成',
+          },
           {
             link: '/input/button/',
             text: 'Button 按钮',
           },
-          // {
-          //   link: '/input/cascader/',
-          //   text: 'Cascader 级联选择',
-          // },
-          // {
-          //   link: '/input/checkbox/',
-          //   text: 'Checkbox 复选框',
-          // },
-          // {
-          //   link: '/input/datepicker/',
-          //   text: 'DatePicker 日期选择器',
-          // },
-          // {
-          //   link: '/input/form/',
-          //   text: 'Form 表单',
-          // },
-          // {
-          //   link: '/input/input/',
-          //   text: 'Input 输入框',
-          // },
-          // {
-          //   link: '/input/inputnumber/',
-          //   text: 'InputNumber 数字输入框',
-          // },
-          // {
-          //   link: '/input/radio/',
-          //   text: 'Radio 单选框',
-          // },
-          // {
-          //   link: '/input/rating/',
-          //   text: 'Rating 评分',
-          // },
-          // {
-          //   link: '/input/select/',
-          //   text: 'Select 选择器',
-          // },
-          // {
-          //   link: '/input/slider/',
-          //   text: 'Slider 滑动选择器',
-          // },
-          // {
-          //   link: '/input/switch/',
-          //   text: 'Switch 开关',
-          // },
-          // {
-          //   link: '/input/taginput/',
-          //   text: 'TagInput 标签输入框',
-          // },
-          // {
-          //   link: '/input/timepicker/',
-          //   text: 'TimePicker 时间选择器',
-          // },
-          // {
-          //   link: '/input/transfer/',
-          //   text: 'Transfer 穿梭框',
-          // },
-          // {
-          //   link: '/input/treeselect/',
-          //   text: 'TreeSelect 树选择器',
-          // },
-          // {
-          //   link: '/input/upload/',
-          //   text: 'Upload 上传',
-          // },
+          {
+            link: '/input/cascader/',
+            text: 'Cascader 级联选择',
+          },
+          {
+            link: '/input/checkbox/',
+            text: 'Checkbox 复选框',
+          },
+          {
+            link: '/input/datepicker/',
+            text: 'DatePicker 日期选择器',
+          },
+          {
+            link: '/input/form/',
+            text: 'Form 表单',
+          },
+          {
+            link: '/input/input/',
+            text: 'Input 输入框',
+          },
+          {
+            link: '/input/inputnumber/',
+            text: 'InputNumber 数字输入框',
+          },
+          {
+            link: '/input/radio/',
+            text: 'Radio 单选框',
+          },
+          {
+            link: '/input/rating/',
+            text: 'Rating 评分',
+          },
+          {
+            link: '/input/select/',
+            text: 'Select 选择器',
+          },
+          {
+            link: '/input/slider/',
+            text: 'Slider 滑动选择器',
+          },
+          {
+            link: '/input/switch/',
+            text: 'Switch 开关',
+          },
+          {
+            link: '/input/taginput/',
+            text: 'TagInput 标签输入框',
+          },
+          {
+            link: '/input/timepicker/',
+            text: 'TimePicker 时间选择器',
+          },
+          {
+            link: '/input/transfer/',
+            text: 'Transfer 穿梭框',
+          },
+          {
+            link: '/input/treeselect/',
+            text: 'TreeSelect 树选择器',
+          },
+          {
+            link: '/input/upload/',
+            text: 'Upload 上传',
+          },
+        ],
+      },
+      {
+        link: 'navigation',
+        text: '导航类',
+        items: [
+          {
+            link: '/navigation/anchor/',
+            text: 'Anchor 锚点',
+          },
+          {
+            link: '/navigation/backtop/',
+            text: 'BackTop 回到顶部',
+          },
+          {
+            link: '/navigation/breadcrumb/',
+            text: 'Breadcrumb 面包屑',
+          },
+          {
+            link: '/navigation/navigation/',
+            text: 'Navigation 导航',
+          },
+          {
+            link: '/navigation/pagination/',
+            text: 'Pagination 翻页器',
+          },
+          {
+            link: '/navigation/steps/',
+            text: 'Steps 步骤',
+          },
+          {
+            link: '/navigation/tabs/',
+            text: 'Tabs 标签栏',
+          },
+          {
+            link: '/navigation/tree/',
+            text: 'Tree 树形控件',
+          },
+        ],
+      },
+      {
+        link: 'show',
+        text: '展示类',
+
+        items: [
+          {
+            link: '/show/avatar/',
+            text: 'Avatar 头像',
+          },
+          {
+            link: '/show/badge/',
+            text: 'Badge 徽章',
+          },
+          {
+            link: '/show/calendar/',
+            text: 'Calendar 日历',
+          },
+          {
+            link: '/show/card/',
+            text: 'Card 卡片',
+          },
+          {
+            link: '/show/carousel/',
+            text: 'Carousel 轮播图',
+          },
+          {
+            link: '/show/collapse/',
+            text: 'Collapse 折叠面板',
+          },
+          {
+            link: '/show/collapsible/',
+            text: 'Collapsible 折叠',
+          },
+          {
+            link: '/show/descriptions/',
+            text: 'Descriptions 描述列表',
+          },
+          {
+            link: '/show/dropdown/',
+            text: 'Dropdown 下拉框',
+          },
+          {
+            link: '/show/empty/',
+            text: 'Empty 空状态',
+          },
+          {
+            link: '/show/highlight/',
+            text: 'Highlight 高亮文本',
+          },
+          {
+            link: '/show/image/',
+            text: 'Image 图片',
+          },
+          {
+            link: '/show/list/',
+            text: 'List 列表',
+          },
+          {
+            link: '/show/modal/',
+            text: 'Modal 模态对话框',
+          },
+          {
+            link: '/show/overflowlist/',
+            text: 'OverflowList 折叠列表',
+          },
+          {
+            link: '/show/popover/',
+            text: 'Popover 气泡卡片',
+          },
+          {
+            link: '/show/scrolllist/',
+            text: 'ScrollList 滚动列表',
+          },
+          {
+            link: '/show/sidesheet/',
+            text: 'SideSheet 滑动侧边栏',
+          },
+          {
+            link: '/show/table/',
+            text: 'Table 表格',
+          },
+          {
+            link: '/show/tag/',
+            text: 'Tag 标签',
+          },
+          {
+            link: '/show/timeline/',
+            text: 'Timeline 时间轴',
+          },
+          {
+            link: '/show/tooltip/',
+            text: 'Tooltip 工具提示',
+          },
+        ],
+      },
+      {
+        link: 'feedback',
+        text: '反馈类',
+
+        items: [
+          {
+            link: '/feedback/banner/',
+            text: 'Banner 通知横幅',
+          },
+          {
+            link: '/feedback/notification/',
+            text: 'Notification 通知',
+          },
+          {
+            link: '/feedback/popconfirm/',
+            text: 'Popconfirm 气泡确认框',
+          },
+          {
+            link: '/feedback/progress/',
+            text: 'Progress 进度条',
+          },
+          {
+            link: '/feedback/skeleton/',
+            text: 'Skeleton 骨架屏',
+          },
+          {
+            link: '/feedback/spin/',
+            text: 'Spin 加载器',
+          },
+          {
+            link: '/feedback/toast/',
+            text: 'Toast 提示',
+          },
+        ],
+      },
+      {
+        link: 'other',
+        text: '其他',
+
+        items: [
+          {
+            link: '/other/configprovider/',
+            text: 'ConfigProvider 全局配置',
+          },
+          {
+            link: '/other/locale/',
+            text: 'LocaleProvider 多语言',
+          },
         ],
       },
-      // {
-      //   link: 'navigation',
-      //   text: '导航类',
-      //   items: [
-      //     {
-      //       link: '/navigation/anchor/',
-      //       text: 'Anchor 锚点',
-      //     },
-      //     {
-      //       link: '/navigation/backtop/',
-      //       text: 'BackTop 回到顶部',
-      //     },
-      //     {
-      //       link: '/navigation/breadcrumb/',
-      //       text: 'Breadcrumb 面包屑',
-      //     },
-      //     {
-      //       link: '/navigation/navigation/',
-      //       text: 'Navigation 导航',
-      //     },
-      //     {
-      //       link: '/navigation/pagination/',
-      //       text: 'Pagination 翻页器',
-      //     },
-      //     {
-      //       link: '/navigation/steps/',
-      //       text: 'Steps 步骤',
-      //     },
-      //     {
-      //       link: '/navigation/tabs/',
-      //       text: 'Tabs 标签栏',
-      //     },
-      //     {
-      //       link: '/navigation/tree/',
-      //       text: 'Tree 树形控件',
-      //     },
-      //   ],
-      // },
-      // {
-      //   link: 'show',
-      //   text: '展示类',
-      //
-      //   items: [
-      //     {
-      //       link: '/show/avatar/',
-      //       text: 'Avatar 头像',
-      //     },
-      //     {
-      //       link: '/show/badge/',
-      //       text: 'Badge 徽章',
-      //     },
-      //     {
-      //       link: '/show/calendar/',
-      //       text: 'Calendar 日历',
-      //     },
-      //     {
-      //       link: '/show/card/',
-      //       text: 'Card 卡片',
-      //     },
-      //     {
-      //       link: '/show/carousel/',
-      //       text: 'Carousel 轮播图',
-      //     },
-      //     {
-      //       link: '/show/collapse/',
-      //       text: 'Collapse 折叠面板',
-      //     },
-      //     {
-      //       link: '/show/collapsible/',
-      //       text: 'Collapsible 折叠',
-      //     },
-      //     {
-      //       link: '/show/descriptions/',
-      //       text: 'Descriptions 描述列表',
-      //     },
-      //     {
-      //       link: '/show/dropdown/',
-      //       text: 'Dropdown 下拉框',
-      //     },
-      //     {
-      //       link: '/show/empty/',
-      //       text: 'Empty 空状态',
-      //     },
-      //     {
-      //       link: '/show/highlight/',
-      //       text: 'Highlight 高亮文本',
-      //     },
-      //     {
-      //       link: '/show/image/',
-      //       text: 'Image 图片',
-      //     },
-      //     {
-      //       link: '/show/list/',
-      //       text: 'List 列表',
-      //     },
-      //     {
-      //       link: '/show/modal/',
-      //       text: 'Modal 模态对话框',
-      //     },
-      //     {
-      //       link: '/show/overflowlist/',
-      //       text: 'OverflowList 折叠列表',
-      //     },
-      //     {
-      //       link: '/show/popover/',
-      //       text: 'Popover 气泡卡片',
-      //     },
-      //     {
-      //       link: '/show/scrolllist/',
-      //       text: 'ScrollList 滚动列表',
-      //     },
-      //     {
-      //       link: '/show/sidesheet/',
-      //       text: 'SideSheet 滑动侧边栏',
-      //     },
-      //     {
-      //       link: '/show/table/',
-      //       text: 'Table 表格',
-      //     },
-      //     {
-      //       link: '/show/tag/',
-      //       text: 'Tag 标签',
-      //     },
-      //     {
-      //       link: '/show/timeline/',
-      //       text: 'Timeline 时间轴',
-      //     },
-      //     {
-      //       link: '/show/tooltip/',
-      //       text: 'Tooltip 工具提示',
-      //     },
-      //   ],
-      // },
-      // {
-      //   link: 'feedback',
-      //   text: '反馈类',
-      //
-      //   items: [
-      //     {
-      //       link: '/feedback/banner/',
-      //       text: 'Banner 通知横幅',
-      //     },
-      //     {
-      //       link: '/feedback/notification/',
-      //       text: 'Notification 通知',
-      //     },
-      //     {
-      //       link: '/feedback/popconfirm/',
-      //       text: 'Popconfirm 气泡确认框',
-      //     },
-      //     {
-      //       link: '/feedback/progress/',
-      //       text: 'Progress 进度条',
-      //     },
-      //     {
-      //       link: '/feedback/skeleton/',
-      //       text: 'Skeleton 骨架屏',
-      //     },
-      //     {
-      //       link: '/feedback/spin/',
-      //       text: 'Spin 加载器',
-      //     },
-      //     {
-      //       link: '/feedback/toast/',
-      //       text: 'Toast 提示',
-      //     },
-      //   ],
-      // },
-      // {
-      //   link: 'other',
-      //   text: '其他',
-      //
-      //   items: [
-      //     {
-      //       link: '/other/configprovider/',
-      //       text: 'ConfigProvider 全局配置',
-      //     },
-      //     {
-      //       link: '/other/locale/',
-      //       text: 'LocaleProvider 多语言',
-      //     },
-      //   ],
-      // },
     ],
 
-    outline:{level: [1,4]},
+    outline: { level: [1, 4] },
     socialLinks: [{ icon: 'github', link: 'https://github.com/rashagu/semi-design-vue' }],
   },
 });
diff --git a/docs/.vitepress/theme/layout/Layout.vue b/docs/.vitepress/theme/layout/Layout.vue
index d24f8e9a..9d22c437 100644
--- a/docs/.vitepress/theme/layout/Layout.vue
+++ b/docs/.vitepress/theme/layout/Layout.vue
@@ -489,7 +489,7 @@ provide('hero-image-slot-exists', null)
     <LayoutHeader className="layout_header">
       <div class="header"
            :style="headerStyle">
-        <div>
+        <a href="/" style="cursor: pointer;">
           <svg width="97" height="36" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path
                 fill-rule="evenodd"
@@ -497,7 +497,7 @@ provide('hero-image-slot-exists', null)
                 d="M0 13.389c0 7.394 5.994 13.388 13.389 13.388V0C5.994 0 0 5.994 0 13.389zm31.24 8.925c0-7.394-5.994-13.388-13.389-13.388v26.777c7.395 0 13.389-5.995 13.389-13.389zM77.35 2.168c0 .787-.695 1.424-1.553 1.424-.859 0-1.554-.637-1.554-1.424 0-.787.695-1.424 1.554-1.424.858 0 1.553.637 1.553 1.424zM45.174 7.743c-.307-2.194-2.337-3.28-4.715-3.28-2.296 0-4.387 1.127-4.387 3.382 0 1.558.902 2.583 2.357 2.994.555.16 1.184.331 1.877.52h.001l.87.238c.799.226 1.25.513 1.25 1.087 0 .717-.697 1.066-1.579 1.066-1.189 0-2.07-.574-2.296-1.66l-2.85.43c.431 2.521 2.297 3.628 5.085 3.628 2.522 0 4.49-1.291 4.49-3.587 0-1.886-1.128-2.747-3.486-3.342-.8-.205-1.332-.349-1.886-.513-.676-.205-1.066-.45-1.066-1.004s.759-.882 1.702-.84c1.004.04 1.68.614 1.783 1.393l2.85-.512zm3.836 3.342h7.77c.307-3.855-1.559-6.622-5.187-6.622-3.362 0-5.597 2.398-5.597 5.986 0 3.3 2.296 5.7 5.76 5.7 2.071 0 4.879-2.121 4.921-3.998h-2.788c-.43.922-1.271 1.394-2.296 1.394-1.497 0-2.378-.923-2.583-2.46zm2.583-4.203c1.578 0 2.173.738 2.357 2.05h-4.858c.266-1.23 1.004-2.05 2.5-2.05zM69.62 4.556c.922 0 1.813.235 2.51.973.964 1.004 1.066 2.152 1.066 3.567v6.745h-2.829V9.3c0-.8-.143-1.292-.533-1.722-.349-.39-.604-.543-1.137-.543s-.826.174-1.174.563c-.43.492-.513.984-.513 1.538v6.704h-2.829V9.3c0-.8-.143-1.292-.533-1.722-.348-.39-.633-.543-1.166-.543-.533 0-.796.174-1.145.563-.43.492-.513.984-.513 1.538v6.704h-2.808V4.77h2.46v1.188c.779-.922 1.699-1.403 2.929-1.403.922 0 1.842.235 2.54.973.204.225.389.45.512.676.779-1.066 1.81-1.65 3.163-1.65zm4.623.279V15.84h2.788V4.835h-2.788zM44.488 20.119v-3.755h2.808V30.82h-2.46v-1.036c-.348.777-1.763 1.343-2.993 1.343-3.054 0-5.105-2.521-5.105-5.842 0-3.383 2.071-5.843 5.249-5.843.984 0 1.804.246 2.5.676zm-4.797 5.167c0 1.865.8 3.362 2.603 3.362 1.866 0 2.542-1.353 2.542-3.362 0-2.01-.697-3.362-2.44-3.362-1.865 0-2.705 1.517-2.705 3.362zm11.451.779h7.77c.307-3.854-1.558-6.622-5.187-6.622-3.362 0-5.597 2.399-5.597 5.986 0 3.3 2.297 5.7 5.761 5.7 2.07 0 4.818-1.603 4.92-3.998h-2.788c-.43.922-1.27 1.394-2.296 1.394-1.496 0-2.378-.923-2.583-2.46zm2.583-4.203c1.579 0 2.173.738 2.358 2.05h-4.859c.267-1.23 1.005-2.05 2.501-2.05zm10.721-2.419c2.379 0 4.408 1.086 4.716 3.28l-2.85.513c-.102-.78-.779-1.353-1.784-1.394-.943-.041-1.701.287-1.701.84 0 .554.39.8 1.066 1.005.553.164 1.087.307 1.886.512 2.358.595 3.485 1.456 3.485 3.342 0 2.296-1.968 3.587-4.49 3.587-2.788 0-4.653-1.107-5.084-3.628l2.85-.43c.225 1.086 1.107 1.66 2.296 1.66.882 0 1.579-.349 1.579-1.066 0-.574-.452-.861-1.251-1.087l-.87-.237c-.694-.19-1.322-.36-1.877-.521-1.456-.41-2.358-1.435-2.358-2.993 0-2.256 2.091-3.383 4.388-3.383zm5.84.307v11.07h2.788V19.75h-2.788zm12.068.882v-.882h2.44v11.83c0 .553-.041 1.025-.164 1.496C84.097 35.106 81.8 36 79.36 36c-1.886 0-3.895-.94-4.736-2.375l2.584-1.25c.348.656 1.394 1 2.173 1 1.25 0 2.665-.606 2.624-1.837v-1.107c-.718.451-1.6.697-2.645.697-3.055 0-5.105-2.521-5.105-5.842 0-3.383 2.071-5.843 5.249-5.843 1.148 0 2.395.502 2.85 1.189zm-5.145 4.654c0 1.865.799 3.362 2.603 3.362 1.866 0 2.542-1.353 2.542-3.362 0-2.01-.697-3.362-2.44-3.362-1.865 0-2.706 1.517-2.706 3.362zm17.864-4.654c-1.066-1.046-2.398-1.271-3.71-1.189-1.005.061-2.132.43-2.85 1.291a1.172 1.172 0 01-.143.164V19.75h-2.46v11.07h2.808v-4.817c0-.758.02-1.62.123-2.111.123-.615.41-1.107.82-1.415.37-.266.8-.41 1.312-.43.759-.02 1.353.205 1.743.635.574.615.738 1.763.738 2.911v5.228h2.829v-5.35c0-1.723 0-3.65-1.21-4.839z"
             ></path>
           </svg>
-        </div>
+        </a>
         <Space>
           <div style="margin: 0 10px;" @click="changeTheme()">
             <IconSun v-if="isDark" style="cursor: pointer" :size="'extra-large'"/>
@@ -518,7 +518,7 @@ provide('hero-image-slot-exists', null)
         </div>
       </LayoutSider>
       <LayoutContent className="in_content VPDoc">
-        <div style="max-width: calc(1160px + 256px); margin: 0 auto;padding-top: 60px">
+        <div style="margin: 0 auto;padding-top: 60px">
           <div v-if="page.isNotFound">Custom 404 page!</div>
           <VPContent v-else/>
         </div>
@@ -527,7 +527,27 @@ provide('hero-image-slot-exists', null)
   </Layout>
 </template>
 <style lang="scss">
-
+/* ++++ overview start ++++ */
+.semi-overview-list {
+  display: flex;
+  flex-wrap: wrap;
+  .semi-overview-card {
+    width: 195px;
+    margin-right: 16px;
+    margin-bottom: 24px;
+    cursor: pointer;
+    .semi-overview-card-image {
+      width: 100%;
+      height: 129px;
+    }
+    .semi-overview-card-text {
+      font-size: 14px;
+      line-height: 20px;
+      margin-top: 4px;
+      color: var(--semi-color-text-0);
+    }
+  }
+}
 html,
 body {
   height: 100vh;
diff --git a/docs/.vitepress/theme/layout/navItem.ts b/docs/.vitepress/theme/layout/navItem.ts
new file mode 100644
index 00000000..e2c3101e
--- /dev/null
+++ b/docs/.vitepress/theme/layout/navItem.ts
@@ -0,0 +1,360 @@
+
+export const sidebar = [
+  // {
+  //   text: 'Examples',
+  //   items: [
+  //     { text: 'Markdown Examples', link: '/markdown-examples' },
+  //     { text: 'Runtime API Examples', link: '/api-examples' },
+  //   ],
+  // },
+  {
+    text: '开始',
+    items: [
+      { text: 'Introduction 介绍', link: '/start/introduction/' },
+      { text: 'Getting Started 快速开始', link: '/start/getting-started/' },
+    ],
+  },
+  {
+    link: 'start',
+    text: '开始',
+    items: [
+      {
+        link: '/start/introduction/',
+        text: 'Introduction 介绍',
+      },
+      {
+        link: '/start/getting-started/',
+        text: 'Getting Started 快速开始',
+      },
+      {
+        link: '/start/customize-theme/',
+        text: 'Customized Themes 定制主题',
+      },
+      // {
+      //   link: '/start/design-to-code/',
+      //   text: 'Design to Code 设计稿转代码',
+      // },
+      {
+        link: '/start/dark-mode/',
+        text: 'Dark Mode 暗色模式',
+      },
+      {
+        link: '/start/accessibility/',
+        text: 'Accessibility 无障碍',
+      },
+      {
+        link: '/start/content-guidelines/',
+        text: 'Content Guidelines 文案规范',
+      },
+      {
+        link: '/start/changelog/',
+        text: 'Change Log 更新日志',
+      },
+      {
+        link: '/start/faq/',
+        text: 'FAQ 常见问题',
+      },
+      {
+        link: '/start/overview/',
+        text: 'Overview 组件总览',
+      },
+    ],
+  },
+  {
+    link: 'basic',
+    text: '基础',
+    items: [
+      {
+        link: '/basic/divider/',
+        text: 'Divider 分割线',
+      },
+      {
+        link: '/basic/grid/',
+        text: 'Grid 栅格',
+      },
+      {
+        link: '/basic/icon/',
+        text: 'Icon 图标',
+      },
+      {
+        link: '/basic/layout/',
+        text: 'Layout 布局',
+      },
+      {
+        link: '/basic/tokens/',
+        text: 'Tokens 设计变量',
+
+      },
+      {
+        link: '/basic/space/',
+        text: 'Space 间距',
+      },
+      {
+        link: '/basic/typography/',
+        text: 'Typography 版式',
+      },
+    ],
+  },
+  {
+    link: 'input',
+    text: '输入类',
+
+    items: [
+      {
+        link: '/input/autocomplete/',
+        text: 'AutoComplete 自动完成',
+      },
+      {
+        link: '/input/button/',
+        text: 'Button 按钮',
+      },
+      {
+        link: '/input/cascader/',
+        text: 'Cascader 级联选择',
+      },
+      {
+        link: '/input/checkbox/',
+        text: 'Checkbox 复选框',
+      },
+      {
+        link: '/input/datepicker/',
+        text: 'DatePicker 日期选择器',
+      },
+      {
+        link: '/input/form/',
+        text: 'Form 表单',
+      },
+      {
+        link: '/input/input/',
+        text: 'Input 输入框',
+      },
+      {
+        link: '/input/inputnumber/',
+        text: 'InputNumber 数字输入框',
+      },
+      {
+        link: '/input/radio/',
+        text: 'Radio 单选框',
+      },
+      {
+        link: '/input/rating/',
+        text: 'Rating 评分',
+      },
+      {
+        link: '/input/select/',
+        text: 'Select 选择器',
+      },
+      {
+        link: '/input/slider/',
+        text: 'Slider 滑动选择器',
+      },
+      {
+        link: '/input/switch/',
+        text: 'Switch 开关',
+      },
+      {
+        link: '/input/taginput/',
+        text: 'TagInput 标签输入框',
+      },
+      {
+        link: '/input/timepicker/',
+        text: 'TimePicker 时间选择器',
+      },
+      {
+        link: '/input/transfer/',
+        text: 'Transfer 穿梭框',
+      },
+      {
+        link: '/input/treeselect/',
+        text: 'TreeSelect 树选择器',
+      },
+      {
+        link: '/input/upload/',
+        text: 'Upload 上传',
+      },
+    ],
+  },
+  {
+    link: 'navigation',
+    text: '导航类',
+    items: [
+      {
+        link: '/navigation/anchor/',
+        text: 'Anchor 锚点',
+      },
+      {
+        link: '/navigation/backtop/',
+        text: 'BackTop 回到顶部',
+      },
+      {
+        link: '/navigation/breadcrumb/',
+        text: 'Breadcrumb 面包屑',
+      },
+      {
+        link: '/navigation/navigation/',
+        text: 'Navigation 导航',
+      },
+      {
+        link: '/navigation/pagination/',
+        text: 'Pagination 翻页器',
+      },
+      {
+        link: '/navigation/steps/',
+        text: 'Steps 步骤',
+      },
+      {
+        link: '/navigation/tabs/',
+        text: 'Tabs 标签栏',
+      },
+      {
+        link: '/navigation/tree/',
+        text: 'Tree 树形控件',
+      },
+    ],
+  },
+  {
+    link: 'show',
+    text: '展示类',
+
+    items: [
+      {
+        link: '/show/avatar/',
+        text: 'Avatar 头像',
+      },
+      {
+        link: '/show/badge/',
+        text: 'Badge 徽章',
+      },
+      {
+        link: '/show/calendar/',
+        text: 'Calendar 日历',
+      },
+      {
+        link: '/show/card/',
+        text: 'Card 卡片',
+      },
+      {
+        link: '/show/carousel/',
+        text: 'Carousel 轮播图',
+      },
+      {
+        link: '/show/collapse/',
+        text: 'Collapse 折叠面板',
+      },
+      {
+        link: '/show/collapsible/',
+        text: 'Collapsible 折叠',
+      },
+      {
+        link: '/show/descriptions/',
+        text: 'Descriptions 描述列表',
+      },
+      {
+        link: '/show/dropdown/',
+        text: 'Dropdown 下拉框',
+      },
+      {
+        link: '/show/empty/',
+        text: 'Empty 空状态',
+      },
+      {
+        link: '/show/highlight/',
+        text: 'Highlight 高亮文本',
+      },
+      {
+        link: '/show/image/',
+        text: 'Image 图片',
+      },
+      {
+        link: '/show/list/',
+        text: 'List 列表',
+      },
+      {
+        link: '/show/modal/',
+        text: 'Modal 模态对话框',
+      },
+      {
+        link: '/show/overflowlist/',
+        text: 'OverflowList 折叠列表',
+      },
+      {
+        link: '/show/popover/',
+        text: 'Popover 气泡卡片',
+      },
+      {
+        link: '/show/scrolllist/',
+        text: 'ScrollList 滚动列表',
+      },
+      {
+        link: '/show/sidesheet/',
+        text: 'SideSheet 滑动侧边栏',
+      },
+      {
+        link: '/show/table/',
+        text: 'Table 表格',
+      },
+      {
+        link: '/show/tag/',
+        text: 'Tag 标签',
+      },
+      {
+        link: '/show/timeline/',
+        text: 'Timeline 时间轴',
+      },
+      {
+        link: '/show/tooltip/',
+        text: 'Tooltip 工具提示',
+      },
+    ],
+  },
+  {
+    link: 'feedback',
+    text: '反馈类',
+
+    items: [
+      {
+        link: '/feedback/banner/',
+        text: 'Banner 通知横幅',
+      },
+      {
+        link: '/feedback/notification/',
+        text: 'Notification 通知',
+      },
+      {
+        link: '/feedback/popconfirm/',
+        text: 'Popconfirm 气泡确认框',
+      },
+      {
+        link: '/feedback/progress/',
+        text: 'Progress 进度条',
+      },
+      {
+        link: '/feedback/skeleton/',
+        text: 'Skeleton 骨架屏',
+      },
+      {
+        link: '/feedback/spin/',
+        text: 'Spin 加载器',
+      },
+      {
+        link: '/feedback/toast/',
+        text: 'Toast 提示',
+      },
+    ],
+  },
+  {
+    link: 'other',
+    text: '其他',
+
+    items: [
+      {
+        link: '/other/configprovider/',
+        text: 'ConfigProvider 全局配置',
+      },
+      {
+        link: '/other/locale/',
+        text: 'LocaleProvider 多语言',
+      },
+    ],
+  },
+]
diff --git a/docs/index.scss b/docs/index.scss
index 6376ad06..d2e4b266 100644
--- a/docs/index.scss
+++ b/docs/index.scss
@@ -6,6 +6,8 @@ $h4: $bf * 1.2;
 $h5: $bf * 1;
 $h6: $bf * 1;
 
+
+/* ---- overview end ---- */
 .notice {
     display: flex;
     align-items: top;