bi-sdk-react 0.0.49 → 0.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bi-sdk-react",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "private": false,
   "type": "module",
   "main": "dist/umd/js/bi-sdk.umd.min.js",

package/src/components/context/PageContext.tsx

@@ -44,8 +44,7 @@ type PageContextType = {
   ) => void;
   getVars: (id: string) => Record<string, any>;
   setVar: (item: SchemaItemType, key: string, value: any) => void;
-  getItemData: (id: string) => any;
-  setItemData: (id: string, data: any) => void;
+  setItemData?: (id: string, data: any) => void;
 };
 
 export const PageContext = createContext<PageContextType>({
@@ -78,7 +77,6 @@ export const PageContext = createContext<PageContextType>({
   handleCallback: () => {},
   getVars: () => ({}),
   setVar: () => {},
-  getItemData: () => {},
   setItemData: () => {},
 });
 
@@ -110,8 +108,8 @@ export const PageProvider: React.FC<PageProviderProps> = ({
   datasetAdd,
   fetch,
   children,
+  setItemData,
 }) => {
-  const [itemDatas, setItemDatas] = useState<Record<string, any>>({});
   const [deviceWidth, setDeviceWidth] = useState<number>(0);
   const updateSelectedItem = (props?: Partial<SchemaItemType> | null) => {
     setSelectedItem?.(Object.assign(selectedItem!, props || {}));
@@ -175,13 +173,6 @@ export const PageProvider: React.FC<PageProviderProps> = ({
     });
   };
 
-  const getItemData = (id: string) => {
-    return itemDatas[id] || {};
-  };
-
-  const setItemData = (id: string, data: any) => {
-    setItemDatas((d) => ({ ...d, [id]: data }));
-  };
 
   useEffect(() => {
     const nextGlobal: Record<string, any> = {};
@@ -218,7 +209,6 @@ export const PageProvider: React.FC<PageProviderProps> = ({
         handleCallback,
         getVars,
         setVar,
-        getItemData,
         setItemData,
       }}
     >

package/src/components/dnd/DropContainer.tsx

@@ -4,6 +4,7 @@ import { PageItem, PageItemProps } from "../layout/PageItem";
 import { HtmlBaseProps, SchemaItemType } from "../typing";
 import styled from "styled-components";
 import { PageContext } from "../context/PageContext";
+import { uuid } from "../utils";
 
 type DropContainerProps = {
   rootComponent?: React.ComponentType<any>;
@@ -441,6 +442,38 @@ export const DropContainer: React.FC<DropContainerProps> = ({
     return () => cleanup();
   }, []);
 
+  const onCopy = (item: SchemaItemType) => {
+    // 递归复制函数，确保所有子节点都有新的 ID
+    const cloneItem = (node: SchemaItemType): SchemaItemType => {
+      const newNode = { ...node, id: uuid() };
+
+      if (node.children) {
+        if (Array.isArray(node.children)) {
+          newNode.children = node.children.map(cloneItem);
+        } else {
+          const newChildren: Record<string, SchemaItemType[]> = {};
+          Object.keys(node.children).forEach((key) => {
+            newChildren[key] = (node.children as Record<string, SchemaItemType[]>)[
+              key
+            ].map(cloneItem);
+          });
+          newNode.children = newChildren;
+        }
+      }
+      return newNode;
+    };
+
+    const newItem = cloneItem(item);
+    const index = list.findIndex((i) => i.id === item.id);
+
+    if (index !== -1) {
+      const newList = [...list];
+      newList.splice(index + 1, 0, newItem);
+      console.log(newList);
+      onListChange?.(newList);
+    }
+  };
+
   // Determine classes
   const classes = [
     className,
@@ -483,6 +516,7 @@ export const DropContainer: React.FC<DropContainerProps> = ({
             parentList={memoList}
             onListChange={onListChange}
             index={index}
+            onCopy={onCopy}
             onDelete={() =>
               onListChange?.(memoList.filter((i: any) => i.id !== child.id))
             }

package/src/components/hooks/datasource.ts

@@ -23,10 +23,10 @@ export const useDatasource = ({ item, signal }: Props): any => {
         try {
           const next = JSON.parse(item?.datasource?.custom || "[]");
           setDatasource(next);
-          setItemData(item.id || "", next);
+          setItemData?.(item.id || "", next);
         } catch (e) {
           setDatasource(null);
-          setItemData(item.id || "", null);
+          setItemData?.(item.id || "", null);
         }
         break;
       case "dataset":
@@ -39,7 +39,7 @@ export const useDatasource = ({ item, signal }: Props): any => {
             },
           );
           setDatasource(null);
-          setItemData(item.id || "", null);
+          setItemData?.(item.id || "", null);
           return;
         }
         const vars = getVars(item.id || "");
@@ -47,17 +47,17 @@ export const useDatasource = ({ item, signal }: Props): any => {
           .dataset(item?.datasource.dataset.id, vars)
           .then((res) => {
             setDatasource(res || null);
-            setItemData(item.id || "", res || null);
+            setItemData?.(item.id || "", res || null);
           })
           .catch((err) => {
             console.error("dataset fetch error", err);
             setDatasource(null);
-            setItemData(item.id || "", null);
+            setItemData?.(item.id || "", null);
           });
         break;
       default:
         setDatasource(null);
-        setItemData(item.id || "", null);
+        setItemData?.(item.id || "", null);
         break;
     }
   }, [item?.datasource, signal]);

package/src/components/icon/IconFont.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { createFromIconfontCN } from "@ant-design/icons";
 
 const IconFontCN = createFromIconfontCN({
-  scriptUrl: "https://at.alicdn.com/t/c/font_5072483_x7q8s0iz0m.js",
+  scriptUrl: "https://at.alicdn.com/t/c/font_5072483_3ofyyta7h1e.js",
 });
 
 export type IconFontProps = {

package/src/components/layout/PageItem.tsx

@@ -4,7 +4,7 @@ import { PageContext } from "../context/PageContext";
 import { SchemaItemType } from "../typing";
 import styled from "styled-components";
 import { IconFont } from "../icon/IconFont";
-import { DeleteOutlined } from "@ant-design/icons";
+import { CopyOutlined, DeleteOutlined } from "@ant-design/icons";
 import { Button, Dropdown, Modal, Space, Tooltip, Typography } from "antd";
 import ReactDOM from "react-dom";
 import { Editor } from "@monaco-editor/react";
@@ -12,6 +12,7 @@ import { Editor } from "@monaco-editor/react";
 export type PageItemProps = {
   id?: string;
   item: SchemaItemType;
+  onCopy?: (item: SchemaItemType) => void;
   onDelete?: () => void;
   ancestors: SchemaItemType[];
   parentList?: any[];
@@ -67,9 +68,10 @@ const Toolbar: React.FC<{
   ancestors: SchemaItemType[];
   onAddAt?: (e: any) => void;
   onDelete?: (e: any) => void;
+  onCopy?: (e: any) => void;
   onUpdate?: () => void;
   onSelect?: (item: SchemaItemType) => void;
-}> = ({ item, ancestors, onAddAt, onDelete, onUpdate, onSelect }) => {
+}> = ({ item, ancestors, onAddAt, onDelete, onCopy, onUpdate, onSelect }) => {
   const [code, setCode] = useState(JSON.stringify(item || {}, null, 2));
   const [visible, setVisible] = useState(false);
   const editRef = useRef<any>(null);
@@ -190,6 +192,11 @@ const Toolbar: React.FC<{
             <IconFont type="icon-json" />
           </a>
         </Tooltip>
+        <Tooltip title="复制">
+          <a onClick={onCopy}>
+            <CopyOutlined />
+          </a>
+        </Tooltip>
         <Tooltip title="删除">
           <a onClick={onDelete}>
             <DeleteOutlined />
@@ -218,6 +225,7 @@ const Toolbar: React.FC<{
  */
 export const PageItem: React.FC<PageItemProps> = ({
   item,
+  onCopy,
   onDelete,
   ancestors,
   parentList,
@@ -252,6 +260,11 @@ export const PageItem: React.FC<PageItemProps> = ({
     });
   };
 
+  const handleCopy = (e: any) => {
+    e.stopPropagation();
+    if (onCopy) onCopy(item);
+  };
+
   const handleAddAtItem = (e: any) => {
     e.stopPropagation();
     if (onAddAtItem) onAddAtItem(item);
@@ -303,6 +316,7 @@ export const PageItem: React.FC<PageItemProps> = ({
 
     if (selectedItem && selectedItem === item && designable) {
       const div = document.createElement("div");
+      div.setAttribute("id", "page-item-toolbar")
       div.style.position = "absolute";
       div.style.zIndex = "1000";
       div.style.display = "flex";
@@ -378,6 +392,7 @@ export const PageItem: React.FC<PageItemProps> = ({
             item={item}
             ancestors={ancestors}
             onAddAt={fetch?.ai?.chat ? handleAddAtItem : undefined}
+            onCopy={handleCopy}
             onDelete={handleDelete}
             onUpdate={forceUpdate}
             onSelect={onSelect}

package/src/components/panel/LayerPanel.tsx

@@ -43,7 +43,7 @@ export const LayerPanel: React.FC = () => {
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
   const selectedKeys = useMemo(
     () => (selectedItem ? [selectedItem.id!] : []),
-    [selectedItem]
+    [selectedItem],
   );
   const realItems = useMemo(() => {
     const compute = (list: any[] = []) => {
@@ -139,11 +139,12 @@ export const LayerPanel: React.FC = () => {
         const { slot, origin } = info.node.dataRef;
         origin[slot] = origin[slot] || [];
         origin[slot].push(dragObj);
+      } else {
+        loop(data, dropKey, (item: any) => {
+          item.children = item.children || [];
+          item.children.push(dragObj);
+        });
       }
-      loop(data, dropKey, (item: any) => {
-        item.children = item.children || [];
-        item.children.push(dragObj);
-      });
     } else if (
       (info.node.children || []).length > 0 &&
       info.node.expanded &&
@@ -217,7 +218,7 @@ export const LayerPanel: React.FC = () => {
           draggable={{
             icon: false,
             nodeDraggable(node: any) {
-              return false; // node.dataRef.type !== "slot";
+              return node.dataRef.type !== "slot";
             },
           }}
           showIcon={false}

package/src/components/plugins/@antd/index.ts

@@ -9,12 +9,14 @@ import {
   CheckboxProps,
   ColProps,
   DatePickerProps,
+  DrawerProps,
   EchartsProps,
   HtmlProps,
   ImageProps,
   InputNumberProps,
   InputProps,
   ListProps,
+  ModalProps,
   PageHeaderProps,
   RowProps,
   SelectProps,
@@ -30,12 +32,14 @@ import {
   CheckboxRender,
   ColRender,
   DatePickerRender,
+  DrawerRender,
   EchartsRender,
   HtmlRender,
   ImageRender,
   InputNumberRender,
   InputRender,
   ListRender,
+  ModalRender,
   PageHeaderRender,
   RowRender,
   SelectRender,
@@ -425,6 +429,56 @@ export const ColPlugin: PluginType = {
   },
 };
 
+export const ModalPlugin: PluginType = {
+  group: "容器组件",
+  key: "b-modal",
+  label: "弹窗",
+  icon: "icon-modal",
+  component: ModalRender,
+  formComponent: ModalProps,
+  defaultOptions: {
+    props: {
+      title: "标题",
+      width: 400,
+      okType: "primary",
+      okText: "确定",
+      cancelText: "取消",
+      maskClosable: true,
+      mask: true,
+      closable: true,
+      keyboard: true,
+      footer: false,
+    },
+    children: [],
+  },
+};
+
+export const DrawerPlugin: PluginType = {
+  group: "容器组件",
+  key: "b-drawer",
+  label: "抽屉",
+  icon: "icon-drawer",
+  component: DrawerRender,
+  formComponent: DrawerProps,
+  defaultOptions: {
+    props: {
+      title: "标题",
+      size: 400,
+      placement: "right",
+      okType: "primary",
+      okText: "确定",
+      cancelText: "取消",
+      closable: true,
+      keyboard: true,
+      maskClosable: true,
+      mask: true,
+      resizable: true,
+      footer: false,
+    },
+    children: [],
+  },
+};
+
 export const plugins: PluginType[] = [
   TextPlugin,
   ImagePlugin,
@@ -445,4 +499,6 @@ export const plugins: PluginType[] = [
   CardPlugin,
   RowPlugin,
   ColPlugin,
+  ModalPlugin,
+  DrawerPlugin,
 ];

package/src/components/plugins/@antd/item-props/DrawerProps.tsx

@@ -0,0 +1,157 @@
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Form, Input, InputNumber, Radio, Switch, Tooltip } from "antd";
+import React from "react";
+import styled from "styled-components";
+import type { PropEditorProps } from "./types";
+
+const HelpIcon = styled(InfoCircleOutlined)`
+  vertical-align: middle;
+  margin-left: 2px;
+  color: var(--ant-color-text-description);
+`;
+
+export type DrawerModel = {
+  title?: string;
+  size?: number;
+  okType?: "primary" | "link" | "text" | "dashed" | "default";
+  okText?: string;
+  cancelText?: string;
+  resizable?: boolean;
+  placement?: "top" | "bottom" | "left" | "right";
+  closable?: boolean;
+  keyboard?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  footer?: boolean;
+};
+
+/**
+ * 抽屉属性编辑器
+ */
+export const DrawerProps: React.FC<PropEditorProps<DrawerModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof DrawerModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+
+  return (
+    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+      <Form.Item label="标题">
+        <Input
+          size="small"
+          value={model.title}
+          onChange={(e) => trigger("title", e.target.value)}
+        />
+      </Form.Item>
+      <Form.Item label="宽度">
+        <InputNumber
+          size="small"
+          style={{ width: "100px" }}
+          value={model.size}
+          suffix="px"
+          onChange={(v) => trigger("size", v)}
+        />
+      </Form.Item>
+      <Form.Item label="抽屉位置">
+        <Radio.Group
+          size="small"
+          value={model.placement}
+          onChange={(e) => trigger("placement", e.target.value)}
+        >
+          <Radio.Button value="top">顶部</Radio.Button>
+          <Radio.Button value="bottom">底部</Radio.Button>
+          <Radio.Button value="left">左侧</Radio.Button>
+          <Radio.Button value="right">右侧</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="确认按钮文字">
+        <Input
+          size="small"
+          style={{ width: "100px" }}
+          value={model.okText}
+          onChange={(e) => trigger("okText", e.target.value)}
+        />
+      </Form.Item>
+      <Form.Item label="取消按钮文字">
+        <Input
+          size="small"
+          style={{ width: "100px" }}
+          value={model.cancelText}
+          onChange={(e) => trigger("cancelText", e.target.value)}
+        />
+      </Form.Item>
+      <Form.Item label="确认按钮类型">
+        <Radio.Group
+          size="small"
+          value={model.okType}
+          onChange={(e) => trigger("okType", e.target.value)}
+        >
+          <Radio.Button value="default">默认</Radio.Button>
+          <Radio.Button value="primary">主要</Radio.Button>
+          <Radio.Button value="dashed">虚线</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="关闭按钮">
+        <Switch
+          size="small"
+          checked={model.closable}
+          onChange={(v) => trigger("closable", v)}
+        />
+      </Form.Item>
+      <Form.Item
+        label={
+          <>
+            ESC关闭{" "}
+            <Tooltip title="是否支持键盘 esc 关闭">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <Switch
+          size="small"
+          checked={model.keyboard}
+          onChange={(v) => trigger("keyboard", v)}
+        />
+      </Form.Item>
+      <Form.Item label="显示遮罩">
+        <Switch
+          size="small"
+          checked={model.mask}
+          onChange={(v) => trigger("mask", v)}
+        />
+      </Form.Item>
+      <Form.Item
+        label={
+          <>
+            遮罩关闭{" "}
+            <Tooltip title="点击遮罩层是否允许关闭">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <Switch
+          size="small"
+          checked={model.maskClosable}
+          onChange={(v) => trigger("maskClosable", v)}
+        />
+      </Form.Item>
+      <Form.Item label="可调整大小">
+        <Switch
+          size="small"
+          checked={model.resizable}
+          onChange={(v) => trigger("resizable", v)}
+        />
+      </Form.Item>
+      {/* <Form.Item label="显示底部">
+        <Switch
+          size="small"
+          checked={model.footer}
+          onChange={(v) => trigger("footer", v)}
+        />
+      </Form.Item> */}
+    </Form>
+  );
+};

package/src/components/plugins/@antd/item-props/ModalProps.tsx

@@ -0,0 +1,136 @@
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Form, Input, InputNumber, Radio, Switch, Tooltip } from "antd";
+import React from "react";
+import styled from "styled-components";
+import type { PropEditorProps } from "./types";
+
+const HelpIcon = styled(InfoCircleOutlined)`
+  vertical-align: middle;
+  margin-left: 2px;
+  color: var(--ant-color-text-description);
+`;
+
+export type ModalModel = {
+  title?: string;
+  width?: number;
+  okType?: "primary" | "link" | "text" | "dashed" | "default";
+  okText?: string;
+  cancelText?: string;
+  closable?: boolean;
+  keyboard?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  footer?: boolean;
+};
+
+/**
+ * 模态框属性编辑器
+ */
+export const ModalProps: React.FC<PropEditorProps<ModalModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof ModalModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+
+  return (
+    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+      <Form.Item label="标题">
+        <Input
+          size="small"
+          value={model.title}
+          onChange={(e) => trigger("title", e.target.value)}
+        />
+      </Form.Item>
+      <Form.Item label="宽度">
+        <InputNumber
+          size="small"
+          style={{ width: "100px" }}
+          value={model.width}
+          suffix="px"
+          onChange={(v) => trigger("width", v)}
+        />
+      </Form.Item>
+      <Form.Item label="确认按钮文字">
+        <Input
+          size="small"
+          style={{ width: "100px" }}
+          value={model.okText}
+          onChange={(e) => trigger("okText", e.target.value)}
+        />
+      </Form.Item>
+      <Form.Item label="取消按钮文字">
+        <Input
+          size="small"
+          style={{ width: "100px" }}
+          value={model.cancelText}
+          onChange={(e) => trigger("cancelText", e.target.value)}
+        />
+      </Form.Item>
+      <Form.Item label="确认按钮类型">
+        <Radio.Group
+          size="small"
+          value={model.okType}
+          onChange={(e) => trigger("okType", e.target.value)}
+        >
+          <Radio.Button value="default">默认</Radio.Button>
+          <Radio.Button value="primary">主要</Radio.Button>
+          <Radio.Button value="dashed">虚线</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="关闭按钮">
+        <Switch
+          size="small"
+          checked={model.closable}
+          onChange={(v) => trigger("closable", v)}
+        />
+      </Form.Item>
+      <Form.Item
+        label={
+          <>
+            ESC关闭{" "}
+            <Tooltip title="是否支持键盘 esc 关闭">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <Switch
+          size="small"
+          checked={model.keyboard}
+          onChange={(v) => trigger("keyboard", v)}
+        />
+      </Form.Item>
+      <Form.Item label="显示遮罩">
+        <Switch
+          size="small"
+          checked={model.mask}
+          onChange={(v) => trigger("mask", v)}
+        />
+      </Form.Item>
+      <Form.Item
+        label={
+          <>
+            遮罩关闭{" "}
+            <Tooltip title="点击遮罩层是否允许关闭">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <Switch
+          size="small"
+          checked={model.maskClosable}
+          onChange={(v) => trigger("maskClosable", v)}
+        />
+      </Form.Item>
+      {/* <Form.Item label="显示底部">
+        <Switch
+          size="small"
+          checked={model.footer}
+          onChange={(v) => trigger("footer", v)}
+        />
+      </Form.Item> */}
+    </Form>
+  );
+};

package/src/components/plugins/@antd/item-props/index.ts

@@ -16,5 +16,7 @@ export { TableProps } from './TableProps'
 export { PageHeaderProps } from './PageHeaderProps'
 export { RowProps } from './RowProps'
 export { ColProps } from './ColProps'
+export { ModalProps } from './ModalProps'
 export { SpaceProps } from './SpaceProps'
+export { DrawerProps } from './DrawerProps'