菜单

应用程序

相关源文件

本文档概述了 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 - 主要文档站点

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.tsxallDocs (来自 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 - 下一代站点

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/wwwapps/v4
主要目的生产文档站点功能开发与测试
内容系统Contentlayer + MDX 文件Fumadocs 源系统
组件注册表构建并提供注册表消费并测试新组件
导航传统文档导航具有可折叠部分的先进侧边栏
主题化标准主题切换高级主题管理与缩放

端口配置与开发

开发过程中两个应用程序同时运行。

  • apps/wwwlocalhost:3333 - 主要文档和组件展示
  • apps/v4localhost: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