bi-sdk-react 0.0.1

package/src/components/panel/DatasourcePanel.tsx

@@ -0,0 +1,419 @@
+import {
+  CaretDownOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from "@ant-design/icons";
+import Editor from "@monaco-editor/react";
+import {
+  Button,
+  Dropdown,
+  Form,
+  Input,
+  Modal,
+  Popconfirm,
+  Radio,
+  Space,
+  Table,
+} from "antd";
+import React, { useContext, useMemo, useState } from "react";
+import styled from "styled-components";
+import { DesignerContext } from "../context/DesignerContext";
+import { IconFont } from "../icon/IconFont";
+import { PaneHeader } from "./PaneHeader";
+import { uuid } from "../utils";
+import { ApiType, SqlType } 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;
+    overflow: auto;
+  }
+  ul,
+  li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px;
+    border-bottom: 1px dotted #d9d9d9;
+  }
+  li > div:first-child {
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  li:last-child {
+    border-bottom: none;
+  }
+  .margin-bottom-0 {
+    margin-bottom: 0;
+  }
+`;
+
+export const DatasourcePanel: React.FC = () => {
+  const { schema, setSchema } = useContext(DesignerContext);
+
+  const [apiVisible, setApiVisible] = useState(false);
+  const [sqlVisible, setSqlVisible] = useState(false);
+  const [editIndex, setEditIndex] = useState<number>(-1);
+  const [apiForm, setApiForm] = useState<ApiType>({
+    id: uuid(),
+    type: "api",
+    name: "",
+    url: "",
+    method: "GET",
+    headers: [] as any[],
+    formData: [] as any[],
+    body: "",
+  });
+  const [sqlForm, setSqlForm] = useState<SqlType>({
+    id: uuid(),
+    type: "sql",
+    name: "",
+    query: "",
+  });
+  const list = useMemo(() => schema.datasources, [schema.datasources]);
+
+  const onUpdateDatasources = (list: any[]) => {
+    setSchema({ ...schema, datasources: list });
+  };
+
+  const apiColumns = [
+    {
+      title: "键",
+      dataIndex: "name",
+      render: (_: any, r: any, index: number) => (
+        <Input
+          size="small"
+          value={r.name}
+          onChange={(e) => {
+            const headers = [...apiForm.headers];
+            headers[index] = { ...headers[index], name: e.target.value };
+            setApiForm({ ...apiForm, headers });
+          }}
+        />
+      ),
+    },
+    {
+      title: "值",
+      dataIndex: "value",
+      render: (_: any, r: any, index: number) => (
+        <Input
+          size="small"
+          value={r.value}
+          onChange={(e) => {
+            const headers = [...apiForm.headers];
+            headers[index] = { ...headers[index], value: e.target.value };
+            setApiForm({ ...apiForm, headers });
+          }}
+        />
+      ),
+    },
+    {
+      title: "操作",
+      width: 50,
+      align: "center" as const,
+      render: (_: any, r: any, index: number) => (
+        <Space>
+          <a
+            onClick={() => {
+              const headers = [...apiForm.headers];
+              headers.splice(index, 1);
+              setApiForm({ ...apiForm, headers });
+            }}
+          >
+            <DeleteOutlined />
+          </a>
+        </Space>
+      ),
+    },
+  ];
+  const apiFormAdd = () =>
+    setApiForm({
+      id: uuid(),
+      type: "api",
+      name: "",
+      url: "",
+      method: "GET",
+      headers: [],
+      formData: [],
+      body: "",
+    });
+  const sqlFormAdd = () =>
+    setSqlForm({ id: uuid(), type: "sql", name: "", query: "" });
+  const handleAddApi = () => {
+    setEditIndex(-1);
+    apiFormAdd();
+    setApiVisible(true);
+  };
+  const handleAddSql = () => {
+    setEditIndex(-1);
+    sqlFormAdd();
+    setSqlVisible(true);
+  };
+  const handleEdit = (item: any, index: number) => {
+    setEditIndex(index);
+    if (item.type === "api") {
+      setApiForm({ ...item });
+      setApiVisible(true);
+    } else {
+      setSqlForm({ ...item });
+      setSqlVisible(true);
+    }
+  };
+  const handleDelete = (index: number) => {
+    const next = [...list];
+    next.splice(index, 1);
+    onUpdateDatasources && onUpdateDatasources(next);
+  };
+  const handleApiOk = () => {
+    if (!apiForm.name || !apiForm.url) return;
+    const next = [...list];
+    if (editIndex === -1) next.push(apiForm);
+    else next[editIndex] = apiForm;
+    onUpdateDatasources && onUpdateDatasources(next);
+    setApiVisible(false);
+  };
+  const handleSqlOk = () => {
+    if (!sqlForm.name || !sqlForm.query) return;
+    const next = [...list];
+    if (editIndex === -1) next.push(sqlForm);
+    else next[editIndex] = sqlForm;
+    onUpdateDatasources && onUpdateDatasources(next);
+    setSqlVisible(false);
+  };
+  return (
+    <Root className="datasource-panel">
+      <PaneHeader
+        title="数据源"
+        extra={
+          <Space>
+            <Dropdown
+              menu={{
+                onClick: ({ key }) => {
+                  key === "api" ? handleAddApi() : handleAddSql();
+                },
+                items: [
+                  { key: "api", label: <a>API接口</a> },
+                  { key: "sql", label: <a>SQL查询</a> },
+                ],
+              }}
+              placement="bottom"
+            >
+              <a className="toolbar">
+                <PlusOutlined />
+                <CaretDownOutlined
+                  style={{ fontSize: 8, verticalAlign: "sub" }}
+                />
+              </a>
+            </Dropdown>
+          </Space>
+        }
+      />
+      <div className="body">
+        <ul>
+          {list.map((item, index) => (
+            <li key={item.id}>
+              <div title={item.name}>
+                <IconFont type="icon-drag" /> {item.name}
+              </div>
+              <Space>
+                <a onClick={() => handleEdit(item, index)}>
+                  <EditOutlined />
+                </a>
+                <Popconfirm
+                  title="确认删除吗？"
+                  okText="确认"
+                  cancelText="取消"
+                  onConfirm={() => handleDelete(index)}
+                >
+                  <a>
+                    <DeleteOutlined />
+                  </a>
+                </Popconfirm>
+              </Space>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <Modal
+        title="添加API接口"
+        open={apiVisible}
+        width={600}
+        styles={{
+          body: { maxHeight: "calc(100vh - 250px)", overflow: "auto" },
+        }}
+        onCancel={() => setApiVisible(false)}
+        footer={
+          <Space>
+            <Button type="primary" onClick={handleApiOk}>
+              确定
+            </Button>
+            <Button onClick={() => setApiVisible(false)}>取消</Button>
+          </Space>
+        }
+      >
+        <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+          <Form.Item label="接口名称" required>
+            <Input
+              value={apiForm.name}
+              onChange={(e) => setApiForm({ ...apiForm, name: e.target.value })}
+            />
+          </Form.Item>
+          <Form.Item label="接口URL" required>
+            <Input
+              value={apiForm.url}
+              onChange={(e) => setApiForm({ ...apiForm, url: e.target.value })}
+            />
+          </Form.Item>
+          <Form.Item label="请求方法">
+            <Radio.Group
+              value={apiForm.method}
+              onChange={(e) =>
+                setApiForm({ ...apiForm, method: e.target.value })
+              }
+            >
+              <Radio.Button value="GET">GET</Radio.Button>
+              <Radio.Button value="POST">POST</Radio.Button>
+              <Radio.Button value="PUT">PUT</Radio.Button>
+              <Radio.Button value="DELETE">DELETE</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+          <label
+            style={{ display: "block", color: "#000000d9", padding: "8px 0" }}
+          >
+            请求头
+          </label>
+          <Table
+            columns={apiColumns as any}
+            dataSource={apiForm.headers}
+            pagination={false}
+            locale={{ emptyText: "暂无数据" }}
+            size="small"
+            bordered
+            rowKey={(_, i) => String(i)}
+          />
+          <Button
+            size="small"
+            block
+            onClick={() =>
+              setApiForm({
+                ...apiForm,
+                headers: [...apiForm.headers, { name: "", value: "" }],
+              })
+            }
+          >
+            添加
+          </Button>
+          <label
+            style={{ display: "block", color: "#000000d9", padding: "8px 0" }}
+          >
+            表单数据
+          </label>
+          <Table
+            columns={apiColumns as any}
+            dataSource={apiForm.formData}
+            pagination={false}
+            locale={{ emptyText: "暂无数据" }}
+            size="small"
+            bordered
+            rowKey={(_, i) => `f-${i}`}
+          />
+          <Button
+            size="small"
+            block
+            onClick={() =>
+              setApiForm({
+                ...apiForm,
+                formData: [...apiForm.formData, { name: "", value: "" }],
+              })
+            }
+          >
+            添加
+          </Button>
+          <Form.Item label="请求体">
+            <div
+              style={{
+                border: `1px solid var(--ant-color-border)`,
+                borderRadius: "var(--ant-border-radius)",
+                padding: 1,
+              }}
+            >
+              <Editor
+                height="300px"
+                defaultLanguage="json"
+                value={apiForm.body}
+                onChange={(v) => setApiForm({ ...apiForm, body: v || "" })}
+                options={{
+                  minimap: { enabled: false },
+                  scrollBeyondLastLine: false,
+                  tabSize: 2,
+                }}
+              />
+            </div>
+          </Form.Item>
+        </Form>
+      </Modal>
+      <Modal
+        title="添加SQL查询"
+        open={sqlVisible}
+        width={600}
+        styles={{
+          body: { maxHeight: "calc(100vh - 250px)", overflow: "auto" },
+        }}
+        onCancel={() => setSqlVisible(false)}
+        footer={
+          <Space>
+            <Button type="primary" onClick={handleSqlOk}>
+              确定
+            </Button>
+            <Button onClick={() => setSqlVisible(false)}>取消</Button>
+          </Space>
+        }
+      >
+        <Form layout="vertical">
+          <Form.Item label="查询名称" required>
+            <Input
+              value={sqlForm.name}
+              onChange={(e) => setSqlForm({ ...sqlForm, name: e.target.value })}
+            />
+          </Form.Item>
+          <Form.Item label="查询语句" required>
+            <div
+              style={{
+                border: `1px solid var(--ant-color-border)`,
+                borderRadius: "var(--ant-border-radius)",
+                padding: 1,
+              }}
+            >
+              <Editor
+                height="300px"
+                defaultLanguage="sql"
+                value={sqlForm.query}
+                onChange={(v) => setSqlForm({ ...sqlForm, query: v || "" })}
+                options={{
+                  minimap: { enabled: false },
+                  scrollBeyondLastLine: false,
+                  tabSize: 2,
+                }}
+              />
+            </div>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Root>
+  );
+};

package/src/components/panel/LayerPanel.tsx

@@ -0,0 +1,238 @@
+import { MinusSquareOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import { Space, Tooltip, Tree } from "antd";
+import React, { useContext, useMemo, useState } from "react";
+import styled from "styled-components";
+import { DesignerContext } from "../context/DesignerContext";
+import { uuid } from "../utils";
+import { PaneHeader } from "./PaneHeader";
+
+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;
+    overflow: auto;
+  }
+`;
+
+const DraggableTree = styled(Tree)`
+  .ant-tree-draggable-icon {
+    display: none;
+  }
+
+  .ant-tree-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+export const LayerPanel: React.FC = () => {
+  const {
+    schema,
+    setSchema: onSchemaChange,
+    selectedItem,
+    setSelectedItem: onSelect,
+    plugins,
+  } = useContext(DesignerContext);
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+  const selectedKeys = useMemo(
+    () => (selectedItem ? [selectedItem.id!] : []),
+    [selectedItem]
+  );
+  const realItems = useMemo(() => {
+    const compute = (list: any[] = []) => {
+      return list.map((item) => {
+        const { id, type, children } = item;
+        let c: any = undefined;
+        if (Array.isArray(children)) {
+          c = compute(children);
+        } else if (typeof children === "object" && children) {
+          c = [];
+          Object.keys(children).forEach((k) => {
+            if (!Array.isArray(children[k])) return;
+            c.push({
+              key: uuid(),
+              type: "slot",
+              slot: k,
+              origin: children,
+              children: compute(children[k]),
+            });
+          });
+        }
+        return { key: id, title: type, item, type, children: c };
+      });
+    };
+    return compute(schema.items);
+  }, [schema]);
+  const formatType = (type: string, slot?: string) => {
+    if (type === "slot") return "插槽-" + slot;
+    return plugins.find((i) => i.key === type)?.label || type;
+  };
+  const allowDrop = (info: any) => {
+    const dropNode = info.node;
+    const dragNode = info.dragNode;
+    if (dragNode.dataRef.type === "slot") return false;
+    if (
+      !info.dropToGap &&
+      !["b-row", "b-col", "b-card", "slot"].includes(dropNode.dataRef.type)
+    )
+      return false;
+    if (dragNode.dataRef.type === "b-col") {
+      if (!info.dropToGap) {
+        return dropNode.dataRef.type === "b-row";
+      } else {
+        return dropNode.dataRef.type === "b-col";
+      }
+    }
+    if (dropNode.dataRef.type === "b-col") {
+      if (info.dropToGap) {
+        return dragNode.dataRef.type === "b-col";
+      }
+    }
+    if (dropNode.dataRef.type === "b-row") {
+      if (!info.dropToGap) return dragNode.dataRef.type === "b-col";
+    }
+    return true;
+  };
+  const onDrop = (info: any) => {
+    if (!allowDrop(info)) return;
+    const dropKey = info.node.key;
+    const dragKey = info.dragNode.key;
+    const dropPos = info.node.pos.split("-");
+    const dropPosition =
+      info.dropPosition - Number(dropPos[dropPos.length - 1]);
+    const loop = (data: any[], key: string, callback: Function) => {
+      data.forEach((item, index, arr) => {
+        if (item.id === key) {
+          item.children = item.children || [];
+          if (item.type === "slot") {
+            return callback(item, index, arr, item.children[item.slot]);
+          }
+          return callback(item, index, arr, item.children);
+        }
+        if (Array.isArray(item.children)) {
+          return loop(item.children, key, callback);
+        } else if (typeof item.children === "object") {
+          for (let k in item.children) {
+            if (Array.isArray(item.children[k])) {
+              loop(item.children[k], key, callback);
+            }
+          }
+        }
+      });
+    };
+    const data = schema.items;
+    let dragObj: any;
+    loop(data, dragKey, (item: any, index: number, arr: any[]) => {
+      arr.splice(index, 1);
+      dragObj = item;
+    });
+    if (!info.dropToGap) {
+      if (info.node.dataRef.type === "slot") {
+        const { slot, origin } = info.node.dataRef;
+        console.log(slot, JSON.stringify(origin));
+        origin[slot] = origin[slot] || [];
+        origin[slot].push(dragObj);
+      }
+      loop(data, dropKey, (item: any) => {
+        item.children = item.children || [];
+        item.children.push(dragObj);
+      });
+    } else if (
+      (info.node.children || []).length > 0 &&
+      info.node.expanded &&
+      dropPosition === 1
+    ) {
+      loop(data, dropKey, (item: any, index: number, arr: any[]) => {
+        item.children = item.children || [];
+        item.children.unshift(dragObj);
+      });
+    } else {
+      let ar: any[] = [];
+      let i = 0;
+      loop(data, dropKey, (item: any, index: number, arr: any[]) => {
+        ar = arr;
+        i = index;
+      });
+      if (dropPosition === -1) {
+        ar.splice(i, 0, dragObj);
+      } else {
+        ar.splice(i + 1, 0, dragObj);
+      }
+    }
+    onSchemaChange && onSchemaChange({ ...schema, items: data });
+  };
+  const expandAll = () => {
+    const keys: string[] = [];
+    const compute = (list: any[] = []) => {
+      list.forEach((item) => {
+        keys.push(item.id);
+        if (item.children?.length) compute(item.children);
+      });
+    };
+    compute(schema.items);
+    setExpandedKeys(keys);
+  };
+  const collapseAll = () => setExpandedKeys([]);
+
+  const treeData = useMemo(() => {
+    const computeTreeData = (list: any[] = []): any[] => {
+      return list.map((item) => ({
+        key: item.key,
+        title: <span>{formatType(item.type, (item as any).slot)}</span>,
+        children: item.children ? computeTreeData(item.children) : undefined,
+        dataRef: item,
+      }));
+    };
+    return computeTreeData(realItems);
+  }, [realItems]);
+
+  return (
+    <Root className="layer-panel">
+      <PaneHeader
+        title="图层"
+        extra={
+          <Space>
+            <Tooltip title="全部展开">
+              <a className="toolbar" onClick={expandAll}>
+                <PlusSquareOutlined />
+              </a>
+            </Tooltip>
+            <Tooltip title="全部收起">
+              <a className="toolbar" onClick={collapseAll}>
+                <MinusSquareOutlined />
+              </a>
+            </Tooltip>
+          </Space>
+        }
+      />
+      <div className="body">
+        <DraggableTree
+          draggable={{
+            icon: false,
+            nodeDraggable(node: any) {
+              return false; // node.dataRef.type !== "slot";
+            },
+          }}
+          showIcon={false}
+          showLine={{ showLeafIcon: false }}
+          treeData={treeData}
+          selectedKeys={selectedKeys}
+          expandedKeys={expandedKeys}
+          onSelect={(_, info: any) => {
+            if (info.node.dataRef.type === "slot") return;
+            onSelect && onSelect(info.node.dataRef.item);
+          }}
+          onDrop={onDrop}
+          onExpand={(keys) => setExpandedKeys(keys as string[])}
+        />
+      </div>
+    </Root>
+  );
+};

package/src/components/panel/PaneHeader.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export type PaneHeaderProps = {
+  title?: string
+  extra?: React.ReactNode
+}
+
+const Header = styled.div`
+  width: 100%;
+  padding: 0 12px;
+  border-bottom: solid 1px #e8e8e8;
+  background: #ffffff;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .title {
+    font-size: 14px;
+    line-height: 40px;
+  }
+  .extra {
+    line-height: 32px;
+  }
+`
+
+export const PaneHeader: React.FC<PaneHeaderProps> = ({ title = '', extra }) => {
+  return (
+    <Header className="pane-header">
+      <span className="title">{title}</span>
+      <div className="extra">{extra}</div>
+    </Header>
+  )
+}