bi-sdk-react 0.0.1

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

@@ -0,0 +1,119 @@
+import { Card, CardProps } from "antd";
+import React, { useContext, useMemo, useState } from "react";
+import { DropContainer } from "../../../dnd/DropContainer";
+import { HtmlBaseProps } from "../../../typing";
+import { DesignerContext } from "../../../context/DesignerContext";
+
+export type CardRenderProps = {
+  bordered?: boolean;
+  size?: CardProps["size"];
+  title?: string;
+  hoverable?: boolean;
+  shadow?: boolean;
+  item: any;
+} & HtmlBaseProps;
+
+export const CardRender: React.FC<CardRenderProps> = ({
+  id,
+  bordered = false,
+  size = "default",
+  title,
+  hoverable = false,
+  shadow = true,
+  item,
+  style,
+  className,
+}) => {
+  const titleSlot = useMemo(() => {
+    if (!item.children || Array.isArray(item.children)) return null;
+    if (typeof item.children !== "object") return null;
+    return item.children.title || [];
+  }, [item]);
+  const [titleList, setTitleList] = useState(titleSlot || []);
+  const onTitleListChange = (list: any[]) => {
+    item.children.title = list;
+    setTitleList(list);
+  };
+
+  const extraSlot = useMemo(() => {
+    if (!item.children || Array.isArray(item.children)) return null;
+    if (typeof item.children !== "object") return null;
+    return item.children.extra || [];
+  }, [item]);
+  const [extraList, setExtraList] = useState(extraSlot || []);
+  const onExtraListChange = (list: any[]) => {
+    item.children.extra = list;
+    setExtraList(list);
+  };
+
+  const bodySlot = useMemo(() => {
+    if (!item.children) return null;
+    if (Array.isArray(item.children)) return item.children;
+    if (typeof item.children !== "object") return null;
+    return item.children.body || [];
+  }, [item]);
+  const [bodyList, setBodyList] = useState(bodySlot || []);
+  const onBodyListChange = (list: any[]) => {
+    if (Array.isArray(item.children)) {
+      item.children = list;
+    } else {
+      item.children.body = list;
+    }
+    setBodyList(list);
+  };
+
+  const actionsSlot = useMemo(() => {
+    if (!item.children || Array.isArray(item.children)) return null;
+    if (typeof item.children !== "object") return null;
+    return item.children.actions || [];
+  }, [item]);
+  const [actionsList, setActionsList] = useState(actionsSlot || []);
+  const onActionsListChange = (list: any[]) => {
+    item.children.actions = list;
+    setActionsList(list);
+  };
+
+  const headStyle = { borderBottom: "none" };
+
+  return (
+    <Card
+      id={id}
+      variant={bordered ? "outlined" : "borderless"}
+      size={size}
+      hoverable={hoverable}
+      className={[shadow ? "ant-card-shadow" : undefined, className]
+        .filter(Boolean)
+        .join(" ")}
+      title={
+        title?.length && !titleSlot?.length ? (
+          title
+        ) : titleSlot ? (
+          <DropContainer list={titleList} onListChange={onTitleListChange} />
+        ) : (
+          title
+        )
+      }
+      extra={
+        extraSlot && (
+          <DropContainer list={extraList} onListChange={onExtraListChange} />
+        )
+      }
+      actions={
+        actionsSlot && [
+          <DropContainer
+            list={actionsList}
+            onListChange={onActionsListChange}
+          />,
+        ]
+      }
+      styles={{
+        header: headStyle,
+      }}
+      style={style}
+    >
+      {bodySlot && (
+        <DropContainer list={bodyList} onListChange={onBodyListChange} />
+      )}
+    </Card>
+  );
+};

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

