现代仪表盘模板
一个使用Next.js 15、Shadcn UI和Tailwind CSS构建的美观且响应迅速的仪表板模板。该模板具备可折叠侧边栏、暗色模式支持、交互式图表以及全面的仪表板页面。
✨ 特点
- 🎨（彩笔/绘画） 现代用户界面（Modern UI）使用Shadcn UI组件和Tailwind CSS构建
- 🌙 月亮（或表示夜晚的符号） 暗黑模式完全支持深色/浅色模式，并提供主题切换功能
- 📱 响应式的以移动设备为先的设计，适用于所有设备
- 🎯（目标） 交互式图表使用Recharts打造美观的数据可视化
- 🔧（扳手或修理工具的符号，无具体文字含义，可理解为“修理”或“工具”等意象） TypeScript在整个应用程序中实现完全的类型安全
- ⚡（闪电符号，常用于表示速度、活力、电击或快速充电等） Next.js 15最新功能包括App Router和React 19
- 🎭 表情符号：小丑脸（或戏剧面具） 可折叠侧边栏高效节省空间的导航，带有工具提示
- 📊 表格/数据图表 仪表盘页面多个预建页面（分析、日历、消息、报告、趋势、用户）
- 🛡️ 翻译为中文是“护盾”或“防御”。这个符号通常用来表示保护、防御或防护的意思。 安全内置的安全工具和内容安全策略（CSP）配置
- ⚡ 闪电符号（在中文语境中，此符号常被用作表情符号或表示快速、能量等含义，直接翻译为文字可能无法完全传达其语境意义，因此在此保留原符号形式） 演出性能监控和优化工具
- 🚨（紧急/警告信号） 错误处理全面错误边界实现
- 📈 表示“上升趋势”或“图表上升”，常用于描述数据、价格或数值的增加情况。 实时更新实时仪表盘，带有实时状态指示器
🚀 技术栈
- 框架Next.js 15（App Router）
- 运行时React 19
- 造型设计Tailwind CSS v4
- 用户界面组件使用 Radix UI 原生组件的 Shadcn UI
- 图表Recharts
- 图标清醒反应（或：明智应对）
- 类型系统TypeScript 5
- 主题Next主题（或：下一代主题）
- 发展用于快速开发的Turbopack
- Linting（代码检查）带有Next.js配置的ESLint
- 动画Tailwind CSS 动画
🏃♂️ 开始行动
首先，安装依赖项：
npm install
# or
yarn install
# or
pnpm install然后，运行开发服务器：
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev开放 http://localhost:3000 翻译为中文是：“本地主机：3000” 或者更常见的表述是 “本地开发服务器：3000 端口” 使用您的浏览器查看仪表板。
🛠️ 可用脚本
该项目包含几个有用的npm脚本：
npm run dev # Start development server with Turbopack
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run lint:fix # Run ESLint with auto-fix
npm run type-check # Run TypeScript type checking
npm run build:analyze # Build with bundle analysis
npm run test # Run tests (placeholder)
npm run clean # Clean build directories
npm run precommit # Run linting and type checking🎨 定制化
添加新组件
这个模板使用了Shadcn UI。要添加新组件：
npx shadcn@latest add [component-name]主题设定/主题设计
主题系统配置在：
src/app/globals.css- 用于颜色的CSS变量tailwind.config.ts- Tailwind 配置src/components/theme-provider.tsx- 主题上下文
图表
图表是使用Recharts构建的。您可以在……中找到示例 src/components/charts.tsx:
- 折线图（为性能考虑进行了记忆化存储）
- 条形图（为提高性能已进行记忆化处理）
- 饼状图（为性能优化而进行了记忆化存储）
仪表盘页面
该模板包含多个预构建的仪表板页面：
- 主仪表盘 (
/- 概述，包含统计数据、图表和最新活动 - 分析（或“数据分析”） (
/analytics- 数据分析与见解 - 日历 (
/calendar) - 日历和日程安排界面 - 信息 (
/messages) - 消息传递和通信 - 报告 (
/reports) - 报告与数据导出 - 趋势 (
/trends) - 趋势分析与预测 - 用户 (
/users) - 用户管理和配置文件
性能与安全
该模板包含内置的以下实用工具：
- 性能监控 (
src/lib/performance.ts) - 网站核心性能指标跟踪与优化 - 安全 （
src/lib/security.ts) - 内容安全策略（CSP）配置和安全工具 - 错误处理 (
src/components/error-boundary.tsx- 全面的错误边界
开发质量
- 类型安全全面的TypeScript支持，配备严格配置
- 代码质量使用Next.js最佳实践的ESLint配置
- 演出记忆化组件和优化渲染
- 无障碍性Radix UI 原生组件确保符合 ARIA 标准
- 开发速度用于闪电般快速开发构建的Turbopack
- 捆绑分析内置的包分析器，提供优化见解
📁 项目结构
src/
├── app/
│ ├── globals.css # Global styles and theme variables
│ ├── layout.tsx # Root layout with theme provider
│ ├── page.tsx # Main dashboard page
│ ├── page-backup.tsx # Backup dashboard page variant
│ ├── page-new.tsx # Alternative dashboard page variant
│ ├── favicon.ico # Application favicon
│ ├── analytics/
│ │ └── page.tsx # Analytics dashboard page
│ ├── calendar/
│ │ └── page.tsx # Calendar dashboard page
│ ├── messages/
│ │ └── page.tsx # Messages dashboard page
│ ├── reports/
│ │ └── page.tsx # Reports dashboard page
│ ├── trends/
│ │ └── page.tsx # Trends dashboard page
│ └── users/
│ └── page.tsx # Users management page
├── components/
│ ├── ui/ # Shadcn UI components
│ │ ├── avatar.tsx # Avatar component
│ │ ├── badge.tsx # Badge component
│ │ ├── button.tsx # Button component
│ │ ├── card.tsx # Card component
│ │ ├── separator.tsx # Separator component
│ │ ├── sidebar.tsx # Sidebar component
│ │ ├── sidebar-new.tsx # Alternative sidebar variant
│ │ └── tooltip.tsx # Tooltip component
│ ├── charts.tsx # Chart components (Line, Bar, Pie)
│ ├── dashboard-layout.tsx # Main layout with sidebar
│ ├── error-boundary.tsx # Error boundary implementation
│ ├── header.tsx # Dashboard header
│ ├── theme-provider.tsx # Theme context provider
│ └── theme-toggle.tsx # Dark mode toggle
├── lib/
│ ├── utils.ts # Utility functions
│ ├── constants.ts # Application constants and data
│ ├── performance.ts # Performance monitoring utilities
│ └── security.ts # Security utilities and CSP config
└── public/
├── file.svg # SVG icons
├── globe.svg
├── next.svg
├── vercel.svg
└── window.svg🚀 部署
在Vercel上部署
部署您的Next.js应用最简单的方法是使用 Vercel 平台：
- 将你的代码推送到Git仓库
- 将您的仓库导入到Vercel
- Vercel 将自动构建并部署您的应用程序
其他部署选项
这个Next.js应用程序可以部署在任何支持Node.js的平台上：
- Netlify
- AWS Amplify
- DigitalOcean 应用平台
- 铁路
- 渲染
📚 了解更多
要了解更多所使用的技术信息：
- Next.js 文档 了解Next.js的功能和API
- Shadcn UI - 可重用组件库
- Tailwind CSS - 实用性优先的CSS框架
- Recharts（注：这是一个专有名词，通常指一个用于在React中创建可交互图表的库，直接翻译为“React图表库”或保持原名以体现其专有性） - 可组合的图表库
- Lucide React（注：此处“Lucide”可能是一个特定品牌、项目或技术的名称，在中文中没有直接对应的翻译，因此保留原样；“React”通常翻译为“反应”或在此上下文中可能指一种快速响应的技术或系统，但具体翻译需根据上下文确定） - 精美的图标库
🤝 贡献（或“参与贡献”）
欢迎贡献！请随时提交拉取请求。
📄 许可证
这个项目是开源的，可在以下（许可/条件下）获取： 麻省理工学院许可证。