bi-sdk-react 0.0.54 → 0.0.56

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

@@ -11,6 +11,7 @@ import {
   Modal,
   Input,
   type TableProps as AntTableProps,
+  Select,
 } from "antd";
 import type { PropEditorProps } from "./types";
 import {
@@ -31,6 +32,15 @@ export type TableColumnModel = {
 export type TableModel = {
   pageSize?: number;
   columns: TableColumnModel[];
+  dataKey?: string;
+  showSizeChanger?: boolean;
+  showQuickJumper?: boolean;
+  hideOnSinglePage?: boolean;
+  showTotal?: boolean;
+  headerCellClassNames?: string[];
+  bodyCellClassNames?: string[];
+  paginationRootClassNames?: string[];
+  paginationItemClassNames?: string[];
 } & Pick<AntTableProps, "bordered" | "showHeader" | "size">;
 
 export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
@@ -88,6 +98,13 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
   return (
     <div>
       <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
+        <Form.Item label="数据键" tooltip="数据键用于指定数据来源中的数据项，例如：'data.items'">
+          <Input
+            size="small"
+            value={model.dataKey}
+            onChange={(e) => trigger("dataKey", e.target.value)}
+          />
+        </Form.Item>
         <Form.Item label="大小">
           <Radio.Group
             size="small"
@@ -113,6 +130,34 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
             onChange={(v) => trigger("showHeader", v)}
           />
         </Form.Item>
+        <Form.Item label="显示分页大小选择器">
+          <Switch
+            size="small"
+            checked={!!model.showSizeChanger}
+            onChange={(v) => trigger("showSizeChanger", v)}
+          />
+        </Form.Item>
+        <Form.Item label="显示快速跳转">
+          <Switch
+            size="small"
+            checked={!!model.showQuickJumper}
+            onChange={(v) => trigger("showQuickJumper", v)}
+          />
+        </Form.Item>
+        <Form.Item label="隐藏单页分页">
+          <Switch
+            size="small"
+            checked={!!model.hideOnSinglePage}
+            onChange={(v) => trigger("hideOnSinglePage", v)}
+          />
+        </Form.Item>
+        <Form.Item label="显示分页总数">
+          <Switch
+            size="small"
+            checked={!!model.showTotal}
+            onChange={(v) => trigger("showTotal", v)}
+          />
+        </Form.Item>
         <Form.Item label="分页大小">
           <InputNumber
             size="small"
@@ -133,6 +178,47 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
       <Button size="small" onClick={addColumn} block>
         添加列
       </Button>
+      <Divider style={{marginTop: 10}}>样式设置</Divider>
+      <Form.Item label="表头单元格类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={(model.headerCellClassNames || [])}
+          onChange={(e) =>
+            trigger("headerCellClassNames", e)
+          }
+        />
+      </Form.Item>
+      <Form.Item label="表格单元格类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={(model.bodyCellClassNames || [])}
+          onChange={(e) =>
+            trigger("bodyCellClassNames", e)
+          }
+        />
+      </Form.Item>
+      <Form.Item label="分页根类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={(model.paginationRootClassNames || [])}
+          onChange={(e) =>
+            trigger("paginationRootClassNames", e)
+          }
+        />
+      </Form.Item>
+      <Form.Item label="分页项类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={(model.paginationItemClassNames || [])}
+          onChange={(e) =>
+            trigger("paginationItemClassNames", e)
+          }
+        />
+      </Form.Item>
       <Modal
         title="编辑列"
         open={editVisible}

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;

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

@@ -1,7 +1,8 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { MouseEventHandler, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { PageContext } from "../../../context/PageContext";
 import { useDatasource } from "../../../hooks/datasource";
 import { CallbackType, HtmlBaseProps } from "../../../typing";
+import { useEvent } from "../../../hooks/event";
 
 export type HtmlRenderProps = {
   dataSource?: Record<string, any>;
@@ -30,13 +31,16 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
   className,
   classNames = [],
 }) => {
-  const { initCallback } = useContext(PageContext);
+  const { initCallback, globalVars, env } = useContext(PageContext);
+  const { handleEvent } = useEvent(item);
   const [signal, setSignal] = useState<number>(0);
   const datasource = useDatasource({ item, signal });
 
   const keys = useMemo(() => Object.keys(datasource || {}), [datasource]);
   const func = (path: string) =>
     new Function(
+      "$g",
+      "$e",
       ...keys,
       `
       "use strict";
@@ -60,13 +64,13 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
         /{\s*{\s*([^}]+)\s*}\s*}/g,
         (_match: any, p1: string) => {
           try {
-            return (func(p1) as any)(...args);
+            return (func(p1) as any)(globalVars, env.global, ...args);
           } catch {
             return "";
           }
         },
       ),
-    [template, args],
+    [template, args, globalVars, env],
   );
 
   const callback: CallbackType = (refresh = true) => {
@@ -77,6 +81,10 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
     };
   };
 
+  const click: MouseEventHandler = () => {
+    handleEvent("click");
+  };
+
   useEffect(() => {
     initCallback({ id: item.id, callback });
   }, []);
@@ -87,6 +95,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
       style={style}
       className={(classNames || []).join(" ") + (" " + className || "")}
       dangerouslySetInnerHTML={{ __html: html }}
+      onClick={click}
     />
   );
 };

package/src/components/plugins/@antd/items/ModalRender.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;
@@ -48,6 +49,7 @@ export const ModalRender: React.FC<ModalRenderProps> = ({
   } = useContext(PageContext);
   const [open, setOpen] = useState(false);
   const [localChildren, setLocalChildren] = useState(item.children || []);
+  const { handleEvent } = useEvent(item);
 
   const onLocalChildrenChange = (list: any[]) => {
     item.children = list;
@@ -86,6 +88,10 @@ export const ModalRender: React.FC<ModalRenderProps> = ({
     toolbarEl.style.left = `${rect.left + scrollLeft - 1}px`;
   };
 
+  const handleOpenChange = (open: boolean) => {
+    handleEvent(open ? "open" : "close");
+  };
+
   useEffect(() => {
     setLocalChildren(item.children || []);
   }, [item.children]);
@@ -132,6 +138,7 @@ export const ModalRender: React.FC<ModalRenderProps> = ({
         {...rest}
         open={open}
         onCancel={() => setOpen(false)}
+        afterOpenChange={handleOpenChange}
         getContainer={() =>
           designable ? document.querySelector(".page-canvas")! : document.body
         }

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

@@ -1,45 +1,54 @@
-import { Table, type TableProps } from "antd";
-import React, { useContext, useEffect } from "react";
+import { PaginationProps, Table, type TableProps } from "antd";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { PageContext } from "../../../context/PageContext";
 import { HtmlBaseProps } from "../../../typing";
+import { useDatasource } from "../../../hooks/datasource";
 
 export type TableRenderProps = {
-  dataSource?: any[];
   columns?: any[];
+  dataKey?: string;
   pageSize?: number;
   bordered?: boolean;
   size?: TableProps["size"];
   showHeader?: boolean;
   item: any;
+  showSizeChanger?: boolean;
+  showQuickJumper?: boolean;
+  hideOnSinglePage?: boolean;
+  showTotal?: boolean;
+  headerCellClassNames?: string[];
+  bodyCellClassNames?: string[];
+  paginationRootClassNames?: string[];
+  paginationItemClassNames?: string[];
 } & HtmlBaseProps;
 
 export const TableRender: React.FC<TableRenderProps> = ({
   id,
   item,
-  dataSource = [],
   columns = [],
+  dataKey = "",
   pageSize = 10,
   bordered = true,
   size,
   showHeader = true,
+  showSizeChanger = true,
+  showQuickJumper = true,
+  hideOnSinglePage = true,
+  showTotal = true,
   style = {},
   className,
+  headerCellClassNames = [],
+  bodyCellClassNames = [],
+  paginationRootClassNames = [],
+  paginationItemClassNames = [],
 }) => {
   const { initCallback } = useContext(PageContext);
-  const pagination =
-    !pageSize || pageSize <= dataSource.length
-      ? false
-      : {
-          total: dataSource.length,
-          pageSize,
-          size,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          hideOnSinglePage: true,
-          pageSizeOptions: ["10", "20", "30", "40"],
-          showTotal: (total: number, range: [number, number]) =>
-            `共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`,
-        };
+  const [page, setPage] = useState<{
+    current: number;
+    pageSize: number;
+  }>({ current: 1, pageSize });
+
+  const dataSource = useDatasource({ item, query: page });
   const realColumns = columns.map((item: any) => ({
     ...item,
     render:
@@ -69,7 +78,7 @@ export const TableRender: React.FC<TableRenderProps> = ({
               const module = undefined;
               const exports = undefined;
               ${item.customRender}
-            `
+            `,
             );
             return (safeEval as any)(
               console,
@@ -82,15 +91,68 @@ export const TableRender: React.FC<TableRenderProps> = ({
               Boolean,
               text,
               record,
-              index
+              index,
             );
           },
   }));
 
+  const data = useMemo(() => {
+    if (!dataKey || dataKey.trim() === "") {
+      return dataSource || [];
+    }
+    const keys = dataKey.split(".");
+    let result = dataSource || [];
+    for (const key of keys) {
+      if (result[key]) {
+        result = result[key];
+      } else {
+        result = [];
+        break;
+      }
+    }
+    return result || [];
+  }, [dataKey, dataSource]);
+
+  const pagination = useMemo(
+    () =>
+      !pageSize || pageSize >= (data || []).length
+        ? false
+        : ({
+            total: (data || []).length,
+            current: page.current,
+            pageSize: page.pageSize,
+            size,
+            showSizeChanger,
+            showQuickJumper,
+            hideOnSinglePage,
+            pageSizeOptions: ["10", "20", "30", "40"],
+            showTotal: showTotal
+              ? (total: number, range: [number, number]) =>
+                  `共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`
+              : undefined,
+            locale: {
+              items_per_page: "/ 页",
+              jump_to: "跳转至第",
+              page: "页",
+            },
+            onChange: (page: number, pageSize: number) => {
+              setPage({ current: page, pageSize });
+            },
+            onShowSizeChange: (current: number, size: number) => {
+              setPage({ current, pageSize: size });
+            },
+          } as PaginationProps),
+    [data, page, pageSize, size, showSizeChanger, showQuickJumper, hideOnSinglePage, showTotal],
+  );
+
   const callback = () => {
     console.log("callback table");
   };
 
+  useEffect(() => {
+    setPage({ current: 1, pageSize });
+  }, [pageSize]);
+
   useEffect(() => {
     initCallback({ id: item.id, callback });
   }, []);
@@ -98,7 +160,7 @@ export const TableRender: React.FC<TableRenderProps> = ({
   return (
     <Table
       id={id}
-      dataSource={dataSource}
+      dataSource={data || []}
       columns={realColumns as any}
       pagination={pagination as any}
       bordered={bordered}
@@ -107,6 +169,18 @@ export const TableRender: React.FC<TableRenderProps> = ({
       rowKey={(_, index) => String(index)}
       style={{ padding: 1, ...style }}
       className={className}
+      classNames={{
+        header: {
+          cell: (headerCellClassNames || []).join(" "),
+        },
+        body: {
+          cell: (bodyCellClassNames || []).join(" "),
+        },
+        pagination: {
+          root: (paginationRootClassNames || []).join(" "),
+          item: (paginationItemClassNames || []).join(" "),
+        },
+      }}
     />
   );
 };

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

@@ -1,33 +1,48 @@
-import React, { useMemo } from "react";
-import { HtmlBaseProps } from "../../../typing";
+import React, { ComponentType, MouseEventHandler, useMemo } from "react";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { useEvent } from "../../../hooks/event";
 
 export type TextRenderProps = {
   text?: string;
+  tag?: "span" | "a";
   customStyle?: React.CSSProperties;
-  item?: { style?: React.CSSProperties };
+  item: SchemaItemType;
   classNames?: string[];
 } & HtmlBaseProps;
 
 export const TextRender: React.FC<TextRenderProps> = ({
   id,
   text,
+  tag = "span",
   item,
   style = {},
   customStyle = {},
   className,
   classNames = [],
 }) => {
+  const { handleEvent } = useEvent(item);
   const actualStyle = useMemo(
     () => ({
       ...(item?.style || {}),
       ...(customStyle || {}),
       ...(style || {}),
     }),
-    [item, customStyle, style]
+    [item, customStyle, style],
   );
+
+  const Tag = tag || "span";
+
+  const click: MouseEventHandler = () => {
+    handleEvent("click");
+  };
   return (
-    <span id={id} style={actualStyle} className={(classNames || []).join(" ") + (" " + className || "")}>
+    <Tag
+      id={id}
+      style={actualStyle}
+      className={(classNames || []).join(" ") + (" " + className || "")}
+      onClick={click}
+    >
       {text}
-    </span>
+    </Tag>
   );
 };

package/src/components/typing.ts

@@ -79,7 +79,7 @@ export type FetchType = {
     removeConversation: (conversationId: string) => Promise<boolean>;
     removeMessage: (messageId: string) => Promise<boolean>;
   };
-  dataset?: (dataSetId: string, params: Record<string, any>) => Promise<any>;
+  dataset?: (dataSetId: string, params: Record<string, any>, aiPrompt?: string) => Promise<any>;
 };
 
 export type HtmlBaseProps = {
@@ -190,6 +190,14 @@ export type PageSchema = {
   scripts: ScriptItem[];
   variables: VariableItem[];
   items: SchemaItemType[];
+  datasets?: {
+    id: string;
+    name: string;
+    key: string;
+    aiPrompt?: string;
+    output: DataSetOutput;
+    dependencies?: string[];
+  }[]
 };
 
 export type EnvType = {

package/src/example.tsx

@@ -197,6 +197,15 @@ export const Example: React.FC = () => {
                 removeMessage: async (messageId) =>
                   Promise.resolve(true),
               },
+              dataset: async (dataSetId, params, aiPrompt) => {
+                console.log("dataset", dataSetId, params, aiPrompt);
+                return Promise.resolve({
+                  code: "OK",
+                  data: {
+                    ...params,
+                  }
+                });
+              },
               upload: async (file) =>
                 Promise.resolve({ id: uuid(), name: file.name }),
             }}