mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-06 18:37:07 +00:00
feat: 组件面板支持业务组件独立展示
This commit is contained in:
金禅
parent
653dc7f9c8
commit
e9d8d3dbe6
@ -13107,30 +13107,6 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"componentList": [
|
"componentList": [
|
||||||
{
|
|
||||||
"title": "Util",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"componentName": "Dropdown",
|
|
||||||
"title": "下拉菜单",
|
|
||||||
"icon": "",
|
|
||||||
"package": "@alifd/next",
|
|
||||||
"library": "Next",
|
|
||||||
"snippets": [
|
|
||||||
{
|
|
||||||
"title": "下拉菜单",
|
|
||||||
"screenshot": "",
|
|
||||||
"schema": {
|
|
||||||
"componentName": "Dropdown",
|
|
||||||
"props": { "trigger": [{ "componentName": "Button", "props": { "type": "primary" }, "children": "确定" }], "triggerType": "click"},
|
|
||||||
"children": [{ "componentName": "Menu", "props": { "style": { "width": 200 } }, "children": [{ "componentName": "Menu.Item", "props": {}, "children": "Option 1" }, { "componentName": "Menu.Item", "props": { "disabled": false }, "children": "option 2" }, { "componentName": "Menu.Item", "props": { "disabled": false }, "children": "option 3" }]}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"icon": ""
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"title": "DataDisplay",
|
"title": "DataDisplay",
|
||||||
"children": [
|
"children": [
|
||||||
@ -15388,5 +15364,31 @@
|
|||||||
],
|
],
|
||||||
"icon": ""
|
"icon": ""
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
"bizComponentList": [
|
||||||
|
{
|
||||||
|
"title": "Util",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"componentName": "Dropdown",
|
||||||
|
"title": "下拉菜单",
|
||||||
|
"icon": "",
|
||||||
|
"package": "@alifd/next",
|
||||||
|
"library": "Next",
|
||||||
|
"snippets": [
|
||||||
|
{
|
||||||
|
"title": "下拉菜单",
|
||||||
|
"screenshot": "",
|
||||||
|
"schema": {
|
||||||
|
"componentName": "Dropdown",
|
||||||
|
"props": { "trigger": [{ "componentName": "Button", "props": { "type": "primary" }, "children": "确定" }], "triggerType": "click"},
|
||||||
|
"children": [{ "componentName": "Menu", "props": { "style": { "width": 200 } }, "children": [{ "componentName": "Menu.Item", "props": {}, "children": "Option 1" }, { "componentName": "Menu.Item", "props": { "disabled": false }, "children": "option 2" }, { "componentName": "Menu.Item", "props": { "disabled": false }, "children": "option 3" }]}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"icon": ""
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -23,7 +23,6 @@
|
|||||||
"@ali/lowcode-designer": "^1.0.8-0",
|
"@ali/lowcode-designer": "^1.0.8-0",
|
||||||
"@ali/lowcode-editor-core": "^1.0.8-0",
|
"@ali/lowcode-editor-core": "^1.0.8-0",
|
||||||
"@ali/lowcode-types": "^1.0.8-0",
|
"@ali/lowcode-types": "^1.0.8-0",
|
||||||
"@ali/ve-component-list": "^1.1.1",
|
|
||||||
"@alifd/next": "^1.19.19",
|
"@alifd/next": "^1.19.19",
|
||||||
"react": "^16.8.1"
|
"react": "^16.8.1"
|
||||||
},
|
},
|
||||||
|
|||||||
270
packages/plugin-components-pane/src/components/base/index.js
Normal file
270
packages/plugin-components-pane/src/components/base/index.js
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
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";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 配置元素的操作类型
|
||||||
|
* Draggable：可拖拽
|
||||||
|
* Clickable：可点击
|
||||||
|
* All：可拖拽也可点击
|
||||||
|
*/
|
||||||
|
export const AdditiveType = {
|
||||||
|
Draggable: "additive-drag",
|
||||||
|
Clickable: "additive-click",
|
||||||
|
All: "additive",
|
||||||
|
};
|
||||||
|
|
||||||
|
class Base extends React.Component {
|
||||||
|
static propTypes = {
|
||||||
|
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: "",
|
||||||
|
renderCustomSnippet: null,
|
||||||
|
actions: [],
|
||||||
|
getComponentInfo: null,
|
||||||
|
enableSearch: false,
|
||||||
|
enableCard: true,
|
||||||
|
enableReport: true,
|
||||||
|
placeholder: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
selected: "",
|
||||||
|
searchText: "",
|
||||||
|
currentCard: null,
|
||||||
|
target: null,
|
||||||
|
currentCardImage: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
shell = null;
|
||||||
|
isEmpty = false;
|
||||||
|
mode = 'advance';
|
||||||
|
searchMap = {};
|
||||||
|
timer = null;
|
||||||
|
isMouseEnterCard = false;
|
||||||
|
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
// TODO get remote search map
|
||||||
|
this.searchMap = builtinSearchMap;
|
||||||
|
}
|
||||||
|
|
||||||
|
hasActions() {
|
||||||
|
const { actions } = this.props;
|
||||||
|
if (!actions || !Array.isArray(actions) || !actions.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
onSearch(val) {
|
||||||
|
this.setState({
|
||||||
|
searchText: val,
|
||||||
|
currentCard: null, // 清空卡片
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
normalizeBundle(mode) {
|
||||||
|
const { metaData } = this.props;
|
||||||
|
const { searchText = "" } = this.state;
|
||||||
|
const groupList = metaData.filter((comp, index) => {
|
||||||
|
const { title = "", componentName = "", id = "" } = comp;
|
||||||
|
if (!id) {
|
||||||
|
comp.id = `${comp.componentName}_${index}`;
|
||||||
|
}
|
||||||
|
const query = searchText.toLowerCase();
|
||||||
|
return (
|
||||||
|
!![title, componentName].find(
|
||||||
|
(it) => it.toLowerCase().indexOf(query) > -1
|
||||||
|
) || !!searchComponent(title, query, this.searchMap)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (mode === 'simple') {
|
||||||
|
return groupList;
|
||||||
|
}
|
||||||
|
|
||||||
|
let bundle = {};
|
||||||
|
// 按一定顺序排列
|
||||||
|
groupList.forEach((m) => {
|
||||||
|
const c = m.category || "Others";
|
||||||
|
if (!bundle[c]) {
|
||||||
|
bundle[c] = [];
|
||||||
|
}
|
||||||
|
bundle[c].push(m);
|
||||||
|
});
|
||||||
|
return bundle;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderEmptyData() {
|
||||||
|
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 }} />
|
||||||
|
<div style={{ lineHeight: 2 }}>
|
||||||
|
<div>暂无组件，请在物料站点添加</div>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderHeader() {
|
||||||
|
const { placeholder } = this.props;
|
||||||
|
return (
|
||||||
|
<Search
|
||||||
|
placeholder={
|
||||||
|
placeholder
|
||||||
|
? placeholder
|
||||||
|
: $i18n.get({
|
||||||
|
id: "trunkPaneSearchComponent",
|
||||||
|
dm: "搜索组件",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
shape="simple"
|
||||||
|
size="medium"
|
||||||
|
hasClear
|
||||||
|
defaultValue={this.state.searchText}
|
||||||
|
onChange={this.onSearch.bind(this)}
|
||||||
|
onSearch={this.onSearch.bind(this)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderActions() {
|
||||||
|
const { actions = [] } = this.props;
|
||||||
|
if (!this.hasActions()) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const len = actions.length;
|
||||||
|
// TODO:len = 1：只有一个主按钮；len = 2：一个主按钮、一个次按钮；len >=3：一个主按钮、一个次按钮、其余放在按钮组里；
|
||||||
|
return actions.map((action, idx) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
key={idx}
|
||||||
|
action={action}
|
||||||
|
className="btn"
|
||||||
|
type={idx === 0 ? "primary" : "outline"}
|
||||||
|
>
|
||||||
|
{action.title}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderBundle() {
|
||||||
|
const { metaData } = this.props;
|
||||||
|
if (!metaData || !Array.isArray(metaData) || !metaData.length) {
|
||||||
|
return this.renderEmptyData();
|
||||||
|
}
|
||||||
|
const bundle = this.normalizeBundle(this.mode);
|
||||||
|
if (!Object.keys(bundle).length || (Array.isArray(bundle) && bundle.length === 0)) {
|
||||||
|
return this.renderEmptyData();
|
||||||
|
}
|
||||||
|
this.isEmpty = false;
|
||||||
|
return this.getBundle ? this.getBundle(bundle) : this.renderEmptyData();
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCard() {
|
||||||
|
const { currentCard, target, currentCardImage } = this.state;
|
||||||
|
const { getComponentInfo } = this.props;
|
||||||
|
|
||||||
|
if (!currentCard || !getComponentInfo) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
componentPrototype={currentCard}
|
||||||
|
target={target}
|
||||||
|
customImage={currentCardImage}
|
||||||
|
subTitle={target && target.innerText || ''}
|
||||||
|
position="right top"
|
||||||
|
visible={!!currentCard}
|
||||||
|
showClose
|
||||||
|
getComponentInfo={getComponentInfo}
|
||||||
|
onHide={() => {
|
||||||
|
this.setState({ currentCard: null });
|
||||||
|
this.isMouseEnterCard = false;
|
||||||
|
}}
|
||||||
|
offset={{
|
||||||
|
top: 10,
|
||||||
|
left: 10,
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
this.isMouseEnterCard = true;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
enableSearch,
|
||||||
|
className,
|
||||||
|
registerAdditive = () => {
|
||||||
|
return;
|
||||||
|
},
|
||||||
|
} = this.props;
|
||||||
|
let bodyExtraClass = "";
|
||||||
|
if (this.hasActions() && enableSearch) {
|
||||||
|
bodyExtraClass = "small";
|
||||||
|
} else if (!this.hasActions() && enableSearch) {
|
||||||
|
bodyExtraClass = "medium";
|
||||||
|
} else if (this.hasActions() && !enableSearch) {
|
||||||
|
bodyExtraClass = "large";
|
||||||
|
} else {
|
||||||
|
bodyExtraClass = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`ve-component-list ${className}`}>
|
||||||
|
{enableSearch ? (
|
||||||
|
<div className="ve-component-list-head">
|
||||||
|
{this.renderHeader()}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div
|
||||||
|
className={`ve-component-list-body ${bodyExtraClass}`}
|
||||||
|
ref={(shell) => {
|
||||||
|
if (this.shell || !shell || this.isEmpty) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.shell) {
|
||||||
|
this.shell = shell;
|
||||||
|
}
|
||||||
|
registerAdditive(shell);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{this.renderBundle()}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`ve-component-list-foot ${
|
||||||
|
this.hasActions() ? "exist" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{this.renderActions()}
|
||||||
|
</div>
|
||||||
|
{this.renderCard ? this.renderCard() : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Base;
|
||||||
116
packages/plugin-components-pane/src/components/base/index.less
Normal file
116
packages/plugin-components-pane/src/components/base/index.less
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
@import "~@ali/ve-less-variables/index.less";
|
||||||
|
|
||||||
|
.ve-component-list {
|
||||||
|
position: absolute;
|
||||||
|
top: 45px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
.ve-component-list-head {
|
||||||
|
height: 56px;
|
||||||
|
padding: 12px;
|
||||||
|
border-bottom: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
|
||||||
|
.ve-search-control {
|
||||||
|
width: 256px;
|
||||||
|
height: 32px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ve-component-list-body {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
.ve-component-list-empty {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
&.kuma-empty-data.normal .kuma-empty-data-icon {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.component-description-item-icon-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.component-description-item-icon {
|
||||||
|
margin-left: 4px;
|
||||||
|
&.tag {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(249, 189, 15, 0.1);
|
||||||
|
color: #ff6f00;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 48px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
icon {
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(31, 56, 88, 0.4);
|
||||||
|
transition: color @transition-duration @transition-ease;
|
||||||
|
&:hover {
|
||||||
|
color: rgba(31, 56, 88, 0.6);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.small {
|
||||||
|
height: calc(100% - 56px - 48px);
|
||||||
|
}
|
||||||
|
&.medium {
|
||||||
|
height: calc(100% - 56px);
|
||||||
|
}
|
||||||
|
&.large {
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ve-component-list-foot {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
.btn {
|
||||||
|
margin-right: 8px;
|
||||||
|
flex: 1;
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.kuma-button-primary {
|
||||||
|
background-color: var(--color-brand, @brand-color-1);
|
||||||
|
border-color: var(--color-brand, @brand-color-1);
|
||||||
|
border-radius: @global-border-radius;
|
||||||
|
color: var(--color-text-reverse, @white-alpha-2);
|
||||||
|
transition: background-color @transition-duration @transition-ease;
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--color-brand-dark, @brand-color-3);
|
||||||
|
border-color: var(--color-brand-dark, @brand-color-3);
|
||||||
|
transition: background-color @transition-duration @transition-ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.exist {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { Button } from "@ali/vu-uxcore-legao-design";
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const MyButton = (props) => {
|
||||||
|
const { action, componentPrototype, type, className } = props;
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
className={className}
|
||||||
|
type={type || action.type || "outline"}
|
||||||
|
danger={action.danger || false}
|
||||||
|
onClick={() => {
|
||||||
|
if (action.fn && typeof action.fn === "function") {
|
||||||
|
action.fn(componentPrototype);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{action.title}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MyButton;
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
.ve-component-list {
|
||||||
|
.kuma-button-outline {
|
||||||
|
border-color: #0079f2;
|
||||||
|
color: #0079f2;
|
||||||
|
&:hover {
|
||||||
|
border-color: #0079f2;
|
||||||
|
color: #0079f2;
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
}
|
||||||
|
&.kuma-button-danger {
|
||||||
|
border-color: #f04631;
|
||||||
|
color: #f04631;
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(240, 70, 49, 0.06);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
147
packages/plugin-components-pane/src/components/card/index.js
Normal file
147
packages/plugin-components-pane/src/components/card/index.js
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
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 = {};
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
isLoading: true,
|
||||||
|
errorMsg: false,
|
||||||
|
componentInfo: {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
if (!this.props.getComponentInfo) return;
|
||||||
|
this.loadComponentInfo(this.props.componentPrototype);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
if (nextProps.componentPrototype !== this.props.componentPrototype) {
|
||||||
|
// 延迟执行数据加载和渲染，等 props 更新之后
|
||||||
|
this.loadComponentInfo(nextProps.componentPrototype);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadComponentInfo(componentPrototype) {
|
||||||
|
if (!this.props.getComponentInfo) return;
|
||||||
|
this.setState({ isLoading: true });
|
||||||
|
this.props
|
||||||
|
.getComponentInfo(componentPrototype)
|
||||||
|
.then((componentInfo) => {
|
||||||
|
this.setState({
|
||||||
|
componentInfo,
|
||||||
|
isLoading: false,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
this.setState({ errorMsg: e.message });
|
||||||
|
console.error(e);
|
||||||
|
if (VisualEngine) {
|
||||||
|
VisualEngine.ui.Popup.error({
|
||||||
|
content: e.message,
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { componentPrototype, subTitle, customImage } = this.props;
|
||||||
|
const { componentInfo } = this.state;
|
||||||
|
|
||||||
|
const loadingContent = this.state.errorMsg ? (
|
||||||
|
<div>
|
||||||
|
<div className="ve-loading-content">{this.state.errorMsg}</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<Icon type="loading" className="ve-loading-icon" size="large" />
|
||||||
|
<div className="ve-loading-content">
|
||||||
|
{$i18n.get({ id: "trunkPaneLoading", dm: "加载中..." })}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
version,
|
||||||
|
image = "https://img.alicdn.com/tfs/TB1XHG6ehrI8KJjy0FpXXb5hVXa-740-608.png",
|
||||||
|
desc,
|
||||||
|
detailUrl,
|
||||||
|
actions,
|
||||||
|
} = componentInfo;
|
||||||
|
|
||||||
|
let layerContent = null;
|
||||||
|
const cardTitle = subTitle && !subTitle.includes(title) ? `${title}（${subTitle}）` : title;
|
||||||
|
|
||||||
|
if (this.state.isLoading) {
|
||||||
|
layerContent = (
|
||||||
|
<div className="ve-card-wrapper ve-card-wrapper-loading" onMouseEnter={this.props.onMouseEnter}>
|
||||||
|
{loadingContent}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
layerContent = (
|
||||||
|
<div className="ve-card-wrapper" onMouseEnter={this.props.onMouseEnter}>
|
||||||
|
<div className="ve-card-top">
|
||||||
|
<div className="ve-card-title">
|
||||||
|
<span className="title">{cardTitle}</span>
|
||||||
|
<span className="version">{version}</span>
|
||||||
|
</div>
|
||||||
|
<div className="ve-card-image-wrapper">
|
||||||
|
<img src={customImage && typeof customImage === 'string' ? customImage : image} alt={cardTitle} className="ve-card-image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="ve-card-bottom">
|
||||||
|
<div className="ve-card-description">
|
||||||
|
<p>{desc}</p>
|
||||||
|
</div>
|
||||||
|
<div className="ve-operation-container">
|
||||||
|
{detailUrl ? (
|
||||||
|
<a
|
||||||
|
href={detailUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="ve-operation-item"
|
||||||
|
>
|
||||||
|
{$i18n.get({
|
||||||
|
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}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layer {...this.props} noLimitOnMaxHeight>
|
||||||
|
{layerContent}
|
||||||
|
</Layer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
130
packages/plugin-components-pane/src/components/card/index.less
Normal file
130
packages/plugin-components-pane/src/components/card/index.less
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
@import "~@ali/ve-less-variables/index.less";
|
||||||
|
|
||||||
|
.ve-card-wrapper {
|
||||||
|
width: 320px;
|
||||||
|
max-height: 360px;
|
||||||
|
overflow: auto;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&.ve-card-wrapper-loading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-card-top {
|
||||||
|
height: 186px;
|
||||||
|
background: rgba(31, 56, 88, 0.1);
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.ve-card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
position: relative;
|
||||||
|
height: 31px;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
|
||||||
|
.title {
|
||||||
|
line-height: 22px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version {
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: rgba(31, 56, 88, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-card-image-wrapper {
|
||||||
|
background-color: #fff;
|
||||||
|
.ve-card-image {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-card-bottom {
|
||||||
|
padding: 8px 16px 16px 16px;
|
||||||
|
.ve-card-description {
|
||||||
|
user-select: text;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 18px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 18px;
|
||||||
|
width: 280px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-operation-container {
|
||||||
|
margin-top: 12px;
|
||||||
|
position: relative;
|
||||||
|
.actions {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-operation-item {
|
||||||
|
color: @brand-color-1;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-operation-delete {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-card-more-operation {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
> a {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-loading-icon {
|
||||||
|
animation: spining 0.9s infinite linear;
|
||||||
|
}
|
||||||
|
.ve-loading-content {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-card-action {
|
||||||
|
padding: 0 8px !important;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ve-component-list {
|
||||||
|
.vu-layer {
|
||||||
|
border-radius: 4px !important;
|
||||||
|
.vu-layer-content {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vu-layer .vu-layer-close {
|
||||||
|
right: 9px !important;
|
||||||
|
top: 9px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,279 @@
|
|||||||
|
import Base, { AdditiveType } from "../base/index.js";
|
||||||
|
import Snippet from "../snippet";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
// 滚动事件触发灵敏度
|
||||||
|
const OFFSET_ACCURCY = 25;
|
||||||
|
|
||||||
|
const categoryMap = {
|
||||||
|
General: "常用",
|
||||||
|
Navigation: "导航",
|
||||||
|
DataEntry: "输入",
|
||||||
|
DataDisplay: "展示",
|
||||||
|
Feedback: "反馈",
|
||||||
|
Util: "工具",
|
||||||
|
Chart: "图表",
|
||||||
|
Others: "其他",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class ComponentList extends Base {
|
||||||
|
static displayName = "ComponentList";
|
||||||
|
|
||||||
|
descRefList = new Map();
|
||||||
|
navRefList = new Map();
|
||||||
|
descHeightList = new Map();
|
||||||
|
snippetMap = new Map();
|
||||||
|
currentScrollHeight = 0;
|
||||||
|
scrollFlag = true;
|
||||||
|
scroll;
|
||||||
|
scrollTimer;
|
||||||
|
state = {
|
||||||
|
selected: "",
|
||||||
|
searchText: "",
|
||||||
|
currentCard: null,
|
||||||
|
currentCardImage: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.calDescHeightList();
|
||||||
|
|
||||||
|
// mock 滚动结束事件
|
||||||
|
if (this.scroll) {
|
||||||
|
this.scroll.addEventListener("scroll", this.handleScrollEnd);
|
||||||
|
}
|
||||||
|
}, 20);
|
||||||
|
const bundle = this.normalizeBundle();
|
||||||
|
if (!bundle) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const cats = Object.keys(bundle);
|
||||||
|
if (cats.length > 0) {
|
||||||
|
const k = cats[0];
|
||||||
|
const comps = bundle[k];
|
||||||
|
if (!comps || !Array.isArray(comps) || !comps.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setState({ selected: comps[0].id });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (this.scroll) {
|
||||||
|
this.scroll.removeEventListener("scroll", this.handleScrollEnd);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleScrollEnd = () => {
|
||||||
|
clearTimeout(this.scrollTimer);
|
||||||
|
this.scrollTimer = setTimeout(() => {
|
||||||
|
// 滚动结束时归位
|
||||||
|
this.scrollFlag = true;
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
toggleComponent(id) {
|
||||||
|
const element = this.descRefList.get(id);
|
||||||
|
// 切换组件时滚动事件回调不可用
|
||||||
|
this.scrollFlag = false;
|
||||||
|
element.scrollIntoView();
|
||||||
|
this.setState({ selected: id });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleScroll(e) {
|
||||||
|
// 清空卡片
|
||||||
|
if (this.state.currentCard) {
|
||||||
|
this.setState({ currentCard: null });
|
||||||
|
}
|
||||||
|
clearTimeout(this.timer);
|
||||||
|
this.timer = null;
|
||||||
|
|
||||||
|
if (!this.scrollFlag) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const element = e.target;
|
||||||
|
const { scrollTop } = element;
|
||||||
|
|
||||||
|
// 延迟处理
|
||||||
|
if (Math.abs(scrollTop - this.currentScrollHeight) < OFFSET_ACCURCY) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.currentScrollHeight = scrollTop;
|
||||||
|
|
||||||
|
// 处理导航块滚动高亮效果
|
||||||
|
const heightList = [...this.descHeightList.entries()];
|
||||||
|
let selected;
|
||||||
|
// 当在顶部
|
||||||
|
if (scrollTop >= 0 && scrollTop < heightList[0][1]) {
|
||||||
|
selected = heightList[0][0];
|
||||||
|
} else if (scrollTop >= heightList[heightList.length - 1][1]) {
|
||||||
|
// 底部
|
||||||
|
selected = heightList[heightList.length - 1][0];
|
||||||
|
} else {
|
||||||
|
// 当在中部
|
||||||
|
for (let i = 0; i < heightList.length - 2; i++) {
|
||||||
|
const height1 = heightList[i][1];
|
||||||
|
const height2 = heightList[i + 1][1];
|
||||||
|
if (scrollTop > height1 && scrollTop < height2) {
|
||||||
|
selected = heightList[i + 1][0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.fixSideBarView(selected);
|
||||||
|
this.setState({ selected });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导航高亮块超出视口时滚动
|
||||||
|
fixSideBarView(selected) {
|
||||||
|
const nav = this.navRefList.get(selected);
|
||||||
|
if (nav) {
|
||||||
|
nav.scrollIntoView({ block: "center" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
calDescHeightList() {
|
||||||
|
let height = 0;
|
||||||
|
this.descRefList.forEach((ele, key) => {
|
||||||
|
if (!ele) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
height += ele.clientHeight;
|
||||||
|
this.descHeightList.set(key, height);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderNavigator(bundle) {
|
||||||
|
return (
|
||||||
|
<div className="ve-component-list-navigator">
|
||||||
|
{Object.keys(bundle).map((c) => {
|
||||||
|
const catTitle = categoryMap[c] || c;
|
||||||
|
const catData = bundle[c];
|
||||||
|
return this.renderNavigatorGroup(catTitle, catData);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderNavigatorGroup(title, metaData) {
|
||||||
|
const { selected } = this.state;
|
||||||
|
if (!metaData) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="navigator-group" key={title}>
|
||||||
|
<div className="navigator-group-head">
|
||||||
|
<div className="navigator-group-title">{title}</div>
|
||||||
|
</div>
|
||||||
|
{metaData.map((comp) => (
|
||||||
|
<div
|
||||||
|
className={`navigator-group-item ${AdditiveType.Draggable} ${
|
||||||
|
selected === comp.id ? "active" : ""
|
||||||
|
}`}
|
||||||
|
key={comp.id}
|
||||||
|
data-id={
|
||||||
|
(comp.snippets && comp.snippets[0] && comp.snippets[0].id) || ""
|
||||||
|
}
|
||||||
|
ref={(item) => {
|
||||||
|
this.navRefList.set(comp.id, item);
|
||||||
|
}}
|
||||||
|
onClick={() => this.toggleComponent(comp.id)}
|
||||||
|
>
|
||||||
|
<span className="navigator-group-item-title">{comp.title}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderComponentDescriptionList(bundle) {
|
||||||
|
const { renderCustomSnippet = "", enableCard = true } = this.props;
|
||||||
|
return (
|
||||||
|
<div className="component-description-list">
|
||||||
|
{Object.keys(bundle).map((cat) => {
|
||||||
|
const catData = bundle[cat];
|
||||||
|
if (!catData) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return catData.map((comp) => (
|
||||||
|
<div
|
||||||
|
className="component-description-item"
|
||||||
|
key={comp.id}
|
||||||
|
ref={(item) => {
|
||||||
|
this.descRefList.set(comp.id, item);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="component-description-item-header">
|
||||||
|
{comp.title ? (
|
||||||
|
<div className="component-description-item-title">
|
||||||
|
{comp.title}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className="component-description-item-icon-group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="component-description-item-snippets">
|
||||||
|
{comp.snippets &&
|
||||||
|
comp.snippets.map((snippet, idx) => (
|
||||||
|
<div
|
||||||
|
key={`${comp.id}-${idx}`}
|
||||||
|
ref={(i) => {
|
||||||
|
this.snippetMap.set(`${comp.id}-${idx}`, i);
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
if (!enableCard) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.setState({
|
||||||
|
currentCard: comp,
|
||||||
|
target: this.snippetMap.get(`${comp.id}-${idx}`),
|
||||||
|
currentCardImage: snippet.thumbnail
|
||||||
|
});
|
||||||
|
this.timer = null;
|
||||||
|
}, 1000);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
if (!enableCard) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
clearTimeout(this.timer);
|
||||||
|
this.timer = null;
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.isMouseEnterCard) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setState({currentCard: null});
|
||||||
|
}, 200);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Snippet
|
||||||
|
key={idx}
|
||||||
|
snippet={snippet}
|
||||||
|
renderCustomSnippet={renderCustomSnippet}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getBundle(bundle) {
|
||||||
|
return [
|
||||||
|
<div className="ve-component-list-sidebar" key="sidebar">
|
||||||
|
{this.renderNavigator(bundle)}
|
||||||
|
</div>,
|
||||||
|
<div
|
||||||
|
key="content"
|
||||||
|
className="ve-component-list-content"
|
||||||
|
onScroll={(e) => this.handleScroll(e)}
|
||||||
|
ref={(scroll) => (this.scroll = scroll)}
|
||||||
|
>
|
||||||
|
{this.renderComponentDescriptionList(bundle)}
|
||||||
|
</div>,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,117 @@
|
|||||||
|
@import "~@ali/ve-less-variables/index.less";
|
||||||
|
|
||||||
|
@text-color-active: #0079f2;
|
||||||
|
|
||||||
|
.ve-component-list {
|
||||||
|
.ve-component-list-body {
|
||||||
|
.ve-component-list-sidebar {
|
||||||
|
flex: 0 0 110px;
|
||||||
|
width: 110px;
|
||||||
|
// height: 100%;
|
||||||
|
padding-top: 11px;
|
||||||
|
border-right: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
|
||||||
|
overflow: auto;
|
||||||
|
.ve-component-list-navigator {
|
||||||
|
.navigator-group {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.navigator-group-head {
|
||||||
|
padding: 0px 12px;
|
||||||
|
color: @dark-alpha-2;
|
||||||
|
.navigator-group-title {
|
||||||
|
padding: 4px 0;
|
||||||
|
width: 100%;
|
||||||
|
line-height: 16px;
|
||||||
|
font-size: @fontSize-5;
|
||||||
|
font-weight: 700;
|
||||||
|
border-bottom: 1px solid
|
||||||
|
var(--color-line-normal, rgba(31, 56, 88, 0.1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navigator-group-item {
|
||||||
|
height: 32px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: #666666;
|
||||||
|
cursor: pointer;
|
||||||
|
.navigator-group-item-title {
|
||||||
|
font-size: @fontSize-5;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: @text-color-active;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
background: rgba(0, 121, 242, 0.1);
|
||||||
|
color: @text-color-active;
|
||||||
|
border-right: 2px solid @text-color-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ve-component-list-content {
|
||||||
|
flex: 1;
|
||||||
|
width: 250px;
|
||||||
|
// height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
.component-description-list {
|
||||||
|
padding: 10px 4px;
|
||||||
|
.component-description-item {
|
||||||
|
padding-bottom: 24px;
|
||||||
|
.component-description-item-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.component-description-item-title {
|
||||||
|
font-family: @font-family;
|
||||||
|
font-size: @fontSize-5;
|
||||||
|
font-weight: 700;
|
||||||
|
color: @text-color;
|
||||||
|
line-height: 20px;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
.component-description-item-icon-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.component-description-item-icon {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
icon {
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(31, 56, 88, 0.4);
|
||||||
|
transition: color @transition-duration @transition-ease;
|
||||||
|
&:hover {
|
||||||
|
color: rgba(31, 56, 88, 0.6);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.component-description-item-snippets {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import { Fragment } from "react";
|
||||||
|
import { Icon } from "@alifd/next";
|
||||||
|
import { AdditiveType } from "../base";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
const Snippet = (props) => {
|
||||||
|
const {
|
||||||
|
snippet,
|
||||||
|
renderCustomSnippet = "",
|
||||||
|
size = "small",
|
||||||
|
actionsInLT,
|
||||||
|
actionsInRT,
|
||||||
|
} = props;
|
||||||
|
const {
|
||||||
|
thumbnail = "https://img.alicdn.com/tfs/TB1XHG6ehrI8KJjy0FpXXb5hVXa-740-608.png",
|
||||||
|
description,
|
||||||
|
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" ? (
|
||||||
|
renderCustomSnippet(snippet)
|
||||||
|
) : (
|
||||||
|
<Fragment>
|
||||||
|
<div className="snippet-thumbnail">
|
||||||
|
{typeof thumbnail === "string" && thumbnail.startsWith("http") ? (
|
||||||
|
<img alt="thumbnail" src={thumbnail} />
|
||||||
|
) : (
|
||||||
|
<Icon className="icon" type={thumbnail || "help"} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="snippet-title">{description || title}</div>
|
||||||
|
<div className="engine-additive-helper left-top">
|
||||||
|
{actionsInLT ? actionsInLT : null}
|
||||||
|
</div>
|
||||||
|
<div className="engine-additive-helper right-top">
|
||||||
|
{actionsInRT ? actionsInRT : null}
|
||||||
|
</div>
|
||||||
|
</Fragment>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Snippet;
|
||||||
@ -0,0 +1,120 @@
|
|||||||
|
@import "~@ali/ve-less-variables/index.less";
|
||||||
|
|
||||||
|
@text-color-active: #0079f2;
|
||||||
|
|
||||||
|
.component-description-item-snippet {
|
||||||
|
position: relative;
|
||||||
|
&.small {
|
||||||
|
width: 64px;
|
||||||
|
height: 66px;
|
||||||
|
.snippet-thumbnail {
|
||||||
|
height: 40px;
|
||||||
|
img,
|
||||||
|
.icon {
|
||||||
|
max-width: 56px;
|
||||||
|
max-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.large {
|
||||||
|
width: 132px;
|
||||||
|
height: 126px;
|
||||||
|
.snippet-thumbnail {
|
||||||
|
height: 100px;
|
||||||
|
img,
|
||||||
|
.icon {
|
||||||
|
max-width: 116px;
|
||||||
|
max-height: 83px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
margin: 12px 8px 0 8px;
|
||||||
|
cursor: grab;
|
||||||
|
.snippet-title {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 4px;
|
||||||
|
font-size: @fontSize-5;
|
||||||
|
color: #666666;
|
||||||
|
text-align: center;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.snippet-thumbnail {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
border-radius: @global-border-radius;
|
||||||
|
border: 1px dashed #cdd2d9;
|
||||||
|
transition: border @transition-duration @transition-ease;
|
||||||
|
img,
|
||||||
|
.icon {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
svg * {
|
||||||
|
fill: rgba(31, 56, 88, 0.6) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.component-description-item-icon {
|
||||||
|
&.tag {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(249, 189, 15, 0.1);
|
||||||
|
color: #ff6f00;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 48px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.engine-additive-helper {
|
||||||
|
&.left-top {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
&.right-top {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
icon {
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(31, 56, 88, 0.4);
|
||||||
|
transition: color @transition-duration @transition-ease;
|
||||||
|
&:hover {
|
||||||
|
color: rgba(31, 56, 88, 0.6);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.snippet-thumbnail {
|
||||||
|
border: 2px solid @text-color-active;
|
||||||
|
transition: border @transition-duration @transition-ease;
|
||||||
|
}
|
||||||
|
.right-top {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
45
packages/plugin-components-pane/src/i18n/index.js
Normal file
45
packages/plugin-components-pane/src/i18n/index.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
const { provideIntl, destroyIntl } = require('@ali/intl-universal');
|
||||||
|
const strings = require('./strings');
|
||||||
|
|
||||||
|
let intl;
|
||||||
|
const MEDUSA_APP_NAME = 'legao-designer';
|
||||||
|
const PSEUDO_LANGUAGE_TAG = 'pd-KV';
|
||||||
|
const CURRENT_LANGUAGE = (window.locale || '').replace(/_/, '-') || 'zh-CN';
|
||||||
|
|
||||||
|
function update(language) {
|
||||||
|
destroyIntl();
|
||||||
|
intl = provideIntl({
|
||||||
|
locale: language,
|
||||||
|
messagesAIO: strings,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function get(id, variable) {
|
||||||
|
if (!intl) update();
|
||||||
|
let string = '';
|
||||||
|
let key = '';
|
||||||
|
if (typeof id === 'string') {
|
||||||
|
key = id;
|
||||||
|
string = intl.formatMessage({ id }, variable);
|
||||||
|
}
|
||||||
|
if (typeof id === 'object' && id.dm) {
|
||||||
|
id.defaultMessage = id.dm;
|
||||||
|
}
|
||||||
|
key = id.id;
|
||||||
|
string = intl.formatMessage(id, variable);
|
||||||
|
if (CURRENT_LANGUAGE === PSEUDO_LANGUAGE_TAG) {
|
||||||
|
return `##@@@${key}##${MEDUSA_APP_NAME}@@@##${string}`;
|
||||||
|
}
|
||||||
|
return string;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (PSEUDO_LANGUAGE_TAG === CURRENT_LANGUAGE) {
|
||||||
|
update('en-US');
|
||||||
|
} else {
|
||||||
|
update(CURRENT_LANGUAGE);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
get,
|
||||||
|
update,
|
||||||
|
};
|
||||||
27
packages/plugin-components-pane/src/i18n/strings/en-US.json
Normal file
27
packages/plugin-components-pane/src/i18n/strings/en-US.json
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"trunkPaneTheComponentPrototypeView": "The component prototype view does not exist and may be caused by the following reasons:",
|
||||||
|
"trunkPaneDetailedComponentInformationIs": "Detailed component information is already printed in the Console",
|
||||||
|
"trunkPaneIsTheComponentRemoved": "Is the component removed because the component cannot find the prototype view?",
|
||||||
|
"trunkPaneLoading": "Loading...",
|
||||||
|
"trunkPaneFoundComponentNameRComponentName": "Found component name: {rComponentName} has a problem",
|
||||||
|
"trunkPaneDetailedDocumentation": "Detailed documentation",
|
||||||
|
"trunkPaneComponentComponentInfoComponentNameDeletedSuccessfully": "Component {componentInfoComponentName} deleted successfully",
|
||||||
|
"trunkPaneUpdateComponent": "Update component",
|
||||||
|
"trunkPaneComponentLibrary": "Component library",
|
||||||
|
"trunkPaneSearchComponent": "Search component",
|
||||||
|
"trunkPaneCustomize": "customize",
|
||||||
|
"trunkPaneTheComponentInQuestion": "The component in question:",
|
||||||
|
"trunkPaneComponentMarket": "Component market",
|
||||||
|
"trunkPaneUncategorized": "uncategorized",
|
||||||
|
"trunkPaneNoSearchResultsYet": "No search results yet",
|
||||||
|
"trunkPaneAll": "All",
|
||||||
|
"trunkPaneClickToTheLEGO": "Click ? to the Component Center",
|
||||||
|
"trunkPaneClickToTroubleshootThe": "Click to troubleshoot the issue",
|
||||||
|
"trunkPaneComponent": "Component",
|
||||||
|
"trunkPaneComponentCenter": "Component center",
|
||||||
|
"trunkPaneClose": "╳ Close",
|
||||||
|
"trunkPaneDetail": "Detail",
|
||||||
|
"trunkPaneEdit": "Edit",
|
||||||
|
"trunkPaneDev": "Dev",
|
||||||
|
"trunkPaneHelp": "Help"
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
module.exports = {
|
||||||
|
'en-US': require('./en-US.json'),
|
||||||
|
'zh-CN': require('./zh-CN.json'),
|
||||||
|
};
|
||||||
26
packages/plugin-components-pane/src/i18n/strings/zh-CN.json
Normal file
26
packages/plugin-components-pane/src/i18n/strings/zh-CN.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"trunkPaneAll": "全部",
|
||||||
|
"trunkPaneFoundComponentNameRComponentName": "发现组件名为：{rComponentName}存在问题",
|
||||||
|
"trunkPaneNoResultsYet": "暂无结果",
|
||||||
|
"trunkPaneUpdateComponent": "更新组件",
|
||||||
|
"trunkPaneClickToTroubleshootThe": "点击排查问题",
|
||||||
|
"trunkPaneClickToTheLEGO": "点击 ? 前往组件中心",
|
||||||
|
"trunkPaneComponentLibrary": "组件库",
|
||||||
|
"trunkPaneComponentCenter": "组件中心",
|
||||||
|
"trunkPaneDetailedComponentInformationIs": "详细的组件信息已经打印在 Console 中",
|
||||||
|
"trunkPaneTheComponentPrototypeView": "组件原型视图不存在，可能由以下原因导致：",
|
||||||
|
"trunkPaneLoading": "加载中...",
|
||||||
|
"trunkPaneTheComponentInQuestion": "存在问题的组件：",
|
||||||
|
"trunkPaneIsTheComponentRemoved": "由于该组件找不到原型视图，是否移除组件？",
|
||||||
|
"trunkPaneDetailedDocumentation": "详细文档",
|
||||||
|
"trunkPaneUncategorized": "未分类",
|
||||||
|
"trunkPaneComponentMarket": "组件市场",
|
||||||
|
"trunkPaneCustomize": "自定义",
|
||||||
|
"trunkPaneSearchComponent": "搜索组件",
|
||||||
|
"trunkPaneComponent": "组件",
|
||||||
|
"trunkPaneClose": "╳ 关闭",
|
||||||
|
"trunkPaneDetail": "详情",
|
||||||
|
"trunkPaneEdit": "编辑",
|
||||||
|
"detrunkPaneDev": "开发版",
|
||||||
|
"trunkPaneHelp": "帮助"
|
||||||
|
}
|
||||||
@ -1,5 +1,7 @@
|
|||||||
import { Component, ReactNode } from 'react';
|
import { Component, ReactNode } from 'react';
|
||||||
import ComponentList, { AdditiveType } from "@ali/ve-component-list";
|
import { Tab } from '@alifd/next';
|
||||||
|
import ComponentList from "./components/component-list";
|
||||||
|
import { AdditiveType } from "./components/base"
|
||||||
import { PluginProps } from '@ali/lowcode-types';
|
import { PluginProps } from '@ali/lowcode-types';
|
||||||
import { Designer } from '@ali/lowcode-designer';
|
import { Designer } from '@ali/lowcode-designer';
|
||||||
|
|
||||||
@ -7,6 +9,7 @@ import './index.scss';
|
|||||||
|
|
||||||
export interface IState {
|
export interface IState {
|
||||||
metaData: object[];
|
metaData: object[];
|
||||||
|
bizComponents: object[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ComponentListPlugin extends Component<PluginProps, IState> {
|
export default class ComponentListPlugin extends Component<PluginProps, IState> {
|
||||||
@ -18,6 +21,7 @@ export default class ComponentListPlugin extends Component<PluginProps, IState>
|
|||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
metaData: [],
|
metaData: [],
|
||||||
|
bizComponents: [],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -61,9 +65,11 @@ export default class ComponentListPlugin extends Component<PluginProps, IState>
|
|||||||
const { editor } = this.props;
|
const { editor } = this.props;
|
||||||
const assets = editor.get('assets') || {};
|
const assets = editor.get('assets') || {};
|
||||||
const metaData = this.transformMetaData(assets.componentList);
|
const metaData = this.transformMetaData(assets.componentList);
|
||||||
|
const bizComponents = this.transformMetaData(assets.bizComponentList);
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
metaData,
|
metaData,
|
||||||
|
bizComponents,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -126,15 +132,27 @@ export default class ComponentListPlugin extends Component<PluginProps, IState>
|
|||||||
}
|
}
|
||||||
|
|
||||||
render(): ReactNode {
|
render(): ReactNode {
|
||||||
const { metaData } = this.state;
|
const { metaData, bizComponents } = this.state;
|
||||||
return (
|
return (
|
||||||
<div className="lowcode-component-list">
|
<div className="lowcode-component-list">
|
||||||
<ComponentList
|
<Tab>
|
||||||
key="component-pane"
|
<Tab.Item title="基础组件" key="base-components">
|
||||||
metaData={metaData}
|
<ComponentList
|
||||||
registerAdditive={(shell: Element | null) => this.registerAdditive(shell)}
|
key="component-pane"
|
||||||
enableSearch
|
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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
99
packages/plugin-components-pane/src/utils.js
Normal file
99
packages/plugin-components-pane/src/utils.js
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user