bi-sdk-react 0.0.63 → 0.0.65

package/package.json

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

package/src/components/PageDesigner.tsx

@@ -7,12 +7,27 @@ import {
   MobileOutlined,
   RedoOutlined,
   SaveOutlined,
+  SearchOutlined,
   TabletOutlined,
   UndoOutlined,
   ZoomInOutlined,
   ZoomOutOutlined,
 } from "@ant-design/icons";
-import { Button, Divider, Drawer, Modal, Radio, Space, Tooltip } from "antd";
+import {
+  AutoComplete,
+  Button,
+  Divider,
+  Drawer,
+  Empty,
+  Flex,
+  Input,
+  Modal,
+  Radio,
+  Space,
+  Tag,
+  Tooltip,
+  Typography,
+} from "antd";
 import React, { useImperativeHandle, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { IconFont } from "./icon/IconFont";
@@ -189,6 +204,63 @@ const Container = styled.div`
   }
 `;
 
+const Search = styled(Flex)`
+  color: var(--ant-color-text-label);
+  background: var(--ant-color-bg-text-hover);
+  border: var(--ant-color-border) solid 1px;
+  padding: 0 20px 0 8px;
+  border-radius: var(--ant-border-radius);
+  height: 24px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background: var(--ant-color-bg-text-active);
+  }
+`;
+
+const SearchList = styled.ul`
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  li {
+    padding: 10px;
+    border-bottom: dotted 1px var(--ant-color-border);
+    cursor: pointer;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: var(--ant-color-primary-bg);
+    }
+
+    h5 {
+      margin: 0;
+      color: var(--ant-color-text-label);
+      font-size: 14px;
+
+      small {
+        color: var(--ant-color-text-description);
+
+        &:before {
+          content: "(ID: ";
+        }
+        &:after {
+          content: ")";
+        }
+      }
+    }
+
+    div {
+      margin: 8px 0 0 0;
+      color: var(--ant-color-text-description);
+    }
+  }
+`;
+
 const ImportModal: React.FC<{
   open?: boolean;
   onCancel?: () => void;
@@ -287,6 +359,8 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
     const [designable, setDesignable] = useState(true);
     const [importModalOpen, setImportModalOpen] = useState(false);
     const [aiPaneOpen, setAiPaneOpen] = useState(false);
+    const [searchKey, setSearchKey] = useState("");
+    const [searchOpen, setSearchOpen] = useState(false);
     const containerStyle = useMemo(() => {
       const left = showLeft ? "250px" : "";
       const right = showRight ? "400px" : "";
@@ -470,11 +544,34 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
       return rightPanelActiveKey;
     }, [selectedItem, rightPanelActiveKey]);
 
-
     const selectedPlugin: PluginType | undefined = useMemo(() => {
       return (plugins || []).find((p) => p.key === selectedItem?.type);
     }, [plugins, selectedItem?.type]);
 
+    const searchedItems: SchemaItemType[] = useMemo(() => {
+      if (!searchKey?.trim()?.length) {
+        return [];
+      }
+      const list: SchemaItemType[] = [];
+      const compute = (arr?: any[]) => {
+        if (!Array.isArray(arr)) return;
+        arr.forEach((item) => {
+          if (JSON.stringify(item).includes(searchKey)) {
+            list.push(item);
+          }
+          if (Array.isArray(item.children)) {
+            compute(item.children);
+          } else if (typeof item.children === "object" && item.children) {
+            Object.keys(item.children).forEach((k) =>
+              compute(item.children[k]),
+            );
+          }
+        });
+      };
+      compute(schema?.items || []);
+      return list;
+    }, [schema?.items, searchKey]);
+
     return (
       <PageProvider
         pageId={pageId}
@@ -673,7 +770,9 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                     renderNode={datasetPanel}
                   />
                 )}
-                {leftPanelActiveKey === "global-dataset" && <GlobalDatasetPanel />}
+                {leftPanelActiveKey === "global-dataset" && (
+                  <GlobalDatasetPanel />
+                )}
               </div>
             </div>
             <div className="center" style={{ flex: "1 1 auto" }}>
@@ -681,6 +780,21 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                 title="页面"
                 extra={
                   <Space>
+                    <Search
+                      align="center"
+                      gap={8}
+                      onClick={() => setSearchOpen(true)}
+                    >
+                      <SearchOutlined />
+                      <Typography.Text
+                        style={{
+                          fontSize: 12,
+                          color: "var(--ant-color-text-label)",
+                        }}
+                      >
+                        Quick search...
+                      </Typography.Text>
+                    </Search>
                     <Button
                       size="small"
                       type={!designable ? "primary" : "default"}
@@ -709,6 +823,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                 }
               />
               <div
+                id="page-canvas-wrapper"
                 className={[
                   "body beautified_scrollbar always",
                   deviceType,
@@ -864,6 +979,85 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
             onEffect={handleAiEffect}
           />
         </Drawer>
+        <Modal
+          open={searchOpen}
+          title={
+            <Input
+              placeholder="搜索页面元素 ..."
+              variant="borderless"
+              prefix={
+                <SearchOutlined
+                  style={{ color: "var(--ant-color-text-label)" }}
+                />
+              }
+              value={searchKey}
+              onChange={(e) => setSearchKey(e.target.value)}
+            />
+          }
+          closeIcon={
+            <Typography.Link
+              unselectable="on"
+              style={{ color: "var(--ant-color-text-quaternary)" }}
+            >
+              ESC
+            </Typography.Link>
+          }
+          footer={null}
+          onCancel={() => setSearchOpen(false)}
+          styles={{
+            container: { padding: 0 },
+            header: {
+              padding: "16px 12px",
+              borderBottom: "solid 1px var(--ant-color-border)",
+            },
+            body: {
+              padding: "0 12px 12px 12px",
+              overflow: "auto",
+              maxHeight: 500,
+            },
+          }}
+        >
+          <SearchList>
+            {searchedItems.length === 0 ? (
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description={
+                  searchKey?.trim()?.length
+                    ? "未找到页面元素"
+                    : "请输入关键字进行搜索..."
+                }
+              />
+            ) : (
+              searchedItems.map((item) => (
+                <li
+                  key={item.id}
+                  onClick={() => {
+                    setSelectedItem(item);
+                    document
+                      .getElementById(`page-item-${item.id}`)
+                      ?.scrollIntoView({ behavior: "smooth" });
+                    setSearchOpen(false);
+                  }}
+                >
+                  <Typography.Title level={5} style={{ margin: 0 }}>
+                    <Tag
+                      variant="filled"
+                      color="#108ee9"
+                      style={{ marginRight: 8 }}
+                    >
+                      页面元素
+                    </Tag>
+                    {item.name}
+                    <small>{item.id}</small>
+                  </Typography.Title>
+                  <Typography.Paragraph>
+                    {item.description || "无描述内容"}
+                  </Typography.Paragraph>
+                </li>
+              ))
+            )}
+          </SearchList>
+        </Modal>
       </PageProvider>
     );
   },

package/src/components/layout/PageItem.tsx

@@ -1,5 +1,5 @@
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { PageContext } from "../context/PageContext";
 import { SchemaItemType } from "../typing";
 import styled from "styled-components";
@@ -63,6 +63,19 @@ const ToolbarWrap = styled.div`
   }
 `;
 
+const Hidden = styled.div`
+  user-select: none;
+  font-size: 12px;
+  text-align: center;
+  color: var(--ant-color-text-placeholder);
+  background: var(--ant-color-bg-layout);
+  border: dotted 1px #ccc;
+
+  &:before {
+    content: "组件已隐藏";
+  }
+`;
+
 const Toolbar: React.FC<{
   item: SchemaItemType;
   ancestors: SchemaItemType[];
@@ -188,7 +201,12 @@ const Toolbar: React.FC<{
           </Tooltip>
         )}
         <Tooltip title="源码编辑">
-          <a onClick={() => setVisible(true)}>
+          <a
+            onClick={(e) => {
+              e.stopPropagation();
+              setVisible(true);
+            }}
+          >
             <IconFont type="icon-json" />
           </a>
         </Tooltip>
@@ -241,6 +259,8 @@ export const PageItem: React.FC<PageItemProps> = ({
     onRemoveAtItem,
     forceUpdate,
     fetch,
+    globalVars,
+    env,
   } = useContext(PageContext);
   const [isDragging, setIsDragging] = useState(false);
   const [toolbarContainer, setToolbarContainer] =
@@ -274,6 +294,33 @@ export const PageItem: React.FC<PageItemProps> = ({
     | React.ComponentType<any>
     | undefined;
 
+  const hidden = useMemo(() => {
+    const expression = item.hideExpression;
+    if (!expression?.length) {
+      return false;
+    }
+    try {
+      const func = new Function(
+        "$g",
+        "$e",
+        `
+        "use strict";
+        const window = undefined;
+        const document = undefined;
+        const global = undefined;
+        const process = undefined;
+        const require = undefined;
+        const module = undefined;
+        const exports = undefined;
+        return ${expression} === true;
+      `,
+      );
+      return func(globalVars, env.global);
+    } catch (e) {
+      return false;
+    }
+  }, [item.hideExpression, globalVars, env]);
+
   useEffect(() => {
     const updateToolbarPosition = () => {
       if (!toolbarEl.current) return;
@@ -316,7 +363,7 @@ export const PageItem: React.FC<PageItemProps> = ({
 
     if (selectedItem && selectedItem === item && designable) {
       const div = document.createElement("div");
-      div.setAttribute("id", "page-item-toolbar")
+      div.setAttribute("id", "page-item-toolbar");
       div.style.position = "absolute";
       div.style.zIndex = "1000";
       div.style.display = "flex";
@@ -370,6 +417,33 @@ export const PageItem: React.FC<PageItemProps> = ({
 
   if (!Comp) return null;
 
+  if (hidden) {
+    return designable ? (
+      <>
+        <Hidden
+          id={`page-item-${item.id}`}
+          data-item-id={item.id}
+          className={`page-item-component ${designable ? "designable" : ""} ${
+            selectedItem === item ? "selected" : ""
+          }`}
+        ></Hidden>
+        {toolbarContainer &&
+          ReactDOM.createPortal(
+            <Toolbar
+              item={item}
+              ancestors={ancestors}
+              onAddAt={fetch?.ai?.chat ? handleAddAtItem : undefined}
+              onCopy={handleCopy}
+              onDelete={handleDelete}
+              onUpdate={forceUpdate}
+              onSelect={onSelect}
+            />,
+            toolbarContainer,
+          )}
+      </>
+    ) : null;
+  }
+
   return (
     <>
       <Comp

package/src/components/panel/LayerPanel.tsx

@@ -229,6 +229,9 @@ export const LayerPanel: React.FC = () => {
           onSelect={(_, info: any) => {
             if (info.node.dataRef.type === "slot") return;
             onSelect && onSelect(info.node.dataRef.item);
+            document
+              .getElementById(`page-item-${info.node.dataRef.item.id}`)
+              ?.scrollIntoView({ behavior: "smooth" });
           }}
           onDrop={onDrop}
           onExpand={(keys) => setExpandedKeys(keys as string[])}

package/src/components/panel/PropertiesPanel.tsx

@@ -271,6 +271,26 @@ export const PropertiesPanel: React.FC<{
                   }
                 />
               </Form.Item>
+              <Form.Item label="隐藏组件" tooltip={
+                <>
+                  <div>当下方表达式（JS）不为空且为true时组件隐藏。</div>
+                  <div><small>1.环境变量：$e.变量名。</small></div>
+                  <div><small>2.全局变量：$g.变量名。</small></div>
+                  <div><small>示例：$e.a === '1'。</small></div>
+                </>
+              }>
+                <Input.TextArea
+                  size="small"
+                  value={selectedItem?.hideExpression}
+                  onChange={(e) =>
+                    onUpdateSelectedItem &&
+                    onUpdateSelectedItem({
+                      ...selectedItem,
+                      hideExpression: e.target.value,
+                    })
+                  }
+                />
+              </Form.Item>
             </Form>
             {selectedItem?.datasource && <Divider>数据源</Divider>}
             {selectedItem?.datasource && (

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

@@ -36,7 +36,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
   const [signal, setSignal] = useState<number>(0);
   const datasource = useDatasource({ item, signal });
 
-  const keys = useMemo(() => Object.keys(datasource || {}), [datasource]);
+  const keys = useMemo(() => Array.isArray(datasource) ? [] : Object.keys(datasource || {}), [datasource]);
   const func = (path: string) =>
     new Function(
       "$g",

package/src/components/typing.ts

@@ -94,6 +94,7 @@ export type SchemaItemType = {
   type: string;
   name?: string;
   description?: string;
+  hideExpression?: string;
   style?: React.CSSProperties;
   props?: Record<string, any>;
   cascadeIds?: string[];