diff --git a/packages/devui-vue/devui/alert/index.ts b/packages/devui-vue/devui/alert/index.ts
index 9d4b1075057600aff426cb8d4dff29b82e7190fb..afbfed0c422892877f62c32da5d031fd47fa4fb1 100644
--- a/packages/devui-vue/devui/alert/index.ts
+++ b/packages/devui-vue/devui/alert/index.ts
@@ -10,7 +10,7 @@ export { Alert }
 export default {
   title: 'Alert 警告',
   category: '反馈',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Alert as any)
   },
diff --git a/packages/devui-vue/devui/avatar/index.ts b/packages/devui-vue/devui/avatar/index.ts
index ea509fcd8dab3782785243f7e52004cd02e942da..d7700bf75f5b6f9a8a7abe4654d3d87ea30bacc5 100644
--- a/packages/devui-vue/devui/avatar/index.ts
+++ b/packages/devui-vue/devui/avatar/index.ts
@@ -10,7 +10,7 @@ export { Avatar }
 export default {
   title: 'Avatar 头像',
   category: '数据展示',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Avatar as any)
   },
diff --git a/packages/devui-vue/devui/badge/index.ts b/packages/devui-vue/devui/badge/index.ts
index ff57b3149ea04db69e5e042f4b38f618534cb5ad..8657a733b78145f3c4b33a19edd23d3107939eff 100644
--- a/packages/devui-vue/devui/badge/index.ts
+++ b/packages/devui-vue/devui/badge/index.ts
@@ -10,7 +10,7 @@ export { Badge }
 export default {
   title: 'Badge 徽标',
   category: '数据展示',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Badge as any)
   }
diff --git a/packages/devui-vue/devui/button/index.ts b/packages/devui-vue/devui/button/index.ts
index 0fa3b4a26d6970ea2a42720991c3cf72d9a6525e..2888c5453fc42736ba138a9415f4b98ee0aa254d 100644
--- a/packages/devui-vue/devui/button/index.ts
+++ b/packages/devui-vue/devui/button/index.ts
@@ -12,7 +12,7 @@ export { Button }
 export default {
   title: 'Button 按钮',
   category: '通用',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Button as any)
   }
diff --git a/packages/devui-vue/devui/card/index.ts b/packages/devui-vue/devui/card/index.ts
index f7e3961fa2a593e54dd029f70ef8f906ef30f581..69032ab068b34c745e53b2411cb603b2a54883c4 100644
--- a/packages/devui-vue/devui/card/index.ts
+++ b/packages/devui-vue/devui/card/index.ts
@@ -10,7 +10,7 @@ export { Card }
 export default {
   title: 'Card 卡片',
   category: '数据展示',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Card as any)
   }
diff --git a/packages/devui-vue/devui/checkbox/index.ts b/packages/devui-vue/devui/checkbox/index.ts
index dc25995f5b7c82105f4e2c97c3b06d46bbc3522c..a602139f6062efaffc393a9a247b39cb5bf53f33 100644
--- a/packages/devui-vue/devui/checkbox/index.ts
+++ b/packages/devui-vue/devui/checkbox/index.ts
@@ -15,7 +15,7 @@ export { Checkbox }
 export default {
   title: 'Checkbox 复选框',
   category: '数据录入',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Checkbox as any);
     app.use(CheckboxGroup as any);
