From f990eb6db246e1aef80535b16a2d953ac09b91b4 Mon Sep 17 00:00:00 2001 From: zhangyazhou Date: Thu, 29 Aug 2024 19:08:21 +0800 Subject: [PATCH] =?UTF-8?q?=E5=87=A0=E7=A7=8D=E4=B8=8D=E5=90=8C=E7=9A=84?= =?UTF-8?q?=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/pages/Index.ets | 62 +++------ entry/src/main/ets/pages/SetServerPage.ets | 130 ++++++++++++++++++ entry/src/main/ets/pages/SetServerPage1.ets | 130 ++++++++++++++++++ entry/src/main/ets/pages/SetServerPage2.ets | 79 +++++++++++ entry/src/main/ets/pages/SetServerPage3.ets | 100 ++++++++++++++ .../src/main/ets/pages/SetServerViewModel.ets | 15 ++ 6 files changed, 476 insertions(+), 40 deletions(-) create mode 100644 entry/src/main/ets/pages/SetServerPage.ets create mode 100644 entry/src/main/ets/pages/SetServerPage1.ets create mode 100644 entry/src/main/ets/pages/SetServerPage2.ets create mode 100644 entry/src/main/ets/pages/SetServerPage3.ets create mode 100644 entry/src/main/ets/pages/SetServerViewModel.ets diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index ff64612..323f0d1 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -1,55 +1,37 @@ -class ViewModel { - message: string = 'Hello World' - - - startTimer() { - setTimeout(() =>{ - this.message = 'timer'; - }, 1000) - } - -} +import './SetServerPage' +import './SetServerPage1' +import './SetServerPage2' +import './SetServerPage3' @Entry({routeName: 'Index'}) @Component struct Index { - @State viewModel: ViewModel = new ViewModel(); build() { Column() { - CodeInputText({ - inputText: this.viewModel.message, - hintText: this.viewModel.message, - onInputChanged: (value) => { - this.viewModel.message = value; - } - }); - TextInput({text: 'test'}).margin({top: 8}) + Button('SerServerPage').width('80%') + .onClick(() => { + this.getUIContext().getRouter().pushNamedRoute({name: 'SetServer'}) + }) - Button('start timer').onClick(() =>{ - this.viewModel.startTimer(); - }) + Button('SerServerPage1').margin({ top: 24 }).width('80%') + .onClick(() => { + this.getUIContext().getRouter().pushNamedRoute({name: 'SetServer1'}) + }) + + Button('SerServerPage2').margin({ top: 24 }).width('80%') + .onClick(() => { + this.getUIContext().getRouter().pushNamedRoute({name: 'SetServer2'}) + }) + + Button('SerServerPage3').margin({ top: 24 }).width('80%') + .onClick(() => { + this.getUIContext().getRouter().pushNamedRoute({name: 'SetServer3'}) + }) } .height('100%') .width('100%') .justifyContent(FlexAlign.Center) } -} - -@Component -struct CodeInputText { - - @Prop inputText: string; - @Prop hintText: string; - onInputChanged?: (value: string) => void; - - build() { - Column(){ - Text(this.hintText) - TextInput({text: this.inputText}).onChange((value) => { - this.onInputChanged?.(value); - }).margin({top: 8}) - }.width('100%') - } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/SetServerPage.ets b/entry/src/main/ets/pages/SetServerPage.ets new file mode 100644 index 0000000..86f6126 --- /dev/null +++ b/entry/src/main/ets/pages/SetServerPage.ets @@ -0,0 +1,130 @@ +import { SetServerViewModel } from './SetServerViewModel'; + + +@Entry({ routeName: 'SetServer' }) +@Component +struct SetServerPage { + + @State viewModel: SetServerViewModel = new SetServerViewModel(); + @State operation: string = '' + appendOperationLog(info: string) { + this.operation += `${info}\n` + } + + aboutToAppear(): void { + this.viewModel.savedServer.httpPort = '6000' + this.viewModel.savedServer.httpsPort = '6443' + this.appendOperationLog('aboutToAppear set 6xx'); + } + + onPageShow(): void { + this.viewModel.savedServer.httpPort = '7000' + this.viewModel.savedServer.httpsPort = '7443' + this.appendOperationLog('aboutToAppear set 7xx'); + } + + build() { + Column() { + + Text(this.operation).width('100%').padding({left: 16, right: 16}) + + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text('host').margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: this.viewModel.savedServer.host }).maxLines(1).textAlign(TextAlign.End).type(InputType.Normal) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + this.viewModel.savedServer.host = value; + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text('httpPort').margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: this.viewModel.savedServer.httpPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + this.viewModel.savedServer.httpPort = value; + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text('httpsPort').margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: this.viewModel.savedServer.httpsPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + this.viewModel.savedServer.httpsPort = value; + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + + + Button('8xx').margin({ top: 24 }).width('80%') + .onClick(() => { + this.viewModel.savedServer.httpPort = '8008' + this.viewModel.savedServer.httpsPort = '8443' + this.appendOperationLog('Button click set 8xx'); + }) + + Button('9xx').margin({ top: 24 }).width('80%') + .onClick(() => { + this.viewModel.enableSave = !this.viewModel.enableSave; + this.viewModel.savedServer.httpPort = '9000' + this.viewModel.savedServer.httpsPort = '9443' + this.appendOperationLog('Button click set 9xx with enableSave'); + }) + }.width('100%').height('100%').backgroundColor('#F4F5F6').justifyContent(FlexAlign.Center) + } +} + +@Component +struct InputItem { + @State hint: string = '' + @State inputText: string = '' + @State inputType: InputType = InputType.Normal; + onInputChanged?: (value: string) => void; + + build() { + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text(this.hint).margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: this.inputText }).maxLines(1).textAlign(TextAlign.End).type(this.inputType) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + this.onInputChanged?.(value); + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/SetServerPage1.ets b/entry/src/main/ets/pages/SetServerPage1.ets new file mode 100644 index 0000000..581f906 --- /dev/null +++ b/entry/src/main/ets/pages/SetServerPage1.ets @@ -0,0 +1,130 @@ +import { SetServerViewModel } from './SetServerViewModel'; + + +@Entry({ routeName: 'SetServer1' }) +@Component +struct SetServerPage { + + @State viewModel: SetServerViewModel = new SetServerViewModel(); + @State operation: string = '' + appendOperationLog(info: string) { + this.operation += `${info}\n` + } + + aboutToAppear(): void { + this.viewModel.savedServer.httpPort = '6000' + this.viewModel.savedServer.httpsPort = '6443' + this.appendOperationLog('aboutToAppear set 6xx'); + } + + onPageShow(): void { + this.viewModel.enableSave = !this.viewModel.enableSave + this.viewModel.savedServer.httpPort = '7000' + this.viewModel.savedServer.httpsPort = '7443' + this.appendOperationLog('aboutToAppear set 7xx with enableSave'); + } + + build() { + Column() { + Text(this.operation).width('100%').padding({left: 16, right: 16}) + + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text('host').margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: this.viewModel.savedServer.host }).maxLines(1).textAlign(TextAlign.End).type(InputType.Normal) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + this.viewModel.savedServer.host = value; + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text('httpPort').margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: this.viewModel.savedServer.httpPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + this.viewModel.savedServer.httpPort = value; + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text('httpsPort').margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: this.viewModel.savedServer.httpsPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + this.viewModel.savedServer.httpsPort = value; + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + + + Button('8xx').margin({ top: 24 }).width('80%') + .onClick(() => { + this.viewModel.savedServer.httpPort = '8008' + this.viewModel.savedServer.httpsPort = '8443' + this.appendOperationLog('Button click set 8xx'); + }) + + Button('9xx').margin({ top: 24 }).width('80%') + .onClick(() => { + this.viewModel.enableSave = !this.viewModel.enableSave; + this.viewModel.savedServer.httpPort = '9000' + this.viewModel.savedServer.httpsPort = '9443' + this.appendOperationLog('Button click set 9xx with enableSave'); + }) + }.width('100%').height('100%').backgroundColor('#F4F5F6').justifyContent(FlexAlign.Center) + } +} + +@Component +struct InputItem { + @State hint: string = '' + @State inputText: string = '' + @State inputType: InputType = InputType.Normal; + onInputChanged?: (value: string) => void; + + build() { + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text(this.hint).margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: this.inputText }).maxLines(1).textAlign(TextAlign.End).type(this.inputType) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + this.onInputChanged?.(value); + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/SetServerPage2.ets b/entry/src/main/ets/pages/SetServerPage2.ets new file mode 100644 index 0000000..fe438ea --- /dev/null +++ b/entry/src/main/ets/pages/SetServerPage2.ets @@ -0,0 +1,79 @@ +import { SetServerViewModel } from './SetServerViewModel'; + +@Entry({ routeName: 'SetServer2' }) +@Component +struct SetServerPage { + + @State viewModel: SetServerViewModel = new SetServerViewModel(); + @State operation: string = '' + appendOperationLog(info: string) { + this.operation += `${info}\n` + } + + aboutToAppear(): void { + this.viewModel.savedServer.httpPort = '6000' + this.viewModel.savedServer.httpsPort = '6443' + this.appendOperationLog('aboutToAppear set 6xx'); + } + + onPageShow(): void { + this.viewModel.savedServer.httpPort = '7000' + this.viewModel.savedServer.httpsPort = '7443' + this.appendOperationLog('aboutToAppear set 7xx'); + } + + @Builder + inputItem(hint: ResourceStr, inputText: string, inputType: InputType, onInputChanged: (value: string) => void) { + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text(hint).margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: inputText }).maxLines(1).textAlign(TextAlign.End).type(inputType) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + onInputChanged(value); + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + } + + + build() { + Column() { + Text(this.operation).width('100%').padding({left: 16, right: 16}) + + this.inputItem('host', this.viewModel.savedServer.host, InputType.Normal, (value) => { + this.viewModel.savedServer.host = value; + }) + + this.inputItem('httpPort', this.viewModel.savedServer.httpPort, InputType.Normal, (value) => { + this.viewModel.savedServer.httpPort = value; + }) + + this.inputItem('httpsPort', this.viewModel.savedServer.httpsPort, InputType.Normal, (value) => { + this.viewModel.savedServer.httpsPort = value; + }) + + Button('8xx').margin({ top: 24 }).width('80%') + .onClick(() => { + this.viewModel.savedServer.httpPort = '8008' + this.viewModel.savedServer.httpsPort = '8443' + this.appendOperationLog('Button click set 8xx'); + }) + + Button('9xx').margin({ top: 24 }).width('80%') + .onClick(() => { + this.viewModel.enableSave = !this.viewModel.enableSave; + this.viewModel.savedServer.httpPort = '9000' + this.viewModel.savedServer.httpsPort = '9443' + this.appendOperationLog('Button click set 9xx with enableSave'); + }) + }.width('100%').height('100%').backgroundColor('#F4F5F6').justifyContent(FlexAlign.Center) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/SetServerPage3.ets b/entry/src/main/ets/pages/SetServerPage3.ets new file mode 100644 index 0000000..6dec7d6 --- /dev/null +++ b/entry/src/main/ets/pages/SetServerPage3.ets @@ -0,0 +1,100 @@ +import { SetServerViewModel } from './SetServerViewModel'; + +@Entry({ routeName: 'SetServer3' }) +@Component +struct SetServerPage { + + @State viewModel: SetServerViewModel = new SetServerViewModel(); + @State operation: string = '' + appendOperationLog(info: string) { + this.operation += `${info}\n` + } + + aboutToAppear(): void { + this.viewModel.savedServer.httpPort = '6000' + this.viewModel.savedServer.httpsPort = '6443' + this.appendOperationLog('aboutToAppear set 6xx'); + } + + onPageShow(): void { + this.viewModel.savedServer.httpPort = '7000' + this.viewModel.savedServer.httpsPort = '7443' + this.appendOperationLog('aboutToAppear set 7xx'); + } + + build() { + Column() { + Text(this.operation).width('100%').padding({left: 16, right: 16}) + + InputItem({ + hint: 'host', + inputText: this.viewModel.savedServer.host, + inputType: InputType.Normal, + onInputChanged: (value) => { + this.viewModel.savedServer.host = value; + } + }) + + InputItem({ + hint: 'httpPort', + inputText: this.viewModel.savedServer.httpPort, + inputType: InputType.Normal, + onInputChanged: (value) => { + this.viewModel.savedServer.httpPort = value; + } + }) + + InputItem({ + hint: 'httpsPort', + inputText: this.viewModel.savedServer.httpsPort, + inputType: InputType.Normal, + onInputChanged: (value) => { + this.viewModel.savedServer.httpsPort = value; + } + }) + + Button('8xx').margin({ top: 24 }).width('80%') + .onClick(() => { + this.viewModel.savedServer.httpPort = '8008' + this.viewModel.savedServer.httpsPort = '8443' + this.appendOperationLog('Button click set 8xx'); + }) + + Button('9xx').margin({ top: 24 }).width('80%') + .onClick(() => { + this.viewModel.enableSave = !this.viewModel.enableSave; + this.viewModel.savedServer.httpPort = '9000' + this.viewModel.savedServer.httpsPort = '9443' + this.appendOperationLog('Button click set 9xx with enableSave'); + }) + }.width('100%').height('100%').backgroundColor('#F4F5F6').justifyContent(FlexAlign.Center) + } +} + +@Component +struct InputItem { + @Prop hint: string = '' + @Prop inputText: string = '' + @State inputType: InputType = InputType.Normal; + onInputChanged?: (value: string) => void; + + build() { + Flex({ + justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center + }) { + Text(this.hint).margin({ left: 20 }).maxLines(1).fontSize(15) + + TextInput({ text: this.inputText }).maxLines(1).textAlign(TextAlign.End).type(this.inputType) + .backgroundColor(Color.White) + .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20}) + .onChange((value) => { + this.onInputChanged?.(value); + }) + } + .width('100%') + .margin({ top: 16 }) + .backgroundColor(0xfff000) + .height(48) + .backgroundColor(Color.White) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/SetServerViewModel.ets b/entry/src/main/ets/pages/SetServerViewModel.ets new file mode 100644 index 0000000..2ccbdd2 --- /dev/null +++ b/entry/src/main/ets/pages/SetServerViewModel.ets @@ -0,0 +1,15 @@ +export class SetServerViewModel { + savedServer: ServerAddress; + enableSave: boolean = true; + + constructor() { + this.savedServer = new ServerAddress(); + } +} + +@Observed +export class ServerAddress { + host: string = 'host'; + httpPort: string = '80'; + httpsPort: string = '443'; +} \ No newline at end of file