Enterprise Admin Management System

一套基于 Next.js + TypeScript + Redux + Ant Design 的企业级中后台管理系统模板，支持服务端渲染(SSR)。

🚀 特性

• 现代技术栈: Next.js 14 + React 18 + TypeScript + Redux Toolkit + Ant Design 5
• 服务端渲染: 基于 Next.js App Router 的 SSR/SSG 支持
• 主题系统: 支持暗黑/浅色模式切换，自定义主题色
• 国际化: 完整的中英文切换支持，支持 SSR
• 响应式设计: 适配桌面端和移动端
• 性能优化: 代码分割、懒加载、虚拟滚动等
• 企业级功能: 用户管理、权限控制、数据可视化

📦 安装

```bash

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

启动生产服务器

npm run start

代码检查

npm run lint

类型检查

npm run type-check ```

🏗️ 项目结构

``` app/ # Next.js App Router ├── layout.tsx # 根布局 ├── page.tsx # 首页 ├── globals.css # 全局样式 └── favicon.ico # 网站图标

src/ ├── components/ # 公共组件 │ ├── Layout/ # 布局组件 │ ├── LazyImage/ # 懒加载图片 │ ├── VirtualTable/ # 虚拟表格 │ ├── ThemeProvider/ # 主题提供者 │ ├── ClientProviders/ # 客户端提供者 │ └── I18nProvider/ # 国际化提供者 ├── pages/ # 页面组件 │ ├── Dashboard/ # 仪表盘 │ ├── Users/ # 用户管理 │ ├── Settings/ # 系统设置 │ └── Login/ # 登录页面 ├── store/ # Redux 状态管理 │ └── slices/ # Redux 切片 ├── hooks/ # 自定义 Hooks ├── utils/ # 工具函数 ├── i18n/ # 国际化配置 ├── styles/ # 样式文件 │ └── themes/ # 主题样式 └── types/ # TypeScript 类型定义

components/ # shadcn/ui 组件 └── ui/ # UI 组件库 ```

🌐 Next.js 特性

服务端渲染 (SSR)

• App Router: 使用 Next.js 14 的 App Router 架构
• 服务端组件: 默认服务端渲染，提升首屏加载速度
• 客户端组件: 交互组件使用 "use client" 指令
• 混合渲染: SSR + CSR 的最佳实践

性能优化

• 自动代码分割: Next.js 自动按路由分割代码
• 图片优化: 使用 Next.js Image 组件
• 字体优化: 自动字体优化和预加载
• 静态生成: 支持 SSG 静态生成

🎨 主题系统

系统支持完整的主题切换功能，兼容 SSR：

• 暗黑模式: 基于 Vercel 设计风格的专业暗色主题
• 浅色模式: 简洁明亮的浅色主题
• 自定义主题色: 支持动态切换主题色
• CSS 变量: 使用 CSS 自定义属性实现主题切换
• SSR 兼容: 避免主题切换时的闪烁问题

🌍 国际化

完整的中英文国际化支持，兼容 SSR：

• 使用 react-i18next 实现
• 支持动态语言切换
• 完整的翻译文件
• 数字、日期格式化
• SSR 支持: 服务端渲染时正确处理语言

⚡ 性能优化

• Next.js 优化: 自动代码分割、图片优化、字体优化
• 组件懒加载: 按需加载组件
• 虚拟滚动: 大数据列表优化
• 图片懒加载: 交叉观察器实现
• 防抖节流: 搜索和输入优化

🔧 开发工具

• TypeScript: 完整的类型支持
• ESLint: 代码质量检查
• Next.js: 内置 Webpack 5 和优化
• Hot Reload: 开发时热更新
• Fast Refresh: React 组件快速刷新

📱 响应式设计

• 移动端适配
• 断点响应式布局
• 触摸友好的交互
• Next.js 自适应图片

🔐 权限系统

• 基于角色的权限控制
• 路由守卫
• 菜单权限
• 按钮级权限

📊 数据可视化

• Recharts 图表库
• 响应式图表
• 多种图表类型
• 实时数据更新

🚀 部署

Vercel 部署 (推荐)

```bash

安装 Vercel CLI

npm i -g vercel

部署到 Vercel

vercel ```

其他平台部署

```bash

构建生产版本

npm run build

启动生产服务器

npm run start ```

🔧 环境变量

创建 .env.local 文件：

```env

应用配置

NEXT_PUBLIC_APP_NAME=Enterprise Admin NEXT_PUBLIC_APP_VERSION=1.0.0

API 配置

NEXT_PUBLIC_API_URL=https://api.example.com ```

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！