bi-sdk-react 0.0.1

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Form, Input } from 'antd'
+import type { PropEditorProps } from './types'
+
+export type PageHeaderModel = { title?: string; subTitle?: string }
+
+export const PageHeaderProps: React.FC<PropEditorProps<PageHeaderModel>> = ({ model, onChange }) => {
+  const trigger = (key: keyof PageHeaderModel, value: any) => onChange && onChange({ ...model, [key]: value })
+  return (
+    <Form layout="vertical">
+      <Form.Item label="标题">
+        <Input size="small" value={model.title} onChange={e => trigger('title', e.target.value)} placeholder="请输入标题" />
+      </Form.Item>
+      <Form.Item label="副标题">
+        <Input size="small" value={model.subTitle} onChange={e => trigger('subTitle', e.target.value)} placeholder="请输入副标题" />
+      </Form.Item>
+    </Form>
+  )
+}
+

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Form, InputNumber } from 'antd'
+import type { PropEditorProps } from './types'
+
+export type RowModel = { gutter?: [number, number] }
+
+export const RowProps: React.FC<PropEditorProps<RowModel>> = ({ model, onChange }) => {
+  const trigger = (key: keyof RowModel, value: any) => onChange && onChange({ ...model, [key]: value })
+  const gutter = model.gutter || [0, 0]
+  return (
+    <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
+      <Form.Item label="列间距">
+        <InputNumber size="small" value={gutter[0]} min={0} step={4} onChange={v => trigger('gutter', [v || 0, gutter[1]])} />
+      </Form.Item>
+      <Form.Item label="行间距">
+        <InputNumber size="small" value={gutter[1]} min={0} step={4} onChange={v => trigger('gutter', [gutter[0], v || 0])} />
+      </Form.Item>
+    </Form>
+  )
+}
+

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

