bi-sdk-react 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bi-sdk-react",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "type": "module",
   "main": "dist/umd/js/bi-sdk.umd.min.js",

package/src/components/PageDesigner.tsx

@@ -2,6 +2,7 @@ import {
   DesktopOutlined,
   EyeInvisibleOutlined,
   EyeOutlined,
+  ImportOutlined,
   MobileOutlined,
   RedoOutlined,
   SaveOutlined,
@@ -10,13 +11,12 @@ import {
   ZoomInOutlined,
   ZoomOutOutlined,
 } from "@ant-design/icons";
-import { Button, Divider, Radio, Space, Tooltip } from "antd";
+import { Button, Divider, Modal, Radio, Space, Tooltip } from "antd";
 import React, {
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 import styled from "styled-components";
 import { IconFont } from "./icon/IconFont";
@@ -32,10 +32,11 @@ import { PropertiesPanel } from "./panel/PropertiesPanel";
 import { ScriptPanel } from "./panel/ScriptPanel";
 import { VariablesPanel } from "./panel/VariablesPanel";
 
-import { PageSchema, PluginType } from "./typing";
+import { Editor } from "@monaco-editor/react";
 import { DesignerProvider } from "./context/DesignerContext";
 import { useDeepCompareEffect } from "./hooks/useDeepCompareEffect";
 import "./styles.css";
+import { PageSchema, PluginType } from "./typing";
 
 export type PageDesignerProps = {
   agentList?: any[];
@@ -135,6 +136,46 @@ const Container = styled.div`
   }
 `;
 
+const ImportModal: React.FC<{
+  open?: boolean;
+  onCancel?: () => void;
+  onOk?: (schema: PageSchema) => void;
+}> = ({ open, onCancel, onOk }) => {
+  const [importSchema, setImportSchema] = useState<string>(
+    JSON.stringify({
+      info: {},
+      datasources: [],
+      scripts: [],
+      variables: [],
+      items: [],
+    })
+  );
+  return (
+    <Modal
+      title="导入页面"
+      open={open}
+      width={800}
+      onCancel={onCancel}
+      onOk={() => onOk?.(JSON.parse(importSchema))}
+      okText="导入"
+      cancelText="取消"
+      styles={{ body: { height: "calc(100vh - 250px)", overflow: "auto" } }}
+    >
+      <div className="body" style={{ flex: "1 1 auto", display: "flex", height: "100%" }}>
+        <Editor
+          height="100%"
+          defaultLanguage="json"
+          value={importSchema}
+          options={{
+            minimap: { enabled: false },
+          }}
+          onChange={(v) => setImportSchema(v || "")}
+        />
+      </div>
+    </Modal>
+  );
+};
+
 export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
   ({ agentList = [], plugins = [], headerExtra }, ref) => {
     const pageCanvasRef = useRef<any>(null);
@@ -162,6 +203,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       items: [],
     });
     const [designable, setDesignable] = useState(true);
+    const [importModalOpen, setImportModalOpen] = useState(false);
     const containerStyle = useMemo(() => {
       const left = showLeft ? "250px" : "";
       const right = showRight ? "400px" : "";
@@ -252,6 +294,15 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       setTimeout(() => pageCanvasRef.current?.handleResize?.(), 0);
     };
 
+    const handleImportClick = () => {
+      setImportModalOpen(true);
+    };
+
+    const handleImportOk = (s: PageSchema) => {
+      setImportModalOpen(false);
+      setSchema(s);
+    };
+
     return (
       <DesignerProvider
         designable={designable}
@@ -300,6 +351,15 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                   <RedoOutlined />
                 </a>
               </Tooltip>
+              <Divider orientation="vertical" />
+              <Tooltip title="导入JSON">
+                <a
+                  className={`toolbar ${future.length > 0 ? "active" : ""}`}
+                  onClick={handleImportClick}
+                >
+                  <ImportOutlined />
+                </a>
+              </Tooltip>
             </Space>
             <Space>
               <Tooltip title="缩小">
@@ -501,6 +561,11 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
             </div>
           </Container>
         </div>
+        <ImportModal
+          open={importModalOpen}
+          onOk={handleImportOk}
+          onCancel={() => setImportModalOpen(false)}
+        />
       </DesignerProvider>
     );
   }

package/src/components/panel/ChatInput.tsx

@@ -1,3 +1,17 @@
+import {
+  DeleteOutlined,
+  PaperClipOutlined,
+  SendOutlined,
+} from "@ant-design/icons";
+import {
+  Button,
+  Dropdown,
+  Input,
+  Switch,
+  Tooltip,
+  Typography,
+  Upload,
+} from "antd";
 import React, {
   useEffect,
   useImperativeHandle,
@@ -6,9 +20,8 @@ import React, {
   useState,
 } from "react";
 import styled from "styled-components";
-import { Input, Button, Space, Tooltip, Dropdown, Switch, Upload } from "antd";
-import { PaperClipOutlined, SendOutlined } from "@ant-design/icons";
 import * as XLSX from "xlsx";
+import { IconFont } from "../icon/IconFont";
 
 export type ChatInputProps = {
   value?: string;
@@ -24,7 +37,7 @@ export type ChatInputProps = {
   onSubmit?: (data: {
     demand: string;
     title: string;
-    agentId?: string | number;
+    agentIds?: (string | number)[];
     csvData: Record<string, string>;
   }) => void;
   onUpdateTitle?: (title: string) => void;
@@ -93,6 +106,11 @@ const Wrapper = styled.div`
     background-color: #fafafa;
     font-size: 12px;
     position: relative;
+
+    .anticon {
+      font-size: 36px;
+      color: var(--ant-green-8);
+    }
   }
   .attachment-card .name {
     max-width: 80px;
@@ -108,9 +126,19 @@ const Wrapper = styled.div`
     position: absolute;
     top: 4px;
     right: 2px;
+
+    .anticon {
+      font-size: 12px;
+      color: var(--ant-color-text-tertiary);
+    }
   }
   .attachment-card .remove:hover {
     color: #666;
+
+    .anticon {
+      font-size: 12px;
+      color: var(--ant-color-text-secondary);
+    }
   }
   .agent-info {
     box-sizing: border-box;
@@ -120,11 +148,17 @@ const Wrapper = styled.div`
     border-bottom: none;
     background-color: #eff1f9;
     font-size: 14px;
-    color: #555;
+    color: var(--ant-color-text-label);
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    flex-wrap: wrap;
     user-select: none;
+    gap: 8px;
+
+    a {
+      color: var(--ant-color-text-disabled);
+      margin-left: 4px;
+    }
   }
   .attachment-bar + .agent-info {
     border-radius: 0;
@@ -249,7 +283,7 @@ const Wrapper = styled.div`
     width: 50px;
     height: 26px;
     color: #fff;
-    font-size: 22px;
+    font-size: 14px;
     background-color: rgb(184, 184, 191);
     border: unset;
     border-radius: 14px;
@@ -257,7 +291,7 @@ const Wrapper = styled.div`
     cursor: pointer;
   }
   .send-btn.send-btn-active {
-    background-color: var(--chat-blue);
+    background-color: var(--ant-color-primary);
   }
 `;
 
@@ -289,13 +323,12 @@ export const ChatInput = React.forwardRef<
   ) => {
     const inputRef = useRef<any>(null);
     const [localTitle, setLocalTitle] = useState(title || "");
-    const [localAgentId, setLocalAgentId] = useState<string | number | null>(
-      agentId || null
-    );
-    const [selectedAgent, setSelectedAgent] = useState<{
-      id: string | number;
-      name: string;
-    } | null>(null);
+    const [selectedAgent, setSelectedAgent] = useState<
+      {
+        id: string | number;
+        name: string;
+      }[]
+    >([]);
     const [localValue, setLocalValue] = useState(value || "");
     const [lastSubmitAt, setLastSubmitAt] = useState(0);
     const minIntervalMs = 400;
@@ -316,21 +349,17 @@ export const ChatInput = React.forwardRef<
       onInput && onInput(localValue);
     }, [localValue]);
     useEffect(() => setLocalTitle(title || ""), [title]);
-    useEffect(() => {
-      setLocalAgentId(agentId || null);
-      setSelectedAgent(
-        agentId ? agentList.find((s) => s.id === agentId) || null : null
-      );
-    }, [agentId, agentList]);
+    // useEffect(() => {
+    //   setSelectedAgent(
+    //     agentId ? agentList.find((s) => s.id === agentId) || [] : []
+    //   );
+    // }, [agentId, agentList]);
     useEffect(
       () => setLocalAttachments(Array.isArray(attachments) ? attachments : []),
       [attachments]
     );
     const canSubmit = !!(localValue && localValue.trim());
-    const agent = useMemo(() => {
-      if (!localAgentId) return null;
-      return agentList.find((it) => it.id === localAgentId) || null;
-    }, [localAgentId, agentList]);
+
     const onTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const v = e.target.value;
       setLocalTitle(v);
@@ -338,14 +367,12 @@ export const ChatInput = React.forwardRef<
     };
     const onAgentSelect = (item: { id: string | number; name: string }) => {
       const id = item.id || null;
-      setLocalAgentId(id);
       onUpdateAgentId && onUpdateAgentId(id);
-      setSelectedAgent(item);
+      setSelectedAgent((prev) => [...prev, item]);
     };
-    const clearAgent = () => {
-      setLocalAgentId(null);
+    const onRemoveAgent = (index: number) => {
       onUpdateAgentId && onUpdateAgentId(null);
-      setSelectedAgent(null);
+      setSelectedAgent((prev) => prev.filter((_, i) => i !== index));
     };
     const onKeydown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key === "Enter") {
@@ -415,7 +442,7 @@ export const ChatInput = React.forwardRef<
       const data = {
         demand: text,
         title: showTitle ? localTitle : "",
-        agentId: localAgentId || undefined,
+        agentIds: selectedAgent.map((it) => it.id),
         csvData: localAttachments.reduce(
           (acc, a) => ({ ...acc, [a.name]: a.csvBySheet }),
           {}
@@ -442,31 +469,34 @@ export const ChatInput = React.forwardRef<
             {localAttachments.length > 0 && (
               <div className="attachment-bar">
                 {localAttachments.map((a) => (
-                  <Tooltip
-                    key={a.uid}
-                    title={a.name}
-                    className="attachment-card"
-                  >
-                    <svg style={{ width: 25, height: 25 }} viewBox="0 0 24 24">
-                      <rect x="3" y="3" width="18" height="18" fill="#1f6f43" />
-                    </svg>
-                    <span className="name">{a.name}</span>
+                  <div className="attachment-card">
+                    <IconFont type="icon-excel" />
+                    <Typography.Text
+                      className="name"
+                      ellipsis={{ tooltip: a.name }}
+                    >
+                      {a.name}
+                    </Typography.Text>
                     <a
                       className="remove"
                       onClick={() => removeAttachment(a.uid)}
                     >
-                      ×
+                      <DeleteOutlined />
                     </a>
-                  </Tooltip>
+                  </div>
                 ))}
               </div>
             )}
-            {selectedAgent && (
+            {selectedAgent.length > 0 && (
               <div className="agent-info">
-                <span className="name">@ {selectedAgent.name}</span>
-                <a className="remove" onClick={clearAgent}>
-                  ×
-                </a>
+                {selectedAgent.map((item, index) => (
+                  <div key={String(item.id)}>
+                    <span className="name">@ {item.name}</span>
+                    <a className="remove" onClick={() => onRemoveAgent(index)}>
+                      ×
+                    </a>
+                  </div>
+                ))}
               </div>
             )}
             {showTitle && (

package/src/components/panel/PropertiesPanel.tsx

@@ -197,8 +197,8 @@ export const PropertiesPanel: React.FC = () => {
             <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
               <Form.Item
                 label="组件标识"
-                labelCol={{ span: 12 }}
-                wrapperCol={{ span: 12 }}
+                labelCol={{ span: 5 }}
+                wrapperCol={{ span: 19 }}
               >
                 {selectedItem?.id || ""}
               </Form.Item>

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

@@ -184,7 +184,6 @@ export const HtmlPlugin: PluginType = {
       custom: `{"name": "Confucius"}`,
     },
     props: {
-      dataSource: { name: "Confucius" },
       template: `<div>{{name}}, welcome to the world of programming.</div>`,
     },
   },

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

@@ -84,7 +84,7 @@ export const CapsuleProps: React.FC<PropEditorProps<CapsuleModel>> = ({
           <Radio.Button value="large">大</Radio.Button>
         </Radio.Group>
       </Form.Item>
-      <Form.Item>
+      <Form.Item labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
         <Table
           size="small"
           dataSource={model.options}

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

@@ -1,75 +1,123 @@
-import React from 'react'
-import { Form, Input, Radio, InputNumber, Table, Button, Space, Switch } from 'antd'
-import type { PropEditorProps } from './types'
-import { DeleteOutlined } from '@ant-design/icons';
+import React from "react";
+import {
+  Form,
+  Input,
+  Radio,
+  InputNumber,
+  Table,
+  Button,
+  Space,
+  Switch,
+} from "antd";
+import type { PropEditorProps } from "./types";
+import { DeleteOutlined } from "@ant-design/icons";
 
-export type CheckboxOption = { label: string; value: any }
+export type CheckboxOption = { label: string; value: any };
 export type CheckboxModel = {
-  var?: string
-  layout?: 'horizontal' | 'vertical' | 'grid'
-  lineNumber?: number
-  options: CheckboxOption[]
-}
+  var?: string;
+  layout?: "horizontal" | "vertical" | "grid";
+  lineNumber?: number;
+  options: CheckboxOption[];
+};
 
-export const CheckboxProps: React.FC<PropEditorProps<CheckboxModel>> = ({ model, onChange }) => {
-  const trigger = (key: keyof CheckboxModel, value: any) => onChange && onChange({ ...model, [key]: value })
+export const CheckboxProps: React.FC<PropEditorProps<CheckboxModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof CheckboxModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
   const setOption = (index: number, key: keyof CheckboxOption, value: any) => {
-    const options = [...(model.options || [])]
-    options[index] = { ...options[index], [key]: value }
-    trigger('options', options)
-  }
+    const options = [...(model.options || [])];
+    options[index] = { ...options[index], [key]: value };
+    trigger("options", options);
+  };
   const removeOption = (index: number) => {
-    const options = [...(model.options || [])]
-    options.splice(index, 1)
-    trigger('options', options)
-  }
+    const options = [...(model.options || [])];
+    options.splice(index, 1);
+    trigger("options", options);
+  };
   const addOption = () => {
-    trigger('options', [...(model.options || []), { label: '', value: '' }])
-  }
+    trigger("options", [...(model.options || []), { label: "", value: "" }]);
+  };
   const columns = [
     {
-      title: '选项标签',
-      dataIndex: 'label',
-      render: (_: any, r: CheckboxOption, i: number) => <Input size="small" value={r.label} onChange={e => setOption(i, 'label', e.target.value)} />
+      title: "选项标签",
+      dataIndex: "label",
+      render: (_: any, r: CheckboxOption, i: number) => (
+        <Input
+          size="small"
+          value={r.label}
+          onChange={(e) => setOption(i, "label", e.target.value)}
+        />
+      ),
     },
     {
-      title: '选项值',
-      dataIndex: 'value',
-      render: (_: any, r: CheckboxOption, i: number) => <Input size="small" value={r.value} onChange={e => setOption(i, 'value', e.target.value)} />
+      title: "选项值",
+      dataIndex: "value",
+      render: (_: any, r: CheckboxOption, i: number) => (
+        <Input
+          size="small"
+          value={r.value}
+          onChange={(e) => setOption(i, "value", e.target.value)}
+        />
+      ),
     },
     {
-      title: '操作',
+      title: "操作",
       render: (_: any, r: CheckboxOption, i: number) => (
         <Space>
           <Button danger size="small" onClick={() => removeOption(i)}>
             <DeleteOutlined />
           </Button>
         </Space>
-      )
-    }
-  ]
+      ),
+    },
+  ];
   return (
     <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
       <Form.Item label="变量名">
-        <Input size="small" value={model.var} onChange={e => trigger('var', e.target.value)} placeholder="请输入变量名" />
+        <Input
+          size="small"
+          value={model.var}
+          onChange={(e) => trigger("var", e.target.value)}
+          placeholder="请输入变量名"
+        />
       </Form.Item>
       <Form.Item label="布局">
-        <Radio.Group size="small" value={model.layout} onChange={e => trigger('layout', e.target.value)}>
+        <Radio.Group
+          size="small"
+          value={model.layout}
+          onChange={(e) => trigger("layout", e.target.value)}
+        >
           <Radio.Button value="horizontal">水平</Radio.Button>
           <Radio.Button value="vertical">垂直</Radio.Button>
           <Radio.Button value="grid">网格</Radio.Button>
         </Radio.Group>
       </Form.Item>
-      {model.layout === 'grid' && (
+      {model.layout === "grid" && (
         <Form.Item label="网格行数">
-          <InputNumber size="small" value={model.lineNumber} onChange={v => trigger('lineNumber', v)} min={1} max={10} />
+          <InputNumber
+            size="small"
+            value={model.lineNumber}
+            onChange={(v) => trigger("lineNumber", v)}
+            min={1}
+            max={10}
+          />
         </Form.Item>
       )}
-      <Form.Item>
-        <Table size="small" dataSource={model.options} columns={columns as any} pagination={false} rowKey={(_, i) => String(i)} bordered />
-        <Button size="small" block onClick={addOption}>添加选项</Button>
+      <Form.Item labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+        <Table
+          size="small"
+          dataSource={model.options}
+          columns={columns as any}
+          pagination={false}
+          rowKey={(_, i) => String(i)}
+          bordered
+        />
+        <Button size="small" block onClick={addOption}>
+          添加选项
+        </Button>
       </Form.Item>
     </Form>
-  )
-}
-
+  );
+};