feat: 完成基本布局

.eslintrc.js

@@ -193,7 +193,6 @@ module.exports = {
     ], // 禁止空块语句,但允许出现空的 catch 子句
     // 注释
     "spaced-comment": "error", // 注释前有空格
-    "lines-around-comment": "error", // 块级注释前要有空行
     "no-mixed-spaces-and-tabs": "error", // 禁止使用 空格 和 tab 混合缩进
     "space-before-blocks": [
         "error",

README.md

@@ -1,4 +1,5 @@
 # database-connection 数据连接设置页面
+![start](https://img.shields.io/badge/start-2019%2F04%2F26-blue.svg) ![finui](https://img.shields.io/badge/lib-FinUi-blue.svg)
 ## 开始
 下载代码
 

package.json

@@ -7,7 +7,7 @@
     "start": "webpack-dev-server --mode development --open",
     "build": "webpack --mode production"
   },
-  "author": "alan",
+  "author": "alan <alan@fanrun.com>",
   "license": "ISC",
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^1.6.0",

src/app/App.scss

@@ -0,0 +1,43 @@
+.database-connection-layout{
+  width: 100%;
+  height: 100%;
+  background-color: #f7f8fa;
+  .title{
+    background-color: #fff;
+    border-bottom: 1px solid #e8eaed;
+    .title-item{
+      height: 39px;
+      line-height: 39px;
+      padding-left: 15px;
+      padding-right: 15px;
+      text-align: center;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      position: relative;
+      flex-shrink: 0;
+      font-weight: 700;
+      cursor: pointer;
+    }
+  }
+  .linkset{
+    margin: 10px;
+    bottom: 0px;
+    background-color: #ffffff;
+  }
+  .linkStatus{
+    margin: 10px;
+    top: 40px;
+    background-color: #ffffff;
+  }
+}
+
+.database-left{
+  border-right: 1px solid #e8eaed;
+  .select-group{
+    border-bottom: 1px solid #e8eaed;
+    .select{
+      margin: 10px;
+    }
+  }
+}

src/app/App.ts

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,33 @@
+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/LinkSet/Select.ts

@@ -0,0 +1,31 @@
+import FineUi, {FineType} from '../../shared/FineUI';
+export default class Select extends FineUi {
+  public render(): FineType {
+    return {
+      type: 'bi.combo',
+      cls:'select',
+      trigger: 'click',
+      adjustYOffset: 4,
+      el: {
+        type: 'bi.button',
+        text: '测试',
+        height: 24,
+      },
+      popup: {
+        el: {
+          type: 'bi.button_group',
+          items: BI.makeArray(5, {
+            type: 'bi.text_item',
+            height: 24,
+            width: 173,
+            text: 'item',
+          }),
+          layouts: [{
+            type: 'bi.vertical',
+          }],
+        },
+        maxHeight: 200,
+      },
+    };
+  }
+}

src/app/LinkStatus/LinkStatus.ts

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,41 @@
+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

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

@@ -1,9 +1,7 @@
+import App from './app/App';
+
 BI.createWidget({
   type:'bi.vertical',
   element: 'body',
-  items:[{
+  items:[new App().widget],
-    type: 'bi.label',
-    value: 'Hello world',
-    textAlign: 'left',
-  }],
 });

src/shared/FineUI.ts

@@ -0,0 +1,83 @@
+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;
+}