@@ -0,0 +1,136 @@
+import React from "react";
+import {
+  Form,
+  Input,
+  Radio,
+  Switch,
+  Table,
+  Button,
+  Space,
+  type SelectProps as AntSelectProps,
+} from "antd";
+import type { PropEditorProps } from "./types";
+import { DeleteOutlined } from "@ant-design/icons";
+
+export type SelectOption = { label: string; value: any };
+export type SelectModel = {
+  var?: string;
+  placeholder?: string;
+  size?: AntSelectProps["size"];
+  allowClear?: boolean;
+  multiple?: boolean;
+  options: SelectOption[];
+};
+
+export const SelectProps: React.FC<PropEditorProps<SelectModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof SelectModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+  const setOption = (index: number, key: keyof SelectOption, value: any) => {
+    const options = [...(model.options || [])];
+    options[index] = { ...options[index], [key]: value };
+    trigger("options", options);
+  };
+  const removeOption = (index: number) => {
+    const options = [...(model.options || [])];
+    options.splice(index, 1);
+    trigger("options", options);
+  };
+  const addOption = () => {
+    trigger("options", [...(model.options || []), { label: "", value: "" }]);
+  };
+  const columns = [
+    {
+      title: "选项标签",
+      dataIndex: "label",
+      render: (_: any, r: SelectOption, i: number) => (
+        <Input
+          size="small"
+          value={r.label}
+          onChange={(e) => setOption(i, "label", e.target.value)}
+        />
+      ),
+    },
+    {
+      title: "选项值",
+      dataIndex: "value",
+      render: (_: any, r: SelectOption, i: number) => (
+        <Input
+          size="small"
+          value={r.value}
+          onChange={(e) => setOption(i, "value", e.target.value)}
+        />
+      ),
+    },
+    {
+      title: "操作",
+      render: (_: any, r: SelectOption, i: number) => (
+        <Space>
+          <Button danger size="small" onClick={() => removeOption(i)}>
+            <DeleteOutlined />
+          </Button>
+        </Space>
+      ),
+    },
+  ];
+  return (
+    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      <Form.Item label="变量名">
+        <Input
+          size="small"
+          value={model.var}
+          onChange={(e) => trigger("var", e.target.value)}
+          placeholder="请输入变量名"
+        />
+      </Form.Item>
+      <Form.Item label="占位符">
+        <Input
+          size="small"
+          value={model.placeholder}
+          onChange={(e) => trigger("placeholder", e.target.value)}
+          placeholder="请输入占位符"
+        />
+      </Form.Item>
+      <Form.Item label="大小">
+        <Radio.Group
+          size="small"
+          value={model.size}
+          onChange={(e) => trigger("size", e.target.value)}
+        >
+          <Radio.Button value="small">小</Radio.Button>
+          <Radio.Button value="middle">中</Radio.Button>
+          <Radio.Button value="large">大</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="清除图标">
+        <Switch
+          size="small"
+          checked={!!model.allowClear}
+          onChange={(v) => trigger("allowClear", v)}
+        />
+      </Form.Item>
+      <Form.Item label="多选">
+        <Switch
+          size="small"
+          checked={!!model.multiple}
+          onChange={(v) => trigger("multiple", v)}
+        />
+      </Form.Item>
+      <Form.Item>
+        <Table
+          size="small"
+          dataSource={model.options}
+          columns={columns as any}
+          pagination={false}
+          rowKey={(_, i) => String(i)}
+          bordered
+        />
+        <Button size="small" block onClick={addOption}>
+          添加选项
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Form, Radio, type SpaceProps as AntSpaceProps } from "antd";
+import type { PropEditorProps } from "./types";
+
+export type SpaceModel = {
+  direction?: AntSpaceProps["orientation"];
+} & Pick<AntSpaceProps, "size" | "align">;
+
+export const SpaceProps: React.FC<PropEditorProps<SpaceModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof SpaceModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+  return (
+    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      <Form.Item label="方向">
+        <Radio.Group
+          size="small"
+          value={model.direction}
+          onChange={(e) => trigger("direction", e.target.value)}
+        >
+          <Radio.Button value="horizontal">水平</Radio.Button>
+          <Radio.Button value="vertical">垂直</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="大小">
+        <Radio.Group
+          size="small"
+          value={model.size}
+          onChange={(e) => trigger("size", e.target.value)}
+        >
+          <Radio.Button value="small">小</Radio.Button>
+          <Radio.Button value="middle">中</Radio.Button>
+          <Radio.Button value="large">大</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="对齐">
+        <Radio.Group
+          size="small"
+          value={model.align}
+          onChange={(e) => trigger("align", e.target.value)}
+        >
+          <Radio.Button value="start">开始</Radio.Button>
+          <Radio.Button value="end">结束</Radio.Button>
+          <Radio.Button value="center">居中</Radio.Button>
+          <Radio.Button value="baseline">基线</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+    </Form>
+  );
+};

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Form, Input } from 'antd'
+import type { PropEditorProps } from './types'
+
+export type SwitchModel = { var?: string }
+
+export const SwitchProps: React.FC<PropEditorProps<SwitchModel>> = ({ model, onChange }) => {
+  const trigger = (key: keyof SwitchModel, value: any) => onChange && onChange({ ...model, [key]: value })
+  return (
+    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      <Form.Item label="变量名">
+        <Input size="small" value={model.var} onChange={e => trigger('var', e.target.value)} placeholder="请输入变量名" />
+      </Form.Item>
+    </Form>
+  )
+}
+

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

