翻译:
Npm上公布为
@bettercms-ai/ui。 。 。 .
共享页面构建器块组件用于BetterCMS. 包含 7 个核心块类型的演示文稿仅反应组件: 标题, (中文(简体) ), 文本, (中文(简体) ), 图像, (中文(简体) ), 按钮, (中文(简体) ), 空间器, (中文(简体) ), 列数,以及 视频。 。 。 .
这些组成部分是故意的 哑巴 (只介绍)——没有选择状态,没有工具栏,没有内含编辑. 这种逻辑存在于管理应用程序中(bettercms-admin) (中文(简体) ).
设计哲学
此套件跟随 shadcn/ui工作室 模式 :
- 每个街区都有 多样式变体 财务报告和审定财务报表 动画预设 它可以组成.
- 组件归你所有——复制,修改,自由延伸.
- 包是一个 起点,而不是锁定的依赖.
- 动画和风格变化工作船 后MVP。 。 。 .
块类型
| 类型 | 构成部分 | 目的 |
|---|---|---|
heading | Heading | H1-H3 文本标题 |
text | Text | 丰富文本 / HTML 内容 |
image | Image | 带有其它文本标题的图像( C) |
button | Button | 带有变体的 CTA 按钮 |
spacer | Spacer | 垂直间距块 |
columns | Columns | 有嵌入区块的多栏布局 |
video | Video | YouTube、Vimeo或本地视频嵌入 |
使用量
import { BlocksRenderer } from "@bettercms-ai/ui";
import type { ContentBlock } from "@bettercms-ai/types";
// Use with @bettercms-ai/types block JSON
const blocks: ContentBlock[] = [
{ type: "heading", id: "1", props: { text: "Hello", level: 1 } },
{ type: "text", id: "2", props: { html: "<p>Welcome!</p>" } },
];
export function Page() {
return <BlocksRenderer blocks={blocks} />;
}
带有自定义块渲染器( 如 admin app 添加选择状态)
import { BlockRenderer } from "@bettercms-ai/ui";
function AdminCanvas({ block, isSelected, onSelect }) {
return (
<div
onClick={() => onSelect(block.id)}
className={isSelected ? "ring-2 ring-primary" : ""}
>
<BlockRenderer block={block} />
</div>
);
}
添加新块
- 创建
src/blocks/MyBlock.tsx - 导出自
src/blocks/index.ts - 添加条目到
src/registry.ts - 更新
src/index.ts
添加动画变体(后MVP)
每个区块最终应暴露:
animation道具(例如,"fade-in", (中文(简体) ),"slide-up", (中文(简体) ),"stagger"(中文(简体) )duration螺旋桨(毫秒)delay螺旋桨(毫秒)
这些是通过 Tailwind 键框在 tailwind.config.ts。 。 。 .
发展
# Install dependencies (run from backend root)
bun install
# Type-check
bun run --filter @bettercms-ai/ui typecheck
# Add a new shadcn/ui component
cd packages/ui && npx shadcn@latest add -p ../../ button
关于 npm 出版的说明
发布至npm. 管理器和网页重置器使用自己的本地shadcn/ui拷贝用于非页面构建器UI(Dialog, Sheet, Table等);这个包搭载了页面构建器块和渲染器.