github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-14 13:03:07 +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: [ plugins: [
['ice-plugin-fusion', { ['ice-plugin-fusion', {
themePackage: '@alife/dpl-iceluna', themePackage: '@alife/theme-lowcode-light',
}], }],
['ice-plugin-moment-locales', { ['ice-plugin-moment-locales', {
locales: ['zh-cn'], locales: ['zh-cn'],

2
packages/editor/package.json
View File

@ -7,6 +7,8 @@
"@ali/iceluna-sdk": "^1.0.5-beta.26", "@ali/iceluna-sdk": "^1.0.5-beta.26",
"@alifd/next": "^1.x", "@alifd/next": "^1.x",
"@alife/dpl-iceluna": "^2.3.2", "@alife/dpl-iceluna": "^2.3.2",
"@alife/theme-lowcode-dark": "^0.1.0",
"@alife/theme-lowcode-light": "^0.1.0",
"@icedesign/theme": "^1.x", "@icedesign/theme": "^1.x",
"events": "^3.1.0", "events": "^3.1.0",
"intl-messageformat": "^8.2.1", "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> <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
</head> </head>
<body> <body class="dark">
<div id="ice-container"></div> <div id="ice-container"></div>
</body> </body>
</html> </html>

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

@ -150,7 +150,11 @@ export default {
props: { props: {
align: 'top', align: 'top',
title: 'panel2', title: 'panel2',
icon: 'dengpao' icon: 'dengpao',
panelProps: {
defaultWidth: 400,
floatable: true
}
}, },
config: { config: {
package: '@ali/iceluna-addon-2', package: '@ali/iceluna-addon-2',
@ -212,6 +216,50 @@ export default {
}, },
pluginProps: {} 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: [ centerArea: [
{ {

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

@ -6,27 +6,15 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
color: #777; color: $color-text1-3;
&.collapse { &.collapse {
height: 40px; height: 40px;
color: #8c8c8c; border-bottom: 1px solid $color-line1-1;
border-bottom: 1px solid #bfbfbf; opacity: 0.6;
} }
&.locked { &.locked {
color: red !important; 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 { &:hover {
background-color: $color-brand1-1; background-color: $color-brand1-1;
color: $color-brand1-6; color: $color-brand1-6;
@ -56,4 +44,16 @@
z-index: 100; 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; user-select: none;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #ffffff; background: $card-background;
transition: width 0.3s ease; transition: width 0.3s ease;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
height: 100%; height: 100%;
&.visible { &.visible {
border-right: 1px solid #bfbfbf; border-right: 1px solid $color-line1-1;
} }
.drag-area { .drag-area {
display: none; display: none;
@ -16,7 +16,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 999; z-index: 99;
} }
&.draggable { &.draggable {
.drag-area { .drag-area {
@ -41,12 +41,12 @@
} }
&.left { &.left {
&.floatable { &.floatable {
left: 44px; left: 48px;
} }
} }
&.right { &.right {
&.floatable { &.floatable {
right: 44px; right: 48px;
} }
} }
} }

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

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

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

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

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

@ -1,21 +1,21 @@
.lowcode-left-area-nav { .lowcode-left-area-nav {
width: 48px; width: 48px;
height: 100%; height: 100%;
background: #ffffff; background-color: $card-background;
border-right: 1px solid #e8ebee; border-right: 1px solid $color-line1-1;
position: relative; position: relative;
.top-area { .top-area {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
background: #ffffff; background-color: $card-background;
max-height: 100%; max-height: 100%;
} }
.bottom-area { .bottom-area {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
width: 100%; width: 100%;
background: #ffffff; background-color: $card-background;
max-height: calc(100% - 20px); 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 Editor from '../../../framework/editor';
import { PluginConfig } from '../../../framework/definitions'; import { PluginConfig } from '../../../framework/definitions';
import AreaManager from '../../../framework/areaManager'; import AreaManager from '../../../framework/areaManager';
import { isEmpty } from '../../../framework/utils';
export interface LeftAreaNavProps { export interface LeftAreaNavProps {
editor: Editor; editor: Editor;
} }
@ -138,6 +138,9 @@ export default class LeftAreaNav extends PureComponent<LeftAreaNavProps, LeftAre
const topList: Array<PluginConfig> = []; const topList: Array<PluginConfig> = [];
const bottomList: Array<PluginConfig> = []; const bottomList: Array<PluginConfig> = [];
const visiblePluginList = this.areaManager.getVisiblePluginList(); const visiblePluginList = this.areaManager.getVisiblePluginList();
if (isEmpty(visiblePluginList)){
return null;
}
visiblePluginList.forEach(item => { visiblePluginList.forEach(item => {
const align = item.props && item.props.align === 'bottom' ? 'bottom' : 'top'; const align = item.props && item.props.align === 'bottom' ? 'bottom' : 'top';
if (align === 'bottom') { 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) => { {list.map((item, idx) => {
const Comp = this.editor.components[item.pluginKey]; const Comp = this.editor.components[item.pluginKey];
return ( 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} /> <Comp editor={this.editor} config={item} {...item.pluginProps} />
</Panel> </Panel>
); );

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

@ -1,8 +1,8 @@
.lowcode-right-area { .lowcode-right-area {
width: 300px; width: 300px;
height: 100%; height: 100%;
background-color: #ffffff; background-color: $card-background;
border-left: 1px solid #e8ebee; border-left: 1px solid $color-line1-1;
.right-plugin-title { .right-plugin-title {
&.locked { &.locked {
color: red !important; color: red !important;
@ -16,6 +16,11 @@
} }
} }
.right-panel {
overflow: auto;
border-top: 1px solid $color-line1-1;
}
//tab定义 //tab定义
.next-tabs-wrapped.right-tabs { .next-tabs-wrapped.right-tabs {
display: flex; display: flex;
@ -37,7 +42,7 @@
width: 25%; width: 25%;
&.active { &.active {
background: none; 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 Editor from '../../../framework/editor';
import AreaManager from '../../../framework/areaManager'; import AreaManager from '../../../framework/areaManager';
import { PluginConfig } from '../../../framework/definitions'; import { PluginConfig } from '../../../framework/definitions';
import { isEmpty } from '../../../framework/utils';
export interface RightAreaProps { export interface RightAreaProps {
editor: Editor; editor: Editor;
@ -31,7 +32,7 @@ export default class RightArea extends PureComponent<RightAreaProps, RightAreaSt
componentDidMount() { componentDidMount() {
this.editor.on('skeleton.update', this.handleSkeletonUpdate); this.editor.on('skeleton.update', this.handleSkeletonUpdate);
this.editor.on('rightNav.change', this.handlePluginChange); 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'; const defaultKey = (visiblePluginList[0] && visiblePluginList[0].pluginKey) || 'componentAttr';
this.handlePluginChange(defaultKey, true); this.handlePluginChange(defaultKey, true);
} }
@ -126,33 +127,22 @@ export default class RightArea extends PureComponent<RightAreaProps, RightAreaSt
return renderTitle(); return renderTitle();
}; };
render() { renderTabPanels = (list:PluginConfig[], height: string):void => {
const visiblePluginList = this.areaManager.getVisiblePluginList(); if (isEmpty(list)) {
if (visiblePluginList.length < 2) { return null;
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>
);
} }
return ( return (
<div className="lowcode-right-area"> <Tab
<Tab
shape="wrapped" shape="wrapped"
className="right-tabs" className="right-tabs"
style={{ style={{
height: '100%' height
}} }}
activeKey={this.state.activeKey} activeKey={this.state.activeKey}
lazyLoad={false} lazyLoad={false}
onChange={this.handlePluginChange} onChange={this.handlePluginChange}
> >
{visiblePluginList.map((item, idx) => { {list.map((item, idx) => {
const Comp = this.editor.components[item.pluginKey]; const Comp = this.editor.components[item.pluginKey];
return ( return (
<Tab.Item <Tab.Item
@ -165,6 +155,34 @@ export default class RightArea extends PureComponent<RightAreaProps, RightAreaSt
); );
})} })}
</Tab> </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> </div>
); );
} }

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

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