refactor: 将所有的布局移出css

private/constants.ts

@@ -362,3 +362,12 @@ export const CONNECT_CHARSET = [
     value: 'CP850',
   },
 ];
+
+
+const DecDcm = {
+  TEST_STATUS_WAITING: 1,
+  TEST_STATUS_SUCCESS: 2,
+  TEST_STATUS_FAIL: 3,
+};
+
+export default DecDcm;

src/app/app.ts

@@ -1,4 +1,4 @@
-import {Vtape} from '../ui/index';
+import {Vtape, Left, Vertical, Absolute} from '../ui/index';
 import appModel from './app.model';
 import title from './title/title';
 import linkSet from './link_set/link_set';
@@ -13,19 +13,34 @@ const Widget = BI.inherit(BI.Widget, {
   render() {
     return {
       type: Vtape,
-      cls: 'database-connection-layout',
-      items: [{
+      cls: 'dec-webui-dcm-layout',
+      items: [
+        {
           el: {
             type: title,
           },
           height: 40,
         },
         {
+          type: Absolute,
+          items: [{
+            el: {
               type: linkSet,
             },
-      {
+            left: 10,
+            top: 10,
+            right: 10,
+            bottom: 10,
+          }, {
+            el: {
               type: linkStatus,
             },
+            left: 10,
+            top: 10,
+            right: 10,
+            bottom: 10,
+          }],
+        },
       ],
     };
   },

src/app/link_set/left/left_item/left_item.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Left, Label, Icon, TextButton} from '@ui';
+import {WidgetType, Left, Label, Icon, TextButton, Right, LeftRightVerticalAdapt} from '@ui';
 import ItemIcon from './left_item_icon';
 import Model from '../../link_set.model';
 import {ACTION_COPY, ACTION_TEST, ACTION_DELETE, DEFAULT_INFO} from '@private/constants';
@@ -16,10 +16,12 @@ const Widget: WidgetType = {
     const {title, extraCls, creator, text, id} = this.options;
     
     return {
-      type: Left,
-      cls: 'left-item',
+      type: LeftRightVerticalAdapt,
+      cls: 'link-item cursor-pointer',
+      height: 24,
       extraCls,
-      items: [
+      items: {
+        left: [
           {
             type: Icon,
             cls: 'link-font',
@@ -31,6 +33,7 @@ const Widget: WidgetType = {
           {
             type: TextButton,
             cls: 'link-title',
+            textHeight: 24,
             textAlign: 'left',
             text: title,
             title,
@@ -38,41 +41,37 @@ const Widget: WidgetType = {
               this.store.setLinkSelected(title);
             },
           },
-        {
-          type: Left,
-          cls: 'icons',
-          items: [
+        ],
+        right: [
           {
             type: ItemIcon,
-              cls: 'test-font',
+            cls: 'link-item-icon test-font',
             title: BI.i18nText('Dec-Dcm_Test_Connection'),
             value: ACTION_TEST,
             id,
           },
           {
             type: ItemIcon,
-              cls: 'copy-font',
+            cls: 'link-item-icon copy-font',
             title: BI.i18nText('Dec-Dcm_Copy'),
             value: ACTION_COPY,
             id,
           },
           {
             type: ItemIcon,
-              cls: 'info-font',
+            cls: 'link-item-icon info-font',
             title: `${BI.i18nText('Dec-Dcm_Type')}：${text === DEFAULT_INFO ? BI.i18nText('Dec-Dcm_Other') : text} \r\n${BI.i18nText('Dec-Dcm_Creator')}：${creator}`,
             id,
           },
           {
             type: ItemIcon,
-              cls: 'delete-font',
+            cls: 'link-item-icon delete-font',
             title: BI.i18nText('Dec-Dcm_Delete'),
             value: ACTION_DELETE,
             id,
           },
         ],
       },
-        
-      ],
     };
   },
 };

src/app/link_set/link_set.model.ts

@@ -5,7 +5,6 @@ import {getCnnectionName} from './select/select.service';
 import {DATA_BASE_TYPE} from '@private/constants';
 import dialog from '@shared/service/dialog.service';
 import {saveConnection} from './link_set.service';
-
 const className = 'fr.model.linkset';
 const Model: ModelType = {
   context: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'connectionNameErr'],
@@ -54,10 +53,10 @@ const Model: ModelType = {
       }
     },
     _textLink(id: string) {
-      const loadingId = dialog.loading(BI.i18nText('Dec-Dcm_Connection_Testing'));
       const link = this.model.linkList.find((item: LinkType) => item.connectionId === id);
+      const loadingId = dialog.loading(BI.i18nText('Dec-Dcm_Connection_Testing'));
       testConnection(link, (res: any) => {
-        dialog.close(loadingId);
+        dialog.remove(loadingId);
         if (res && res.errorCode) {
           dialog.linkFail(`${link.connectionName}${BI.i18nText('Dec-Dcm_Connection_Test_Fail')}`, res.errorMsg, () => {
             this._textLink(id);

src/app/link_set/link_set.ts

@@ -17,19 +17,21 @@ const Widget: WidgetType = {
   render() {
     return {
       type: Htape,
-      cls: 'linkset',
+      cls: 'dcm-link-group',
       items: [{
         el: {
           type: Vtape,
-          cls: 'database-left',
+          cls: 'dcm-link-left bi-border-right',
           items: [
             {
               el: {
                 type: Left,
-                cls: 'select-group',
+                cls: 'bi-border-bottom',
                 items: [
                   {
                     type: Select,
+                    hgap: 10,
+                    tgap: 10,
                   },
                 ],
               },
@@ -37,6 +39,8 @@ const Widget: WidgetType = {
             }, {
               type: LeftList,
               cls: 'left-list',
+              vgap: 10,
+              hgap: 10,
             },
           ],
         },

src/app/link_set/more/item/more_link_item.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Vertical, Img, Label, Layout} from '@ui/index';
+import {WidgetType, Vertical, Img, Label, Layout, Absolute} from '@ui/index';
 import ModelName from './more_link_litem.model';
 
 const className = 'fr.component.linkSet.morelink.item';
@@ -17,7 +17,7 @@ const Widget: WidgetType = {
     
     return {
       type: Vertical,
-      cls: 'link-item',
+      cls: 'dcm-link-more bi-border cursor-pointer',
       width: 120,
       height: 117,
       items: [
@@ -25,19 +25,29 @@ const Widget: WidgetType = {
           type: Img,
           width: 120,
           height: 90,
-          src: `./img/${name}.jpg`,
+          src: `img/${name}.jpg`,
         }, {
+          type: Absolute,
+          left: 90,
+          top: -90,
+          items: [
+            {
+              el: {
                 type: Layout,
-          cls: 'selected',
+                cls: 'dcm-link-more-selected',
                 invisible: true,
                 width: 30,
                 height: 30,
                 ref: _ref => {
                   this.selected = _ref;
                 },
+              },
+            },
+          ],
         }, {
           type: Label,
-          cls: 'text',
+          cls: 'dcm-link-more-text',
+          height: 27,
           text,
         },
       ],

src/app/link_set/more/more_link.service.ts

@@ -8,7 +8,7 @@ export const moreLink = (onConfirm?: Function): void => {
     type: 'bi.bar_popover',
     size: 'normal',
     header: BI.i18nText('Dec-Dcm_Connection_More-Title'),
-    width: 550,
+    width: 560,
     height: 500,
     body: {
       type: MoreLink,

src/app/link_set/more/more_link.ts

@@ -10,7 +10,6 @@ const Widget: WidgetType = {
   render() {
     return {
       type: Vtape,
-      cls: 'more-link',
       items: [
         {
           el: {
@@ -25,7 +24,13 @@ const Widget: WidgetType = {
         },
         {
           type: Left,
-          cls: 'more-link-item',
+          scrolly: true,
+          width: 528,
+          height: 380,
+          tgap: 2,
+          rgap: 2,
+          bgap: 2,
+          lgap: 2,
           items: this._createItems(),
         },
       ],

src/app/link_set/right/nothing.ts

@@ -4,6 +4,7 @@ const Widget: WidgetType = {
   render() {
     return {
       type: CenterAdapt,
+      top: 200,
       items: [{
         type: Vertical,
         width: 260,
@@ -21,7 +22,6 @@ const Widget: WidgetType = {
             text: BI.i18nText('Dec-Dcm_Connection_Plase_Add_One'),
           },
         ],
-        
       }],
     };
   },

src/app/link_set/right/right.ts

@@ -21,7 +21,8 @@ const Widget: WidgetType = {
   render() {
     return {
       type: ListView,
-      cls: 'database-right',
+      cls: 'dcm-link-form',
+      minWidth: 400,
       ref(_ref: any) {
         rightContent = _ref;
       },

src/app/link_set/right/right_detail/right_detail.ts

@@ -27,7 +27,6 @@ const Widget: WidgetType = {
     
     return {
       type: ListView,
-      cls: 'right-content',
       ref: _ref => {
         this.rightDetail = _ref;
       },
@@ -64,6 +63,8 @@ const Widget: WidgetType = {
         linkSelected,
       }, {
         type: linkSelected.isSelected ? editPage : showPage,
+        vgap: 10,
+        hgap: 10,
         linkSelected,
       },
     ];

src/app/link_set/right/right_edit/right_edit.ts

@@ -28,7 +28,7 @@ const Widget: WidgetType = {
     
     return {
       type: Vertical,
-      cls: 'right-show',
+      vgap: 10,
       items: [
         {
           type: FormItem,
@@ -61,10 +61,10 @@ const Widget: WidgetType = {
         {
           type: FormItem,
           text: BI.i18nText('Dec-Dcm_First_Step'),
-          height: 400,
+          height: 420,
           form: {
             type: Vertical,
-            cls: 'right-form',
+            vgap: 10,
             items: [
               {
                 type: FormItem,
@@ -252,6 +252,7 @@ const Widget: WidgetType = {
           text: BI.i18nText('Dec-Dcm_Second_Step'),
           form: {
             type: Button,
+            width: 80,
             text: BI.i18nText('Dec-Dcm_Test_Connection'),
             level: 'ignore',
           },

src/app/link_set/right/right_edit/right_edit_jndi.ts

@@ -11,7 +11,7 @@ const Widget = BI.inherit(BI.Widget, {
   },
   watch: {
     isCollapse(isCollapse) {
-      const height = isCollapse ? 550 : 160;
+      const height = isCollapse ? 550 : 180;
       const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes');
       this.jndiFormRef.setHeight(height);
       this.collapseRef.setText(text);
@@ -23,7 +23,7 @@ const Widget = BI.inherit(BI.Widget, {
     
     return {
       type: Vertical,
-      cls: 'right-show',
+      vgap: 10,
       items: [
         {
           type: FormItem,
@@ -39,13 +39,12 @@ const Widget = BI.inherit(BI.Widget, {
         {
           type: FormItem,
           text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Context'),
-          height: 160,
+          height: 180,
           ref: _ref => {
             this.jndiFormRef = _ref;
           },
           form: {
             type: Vertical,
-            cls: 'right-form',
             items: [
               {
                 type: FormItem,
@@ -118,8 +117,7 @@ const Widget = BI.inherit(BI.Widget, {
               },
               {
                 type: Vertical,
-                cls: 'right-form',
-                invisible: false,
+                invisible: true,
                 ref: _ref => {
                   this.otherAttributesRef = _ref;
                 },
@@ -154,10 +152,9 @@ const Widget = BI.inherit(BI.Widget, {
         {
           type: FormItem,
           text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Advanced'),
-          height: 25,
+          height: 40,
           form: {
             type: Vertical,
-            cls: 'right-form',
             items: [
               {
                 type: FormItem,

src/app/link_set/right/right_edit/right_edit_mysql.ts

@@ -16,7 +16,7 @@ const Widget: WidgetType = {
     
     return {
       type: Vertical,
-      cls: 'right-show',
+      vgap: 10,
       items: [
         {
           type: FormItem,

src/app/link_set/right/right_show/right_show.ts

@@ -13,7 +13,7 @@ const Widget: WidgetType = {
     
     return {
       type: Vertical,
-      cls: 'right-show',
+      vgap: 10,
       items: [
         {
           type: BothSide,

src/app/link_set/right/right_show/right_show_jndi.ts

@@ -10,7 +10,7 @@ const Widget = BI.inherit(BI.Widget, {
     
     return {
       type: Vertical,
-      cls: 'right-show',
+      vgap: 10,
       items: [
         {
           type: FormItem,
@@ -29,7 +29,6 @@ const Widget = BI.inherit(BI.Widget, {
           },
           form: {
             type: Vertical,
-            cls: 'right-form',
             items: [
               {
                 type: FormItem,
@@ -92,7 +91,6 @@ const Widget = BI.inherit(BI.Widget, {
               },
               {
                 type: Vertical,
-                cls: 'right-form',
                 invisible: false,
                 ref: _ref => {
                   this.otherAttributesRef = _ref;

src/app/link_set/right/right_title/right_title.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Left, Label, Button} from '@ui/index';
+import {WidgetType, Left, Label, Button, LeftRightVerticalAdapt} from '@ui/index';
 import RightTitleModel from '../../link_set.model';
 import {LinkType} from '@ui/type';
 import {OTHER_CONNECT} from '@private/constants';
@@ -15,18 +15,23 @@ const Widget: WidgetType = {
     const title = linkSelected.text === OTHER_CONNECT ? BI.i18nText('Dec-Dcm_Connection_Other') : linkSelected.text;
     
     return {
-      type: Left,
+      type: LeftRightVerticalAdapt,
       height: 40,
-      cls: 'right-title',
-      items: [
+      cls: 'bi-border-bottom',
+      items: {
+        left: [
           {
             type: Label,
-          cls: 'right-title-text',
+            cls: 'bi-font-bold',
+            hgap: 10,
+            textHeight: 40,
             text: `${BI.i18nText('Dec-Dcm_Data_Connections')}(${title ? title : BI.i18nText('Dec-Dcm_Default')})`,
           },
+        ],
+        right: [
           {
             type: Button,
-          cls: 'right-title-button',
+            hgap: 10,
             invisible: isEdit,
             text: BI.i18nText('Dec-Dcm_Edit'),
             handler() {
@@ -35,7 +40,17 @@ const Widget: WidgetType = {
           },
           {
             type: Button,
-          cls: 'right-title-button',
+            hgap: 10,
+            invisible: !isEdit,
+            level: 'ignore',
+            text: BI.i18nText('BI-Basic_Cancel'),
+            handler() {
+              that.store.setCancel();
+            },
+          },
+          {
+            type: Button,
+            hgap: 10,
             invisible: !isEdit,
             text: BI.i18nText('Dec-Dcm_Save'),
             handler() {
@@ -47,17 +62,8 @@ const Widget: WidgetType = {
               }
             },
           },
-        {
-          type: Button,
-          cls: 'right-title-button',
-          invisible: !isEdit,
-          level: 'ignore',
-          text: BI.i18nText('BI-Basic_Cancel'),
-          handler() {
-            that.store.setCancel();
-          },
-        },
         ],
+      },
     };
   },
 };

src/app/link_set/select/select.ts

@@ -13,7 +13,6 @@ const Widget: WidgetType = {
     
     return {
       type: Combo,
-      cls: 'select',
       trigger: 'click',
       adjustYOffset: 4,
       el: {
@@ -24,29 +23,30 @@ const Widget: WidgetType = {
       popup: {
         el: {
           type: ButtonGroup,
-          cls: 'database-link-items',
           items: [...BI.map([...DATA_LINKS, ...BI.Constants.getConstant(connectList)], (index: number, item: string) => {
             return {
               type: TextItem,
               height: 24,
               width: 152,
+              textLgap: 10,
               text: item,
               title: item,
               value: item,
             };
           }), {
             type: TextItem,
-            cls: 'link-item',
             height: 24,
             width: 152,
+            textLgap: 10,
             text: BI.i18nText('Dec-Dcm_Connection_More'),
             title: BI.i18nText('Dec-Dcm_Connection_More'),
             value: 'more',
           }, {
             type: TextItem,
-            cls: 'link-item',
+            cls: 'bi-border-top',
             height: 24,
             width: 152,
+            textLgap: 10,
             text: BI.i18nText('Dec-Dcm_Connection_Other'),
             title: BI.i18nText('Dec-Dcm_Connection_Other'),
             value: 'other',

src/app/link_status/left/left_item.ts

@@ -15,12 +15,15 @@ const Widget: WidgetType = {
     
     return {
       type: Left,
-      cls: 'left-item',
+      cls: 'left-item cursor-pointer',
+      height: 30,
       extraCls,
       items: [
         {
           type: TextButton,
           cls: 'link-title',
+          textHeight: 30,
+          lgap: 10,
           textAlign: 'left',
           text: title,
           title,

src/app/link_status/link_status.ts

@@ -17,20 +17,22 @@ const Widget: WidgetType = {
   render() {
     return {
       type: Htape,
-      cls: 'linkStatus',
+      cls: 'dcm-link-group',
       items: [{
         el: {
           type: Vtape,
-          cls: 'database-left',
+          cls: 'dcm-link-left bi-border-right',
           items: [
             {
               el: {
                 type: Left,
-                cls: 'select-group',
+                cls: 'bi-border-bottom',
                 items: [
                   {
                     type: Label,
-                    cls: 'status-title',
+                    cls: 'bi-font-bold',
+                    hgap: 6,
+                    vgap: 6,
                     text: BI.i18nText('Dec-Dcm_Data_Connections'),
                   },
                 ],

src/app/link_status/right/right.ts

@@ -32,15 +32,19 @@ const Widget: WidgetType = {
   render() {
     return {
       type: Vertical,
-      cls: 'database-right',
+      cls: 'dcm-link-form',
+      minWidth: 400,
       items: [
         {
           type: Left,
+          cls: 'right-status-title bi-border-bottom',
           height: 40,
-          cls: 'right-status-title',
           items: [
             {
               type: Label,
+              cls: 'bi-font-bold',
+              textHeight: 40,
+              lgap: 10,
               text: BI.i18nText('Dec-Dcm_Data_Connections'),
             },
           ],
@@ -50,6 +54,8 @@ const Widget: WidgetType = {
         }, {
           type: ListView,
           cls: 'right-status-body',
+          vgap: 10,
+          hgap: 10,
           ref(ref: any) {
             Group = ref;
           },

src/app/link_status/right/right_card.ts

@@ -1,42 +1,53 @@
-import {WidgetType, Left, Label, Vertical} from '@ui/index';
+import {WidgetType, Left, Label, Vertical, FloatCenter, CenterAdapt} from '@ui/index';
 const className = 'fr.component.linkStatus.right.card';
 const Widget: WidgetType = {
   render() {
     const {maxActive, maxIdle, numActive, numIdle} = this.options;
     
     return {
-      type: Left,
+      type: FloatCenter,
+      height: 150,
+      hgap: 20,
       items: [
         {
           type: Left,
-          cls: 'right-status-item',
           items: [
             {
               type: Vertical,
               cls: 'right-status-board',
+              height: 150,
+              width: '100%',
               items: [
                 {
-                  type: Vertical,
+                  type: CenterAdapt,
                   cls: 'right-status-board-item',
+                  tgap: 40,
+                  items: [
+                    {
+                      type: Left,
                       items: [
                         {
                           type: Label,
-                      cls: 'right-status-text',
-                      extraCls: 'card-font1',
+                          cls: 'right-status-text card-font-success',
+                          textHeight: 40,
                           text: numActive,
                         },
                         {
                           type: Label,
                           cls: 'right-status-text',
+                          textHeight: 40,
                           text: '/',
                         },
                         {
                           type: Label,
                           cls: 'right-status-text',
+                          textHeight: 40,
                           text: maxActive,
                         },
                       ],
                     },
+                  ],
+                },
                 {
                   type: Label,
                   height: 20,
@@ -53,29 +64,39 @@ const Widget: WidgetType = {
             {
               type: Vertical,
               cls: 'right-status-board',
+              height: 150,
+              width: '100%',
               items: [
                 {
-                  type: Vertical,
+                  type: CenterAdapt,
+                  tgap: 40,
                   cls: 'right-status-board-item',
+                  items: [
+                    {
+                      type: Left,
                       items: [
                         {
                           type: Label,
-                      cls: 'right-status-text',
-                      extraCls: 'card-font2',
+                          cls: 'right-status-text card-font-heighlight',
+                          textHeight: 40,
                           text: numIdle,
                         },
                         {
                           type: Label,
                           cls: 'right-status-text',
+                          textHeight: 40,
                           text: '/',
                         },
                         {
                           type: Label,
                           cls: 'right-status-text',
+                          textHeight: 40,
                           text: maxIdle,
                         },
                       ],
                     },
+                  ],
+                },
                 {
                   type: Label,
                   height: 20,

src/app/title/title.ts

@@ -1,4 +1,4 @@
-import {Left, WidgetType, IconButton} from '@ui/index';
+import {WidgetType, IconButton, LeftRightVerticalAdapt} from '@ui/index';
 import TitleItem from './title_item/title_item';
 import {isDesigner, closeWindow} from '@shared/crud/crud.request';
 import {TAB_LINK_SET, TAB_LINK_POOL} from '@private/constants';
@@ -6,12 +6,13 @@ const className = 'fr.title';
 const Widget: WidgetType = {
   render() {
     return {
-      type: Left,
-      cls: 'title',
-      items: [
+      type: LeftRightVerticalAdapt,
+      cls: 'dcm-title bi-border-bottom bi-font-bold',
+      items: {
+        left: [
           {
             type: TitleItem,
-          cls: 'dec-title-item-selected',
+            cls: 'title-item-selected',
             text: BI.i18nText('Dec-Dcm_Connection_Management'),
             value: TAB_LINK_SET,
             ref: _ref => {
@@ -32,18 +33,24 @@ const Widget: WidgetType = {
               this.ConnectPool.select();
             },
           },
+        ],
+        right: [
           {
             type: IconButton,
-          cls: 'close-button',
+            cls: 'close-ha-font',
+            invisible: true,
+            width: 30,
+            height: 30,
+            rgap: 10,
             handler() {
               closeWindow();
             },
-          invisible: true,
             ref: _ref => {
               this.CloseButton = _ref;
             },
           },
         ],
+      },
     };
   },
   mounted() {

src/app/title/title_item/title_item.ts

@@ -20,7 +20,9 @@ const Widget = BI.inherit(BI.BasicButton, {
     
     return {
       type: Label,
-      cls: 'dec-title-item',
+      cls: 'dcm-title-item cursor-pointer',
+      height: 39,
+      hgap: 15,
       text,
     };
   },

src/less/app.less

@@ -1,318 +0,0 @@
-.database-connection-layout{
-  width: 100%;
-  height: 100%;
-  background-color: @background-color-normal;
-  .title{
-    background-color: @background-color-default;
-    border-bottom: 1px solid @border-color-line;
-    .dec-title-item{
-      height: 39px;
-      line-height: 39px;
-      padding-left: 15px;
-      padding-right: 15px;
-      text-align: center;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      position: relative;
-      flex-shrink: 0;
-      font-weight: 700;
-      cursor: pointer;
-    }
-    .dec-title-item-selected{
-      color: @background-color-highlight;
-      border-bottom: @border-color-highlight;
-    }
-    .close-button {
-      position: absolute !important;
-      right: 5px;
-      top: 5px;
-      width: 30px;
-      height: 30px;
-      cursor: pointer;
-      background-image: url("../img/icon_close9x9_normal.png");
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-  }
-  .linkset{
-    margin: 10px;
-    bottom: 0px;
-    background-color: @background-color-default;
-  }
-  .linkStatus{
-    margin: 10px;
-    top: 40px;
-    background-color: @background-color-default;
-  }
-}
-
-.database-left{
-  border-right: 1px solid @border-color-line;
-  .select-group{
-    border-bottom: 1px solid @border-color-line;
-    .select{
-      margin: 10px;
-      .database-link-items{
-        padding-left:10px;
-        .link-item{
-          border-top: 1px solid @border-color-line;
-        }
-      }
-    }
-    .status-title{
-      font-weight: 700;
-      margin-left: 12px;
-      margin-top: 12px;
-    }
-  }
-  .left-list{
-    margin: 10px;
-    .left-item{
-      height: 24px;
-      line-height: 24px;
-      cursor: pointer;
-      &:hover{
-        background-color: @background-color-blue-transparent;
-        .icons{
-          .action-icon{
-            visibility: visible !important;
-          }
-          
-        }
-      }
-      .icons{
-        float: right !important;
-        .action-icon{
-          visibility: hidden;
-        }
-        .b-font{
-          font-size: 16px;
-        }
-      }
-    }
-    .left-item-selected{
-      background-color: @background-color-blue-transparent;
-      .link-title{
-        color: @font-color-highlight;
-      }
-    }
-  }
-}
-.database-right{
-  min-width: 400px;
-  overflow: auto;
-  >.bi-vertical-layout{
-    height: 100%;
-  }
-  .bi-flex-center-adapt-layout{
-    height: 100%;
-    .data-connection-background{
-      background: url(../img/resources.png) center center no-repeat;
-      background-size: contain;
-    }
-  }
-  .right-status-title{
-    border-bottom: 1px solid @border-color-line;
-    color: @font-color-normal;
-    line-height: 40px;
-    padding-left: 10px;
-    font-weight: 700;
-  }
-  .right-status-body{
-    margin: 10px 30px 0px 30px;
-    height: 50%;
-    .right-status-item{
-      height: 150px;
-      width: 50%;
-      top: 0; left: 0;
-      position: absolute !important;
-      .right-status-board { margin-left: 25px; position: relative !important; left: -25px;}
-    }
-    .right-status-right{
-      height: 150px;
-      width: 50%;
-      top: 0; right:0;
-      position: absolute !important;
-      .right-status-board { margin-right: 25px; position: relative !important; left: 25px; }
-    }
-    .right-status-board{
-      background-color: @background-color-normal;
-      color: @font-color-normal;
-      width: 100%;
-      height: 100%;
-      .right-status-board-item{
-        text-align: center;
-        margin-top: 38px;
-        .right-status-text{
-          display: inline-block;
-        }
-        .card-font1{
-          color: @font-color-success;
-          font-size: 32px;
-        }
-        .card-font2{
-          color: @font-color-highlight;
-          font-size: 32px;
-        }
-      }
-      
-    }
-  }
-  .right-content{
-    height: 100%;
-    .right-title{
-      border-bottom: 1px solid @border-color-line;
-      color: @font-color-normal;
-      line-height: 40px;
-      padding-left: 10px;
-      .right-title-text{
-        font-weight: 700;
-      }
-      .right-title-button{
-        float: right !important;
-        margin-right: 10px;
-        margin-top: 8px;
-      }
-    }
-    .right-show{
-      margin: 10px;
-      .right-form{
-        width: 100%;
-      }
-    }
-  }
-}
-.both-side{
-  line-height: 24px;
-  margin-bottom: 10px;
-  .left{
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    position: relative;
-    flex-shrink: 0;
-    font-weight: 700;
-  }
-  .hint{
-    padding-left: 5px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    position: relative;
-    flex-shrink: 0;
-    margin-left: 5px;
-    color: @font-color-disabled;
-  }
-}
-.shared-component-title{
-  height: 24px;
-  line-height: 24px;
-  margin-bottom: 10px;
-  color: @font-color-disabled;
-  border-bottom: 1px solid @border-color-line;
-}
-.comfirm-content{
-  margin-top: 40px;
-  margin-left: 20px;
-  .comfirm-icon{
-    background-image: url("../img/warning.png");
-    background-size: contain;
-    margin-right: 12px;
-  }
-  .bi-text{
-    height: 50px;
-    line-height: 50px;
-    margin-left: 12px;
-  }
-}
-.more-link{
-  .more-link-item{
-    width: 538px;
-    overflow: hidden auto;
-    left: -10px !important;
-    right: 0px;
-    top: 10px;
-    bottom: 0px;
-    position: absolute;
-    height: 380px;
-    .link-item{
-      margin-left: 10px;
-      margin-bottom: 10px;
-      cursor: pointer;
-      border: solid 1px @border-color-default;
-      &:hover{
-        border: solid 1px @border-color-highlight;
-      }
-      .selected{
-        position: absolute !important;
-        right: -1px;
-        top: -1px;
-        height: 30px;
-        width: 30px;
-        background: url(../img/database-selected.png) center center no-repeat;
-        background-size: contain;
-      }
-      .text{
-        height: 27px;
-        line-height: 27px;
-        padding-left: 2px;
-        padding-right: 2px;
-        text-align: center;
-        white-space: nowrap;
-        background: @background-color-light-gray;
-      }
-    }
-    
-  }
-}
-.popover-notitle{
-  .bi-header-background{
-    display: none;
-  }
-  .bi-absolute-layout{
-    top:0px !important;
-  }
-}
-.bi-custom-show{
-  .show-content{
-    text-align: center;
-    .loading-icon{
-      display: block;
-      background: url(../img/loading.gif) center center no-repeat;
-      background-size: contain;
-      margin: 0 auto;
-      margin-bottom: 18px;
-    }
-    .success-icon{
-      display: block;
-      background: url(../img/success.png) center center no-repeat;
-      background-size: contain;
-      margin: 0 auto;
-      margin-bottom: 18px;
-    }
-    .error-icon{
-      display: block;
-      background: url(../img/error.png) center center no-repeat;
-      background-size: contain;
-      margin: 0 auto;
-      margin-bottom: 18px;
-    }
-    .buttons{
-      margin-top: 18px;
-      div{
-        margin: 0 4px;
-      }
-    }
-  }
-  .show-more{
-    text-align: left !important;
-    height: 73px;
-    background: @background-color-light-gray;
-    margin-bottom: 10px;
-    padding: 5px;
-    margin-top: 10px;
-  }
-}
-.jndi-notice{
-  color: @color-jndi-notice;
-}

src/less/color.less

@@ -1,3 +0,0 @@
-@import "../../node_modules/fineui/src/less/lib/colors.less";
-@color-jndi-notice: @font-color-negative;
-@background-color-blue-transparent: rgba(54,133,242,.05);

src/less/font.less

@@ -1,7 +0,0 @@
-@import "../../node_modules/fineui/src/less/image.less";
-@import "./lib/font.less";
-
-.font(link-font, @font-link);
-.font(info-font, @font-link-info);
-.font(test-font, @font-link-test);
-.font(delete-font, @font-link-delete);

src/less/index.less

@@ -1,3 +1,5 @@
-@import "color";
-@import "app";
-@import "font";
+@import "lib/background";
+@import "lib/color";
+@import "resource/background";
+@import "resource/font";
+@import "resource/common";

src/less/lib/background.less

@@ -0,0 +1,7 @@
+@background-color-blue-transparent: @color-bi-blue-5;
+@background-resources: "resources.png";
+@background-warning: "warning.png";
+@background-database-selected: "database-selected.png";
+@background-loading-gif: "loading.gif";
+@background-success: "success.png";
+@background-error: "error.png";

src/less/lib/color.less

@@ -0,0 +1 @@
+@import "../../../node_modules/fineui/src/less/lib/colors";

src/less/resource/background.less

@@ -0,0 +1,23 @@
+@import "../lib/background";
+@import "../var";
+
+.data-connection-background {
+  .image2xPath(@background-resources)
+}
+
+.dcm-comfirm-icon{
+  .image2xPath(@background-warning)
+}
+.dcm-link-more-selected{
+  .image2xPath(@background-database-selected)
+}
+
+.dcm-loading-icon{
+  .image2xPath(@background-loading-gif)
+}
+.dcm-success-icon{
+  .image2xPath(@background-success)
+}
+.dcm-error-icon{
+  .image2xPath(@background-error)
+}

src/less/resource/common.less

@@ -0,0 +1,66 @@
+.dec-webui-dcm-layout{
+  background-color: @background-color-normal;
+  .dcm-title{
+    background-color: @background-color-default;
+  }
+  .dcm-link-group{
+    background-color: @background-color-default;
+    .dcm-link-left{
+      .link-item{
+        &:hover{
+          background-color: @background-color-blue-transparent;
+          .link-item-icon{
+              visibility: visible;
+          }
+        }
+        .link-item-icon{
+          visibility: hidden;
+        }
+      }
+      .left-item-selected{
+        background-color: @background-color-blue-transparent;
+        .link-title{
+          color: @font-color-highlight;
+        }
+      }
+    }
+  }
+  .dcm-link-form{
+    .right-status-title{
+      color: @font-color-normal;
+    }
+    .right-status-board{
+      background-color: @background-color-normal;
+      color: @font-color-normal;
+      .card-font-success{
+        color: @font-color-success;
+        font-size: @font-size-30;
+      }
+      .card-font-heighlight{
+        color: @font-color-highlight;
+        font-size: @font-size-30;
+      }
+    }
+    .form-item-hint{
+      color: @font-color-disabled;
+    }
+    .jndi-notice{
+      color: @font-color-negative;
+    }
+  }
+}
+
+.dcm-link-more{
+  &:hover{
+    border: solid 1px @border-color-highlight;
+  }
+  .dcm-link-more-text{
+    background: @background-color-light-gray;
+  }
+}
+.show-content{
+  background-color: @background-color-default;
+  .show-more{
+    background: @background-color-light-gray;
+  }
+}

src/less/resource/font.less

@@ -0,0 +1,7 @@
+@import "../../../node_modules/fineui/src/less/image.less";
+@import "../lib/font.less";
+
+.font(link-font, @font-link);
+.font(info-font, @font-link-info);
+.font(test-font, @font-link-test);
+.font(delete-font, @font-link-delete);

src/less/var.less

@@ -0,0 +1,3 @@
+@import "../../node_modules/fineui/src/less/var";
+@imageUrl: '/img/';
+@image2xUrl: '/img/';

src/shared/components/both_side.ts

@@ -11,7 +11,7 @@ const Widget: WidgetType = {
       items: [{
         el: {
           type: Label,
-          cls: 'left',
+          cls: 'bi-font-bold',
           textAlign: 'left',
           text: leftText,
         },

src/shared/components/form_item.ts

@@ -11,17 +11,18 @@ const Widget: WidgetType = {
       items: [{
         el: {
           type: Label,
-          cls: 'left',
+          cls: 'bi-font-bold',
           textAlign: 'left',
           text,
         },
         width,
-      }, form, {
+      }, form, hint ? {
         type: Label,
-        cls: 'hint',
+        cls: 'form-item-hint',
+        lgap: 5,
         textAlign: 'left',
         text: hint,
-      }],
+      } : null],
     };
   },
 };

src/shared/components/title.ts

@@ -6,7 +6,10 @@ const Widget: WidgetType = {
     
     return {
       type: Label,
-      cls: 'shared-component-title',
+      cls: 'form-item-hint bi-border-bottom',
+      height: 24,
+      textHeight: 24,
+      bgap: 10,
       textAlign: 'left',
       text,
     };

src/shared/crud/crud.request.ts

@@ -11,7 +11,7 @@ export function isDesigner(): boolean {
     return PluginHelper.isDesigner();
   }
   
-  return false;
+  return true;
 }
 
 /**
@@ -82,7 +82,7 @@ export function testConnection(data: LinkType, cb: Function): void{
     });
   } else {
     setTimeout(() => {
-      cb({errorCode:'500', errorMsg:'createConnectionThread not start!'});
+      cb({errorCode: '500', errorMsg: 'createConnectionThread not start!'});
     }, 2000);
   }
 }
@@ -125,6 +125,6 @@ export function info(name: string, cb: Function): void{
       cb(res.data);
     });
   } else {
-    cb({maxActive:50, maxIdle:10, numActive:0, numIdle:0});
+    cb({maxActive: 50, maxIdle: 10, numActive: 0, numIdle: 0});
   }
 }

src/shared/service/dialog.service.ts

@@ -1,4 +1,4 @@
-import {Label, Vertical, Left, Button, Layout} from '@ui/index';
+import {Label, Vertical, Left, Button, Layout, Absolute, CenterAdapt} from '@ui/index';
 class Dialog {
   /**
    * 提示
@@ -16,15 +16,19 @@ class Dialog {
       body: {
         type: 'bi.left',
         cls: 'comfirm-content',
+        vgap: 40,
+        hgap: 20,
         items: [
           {
             type: 'bi.layout',
-            cls: 'comfirm-icon',
+            cls: 'dcm-comfirm-icon',
             width: 50,
             height: 50,
           },
           {
             type: 'bi.label',
+            textHeight: 50,
+            lgap: 10,
             text: message,
           },
         ],
@@ -51,13 +55,15 @@ class Dialog {
     const body = {
       type: 'bi.center_adapt',
       cls: 'show-content',
+      width: 450,
+      height: 220,
       items: [
         {
           type: Vertical,
           items: [
             {
               type: 'bi.layout',
-              cls: 'loading-icon',
+              cls: 'dcm-loading-icon',
               width: 100,
               height: 100,
             },
@@ -83,7 +89,7 @@ class Dialog {
           items: [
             {
               type: 'bi.layout',
-              cls: 'success-icon',
+              cls: 'dcm-success-icon',
               width: 100,
               height: 100,
             },
@@ -108,7 +114,7 @@ class Dialog {
           items: [
             {
               type: 'bi.layout',
-              cls: 'error-icon',
+              cls: 'dcm-error-icon',
               width: 100,
               height: 100,
             },
@@ -139,12 +145,14 @@ class Dialog {
           items: [
             {
               type: Vertical,
+              vgap: 10,
               items: [
                 {
                   type: Layout,
-                  cls: 'error-icon',
-                  width: 100,
+                  cls: 'dcm-error-icon',
+                  width: 270,
                   height: 100,
+                  textAlign: 'center',
                 },
                 {
                   type: Label,
@@ -153,6 +161,7 @@ class Dialog {
                 {
                   type: Left,
                   cls: 'buttons',
+                  hgap: 5,
                   items: [
                     {
                       type: Button,
@@ -172,7 +181,7 @@ class Dialog {
                       text: BI.i18nText('Dec-Dcm_Back'),
                       level: 'ignore',
                       handler() {
-                        that.close(id);
+                        that.remove(id);
                       },
                     },
                     {
@@ -195,6 +204,7 @@ class Dialog {
           text: more,
           invisible: true,
           height: 73,
+          width: 400,
           value: false,
           ref(ref: any) {
             More = ref;
@@ -202,17 +212,26 @@ class Dialog {
         },
       ],
     };
-    BI.Popovers.create(id, {
-      type: 'bi.popover',
-      cls: 'popover-notitle bi-custom-show',
-      size: 'normal',
+
+    BI.Maskers.create(id, null, {
+      render: {
+        type: CenterAdapt,
+        cls: 'bi-z-index-mask',
+        items: [{
+          el: {
+            type: 'bi.center_adapt',
+            cls: 'show-content',
             width: 450,
             height: 220,
-      body,
+            items: [body],
             ref(ref: any) {
               Popover = ref;
             },
-    }).open(id);
+          },
+        }],
+      },
+    });
+    BI.Maskers.show(id);
     
     return id;
   }
@@ -220,12 +239,15 @@ class Dialog {
   public close(id: string): void{
     BI.Popovers.close(id);
   }
-  public show(body: any, autoClose = 0): string {
+  public remove(id: string): void{
+    BI.Maskers.remove(id);
+  }
+  public show1(body: any, autoClose = 0): string {
     const id = BI.UUID();
     BI.Popovers.create(id, {
       type: 'bi.popover',
       cls: 'popover-notitle bi-custom-show',
-      size: 'normal',
+      size: 'small',
       width: 450,
       height: 220,
       body,
@@ -238,6 +260,29 @@ class Dialog {
     
     return id;
   }
+
+  public show(body: any, autoClose = 0): string {
+    const name = BI.UUID();
+    BI.Maskers.create(name, null, {
+      render: {
+        type: CenterAdapt,
+        cls: 'bi-z-index-mask',
+        items: [{
+          el: {
+            ...body,
+          },
+        }],
+      },
+    });
+    BI.Maskers.show(name);
+    if (autoClose > 0) {
+      setTimeout(() => {
+        BI.Maskers.remove(name);
+      }, autoClose);
+    }
+    
+    return name;
+  }
 }
 
 export default new Dialog();

src/ui/fineui.ts

@@ -34,9 +34,6 @@ export const TextBubblePopupBarView = 'bi.text_bubble_bar_popup_view';
 export const BubbleCombo = 'bi.bubble_combo';
 export const SearchEditor = 'bi.search_editor';
 export const Img = 'bi.img';
-export const LeftRightVerticalAdapt = 'bi.left_right_vertical_adapt';
-export const VertualGroup = 'bi.virtual_group';
-export const ListView = 'bi.list_view';
 
 // 布局
 export const VerticalAdapt = 'bi.vertical_adapt';
@@ -47,3 +44,9 @@ export const Layout = 'bi.layout';
 export const Absolute = 'bi.absolute';
 export const Vertical = 'bi.vertical';
 export const Left = 'bi.left';
+export const Right = 'bi.right';
+export const LeftRightVerticalAdapt = 'bi.left_right_vertical_adapt';
+export const VertualGroup = 'bi.virtual_group';
+export const ListView = 'bi.list_view';
+export const FloatCenter = 'bi.float_center';
+export const HorizotalAdapt = 'bi.horizontal_adapt';