目录结构

├── package.json                  # 脚本与依赖
├── scripts/
│   └── new-doc.mjs               # 新建文档页脚手架（npm run new:doc）
└── docs/
    ├── index.md                  # 首页（hero + features）
    ├── demo.md                   # Naive UI 综合示例
    ├── guide/                    # 入门指南
    │   ├── getting-started.md    # 快速开始
    │   └── structure.md          # 目录结构（本页）
    ├── examples/                 # Naive UI 组件示例
    │   ├── button.md             # 按钮
    │   ├── tag.md                # 标签与徽标
    │   ├── input.md              # 输入控件
    │   ├── select.md             # 选择与日期
    │   ├── table.md              # 表格
    │   ├── disclosure.md         # 折叠面板与选项卡
    │   └── demos/                # 示例页的 demo 组件（按页面名建子目录）
    ├── components/
    │   ├── DemoBlock.vue         # 示例容器：实时效果 + 可折叠源码
    │   └── NaiveDemo.vue         # demo.md 使用的综合示例组件
    └── .vitepress/
        ├── config.mts            # 站点配置（导航、侧边栏、搜索）
        └── theme/
            └── index.ts          # 自定义主题：naive-ui + SSR 样式收集

关键文件说明

• docs/.vitepress/theme/index.ts — 集成核心：app.use(naive) 注册全部组件；NConfigProvider（abstract + inlineThemeDisabled）包裹默认 Layout；SSR 下通过 @css-render/vue3-ssr 的 setup(app) 收集样式并内联。
• docs/.vitepress/config.mts — themeConfig.sidebar 维护侧边栏层级；新增页面后记得在这里登记。

新增一个页面

1. 运行 npm run new:doc -- examples/xxx 标题，自动创建 md 模板并在侧边栏登记。
2. 示例代码写到 docs/examples/demos/xxx/ 下的独立 .vue 文件（<script setup> + 显式 import naive-ui 组件）。
3. md 中用 <DemoBlock src="xxx/basic" /> 引用 demo，页面自动展示实时效果与可折叠源码。

VS Code 用户可输入 demo、tip、codegroup 等前缀触发 .vscode/markdown.code-snippets 中的片段。