Z-Admin

一个基于 React + Vite + Ant Design 构建的现代化后台管理系统模板。

功能特性

• 🎨 主题系统 - 支持亮色/暗色模式切换，自定义主题色，紧凑模式
• 📐 多种布局 - 侧边栏模式、顶部模式、精简模式等多种导航布局
• 🔧 配置面板 - 可视化配置系统，实时预览效果
• 🌐 国际化 - 内置多语言支持
• 📊 页面过渡 - 多种页面切换动画效果
• 🏷️ 多标签页 - 支持标签页导航，多种样式风格
• 📝 代码生成 - 基于 Plop.js 的代码文件自动生成
• 🛡️ 错误处理 - 完善的错误日志收集与打印
• 📦 状态管理 - 基于 Zustand 的轻量级状态管理
• 🎯 权限控制 - 路由权限与菜单权限控制

技术栈

核心框架

• React 18 - UI 框架
• Vite - 构建工具
• React Router - 路由管理
• Zustand - 状态管理

UI 组件

• Ant Design 6 - UI 组件库
• Ant Design Pro Components - 业务组件
• Ant Design Charts - 图表组件
• IconPark - 图标库
• Ant Design Style - CSS-in-JS 样式方案

工具库

• ahooks - React Hooks 工具库
• lodash-es - 工具函数库
• axios - HTTP 请求库
• moment - 日期处理

动画效果

• Animate.css - CSS 动画库
• React Transition Group - React 过渡动画
• Hover.css - 悬停样式

其他

• React Markdown - Markdown 渲染
• React Quill - 富文本编辑器
• React Beautiful DnD - 拖拽功能
• CodeMirror - 代码编辑器

快速开始

安装依赖

npm install
# 或
pnpm install
# 或
yarn install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产版本

npm run preview

代码检查

npm run lint

项目结构

z-admin/
├── src/
│   ├── components/       # 公共组件
│   ├── layout/           # 布局组件
│   │   └── Setting/      # 配置面板
│   ├── pages/            # 页面组件
│   ├── store/            # 状态管理
│   ├── utils/            # 工具函数
│   ├── types/            # TypeScript 类型定义
│   └── App.tsx           # 应用入口
├── public/               # 静态资源
├── package.json
├── vite.config.ts
└── tsconfig.json

配置说明

主题配置

在 src/utils/data.ts 中可以修改默认配置：

export const defaultSetting = {
  theme: {
    themeColor: "#1677ff",    // 主题色
    darkMode: false,          // 暗色模式
    compactMode: false,       // 紧凑模式
    happyEffect: false        // 欢快效果
  },
  menu: {
    menuType: "side",         // 导航模式
    // ...
  }
}

路由配置

基于文件系统的路由，在 src/pages/ 目录下创建文件即可自动生成路由。

开发指南

Git 提交规范

# 提交代码
git add .
git commit -m "feat: 添加新功能"
git push origin master

# 拉取代码
git pull

Commit 类型

• feat: 新功能
• fix: 修复 Bug
• docs: 文档更新
• style: 代码格式调整
• refactor: 代码重构
• perf: 性能优化
• test: 测试相关
• chore: 构建/工具相关

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

License

MIT

贡献

欢迎提交 Issue 和 Pull Request。