fix: 修复内容宽度错误，水平管道条异常显示

docs/.vuepress/styles/index.scss

@@ -1,202 +1,134 @@
-///*  此处自定义样式，对主题进行覆盖 */
-//
-//
-//// 首页导航按钮
-//.actions > a {
-//  margin-left: 5px;
-//  margin-right: 5px;
-//}
-//
-//// 隐藏 全文搜索
-//.DocSearch-Logo {
-//  // display:none;不占位隐藏
-//  visibility: hidden; // 占位隐藏
-//}
-//
-//.DocSearch-Button-Keys {
-//  visibility: hidden
-//}
-//
-////  首页title描述
-//.home .hero .description {
-//  max-width: fit-content;
-//}
-//
-//// 搜索框
-//#docsearch-container > button {
-//  border-radius: 5px;
-//}
-//
-//.code-group__nav-tab-active {
-//  color: var(--c-brand)
-//}
-//
-//.open-info-div {
-//  text-align: center;
-//  align-content: center;
-//
-//  a {
-//    margin: 5px;
-//  }
-//}
-//
-//
-//// 全站主题色
-//:root {
-//  // brand colors
-//  // --c-brand: #3eaf7c;
-//  // --c-brand-light: #4abf8a;
-//
-//  --c-brand: #4ce9ad;
-//  --c-brand-light: #42b983;
-//
-//  // background colors
-//  --c-bg: #ffffff;
-//  --c-bg-light: #f3f4f5;
-//  --c-bg-lighter: #eeeeee;
-//  --c-bg-navbar: var(--c-bg);
-//  --c-bg-sidebar: var(--c-bg);
-//  --c-bg-arrow: #cccccc;
-//
-//  // text colors
-//  --c-text: #2c3e50;
-//  --c-text-accent: var(--c-brand);
-//  --c-text-light: #3a5169;
-//  --c-text-lighter: #4e6e8e;
-//  --c-text-lightest: #6a8bad;
-//  --c-text-quote: #999999;
-//
-//  // border colors
-//  --c-border: #eaecef;
-//  --c-border-dark: #dfe2e5;
-//
-//  // custom container colors
-//  --c-tip: #42b983;
-//  --c-tip-bg: var(--c-bg-light);
-//  --c-tip-title: var(--c-text);
-//  --c-tip-text: var(--c-text);
-//  --c-tip-text-accent: var(--c-text-accent);
-//  --c-warning: #e7c000;
-//  --c-warning-bg: #fffae3;
-//  --c-warning-title: #ad9000;
-//  --c-warning-text: #746000;
-//  --c-warning-text-accent: var(--c-text);
-//  --c-danger: #cc0000;
-//  --c-danger-bg: #ffe0e0;
-//  --c-danger-title: #990000;
-//  --c-danger-text: #660000;
-//  --c-danger-text-accent: var(--c-text);
-//  --c-details-bg: #eeeeee;
-//
-//  // badge component colors
-//  --c-badge-tip: var(--c-tip);
-//  --c-badge-warning: var(--c-warning);
-//  --c-badge-danger: var(--c-danger);
-//
-//  // transition vars
-//  --t-color: 0.3s ease;
-//  --t-transform: 0.3s ease;
-//
-//  // code blocks vars
-//  --code-bg-color: #282c34;
-//  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
-//  --code-ln-color: #9e9e9e;
-//  --code-ln-wrapper-width: 3.5rem;
-//
-//  // font vars
-//  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-//  Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-//  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-//
-//  // layout vars
-//  --navbar-height: 3.6rem;
-//  --navbar-padding-v: 0.7rem;
-//  --navbar-padding-h: 1.5rem;
-//  --sidebar-width: 20rem;
-//  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
-//  --content-width: 740px;
-//  --homepage-width: 960px;
-//}
-//
-//// plugin-back-to-top
-//.back-to-top {
-//  --back-to-top-color: var(--c-brand);
-//  --back-to-top-color-hover: var(--c-brand-light);
-//}
-//
-//// plugin-docsearch
-//.DocSearch {
-//  --docsearch-primary-color: var(--c-brand);
-//  --docsearch-text-color: var(--c-text);
-//  --docsearch-highlight-color: var(--c-brand);
-//  --docsearch-muted-color: var(--c-text-quote);
-//  --docsearch-container-background: rgba(9, 10, 17, 0.8);
-//  --docsearch-modal-background: var(--c-bg-light);
-//  --docsearch-searchbox-background: var(--c-bg-lighter);
-//  --docsearch-searchbox-focus-background: var(--c-bg);
-//  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
-//  --docsearch-hit-color: var(--c-text-light);
-//  --docsearch-hit-active-color: var(--c-bg);
-//  --docsearch-hit-background: var(--c-bg);
-//  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
-//  --docsearch-footer-background: var(--c-bg);
-//}
-//
-//// plugin-external-link-icon
-//.external-link-icon {
-//  --external-link-icon-color: var(--c-text-quote);
-//}
-//
-//// plugin-medium-zoom
-//.medium-zoom-overlay {
-//  --medium-zoom-bg-color: var(--c-bg);
-//}
-//
-//// plugin-nprogress
-//#nprogress {
-//  --nprogress-color: var(--c-brand);
-//}
-//
-//// plugin-pwa-popup
-//.pwa-popup {
-//  --pwa-popup-text-color: var(--c-text);
-//  --pwa-popup-bg-color: var(--c-bg);
-//  --pwa-popup-border-color: var(--c-brand);
-//  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
-//  --pwa-popup-btn-text-color: var(--c-bg);
-//  --pwa-popup-btn-bg-color: var(--c-brand);
-//  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
-//}
-//
-//// plugin-search
-//.search-box {
-//  --search-bg-color: var(--c-bg);
-//  --search-accent-color: var(--c-brand);
-//  --search-text-color: var(--c-text);
-//  --search-border-color: var(--c-border);
-//
-//  --search-item-text-color: var(--c-text-lighter);
-//  --search-item-focus-bg-color: var(--c-bg-light);
-//}
-
-// 全局修改侧边栏样式
-.sidebar {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  overflow-y: auto;
-  width: var(--sidebar-width);
-  margin: 0;
-  // 侧边栏始终靠左
-  -webkit-padding-start: calc(var(--sidebar-space) - var(--sidebar-width));
-  padding-inline-start: calc(var(--sidebar-space) - var(--sidebar-width));
-  background: var(--sidebar-bg-color);
-  box-shadow: 2px 0 8px var(--card-shadow);
-  font-size: 15px;
-  transition: background var(--color-transition), box-shadow var(--color-transition), padding var(--transform-transition), transform var(--transform-transition);
-  -webkit-backdrop-filter: saturate(150%) blur(12px);
-  backdrop-filter: saturate(150%) blur(12px);
-  scrollbar-color: var(--theme-color) var(--border-color);
-  scrollbar-width: thin;
-}
+/*  此处自定义样式，对主题进行覆盖 */
+
+// 全站主题色
+:root {
+  // brand colors
+  // --c-brand: #3eaf7c;
+  // --c-brand-light: #4abf8a;
+
+  --c-brand: #4ce9ad;
+  --c-brand-light: #42b983;
+
+  // background colors
+  --c-bg: #ffffff;
+  --c-bg-light: #f3f4f5;
+  --c-bg-lighter: #eeeeee;
+  --c-bg-navbar: var(--c-bg);
+  --c-bg-sidebar: var(--c-bg);
+  --c-bg-arrow: #cccccc;
+
+  // text colors
+  --c-text: #2c3e50;
+  --c-text-accent: var(--c-brand);
+  --c-text-light: #3a5169;
+  --c-text-lighter: #4e6e8e;
+  --c-text-lightest: #6a8bad;
+  --c-text-quote: #999999;
+
+  // border colors
+  --c-border: #eaecef;
+  --c-border-dark: #dfe2e5;
+
+  // custom container colors
+  --c-tip: #42b983;
+  --c-tip-bg: var(--c-bg-light);
+  --c-tip-title: var(--c-text);
+  --c-tip-text: var(--c-text);
+  --c-tip-text-accent: var(--c-text-accent);
+  --c-warning: #e7c000;
+  --c-warning-bg: #fffae3;
+  --c-warning-title: #ad9000;
+  --c-warning-text: #746000;
+  --c-warning-text-accent: var(--c-text);
+  --c-danger: #cc0000;
+  --c-danger-bg: #ffe0e0;
+  --c-danger-title: #990000;
+  --c-danger-text: #660000;
+  --c-danger-text-accent: var(--c-text);
+  --c-details-bg: #eeeeee;
+
+  // badge component colors
+  --c-badge-tip: var(--c-tip);
+  --c-badge-warning: var(--c-warning);
+  --c-badge-danger: var(--c-danger);
+
+  // transition vars
+  --t-color: 0.3s ease;
+  --t-transform: 0.3s ease;
+
+  // code blocks vars
+  --code-bg-color: #282c34;
+  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
+  --code-ln-color: #9e9e9e;
+  --code-ln-wrapper-width: 3.5rem;
+
+  // font vars
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+  Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+
+  // layout vars
+  --navbar-height: 3.6rem;
+  --navbar-padding-v: 0.7rem;
+  --navbar-padding-h: 1.5rem;
+  --sidebar-width: 20rem;
+  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
+  --content-width: 740px;
+  --homepage-width: 960px;
+}
+
+
+// plugin-docsearch
+.DocSearch {
+  --docsearch-primary-color: var(--c-brand);
+  --docsearch-text-color: var(--c-text);
+  --docsearch-highlight-color: var(--c-brand);
+  --docsearch-muted-color: var(--c-text-quote);
+  --docsearch-container-background: rgba(9, 10, 17, 0.8);
+  --docsearch-modal-background: var(--c-bg-light);
+  --docsearch-searchbox-background: var(--c-bg-lighter);
+  --docsearch-searchbox-focus-background: var(--c-bg);
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
+  --docsearch-hit-color: var(--c-text-light);
+  --docsearch-hit-active-color: var(--c-bg);
+  --docsearch-hit-background: var(--c-bg);
+  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
+  --docsearch-footer-background: var(--c-bg);
+}
+
+// plugin-external-link-icon
+.external-link-icon {
+  --external-link-icon-color: var(--c-text-quote);
+}
+
+// plugin-medium-zoom
+.medium-zoom-overlay {
+  --medium-zoom-bg-color: var(--c-bg);
+}
+
+// plugin-nprogress
+#nprogress {
+  --nprogress-color: var(--c-brand);
+}
+
+// plugin-pwa-popup
+.pwa-popup {
+  --pwa-popup-text-color: var(--c-text);
+  --pwa-popup-bg-color: var(--c-bg);
+  --pwa-popup-border-color: var(--c-brand);
+  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
+  --pwa-popup-btn-text-color: var(--c-bg);
+  --pwa-popup-btn-bg-color: var(--c-brand);
+  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
+}
+
+// plugin-search
+.search-box {
+  --search-bg-color: var(--c-bg);
+  --search-accent-color: var(--c-brand);
+  --search-text-color: var(--c-text);
+  --search-border-color: var(--c-border);
+
+  --search-item-text-color: var(--c-text-lighter);
+  --search-item-focus-bg-color: var(--c-bg-light);
+}

docs/.vuepress/styles/palette.scss

@@ -1,6 +1,6 @@
 // 主题色
 $theme-color: #2196f3;
-$sidebar-width: 20rem;
-$sidebar-mobile-width: 16rem;
-$content-width: 75rem;
+//$sidebar-width: 20rem;
+//$sidebar-mobile-width: 16rem;
+//$content-width: 75rem;
 $home-page-width:80rem;