feat: 完成数据连接明细显示

src/app/app.component.scss

@@ -83,6 +83,7 @@
     }
   }
   .right-content{
+    height: 100%;
     .right-title{
       border-bottom: 1px solid #e8eaed;
       color: #3d4d66;
@@ -97,8 +98,29 @@
         margin-top: 8px;
       }
     }
+    .right-show{
+      margin: 10px;
+    }
   }
 }
+.both-side{
+  line-height: 24px;
+  margin-bottom: 10px;
+  .left{
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    position: relative;
+    flex-shrink: 0;
+    font-weight: 700;
+  }
+}
+.shared-component-title{
+  height: 24px;
+  line-height: 24px;
+  margin-bottom: 10px;
+  color: #9ea6b2;
+  border-bottom: 1px solid #e8eaed;
+}
 
 .link-font .b-font:before {
   content: "\e759";

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

@@ -11,7 +11,11 @@ const Widget: WidgetType = {
   },
   watch:{
     linkSelected(linkSelected: LinkType) {
-      console.log('%clinkSelected: ', 'color: MidnightBlue; background: Aquamarine;', linkSelected);
+      rightContent.populate(BI.createItems([
+        {
+          type: RightDetail,
+        },
+      ]));
     },
   },
   render() {
@@ -26,7 +30,7 @@ const Widget: WidgetType = {
   mounted() {
     rightContent.populate(BI.createItems([
       {
-        type: RightDetail,
+        type: Nothing,
       },
     ]));
   },

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

@@ -1,5 +1,6 @@
 import {WidgetType, Vertical, Left, Label, Button} from '@ui/index';
 import Title from '../right_title/right.title.component';
+import RightShow from '../right_show/right.show.component';
 const className = 'fr.component.right.detail';
 const Widget: WidgetType = {
   render() {
@@ -9,6 +10,8 @@ const Widget: WidgetType = {
       items: [
         {
           type: Title,
+        }, {
+          type: RightShow,
         },
       ],
     };

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

@@ -0,0 +1,72 @@
+import {WidgetType, Vertical} from '@ui/index';
+import RightShowModel from './right.show.model';
+import BothSide from '@shared/components/both.side.component';
+import Title from '@shared/components/title.component';
+import {LinkType} from '@ui/type';
+const className = 'fr.component.right.show';
+const Widget: WidgetType = {
+  _store() {
+    return BI.Models.getModel(RightShowModel);
+  },
+  render() {
+    const linkSelected: LinkType = this.model.linkSelected;
+    
+    return {
+      type: Vertical,
+      cls: 'right-show',
+      items: [
+        {
+          type: BothSide,
+          leftText: '数据连接名',
+          rightText: linkSelected.connectionName,
+        },
+        {
+          type: BothSide,
+          leftText: '驱动器',
+          rightText: linkSelected.driver,
+        },
+        {
+          type: BothSide,
+          leftText: 'URL',
+          rightText: linkSelected.url,
+        },
+        {
+          type: BothSide,
+          leftText: '编码',
+          rightText: linkSelected.originalCharsetName === '' ? '自动' : linkSelected.originalCharsetName,
+        },
+        {
+          type: BothSide,
+          leftText: '用户名',
+          rightText: linkSelected.user,
+        },
+        {
+          type: BothSide,
+          leftText: '密码',
+          rightText: linkSelected.password,
+        },
+        {
+          type: Title,
+          text: '连接池属性',
+        },
+        {
+          type: BothSide,
+          leftText: 'SQL验证查询',
+          rightText: linkSelected.validationQuery,
+        },
+        {
+          type: BothSide,
+          leftText: '获取连接前校验',
+          rightText: linkSelected.testOnBorrow ? '是' : '否',
+        },
+        {
+          type: BothSide,
+          leftText: '最大连接数量',
+          rightText: linkSelected.maxActive,
+        },
+      ],
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

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

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

src/shared/components/both.side.component.ts

@@ -0,0 +1,28 @@
+import {WidgetType, Htape} from '@ui/index';
+const BothSide = 'fr.shared.component.both.side';
+const Widget: WidgetType = {
+  render() {
+    const {leftText, rightText} = this.options;
+    
+    return {
+      type: Htape,
+      cls: 'both-side',
+      height:24,
+      items: [{
+        el: {
+          type: 'bi.label',
+          cls: 'left',
+          textAlign: 'left',
+          text: leftText,
+        },
+        width: 115,
+      }, {
+        type: 'bi.label',
+        textAlign: 'left',
+        text: rightText,
+      }],
+    };
+  },
+};
+BI.shortcut(BothSide, BI.inherit(BI.Widget, Widget));
+export default BothSide;

src/shared/components/title.component.ts

@@ -0,0 +1,16 @@
+import {WidgetType, Label} from '@ui/index';
+const className = 'fr.shared.component.title';
+const Widget: WidgetType = {
+  render() {
+    const {text} = this.options;
+    
+    return {
+      type: Label,
+      cls: 'shared-component-title',
+      textAlign: 'left',
+      text,
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/shared/crud/curd.mock.ts

@@ -1 +1 @@
-export const linkList = {"data":[{"connectionId":"8c1c52f1-3d0a-429e-b35f-ee1e085a8b72","database":"","connectionName":"FRDemo","driver":"org.sqlite.JDBC","url":"jdbc:sqlite://${ENV_HOME}/../help/FRDemo.db","user":"","password":"","queryType":"","newCharsetName":'null',"originalCharsetName":'null',"validationQuery":"","schema":"","testOnBorrow":false,"maxActive":50,"options":'null',"port":0,"authType":"","creator":"designer","principal":"","keyPath":"","databaseType":"designer","privilegeDetailBeanList":'null'}]}
+export const linkList = {"data":[{"connectionId":"8c1c52f1-3d0a-429e-b35f-ee1e085a8b72","database":"","connectionName":"FRDemo","driver":"org.sqlite.JDBC","url":"jdbc:sqlite://${ENV_HOME}/../help/FRDemo.db","user":"","password":"","queryType":"","newCharsetName":'null',"originalCharsetName":'',"validationQuery":"","schema":"","testOnBorrow":false,"maxActive":50,"options":'null',"port":0,"authType":"","creator":"designer","principal":"","keyPath":"","databaseType":"designer","privilegeDetailBeanList":'null'}]}

tsconfig.json

@@ -15,6 +15,8 @@
       "@ui": ["src/ui/index"],
       "@types/*": ["types/*"],
       "@types": ["src/ui/index"],
+      "@shared/*": ["src/shared/*"],
+      "@shared": ["src/shared"],
     }
   },
   "include": [

webpack.config.js

@@ -23,6 +23,7 @@ module.exports = env => {
       alias:{
         "@ui": path.resolve("src/ui"),
         "@types": path.resolve("types"),
+        "@shared": path.resolve("src/shared"),
       }
     },
     plugins: [htmlWebpackPlugin, new MiniCssExtractPlugin({filename: `style.css`}), new CopyPlugin([