@@ -0,0 +1,56 @@
+import { Checkbox } from "antd";
+import React, { useContext } from "react";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { EnvContext } from "../../../context/EnvContext";
+import { handleCallback, setVar } from "../../../utils";
+
+export type CheckboxRenderProps = {
+  var?: string;
+  layout?: "horizontal" | "vertical" | "grid";
+  lineNumber?: number;
+  options?: { label: string; value: any }[];
+  item?: SchemaItemType;
+  onChange?: (value: any[]) => void;
+} & HtmlBaseProps;
+
+export const CheckboxRender: React.FC<CheckboxRenderProps> = ({
+  id,
+  var: varName = "",
+  layout = "horizontal",
+  lineNumber = 3,
+  options = [],
+  item,
+  onChange,
+  style,
+  className,
+}) => {
+  const { env, callbacks } = useContext(EnvContext);
+  const groupStyle: React.CSSProperties = {
+    ...style,
+    display: layout === "grid" ? "grid" : "flex",
+    gap: layout === "grid" ? undefined : "8px",
+    flexDirection: layout === "vertical" ? "column" : "row",
+    gridTemplateColumns:
+      layout === "grid" ? `repeat(${lineNumber}, 1fr)` : undefined,
+  };
+  const change = (v: any[]) => {
+    if (onChange) onChange(v);
+    if (env && item && varName) setVar(env, item, varName, v);
+    if (env && item && callbacks) handleCallback(env, item, callbacks);
+  };
+  return (
+    <span id={id}>
+      <Checkbox.Group
+        onChange={change as any}
+        style={groupStyle}
+        className={className}
+      >
+        {options.map((op) => (
+          <Checkbox key={op.value} value={op.value}>
+            {op.label}
+          </Checkbox>
+        ))}
+      </Checkbox.Group>
+    </span>
+  );
+};

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

@@ -0,0 +1,78 @@
+import { Col } from "antd";
+import React, { useContext, useMemo, useState } from "react";
+import { PageItem } from "../../../layout/PageItem";
+import { DropContainer } from "../../../dnd/DropContainer";
+import { HtmlBaseProps } from "../../../typing";
+import { DesignerContext } from "../../../context/DesignerContext";
+import { EnvContext } from "../../../context/EnvContext";
+
+export type ColRenderProps = {
+  span?: number;
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  xxl?: number;
+  item: any;
+} & HtmlBaseProps;
+
+export const ColRender: React.FC<ColRenderProps> = ({
+  id,
+  span = 24,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  xxl,
+  item,
+  style = {},
+  className,
+}) => {
+  const { designable } = useContext(DesignerContext);
+  const { deviceWidth } = useContext(EnvContext);
+  const [localChildren, setLocalChildren] = useState(item.children || []);
+
+  const onLocalChildrenChange = (list: any[]) => {
+    item.children = list;
+    setLocalChildren(list);
+  };
+  const computedSpan = useMemo(() => {
+    const dw = deviceWidth || 1600;
+    let w = null;
+    if (dw < 576 && xs) {
+      w = xs;
+    }
+    if (dw >= 576 && sm) {
+      w = sm;
+    }
+    if (dw >= 768 && md) {
+      w = md;
+    }
+    if (dw >= 992 && lg) {
+      w = lg;
+    }
+    if (dw >= 1200 && xl) {
+      w = xl;
+    }
+    if (dw >= 1600 && xxl) {
+      w = xxl;
+    }
+    return w || span;
+  }, [xs, sm, md, lg, xl, xxl, span, deviceWidth]);
+  return (
+    <DropContainer
+      rootComponent={Col}
+      rootData={{
+        id: id || item.id,
+        span: computedSpan,
+        style: { ...(item.style || {}), ...style },
+        className,
+      }}
+      list={localChildren}
+      item={item}
+      onListChange={onLocalChildrenChange}
+    />
+  );
+};

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

