bi-sdk-react 0.0.50 → 0.0.52

package/package.json

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

package/src/components/PageDesigner.tsx

@@ -44,6 +44,7 @@ import {
   SchemaItemType,
 } from "./typing";
 import { uuid } from "./utils";
+import { EventPanel } from "./panel/EventPanel";
 
 export type PageDesignerProps = {
   pageId: string;
@@ -267,7 +268,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       | "dataset"
     >("component");
     const [rightPanelActiveKey, setRightPanelActiveKey] = useState<
-      "ai" | "props" | "cascade"
+      "ai" | "props" | "cascade" | "events"
     >(fetch?.ai ? "ai" : "props");
     const [showLeft, setShowLeft] = useState(true);
     const [showRight, setShowRight] = useState(true);
@@ -467,6 +468,11 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       return rightPanelActiveKey;
     }, [selectedItem, rightPanelActiveKey]);
 
+
+    const selectedPlugin: PluginType | undefined = useMemo(() => {
+      return (plugins || []).find((p) => p.key === selectedItem?.type);
+    }, [plugins, selectedItem?.type]);
+
     return (
       <PageProvider
         pageId={pageId}
@@ -593,47 +599,47 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                   }}
                   className="left-pane-tabs"
                 >
-                  <Radio.Button value="component">
-                    <Tooltip title="组件" placement="right">
+                  <Tooltip title="组件" placement="right">
+                    <Radio.Button value="component">
                       <IconFont type="icon-puzzle" />
-                    </Tooltip>
-                  </Radio.Button>
-                  <Radio.Button value="layer">
-                    <Tooltip title="图层" placement="right">
+                    </Radio.Button>
+                  </Tooltip>
+                  <Tooltip title="图层" placement="right">
+                    <Radio.Button value="layer">
                       <IconFont type="icon-outline" />
-                    </Tooltip>
-                  </Radio.Button>
+                    </Radio.Button>
+                  </Tooltip>
                   {!!datasetPanel && (
-                    <Radio.Button value="dataset">
-                      <Tooltip title="数据集" placement="right">
+                    <Tooltip title="数据集" placement="right">
+                      <Radio.Button value="dataset">
                         <IconFont type="icon-dataset" />
-                      </Tooltip>
-                    </Radio.Button>
+                      </Radio.Button>
+                    </Tooltip>
                   )}
                   {datasourceEnable && (
-                    <Radio.Button value="datasource" title="数据源">
-                      <Tooltip title="数据源" placement="right">
+                    <Tooltip title="数据源" placement="right">
+                      <Radio.Button value="datasource" title="数据源">
                         <IconFont type="icon-datasource" />
-                      </Tooltip>
-                    </Radio.Button>
+                      </Radio.Button>
+                    </Tooltip>
                   )}
                   {scriptEnable && (
-                    <Radio.Button value="script">
-                      <Tooltip title="脚本" placement="right">
+                    <Tooltip title="脚本" placement="right">
+                      <Radio.Button value="script">
                         <IconFont type="icon-js" />
-                      </Tooltip>
-                    </Radio.Button>
+                      </Radio.Button>
+                    </Tooltip>
                   )}
-                  <Radio.Button value="env">
-                    <Tooltip title="环境变量" placement="right">
+                  <Tooltip title="环境变量" placement="right">
+                    <Radio.Button value="env">
                       <IconFont type="icon-variable" />
-                    </Tooltip>
-                  </Radio.Button>
-                  <Radio.Button value="code">
-                    <Tooltip title="源码" placement="right">
+                    </Radio.Button>
+                  </Tooltip>
+                  <Tooltip title="源码" placement="right">
+                    <Radio.Button value="code">
                       <IconFont type="icon-json" />
-                    </Tooltip>
-                  </Radio.Button>
+                    </Radio.Button>
+                  </Tooltip>
                 </Radio.Group>
               </div>
               <div
@@ -733,6 +739,9 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                 {rightActiveKey === "cascade" && selectedItem?.cascadeIds && (
                   <CascadePanel />
                 )}
