fix: 修复 asset 中 componentList 为空时报错的 bug

2026-01-12 17:08:14 +00:00 · 2020-09-10 12:58:46 +08:00 · 2020-09-10 12:58:46 +08:00 · 49517a68a9
commit 49517a68a9
parent e9d8d3dbe6
11 changed files with 225 additions and 251 deletions
--- a/packages/plugin-components-pane/package.json
+++ b/packages/plugin-components-pane/package.json
@ -20,9 +20,12 @@
  ],
  "author": "xiayang.xy",
  "dependencies": {
+    "@ali/intl-universal": "^0.4.12",
    "@ali/lowcode-designer": "^1.0.8-0",
    "@ali/lowcode-editor-core": "^1.0.8-0",
    "@ali/lowcode-types": "^1.0.8-0",
+    "@ali/vu-layer": "^4.0.1",
+    "@ali/vu-uxcore-legao-design": "^1.4.0",
    "@alifd/next": "^1.19.19",
    "react": "^16.8.1"
  },
--- a/packages/plugin-components-pane/src/components/base/index.tsx
+++ b/packages/plugin-components-pane/src/components/base/index.tsx
@ -1,10 +1,11 @@
-import React from "react";
-import { Search, Box } from "@alifd/next";
-import Button from "../button/index.js";
-import Card from "../card";
-import $i18n from "../../i18n/index.js";
-import { searchComponent, builtinSearchMap } from "../../utils";
-import "./index.less";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Search, Box } from '@alifd/next';
+import Button from '../button';
+import Card from '../card';
+import $i18n from '../../i18n/index';
+import { searchComponent, builtinSearchMap } from '../../utils';
+import './index.less';

 /**
 * 配置元素的操作类型
@ -13,9 +14,9 @@ import "./index.less";
 * All：可拖拽也可点击
 */
 export const AdditiveType = {
-  Draggable: "additive-drag",
-  Clickable: "additive-click",
-  All: "additive",
+  Draggable: 'additive-drag',
+  Clickable: 'additive-click',
+  All: 'additive',
 };

 class Base extends React.Component {
@ -23,33 +24,27 @@ class Base extends React.Component {
    metaData: PropTypes.array,
    className: PropTypes.string,
    registerAdditive: PropTypes.func,
-    renderCustomSnippet: PropTypes.func,
    actions: PropTypes.array,
    getComponentInfo: PropTypes.func,
    enableSearch: PropTypes.bool,
-    enableCard: PropTypes.bool,
-    enableReport: PropTypes.bool,
    placeholder: PropTypes.string,
  };

  static defaultProps = {
    metaData: [],
-    registerAdditive: () => {
-      return;
-    },
-    className: "",
+    registerAdditive: () => {},
+    className: '',
    renderCustomSnippet: null,
    actions: [],
    getComponentInfo: null,
    enableSearch: false,
    enableCard: true,
    enableReport: true,
-    placeholder: "",
+    placeholder: '',
  };

  state = {
-    selected: "",
-    searchText: "",
+    searchText: '',
    currentCard: null,
    target: null,
    currentCardImage: '',
@ -63,7 +58,7 @@ class Base extends React.Component {
  isMouseEnterCard = false;


-  componentWillMount() {
+  UNSAFE_componentWillMount() {
    // TODO get remote search map
    this.searchMap = builtinSearchMap;
  }
@ -85,9 +80,9 @@ class Base extends React.Component {

  normalizeBundle(mode) {
    const { metaData } = this.props;
-    const { searchText = "" } = this.state;
+    const { searchText = '' } = this.state;
    const groupList = metaData.filter((comp, index) => {
-      const { title = "", componentName = "", id = "" } = comp;
+      const { title = '', componentName = '', id = '' } = comp;
      if (!id) {
        comp.id = `${comp.componentName}_${index}`;
      }
@ -103,10 +98,10 @@ class Base extends React.Component {
      return groupList;
    }

-    let bundle = {};
+    const bundle = {};
    // 按一定顺序排列
    groupList.forEach((m) => {
-      const c = m.category || "Others";
+      const c = m.category || 'Others';
      if (!bundle[c]) {
        bundle[c] = [];
      }
@ -119,7 +114,7 @@ class Base extends React.Component {
    this.isEmpty = true;
    return (
      <Box direction="column" justify="center" align="center" className="ve-component-list-empty">
-        <img src='//g.alicdn.com/uxcore/pic/empty.png' style={{ height: 100, width: 100 }} />
+        <img src="//g.alicdn.com/uxcore/pic/empty.png" style={{ height: 100, width: 100 }} />
        <div style={{ lineHeight: 2 }}>
          <div>暂无组件，请在物料站点添加</div>
        </div>
@ -131,14 +126,8 @@ class Base extends React.Component {
    const { placeholder } = this.props;
    return (
      <Search
-        placeholder={
-          placeholder
-            ? placeholder
-            : $i18n.get({
-                id: "trunkPaneSearchComponent",
-                dm: "搜索组件",
-              })
-        }
+        style={{ width: '100%' }}
+        placeholder={placeholder || $i18n.get({ id: 'trunkPaneSearchComponent', dm: '搜索组件' })}
        shape="simple"
        size="medium"
        hasClear
@ -154,7 +143,7 @@ class Base extends React.Component {
    if (!this.hasActions()) {
      return null;
    }
-    const len = actions.length;
+    // const len = actions.length;
    // TODO:len = 1：只有一个主按钮；len = 2：一个主按钮、一个次按钮；len >=3：一个主按钮、一个次按钮、其余放在按钮组里；
    return actions.map((action, idx) => {
      return (
@ -162,7 +151,7 @@ class Base extends React.Component {
          key={idx}
          action={action}
          className="btn"
-          type={idx === 0 ? "primary" : "outline"}
+          type={idx === 0 ? 'primary' : 'outline'}
        >
          {action.title}
        </Button>
@ -194,7 +183,7 @@ class Base extends React.Component {
        componentPrototype={currentCard}
        target={target}
        customImage={currentCardImage}
-        subTitle={target && target.innerText || ''}
+        subTitle={target ? target.innerText : ''}
        position="right top"
        visible={!!currentCard}
        showClose
@ -219,18 +208,18 @@ class Base extends React.Component {
      enableSearch,
      className,
      registerAdditive = () => {
-        return;
+
      },
    } = this.props;
-    let bodyExtraClass = "";
+    let bodyExtraClass = '';
    if (this.hasActions() && enableSearch) {
-      bodyExtraClass = "small";
+      bodyExtraClass = 'small';
    } else if (!this.hasActions() && enableSearch) {
-      bodyExtraClass = "medium";
+      bodyExtraClass = 'medium';
    } else if (this.hasActions() && !enableSearch) {
-      bodyExtraClass = "large";
+      bodyExtraClass = 'large';
    } else {
-      bodyExtraClass = "";
+      bodyExtraClass = '';
    }

    return (
@ -256,7 +245,7 @@ class Base extends React.Component {
        </div>
        <div
          className={`ve-component-list-foot ${
-            this.hasActions() ? "exist" : ""
+            this.hasActions() ? 'exist' : ''
          }`}
        >
          {this.renderActions()}
--- a/packages/plugin-components-pane/src/components/button/index.tsx
+++ b/packages/plugin-components-pane/src/components/button/index.tsx
@ -1,4 +1,4 @@
-import { Button } from "@ali/vu-uxcore-legao-design";
+import { Button } from '@ali/vu-uxcore-legao-design';
 import './index.less';

 const MyButton = (props) => {
@ -6,10 +6,10 @@ const MyButton = (props) => {
  return (
    <Button
      className={className}
-      type={type || action.type || "outline"}
+      type={type || action.type || 'outline'}
      danger={action.danger || false}
      onClick={() => {
-        if (action.fn && typeof action.fn === "function") {
+        if (action.fn && typeof action.fn === 'function') {
          action.fn(componentPrototype);
        }
      }}
--- a/packages/plugin-components-pane/src/components/card/index.tsx
+++ b/packages/plugin-components-pane/src/components/card/index.tsx
@ -1,9 +1,9 @@
-import React from "react";
-import Layer from "@ali/vu-layer";
-import { Icon } from "@alifd/next";
-import $i18n from "../../i18n/index";
-import Button from "../button";
-import "./index.less";
+import React from 'react';
+import Layer from '@ali/vu-layer';
+import { Icon } from '@alifd/next';
+import $i18n from '../../i18n/index';
+import Button from '../button';
+import './index.less';

 export default class Card extends React.Component {
  static propTypes = {};
@ -23,7 +23,7 @@ export default class Card extends React.Component {
    this.loadComponentInfo(this.props.componentPrototype);
  }

-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.componentPrototype !== this.props.componentPrototype) {
      // 延迟执行数据加载和渲染，等 props 更新之后
      this.loadComponentInfo(nextProps.componentPrototype);
@ -44,12 +44,6 @@ export default class Card extends React.Component {
      .catch((e) => {
        this.setState({ errorMsg: e.message });
        console.error(e);
-        if (VisualEngine) {
-          VisualEngine.ui.Popup.error({
-            content: e.message,
-            duration: 2000,
-          });
-        }
      });
  }

@ -65,7 +59,7 @@ export default class Card extends React.Component {
      <div>
        <Icon type="loading" className="ve-loading-icon" size="large" />
        <div className="ve-loading-content">
-          {$i18n.get({ id: "trunkPaneLoading", dm: "加载中..." })}
+          {$i18n.get({ id: 'trunkPaneLoading', dm: '加载中...' })}
        </div>
      </div>
    );
@ -73,7 +67,7 @@ export default class Card extends React.Component {
    const {
      title,
      version,
-      image = "https://img.alicdn.com/tfs/TB1XHG6ehrI8KJjy0FpXXb5hVXa-740-608.png",
+      image = 'https://img.alicdn.com/tfs/TB1XHG6ehrI8KJjy0FpXXb5hVXa-740-608.png',
      desc,
      detailUrl,
      actions,
@ -113,24 +107,24 @@ export default class Card extends React.Component {
                  className="ve-operation-item"
                >
                  {$i18n.get({
-                    id: "trunkPaneDetailedDocumentation",
-                    dm: "详细文档",
+                    id: 'trunkPaneDetailedDocumentation',
+                    dm: '详细文档',
                  })}
                </a>
              ) : null}
              <div className="actions">
-                {actions
-                  ? actions.map((action, idx) => {
-                      return (
-                        <Button
-                          key={idx}
-                          className="ve-card-action"
-                          action={action}
-                          componentPrototype={componentPrototype}
-                        />
-                      );
-                    })
-                  : null}
+                {
+                  actions ? actions.map((action, idx) => {
+                    return (
+                      <Button
+                        key={idx}
+                        className="ve-card-action"
+                        action={action}
+                        componentPrototype={componentPrototype}
+                      />
+                    );
+                  }) : null
+                }
              </div>
            </div>
          </div>
--- a/packages/plugin-components-pane/src/components/component-list/index.tsx
+++ b/packages/plugin-components-pane/src/components/component-list/index.tsx
@ -1,23 +1,23 @@
-import Base, { AdditiveType } from "../base/index.js";
-import Snippet from "../snippet";
-import "./index.less";
+import Base, { AdditiveType } from '../base/index';
+import Snippet from '../snippet';
+import './index.less';

 // 滚动事件触发灵敏度
 const OFFSET_ACCURCY = 25;

 const categoryMap = {
-  General: "常用",
-  Navigation: "导航",
-  DataEntry: "输入",
-  DataDisplay: "展示",
-  Feedback: "反馈",
-  Util: "工具",
-  Chart: "图表",
-  Others: "其他",
+  General: '常用',
+  Navigation: '导航',
+  DataEntry: '输入',
+  DataDisplay: '展示',
+  Feedback: '反馈',
+  Util: '工具',
+  Chart: '图表',
+  Others: '其他',
 };

 export default class ComponentList extends Base {
-  static displayName = "ComponentList";
+  static displayName = 'ComponentList';

  descRefList = new Map();
  navRefList = new Map();
@ -28,10 +28,10 @@ export default class ComponentList extends Base {
  scroll;
  scrollTimer;
  state = {
-    selected: "",
-    searchText: "",
+    selected: '',
+    searchText: '',
    currentCard: null,
-    currentCardImage: ''
+    currentCardImage: '',
  };

  componentDidMount() {
@ -40,7 +40,7 @@ export default class ComponentList extends Base {

      // mock 滚动结束事件
      if (this.scroll) {
-        this.scroll.addEventListener("scroll", this.handleScrollEnd);
+        this.scroll.addEventListener('scroll', this.handleScrollEnd);
      }
    }, 20);
    const bundle = this.normalizeBundle();
@ -60,7 +60,7 @@ export default class ComponentList extends Base {

  componentWillUnmount() {
    if (this.scroll) {
-      this.scroll.removeEventListener("scroll", this.handleScrollEnd);
+      this.scroll.removeEventListener('scroll', this.handleScrollEnd);
    }
  }

@ -127,7 +127,7 @@ export default class ComponentList extends Base {
  fixSideBarView(selected) {
    const nav = this.navRefList.get(selected);
    if (nav) {
-      nav.scrollIntoView({ block: "center" });
+      nav.scrollIntoView({ block: 'center' });
    }
  }

@ -167,11 +167,11 @@ export default class ComponentList extends Base {
        {metaData.map((comp) => (
          <div
            className={`navigator-group-item ${AdditiveType.Draggable} ${
-              selected === comp.id ? "active" : ""
+              selected === comp.id ? 'active' : ''
            }`}
            key={comp.id}
            data-id={
-              (comp.snippets && comp.snippets[0] && comp.snippets[0].id) || ""
+              (comp.snippets && comp.snippets[0] && comp.snippets[0].id) || ''
            }
            ref={(item) => {
              this.navRefList.set(comp.id, item);
@ -186,7 +186,7 @@ export default class ComponentList extends Base {
  }

  renderComponentDescriptionList(bundle) {
-    const { renderCustomSnippet = "", enableCard = true } = this.props;
+    const { renderCustomSnippet = '', enableCard = true } = this.props;
    return (
      <div className="component-description-list">
        {Object.keys(bundle).map((cat) => {
@ -208,8 +208,7 @@ export default class ComponentList extends Base {
                    {comp.title}
                  </div>
                ) : null}
-                <div className="component-description-item-icon-group">
-                </div>
+                <div className="component-description-item-icon-group" />
              </div>
              <div className="component-description-item-snippets">
                {comp.snippets &&
@ -227,7 +226,7 @@ export default class ComponentList extends Base {
                          this.setState({
                            currentCard: comp,
                            target: this.snippetMap.get(`${comp.id}-${idx}`),
-                            currentCardImage: snippet.thumbnail
+                            currentCardImage: snippet.thumbnail,
                          });
                          this.timer = null;
                        }, 1000);
@ -242,7 +241,7 @@ export default class ComponentList extends Base {
                          if (this.isMouseEnterCard) {
                            return;
                          }
-                          this.setState({currentCard: null});
+                          this.setState({ currentCard: null });
                        }, 200);
                      }}
                    >
@ -270,7 +269,7 @@ export default class ComponentList extends Base {
        key="content"
        className="ve-component-list-content"
        onScroll={(e) => this.handleScroll(e)}
-        ref={(scroll) => (this.scroll = scroll)}
+        ref={(scroll) => { this.scroll = scroll; }}
      >
        {this.renderComponentDescriptionList(bundle)}
      </div>,
--- a/packages/plugin-components-pane/src/components/snippet/index.tsx
+++ b/packages/plugin-components-pane/src/components/snippet/index.tsx
@ -1,41 +1,41 @@
-import { Fragment } from "react";
-import { Icon } from "@alifd/next";
-import { AdditiveType } from "../base";
-import "./index.less";
+import { Fragment } from 'react';
+import { Icon } from '@alifd/next';
+import { AdditiveType } from '../base';
+import './index.less';

 const Snippet = (props) => {
  const {
    snippet,
-    renderCustomSnippet = "",
-    size = "small",
+    renderCustomSnippet = '',
+    size = 'small',
    actionsInLT,
    actionsInRT,
  } = props;
  const {
-    thumbnail = "https://img.alicdn.com/tfs/TB1XHG6ehrI8KJjy0FpXXb5hVXa-740-608.png",
+    thumbnail = 'https://img.alicdn.com/tfs/TB1XHG6ehrI8KJjy0FpXXb5hVXa-740-608.png',
    description,
-    title = "未知"
+    title = '未知',
  } = snippet;
  const snippetClassName = `component-description-item-snippet ${AdditiveType.All} ${size}`;
  return (
    <div className={snippetClassName} key={snippet.id} data-id={snippet.id}>
-      {typeof renderCustomSnippet === "function" ? (
+      {typeof renderCustomSnippet === 'function' ? (
        renderCustomSnippet(snippet)
      ) : (
        <Fragment>
          <div className="snippet-thumbnail">
-            {typeof thumbnail === "string" && thumbnail.startsWith("http") ? (
+            {typeof thumbnail === 'string' && thumbnail.startsWith('http') ? (
              <img alt="thumbnail" src={thumbnail} />
            ) : (
-              <Icon className="icon" type={thumbnail || "help"} />
+              <Icon className="icon" type={thumbnail || 'help'} />
            )}
          </div>
          <div className="snippet-title">{description || title}</div>
          <div className="engine-additive-helper left-top">
-            {actionsInLT ? actionsInLT : null}
+            {actionsInLT || null}
          </div>
          <div className="engine-additive-helper right-top">
-            {actionsInRT ? actionsInRT : null}
+            {actionsInRT || null}
          </div>
        </Fragment>
      )}
--- a/packages/plugin-components-pane/src/i18n/index.ts
+++ b/packages/plugin-components-pane/src/i18n/index.ts
@ -39,7 +39,7 @@ if (PSEUDO_LANGUAGE_TAG === CURRENT_LANGUAGE) {
  update(CURRENT_LANGUAGE);
 }

-module.exports = {
+export default {
  get,
  update,
 };
--- a/packages/plugin-components-pane/src/i18n/strings/index.ts
+++ b/packages/plugin-components-pane/src/i18n/strings/index.ts
@ -1,4 +1,4 @@
-module.exports = {
+export default {
  'en-US': require('./en-US.json'),
  'zh-CN': require('./zh-CN.json'),
 };
--- a/packages/plugin-components-pane/src/index.tsx
+++ b/packages/plugin-components-pane/src/index.tsx
@ -1,15 +1,15 @@
 import { Component, ReactNode } from 'react';
 import { Tab } from '@alifd/next';
-import ComponentList from "./components/component-list";
-import { AdditiveType } from "./components/base"
+import ComponentList from './components/component-list';
+import { AdditiveType } from './components/base';
 import { PluginProps } from '@ali/lowcode-types';
 import { Designer } from '@ali/lowcode-designer';

 import './index.scss';

 export interface IState {
-  metaData: object[];
-  bizComponents: object[];
+  metaData: Record<string, unknown>[];
+  bizComponents: Record<string, unknown>[];
 }

 export default class ComponentListPlugin extends Component<PluginProps, IState> {
@ -35,7 +35,10 @@ export default class ComponentListPlugin extends Component<PluginProps, IState>
  }

  transformMetaData(componentList: any): any {
-    const metaData: object[] = [];
+    const metaData: Record<string, unknown>[] = [];
+    if (!componentList || !Array.isArray(componentList) || !componentList.length) {
+      return metaData;
+    }
    componentList.forEach((category: any, categoryId: number) => {
      if (Array.isArray(category?.children)) {
        category.children.forEach((comp: any, compId: number) => {
@ -98,20 +101,7 @@ export default class ComponentListPlugin extends Component<PluginProps, IState>
      return;
    }

-    const click = (e: Event) => {
-      if (
-        (e.target.tagName === 'ICON'
-          && e.target.parentNode
-          && e.target.parentNode.classList.contains('engine-additive-helper'))
-        || e.target.classList.contains('engine-additive-helper')
-      ) {
-        return;
-      }
-      const snippetId = getSnippetId(e.target, AdditiveType.Clickable);
-      if (!snippetId || !this.snippetsMap.get(snippetId)) {
-        return;
-      }
-    };
+    const click = (e: Event) => { console.log(e); };

    shell.addEventListener('click', click);

@ -136,22 +126,22 @@ export default class ComponentListPlugin extends Component<PluginProps, IState>
    return (
      <div className="lowcode-component-list">
        <Tab>
-            <Tab.Item title="基础组件" key="base-components">
-                <ComponentList
-                  key="component-pane"
-                  metaData={metaData}
-                  registerAdditive={(shell: Element | null) => this.registerAdditive(shell)}
-                  enableSearch
-                />
-            </Tab.Item>
-            <Tab.Item title="业务组件" key="biz-components">
-              <ComponentList
-                key="component-pane"
-                metaData={bizComponents}
-                registerAdditive={(shell: Element | null) => this.registerAdditive(shell)}
-                enableSearch
-              />
-            </Tab.Item>
+          <Tab.Item title="基础组件" key="base-components">
+            <ComponentList
+              key="component-pane"
+              metaData={metaData}
+              registerAdditive={(shell: Element | null) => this.registerAdditive(shell)}
+              enableSearch
+            />
+          </Tab.Item>
+          <Tab.Item title="业务组件" key="biz-components">
+            <ComponentList
+              key="component-pane"
+              metaData={bizComponents}
+              registerAdditive={(shell: Element | null) => this.registerAdditive(shell)}
+              enableSearch
+            />
+          </Tab.Item>
        </Tab>
      </div>
    );
--- a/packages/plugin-components-pane/src/utils.js
+++ b/packages/plugin-components-pane/src/utils.js
@ -1,99 +0,0 @@
-export const builtinSearchMap = {
-  "容器": "容器、rongqi、rq、分栏、ColumnsLayout、Columns、layout、grid",
-  "分栏": "分栏、ColumnsLayout、Columns、layout、grid、容器、rongqi、rq、fl、fenlan",
-  "卡片": "卡片、card、kapian、kp",
-  "选项卡": "选项卡、tab、tabs、页签、xuanxiangka、xxk、yeqian、yq",
-  "按钮": "按钮、button、anniu、an",
-  "图标": "图标、icon、tubiao、tb",
-  "标题": "标题、title、biaoti、bt",
-  "图片": "图片、image、pic、picture、tupian、tp",
-  "Dialog": "对话框、Dialog、弹框、弹出框、duihuakuang、dhk",
-  "Drawer": "抽屉、Drawer、chouti、ct、couti",
-  "文本": "文本、文字、text、wenzi、wz、wenben",
-  "链接": "链接、link、lianjie、lj",
-  "链接块": "链接块、链接、link、lianjie、lj、ljk",
-  "表单容器": "表单容器、表单、form、biaodan、bd",
-  "输入框": "输入框、文本框、密码框、input、shurukuang、srk、wenbenkuang、wbk",
-  "数字输入框": "数字输入框、数字、输入框、Number、NumberPicker、shuzi、sz、srk、shurukuang",
-  "单选": "单选、radio button、radio、danxuan、dx",
-  "多选": "复选、复选框、多选、Checkbox、check、fuxuan、fx、dx、duoxuan",
-  "下拉选择": "下拉选择、Select、选择器、下拉、xiala、xl、xialaxuanze、xlxz",
-  "开关": "开关、switch、kaiguan、kg",
-  "日期": "日期选择、date、DatePicker、riqi、riqixuanz、rq、rqxz",
-  "日期区间": "日期区间、Cascade、date、riqiqujian、rq",
-  "时间选择框": "时间选择、time、TimePicker、shijian、sj、shijianxuanze、sjxz、xuanzekuang",
-  "上传图片": "上传图片、upload、上传、shangchuan、sc、tupian",
-  "上传附件": "上传附件、upload、上传、shangchuan、sc、fujian",
-  "树形选择": "树形选择、树型选择、树选择、tree、TreeSelect、shu、sxz、shuxingxuanze",
-  "级联选择": "级联选择、Cascade、Cascadeselect、级联、jilian、jl、jilianxuanze、jlxz",
-  "地区选择": "地区选择、city、地址、address、地区、diqu、dq、diquxuanze、dqxz",
-  "国家选择": "国家选择、country、国家、guojia、gj、guojiaxuanze、gjxz",
-  "评分": "评分、Rate、Rating、星、pingfen、pf",
-  "明细": "明细、table、表格、表单、form、mingxi、mx",
-  "穿梭框": "穿梭框、transfer、chuansuokuang、csk",
-  "人员搜索框": "人员搜索框、employee、人员选择、选人、xuanren、xr、renyuansousuo、ryss",
-  "筛选": "筛选、pickable、shaixuan、sx",
-  "金额输入框": "金额输入框、输入框、shurukuang、srk、money、金额、jine、je",
-  "金额区间": "金额区间、money、金额、jine、je",
-  "查询": "查询、filter、chaxun、cx",
-  "表格": "表格、table、biaoge、bg",
-  "数据文本": "数据文本、Number Info、数据、shuju、sj、shujuwenben、sjwb",
-  "数据趋势": "数据趋势、Number Trend、数据、shuju、sj、shujuqushi、sjqs",
-  "勾选框": "勾选框、复选框、check box、gouxuankuang、gxk、fuxuankuang、fxk",
-  "图片浏览": "图片浏览、图片预览、image、pic、picture、图片、预览、tupianyulan、tupianliulan、tupian、tp、yulan、yl",
-  "搜索": "搜索、搜索框、查询框、查询、search、sousuo、ss",
-  "树形控件": "树形控件、树组件、tree、shuzujian、shuxingkongjian、shu、szj、sxkj",
-  "富文本框": "富文本框、RichText、fuwenben、fwb",
-  "步骤": "步骤、步骤条、step、steps、buzhoutiao、buzhou、bzt、bz",
-  "时间轴": "时间轴、时间线、timeline、shijianzhou、shijianxian、sjz、sjx",
-  "菜单": "菜单、menu、caidan、cd",
-  "气泡提示": "气泡提示、tip、tips、balloon、气泡、qipao、qp、qipaotishi、qpts",
-  "面包屑": "面包屑、breadcrumb、crumb、mianbaoxie、mbx",
-  "日历": "日历、calendar、rili、rl",
-  "折叠面板": "折叠面板、collapse、折叠、zhedie、zd、zhediemianban、zdmb",
-  "下拉菜单": "下拉菜单、dropdown、下拉、xiala、xl、xialacaidan、xlcd、菜单、caidan、cd",
-  "信息提示": "信息提示、message、alert、信息、提示、警示、xinxitishi、xxts、xinxi、xx、tishi、ts、消息、xiaoxi",
-  "进度指示器": "进度指示器、进度条、progress、jindutiao、jdt、进度、jindu、jd",
-  "翻页器": "翻页器、分页器、pagination、fanyeqi、fyq、分页、fenye、fy",
-  "轮播图": "轮播图、图片轮播、slider、轮播、lunbo、lb、lunbotu、lbt",
-  "底部通栏": "底部通栏、tool bar、通栏、dibutonglan、dbtl、浮动工具条、浮动、工具条、工具、fudong、gongju、toolbar、tool bar、fd、gj",
-  "HTML": "html",
-  "JSX": "jsx",
-  "浮动导航": "浮动导航、nav、floatNav、fudongdaohang、fddh",
-  "Iframe": "Iframe",
-  "Markdown": "Markdown",
-  "区段选择器": "区段选择、滑块选择、区段、滑块、选择、Range、quduan、huakuai、xuanze、qdxz、hkxz、xz"
-};
-
-/**
- * 
- * @param {string} title 组件名
- * @param {string} query 搜索词
- * @param {object} map 映射关系
- */
-export function searchComponent(title, query, map = {}) {
-  if (!title || !query || !map || !map[title]) {
-    return false;
-  }
-  const keys = (map[title] || '').split('、');
-  return !!keys.find(key => {
-    if (!key) {
-      return false;
-    }
-    return key.indexOf(query) > -1
-  });
-}
-
-export function debounce(func, delay) {
-  let timer
-  return function(...args) {
-    if (timer) {
-      return
-    }
-    timer = setTimeout(() => {
-      func.apply(this, args)
-      clearTimeout(timer)
-      timer = null
-    }, delay)
-  }
-}
--- a/packages/plugin-components-pane/src/utils.ts
+++ b/packages/plugin-components-pane/src/utils.ts
@ -0,0 +1,98 @@
+export const builtinSearchMap = {
+  容器: '容器、rongqi、rq、分栏、ColumnsLayout、Columns、layout、grid',
+  分栏: '分栏、ColumnsLayout、Columns、layout、grid、容器、rongqi、rq、fl、fenlan',
+  卡片: '卡片、card、kapian、kp',
+  选项卡: '选项卡、tab、tabs、页签、xuanxiangka、xxk、yeqian、yq',
+  按钮: '按钮、button、anniu、an',
+  图标: '图标、icon、tubiao、tb',
+  标题: '标题、title、biaoti、bt',
+  图片: '图片、image、pic、picture、tupian、tp',
+  Dialog: '对话框、Dialog、弹框、弹出框、duihuakuang、dhk',
+  Drawer: '抽屉、Drawer、chouti、ct、couti',
+  文本: '文本、文字、text、wenzi、wz、wenben',
+  链接: '链接、link、lianjie、lj',
+  链接块: '链接块、链接、link、lianjie、lj、ljk',
+  表单容器: '表单容器、表单、form、biaodan、bd',
+  输入框: '输入框、文本框、密码框、input、shurukuang、srk、wenbenkuang、wbk',
+  数字输入框: '数字输入框、数字、输入框、Number、NumberPicker、shuzi、sz、srk、shurukuang',
+  单选: '单选、radio button、radio、danxuan、dx',
+  多选: '复选、复选框、多选、Checkbox、check、fuxuan、fx、dx、duoxuan',
+  下拉选择: '下拉选择、Select、选择器、下拉、xiala、xl、xialaxuanze、xlxz',
+  开关: '开关、switch、kaiguan、kg',
+  日期: '日期选择、date、DatePicker、riqi、riqixuanz、rq、rqxz',
+  日期区间: '日期区间、Cascade、date、riqiqujian、rq',
+  时间选择框: '时间选择、time、TimePicker、shijian、sj、shijianxuanze、sjxz、xuanzekuang',
+  上传图片: '上传图片、upload、上传、shangchuan、sc、tupian',
+  上传附件: '上传附件、upload、上传、shangchuan、sc、fujian',
+  树形选择: '树形选择、树型选择、树选择、tree、TreeSelect、shu、sxz、shuxingxuanze',
+  级联选择: '级联选择、Cascade、Cascadeselect、级联、jilian、jl、jilianxuanze、jlxz',
+  地区选择: '地区选择、city、地址、address、地区、diqu、dq、diquxuanze、dqxz',
+  国家选择: '国家选择、country、国家、guojia、gj、guojiaxuanze、gjxz',
+  评分: '评分、Rate、Rating、星、pingfen、pf',
+  明细: '明细、table、表格、表单、form、mingxi、mx',
+  穿梭框: '穿梭框、transfer、chuansuokuang、csk',
+  人员搜索框: '人员搜索框、employee、人员选择、选人、xuanren、xr、renyuansousuo、ryss',
+  筛选: '筛选、pickable、shaixuan、sx',
+  金额输入框: '金额输入框、输入框、shurukuang、srk、money、金额、jine、je',
+  金额区间: '金额区间、money、金额、jine、je',
+  查询: '查询、filter、chaxun、cx',
+  表格: '表格、table、biaoge、bg',
+  数据文本: '数据文本、Number Info、数据、shuju、sj、shujuwenben、sjwb',
+  数据趋势: '数据趋势、Number Trend、数据、shuju、sj、shujuqushi、sjqs',
+  勾选框: '勾选框、复选框、check box、gouxuankuang、gxk、fuxuankuang、fxk',
+  图片浏览: '图片浏览、图片预览、image、pic、picture、图片、预览、tupianyulan、tupianliulan、tupian、tp、yulan、yl',
+  搜索: '搜索、搜索框、查询框、查询、search、sousuo、ss',
+  树形控件: '树形控件、树组件、tree、shuzujian、shuxingkongjian、shu、szj、sxkj',
+  富文本框: '富文本框、RichText、fuwenben、fwb',
+  步骤: '步骤、步骤条、step、steps、buzhoutiao、buzhou、bzt、bz',
+  时间轴: '时间轴、时间线、timeline、shijianzhou、shijianxian、sjz、sjx',
+  菜单: '菜单、menu、caidan、cd',
+  气泡提示: '气泡提示、tip、tips、balloon、气泡、qipao、qp、qipaotishi、qpts',
+  面包屑: '面包屑、breadcrumb、crumb、mianbaoxie、mbx',
+  日历: '日历、calendar、rili、rl',
+  折叠面板: '折叠面板、collapse、折叠、zhedie、zd、zhediemianban、zdmb',
+  下拉菜单: '下拉菜单、dropdown、下拉、xiala、xl、xialacaidan、xlcd、菜单、caidan、cd',
+  信息提示: '信息提示、message、alert、信息、提示、警示、xinxitishi、xxts、xinxi、xx、tishi、ts、消息、xiaoxi',
+  进度指示器: '进度指示器、进度条、progress、jindutiao、jdt、进度、jindu、jd',
+  翻页器: '翻页器、分页器、pagination、fanyeqi、fyq、分页、fenye、fy',
+  轮播图: '轮播图、图片轮播、slider、轮播、lunbo、lb、lunbotu、lbt',
+  底部通栏: '底部通栏、tool bar、通栏、dibutonglan、dbtl、浮动工具条、浮动、工具条、工具、fudong、gongju、toolbar、tool bar、fd、gj',
+  HTML: 'html',
+  JSX: 'jsx',
+  浮动导航: '浮动导航、nav、floatNav、fudongdaohang、fddh',
+  Iframe: 'Iframe',
+  Markdown: 'Markdown',
+  区段选择器: '区段选择、滑块选择、区段、滑块、选择、Range、quduan、huakuai、xuanze、qdxz、hkxz、xz',
+};
+
+/**
+ * @param {string} title 组件名
+ * @param {string} query 搜索词
+ * @param {object} map 映射关系
+ */
+export function searchComponent(title, query, map = {}) {
+  if (!title || !query || !map || !map[title]) {
+    return false;
+  }
+  const keys = (map[title] || '').split('、');
+  return !!keys.find(key => {
+    if (!key) {
+      return false;
+    }
+    return key.indexOf(query) > -1;
+  });
+}
+
+export function debounce(func, delay) {
+  let timer;
+  return function (...args) {
+    if (timer) {
+      return;
+    }
+    timer = setTimeout(() => {
+      func.apply(this, args);
+      clearTimeout(timer);
+      timer = null;
+    }, delay);
+  };
+}