bi-sdk-react 0.0.1

package/dist/umd/js/bi-sdk.umd.min.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "bi-sdk-react",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "main": "dist/umd/js/bi-sdk.umd.min.js",
+  "module": "dist/es/js/bi-sdk.es.js",
+  "es": "dist/es/js/bi-sdk.es.js",
+  "types": "dist/types/components/index.d.ts",
+  "scripts": {
+    "serve": "rsbuild dev",
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:lib": "npm run build:lib:umd && npm run build:lib:es",
+    "build:lib:umd": "cross-env NODE_ENV=production BUILD_TARGET=lib rsbuild build --config rsbuild.lib.config.ts",
+    "build:lib:es": "cross-env NODE_ENV=production BUILD_TARGET=lib rsbuild build --config rsbuild.es.config.ts",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
+    "@monaco-editor/react": "^4.6.0",
+    "antd": "^6.1.1",
+    "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.13",
+    "echarts": "^5.5.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "styled-components": "^6.1.13",
+    "uuid": "^13.0.0",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.5.0",
+    "@rsbuild/plugin-react": "^1.4.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.2",
+    "cross-env": "^10.1.0",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "files": [
+    "dist",
+    "src",
+    "package.json",
+    "README.md"
+  ]
+}

package/src/components/PageDesigner.tsx