@@ -0,0 +1,200 @@
+import React, { useState } from "react";
+import {
+  Form,
+  Radio,
+  Switch,
+  InputNumber,
+  Divider,
+  Table,
+  Space,
+  Button,
+  Modal,
+  Input,
+  type TableProps as AntTableProps,
+} from "antd";
+import type { PropEditorProps } from "./types";
+import {
+  AlignCenterOutlined,
+  AlignLeftOutlined,
+  AlignRightOutlined,
+  DeleteOutlined,
+  EditOutlined,
+} from "@ant-design/icons";
+
+export type TableColumnModel = {
+  title: string;
+  dataIndex: string;
+  width?: string;
+  align?: "left" | "center" | "right";
+  ellipsis?: boolean;
+};
+export type TableModel = {
+  pageSize?: number;
+  columns: TableColumnModel[];
+} & Pick<AntTableProps, "bordered" | "showHeader" | "size">;
+
+export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof TableModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+  const setColumn = (index: number, col: Partial<TableColumnModel>) => {
+    const columns = [...(model.columns || [])];
+    columns[index] = { ...columns[index], ...col };
+    trigger("columns", columns);
+  };
+  const removeColumn = (index: number) => {
+    const columns = [...(model.columns || [])];
+    columns.splice(index, 1);
+    trigger("columns", columns);
+  };
+  const addColumn = () => {
+    trigger("columns", [
+      ...(model.columns || []),
+      { title: "", dataIndex: "", width: "", align: "left", ellipsis: false },
+    ]);
+  };
+  const [editVisible, setEditVisible] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const editingForm =
+    editingIndex != null && model.columns[editingIndex]
+      ? model.columns[editingIndex]
+      : { title: "", dataIndex: "", width: "", align: "left", ellipsis: false };
+  const columns = [
+    { title: "列名", dataIndex: "title" },
+    { title: "数据索引", dataIndex: "dataIndex" },
+    {
+      title: "操作",
+      width: 80,
+      align: "center" as const,
+      render: (_: any, r: TableColumnModel, i: number) => (
+        <Space>
+          <a
+            onClick={() => {
+              setEditingIndex(i);
+              setEditVisible(true);
+            }}
+          >
+            <EditOutlined />
+          </a>
+          <a onClick={() => removeColumn(i)}>
+            <DeleteOutlined />
+          </a>
+        </Space>
+      ),
+    },
+  ];
+  return (
+    <div>
+      <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
+        <Form.Item label="大小">
+          <Radio.Group
+            size="small"
+            value={model.size}
+            onChange={(e) => trigger("size", e.target.value)}
+          >
+            <Radio.Button value="small">小</Radio.Button>
+            <Radio.Button value="middle">中</Radio.Button>
+            <Radio.Button value="large">大</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="边框">
+          <Switch
+            size="small"
+            checked={!!model.bordered}
+            onChange={(v) => trigger("bordered", v)}
+          />
+        </Form.Item>
+        <Form.Item label="显示表头">
+          <Switch
+            size="small"
+            checked={!!model.showHeader}
+            onChange={(v) => trigger("showHeader", v)}
+          />
+        </Form.Item>
+        <Form.Item label="分页大小">
+          <InputNumber
+            size="small"
+            value={model.pageSize}
+            onChange={(v) => trigger("pageSize", v)}
+          />
+        </Form.Item>
+      </Form>
+      <Divider>表格列设置</Divider>
+      <Table
+        size="small"
+        dataSource={model.columns}
+        rowKey={(_, i) => String(i)}
+        columns={columns as any}
+        pagination={false}
+        bordered
+      />
+      <Button size="small" onClick={addColumn} block>
+        添加列
+      </Button>
+      <Modal
+        title="编辑列"
+        open={editVisible}
+        footer={null}
+        width={400}
+        onCancel={() => setEditVisible(false)}
+      >
+        <Form layout="vertical">
+          <div
+            style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
+          >
+            <Form.Item label="列名">
+              <Input
+                value={editingForm.title}
+                onChange={(e) =>
+                  setColumn(editingIndex!, { title: e.target.value })
+                }
+              />
+            </Form.Item>
+            <Form.Item label="数据索引">
+              <Input
+                value={editingForm.dataIndex}
+                onChange={(e) =>
+                  setColumn(editingIndex!, { dataIndex: e.target.value })
+                }
+              />
+            </Form.Item>
+            <Form.Item label="宽度">
+              <Input
+                value={editingForm.width}
+                onChange={(e) =>
+                  setColumn(editingIndex!, { width: e.target.value })
+                }
+              />
+            </Form.Item>
+            <Form.Item label="对齐">
+              <Radio.Group
+                value={editingForm.align}
+                onChange={(e) =>
+                  setColumn(editingIndex!, { align: e.target.value })
+                }
+              >
+                <Radio.Button value="left">
+                  <AlignLeftOutlined />
+                </Radio.Button>
+                <Radio.Button value="center">
+                  <AlignCenterOutlined />
+                </Radio.Button>
+                <Radio.Button value="right">
+                  <AlignRightOutlined />
+                </Radio.Button>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item label="省略">
+              <Switch
+                checked={!!editingForm.ellipsis}
+                onChange={(v) => setColumn(editingIndex!, { ellipsis: v })}
+              />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Form, Input, Select, Button } from 'antd'
+import type { PropEditorProps } from './types'
+
+export type TextModel = { text?: string }
+
+export const TextProps: React.FC<PropEditorProps<TextModel>> = ({ model, customStyle = {}, onChange }) => {
+  const triggerModel = (key: keyof TextModel, value: any) => onChange && onChange({ ...model, [key]: value })
+  const setStyle = (key: string, value: any) => {
+    const next = { ...customStyle, [key]: value }
+    onChange && onChange({ ...model, customStyle: next } as any)
+  }
+  return (
+    <Form>
+      <Form.Item label="文本内容">
+        <Input.TextArea size="small" value={model.text} onChange={e => triggerModel('text', e.target.value)} />
+      </Form.Item>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Input.Group compact>
+          <Select size="small" value={customStyle.fontFamily} style={{ width: 90 }} onChange={v => setStyle('fontFamily', v)}>
+            <Select.Option value="'黑体', 'SimHei', sans-serif">黑体</Select.Option>
+            <Select.Option value="'宋体', 'SimSun', serif">宋体</Select.Option>
+            <Select.Option value="'仿宋', 'FangSong', serif">仿宋</Select.Option>
+            <Select.Option value="'楷体', 'KaiTi', serif">楷体</Select.Option>
+            <Select.Option value="Arial, sans-serif">Arial</Select.Option>
+          </Select>
+          <Select size="small" value={customStyle.fontSize} style={{ width: 90 }} onChange={v => setStyle('fontSize', v)}>
+            {['12px','14px','16px','20px','22px','24px','32px','48px'].map(s => <Select.Option key={s} value={s}>{s}</Select.Option>)}
+          </Select>
+          <Input size="small" type="color" value={customStyle.color} onChange={e => setStyle('color', e.target.value)} style={{ width: 90 }} />
+        </Input.Group>
+        <Input.Group compact>
+          <Button type={customStyle.fontWeight === 'bold' ? 'primary' : undefined} size="small" onClick={() => setStyle('fontWeight', customStyle.fontWeight === 'bold' ? 'normal' : 'bold')}>B</Button>
+          <Button type={customStyle.fontStyle === 'italic' ? 'primary' : undefined} size="small" onClick={() => setStyle('fontStyle', customStyle.fontStyle === 'italic' ? 'normal' : 'italic')}>I</Button>
+          <Button type={customStyle.textDecoration === 'underline' ? 'primary' : undefined} size="small" onClick={() => setStyle('textDecoration', customStyle.textDecoration === 'underline' ? 'none' : 'underline')}>U</Button>
+        </Input.Group>
+      </div>
+    </Form>
+  )
+}
+

