Merge pull request #207 from yi-boide/dev_143232

feat: 发现 查看全部分类

entry/src/main/ets/componets/common/noFind.ets

@@ -51,5 +51,8 @@ export default struct noFind {
           })
       }
     }
+    .height('100%')
+    .alignItems(HorizontalAlign.Center)
+    .justifyContent(FlexAlign.Center)
   }
 }

entry/src/main/ets/pages/view/Find/CategoryList/Index.ets

@@ -67,10 +67,16 @@ struct CateGoryListPage {
     try {
       const res: AxiosResponse = await axios.post('http://legado.wisdoms.xin/analysisRules', exploreQuery)
       console.info('TagInfo, 解析内容：', JSON.stringify(res.data))
+      const bookList = (res.data as ExploreRule[]).map(item => {
+        if (item.coverUrl && !isNetworkUrl(item.coverUrl)) {
+          item.coverUrl = this.bookSourceUrl + item.coverUrl
+        }
+        return item
+      })
       if (this.pageNum === 1) {
-        this.bookList = res.data
+        this.bookList = bookList
       } else {
-        this.bookList = this.bookList.concat(res.data)
+        this.bookList = this.bookList.concat(bookList)
       }
       this.loading = false
     } catch (err) {
@@ -90,18 +96,18 @@ struct CateGoryListPage {
           Scroll() {
             Column() {
               if (this.startLoading) {
-                Column() {
+                Row() {
                   LoadingProgress()
                     .color(0xff6600)
-                    .width('50%')
-                  Text('加载中...')
+                    .width(35)
+                  Text('内容加载中...')
                 }
+                .height('100%')
+                .alignItems(VerticalAlign.Center)
                 .justifyContent(FlexAlign.Center)
               } else if (this.bookList.length === 0) {
                 noFind({
                   hintIndex: 0
-                }).padding({
-                  top: 75
                 })
               } else {
                 ForEach(this.bookList, (item: ExploreRule, index) => {

entry/src/main/ets/pages/view/Find/components/AllCategory.ets

@@ -0,0 +1,122 @@
+import { ExploreItem } from '../../../../database/types/BookSourceType'
+import { router } from '@kit.ArkUI'
+import { ExploreRule } from '../../../../database/entities/rule'
+
+export interface GroupExploreList {
+  title: string,
+  url: string,
+  columnsTemplate: string
+  list: ExploreItem[]
+}
+
+@Component
+export default struct AllCategory {
+  @StorageLink('bottomRectHeight') bottomRectHeight: number = 0
+  @Prop list: GroupExploreList[] = []
+  @Link showSheet: boolean
+  @Prop bookSourceUrl: string = ''
+  @Prop exploreRule: ExploreRule = {}
+
+  build() {
+    Column() {
+      Column() {
+        ForEach(this.list, (item: GroupExploreList) => {
+          Column() {
+            if (item.title !== 'null') {
+              Row() {
+                Text(item.title)
+                  .fontSize(16)
+                  .fontWeight(700)
+              }
+              .justifyContent(FlexAlign.Start)
+              .margin({ top: 24, })
+            }
+
+            Grid() {
+              ForEach(item.list, (item: ExploreItem) => {
+                GridItem() {
+                  this.buttonItem(item)
+                }
+              })
+            }
+            .columnsTemplate(item.columnsTemplate)
+            .columnsGap(12)
+            .rowsGap(12)
+            .padding({ top: 12 })
+          }
+          .padding({ left: 20, right: 20 })
+          .alignItems(HorizontalAlign.Start)
+        })
+      }
+      .padding({ bottom: 12 })
+
+
+      Column() {
+        Button() {
+          Text('取消')
+            .fontColor('#73000000')
+            .height(24)
+            .lineHeight(24)
+        }
+        .width('100%')
+        .borderRadius(24)
+        .backgroundColor('#0A000000')
+        .padding({
+          top: 8,
+          bottom: 8
+        })
+        .onClick(() => {
+          this.showSheet = false
+        })
+      }
+      .border({
+        width: { top: 1 },
+        color: '#0f000000',
+        style: BorderStyle.Solid
+      })
+      .padding({
+        top: 12,
+        bottom: 12,
+        left: 20,
+        right: 20
+      })
+    }
+    .padding({ bottom: this.bottomRectHeight + 30 })
+  }
+
+  @Builder
+  buttonItem(item: ExploreItem) {
+    Column() {
+      Text(item.title)
+        .fontSize(14)
+        .textAlign(TextAlign.Center)
+        .fontWeight(400)
+        .width('100%')
+        .height(20)
+        .lineHeight(20)
+        .fontColor('#73000000')
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+        .maxLines(1)
+    }
+    .alignItems(HorizontalAlign.Center)
+    .padding({
+      top: 6,
+      bottom: 6
+    })
+    .backgroundColor('#0F000000')
+    .borderRadius(4)
+    .onClick(() => {
+      if (!item.url) {
+        return
+      }
+      router.pushUrl({
+        url: 'pages/view/Find/CategoryList/Index',
+        params: {
+          bookSourceUrl: this.bookSourceUrl,
+          exploreItem: item,
+          exploreRule: this.exploreRule
+        }
+      })
+    })
+  }
+}

entry/src/main/ets/pages/view/Find/components/BodyContent.ets

@@ -149,7 +149,8 @@ export default struct BodyContent {
           this.currentSourceIndex = index
         })
       }
-    }.layoutWeight(1)
+    }
+    .layoutWeight(1)
   }
 
   @Builder

entry/src/main/ets/pages/view/Find/components/BookFindContent.ets

@@ -23,6 +23,8 @@ export default struct BookFindContent {
   @State errorExplore: boolean = false
   @State bookList: ExploreRule[] = []
   @Prop exploreRule: ExploreRule = {}
+  handleClick: () => void = () => {
+  }
 
   aboutToAppear() {
     this.getList()
@@ -49,7 +51,12 @@ export default struct BookFindContent {
     }
     axios.post('http://legado.wisdoms.xin/analysisRules', exploreQuery).then((res: AxiosResponse) => {
       console.info('TagInfo, 解析内容：', JSON.stringify(res.data))
-      this.bookList = res.data
+      this.bookList = (res.data as ExploreRule[]).map(item => {
+        if (item.coverUrl && !isNetworkUrl(item.coverUrl)) {
+          item.coverUrl = this.bookSourceUrl + item.coverUrl
+        }
+        return item
+      })
       this.loading = false
       this.errorExplore = false
     }).catch((err: AxiosError) => {
@@ -65,14 +72,15 @@ export default struct BookFindContent {
     }) {
       Column() {
         mayAlsoLike({
-          mayAlsoLike: this.exploreItem.title
+          mayAlsoLike: this.exploreItem.title,
+          handleClick: this.handleClick
         })
         if (this.loading) {
           Column() {
             LoadingProgress()
               .color(0xff6600)
               .width('50%')
-            Text('加载中...')
+            Text('内容加载中...')
           }
           .justifyContent(FlexAlign.Center)
           .layoutWeight(1)
@@ -81,14 +89,10 @@ export default struct BookFindContent {
             onclick: () => {
               this.getList()
             }
-          }).padding({
-            top: 75
           })
-        } else if (this.bookList.length===0) {
+        } else if (this.bookList.length === 0) {
           noFind({
             hintIndex: 0
-          }).padding({
-            top: 75
           })
         } else {
           Column() {
@@ -107,14 +111,14 @@ export default struct BookFindContent {
               .backgroundColor('#0F000000')
               .borderRadius(4)
               .onClick(() => {
-                  router.pushUrl({
-                    url: 'pages/view/Find/CategoryList/Index',
-                    params: {
-                      bookSourceUrl: this.bookSourceUrl,
-                      exploreItem: this.exploreItem,
-                      exploreRule: this.exploreRule
-                    }
-                  })
+                router.pushUrl({
+                  url: 'pages/view/Find/CategoryList/Index',
+                  params: {
+                    bookSourceUrl: this.bookSourceUrl,
+                    exploreItem: this.exploreItem,
+                    exploreRule: this.exploreRule
+                  }
+                })
               })
             }
           }

entry/src/main/ets/pages/view/Find/components/ContentRefresh.ets

@@ -6,10 +6,11 @@ import BookFindContent from './BookFindContent'
 import { JSON } from '@kit.ArkTS'
 import { ExploreRule } from '../../../../database/entities/rule'
 import { ExploreItem } from '../../../../database/types/BookSourceType'
-
+import AllCategory, { GroupExploreList } from './AllCategory'
 
 @Component
 export default struct ContentRefresh {
+  @StorageLink('bottomRectHeight') bottomRectHeight: number = 0
   currentIndex: number = 0
   @Prop bookSource: BookSource = {
     bookSourceUrl: '',
@@ -28,26 +29,68 @@ export default struct ContentRefresh {
   @Link hasExploreUrl: boolean
   @State pageSize: number = 4
   @State pageNum: number = 1
+  @State groupExploreList: GroupExploreList[] = []
   @State exploreList: ExploreItem[] = []
   @State showExploreList: ExploreItem[] = []
   @State exploreRule?: ExploreRule = {}
+  @State showSheet: boolean = false
 
   aboutToAppear() {
     try {
       this.exploreRule = this.bookSource.ruleExplore
       console.info('TagInfo: 书源地址：', this.bookSource.bookSourceUrl)
       console.info('TagInfo: 发现地址：', JSON.stringify(JSON.parse(this.bookSource.exploreUrl ?? '[]')))
       const exploreList = JSON.parse(this.bookSource.exploreUrl ?? '[]') as ExploreItem[]
-      this.exploreList = exploreList.filter(item =>!!item.url)
+      this.exploreList = exploreList
       this.pageNum = 1
       this.getShowExploreList()
+      this.getGroupExploreList()
     } catch (err) {
       console.info('TagInfo', JSON.stringify(err))
     }
   }
 
+  getGroupExploreList() {
+    const groupMap: Record<string, GroupExploreList> = {};
+    let currentTitle = ''
+    this.exploreList.forEach((item: ExploreItem) => {
+      if (!item.title.trim()) {
+        return
+      }
+      if (item.style?.layout_flexBasisPercent === 1 || !currentTitle) {
+        let keyTitle = item.title
+        if (item.style?.layout_flexBasisPercent !== 1) {
+          keyTitle = 'null'
+        }
+        groupMap[keyTitle] = {
+          title: keyTitle,
+          url: keyTitle === 'null' ? '' : item.url,
+          columnsTemplate: '1fr',
+          list: []
+        };
+        currentTitle = keyTitle
+      }
+
+      let columnsTemplate = '1fr'
+      const flexBasis = item.style?.layout_flexBasisPercent ?? 0
+      if (flexBasis > 0.33 && flexBasis <= 0.5) {
+        columnsTemplate += ' 1fr'
+      } else if (flexBasis >= 0.25 && flexBasis <= 0.33) {
+        columnsTemplate += ' 1fr 1fr'
+      } else if (flexBasis < 0.25) {
+        columnsTemplate += ' 1fr 1fr 1fr'
+      }
+      if (groupMap[currentTitle].columnsTemplate !== columnsTemplate) {
+        groupMap[currentTitle].columnsTemplate = columnsTemplate
+      }
+      groupMap[currentTitle].list.push(item);
+    })
+    this.groupExploreList = Object.values(groupMap);
+    console.info('TagInfo:', JSON.stringify(this.groupExploreList))
+  }
+
   getShowExploreList() {
-    this.showExploreList = this.exploreList.slice(0, this.pageNum * this.pageSize)
+    this.showExploreList = this.exploreList.filter(item =>!!item.url).slice(0, this.pageNum * this.pageSize)
   }
 
   build() {
@@ -70,7 +113,10 @@ export default struct ContentRefresh {
                 bookSourceUrl: this.bookSource.bookSourceUrl,
                 exploreItem: item,
                 exploreRule: this.exploreRule,
-                counter: this.counter
+                counter: this.counter,
+                handleClick: () => {
+                  this.showSheet = true
+                }
               })
             })
           }
@@ -99,6 +145,14 @@ export default struct ContentRefresh {
           this.isRefreshing = false
         }, 1000)
       })
+      .bindSheet(this.showSheet, this.bottomSheet(), {
+        detents: [SheetSize.FIT_CONTENT, SheetSize.LARGE, 200],
+        dragBar: true,
+        showClose: false,
+        onDisappear: () => {
+          this.showSheet = false
+        }
+      })
     }
   }
 
@@ -108,4 +162,16 @@ export default struct ContentRefresh {
       RefreshingTitle: this.RefreshingTitle,
     })
   }
+
+  @Builder
+  bottomSheet() {
+    Column() {
+      AllCategory({
+        showSheet: this.showSheet,
+        bookSourceUrl: this.bookSource.bookSourceUrl,
+        exploreRule: this.exploreRule,
+        list: this.groupExploreList
+      })
+    }
+  }
 }