bi-sdk-react 0.0.10 → 0.0.11

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;
   }
@@ -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;
@@ -636,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">

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/items/HtmlRender.tsx

@@ -56,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);