refactor: 根据开发规范重构代码

src/app/App.ts

@@ -1,34 +0,0 @@
-import FineUi, {FineType} from '../shared/FineUI';
-import './App.scss';
-import Title from './Title/Title';
-import LinkSet from './LinkSet/LinkSet';
-import LinkStatus from './LinkStatus/LinkStatus';
-
-export default class App extends FineUi {
-  private title: Title;
-  private linSet: LinkSet;
-  private linkStatus: LinkStatus;
-  public constructor() {
-    super();
-    this.linSet = new LinkSet();
-    this.linkStatus = new LinkStatus();
-    this.title = new Title();
-    this.title.onSelect = type => {
-      this.linSet.setVisible(type === 'linkSet');
-      this.linkStatus.setVisible(type === 'lintStatus');
-    };
-  }
-  public render(): FineType {
-    return {
-      type: 'bi.vtape',
-      cls: 'database-connection-layout',
-      items: [{
-        el: this.title.widget,
-        height: 40,
-      },
-      this.linSet.widget,
-      this.linkStatus.widget,
-      ],
-    };
-  }
-}

src/app/LinkSet/Left.ts

@@ -1,31 +0,0 @@
-import FineUi, {FineType} from '../../shared/FineUI';
-import Select from './Select';
-
-export default class Left extends FineUi {
-  private select: Select;
-  public constructor() {
-    super();
-    this.select = new Select();
-  }
-  public render(): FineType {
-    return {
-      type: 'bi.vtape',
-      cls: 'database-left',
-      items: [{
-        el: {
-          type: 'bi.left',
-          cls:'select-group',
-          items:[
-            this.select.widget,
-          ],
-        },
-        height: 40,
-      }, {
-        type: 'bi.label',
-        cls: 'layout-bg2',
-        textAlign: 'left',
-        text: '高度充满剩余空间',
-      }],
-    };
-  }
-}

src/app/LinkSet/LinkSet.ts

@@ -1,33 +0,0 @@
-import FineUi, {FineType} from '../../shared/FineUI';
-import Left from './Left';
-
-export default class LinkSet extends FineUi {
-  private linkSet: any;
-  private left: Left;
-  public constructor() {
-    super();
-    this.left = new Left();
-  }
-  public render(): FineType {
-    return {
-      type:'bi.htape',
-      cls: 'linkset',
-      items: [{
-        el: this.left.widget,
-        width: 280,
-      }, {
-        type: 'bi.label',
-        cls: 'layout-bg2',
-        textAlign: 'left',
-        text: '宽度充满剩余空间',
-      }],
-      ref:(_ref: any) => {
-        this.linkSet = _ref;
-      },
-    };
-  }
-
-  public setVisible(type: boolean): void{
-    this.linkSet.setVisible(type);
-  }
-}

src/app/LinkStatus/LinkStatus.ts

@@ -1,33 +0,0 @@
-import FineUi, {FineType} from '../../shared/FineUI';
-
-export default class LinkStatus extends FineUi {
-  private linkStatus: any;
-  public render(): FineType {
-    return {
-      type:'bi.htape',
-      cls: 'linkStatus',
-      invisible: true,
-      items: [{
-        el: {
-          type: 'bi.label',
-          cls: 'layout-bg1',
-          textAlign: 'left',
-          text: '123',
-        },
-        width: 280,
-      }, {
-        type: 'bi.label',
-        cls: 'layout-bg2',
-        textAlign: 'left',
-        text: '456',
-      }],
-      ref:(_ref: any) => {
-        this.linkStatus = _ref;
-      },
-    };
-  }
-  
-  public setVisible(type: boolean): void{
-    this.linkStatus.setVisible(type);
-  }
-}

src/app/Title/Title.ts

