bi-sdk-react 0.0.4 → 0.0.5

package/src/components/panel/PropertiesPanel.tsx

@@ -1,11 +1,28 @@
+import {
+  CloseOutlined,
+  DeleteOutlined,
+  InboxOutlined,
+  SelectOutlined,
+} from "@ant-design/icons";
+import Editor from "@monaco-editor/react";
+import {
+  Button,
+  Divider,
+  Drawer,
+  Form,
+  Input,
+  Popover,
+  Radio,
+  Select,
+  Space,
+  Upload,
+} from "antd";
 import React, { useContext, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
-import { PaneHeader } from "./PaneHeader";
-import { Radio, Divider, Form, Input, Upload, Button, Select } from "antd";
-import Editor from "@monaco-editor/react";
-import { InboxOutlined, DeleteOutlined } from "@ant-design/icons";
-import { IconFont } from "../icon/IconFont";
 import { DesignerContext } from "../context/DesignerContext";
+import { IconFont } from "../icon/IconFont";
+import { PaneHeader } from "./PaneHeader";
+import { DataSetOutput, SchemaItemType, FieldType } from "../typing";
 
 const Root = styled.div`
   display: flex;
@@ -19,12 +36,12 @@ const Root = styled.div`
     padding: 12px;
     overflow: auto;
 
+    .ant-form-item {
+      margin-bottom: 8px;
+    }
+
     .ant-form-item-label {
       text-align: left;
-
-      label {
-        display: inline;
-      }
     }
 
     .ant-form-item-control-input,
@@ -32,6 +49,10 @@ const Root = styled.div`
       text-align: end;
       justify-content: flex-end;
     }
+
+    .ant-divider {
+      margin: 0;
+    }
   }
 `;
 
@@ -51,8 +72,17 @@ const computeItems = (rootItems: any[] = []) => {
   return items;
 };
 
-export const PropertiesPanel: React.FC = () => {
-  const { plugins, selectedItem, updateSelectedItem: onUpdateSelectedItem, schema, setSchema } = useContext(DesignerContext);
+export const PropertiesPanel: React.FC<{
+  datasourceEnable?: boolean;
+}> = ({ datasourceEnable = true }) => {
+  const {
+    plugins,
+    selectedItem,
+    updateSelectedItem: onUpdateSelectedItem,
+    schema,
+    setSchema,
+    datasetSelector,
+  } = useContext(DesignerContext);
   const refCustomDatasource = useRef<any>(null);
   const [selectedTab, setSelectedTab] = useState<"1" | "2">("1");
   const items = useMemo(() => computeItems(schema?.items || []), [schema]);
@@ -76,9 +106,11 @@ export const PropertiesPanel: React.FC = () => {
       onUpdateSelectedItem({ ...selectedItem, props: next });
   };
   const [reportForm, setReportForm] = useState<any>(schema?.info || {});
-  const [datasource, setDatasource] = useState<any>(
+  const [datasource, setDatasource] = useState<SchemaItemType["datasource"]>(
     selectedItem?.datasource || {}
   );
+  const [datasetSelectorOpen, setDatasetSelectorOpen] =
+    useState<boolean>(false);
   const onUpdateReportProps = (next: any) => {
     setSchema({ ...schema, info: next });
   };
@@ -126,7 +158,11 @@ export const PropertiesPanel: React.FC = () => {
       />
       <div className="body">
         {activeTab === "1" && (
-          <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+          <Form
+            labelCol={{ span: 24 }}
+            wrapperCol={{ span: 24 }}
+            className="ant-form-compact"
+          >
             <Form.Item label="页面名称">
               <Input
                 size="small"
@@ -194,7 +230,11 @@ export const PropertiesPanel: React.FC = () => {
         {activeTab === "2" && (
           <>
             <Divider>基础属性</Divider>
-            <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+            <Form
+              labelCol={{ span: 24 }}
+              wrapperCol={{ span: 24 }}
+              className="ant-form-compact"
+            >
               <Form.Item
                 label="组件标识"
                 labelCol={{ span: 5 }}
@@ -231,7 +271,7 @@ export const PropertiesPanel: React.FC = () => {
             </Form>
             {selectedItem?.datasource && <Divider>数据源</Divider>}
             {selectedItem?.datasource && (
-              <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+              <Form className="ant-form-compact">
                 <Form.Item
                   label={
                     <div
@@ -242,13 +282,125 @@ export const PropertiesPanel: React.FC = () => {
                       }}
                     >
                       数据来源
-                      <Radio.Group
+                    </div>
+                  }
+                  labelCol={{ span: 5 }}
+                  wrapperCol={{ span: 19 }}
+                  colon={false}
+                >
+                  <Radio.Group
+                    size="small"
+                    value={datasource?.source}
+                    onChange={(e) => {
+                      const next = {
+                        ...(datasource || {}),
+                        source: e.target.value,
+                      };
+                      setDatasource(next);
+                      onUpdateSelectedItem &&
+                        onUpdateSelectedItem({
+                          ...selectedItem,
+                          datasource: next,
+                        });
+                    }}
+                  >
+                    {!!datasetSelector && (
+                      <Radio.Button value="dataset">数据集</Radio.Button>
+                    )}
+                    {datasourceEnable && (
+                      <Radio.Button value="define">数据源</Radio.Button>
+                    )}
+                    <Radio.Button value="custom">自定义</Radio.Button>
+                  </Radio.Group>
+                </Form.Item>
+                {datasource?.source === "dataset" && datasetSelector && (
+                  <>
+                    <Form.Item
+                      label="数据集"
+                      labelCol={{ span: 5 }}
+                      wrapperCol={{ span: 19 }}
+                    >
+                      <Space.Compact>
+                        <Input
+                          size="small"
+                          readOnly={true}
+                          value={datasource?.dataset?.name || ""}
+                          style={{ width: 90 }}
+                        />
+                        {!!datasource?.dataset?.id?.length && datasource?.dataset?.output && (
+                          <Popover
+                            title="输出类型"
+                            placement="left"
+                            content={
+                              <div
+                                style={{
+                                  padding: "0 12px",
+                                  maxWidth: 500,
+                                  maxHeight: 500,
+                                  overflow: "auto",
+                                }}
+                              >
+                                <OutputTypePrint
+                                  output={datasource.dataset.output}
+                                />
+                              </div>
+                            }
+                          >
+                            <Button
+                              size="small"
+                              style={{
+                                color: "var(--ant-color-text-tertiary)",
+                              }}
+                              title="查看输出类型"
+                            >
+                              <IconFont type="icon-json" />
+                            </Button>
+                          </Popover>
+                        )}
+                        {!!datasource?.dataset?.id?.length && (
+                          <Button
+                            size="small"
+                            icon={<CloseOutlined />}
+                            onClick={() => {
+                              const next = {
+                                ...(datasource || {}),
+                                dataset: {
+                                  id: "",
+                                  name: "",
+                                  output: { fields: [] },
+                                },
+                              };
+                              setDatasource(next);
+                              onUpdateSelectedItem &&
+                                onUpdateSelectedItem({
+                                  ...selectedItem,
+                                  datasource: next,
+                                });
+                            }}
+                            title="删除数据集"
+                            style={{ color: "var(--ant-color-text-tertiary)" }}
+                          />
+                        )}
+                        <Button
+                          size="small"
+                          icon={<SelectOutlined />}
+                          title="选择数据集"
+                          onClick={() => setDatasetSelectorOpen(true)}
+                        />
+                      </Space.Compact>
+                    </Form.Item>
+                  </>
+                )}
+                {datasource?.source === "define" && (
+                  <>
+                    <Form.Item label="数据源" layout="vertical">
+                      <Select
                         size="small"
-                        value={datasource?.source}
-                        onChange={(e) => {
+                        value={datasource?.datasourceId}
+                        onChange={(v) => {
                           const next = {
                             ...(datasource || {}),
-                            source: e.target.value,
+                            datasourceId: v,
                           };
                           setDatasource(next);
                           onUpdateSelectedItem &&
@@ -258,22 +410,83 @@ export const PropertiesPanel: React.FC = () => {
                             });
                         }}
                       >
-                        <Radio.Button value="define">已定义数据源</Radio.Button>
-                        <Radio.Button value="custom">自定义</Radio.Button>
-                      </Radio.Group>
-                    </div>
-                  }
-                >
-                  {datasource?.source === "define" && (
-                    <>
-                      <Form.Item label="数据源" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
-                        <Select
-                          size="small"
-                          value={datasource?.datasourceId}
+                        {(schema?.datasources || []).map((item: any) => (
+                          <Select.Option key={item.id} value={item.id}>
+                            {item.name}
+                          </Select.Option>
+                        ))}
+                      </Select>
+                    </Form.Item>
+                    <Form.Item
+                      label="数据处理脚本"
+                      labelCol={{ span: 24 }}
+                      wrapperCol={{ span: 24 }}
+                    >
+                      <Select
+                        size="small"
+                        value={datasource?.scriptId}
+                        onChange={(v) => {
+                          const next = { ...(datasource || {}), scriptId: v };
+                          setDatasource(next);
+                          onUpdateSelectedItem &&
+                            onUpdateSelectedItem({
+                              ...selectedItem,
+                              datasource: next,
+                            });
+                        }}
+                      >
+                        {(schema?.scripts || []).map((item: any) => (
+                          <Select.Option key={item.id} value={item.id}>
+                            {item.name}
+                          </Select.Option>
+                        ))}
+                      </Select>
+                    </Form.Item>
+                  </>
+                )}
+                {datasource?.source === "custom" && (
+                  <>
+                    <Form.Item
+                      label={
+                        <>
+                          自定义
+                          <a
+                            onClick={() => {
+                              /* formatting via Monaco action not exposed here */
+                              const editor = (
+                                refCustomDatasource.current as any
+                              )?.editor;
+                              editor
+                                ?.getAction("editor.action.formatDocument")
+                                ?.run();
+                            }}
+                          >
+                            <IconFont type="icon-formate" /> 格式化
+                          </a>
+                        </>
+                      }
+                      labelCol={{ span: 24 }}
+                      wrapperCol={{ span: 24 }}
+                      className="ant-form-item-label-space"
+                    >
+                      <div
+                        style={{
+                          border: `1px solid var(--ant-color-border)`,
+                          borderRadius: "var(--ant-border-radius)",
+                          padding: 1,
+                        }}
+                      >
+                        <Editor
+                          height="200px"
+                          onMount={(editor) => {
+                            (refCustomDatasource.current as any) = { editor };
+                          }}
+                          defaultLanguage="json"
+                          value={datasource?.custom || ""}
                           onChange={(v) => {
                             const next = {
                               ...(datasource || {}),
-                              datasourceId: v,
+                              custom: v || "",
                             };
                             setDatasource(next);
                             onUpdateSelectedItem &&
@@ -282,100 +495,16 @@ export const PropertiesPanel: React.FC = () => {
                                 datasource: next,
                               });
                           }}
-                        >
-                          {(schema?.datasources || []).map((item: any) => (
-                            <Select.Option key={item.id} value={item.id}>
-                              {item.name}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                      <Form.Item label="数据处理脚本" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
-                        <Select
-                          size="small"
-                          value={datasource?.scriptId}
-                          onChange={(v) => {
-                            const next = { ...(datasource || {}), scriptId: v };
-                            setDatasource(next);
-                            onUpdateSelectedItem &&
-                              onUpdateSelectedItem({
-                                ...selectedItem,
-                                datasource: next,
-                              });
-                          }}
-                        >
-                          {(schema?.scripts || []).map((item: any) => (
-                            <Select.Option key={item.id} value={item.id}>
-                              {item.name}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                    </>
-                  )}
-                  {datasource?.source === "custom" && (
-                    <>
-                      <Form.Item
-                        label={
-                          <div
-                            style={{
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "space-between",
-                            }}
-                          >
-                            自定义
-                            <a
-                              onClick={() => {
-                                /* formatting via Monaco action not exposed here */
-                                const editor = (refCustomDatasource.current as any)?.editor;
-                                editor?.getAction("editor.action.formatDocument")?.run();
-                              }}
-                            >
-                              <IconFont type="icon-formate" /> 格式化
-                            </a>
-                          </div>
-                        }
-                        labelCol={{ span: 24 }}
-                        wrapperCol={{ span: 24 }}
-                      >
-                        <div
-                          style={{
-                            border: `1px solid var(--ant-color-border)`,
-                            borderRadius: "var(--ant-border-radius)",
-                            padding: 1,
+                          options={{
+                            minimap: { enabled: false },
+                            scrollBeyondLastLine: false,
+                            tabSize: 2,
                           }}
-                        >
-                          <Editor
-                            height="200px"
-                            onMount={(editor) => {
-                              (refCustomDatasource.current as any) = { editor };
-                            }}
-                            defaultLanguage="json"
-                            value={datasource?.custom}
-                            onChange={(v) => {
-                              const next = {
-                                ...(datasource || {}),
-                                custom: v || "",
-                              };
-                              setDatasource(next);
-                              onUpdateSelectedItem &&
-                                onUpdateSelectedItem({
-                                  ...selectedItem,
-                                  datasource: next,
-                                });
-                            }}
-                            options={{
-                              minimap: { enabled: false },
-                              scrollBeyondLastLine: false,
-                              tabSize: 2,
-                            }}
-                          />
-                        </div>
-                      </Form.Item>
-                    </>
-                  )}
-                </Form.Item>
+                        />
+                      </div>
+                    </Form.Item>
+                  </>
+                )}
               </Form>
             )}
             {FormComp && <Divider>特有属性</Divider>}
@@ -389,6 +518,84 @@ export const PropertiesPanel: React.FC = () => {
           </>
         )}
       </div>
+
+      {!!datasetSelector && (
+        <Drawer
+          title="选择数据集"
+          size={800}
+          open={datasetSelectorOpen}
+          onClose={() => {
+            setDatasetSelectorOpen(false);
+          }}
+        >
+          {datasetSelector((dataset) => {
+            datasource!.dataset = dataset;
+            setDatasetSelectorOpen(false);
+          })}
+        </Drawer>
+      )}
     </Root>
   );
 };
+
+const OutputTypePrint: React.FC<{
+  output: DataSetOutput;
+}> = ({ output }) => {
+  const renderFields = (fields: DataSetOutput["fields"], indent = 0) => {
+    if (!fields || fields.length === 0) return <span>{"{}"}</span>;
+
+    return (
+      <>
+        {"{"}
+        {fields.map((field, index) => (
+          <div key={field.key || index} style={{ paddingLeft: "1em" }}>
+            <span style={{ color: "var(--ant-color-primary)" }}>
+              {field.key}
+            </span>
+            :{" "}
+            {field.type === FieldType.ARRAY ? (
+              <>
+                Array{"<"}
+                {field.schema ? (
+                  renderFields(field.schema.fields, indent + 1)
+                ) : (
+                  <span>any</span>
+                )}
+                {">"}
+              </>
+            ) : field.type === FieldType.OBJECT ? (
+              field.schema ? (
+                renderFields(field.schema.fields, indent + 1)
+              ) : (
+                <span>{"{}"}</span>
+              )
+            ) : (
+              <span style={{ color: "var(--ant-color-success)" }}>
+                {(field.type || "string").toLowerCase()}
+              </span>
+            )}
+            {index < fields.length - 1 ? "," : ""}
+          </div>
+        ))}
+        {"}"}
+      </>
+    );
+  };
+
+  return (
+    <pre
+      style={{
+        margin: "8px 0",
+        padding: "8px",
+        background: "var(--ant-color-fill-alter)",
+        borderRadius: "var(--ant-border-radius-sm)",
+        fontSize: "12px",
+        fontFamily: "monospace",
+        overflowX: "auto",
+        border: "1px solid var(--ant-color-border-secondary)",
+      }}
+    >
+      {renderFields(output.fields)}
+    </pre>
+  );
+};

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

@@ -53,15 +53,19 @@ export const TextPlugin: PluginType = {
   component: TextRender,
   formComponent: TextProps,
   defaultOptions: {
-    style: {
-      fontSize: 14,
-      color: "#444444",
-      fontFamily: "'宋体', 'SimSun', serif",
-      fontWeight: "normal",
-      fontStyle: "normal",
-      textDecoration: "none",
+    style: {},
+    props: {
+      text: "文本内容",
+      classNames: [],
+      customStyle: {
+        fontSize: 14,
+        color: "#444444",
+        fontFamily: "'宋体', 'SimSun', serif",
+        fontWeight: "normal",
+        fontStyle: "normal",
+        textDecoration: "none",
+      },
     },
-    props: { text: "文本内容" },
   },
 };
 

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

@@ -1,35 +1,65 @@
-import React, { useRef } from 'react'
-import { Form } from 'antd'
-import Editor from '@monaco-editor/react'
-import type { PropEditorProps } from './types'
+import React, { useRef } from "react";
+import { Form } from "antd";
+import Editor from "@monaco-editor/react";
+import type { PropEditorProps } from "./types";
+import { IconFont } from "../../../icon/IconFont";
 
-export type EchartsModel = { script: string }
+export type EchartsModel = { script: string };
 
-export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({ model, onChange }) => {
-  const ref = useRef<any>(null)
-  const setScript = (v?: string) => onChange && onChange({ ...model, script: v || '' })
+export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
+  model,
+  onChange,
+}) => {
+  const ref = useRef<any>(null);
+  const setScript = (v?: string) =>
+    onChange && onChange({ ...model, script: v || "" });
   const format = () => {
     // Monaco-react does not expose format directly; relying on editor action
-    const editor = (ref.current as any)?.editor
-    editor?.getAction('editor.action.formatDocument')?.run()
-  }
+    const editor = (ref.current as any)?.editor;
+    editor?.getAction("editor.action.formatDocument")?.run();
+  };
   return (
-    <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
-      <Form.Item label={<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>Echarts 渲染脚本 <a onClick={format}>格式化</a></div>}>
-        <div style={{ border: '1px solid #d9d9d9', borderRadius: 4, textAlign: 'left' }}>
-          <div style={{ color: '#0000ff', fontSize: 14, padding: '0 50px' }}>function getOptions(data) {'{'} </div>
+    <Form layout="vertical">
+      <Form.Item
+        label={
+          <>
+            Echarts 渲染脚本{" "}
+            <a onClick={format}>
+              <IconFont type="icon-formate" /> 格式化
+            </a>
+          </>
+        }
+        className="ant-form-item-label-space"
+      >
+        <div
+          style={{
+            border: "1px solid #d9d9d9",
+            borderRadius: 4,
+            textAlign: "left",
+          }}
+        >
+          <div style={{ color: "#0000ff", fontSize: 14, padding: "0 50px" }}>
+            function getOptions(data) {"{"}{" "}
+          </div>
           <Editor
-            onMount={(editor) => { (ref.current as any) = { editor } }}
+            onMount={(editor) => {
+              (ref.current as any) = { editor };
+            }}
             height="400px"
             defaultLanguage="javascript"
             value={model.script}
-            onChange={(v) => setScript(v || '')}
-            options={{ minimap: { enabled: false }, scrollBeyondLastLine: false, tabSize: 2 }}
+            onChange={(v) => setScript(v || "")}
+            options={{
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              tabSize: 2,
+            }}
           />
-          <div style={{ color: '#0000ff', fontSize: 14, padding: '0 50px' }}>{'}'}</div>
+          <div style={{ color: "#0000ff", fontSize: 14, padding: "0 50px" }}>
+            {"}"}
+          </div>
         </div>
       </Form.Item>
     </Form>
-  )
-}
-
+  );
+};