bi-sdk-react 0.0.53 → 0.0.55

package/package.json

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

package/src/components/PageDesigner.tsx

@@ -45,6 +45,7 @@ import {
 } from "./typing";
 import { uuid } from "./utils";
 import { EventPanel } from "./panel/EventPanel";
+import { GlobalDatasetPanel } from "./panel/GlobalDatasetPanel";
 
 export type PageDesignerProps = {
   pageId: string;
@@ -266,6 +267,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       | "env"
       | "code"
       | "dataset"
+      | "global-dataset"
     >("component");
     const [rightPanelActiveKey, setRightPanelActiveKey] = useState<
       "ai" | "props" | "cascade" | "events"
@@ -635,6 +637,11 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                       <IconFont type="icon-variable" />
                     </Radio.Button>
                   </Tooltip>
+                  <Tooltip title="全局数据集" placement="right">
+                    <Radio.Button value="global-dataset">
+                      <IconFont type="icon-datasource-g" />
+                    </Radio.Button>
+                  </Tooltip>
                   <Tooltip title="源码" placement="right">
                     <Radio.Button value="code">
                       <IconFont type="icon-json" />
@@ -666,6 +673,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                     renderNode={datasetPanel}
                   />
                 )}
+                {leftPanelActiveKey === "global-dataset" && <GlobalDatasetPanel />}
               </div>
             </div>
             <div className="center" style={{ flex: "1 1 auto" }}>

package/src/components/context/GlobalDatasetContext.tsx

@@ -0,0 +1,52 @@
+import { useContext, useEffect, useMemo } from "react";
+import { PageContext } from "./PageContext";
+
+type GlobalDatasetContextType = {
+  datasetId: string;
+  var: string;
+  dependencies: string[];
+};
+
+const GlobalDatasetContext: React.FC<GlobalDatasetContextType> = ({
+  datasetId,
+  var: varName,
+  dependencies,
+}) => {
+  const { schema, getGlobalEnv, fetch, env, updateGlobalVar } = useContext(PageContext);
+  const dataset = schema?.datasets?.find((item) => item.id === datasetId);
+  if (!dataset || !fetch?.dataset) {
+    return <></>;
+  }
+
+  const params = useMemo(() => {
+    return dependencies.reduce(
+      (prev, cur) => {
+        const value = env.global[cur];
+        return [...prev, value];
+      },
+      [] as any[],
+    );
+  }, [dependencies, env.global]);
+
+  const handleFetch = async () => {
+    const queryParams = dependencies.reduce(
+      (prev, cur) => {
+        const value = getGlobalEnv(cur);
+        return { ...prev, [cur]: value };
+      },
+      {} as Record<string, any>,
+    );
+    const { code, data } = await fetch?.dataset?.(datasetId, queryParams, dataset.aiPrompt);
+    if (code === "OK") {
+      updateGlobalVar(varName, data);
+    }
+  };
+
+  useEffect(() => {
+    handleFetch();
+  }, [datasetId, fetch, ...params]);
+
+  return <></>;
+};
+
+export default GlobalDatasetContext;

package/src/components/context/PageContext.tsx

@@ -10,6 +10,7 @@ import {
   PluginType,
   SchemaItemType,
 } from "../typing";
