## 板块5：静态页面生成器 - 阶段规划
| 阶段 | 名称 | 说明 | 预计时间 |
|------|------|------|---------|
| 5-1 | 创建页面渲染服务 | 将组件 JSON 转换为 HTML | 15 分钟 |
| 5-2 | 创建前台控制器和路由 | 访问域名显示页面 | 10 分钟 |
| 5-3 | 创建前台布局模板 | 统一页面框架和样式 | 10 分钟 |
| 5-4 | 完善组件渲染 | 渲染所有组件类型 | 20 分钟 |
| 5-5 | 创建静态文件生成命令 | Artisan 命令生成 .html | 15 分钟 |
| 5-6 | 实现一键发布功能 | 后台添加发布按钮 | 15 分钟 |
| 5-7 | 测试验证 | 完整流程测试 | 10 分钟 |
---
## 各阶段详细内容
### 5-1：创建页面渲染服务
**目标**：将数据库中的组件 JSON 数据转换为 HTML 字符串。
**产出文件**：
- `app/Services/PageRenderService.php`
**核心方法**：
- `render(Page $page)`：渲染整个页面
- `renderComponent(PageComponent $component)`：渲染单个组件
- `renderBanner()`、`renderText()`、`renderImage()`：各组件渲染方法
- `wrapWithLayout()`：包裹页面布局
---
### 5-2：创建前台控制器和路由
**目标**：用户访问域名时能正确显示页面。
**产出文件**：
- `app/Http/Controllers/Frontend/PageController.php`
**路由**：
```php
Route::get('/', [PageController::class, 'home']); // 首页
Route::get('/{slug}.html', [PageController::class, 'show']); // 自定义页面
```
---
### 5-3：创建前台布局模板
**目标**：提供统一的页面框架和基础样式。
**产出文件**：
- `resources/views/frontend/layouts/app.blade.php`
**包含内容**：
- HTML 结构
- SEO 元数据（title、keywords、description）
- 基础 CSS 样式
- 组件内容插槽 `{!! $content !!}`
---
### 5-4：完善组件渲染
**目标**：完善所有组件类型的渲染逻辑。
| 组件类型 | 当前状态 | 需要添加 |
|---------|---------|---------|
| `banner` | ✅ 已实现 | 样式优化 |
| `text` | ✅ 已实现 | - |
| `image` | ✅ 已实现 | - |
| `multi_col` | ❌ 未实现 | 多列布局渲染 |
| `map` | ❌ 未实现 | 地图嵌入 |
| `contact_form` | ❌ 未实现 | 联系表单 HTML + 提交处理 |
---
### 5-5：创建静态文件生成命令
**目标**：一键将动态页面生成为静态 .html 文件。
**产出文件**：
- `app/Console/Commands/GenerateStaticPages.php`
**命令**：
```bash
php artisan generate:static
```
**核心逻辑**：
1. 遍历所有已发布的页面
2. 调用 `PageRenderService` 渲染 HTML
3. 将 HTML 写入 `public/` 目录
4. 首页生成 `public/index.html`
5. 其他页面生成 `public/{slug}.html`
---
### 5-6：实现一键发布功能
**目标**：在后台添加「发布」按钮，用户点击后生成静态文件。
**修改文件**：
- `resources/js/admin/views/Pages.vue`：添加发布按钮
- `routes/api.php`：添加发布接口
- `app/Http/Controllers/Admin/PageController.php`：添加 `publish` 方法
---
### 5-7：测试验证
**目标**：完整流程测试。
**测试步骤**：
1. 访问后台，点击「发布」按钮
2. 检查 `public/index.html` 是否生成
3. 访问首页 `http://域名/` 查看效果
4. 访问自定义页面 `http://域名/about.html` 查看效果
---
## 当前进度
| 阶段 | 名称 | 状态 |
|------|------|------|
| 5-1 | 创建页面渲染服务 | 🔜 待执行 |
| 5-2 | 创建前台控制器和路由 | 🔜 |
| 5-3 | 创建前台布局模板 | 🔜 |
| 5-4 | 完善组件渲染 | 🔜 |
| 5-5 | 创建静态文件生成命令 | 🔜 |
| 5-6 | 实现一键发布功能 | 🔜 |
| 5-7 | 测试验证 | 🔜 |
---