diff --git a/packages/devui-vue/devui/dropdown/index.ts b/packages/devui-vue/devui/dropdown/index.ts
index d3bf24e74ca37403a1eae2eed6a957f4aa85ff86..0075b1cbba6c5f045227f2114b85291549690e3f 100644
--- a/packages/devui-vue/devui/dropdown/index.ts
+++ b/packages/devui-vue/devui/dropdown/index.ts
@@ -11,7 +11,7 @@ export { Dropdown }
 export default {
   title: 'Dropdown 下拉菜单',
   category: '导航',
-  status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
   install(app: App): void {
     app.use(Dropdown as any)
   }
diff --git a/packages/devui-vue/devui/editable-select/index.ts b/packages/devui-vue/devui/editable-select/index.ts
index 411728313716c4f53e85b39ecb87f7dc765ab8bf..5c1a9c9cd9d16124961a23a6cb751ac81c22b450 100644
--- a/packages/devui-vue/devui/editable-select/index.ts
+++ b/packages/devui-vue/devui/editable-select/index.ts
@@ -10,7 +10,7 @@ export { EditableSelect }
 export default {
   title: 'EditableSelect 可输入下拉选择框',
   category: '数据录入',
-  status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
   install(app: App): void {
         app.use(EditableSelect as any)
   }
diff --git a/packages/devui-vue/devui/fullscreen/index.ts b/packages/devui-vue/devui/fullscreen/index.ts
index b73d21fe20c4b388fc96d47df1e85c086da1ef88..49214f0fec1a66be4b5f3bfda4e23d33468eefea 100644
--- a/packages/devui-vue/devui/fullscreen/index.ts
+++ b/packages/devui-vue/devui/fullscreen/index.ts
@@ -10,7 +10,7 @@ export { Fullscreen }
 export default {
   title: 'Fullscreen 全屏',
   category: '通用',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Fullscreen as any)
   }
diff --git a/packages/devui-vue/devui/grid/index.ts b/packages/devui-vue/devui/grid/index.ts
index cb9577156f351ec9585a16ba63a0d0d18063409c..d5f01ab2d6db01a3b839d662cde2a9f14f588c0b 100644
--- a/packages/devui-vue/devui/grid/index.ts
+++ b/packages/devui-vue/devui/grid/index.ts
@@ -14,7 +14,7 @@ export { Row, Col }
 export default {
   title: 'Grid 栅格',
   category: '布局',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Col as any)
     app.use(Row as any)
diff --git a/packages/devui-vue/devui/icon/index.ts b/packages/devui-vue/devui/icon/index.ts
index 299989544a1fbb26a255defac595845b53d8e72b..fd1972adb86069d0ba3e83532a647b163c15e8da 100644
--- a/packages/devui-vue/devui/icon/index.ts
+++ b/packages/devui-vue/devui/icon/index.ts
@@ -10,7 +10,7 @@ export { Icon }
 export default {
   title: 'Icon 图标',
   category: '通用',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Icon as any)
   }
diff --git a/packages/devui-vue/devui/image-preview/index.ts b/packages/devui-vue/devui/image-preview/index.ts
index e1b883b96668ab2b20fb04b371e6cc8e89f17e15..375a16e51c3d2db71578cd61ab42ad26a3913f4c 100644
--- a/packages/devui-vue/devui/image-preview/index.ts
+++ b/packages/devui-vue/devui/image-preview/index.ts
@@ -7,7 +7,7 @@ export { ImagePreviewDirective, ImagePreviewService }
 export default {
   title: 'ImagePreview 图片预览',
   category: '数据展示',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.directive('d-image-preview', ImagePreviewDirective)
     app.config.globalProperties.$imagePreviewService = ImagePreviewService
diff --git a/packages/devui-vue/devui/input/index.ts b/packages/devui-vue/devui/input/index.ts
index cd150ad09f121fee8565982445dd2ff05f7b2fab..94c018b840051de35133fc92755a076721d41952 100644
--- a/packages/devui-vue/devui/input/index.ts
+++ b/packages/devui-vue/devui/input/index.ts
@@ -10,7 +10,7 @@ export { Input }
 export default {
   title: 'Input 输入框',
   category: '数据录入',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Input as any)
   }
diff --git a/packages/devui-vue/devui/layout/index.ts b/packages/devui-vue/devui/layout/index.ts
index 8f6ec9b64e061adaa7b5ba0c648f8320950fbacf..fe207d20caff1220782b0313a0e9015db43adae1 100644
--- a/packages/devui-vue/devui/layout/index.ts
+++ b/packages/devui-vue/devui/layout/index.ts
@@ -30,7 +30,7 @@ export { Layout, Content, Header, Footer, Aside }
 export default {
   title: 'Layout 布局',
   category: '布局',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Layout as any)
     app.use(Content as any)
