bi-sdk-react 0.0.1

package/src/components/example.ts

@@ -0,0 +1,577 @@
+export const exampleHtml = `<div>{{title}}</div>
+<div>{{displayValue}}</div>
+<div>
+  {{desc || ""}}
+</div>`;
+
+export const schema = {
+  info: {
+    name: "人事基本情况总览",
+    description: "实时监控和分析教师人事关键指标",
+  },
+  datasources: [],
+  scripts: [],
+  variables: [],
+  items: [
+    {
+      type: "b-page-header",
+      name: "页面标题",
+      props: {
+        title: "人事基本情况总览",
+        subTitle: "实时监控和分析教师人事关键指标",
+      },
+      children: {
+        extra: [],
+      },
+    },
+    {
+      type: "b-card",
+      name: "容器组件",
+      props: {
+        bordered: true,
+        hoverable: true,
+        shadow: true,
+        size: "default",
+      },
+      children: {
+        title: [
+          {
+            type: "b-text",
+            name: "文本",
+            props: {
+              text: "人事基本情况总览",
+            },
+            style: {
+              fontSize: 14,
+              color: "#444444",
+              fontFamily: "'宋体', 'SimSun', serif",
+              fontWeight: "normal",
+              fontStyle: "normal",
+              textDecoration: "none",
+            },
+          },
+        ],
+        extra: [],
+        body: [
+          {
+            type: "b-list",
+            name: "列表",
+            datasource: {
+              source: "custom",
+              custom:
+                '[{"title":"Confucius","avatar":"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png","href":"https://www.antdv.com/","description":"The man who moves a mountain begins by carrying away small stones."},{"title":"Socrates","description":"I think, therefore I am."}]',
+            },
+            props: {
+              size: "default",
+              itemLayout: "horizontal",
+              bordered: true,
+              split: true,
+              pageSize: 10,
+            },
+          },
+        ],
+        actions: [],
+      },
+    },
+    {
+      type: "b-row",
+      name: "栅格行",
+      props: {
+        gutter: [12, 12],
+      },
+      children: [
+        {
+          type: "b-col",
+          name: "栅格列",
+          props: {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 6,
+            xl: 6,
+          },
+          children: [
+            {
+              type: "b-card",
+              name: "容器组件",
+              props: {
+                bordered: true,
+                hoverable: true,
+                shadow: true,
+                size: "default",
+              },
+              children: [
+                {
+                  type: "b-html",
+                  name: "HTML",
+                  datasource: {
+                    source: "custom",
+                    custom:
+                      '{"title":"教职工总人数","value":1284,"displayValue":"1284","desc":""}',
+                  },
+                  props: {
+                    template: exampleHtml,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "b-col",
+          name: "栅格列",
+          props: {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 6,
+            xl: 6,
+          },
+          children: [
+            {
+              type: "b-card",
+              name: "容器组件",
+              props: {
+                bordered: true,
+                hoverable: true,
+                shadow: true,
+                size: "default",
+              },
+              children: [
+                {
+                  type: "b-html",
+                  name: "HTML",
+                  datasource: {
+                    source: "custom",
+                    custom:
+                      '{"title":"男性","value":756,"displayValue":"756","desc":""}',
+                  },
+                  props: {
+                    template: exampleHtml,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "b-col",
+          name: "栅格列",
+          props: {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 6,
+            xl: 6,
+          },
+          children: [
+            {
+              type: "b-card",
+              name: "容器组件",
+              props: {
+                bordered: true,
+                hoverable: true,
+                shadow: true,
+                size: "default",
+              },
+              children: [
+                {
+                  type: "b-html",
+                  name: "HTML",
+                  datasource: {
+                    source: "custom",
+                    custom:
+                      '{"title":"女性","value":528,"displayValue":"528","desc":""}',
+                  },
+                  props: {
+                    template: exampleHtml,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "b-col",
+          name: "栅格列",
+          props: {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 6,
+            xl: 6,
+          },
+          children: [
+            {
+              type: "b-card",
+              name: "容器组件",
+              props: {
+                bordered: true,
+                hoverable: true,
+                shadow: true,
+                size: "default",
+              },
+              children: [
+                {
+                  type: "b-html",
+                  name: "HTML",
+                  datasource: {
+                    source: "custom",
+                    custom:
+                      '{"title":"当前在岗","value":1156,"displayValue":"1156","desc":""}',
+                  },
+                  props: {
+                    template: exampleHtml,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "b-row",
+      name: "栅格行",
+      props: {
+        gutter: [12, 12],
+      },
+      style: { marginLeft: 0, marginRight: 0 },
+      children: [
+        {
+          type: "b-col",
+          name: "栅格列",
+          props: {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 6,
+            xl: 6,
+          },
+          children: [
+            {
+              type: "b-card",
+              name: "容器组件",
+              props: {
+                title: "单位人员分布",
+                bordered: true,
+                hoverable: true,
+                shadow: true,
+                size: "default",
+              },
+              children: [
+                {
+                  type: "b-echarts",
+                  name: "图表",
+                  datasource: {
+                    source: "custom",
+                    custom: "[]",
+                  },
+                  props: {
+                    title: "单位人员分布",
+                    script: `
+return {
+    tooltip: {
+    trigger: "axis",
+    axisPointer: { type: "shadow" },
+    formatter: "{b}: {c} 人",
+    },
+    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+    xAxis: {
+    type: "category",
+    data: ["行政部门", "教学单位", "教辅单位", "后勤单位"],
+    axisLabel: { fontSize: 12 },
+    },
+    yAxis: { type: "value", name: "人数", nameTextStyle: { fontSize: 12 } },
+    series: [
+    {
+        data: [215, 856, 132, 81],
+        type: "bar",
+        itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#165DFF" },
+            { offset: 1, color: "#0E42D2" },
+        ]),
+        },
+    },
+    ],
+}
+                        `,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "b-col",
+          name: "栅格列",
+          props: {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 6,
+            xl: 6,
+          },
+          children: [
+            {
+              type: "b-card",
+              name: "容器组件",
+              props: {
+                title: "性别比例",
+                bordered: true,
+                hoverable: true,
+                shadow: true,
+                size: "default",
+              },
+              children: [
+                {
+                  type: "b-echarts",
+                  name: "图表",
+                  datasource: {
+                    source: "custom",
+                    custom: "[]",
+                  },
+                  props: {
+                    title: "性别比例",
+                    script: `
+return {
+    tooltip: { trigger: "item", formatter: "{b}: {c} 人 ({d}%)" },
+    legend: {
+    orient: "vertical",
+    left: "left",
+    textStyle: { fontSize: 12 },
+    },
+    series: [
+    {
+        name: "性别比例",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        itemStyle: { borderRadius: 8, borderColor: "#fff", borderWidth: 2 },
+        label: { show: false, position: "center" },
+        emphasis: {
+        label: { show: true, fontSize: 16, fontWeight: "bold" },
+        },
+        labelLine: { show: false },
+        data: [
+        { value: 756, name: "男性", itemStyle: { color: "#165DFF" } },
+        { value: 528, name: "女性", itemStyle: { color: "#722ED1" } },
+        ],
+    },
+    ],
+}
+                        `,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "b-row",
+      name: "栅格行",
+      props: {
+        gutter: [12, 12],
+      },
+      style: { marginLeft: 0, marginRight: 0 },
+      children: [
+        {
+          type: "b-col",
+          name: "栅格列",
+          props: {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 6,
+            xl: 6,
+          },
+          children: [
+            {
+              type: "b-card",
+              name: "容器组件",
+              props: {
+                title: "民族分布",
+                bordered: true,
+                hoverable: true,
+                shadow: true,
+                size: "default",
+              },
+              children: [
+                {
+                  type: "b-echarts",
+                  name: "图表",
+                  datasource: {
+                    source: "custom",
+                    custom: "[]",
+                  },
+                  props: {
+                    title: "民族分布",
+                    script: `
+return {
+    tooltip: {
+    trigger: "axis",
+    axisPointer: { type: "shadow" },
+    formatter: "{b}: {c} 人",
+    },
+    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+    xAxis: {
+    type: "category",
+    data: ["汉族", "少数民族"],
+    axisLabel: { fontSize: 12 },
+    },
+    yAxis: { type: "value", name: "人数", nameTextStyle: { fontSize: 12 } },
+    series: [
+    {
+        data: [1204, 80],
+        type: "bar",
+        itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#165DFF" },
+            { offset: 1, color: "#0FC6C2" },
+        ]),
+        },
+    },
+    ],
+}
+                            `,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "b-col",
+          name: "栅格列",
+          props: {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 6,
+            xl: 6,
+          },
+          children: [
+            {
+              type: "b-card",
+              name: "容器组件",
+              props: {
+                title: "最高学历分布",
+                bordered: true,
+                hoverable: true,
+                shadow: true,
+                size: "default",
+              },
+              children: [
+                {
+                  type: "b-echarts",
+                  name: "图表",
+                  datasource: {
+                    source: "custom",
+                    custom: "[]",
+                  },
+                  props: {
+                    title: "最高学历分布",
+                    script: `
+return {
+    tooltip: {
+    trigger: "axis",
+    axisPointer: { type: "shadow" },
+    formatter: "{b}: {c} 人",
+    },
+    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+    xAxis: {
+    type: "category",
+    data: ["本科", "硕士", "博士"],
+    axisLabel: { fontSize: 12 },
+    },
+    yAxis: { type: "value", name: "人数", nameTextStyle: { fontSize: 12 } },
+    series: [
+    {
+        data: [412, 628, 244],
+        type: "bar",
+        itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#722ED1" },
+            { offset: 1, color: "#531DAB" },
+        ]),
+        },
+    },
+    ],
+}
+                            `,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "b-row",
+      name: "栅格行",
+      props: {
+        gutter: [12, 12],
+      },
+      style: { marginLeft: 0, marginRight: 0 },
+      children: [
+        {
+          type: "b-col",
+          name: "栅格列",
+          props: {
+            span: 24,
+          },
+          children: [
+            {
+              type: "b-card",
+              name: "容器组件",
+              props: {
+                title: "民族分布",
+                size: "small",
+                bordered: false,
+                hoverable: true,
+                shadow: true,
+              },
+              children: [
+                {
+                  type: "b-table",
+                  name: "数据表格",
+                  props: {
+                    title: "民族分布",
+                    size: "small",
+                    bordered: true,
+                    showHeader: true,
+                    pageSize: 10,
+                    dataSource: [
+                      {
+                        name: "汉族",
+                        count: 1204,
+                      },
+                      {
+                        name: "少数民族",
+                        count: 80,
+                      },
+                    ],
+                    columns: [
+                      {
+                        title: "民族",
+                        dataIndex: "name",
+                      },
+                      {
+                        title: "人数",
+                        dataIndex: "count",
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

package/src/components/hooks/datasource.ts

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+
+export const useDatasource = (id?: string, datasource?: Record<string, any>) => {
+  return useMemo(() => {
+    if (!datasource) {
+      return null;
+    }
+    const source = datasource.source || "custom";
+    switch (source) {
+      case "custom":
+        try {
+          return JSON.parse(datasource.custom || "[]");
+        } catch (e) {
+          return null;
+        }
+      case "define":
+        break;
+      default:
+        break;
+    }
+    return null;
+  }, [id, datasource]);
+};

package/src/components/hooks/useDeepCompareEffect.ts

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+
+export function useDeepCompareEffect(effect: () => void, dependencies: any[]) {
+  const currentDependenciesRef = useRef<string>();
+  const isEqual =
+    currentDependenciesRef.current === JSON.stringify(dependencies);
+
+  if (!isEqual || !currentDependenciesRef.current) {
+    currentDependenciesRef.current = JSON.stringify(dependencies);
+    effect();
+  }
+}

package/src/components/icon/IconFont.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { createFromIconfontCN } from '@ant-design/icons'
+
+const IconFontCN = createFromIconfontCN({
+  scriptUrl: 'https://at.alicdn.com/t/c/font_5072483_pswdqptbsip.js'
+})
+
+export type IconFontProps = {
+  type: string
+  className?: string
+}
+
+export const IconFont: React.FC<IconFontProps> = ({ type, className = '' }) => {
+  return <IconFontCN type={type} className={className} />
+}
+

package/src/components/index.ts

@@ -0,0 +1,29 @@
+import PageCanvas from "./layout/PageCanvas";
+import PageDesigner from "./PageDesigner";
+
+import { PageSchema } from "./typing";
+
+import { plugins, PropEditorProps } from "./plugins/@antd";
+
+import DropContainer from "./dnd/DropContainer";
+
+import { DesignerContext } from "./context/DesignerContext";
+
+import { EnvContext } from "./context/EnvContext";
+
+import { handleCallback } from "./utils";
+
+import { PluginType } from "./typing";
+
+export {
+  PageCanvas,
+  PageDesigner,
+  PageSchema,
+  DropContainer,
+  DesignerContext,
+  EnvContext,
+  plugins,
+  PropEditorProps,
+  PluginType,
+  handleCallback,
+};