bi-sdk-react 0.0.1

package/src/components/panel/VariablesPanel.tsx

@@ -0,0 +1,153 @@
+import React, { useContext, useMemo } from "react";
+import styled from "styled-components";
+import { Table, Button, Space, Popconfirm, Modal, Form, Input } from "antd";
+import { PaneHeader } from "./PaneHeader";
+import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
+import { IconFont } from "../icon/IconFont";
+import { DesignerContext } from "../context/DesignerContext";
+import { VariableItem } from "../typing";
+
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+  }
+`;
+
+export const VariablesPanel: React.FC = () => {
+  const {schema, setSchema} = useContext(DesignerContext);
+  const [visible, setVisible] = React.useState(false);
+  const [editIndex, setEditIndex] = React.useState(-1);
+  const [form] = Form.useForm<VariableItem>();
+  const list = useMemo(() => schema.variables || [], [schema.variables]);
+  const onUpdateVariables = (data: VariableItem[]) => {
+    setSchema({ ...schema, variables: data });
+  };
+  const columns = [
+    {
+      title: "名称",
+      dataIndex: "name",
+      render: (t: string, r: VariableItem) => (
+        <div title={t}>
+          <IconFont type="icon-drag" /> {t}
+        </div>
+      ),
+    },
+    { title: "值", dataIndex: "value" },
+    {
+      title: "操作",
+      width: 60,
+      align: "center" as const,
+      render: (_: any, r: VariableItem, index: number) => (
+        <Space>
+          <a
+            onClick={() => {
+              setEditIndex(index);
+              form.setFieldsValue({ name: r.name, value: r.value });
+              setVisible(true);
+            }}
+          >
+            <EditOutlined />
+          </a>
+          <Popconfirm
+            title="确认删除吗？"
+            okText="确认"
+            cancelText="取消"
+            onConfirm={() => {
+              const next = [...list];
+              next.splice(index, 1);
+              onUpdateVariables && onUpdateVariables(next);
+            }}
+          >
+            <a>
+              <DeleteOutlined />
+            </a>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+  const handleOk = async () => {
+    const vals = await form.validateFields().catch(() => null);
+    if (!vals) return;
+    const next = [...list];
+    if (editIndex === -1) next.push({ ...vals });
+    else next[editIndex] = { ...next[editIndex], ...vals };
+    onUpdateVariables && onUpdateVariables(next);
+    setVisible(false);
+    setEditIndex(-1);
+    form.resetFields();
+  };
+  return (
+    <Root>
+      <PaneHeader
+        title="环境变量"
+        extra={
+          <Space>
+            <a
+              className="toolbar"
+              onClick={() => {
+                setEditIndex(-1);
+                form.resetFields();
+                setVisible(true);
+              }}
+            >
+              +
+            </a>
+          </Space>
+        }
+      />
+      <div className="body">
+        <Table
+          rowKey={(r) => r.id || r.name}
+          dataSource={list}
+          columns={columns as any}
+          pagination={false}
+          size="small"
+          locale={{ emptyText: "暂无环境变量" }}
+        />
+      </div>
+      <Modal
+        title="添加环境变量"
+        open={visible}
+        width={600}
+        styles={{
+          body: { maxHeight: "calc(100vh - 250px)", overflow: "auto" }
+        }}
+        onCancel={() => setVisible(false)}
+        footer={
+          <Space>
+            <Button type="primary" onClick={handleOk}>
+              确定
+            </Button>
+            <Button onClick={() => setVisible(false)}>取消</Button>
+          </Space>
+        }
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            label="环境变量名称"
+            name="name"
+            rules={[{ required: true, message: "请输入环境变量名称" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label="环境变量值"
+            name="value"
+            rules={[{ required: true, message: "请输入环境变量值" }]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Root>
+  );
+};

package/src/components/panel/index.ts

@@ -0,0 +1,9 @@
+export { ComponentPanel } from './ComponentPanel'
+export { LayerPanel } from './LayerPanel'
+export { ScriptPanel } from './ScriptPanel'
+export { DatasourcePanel } from './DatasourcePanel'
+export { VariablesPanel } from './VariablesPanel'
+export { CodePanel } from './CodePanel'
+export { PropertiesPanel } from './PropertiesPanel'
+export { AiPanel } from './AiPanel'
+export { CascadePanel } from './CascadePanel'

package/src/components/plugins/@antd/index.ts

@@ -0,0 +1,445 @@
+import { PluginType } from "../../typing";
+
+export { PropEditorProps } from "./item-props/types";
+
+import {
+  ButtonProps,
+  CapsuleProps,
+  CardProps,
+  CheckboxProps,
+  ColProps,
+  DatePickerProps,
+  EchartsProps,
+  HtmlProps,
+  ImageProps,
+  InputNumberProps,
+  InputProps,
+  ListProps,
+  PageHeaderProps,
+  RowProps,
+  SelectProps,
+  SpaceProps,
+  SwitchProps,
+  TableProps,
+  TextProps,
+} from "./item-props";
+import {
+  ButtonRender,
+  CapsuleRender,
+  CardRender,
+  CheckboxRender,
+  ColRender,
+  DatePickerRender,
+  EchartsRender,
+  HtmlRender,
+  ImageRender,
+  InputNumberRender,
+  InputRender,
+  ListRender,
+  PageHeaderRender,
+  RowRender,
+  SelectRender,
+  SpaceRender,
+  SwitchRender,
+  TableRender,
+  TextRender,
+} from "./items";
+
+export const TextPlugin: PluginType = {
+  group: "基础组件",
+  key: "b-text",
+  label: "文本",
+  icon: "icon-text",
+  component: TextRender,
+  formComponent: TextProps,
+  defaultOptions: {
+    style: {
+      fontSize: 14,
+      color: "#444444",
+      fontFamily: "'宋体', 'SimSun', serif",
+      fontWeight: "normal",
+      fontStyle: "normal",
+      textDecoration: "none",
+    },
+    props: { text: "文本内容" },
+  },
+};
+
+export const ImagePlugin: PluginType = {
+  group: "基础组件",
+  key: "b-image",
+  label: "图片",
+  icon: "icon-image",
+  component: ImageRender,
+  formComponent: ImageProps,
+  defaultOptions: {
+    props: {
+      src: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
+      alt: "",
+      href: "",
+      width: "100%",
+      height: "auto",
+    },
+  },
+};
+
+export const ButtonPlugin: PluginType = {
+  group: "基础组件",
+  key: "b-button",
+  label: "按钮",
+  icon: "icon-button",
+  component: ButtonRender,
+  formComponent: ButtonProps,
+  defaultOptions: {
+    props: {
+      type: "primary",
+      size: "default",
+      shape: "default",
+      block: false,
+      ghost: false,
+      text: "按钮文本",
+      icon: "",
+    },
+    cascadeIds: [],
+  },
+};
+
+export const PageHeaderPlugin: PluginType = {
+  group: "基础组件",
+  key: "b-page-header",
+  label: "页面标题",
+  icon: "icon-page-header",
+  component: PageHeaderRender,
+  formComponent: PageHeaderProps,
+  defaultOptions: {
+    props: { title: "标题", subTitle: "副标题" },
+    children: { extra: [] },
+  },
+};
+
+export const TablePlugin: PluginType = {
+  group: "基础组件",
+  key: "b-table",
+  label: "数据表格",
+  icon: "icon-table",
+  component: TableRender,
+  formComponent: TableProps,
+  defaultOptions: {
+    datasource: {
+      source: "custom",
+      datasourceId: null,
+      scriptId: null,
+      custom: null,
+    },
+    props: {
+      size: "default",
+      bordered: true,
+      showHeader: true,
+      pageSize: 10,
+      dataSource: [
+        { name: "苹果", count: 12 },
+        { name: "华为", count: 803 },
+        { name: "OPPO", count: 654 },
+        { name: "vivo", count: 719 },
+      ],
+      columns: [
+        { title: "品牌", dataIndex: "name" },
+        { title: "日销量（件）", dataIndex: "count" },
+      ],
+    },
+  },
+};
+
+export const ListPlugin: PluginType = {
+  group: "基础组件",
+  key: "b-list",
+  label: "列表",
+  icon: "icon-unordered-list",
+  component: ListRender,
+  formComponent: ListProps,
+  defaultOptions: {
+    datasource: { source: "custom", custom: "[]" },
+    props: {
+      size: "default",
+      itemLayout: "horizontal",
+      bordered: true,
+      split: true,
+      pageSize: 10,
+    },
+  },
+};
+
+export const HtmlPlugin: PluginType = {
+  group: "基础组件",
+  key: "b-html",
+  label: "HTML",
+  icon: "icon-html",
+  component: HtmlRender,
+  formComponent: HtmlProps,
+  defaultOptions: {
+    datasource: {
+      source: "custom",
+      datasourceId: null,
+      scriptId: null,
+      custom: `{"name": "Confucius"}`,
+    },
+    props: {
+      dataSource: { name: "Confucius" },
+      template: `<div>{{name}}, welcome to the world of programming.</div>`,
+    },
+  },
+};
+
+export const EchartsPlugin: PluginType = {
+  group: "基础组件",
+  key: "b-echarts",
+  label: "图表",
+  icon: "icon-echarts",
+  component: EchartsRender,
+  formComponent: EchartsProps,
+  defaultOptions: {
+    datasource: {
+      source: "custom",
+      datasourceId: null,
+      scriptId: null,
+      custom:
+        '[{"name":"Mon","value":150},{"name":"Tue","value":230},{"name":"Wed","value":224},{"name":"Thu","value":218},{"name":"Fri","value":135},{"name":"Sat","value":147},{"name":"Sun","value":260}]',
+    },
+    props: {
+      script: `
+return {
+  xAxis: { type: 'category', data: data.map(i => i.name) },
+  yAxis: { type: 'value' },
+  series: [{ data: data.map(i => i.value), type: 'line' }]
+}
+        `,
+    },
+  },
+};
+
+export const InputPlugin: PluginType = {
+  group: "表单组件",
+  key: "b-input",
+  label: "输入框",
+  icon: "icon-form-input",
+  component: InputRender,
+  formComponent: InputProps,
+  defaultOptions: {
+    props: {
+      var: "",
+      size: "default",
+      allowClear: true,
+      search: false,
+      prefix: "",
+      suffix: "",
+      placeholder: "请输入",
+    },
+    cascadeIds: [],
+  },
+};
+
+export const InputNumberPlugin: PluginType = {
+  group: "表单组件",
+  key: "b-input-number",
+  label: "数字输入框",
+  icon: "icon-form-input-number",
+  component: InputNumberRender,
+  formComponent: InputNumberProps,
+  defaultOptions: {
+    props: {
+      var: "",
+      size: "default",
+      allowClear: true,
+      prefix: "",
+      suffix: "",
+      placeholder: "请输入",
+      step: 1,
+      min: 0,
+      max: 100,
+      precision: 0,
+    },
+    cascadeIds: [],
+  },
+};
+
+export const SelectPlugin: PluginType = {
+  group: "表单组件",
+  key: "b-select",
+  label: "选择框",
+  icon: "icon-form-select",
+  component: SelectRender,
+  formComponent: SelectProps,
+  defaultOptions: {
+    props: {
+      var: "",
+      size: "default",
+      allowClear: true,
+      multiple: false,
+      options: [
+        { label: "选项1", value: "1" },
+        { label: "选项2", value: "2" },
+      ],
+    },
+    cascadeIds: [],
+  },
+};
+
+export const CapsulePlugin: PluginType = {
+  group: "表单组件",
+  key: "b-capsule",
+  label: "胶囊选择框",
+  icon: "icon-form-capsule",
+  component: CapsuleRender,
+  formComponent: CapsuleProps,
+  defaultOptions: {
+    props: {
+      var: "",
+      size: "default",
+      allowClear: true,
+      multiple: false,
+      options: [
+        { label: "选项1", value: "1" },
+        { label: "选项2", value: "2" },
+      ],
+    },
+    cascadeIds: [],
+  },
+};
+
+export const CheckboxPlugin: PluginType = {
+  group: "表单组件",
+  key: "b-checkbox",
+  label: "复选框",
+  icon: "icon-form-checkbox",
+  component: CheckboxRender,
+  formComponent: CheckboxProps,
+  defaultOptions: {
+    props: {
+      var: "",
+      layout: "horizontal",
+      lineNumber: 3,
+      options: [
+        { label: "选项1", value: "1" },
+        { label: "选项2", value: "2" },
+      ],
+    },
+    cascadeIds: [],
+  },
+};
+
+export const DatePickerPlugin: PluginType = {
+  group: "表单组件",
+  key: "b-date-picker",
+  label: "日期选择器",
+  icon: "icon-form-date-picker",
+  component: DatePickerRender,
+  formComponent: DatePickerProps,
+  defaultOptions: {
+    props: {
+      var: "",
+      size: "default",
+      allowClear: true,
+      showTime: false,
+      type: "date",
+    },
+    cascadeIds: [],
+  },
+};
+
+export const SwitchPlugin: PluginType = {
+  group: "表单组件",
+  key: "b-switch",
+  label: "开关",
+  icon: "icon-form-switch",
+  component: SwitchRender,
+  formComponent: SwitchProps,
+  defaultOptions: {
+    props: {
+      var: "",
+      size: "default",
+      checkedChildren: "开",
+      unCheckedChildren: "关",
+    },
+    cascadeIds: [],
+  },
+};
+
+export const SpacePlugin: PluginType = {
+  group: "容器组件",
+  key: "b-space",
+  label: "容器",
+  icon: "icon-space",
+  component: SpaceRender,
+  formComponent: SpaceProps,
+  defaultOptions: {
+    props: { align: "flex-start", direction: "row", size: "8px" },
+    children: [],
+  },
+};
+
+export const CardPlugin: PluginType = {
+  group: "容器组件",
+  key: "b-card",
+  label: "卡片",
+  icon: "icon-card",
+  component: CardRender,
+  formComponent: CardProps,
+  defaultOptions: {
+    props: {
+      title: "标题",
+      bordered: true,
+      hoverable: true,
+      shadow: true,
+      size: "default",
+    },
+    children: { title: [], extra: [], body: [], actions: [] },
+  },
+};
+
+export const RowPlugin: PluginType = {
+  group: "容器组件",
+  key: "b-row",
+  label: "栅格行",
+  icon: "icon-grid-row",
+  component: RowRender,
+  formComponent: RowProps,
+  defaultOptions: {
+    props: { gutter: [12, 12] },
+    children: [],
+  },
+};
+
+export const ColPlugin: PluginType = {
+  group: "容器组件",
+  key: "b-col",
+  label: "栅格列",
+  icon: "icon-grid-columns",
+  component: ColRender,
+  formComponent: ColProps,
+  defaultOptions: {
+    props: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6, span: 8 },
+    children: [],
+  },
+};
+
+export const plugins: PluginType[] = [
+  TextPlugin,
+  ImagePlugin,
+  ButtonPlugin,
+  PageHeaderPlugin,
+  TablePlugin,
+  ListPlugin,
+  HtmlPlugin,
+  EchartsPlugin,
+  InputPlugin,
+  InputNumberPlugin,
+  SelectPlugin,
+  CapsulePlugin,
+  CheckboxPlugin,
+  DatePickerPlugin,
+  SwitchPlugin,
+  SpacePlugin,
+  CardPlugin,
+  RowPlugin,
+  ColPlugin,
+];

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

@@ -0,0 +1,91 @@
+import React from "react";
+import {
+  ButtonProps as AntButtonProps,
+  Form,
+  Input,
+  Radio,
+  Switch,
+} from "antd";
+import type { PropEditorProps } from "./types";
+
+export type ButtonModel = {
+  text?: string;
+  icon?: string;
+} & Pick<AntButtonProps, "type" | "size" | "shape" | "block" | "ghost">;
+
+export const ButtonProps: React.FC<PropEditorProps<ButtonModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof ButtonModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+  return (
+    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      <Form.Item label="文本">
+        <Input
+          size="small"
+          value={model.text}
+          onChange={(e) => trigger("text", e.target.value)}
+          placeholder="请输入按钮文本"
+        />
+      </Form.Item>
+      <Form.Item label="图标">
+        <Input
+          size="small"
+          value={model.icon}
+          onChange={(e) => trigger("icon", e.target.value)}
+          placeholder="请输入按钮图标（antdv 1.7.8）"
+        />
+      </Form.Item>
+      <Form.Item label="类型">
+        <Radio.Group
+          size="small"
+          value={model.type}
+          onChange={(e) => trigger("type", e.target.value)}
+        >
+          <Radio.Button value="default">默认</Radio.Button>
+          <Radio.Button value="primary">主要</Radio.Button>
+          <Radio.Button value="link">链接</Radio.Button>
+          <Radio.Button value="dashed">虚线</Radio.Button>
+          <Radio.Button value="text">文本</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.shape}
+          onChange={(e) => trigger("shape", e.target.value)}
+        >
+          <Radio.Button value="default">默认</Radio.Button>
+          <Radio.Button value="round">圆角</Radio.Button>
+          <Radio.Button value="circle">圆形</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="块级">
+        <Switch
+          size="small"
+          checked={!!model.block}
+          onChange={(v) => trigger("block", v)}
+        />
+      </Form.Item>
+      <Form.Item label="幽灵">
+        <Switch
+          size="small"
+          checked={!!model.ghost}
+          onChange={(v) => trigger("ghost", v)}
+        />
+      </Form.Item>
+    </Form>
+  );
+};