@junegod/label-react-designer

React 标签设计器组件包，提供开箱即用的“设计器内核 UI”（不包含标签库列表页），并支持业务扩展点。

安装

pnpm add @junegod/label-react-designer @junegod/label-core react react-dom antd

最小示例

import { useState } from "react";
import { LabelDesigner } from "@junegod/label-react-designer";
import { createDefaultTemplate } from "@junegod/label-core";
import "@junegod/label-react-designer/style.css";

export function Demo(): JSX.Element {
  const [template, setTemplate] = useState(createDefaultTemplate());
  const [rows, setRows] = useState<Record<string, unknown>[]>([{}]);

  return (
    <LabelDesigner
      value={template}
      onChange={setTemplate}
      printDataRows={rows}
      onPrintDataRowsChange={setRows}
    />
  );
}

扩展能力

• dataAdapter：对接模板加载/保存、字段列表接口。
• toolbarSlots：插入头部自定义按钮区域。
• actionOverrides：覆盖打印预览弹窗中的操作行为。
• inspectorExtensions：扩展右侧属性面板分组。

字体策略（可选加载）

当前包默认不内置大体积字体资源，减少安装包体积。
如果你需要特定字体，请在业务项目中按需引入，例如：

import "@fontsource-variable/noto-sans-sc/index.css";
import "@fontsource-variable/noto-serif-sc/index.css";