bi-sdk-react 0.0.51 → 0.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bi-sdk-react",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "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,8 +45,23 @@ 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;
+  getGlobalVar: (key: string) => string | undefined | null;
+  setGlobalVar: (key: string, value: any) => void;
   setItemData?: (id: string, data: any) => void;
 };
 
@@ -75,8 +93,12 @@ export const PageContext = createContext<PageContextType>({
   setDeviceWidth: () => {},
   initCallback: () => {},
   handleCallback: () => {},
+  initMethod: () => {},
+  handleMethod: () => {},
   getVars: () => ({}),
   setVar: () => {},
+  getGlobalVar: () => undefined,
+  setGlobalVar: () => {},
   setItemData: () => {},
 });
 
@@ -129,6 +151,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,
@@ -172,7 +218,10 @@ export const PageProvider: React.FC<PageProviderProps> = ({
       next.local[id][key] = value;
     });
   };
-
+  const getGlobalVar = (key: string) => env.global[key];
+  const setGlobalVar = (key: string, value: any) => {
+    setEnv((e: EnvType) => ({ ...e, global: { ...e.global, [key]: value } }));
+  };
 
   useEffect(() => {
     const nextGlobal: Record<string, any> = {};
@@ -207,8 +256,12 @@ export const PageProvider: React.FC<PageProviderProps> = ({
         setDeviceWidth: setDeviceWidth || (() => {}),
         initCallback,
         handleCallback,
+        initMethod,
+        handleMethod,
         getVars,
         setVar,
+        getGlobalVar,
+        setGlobalVar,
         setItemData,
       }}
     >

package/src/components/dnd/DropContainer.tsx

@@ -469,7 +469,6 @@ export const DropContainer: React.FC<DropContainerProps> = ({
     if (index !== -1) {
       const newList = [...list];
       newList.splice(index + 1, 0, newItem);
-      console.log(newList);
       onListChange?.(newList);
     }
   };

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_3ofyyta7h1e.js",
+  scriptUrl: "https://at.alicdn.com/t/c/font_5072483_8ex0em5yn29.js",
 });
 
 export type IconFontProps = {

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>
+  );
+};

package/src/components/panel/ScriptPanel.tsx

@@ -152,7 +152,7 @@ export const ScriptPanel: React.FC = () => {
             name="script"
             rules={[{ required: true, message: "请输入脚本语句" }]}
           >
-            <div style={{ border: "1px solid #d9d9d9", padding: "0 10px" }}>
+            <div style={{ border: "1px solid #d9d9d9" }}>
               <div className="function-wrapper">function fixed(data) {"{"}</div>
               <Editor
                 height="200px"

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

@@ -109,7 +109,9 @@ export const ButtonPlugin: PluginType = {
       icon: "",
     },
     cascadeIds: [],
+    events: [],
   },
+  events: [{ name: "点击", handler: "click" }],
 };
 
 export const PageHeaderPlugin: PluginType = {
@@ -221,7 +223,13 @@ return {
 }
         `,
     },
+    events: [],
   },
+  events: [
+    { name: "点击", handler: "click" },
+    { name: "双击点击", handler: "dblclick" },
+    { name: "选中变化", handler: "selectchanged" },
+  ],
 };
 
 export const InputPlugin: PluginType = {
@@ -294,7 +302,7 @@ export const SelectPlugin: PluginType = {
 export const CapsulePlugin: PluginType = {
   group: "表单组件",
   key: "b-capsule",
-  label: "胶囊选择框",
+  label: "胶囊选择器",
   icon: "icon-form-capsule",
   component: CapsuleRender,
   formComponent: CapsuleProps,

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

@@ -1,5 +1,5 @@
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { Form, Input, InputNumber, Radio, Switch, Tooltip } from "antd";
+import { Descriptions, Divider, Form, Input, InputNumber, Radio, Switch, Tooltip } from "antd";
 import React from "react";
 import styled from "styled-components";
 import type { PropEditorProps } from "./types";
@@ -152,6 +152,23 @@ export const DrawerProps: React.FC<PropEditorProps<DrawerModel>> = ({
           onChange={(v) => trigger("footer", v)}
         />
       </Form.Item> */}
+      <Divider>组件方法</Divider>
+      <Descriptions
+        size="small"
+        column={1}
+        items={[
+          {
+            key: "open",
+            label: "open",
+            children: "打开抽屉",
+          },
+          {
+            key: "close",
+            label: "close",
+            children: "关闭抽屉",
+          },
+        ]}
+      />
     </Form>
   );
 };

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

@@ -1,5 +1,5 @@
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { Form, Input, InputNumber, Radio, Switch, Tooltip } from "antd";
+import { Descriptions, Divider, Form, Input, InputNumber, Radio, Switch, Tooltip } from "antd";
 import React from "react";
 import styled from "styled-components";
 import type { PropEditorProps } from "./types";
@@ -131,6 +131,23 @@ export const ModalProps: React.FC<PropEditorProps<ModalModel>> = ({
           onChange={(v) => trigger("footer", v)}
         />
       </Form.Item> */}
+      <Divider>组件方法</Divider>
+      <Descriptions
+        size="small"
+        column={1}
+        items={[
+          {
+            key: "open",
+            label: "open",
+            children: "打开模态框",
+          },
+          {
+            key: "close",
+            label: "close",
+            children: "关闭模态框",
+          },
+        ]}
+      />
     </Form>
   );
 };