项目初始化 - Next.js项目搭建、依赖配置、目录结构

[georgelichen]

目标

建立诺和诺德分销商一站式管理门户平台的Next.js前端演示项目，使用Vite构建，配置TailwindCSS主题，建立符合业务需求的目录结构，为4个核心功能模块开发提供基础环境。

详细描述

搭建专为诺和诺德医药分销商管理设计的Next.js前端演示系统，集成Vite构建工具，配置符合诺和诺德设计规范的TailwindCSS主题，建立支持分销商信息查询、变更指引、新增指引和应收账款管理4个核心模块的项目架构。

验收条件

• 创建Next.js 14+项目并配置Vite构建
• 配置TypeScript支持
• 集成TailwindCSS并应用诺和诺德设计规范
• 安装并配置ESLint和Prettier
• 建立分销商业务导向的目录结构
• 配置开发和构建脚本
• 添加业务特定依赖（状态管理、图表、日期处理等）
• 创建基础布局和导航结构
• 配置外围系统跳转链接
• 项目能够正常启动并显示诺和诺德主题页面

实现细节

技术栈

• Next.js 14+ (App Router)
• TypeScript
• TailwindCSS + 诺和诺德设计规范主题
• Vite (构建工具)
• ESLint + Prettier

目录结构

/
├── src/
│   ├── app/                    # App Router页面
│   │   ├── distributors/       # 分销商查询页面
│   │   ├── change-guide/       # 变更指引页面
│   │   ├── new-guide/          # 新增指引页面
│   │   └── receivables/        # 应收账款页面
│   ├── components/             # 公共组件
│   │   ├── ui/                # 基础UI组件
│   │   ├── forms/             # 表单组件
│   │   ├── charts/            # 图表组件
│   │   └── layout/            # 布局组件
│   ├── lib/                   # 工具函数和配置
│   │   ├── data-service.ts    # 数据处理服务
│   │   ├── permissions.ts     # 权限控制
│   │   └── external-links.ts  # 外围系统链接
│   ├── types/                 # TypeScript类型定义
│   │   ├── distributor.ts     # 分销商类型
│   │   ├── license.ts         # 证照类型
│   │   └── receivable.ts      # 应收账款类型
│   ├── data/                  # JSON演示数据
│   │   ├── distributors.json  # 分销商数据
│   │   ├── licenses.json      # 证照数据
│   │   ├── receivables.json   # 应收账款数据
│   │   └── users.json         # 用户权限数据
│   └── styles/                # 样式文件
│       └── globals.css        # 全局样式
├── public/                    # 静态资源
│   └── images/               # 诺和诺德品牌图片
├── docs/                     # 项目文档
├── vite.config.js            # Vite配置
├── tailwind.config.js        # TailwindCSS配置(诺和诺德主题)
├── tsconfig.json
└── package.json

依赖包

• 核心：next, react, react-dom, typescript
• 构建：vite, @vitejs/plugin-react
• 样式：tailwindcss, @tailwindcss/forms, @tailwindcss/typography
• 状态管理：react-context (内置)
• UI组件：@headlessui/react, @heroicons/react
• 图表：recharts (流程图展示)
• 日期处理：date-fns
• 开发工具：eslint, prettier, @types/node, @types/react
• 外链处理：用于跳转外围系统的工具函数

定义完成

项目能够通过npm run dev正常启动，显示带有诺和诺德主题样式的主页面，包含4个功能模块的导航入口，Vite构建配置正常工作，所有配置文件正确生成，业务导向的目录结构完整建立。

注意事项

• 使用最新稳定版本的依赖
• 确保Vite与Next.js的兼容性配置
• 严格遵循诺和诺德设计规范和颜色标准
• 建立一致的代码格式化规则
• 配置外围系统链接的安全性
• 为4个核心模块预留清晰的开发接口

相关资源

• Next.js官方文档
• Vite + Next.js集成指南
• TailwindCSS配置指南
• 诺和诺德页面颜色和字体规范 (@rfp\页面颜色和字体规范.pdf)
• TypeScript最佳实践
• RFP需求文档 (@rfp\RFP.md)