diff --git a/src/app/App.ts b/src/app/App.ts deleted file mode 100644 index 5762978..0000000 --- a/src/app/App.ts +++ /dev/null @@ -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, - ], - }; - } -} diff --git a/src/app/LinkSet/Left.ts b/src/app/LinkSet/Left.ts deleted file mode 100644 index a67946a..0000000 --- a/src/app/LinkSet/Left.ts +++ /dev/null @@ -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: '高度充满剩余空间', - }], - }; - } -} diff --git a/src/app/LinkSet/LinkSet.ts b/src/app/LinkSet/LinkSet.ts deleted file mode 100644 index e0947c9..0000000 --- a/src/app/LinkSet/LinkSet.ts +++ /dev/null @@ -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); - } -} diff --git a/src/app/LinkStatus/LinkStatus.ts b/src/app/LinkStatus/LinkStatus.ts deleted file mode 100644 index 0bfcaf7..0000000 --- a/src/app/LinkStatus/LinkStatus.ts +++ /dev/null @@ -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); - } -} diff --git a/src/app/Title/Title.ts b/src/app/Title/Title.ts deleted file mode 100644 index 13283db..0000000 --- a/src/app/Title/Title.ts +++ /dev/null @@ -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; -} diff --git a/src/app/Title/TitleItem.ts b/src/app/Title/TitleItem.ts deleted file mode 100644 index 9a18ee1..0000000 --- a/src/app/Title/TitleItem.ts +++ /dev/null @@ -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', - }); - } - } -} diff --git a/src/app/App.scss b/src/app/app.component.scss similarity index 92% rename from src/app/App.scss rename to src/app/app.component.scss index 1b8727c..1640c85 100644 --- a/src/app/App.scss +++ b/src/app/app.component.scss @@ -40,6 +40,9 @@ margin: 10px; .database-link-items{ padding-left:10px; + .link-item{ + border-top: 1px solid #e8eaed; + } } } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts new file mode 100644 index 0000000..3e0fff9 --- /dev/null +++ b/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; diff --git a/src/app/app.model.ts b/src/app/app.model.ts new file mode 100644 index 0000000..2db3b97 --- /dev/null +++ b/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; diff --git a/src/app/linkSet/linkSet.component.ts b/src/app/linkSet/linkSet.component.ts new file mode 100644 index 0000000..1afb924 --- /dev/null +++ b/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; diff --git a/src/app/linkSet/linkSet.model.ts b/src/app/linkSet/linkSet.model.ts new file mode 100644 index 0000000..b1f4533 --- /dev/null +++ b/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; diff --git a/src/app/LinkSet/Select.ts b/src/app/linkSet/select/select.component.ts similarity index 66% rename from src/app/LinkSet/Select.ts rename to src/app/linkSet/select/select.component.ts index 06b8c3c..387b49f 100644 --- a/src/app/LinkSet/Select.ts +++ b/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; diff --git a/src/app/linkStatus/linkStatus.component.ts b/src/app/linkStatus/linkStatus.component.ts new file mode 100644 index 0000000..d9ab7d6 --- /dev/null +++ b/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; diff --git a/src/app/linkStatus/linkStatus.model.ts b/src/app/linkStatus/linkStatus.model.ts new file mode 100644 index 0000000..5735838 --- /dev/null +++ b/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; diff --git a/src/app/title/title.component.ts b/src/app/title/title.component.ts new file mode 100644 index 0000000..0fe19c9 --- /dev/null +++ b/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; diff --git a/src/app/title/titleItem/title-item.component.ts b/src/app/title/titleItem/title-item.component.ts new file mode 100644 index 0000000..397a773 --- /dev/null +++ b/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; diff --git a/src/app/title/titleItem/title-item.model.ts b/src/app/title/titleItem/title-item.model.ts new file mode 100644 index 0000000..f8d1923 --- /dev/null +++ b/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; diff --git a/src/app/title/titleItem/title-item.service.ts b/src/app/title/titleItem/title-item.service.ts new file mode 100644 index 0000000..2bb4109 --- /dev/null +++ b/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', + }; +} diff --git a/src/index.ts b/src/index.ts index 9f76acd..dced9bb 100644 --- a/src/index.ts +++ b/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], }); diff --git a/src/shared/FineUI.ts b/src/shared/FineUI.ts deleted file mode 100644 index 2ca16b8..0000000 --- a/src/shared/FineUI.ts +++ /dev/null @@ -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; -} diff --git a/src/ui/fineui.ts b/src/ui/fineui.ts new file mode 100644 index 0000000..5924289 --- /dev/null +++ b/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'; diff --git a/src/ui/index.ts b/src/ui/index.ts new file mode 100644 index 0000000..fc8d4a8 --- /dev/null +++ b/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; +} diff --git a/tsconfig.json b/tsconfig.json index d32c47b..f4ae148 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,14 +1,19 @@ { "compilerOptions": { - "outDir": "./dist/", - "sourceMap": true, - "noImplicitAny": true, - "target": "es2017", - "module": "es2015", - "lib": [ - "es2017", - "dom" - ], + "baseUrl": ".", + "outDir": "./dist/", + "sourceMap": true, + "noImplicitAny": true, + "target": "es2017", + "module": "es2015", + "lib": [ + "es2017", + "dom" + ], + "paths":{ + "@ui/*": ["src/ui/*"], + "@ui": ["src/ui/index"], + } }, "include": [ "./src/**/*", diff --git a/types/globals.d.ts b/types/globals.d.ts index ac5f25f..64630ad 100644 --- a/types/globals.d.ts +++ b/types/globals.d.ts @@ -1,6 +1,6 @@ interface Obj { - [key: string]: any; + [key: string]: any; } declare let BI: Obj; -declare const Fix: Obj; \ No newline at end of file +declare const Fix: Obj; diff --git a/webpack.config.js b/webpack.config.js index ce374e2..ba60862 100644 --- a/webpack.config.js +++ b/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' }