本文档概述了 shadcn/ui 单仓库中的两个主要 Next.js 应用程序:apps/www(主要的文档站点)和 apps/v4(下一代站点)。有关整体单仓库结构的信息,请参阅 单仓库结构。有关为两个应用程序提供支持的组件注册表系统详细信息,请参阅 组件注册表系统。
shadcn/ui 项目维护着两个并行的 Next.js 应用程序,它们在生态系统中扮演着不同的角色。
来源: apps/www/app/(app)/page.tsx1-99 apps/v4/app/layout.tsx1-104
apps/www 应用程序是 shadcn/ui 的主要文档和组件展示。它运行在端口 3333 上,并提供了浏览组件、阅读文档和访问示例的主要用户界面。
来源: apps/www/app/(app)/page.tsx44-98 apps/www/components/site-header.tsx11-45 apps/www/app/(app)/docs/[[...slug]]/page.tsx:84-154
| 功能 | 实现 | 目的 |
|---|---|---|
| 动态文档 | [[...slug]]/page.tsx 与 allDocs (来自 contentlayer) | 通过自动路由提供 MDX 内容 |
| 组件注册表 | build-registry.mts 构建到 public/r/ | 为 CLI 提供 JSON 元数据 |
| 实时示例 | examples/ 路由,带有组件预览 | 交互式组件演示 |
| 搜索 | CommandMenu,支持组件和文档搜索 | 快速导航和发现 |
| 移动导航 | MobileNav,带有抽屉式导航 | 响应式移动体验 |
来源: apps/www/app/(app)/docs/[[...slug]]/page.tsx:24-33, apps/www/components/mobile-nav.tsx17-104
www 应用程序使用全面的 CSS 变量系统进行主题化
来源: apps/www/styles/globals.css1-156
apps/v4 应用程序是 shadcn/ui 文档平台的进化。它运行在端口 4000 上,并引入了布局切换、增强的图表组件以及更复杂的them系统等高级功能。
来源: apps/v4/app/layout.tsx61-104 apps/v4/components/site-header.tsx17-60 apps/v4/components/docs-sidebar.tsx18-63
| 功能 | 组件 | 实现 |
|---|---|---|
| 布局切换 | SiteConfig | 在固定宽度和全宽布局之间切换 |
| 高级主题 | ActiveThemeProvider | 动态主题类管理和缩放 |
| 增强侧边栏 | DocsSidebar | 可折叠侧边栏,集成 Fumadocs |
| 图表组件 | ChartsNav | 图表库专用导航 |
| Meta Color 管理 | useMetaColor | 动态 theme-color meta 标签更新 |
来源: apps/v4/components/site-config.tsx11-33 apps/v4/components/active-theme.tsx20-48 apps/v4/app/(app)/charts/layout.tsx44-75
来源: apps/www/content/docs/index.mdx1-78 apps/v4/lib/source.ts apps/v4/components/active-theme.tsx27-41
两个应用程序共享通用的开发模式,但服务于不同的目的。
| 方面 | apps/www | apps/v4 |
|---|---|---|
| 主要目的 | 生产文档站点 | 功能开发与测试 |
| 内容系统 | Contentlayer + MDX 文件 | Fumadocs 源系统 |
| 组件注册表 | 构建并提供注册表 | 消费并测试新组件 |
| 导航 | 传统文档导航 | 具有可折叠部分的先进侧边栏 |
| 主题化 | 标准主题切换 | 高级主题管理与缩放 |
开发过程中两个应用程序同时运行。
localhost:3333 - 主要文档和组件展示localhost:4000 - 下一代功能和图表库来源: apps/www/app/(app)/page.tsx16-18 apps/v4/app/(app)/charts/layout.tsx16-18
来源: apps/www/app/(app)/page.tsx20-42 apps/v4/app/layout.tsx15-59