feat: 插件连接池页面可配置

README.md

@@ -87,4 +87,65 @@ const form = {
   password: '123456'
 };
 BI.config(ConstantName, (data: object) => form);
+```
+
+### 数据连接池页面
+ConstantName名称为`dec.constant.database.conf.connect.form.${name.toLowerCase()}.pool`，值为组件shortcut的名称
+
+例如配置`Redis`的连接预览页面：
+
+```js
+const classNamePool = 'fr.plugin.redis.pool';
+
+const WidgetPool = BI.inherit(BI.Widget, {
+  render() {
+    const {maxActive, maxIdle, numActive, numIdle} = this.options;
+    
+    return {
+      type: 'bi.left',
+      items: [
+        {
+          type: 'bi.left',
+          cls: 'right-status-item',
+          items: [
+            {
+              type: 'bi.vertical',
+              cls:'right-status-board',
+              items: [
+                {
+                  type: 'bi.vertical',
+                  cls:'right-status-board-item',
+                  items: [
+                    {
+                      type: 'bi.label',
+                      cls: 'right-status-text',
+                      extraCls: 'card-font1',
+                      text: numActive,
+                    },
+                    {
+                      type: 'bi.label',
+                      cls: 'right-status-text',
+                      text: '/',
+                    },
+                    {
+                      type: 'bi.label',
+                      cls: 'right-status-text',
+                      text: maxActive,
+                    },
+                  ],
+                },
+                {
+                  type: 'bi.label',
+                  text: 'Redis连接数',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  },
+});
+BI.shortcut(classNamePool, WidgetPool);
+BI.constant('dec.constant.database.conf.connect.form.redis.pool', classNamePool);
 ```

src/app/app.component.ts

@@ -6,6 +6,7 @@ import linkSet from './link_set/link-set.component';
 import linkStatus from './link_status/link_status.component';
 import '../demo/plugin.redis.edit';
 import '../demo/plugin.redis.preview';
+import '../demo/plugin.tedis.pool';
 import {fetchLinkList} from '../shared/crud/crud.request';
 import './app.component.scss';
 

src/app/link_status/right/right.component.ts

@@ -3,6 +3,9 @@ import Model from './right.model';
 import {info} from '@shared/crud/crud.request';
 import RightCard from './right.card.component';
 import {InfoType} from './right.typings';
+import {LinkType} from '@ui/type';
+import pluginListConstant from '../../app.constant';
+
 const className = 'fr.component.linkStatus.right';
 let Title: any = null;
 let Group: any = null;
@@ -13,13 +16,17 @@ const Widget: WidgetType = {
   },
   watch:{
     statusSelected(title: string) {
-      Title.setText(`数据连接(${title})`);
+      const link = BI.find(this.model.linkList, (index: number, item: LinkType) => item.connectionName === title);
+      const plugins: string[] = BI.Constants.getConstant(pluginListConstant);
+      const isPlugin = link.text && BI.some(plugins, (index: number, item: string) => item === link.text);
+      const Pool = isPlugin ? BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${link.text.toLowerCase()}.pool`) : RightCard;
       info(name, (res: InfoType) => {
         Group.populate(BI.createItems([{
-          type: RightCard,
+          type: Pool,
           ...res,
         }]));
       });
+      Title.setText(`数据连接(${title})`);
     },
   },
   render() {

src/demo/plugin.redis.preview.ts

@@ -1,7 +1,6 @@
 const classNamePreview = 'fr.plugin.redis.preview';
 const RedisConstantName = 'dec.constant.database.conf.connect.form.redis.value';
 const form = BI.Constants.getConstant(RedisConstantName);
-console.log('%cform: ', 'color: MidnightBlue; background: Aquamarine;', form);
 
 const Widget = BI.inherit(BI.Widget, {
   render() {

src/demo/plugin.tedis.pool.ts

@@ -0,0 +1,53 @@
+const classNamePool = 'fr.plugin.redis.pool';
+
+const WidgetPool = BI.inherit(BI.Widget, {
+  render() {
+    const {maxActive, maxIdle, numActive, numIdle} = this.options;
+    
+    return {
+      type: 'bi.left',
+      items: [
+        {
+          type: 'bi.left',
+          cls: 'right-status-item',
+          items: [
+            {
+              type: 'bi.vertical',
+              cls:'right-status-board',
+              items: [
+                {
+                  type: 'bi.vertical',
+                  cls:'right-status-board-item',
+                  items: [
+                    {
+                      type: 'bi.label',
+                      cls: 'right-status-text',
+                      extraCls: 'card-font1',
+                      text: numActive,
+                    },
+                    {
+                      type: 'bi.label',
+                      cls: 'right-status-text',
+                      text: '/',
+                    },
+                    {
+                      type: 'bi.label',
+                      cls: 'right-status-text',
+                      text: maxActive,
+                    },
+                  ],
+                },
+                {
+                  type: 'bi.label',
+                  text: 'Redis连接数',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  },
+});
+BI.shortcut(classNamePool, WidgetPool);
+BI.constant('dec.constant.database.conf.connect.form.redis.pool', classNamePool);