mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-02 23:37:04 +00:00
Merge branch feat/components-panel-support-bizcomps into release/1.0.0
Title: fix: 修复 asset 中 componentList 为空时报错的 bug 修复 assets 中 componentList 为空时组件面板报错的 bug Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/3717901
This commit is contained in:
rongbin.arb
commit
e2da4faf7e
@ -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": ""
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,10 +20,12 @@
|
|||||||
],
|
],
|
||||||
"author": "xiayang.xy",
|
"author": "xiayang.xy",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ali/intl-universal": "^0.4.12",
|
||||||
"@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",
|
"@ali/vu-layer": "^4.0.1",
|
||||||
|
"@ali/vu-uxcore-legao-design": "^1.4.0",
|
||||||
"@alifd/next": "^1.19.19",
|
"@alifd/next": "^1.19.19",
|
||||||
"react": "^16.8.1"
|
"react": "^16.8.1"
|
||||||
},
|
},
|
||||||
|
|||||||
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
259
packages/plugin-components-pane/src/components/base/index.tsx
Normal file
259
packages/plugin-components-pane/src/components/base/index.tsx
Normal file
@ -0,0 +1,259 @@
|
|||||||
|
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';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 配置元素的操作类型
|
||||||
|
* 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,
|
||||||
|
actions: PropTypes.array,
|
||||||
|
getComponentInfo: PropTypes.func,
|
||||||
|
enableSearch: PropTypes.bool,
|
||||||
|
placeholder: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
static defaultProps = {
|
||||||
|
metaData: [],
|
||||||
|
registerAdditive: () => {},
|
||||||
|
className: '',
|
||||||
|
renderCustomSnippet: null,
|
||||||
|
actions: [],
|
||||||
|
getComponentInfo: null,
|
||||||
|
enableSearch: false,
|
||||||
|
enableCard: true,
|
||||||
|
enableReport: true,
|
||||||
|
placeholder: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
searchText: '',
|
||||||
|
currentCard: null,
|
||||||
|
target: null,
|
||||||
|
currentCardImage: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
shell = null;
|
||||||
|
isEmpty = false;
|
||||||
|
mode = 'advance';
|
||||||
|
searchMap = {};
|
||||||
|
timer = null;
|
||||||
|
isMouseEnterCard = false;
|
||||||
|
|
||||||
|
|
||||||
|
UNSAFE_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;
|
||||||
|
}
|
||||||
|
|
||||||
|
const 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
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
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 = () => {
|
||||||
|
|
||||||
|
},
|
||||||
|
} = 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;
|
||||||
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
141
packages/plugin-components-pane/src/components/card/index.tsx
Normal file
141
packages/plugin-components-pane/src/components/card/index.tsx
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
UNSAFE_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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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,278 @@
|
|||||||
|
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: '其他',
|
||||||
|
};
|
||||||
|
|
||||||
|
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 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,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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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 || null}
|
||||||
|
</div>
|
||||||
|
<div className="engine-additive-helper right-top">
|
||||||
|
{actionsInRT || null}
|
||||||
|
</div>
|
||||||
|
</Fragment>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Snippet;
|
||||||
45
packages/plugin-components-pane/src/i18n/index.ts
Normal file
45
packages/plugin-components-pane/src/i18n/index.ts
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
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 @@
|
|||||||
|
export default {
|
||||||
|
'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,12 +1,15 @@
|
|||||||
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';
|
||||||
|
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
export interface IState {
|
export interface IState {
|
||||||
metaData: object[];
|
metaData: Record<string, unknown>[];
|
||||||
|
bizComponents: Record<string, unknown>[];
|
||||||
}
|
}
|
||||||
|
|
||||||
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: [],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -31,7 +35,10 @@ export default class ComponentListPlugin extends Component<PluginProps, IState>
|
|||||||
}
|
}
|
||||||
|
|
||||||
transformMetaData(componentList: any): any {
|
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) => {
|
componentList.forEach((category: any, categoryId: number) => {
|
||||||
if (Array.isArray(category?.children)) {
|
if (Array.isArray(category?.children)) {
|
||||||
category.children.forEach((comp: any, compId: number) => {
|
category.children.forEach((comp: any, compId: number) => {
|
||||||
@ -61,9 +68,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,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -92,20 +101,7 @@ export default class ComponentListPlugin extends Component<PluginProps, IState>
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const click = (e: Event) => {
|
const click = (e: Event) => { console.log(e); };
|
||||||
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;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
shell.addEventListener('click', click);
|
shell.addEventListener('click', click);
|
||||||
|
|
||||||
@ -126,15 +122,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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
98
packages/plugin-components-pane/src/utils.ts
Normal file
98
packages/plugin-components-pane/src/utils.ts
Normal file
@ -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);
|
||||||
|
};
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user