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