refactor: 尽量使用通用样式

src/app/app.ts

@@ -1,4 +1,4 @@
-import {Vtape, Left, Vertical, Absolute} from '../ui/index';
+import {Vtape, Vertical, Absolute} from '../ui/index';
 import appModel from './app.model';
 import title from './title/title';
 import linkSet from './connection/link_set';
@@ -16,7 +16,7 @@ const Widget = BI.inherit(BI.Widget, {
   render() {
     return {
       type: Vtape,
-      cls: 'dec-webui-dcm-layout',
+      cls: 'dec-webui-dcm-layout bi-background',
       items: [
         {
           el: {

src/app/connection/left/item/left_item.ts

@@ -13,17 +13,17 @@ const Widget: WidgetType = {
     return BI.Models.getModel(Model);
   },
   render() {
-    const {title, cls, creator, text, id} = this.options;
+    const {title, creator, text, id} = this.options;
     
     return {
       type: LeftRightVerticalAdapt,
-      cls: `link-item cursor-pointer ${cls}`,
+      cls: `link-item cursor-pointer`,
       height: 24,
       items: {
         left: [
           {
             type: Icon,
-            cls: 'link-font',
+            cls: 'dcm-link-font',
             height: 24,
             width: 26,
             text: BI.i18nText('Dec-Dcm_Connections'),
@@ -44,7 +44,7 @@ const Widget: WidgetType = {
         right: [
           {
             type: ItemIcon,
-            cls: 'link-item-icon test-font',
+            cls: 'link-item-icon dcm-test-font',
             title: BI.i18nText('Dec-Dcm_Test_Connection'),
             value: ACTION_TEST,
             id,
@@ -58,13 +58,13 @@ const Widget: WidgetType = {
           },
           {
             type: ItemIcon,
-            cls: 'link-item-icon info-font',
+            cls: 'link-item-icon dcm-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: 'link-item-icon delete-font',
+            cls: 'link-item-icon dcm-delete-font',
             title: BI.i18nText('Dec-Dcm_Delete'),
             value: ACTION_DELETE,
             id,

src/app/connection/left/item/left_item_icon.ts

@@ -8,7 +8,7 @@ const Widget: WidgetType = {
     return BI.Models.getModel(Model);
   },
   render() {
-    const {cls, title, id, value} = this.options;
+    const {title, id, value} = this.options;
     const that = this;
     let iconContent: any = null;
     let combo: any = null;
@@ -21,7 +21,6 @@ const Widget: WidgetType = {
         },
         el: {
           type: Icon,
-          cls,
           baseCls: 'action-icon',
           height: 24,
           width: 26,
@@ -63,7 +62,6 @@ const Widget: WidgetType = {
     
     return {
       type: IconButton,
-      cls: `action-icon ${cls}`,
       height: 24,
       width: 26,
       title,

src/app/connection/link_set.ts

@@ -1,4 +1,4 @@
-import {Htape, WidgetType, Vtape, Left} from '@ui';
+import {Htape, WidgetType, Vtape, VerticalAdapt} from '@ui';
 import LeftList from './left/left';
 import linkSetModel from './link_set.model';
 import Select from './select/select';
@@ -17,7 +17,7 @@ const Widget: WidgetType = {
   render() {
     return {
       type: Htape,
-      cls: 'dcm-link-group',
+      cls: 'bi-card',
       items: [{
         el: {
           type: Vtape,
@@ -25,13 +25,13 @@ const Widget: WidgetType = {
           items: [
             {
               el: {
-                type: Left,
+                type: VerticalAdapt,
                 cls: 'bi-border-bottom',
                 items: [
                   {
                     type: Select,
                     hgap: 10,
-                    tgap: 10,
+                    vgap: 10,
                   },
                 ],
               },

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

@@ -46,7 +46,7 @@ const Widget: WidgetType = {
           ],
         }, {
           type: Label,
-          cls: 'dcm-link-more-text',
+          cls: 'bi-header-background',
           height: 27,
           text,
         },

src/app/connection/right/right.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Vertical, ListView} from '@ui';
+import {WidgetType, ListView} from '@ui';
 import {LinkType} from '@ui/type';
 import Nothing from './nothing';
 import RightDetail from './right_detail/right_detail';
@@ -22,7 +22,6 @@ const Widget: WidgetType = {
     return {
       type: ListView,
       cls: 'dcm-link-form',
-      minWidth: 400,
       ref(_ref: any) {
         rightContent = _ref;
       },

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

@@ -145,7 +145,7 @@ const Widget = BI.inherit(BI.Widget, {
           height: 25,
           form: {
             type: Label,
-            cls: 'jndi-notice',
+            cls: 'bi-error',
             text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'),
           },
         },

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

@@ -124,7 +124,7 @@ const Widget = BI.inherit(BI.Widget, {
           height: 25,
           form: {
             type: Label,
-            cls: 'jndi-notice',
+            cls: 'bi-error',
             text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'),
           },
         },

src/app/status/left/left_item.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Left, TextButton} from '@ui';
+import {WidgetType, TextButton, VerticalAdapt} from '@ui';
 import Model from './left.model';
 const className = 'dec.dcm.component.linkStatus.left.item';
 const Widget: WidgetType = {
@@ -11,11 +11,11 @@ const Widget: WidgetType = {
     return BI.Models.getModel(Model);
   },
   render() {
-    const {title, cls} = this.options;
+    const {title} = this.options;
     
     return {
-      type: Left,
-      cls: `left-item cursor-pointer ${cls}`,
+      type: VerticalAdapt,
+      cls: `left-item cursor-pointer`,
       height: 30,
       items: [
         {

src/app/status/link_status.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Htape, Vtape, Left, Label} from '@ui';
+import {WidgetType, Htape, Vtape, Left, Label, VerticalAdapt} from '@ui';
 import linkStatusModel from './link_status.model';
 import LeftList from './left/left';
 import Right from './right/right';
@@ -17,7 +17,7 @@ const Widget: WidgetType = {
   render() {
     return {
       type: Htape,
-      cls: 'dcm-link-group',
+      cls: 'bi-card',
       items: [{
         el: {
           type: Vtape,
@@ -25,7 +25,7 @@ const Widget: WidgetType = {
           items: [
             {
               el: {
-                type: Left,
+                type: VerticalAdapt,
                 cls: 'bi-border-bottom',
                 items: [
                   {

src/app/status/right/right.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Vertical, Left, Label, ListView} from '@ui/index';
+import {WidgetType, Vertical, Left, Label, ListView, VerticalAdapt} from '@ui/index';
 import Model from './right.model';
 import {info} from '@shared/crud/crud.request';
 import RightCard from './right_card';
@@ -33,11 +33,10 @@ const Widget: WidgetType = {
     return {
       type: Vertical,
       cls: 'dcm-link-form',
-      minWidth: 400,
       items: [
         {
-          type: Left,
-          cls: 'right-status-title bi-border-bottom',
+          type: VerticalAdapt,
+          cls: 'bi-border-bottom',
           height: 40,
           items: [
             {

src/app/status/right/right_card.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Left, Label, Vertical, FloatCenter, CenterAdapt} from '@ui/index';
+import {WidgetType, Left, Label, Vertical, FloatCenter, CenterAdapt, VerticalAdapt} from '@ui/index';
 const className = 'dec.dcm.component.linkStatus.right.card';
 const Widget: WidgetType = {
   render() {
@@ -8,15 +8,11 @@ const Widget: WidgetType = {
       type: FloatCenter,
       height: 150,
       hgap: 20,
-      items: [
-        {
-          type: Left,
       items: [
         {
           type: Vertical,
-              cls: 'right-status-board',
+          cls: 'bi-background',
           height: 150,
-              width: '100%',
           items: [
             {
               type: CenterAdapt,
@@ -24,23 +20,21 @@ const Widget: WidgetType = {
               tgap: 40,
               items: [
                 {
-                      type: Left,
+                  type: VerticalAdapt,
                   items: [
                     {
                       type: Label,
-                          cls: 'right-status-text card-font-success',
+                      cls: 'bi-high-light 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,
                     },
@@ -55,17 +49,10 @@ const Widget: WidgetType = {
             },
           ],
         },
-          ],
-        },
-        {
-          type: Left,
-          cls: 'right-status-right',
-          items: [
         {
           type: Vertical,
-              cls: 'right-status-board',
+          cls: 'bi-background',
           height: 150,
-              width: '100%',
           items: [
             {
               type: CenterAdapt,
@@ -73,23 +60,21 @@ const Widget: WidgetType = {
               cls: 'right-status-board-item',
               items: [
                 {
-                      type: Left,
+                  type: VerticalAdapt,
                   items: [
                     {
                       type: Label,
-                          cls: 'right-status-text card-font-heighlight',
+                      cls: 'bi-high-light 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,
                     },
@@ -105,8 +90,6 @@ const Widget: WidgetType = {
           ],
         },
       ],
-        },
-      ],
     };
   },
 };

src/app/title/item/title_item.ts

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

src/app/title/title.ts

@@ -9,7 +9,7 @@ const Widget: WidgetType = {
     
     return {
       type: LeftRightVerticalAdapt,
-      cls: 'dcm-title bi-border-bottom bi-font-bold',
+      cls: 'bi-card bi-border-bottom',
       items: {
         left: [
           {
@@ -17,22 +17,16 @@ const Widget: WidgetType = {
             cls: 'title-item-selected',
             text: BI.i18nText('Dec-Dcm_Connection_Management'),
             value: TAB_LINK_SET,
-            ref: _ref => {
-              this.ConnectSet = _ref;
-            },
-            handler: () => {
-              this.ConnectSet.select();
+            handler() {
+              this.select();
             },
           },
           {
             type: TitleItem,
             text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'),
             value: TAB_LINK_POOL,
-            ref: _ref => {
-              this.ConnectPool = _ref;
-            },
-            handler: () => {
-              this.ConnectPool.select();
+            handler() {
+              this.select();
             },
           },
         ],

src/less/resource/common.less

@@ -1,14 +1,8 @@
 .dec-webui-dcm-layout{
-  background-color: @background-color-normal;
-  .dcm-title{
-    background-color: @background-color-default;
   .title-item-selected{
     color: @background-color-highlight;
     border-bottom: solid 2px @border-color-highlight;
   }
-  }
-  .dcm-link-group{
-    background-color: @background-color-default;
   .dcm-link-left{
     .link-item{
       &:hover{
@@ -28,43 +22,18 @@
       }
     }
   }
-  }
   .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

@@ -1,7 +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);
+.font(dcm-link-font, @font-link);
+.font(dcm-info-font, @font-link-info);
+.font(dcm-test-font, @font-link-test);
+.font(dcm-delete-font, @font-link-delete);

src/shared/components/form_item.ts

@@ -18,7 +18,7 @@ const Widget: WidgetType = {
         width,
       }, form, hint ? {
         type: Label,
-        cls: 'form-item-hint',
+        cls: 'bi-water-mark',
         lgap: 5,
         textAlign: 'left',
         text: hint,

src/shared/components/title.ts

@@ -6,9 +6,8 @@ const Widget: WidgetType = {
     
     return {
       type: Label,
-      cls: 'form-item-hint bi-border-bottom',
+      cls: 'bi-water-mark bi-border-bottom',
       height: 24,
-      textHeight: 24,
       bgap: 10,
       textAlign: 'left',
       text,

src/shared/service/dialog.service.ts

@@ -1,4 +1,4 @@
-import {Label, Vertical, Left, Button, Layout, Absolute, CenterAdapt} from '@ui/index';
+import {Label, Vertical, Button, Layout, CenterAdapt, VerticalAdapt} from '@ui/index';
 class Dialog {
   /**
    * 提示
@@ -54,7 +54,7 @@ class Dialog {
   public loading(message: string): string {
     const body = {
       type: 'bi.center_adapt',
-      cls: 'show-content',
+      cls: 'bi-card',
       width: 450,
       height: 220,
       items: [
@@ -82,7 +82,7 @@ class Dialog {
   public success(message: string): string {
     const body = {
       type: 'bi.center_adapt',
-      cls: 'show-content',
+      cls: 'bi-card',
       items: [
         {
           type: Vertical,
@@ -107,7 +107,7 @@ class Dialog {
   public error(message: string): string {
     const body = {
       type: 'bi.center_adapt',
-      cls: 'show-content',
+      cls: 'bi-card',
       items: [
         {
           type: Vertical,
@@ -140,7 +140,7 @@ class Dialog {
       items: [
         {
           type: 'bi.center_adapt',
-          cls: 'show-content',
+          cls: 'bi-card',
           tgap: 10,
           items: [
             {
@@ -159,7 +159,7 @@ class Dialog {
                   text,
                 },
                 {
-                  type: Left,
+                  type: VerticalAdapt,
                   cls: 'buttons',
                   hgap: 5,
                   items: [
@@ -200,7 +200,7 @@ class Dialog {
           ],
         }, {
           type: Label,
-          cls: 'show-more',
+          cls: 'bi-header-background',
           text: more,
           invisible: true,
           height: 73,
@@ -220,7 +220,7 @@ class Dialog {
         items: [{
           el: {
             type: 'bi.center_adapt',
-            cls: 'show-content',
+            cls: 'bi-card',
             width: 450,
             height: 220,
             items: [body],