+                {rightActiveKey === "events" && selectedPlugin?.events && (
+                  <EventPanel />
+                )}
               </div>
               <div
                 style={{
@@ -757,23 +766,30 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                   className="right-pane-tabs"
                 >
                   {fetch?.ai && (
-                    <Radio.Button value="ai">
-                      <Tooltip title="智能助理" placement="right">
+                    <Tooltip title="智能助理" placement="right">
+                      <Radio.Button value="ai">
                         <IconFont type="icon-assistant" />
-                      </Tooltip>
-                    </Radio.Button>
+                      </Radio.Button>
+                    </Tooltip>
                   )}
-                  <Radio.Button value="props">
-                    <Tooltip title="属性" placement="right">
+                  <Tooltip title="属性" placement="right">
+                    <Radio.Button value="props">
                       <IconFont type="icon-info" />
-                    </Tooltip>
-                  </Radio.Button>
+                    </Radio.Button>
+                  </Tooltip>
                   {selectedItem?.cascadeIds && (
-                    <Radio.Button value="cascade">
-                      <Tooltip title="联动" placement="right">
+                    <Tooltip title="联动" placement="right">
+                      <Radio.Button value="cascade">
                         <IconFont type="icon-cascade" />
-                      </Tooltip>
-                    </Radio.Button>
+                      </Radio.Button>
+                    </Tooltip>
+                  )}
+                  {selectedPlugin?.events && (
+                    <Tooltip title="事件" placement="right">
+                      <Radio.Button value="events">
+                        <IconFont type="icon-thunderbolt" />
+                      </Radio.Button>
+                    </Tooltip>
                   )}
                 </Radio.Group>
                 {/* <Popover

package/src/components/context/PageContext.tsx

@@ -16,6 +16,9 @@ type InitCallbackParams = {
   callback: CallbackType;
 };
 
+type MethodParams = { sourceId: string; arg?: any };
+type MethodType = Record<string, (params?: MethodParams) => any>;
+
 type PageContextType = {
   pageId: string;
   designable: boolean;
@@ -42,6 +45,19 @@ type PageContextType = {
     refresh?: boolean,
     consume?: (item: Omit<SchemaItemType, "children">, data: any) => void,
   ) => void;
+  initMethod: ({
+    id,
+    method,
+  }: {
+    id: string;
+    method: MethodType;
+  }) => any;
+  handleMethod: (
+    item: SchemaItemType,
+    targetId: string,
+    methodName: string,
+    arg?: any,
+  ) => any;
   getVars: (id: string) => Record<string, any>;
   setVar: (item: SchemaItemType, key: string, value: any) => void;
   setItemData?: (id: string, data: any) => void;
@@ -75,6 +91,8 @@ export const PageContext = createContext<PageContextType>({
   setDeviceWidth: () => {},
   initCallback: () => {},
   handleCallback: () => {},
+  initMethod: () => {},
+  handleMethod: () => {},
   getVars: () => ({}),
   setVar: () => {},
   setItemData: () => {},
@@ -129,6 +147,30 @@ export const PageProvider: React.FC<PageProviderProps> = ({
 
   const [env, setEnv] = useState<EnvType>({ global: {}, local: {} });
   const [callbacks, setCallbacks] = useState<CallbacksType>({});
+  const [methods, setMethods] = useState<Record<string, MethodType>>({});
+
+  const initMethod = ({
+    id,
+    method,
+  }: {
+    id: string;
+    method: MethodType;
+  }) => {
+    setMethods((c) => ({ ...c, [id]: method }));
+  };
+
+  const handleMethod = (
+    item: SchemaItemType,
+    targetId: string,
+    methodName: string,
+    arg?: any,
+  ) => {
+    const method = methods[targetId][methodName];
+    if (typeof method === "function") {
+      return method({ sourceId: item.id!, arg });
+    }
+    return null;
+  };
 
   const initCallback = ({
     id,
@@ -173,7 +215,6 @@ export const PageProvider: React.FC<PageProviderProps> = ({
     });
   };
 
-
   useEffect(() => {
     const nextGlobal: Record<string, any> = {};
     (schema.variables || []).forEach((item) => {
@@ -207,6 +248,8 @@ export const PageProvider: React.FC<PageProviderProps> = ({
         setDeviceWidth: setDeviceWidth || (() => {}),
         initCallback,
         handleCallback,
+        initMethod,
+        handleMethod,
         getVars,
         setVar,
         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,37 @@ 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);
+      onListChange?.(newList);
+    }
+  };
+
   // Determine classes
   const classes = [
     className,
@@ -483,6 +515,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/event.ts

@@ -0,0 +1,68 @@
+import { SchemaItemType } from "../typing";
+import { useMethods } from "./method";
+
+export const useEvent = (item: SchemaItemType) => {
+  const events = (item.events || []).reduce(
+    (acc, cur) => {
+      acc[cur.name] = cur.script;
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+
+  const { callMethod } = useMethods(item);
+
+  const handleEvent = (eventName: string, arg?: any) => {
+    const script = events[eventName];
+    if (script) {
+      if (script) {
+        try {
+          const safeEval = new Function(
+            "console",
+            "Math",
+            "Date",
+            "Array",
+            "Object",
+            "String",
+            "Number",
+            "Boolean",
+            "callMethod",
+            "param",
+            `
+          "use strict";
+          const window = undefined;
+          const document = undefined;
+          const global = undefined;
+          const process = undefined;
+          const require = undefined;
+          const module = undefined;
+          const exports = undefined;
+          ${script}
+          `,
+          );
+          return (safeEval as any)(
+            console,
+            Math,
+            Date,
+            Array,
+            Object,
+            String,
+            Number,
+            Boolean,
+            callMethod,
+            {
+              item,
+              sourceId: item.id,
+              arg,
+            },
+          );
+        } catch (evalError) {
+          console.error("点击事件脚本执行失败:", evalError);
+          return null;
+        }
+      }
+    }
+  };
+
+  return { handleEvent };
+};

package/src/components/hooks/method.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { PageContext } from "../context/PageContext";
+import { SchemaItemType } from "../typing";
+
+export const useMethods = (item: SchemaItemType) => {
+  const { handleMethod } = useContext(PageContext);
+
+  const callMethod = (targetId: string, methodName: string, arg?: any) => {
+    return handleMethod(item, targetId, methodName, arg);
+  };
+
+  return { callMethod };
+};

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/EventPanel.tsx

@@ -0,0 +1,186 @@
+import { CaretDownOutlined, PlusOutlined } from "@ant-design/icons";
+import { Divider, Dropdown, Empty, Space } from "antd";
+import React, { useContext, useMemo } from "react";
+import styled from "styled-components";
+import { PageContext } from "../context/PageContext";
+import { PluginType } from "../typing";
+import { PaneHeader } from "./PaneHeader";
+import { Editor } from "@monaco-editor/react";
+import { IconFont } from "../icon/IconFont";
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .ant-divider {
+      margin: 0;
+    }
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      border-bottom: 1px dotted #d9d9d9;
+      padding-bottom: 8px;
+
+      & > div:first-child {
+        font-size: 14px;
+        color: var(--ant-color-text-label);
+        padding: 6px 0;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+  ul.tips {
+    padding-left: 20px;
+    li {
+      display: list-item;
+      list-style: disc;
+      border-bottom: none;
+      color: var(--ant-color-text-secondary);
+    }
+  }
+  a.toolbar {
+    font-size: 16px;
+    color: var(--ant-color-text-secondary);
+  }
+`;
+
+export const EventPanel: React.FC = ({}) => {
+  const { selectedItem, setSelectedItem, plugins, forceUpdate } =
+    useContext(PageContext);
+  const selectedPlugin: PluginType | undefined = useMemo(() => {
+    return (plugins || []).find((p) => p.key === selectedItem?.type);
+  }, [plugins, selectedItem?.type]);
+
+  const events = selectedPlugin?.events || [];
+  const eventMap = events.reduce((prev: Record<string, string>, cur) => {
+    prev[cur.handler] = cur.name;
+    return prev;
+  }, {});
+
+  const onChange = (events: { name: string; script: string }[]) => {
+    if (!selectedItem) return;
+    setSelectedItem(Object.assign(selectedItem, { events }));
+    forceUpdate();
+  };
+
+  return (
+    <Root className="cascade-panel">
+      <PaneHeader
+        title="事件"
+        extra={
+          selectedPlugin?.events ? (
+            <Space>
+              <Dropdown
+                menu={{
+                  onClick: ({ key }) => {
+                    const nextEvents = [...(selectedItem?.events || [])];
+                    nextEvents.push({ name: key, script: "" });
+                    onChange && onChange(nextEvents);
+                  },
+                  items: events
+                    .filter(
+                      (e) =>
+                        !(selectedItem?.events || [])?.some((i) => i.name === e.handler),
+                    )
+                    .map((it) => ({
+                      key: it.handler,
+                      label: `${it.name}（${it.handler}）`,
+                    })),
+                }}
+                placement="bottomRight"
+                trigger={["click"]}
+              >
+                <a className="toolbar">
+                  <PlusOutlined />
+                  <CaretDownOutlined
+                    style={{ fontSize: 8, verticalAlign: "sub" }}
+                  />
+                </a>
+              </Dropdown>
+            </Space>
+          ) : null
+        }
+      />
+      <div className="body beautified_scrollbar">
+        <Divider>事件列表</Divider>
+        {!!selectedItem?.events?.length ? (
+          <ul>
+            {(selectedItem.events || []).map(
+              ({ name, script }, index: number) => (
+                <li key={name}>
+                  <div>
+                    <IconFont type="icon-thunderbolt" /> {eventMap[name]}（
+                    {name}）
+                  </div>
+                  <div
+                    style={{
+                      border: "solid 1px var(--ant-color-border)",
+                      borderRadius: "var(--ant-border-radius-sm)",
+                    }}
+                  >
+                    <Editor
+                      height="200px"
+                      defaultLanguage="javascript"
+                      value={script || ""}
+                      onChange={(v) => {
+                        const nextEvents = [...(selectedItem?.events || [])];
+                        nextEvents[index].script = v || "";
+                        onChange && onChange(nextEvents);
+                      }}
+                      options={{
+                        minimap: { enabled: false },
+                        scrollBeyondLastLine: false,
+                        tabSize: 2,
+                      }}
+                    />
+                  </div>
+                </li>
+              ),
+            )}
+          </ul>
+        ) : (
+          <Empty description="暂无事件" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        )}
+        <Divider>脚本说明</Divider>
+        <div>
+          <ul className="tips">
+            <li>
+              内置参数：param（类型：Object）
+              <ul style={{ margin: "8px 0 0 20px" }}>
+                <li>param.item: 当前事件触发的组件。</li>
+                <li>param.sourceId: 当前事件触发的组件ID。</li>
+                <li>param.arg: 事件触发时传递的参数。</li>
+              </ul>
+            </li>
+            <li>
+              脚本禁止使用以下 API：window, document, global, process, require,
+              module, exports, cookie, localStorage, sessionStorage。
+            </li>
+            <li>组件方法调用：callMethod(targetId, methodName, arg)。</li>
+          </ul>
+        </div>
+      </div>
+    </Root>
+  );
+};