소스 검색

webdav的路径可以点击跳转, ui优化

onecold 9 달 전
부모
커밋
fc9a94455c
2개의 변경된 파일118개의 추가작업 그리고 40개의 파일을 삭제
  1. 44 0
      entry/src/main/ets/common/util/WebdavManager.ets
  2. 74 40
      entry/src/main/ets/pages/WebDavMainPage.ets

+ 44 - 0
entry/src/main/ets/common/util/WebdavManager.ets

@@ -446,6 +446,50 @@ export class WebdavManager {
     await this.loadFilesInfoFromWebdav(folder.href);
   }
 
+  public async enterFolderFromPath(path: string): Promise<void> {
+
+    Logger.info(TAG, '当前路径:', this.currentPath);
+    Logger.info(TAG, '目标路径:', path);
+    // 保存当前路径到历史记录
+    this.pathHistory.push(this.currentPath);
+    Logger.info(TAG, '路径历史:', JSON.stringify(this.pathHistory));
+    // 加载文件夹内容
+    await this.loadFilesInfoFromWebdav(path);
+  }
+
+  // 在 WebdavManager 类中添加以下方法
+  navigateToBreadcrumb(breadcrumbIndex: number): Promise<string> {
+    return new Promise((resolve, reject) => {
+      try {
+        // 面包屑索引0是"根目录"
+        if (breadcrumbIndex === 0) {
+          resolve('/');
+          return;
+        }
+
+        // 根据当前路径构建目标路径
+        const pathParts = this.currentPath.split('/').filter(part => part !== '');
+
+        // 验证索引有效性
+        if (breadcrumbIndex > pathParts.length) {
+          reject(new Error('Invalid breadcrumb index'));
+          return;
+        }
+
+        // 构建目标路径
+        let targetPath = '/';
+        for (let i = 0; i < breadcrumbIndex; i++) {
+          targetPath += pathParts[i] + '/';
+        }
+
+        resolve(targetPath);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+
   // 返回上级目录
   public async goBack(): Promise<void> {
     if (this.pathHistory.length === 0) {

+ 74 - 40
entry/src/main/ets/pages/WebDavMainPage.ets

@@ -62,6 +62,7 @@ export struct WebDavMainPage {
   @StorageProp('themeColor') themeColor: string = CommonConstants.DEFAULT_THEME_COLOR;
   @StorageProp('isDarkMode') isDarkMode: boolean = false;
   @State topRectHeight: number = 0; // 顶部安全区高度
+  @State breadcrumbs:string[] = []//面包屑导航
 
   @State visibleFoldersState: FileInfo[] = []; // 改为普通状态变量
 
@@ -115,6 +116,8 @@ export struct WebDavMainPage {
 
     this.loadFiles()
 
+    this.breadcrumbs = this.webdavManager.getBreadcrumbs();
+
     // 订阅WebDAV状态变化
     this.webdavManager.subscribe(this.eventHandler);
   }
@@ -223,12 +226,16 @@ export struct WebDavMainPage {
 
   // 返回上级目录
   private goBack(): void {
-    this.isLoading = true;
-    this.webdavManager.goBack()
-      .catch((error: Error) => {
-        Logger.error(TAG, '返回失败: ' + error.message);
-        this.isLoading = false;
-      });
+    if(this.webdavManager.canGoBack()){
+      this.isLoading = true;
+      this.webdavManager.goBack()
+        .catch((error: Error) => {
+          Logger.error(TAG, '返回失败: ' + error.message);
+          this.isLoading = false;
+        });
+      this.breadcrumbs = this.webdavManager.getBreadcrumbs();
+    }
+
   }
 
   // 切换账户
@@ -361,6 +368,24 @@ export struct WebDavMainPage {
       promptAction.showToast({ message: '播放失败' });
     }
   }
+  // 在 WebDavMainPage 类中添加以下方法
+  // 导航到指定层级的面包屑路径
+  private navigateToBreadcrumb(breadcrumbIndex: number): void {
+    try {
+      this.isLoading = true;
+      this.webdavManager.navigateToBreadcrumb(breadcrumbIndex).then((path: string) => {
+        this.webdavManager.enterFolderFromPath(path)
+        this.breadcrumbs = this.webdavManager.getBreadcrumbs();
+      })
+        .catch((error: Error) => {
+          Logger.error(TAG, '导航到面包屑路径失败: ' + error.message);
+          this.isLoading = false;
+        });
+    } catch (error) {
+      Logger.error(TAG, '导航到面包屑路径异常: ' + (error as Error).message);
+      this.isLoading = false;
+    }
+  }
 
   build() {
     Column() {
@@ -424,10 +449,6 @@ export struct WebDavMainPage {
         .fontColor($r('app.color.index_tab_font_color'))
         .opacity(0.6)
 
-      Text('点击右上角 + 添加账户')
-        .fontSize(14)
-        .fontColor($r('app.color.index_tab_font_color'))
-        .opacity(0.4)
     }
     .justifyContent(FlexAlign.Center)
     .width('100%')
@@ -442,39 +463,45 @@ export struct WebDavMainPage {
 
       // 加载按钮和面包屑导航
       Column({ space: 8 }) {
-        Row({ space: 12 }) {
 
-          // 返回上级按钮
-          if (this.webdavManager.canGoBack()) {
+        // 面包屑导航
+        if (this.webdavManager.currentPath !== '') {
+          Row({ space: 8 }) {
             Button({ type: ButtonType.Circle }) {
-              Image($r('app.media.back'))
-                .width(20)
-                .height(20)
+              Image(this.webdavManager.canGoBack()?$r('app.media.back'):$r('app.media.cloudDisk'))
+                .width(15)
+                .height(15)
                 .fillColor(Color.White)
             }
-            .width(40)
-            .height(40)
+            .width(20)
+            .height(20)
             .backgroundColor(this.themeColor)
             .onClick(() => this.goBack())
-          }
-        }
-        .width('100%')
 
-        // 面包屑导航
-        if (this.webdavManager.currentPath !== '') {
-          Row({ space: 8 }) {
-            Image($r('app.media.cloudDisk'))
-              .width(16)
-              .height(16)
-              .fillColor($r('app.color.index_tab_font_color'))
-              .opacity(0.6)
+            Row({ space: 4 }) {
+              ForEach(this.breadcrumbs, (crumb: string, index: number) => {
+                Row() {
+                  Text(crumb)
+                    .fontSize(15)
+                    .fontColor(this.themeColor)
+                    .maxLines(1)
+                    .textOverflow({ overflow: TextOverflow.Ellipsis })
+                }
+                .onClick(() => {
+                  this.navigateToBreadcrumb(index);
+                })
+
+                // 添加分隔符(除了最后一个元素)
+                if (index < this.breadcrumbs.length - 1) {
+                  Text('/')
+                    .fontSize(15)
+                    .fontColor($r('app.color.index_tab_font_color'))
+                    .opacity(0.6)
+                }
+              })
+            }
+            .layoutWeight(1)
 
-            Text(this.webdavManager.getBreadcrumbs().join(' / '))
-              .fontSize(13)
-              .fontColor($r('app.color.index_tab_font_color'))
-              .opacity(0.6)
-              .maxLines(1)
-              .textOverflow({ overflow: TextOverflow.Ellipsis })
           }
           .width('100%')
           .padding({ left: 4, right: 4 })
@@ -482,10 +509,16 @@ export struct WebDavMainPage {
 
         // 统计信息
         if (this.webDavFiles.length > 0) {
-          Text(this.visibleFoldersState.length + ' 个文件夹, ' + this.songs.length + ' 首歌曲')
-            .fontSize(13)
-            .fontColor($r('app.color.index_tab_font_color'))
-            .opacity(0.6)
+          Row() {
+            Text(this.visibleFoldersState.length + ' 个文件夹, ' + this.songs.length + ' 首歌曲')
+              .fontSize(13)
+              .fontColor($r('app.color.index_tab_font_color'))
+              .opacity(0.6)
+              .layoutWeight(1)
+              .textAlign(TextAlign.Start)
+            Blank()
+          }
+          .padding({ left: 4, right: 4 })
         }
       }
       .width('100%')
@@ -526,7 +559,7 @@ export struct WebDavMainPage {
         }
         .layoutWeight(1)
         .divider({ strokeWidth: 1, color: '#EEEEEE' })
-        .margin({ top: 8 })
+        .margin({ top: 4 })
       } else if (!this.isLoading) {
         Column() {
           Text('暂无内容')
@@ -577,6 +610,7 @@ export struct WebDavMainPage {
     .backgroundColor($r('app.color.start_window_background'))
     .onClick(() => {
       this.enterFolder(folder);
+      this.breadcrumbs = this.webdavManager.getBreadcrumbs();
     })
   }