feat: 完成数据库连接新增功能

src/app/app.component.scss

@@ -68,12 +68,37 @@
     }
     .left-item-selected{
       background-color: rgba(54,133,242,.05);
-      .bi-text{
+      .link-title{
         color: #3685f2;
       }
     }
   }
 }
+.database-right{
+  .bi-flex-center-adapt-layout{
+    height: 100%;
+    .data-connection-background{
+      background: url(../img/resources.png) center center no-repeat;
+      background-size: contain;
+    }
+  }
+  .right-content{
+    .right-title{
+      border-bottom: 1px solid #e8eaed;
+      color: #3d4d66;
+      line-height: 40px;
+      padding-left: 10px;
+      .right-title-text{
+        font-weight: 700;
+      }
+      .right-title-button{
+        float: right !important;
+        margin-right: 10px;
+        margin-top: 8px;
+      }
+    }
+  }
+}
 
 .link-font .b-font:before {
   content: "\e759";

src/app/link_set/left/left.service.ts

@@ -10,6 +10,7 @@ export const getLinks = (linkList: LinkType[]): any => {
       title: item.connectionName,
       id: item.connectionId,
       creator: item.creator,
+      text: item.databaseType.toLocaleUpperCase().replace(' ', '-'),
     });
   });
   

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

@@ -11,7 +11,7 @@ const Widget: WidgetType = {
     return BI.Models.getModel(LeftItemModel);
   },
   render() {
-    const {title, extraCls} = this.options;
+    const {title, extraCls, creator, text} = this.options;
     
     return {
       type: Left,
@@ -28,6 +28,7 @@ const Widget: WidgetType = {
         },
         {
           type: Label,
+          cls:'link-title',
           textAlign: 'left',
           text: title,
           title,
@@ -55,7 +56,7 @@ const Widget: WidgetType = {
               cls: 'info-font',
               height: 24,
               width: 26,
-              title: '提示',
+              title: `类型：${text === 'DESIGNER' ? '其他' : text} \r\n创建者：${creator}`,
             },
             {
               type: Icon,

src/app/link_set/link-set.component.ts

@@ -2,6 +2,7 @@ import {Htape, WidgetType, Vtape, Left} from '@ui';
 import LeftList from './left/left.component';
 import linkSetModel from './link-set.model';
 import Select from './select/select.component';
+import Right from './right/right.component';
 const className = 'fr.linkset';
 const Widget: WidgetType = {
   _store() {
@@ -40,10 +41,7 @@ const Widget: WidgetType = {
         },
         width: 280,
       }, {
-        type: 'bi.label',
-        cls: 'layout-bg2',
-        textAlign: 'left',
-        text: '宽度充满剩余空间',
+        type: Right,
       }],
     };
   },

src/app/link_set/right/nothing.component.ts

@@ -0,0 +1,35 @@
+import {WidgetType, CenterAdapt, Vertical, Layout, Label} from '@ui/index';
+const className = 'fr.component.right.nothing';
+const Widget: WidgetType = {
+  render() {
+    return {
+      type: CenterAdapt,
+      items: [{
+        type: Vertical,
+        width: 260,
+        height: 180,
+        items:[
+          {
+            type: Layout,
+            cls: 'data-connection-background',
+            width: 260,
+            height: 130,
+          },
+          {
+            type:Label,
+            cls: 'bi-tips',
+            text:'请选择左侧数据连接或点击新建数据连接',
+          },
+          {
+            type:Label,
+            cls: 'bi-tips',
+            text:'平台仅支持使用JDBC的数据连接的管理',
+          },
+        ],
+        
+      }],
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_set/right/right.component.ts

@@ -0,0 +1,35 @@
+import {WidgetType, Vertical} from '@ui';
+import {LinkType} from '@ui/type';
+import Nothing from './nothing.component';
+import RightDetail from './right_detail/right.detail.component';
+import RightModel from './right.model';
+let rightContent: any = null;
+const className = 'fr.component.right';
+const Widget: WidgetType = {
+  _store() {
+    return BI.Models.getModel(RightModel);
+  },
+  watch:{
+    linkSelected(linkSelected: LinkType) {
+      console.log('%clinkSelected: ', 'color: MidnightBlue; background: Aquamarine;', linkSelected);
+    },
+  },
+  render() {
+    return {
+      type:Vertical,
+      cls:'database-right',
+      ref(_ref: any) {
+        rightContent = _ref;
+      },
+    };
+  },
+  mounted() {
+    rightContent.populate(BI.createItems([
+      {
+        type: RightDetail,
+      },
+    ]));
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_set/right/right.model.ts

@@ -0,0 +1,8 @@
+const className = 'fr.model.linkSet.right';
+const Model = BI.inherit(Fix.Model, {
+  context: ['linkList', 'linkSelected'],
+  actions: {
+  },
+});
+BI.model(className, Model);
+export default className;

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

@@ -0,0 +1,18 @@
+import {WidgetType, Vertical, Left, Label, Button} from '@ui/index';
+import Title from '../right_title/right.title.component';
+const className = 'fr.component.right.detail';
+const Widget: WidgetType = {
+  render() {
+    return {
+      type: Vertical,
+      cls:'right-content',
+      items: [
+        {
+          type: Title,
+        },
+      ],
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

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

@@ -0,0 +1,25 @@
+import {WidgetType, Left, Label, Button} from '@ui/index';
+const className = 'fr.component.right.title';
+const Widget: WidgetType = {
+  render() {
+    return {
+      type: Left,
+      height: 40,
+      cls: 'right-title',
+      items: [
+        {
+          type: Label,
+          cls: 'right-title-text',
+          text: '数据连接(APACHE KYLIN)',
+        },
+        {
+          type: Button,
+          cls:'right-title-button',
+          text: '编辑',
+        },
+      ],
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/ui/type.ts

@@ -22,4 +22,5 @@ export interface LinkType{
   databaseType?: string;
   privilegeDetailBeanList?: any;
   isSelected?: boolean;
+  text: string;
 }