@composy/portal-core

企业门户编辑器核心模块 - 门户页面可视化搭建与展示

功能特性

• 可视化门户页面编辑器（拖拽搭建、栅格布局、组件调整）
• 丰富的内置组件（待办、公告、日程、快捷入口、数据卡片、图表、嵌入、时钟）
• 主题切换（亮色/暗色）与 LDesign token 集成
• 支持自定义 Widget 注册
• 响应式布局与碰撞检测

安装

pnpm add @composy/portal-core

快速开始

import { createPortalEditor } from '@composy/portal-core'

const editor = createPortalEditor({
  container: '#portal-editor',
  layout: {
    columns: 12,
    rowGap: 16,
    colGap: 16,
    items: [],
  },
  theme: 'light',
})

editor.on('change', (layout) => {
  console.log('布局变化：', layout)
})

editor.addWidget('chart')

Vue 使用

<template>
  <LDesignPortalEditor v-model="layout" theme="light" />
</template>

<script setup>
import { ref } from 'vue'
import { LDesignPortalEditor } from '@composy/portal-vue'

const layout = ref(null)
</script>

Class 命名规范

所有 DOM class 使用 ldesign-portal-* 前缀，遵循 BEM 风格：

| Class | 说明 | |-------|------| | ldesign-portal-editor | 编辑器根 | | ldesign-portal__sidebar | 侧边栏 | | ldesign-portal__widget | Widget 卡片 | | ldesign-portal__widget--selected | 选中状态 | | ldesign-portal--disabled | 禁用状态 |

CSS 变量

组件使用 --ldesign-portal-* CSS 变量，默认值引用 LDesign color/size token：

--ldesign-portal-color-primary: var(--ld-primary-600);
--ldesign-portal-bg-page: var(--ld-bg-page);
--ldesign-portal-border-color: var(--ld-border);
--ldesign-portal-text-primary: var(--ld-text-primary);
--ldesign-portal-radius-lg: var(--ld-radius-lg, 10px);
--ldesign-portal-spacing-md: var(--ld-size-4, 16px);

Style 加载

// 使用默认主题
import '@composy/portal-core/dist/style.css'

构建产物

| 目录 | 说明 | |------|------| | dist/ | UMD 格式（含 min.js） | | es/ | ESM 格式 | | esm/ | ESM 格式（preserveModules） | | lib/ | CJS 格式 |

API

createPortalEditor

createPortalEditor(config: PortalEditorConfig): PortalEditorInstance

PortalEditorInstance

• getLayout() / setLayout(layout) — 布局读写
• addWidget(type, position?, size?, data?) — 添加 Widget
• removeWidget(id) / select(id) — 删除/选中 Widget
• setTheme(theme) / setDisabled(disabled) — 主题/禁用
• exportLayout() / importLayout(json) — 导入导出
• on(event, handler) / destroy() — 事件/销毁

内置 Widget

| 类型 | 说明 | 默认尺寸 | |------|------|----------| | todo | 我的待办 | 4x3 | | announcement | 公告通知 | 4x3 | | calendar | 今日日程 | 4x3 | | shortcuts | 快捷入口 | 4x3 | | dataCard | 数据卡片 | 4x3 | | chart | 趋势图表 | 6x3 | | iframe | 外部嵌入 | 6x4 | | clock | 时钟 | 3x2 |

验证

pnpm --dir libraries/portal/packages/core run type-check
pnpm --dir libraries/portal/packages/core run build
node libraries/portal/scripts/check-package-outputs.mjs all

License

MIT