bi-sdk-react 0.0.1

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

@@ -0,0 +1,20 @@
+export { CardRender } from './CardRender'
+export { RowRender } from './RowRender'
+export { ColRender } from './ColRender'
+export { PageHeaderRender } from './PageHeaderRender'
+export { TableRender } from './TableRender'
+export { ListRender } from './ListRender'
+export { HtmlRender } from './HtmlRender'
+export { EchartsRender } from './EchartsRender'
+export { TextRender } from './TextRender'
+export { ImageRender } from './ImageRender'
+export { ButtonRender } from './ButtonRender'
+export { SpaceRender } from './SpaceRender'
+export { InputRender } from './InputRender'
+export { InputNumberRender } from './InputNumberRender'
+export { SelectRender } from './SelectRender'
+export { CapsuleRender } from './CapsuleRender'
+export { CheckboxRender } from './CheckboxRender'
+export { DatePickerRender } from './DatePickerRender'
+export { SwitchRender } from './SwitchRender'
+

package/src/components/styles.css

@@ -0,0 +1,12 @@
+.ant-dropdown-menu-vertical {
+  max-height: 70vh;
+  overflow: auto;
+}
+
+a.toolbar {
+  color: var(--ant-color-text-secondary);
+
+  &.active {
+    color: var(--ant-color-primary);
+  }
+}

package/src/components/typing.ts

@@ -0,0 +1,80 @@
+import { MouseEventHandler } from "react";
+
+export type HtmlBaseProps = {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: MouseEventHandler;
+};
+
+export type SchemaItemType = {
+  id?: string;
+  type: string;
+  name?: string;
+  description?: string;
+  style?: React.CSSProperties;
+  props?: Record<string, any>;
+  cascadeIds?: string[];
+  children?: SchemaItemType[] | Record<string, SchemaItemType[]>;
+  datasource?: {
+    source?: "custom" | "define";
+    datasourceId?: string | null;
+    scriptId?: string | null;
+    custom?: string | null;
+  };
+};
+
+export type PluginType = {
+  group: string;
+  key: string;
+  label: string;
+  icon: string;
+  component: React.FC<any>;
+  formComponent?: React.FC<any>;
+  defaultOptions?: Pick<
+    SchemaItemType,
+    "props" | "children" | "cascadeIds" | "datasource" | "style"
+  >;
+};
+type NameValue = { name?: string; value?: string };
+export type ScriptItem = { id?: string; name: string; script: string };
+export type VariableItem = { name: string; value: string; id?: string };
+
+export type ApiType = {
+  id: string;
+  type: "api";
+  name: string;
+  url: string;
+  method: "GET" | "POST" | "PUT" | "DELETE";
+  headers: NameValue[];
+  formData: NameValue[];
+  body: string;
+};
+
+export type SqlType = {
+  id: string;
+  type: "sql";
+  name: string;
+  query: string;
+};
+
+export type PageInfo = {
+  name?: string;
+  description?: string;
+  cover?: string;
+};
+
+export type PageSchema = {
+  info: PageInfo;
+  datasources: (ApiType | SqlType)[];
+  scripts: ScriptItem[];
+  variables: VariableItem[];
+  items: SchemaItemType[];
+};
+
+export type EnvType = {
+  global: Record<string, any>;
+  local: Record<string, Record<string, any>>;
+};
+
+export type CallbacksType = Record<string, (v: any) => void>;

package/src/components/utils.ts

@@ -0,0 +1,37 @@
+import { useId } from "react";
+import { CallbacksType, EnvType, SchemaItemType } from "./typing";
+import { v4 } from "uuid";
+
+type Env = EnvType;
+
+export const getVars = (env: Env, item: SchemaItemType) => {
+  return { ...env.global, ...(env.local[item.id || ""] || {}) };
+};
+
+export const setVar = (
+  env: Env,
+  item: SchemaItemType,
+  key: string,
+  value: any
+) => {
+  (item.cascadeIds || []).forEach((id) => {
+    env.local[id] = env.local[id] || {};
+    env.local[id][key] = value;
+  });
+};
+
+export const handleCallback = (
+  env: Env,
+  item: SchemaItemType,
+  callbacks: CallbacksType
+) => {
+  const vars = getVars(env, item);
+  (item.cascadeIds || []).forEach((id) => {
+    const cb = callbacks[id];
+    if (typeof cb === "function") {
+      cb(vars);
+    }
+  });
+};
+
+export const uuid = () => v4();