@@ -0,0 +1,117 @@
+import { DatePicker, type DatePickerProps, TimePicker } from "antd";
+import dayjs, { Dayjs } from "dayjs";
+import React, { useContext } from "react";
+import { HtmlBaseProps } from "../../../typing";
+import { EnvContext } from "../../../context/EnvContext";
+import { handleCallback, setVar } from "../../../utils";
+
+export type DatePickerRenderProps = {
+  var?: string;
+  size?: DatePickerProps['size']
+  allowClear?: boolean;
+  type?: "date" | "time" | "month" | "year" | "range";
+  showTime?: boolean;
+  value?: string | [string, string];
+  item?: any;
+  onChange?: (value?: string | [string, string]) => void;
+} & HtmlBaseProps;
+
+export const DatePickerRender: React.FC<DatePickerRenderProps> = ({
+  id,
+  var: varName = "",
+  size,
+  allowClear = false,
+  type = "date",
+  showTime = false,
+  value,
+  item,
+  onChange,
+  style = {},
+  className,
+}) => {
+  const { env, callbacks } = useContext(EnvContext);
+  const change = (val?: string | [string, string]) => {
+    if (onChange) onChange(val);
+    if (env && item && varName) setVar(env, item, varName, val as any);
+    if (env && item && callbacks) handleCallback(env, item, callbacks);
+  };
+  if (type === "time") {
+    const v =
+      typeof value === "string" && value ? dayjs(value, "HH:mm") : undefined;
+    return (
+      <TimePicker
+        id={id}
+        value={v as Dayjs | undefined}
+        format="HH:mm"
+        placeholder="请选择时间"
+        size={size}
+        allowClear={allowClear}
+        onChange={(d) => change(d ? d.format("HH:mm") : undefined)}
+        style={{ ...(item?.style || {}), ...style }}
+        className={className}
+      />
+    );
+  }
+  if (type === "month" || type === "year") {
+    const picker = type;
+    const fmt = type === "month" ? "YYYY-MM" : "YYYY";
+    const v =
+      typeof value === "string" && value ? dayjs(value, fmt) : undefined;
+    return (
+      <DatePicker
+        id={id}
+        picker={picker as any}
+        value={v as Dayjs | undefined}
+        format={fmt}
+        placeholder={type === "month" ? "请选择月份" : "请选择年份"}
+        size={size}
+        allowClear={allowClear}
+        onChange={(d) => change(d ? d.format(fmt) : undefined)}
+        onPanelChange={(d) => change(d ? (d as any).format(fmt) : undefined)}
+        style={{ ...(item?.style || {}), ...style }}
+        className={className}
+      />
+    );
+  }
+  if (type === "range") {
+    const fmt = showTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD";
+    const v0 =
+      Array.isArray(value) && value[0] ? dayjs(value[0], fmt) : undefined;
+    const v1 =
+      Array.isArray(value) && value[1] ? dayjs(value[1], fmt) : undefined;
+    return (
+      <DatePicker.RangePicker
+        id={id}
+        value={[v0 as any, v1 as any]}
+        format={fmt}
+        placeholder={["开始日期", "结束日期"]}
+        size={size}
+        allowClear={allowClear}
+        showTime={showTime}
+        onChange={(d) =>
+          change(
+            d && d[0] && d[1] ? [d[0].format(fmt), d[1].format(fmt)] : undefined
+          )
+        }
+        style={{ ...(item?.style || {}), ...style }}
+        className={className}
+      />
+    );
+  }
+  const fmt = showTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD";
+  const v = typeof value === "string" && value ? dayjs(value, fmt) : undefined;
+  return (
+    <DatePicker
+      id={id}
+      value={v as Dayjs | undefined}
+      format={fmt}
+      placeholder="请选择日期"
+      size={size}
+      allowClear={allowClear}
+      showTime={showTime}
+      style={{ ...(item?.style || {}), ...style }}
+      className={className}
+      onChange={(d) => change(d ? d.format(fmt) : undefined)}
+    />
+  );
+};

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

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef, useState } from "react";
+import * as echarts from "echarts";
+import { HtmlBaseProps } from "../../../typing";
+import { useDatasource } from "../../../hooks/datasource";
+
+export type EchartsRenderProps = {
+  item: any;
+  title?: string;
+  script?: string;
+  height?: number;
+  style?: React.CSSProperties;
+} & HtmlBaseProps;
+
+export const EchartsRender: React.FC<EchartsRenderProps> = ({
+  id,
+  script = "",
+  item,
+  height = 400,
+  style,
+  className,
+}) => {
+  const chartRef = useRef<HTMLDivElement | null>(null);
+  const [chart, setChart] = useState<echarts.ECharts | null>(null);
+  const datasource = useDatasource(id, item.datasource);
+  const parseConfig = (configStr: string): echarts.EChartsOption | null => {
+    try {
+      return JSON.parse(configStr);
+    } catch (jsonError) {
+      try {
+        const safeEval = new Function(
+          "echarts",
+          "console",
+          "Math",
+          "Date",
+          "Array",
+          "Object",
+          "String",
+          "Number",
+          "Boolean",
+          "data",
+          `
+          "use strict";
+          const window = undefined;
+          const document = undefined;
+          const global = undefined;
+          const process = undefined;
+          const require = undefined;
+          const module = undefined;
+          const exports = undefined;
+          ${configStr}
+        `
+        );
+        return (safeEval as any)(
+          echarts,
+          console,
+          Math,
+          Date,
+          Array,
+          Object,
+          String,
+          Number,
+          Boolean,
+          datasource
+        );
+      } catch (evalError) {
+        console.error("ECharts 配置解析失败:", evalError);
+        return null;
+      }
+    }
+  };
+  useEffect(() => {
+    if (!chartRef.current) return;
+    const next = echarts.init(chartRef.current);
+    setChart(next);
+    const onResize = () => next.resize();
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      next.dispose();
+    };
+  }, []);
+  useEffect(() => {
+    const opt = parseConfig(script);
+    if (chart && opt) {
+      chart.setOption(opt);
+      setTimeout(() => chart.resize(), 50);
+    }
+  }, [chart, script]);
+  return (
+    <div
+      id={id}
+      style={{ width: "100%", height, ...style }}
+      className={className}
+    >
+      <div ref={chartRef} style={{ width: "100%", height, ...style }}></div>
+    </div>
+  );
+};

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

