bi-sdk-react 0.0.3 → 0.0.5

package/package.json

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

package/src/components/PageDesigner.tsx

@@ -1,7 +1,9 @@
 import {
+  CloseOutlined,
   DesktopOutlined,
   EyeInvisibleOutlined,
   EyeOutlined,
+  ImportOutlined,
   MobileOutlined,
   RedoOutlined,
   SaveOutlined,
@@ -10,9 +12,18 @@ import {
   ZoomInOutlined,
   ZoomOutOutlined,
 } from "@ant-design/icons";
-import { Button, Divider, Radio, Space, Tooltip } from "antd";
+import {
+  Button,
+  Divider,
+  Drawer,
+  Modal,
+  Popover,
+  Radio,
+  Space,
+  Tooltip,
+} from "antd";
 import React, {
-  useEffect,
+  ReactNode,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -32,15 +43,35 @@ import { PropertiesPanel } from "./panel/PropertiesPanel";
 import { ScriptPanel } from "./panel/ScriptPanel";
 import { VariablesPanel } from "./panel/VariablesPanel";
 
-import { PageSchema, PluginType } from "./typing";
+import { Editor } from "@monaco-editor/react";
 import { DesignerProvider } from "./context/DesignerContext";
 import { useDeepCompareEffect } from "./hooks/useDeepCompareEffect";
 import "./styles.css";
+import {
+  ChatResponseAnswerEffectType,
+  DatasetSelectorFunction,
+  FetchType,
+  PageSchema,
+  PluginType,
+  SchemaItemType,
+} from "./typing";
+import { DatasetPanel } from "./panel/DatasetPanel";
 
 export type PageDesignerProps = {
+  pageId: string;
   agentList?: any[];
   plugins?: PluginType[];
   headerExtra?: React.ReactNode;
+  datasourceEnable?: boolean;
+  scriptEnable?: boolean;
+  datasetPanel?: React.ForwardRefExoticComponent<
+    Omit<any, "ref"> &
+      React.RefAttributes<{
+        handleAdd: () => void;
+      }>
+  >;
+  datasetSelector?: DatasetSelectorFunction;
+  fetch?: FetchType;
 };
 
 const Container = styled.div`
@@ -111,6 +142,7 @@ const Container = styled.div`
     flex-direction: column;
     gap: 12px;
     padding: 12px;
+    height: calc(100% - 40px);
   }
   .left-pane-tabs > label,
   .right-pane-tabs > label {
@@ -135,9 +167,66 @@ const Container = styled.div`
   }
 `;
 
+const ImportModal: React.FC<{
+  open?: boolean;
+  onCancel?: () => void;
+  onOk?: (schema: PageSchema) => void;
+}> = ({ open, onCancel, onOk }) => {
+  const [importSchema, setImportSchema] = useState<string>(
+    JSON.stringify({
+      info: {},
+      datasources: [],
+      scripts: [],
+      variables: [],
+      items: [],
+    })
+  );
+  return (
+    <Modal
+      title="导入页面"
+      open={open}
+      width={800}
+      onCancel={onCancel}
+      onOk={() => onOk?.(JSON.parse(importSchema))}
+      okText="导入"
+      cancelText="取消"
+      styles={{ body: { height: "calc(100vh - 250px)", overflow: "auto" } }}
+    >
+      <div
+        className="body"
+        style={{ flex: "1 1 auto", display: "flex", height: "100%" }}
+      >
+        <Editor
+          height="100%"
+          defaultLanguage="json"
+          value={importSchema}
+          options={{
+            minimap: { enabled: false },
+          }}
+          onChange={(v) => setImportSchema(v || "")}
+        />
+      </div>
+    </Modal>
+  );
+};
+
 export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
-  ({ agentList = [], plugins = [], headerExtra }, ref) => {
+  (
+    {
+      pageId,
+      agentList = [],
+      plugins = [],
+      headerExtra,
+      datasourceEnable = true,
+      scriptEnable = true,
+      datasetPanel,
+      datasetSelector,
+      fetch,
+    },
+    ref
+  ) => {
     const pageCanvasRef = useRef<any>(null);
+    const datasetPanelRef = useRef<any>(null);
     const [zoom, setZoom] = useState(1);
     const [history, setHistory] = useState<any[]>([]);
     const [future, setFuture] = useState<any[]>([]);
@@ -146,14 +235,22 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       "desktop" | "mobile" | "tablet"
     >("desktop");
     const [leftPanelActiveKey, setLeftPanelActiveKey] = useState<
-      "component" | "layer" | "datasource" | "script" | "env" | "code"
+      | "component"
+      | "layer"
+      | "datasource"
+      | "script"
+      | "env"
+      | "code"
+      | "dataset"
     >("component");
     const [rightPanelActiveKey, setRightPanelActiveKey] = useState<
       "ai" | "props" | "cascade"
-    >("ai");
+    >(fetch?.ai ? "ai" : "props");
     const [showLeft, setShowLeft] = useState(true);
     const [showRight, setShowRight] = useState(true);
-    const [selectedItem, setSelectedItem] = useState<any>(null);
+    const [selectedItem, setSelectedItem] = useState<SchemaItemType | null>(
+      null
+    );
     const [schema, setSchema] = useState<PageSchema>({
       info: {},
       datasources: [],
@@ -162,6 +259,8 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       items: [],
     });
     const [designable, setDesignable] = useState(true);
+    const [importModalOpen, setImportModalOpen] = useState(false);
+    const [aiPaneOpen, setAiPaneOpen] = useState(false);
     const containerStyle = useMemo(() => {
       const left = showLeft ? "250px" : "";
       const right = showRight ? "400px" : "";
@@ -252,14 +351,69 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       setTimeout(() => pageCanvasRef.current?.handleResize?.(), 0);
     };
 
+    const handleImportClick = () => {
+      setImportModalOpen(true);
+    };
+
+    const handleImportOk = (s: PageSchema) => {
+      setImportModalOpen(false);
+      setSchema(s);
+    };
+
+    /**
+     * 处理效果
+     */
+    const handleAiEffect = (effect: ChatResponseAnswerEffectType) => {
+      if (effect.datasets?.length && datasetPanelRef?.current?.reload) {
+        datasetPanelRef.current.reload();
+      }
+      if (effect.schema) {
+        setSchema(effect.schema);
+      } else if (effect.pageItems?.length) {
+        const effectItemMap = new Map(effect.pageItems.map((item) => [item.id, item]));
+        const cloneSchema = JSON.parse(JSON.stringify(schema));
+        const loop = (list: any[] = []) => {
+          list.forEach((item) => {
+            if (effectItemMap.has(item.id)) {
+              Object.keys(item).forEach((k) => {
+                if (k !== "id") {
+                  delete item[k];
+                }
+              });
+              Object.assign(item, effectItemMap.get(item.id)!);
+            }
+            if (Array.isArray(item.children)) {
+              loop(item.children);
+            } else if (typeof item.children === "object" && item.children) {
+              Object.keys(item.children).forEach((k) => {
+                if (Array.isArray(item.children[k])) {
+                  loop(item.children[k]);
+                }
+              });
+            }
+          });
+        };
+        loop(cloneSchema.items);
+        setSchema(cloneSchema);
+      }
+    };
+
+    const rightActiveKey = useMemo(() => {
+      if (rightPanelActiveKey === "cascade" && !selectedItem?.cascadeIds) return "props";
+      return rightPanelActiveKey;
+    }, [selectedItem, rightPanelActiveKey]);
+
     return (
       <DesignerProvider
+        pageId={pageId}
         designable={designable}
         plugins={plugins}
         schema={schema}
         selectedItem={selectedItem}
         setSchema={setSchema}
         setSelectedItem={setSelectedItem}
+        datasetSelector={datasetSelector}
+        fetch={fetch}
       >
         <div
           style={{ display: "flex", flexDirection: "column", height: "100%" }}
@@ -300,6 +454,15 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                   <RedoOutlined />
                 </a>
               </Tooltip>
+              <Divider orientation="vertical" />
+              <Tooltip title="导入JSON">
+                <a
+                  className={`toolbar ${future.length > 0 ? "active" : ""}`}
+                  onClick={handleImportClick}
+                >
+                  <ImportOutlined />
+                </a>
+              </Tooltip>
             </Space>
             <Space>
               <Tooltip title="缩小">
@@ -370,16 +533,27 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                       <IconFont type="icon-outline" />
                     </Tooltip>
                   </Radio.Button>
-                  <Radio.Button value="datasource">
-                    <Tooltip title="数据集" placement="right">
-                      <IconFont type="icon-datasource" />
-                    </Tooltip>
-                  </Radio.Button>
-                  <Radio.Button value="script">
-                    <Tooltip title="脚本" placement="right">
-                      <IconFont type="icon-js" />
-                    </Tooltip>
-                  </Radio.Button>
+                  {!!datasetPanel && (
+                    <Radio.Button value="dataset">
+                      <Tooltip title="数据集" placement="right">
+                        <IconFont type="icon-dataset" />
+                      </Tooltip>
+                    </Radio.Button>
+                  )}
+                  {datasourceEnable && (
+                    <Radio.Button value="datasource" title="数据源">
+                      <Tooltip title="数据源" placement="right">
+                        <IconFont type="icon-datasource" />
+                      </Tooltip>
+                    </Radio.Button>
+                  )}
+                  {scriptEnable && (
+                    <Radio.Button value="script">
+                      <Tooltip title="脚本" placement="right">
+                        <IconFont type="icon-js" />
+                      </Tooltip>
+                    </Radio.Button>
+                  )}
                   <Radio.Button value="env">
                     <Tooltip title="环境变量" placement="right">
                       <IconFont type="icon-variable" />
@@ -402,10 +576,17 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
               >
                 {leftPanelActiveKey === "component" && <ComponentPanel />}
                 {leftPanelActiveKey === "layer" && <LayerPanel />}
-                {leftPanelActiveKey === "datasource" && <DatasourcePanel />}
-                {leftPanelActiveKey === "script" && <ScriptPanel />}
+                {datasourceEnable && leftPanelActiveKey === "datasource" && (
+                  <DatasourcePanel />
+                )}
+                {scriptEnable && leftPanelActiveKey === "script" && (
+                  <ScriptPanel />
+                )}
                 {leftPanelActiveKey === "env" && <VariablesPanel />}
                 {leftPanelActiveKey === "code" && <CodePanel />}
+                {!!datasetPanel && leftPanelActiveKey === "dataset" && (
+                  <DatasetPanel ref={datasetPanelRef} renderNode={datasetPanel} />
+                )}
               </div>
             </div>
             <div className="center" style={{ flex: "1 1 auto" }}>
@@ -447,7 +628,11 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                     transformOrigin: "top center",
                   }}
                 >
-                  <PageCanvas ref={pageCanvasRef} device={deviceType} />
+                  <PageCanvas
+                    ref={pageCanvasRef}
+                    device={deviceType}
+                    fetch={fetch}
+                  />
                 </div>
               </div>
             </div>
@@ -460,17 +645,27 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                   width: "calc(100% - 47px)",
                 }}
               >
-                {rightPanelActiveKey === "ai" && (
+                {rightActiveKey === "ai" && fetch?.ai && (
                   <AiPanel agentList={agentList} />
                 )}
-                {rightPanelActiveKey === "props" && <PropertiesPanel />}
-                {rightPanelActiveKey === "cascade" && <CascadePanel />}
+                {rightActiveKey === "props" && (
+                  <PropertiesPanel datasourceEnable={datasourceEnable} />
+                )}
+                {rightActiveKey === "cascade" &&
+                  selectedItem?.cascadeIds && <CascadePanel />}
               </div>
               <div
-                style={{ padding: "22px 0", borderLeft: "solid 1px #e8e8e8" }}
+                style={{
+                  padding: "22px 0",
+                  borderLeft: "solid 1px #e8e8e8",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
               >
                 <Radio.Group
-                  value={rightPanelActiveKey}
+                  value={rightActiveKey}
                   onChange={(e) => setRightPanelActiveKey(e.target.value)}
                   buttonStyle="outline"
                   style={{
@@ -481,26 +676,89 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                   }}
                   className="right-pane-tabs"
                 >
-                  <Radio.Button value="ai">
-                    <Tooltip title="智能体" placement="right">
-                      <IconFont type="icon-assistant" />
-                    </Tooltip>
-                  </Radio.Button>
+                  {fetch?.ai && (
+                    <Radio.Button value="ai">
+                      <Tooltip title="智能助理" placement="right">
+                        <IconFont type="icon-assistant" />
+                      </Tooltip>
+                    </Radio.Button>
+                  )}
                   <Radio.Button value="props">
                     <Tooltip title="属性" placement="right">
                       <IconFont type="icon-info" />
                     </Tooltip>
                   </Radio.Button>
-                  <Radio.Button value="cascade">
-                    <Tooltip title="联动" placement="right">
-                      <IconFont type="icon-cascade" />
-                    </Tooltip>
-                  </Radio.Button>
+                  {selectedItem?.cascadeIds && (
+                    <Radio.Button value="cascade">
+                      <Tooltip title="联动" placement="right">
+                        <IconFont type="icon-cascade" />
+                      </Tooltip>
+                    </Radio.Button>
+                  )}
                 </Radio.Group>
+                {/* <Popover
+                  content={
+                    <AiPanel
+                      agentList={agentList}
+                      style={{ width: 400, height: "85vh" }}
+                    />
+                  }
+                  trigger="click"
+                  placement="bottomLeft"
+                  styles={{
+                    root: {
+                      right: 15,
+                    },
+                    container: {
+                      boxShadow: "0 0 10px 1px #0000008a",
+                      padding: 0,
+                    },
+                  }}
+                > */}
+                {/* <Tooltip title="智能助理" placement="left">
+                  <Button
+                    type="link"
+                    style={{ fontSize: 20 }}
+                    onClick={() => setAiPaneOpen(true)}
+                  >
+                    <IconFont type="icon-assistant" />
+                  </Button>
+                </Tooltip> */}
+                {/* </Popover> */}
               </div>
             </div>
           </Container>
         </div>
+        <ImportModal
+          open={importModalOpen}
+          onOk={handleImportOk}
+          onCancel={() => setImportModalOpen(false)}
+        />
+        <Drawer
+          open={aiPaneOpen}
+          size={400}
+          mask={false}
+          title={null}
+          closable={false}
+          styles={{
+            body: {
+              padding: 0,
+            },
+          }}
+          onClose={() => setAiPaneOpen(false)}
+        >
+          <AiPanel
+            agentList={agentList}
+            headExtra={
+              <Button
+                type="link"
+                icon={<CloseOutlined />}
+                onClick={() => setAiPaneOpen(false)}
+              />
+            }
+            onEffect={handleAiEffect}
+          />
+        </Drawer>
       </DesignerProvider>
     );
   }

package/src/components/context/DesignerContext.tsx

@@ -1,7 +1,8 @@
-import { createContext } from "react";
-import { PageSchema, PluginType, SchemaItemType } from "../typing";
+import { createContext, ReactNode } from "react";
+import { DatasetSelectorFunction, FetchType, PageSchema, PluginType, SchemaItemType } from "../typing";
 
 type DesignerContextType = {
+  pageId: string;
   designable: boolean;
   plugins: PluginType[];
   schema: PageSchema;
@@ -10,9 +11,12 @@ type DesignerContextType = {
   setSelectedItem: React.Dispatch<React.SetStateAction<SchemaItemType | null>>;
   updateSelectedItem: (selectedItem?: Partial<SchemaItemType> | null) => void;
   forceUpdate: () => void;
+  datasetSelector?: DatasetSelectorFunction;
+  fetch?: FetchType;
 };
 
 export const DesignerContext = createContext<DesignerContextType>({
+  pageId: "",
   designable: false,
   plugins: [],
   schema: {
@@ -27,6 +31,8 @@ export const DesignerContext = createContext<DesignerContextType>({
   setSelectedItem: () => {},
   updateSelectedItem: () => {},
   forceUpdate: () => {},
+  datasetSelector: undefined,
+  fetch: undefined,
 });
 
 type DesignerProviderProps = React.PropsWithChildren<
@@ -34,16 +40,19 @@ type DesignerProviderProps = React.PropsWithChildren<
     Partial<DesignerContextType>,
     "updateSelectedItem" | "schema" | "forceUpdate"
   > &
-    Pick<DesignerContextType, "schema">
+    Pick<DesignerContextType, "schema" | "pageId">
 >;
 
 export const DesignerProvider: React.FC<DesignerProviderProps> = ({
+  pageId,
   designable,
   plugins,
   schema,
   selectedItem,
   setSchema,
   setSelectedItem,
+  datasetSelector,
+  fetch,
   children,
 }) => {
   const updateSelectedItem = (props?: Partial<SchemaItemType> | null) => {
@@ -53,6 +62,7 @@ export const DesignerProvider: React.FC<DesignerProviderProps> = ({
   return (
     <DesignerContext.Provider
       value={{
+        pageId,
         designable: !!designable,
         plugins: plugins || [],
         schema,
@@ -60,6 +70,8 @@ export const DesignerProvider: React.FC<DesignerProviderProps> = ({
         setSchema: setSchema || (() => {}),
         setSelectedItem: setSelectedItem || (() => {}),
         updateSelectedItem,
+        datasetSelector,
+        fetch,
         forceUpdate: () => {
           setSchema?.({ ...schema });
         },

package/src/components/context/EnvContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, FC, PropsWithChildren } from "react";
-import { CallbacksType, EnvType } from "../typing";
+import { CallbacksType, EnvType, FetchType } from "../typing";
 
 type InitCallbackParams = {
   id: string;
@@ -9,6 +9,7 @@ type InitCallbackParams = {
 type EnvContextType = {
   deviceWidth: number;
   env: EnvType;
+  fetch?: FetchType;
   callbacks: CallbacksType;
   initCallback: ({ id, callback }: InitCallbackParams) => void;
 };
@@ -23,6 +24,7 @@ export const EnvContext = createContext<EnvContextType>({
 export const EnvProvider: FC<PropsWithChildren<EnvContextType>> = ({
   deviceWidth,
   env,
+  fetch,
   callbacks,
   initCallback,
   children,
@@ -32,6 +34,7 @@ export const EnvProvider: FC<PropsWithChildren<EnvContextType>> = ({
       value={{
         deviceWidth,
         env,
+        fetch,
         callbacks,
         initCallback,
       }}

package/src/components/icon/IconFont.tsx

@@ -1,16 +1,20 @@
-import React from 'react'
-import { createFromIconfontCN } from '@ant-design/icons'
+import React from "react";
+import { createFromIconfontCN } from "@ant-design/icons";
 
 const IconFontCN = createFromIconfontCN({
-  scriptUrl: 'https://at.alicdn.com/t/c/font_5072483_pswdqptbsip.js'
-})
+  scriptUrl: "https://at.alicdn.com/t/c/font_5072483_zvtcct793i.js",
+});
 
 export type IconFontProps = {
-  type: string
-  className?: string
-}
-
-export const IconFont: React.FC<IconFontProps> = ({ type, className = '' }) => {
-  return <IconFontCN type={type} className={className} />
-}
+  type: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
 
+export const IconFont: React.FC<IconFontProps> = ({
+  type,
+  className = "",
+  style = {},
+}) => {
+  return <IconFontCN type={type} className={className} style={style} />;
+};

package/src/components/layout/PageCanvas.tsx

@@ -8,12 +8,13 @@ import React, {
 } from "react";
 import styled from "styled-components";
 import { DropContainer } from "../dnd/DropContainer";
-import { CallbacksType, EnvType } from "../typing";
+import { CallbacksType, EnvType, FetchType } from "../typing";
 import { DesignerContext } from "../context/DesignerContext";
 import { EnvProvider } from "../context/EnvContext";
 
 export type PageCanvasProps = {
   device?: "desktop" | "mobile" | "tablet";
+  fetch?: FetchType;
 };
 
 const Wrapper = styled.div`
@@ -53,7 +54,7 @@ const Wrapper = styled.div`
 `;
 
 export const PageCanvas = React.forwardRef<any, PageCanvasProps>(
-  function PageCanvas({ device = "desktop" }, ref) {
+  ({ device = "desktop", fetch }, ref) => {
     const { schema, forceUpdate } = useContext(DesignerContext);
     const rootRef = useRef<HTMLDivElement | null>(null);
     const [canvasWidth, setCanvasWidth] = useState(0);
@@ -129,6 +130,7 @@ export const PageCanvas = React.forwardRef<any, PageCanvasProps>(
         env={env}
         callbacks={callbacks}
         initCallback={initCallback}
+        fetch={fetch}
       >
         <Wrapper ref={rootRef}>
           <DropContainer

package/src/components/layout/PageItem.tsx

@@ -90,7 +90,7 @@ export const PageItem: React.FC<PageItemProps> = ({
     if (selectedItem && selectedItem === item && designable) {
       const div = document.createElement("div");
       div.style.position = "absolute";
-      div.style.zIndex = "9999";
+      div.style.zIndex = "1000";
       div.style.display = "flex";
       div.style.gap = "4px";
       const text = document.createElement("span");