@@ -1,41 +0,0 @@
-import FineUi, {FineType} from '../../shared/FineUI';
-import TitleItem from './TitleItem';
-
-export default class Title extends FineUi {
-  public onSelect: SelectType;
-  private linkSet: TitleItem;
-  private lintStatus: TitleItem;
-  public constructor() {
-    super();
-    this.linkSet = new TitleItem({title:'数据连接管理'});
-    this.lintStatus = new TitleItem({title:'连接池状态'});
-    this.linkSet.onClick = () => {
-      this.linkSet.setSelect(true);
-      this.lintStatus.setSelect(false);
-      this.onSelect ? this.onSelect('linkSet') : null;
-    };
-
-    this.lintStatus.onClick = () => {
-      this.lintStatus.setSelect(true);
-      this.linkSet.setSelect(false);
-      this.onSelect ? this.onSelect('lintStatus') : null;
-    };
-  }
-  public render(): FineType {
-    return {
-      type: 'bi.left',
-      cls: 'title',
-      items:[
-        this.linkSet.widget,
-        this.lintStatus.widget,
-      ],
-    };
-  }
-
-  protected mounted(): void{
-    this.linkSet.setSelect(true);
-  }
-}
-interface SelectType {
-  (type: 'linkSet'|'lintStatus'): void;
-}

src/app/Title/TitleItem.ts

@@ -1,43 +0,0 @@
-import FineUi, {FineType} from '../../shared/FineUI';
-export default class TitleItem extends FineUi {
-  private title: string;
-  private titleItem: any;
-  public onClick: Function;
-  public constructor(props?: {title: string}) {
-    super();
-    this.title = props.title;
-  }
-  public render(): FineType {
-    return {
-      type: 'bi.label',
-      cls: 'title-item',
-      text: this.title,
-      ref:(_ref: any) => {
-        this.titleItem = _ref;
-      },
-    };
-  }
-
-  protected mounted(): void{
-    this.titleItem.element.on('click', () => {
-      this.onClick ? this.onClick() : null;
-    });
-  }
-  /**
- * 设置为选中状态
- * @param data
- */
-  public setSelect(data: boolean): void {
-    if (data) {
-      this.titleItem.setStyle({
-        color: '#3685f2',
-        'border-bottom': 'solid 2px #3685f2',
-      });
-    } else {
-      this.titleItem.setStyle({
-        color: '#3d4d66',
-        'border-bottom': 'none',
-      });
-    }
-  }
-}

src/app/app.component.scss

@@ -40,6 +40,9 @@
       margin: 10px;
       .database-link-items{
         padding-left:10px;
+        .link-item{
+          border-top: 1px solid #e8eaed;
+        }
       }
     }
   }

src/app/app.component.ts

@@ -0,0 +1,37 @@
+import {Vtape} from '../ui/index';
+import appModel from './app.model';
+import title from './title/title.component';
+import linkSet from './linkSet/linkSet.component';
+import linkStatus from './linkStatus/linkStatus.component';
+import './app.component.scss';
+
+const className = 'fr.main';
+const Widget = BI.inherit(BI.Widget, {
+  _store() {
+    return BI.Models.getModel(appModel);
+  },
+  render() {
+    return {
+      type: Vtape,
+      cls: 'database-connection-layout',
+      items: [{
+        el: {
+          type: title,
+        },
+        height: 40,
+      },
+      {
+        type:linkSet,
+      },
+      {
+        type: linkStatus,
+      },
+      ],
+    };
+  },
+  mounted() {
+  },
+});
+BI.shortcut(className, Widget);
+
+export default className;

src/app/app.model.ts

@@ -0,0 +1,23 @@
+const className = 'fr.model.main';
+import {ModelType} from '@ui';
+const Model: ModelType = {
+    
+  childContext: ['tab'],
+  state () {
+    return {
+      tab: '数据连接管理',
+    };
+  },
+  computed: {
+        
+  },
+
+  actions: {
+    initData() {
+    },
+  },
+};
+
+BI.model(className, BI.inherit(Fix.Model, Model));
+
+export default className;

src/app/linkSet/linkSet.component.ts

