fix(document): improve mobile sidebar style and UX (#6464)

* fix(document): improve mobile sidebar style and UX

- Add icons to 6 navigation tabs (BookOpen, Code, Lightbulb, CircleHelp, Scale, History)
- Reduce mobile sidebar padding and separator spacing
- Fix icon container size in RootToggle dropdown (36px → 20px)
- Keep sidebar open when switching between top-level tabs
- Remove top gradient mask on mobile sidebar viewport
- Fix long URL overflow in article content on mobile
- Fix TOC popover trigger text overflow on mobile

* docs: 中国大陆 → 中国大陆版

* docs: 海外版→国际版, 国内版→中国大陆版

---------

Co-authored-by: archer <archer@archerdeMac-mini.local>

document/app/[lang]/docs/layout.tsx

@@ -7,10 +7,12 @@ import LogoLight from '@/components/docs/logo';
 import LogoDark from '@/components/docs/logoDark';
 import '@/app/global.css';
 import { CustomSidebarComponents } from '@/components/sideBar';
+import { SidebarKeepOpen } from '@/components/sidebarKeepOpen';
 import FeishuLogoLight from '@/components/docs/feishuLogoLIght';
 import FeishuLogoDark from '@/components/docs/feishuLogoDark';
 import GithubLogoLight from '@/components/docs/githubLogoLight';
 import GithubLogoDark from '@/components/docs/githubLogoDark';
+import { BookOpen, Code, Lightbulb, CircleHelp, Scale, History } from 'lucide-react';
 
 export default async function Layout({
   params,
@@ -21,33 +23,42 @@ export default async function Layout({
 }) {
   const { lang } = await params;
 
+  const iconClass = 'size-4';
   const tab = [
     {
+      icon: <BookOpen className={iconClass} />,
       title: t('common:introduction', lang),
       url: lang === 'zh-CN' ? '/docs/introduction' : '/en/docs/introduction'
     },
     {
+      icon: <Code className={iconClass} />,
       title: t('common:api_reference', lang),
       url: lang === 'zh-CN' ? '/docs/openapi' : '/en/docs/openapi'
     },
     {
+      icon: <Lightbulb className={iconClass} />,
       title: t('common:use-cases', lang),
       url: lang === 'zh-CN' ? '/docs/use-cases' : '/en/docs/use-cases'
     },
     {
+      icon: <CircleHelp className={iconClass} />,
       title: t('common:faq', lang),
       url: lang === 'zh-CN' ? '/docs/faq' : '/en/docs/faq'
     },
     {
+      icon: <Scale className={iconClass} />,
       title: t('common:protocol', lang),
       url: lang === 'zh-CN' ? '/docs/protocol' : '/en/docs/protocol'
     },
     {
+      icon: <History className={iconClass} />,
       title: t('common:upgrading', lang),
       url: lang === 'zh-CN' ? '/docs/upgrading' : '/en/docs/upgrading'
     }
   ];
 
+  const tabUrls = tab.map((t) => t.url);
+
   return (
     <DocsLayout
       {...baseOptions(lang)}
@@ -107,6 +118,7 @@ export default async function Layout({
       }}
       tabMode="navbar"
     >
+      <SidebarKeepOpen tabUrls={tabUrls} />
       {children}
     </DocsLayout>
   );

document/app/global.css

@@ -475,3 +475,65 @@ button[role='tab'] {
   padding-top: 16px;
   padding-bottom: 16px;
 }
+
+/* 移动端侧边栏 padding 缩小 */
+@media (max-width: 767px) {
+  #nd-sidebar-mobile [data-radix-scroll-area-viewport] {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 0;
+  }
+
+  /* SidebarHeader 底部 padding */
+  #nd-sidebar-mobile > div:first-child {
+    padding-top: 8px;
+    padding-bottom: 22px;
+  }
+
+  /* 去掉 viewport 内部的顶部渐变遮罩 */
+  #nd-sidebar-mobile [data-radix-scroll-area-viewport] > div {
+    mask-image: linear-gradient(transparent, #fff 0px, #fff calc(100% - 12px), transparent) !important;
+    -webkit-mask-image: linear-gradient(transparent, #fff 0px, #fff calc(100% - 12px), transparent) !important;
+  }
+}
+
+/* RootToggle 图标容器：缩小到与图标匹配，修复对齐和间距 */
+#nd-sidebar-mobile .size-9,
+[data-radix-popper-content-wrapper] .size-9 {
+  width: 20px !important;
+  height: 20px !important;
+  flex-shrink: 0;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+/* RootToggle 下拉菜单：增加两侧 padding + 选中项浅蓝背景 */
+[data-radix-popper-content-wrapper] > div {
+  padding: 6px 8px !important;
+}
+
+[data-radix-popper-content-wrapper] a {
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+  border-radius: 8px;
+}
+
+/* 移动端目录下拉框（TOC Popover Trigger）：文本溢出省略号 */
+@media (max-width: 767px) {
+  button[class*="tocnav"] {
+    max-width: 100vw;
+    overflow: hidden;
+  }
+
+  button[class*="tocnav"] > span.grid {
+    overflow: hidden;
+    min-width: 0;
+  }
+
+  /* 文章内超长链接/文本自动换行 */
+  article {
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+}