feat: 完成 精品书单 页面UI和相关交互

commons/basic/src/main/ets/components/generalComp/YTHeader.ets

@@ -24,6 +24,7 @@ export struct YTHeader {
   bgc: ResourceColor = Color.Transparent
   headerPadding?: Length | Padding | LocalizedPadding
   headerHeight: Length = this.safeTop + 44
+  leftMargin: Length = 16
   /**
    * @description 该属性为默认结构样式,传入对应结构后失效
    * @param backArrow 是否显示返回箭头
@@ -63,7 +64,7 @@ export struct YTHeader {
         if (this.backArrow && !this.leftComp) {
           Image($r('app.media.ic_back'))
             .width(24)
-            .margin({ left: 16 })
+            .margin({ left: this.leftMargin })
             .onClick(this.click)
         }
         if (this.leftComp) {

features/feature/src/main/ets/components/BuilderIndex.ets

@@ -9,4 +9,37 @@ export function tagItemComp(text: string, fontColor: ResourceColor, bgColor: Res
   .padding(5)
   .backgroundColor(bgColor)
   .borderRadius({topLeft: 8.5, topRight: 8.5, bottomRight: 8.5, bottomLeft: 0})
+}
+
+// 书单Item
+@Builder
+export function bookItemComp(title: string){
+  Row({space: 11}){
+    Image($r('[basic].media.png_TopRecommend'))
+      .width(86)
+      .aspectRatio(1)
+      .borderRadius(12)
+
+    Column({space: 3}){
+      Text(title)
+        .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
+
+      Text('豆瓣平均分9.2分推荐！红红火火恍恍惚惚哈哈哈哈哈给红红火火恍恍惚惚哈哈哈...')
+        .width('100%')
+        .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
+
+      Blank()
+        .layoutWeight(1)
+
+      Text('共92本')
+        .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
+    }
+    .layoutWeight(1)
+    .alignItems(HorizontalAlign.Start)
+  }
+  .padding(8)
+  .height(102)
+  .width('100%')
+  .borderRadius(12)
+  .border({width: 2, color: '#FF000000'})
 }

features/feature/src/main/ets/pages/BookListPage.ets

@@ -1,6 +1,10 @@
-import { RouterPage } from 'basic';
+import { RouterPage, YTHeader } from 'basic';
+import { DeerSearch } from '../components/DeerSearch';
+import { CustomTextStyle } from '../style/CustomTextStyle';
 import { RootColumnStyle } from '../style/RootColumnStyle';
 import { BookListViewModel } from './viewModel/BookListViewModel';
+import { ReadPageComponent } from '@hms.core.readerservice.readerComponent';
+import { bookItemComp } from '../components/BuilderIndex';
 
 // 精选书单
 @ComponentV2
@@ -11,12 +15,88 @@ struct BookListPage {
   build() {
     NavDestination() {
       Column() {
+        YTHeader({
+          centerComp: () => { this.SearchComp() },
+          bgc: Color.White
+        })
 
+        Column(){
+          List({space: 22}){
+            ForEach(this.vm.categoryList, (item: string, index) => {
+              ListItem(){
+                Column(){
+                  Text(item)
+                    .zIndex(99)
+                    .onClick(() => { this.vm.changeCategory(index) })
+                    .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: this.vm.categoryIndex == index ? '#FF111111' : '#FF777777'}))
+
+                  if(this.vm.categoryIndex == index){
+                    Image($r('[basic].media.icon_SelectBg'))
+                      .width(45)
+                      .height(16)
+                      .margin({top:-10})
+                      .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100, curve: Curve.Smooth }))
+                  }
+                }
+                .alignItems(HorizontalAlign.Center)
+              }
+            })
+          }
+          .height(40)
+          .width("100%")
+          .scrollBar(BarState.Off)
+          .listDirection(Axis.Horizontal)
+
+          Row(){
+            ForEach(['最新', '最热'], (item: string, index: number) => {
+              Text(item)
+                .borderRadius(15)
+                .padding({left: 12, top: 5, right: 12, bottom: 5})
+                .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
+                .border({width: 2, color: this.vm.sortType == index ? '#FF000000' : Color.Transparent})
+                .backgroundColor(this.vm.sortType == index ? '#FFFECF2F' : Color.Transparent)
+                .onClick(() => { this.vm.changeSortType(index) })
+            })
+          }
+          .width("100%")
+          .margin({top: 10})
+          .justifyContent(FlexAlign.Start)
+        }
+        .width("100%")
+        .backgroundColor(Color.White)
+        .borderRadius({bottomLeft: 20, bottomRight: 20})
+        .padding({left: 16, right: 16, top: 20, bottom: 18})
+
+        Column(){
+          List({space: 12}){
+            ListItem()
+
+            Repeat(this.vm.bookList)
+              .each((item) => {
+                bookItemComp(item.item)
+              })
+          }
+          .width("100%")
+          .height("100%")
+          .scrollBar(BarState.Off)
+        }
+        .width("100%")
+        .layoutWeight(1)
+        .padding({left: 16, right: 16})
+        .backgroundColor(Color.Transparent)
       }
-      .attributeModifier(new RootColumnStyle())
+      .backgroundColor('#FFF7F9FA')
     }
     .hideTitleBar(true)
   }
+
+  @Builder
+  SearchComp(){
+    Row(){
+      DeerSearch({enable: false})
+    }
+    .margin({left: 50})
+  }
 }
 
 @Builder

features/feature/src/main/ets/pages/viewModel/BookListViewModel.ets

@@ -1,5 +1,23 @@
 
 @ObservedV2
 export class BookListViewModel{
+  // 分类列表
+  @Trace categoryList: string[] = ['全部', '精品主题', '名家大师', '国际获奖', '经典系列', '畅销榜TOP', '权威推荐', '月度推荐']
+  // 书单列表
+  @Trace bookList: string[] = ['书单1', '书单2', '书单3', '书单4', '书单5', '书单6', '书单7', '书单8', '书单9', '书单10', '书单11', '书单12', '书单13', '书单14', '书单15', '书单16', '书单17']
 
+  // 分类索引
+  @Trace categoryIndex: number = 0
+  // 排序方式 0 - 最新 1 - 最热
+  @Trace sortType: number = 0
+
+  // 更改选中的分类
+  changeCategory(index: number) {
+    this.categoryIndex = index
+  }
+
+  // 更改排序方式
+  changeSortType(index: number) {
+    this.sortType = index
+  }
 }

features/feature/src/main/ets/style/RootColumnStyle.ets

@@ -5,8 +5,12 @@ import { YTAvoid } from 'basic/Index'
 export class RootColumnStyle implements AttributeModifier<ColumnAttribute> {
   @Trace safeTop: number = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
   @Trace safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+  @Trace bgc: ResourceColor = '#F7F8FA'
 
-  constructor() {
+  constructor(bgc?: ResourceColor) {
+    if (bgc) {
+      this.bgc = this.bgc
+    }
   }
 
   // 组件常态样式
@@ -14,7 +18,7 @@ export class RootColumnStyle implements AttributeModifier<ColumnAttribute> {
     instance
       .width('100%')
       .height('100%')
-      .backgroundColor('#F7F8FA')
+      .backgroundColor(this.bgc)
       .justifyContent(FlexAlign.Start)
       .alignItems(HorizontalAlign.Start)
       .padding({ left: 16, right: 16, top: this.safeTop, bottom: this.safeBottom })

features/feature/src/main/ets/viewModel/MainViewModel.ets

@@ -1,4 +1,4 @@
-import { BasicType, YTAvoid } from "basic"
+import { BasicType, YTAvoid, YTRequest, yTRouter } from "basic"
 
 @ObservedV2
 export class MainViModel{
@@ -19,7 +19,9 @@ export class MainViModel{
     }, {
       src: $r('[basic].media.png_bookstore'),
       text: '精选书单',
-      click: () => {}
+      click: () => {
+        yTRouter.router2BookListPage()
+      }
     },
   ]
 }