package/src/example.tsx

@@ -0,0 +1,136 @@
+import { CloseOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
+import { Button, Col, Divider, Drawer, Form, Input, Row, Table } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { PageDesigner } from "./components";
+import { schema } from "./components/example";
+import { plugins } from "./components/plugins/@antd";
+
+type Agent = { id: string | number; name: string };
+
+const EditDrawer = styled(Drawer)`
+  width: 80%;
+
+  .ant-drawer-content-wrapper {
+    width: 100%;
+
+    .ant-drawer-section {
+      width: 100%;
+
+      .ant-drawer-header {
+        padding: 8px 24px;
+      }
+      .ant-drawer-body {
+        padding: 0;
+        height: "calc(100vh - 41px)";
+        overflow: "hidden";
+      }
+    }
+  }
+`;
+
+export const Example: React.FC = () => {
+  const editDrawerRef = useRef<any>(null);
+  const [editVisible, setEditVisible] = useState(false);
+  const [agentList, setAgentList] = useState<Agent[]>([]);
+  const [params, setParams] = useState<{ name: string }>({ name: "" });
+  const columns = [
+    { title: "名称", dataIndex: "name", key: "name" },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      render: (_: any, record: any) => (
+        <a onClick={() => handleEditClick(record)}>
+          <EditOutlined />
+        </a>
+      ),
+    },
+  ];
+  const dataSource = [{ name: "数据报表1" }, { name: "数据报表2" }];
+  const handleEditClick = (record: any) => {
+    setEditVisible(true);
+    setTimeout(() => {
+      editDrawerRef.current?.handleOpen(JSON.parse(JSON.stringify(schema)));
+    }, 0);
+  };
+  const handleAdd = () => {
+    setEditVisible(true);
+    setTimeout(() => {
+      editDrawerRef.current?.handleOpen(JSON.parse(JSON.stringify(schema)));
+    }, 0);
+  };
+
+  useEffect(() => {
+    const initAgentList = async () => {
+      try {
+        setAgentList([]);
+      } catch {
+        setAgentList([]);
+      }
+    };
+    initAgentList();
+  }, []);
+  return (
+    <div style={{ padding: 20 }}>
+      <Row justify="space-around">
+        <Col flex="auto">
+          <Form layout="inline">
+            <Form.Item label="名称">
+              <Input
+                value={params.name}
+                onChange={(e) => setParams({ name: e.target.value })}
+                placeholder="请输入数据报表名称"
+              />
+            </Form.Item>
+            <Form.Item>
+              <Button>查询</Button>
+            </Form.Item>
+          </Form>
+        </Col>
+        <Col flex="100px">
+          <Button type="primary" onClick={handleAdd} icon={<PlusOutlined />}>
+            创建数据报表
+          </Button>
+        </Col>
+      </Row>
+      <Table
+        size="small"
+        columns={columns as any}
+        dataSource={dataSource}
+        bordered
+        style={{ marginTop: 20 }}
+        rowKey={(_, i) => String(i)}
+      />
+      {editVisible && (
+        <EditDrawer
+          open={editVisible}
+          onClose={() => setEditVisible(false)}
+          styles={{
+            wrapper: { width: "100%" },
+            header: { display: "none" },
+            body: {
+              padding: 0,
+              height: "calc(100vh - 41px)",
+              overflow: "hidden",
+            },
+          }}
+        >
+          <PageDesigner
+            ref={editDrawerRef}
+            agentList={agentList}
+            plugins={plugins}
+            headerExtra={
+              <>
+                <Divider type="vertical" />
+                <a className="toolbar" onClick={() => setEditVisible(false)}>
+                  <CloseOutlined />
+                </a>
+              </>
+            }
+          />
+        </EditDrawer>
+      )}
+    </div>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Example } from './example';
+
+// export * from './components'
+
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <React.StrictMode>
+        <Example />
+    </React.StrictMode>
+  );
+}