南京市肥鹅信息技术有限公司 - 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. 安装依赖

bun install

2. 配置环境变量

项目根目录已有 .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 迁移创建，如需重新初始化：

# 运行数据库迁移
bunx prisma migrate dev

# 生成 Prisma Client
bunx prisma generate

4. 启动开发服务器

bun run dev

Open http://localhost:3000 with your browser to see the result.

5. 构建生产版本

bun run build
bun run start

数据库结构

Message 表

字段	类型	说明
id	Int	主键，自增
name	String	留言人姓名
phone	String	联系电话
email	String	电子邮箱
description	Text	需求描述
createdAt	DateTime	创建时间

API 端点

POST /api/messages

提交在线留言

请求体:

{
  "name": "张三",
  "phone": "13800138000",
  "email": "zhangsan@example.com",
  "description": "需要定制软件开发服务"
}

成功响应:

{
  "success": true,
  "message": "留言提交成功，我们会尽快与您联系！",
  "data": {
    "id": 1
  }
}

错误响应:

{
  "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 块中的颜色变量：

--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 - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - 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 from the creators of Next.js.

Check out our Next.js deployment documentation for more details.