# 前台积木页面（动态路由）

## 概念

- 在 **网页管理** 中创建页面，设置 **前台路径**（`route_path` 或默认 `/{slug}`）、**发布**、**内容模式**。
- **HTML**：`content` 为 HTML 字符串，前台用 `v-html` 渲染（仅信任后台内容）。
- **积木（builder）**：后台使用 **可视化编辑器**（添加模块、拖拽顺序、配置动画）；链接可在弹窗中选择 **站内页面**、**可下载文件** 或 **自定义地址**。亦可展开「高级」直接改 JSON。
- 存储仍为 JSON，结构如下，前台按模块渲染并支持入场动画。

## 动态路由

- 前台启动时请求 `GET /api/web/routes`，按已发布页面注册 Vue Router。
- `slug` 为 `index` 的页面不参与动态路由（仍由首页 `Home.vue` + 首页数据驱动）。
- 单页数据：`GET /api/web/page?path=/your-path`（`site_id` 可选，默认官网站点）。

## 积木 JSON 结构

```json
{
  "version": 1,
  "blocks": [
    {
      "id": "唯一可选",
      "type": "heading",
      "props": { "text": "标题", "level": 2 },
      "animation": { "enter": "fadeIn", "delay_ms": 0, "duration_ms": 600 }
    }
  ]
}
```

### 模块类型 `type`

| type | props 说明 |
|------|------------|
| `heading` | `text`, `level` (1–6) |
| `text` | `text` 纯文本；或 `html: true` 时用 `html` / `text` 作为 HTML |
| `link_list` | `items: [{ label, url, target? }]` |
| `button` | `text`, `url`, `variant`: `primary` \| `ghost`, `target?` |
| `html` | `html` 原始 HTML 片段 |
| `spacer` | `height` 像素 |
| `divider` | 无 |
| `section` | `padding`, `maxWidth`, `background`；`children` 为子 `blocks` 数组 |

### 动画 `animation.enter`

- `none` | `fadeIn` | `slideUp` | `slideLeft` | `zoomIn`
- `delay_ms`、`duration_ms` 控制延迟与时长（毫秒）

## 扩展新模块

1. 在 `web/src/components/blocks/BlockRenderer.vue` 增加 `type` 分支与样式。
2. 后台仍通过 JSON 配置 `props`，无需改库表结构。