添加UI的搜索功能

entry/src/main/ets/pages/WebDavMainPage.ets

@@ -592,34 +592,54 @@ export struct WebDavMainPage {
   topTitleBar(){
     Column() {
       Row({ space: 15 }) {
+        if (!this.isSearchMode ) {
+          //左侧滑动按钮
+          Button({ type: ButtonType.Circle, stateEffect: true }) {
+            SymbolGlyph($r('sys.symbol.sort'))
+              .attributeModifier(new SymbolGlyphFancyModifier(25, '', ''))
+          }
+          .attributeModifier(new ButtonFancyModifier(40, 40))
+          .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
+          .animation({ duration: 300, curve: Curve.Ease })
+          .onClick(() => {
+            this.getUIContext().animateTo({ duration: 555 }, () => {
+              // 动画闭包内控制Image组件的出现和消失
+              this.isShowDrawer = !this.isShowDrawer
+              this.offsetX = 0
+            })
 
-        //左侧滑动按钮
-        Button({ type: ButtonType.Circle, stateEffect: true }) {
-          SymbolGlyph($r('sys.symbol.sort'))
-            .attributeModifier(new SymbolGlyphFancyModifier(25, '', ''))
-        }
-        .attributeModifier(new ButtonFancyModifier(40, 40))
-        .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
-        .animation({ duration: 300, curve: Curve.Ease })
-        .onClick(() => {
-          this.getUIContext().animateTo({ duration: 555 }, () => {
-            // 动画闭包内控制Image组件的出现和消失
-            this.isShowDrawer = !this.isShowDrawer
-            this.offsetX = 0
           })
+          .attributeModifier(new ShadowModifier())
+          .zIndex(0)
 
-        })
-        .attributeModifier(new ShadowModifier())
-        .zIndex(0)
-
-        Text(this.selectedAccount.name)
-          .margin({left:3,right:10})
-          .fontColor($r('app.color.text_color'))
-          .fontSize(19)
-          .maxLines(1)
-          .textOverflow({ overflow: TextOverflow.MARQUEE })//超长滚动
-          .layoutWeight(1)
+          Text(this.selectedAccount.name)
+            .margin({left:3,right:10})
+            .fontColor($r('app.color.text_color'))
+            .fontSize(19)
+            .maxLines(1)
+            .textOverflow({ overflow: TextOverflow.MARQUEE })//超长滚动
+            .layoutWeight(1)
+            .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
+        }else{
+
+          //左侧搜索返回按钮
+          Button({ type: ButtonType.Circle, stateEffect: true }) {
+            SymbolGlyph($r('sys.symbol.chevron_left'))
+              .attributeModifier(new SymbolGlyphFancyModifier(25, '', ''))
+          }
+          .attributeModifier(new ButtonFancyModifier(40, 40))
+          .margin({bottom:5})
           .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
+          .animation({ duration: 300, curve: Curve.Ease })
+          .onClick(() => {
+            this.isSearchMode = false
+            this.onSearchInput('')
+          })
+          .attributeModifier(new ShadowModifier())
+          .zIndex(0)
+
+        }
+
 
 
 
@@ -672,6 +692,35 @@ export struct WebDavMainPage {
     .width('100%')
   }
 
+
+  //搜索功能的实现
+  @State searchText: string = ''; // 用户输入内容
+  @State filteredList: Array<VideoItem> = []; // 过滤后的结果
+
+  // 实时搜索逻辑（带防抖）
+  private onSearchInput(value: string) {
+    this.searchText = value.trim();
+    let mSearchList: Array<VideoItem> = []
+    mSearchList = this.songs
+
+    // 新增条件判断：空输入时显示所有数据
+    if (this.searchText === '') {
+      this.filteredList = [...mSearchList]; // 创建新数组以触发状态更新
+    } else {
+      this.filteredList = mSearchList.filter((item: VideoItem) => {
+        //支持模糊匹配和艺术家 专辑匹配
+        const regex = new RegExp(this.searchText.toLowerCase().replace(/\s+/g,  '.*'), 'i');
+        return regex.test(item.name.toLowerCase())||
+        regex.test(item.fileName?.toLowerCase()  ?? "") ||
+        regex.test(item.artist?.toLowerCase()  ?? "") ||
+        regex.test(item.album?.toLowerCase()  ?? "")
+      });
+    }
+
+    this.updateListData(this.filteredList);
+    // this.isSearchMode  = false; // 根据业务需求决定是否启用
+  }
+
   build() {
     Column() {
       // 顶部安全区和标题栏
@@ -943,11 +992,12 @@ export struct WebDavMainPage {
               .maxLines(1)
               .textOverflow({ overflow: TextOverflow.Ellipsis })
           }
-          .margin({ right: 20 })
+          .padding({ right: 20 })
 
         }
         .alignItems(HorizontalAlign.Start)
-
+        .layoutWeight(1)
+        .padding({ right: 20 })
 
         Column() {
           //多选按钮的Checkbox 先注释掉