diff --git a/packages/editor/ice.config.js b/packages/editor/ice.config.js index 71d81b8b1..6843f35bb 100644 --- a/packages/editor/ice.config.js +++ b/packages/editor/ice.config.js @@ -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'], diff --git a/packages/editor/package.json b/packages/editor/package.json index 62c301598..4e1f2cecb 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -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", diff --git a/packages/editor/public/index.html b/packages/editor/public/index.html index 9c2cc0c1a..04c747a37 100644 --- a/packages/editor/public/index.html +++ b/packages/editor/public/index.html @@ -15,7 +15,7 @@ - +
diff --git a/packages/editor/src/config/skeleton.js b/packages/editor/src/config/skeleton.js index 64826af1c..4cb8a7a87 100644 --- a/packages/editor/src/config/skeleton.js +++ b/packages/editor/src/config/skeleton.js @@ -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: [ { diff --git a/packages/editor/src/skeleton/components/LeftPlugin/index.scss b/packages/editor/src/skeleton/components/LeftPlugin/index.scss index 06b6ef63a..050a8ec4d 100644 --- a/packages/editor/src/skeleton/components/LeftPlugin/index.scss +++ b/packages/editor/src/skeleton/components/LeftPlugin/index.scss @@ -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; + } } diff --git a/packages/editor/src/skeleton/components/Panel/index.scss b/packages/editor/src/skeleton/components/Panel/index.scss index cd3211ab4..5f38863a9 100644 --- a/packages/editor/src/skeleton/components/Panel/index.scss +++ b/packages/editor/src/skeleton/components/Panel/index.scss @@ -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; } } } diff --git a/packages/editor/src/skeleton/components/TopIcon/index.scss b/packages/editor/src/skeleton/components/TopIcon/index.scss index 67622fb64..0375269d9 100644 --- a/packages/editor/src/skeleton/components/TopIcon/index.scss +++ b/packages/editor/src/skeleton/components/TopIcon/index.scss @@ -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; diff --git a/packages/editor/src/skeleton/global.scss b/packages/editor/src/skeleton/global.scss index d825900bc..b0ad64e06 100644 --- a/packages/editor/src/skeleton/global.scss +++ b/packages/editor/src/skeleton/global.scss @@ -6,7 +6,10 @@ body { * { box-sizing: border-box; } + color: $color-text1-3; } + + .next-loading { .next-loading-wrap { height: 100%; diff --git a/packages/editor/src/skeleton/layouts/LeftArea/index.scss b/packages/editor/src/skeleton/layouts/LeftArea/index.scss index dac1b6b0a..e96315458 100644 --- a/packages/editor/src/skeleton/layouts/LeftArea/index.scss +++ b/packages/editor/src/skeleton/layouts/LeftArea/index.scss @@ -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); } } diff --git a/packages/editor/src/skeleton/layouts/LeftArea/nav.tsx b/packages/editor/src/skeleton/layouts/LeftArea/nav.tsx index a5ed5cd8f..bba8a824f 100644 --- a/packages/editor/src/skeleton/layouts/LeftArea/nav.tsx +++ b/packages/editor/src/skeleton/layouts/LeftArea/nav.tsx @@ -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 = []; const bottomList: Array = []; 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') { diff --git a/packages/editor/src/skeleton/layouts/LeftArea/panel.tsx b/packages/editor/src/skeleton/layouts/LeftArea/panel.tsx index 8c03247fd..281e23246 100644 --- a/packages/editor/src/skeleton/layouts/LeftArea/panel.tsx +++ b/packages/editor/src/skeleton/layouts/LeftArea/panel.tsx @@ -59,7 +59,7 @@ export default class LeftAreaPanel extends PureComponent { const Comp = this.editor.components[item.pluginKey]; return ( - + ); diff --git a/packages/editor/src/skeleton/layouts/RightArea/index.scss b/packages/editor/src/skeleton/layouts/RightArea/index.scss index fd05f5644..fc7b4300a 100644 --- a/packages/editor/src/skeleton/layouts/RightArea/index.scss +++ b/packages/editor/src/skeleton/layouts/RightArea/index.scss @@ -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; } } } diff --git a/packages/editor/src/skeleton/layouts/RightArea/index.tsx b/packages/editor/src/skeleton/layouts/RightArea/index.tsx index 00fd7fbe6..2284d643f 100644 --- a/packages/editor/src/skeleton/layouts/RightArea/index.tsx +++ b/packages/editor/src/skeleton/layouts/RightArea/index.tsx @@ -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; - } - const Comp = this.editor.components[pane.pluginKey]; - return ( -
- -
- ); + renderTabPanels = (list:PluginConfig[], height: string):void => { + if (isEmpty(list)) { + return null; } return ( -
- - {visiblePluginList.map((item, idx) => { + {list.map((item, idx) => { const Comp = this.editor.components[item.pluginKey]; return ( + ); + } + + renderPanels = (list:PluginConfig[], height: string):void => { + return list.map((item) => { + const Comp = this.editor.components[item.pluginKey]; + return ( +
+ +
+ ); + }); + } + + 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 ( +
+ {this.renderTabPanels(tabList, height)} + {this.renderPanels(panelList, height)}
); } diff --git a/packages/editor/src/skeleton/layouts/TopArea/index.scss b/packages/editor/src/skeleton/layouts/TopArea/index.scss index 98af961da..66c87c9b1 100644 --- a/packages/editor/src/skeleton/layouts/TopArea/index.scss +++ b/packages/editor/src/skeleton/layouts/TopArea/index.scss @@ -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; } }