# 智店官网

基于 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` 还不能全绿。