From dd5800e04f78f93bab1f7f61443f52f339d7ea33 Mon Sep 17 00:00:00 2001
From: xsf0105 <allan91coder@gmail.com>
Date: Fri, 28 Apr 2023 13:22:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E8=B0=83=E8=AF=95?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/sites/assets/styles/highlight.scss    |  97 ++---
 example/src/sites/assets/styles/md-style.scss |  85 ++---
 example/src/sites/assets/styles/reset.scss    | 125 +++---
 example/src/sites/assets/styles/theme.scss    | 252 ++++++++++++
 example/src/sites/doc/App.vue                 |  14 -
 .../src/sites/doc/components/DemoPreview.vue  |  28 +-
 example/src/sites/doc/components/Header.vue   | 338 +++++++++++++---
 example/src/sites/doc/components/Nav.vue      | 360 ++++++++++++------
 example/src/sites/doc/components/Tips.vue     | 133 +++++++
 example/src/sites/doc/main.ts                 |   2 +
 example/src/sites/doc/views/Index.vue         |  23 +-
 11 files changed, 1067 insertions(+), 390 deletions(-)
 create mode 100644 example/src/sites/assets/styles/theme.scss
 create mode 100644 example/src/sites/doc/components/Tips.vue

diff --git a/example/src/sites/assets/styles/highlight.scss b/example/src/sites/assets/styles/highlight.scss
index dd6c1546..e17764e1 100644
--- a/example/src/sites/assets/styles/highlight.scss
+++ b/example/src/sites/assets/styles/highlight.scss
@@ -4,15 +4,17 @@ code {
 	padding: 16px;
 	overflow-x: auto;
 	color: #58727e;
+	color: #a6accd;
 	font-weight: 400;
 	font-size: 14px;
-	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+	font-family: var(--font-family-mono);
 	line-height: 26px;
 	white-space: pre-wrap;
 	word-wrap: break-word;
 	-webkit-font-smoothing: auto;
 	background-color: #fafafa;
-	border-radius: 16px;
+	background-color: #161618;
+	border-radius: 8px;
 }
 
 pre {
@@ -30,56 +32,42 @@ pre {
 	background: #f7f8fa;
 }
 
-.hljs-subst {
-	color: #58727e;
+.hljs-comment,
+.hljs-quote {
+	color: #a0a1a7;
+	font-style: italic;
 }
 
-.hljs-string,
-.hljs-meta,
-.hljs-symbol,
-.hljs-template-tag,
-.hljs-template-variable,
-.hljs-addition {
-	color: #fa2400;
+.hljs-doctag,
+.hljs-formula,
+.hljs-keyword {
+	color: #89ddff;
 }
 
-.hljs-comment,
-.hljs-quote {
-	color: #999;
+.hljs-deletion,
+.hljs-name,
+.hljs-section,
+.hljs-selector-tag,
+.hljs-subst {
+	color: #e45649;
+	color: #f07178;
 }
 
-.hljs-params,
-.hljs-keyword,
-.hljs-attribute {
-	color: #986801;
+.hljs-literal {
+	color: #0184bb;
 }
 
-.hljs-deletion,
-.hljs-variable,
-.hljs-number,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string,
 .hljs-regexp,
-.hljs-literal,
-.hljs-bullet,
-.hljs-link {
-	color: #eb6f6f;
+.hljs-string {
+	color: #c3e88d;
 }
 
-.hljs-attr,
-.hljs-selector-tag,
-.hljs-title,
-.hljs-section,
 .hljs-built_in,
-.hljs-doctag,
-.hljs-type,
-.hljs-name,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-strong {
-	color: #e45649;
-}
-
-.hljs-emphasis {
-	font-style: italic;
+.hljs-class .hljs-title {
+	color: #c18401;
 }
 
 .hljs-attr,
@@ -90,12 +78,27 @@ pre {
 .hljs-template-variable,
 .hljs-type,
 .hljs-variable {
-	color: #986801;
+	// color: #986801;
+	color: #c792ea;
 }
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string,
-.hljs-regexp,
-.hljs-string {
-	color: #50a14f;
+
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-symbol,
+.hljs-title {
+	color: #4078f2;
+}
+
+.hljs-emphasis {
+	font-style: italic;
+}
+
+.hljs-strong {
+	font-weight: 700;
+}
+
+.hljs-link {
+	text-decoration: underline;
 }
diff --git a/example/src/sites/assets/styles/md-style.scss b/example/src/sites/assets/styles/md-style.scss
index 667448b5..e4ec0301 100644
--- a/example/src/sites/assets/styles/md-style.scss
+++ b/example/src/sites/assets/styles/md-style.scss
@@ -1,11 +1,11 @@
 @import "highlight.scss";
 
 .doc-content-document {
+	min-height: 800px;
+	flex-shrink: 0;
 	position: relative;
-	padding-top: 48px;
-	padding-bottom: 48px;
-	padding-left: 40px;
-	padding-right: 445px;
+	padding: 40px;
+
 	.card {
 		margin-bottom: 24px;
 		padding: 24px;
@@ -16,37 +16,27 @@
 
 	a {
 		margin: 0 1px;
-		color: #0088ff;
-		-webkit-font-smoothing: auto;
+		color: #646cff;
+		text-decoration-line: underline;
 
 		&:hover {
-			color: darken(#0088ff, 10%);
+			color: #bcc0ff;
 		}
 
 		&:active {
-			color: darken(#0088ff, 20%);
+			color: #bcc0ff;
 		}
 	}
 
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		color: #333;
-		font-weight: bold;
-		line-height: 1.5;
-
-		&[id] {
-			cursor: pointer;
+	&.isComponent {
+		h1 {
+			display: none;
 		}
 	}
 
 	h1 {
 		margin: 0 0 30px;
 		font-size: 30px;
-		color: #333;
 		font-weight: bold;
 		position: relative;
 		margin-bottom: 56px;
@@ -76,33 +66,26 @@
 	}
 
 	p {
-		color: #666;
-		font-size: 14px;
+		font-size: 16px;
 		line-height: 22px;
 	}
+
 	strong {
 		margin: 24px 0 12px;
 		font-weight: bold;
-		font-size: 14px;
-		color: #333;
+		font-size: 16px;
 	}
+
 	table {
 		width: 100%;
 		margin-top: 12px;
-		color: #666;
 		font-size: 14px;
 		line-height: 1.5;
 		border-collapse: collapse;
-		border: 1px solid #eee;
 		th {
 			padding: 8px 20px;
 			font-weight: 600;
 			text-align: left;
-			border-left: 1px solid #e9e9e9;
-			background-color: #f7f8fa;
-			// &:first-child {
-			//   padding-left: 0;
-			// }
 
 			&:last-child {
 				padding-right: 0;
@@ -111,19 +94,17 @@
 
 		td {
 			padding: 8px 20px;
-			border-top: 1px solid #f1f4f8;
-			border-left: 1px solid #e9e9e9;
+			color: #fff;
+
 			&:first-child {
-				// padding-left: 0;
 				border-left: 0px;
-				// version tag
 				code {
 					margin: 0;
 					padding: 2px 6px;
-					color: #0088ff;
+					color: #38bdf7;
 					font-weight: 600;
 					font-size: 11px;
-					background-color: fade(#0088ff, 10%);
+					background-color: fade(#38bdf7, 10%);
 					border-radius: 20px;
 				}
 			}
@@ -136,7 +117,8 @@
 		em {
 			color: #fa2400;
 			font-size: 14px;
-			font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+			font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+				Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 			font-style: normal;
 			-webkit-font-smoothing: auto;
 		}
@@ -145,11 +127,11 @@
 	ul li,
 	ol li {
 		position: relative;
-		margin: 5px 0 5px 10px;
-		padding-left: 15px;
-		color: #666;
-		font-size: 15px;
+		// margin: 5px 0 5px 10px;
+		// padding-left: 15px;
+		font-size: 16px;
 		line-height: 26px;
+		list-style-type: disc;
 
 		&::before {
 			position: absolute;
@@ -159,7 +141,7 @@
 			width: 6px;
 			height: 6px;
 			margin-top: 10px;
-			border: 1px solid #666;
+			border: 1px solid #eee;
 			border-radius: 50%;
 			content: "";
 		}
@@ -180,9 +162,10 @@
 		font-size: 14px;
 		font-family: inherit;
 		word-break: keep-all;
-		background-color: #f7f8fa;
 		border-radius: 4px;
 		-webkit-font-smoothing: antialiased;
+		font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+			Consolas, "Liberation Mono", "Courier New", monospace;
 	}
 
 	p > code {
@@ -197,11 +180,11 @@
 	blockquote {
 		margin: 16px 0px;
 		padding: 16px;
-		background-color: #f7f8fa;
-		border-left: 6px solid #128dff;
-		border-radius: 3px;
+		background-color: rgba(100, 108, 255, 0.08);
+		border: 1px solid var(--brand-color);
+		border-radius: 8px;
 		p {
-			color: #333;
+			color: #fff;
 		}
 	}
 
@@ -242,4 +225,8 @@
 			}
 		}
 	}
+
+	ul li::before {
+		display: none;
+	}
 }
diff --git a/example/src/sites/assets/styles/reset.scss b/example/src/sites/assets/styles/reset.scss
index 191e6319..b74896cd 100644
--- a/example/src/sites/assets/styles/reset.scss
+++ b/example/src/sites/assets/styles/reset.scss
@@ -1,69 +1,25 @@
 @charset "utf-8";
-
-html,
-body,
-div,
-span,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-em,
-img,
-s,
-strong,
-b,
-u,
-i,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section,
-time,
-audio,
-video {
+body {
 	margin: 0;
 	padding: 0;
-	border: 0;
-	-webkit-overflow-scrolling: touch;
+}
+ol,
+ul {
+	list-style: none;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
 }
 
-/* ios默认文本框阴影 */
+p {
+	margin: 0;
+}
 
-input[type="text"],
-textarea {
-	/* stylelint-disable-next-line property-no-vendor-prefix */
-	-webkit-appearance: none;
+button {
+	background-color: transparent;
+	cursor: pointer;
 }
 
 html,
@@ -76,36 +32,41 @@ input {
 	text-decoration: none;
 }
 
-/* 低版本安卓文本框层级问题 */
-
-input:focus {
-	-webkit-user-modify: read-write-plaintext-only;
+img {
+	border: 0 none;
+	vertical-align: bottom;
+	-ms-interpolation-mode: bicubic;
 }
 
-/* 清除谷歌浏览器下的 search 叉号 */
-input::-webkit-search-cancel-button {
-	display: none;
+html,
+body {
+	min-height: 100vh;
+	flex-direction: column;
+	display: flex;
 }
 
-ol,
-ul {
-	list-style: none;
+img,
+video {
+	max-width: 100%;
+	height: auto;
+	border: 0 none;
+	vertical-align: bottom;
 }
 
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
+::selection {
+	background: var(--brand-color);
+	color: #fff;
 }
 
-* {
-	-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-	-webkit-tap-highlight-color: transparent;
-	box-sizing: border-box;
+a {
+	color: #4c4c52;
+	transition: all 0.25s;
+}
+a:hover {
+	color: var(--brand-color);
+	transition: all 0.25s;
 }
 
-img {
-	border: 0 none;
-	vertical-align: bottom;
-	/* stylelint-disable-next-line property-no-vendor-prefix */
-	-ms-interpolation-mode: bicubic;
+svg {
+	fill: currentColor;
 }
diff --git a/example/src/sites/assets/styles/theme.scss b/example/src/sites/assets/styles/theme.scss
new file mode 100644
index 00000000..7371bdbf
--- /dev/null
+++ b/example/src/sites/assets/styles/theme.scss
@@ -0,0 +1,252 @@
+:root {
+	--font-family-base: "Inter var", "Inter", ui-sans-serif, system-ui,
+		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+		Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+		Consolas, "Liberation Mono", "Courier New", monospace;
+	--link-font-color-dark: rgba(255, 255, 255, 0.87);
+
+	--header-bg-light: #fff;
+	--line-light: rgba(60, 60, 67, 0.12);
+	--text-font-color-light: rgba(60, 60, 67, 0.92);
+
+	--brand-color: #646cff;
+
+	--brand-color-light: #bcc0ff; // hover color
+
+	--mute-light: #f6f6f7; // tag backgroun
+
+	--main-bg: #fff;
+
+	--main-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+
+	// --text-font-color: rgba(28, 30, 33);
+	--text-font-color: rgba(60, 60, 67, 0.92);
+	--text-code-font-color: #476582;
+
+	color: var(--text-font-color);
+	background-color: var(--main-bg);
+	font-family: var(--font-family-base);
+}
+
+.nav-item .nav-active {
+	color: var(--brand-color);
+}
+
+.action .why-quark {
+	background-color: var(--main-bg);
+	color: #000;
+	&:hover {
+		background-color: #f6f6f6;
+	}
+}
+
+.nav-item a {
+	color: var(--text-font-color-light);
+	font-family: var(--font-family-base);
+}
+.nav-item a:hover {
+	color: var(--brand-color);
+}
+.social-links a,
+.translate-lang a {
+	color: rgba(60, 60, 67, 0.7);
+}
+.social-links a:hover svg,
+.translate-lang a:hover svg {
+	color: rgba(60, 60, 67, 0.92);
+	transition: color 0.25s;
+}
+.header .container {
+	border-bottom: 1px solid var(--line-light);
+	background-color: var(--main-bg);
+}
+.sticky-nav {
+	background-color: var(--main-bg);
+}
+.sticky-nav-shadow {
+	background-image: linear-gradient(to bottom, #eee, rgba(0, 0, 0, 0));
+}
+.doc-content-document p {
+	color: var(--text-font-color);
+}
+.doc-content-document table {
+	border: 1px solid var(--line-light);
+}
+.doc-content-document table th,
+.doc-content-document table td {
+	border-left: 1px solid var(--line-light);
+	color: var(--text-font-color-light);
+}
+
+.doc-content-document table td {
+	border-top: 1px solid var(--line-light);
+}
+
+.doc-content-document table code {
+	color: var(--text-code-font-color);
+	background-color: var(--mute-light);
+}
+
+.doc-content-document table td:first-child code {
+	color: var(--text-code-font-color);
+}
+.doc-nav {
+	border-right: 1px solid var(--line-light);
+}
+.doc-content-document p > code {
+	color: var(--text-code-font-color);
+	background-color: var(--mute-light);
+}
+.doc-content-document strong {
+	color: var(--text-font-color);
+}
+.doc-content-document blockquote {
+	background-color: rgba(100, 108, 255, 0.08);
+}
+.doc-content-document blockquote p {
+	color: #454ce1;
+}
+
+.doc-content-document ul li,
+.doc-content-document ol li {
+	color: var(--text-font-color);
+}
+
+html.dark {
+	--link-font-color-dark: rgba(255, 255, 255, 0.87);
+	--main-bg: #1e1e20;
+	--text-font-color: rgba(255, 255, 255, 0.87);
+	--header-bg-light: #fff;
+	--line-light: rgba(60, 60, 67, 0.12);
+	--text-font-color-light: rgba(60, 60, 67, 0.92);
+	--text-code-font-color: #c9def1;
+	--brand-color: #646cff;
+	--brand-color-light: #bcc0ff; // hover color
+	--mute-light: #313136; // tag background
+	--line-light: rgba(82, 82, 89, 0.32);
+	font-family: var(--font-family-base);
+	color: var(--link-font-color-dark);
+	background-color: var(--main-bg);
+
+	a,
+	button {
+		color: rgba(255, 255, 255, 0.5);
+	}
+
+	pre {
+		color: #1e1e20;
+	}
+
+	.flyout-menu .menu-wrap {
+		background: var(--main-bg);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+		border: 1px solid rgba(84, 84, 84, 0.48);
+	}
+
+	.flyout-menu .menu-group-title {
+		color: rgba(235, 235, 235, 0.38);
+	}
+
+	.flyout-menu .menu-link {
+		color: rgba(255, 255, 255, 0.87);
+		&:hover {
+			color: #646cff;
+		}
+	}
+
+	.sticky-nav-shadow {
+		background-image: linear-gradient(to bottom, #1e1e1e, rgb(0 0 0 / 0%));
+	}
+	.nav-item a:hover,
+	.nav-item button:hover {
+		color: rgba(255 255 255 / 1);
+	}
+	.nav-item .nav-active {
+		color: #fff;
+	}
+
+	.social-links a:hover svg {
+		color: #fff;
+	}
+	.translate-lang:hover {
+		color: #fff;
+	}
+
+	.doc-nav a {
+		color: #fff;
+	}
+	.doc-nav a:hover {
+		color: var(--brand-color);
+	}
+
+	.translations:before,
+	.appearance:before,
+	.social-links:before {
+		background-color: rgba(60, 60, 67, 0.92);
+	}
+
+	.sticky-nav {
+		background-color: var(--main-bg);
+	}
+	.doc-content-document p > code {
+		color: var(--text-code-font-color);
+	}
+	.doc-content-document strong {
+		color: var(--text-font-color);
+	}
+	.doc-content-document blockquote p {
+		color: #bcc0ff;
+	}
+	.doc-content-document a {
+		color: #9499ff;
+		text-decoration: underline;
+	}
+	.doc-content-document a:hover {
+		color: #bcc0ff;
+	}
+
+	.doc-content-document table {
+		border: 1px solid #333;
+	}
+	.doc-content-document table th,
+	.doc-content-document table td {
+		border-left: 1px solid #333;
+		color: #fff;
+	}
+	.doc-content-document table td {
+		border-top: 1px solid #333;
+	}
+
+	.doc-content-document ul li,
+	.doc-content-document ol li .doc-content-document strong {
+		color: var(--text-font-color);
+	}
+
+	.action .why-quark {
+		background-color: #313136;
+		color: #fff;
+		&:hover {
+			background-color: #2c2c30;
+		}
+	}
+}
+
+// @media screen and (min-width: 860px) {
+//   .doc-nav {
+//     display: none;
+//   }
+//   .doc-content {
+//     margin-left: 0!important;
+//   }
+// }
+
+// @media screen and (max-width: 880px) {
+//   .doc-nav {
+//     display: block;
+//   }
+//   .doc-content {
+//     margin-left: 260px;
+//   }
+// }
diff --git a/example/src/sites/doc/App.vue b/example/src/sites/doc/App.vue
index d88235e3..4c3a9608 100644
--- a/example/src/sites/doc/App.vue
+++ b/example/src/sites/doc/App.vue
@@ -9,17 +9,3 @@ export default defineComponent({
 	name: "App",
 });
 </script>
-
-<style lang="scss">
-::selection {
-	background: #0088ff;
-	color: #fff;
-}
-#doc {
-	height: 100%;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	padding-top: 68px;
-}
-</style>
diff --git a/example/src/sites/doc/components/DemoPreview.vue b/example/src/sites/doc/components/DemoPreview.vue
index 6bd2e7bf..4ba21d69 100644
--- a/example/src/sites/doc/components/DemoPreview.vue
+++ b/example/src/sites/doc/components/DemoPreview.vue
@@ -18,24 +18,22 @@ export default defineComponent({
 
 <style lang="scss">
 .doc-demo-preview {
-	// height: 667px;
-	height: calc(100vh - 300px);
-	width: 375px;
-	position: absolute;
-	right: 30px;
-	top: 240px;
-	box-shadow: #ebedf0 0 4px 12px;
-	border-radius: 12px;
+	transition-property: all;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 150ms;
 	overflow: hidden;
-
-	&.fixed {
-		position: fixed;
-		top: 120px;
-	}
-
+	position: fixed;
+	right: 30px;
+	top: 88px;
+	min-height: 620px;
+	width: 360px;
 	iframe {
-		height: 100%;
+		height: 590px;
 		width: 100%;
+		border-radius: 12px;
 	}
 }
+.fixed-class {
+	top: 20px;
+}
 </style>
diff --git a/example/src/sites/doc/components/Header.vue b/example/src/sites/doc/components/Header.vue
index be6bfd5c..9923861d 100644
--- a/example/src/sites/doc/components/Header.vue
+++ b/example/src/sites/doc/components/Header.vue
@@ -1,68 +1,136 @@
 <template>
-	<div class="doc-header">
-		<div class="header-logo">
-			<a class="logo-link" href="#" @click="toHome"></a>
-		</div>
-		<div class="header-nav">
-			<a href="https://github.com/hellof2e/quark-design-docs" target="_blank">
+	<header :class="{ sticky: isHomePage() }" class="header">
+		<div>
+			<a
+				href="https://github.com/hellof2e/quark-design-docs"
+				target="_blank"
+				class="top-info"
+			>
 				当前环境：development，代码 PR
 				合并后，文档会自动同步至：https://github.com/hellof2e/quark-design-docs
 			</a>
+			<div class="container">
+				<div class="left-bar" style="">Quark design 源码调试界面</div>
+
+				<div class="toper-bar">
+					<div class="translations">
+						<a
+							class="translate-lang"
+							href="javascript:void(0);"
+							@click="switchLang"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								aria-hidden="true"
+								focusable="false"
+								viewBox="0 0 24 24"
+							>
+								<path d="M0 0h24v24H0z" fill="none"></path>
+								<path
+									d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
+									class="css-c4d79v"
+								></path>
+							</svg>
+						</a>
+					</div>
+
+					<div class="appearance">
+						<dark-light-mode />
+					</div>
+
+					<div class="social-links">
+						<a
+							href="https://github.com/hellof2e/quark-design/discussions"
+							class="github-link"
+							target="_blank"
+						>
+							<svg
+								t="1679995277175"
+								class="icon"
+								viewBox="0 0 1024 1024"
+								version="1.1"
+								xmlns="http://www.w3.org/2000/svg"
+								p-id="5433"
+								width="200"
+								height="200"
+							>
+								<path
+									d="M860.16 430.08c0-223.744-192-402.944-431.616-402.944C191.488 27.136 0 209.408 0 430.08c0 73.728 22.528 143.872 57.344 201.216l-41.472 140.8c-9.728 35.328 9.728 51.2 41.472 41.472l134.144-44.544c67.072 41.472 146.944 64 233.472 64 243.2 3.072 435.2-179.2 435.2-402.944z m-214.528-54.272c28.672 0 54.272 25.6 54.272 54.272s-25.6 54.272-54.272 54.272-54.272-25.6-54.272-54.272 25.6-54.272 54.272-54.272zM214.016 484.352c-28.672 0-54.272-25.6-54.272-54.272s25.6-54.272 54.272-54.272 54.272 25.6 54.272 54.272-22.016 54.272-54.272 54.272z m163.328-54.272c0-28.672 25.6-54.272 54.272-54.272s54.272 25.6 54.272 54.272-25.6 54.272-54.272 54.272-54.272-22.528-54.272-54.272z m0 0"
+									p-id="5434"
+								></path>
+								<path
+									d="M965.632 794.624c35.328-60.928 57.344-128 57.344-201.216 0-112.128-48.128-210.944-124.928-284.672 12.8 38.4 18.944 79.872 18.944 124.928v35.328c18.944 38.4 28.672 82.944 28.672 128 0 57.344-15.872 112.128-44.544 159.744l-18.944 28.672 9.728 35.328 15.872 54.272-51.2-15.872-35.328-12.8-31.744 18.944c-57.344 35.328-124.928 54.272-192 54.272-51.2 0-99.328-9.728-140.8-28.672H437.76c-54.272 0-108.544-9.728-156.672-25.6 79.872 79.872 192 131.072 320 131.072 86.528 0 166.4-25.6 233.472-64l143.872 48.128c28.672 9.728 44.544-6.144 35.328-35.328l-48.128-150.528z m0 0"
+									p-id="5435"
+								></path>
+							</svg>
+						</a>
+
+						<a
+							href="https://github.com/hellof2e/quark-design"
+							class="github-link"
+							target="_blank"
+						>
+							<!-- <span class="sr-only">GitHub repository</span> -->
+							<svg viewBox="0 0 16 16" fill="currentColor">
+								<path
+									d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+								></path>
+							</svg>
+						</a>
+					</div>
+				</div>
+			</div>
 		</div>
-		<div class="header-nav">
-			<a class="switch-lang" @click="switchLang">
-				<img
-					src="https://m.hellobike.com/resource/helloyun/13459/QgPJutNlCZ.png"
-					alt=""
-				/>
-			</a>
-		</div>
-	</div>
+	</header>
 </template>
+
 <script lang="ts">
-import { defineComponent, reactive, computed, onMounted } from "vue";
-import { nav } from "@/config.json";
-import { version } from "/package.json";
-import { RefData } from "@/sites/assets/util/ref";
+import { onMounted, defineComponent, reactive, computed, ref } from "vue";
+import Search from "./Search.vue";
+// import { header, versions, nav } from "@/config/index";
+// import { version as defaultVersion } from "@/docs_vue/config.json";
+import { useRoute } from "vue-router";
 
 export default defineComponent({
 	name: "doc-header",
-	components: {},
+	components: {
+		Search,
+	},
 	setup() {
-		let packages = [] as any[];
-		nav.forEach((item) => {
-			packages.push(...item.packages);
-		});
+		// const version = ref(defaultVersion);
+		const isZhLang = localStorage.getItem("language") === "zh-CN";
+		const route = useRoute();
+		let packages = [];
+		// nav.forEach((item) => {
+		// 	packages.push(...item.packages);
+		// });
+
 		const data = reactive({
-			verson: "1.x",
 			navIndex: 0,
 			activeIndex: 0,
 			isShowSelect: false,
 		});
-		const handleFocus = () => {
-			console.log(1);
-		};
-		const handleFocusOut = () => {
-			data.isShowSelect = false;
-		};
-
-		const toHome = () => {
-			RefData.getInstance().currentRoute.value = "/";
-		};
 
 		const isActive = computed(() => {
-			let value = RefData.getInstance().currentRoute.value;
-			return function (name: string) {
+			return function (name) {
 				const lName = name.toLowerCase();
-				if (lName !== "component") {
-					return value === lName || lName.includes(value);
-				}
+				return route.path.includes(lName);
 			};
 		});
 
+		const isHomePage = computed(() => {
+			return function () {
+				return !(
+					route.path.includes("component") ||
+					route.path.includes("guide") ||
+					route.path.includes("otherdocs")
+				);
+			};
+		});
+
+		// lang switch
 		const switchLang = () => {
 			let href = "";
-
 			if (localStorage.getItem("language") === "en-US") {
 				// 英文
 				localStorage.setItem("language", "zh-CN");
@@ -76,16 +144,194 @@ export default defineComponent({
 		};
 
 		return {
-			version,
+			docMd: localStorage.getItem("docMd"),
+			isZhLang,
+			// header,
+			// versions,
+			// version,
 			data,
-			toHome,
 			isActive,
-			handleFocus,
-			handleFocusOut,
 			switchLang,
+			isHomePage,
 		};
 	},
 });
 </script>
 
-<style lang="scss" src="./index.scss"></style>
+<style lang="scss">
+.top-info {
+	background: #000;
+	color: #fff;
+	display: flex;
+	justify-content: center;
+	padding: 10px;
+}
+.header {
+	height: 72px;
+	z-index: 30;
+	top: 0;
+	position: relative;
+	min-width: 860px;
+
+	&.sticky {
+		position: sticky;
+	}
+
+	> div {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.container {
+		margin: 0 auto;
+		padding: 0 1.25rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	.toper-bar,
+	.left-bar {
+		display: flex;
+		align-items: center;
+	}
+
+	.menu-group {
+		display: flex;
+		gap: 2rem;
+	}
+
+	.left-bar a {
+		color: rgb(107 114 128);
+		display: flex;
+		align-items: center;
+		margin-right: 0.5rem;
+		img {
+			height: 2rem;
+		}
+	}
+
+	.left-bar span {
+		display: flex;
+		margin-right: 2rem;
+		align-items: center;
+		color: rgb(156 163 175);
+	}
+}
+
+.nav-item a {
+	font-size: 14px;
+}
+
+.nav-item button {
+	color: var(--text-font-color-light);
+	font-family: var(--font-family-base);
+	transition: color 0.5s;
+	&:hover {
+		color: rgba(60, 60, 60, 0.7);
+	}
+}
+
+.translations,
+.appearance,
+.social-links {
+	display: flex;
+
+	&:before {
+		margin: 0 16px;
+		width: 1px;
+		height: 24px;
+		background-color: rgba(60, 60, 67, 0.12);
+		content: "";
+	}
+}
+
+.social-links,
+.translate-lang {
+	display: flex;
+	align-items: center;
+
+	a {
+		width: 40px;
+		height: 36px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	svg {
+		width: 20px;
+		height: 20px;
+		fill: currentColor;
+	}
+}
+
+.flyout {
+	position: relative;
+	a {
+		display: flex;
+		align-items: center;
+	}
+
+	svg {
+		margin-left: 4px;
+		width: 14pxpx;
+		height: 14px;
+		fill: currentColor;
+	}
+}
+.flyout-menu {
+	position: absolute;
+	top: calc(var(--nav-height) / 2 + 15px);
+	right: 0;
+	opacity: 0;
+	visibility: hidden;
+	transform: translateY(-4px);
+	transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+
+	.menu-wrap {
+		border-radius: 8px;
+		padding: 12px 0;
+		min-width: 192px;
+		border: 1px solid transparent;
+		background: var(--main-bg);
+		box-shadow: var(--main-shadow);
+		transition: background-color 0.5s;
+	}
+
+	.menu-items {
+		transition: border-color 0.5s;
+	}
+
+	.flyout-menu .menu-wrap .menu-item-group {
+		padding: 0 0 12px;
+	}
+
+	.menu-group-title {
+		padding: 0 18px;
+		line-height: 28px;
+		font-size: 10px;
+		font-weight: 600;
+		color: #cacaca;
+		text-transform: uppercase;
+		transition: color 0.25s;
+	}
+
+	.menu-link {
+		display: block;
+		padding: 0 18px;
+		line-height: 28px;
+		font-size: 13px;
+		font-weight: 400;
+		color: var(--c-text-1);
+		white-space: nowrap;
+		transition: color 0.25s;
+	}
+}
+
+.flyout:hover .flyout-menu,
+.flyout-button + .flyout-menu {
+	opacity: 1;
+	visibility: visible;
+	transform: translateY(0);
+}
+</style>
diff --git a/example/src/sites/doc/components/Nav.vue b/example/src/sites/doc/components/Nav.vue
index 15df02e3..d60ed8d5 100644
--- a/example/src/sites/doc/components/Nav.vue
+++ b/example/src/sites/doc/components/Nav.vue
@@ -1,48 +1,142 @@
 <template>
-	<div class="doc-nav" :class="{ fixed: fixed }">
-		<ol v-for="_nav in nav" :key="_nav">
-			<li>{{ isZhLang ? _nav.name : _nav.enName }}</li>
+	<div v-if="isShowSideBar()" class="doc-nav" :class="{ 'fixed-class': fixed }">
+		<!-- Doc‘s Switch -->
+		<div class="sticky-nav">
+			<nav v-if="isShow()">
+				<div
+					:class="curKey === item.key ? 'sticky-nav-active' : ''"
+					:key="item.key"
+					v-for="item in tabs"
+					@click="handleTabs(item.key)"
+				>
+					{{ item.text }}
+				</div>
+			</nav>
+		</div>
+		<div v-if="isShow()" class="sticky-nav-shadow"></div>
+
+		<!-- Docs' nav -->
+		<ol class="side-bar" v-if="isGuideNav">
 			<ul>
-				<template
+				<li
 					:class="{ active: isActive(_package.name) }"
-					v-for="_package in reorder(_nav.packages)"
+					v-for="_package in docs.packages"
 					:key="_package"
+					v-show="_package.show"
 				>
-					<li v-if="_package.show">
-						<router-link
-							:to="
-								docMd === 'vue'
-									? _package.name.toLowerCase()
-									: `${_package.name.toLowerCase()}-react`
-							"
-							:class="{ active: isActive(_package.name) }"
-						>
-							{{ _package.name }}&nbsp;&nbsp;<b v-if="isZhLang">{{
-								_package.cName
-							}}</b>
-						</router-link>
-					</li>
-				</template>
+					<router-link :to="_package.name.toLowerCase()">
+						{{ isZhLang ? _package.cName : _package.name }}
+					</router-link>
+				</li>
 			</ul>
 		</ol>
+
+		<!-- Components' nav -->
+		<template v-else>
+			<ol class="side-bar" v-for="_nav in nav" :key="_nav">
+				<li>{{ isZhLang ? _nav.name : _nav.enName }}</li>
+				<ul>
+					<template
+						:class="{ active: isActive(_package.name) }"
+						v-for="_package in reorder(_nav.packages)"
+						:key="_package"
+					>
+						<li v-if="_package.show">
+							<router-link
+								:to="
+									docMd === 'vue'
+										? _package.name.toLowerCase()
+										: `${_package.name.toLowerCase()}-react`
+								"
+								:class="{ active: isActive(_package.name) }"
+							>
+								{{ _package.name }}&nbsp;&nbsp;<b v-if="isZhLang">{{
+									_package.cName
+								}}</b>
+							</router-link>
+						</li>
+					</template>
+				</ul>
+			</ol>
+		</template>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive, computed, onMounted, toRefs } from "vue";
-import { onBeforeRouteUpdate, useRoute } from "vue-router";
+import { onBeforeRouteUpdate, useRouter, useRoute } from "vue-router";
 import { RefData } from "@/sites/assets/util/ref";
 import { nav } from "@/config.json";
 
+const docs = {
+	name: "指南",
+	enName: "Essentials",
+	packages: [
+		{
+			name: "Introduction",
+			cName: "介绍",
+			show: true,
+		},
+		{
+			name: "QuickStart",
+			cName: "快速上手",
+			show: true,
+		},
+		{
+			name: "InternationalAndTheme",
+			cName: "国际化/主题",
+			show: true,
+		},
+		{
+			name: "Notice",
+			cName: "常见问题",
+			show: true,
+		},
+		{
+			name: "CHANGELOG",
+			cName: "更新日志",
+			show: true,
+		},
+	],
+};
+
 export default defineComponent({
 	name: "DocNav",
+	props: {
+		fixed: Boolean,
+	},
 	setup() {
 		const route = useRoute();
+		const router = useRouter();
 		const state = reactive({
-			fixed: false,
+			// fixed: false,
 			isGuideNav: false,
 		});
 
+		const docMd = localStorage.getItem("docMd");
+		const data = reactive({
+			demoUrl: "demo.html",
+			curKey: docMd,
+			tabs: [
+				{
+					key: "vue",
+					text: "vue",
+				},
+				{
+					key: "react",
+					text: "react",
+				},
+			],
+		});
+
+		const isShow = () => {
+			return !route.path.includes("guide");
+		};
+
+		const isShowSideBar = () => {
+			return !route.path.includes("pages");
+		};
+
 		const isActive = computed(() => {
 			return function (name: string) {
 				const currentValue = RefData.getInstance().currentRoute.value;
@@ -51,6 +145,25 @@ export default defineComponent({
 			};
 		});
 
+		const watchDocMd = (curKey: string) => {
+			const path = route.path;
+			if (curKey.includes("react")) {
+				router.replace(`${path}-react`);
+			} else {
+				router.replace(path.substr(0, path.length - 6));
+			}
+			setTimeout(() => {
+				window.location.reload();
+			}, 500);
+		};
+
+		const handleTabs = (curKey: string) => {
+			if (curKey === data.curKey) return;
+			data.curKey = curKey;
+			localStorage.setItem("docMd", curKey);
+			watchDocMd(curKey);
+		};
+
 		const reorder = (packages: any) => {
 			return packages.sort(function (x: any, y: any) {
 				return x["name"].localeCompare(y["name"]);
@@ -58,145 +171,142 @@ export default defineComponent({
 		};
 
 		onMounted(() => {
-			if (route.name) getIsGuaid(route.path);
-
-			document.addEventListener("scroll", scrollNav);
+			if (route.path) getIsGuaid(route.path);
 		});
 
-		const scrollNav = () => {
-			let top = document.documentElement.scrollTop;
-			if (top > 64) {
-				state.fixed = true;
-			} else {
-				state.fixed = false;
-			}
-		};
-
-		const getIsGuaid = (name: any) => {
-			state.isGuideNav = name.indexOf("guide") > -1 ? true : false;
+		const getIsGuaid = (path: string) => {
+			state.isGuideNav = path.indexOf("guide") > -1;
 		};
 
 		onBeforeRouteUpdate((to: any) => {
-			let name: any = "";
-			if (to) {
-				name = to.path;
-			} else {
-				name = route.path;
-			}
-			getIsGuaid(name);
+			getIsGuaid(to.path);
 		});
 
-		const isZhLang =
-			localStorage.getItem("language") === "zh-CN" ? true : false;
-
 		return {
+			...toRefs(data),
 			...toRefs(state),
-			isZhLang,
+			isZhLang: localStorage.getItem("language") === "zh-CN",
 			isActive,
 			docMd: localStorage.getItem("docMd"),
 			nav: reactive(nav),
-			currentRoute: RefData.getInstance().currentRoute,
+			docs: reactive(docs),
 			reorder,
+			isShow,
+			isShowSideBar,
+			handleTabs,
 		};
 	},
 });
 </script>
 
 <style lang="scss">
-.doc {
-	&-nav {
-		position: absolute;
-		top: 68px;
-		left: 0;
-		bottom: 0;
-		z-index: 1;
-		width: 290px;
-		border-right: 1px solid #eee;
-		overflow: auto;
-		padding-left: 35px;
-		padding-top: 35px;
-		&.fixed {
-			position: fixed;
-			top: 0;
-			padding-top: 15px;
-		}
-		ol {
-			margin-bottom: 20px;
+.doc-nav {
+	bottom: 0px;
+	left: 0px;
+	z-index: 10;
+	width: 260px;
+	position: fixed;
+	top: 75px;
+	overflow: auto;
+	transition: all 150ms;
 
-			&.introduce {
-				padding-left: 5px;
+	&.fixed-class {
+		top: 0;
+	}
+	ol {
+		margin-bottom: 20px;
+		padding-left: 32px;
 
-				li {
-					cursor: pointer;
+		li {
+			font-size: 14px;
+			font-weight: bold;
+			position: relative;
 
-					&:hover {
-						color: #0088ff;
-					}
+			&.active {
+				&::before {
+					position: absolute;
+					content: "";
+					left: 0;
+					top: 50%;
+					width: 22px;
+					margin-top: -5px;
+					height: 10px;
+					transform: rotate(90deg);
 				}
 			}
+		}
+
+		> ul {
+			padding-left: 26px;
 
 			li {
-				font-size: 14px;
-				color: var(--themeDark, #333);
-				font-weight: bold;
-				position: relative;
-
-				&.active {
-					&::before {
-						position: absolute;
-						content: "";
-						left: 0;
-						top: 50%;
-						width: 22px;
-						margin-top: -5px;
-						height: 10px;
-						transform: rotate(90deg);
+				/* padding-left: 29px; */
+				cursor: pointer;
+
+				&:hover {
+					a {
+						color: #646cff;
 					}
 				}
-			}
 
-			> ul {
-				li {
-					padding-left: 29px;
-					cursor: pointer;
+				a {
+					height: 48px;
+					line-height: 48px;
+					display: flex;
 
-					&:hover {
-						a {
-							color: #0088ff;
-						}
+					&.router-link-active,
+					&.active {
+						color: #646cff;
 					}
 
-					a {
-						height: 48px;
-						line-height: 48px;
-						display: flex;
-
-						&.router-link-active,
-						&.active {
-							color: #0088ff !important;
-						}
-
-						&:hover {
-							color: #0088ff;
-
-							&:visited {
-								color: #0088ff;
-							}
-						}
-
-						&:link,
-						&:visited {
-							color: var(--themeDark, #333);
-						}
-
-						b {
-							font-weight: normal;
-							font-size: 12px;
-						}
+					b {
+						font-weight: normal;
+						font-size: 12px;
 					}
 				}
 			}
 		}
 	}
 }
+
+.sticky-nav {
+	padding-top: 1rem;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	z-index: 1;
+	top: 0px;
+	position: sticky;
+	nav {
+		padding-left: 0.25rem;
+		padding-right: 0.25rem;
+		border-radius: 0.25rem;
+		justify-content: space-between;
+		align-items: center;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		height: 40px;
+		display: grid;
+		> div {
+			line-height: 2rem;
+			font-size: 1rem;
+			text-align: center;
+			padding-left: 10px;
+			padding-right: 10px;
+			border-radius: 0.25rem;
+			cursor: pointer;
+			position: relative;
+		}
+		.sticky-nav-active {
+			color: var(--brand-color);
+		}
+	}
+}
+
+.sticky-nav-shadow {
+	padding-left: 2rem;
+	padding-right: 2rem;
+	top: 56px;
+	height: 2rem;
+	z-index: 1;
+	position: sticky;
+}
 </style>
diff --git a/example/src/sites/doc/components/Tips.vue b/example/src/sites/doc/components/Tips.vue
new file mode 100644
index 00000000..9071618e
--- /dev/null
+++ b/example/src/sites/doc/components/Tips.vue
@@ -0,0 +1,133 @@
+<template>
+	<div class="doc-tips">
+		<div class="header-logo">
+			<a class="logo-link" href="#" @click="toHome"></a>
+		</div>
+		<div class="header-nav">
+			<a href="https://github.com/hellof2e/quark-design-docs" target="_blank">
+				当前环境：development，代码 PR
+				合并后，文档会自动同步至：https://github.com/hellof2e/quark-design-docs
+			</a>
+		</div>
+		<!-- <div class="header-nav">
+			<a class="switch-lang" @click="switchLang">
+				<img
+					src="https://m.hellobike.com/resource/helloyun/13459/QgPJutNlCZ.png"
+					alt=""
+				/>
+			</a>
+		</div> -->
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, computed, onMounted } from "vue";
+import { nav } from "@/config.json";
+import { version } from "/package.json";
+import { RefData } from "@/sites/assets/util/ref";
+
+export default defineComponent({
+	name: "doc-tips",
+	components: {},
+	setup() {
+		let packages = [] as any[];
+		nav.forEach((item) => {
+			packages.push(...item.packages);
+		});
+		const data = reactive({
+			verson: "1.x",
+			navIndex: 0,
+			activeIndex: 0,
+			isShowSelect: false,
+		});
+		const handleFocus = () => {
+			console.log(1);
+		};
+		const handleFocusOut = () => {
+			data.isShowSelect = false;
+		};
+
+		const toHome = () => {
+			RefData.getInstance().currentRoute.value = "/";
+		};
+
+		const isActive = computed(() => {
+			let value = RefData.getInstance().currentRoute.value;
+			return function (name: string) {
+				const lName = name.toLowerCase();
+				if (lName !== "component") {
+					return value === lName || lName.includes(value);
+				}
+			};
+		});
+
+		const switchLang = () => {
+			let href = "";
+
+			if (localStorage.getItem("language") === "en-US") {
+				// 英文
+				localStorage.setItem("language", "zh-CN");
+				href = location.href.replace("en-US", "zh-CN");
+			} else {
+				localStorage.setItem("language", "en-US"); // 中文
+				href = location.href.replace("zh-CN", "en-US");
+			}
+			location.href = href;
+			window.location.reload();
+		};
+
+		return {
+			version,
+			data,
+			toHome,
+			isActive,
+			handleFocus,
+			handleFocusOut,
+			switchLang,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.doc-tips {
+	background: #000;
+	color: #fff;
+	position: fixed;
+	z-index: 99;
+	width: 100%;
+
+	&-logo {
+		position: relative;
+		display: flex;
+		align-content: center;
+		width: 120px;
+		height: 64px;
+
+		.logo-link {
+			width: 100px;
+			background: url("../../assets/images/quark-logo.png") no-repeat center;
+			background-size: 40px;
+		}
+
+		.logo-border {
+			width: 1px;
+			height: 26px;
+			background: #ddd;
+			margin: 20px 10px 0;
+		}
+
+		.version {
+			font-size: 14px;
+		}
+	}
+}
+
+.header-nav {
+	display: flex;
+	justify-content: center;
+	a {
+		color: #fff;
+		padding: 10px;
+	}
+}
+</style>
diff --git a/example/src/sites/doc/main.ts b/example/src/sites/doc/main.ts
index f327a2cd..bdaf8483 100644
--- a/example/src/sites/doc/main.ts
+++ b/example/src/sites/doc/main.ts
@@ -3,6 +3,8 @@ import App from "./App.vue";
 import router from "./router";
 import "@/sites/assets/styles/reset.scss";
 import "@/sites/assets/styles/md-style.scss";
+import "@/sites/assets/styles/theme.scss";
+
 import { isMobile } from "@/sites/assets/util";
 
 if (isMobile) {
diff --git a/example/src/sites/doc/views/Index.vue b/example/src/sites/doc/views/Index.vue
index f7e39442..2e3c75c4 100644
--- a/example/src/sites/doc/views/Index.vue
+++ b/example/src/sites/doc/views/Index.vue
@@ -3,22 +3,11 @@
 
 	<doc-nav></doc-nav>
 
-	<div id="doc-content" class="doc-content">
+	<div id="doc-content" class="doc-content pr-390">
 		<div
 			class="doc-content-document"
 			:class="{ isComponent: isShow(), full: !isShow() }"
 		>
-			<div class="doc-content-tabs" v-if="isShow()">
-				<div
-					class="tab-item"
-					:class="{ cur: curKey === item.key }"
-					v-for="item in tabs"
-					:key="item.key"
-					@click="handleTabs(item.key)"
-				>
-					{{ item.text }}
-				</div>
-			</div>
 			<router-view />
 		</div>
 
@@ -181,6 +170,16 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
+/* .doc-content {
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+	margin-left: 260px;
+} */
+.pr-390 {
+	padding-right: 390px;
+}
+
 .doc {
 	&-content {
 		height: calc(100vh - 68px);