From aa18ab5f208904b3f05a6f85fba4b8b2fe3d4873 Mon Sep 17 00:00:00 2001 From: alan Date: Fri, 26 Apr 2019 17:38:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=9F=BA=E6=9C=AC?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 1 - README.md | 1 + package.json | 2 +- src/app/App.scss | 43 +++++++++++++++++ src/app/App.ts | 34 +++++++++++++ src/app/LinkSet/Left.ts | 31 ++++++++++++ src/app/LinkSet/LinkSet.ts | 33 +++++++++++++ src/app/LinkSet/Select.ts | 31 ++++++++++++ src/app/LinkStatus/LinkStatus.ts | 33 +++++++++++++ src/app/Title/Title.ts | 41 ++++++++++++++++ src/app/Title/TitleItem.ts | 43 +++++++++++++++++ src/index.ts | 8 ++- src/shared/FineUI.ts | 83 ++++++++++++++++++++++++++++++++ 13 files changed, 377 insertions(+), 7 deletions(-) create mode 100644 src/app/App.scss create mode 100644 src/app/App.ts create mode 100644 src/app/LinkSet/Left.ts create mode 100644 src/app/LinkSet/LinkSet.ts create mode 100644 src/app/LinkSet/Select.ts create mode 100644 src/app/LinkStatus/LinkStatus.ts create mode 100644 src/app/Title/Title.ts create mode 100644 src/app/Title/TitleItem.ts create mode 100644 src/shared/FineUI.ts diff --git a/.eslintrc.js b/.eslintrc.js index b16a73d..2a38e84 100644 --- a/.eslintrc.js +++ b/.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", diff --git a/README.md b/README.md index 819978c..720e0af 100644 --- a/README.md +++ b/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) ## 开始 下载代码 diff --git a/package.json b/package.json index 51d545e..b323524 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "start": "webpack-dev-server --mode development --open", "build": "webpack --mode production" }, - "author": "alan", + "author": "alan ", "license": "ISC", "devDependencies": { "@typescript-eslint/eslint-plugin": "^1.6.0", diff --git a/src/app/App.scss b/src/app/App.scss new file mode 100644 index 0000000..a411b4a --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/app/App.ts b/src/app/App.ts new file mode 100644 index 0000000..5762978 --- /dev/null +++ b/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, + ], + }; + } +} diff --git a/src/app/LinkSet/Left.ts b/src/app/LinkSet/Left.ts new file mode 100644 index 0000000..a67946a --- /dev/null +++ b/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: '高度充满剩余空间', + }], + }; + } +} diff --git a/src/app/LinkSet/LinkSet.ts b/src/app/LinkSet/LinkSet.ts new file mode 100644 index 0000000..e0947c9 --- /dev/null +++ b/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); + } +} diff --git a/src/app/LinkSet/Select.ts b/src/app/LinkSet/Select.ts new file mode 100644 index 0000000..4f6e7a8 --- /dev/null +++ b/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, + }, + }; + } +} diff --git a/src/app/LinkStatus/LinkStatus.ts b/src/app/LinkStatus/LinkStatus.ts new file mode 100644 index 0000000..0bfcaf7 --- /dev/null +++ b/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); + } +} diff --git a/src/app/Title/Title.ts b/src/app/Title/Title.ts new file mode 100644 index 0000000..13283db --- /dev/null +++ b/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; +} diff --git a/src/app/Title/TitleItem.ts b/src/app/Title/TitleItem.ts new file mode 100644 index 0000000..9a18ee1 --- /dev/null +++ b/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', + }); + } + } +} diff --git a/src/index.ts b/src/index.ts index b644afd..9f76acd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,9 +1,7 @@ +import App from './app/App'; + BI.createWidget({ type:'bi.vertical', element: 'body', - items:[{ - type: 'bi.label', - value: 'Hello world', - textAlign: 'left', - }], + items:[new App().widget], }); diff --git a/src/shared/FineUI.ts b/src/shared/FineUI.ts new file mode 100644 index 0000000..2ca16b8 --- /dev/null +++ b/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; +}