bi-sdk-react 0.0.9 → 0.0.11

package/package.json

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

package/src/components/PageDesigner.tsx

@@ -84,7 +84,7 @@ const Container = styled.div`
     box-sizing: border-box;
   }
   & > div {
-    height: calc(100vh - 40px);
+    height: calc(100vh - 49px);
     display: flex;
     flex-direction: column;
   }
@@ -144,7 +144,7 @@ const Container = styled.div`
     flex-direction: column;
     gap: 12px;
     padding: 12px;
-    height: calc(100% - 40px);
+    height: calc(100% - 49px);
   }
   .left-pane-tabs > label,
   .right-pane-tabs > label {
@@ -167,6 +167,29 @@ const Container = styled.div`
     border-right: solid 2px #1890ff;
     background: linear-gradient(to left, #1890ff1a, #ffffff);
   }
+
+  .beautified_scrollbar {
+    overflow: auto;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+    &:hover {
+      scrollbar-width: thin;
+    }
+    &:hover::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    &:hover::-webkit-scrollbar-thumb {
+      background: var(--ant-color-border);
+      border-radius: 4px;
+    }
+    &:hover::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
 `;
 
 const ImportModal: React.FC<{
@@ -181,7 +204,7 @@ const ImportModal: React.FC<{
       scripts: [],
       variables: [],
       items: [],
-    })
+    }),
   );
   return (
     <Modal
@@ -227,7 +250,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       onSave,
       loading = false,
     },
-    ref
+    ref,
   ) => {
     const pageCanvasRef = useRef<any>(null);
     const datasetPanelRef = useRef<any>(null);
@@ -253,7 +276,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
     const [showLeft, setShowLeft] = useState(true);
     const [showRight, setShowRight] = useState(true);
     const [selectedItem, setSelectedItem] = useState<SchemaItemType | null>(
-      null
+      null,
     );
     const [schema, setSchema] = useState<PageSchema>({
       info: {},
@@ -272,11 +295,11 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
     }, [showLeft, showRight]);
     const leftStyle = useMemo(
       () => ({ display: showLeft ? "flex" : "none" }),
-      [showLeft]
+      [showLeft],
     );
     const rightStyle = useMemo(
       () => ({ display: showRight ? "flex" : "none" }),
-      [showRight]
+      [showRight],
     );
     useDeepCompareEffect(() => {
       if (isReplaying) return;
@@ -310,7 +333,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
             if (Array.isArray(item.children[k])) {
               ensureIds(
                 item.children[k],
-                Math.random().toString(36).slice(2, 10)
+                Math.random().toString(36).slice(2, 10),
               );
             }
           });
@@ -375,7 +398,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
         setSchema(effect.schema);
       } else if (effect.pageItems?.length) {
         const effectItemMap = new Map(
-          effect.pageItems.map((item) => [item.id, item])
+          effect.pageItems.map((item) => [item.id, item]),
         );
         const cloneSchema = JSON.parse(JSON.stringify(schema));
         const loop = (list: any[] = []) => {
@@ -640,7 +663,9 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                   </Space>
                 }
               />
-              <div className={["body", deviceType].join(" ")}>
+              <div
+                className={["body beautified_scrollbar", deviceType].join(" ")}
+              >
                 <div
                   style={{
                     transform: `scale(${zoom})`,
@@ -664,9 +689,14 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                   width: "calc(100% - 47px)",
                 }}
               >
-                {rightActiveKey === "ai" && fetch?.ai && (
-                  <AiPanel agentList={agentList} onEffect={handleAiEffect} />
-                )}
+                <AiPanel
+                  agentList={agentList}
+                  onEffect={handleAiEffect}
+                  style={{
+                    display:
+                      rightActiveKey === "ai" && fetch?.ai ? undefined : "none",
+                  }}
+                />
                 {rightActiveKey === "props" && (
                   <PropertiesPanel datasourceEnable={datasourceEnable} />
                 )}
@@ -782,7 +812,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
         </Drawer>
       </PageProvider>
     );
-  }
+  },
 );
 
 export default PageDesigner;

package/src/components/panel/AiPanel.tsx

