github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-14 21:12:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat:daily tag

Browse Source
This commit is contained in:
下羊 2020-03-11 19:15:01 +08:00
parent 4965e7ddd7
commit 3c44a68ccb
14 changed files with 135 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/ice.config.js
View File

@ -12,7 +12,7 @@ module.exports = {
},
plugins: [
['ice-plugin-fusion', {
themePackage: '@alife/dpl-iceluna',
themePackage: '@alife/theme-lowcode-light',
}],
['ice-plugin-moment-locales', {
locales: ['zh-cn'],

2
packages/editor/package.json
View File

@ -7,6 +7,8 @@
"@ali/iceluna-sdk": "^1.0.5-beta.26",
"@alifd/next": "^1.x",
"@alife/dpl-iceluna": "^2.3.2",
"@alife/theme-lowcode-dark": "^0.1.0",
"@alife/theme-lowcode-light": "^0.1.0",
"@icedesign/theme": "^1.x",
"events": "^3.1.0",
"intl-messageformat": "^8.2.1",

2
packages/editor/public/index.html
View File

@ -15,7 +15,7 @@
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
</head>
<body>
<body class="dark">
<div id="ice-container"></div>
</body>
</html>

50
packages/editor/src/config/skeleton.js
View File

@ -150,7 +150,11 @@ export default {
props: {
align: 'top',
title: 'panel2',
icon: 'dengpao'
icon: 'dengpao',
panelProps: {
defaultWidth: 400,
floatable: true
}
},
config: {
package: '@ali/iceluna-addon-2',
@ -212,6 +216,50 @@ export default {
},
pluginProps: {}
},
{
pluginKey: 'rightPanel1',
type: 'TabPanel',
props: {
title: '样式'
},
config: {
version: '^1.0.0'
},
pluginProps: {}
},
{
pluginKey: 'rightPanel2',
type: 'TabPanel',
props: {
title: '属性'
},
config: {
version: '^1.0.0'
},
pluginProps: {}
},
{
pluginKey: 'rightPanel3',
type: 'TabPanel',
props: {
title: '事件'
},
config: {
version: '^1.0.0'
},
pluginProps: {}
},
{
pluginKey: 'rightPanel4',
type: 'TabPanel',
props: {
title: '数据'
},
config: {
version: '^1.0.0'
},
pluginProps: {}
}
],
centerArea: [
{

30
packages/editor/src/skeleton/components/LeftPlugin/index.scss
View File

@ -6,27 +6,15 @@
position: relative;
cursor: pointer;
transition: all 0.3s ease;
color: #777;
color: $color-text1-3;
&.collapse {
height: 40px;
color: #8c8c8c;
border-bottom: 1px solid #bfbfbf;
border-bottom: 1px solid $color-line1-1;
opacity: 0.6;
}
&.locked {
color: red !important;
}
&.active {
color: #fff !important;
background-color: $color-brand1-9 !important;
&.disabled {
color: #fff;
background-color: $color-fill1-7;
}
}
&.disabled {
cursor: not-allowed;
color: $color-text1-1;
}
&:hover {
background-color: $color-brand1-1;
color: $color-brand1-6;
@ -56,4 +44,16 @@
z-index: 100;
}
}
&.active {
color: $color-white;
background-color: $color-brand1-9;
&.disabled {
color: $color-white;
background-color: $color-fill1-4;
}
}
&.disabled {
cursor: not-allowed;
color: $color-text1-1;
}
}

10
packages/editor/src/skeleton/components/Panel/index.scss
View File

@ -2,12 +2,12 @@
user-select: none;
overflow: hidden;
position: relative;
background: #ffffff;
background: $card-background;
transition: width 0.3s ease;
transform: translate3d(0, 0, 0);
height: 100%;
&.visible {
border-right: 1px solid #bfbfbf;
border-right: 1px solid $color-line1-1;
}
.drag-area {
display: none;
@ -16,7 +16,7 @@
position: absolute;
top: 0;
bottom: 0;
z-index: 999;
z-index: 99;
}
&.draggable {
.drag-area {
@ -41,12 +41,12 @@
}
&.left {
&.floatable {
left: 44px;
left: 48px;
}
}
&.right {
&.floatable {
right: 44px;
right: 48px;
}
}
}

4
packages/editor/src/skeleton/components/TopIcon/index.scss
View File

@ -6,7 +6,7 @@
text-align: center;
border-radius: 8px;
border: 1px solid transparent;
color: #777;
color: $color-text1-3;
&.disabled {
cursor: not-allowed;
color: $color-text1-1;
@ -51,7 +51,7 @@
}
i.next-icon {
&:before {
font-size: 17px;
font-size: 16px;
}
margin-right: 0;
line-height: 18px;

3
packages/editor/src/skeleton/global.scss
View File

@ -6,7 +6,10 @@ body {
* {
box-sizing: border-box;
}
color: $color-text1-3;
}
.next-loading {
.next-loading-wrap {
height: 100%;

8
packages/editor/src/skeleton/layouts/LeftArea/index.scss
View File

@ -1,21 +1,21 @@
.lowcode-left-area-nav {
width: 48px;
height: 100%;
background: #ffffff;
border-right: 1px solid #e8ebee;
background-color: $card-background;
border-right: 1px solid $color-line1-1;
position: relative;
.top-area {
position: absolute;
top: 0;
width: 100%;
background: #ffffff;
background-color: $card-background;
max-height: 100%;
}
.bottom-area {
position: absolute;
bottom: 20px;
width: 100%;
background: #ffffff;
background-color: $card-background;
max-height: calc(100% - 20px);
}
}

5
packages/editor/src/skeleton/layouts/LeftArea/nav.tsx
View File

@ -4,7 +4,7 @@ import './index.scss';
import Editor from '../../../framework/editor';
import { PluginConfig } from '../../../framework/definitions';
import AreaManager from '../../../framework/areaManager';
import { isEmpty } from '../../../framework/utils';
export interface LeftAreaNavProps {
editor: Editor;
}
@ -138,6 +138,9 @@ export default class LeftAreaNav extends PureComponent<LeftAreaNavProps, LeftAre
const topList: Array<PluginConfig> = [];
const bottomList: Array<PluginConfig> = [];
const visiblePluginList = this.areaManager.getVisiblePluginList();
if (isEmpty(visiblePluginList)){
return null;
}
visiblePluginList.forEach(item => {
const align = item.props && item.props.align === 'bottom' ? 'bottom' : 'top';
if (align === 'bottom') {

2
packages/editor/src/skeleton/layouts/LeftArea/panel.tsx
View File

@ -59,7 +59,7 @@ export default class LeftAreaPanel extends PureComponent<LeftAreaPanelProps, Lef
{list.map((item, idx) => {
const Comp = this.editor.components[item.pluginKey];
return (
<Panel key={item.pluginKey} visible={item.pluginKey === activeKey}>
<Panel key={item.pluginKey} visible={item.pluginKey === activeKey} {...(item.props && item.props.panelProps)}>
<Comp editor={this.editor} config={item} {...item.pluginProps} />
</Panel>
);

11
packages/editor/src/skeleton/layouts/RightArea/index.scss
View File

@ -1,8 +1,8 @@
.lowcode-right-area {
width: 300px;
height: 100%;
background-color: #ffffff;
border-left: 1px solid #e8ebee;
background-color: $card-background;
border-left: 1px solid $color-line1-1;
.right-plugin-title {
&.locked {
color: red !important;
@ -16,6 +16,11 @@
}
}
.right-panel {
overflow: auto;
border-top: 1px solid $color-line1-1;
}
//tab定义
.next-tabs-wrapped.right-tabs {
display: flex;
@ -37,7 +42,7 @@
width: 25%;
&.active {
background: none;
border-bottom-color: #f7f7f7 !important;
border-bottom-color: $color-line1-1 !important;
}
}
}

54
packages/editor/src/skeleton/layouts/RightArea/index.tsx
View File

@ -4,6 +4,7 @@ import './index.scss';
import Editor from '../../../framework/editor';
import AreaManager from '../../../framework/areaManager';
import { PluginConfig } from '../../../framework/definitions';
import { isEmpty } from '../../../framework/utils';
export interface RightAreaProps {
editor: Editor;
@ -31,7 +32,7 @@ export default class RightArea extends PureComponent<RightAreaProps, RightAreaSt
componentDidMount() {
this.editor.on('skeleton.update', this.handleSkeletonUpdate);
this.editor.on('rightNav.change', this.handlePluginChange);
const visiblePluginList = this.areaManager.getVisiblePluginList();
const visiblePluginList = this.areaManager.getVisiblePluginList('TabPanel');
const defaultKey = (visiblePluginList[0] && visiblePluginList[0].pluginKey) || 'componentAttr';
this.handlePluginChange(defaultKey, true);
}
@ -126,33 +127,22 @@ export default class RightArea extends PureComponent<RightAreaProps, RightAreaSt
return renderTitle();
};
render() {
const visiblePluginList = this.areaManager.getVisiblePluginList();
if (visiblePluginList.length < 2) {
const pane = visiblePluginList[0];
if (!pane) {
return <div className="lowcode-right-area"></div>;
}
const Comp = this.editor.components[pane.pluginKey];
return (
<div className="lowcode-right-area">
<Comp editor={this.editor} config={pane} {...pane.pluginProps} />
</div>
);
renderTabPanels = (list:PluginConfig[], height: string):void => {
if (isEmpty(list)) {
return null;
}
return (
<div className="lowcode-right-area">
<Tab
<Tab
shape="wrapped"
className="right-tabs"
style={{
height: '100%'
height
}}
activeKey={this.state.activeKey}
lazyLoad={false}
onChange={this.handlePluginChange}
>
{visiblePluginList.map((item, idx) => {
{list.map((item, idx) => {
const Comp = this.editor.components[item.pluginKey];
return (
<Tab.Item
@ -165,6 +155,34 @@ export default class RightArea extends PureComponent<RightAreaProps, RightAreaSt
);
})}
</Tab>
);
}
renderPanels = (list:PluginConfig[], height: string):void => {
return list.map((item) => {
const Comp = this.editor.components[item.pluginKey];
return (
<div className="right-panel" style={{height}} key={item.pluginKey}>
<Comp editor={this.editor} config={item} {...item.pluginProps} />
</div>
);
});
}
render() {
const tabList = this.areaManager.getVisiblePluginList('TabPanel');
const panelList = this.areaManager.getVisiblePluginList('Panel');
if (isEmpty(panelList) && isEmpty(tabList)) {
return null;
} else if (tabList.length === 1) {
panelList.unshift(tabList[0]);
tabList.splice(0, 1);
}
const height = `${Math.floor(100 / (panelList.length + (tabList.length > 0 ? 1 : 0)))}%`;
return (
<div className="lowcode-right-area">
{this.renderTabPanels(tabList, height)}
{this.renderPanels(panelList, height)}
</div>
);
}

8
packages/editor/src/skeleton/layouts/TopArea/index.scss
View File

@ -4,14 +4,14 @@
left: 0;
width: 100%;
height: 48px;
background-color: #ffffff;
border-bottom: 1px solid #e8ebee;
background-color: $card-background;
border-bottom: 1px solid $color-line1-1;
user-select: none;
.divider {
max-width: 0;
margin: 8px 12px;
height: 30px;
border-right: 1px solid rgba(191, 191, 191, 0.3);
border-right: 1px solid $color-line1-2;
}
.next-col {
text-align: center;
@ -21,6 +21,6 @@
right: 12px;
top: 0;
height: 100%;
background: #ffffff;
background: $card-background;
}
}