diff --git a/packages/devui-vue/devui/loading/index.ts b/packages/devui-vue/devui/loading/index.ts
index 61cf3112a442ed78bc2ccc146c35a1d7cc8f14b1..64c98597c66071ea2fa9944a361e7118a37901f0 100644
--- a/packages/devui-vue/devui/loading/index.ts
+++ b/packages/devui-vue/devui/loading/index.ts
@@ -10,7 +10,7 @@ export {
 export default {
   title: 'Loading 加载提示',
   category: '反馈',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.directive('dLoading', Loading)
     app.config.globalProperties.$loadingService = LoadingService
diff --git a/packages/devui-vue/devui/modal/index.ts b/packages/devui-vue/devui/modal/index.ts
index 806c2cc7d6e473fe6230d838cc2845e0abaf750f..8fed1156098434512800e9fdbc63cf28dc0f3bc6 100644
--- a/packages/devui-vue/devui/modal/index.ts
+++ b/packages/devui-vue/devui/modal/index.ts
@@ -13,7 +13,7 @@ export { Modal }
 export default {
   title: 'Modal 弹窗',
   category: '反馈',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Modal as any)
 
diff --git a/packages/devui-vue/devui/overlay/index.ts b/packages/devui-vue/devui/overlay/index.ts
index c995acc956c4db3c2c9535f6087b88579d6d25d6..7c9592b71253acad72a61d95d7ddb90500b5e57e 100644
--- a/packages/devui-vue/devui/overlay/index.ts
+++ b/packages/devui-vue/devui/overlay/index.ts
@@ -16,7 +16,7 @@ export { FlexibleOverlay, FixedOverlay }
 export default {
   title: 'Overlay 遮罩层',
   category: '通用',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(FixedOverlay as any);
     app.use(FlexibleOverlay as any);
diff --git a/packages/devui-vue/devui/pagination/index.ts b/packages/devui-vue/devui/pagination/index.ts
index fa7e383c57436c38e33ce3f8c4bebc116df9507b..e881885cb4b22f7ecce945cea9efe93421e8736b 100644
--- a/packages/devui-vue/devui/pagination/index.ts
+++ b/packages/devui-vue/devui/pagination/index.ts
@@ -10,7 +10,7 @@ export { Pagination }
 export default {
   title: 'Pagination 分页',
   category: '导航',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Pagination as any)
   }
diff --git a/packages/devui-vue/devui/popover/index.ts b/packages/devui-vue/devui/popover/index.ts
index 6d9070c3656c29051f4fd1a6a1f45c62283390c6..671476ac44ed7c09bbbb38782a0c547c9da3f428 100644
--- a/packages/devui-vue/devui/popover/index.ts
+++ b/packages/devui-vue/devui/popover/index.ts
@@ -10,7 +10,7 @@ export { Popover }
 export default {
   title: 'Popover 悬浮提示',
   category: '反馈',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Popover as any);
   }
diff --git a/packages/devui-vue/devui/progress/index.ts b/packages/devui-vue/devui/progress/index.ts
index d96a7ec9f3a33a8bbe8d897dbad2584a92da0819..420816c02b13019ec182e336da1ae83b243f3559 100644
--- a/packages/devui-vue/devui/progress/index.ts
+++ b/packages/devui-vue/devui/progress/index.ts
@@ -10,7 +10,7 @@ export { Progress }
 export default {
   title: 'Progress 进度条',
   category: '数据展示',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Progress as any)
   }
diff --git a/packages/devui-vue/devui/radio/index.ts b/packages/devui-vue/devui/radio/index.ts
index 154cdf1214a0e7a8490c2bbf25f8c192c9fad049..75c93739b45a2d0ee4719c88a3c64f48f0e322f0 100644
--- a/packages/devui-vue/devui/radio/index.ts
+++ b/packages/devui-vue/devui/radio/index.ts
@@ -15,7 +15,7 @@ export { Radio, RadioGroup }
 export default {
   title: 'Radio 单选框',
   category: '数据录入',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Radio as any)
     app.use(RadioGroup as any)
diff --git a/packages/devui-vue/devui/rate/index.ts b/packages/devui-vue/devui/rate/index.ts
index ae9d10d1c0ca1035ee2f494c73ecc8f8f7ff8783..e9829330d69da7f7a812f3784594168cb15844c7 100644
--- a/packages/devui-vue/devui/rate/index.ts
+++ b/packages/devui-vue/devui/rate/index.ts
@@ -10,7 +10,7 @@ export { Rate }
 export default {
   title: 'Rate 评分',
   category: '数据展示',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Rate as any);
   },
