EN
#9
企业系统供应链协同项目管理Next.js

ProdLink 企业级项目与供应链协同管理系统

基于 Next.js 16 与 React 19 构建的现代化企业级全流程项目研发与供应链协同管理系统，涵盖多组织权限体系、交互式甘特图排期及物料全生命周期追踪。

访问 ProdLink 协同系统

应用与工程截图

1 张视图
ProdLink 系统控制台主界面
ProdLink 系统控制台主界面

详细技术介绍与功能架构

ProdLink 企业级项目与供应链协同管理系统

Next.js 16 React 19 TypeScript Tailwind CSS v4 Prisma ORM NextAuth v5

ProdLink 是一套面向现代企业工程、商务与供应链业务的一站式数字化协同管理系统。系统打通客户关系、供应商网络、标准化产品库以及项目全生命周期核算，实现从商机立项、产品选型、报价/成本核算到采购履约的数据全链路闭环，助力企业实现精准的成本管控与高效的跨部门业务协同。

目录

✨ 核心特性

  • 📊 业务全景仪表盘

    • 实时统计进行中项目、合作供应商、活跃客户及在库产品核心指标。
    • 业务走势动态监测与高频操作快捷导航。

  • 🏢 供应商全生命周期管理

    • 供应商详细档案（联系人、电话、邮箱、地址、备注等）。
    • 规范的信用评级体系（E: 优秀, G: 良好, A: 正常, I: 不合格, S: 战略, U: 未评级）。
    • 供应商关联合同及供货产品追溯。

  • 👥 客户关系管理 (CRM)

    • 客户企业档案与多层级对接人（部门、职位、客户级别）全面沉淀。
    • 客户关联历史项目与采购记录一键透视。

  • 📦 标准化产品与物料库

    • 产品统一编码、品牌、型号、规格参数、基准单价维护。
    • 灵活的标签分类（Tags）与合格供应商供货关系绑定。

  • 📁 项目全流程管理与核算

    • 项目立项、阶段状态追踪、项目预算与中标金额记录。
    • 项目产品清单 (BOM/报价清单)：支持多产品明细配置，涵盖采购成本价、对外报价、成交价、含税/未税标记及毛利动态核算。

  • 🔐 权限控制 (RBAC) 与系统管理

    • 支持多角色权限划分（admin 超管、supervisor 主管、developer 研发、staff 员工、user 普通用户）。
    • 用户账号管理、重置密码与系统全局运行设置。

  • 🌓 现代化极致交互体验

    • 基于 Tailwind CSS v4 与 Radix UI（shadcn/ui 体系）构建的现代化响应式 UI。
    • 原生支持浅色（Light）/ 深色（Dark）主题平滑切换与丰富微动效（Framer Motion）。

🛠 技术架构

领域 选型与技术 说明
前端框架 Next.js 16 (App Router) + React 19 服务端组件 (RSC) 与现代渲染架构
编程语言 TypeScript 5 全栈端到端强类型约束
样式与动效 Tailwind CSS v4 + Framer Motion 实用优先的高性能样式库与流畅交互动效
组件体系 Radix UI + Lucide Icons 无障碍（a11y）高保真组件与精致图标库
数据库 & ORM PostgreSQL + Prisma ORM 6 企业级关系型数据库与类型安全的 ORM 映射
认证与安全 Auth.js (NextAuth.js v5 Beta) + bcryptjs JWT 方案鉴权，针对 Edge Runtime 体积深度优化
表单校验 React Hook Form + Zod 严密的数据校验与高性能表单管理
消息反馈 Sonner 优雅现代的 Toast 吐司通知

📂 目录结构

