feat: 实现联系表单提交与邮件通知功能
添加联系表单提交接口和邮件通知功能，支持从环境变量读取 SMTP 配置 重构 SEO 配置到 site.json，新增 robots.txt 和 sitemap.xml 生成 更新公司电话并添加 PM2 生产运行配置
This commit is contained in:
JanYork
204
README.md
Normal file
204
README.md
Normal file
@@ -0,0 +1,204 @@
|
||||
# 智店官网
|
||||
|
||||
基于 Next.js 16 全栈框架的企业官网项目，当前实现了单页官网展示、联系表单提交、SMTP 邮件通知、可配置 SEO、`robots.txt` / `sitemap.xml` 输出，以及 PM2 生产运行配置。
|
||||
|
||||
## 功能概览
|
||||
|
||||
- 单页官网：首页内容主要由 `data/*.json` 驱动。
|
||||
- 联系表单：提交“获取初步方案”后，会调用 `/api/contact`，由服务端通过 SMTP 发邮件到配置的多个管理邮箱。
|
||||
- SEO 配置：站点标题、描述、关键词、canonical、Open Graph、Twitter、站点验证、robots、sitemap 都可配置。
|
||||
- 生产部署：支持 `pnpm build && pnpm start`，也提供了 PM2 的 `ecosystem.config.cjs`。
|
||||
|
||||
## 快速启动
|
||||
|
||||
### 1. 安装依赖
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 2. 配置环境变量
|
||||
|
||||
本地开发建议使用 `.env.local`。当前项目已经按飞书企业邮箱写入了测试配置。
|
||||
|
||||
可参考 `./.env.example`：
|
||||
|
||||
```bash
|
||||
MAIL_HOST=smtp.feishu.cn
|
||||
MAIL_PORT=465
|
||||
MAIL_USER=your-mail-account@example.com
|
||||
MAIL_PASS=your-mail-password
|
||||
MAIL_SSL_ENABLED=true
|
||||
MAIL_FROM_EMAIL=your-mail-account@example.com
|
||||
MAIL_FROM_NAME=智店软件官网
|
||||
```
|
||||
|
||||
### 3. 启动开发环境
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
默认访问：
|
||||
|
||||
```text
|
||||
http://localhost:3000
|
||||
```
|
||||
|
||||
## 构建与运行
|
||||
|
||||
### 本地生产模式
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
pnpm start
|
||||
```
|
||||
|
||||
### 使用 PM2 运行
|
||||
|
||||
项目已提供 `./ecosystem.config.cjs`。
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
pm2 start ecosystem.config.cjs
|
||||
pm2 status
|
||||
pm2 logs com-index
|
||||
```
|
||||
|
||||
常用 PM2 命令：
|
||||
|
||||
```bash
|
||||
pm2 restart com-index
|
||||
pm2 stop com-index
|
||||
pm2 delete com-index
|
||||
pm2 save
|
||||
pm2 startup
|
||||
```
|
||||
|
||||
## 配置说明
|
||||
|
||||
### 1. 站点基础配置
|
||||
|
||||
文件：`data/site.json`
|
||||
|
||||
主要负责：
|
||||
|
||||
- 公司名称、英文名、描述、电话、邮箱、地址
|
||||
- 顶部导航和页脚导航
|
||||
- SEO 全局配置
|
||||
|
||||
重点字段：
|
||||
|
||||
- `company.phone`：站点展示电话
|
||||
- `company.email`：页脚展示邮箱
|
||||
- `seo.siteUrl`：线上正式域名，用于 canonical、Open Graph、sitemap、robots
|
||||
- `seo.defaultTitle`：默认页面标题
|
||||
- `seo.titleTemplate`：子页面标题模板
|
||||
- `seo.description`：默认描述
|
||||
- `seo.keywords`：关键词数组
|
||||
- `seo.canonicalPath`：当前站点 canonical 路径，单页官网一般为 `/`
|
||||
- `seo.robots.index` / `seo.robots.follow`：搜索引擎抓取控制
|
||||
- `seo.openGraph.image`：社交分享图路径
|
||||
- `seo.verification`：搜索引擎站点验证
|
||||
|
||||
### 2. 首页文案与区块配置
|
||||
|
||||
文件：`data/home.json`
|
||||
|
||||
主要负责：
|
||||
|
||||
- Hero 文案
|
||||
- 产品、方案、案例、联系表单文案
|
||||
- “获取初步方案”按钮和联系信息展示
|
||||
|
||||
### 3. 邮件通知配置
|
||||
|
||||
文件：`config/contact-mailer.yaml`
|
||||
|
||||
这个文件负责：
|
||||
|
||||
- SMTP 主机、端口、SSL、账号密码引用
|
||||
- 发件人邮箱和名称
|
||||
- 收件人列表
|
||||
- 邮件标题前缀
|
||||
|
||||
当前配置方式：
|
||||
|
||||
- SMTP 参数优先从 `.env.local` 里的 `MAIL_*` 变量读取
|
||||
- `notification.to` 支持配置多个邮箱
|
||||
- YAML 里可以直接写死，也可以用 `${ENV_NAME}` / `${ENV_NAME:default}` 引用环境变量
|
||||
|
||||
示例：
|
||||
|
||||
```yaml
|
||||
notification:
|
||||
to:
|
||||
- bd@zhidiansoft.com
|
||||
- ops@zhidiansoft.com
|
||||
subjectPrefix: 官网线索
|
||||
```
|
||||
|
||||
### 4. SEO 输出文件
|
||||
|
||||
文件：
|
||||
|
||||
- `app/layout.tsx`
|
||||
- `lib/seo.ts`
|
||||
- `app/robots.ts`
|
||||
- `app/sitemap.ts`
|
||||
|
||||
职责：
|
||||
|
||||
- `app/layout.tsx`：把 SEO 元数据挂到 Next Metadata
|
||||
- `lib/seo.ts`：统一把 `site.json` 里的 SEO 配置转换成 Metadata / robots / sitemap
|
||||
- `app/robots.ts`：生成 `/robots.txt`
|
||||
- `app/sitemap.ts`：生成 `/sitemap.xml`
|
||||
|
||||
## 目录树与作用
|
||||
|
||||
```text
|
||||
.
|
||||
├── app/
|
||||
│ ├── api/contact/route.ts # 联系表单提交接口，负责校验和发邮件
|
||||
│ ├── layout.tsx # 全局布局与 Metadata 入口
|
||||
│ ├── page.tsx # 首页路由
|
||||
│ ├── robots.ts # 生成 robots.txt
|
||||
│ └── sitemap.ts # 生成 sitemap.xml
|
||||
├── components/
|
||||
│ ├── sections/ # 首页各业务区块
|
||||
│ ├── footer.tsx # 页脚
|
||||
│ └── navbar.tsx # 顶部导航
|
||||
├── config/
|
||||
│ └── contact-mailer.yaml # 邮件通知 YAML 配置
|
||||
├── data/
|
||||
│ ├── home.json # 首页文案和模块数据
|
||||
│ └── site.json # 公司信息、导航、SEO 配置
|
||||
├── lib/
|
||||
│ ├── contact-form.ts # 表单字段校验
|
||||
│ ├── contact-mailer.ts # SMTP 发信逻辑
|
||||
│ ├── contact-mailer-config.ts # YAML 配置读取与校验
|
||||
│ ├── seo.ts # SEO 配置转换
|
||||
│ └── utils.ts # 通用工具
|
||||
├── public/ # 静态资源
|
||||
├── .env.example # 环境变量示例
|
||||
├── ecosystem.config.cjs # PM2 配置
|
||||
├── next.config.mjs # Next.js 配置
|
||||
├── package.json # 依赖与脚本
|
||||
└── tsconfig.json # TypeScript 配置
|
||||
```
|
||||
|
||||
## 表单提交流程
|
||||
|
||||
1. 用户在“获取初步方案”表单输入姓名、公司、电话、门店规模和需求描述。
|
||||
2. 前端组件 `components/sections/contact-section.tsx` 向 `/api/contact` 发起 POST 请求。
|
||||
3. API 路由 `app/api/contact/route.ts` 使用 Zod 校验请求体。
|
||||
4. 服务端读取 `config/contact-mailer.yaml` 并解析环境变量。
|
||||
5. `nodemailer` 通过 SMTP 给 `notification.to` 中的所有邮箱发送通知邮件。
|
||||
6. 邮件发送成功后，前端才显示“信息已提交”。
|
||||
|
||||
## 注意事项
|
||||
|
||||
- `.env.local` 已在 `.gitignore` 中忽略，不会默认提交到仓库。
|
||||
- 线上部署前，请确认 `data/site.json` 中的 `seo.siteUrl` 已改成真实域名。
|
||||
- 如果邮件发送失败，优先检查 `.env.local`、`contact-mailer.yaml` 和 SMTP 账号权限。
|
||||
- 当前仓库存在一些与本次需求无关的历史 TypeScript 报错，`next build` 不受影响，但 `pnpm exec tsc --noEmit` 还不能全绿。
|
||||
Reference in New Issue
Block a user