package/src/components/plugins/@antd/item-props/index.ts

@@ -0,0 +1,20 @@
+export { ButtonProps } from './ButtonProps'
+export { InputProps } from './InputProps'
+export { InputNumberProps } from './InputNumberProps'
+export { SelectProps } from './SelectProps'
+export { CheckboxProps } from './CheckboxProps'
+export { CapsuleProps } from './CapsuleProps'
+export { DatePickerProps } from './DatePickerProps'
+export { SwitchProps } from './SwitchProps'
+export { TextProps } from './TextProps'
+export { HtmlProps } from './HtmlProps'
+export { EchartsProps } from './EchartsProps'
+export { ImageProps } from './ImageProps'
+export { CardProps } from './CardProps'
+export { ListProps } from './ListProps'
+export { TableProps } from './TableProps'
+export { PageHeaderProps } from './PageHeaderProps'
+export { RowProps } from './RowProps'
+export { ColProps } from './ColProps'
+export { SpaceProps } from './SpaceProps'
+

package/src/components/plugins/@antd/item-props/types.ts

@@ -0,0 +1,6 @@
+export type PropEditorProps<T = any> = {
+  model: T
+  customStyle?: Record<string, any>
+  onChange?: (model: T) => void
+}
+

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

@@ -0,0 +1,63 @@
+import { Button, type ButtonProps } from "antd";
+import React, { MouseEventHandler, useContext } from "react";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { EnvContext } from "../../../context/EnvContext";
+import { IconFont } from "../../../icon/IconFont";
+import { handleCallback } from "../../../utils";
+
+export type ButtonRenderProps = {
+  text?: string;
+  type?: ButtonProps["type"];
+  icon?: ButtonProps["icon"];
+  size?: ButtonProps["size"];
+  block?: ButtonProps["block"];
+  shape?: ButtonProps["shape"];
+  ghost?: ButtonProps["ghost"];
+  item?: SchemaItemType;
+} & HtmlBaseProps;
+
+export const ButtonRender: React.FC<ButtonRenderProps> = ({
+  id,
+  text = "按钮",
+  type = "middle",
+  icon,
+  size,
+  block = false,
+  shape = "default",
+  ghost = false,
+  item,
+  style,
+  className,
+}) => {
+  const { env, callbacks } = useContext(EnvContext);
+  const danger = type === "danger";
+  const realType = danger ? "default" : type;
+  const click: MouseEventHandler = () => {
+    if (env && item && callbacks) handleCallback(env, item, callbacks);
+  };
+  const iconNode =
+    typeof icon === "string" ? (
+      icon ? (
+        <IconFont type={icon} />
+      ) : undefined
+    ) : (
+      icon
+    );
+  return (
+    <Button
+      id={id}
+      type={realType as any}
+      icon={iconNode as any}
+      size={size}
+      block={block}
+      shape={["round", "circle"].includes(shape) ? (shape as any) : undefined}
+      ghost={ghost}
+      danger={danger}
+      onClick={click}
+      style={style}
+      className={className}
+    >
+      {text}
+    </Button>
+  );
+};

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

@@ -0,0 +1,49 @@
+import { Radio, type RadioGroupProps } from "antd";
+import React, { useContext } from "react";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { EnvContext } from "../../../context/EnvContext";
+import { handleCallback, setVar } from "../../../utils";
+
+export type CapsuleRenderProps = {
+  var?: string;
+  size?: RadioGroupProps['size']
+  options?: { label: string; value: any }[];
+  item?: SchemaItemType;
+  onChange?: (v: any) => void;
+} & HtmlBaseProps;
+
+export const CapsuleRender: React.FC<CapsuleRenderProps> = ({
+  id,
+  var: varName = "",
+  size = "middle",
+  options = [],
+  item,
+  onChange,
+  style,
+  className,
+}) => {
+  const { env, callbacks } = useContext(EnvContext);
+  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}>
+      <Radio.Group
+        id={id}
+        size={size as any}
+        buttonStyle="solid"
+        onChange={(e) => change(e.target.value)}
+        style={style}
+        className={className}
+      >
+        {options.map((op) => (
+          <Radio.Button key={op.value} value={op.value}>
+            {op.label}
+          </Radio.Button>
+        ))}
+      </Radio.Group>
+    </span>
+  );
+};