prodlink/
├── prisma/                    # Prisma ORM 配置与迁移
│   ├── schema.prisma          # 数据模型定义 (User, Supplier, Customer, Product, Project 等)
│   └── seed.ts                # 数据库初始数据种子脚本 (内置超级管理员账号)
├── public/                    # 静态资源文件
├── src/
│   ├── actions/               # Next.js Server Actions (后端业务逻辑与数据操作)
│   ├── app/                   # Next.js App Router 路由
│   │   ├── api/               # API 接口路由 (Auth 回调等)
│   │   ├── dashboard/         # 核心业务仪表盘与管理模块
│   │   │   ├── admin/         # 超管专属：用户列表与系统配置
│   │   │   ├── customers/     # 客户管理模块
│   │   │   ├── products/      # 产品物料库模块
│   │   │   ├── projects/      # 项目管理与核算清单模块
│   │   │   ├── suppliers/     # 供应商管理模块
│   │   │   └── page.tsx       # 仪表盘总览首页
│   │   ├── login/             # 用户登录界面
│   │   ├── globals.css        # 全局样式与 Tailwind 主题定义
│   │   └── layout.tsx         # 根布局配置 (包含 Session、主题等 Provider)
│   ├── components/            # UI 组件层
│   │   ├── ui/                # 基础原子组件 (Button, Dialog, Table, Form 等)
│   │   ├── app-sidebar.tsx    # 系统响应式侧边导航栏
│   │   ├── nav-user.tsx       # 导航栏当前用户信息与登出菜单
│   │   └── layout-wrapper.tsx # 仪表盘统一布局容器
│   ├── hooks/                 # 自定义 React Hooks
│   ├── lib/                   # 通用工具库 (Prisma 客户端连接实例、工具函数等)
│   ├── types/                 # 全局 TypeScript 类型定义
│   ├── auth.config.ts         # 轻量级认证策略配置 (兼容 Edge Runtime)
│   ├── auth.ts                # 完整认证逻辑与凭证校验 (Node.js 运行时)
│   └── middleware.ts          # 路由访问控制与权限守卫中间件
├── .env.example               # 环境变量示例模板
├── DEPLOYMENT.md              # 线上生产部署指南与 Edge 限制解决方案
├── package.json               # 项目依赖与执行脚本
└── tsconfig.json              # TypeScript 编译配置

🚀 快速开始

1. 环境准备

请确保本地已安装以下环境：

  • Node.js: v18.17.0 或更高版本（推荐 v20+ LTS）
  • npm: v9+ 或 pnpm / yarn
  • PostgreSQL: 本地已运行的 PostgreSQL 实例，或云端数据库（如 Neon、Supabase）

2. 安装依赖

git clone <repository-url>
cd prodlink
npm install

3. 配置环境变量

复制环境配置模板：

cp .env.example .env.local

打开 .env.local 并填写配置：

# PostgreSQL 数据库连接地址
DATABASE_URL="postgresql://username:password@localhost:5432/prodlink?schema=public"

# Auth.js 认证密钥（可通过 `npx auth secret` 自动生成）
AUTH_SECRET="your_auth_secret_here"

# 应用访问地址
AUTH_URL="http://localhost:3000"
AUTH_TRUST_HOST=true

# 紧急管理员兜底配置（可选）
ADMIN_EMAIL="admin@prodlink.com"
ADMIN_PASSWORD="your_secure_password"

4. 数据库配置与初始化

生成 Prisma Client

npx prisma generate

推送表结构到数据库

npx prisma db push

执行种子脚本（创建初始超管账号）

npm run seed
# 或者执行 Prisma 原生种子命令
npx prisma db seed
# 或直接运行脚本
npx tsx prisma/seed.ts

5. 启动开发服务器

npm run dev

浏览器打开 http://localhost:3000，系统将自动重定向至登录页面。

🔑 默认登录账号

在运行数据库种子脚本后，系统中将自动注入默认超级管理员账号：

角色 登录邮箱 / 用户名 默认密码 说明
超级管理员 admin@prodlink.com / admin admin 具备全系统最高管理权限，建议登录后及时修改密码

📜 常用命令

命令 描述
npm run dev 启动本地热重载开发服务器（默认端口 3000）
npm run build 生成 Prisma Client 并编译生产环境应用
npm run start 启动编译后的生产环境服务
npm run lint 运行 ESLint 进行代码规范审查
npm run seed / npx prisma db seed 执行数据库种子脚本初始化超管账号
npx prisma studio 在本地启动 Prisma Studio 可视化数据管理后台
npx prisma db push 同步当前 Prisma Schema 架构变更至数据库
npx auth secret 生成用于生产环境加密的 AUTH_SECRET 随机安全字符串

☁️ 生产部署与 Vercel 适配

本系统支持一键部署到 Vercel，推荐搭配 Neon Serverless Postgres。

部署注意事项（Edge Function 优化）

为了防止 Next.js 中间件超出 Vercel 免费版的 1MB Edge Function 体积上限，系统采用了分层解耦认证架构：

  • src/middleware.ts 仅依赖轻量 JWT 校验（基于 src/auth.config.ts），杜绝在 Edge Runtime 中引入 Prisma Client 或 bcryptjs；
  • 数据库操作及哈希密码校验被严格限定在 Node.js API 及 Server Actions 运行时。

关于 Vercel 部署环境变量设置及排错说明，请详见完整指南：📘 DEPLOYMENT.md。

📄 开源协议

本项目根据 MIT License 协议开源。