Skip to content

Cell - Widget 组件 ​

@celljs/react 基于的前端基础设施。应用很少直接依赖它;安装 @celljs/react 会把它带进来。

  • 前端目标。它的 package.json 声明 cell.targets: ["frontend"],这让工具链在安装 UI 包时构建前端。
  • 小部件。@Widget(area) 或 @Widget({ area, priority, component, id, rebind }) 为命名区域注册一个组件;WidgetManager.get(area) / render(area) 按优先级返回它们(@celljs/react 的 <Slot area> 渲染它们)。小部件也可以在 widget.widgets 配置中声明,以小部件 id 为键(area、priority、visible、props;props 中的 ${...} 在每次渲染时计算)。id 默认为装饰的类的名字(下面的 LogoWidget)。WidgetFactory 渲染 type 等于自身 type 的模型。
  • 主题。Theme 组件和 ThemeManager,由 widget.themes 配置。当前主题的 id 保存在 localStorage 里;加载时选择那个主题,否则 default,否则第一个。
  • 语言环境。Locale 组件和 LocaleManager,由 widget.locales 配置。当前语言环境的语言保存在 localStorage 里;加载时选择那个语言,否则浏览器的,否则第一个。

两个管理器都有 current、setCurrent(value)(也保存)和 onCurrentChanged(listener),一个 @celljs/core 的 Event,返回一个 Disposable。@celljs/react 的 useLocale() 在组件中读取和改变语言环境。

ts
import { Widget } from '@celljs/widget';

@Widget({ area: 'header', priority: 100, component: Logo })
export class LogoWidget {}

所有导出都仅限前端(@celljs/widget 解析为 lib/browser)。