diff --git a/packages/devui-vue/devui/ripple/index.ts b/packages/devui-vue/devui/ripple/index.ts
index 3ff7ce72a4c2385dcfa67ee10b51070f2e4b5f7e..d7602a359f4245f5d8363b9f5e7184030d0c08ee 100644
--- a/packages/devui-vue/devui/ripple/index.ts
+++ b/packages/devui-vue/devui/ripple/index.ts
@@ -6,7 +6,7 @@ export { RippleDirective }
 export default {
   title: 'Ripple 水波纹',
   category: '通用',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.directive('Ripple', RippleDirective)
   }
diff --git a/packages/devui-vue/devui/search/index.ts b/packages/devui-vue/devui/search/index.ts
index 72e9f8f7fa5e6b63b82145bcfea5d1cc9c78e03b..16f4e75180c0b300a8bc6bbffbc0fca1a3e87e9f 100644
--- a/packages/devui-vue/devui/search/index.ts
+++ b/packages/devui-vue/devui/search/index.ts
@@ -10,7 +10,7 @@ export { Search }
 export default {
   title: 'Search 搜索框',
   category: '通用',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Search as any)
   }
diff --git a/packages/devui-vue/devui/skeleton/index.ts b/packages/devui-vue/devui/skeleton/index.ts
index e27275e67da74c3fbbe24c47571b470d0b7b0f0d..7ede865581b5d7462630f4204c5ddd382d4f9c80 100644
--- a/packages/devui-vue/devui/skeleton/index.ts
+++ b/packages/devui-vue/devui/skeleton/index.ts
@@ -12,7 +12,7 @@ export { Skeleton,SkeletonItem }
 export default {
   title: 'Skeleton 骨架屏',
   category: '数据展示',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Skeleton as any)
   }
diff --git a/packages/devui-vue/devui/slider/index.ts b/packages/devui-vue/devui/slider/index.ts
index f4596b7734eec02a4e6729d10d96a3013edc3f4b..800f8c1fd7ba6d4cd9d4ca23c3e2cbababa59ad5 100644
--- a/packages/devui-vue/devui/slider/index.ts
+++ b/packages/devui-vue/devui/slider/index.ts
@@ -10,7 +10,7 @@ export { Slider }
 export default {
   title: 'Slider 滑块',
   category: '数据录入',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Slider as any)
   }
diff --git a/packages/devui-vue/devui/splitter/index.ts b/packages/devui-vue/devui/splitter/index.ts
index 2815770bdbea9fadc8c8b4e2b0acf0b9bad6c343..db6651c4495752831f4f43a58cdcb0e565dc9f47 100644
--- a/packages/devui-vue/devui/splitter/index.ts
+++ b/packages/devui-vue/devui/splitter/index.ts
@@ -12,7 +12,7 @@ export { Splitter }
 export default {
   title: 'Splitter 分割器',
   category: '布局',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Splitter as any)
   },
diff --git a/packages/devui-vue/devui/status/index.ts b/packages/devui-vue/devui/status/index.ts
index 89c0743741475edd7f9f8434844fd522bd500b46..43bcf996ce9416f7b3625e5a3899d45cf0d67bca 100644
--- a/packages/devui-vue/devui/status/index.ts
+++ b/packages/devui-vue/devui/status/index.ts
@@ -10,7 +10,7 @@ export { Status }
 export default {
   title: 'Status 状态',
   category: '通用',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Status as any)
   }
diff --git a/packages/devui-vue/devui/switch/index.ts b/packages/devui-vue/devui/switch/index.ts
index f220103c1398dc5816aa631dd815804adc17259d..c834c231e812c3e116f6002cb06acfd5da1e704b 100644
--- a/packages/devui-vue/devui/switch/index.ts
+++ b/packages/devui-vue/devui/switch/index.ts
@@ -10,7 +10,7 @@ export { Switch }
 export default {
   title: 'Switch 开关',
   category: '数据录入',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Switch as any)
   }
diff --git a/packages/devui-vue/devui/tag-input/index.ts b/packages/devui-vue/devui/tag-input/index.ts
index 414add7d0417c370cab4b8cb71ad50f668b6ae9a..45a127cf3275dc331b9fa3cba95a7c6dbfa05ba7 100644
--- a/packages/devui-vue/devui/tag-input/index.ts
+++ b/packages/devui-vue/devui/tag-input/index.ts
@@ -10,7 +10,7 @@ export { TagInput }
 export default {
   title: 'TagInput 标签输入框',
   category: '数据录入',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(TagInput as any)
   }