+import GlobalDatasetContext from "./GlobalDatasetContext";
 
 type InitCallbackParams = {
   id: string;
@@ -60,9 +61,12 @@ type PageContextType = {
   ) => 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;
+  env: EnvType;
+  getGlobalEnv: (key: string) => string | undefined | null;
+  setGlobalEnv: (key: string, value: any) => void;
   setItemData?: (id: string, data: any) => void;
+  globalVars: Record<string, any>;
+  updateGlobalVar: (key: string, value: any) => void;
 };
 
 export const PageContext = createContext<PageContextType>({
@@ -97,9 +101,12 @@ export const PageContext = createContext<PageContextType>({
   handleMethod: () => {},
   getVars: () => ({}),
   setVar: () => {},
-  getGlobalVar: () => undefined,
-  setGlobalVar: () => {},
+  env: { global: {}, local: {} },
+  getGlobalEnv: () => undefined,
+  setGlobalEnv: () => {},
   setItemData: () => {},
+  globalVars: {},
+  updateGlobalVar: () => {},
 });
 
 type PageProviderProps = React.PropsWithChildren<
@@ -133,6 +140,7 @@ export const PageProvider: React.FC<PageProviderProps> = ({
   setItemData,
 }) => {
   const [deviceWidth, setDeviceWidth] = useState<number>(0);
+  const [globalVars, setGlobalVars] = useState<Record<string, any>>({});
   const updateSelectedItem = (props?: Partial<SchemaItemType> | null) => {
     setSelectedItem?.(Object.assign(selectedItem!, props || {}));
     setSchema?.({ ...schema });
@@ -218,10 +226,14 @@ export const PageProvider: React.FC<PageProviderProps> = ({
       next.local[id][key] = value;
     });
   };
-  const getGlobalVar = (key: string) => env.global[key];
-  const setGlobalVar = (key: string, value: any) => {
+  const getGlobalEnv = (key: string) => env.global[key];
+  const setGlobalEnv = (key: string, value: any) => {
     setEnv((e: EnvType) => ({ ...e, global: { ...e.global, [key]: value } }));
   };
+  const updateGlobalVar = (key: string, value: any) => {
+    // console.log("updateGlobalVar", key, value);
+    setGlobalVars((c) => ({ ...c, [key]: value }));
+  };
 
   useEffect(() => {
     const nextGlobal: Record<string, any> = {};
@@ -260,12 +272,23 @@ export const PageProvider: React.FC<PageProviderProps> = ({
         handleMethod,
         getVars,
         setVar,
-        getGlobalVar,
-        setGlobalVar,
+        env,
+        getGlobalEnv,
+        setGlobalEnv,
         setItemData,
+        globalVars,
+        updateGlobalVar,
       }}
     >
       {children}
+      {schema.datasets?.map((item, index) => (
+        <GlobalDatasetContext
+          key={index}
+          datasetId={item.id}
+          var={item.key!}
+          dependencies={item.dependencies || []}
+        />
+      ))}
     </PageContext.Provider>
   );
 };

package/src/components/hooks/event.ts

@@ -10,7 +10,7 @@ export const useEvent = (item: SchemaItemType) => {
     {} as Record<string, string>,
   );
 
-  const { callMethod } = useMethods(item);
+  const { callMethod, updateEnv } = useMethods(item);
 
   const handleEvent = (eventName: string, arg?: any) => {
     const script = events[eventName];
@@ -27,6 +27,7 @@ export const useEvent = (item: SchemaItemType) => {
             "Number",
             "Boolean",
             "callMethod",
+            "updateEnv",
             "param",
             `
           "use strict";
@@ -37,6 +38,9 @@ export const useEvent = (item: SchemaItemType) => {
           const require = undefined;
           const module = undefined;
           const exports = undefined;
+          const cookie = undefined;
+          const localStorage = undefined;
+          const sessionStorage = undefined;
           ${script}
           `,
           );
@@ -50,6 +54,7 @@ export const useEvent = (item: SchemaItemType) => {
             Number,
             Boolean,
             callMethod,
+            updateEnv,
             {
               item,
               sourceId: item.id,

package/src/components/hooks/method.ts

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

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

package/src/components/panel/EventPanel.tsx

@@ -178,6 +178,7 @@ export const EventPanel: React.FC = ({}) => {
               module, exports, cookie, localStorage, sessionStorage。
             </li>
             <li>组件方法调用：callMethod(targetId, methodName, arg)。</li>
+            <li>环境变量设置：updateEnv(key, value)。</li>
           </ul>
         </div>
       </div>

package/src/components/panel/GlobalDatasetPanel.tsx

@@ -0,0 +1,165 @@
+import { DeleteOutlined } from "@ant-design/icons";
+import { Card, Drawer, Form, Input, Popconfirm, Select, Space } from "antd";
+import React, { useContext, useMemo, useState } from "react";
+import styled from "styled-components";
+import { PageContext } from "../context/PageContext";
+import { PaneHeader } from "./PaneHeader";
+
+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;
+  }
+`;
+
+export const GlobalDatasetPanel: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm();
+
+  const { schema, datasetSelector, setSchema } = useContext(PageContext);
+
+  const datasets = useMemo(() => schema?.datasets || [], [schema]);
+  const variables = useMemo(() => schema.variables || [], [schema.variables]);
+
+  return (
+    <Root>
+      <PaneHeader
+        title="全局数据集"
+        extra={
+          <Space>
+            <a
+              className="toolbar"
+              onClick={() => {
+                form.resetFields();
+                setVisible(true);
+              }}
+            >
+              +
+            </a>
+          </Space>
+        }
+      />
+      <div className="body beautified_scrollbar">
+        {datasets.map((dataset, index) => (
+          <Card
+            key={index}
+            title={dataset.name}
+            size="small"
+            variant="outlined"
+            extra={
+              <Popconfirm
+                title="确认删除吗？"
+                onConfirm={() => {
+                  setSchema((schema) => ({
+                    ...schema,
+                    datasets: datasets.filter((d) => d.id !== dataset.id),
+                  }));
+                }}
+              >
+                <a className="toolbar">
+                  <DeleteOutlined />
+                </a>
+              </Popconfirm>
+            }
+            styles={{
+              header: {minHeight: 0}
+            }}
+          >
+            <Form
+              layout="vertical"
+              size="small"
+              styles={{
+                label: { fontSize: 12, color: "var(--ant-color-text-label)" },
+              }}
+            >
+              <Form.Item label="变量名" style={{ marginBottom: 10 }}>
+                <Input
+                  name="key"
+                  size="small"
+                  value={dataset.key}
+                  placeholder="请输入变量名"
+                  onChange={(e) => {
+                    datasets[index].key = e.target.value;
+                    setSchema((schema) => ({
+                      ...schema,
+                      datasets: [...datasets],
+                    }));
+                  }}
+                  style={{ width: "100%" }}
+                />
+              </Form.Item>
+              <Form.Item label="依赖环境变量" style={{ marginBottom: 10 }}>
+                <Select
+                  size="small"
+                  mode="multiple"
+                  options={variables.map((variable) => ({
+                    label: variable.name,
+                    value: variable.name,
+                  }))}
+                  placeholder="请选择依赖环境变量"
+                  style={{ width: "100%" }}
+                  value={dataset.dependencies}
+                  notFoundContent={"暂无依赖环境变量"}
+                  onChange={(values) => {
+                    datasets[index].dependencies = values;
+                    setSchema((schema) => ({
+                      ...schema,
+                      datasets: [...datasets],
+                    }));
+                  }}
+                />
+              </Form.Item>
+              <Form.Item label="AI解读提示词" tooltip="用于AI解读数据集，为空时不进行解读" style={{ marginBottom: 0 }}>
+                <Input.TextArea
+                  size="small"
+                  value={dataset.aiPrompt}
+                  onChange={(e) => {
+                    datasets[index].aiPrompt = e.target.value;
+                    setSchema((schema) => ({
+                      ...schema,
+                      datasets: [...datasets],
+                    }));
+                  }}
+                  rows={4}
+                />
+              </Form.Item>
+            </Form>
+          </Card>
+        ))}
+      </div>
+      {!!datasetSelector && (
+        <Drawer
+          title="选择数据集"
+          size={800}
+          open={visible}
+          onClose={() => {
+            setVisible(false);
+          }}
+        >
+          {datasetSelector((dataset) => {
+            setVisible(false);
+            setSchema((schema) => ({
+              ...schema,
+              datasets: [
+                ...datasets,
+                {
+                  id: dataset.id,
+                  name: dataset.name,
+                  key: dataset.id,
+                  output: dataset.output,
+                  dependencies: [],
+                },
+              ],
+            }));
+          })}
+        </Drawer>
+      )}
+    </Root>
+  );
+};

package/src/components/panel/VariablesPanel.tsx

@@ -22,13 +22,16 @@ const Root = styled.div`
 `;
 
 export const VariablesPanel: React.FC = () => {
-  const {schema, setSchema} = useContext(PageContext);
+  const {schema, setSchema, setGlobalEnv} = useContext(PageContext);
   const [visible, setVisible] = React.useState(false);
   const [editIndex, setEditIndex] = React.useState(-1);
   const [form] = Form.useForm<VariableItem>();
   const list = useMemo(() => schema.variables || [], [schema.variables]);
   const onUpdateVariables = (data: VariableItem[]) => {
     setSchema({ ...schema, variables: data });
+    data.forEach((item) => {
+      setGlobalEnv(item.name, item.value);
+    });
   };
   const columns = [
     {

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

@@ -71,6 +71,7 @@ export const TextPlugin: PluginType = {
       },
     },
   },
+  events: [{ name: "点击", handler: "click" }],
 };
 
 export const ImagePlugin: PluginType = {
@@ -197,6 +198,7 @@ export const HtmlPlugin: PluginType = {
       template: `<div>{{name}}, welcome to the world of programming.</div>`,
     },
   },
+  events: [{ name: "点击", handler: "click" }],
 };
 
 export const EchartsPlugin: PluginType = {
@@ -459,6 +461,10 @@ export const ModalPlugin: PluginType = {
     },
     children: [],
   },
+  events: [
+    { name: "打开", handler: "open" },
+    { name: "关闭", handler: "close" },
+  ]
 };
 
 export const DrawerPlugin: PluginType = {
@@ -485,6 +491,10 @@ export const DrawerPlugin: PluginType = {
     },
     children: [],
   },
+  events: [
+    { name: "打开", handler: "open" },
+    { name: "关闭", handler: "close" },
+  ]
 };
 
 export const plugins: PluginType[] = [

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

@@ -1,8 +1,9 @@
 import React, { useRef } from "react";
-import { Form, InputNumber } from "antd";
+import { Form, InputNumber, Space, Tooltip } from "antd";
 import Editor from "@monaco-editor/react";
 import type { PropEditorProps } from "./types";
 import { IconFont } from "../../../icon/IconFont";
+import { InfoCircleOutlined } from "@ant-design/icons";
 
 export type EchartsModel = { script: string; height?: number };
 
@@ -40,7 +41,24 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
         layout="vertical"
         label={
           <>
-            Echarts 渲染脚本{" "}
+              <Space>
+                Echarts 渲染脚本{" "}
+                <Tooltip
+                  title={
+                    <>
+                      模板语法参考
+                      <ul style={{padding: 0, listStyle: "none"}}>
+                        <li>变量调用：{ `{{变量名}}` }</li>
+                        <li>环境变量：{ `{{$e.变量名}}` }</li>
+                        <li>全局变量：{ `{{$g.变量名}}` }</li>
+                        <li>函数参数：{ `{{data}}` }</li>
+                      </ul>
+                    </>
+                  }
+                >
+                  <InfoCircleOutlined />
+                </Tooltip>
+              </Space>
             <a onClick={format}>
               <IconFont type="icon-formate" /> 格式化
             </a>

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

@@ -1,8 +1,9 @@
 import React, { useRef } from "react";
-import { Form, Select } from "antd";
+import { Form, Select, Space, Tooltip } from "antd";
 import Editor from "@monaco-editor/react";
 import type { PropEditorProps } from "./types";
 import { IconFont } from "../../../icon/IconFont";
+import { InfoCircleOutlined } from "@ant-design/icons";
 
 export type HtmlModel = { template: string; classNames?: string[] };
 
@@ -31,7 +32,23 @@ export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
         <Form.Item
           label={
             <>
-              模板
+              <Space>
+                模板
+                <Tooltip
+                  title={
+                    <>
+                      模板语法参考
+                      <ul style={{padding: 0, listStyle: "none"}}>
+                        <li>变量调用：{ `{{变量名}}` }</li>
+                        <li>环境变量：{ `{{$e.变量名}}` }</li>
+                        <li>全局变量：{ `{{$g.变量名}}` }</li>
+                      </ul>
+                    </>
+                  }
+                >
+                  <InfoCircleOutlined />
+                </Tooltip>
+              </Space>
               <a onClick={format}>
                 <IconFont type="icon-formate" /> 格式化
               </a>

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

@@ -4,6 +4,7 @@ import type { PropEditorProps } from "./types";
 
 export type TextModel = {
   text?: string;
+  tag?: string;
   customStyle?: React.CSSProperties;
   classNames?: string[];
 };
@@ -27,6 +28,17 @@ export const TextProps: React.FC<PropEditorProps<TextModel>> = ({
           onChange={(e) => triggerModel("text", e.target.value)}
         />
       </Form.Item>
+      <Form.Item label="HTML标签">
+        <Select
+          size="small"
+          value={model.tag}
+          onChange={(v) => triggerModel("tag", v)}
+          options={[
+            { value: "span", label: "span" },
+            { value: "a", label: "a" },
+          ]}
+        />
+      </Form.Item>
       <Form.Item label="类名">
         <Select
           size="small"

package/src/components/plugins/@antd/items/DrawerRender.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { PageContext } from "../../../context/PageContext";
 import { DropContainer } from "../../../dnd/DropContainer";
 import { CallbackType, HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { useEvent } from "../../../hooks/event";
 
 const Placeholder = styled.div`
   text-align: center;
@@ -56,6 +57,8 @@ export const DrawerRender: React.FC<DrawerRenderProps> = ({
   const [localChildren, setLocalChildren] = useState(item.children || []);
   const [size, setSize] = useState(rest.size || 400);
 
+  const { handleEvent } = useEvent(item);
+
   const onLocalChildrenChange = (list: any[]) => {
     item.children = list;
     setLocalChildren(list);
@@ -93,6 +96,10 @@ export const DrawerRender: React.FC<DrawerRenderProps> = ({
     toolbarEl.style.left = `${rect.left + scrollLeft - 1}px`;
   };
 
+  const handleOpenChange = (open: boolean) => {
+    handleEvent(open ? "open" : "close");
+  };
+
   useEffect(() => {
     setSize(rest.size || 400);
   }, [rest.size]);
@@ -145,6 +152,7 @@ export const DrawerRender: React.FC<DrawerRenderProps> = ({
         open={open}
         size={size}
         onClose={() => setOpen(false)}
+        afterOpenChange={handleOpenChange}
         getContainer={() =>
           designable ? document.querySelector(".page-canvas")! : document.body
         }

package/src/components/plugins/@antd/items/EchartsRender.tsx

@@ -32,7 +32,7 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
   style,
   className,
 }) => {
-  const { initCallback } = useContext(PageContext);
+  const { initCallback, globalVars, env } = useContext(PageContext);
   const chartRef = useRef<HTMLDivElement | null>(null);
   const [chart, setChart] = useState<echarts.ECharts | null>(null);
   const [signal, setSignal] = useState<number>(0);
@@ -59,6 +59,8 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
           "String",
           "Number",
           "Boolean",
+          "$g",
+          "$e",
           "data",
           `
           "use strict";
@@ -82,6 +84,8 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
           String,
           Number,
           Boolean,
+          globalVars,
+          env.global,
           datasource,
         );
       } catch (evalError) {
@@ -127,7 +131,7 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
       }
       setTimeout(() => chart.resize(), 50);
     }
-  }, [chart, script, datasource]);
+  }, [chart, script, datasource, globalVars, env]);
 
   useEffect(() => {
     if (!chart) return;