OpenIsle/docs/app/(home)/layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import { CodeXmlIcon, CompassIcon, ServerIcon } from 'lucide-react';

function TabIcon({
  color = 'var(--color-fd-foreground)',
  children,
}: {
  color?: string;
  children: React.ReactNode;
}) {
  return (
    <div
      className="[&_svg]:size-full rounded-lg size-full text-(--tab-color) max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5"
      style={
        {
          '--tab-color': color,
        } as React.CSSProperties
      }
    >
      {children}
    </div>
  );
}

function TabTitle({ children }: { children: React.ReactNode }) {
  return <span className="text-[11px]">{children}</span>;
}

export default function Layout({ children }: LayoutProps<'/'>) {
  return (
    // @ts-ignore
    <DocsLayout
      tree={source.pageTree}
      sidebar={{
        defaultOpenLevel: 1,
        prefetch: true,
        tabs: [
          {
            title: 'OpenIsle 前端',
            description: <TabTitle>前端开发文档</TabTitle>,
            url: '/frontend',
            icon: (
              <TabIcon color="#4ca154">
                <CompassIcon />
              </TabIcon>
            ),
          },
          {
            title: 'OpenIsle 后端',
            description: <TabTitle>后端开发文档</TabTitle>,
            url: '/backend',
            icon: (
              <TabIcon color="#1f66f4">
                <ServerIcon />
              </TabIcon>
            ),
          },
          {
            title: 'OpenIsle API',
            description: <TabTitle>后端 API 文档</TabTitle>,
            url: '/openapi',
            icon: (
              <TabIcon color="#677489">
                <CodeXmlIcon />
              </TabIcon>
            ),
          },
        ],
      }}
      {...baseOptions()}
    >
      {children}
    </DocsLayout>
  );
}