205 lines
5.1 KiB
Markdown
205 lines
5.1 KiB
Markdown
# 南京市肥鹅信息技术有限公司 - Next.js 版本
|
||
|
||
这是南京市肥鹅信息技术有限公司官网的 Next.js 版本，包含完整的在线留言功能和 QQ 消息推送。
|
||
|
||
## 功能特性
|
||
|
||
- ✅ 响应式设计，支持移动端和桌面端
|
||
- ✅ 3D 动画背景（使用 Three.js 和 React Three Fiber）
|
||
- ✅ 在线留言表单，带表单验证
|
||
- ✅ Prisma ORM 连接 PostgreSQL 数据库
|
||
- ✅ QQ Bot 消息推送，实时通知管理员
|
||
- ✅ Tailwind CSS 自定义主题配色
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: Next.js 16
|
||
- **UI 库**: React 19
|
||
- **样式**: Tailwind CSS 4
|
||
- **3D 渲染**: Three.js + React Three Fiber
|
||
- **数据库**: PostgreSQL + Prisma ORM
|
||
- **图标**: Lucide React
|
||
- **运行时**: Bun
|
||
|
||
## 环境要求
|
||
|
||
- Node.js 18+ 或 Bun
|
||
- PostgreSQL 数据库
|
||
- QQ Bot（可选，用于消息推送）
|
||
|
||
## 安装和运行
|
||
|
||
### 1. 安装依赖
|
||
|
||
```bash
|
||
bun install
|
||
```
|
||
|
||
### 2. 配置环境变量
|
||
|
||
项目根目录已有 `.env` 文件，包含以下配置：
|
||
|
||
```env
|
||
# 数据库连接
|
||
DATABASE_URL="postgresql://feie9454:zjh94544549OK%3F@100.64.0.5:5432/feietech"
|
||
|
||
# QQ Bot 配置
|
||
QQ_BOT_URL=http://localhost:30000/send_private_msg
|
||
QQ_BOT_TARGET_ID=3258359726
|
||
```
|
||
|
||
### 3. 初始化数据库
|
||
|
||
数据库已经通过 Prisma 迁移创建，如需重新初始化：
|
||
|
||
```bash
|
||
# 运行数据库迁移
|
||
bunx prisma migrate dev
|
||
|
||
# 生成 Prisma Client
|
||
bunx prisma generate
|
||
```
|
||
|
||
### 4. 启动开发服务器
|
||
|
||
```bash
|
||
bun run dev
|
||
```
|
||
|
||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||
|
||
### 5. 构建生产版本
|
||
|
||
```bash
|
||
bun run build
|
||
bun run start
|
||
```
|
||
|
||
## 数据库结构
|
||
|
||
### Message 表
|
||
|
||
| 字段 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| id | Int | 主键，自增 |
|
||
| name | String | 留言人姓名 |
|
||
| phone | String | 联系电话 |
|
||
| email | String | 电子邮箱 |
|
||
| description | Text | 需求描述 |
|
||
| createdAt | DateTime | 创建时间 |
|
||
|
||
## API 端点
|
||
|
||
### POST /api/messages
|
||
|
||
提交在线留言
|
||
|
||
**请求体:**
|
||
```json
|
||
{
|
||
"name": "张三",
|
||
"phone": "13800138000",
|
||
"email": "zhangsan@example.com",
|
||
"description": "需要定制软件开发服务"
|
||
}
|
||
```
|
||
|
||
**成功响应:**
|
||
```json
|
||
{
|
||
"success": true,
|
||
"message": "留言提交成功，我们会尽快与您联系！",
|
||
"data": {
|
||
"id": 1
|
||
}
|
||
}
|
||
```
|
||
|
||
**错误响应:**
|
||
```json
|
||
{
|
||
"error": "错误信息"
|
||
}
|
||
```
|
||
|
||
## QQ 消息推送
|
||
|
||
当有新留言提交时，系统会自动通过 QQ Bot 发送消息通知管理员，包含以下信息：
|
||
|
||
- 留言人姓名
|
||
- 联系电话
|
||
- 电子邮箱
|
||
- 需求描述
|
||
- 提交时间
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
nanjing-feie-info-tech-neo/
|
||
├── app/
|
||
│ ├── api/
|
||
│ │ └── messages/
|
||
│ │ └── route.ts # 留言 API 路由
|
||
│ ├── globals.css # 全局样式
|
||
│ ├── layout.tsx # 根布局
|
||
│ └── page.tsx # 首页
|
||
├── components/
|
||
│ ├── About.tsx # 关于我们组件
|
||
│ ├── Contact.tsx # 联系方式组件（含表单）
|
||
│ ├── Footer.tsx # 页脚组件
|
||
│ ├── Hero.tsx # 首屏组件（含 3D 背景）
|
||
│ ├── Navbar.tsx # 导航栏组件
|
||
│ └── Services.tsx # 服务介绍组件
|
||
├── lib/
|
||
│ ├── prisma.ts # Prisma 客户端
|
||
│ └── qqbot.ts # QQ Bot 推送工具
|
||
├── prisma/
|
||
│ ├── schema.prisma # 数据库模型定义
|
||
│ └── migrations/ # 数据库迁移文件
|
||
├── public/
|
||
│ └── assets/ # 静态资源
|
||
├── types.ts # TypeScript 类型定义
|
||
├── .env # 环境变量
|
||
└── package.json # 项目配置
|
||
```
|
||
|
||
## 开发说明
|
||
|
||
### 添加新的留言字段
|
||
|
||
1. 修改 `prisma/schema.prisma` 中的 `Message` 模型
|
||
2. 运行 `bunx prisma migrate dev --name add_new_field`
|
||
3. 更新 `components/Contact.tsx` 表单
|
||
4. 更新 `app/api/messages/route.ts` API 逻辑
|
||
|
||
### 自定义主题颜色
|
||
|
||
在 `app/globals.css` 中修改 `@theme` 块中的颜色变量：
|
||
|
||
```css
|
||
--color-feie-white: #FFFFFF;
|
||
--color-feie-cream: #F5F4F0;
|
||
--color-feie-dark: #1C1917;
|
||
--color-feie-gold: #C5A059;
|
||
```
|
||
|
||
## Learn More
|
||
|
||
To learn more about Next.js, take a look at the following resources:
|
||
|
||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||
|
||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||
|
||
## 许可证
|
||
|
||
© 2025 南京市肥鹅信息技术有限公司. All rights reserved.
|
||
|
||
|
||
## Deploy on Vercel
|
||
|
||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||
|
||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|