diff --git a/packages/devui-vue/devui/textarea/index.ts b/packages/devui-vue/devui/textarea/index.ts
index 03e83245a0c71c9c6c29e274dbd948d1b7663085..ef2b47cc9a1466210d9b538392dd715443575d2c 100644
--- a/packages/devui-vue/devui/textarea/index.ts
+++ b/packages/devui-vue/devui/textarea/index.ts
@@ -10,7 +10,7 @@ export { Textarea }
 export default {
   title: 'Textarea 多行文本框',
   category: '数据录入',
-  status: '已完成', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '100%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
   install(app: App): void {
         app.use(Textarea as any)
   }
diff --git a/packages/devui-vue/devui/time-axis/index.ts b/packages/devui-vue/devui/time-axis/index.ts
index 7b63ef9ad9be05f8eb6823856504ba7a689632b3..511794c29c4d7fe4e6a082ed5064375b68f1742e 100644
--- a/packages/devui-vue/devui/time-axis/index.ts
+++ b/packages/devui-vue/devui/time-axis/index.ts
@@ -13,7 +13,7 @@ export { TimeAxis, TimeAxisItem }
 export default {
   title: 'TimeAxis 时间轴',
   category: '数据展示',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(TimeAxis as any)
     app.use(TimeAxisItem as any)
diff --git a/packages/devui-vue/devui/toast/index.ts b/packages/devui-vue/devui/toast/index.ts
index 6d091b1558be1ebd0a63148e84960d334c16369b..705ee20d4ad2b8acb6f88a27156122c985004558 100644
--- a/packages/devui-vue/devui/toast/index.ts
+++ b/packages/devui-vue/devui/toast/index.ts
@@ -11,7 +11,7 @@ export { Toast, ToastService }
 export default {
   title: 'Toast 全局提示',
   category: '反馈',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Toast as any)
     app.config.globalProperties.$toastService = ToastService
diff --git a/packages/devui-vue/devui/upload/index.ts b/packages/devui-vue/devui/upload/index.ts
index e23e3decea1adf10fcf25854542acb5c0bcc0a91..3eed211d068f49430d7fb5948c635220a1ed3890 100644
--- a/packages/devui-vue/devui/upload/index.ts
+++ b/packages/devui-vue/devui/upload/index.ts
@@ -14,7 +14,7 @@ export { Upload, MultiUpload }
 export default {
   title: 'Upload 上传',
   category: '数据录入',
-  status: '已完成',
+  status: '100%',
   install(app: App): void {
     app.use(Upload as any)
   }
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue
index 79b2a4c1d689c7afbba2dbdbb920a7c4358c44bc..91c519cd9237b3f7d17ede456a870e8128e2daf9 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue
@@ -82,9 +82,8 @@ export default defineComponent({
   position: fixed;
   display: flex;
   bottom: 2rem;
-  right: 2.5rem;
-  width: 2rem;
-  height: 28px;
+  right: calc((100vw - 1440px) / 2 + 144px);
+  width: 22px;
   color: var(--devui-brand);
   z-index: 1;
 }
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
index 0655d4b25a11d9d2d8cd41403d801c68b625446c..250bfe84784418687029c08d3ded79004700c159 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
@@ -36,42 +36,44 @@ defineEmits(['toggle'])
 
 <template>
   <header class="nav-bar">
-    <ToggleSideBarButton @toggle="$emit('toggle')" />
+    <div class="nav-bar-inner">
+      <ToggleSideBarButton @toggle="$emit('toggle')" />
 
-    <NavBarTitle />
+      <NavBarTitle />
 
-    <div class="flex-grow" />
+      <div class="flex-grow" />
 
-    <div class="flex items-center">
-      <div class="nav">
-        <NavLinks />
-      </div>
-
-      <div class="custom-nav flex items-center ml-l">
-        <div
-          class="custom-nav-item ml-m"
-          style="font-size: 0"
-          @click="() => useTranslation(defaultLanguage === 'zh-CN' ? 'en-US' : 'zh-CN')"
-        >
-          <ZhLang v-if="defaultLanguage === 'zh-CN'"></ZhLang>
-          <EnLang v-else></EnLang>
+      <div class="flex items-center">
+        <div class="nav">
+          <NavLinks />
         </div>
-        <div class="custom-nav-item flex items-center ml-m">
-          <DarkMode v-if="darkMode" @click="darkMode = !darkMode"></DarkMode>
-          <LightMode v-else @click="darkMode = !darkMode"></LightMode>
+
+        <div class="custom-nav flex items-center ml-l">
+          <div
+            class="custom-nav-item ml-m"
+            style="font-size: 0"
+            @click="() => useTranslation(defaultLanguage === 'zh-CN' ? 'en-US' : 'zh-CN')"
+          >
+            <ZhLang v-if="defaultLanguage === 'zh-CN'"></ZhLang>
+            <EnLang v-else></EnLang>
+          </div>
+          <div class="custom-nav-item flex items-center ml-m">
+            <DarkMode v-if="darkMode" @click="darkMode = !darkMode"></DarkMode>
+            <LightMode v-else @click="darkMode = !darkMode"></LightMode>
+          </div>
+          <a class="ml-m" style="font-size: 0" href="https://gitee.com/devui/vue-devui/stargazers">
+            <img
+              :src="`https://gitee.com/devui/vue-devui/badge/star.svg?theme=${
+                darkMode ? 'dark' : 'white'
+              }`"
+              alt="star"
+            />
+          </a>
         </div>
-        <a class="ml-m" style="font-size: 0" href="https://gitee.com/devui/vue-devui/stargazers">
-          <img
-            :src="`https://gitee.com/devui/vue-devui/badge/star.svg?theme=${
-              darkMode ? 'dark' : 'white'
-            }`"
-            alt="star"
-          />
-        </a>
       </div>
-    </div>
 
-    <slot name="search" />
+      <slot name="search" />
+    </div>
   </header>
 </template>
 
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBarTitle.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBarTitle.vue
index 608e0ec3363b12d579a55a8987506d176860c207..bbed5db97c35e0042897d210c6189b3bf84f98e1 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBarTitle.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBarTitle.vue
@@ -27,6 +27,8 @@ function gopage (){
 @import '@devui/styles-var/devui-var';
 
 .nav-bar-title {
+  display: flex;
+  align-items: center;
   font-size: 1.3rem;
   font-weight: 600;
   color: $devui-text;
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue
index 11236979eeb6a3d2f25d028c242d6f47b20939ba..be07d2fb10326e97b6b848854a34a9f14e583b6b 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue
@@ -36,7 +36,7 @@ useActiveSidebarLinks(container, marker)
   width: 200px;
   position: fixed;
   top: 50px;
-  right: 0;
+  right: calc((100vw - 1440px) / 2 - 10px);
   z-index: 1;
 
   .devui-fast-forward {
@@ -46,8 +46,7 @@ useActiveSidebarLinks(container, marker)
     line-height: 24px;
     font-weight: bold;
     padding-bottom: 10px;
-    margin-left: 20px;
-    border-bottom: 1px solid $devui-dividing-line;
+    margin-left: 17px;
   }
 
   .devui-step-nav {
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBar.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBar.vue
index 288c76b68ec7686c98f3aa23cb61bb32d7bf7885..0860c4f0de20c3527c167f9a5904ba9dae47a1d0 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBar.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBar.vue
@@ -26,9 +26,8 @@ defineProps({
   position: fixed;
   top: var(--header-height);
   bottom: 0;
-  left: 0;
+  left: calc((100vw - 1440px) / 2);
   z-index: var(--z-index-sidebar);
-  border-right: 1px solid $devui-dividing-line;
   width: 16.4rem;
   background-color: $devui-base-bg;
   overflow-y: auto;
@@ -50,6 +49,8 @@ defineProps({
 
 .sidebar.open {
   transform: translateX(0);
+  left: 0;
+  border-right: 1px solid $devui-dividing-line;
 }
 
 .nav {
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBarLink.js b/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBarLink.js
index 70488e7bffd0846c08e75828c9a9eafab71bb716..69251f0596032e314047beb829d86687ea6ec878 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBarLink.js
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBarLink.js
@@ -1,6 +1,24 @@
 import { h } from 'vue';
 import { useRoute, useData } from 'vitepress';
 import { joinUrl, isActive } from '../utils';
+
+// 阶梯访问表
+const stairStepAccessTable = function(source, sourceRangeArray, targetArray) {
+    const maxTarget = targetArray.length - 1;
+    let targetIndex = 0;
+    let target = targetArray[maxTarget];
+    while(target === targetArray[maxTarget] && targetIndex < maxTarget) {
+        if (source <= sourceRangeArray[targetIndex]) { // <= 意味着包含右边界
+            target = targetArray[targetIndex];
+        }
+        targetIndex += 1;
+    }
+    return target;
+}
+
+const statusRange = [ 49, 99 ];
+const colors = [ 'var(--devui-danger, #f66f6a)', 'var(--devui-warning, #fac20a)', 'var(--devui-success, #50d4ab)' ];
+
 export const SideBarLink = (props) => {
     const route = useRoute();
     const { site, frontmatter } = useData();
@@ -8,7 +26,14 @@ export const SideBarLink = (props) => {
     const maxDepth = frontmatter.value.sidebarDepth || Infinity;
     const headers = route.data.headers;
     const text = props.item.text;
-    const status = props.item.status;
+    let status = props.item.status;
+    let dotColor = '';
+    
+    if (status !== undefined) {
+        status = parseInt(props.item.status, 10);
+        dotColor = stairStepAccessTable(status, statusRange, colors);
+    }
+
     const link = resolveLink(site.value.base, props.item.link);
     const children = props.item.children;
     const active = isActive(route, props.item.link);
@@ -20,10 +45,11 @@ export const SideBarLink = (props) => {
             class: { 'sidebar-link-item': true, active },
             href: link
         }, [
-            text,
             status && h('span', {
-                class: 'sidebar-link-status'
-            }, status),
+                class: 'sidebar-link-status',
+                style: `background-color: ${dotColor}`
+            }),
+            text,
         ]),
         childItems
     ]);
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss b/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss
index facd32f70602369c4a4a63da17179b36131600b1..b9e49c8a702b899ee5cff2989a60d41aadd97912 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss
@@ -4,7 +4,7 @@
   border: solid 1px $devui-dividing-line !important;
 
   &.hover {
-    box-shadow: $devui-shadow-length-base $devui-shadow !important;
+    box-shadow: none !important;
   }
 }
 
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss b/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss
index 172bcdc5627c9c59eabce77780492cfaf88ec11f..7a81ed5a02f371825bbaf8768e82f4ffa687dbe4 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss
@@ -240,3 +240,31 @@ form {
   width: 100vw;
   height: 100vh;
 }
+
+$max-width: 1440px;
+
+.theme {
+  max-width: $max-width;
+  margin: 0 auto;
+
+  .nav-bar-inner {
+    max-width: $max-width;
+    width: 100%;
+    display: flex;
+    margin: 0 auto;
+    padding-left: 18px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .theme {
+    .nav-bar-inner {
+      padding-left: 0;
+
+      .custom-nav {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/styles/sidebar-links.scss b/packages/devui-vue/docs/.vitepress/devui-theme/styles/sidebar-links.scss
index 7e08ff0a9c978dabb2ae228522b40bb5146488af..23afbb074ff90e57f7f66bef16e1c7152286b176 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/styles/sidebar-links.scss
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/styles/sidebar-links.scss
@@ -49,7 +49,6 @@ a.sidebar-link-item.active {
 }
 
 .sidebar > .sidebar-links > .sidebar-link > a.sidebar-link-item.active {
-  border-left-color: $devui-brand;
   font-weight: 600;
 }
 
@@ -59,7 +58,8 @@ a.sidebar-link-item.active {
   > .sidebar-links
   > .sidebar-link
   > .sidebar-link-item {
-  display: block;
+  display: flex;
+  align-items: center;
   padding: 0.35rem 1.5rem 0.35rem 2rem;
   line-height: 1.4;
   font-size: 1rem;
@@ -72,7 +72,6 @@ a.sidebar-link-item.active {
   > .sidebar-links
   > .sidebar-link
   > a.sidebar-link-item.active {
-  border-left-color: $devui-brand;
   font-weight: 600;
 }
 
@@ -110,11 +109,8 @@ a.sidebar-link-item.active {
 
 .sidebar .sidebar-link-status {
   display: inline-block;
-  min-height: 20px;
-  margin: 0 8px;
-  padding: 0 8px;
-  border: solid 1px $devui-brand;
-  border-radius: 2px;
-  color: $devui-brand;
-  font-size: 12px;
+  width: 6px;
+  height: 6px;
+  margin-right: 8px;
+  border-radius: 50px;
 }
\ No newline at end of file