设置页增加歌词API设置

entry/src/main/ets/pages/SettingPage.ets

@@ -4,33 +4,30 @@ import { CommonConstants } from '../common/constants/CommonConstants'
 import { AppUtil, PreferencesUtil } from '@pura/harmony-utils'
 import { Utility } from '../common/util/Utility'
 import { AvSessionController } from '../controller/AvSessionController'
+import { CustomContentDialog } from '@kit.ArkUI'
+// import { CustomDialog, CustomDialogController } from '@arkui/components'
 
 @Preview
 @Entry
 @Component
-export struct SettingPage{
+export struct SettingPage {
+  @State showApiDialog: boolean = false
+  @State tempApiUrl: string = ''
   @State lyricApiUrl: string = PreferencesUtil.getStringSync('LRC_API', 'https://lrc.ss5.xyz/jsonapi')
-
-  @State isBgPlayOpen:boolean = true   //是否启用后台播放
-  @State isAutoRatate:boolean = true   //是否启用自动横竖屏
-  @State isMemoryPlay:boolean = true   //是否启用记忆播放
-  @State isMediacodec:boolean = false  //是否启用硬件解码
-
-  @State isMusicMemoryPlay:boolean = false   //是否启用记忆播放
-
-  @State isMusicBGCover:boolean = true   //播放背景随封面
-
+  @State isBgPlayOpen: boolean = true //是否启用后台播放
+  @State isAutoRatate: boolean = true //是否启用自动横竖屏
+  @State isMemoryPlay: boolean = true //是否启用记忆播放
+  @State isMediacodec: boolean = false //是否启用硬件解码
+  @State isMusicMemoryPlay: boolean = false //是否启用记忆播放
+  @State isMusicBGCover: boolean = true //播放背景随封面
   static readonly IS_BGPLAY_OPEN: string = 'isBgPlayOpen';
   static readonly IS_AUTO_RATATE: string = 'isAutoRatate';
   static readonly iS_MEMORY_PLAY: string = 'isMemoryPlay';
   static readonly IS_MIDIACODEC_OPEN: string = 'isMediacodec';
   static readonly iS_MUSIC_MEMORY_PLAY: string = 'isMusicMemoryPlay';
-
   static readonly iS_MUSIC_BG_COVER: string = 'isMusicBGCover';
   static readonly iS_SAVE_PLAY_MODE: string = 'isSavePlayMode';
-
-  static readonly IS_COVER_RECTANGLE: string = 'isCoverRectangle';//封面圆形或者方形
-
+  static readonly IS_COVER_RECTANGLE: string = 'isCoverRectangle'; //封面圆形或者方形
   @State titleBarModel: TitleBar.Model = new TitleBar.Model()
     .setTitleTextStyle(FontStyle.Normal)
     .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
@@ -42,30 +39,73 @@ export struct SettingPage{
     .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
     .setOnLeftClickListener(() => {
       router.back()
-
     })
-  @State verName:string = ''
+  @State verName: string = ''
+
+  apiDialogController: CustomDialogController = new CustomDialogController({
+    builder: CustomContentDialog({
+      primaryTitle: '修改歌词API地址',
+      contentBuilder: () => {
+        this.buildApiDialogContent();
+      },
+      buttons: [
+        {
+          value: '取消',
+          action: () => {
+            this.apiDialogController.close();
+          }
+        },
+        {
+          value: '保存',
+          action: () => {
+            this.lyricApiUrl = this.tempApiUrl
+            PreferencesUtil.put('LRC_API', this.lyricApiUrl)
+            this.apiDialogController.close();
+            this.getUIContext().getPromptAction().showToast({
+              message: '保存成功，当前LRC_API:' + this.lyricApiUrl,
+              duration: 2000,
+              showMode: promptAction.ToastShowMode.TOP_MOST,
+              bottom: 85
+            })
+          }
+        }
+      ]
+    }),
+    autoCancel: true,
+    alignment: DialogAlignment.Center
+  })
+
+  @Builder
+  buildApiDialogContent() {
+    Column() {
+      TextInput({ text: this.tempApiUrl, placeholder: '请输入API地址' })
+        .onChange((val: string) => {
+          this.tempApiUrl = val
+        })
+        .width('90%')
+        .height(60)
+    }
+    .width('100%')
+  }
+
   // 组件生命周期
   aboutToAppear() {
-    this.isBgPlayOpen = PreferencesUtil.getBooleanSync(SettingPage.IS_BGPLAY_OPEN,true)
-    this.isAutoRatate = PreferencesUtil.getBooleanSync(SettingPage.IS_AUTO_RATATE,true)
-    this.isMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_PLAY,true)
-    this.isMediacodec = PreferencesUtil.getBooleanSync(SettingPage.IS_MIDIACODEC_OPEN,false)
-
-    this.isMusicMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_MEMORY_PLAY,false)
-
-    this.isMusicBGCover = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_BG_COVER,true)
+    this.isBgPlayOpen = PreferencesUtil.getBooleanSync(SettingPage.IS_BGPLAY_OPEN, true)
+    this.isAutoRatate = PreferencesUtil.getBooleanSync(SettingPage.IS_AUTO_RATATE, true)
+    this.isMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_PLAY, true)
+    this.isMediacodec = PreferencesUtil.getBooleanSync(SettingPage.IS_MIDIACODEC_OPEN, false)
+    this.isMusicMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_MEMORY_PLAY, false)
+    this.isMusicBGCover = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_BG_COVER, true)
   }
 