@@ -0,0 +1,509 @@
+import {
+  DesktopOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+  MobileOutlined,
+  RedoOutlined,
+  SaveOutlined,
+  TabletOutlined,
+  UndoOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from "@ant-design/icons";
+import { Button, Divider, Radio, Space, Tooltip } from "antd";
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styled from "styled-components";
+import { IconFont } from "./icon/IconFont";
+import { PageCanvas } from "./layout/PageCanvas";
+import { AiPanel } from "./panel/AiPanel";
+import { CascadePanel } from "./panel/CascadePanel";
+import { CodePanel } from "./panel/CodePanel";
+import { ComponentPanel } from "./panel/ComponentPanel";
+import { DatasourcePanel } from "./panel/DatasourcePanel";
+import { LayerPanel } from "./panel/LayerPanel";
+import { PaneHeader } from "./panel/PaneHeader";
+import { PropertiesPanel } from "./panel/PropertiesPanel";
+import { ScriptPanel } from "./panel/ScriptPanel";
+import { VariablesPanel } from "./panel/VariablesPanel";
+
+import { PageSchema, PluginType } from "./typing";
+import { DesignerProvider } from "./context/DesignerContext";
+import { useDeepCompareEffect } from "./hooks/useDeepCompareEffect";
+import "./styles.css";
+
+export type PageDesignerProps = {
+  agentList?: any[];
+  plugins?: PluginType[];
+  headerExtra?: React.ReactNode;
+};
+
+const Container = styled.div`
+  height: 100%;
+  display: grid;
+  background: #ffffff;
+  * {
+    box-sizing: border-box;
+  }
+  & > div {
+    height: calc(100vh - 40px);
+    display: flex;
+    flex-direction: column;
+  }
+  & > .center {
+    background: #ebe7e7;
+    align-items: center;
+    min-width: 0;
+
+    .body {
+      flex: 1 1 auto;
+      overflow: auto;
+      position: relative;
+      background: #f3f3f3;
+      box-sizing: border-box;
+      max-width: 100%;
+    }
+    .body.desktop {
+      width: 100%;
+    }
+    .body.mobile,
+    .body.tablet {
+      padding: 0;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      border-radius: 8px;
+    }
+    .body.tablet {
+      width: 1024px;
+    }
+    .body.mobile {
+      width: 430px;
+    }
+  }
+
+  & > .left,
+  & > .right {
+    transition: all 0.25s ease-in-out;
+    overflow: hidden;
+  }
+  & > .left {
+    border-right: 1px solid #e8e8e8;
+    display: flex;
+    flex-direction: row;
+  }
+  & > .left .body {
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+  & > .right {
+    display: flex;
+    flex-direction: row;
+    border-left: 1px solid #e8e8e8;
+  }
+  & > .right .body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+  }
+  .left-pane-tabs > label,
+  .right-pane-tabs > label {
+    border: none;
+    height: 32px;
+    padding: 7px;
+    font-size: 20px;
+    padding: 0 12px;
+    border-radius: 0;
+
+    &:not(:first-child)::before {
+      content: none;
+    }
+  }
+  .left-pane-tabs > label.ant-radio-button-wrapper-checked {
+    border-left: solid 2px #1890ff;
+    background: linear-gradient(to right, #1890ff1a, #ffffff);
+  }
+  .right-pane-tabs > label.ant-radio-button-wrapper-checked {
+    border-right: solid 2px #1890ff;
+    background: linear-gradient(to left, #1890ff1a, #ffffff);
+  }
+`;
+
+export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
+  ({ agentList = [], plugins = [], headerExtra }, ref) => {
+    const pageCanvasRef = useRef<any>(null);
+    const [zoom, setZoom] = useState(1);
+    const [history, setHistory] = useState<any[]>([]);
+    const [future, setFuture] = useState<any[]>([]);
+    const [isReplaying, setIsReplaying] = useState(false);
+    const [deviceType, setDeviceType] = useState<
+      "desktop" | "mobile" | "tablet"
+    >("desktop");
+    const [leftPanelActiveKey, setLeftPanelActiveKey] = useState<
+      "component" | "layer" | "datasource" | "script" | "env" | "code"
+    >("component");
+    const [rightPanelActiveKey, setRightPanelActiveKey] = useState<
+      "ai" | "props" | "cascade"
+    >("ai");
+    const [showLeft, setShowLeft] = useState(true);
+    const [showRight, setShowRight] = useState(true);
+    const [selectedItem, setSelectedItem] = useState<any>(null);
+    const [schema, setSchema] = useState<PageSchema>({
+      info: {},
+      datasources: [],
+      scripts: [],
+      variables: [],
+      items: [],
+    });
+    const [designable, setDesignable] = useState(true);
+    const containerStyle = useMemo(() => {
+      const left = showLeft ? "250px" : "";
+      const right = showRight ? "400px" : "";
+      return { gridTemplateColumns: `${left} 1fr ${right}` };
+    }, [showLeft, showRight]);
+    const leftStyle = useMemo(
+      () => ({ display: showLeft ? "flex" : "none" }),
+      [showLeft]
+    );
+    const rightStyle = useMemo(
+      () => ({ display: showRight ? "flex" : "none" }),
+      [showRight]
+    );
+    useDeepCompareEffect(() => {
+      if (isReplaying) return;
+      setHistory((h) => {
+        if (!h.length) return [JSON.parse(JSON.stringify(schema))];
+        return [...h, JSON.parse(JSON.stringify(schema))].slice(-50);
+      });
+      setFuture([]);
+    }, [schema]);
+
+    useImperativeHandle(ref, () => ({
+      handleOpen(s: PageSchema) {
+        setIsReplaying(true);
+        ensureIds(s.items);
+        setSchema(s);
+        setHistory([JSON.parse(JSON.stringify(s))]);
+        setFuture([]);
+        setTimeout(() => setIsReplaying(false), 0);
+      },
+    }));
+    const ensureIds = (items?: any[], id?: string) => {
+      if (!items) return;
+      items.forEach((item) => {
+        if (!item.id) {
+          item.id = id || Math.random().toString(36).slice(2, 10);
+        }
+        if (Array.isArray(item.children)) {
+          ensureIds(item.children);
+        } else if (typeof item.children === "object" && item.children) {
+          Object.keys(item.children).forEach((k) => {
+            if (Array.isArray(item.children[k])) {
+              ensureIds(
+                item.children[k],
+                Math.random().toString(36).slice(2, 10)
+              );
+            }
+          });
+        }
+      });
+    };
+    const handleUndo = () => {
+      setHistory((h) => {
+        if (h.length <= 1) return h;
+        setIsReplaying(true);
+        const prev = h[h.length - 2];
+        setFuture((f) => [...f, JSON.parse(JSON.stringify(schema))]);
+        setSchema(prev);
+        setSelectedItem(null);
+        setTimeout(() => setIsReplaying(false), 0);
+        return h.slice(0, -1);
+      });
+    };
+    const handleRedo = () => {
+      setFuture((f) => {
+        if (!f.length) return f;
+        setIsReplaying(true);
+        setHistory((h) => [...h, JSON.parse(JSON.stringify(schema))]);
+        const next = f[f.length - 1];
+        setSchema(next);
+        setSelectedItem(null);
+        setTimeout(() => setIsReplaying(false), 0);
+        return f.slice(0, -1);
+      });
+    };
+    const handleZoomIn = () =>
+      setZoom(parseFloat(Math.min(zoom + 0.1, 2).toFixed(1)));
+    const handleZoomOut = () =>
+      setZoom(parseFloat(Math.max(zoom - 0.1, 0.5).toFixed(1)));
+    const handleZoomReset = () => setZoom(1);
+    const toggleLeft = () => {
+      setShowLeft((s) => !s);
+      setTimeout(() => pageCanvasRef.current?.handleResize?.(), 0);
+    };
+    const toggleRight = () => {
+      setShowRight((s) => !s);
+      setTimeout(() => pageCanvasRef.current?.handleResize?.(), 0);
+    };
+
+    return (
+      <DesignerProvider
+        designable={designable}
+        plugins={plugins}
+        schema={schema}
+        selectedItem={selectedItem}
+        setSchema={setSchema}
+        setSelectedItem={setSelectedItem}
+      >
+        <div
+          style={{ display: "flex", flexDirection: "column", height: "100%" }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "8px 24px",
+              borderBottom: "solid 1px #e8e8e8",
+            }}
+          >
+            <Space>
+              <span style={{ fontSize: 16, fontWeight: 500 }}>
+                创建数据报表
+              </span>
+              <Divider orientation="vertical" />
+              <Tooltip title="保存">
+                <a className="toolbar">
+                  <SaveOutlined />
+                </a>
+              </Tooltip>
+              <Divider orientation="vertical" />
+              <Tooltip title="撤销">
+                <a
+                  className={`toolbar ${history.length > 1 ? "active" : ""}`}
+                  onClick={handleUndo}
+                >
+                  <UndoOutlined />
+                </a>
+              </Tooltip>
+              <Tooltip title="重做">
+                <a
+                  className={`toolbar ${future.length > 0 ? "active" : ""}`}
+                  onClick={handleRedo}
+                >
+                  <RedoOutlined />
+                </a>
+              </Tooltip>
+            </Space>
+            <Space>
+              <Tooltip title="缩小">
+                <a className="toolbar" onClick={handleZoomOut}>
+                  <ZoomOutOutlined />
+                </a>
+              </Tooltip>
+              <div style={{ fontSize: 12, color: "#999", userSelect: "none" }}>
+                {(zoom * 100).toFixed(0)}%
+              </div>
+              <Tooltip title="放大">
+                <a className="toolbar" onClick={handleZoomIn}>
+                  <ZoomInOutlined />
+                </a>
+              </Tooltip>
+              <Tooltip title="重置缩放">
+                <a className="toolbar" onClick={handleZoomReset}>
+                  <IconFont type="icon-zoom-reset" />
+                </a>
+              </Tooltip>
+              <Divider orientation="vertical" />
+              <Tooltip title="切换左侧栏">
+                <a
+                  className={`toolbar ${showLeft ? "active" : ""}`}
+                  onClick={toggleLeft}
+                >
+                  <IconFont type="icon-sider-l" />
+                </a>
+              </Tooltip>
+              <Tooltip title="切换右侧栏">
+                <a
+                  className={`toolbar ${showRight ? "active" : ""}`}
+                  onClick={toggleRight}
+                >
+                  <IconFont type="icon-sider-r" />
+                </a>
+              </Tooltip>
+              {headerExtra}
+            </Space>
+          </div>
+          <Container style={containerStyle as any}>
+            <div className="left" style={leftStyle as any}>
+              <div
+                style={{
+                  padding: "22px 1px 22px 0",
+                  borderRight: "solid 1px #e8e8e8",
+                }}
+              >
+                <Radio.Group
+                  value={leftPanelActiveKey}
+                  onChange={(e) => setLeftPanelActiveKey(e.target.value)}
+                  buttonStyle="outline"
+                  style={{
+                    fontWeight: "normal",
+                    display: "inline-flex",
+                    flexDirection: "column",
+                    gap: 14,
+                  }}
+                  className="left-pane-tabs"
+                >
+                  <Radio.Button value="component">
+                    <Tooltip title="组件" placement="right">
+                      <IconFont type="icon-puzzle" />
+                    </Tooltip>
+                  </Radio.Button>
+                  <Radio.Button value="layer">
+                    <Tooltip title="图层" placement="right">
+                      <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>
+                  <Radio.Button value="env">
+                    <Tooltip title="环境变量" placement="right">
+                      <IconFont type="icon-variable" />
+                    </Tooltip>
+                  </Radio.Button>
+                  <Radio.Button value="code">
+                    <Tooltip title="源码" placement="right">
+                      <IconFont type="icon-json" />
+                    </Tooltip>
+                  </Radio.Button>
+                </Radio.Group>
+              </div>
+              <div
+                style={{
+                  flex: "1 1 auto",
+                  display: "flex",
+                  flexDirection: "column",
+                  width: "calc(100% - 47px)",
+                }}
+              >
+                {leftPanelActiveKey === "component" && <ComponentPanel />}
+                {leftPanelActiveKey === "layer" && <LayerPanel />}
+                {leftPanelActiveKey === "datasource" && <DatasourcePanel />}
+                {leftPanelActiveKey === "script" && <ScriptPanel />}
+                {leftPanelActiveKey === "env" && <VariablesPanel />}
+                {leftPanelActiveKey === "code" && <CodePanel />}
+              </div>
+            </div>
+            <div className="center" style={{ flex: "1 1 auto" }}>
+              <PaneHeader
+                title="页面"
+                extra={
+                  <Space>
+                    <Button
+                      size="small"
+                      type={!designable ? "primary" : "default"}
+                      icon={
+                        designable ? <EyeInvisibleOutlined /> : <EyeOutlined />
+                      }
+                      onClick={() => setDesignable(!designable)}
+                    />
+                    <Radio.Group
+                      value={deviceType}
+                      onChange={(e) => setDeviceType(e.target.value)}
+                      size="small"
+                      buttonStyle="outline"
+                    >
+                      <Radio.Button value="desktop" title="桌面">
+                        <DesktopOutlined />
+                      </Radio.Button>
+                      <Radio.Button value="mobile" title="移动设备">
+                        <MobileOutlined />
+                      </Radio.Button>
+                      <Radio.Button value="tablet" title="平板设备">
+                        <TabletOutlined />
+                      </Radio.Button>
+                    </Radio.Group>
+                  </Space>
+                }
+              />
+              <div className={["body", deviceType].join(" ")}>
+                <div
+                  style={{
+                    transform: `scale(${zoom})`,
+                    transformOrigin: "top center",
+                  }}
+                >
+                  <PageCanvas ref={pageCanvasRef} device={deviceType} />
+                </div>
+              </div>
+            </div>
+            <div className="right" style={rightStyle as any}>
+              <div
+                style={{
+                  flex: "1 1 auto",
+                  display: "flex",
+                  flexDirection: "column",
+                  width: "calc(100% - 47px)",
+                }}
+              >
+                {rightPanelActiveKey === "ai" && (
+                  <AiPanel agentList={agentList} />
+                )}
+                {rightPanelActiveKey === "props" && <PropertiesPanel />}
+                {rightPanelActiveKey === "cascade" && <CascadePanel />}
+              </div>
+              <div
+                style={{ padding: "22px 0", borderLeft: "solid 1px #e8e8e8" }}
+              >
+                <Radio.Group
+                  value={rightPanelActiveKey}
+                  onChange={(e) => setRightPanelActiveKey(e.target.value)}
+                  buttonStyle="outline"
+                  style={{
+                    fontWeight: "normal",
+                    display: "inline-flex",
+                    flexDirection: "column",
+                    gap: 14,
+                  }}
+                  className="right-pane-tabs"
+                >
+                  <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>
+                </Radio.Group>
+              </div>
+            </div>
+          </Container>
+        </div>
+      </DesignerProvider>
+    );
+  }
+);
+
+export default PageDesigner;

