@builder6/pages
v3.2.12
Published
Builder6 Pages 模块为 Builder6 平台提供动态页面管理和渲染能力，支持使用 Amis 低代码框架构建页面，以及 Liquid 模板引擎进行页面定制。该模块是 Builder6 低代码平台的前端核心组件。
Keywords
Readme
Builder6 Pages Module
Builder6 Pages 模块为 Builder6 平台提供动态页面管理和渲染能力，支持使用 Amis 低代码框架构建页面，以及 Liquid 模板引擎进行页面定制。该模块是 Builder6 低代码平台的前端核心组件。
功能特性
- 动态页面管理: 通过数据库配置管理页面，无需重启服务
- Amis 集成: 集成百度 Amis 低代码前端框架
- Liquid 模板: 支持 LiquidJS 模板引擎进行页面定制
- Tailwind CSS: 内置 Tailwind CSS 支持，快速样式开发
- 组件库集成: 支持 Steedos Widgets 组件库
- 页面缓存: LRU 缓存提升页面加载性能
- 数据加载器: DataLoader 优化数据查询性能
- 项目管理: 支持页面项目分组管理
- 响应式设计: 支持移动端和桌面端适配
- 实时预览: 页面编辑器支持实时预览
安装
npm install @builder6/pages或
yarn add @builder6/pages环境变量
基本配置
# 应用根 URL
B6_ROOT_URL=http://localhost:5100
# Amis 包名称（npm 包名或本地路径）
B6_AMIS_PACKAGE=amis
# Amis 版本
B6_AMIS_VERSION=6.10.0
# UNPKG CDN 地址（用于加载前端资源）
B6_UNPKG_URL=https://unpkg.steedos.cn组件库配置
# Steedos Widgets 版本
B6_WIDGETS_VERSION=6.3.11
# 使用特定的组件库包
# B6_WIDGETS_VERSION=@steedos-widgets/liveblocks
# 自定义组件库 URL
B6_WIDGETS_URL=https://unpkg.steedos.cn/@steedos-widgets/core@latest高级配置
# 页面缓存大小（条目数）
B6_PAGES_CACHE_SIZE=500
# 启用页面编辑器
B6_PAGES_EDITOR_ENABLED=true
# 默认主题
B6_PAGES_THEME=default
# 自定义 CSS URL
B6_PAGES_CUSTOM_CSS_URL=https://example.com/custom.css使用示例
在 NestJS 应用中集成
import { Module } from '@nestjs/common';
import { PagesModule } from '@builder6/pages';
@Module({
imports: [PagesModule],
})
export class AppModule {}创建页面
import { PagesService } from '@builder6/pages';
constructor(private pagesService: PagesService) {}
async createPage() {
const page = await this.pagesService.create({
name: 'dashboard',
label: '仪表板',
is_system: false,
type: 'amis', // 'amis' 或 'liquid'
schema: {
type: 'page',
title: '仪表板',
body: [
{
type: 'service',
api: '/api/v6/stats',
body: [
{
type: 'cards',
source: '$items',
card: {
body: [
{
type: 'tpl',
tpl: '${label}: ${value}'
}
]
}
}
]
}
]
},
project: 'project_id'
});
return page;
}使用 Amis Schema
// 表单页面示例
const formPageSchema = {
type: 'page',
title: '用户表单',
body: {
type: 'form',
api: 'post:/api/v6/users',
body: [
{
type: 'input-text',
name: 'name',
label: '姓名',
required: true
},
{
type: 'input-email',
name: 'email',
label: '邮箱',
required: true
},
{
type: 'select',
name: 'role',
label: '角色',
options: [
{ label: '管理员', value: 'admin' },
{ label: '用户', value: 'user' }
]
}
]
}
};
// CRUD 页面示例
const crudPageSchema = {
type: 'page',
title: '用户列表',
body: {
type: 'crud',
api: '/api/v6/users',
columns: [
{ name: 'name', label: '姓名' },
{ name: 'email', label: '邮箱' },
{ name: 'role', label: '角色', type: 'mapping', map: {
admin: '<span class="label label-success">管理员</span>',
user: '<span class="label label-info">用户</span>'
}}
],
bulkActions: [
{
label: '批量删除',
actionType: 'ajax',
api: 'delete:/api/v6/users/${ids|raw}',
confirmText: '确定要删除？'
}
]
}
};使用 Liquid 模板
async renderLiquidPage(pageId: string, context: any) {
// 页面内容使用 Liquid 模板
const template = `
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold">{{ title }}</h1>
<ul>
{% for item in items %}
<li>{{ item.name }} - {{ item.description }}</li>
{% endfor %}
</ul>
</div>
`;
const rendered = await this.pagesService.renderLiquid(template, context);
return rendered;
}数据模型
b6_pages 对象
页面配置存储在 b6_pages 对象中：
interface Page {
_id: string;
name: string; // 页面唯一标识
label: string; // 页面显示名称
description?: string; // 页面描述
is_system: boolean; // 是否系统页面
type: 'amis' | 'liquid'; // 页面类型
schema?: object; // Amis schema（type=amis时）
template?: string; // Liquid 模板（type=liquid时）
path?: string; // 页面路径
icon?: string; // 页面图标
visible?: boolean; // 是否可见
sort?: number; // 排序
project?: string; // 所属项目
owner: string; // 所有者
space: string; // 租户空间
created: Date;
modified: Date;
}b6_projects 对象
项目配置存储在 b6_projects 对象中：
interface Project {
_id: string;
name: string; // 项目名称
label: string; // 项目显示名称
description?: string; // 项目描述
owner: string; // 所有者
members?: string[]; // 项目成员
space: string; // 租户空间
created: Date;
modified: Date;
}API 端点
模块提供以下主要 API 端点：
页面管理
- GET
/api/v6/pages: 获取页面列表 - GET
/api/v6/pages/:id: 获取页面详情 - POST
/api/v6/pages: 创建页面 - PUT
/api/v6/pages/:id: 更新页面 - DELETE
/api/v6/pages/:id: 删除页面
页面渲染
- GET
/page/:name: 渲染页面（根据 name） - GET
/page/:projectId/:name: 渲染项目下的页面
项目管理
- GET
/api/v6/projects: 获取项目列表 - GET
/api/v6/projects/:id: 获取项目详情 - POST
/api/v6/projects: 创建项目 - PUT
/api/v6/projects/:id: 更新项目 - DELETE
/api/v6/projects/:id: 删除项目
Amis 集成
使用 Amis 组件
Builder6 Pages 集成了完整的 Amis 组件库，支持所有 Amis 组件：
- 布局组件: Page, Container, Grid, Flex, Wrapper
- 表单组件: Form, Input, Select, DatePicker, Upload
- 展示组件: Table, Cards, List, Chart, Image
- 功能组件: Service, Dialog, Drawer, Wizard
- 交互组件: Button, Action, Nav, Tabs
Amis API 配置
// 配置 API 数据源
const pageSchema = {
type: 'page',
body: {
type: 'service',
api: {
method: 'get',
url: '/api/v6/users',
headers: {
'Authorization': 'Bearer ${token}'
}
},
body: [
{
type: 'table',
source: '$items',
columns: [
{ name: 'name', label: '姓名' },
{ name: 'email', label: '邮箱' }
]
}
]
}
};Tailwind CSS 支持
模块内置 Tailwind CSS 支持，可以直接使用 Tailwind 类名：
<div class="container mx-auto px-4">
<h1 class="text-3xl font-bold text-gray-900 mb-4">
Welcome to Builder6
</h1>
<p class="text-gray-600 leading-relaxed">
Build pages with ease using Amis and Tailwind CSS.
</p>
</div>自定义 Tailwind 配置
可以通过环境变量加载自定义 CSS：
B6_PAGES_CUSTOM_CSS_URL=https://cdn.example.com/custom-tailwind.css性能优化
页面缓存
使用 LRU 缓存优化页面加载性能：
# 设置缓存大小
B6_PAGES_CACHE_SIZE=1000DataLoader
使用 DataLoader 优化数据查询，避免 N+1 查询问题。
使用场景
- 管理后台: 快速构建管理后台界面
- 数据看板: 创建数据可视化仪表板
- 表单应用: 构建各类表单应用
- 工作流界面: 工作流审批界面
- 报表系统: 动态报表和统计页面
- 移动应用: 响应式移动端页面
Steedos 依赖
该模块依赖以下 Steedos 对象：
objects:
- b6_pages # 页面配置
- b6_projects # 项目管理依赖项
主要依赖
liquidjs: ^10.24.0 - Liquid 模板引擎dataloader: ^2.2.3 - 数据加载优化lru-cache: ^11.2.4 - LRU 缓存tailwindcss: ^3.4.19 - CSS 框架autoprefixer: ^10.4.23 - CSS 自动前缀cssnano: ^7.1.2 - CSS 压缩
Peer Dependencies
@builder6/core: ^3.0.10 - 核心功能模块@builder6/moleculer: ^3.0.10 - 微服务框架@nestjs/common: ^11.0.0 - NestJS 核心@nestjs/core: ^11.0.0 - NestJS 核心@nestjs/swagger: ^11.0.7 - API 文档@steedos/auth: ^3.0 - Steedos 认证@steedos/objectql: ^3.0 - Steedos 对象查询
开发
构建
npm run build监听模式
npm run build:watch格式化代码
npm run format参考资源
License
MIT