-
   // 组件生命周期
   aboutToDisappear() {
-
+    // 无需处理apiDialogController
   }
 
   build() {
-    Column(){
-      TitleBar({model:$titleBarModel})
+    Column() {
+      TitleBar({ model: $titleBarModel })
       Column() {
         //音频设置
         Row() {
@@ -78,6 +118,7 @@ export struct SettingPage{
         }
         .width('100%')
         .height(55)
+
         Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
         Row() {
           Image($r('app.media.kp_music_nor'))
@@ -91,19 +132,20 @@ export struct SettingPage{
             .fontColor(Color.Gray)
             .fontWeight(480)
           Blank()
-          Toggle({ type: ToggleType.Switch,isOn: this.isMusicMemoryPlay  })
-            .selectedColor($r('app.color.title_bar_bg')) // 设置开关打开时的背景颜色为蓝色
-            .switchPointColor(Color.White) // 设置开关关闭时的滑块颜色为白色
+          Toggle({ type: ToggleType.Switch, isOn: this.isMusicMemoryPlay })
+            .selectedColor($r('app.color.title_bar_bg'))// 设置开关打开时的背景颜色为蓝色
+            .switchPointColor(Color.White)// 设置开关关闭时的滑块颜色为白色
             .margin({ right: 28 })
             .onChange((checked: boolean) => { // 选择开关状态变化时触发事件
               this.isMusicMemoryPlay = checked;
-              PreferencesUtil.put(SettingPage.iS_MUSIC_MEMORY_PLAY,this.isMusicMemoryPlay)
+              PreferencesUtil.put(SettingPage.iS_MUSIC_MEMORY_PLAY, this.isMusicMemoryPlay)
             })
             .width(50)
             .height(30);
         }
         .width('100%')
         .height(55)
+
         Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
         Row() {
           Image($r('app.media.kp_music_nor'))
@@ -117,13 +159,13 @@ export struct SettingPage{
             .fontColor(Color.Gray)
             .fontWeight(480)
           Blank()
-          Toggle({ type: ToggleType.Switch,isOn: this.isMusicBGCover  })
-            .selectedColor($r('app.color.title_bar_bg')) // 设置开关打开时的背景颜色为蓝色
-            .switchPointColor(Color.White) // 设置开关关闭时的滑块颜色为白色
+          Toggle({ type: ToggleType.Switch, isOn: this.isMusicBGCover })
+            .selectedColor($r('app.color.title_bar_bg'))// 设置开关打开时的背景颜色为蓝色
+            .switchPointColor(Color.White)// 设置开关关闭时的滑块颜色为白色
             .margin({ right: 28 })
             .onChange((checked: boolean) => { // 选择开关状态变化时触发事件
               this.isMusicBGCover = checked;
-              PreferencesUtil.put(SettingPage.iS_MUSIC_BG_COVER,this.isMusicBGCover)
+              PreferencesUtil.put(SettingPage.iS_MUSIC_BG_COVER, this.isMusicBGCover)
 
             })
             .width(50)
@@ -131,6 +173,7 @@ export struct SettingPage{
         }
         .width('100%')
         .height(55)
+
         Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
         //第三方歌词API设置
@@ -143,47 +186,40 @@ export struct SettingPage{
         }
         .width('100%')
         .height(55)
+
         Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
         Row() {
-          TextArea({ text: this.lyricApiUrl })
-            .margin({ left: 18, right: 10, top: 8, bottom: 8 })
+          Text(this.lyricApiUrl)
+            .margin({ left: 38, right: 10 })
             .fontSize(15)
-            .fontColor(Color.Black)
-            .backgroundColor(0xf5f5f5)
-            .borderRadius(10)
+            .fontColor(Color.Gray)
             .layoutWeight(1)
-            .onChange((val: string) => {
-              this.lyricApiUrl = val
-            })
-          Button('保存', { type: ButtonType.Normal, stateEffect: true })
-            .borderRadius(8)
-            .backgroundColor(0x317aff)
-            .fontColor(Color.White)
-            .fontSize(15)
-            .width(80)
-            .height(38)
-            .margin({ left: 10, right: 18 })
+          // 编辑图标按钮
+          Image($r('app.media.edit'))
+            .width(28)
+            .height(28)
+            .margin({ right: 18 })
             .onClick(() => {
-              PreferencesUtil.put('LRC_API', this.lyricApiUrl)
-              this.getUIContext().getPromptAction().showToast({
-                message: "保存成功，当前LRC_API:"+ this.lyricApiUrl,
-                duration: 2000,
-                showMode: promptAction.ToastShowMode.TOP_MOST,
-                bottom: 85
-              });
-
+              this.tempApiUrl = this.lyricApiUrl
+              this.apiDialogController.open()
             })
+          Blank()
         }
         .width('100%')
-        .margin({top: 8, bottom: 12})
+        .margin({ top: 8, bottom: 12 })
 
       }
       .backgroundColor(Color.White)
-      .margin({left:15,right:15,top:20,bottom:10})
+      .margin({
+        left: 15,
+        right: 15,
+        top: 20,
+        bottom: 10
+      })
       .borderRadius(30)
     }
     .backgroundColor($r('app.color.index_background'))
     .height('100%')
-
   }
+
 }

entry/src/main/ets/viewmodel/MainViewModel.ets

@@ -56,6 +56,7 @@ export  class  MainViewModel{
 
       new ItemData($r('app.string.yszc'), $r('app.media.oh_pri'),MainViewModel.MENU_YSZC,false),
       new ItemData($r('app.string.about_me'), $r('app.media.oh_about'),MainViewModel.MENU_ABOUT,false),
+      new ItemData($r('app.string.setting'), $r('app.media.setting_red'),MainViewModel.MENU_SETTING,false),
       // new ItemData($r('app.string.nor_setting'), $r('app.media.hm_gps'),MainViewModel.MENU_SETTING,false),
     ];
     return drawerGridData;
@@ -75,7 +76,7 @@ export  class  MainViewModel{
 
       new ItemData($r('app.string.yszc'), $r('app.media.oh_pri'),MainViewModel.MENU_YSZC,false),
       new ItemData($r('app.string.about_me'), $r('app.media.oh_about'),MainViewModel.MENU_ABOUT,false),
-      new ItemData($r('app.string.setting'), $r('app.media.setting'),MainViewModel.MENU_SETTING,false),
+      new ItemData($r('app.string.setting'), $r('app.media.setting_red'),MainViewModel.MENU_SETTING,false),
       // new ItemData($r('app.string.nor_setting'), $r('app.media.hm_gps'),MainViewModel.MENU_SETTING,false),
     ];
     return drawerGridData;