54 lines
2.0 KiB
Markdown
54 lines
2.0 KiB
Markdown
# 前台积木页面（动态路由）
|
||
|
||
## 概念
|
||
|
||
- 在 **网页管理** 中创建页面，设置 **前台路径**（`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`，无需改库表结构。
|