# base-nextjs

**Repository Path**: renew95/base-nextjs

## Basic Information

- **Project Name**: base-nextjs
- **Description**: 基于nextjs的管理后台前端基础框架
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-01-24
- **Last Updated**: 2026-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 概要

基于 Next.js 16 + TypeScript + Tailwind v4 的后台基础框架，布局包含左侧菜单栏、顶部标签栏（可关闭已打开菜单）、内容区域。通过 PBAC（权限为中心的策略控制）限制菜单与页面访问权限。

## 环境要求

- Node.js 18+
- MySQL（示例连接：root / 123789，数据库 bnext

## 快速开始

1. 安装依赖：
   npm install
2. 配置数据库：确保已创建 bnext 库，更新根目录 .env（默认已写好）：
   DATABASE_URL="mysql://root:123789@localhost:3306/bnext"
   APP_DEFAULT_USER_ID="1"
3. 创建表并生成客户端：
   npm run db:push
   npm run db:generate
4. 写入示例权限/菜单数据：
   npm run db:seed
5. 启动开发服务器：
   npm run dev
   浏览器访问 http://localhost:3000 即可看到左侧菜单 + 顶部标签 + 内容区的布局效果。

> 如需切换默认账号，修改 .env 中的 APP_DEFAULT_USER_ID（seed 后管理员 ID 为 1，职员 ID 为 2）。

## PBAC 与数据结构

- 数据模型：用户、角色、权限、菜单、角色-权限、用户-角色，定义在 prisma/schema.prisma。
- 种子数据：权限键、角色、用户、菜单层级在 prisma/seed.ts，包含：
  - 菜单：首页、客户管理、OA 管理（部门、职员）、基础资料、系统设置（权限管理）。
  - 权限键：view_home、view_customers、view_oa_departments、view_oa_staff、view_base_data、view_permissions。
  - 账号：admin@example.com（管理员，全部权限）、staff@example.com（示例职员，部分权限），密码均为 123456。
- 运行时：
  - lib/auth.ts 负责获取当前用户权限；
  - lib/menu.ts 根据权限过滤菜单树；
  - 页面层面再次校验权限，未授权时展示友好的提示。

## 界面说明

- 左侧菜单：根据当前用户权限过滤显示，支持二级菜单（如 OA 管理）。
- 顶部标签栏：打开菜单时自动记录，可点击 “×” 关闭；首页不可关闭。
- 页面示例：
  - / 首页：展示当前账号信息与示例卡片。
  - /customers 客户管理：表格占位。
  - /oa/departments、/oa/staff：OA 部门/职员示例。
  - /base-data 基础资料说明。
  - /system/permissions 权限管理，读取数据库中的权限与角色-权限关系。

## 常用命令

- npm run db:push：基于 Prisma 模型同步表结构（开发环境）。
- npm run db:seed：写入示例权限/菜单/用户。
- npm run dev：本地开发。
- npm run build && npm start：生产构建与启动。

## 目录速览

- 页面与布局：app/(dashboard)/*，核心布局在 app/(dashboard)/layout.tsx。
- 组件：侧边栏与标签栏在 components/layout，标签状态管理在 components/providers/TabsProvider.tsx。
- 权限逻辑：lib/auth.ts、lib/menu.ts、权限常量在 lib/permissions.ts。
- 数据模型与种子：prisma/schema.prisma、prisma/seed.ts。