refactor: 使用bi.linear_segment替换掉自己实现的tab

src/app/app.ts

@@ -1,4 +1,4 @@
-import {Vtape, Absolute} from '../ui/index';
+import {Vtape, Absolute, LinearSegment} from '../ui/index';
 import appModel from './app.model';
 import title from './title/title';
 import linkSet from './connection/link_set';

src/app/title/item/title_item.service.ts

@@ -1,13 +0,0 @@
-export function getSelectStyle(status: string, nowStatus: string): any {
-  if (status === nowStatus) {
-    return {
-      color: '#3685f2',
-      'border-bottom': 'solid 2px #3685f2',
-    };
-  }
-  
-  return {
-    color: '#3d4d66',
-    'border-bottom': 'none',
-  };
-}

src/app/title/item/title_item.ts

@@ -1,39 +0,0 @@
-import {Label} from '@ui';
-import tableItemModel from './title_item.model';
-import {getSelectStyle} from './title_item.service';
-const className = 'dec.dcm.title.item';
-const Widget = BI.inherit(BI.BasicButton, {
-  props: {
-    baseCls: 'bi-font-bold',
-    text: '',
-  },
-  _store() {
-    return BI.Models.getModel(tableItemModel);
-  },
-  watch: {
-    tab(tab: string) {
-      const {value} = this.options;
-      this.title.setStyle(getSelectStyle(value, tab));
-    },
-  },
-  render() {
-    const {text} = this.options;
-    
-    return {
-      type: Label,
-      height: 40,
-      hgap: 15,
-      ref: _ref => {
-        this.title = _ref;
-      },
-      text,
-    };
-  },
-  doClick() {
-    const {value} = this.options;
-    this.store.setTab(value);
-  },
-});
-BI.shortcut(className, Widget);
-
-export default className;

src/app/title/title.ts

@@ -1,6 +1,6 @@
 import './title.less';
-import {WidgetType, IconButton, LeftRightVerticalAdapt} from '@ui/index';
+import {WidgetType, IconButton, LeftRightVerticalAdapt, LinearSegment} from '@ui/index';
-import TitleItem from './item/title_item';
+import Model from './title.model';
 import {isDesigner, closeWindow} from '@shared/crud/crud.request';
 import {TAB_LINK_SET, TAB_LINK_POOL} from '@private/constants';
 const className = 'dec.dcm.title';
@@ -8,23 +8,36 @@ const Widget: WidgetType = {
   props: {
     baseCls: 'dec-webui-dcm-title bi-card bi-border-bottom',
   },
+  _store() {
+    return BI.Models.getModel(Model);
+  },
   render() {
     const showCloseButton = isDesigner();
+    const that = this;
     
     return {
       type: LeftRightVerticalAdapt,
       items: {
         left: [
           {
-            type: TitleItem,
+            type: LinearSegment,
-            cls: 'title-item-selected bi-border-bottom',
+            cls: 'bi-card',
+            height: 40,
+            width: 200,
+            items: [{
               text: BI.i18nText('Dec-Dcm_Connection_Management'),
               value: TAB_LINK_SET,
-          },
+              selected: true,
-          {
+            }, {
-            type: TitleItem,
               text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'),
               value: TAB_LINK_POOL,
+            }],
+            listeners: [{
+              eventName: 'EVENT_CHANGE',
+              action () {
+                that.store.setTab(this.getValue()[0]);
+              },
+            }],
           },
         ],
         right: [

src/ui/fineui.ts

@@ -34,6 +34,7 @@ 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 LinearSegment = 'bi.linear_segment';
 
 // 布局
 export const VerticalAdapt = 'bi.vertical_adapt';