@@ -0,0 +1,54 @@
+import {Htape, WidgetType, Vtape} from '@ui';
+import linkSetModel from './linkSet.model';
+import Select from './select/select.component';
+const className = 'fr.linkset';
+const Widget: WidgetType = {
+  _store() {
+    return BI.Models.getModel(linkSetModel);
+  },
+  watch:{
+    tab(tab: string) {
+      this.setVisible(tab === '数据连接管理');
+    },
+  },
+  render() {
+    return {
+      type: Htape,
+      cls: 'linkset',
+      items: [{
+        el: {
+          type: Vtape,
+          cls: 'database-left',
+          items: [
+            {
+              el: {
+                type: 'bi.left',
+                cls:'select-group',
+                items:[
+                  {
+                    type: Select,
+                  },
+                ],
+              },
+              height: 40,
+            }, {
+              type: 'bi.label',
+              cls: 'layout-bg2',
+              textAlign: 'left',
+              text: '高度充满剩余空间',
+            },
+          ],
+        },
+        width: 280,
+      }, {
+        type: 'bi.label',
+        cls: 'layout-bg2',
+        textAlign: 'left',
+        text: '宽度充满剩余空间',
+      }],
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+
+export default className;

src/app/linkSet/linkSet.model.ts

@@ -0,0 +1,11 @@
+import {ModelType} from '@ui/index';
+
+const className = 'fr.model.linkset';
+const Model: ModelType = {
+  context: ['tab'],
+  actions: {
+    
+  },
+};
+BI.model(className, BI.inherit(Fix.Model, Model));
+export default className;

src/app/linkSet/select/select.component.ts

@@ -1,11 +1,12 @@
-import FineUi, {FineType} from '../../shared/FineUI';
+import {WidgetType, Combo, ButtonGroup, TextItem, Vertical} from '@ui';
 const linkList = [
   'APACHE KYLIN', 'DERBY', 'HP Vertica', 'IBM DB2', 'INFORMIX', 'Microsoft SQL Server', 'MySQL', 'Oracle', 'Privotal Greenplum Database', 'Postgresql', 'GaussDB 200',
 ];
-export default class Select extends FineUi {
-  public render(): FineType {
+const className = 'fr.linkset.select';
+const Widget: WidgetType = {
+  render() {
     return {
-      type: 'bi.combo',
+      type: Combo,
       cls:'select',
       trigger: 'click',
       adjustYOffset: 4,
@@ -16,32 +17,36 @@ export default class Select extends FineUi {
       },
       popup: {
         el: {
-          type: 'bi.button_group',
+          type: ButtonGroup,
           cls:'database-link-items',
           items: [...BI.map(linkList, (index: number, item: string) => {
             return {
-              type: 'bi.text_item',
+              type: TextItem,
               height: 24,
               width: 152,
               text: item,
             };
           }), {
-            type: 'bi.text_item',
+            type: TextItem,
+            cls: 'link-item',
             height: 24,
             width: 152,
             text: '更多数据连接...',
           }, {
-            type: 'bi.text_item',
+            type: TextItem,
+            cls: 'link-item',
             height: 24,
             width: 152,
             text: '其他',
           }],
           layouts: [{
-            type: 'bi.vertical',
+            type: Vertical,
           }],
         },
         maxHeight: 400,
       },
     };
-  }
-}
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/linkStatus/linkStatus.component.ts

@@ -0,0 +1,40 @@
+import {WidgetType, Htape} from '@ui';
+import linkStatusModel from './linkStatus.model';
+const className = 'fr.linkstatus';
+
+const Widget: WidgetType = {
+  _store() {
+    return BI.Models.getModel(linkStatusModel);
+  },
+  watch:{
+    tab(tab: string) {
+      this.setVisible(tab === '连接池状态');
+    },
+  },
+  render() {
+    return {
+      type: Htape,
+      cls: 'linkStatus',
+      items: [{
+        el: {
+          type: 'bi.label',
+          cls: 'layout-bg2',
+          textAlign: 'left',
+          text: '222',
+        },
+        width: 280,
+      }, {
+        type: 'bi.label',
+        cls: 'layout-bg2',
+        textAlign: 'left',
+        text: '宽度充满剩余空间',
+      }],
+    };
+  },
+  mounted() {
+    this.setVisible(false);
+  },
+};
+
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/linkStatus/linkStatus.model.ts

@@ -0,0 +1,10 @@
+import {ModelType} from '@ui';
+const className = 'fr.model.linkstatus';
+const Model: ModelType = {
+  context: ['tab'],
+  actions: {
+    
+  },
+};
+BI.model(className, BI.inherit(Fix.Model, Model));
+export default className;

src/app/title/title.component.ts

@@ -0,0 +1,21 @@
+import {Left, WidgetType} from '@ui/index';
+import TitleItem from './titleItem/title-item.component';
+const tabs = ['数据连接管理', '连接池状态'];
+const className = 'fr.title';
+const Widget: WidgetType = {
+  render() {
+    return {
+      type: Left,
+      cls: 'title',
+      items: BI.map(tabs, (index: number, text: string) => {
+        return {
+          type: TitleItem,
+          text,
+        };
+      }),
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+
+export default className;

src/app/title/titleItem/title-item.component.ts

@@ -0,0 +1,37 @@
+import {Label} from '@ui';
+import tableItemModel from './title-item.model';
+import {getSelectStyle} from './title-item.service';
+const className = 'fr.title.item';
+const Widget = BI.inherit(BI.Widget, {
+  props: {
+    text:'',
+  },
+  _store() {
+    return BI.Models.getModel(tableItemModel);
+  },
+  watch:{
+    tab(tab: string) {
+      const {text} = this.options;
+      this.element.css(getSelectStyle(text, tab));
+    },
+  },
+  render() {
+    const {text} = this.options;
+    
+    return {
+      type: Label,
+      cls: 'title-item',
+      text,
+    };
+  },
+  mounted() {
+    const {text} = this.options;
+    this.element.css(getSelectStyle('数据连接管理', text));
+    this.element.on('click', () => {
+      this.store.setTab(text);
+    });
+  },
+});
+BI.shortcut(className, Widget);
+
+export default className;

src/app/title/titleItem/title-item.model.ts

@@ -0,0 +1,11 @@
+const className = 'fr.model.title.item';
+const Model = BI.inherit(Fix.Model, {
+  context: ['tab'],
+  actions: {
+    setTab(value: string) {
+      this.model.tab = value;
+    },
+  },
+});
+BI.model(className, Model);
+export default className;

src/app/title/titleItem/title-item.service.ts

@@ -0,0 +1,13 @@
+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/index.ts

@@ -1,7 +1,6 @@
-import App from './app/App';
+import App from './app/app.component';
 
 BI.createWidget({
-  type:'bi.vertical',
+  type:App,
   element: 'body',
-  items:[new App().widget],
 });

src/shared/FineUI.ts

@@ -1,83 +0,0 @@
-export default class FineUi {
-  /**
-   * 全局BI
-   */
-  public BI = BI;
-  protected _Widget: any;
-  protected props: any;
-  /**
-   * 组件实例
-   */
-  public get widget(): any {
-    return this.createWidget(this.render());
-  }
-
-
-  public constructor(props?: any) {
-    this.props = props;
-  }
-  
-  protected render(): FineType {
-    return {
-      type: '',
-    };
-  }
-  protected createWidget(obj: object): any {
-    this._Widget = BI.createWidget(obj);
-    this._Widget.beforeCreate = (): void => {
-      this.beforeCreate();
-    };
-    this._Widget.created = (): void => {
-      this.created();
-    };
-    this._Widget.beforeMount = (): void => {
-      this.beforeMount();
-    };
-    this._Widget.mounted = (): void => {
-      this.mounted();
-    };
-    this._Widget.beforeDestroy = (): void => {
-      this.beforeDestroy();
-    };
-    this._Widget.destroyed = (): void => {
-      this.destroyed();
-    };
-    
-    return this._Widget;
-  }
-
-  protected beforeCreate(): void{
-
-  }
-  protected created(): void{
-
-  }
-  protected beforeMount(): void{
-
-  }
-  protected mounted(): void{
-
-  }
-  protected beforeDestroy(): void{
-
-  }
-  protected destroyed(): void{
-
-  }
-}
-
-export interface FineType{
-  type: string;
-  cls?: string;
-  width?: number;
-  height?: number;
-  items?: any;
-  text?: string;
-  invisible?: boolean;
-  extraCls?: string;
-  popup?: any;
-  el?: any;
-  trigger?: string;
-  adjustYOffset?: number;
-  ref?: any;
-}

src/ui/fineui.ts

@@ -0,0 +1,40 @@
+export const TextItem = 'bi.text_item';
+export const IconTextItem = 'bi.icon_text_item';
+export const IconTextIconItem = 'bi.icon_text_icon_item';
+export const IconButton = 'bi.icon_button';
+export const IconChangeButton = 'bi.icon_change_button';
+export const TextButton = 'bi.text_button';
+export const DownListCombo = 'bi.down_list_combo';
+export const Label = 'bi.label';
+export const SmallTextEditor = 'bi.small_text_editor';
+export const MultiFileEditor = 'bi.multifile_editor';
+export const SignEditor = 'bi.sign_editor';
+export const Button = 'bi.button';
+export const TextEditor = 'bi.text_editor';
+export const MultiSelectInsertCombo = 'bi.multi_select_insert_combo';
+export const ButtonGroup = 'bi.button_group';
+export const AllValueChooserCombo = 'bi.all_value_chooser_combo';
+export const TextAreaEditor = 'bi.textarea_editor';
+export const MultiSelectItem = 'bi.multi_select_item';
+export const BarPopOver = 'bi.bar_popover';
+export const DynamicDateCombo = 'bi.dynamic_date_combo';
+export const DynamicDateTimeCombo = 'bi.dynamic_date_time_combo';
+export const MultiTreeCombo = 'bi.multi_tree_combo';
+export const RichEditor = 'bi.rich_editor';
+export const NicEditor = 'bi.nic_editor';
+export const Editor = 'bi.editor';
+export const MultiTreePopupView = 'bi.multi_tree_popup_view';
+export const SingleSelectRadioItem = 'bi.single_select_radio_item';
+export const SingleSelectInsertCombo = 'bi.single_select_insert_combo';
+export const Tab = 'bi.tab';
+export const Combo = 'bi.combo';
+
+// 布局
+export const VerticalAdapt = 'bi.vertical_adapt';
+export const Vtape = 'bi.vtape';
+export const CenterAdapt = 'bi.center_adapt';
+export const Htape = 'bi.htape';
+export const Layout = 'bi.layout';
+export const Absolute = 'bi.absolute';
+export const Vertical = 'bi.vertical';
+export const Left = 'bi.left';

src/ui/index.ts

@@ -0,0 +1,15 @@
+export * from './fineui';
+export interface WidgetType{
+  _store?: Function;
+  watch?: object;
+  render: Function;
+  mounted?: Function;
+}
+
+export interface ModelType{
+  context?: string[];
+  childContext?: string[];
+  state?: Function;
+  computed?: object;
+  actions?: object;
+}

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": true,
@@ -9,6 +10,10 @@
       "es2017",
       "dom"
     ],
+    "paths":{
+      "@ui/*": ["src/ui/*"],
+      "@ui": ["src/ui/index"],
+    }
   },
   "include": [
       "./src/**/*",

webpack.config.js

@@ -12,14 +12,17 @@ module.exports = env => {
   return{
     mode: "development",
     entry: path.join(__dirname, `src/index.ts`),
-    devtool: "none",
+    devtool: "source-map",
     output: {
       path: __dirname + '/dist',
       filename: `index.js`,
       publicPath: ''
     },
     resolve: {
-      extensions: [ '.ts', '.js' ]
+      extensions: [ '.ts', '.js' ],
+      alias:{
+        "@ui": path.resolve("src/ui"),
+      }
     },
     plugins: [htmlWebpackPlugin, new MiniCssExtractPlugin({filename: `style.css`}), new CopyPlugin([
       { from: 'src/lib', to: 'lib' }