HarmonyOS鸿蒙Next中build函数内组件内写的多了在加上属性连缀，真的好难阅读

HarmonyOS鸿蒙Next中build函数内组件内写的多了在加上属性连缀，真的好难阅读

interface RecommendDailyType {
  img: string // 图片
  title: string // 简介文字
  type: string // 标题文字
  top: string // 标题背景色
  bottom: string // 简介背景色
}

@Component
  // export 导出，别的组件才可以使用
export struct Recommend {
  swiperList: string[] = [
    'https://s41.ax1x.com/2025/12/24/pZGcq9f.png',
    'https://s41.ax1x.com/2025/12/24/pZGcDB9.png',
    'https://s41.ax1x.com/2025/12/22/pZ82nje.png',
    'https://s41.ax1x.com/2025/12/28/pZYcT41.png',
    'https://s41.ax1x.com/2025/12/24/pZGcvuQ.png',
    'https://s41.ax1x.com/2025/12/24/pZGcvuQ.png'
  ]
  dailyRecommend: RecommendDailyType[] = [
    {
      img: 'https://s41.ax1x.com/2025/12/24/pZGcq9f.png',
      title: '每日推荐 ｜ 今天从《不得不爱》听起 ｜ 私人雷达',
      type: '每日推荐',
      top: '#660000',
      bottom: '#382e2f'
    },
    {
      img: 'https://s41.ax1x.com/2025/12/24/pZGcDB9.png',
      title: '私人漫游 ｜ 今天从《不得不爱》听起 ｜ 私人雷达',
      type: '私人漫游',
      top: '#660000',
      bottom: '#382e2f'
    },
    {
      img: 'https://s41.ax1x.com/2025/12/22/pZ82nje.png',
      title: '华语流行 ｜ 今天从《不得不爱》听起 ｜ 私人雷达',
      type: '华语流行',
      top: '#660000',
      bottom: '#382e2f'
    },
    {
      img: 'https://s41.ax1x.com/2025/12/28/pZYcT41.png',
      title: '每日推荐 ｜ 今天从《不得不爱》听起 ｜ 私人雷达',
      type: '每日推荐',
      top: '#660000',
      bottom: '#382e2f'
    },
    {
      img: 'https://s41.ax1x.com/2025/12/24/pZGcvuQ.png',
      title: '每日推荐 ｜ 今天从《不得不爱》听起 ｜ 私人雷达',
      type: '每日推荐',
      top: '#660000',
      bottom: '#382e2f'
    },
    {
      img: 'https://s41.ax1x.com/2025/12/24/pZGcvuQ.png',
      title: '每日推荐 ｜ 今天从《不得不爱》听起 ｜ 私人雷达',
      type: '每日推荐',
      top: '#660000',
      bottom: '#382e2f'
    },
  ]

  @Builder
  titleBuilder(title: string) {
    Row() {
      Text(title)
        .fontColor('#FFF')
        .fontWeight(700)
        .layoutWeight(1)
      Image($r('app.media.more'))
        .width(22)
        .fillColor('#FFF')
    }
  }

  build() {
    Column({ space: 10 }) {
      Row() {
        Image($r('app.media.search'))
          .width(22)
          .fillColor('#817D83')
        TextInput({ placeholder: '只因你太美🔥' })
          .placeholderColor('#817D83')
          .fontColor('#999')
          .layoutWeight(1)
        Image($r('app.media.sc_code'))
          .width(20)
          .fillColor('#817D83')
      }
      .width('100%')
      .backgroundColor('#2D2B29')
      .border({ radius: 20 })
      .padding({ left: 8, right: 8 })
      .margin({ top: 10 })

      Swiper() {
        ForEach(this.swiperList, (url: string) => {
          Image(url)
            .width('100%')
            .height(150)
            .border({ radius: 10 })
        })
      }
      .autoPlay(true)

      this.titleBuilder('每日推荐')
      List() {
        ForEach(this.dailyRecommend, (item: RecommendDailyType) => {
          ListItem() {
            Column() {
              Text(item.type)
                .width('100%')
                .height(40)
                .backgroundColor(item.top)
                .padding({ left: 5 })
                .fontSize(14)
                .fontColor('#FFF')
              Image(item.img)
                .width('100%')
              Text(item.title)
                .width('100%')
                .backgroundColor(item.bottom)
            }
            .width('40%')
            // .height(200)
            // .backgroundColor(Color.Pink)
            .border({ radius: 10 })
            .margin({ right: 10 })
          }
        })
      }
      .listDirection(Axis.Horizontal)

    }
    .width('100%')
    .height('100%')
    .padding({
      left: 10,
      right: 10,
      top: 5,
      bottom: 5
    })
  }
}