@@ -473,26 +473,7 @@ const MessageRoot = styled.div`
   flex-direction: column;
   gap: 12px;
   padding-right: 8px;
-  overflow: auto;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-  &:hover {
-    scrollbar-width: thin;
-  }
-  &:hover::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  &:hover::-webkit-scrollbar-thumb {
-    background: var(--ant-color-border);
-    border-radius: 4px;
-  }
-  &:hover::-webkit-scrollbar-track {
-    background: transparent;
-  }
+  
   .msg {
     display: flex;
     flex-direction: column;
@@ -503,8 +484,6 @@ const MessageRoot = styled.div`
     background: var(--ant-color-bg-container);
 
     .user-message {
-      background: var(--ant-color-primary-bg);
-      padding: 8px 10px;
       max-width: 90%;
       margin: 10px 0 10px auto;
       position: relative;
@@ -523,7 +502,13 @@ const MessageRoot = styled.div`
       .msg-header {
         justify-content: flex-end;
         color: var(--ant-color-text-tertiary);
-        padding: 4px 0 8px 0;
+        padding: 4px 10px 8px 10px;
+      }
+      
+      .msg-section {
+        background: var(--ant-color-primary-bg);
+        padding: 8px 10px;
+        border-radius: var(--ant-border-radius);
       }
     }
     .assistant-message {
@@ -632,7 +617,7 @@ const MessageList = forwardRef<
   }));
 
   return (
-    <MessageRoot className="message-list" ref={ref}>
+    <MessageRoot className="message-list beautified_scrollbar" ref={ref}>
       {list.map((msg) => (
         <div className="msg" key={msg.id}>
           <div className="user-message">
@@ -655,21 +640,23 @@ const MessageList = forwardRef<
               {/* <span className="msg-title">用户</span> */}
               <span>{formatTime(msg.createdAt)}</span>
             </div>
-            <div className="msg-content">{msg.question}</div>
-            {msg.files?.length || msg.agents?.length ? (
-              <div className="msg-meta">
-                {msg.files?.map((f) => (
-                  <Tag key={f.id} color="processing">
-                    <IconFont type="icon-paper-clip" /> {f.name}
-                  </Tag>
-                ))}
-                {msg.agents?.map((a) => (
-                  <Tag key={a.id} color="blue">
-                    <IconFont type="icon-at" /> {a.name}
-                  </Tag>
-                ))}
-              </div>
-            ) : null}
+            <div className="msg-section">
+              <div className="msg-content">{msg.question}</div>
+              {msg.files?.length || msg.agents?.length ? (
+                <div className="msg-meta">
+                  {msg.files?.map((f) => (
+                    <Tag key={f.id} color="processing">
+                      <IconFont type="icon-paper-clip" /> {f.name}
+                    </Tag>
+                  ))}
+                  {msg.agents?.map((a) => (
+                    <Tag key={a.id} color="blue">
+                      <IconFont type="icon-at" /> {a.name}
+                    </Tag>
+                  ))}
+                </div>
+              ) : null}
+            </div>
           </div>
           {/* <div
             style={{

package/src/components/panel/CascadePanel.tsx

@@ -127,7 +127,7 @@ export const CascadePanel: React.FC = ({}) => {
           ) : null
         }
       />
-      <div className="body">
+      <div className="body beautified_scrollbar">
         {selectedItem?.cascadeIds && (
           <ul>
             {(selectedItem.cascadeIds || []).map(

package/src/components/panel/ComponentPanel.tsx

@@ -102,7 +102,7 @@ export const ComponentPanel: React.FC = () => {
   return (
     <Root className="component-panel">
       <PaneHeader title="组件库" />
-      <div className="body">
+      <div className="body beautified_scrollbar">
         {grouped.map((group) => (
           <div className="plugin-group" key={group.group}>
             <div className="group-title">{group.group}</div>

package/src/components/panel/DatasetPanel.tsx

@@ -57,7 +57,7 @@ export const DatasetPanel = React.forwardRef<
           </Space>
         }
       />
-      <div className="body">
+      <div className="body beautified_scrollbar">
         <DatasetPanelComponent ref={ref} />
       </div>
     </Root>

package/src/components/panel/DatasourcePanel.tsx

@@ -223,7 +223,7 @@ export const DatasourcePanel: React.FC = () => {
           </Space>
         }
       />
-      <div className="body">
+      <div className="body beautified_scrollbar">
         <ul>
           {list.map((item, index) => (
             <li key={item.id}>

package/src/components/panel/LayerPanel.tsx

@@ -214,7 +214,7 @@ export const LayerPanel: React.FC = () => {
           </Space>
         }
       />
-      <div className="body">
+      <div className="body beautified_scrollbar">
         <DraggableTree
           draggable={{
             icon: false,

package/src/components/panel/PropertiesPanel.tsx

@@ -156,7 +156,7 @@ export const PropertiesPanel: React.FC<{
           </Radio.Group>
         }
       />
-      <div className="body">
+      <div className="body beautified_scrollbar">
         {activeTab === "1" && (
           <Form
             labelCol={{ span: 24 }}

package/src/components/panel/ScriptPanel.tsx

@@ -88,7 +88,7 @@ export const ScriptPanel: React.FC = () => {
           </Space>
         }
       />
-      <div className="body">
+      <div className="body beautified_scrollbar">
         <ul>
           {list.map((item, index) => (
             <li key={item.id || index}>

package/src/components/panel/VariablesPanel.tsx

@@ -104,7 +104,7 @@ export const VariablesPanel: React.FC = () => {
           </Space>
         }
       />
-      <div className="body">
+      <div className="body beautified_scrollbar">
         <Table
           rowKey={(r) => r.id || r.name}
           dataSource={list}

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

@@ -1,18 +1,18 @@
 import React, { useRef } from "react";
-import { Form } from "antd";
+import { Form, Select } from "antd";
 import Editor from "@monaco-editor/react";
 import type { PropEditorProps } from "./types";
 import { IconFont } from "../../../icon/IconFont";
 
-export type HtmlModel = { template: string };
+export type HtmlModel = { template: string; classNames?: string[] };
 
 export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
   model,
   onChange,
 }) => {
   const ref = useRef<any>(null);
-  const setTemplate = (v?: string) =>
-    onChange && onChange({ ...model, template: v || "" });
+  const triggerModel = (key: keyof HtmlModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
   const format = () => {
     const editor = (ref.current as any)?.editor;
     editor?.getAction("editor.action.formatDocument")?.run();
@@ -20,6 +20,14 @@ export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
   return (
     <div>
       <Form layout="vertical">
+        <Form.Item label="类名">
+          <Select
+            size="small"
+            value={model.classNames}
+            mode="tags"
+            onChange={(value) => triggerModel("classNames", value)}
+          />
+        </Form.Item>
         <Form.Item
           label={
             <>
@@ -45,7 +53,7 @@ export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
               height="300px"
               defaultLanguage="html"
               value={model.template}
-              onChange={(v) => setTemplate(v || "")}
+              onChange={(v) => triggerModel("template", v || "")}
               options={{
                 minimap: { enabled: false },
                 scrollBeyondLastLine: false,

package/src/components/plugins/@antd/items/HtmlRender.tsx

@@ -9,6 +9,7 @@ export type HtmlRenderProps = {
   template?: string;
   style?: React.CSSProperties;
   item: any;
+  classNames?: string[];
 } & HtmlBaseProps;
 
 /**
@@ -28,6 +29,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
   item,
   style,
   className,
+  classNames = [],
 }) => {
   const { env, initCallback } = useContext(EnvContext);
   const datasource = useDatasource(id, item.datasource);
@@ -54,7 +56,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
   const html = useMemo(
     () =>
       (template || "").replace(
-        /{{\s*([^}]+)\s*}}/g,
+        /{ *{\s*([^}]+)\s*} *}/g,
         (_match: any, p1: string) => {
           try {
             return (func(p1) as any)(...args);
@@ -79,7 +81,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
     <div
       id={id}
       style={style}
-      className={className}
+      className={(classNames || []).join(" ") + (" " + className || "")}
       dangerouslySetInnerHTML={{ __html: html }}
     />
   );