package/src/components/context/DesignerContext.tsx

@@ -0,0 +1,71 @@
+import { createContext } from "react";
+import { PageSchema, PluginType, SchemaItemType } from "../typing";
+
+type DesignerContextType = {
+  designable: boolean;
+  plugins: PluginType[];
+  schema: PageSchema;
+  selectedItem?: SchemaItemType | null;
+  setSchema: React.Dispatch<React.SetStateAction<PageSchema>>;
+  setSelectedItem: React.Dispatch<React.SetStateAction<SchemaItemType | null>>;
+  updateSelectedItem: (selectedItem?: Partial<SchemaItemType> | null) => void;
+  forceUpdate: () => void;
+};
+
+export const DesignerContext = createContext<DesignerContextType>({
+  designable: false,
+  plugins: [],
+  schema: {
+    info: {},
+    datasources: [],
+    scripts: [],
+    variables: [],
+    items: [],
+  },
+  selectedItem: null,
+  setSchema: () => {},
+  setSelectedItem: () => {},
+  updateSelectedItem: () => {},
+  forceUpdate: () => {},
+});
+
+type DesignerProviderProps = React.PropsWithChildren<
+  Omit<
+    Partial<DesignerContextType>,
+    "updateSelectedItem" | "schema" | "forceUpdate"
+  > &
+    Pick<DesignerContextType, "schema">
+>;
+
+export const DesignerProvider: React.FC<DesignerProviderProps> = ({
+  designable,
+  plugins,
+  schema,
+  selectedItem,
+  setSchema,
+  setSelectedItem,
+  children,
+}) => {
+  const updateSelectedItem = (props?: Partial<SchemaItemType> | null) => {
+    setSelectedItem?.(Object.assign(selectedItem!, props || {}));
+    setSchema?.({ ...schema });
+  };
+  return (
+    <DesignerContext.Provider
+      value={{
+        designable: !!designable,
+        plugins: plugins || [],
+        schema,
+        selectedItem,
+        setSchema: setSchema || (() => {}),
+        setSelectedItem: setSelectedItem || (() => {}),
+        updateSelectedItem,
+        forceUpdate: () => {
+          setSchema?.({ ...schema });
+        },
+      }}
+    >
+      {children}
+    </DesignerContext.Provider>
+  );
+};

package/src/components/context/EnvContext.tsx

@@ -0,0 +1,42 @@
+import { createContext, FC, PropsWithChildren } from "react";
+import { CallbacksType, EnvType } from "../typing";
+
+type InitCallbackParams = {
+  id: string;
+  callback: (v: any) => void;
+};
+
+type EnvContextType = {
+  deviceWidth: number;
+  env: EnvType;
+  callbacks: CallbacksType;
+  initCallback: ({ id, callback }: InitCallbackParams) => void;
+};
+
+export const EnvContext = createContext<EnvContextType>({
+  deviceWidth: 0,
+  env: { global: {}, local: {} },
+  callbacks: {},
+  initCallback: ({ id, callback }) => {},
+});
+
+export const EnvProvider: FC<PropsWithChildren<EnvContextType>> = ({
+  deviceWidth,
+  env,
+  callbacks,
+  initCallback,
+  children,
+}) => {
+  return (
+    <EnvContext.Provider
+      value={{
+        deviceWidth,
+        env,
+        callbacks,
+        initCallback,
+      }}
+    >
+      {children}
+    </EnvContext.Provider>
+  );
+};