@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+import { HtmlBaseProps } from "../../../typing";
+import { useDatasource } from "../../../hooks/datasource";
+
+export type HtmlRenderProps = {
+  dataSource?: Record<string, any>;
+  template?: string;
+  style?: React.CSSProperties;
+  item: any;
+} & HtmlBaseProps;
+
+/**
+ * HtmlRender 组件
+ * 用途：渲染自定义 HTML 模板，支持数据源变量插值
+ * 参数：
+ * - id：组件唯一标识
+ * - template：HTML 模板字符串，支持 {{ expr }} 插值
+ * - item：当前元素数据（含 datasource）
+ * - style：样式
+ * - className：类名
+ * - ref：转发到 div 的引用（HTMLDivElement）
+ */
+export const HtmlRender: React.FC<HtmlRenderProps> = ({
+  id,
+  template = "",
+  item,
+  style,
+  className,
+}) => {
+  const datasource = useDatasource(id, item.datasource);
+  const keys = useMemo(() => Object.keys(datasource || {}), [datasource]);
+  const func = (path: string) =>
+    new Function(
+      ...keys,
+      `
+      "use strict";
+      const window = undefined;
+      const document = undefined;
+      const global = undefined;
+      const process = undefined;
+      const require = undefined;
+      const module = undefined;
+      const exports = undefined;
+      return ${path};
+    `
+    );
+  const args = useMemo(
+    () => keys.map((k) => (datasource as any)?.[k]),
+    [keys, datasource]
+  );
+  const html = useMemo(
+    () =>
+      (template || "").replace(
+        /{{\s*([^}]+)\s*}}/g,
+        (_match: any, p1: string) => {
+          try {
+            return (func(p1) as any)(...args);
+          } catch {
+            return "";
+          }
+        }
+      ),
+    [template, args]
+  );
+
+  return (
+    <div
+      id={id}
+      style={style}
+      className={className}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { HtmlBaseProps } from "../../../typing";
+
+export type ImageRenderProps = {
+  src: string;
+  alt?: string;
+  width?: number | string;
+  height?: number | string;
+  href?: string;
+} & HtmlBaseProps;
+
+export const ImageRender: React.FC<ImageRenderProps> = ({
+  id,
+  src,
+  alt,
+  width,
+  height,
+  href,
+  className,
+}) => {
+  const img = (
+    <img
+      id={id}
+      src={src}
+      alt={alt}
+      style={{ width, height }}
+      className={className}
+    />
+  );
+  if (href && href.length)
+    return (
+      <a href={href} target="_blank" rel="noreferrer">
+        {img}
+      </a>
+    );
+  return <div>{img}</div>;
+};

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

@@ -0,0 +1,57 @@
+import { InputNumber, type InputNumberProps } from "antd";
+import React, { useContext } from "react";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { EnvContext } from "../../../context/EnvContext";
+import { handleCallback, setVar } from "../../../utils";
+
+export type InputNumberRenderProps = {
+  var?: string;
+  value?: number;
+  size?: InputNumberProps["size"];
+  placeholder?: string;
+  allowClear?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+  item?: SchemaItemType;
+  onChange?: (v?: number) => void;
+} & HtmlBaseProps;
+
+export const InputNumberRender: React.FC<InputNumberRenderProps> = ({
+  id,
+  var: varName = "",
+  value,
+  size,
+  placeholder = "请输入",
+  min = 0,
+  max = Number.MAX_SAFE_INTEGER,
+  step = 1,
+  precision = 0,
+  item,
+  onChange,
+  style = {},
+  className,
+}) => {
+  const { env, callbacks } = useContext(EnvContext);
+  const change = (v?: number) => {
+    if (onChange) onChange(v);
+    if (env && item && varName) setVar(env, item, varName, v);
+    if (env && item && callbacks) handleCallback(env, item, callbacks);
+  };
+  return (
+    <InputNumber
+      id={id}
+      value={value}
+      placeholder={placeholder}
+      size={size}
+      min={min}
+      max={max}
+      step={step}
+      precision={precision}
+      onChange={(v) => change(v ?? undefined)}
+      style={{ width: "100%", ...style }}
+      className={className}
+    />
+  );
+};