react-big-screen 0.0.0 → 0.0.3

package/README.md

@@ -1,76 +1,366 @@
-# Big-Screen
+# React-Big-Screen
 
-一个基于 React 的大屏看板 No-Code 搭建平台，用于快速验证原型。
+react-big-screen 是一个使用React开发的`前端可拖拽大屏`开源项目，通过简单的拖拽和配置即可搭建页面。本项目已经实现了大部分的核心功能，包括：拖拽系统、多页面管理、组件联动、远程组件、预览页等（详见下文）。
 
-> 状态：`开发中`
+## 页面截图
 
-## 在线预览
-[https://tangjiahui-cn.github.io/big-screen](https://tangjiahui-cn.github.io/big-screen)
+编辑：
+
+<img src="./imgs/edit.png" height="200">
+
+预览：
+
+<img src="./imgs/preview.png" height="200">
+
+## 核心功能
+
+详见`掘金专栏`：[前端大屏原理系列](https://juejin.cn/column/7492086179995811855)。
+
+- ✅ 拖拽系统。
+- ✅ 成组、取消成组
+- ✅ 鼠标范围框选
+- ✅ 右键菜单
+- ✅ 快捷键
+- ✅ 多组件联动
+- ✅ 多页面管理
+- ✅ 自定义组件
+- ✅ 自定义属性面板
+- ✅ 自适应预览页
+- ✅ 容器组件
+- ✅ 加载远程组件
+- ✅ i18n国际化
+- ✅ 可撤销历史记录
+- ✅ 导入、导出文件
+
+## 功能 demo
+- [点击访问：多组件联动](https://tangjiahui-cn.github.io/react-big-screen/#/create?example=multiple-components-interactive)
+
+## 快速开始
+
+注：仅支持node版本20+、react版本18+
 
-## 如何运行 
 ```shell
-# 安装依赖（pnpm@16.20.1、pnpm@7.30.5）
+pnpm install react-big-screen
+```
+
+```tsx
+// index.tsx
+import { EXAMPLE, RbsEngine } from "react-big-screen";
+import * as React from "react";
+import "antd/dist/antd.min.css";
+import "react-big-screen/es/style.css";
+
+export default () => {
+  const domRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const engine = new RbsEngine();
+    
+    // 挂载到DOM
+    engine.mount(domRef.current!).then(() => {
+      // 挂载成功后，导入JSON文件
+      engine.importJSON(EXAMPLE.classic);
+    });
+    
+    // 销毁
+    return () => {
+      engine.destroy()
+    };
+  }, []);
+
+  return (
+    <div
+      ref={domRef}
+      style={{
+        width: "100vw",
+        height: "100vh",
+        position: "fixed",
+        overflow: "hidden",
+      }}
+    />
+  );
+};
+```
+
+## 本地调试
+本地启动一个项目，用以调试或者开发功能。
+```shell
+# 拉取代码
+git clone https://github.com/tangjiahui-cn/react-big-screen.git 
+
+# 进入目录
+cd react-big-screen
+
+# 安装依赖
+# node@20.15.1、pnpm@9.13.2 （或：node@16.20.1、pnpm@7.30.x）
 pnpm i
 
-# 运行
+# 本地运行
 pnpm dev
 ```
 
-## 功能 <font color="white" size="3">（开发中）</font> 
-
-- ✅ 拖拽移动、缩放。
-- ✅ 快捷键。
-- ✅ 批量处理组件。
-- ✅ 自定义新组件。
-- ✅ 自定义组件属性配置面板。
-- ✅ 自定义组件右键菜单。
-- ✅ 鼠标范围框选。
-- ✅ 支持预览页面。
-- ✅ 成组/取消成组。
-- ✅ 布局组件。
-- ✅ 数据源。
-- ✅ 多组件联动。
-- 支持子页面。
-- 支持远程组件包。
-- 可撤销历史记录。
-- 收藏夹。
-- 国际化语言。
-
-## 设计理念
-
-`数据`与`逻辑`分离。
-
-## 核心概念
-
-读取 `json格式对象`，将`components`与`componentNodes`合并渲染到页面，渲染过程中注册`instance`，编辑器通过修改 `componentNodes` 生效变更。
-
-- engine: 全部api的集合，统一管理所有的功能。
-- component: 注册的组件模板。
-- componentNode: 组件的数据实例，也是完整导出、保存的数据。
-- instance: 组件运行时的行为实例，管理单个组件所有的内部行为。
-- store：存储全局数据（不做复杂action，仅用作响应式变量触发引用位置更新）。
-- 实例：等于component + componentNode + instance。
-
-## 处理事件
+> 在线预览：[https://tangjiahui-cn.github.io/react-big-screen](https://tangjiahui-cn.github.io/react-big-screen)
+
+## 创建一个自定义组件
+
+开发自定义组件，只需要3步：
+- 创建渲染组件 `Component`。
+- 创建属性配置组件 `Attributes`。
+- 注册自定义组件对象。
+
+### 1. 创建 `Component`
+使用内置的`createComponent`创建自定义组件，可以享受编辑器类型提示。
+```tsx
+import engine, { createComponent } from '@/engine';
+
+// 配置属性值类型
+interface Options {
+  value: string; // 显示内容
+}
+
+const Component = createComponent<Options>(props => {
+  const { options, width, height } = props;
+  return (
+    <div style={{ width, height }}>
+      {options?.value}
+    </div>
+  )
+})
+```
+
+### 2. 创建`Attributes`
+创建属性配置组件，可以使用`createAttributes`或`createAttributesByConfig`。（推荐使用`createAttributesByConfig`，享受更高效的表单配置式开发）
+
+```tsx
+// 使用 createAttributes
+import engine, { createAttributes } from '@/engine';
+
+// 属性配置组件
+const Attributes = createAttributes<Options>(props => {
+  const { options, onChange } = props;
+  return (
+    <div>
+      <span>显示内容：</span>
+      <input
+        value={options?.value}
+        onChange={e => onChange({ value: e.target.value })}
+        maxLength={100}
+      />
+    </div>
+  )
+})
+
+```
+```tsx
+// 使用 createAttributesByConfig
+import engine, { createAttributesByConfig } from '@/engine';
+
+export default createAttributesByConfig<Options>(
+  [
+    {
+      key: "value",
+      label: "显示内容",
+      component: "input",
+      options: {
+        maxLength: 100
+      },
+    },
+  ]
+);
+
+```
+
+### 3. 注册组件
+```tsx
+// 注册组件
+engine.component.register({
+  cId: 'demo-text', // 组件id（必填、唯一）
+  cName: 'demo-文字', // 组件名称
+  x: 0, // 初始 x
+  y: 0, // 初始 y
+  width: 200, // 初始宽度
+  height: 32, // 初始高度
+  component: Component, // 模板组件
+  attributesComponent: Attributes, // 属性配置组件
+})
+```
+
+## 创建一个容器组件
+容器组件：一个移动时会同时改变所有关联组件位置的组件。
+
+### 1. 注册容器组件
+创建一个容器组件，`创建Component`、`创建Attributes`和普通组件一样，仅需要修改注册对象。
+
+只要注册对象`panels`属性有值，就被认为是一个容器组件。运行时若有组件挂载到该容器，则会设置挂载组件的 `panelId` 为 该容器组件的`currentPanelId`。（注意：panelId为引擎自动绑定请不要修改！）
+
+- panels：当前容器组件所包含的全部面板（panel是容器的一个面板）。
+- currentPanelId：当前容器组件展示的面板 panel 的 id。
+- panelId: 所属父容器 panels 中某个面板的id。
+
+挂载 / 卸载面板 api：
+- engine.componentNode.hidePanel：隐藏一个面板全部子组件
+- engine.componentNode.showPanel：显示一个面板全部子组件
+
+```tsx
+// 单面板容器组件
+engine.component.register({
+  // ...
+  // 只要包含 panels 属性就被认为是一个容器组件
+  // （value值由引擎自动生成，此处置空）
+  panels: [{ label: "特殊卡片", value: "" }],
+})
+```
+```tsx
+// 多面板容器组件
+engine.component.register({
+  // ...
+  // 只要包含 panels 属性就被认为是一个容器组件
+  // （value值由引擎自动生成，此处置空）
+  panels: [
+    { label: "面板一", value: "" },
+    { label: "面板二", value: "" },
+    { label: "面板三", value: "" },
+  ],
+})
+```
+### 2. 运行时切换面板
+
+```tsx
+/**
+ * 点击按钮切换面板
+ */
+import engine, { createComponent } from '@/engine';
+import { useEffect, useRef } from "react";
+
+const Component = createComponent<Options>(props => {
+  const { options, width, height, componentNode } = props;
+  const lastPanelId = useRef()
+
+  // 切换面板
+  function handleChange(panelId) {
+    if (!panelId || lastPanelId.current === panelId) return;
+    // 先隐藏上一个panel的所有组件
+    engine.componentNode.hidePanel(lastPanelId.current);
+    // 再显示当前panel的组件
+    engine.componentNode.showPanel(lastPanelId.current = panelId);
+  }
+
+  // 其他组件控制切换
+  useEffect(() => {
+    handleChange(componentNode?.currentPanelId)
+  }, [componentNode?.currentPanelId])
+
+  return (
+    <div style={{ width, height }}>
+      {componentNode?.panels?.map?.(panel => {
+        return (
+          <button
+            key={panel?.value}
+            onClick={() => handleChange(panel?.value)}
+          >
+            {panel?.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+})
+```
+## 性能优化
+### (1) 组件独立更新
+每个组件更新时，只会更新当前渲染节点，而不会更新所有组件。
+
+### (2) 拖拽优化
+单个或多个组件拖拽过程中，实时修改对应dom的位置，拖拽结束才会保存生效变更范围内的组件。
+
+### (3) 隐藏组件不渲染
+有些不显示的组件，例如处于容器中、或者show设置false等，不会在页面上渲染。等到外界控制其显示时，局部更新其节点重新渲染，而不会影响所有组件。
+
+### (4) 远程组件包优化
+组件包下载后，源码存储在浏览器端`IndexedDB`中，不会占用内存。下载时，才会从浏览器存储中取出。
+
+### (5) vite 构建优化
+手动分包，将`monaco-editor`等固定不变的大型包单独划分chunk便于更好的利用缓存。<br>
+一些随着按需加载体积不断增大的包单独划分（例如：`antd`、`ahooks`等），避免每次改动都更新其他未修改包。<br>
+
+### (6) 按需加载
+同时`nginx`设置`gzip`，体积可再次减小`75%`。<br>
+
+常见库替换：
+- `dayjs`：代替moment。
+- `lodash-es`：代替lodash。
+
+大型库按需加载：
+- `echarts`：减小 46%。1050kb => 570kb。
+- `monoco-editor`：减小 36%。3600kb => 2308kb。
+
+### (7) 使用“事件委托”实现拖拽
+在编辑器容器处监听`mouse`事件，通过`dom.dataset.id`获取实例的一切信息，并借此实现组件移动、放置layout、范围框选中等。无需创建实例数量的事件监听器，节省内存提高性能。
+
+### (8) 合并事件
+一个事件同时运行多个功能。例如 `startMove` 支持 `hookQueue`，一次点击流程（`mousedown` -> `mouseup`），即可依次运行每个功能注册的回调函数，无需拖拽实例、选中实例功能各自创建一个`mousedown`的事件监听。
+
+### (9) 异步组件
+`component` 和 `attributesComponent` 支持传入`React.lazy(() => import("./...")` 形式，以支持异步组件，减小首屏加载包体积。
+
+### ...
+
+## dom 事件
 点击事件只涉及到: `click`、`mousedown`、`mousemove`、`mouseup`。
 
-## 相关项目
-- [lowcode-engine](https://github.com/tangjiahui-cn/lowcode-engine)
-
-## 开发计划
-
-### v0.0.1 （进行中）
-完成基本大屏功能，支持拖拽移动设计大屏页面，修改页面组件属性，并支持上传导入、导出，可预览。
-
-- ✅ 基本布局
-- ✅ 拖拽组件到页面创建
-- ✅ 内置几种类型组件
-- ✅ 选中组件/范围框选
-- ✅ 组件锁定/解锁
-- ✅ 拖拽移动/缩放
-- ✅ 编辑器 右键菜单禁用
-- ✅ 组件右键菜单（复制、删除、上移一层、下移一层、置顶、置底）
-- ✅ 完成页面右侧属性面板
-- ✅ 完成预览页面
-- ✅ 成组/取消成组
-- ✅ layout类（容器组件）
+## 多组件联动
+
+自己单独实现了一套事件机制。`component`中声明了暴露事件列表`exposes`、触发事件列表`triggers`。
+
+- `exposes` 是暴露给外界，用来调用内部事件的端口。
+- `triggers` 是声明内部可以触发的事件，用来在 \[属性面板-交互\] 中读取该列表进行配置与其他组件联动。
+
+关于组件内部使用？
+
+在 `props` 中获取 `useExpose`、`handleTrigger`。通过 `useExpose` 去定义运行时暴露的事件行为，`handleTrigger` 去触发内部事件的执行。
+
+
+## 多页面管理
+
+多页面，主要适用于一个大屏多个子页面的场景。
+
+> 展示一个页面时，其他页面会卸载，不渲染而只保留数据，因此不会造成性能损失。
+
+若要控制多页面切换，需要开发`导航组件`：
+- `usePages`：实时获取所有页面
+- `useCurrentPageId`: 获取当前页id
+- `selectPage`: 选中对应页面（即切换页面）
+
+常见场景：
+- 单大屏多子页面：顶部的导航栏tabs，点击打开目标子页面。
+- 类SPA站点：头部面包屑导航，点击跳转对应页面。
+- 单页面文档站点：导航下拉框，快速打开对应文档页。
+
+> **为什么会出现子页面，容器组件难道不行吗？** <br><br>
+> 答：子页面会完整的加载、卸载、刷新一个页面的全部组件，而容器包含的所有组件一直存在（只会随页面卸载而删除）。
+
+## 设计复杂页面
+
+若要实现复杂页面，则需将页面元素抽象成 一个个的实例，多个实例通过`暴露事件`、`触发事件`相互沟通。
+
+在 `react-big-screen` 中，事件机制是一个十分重要的功能，甚至可以触发自身的 `暴露事件`!
+
+> 例如：设计一个中后台查询表格页。我们只需要准备`按钮`、`表格`，点击 `按钮` 触发表格暴露的 `查询` 事件即可。如果想要修改查询参数，则只需要设置解析函数。
+
+另外，有时候会用到多页面管理，在一个页面中支持切换多个子页面。 可以单独开发 `导航组件`，用于管理页面的切换、或当做路由面包屑等。
+
+## 远程组件
+
+通过远程组件功能，可以拥有个人资产。
+
+> 在 `src/common-module.ts` 文件中配置公共模块配置，以此减小远程组件包体积。
+
+加载方式：
+- 本地上传
+- 远程URL
+
+支持格式：
+
+- 支持 UMD 模块包。
+- 支持 AMD 模块包。
+- 支持 .zip 压缩包。

package/es/IInputNumber-D1VHHCf0.mjs

@@ -0,0 +1,37 @@
+import { jsx as o } from "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Input as n, InputNumber as m } from "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/antd@4.24.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/antd/es/index.js";
+function u(t) {
+  const { onChange: e, ...r } = t;
+  return /* @__PURE__ */ o(
+    n.TextArea,
+    {
+      allowClear: !0,
+      maxLength: 500,
+      placeholder: "请输入",
+      autoSize: { minRows: 3, maxRows: 3 },
+      size: "small",
+      ...r,
+      onChange: (a) => e == null ? void 0 : e(a.target.value)
+    }
+  );
+}
+function i(t) {
+  const { onChange: e, ...r } = t;
+  return /* @__PURE__ */ o(
+    m,
+    {
+      min: 1,
+      max: 99999999,
+      size: "small",
+      placeholder: "请输入",
+      ...r,
+      onChange: (a) => {
+        e == null || e(a ?? void 0);
+      }
+    }
+  );
+}
+export {
+  i as I,
+  u as a
+};

package/es/Line-_Oh8Pbbj.mjs

@@ -0,0 +1,146 @@
+import { jsx as a, jsxs as _ } from "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import b, { useState as S, createContext as g, useContext as k } from "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { SketchPicker as v } from "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/react-color@2.19.3_react@18.3.1/node_modules/react-color/es/index.js";
+import { Dropdown as o, Input as D, Row as w, Col as f, Tooltip as N } from "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/antd@4.24.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/antd/es/index.js";
+import C from "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
+const I = "_IColorPicker_p2bys_59", $ = {
+  IColorPicker: I
+}, P = "_customDropDown_t0e27_59", L = {
+  customDropDown: P
+}, x = b.memo(function(e) {
+  const { trigger: l = ["click"], overlayChildren: n, children: t } = e, c = typeof n == "function" ? n == null ? void 0 : n(i) : n, m = typeof t == "function" ? t == null ? void 0 : t(i) : t;
+  function i() {
+    var u;
+    (u = e == null ? void 0 : e.onClose) == null || u.call(e);
+  }
+  return /* @__PURE__ */ a(
+    o,
+    {
+      className: e == null ? void 0 : e.className,
+      open: e == null ? void 0 : e.visible,
+      trigger: l,
+      menu: {
+        items: [
+          {
+            key: "body",
+            label: c
+          }
+        ]
+      },
+      overlayClassName: C(L.customDropDown, e == null ? void 0 : e.overlayClassName),
+      onOpenChange: (u) => {
+        u || i();
+      },
+      children: m
+    }
+  );
+});
+function F(e) {
+  const { value: l = "white" } = e, [n, t] = S(!1);
+  function c() {
+    t(!1);
+  }
+  return /* @__PURE__ */ a(
+    x,
+    {
+      visible: n,
+      onClose: c,
+      overlayChildren: /* @__PURE__ */ a(
+        v,
+        {
+          width: "250px",
+          color: l,
+          onChange: (m) => {
+            var h;
+            const { rgb: i } = m, u = i.a === 1 ? m.hex : `rgba(${i.r}, ${i.g}, ${i.b}, ${i.a})`;
+            (h = e == null ? void 0 : e.onChange) == null || h.call(e, `${u}` || "#fff");
+          }
+        }
+      ),
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          className: $.IColorPicker,
+          style: { backgroundColor: l, ...e == null ? void 0 : e.style },
+          onClick: () => {
+            n || t(!0);
+          }
+        }
+      )
+    }
+  );
+}
+const T = "_iinput_1ak9s_59", j = {
+  iinput: T
+};
+function G(e) {
+  const { onChange: l, className: n, ...t } = e;
+  return /* @__PURE__ */ a(
+    D,
+    {
+      allowClear: !0,
+      maxLength: 100,
+      size: "small",
+      placeholder: "请输入",
+      className: C(n, j.iinput),
+      ...t,
+      onChange: (c) => {
+        var m;
+        l == null || l(((m = c == null ? void 0 : c.target) == null ? void 0 : m.value) || "");
+      }
+    }
+  );
+}
+const q = "_line_pevaq_59", O = "_line_help_pevaq_62", y = {
+  line: q,
+  line_help: O
+};
+function H(e) {
+  const l = R(), { labelSpan: n = l == null ? void 0 : l.labelSpan } = e, t = 24 - n;
+  return /* @__PURE__ */ _(
+    w,
+    {
+      style: {
+        ...e == null ? void 0 : e.style,
+        ...l == null ? void 0 : l.itemStyle
+      },
+      className: y.line,
+      children: [
+        /* @__PURE__ */ a(
+          f,
+          {
+            span: n,
+            className: C((e == null ? void 0 : e.labelTip) && y.line_help),
+            style: l == null ? void 0 : l.labelStyle,
+            children: e != null && e.labelTip ? /* @__PURE__ */ a(N, { title: e == null ? void 0 : e.labelTip, children: e == null ? void 0 : e.label }) : e == null ? void 0 : e.label
+          }
+        ),
+        /* @__PURE__ */ a(f, { span: t, style: e == null ? void 0 : e.childrenStyle, children: e == null ? void 0 : e.children })
+      ]
+    }
+  );
+}
+const d = g({
+  labelSpan: 3
+});
+function R() {
+  return k(d);
+}
+const J = b.memo((e) => /* @__PURE__ */ a(
+  d.Provider,
+  {
+    value: {
+      labelSpan: e.labelSpan || 3,
+      labelStyle: e == null ? void 0 : e.labelStyle,
+      itemStyle: e == null ? void 0 : e.itemStyle
+    },
+    children: e == null ? void 0 : e.children
+  }
+));
+export {
+  x as C,
+  G as I,
+  J as L,
+  H as a,
+  F as b
+};

package/es/ProgressList-B37WCaue.mjs

@@ -0,0 +1,4 @@
+const A = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfYAAAH8CAMAAAAUrn3oAAACalBMVEX///8UMFQqScoAAAAay9uEkqbs7vGkrrw6VbSyu8d9jKDb3+Y/Wq8NDQ3ByNJsfJPJz9xHYKxiYmKg5u7Q1d1ic4u2v9JQaKxq2eT39/jR8/YWFhZsbGxQUFBAQEDt7e2VlZUyMjIcHBze4ub9/v5VaoJGRkbGxsZlZWVidq+kr8hVVVUiIiKTk5Pa2tr6+vtLS0uhoaGCgoK8vLzU1NQmJiZ3d3dxcXE1NTUuLi4hzNs8PDx9fX1dXV2dnZ0czNtJSUnz9PSsrKx2dnbn5+fl5eXQ0NBgYGD5+fmHh4fY2Ninp6d/f3/w+/z29va/v7/y8vLh4eH2/P38/Pyfn5+BgYEqKipg1+JC0d+o6e7C7vOc5e3S0tKOjo7N8vY0zt3W1ta0tLRZWVng9/re3t6jo6OB3eeZmZn6/v7k+PqR4uuJ4Oly2uVW1eF6enq57PHKysp33Obc3NyLi4vr+fut6u/CwsLo+fvW9Pfv7+8vztzF7/SG3+hF0d870N42z92vr6+GhoZNTU3a9fm87fKy6/AtzdwjzdtoaGjJ8fXp6etO098qzdyqqqrs+vul5+5S1OBK0t62traxsbGFhYU4ODjG7/R+3edk2OK5ublb1uHX19fOzs5paWnx8fHj5uwpSLfr6+sjQqqC3ugfPZA3T22apsNqfbIhQJ8cOYIuR2YWM2KW4+zS2OnJz+XW2+MoSMOWorIwTa/Fy9irtMqttsOOm76AkLl1hrVbca9LY6xbboYZNnDq+vu7ws53hp1LYHsbOHrN096osr+NmaxxgphUaZRoeZBSZoAoQmJCXahXbaZmeJpFWnYp44bqAAAclklEQVR42uzZ609TdxzH8U/4frMs2c6SlSdAKZfmpCVpoY47LVJYKZRbpVQBGSgXnYg6UVDBTeecIl5wm7I5Nl1mlmxPdsuW7Jbsf9u59JT2wC5PjmPr9/Xg5JdDfOI739/vdwBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIRyQmkaulnoAd5bSMFW6qwInACQ7QpkXwXL8ndKsEMTe1Kr48Y5iSHbHUR0AcIh6M8HuUO0T8gN9dH0YM7UaRanVpQBca82xhCw3WbwA6pQcEYhnqJiLAZQxl8Hm2Cg1xJSlpaUAdfVWmNnVdgokoHtKU6WtTYDaR22pAG17AGDGl2MKQDvp2qfq6+sD1Ks99Zc9FKmxKE0oKGfHwtHxmzvXX9+Nhu+uwHklXGbUL4Hd09GaWBDHPz1uZde9Qx2GWgp0HDp0Rx9tqgh4QxkH9Ow7zcQCdD32EJolOgZTD3XAsq+wsh9mvneU+Zx9XcJ89BbzBTjNGnR96u0qQ1p25URedjR007YGaA7EA7Q/I2hltztArwIhl8sVpF7tWdjZ55gPA2VRPpK/fo/DK8ZzBI4rMwe9xNZdPTQN2LPr0sd0dbSuPZNo9ySBxqXOzs4g+To7fQ2rf5G9lNxtOiIz++wrltGCyl7Mp805v5u/HuObZopTcJw16LbjPaW462zZk6RphIlaoGumSCVQqTlEKe2ZBBoVmwfb2fuwWpdAcyZ7joLK/rG5jV/iaP76Ft+H5ms+A8dZg65Pfa5FxZvKz54YHPRo2ZOrmlKlBoZXqCkOhSzvAPEaU5Ayi8e52TtoOpu9ttJSUVDZH/ECNEeYh/LW4+bknea38eecvtb53Ys7NvkBLft+0mwGAzBt6NkrZmZctDHzqp7dsl9Blj17YZ/tN/jyfUA9w1yWt37En6jA72schePM4Fb9XKXYNfvFE0rbicWIDxkhQPFMTsbIP7mYyX5+o9LMHh/sl+w7zF/htbcWxpl5JW89F+YrC1+sRTmMZ+FPLvMdPbFgiAbs2YEmDxAIIuONgbxNXrdO5zPZKWDLPkXHstm9FZYC+24fucuar6/yfP763cva8tZZHofjrN72PR7d1BwLxunA7tlbKA1DI8WgzKZSb9B0atrMPkw+a5Ovp55M9qW+mJ7dRaFs9jaPpcCyA0M3b9xHdG3Heu7C7RH9luU8+03eMkXatD+g/gFK5mb3q0b2g5RCQxyAS1soFQMDATo40GFmP0gbVvYu93UAocVyIirXsqtN1Sj4Tf7dCyvQ3OT389dvXlg2r3QLcFzx7t/tUJva0FVZ7k4NA67t7FU0qWeP++kheiNAimZh2+S7vEqplR1V5Admibzt0wg1N2zQpv9BQ3NhZ/+I14aAkXs8kb8+xWMqUMbhZTitjNka+Xx+qgUmqTxYkYTGyk6j/YtupYkWlXV4W4AYLQKhRENfaeLOYCqRBtBCB5HN3qX4gAdLjdbXgburlQbThZ0dH/C9Rx9H+ZxtPRTm8dfvMp+F0/Qp37U6aqgbjUHqP0CeEIDRgPkyUuki8vaeGG6hQ3QAlVQBYHKW3I3YIGruBh5TRIWmU4GunS4iIz5IyhaGPRRIGNnJbSmsX9dgpIQ1Y/P29Zx+o48uwDn2gx02w3Qdx4m2gBnqvejxUAs0MU8Sj2e6oUkp1Kaij2bwOELUsgpg2kO0hHhgEqgZbSKf2bo5DsO0j6i1DkC6nPYl9OwRl6XgrnQjH01c2m29fOP2EP5FpVUNmKxohGbzRL/P5zoPzWoIWY/btVd1h1RUtg7GYfJHXoXh4Oxscz/ydDWtL8KgrvemgUblOCw1FRD/e6oKIYQQQgghhBBCCCGEEEIIIYQQQggh9ryXvnrxebGn/PZTAg77pUjsPZ//CEf9VCT2os+74KTPi8Se9Asc9EKR2Jt+gIO+LRJ70/dw0DdFYm/6HA4KFYm96Vc46ecisSd9B0f9WiT2oC/hsC9/KBJ7y/cv/wjnJZ8TewqEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhPgfSV5cKgcwuVWKbf1KLfJNVcSTFQeRrzQrBPGfsfGkM0hESgoIUBLb2smPPN0UTAzTIPK5yeIFcFzJ0Q6RR8UzVsLFAMqYYddMXi/1NaaBkLIPhuP7dAp17svYgq6cHiKT/WESaCdd+1R9fX2AerXnFIAqCtRYqByFbuX01VvvL5i1T45F+fJrMNy+wjw+AeeVcBmAYi6BTWkIJ+hTaC5SFQwd1RqiYLXlITSNVAEzu9quF52JBeh6zPjREh2DqYrqYJHsZ6McPsp8ZQjAvLa4zMb0YY45HGZegePKONO9GHZW9sGcZEgp7iRyJSPUY2YvnSXveWgO0KtAyOVyBalXe0p2uzX+Gli+yvqMv85nhvAmR08CuMKn5tUFvqrCafqgW1OfJxYIVJMvEJhEdRBZqo/e6DeZHUPXyQcj+9MINcWRzV5K7jYdkZm9/hVLwWef48vGzPMZYIh5DsA5LtFfHNWDX+ULcJw+6NbU5/KMjhIFR0cXu6kFWVW0DZr0LJHHyB4IUsVT5Gbvw2pdAs1k/3cFn30+GtbzHuZHwBH+BJqTPA4s6OOvv38dDrJf60qQL+mmawAGaAsIwbBFRA1+w34CoD6hiKJnXyWizRBs2TtoOpt9sdJS8Nlxms+sLN+M8grwntZex1E9xA1obvMZPAtsu9blTLYf2E9JtNZA95CUXhqGzsz5GXUmgx6o10bJ6wd2zy5n+w6nWBO+bRztr0F3me9jnN+F5hIfxZ9y/HjvchP5lMa0/vnmURLG3CuTteQ1KQRNbSmCnuFqIhqEZP/n/+F87yrz1Uv6of4edEf5JN7mOWiGeA3PAnPxzsu8GqBB6mnz+qkK6DA2eq8yiVpqbjdUE0zatPvK+3fNPkXHstnbKiwFn/0IRyeA+RK+ArzGb0EXZeATftP8uLqLZ6A4U52Rq542tQ+4nr5NfU7jtA6gZxKozd3krewqhvOzL/XF9OwuCmWz+zyWgs/+iE9Bo4Z5GRNcYk7428AXfBiam3wajrOm3HaTj9OHCS07EAlC06qkYail/S7DaE52WNmftpxHaLFcv61r2dWmasgmv1NJ5jxf4xWc5PCIEWEMOGze5ca0HzvHfrAXI48vBT17JbVAs0mPrewRk3u37NN0DbNE3vZphJobNmjT/6ChWbLb3OSjl6Bf4u8BeF8f/ZFbPAEM3eKP9CMgvAzH/dlv6UIwsr9KW1CPPXTRFDT2Td6e/SL58WCpEQa/293VSoNpyW4zMs7hsXMfmFeqS1H+4FzY3NfPMo99zHwBTtOn3Bp5Oz37nWryVJNuny17S172JM2mtecTSiEjPkjKFoY9FEgY2RW3peCzY/70LWZ+ewJG67C2fn9k+8PudTjHfrBj9+z9RG5f7KB/1UOJnOzTT9bJm5sdPiJFIRqFadpH1KoPeLqc9iX07B6XRbJrfl+Zzw7/kRtzyLj/5sQy/mUDTam0vxKGKl/cfBfsAtDd1ha5BlPbfuhvass176Rg6mpaX4RBXe9NAx3KeVia5O/tBUBVIYQQf7BfBykNBFEQQH/3VlEEbyDeJSuvmDA4EQ0qLiQiguJCJKfKIfp/mMB7VygKqgAAAAAAAADgFP1+XJ0z4PB3m+zyPartO6OmXUs2v0apbWfc1LLNq6i06SR4bNneotC6s8y6/0Shl06GTcv2FIWeO8uMfY5Cq06G+5btOyo9dBLsWrbrKPXZWeCQ30axvQ83aPpqyf4vot76jAE36e4CAAAAAAAAAAAAAAAAAAAAgCN79vLTRBTFcfyXnLOdTdlUC2jJhJrUtggUS6lURAR5Ka2B2lJAECKCioigIkIEBREVQRHwkRD/UefOcAtO8bEZjXI/CQ2EdtNvz7k3qfL/CMUuAJgsxH7NWgC/4UhOCMo/5RyJwjGahGT+6cMe/WzpPoXI8ZBUAmBQ2ycGBbrt9z/KzQUAjrIbB4lodQAa6ClMg2WCRmfLdm0BemS/fgAxEmLZ8vJyPzUaj1kAx8l/QqJCHHYTo4v8fHMKwnBXnB9lYHoxw5xKw3luPgqg4MDul6gVwgnqhlDrNRCd9ErrOMC1ej89rTf/dY+uQxDZg5BUdj3FPBvl6DyAG73Mj9icPgwwR6PMD+C4o8xy6vOU0TKESmqE1KF52vELl+gcEHK5XCep0XhU2e1GeHUAN9zcBWCIb7VhmuPDAGZ45IZ+k5/ocJoYdDn1NhVUmOsv51ovpdvNluDPsx8hT7VAZGUvPyUd+uwTHJ8CkHBv6mhjHgBwV1S4w70i+BO+D+cV7B7v9u5BTesAPho/qNTIJ5f1Hhjmrth82st+EQ+DTagi++sOffY0jwIJmHp4G4ZhTgE3OQPDVR7CDzl9rXsYpgoAEfpihtQqYdgiogqf6QzB0Ek2sf3Za6kvl33smHTos2c4c3OFo10PALzhDxA4LkIswPCCb8FpctDl1EuhMsqai/42hFfkaQDWSWukyzBZOTsqhQitVe46n59dne02o5zilVXrSjfEGQiP+DVSPA/DFPfCeQcf7zvhRhhKaQemrBZEC2ndASqxaASpm/zIUdl/aZvNEd/kGXGov4HQy8OY5QEY2vg5nCa3vH3a8fAIgElqBc7Xtou5RqhE60aAqmImL0Eqoj4R/33Qnj1L13PZq4ulQ5/9LjMMepwTyPBjCHEGtnna2r4v4ST7nQ52ulc7JhZ9OUwXuoHA3pK33fibqVSX2e9drBfZXRTKZS8tkg599gwzhBT3IM1ua8Jnga98FYZnPArHySkXB7zdIGVh6KcOSAE64zJ1yuxNYW0ZQowGYQiNFYrbupFdD3uhlny+tNFYENM+zNGEGaELuGrd5bo4A8cVMMv4dh1aTRKGBurfl73G4pHZb9MpmNpLtB3zQ0IlsT6Eqipe0TvfWkWVym43a77ZI5wCsMojQGKR00DbIm8APRydgOPyr/FSe43V6ktzP/lgyV/y16hIB1A37pvz02kAa/cqYfJ5PHURak2q7HZp5luPX7KIjKk4v70btfb6HeauTeb7cJy8zrlhdzlC1eVLZZ0keJP27Kdptzq5+ovDtGscUkMraVu4XET+JjO75pFUdmysMHPvBszWUWZeTUAYYcMQnGM/2JGfnQya118fWP8UoCvfZe/7vEQlEE6JJ3UW+09nWybH13KnQV8pUSQIIFlIZU0ie5FLUtkN8wu5TZ7oWRjArtfT6Qn8XWPNyyFYmmpaYGk5WQfgfHV1zRyEuuBOEjnFWVjqwktjMOlLjUmgVhuHFFbft/9nksin61AURVEURVEURVEURVEURVGUb+zTSQrCQBBA0eraiZsEkoUHcO2RG4KzKA6gEgQndOedPEVBNfXfFT4fAAAAAEo0vPR1IP23de9+EmtnjWaZ/GuzmJprPCV0H4upowb0TP69xVDWiErY/SGGdhpRl/xbi6GtRlRC9pkYGmlE0+TfRywtNKBN8q8SS5Naw1kl/w5i7LrXULpbcu83EHtNFcir8S8LAAAAAAAAAAD4s2enP3HUcRzHP/D96iNHk1mjy26XY7NZNRyrXNvuVhbkkqsqotwgoGsXipVqrYItFKq1h7ZNippGa2K9jUe8EuPxRBNN9I9yZn47DKyDYMyY1f2+HgzzhCfz5vv7/WYQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEL8X4S6YImGkHW2KwZgbCAGU105siIlG2IQ/22aDksnXYVSS6EDQDWVYWoc0DVk1dAGHcBj2ib7IXYSwb/M5/cBCBhX9+yrZNsDw1OULLOy62GVPUmmnlrDXtpvXFcAlFPl7TbaA+Hm1LlzR2HKDKZ4cRSWM8eZh0bgPeaAWZ997tkff0KJP7ECUw81bsle3bpOb7bWw9AcRlY51cAm2d31nWZ+HoaDk8yLrJ7/DHMiwfwsPBdgPwx+9rlmR916G4B2GoBy371bsgMPURtQr+s6acZlXLLvziGeVNnTPN+HJU5lABznuYORWT4Rged8dvcANjtSWkrB0lZ00GVrU++AzS17HVXtM1Gzyl57l02yuzrDyxes7H3MMwAWzAqHedIMfoKPwntqgQ8wY7NHkknSknEgFCxBLBiFgQz3bJP9NrQdASqy2R2S3U1kkieGrewTfAWGDA8BszwKwzCn4T016Grqcxf5junpCopOR6lhuvNB9Pa+9BfZ79ac7E+W2SS7m1k+BJX9Ar8GE6fMEKfUSjAPeC/gHOtysz9T5YgBqN8xu+veHtdyrKKgZVKJvmz2tJpwLPIrGOI1GI7xJDyVe6wL5GbPobLX0tW/mf3xu3M8hYI2yMPIZl/gCzBNcgbLPANDH78I76ljvL3K52bvjSuXneydFHHLvhp2su8rtcki/2dLPAQ7+6h1BVIMXOElNYXn4D33M53KfiASJM1EYSd7UsOW7FPxx8zs4WYnezRkk+x/donn0+n0RR5KP4sR9qsJXwau8TAML/AheExVd39z16KNWndQh0nfyD5WElx3srfURYmox8jeTq1mdnlv39ky24aR4US/FWHQnP95tQWMwnMBZie+I3bbSSLqLMvN3qhNUXwje0Qj2lt9FjWNj+6hZ3q6y5sk+87WJkzX2D/RB1zkOaD/NI9YX+5eBSY48TQ8t80x/mWi5p4WYGv2DqIqne6B83F2oB2WJlpt12hFPs7umvpcg2MpvrSQUOv6YebB15mPwnM+9+Mc2qpVz6AWNWkqexdVjJFW4mTP6qikhkfR3UDjKrsWtEn27bPPwWqdYOaL/TDNsSENr6nqauTdBYOlpqDKPnVnSyudBNDUuin71D6izhYAZet00soe0m2SfUf9E6dmkPXK0sjT8F4g4PxwFe2FqTcKU+RBvJyMQXmzAcob4doHYHlubxOAJu0IbA3y//b/hwj+woMQQgghhBBCCCGEEEIIIYQQQgghhBDi/+L6b769NW/99vtNBei6m+G19z4vzmvvFBWiX66Hp74qzneF2f07eOqL4rz3fVEh+hoeeqs4/xXmuP8KD31anP/eLipEH8FDnxTnvw+KCtG78FBLcf77sKgQ3QQv3VGc9z4uKkRfwkv331Cc5wpz2H+Gt0reL85nbxfk69u7P8FzB268JW/9eGMh+gxCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgjxHxbqgiUaQtbZrhiAsYEYTHXlyIqUbIhB5D+f3wcgYF1zaTosnXQVSi2FDgDVVIapcUDXkFVDG3QAj2mb7IdwE8m5/1cFmANmffa5Z18l2x4YnqJkmZVdD6vsSTL11Br20n7jugKgnCpvt6nfQ/zOTUIodBn/Ip+Yy94PpnhxFJYzx5mHRuC9APth8LPPNfvjTyjxJ1Zg6qHGLdmrW9fpzdZ6GJrDyCqnGtiy2Ssf3qQCBW7tPJ8fYh6E4eAk8yKrxz/DnEgwPwvv+VR35oBbdtSttwFopwEo9927JTvwELUB9bquk2Zcxl2yi1yDfA1YS1iPPM3zfVjiVAbAcZ47GJnlExF4Tw26mnrHkdJSCpa2ooMuW5t6B2xu2euoap+JmlX22rtskt1FImWGXeBZoI95xrr3A4d5MgLgBB+Fx1T3gD31jkeSSdKScSAULEEsGIWBDPdsk/02tB0BKrLZHZL9zw6+MALD82b2Cb4CQ4aHgFkehWGY09iW98c6TUfH9HQFRaej1DDd+SB6e1/6i+x3a072J8tskn3b+Is8AVzg12DiFODnUzCc4Xl4Tw26mvrc7M9UOWIA6nfMLnv7bh2y6qbVhGORX8EQr8FwjCfhPbW7q/i52XOo7LV0VbL/Y6N8/gdrU78A0yRnsMwzMPTxi/Cas7ozB1yy98aVy072Toq4ZV8NO9n3ldoku7sXOLWm6j8PU4qBK7ykNt1z8J7P9c1dZT8QCZJmorCTPalhS/ap+GNm9nCzkz0askl2V2dYJcYI+9WELwPXeFj9RRyC5wLM9sjn0KKNWndQh0nfyD5WElx3srfURYmox8jeTq2yyO/WWooPw5LhRL/1+AeBYXWWG+RReI7Z51Y9dttJIuosy83eqE1RfCN7RCPaW30WNY2P7qFnerrLmyT7Lhw777yaX+Q5oP80jwB9p/lVYIITT8Nbqrca+a1eJmruaQG2Zu8gqtLpHjgfZwfaYWmi1XaNVuCa/a7KHF0oaMvMl0wLAI6l+NJCQq3rh5kHX2c+CnfeH+fQVq16BrWoSVPZu6hijLQSJ3tWRyU1PIruBhpX2bWgzcq+X8vRiYL2B3t2/htDGMdx/DP9PuJIBtmGtFNtWWvrLLqWtthYVUSRUPeZRh1xhDQUEfddIX6piKOVIK44KvWDSBwJEf+V2Z0ds91NkXaeGM3n9cMz+/s733mefUZlnEy3rrV/3VyNlH3KtgvaWZb76EVJSVlKiZO9aUayTs4CSNRlZW+qEVmSBFDeLmfT2UtDLr7k/2j1tgs7kHHjxKbDCIDocqQsjyIl0ojrc6fDcT8Ox71w1SqkHa9OAEiYLXDF+b19YIjgNxpBRERERERERERERERERERENCA1Tn4yySdPPg0jH3S9hm7dDwp89MggP3wrhlaj7VbsHjyjoNXbAp+9MMgP76BRZ0EBxz2QJkCjV75nf2qQH55Do5fMHlCPoVHS9+zPDPLDd+j03ufqb3ik88dw6NQ5xN/sXwzywyDo1TbJx+gPWN0XPwZDu87uyT7pHkp+GAkiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiKiASlS/Mt00P+nsMgCYBUVohetCyM4HluGHirllxCAnWaWeaDAs5SyUvVVL907RCpQIXOQMVdSGqps1TLPXs8AGCtTJrpkDKjPrp5UasMm6GepItiK8rvH1wGIzFjXlp19Wl273K+bBduCMDLGSiVczN4PO5SqrVXqGDRzBt2b+mxiwuFkd62VRcCsUCgkpr1sZXYfnVT79kT2qlMR6OUOujv1nsqYSCxWjEOxSCr70ordsQ4ve0ym1qTIAid71UwXs/fdQbU9FfyUOgLoV+Rs7z27z5OUFoyTpXb2ULuImHezsldgUQswLpPdw+x9t1dthm2j2gXoZymVv703t4q0thZnskv19YYyGdcj+3zTy36o3MXs/Zm/C7BdVQegnzPoztTn7+1OdrMcSIok87Nzb/fPBnUetqNqOzTzTnX2qtBb9lLYorKF2XU6rXbAtkJdgmZedShl9Zp9DmwhWZyd/VzYy15T5mL2vrujTjib7jXoV+j9c/+77E1zdqayhxd42aOlLmbvu4dqI2wX1X5oZynljfwfsydjURFpsLPXSx1f8v7a6Jzl1qvN0Mqdcmfkc5iyKi97xBSpntaGytnNY6S1YdnYBLP7Z8VldQvYpmoPQzPvkg65yiR8pTx32qetqUdaQs7Vm3KGl7N+OqjU+ttK/22Nd5wrRK4tUZHm7OwTZQsyFk+ReDOWxSVzOWuWuJi9P/Yp2y5oZ1neI8/KlUBYpiNXU43IkiSA8nY5m85eGnIxe7/cOLHpMP65+q0yA3nuhatWIe14dQJAwmyBK87v7f+/2SJN+J1G0MBT0VAJIiIiIiIiIiIiIiIiIiIiyvXx6yAKlK7x0G34Y4MCZxj0GmlQEI2AVp8NCqSh0KjDoGD6AI3qDQqm59Co06Bg0po9aVAwjYJOHwwKpOHQafwPgwJoEPQaz3kPoC5o9/rdYAqUj0tBRERERERERPSzPTggAQAAABD0/3U7AhUAAAAAAAAAAAAAYCDiKk4R5tT3JwAAAABJRU5ErkJggg==";
+export {
+  A as default
+};

package/es/attributes-9JJnMyOM.mjs

@@ -0,0 +1,24 @@
+import { o } from "./index-BVm2ihs2.mjs";
+import "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/localforage@1.10.0/node_modules/localforage/dist/localforage.js";
+import "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/index.js";
+import "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/client.js";
+import "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/driver.js@1.3.6/node_modules/driver.js/dist/driver.js.mjs";
+import "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/driver.js@1.3.6/node_modules/driver.js/dist/driver.css";
+import "/Users/tangjiahui/Desktop/big-screen-demo/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+const t = {
+  background: "#223447"
+}, s = o(
+  [
+    {
+      key: "background",
+      label: "背景",
+      component: "colorPicker"
+    }
+  ],
+  t
+);
+export {
+  t as DEFAULT_OPTIONS,
+  s as default
+};