mirror of
https://github.com/labring/FastGPT.git
synced 2026-02-28 01:02:28 +08:00
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>
This commit is contained in:
@@ -71,7 +71,7 @@ const CustomFolder: FC<{ item: PageTree.Folder; level: number; children: ReactNo
|
||||
};
|
||||
|
||||
const CustomSeparator: FC<{ item: PageTree.Separator }> = ({ item }) => (
|
||||
<div className="text-sm font-semibold px-2 py-2 mt-4 mb-2">{item.name}</div>
|
||||
<div className="text-sm font-semibold px-2 py-1.5 mt-1 mb-1 first:mt-0">{item.name}</div>
|
||||
);
|
||||
|
||||
export const CustomSidebarComponents: SidebarComponents = {
|
||||
|
||||
33
document/components/sidebarKeepOpen.tsx
Normal file
33
document/components/sidebarKeepOpen.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
'use client';
|
||||
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useRef } from 'react';
|
||||
import { useSidebar } from 'fumadocs-ui/provider';
|
||||
|
||||
/**
|
||||
* 移动端:点击一级 tab 切换时不关闭 sidebar,点击二级路由时正常关闭。
|
||||
*
|
||||
* 在渲染阶段检测是否为 tab 间切换,是则设 closeOnRedirect = false。
|
||||
*/
|
||||
export function SidebarKeepOpen({ tabUrls }: { tabUrls: string[] }) {
|
||||
const pathname = usePathname();
|
||||
const prevPathname = useRef(pathname);
|
||||
const { closeOnRedirect } = useSidebar();
|
||||
|
||||
if (prevPathname.current !== pathname) {
|
||||
const prev = prevPathname.current;
|
||||
prevPathname.current = pathname;
|
||||
|
||||
// 判断是否是 tab 间切换(从一个 tab 根路径跳到另一个 tab 根路径)
|
||||
const prevTab = tabUrls.find((url) => prev.startsWith(url));
|
||||
const currTab = tabUrls.find((url) => pathname.startsWith(url));
|
||||
|
||||
if (prevTab && currTab && prevTab !== currTab) {
|
||||
// 一级 tab 切换 → 不关闭 sidebar
|
||||
closeOnRedirect.current = false;
|
||||
}
|
||||
// 否则(二级路由跳转)→ 保持默认行为(关闭 sidebar)
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user