添加自定义组件：

单列组件:SINGLE_COLUMN
 样式：
 'Single_Column-01', // 大卡横屏视频：视频、直播
 'Single_Column-02', // 活动卡：活动

轮播组件,即Banner/轮播大图/焦点图/自动滑动
  样式：
 'Carousel_Layout-01', // 通用轮播卡：视频、直播、活动、专题、榜单、外链

@@ -7,6 +7,14 @@
 
 
 
 
 ## 环境搭建
 ## 环境搭建
+1.下载/解压开发工具：统一用DevEco Studio 4.0.3.700(SP1)-API10(windows操作系统/mac操作系统)(2023-12-25)
+2.按照解压目录中的【Studio环境配置指导.docx】文档安装/配置开发环境/并创建并运行HelloWorld工程(暂时用开发者个人签名，最终发布时最好用企业签名)。
+3.项目英文名称【Sight_Harmony】；中文名称【网达编排】；包名【com.wondertek.sight】
+4.Compile SDK: 4.0.0(API10)
+5.支持设备类型：Phone/Tablet/2in1
+6.主模块/入口模块默认名称：entry
+7.模型能力(Model)：Stage模型(官方推荐模型能力)
+8.nodejs版本：nodejs-16.20.1(DevEco开发环境默认版本)
 
 
 ### 软件要求
 ### 软件要求
 
 
@@ -73,6 +81,9 @@ import axios from '@ohos/axios';
 同理，在mlayout模块使用三方库@ohos/lottie(V2.0.7)
 同理，在mlayout模块使用三方库@ohos/lottie(V2.0.7)
 https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie
 https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie
 
 
+## Previewer使用
+在自定义组件上，再加一个@Entry装饰器，再给参数设置必要的数据，即可用Previewer查看布局展示效果
+
 ## 代码结构解读
 ## 代码结构解读
 
 
 ## 总结
 ## 总结

-import { CompDTO, CompStyle, GroupDTO, ItemBean, ItemDTO, ViewType } from 'wdBean';
-import { CompUtils, EmptyComponent, ErrorComponent,
+import { CompDTO, CompStyle, GroupDTO, ViewType } from 'wdBean';
+import {
+  BannerComponent,
+  EmptyComponent,
+  ErrorComponent,
   GridLayout01Component,
   GridLayout01Component,
-  LabelComponent, LoadingComponent,
-  SingleRow03Component, } from 'wdComponent';
+  LabelComponent,
+  LoadingComponent,
+  SingleColumnComponent,
+  SingleRow03Component,
+} from 'wdComponent';
 import { CommonConstants } from 'wdConstant';
 import { CommonConstants } from 'wdConstant';
 import { LazyDataSource, Logger, StringUtils } from 'wdKit';
 import { LazyDataSource, Logger, StringUtils } from 'wdKit';
 
 
-
 const TAG = 'PageComponent';
 const TAG = 'PageComponent';
 
 
 @Component
 @Component
@@ -14,7 +19,6 @@ export struct PageComponent {
   @Prop viewType: number = ViewType.LOADED;
   @Prop viewType: number = ViewType.LOADED;
   // Group数据及子组件数据
   // Group数据及子组件数据
   @State groupList: LazyDataSource<GroupDTO> = new LazyDataSource();
   @State groupList: LazyDataSource<GroupDTO> = new LazyDataSource();
-  @State isRefreshing: boolean = false
 
 
   build() {
   build() {
     if (this.viewType == ViewType.LOADING) {
     if (this.viewType == ViewType.LOADING) {
@@ -24,7 +28,6 @@ export struct PageComponent {
     } else if (this.viewType == ViewType.EMPTY) {
     } else if (this.viewType == ViewType.EMPTY) {
       EmptyComponent()
       EmptyComponent()
     } else {
     } else {
-      Refresh({ refreshing: this.isRefreshing }) {
       List() {
       List() {
         LazyForEach(this.groupList, (groupDTO: GroupDTO, groupIndex: number) => {
         LazyForEach(this.groupList, (groupDTO: GroupDTO, groupIndex: number) => {
           ListItem() {
           ListItem() {
@@ -38,29 +41,21 @@ export struct PageComponent {
       }
       }
       .cachedCount(5)
       .cachedCount(5)
       .height(CommonConstants.FULL_PARENT)
       .height(CommonConstants.FULL_PARENT)
-
-        // .padding({
-        //   bottom: (this.currentNavIndex === 0 || this.currentNavIndex === 1) ? $r('app.float.search_bar_height') : 0
-        // }) // 当页面顶部有搜索bar时，页面的list增加bottom的padding为搜索bar的高度
-      }
-      .onRefreshing(() => {
-        this.isRefreshing = true
-        // this.sendRequest(true)
-        // setTimeout(() => {
-        //   this.isRefreshing = false
-        // }, 2000)
-      })
     }
     }
   }
   }
 
 
   @Builder
   @Builder
   componentBuilder(compDTO: CompDTO, groupIndex: number, compIndex: number) {
   componentBuilder(compDTO: CompDTO, groupIndex: number, compIndex: number) {
     if (compDTO.compStyle === CompStyle.Label_03) {
     if (compDTO.compStyle === CompStyle.Label_03) {
-      LabelComponent({ label: CompUtils.getLabelTitle(compDTO.extraData) })
-    } else if(compDTO.compStyle === CompStyle.Single_Row_03){
-      SingleRow03Component({dataList: compDTO.operDataList})
-    } else if(compDTO.compStyle === CompStyle.Grid_Layout_01){
-      GridLayout01Component({dataList: compDTO.operDataList})
+      LabelComponent({ compDTO: compDTO })
+    } else if (compDTO.compStyle === CompStyle.Carousel_Layout_01) {
+      BannerComponent({ compDTO: compDTO })
+    } else if (compDTO.compStyle === CompStyle.Single_Row_03) {
+      SingleRow03Component({ dataList: compDTO.operDataList })
+    } else if (compDTO.compStyle === CompStyle.Single_Column_01 || compDTO.compStyle === CompStyle.Single_Column_02) {
+      SingleColumnComponent({ compDTO: compDTO })
+    } else if (compDTO.compStyle === CompStyle.Grid_Layout_01) {
+      GridLayout01Component({ dataList: compDTO.operDataList })
     } else {
     } else {
       // todo:组件未实现 / Component Not Implemented
       // todo:组件未实现 / Component Not Implemented
       Text(compDTO.compStyle)
       Text(compDTO.compStyle)

-# This file is automatically generated by DevEco Studio.
-# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
-#
-# This file should *NOT* be checked into Version Control Systems,
-# as it contains information specific to your local configuration.
-#
-# For customization when using a Version Control System, please read the header note.
-nodejs.dir=D:/node
-hwsdk.dir=D:/huawei/Sdk-4.0.700

@@ -7,6 +7,8 @@ export { NetDataStatusType } from './src/main/ets/enum/NetDataStatusType';
 
 
 export { ViewType } from './src/main/ets/enum/ViewType';
 export { ViewType } from './src/main/ets/enum/ViewType';
 
 
+export { DelayTimeEnum } from './src/main/ets/enum/DelayTimeEnum';
+
 // entity
 // entity
 export { ItemDTO } from './src/main/ets/bean/ItemDTO';
 export { ItemDTO } from './src/main/ets/bean/ItemDTO';
 
 

@@ -16,9 +16,9 @@ export interface CompDTO {
   linkUrl: string;
   linkUrl: string;
   // meddleDataList: any[];
   // meddleDataList: any[];
   name: string;
   name: string;
-  objectId: string;
-  objectTitle: string;
-  // objectType?: any;
+  objectId: string; // 跳转页面id?
+  objectTitle: string; // comp标题
+  // objectType?: any; // 跳转类型，枚举：
   operDataList: ContentDTO[]; // 运营数据列表【正常运营配置的强运营数据，部分推荐场景的配置（自动源兜底数据）】
   operDataList: ContentDTO[]; // 运营数据列表【正常运营配置的强运营数据，部分推荐场景的配置（自动源兜底数据）】
   // pageId?: any;
   // pageId?: any;
   posterSize: string;
   posterSize: string;

@@ -2,21 +2,21 @@
  * 组件Style/展示样式
  * 组件Style/展示样式
  */
  */
 export const enum CompStyle {
 export const enum CompStyle {
-  Label_03 = 'Label-03', // 标题
-  Carousel_Layout_01 = 'Carousel_Layout-01',
-  Carousel_Layout_02 = 'Carousel_Layout-02',
-  Single_Row_01 = 'Single_Row-01',
-  Single_Row_02 = 'Single_Row-02',
-  Single_Row_03 = 'Single_Row-03',
-  Single_Row_04 = 'Single_Row-04',
-  Single_Row_05 = 'Single_Row-05',
-  Single_Column_01 = 'Single_Column-01',
-  Single_Column_02 = 'Single_Column-02',
-  Single_Column_03 = 'Single_Column-03',
-  Single_Column_04 = 'Single_Column-04',
-  Single_Column_05 = 'Single_Column-05',
-  Single_Column_06 = 'Single_Column-06',
-  Grid_Layout_01 = 'Grid_Layout-01',
-  Grid_Layout_02 = 'Grid_Layout-02',
-  Masonry_Layout_01 = 'Masonry_Layout-01',
+  Label_03 = 'Label-03', // 标题卡：icon+文字
+  Carousel_Layout_01 = 'Carousel_Layout-01', // 通用轮播卡：视频、直播、活动、专题、榜单、外链
+  Carousel_Layout_02 = 'Carousel_Layout-02', // 直播轮播卡：直播
+  Single_Row_01 = 'Single_Row-01', // 三格方形小卡（排名）：专题、活动
+  Single_Row_02 = 'Single_Row-02', // 通用横划卡：视频、直播、专题
+  Single_Row_03 = 'Single_Row-03', // 直播横划卡：直播
+  Single_Row_04 = 'Single_Row-04', // 三格方形小卡：专题、活动
+  Single_Row_05 = 'Single_Row-05', // 专题横划卡：视频、直播、专题、活动、榜单、外链
+  Single_Column_01 = 'Single_Column-01', // 大卡横屏视频：视频、直播
+  Single_Column_02 = 'Single_Column-02', // 活动卡：活动
+  Single_Column_03 = 'Single_Column-03', // 地域榜单：榜单
+  Single_Column_04 = 'Single_Column-04', // 大卡横屏（带背景）：视频、直播
+  Single_Column_05 = 'Single_Column-05', // 海报图卡：/
+  Single_Column_06 = 'Single_Column-06', // 留言板卡：/
+  Grid_Layout_01 = 'Grid_Layout-01', // 横屏宫格卡:视频、直播
+  Grid_Layout_02 = 'Grid_Layout-02', // 竖屏宫格卡:视频、直播、榜单
+  Masonry_Layout_01 = 'Masonry_Layout-01', // 双列瀑布流/瀑布流卡：视频、直播、专题、活动
 }
 }

@@ -2,10 +2,10 @@
  * 组件Type/展示类型
  * 组件Type/展示类型
  */
  */
 export const enum CompType {
 export const enum CompType {
-  LABEL = 'LABEL', // 标题
-  CAROUSEL_LAYOUT = 'CAROUSEL_LAYOUT', // 轮播大图,即Banner/焦点图
-  SINGLE_ROW = 'SINGLE_ROW', //
-  SINGLE_COLUMN = 'SINGLE_COLUMN', //
-  GRID_LAYOUT = 'GRID_LAYOUT', //
-  MASONRY_LAYOUT = 'MASONRY_LAYOUT', //
+  LABEL = 'LABEL', // 标题组件
+  CAROUSEL_LAYOUT = 'CAROUSEL_LAYOUT', // 轮播组件,即Banner/焦点图
+  SINGLE_ROW = 'SINGLE_ROW', // 单行组件
+  SINGLE_COLUMN = 'SINGLE_COLUMN', // 单列组件
+  GRID_LAYOUT = 'GRID_LAYOUT', // 网格组件
+  MASONRY_LAYOUT = 'MASONRY_LAYOUT', // 瀑布流组件
 }
 }

@@ -6,5 +6,6 @@ export const enum DelayTimeEnum {
   DURATION_100 = 100, // 50毫秒
   DURATION_100 = 100, // 50毫秒
   DURATION_1000 = 1000, // 1秒/1000ms
   DURATION_1000 = 1000, // 1秒/1000ms
   DURATION_2000 = 2000, // 2秒/2000ms
   DURATION_2000 = 2000, // 2秒/2000ms
-  LAUNCHER_DELAY_TIME = 1500 // 1.5秒
+  LAUNCHER_DELAY_TIME = 1500, // 1.5秒
+  INTERVAL_4000 = 4000, //4秒
 }
 }

@@ -8,6 +8,10 @@ export { LoadingComponent } from "./src/main/ets/components/LoadingComponent"
 
 
 export { LabelComponent } from "./src/main/ets/components/LabelComponent"
 export { LabelComponent } from "./src/main/ets/components/LabelComponent"
 
 
-export {SingleRow03Component} from  "./src/main/ets/components/SingleRow03Component"
+export { BannerComponent } from "./src/main/ets/components/BannerComponent"
 
 
-export {GridLayout01Component} from  "./src/main/ets/components/GridLayout01Component"
+export { SingleRow03Component } from "./src/main/ets/components/SingleRow03Component"
+
+export { SingleColumnComponent } from "./src/main/ets/components/SingleColumnComponent"
+
+export { GridLayout01Component } from "./src/main/ets/components/GridLayout01Component"

+import { CompDTO, ContentDTO, DelayTimeEnum } from 'wdBean';
+import { CommonConstants } from 'wdConstant';
+import { Logger } from 'wdKit';
+import { CompUtils } from '../utils/CompUtils';
+import { EmptyComponent } from './EmptyComponent';
+
+const TAG = 'BannerComponent';
+
+/**
+ * 轮播组件,即Banner/轮播大图/焦点图/自动滑动
+ * 样式：
+ * 'Carousel_Layout-01', // 通用轮播卡：视频、直播、活动、专题、榜单、外链
+ */
+@Component
+export struct BannerComponent {
+  @StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = 'xs';
+  @State compDTO: CompDTO = {} as CompDTO
+
+  watchCurrentBreakpoint() {
+    Logger.info(TAG, `watchCurrentBreakpoint, this.currentBreakpoint: ${this.currentBreakpoint}`);
+  }
+
+  aboutToAppear() {
+    Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
+  }
+
+  aboutToDisappear() {
+    Logger.info(TAG, 'aboutToDisappear');
+  }
+
+  onPageShow() {
+    Logger.info(TAG, 'onPageShow');
+  }
+
+  onPageHide() {
+    Logger.info(TAG, 'onPageHide');
+  }
+
+  onBackPress() {
+    Logger.info(TAG, 'onBackPress');
+  }
+
+  build() {
+    if (this.compDTO && this.compDTO?.operDataList?.length > 0) {
+      Swiper() {
+        ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
+          this.buildItemBanner01(item, index)
+        })
+      }
+      .displayCount(1) // 仅展示1个图片
+      .cachedCount(2)
+      .index(1) // The default index of Swiper.
+      .autoPlay(true)
+      .interval(DelayTimeEnum.INTERVAL_4000)
+      .indicator(Indicator.dot()
+        .right(5)
+        .itemWidth(4)
+        .itemHeight(4)
+        .selectedItemWidth(10)
+        .selectedItemHeight(6))
+      .loop(true)
+      .duration(DelayTimeEnum.DURATION_1000)
+      .vertical(false)
+      .curve(Curve.Linear)
+      .onChange((index: number) => {
+        Logger.info(TAG, `Swiper onChange index : ${index}`);
+      })
+    } else {
+      EmptyComponent({ emptyHeight: 200 })
+    }
+  }
+
+  // public buildDisplayCount(): number {
+  //   return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)
+  // }
+
+  /**
+   * 组件项
+   *
+   * @param programmeBean item 组件项
+   */
+  @Builder
+  buildItemBanner01(item: ContentDTO, index: number) {
+    RelativeContainer() {
+      Image(item.hImageUrl)
+        .width(CommonConstants.FULL_PARENT)
+        .height(CommonConstants.FULL_PARENT)
+        .objectFit(ImageFit.Cover)
+        .borderRadius($r("app.float.border_radius_6"))
+        .alignRules({
+          top: { anchor: '__container__', align: VerticalAlign.Top },
+          left: { anchor: '__container__', align: HorizontalAlign.Start }
+        })
+        .id('img_cover')
+
+      // if (item.topLeftTipImgUrl) {
+      //   Image(item.topLeftTipImgUrl)
+      //     .width(CompCornerUtil.getCornerWidth(this.currentBreakpoint))
+      //     .aspectRatio(CompCornerUtil.ASPECT_RATIO_75_45)
+      //     .margin({ left: 6 })
+      //     .objectFit(ImageFit.Cover)
+      //     .alignRules({
+      //       top: { anchor: '__container__', align: VerticalAlign.Top },
+      //       left: { anchor: '__container__', align: HorizontalAlign.Start }
+      //     })
+      //     .id('img_corner_top_Left')
+      // }
+
+      Text(item.title)
+        .width(CommonConstants.FULL_PARENT)
+        .height(39)
+        .padding({ left: 8, right: 69, bottom: 8 })
+        .fontColor(Color.White)
+        .fontSize($r('app.float.font_size_16'))
+        .fontWeight(FontWeight.Medium)
+        .textAlign(TextAlign.Start)
+        .align(Alignment.Bottom)
+        .maxLines(CompUtils.MAX_LINES_1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+        .linearGradient({
+          direction: GradientDirection.Top, // 渐变方向:to Top/从下往上
+          colors: [[0x7508111A, 0.0], [0x7508111A, 0.3], [Color.Transparent, 1.0]]
+        })
+        .alignRules({
+          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
+          left: { anchor: '__container__', align: HorizontalAlign.Start }
+        })
+        .id('txt_name')
+    }
+    .width(CommonConstants.FULL_PARENT)
+    .aspectRatio(CompUtils.ASPECT_RATIO_2_1)
+    .hoverEffect(HoverEffect.Scale)
+    .onClick((event: ClickEvent) => {
+      Logger.info(TAG, `BannerComponent onClick event index: ${index}`);
+    })
+  }
+}

+import { ContentDTO } from 'wdBean';
+import { CommonConstants } from 'wdConstant';
+import { Logger } from 'wdKit';
+import { CompUtils } from '../utils/CompUtils';
+
+const TAG = 'CardView';
+
+/**
+ * 卡片结构：上下结构
+ * 卡片宽度:充满父窗口
+ * 卡片高度,由3部分:
+ * 1.图片宽高比为16:9;
+ * 2.一行title文字高度
+ * 3.一行author头像及名称高度
+ */
+@Component
+export struct SingleColumn01CardView {
+  private item: ContentDTO = {} as ContentDTO;
+  private index: number = -1;
+
+  build() {
+    Column() {
+      RelativeContainer() {
+        // 1.海报图片
+        Image(this.item.hImageUrl)
+          .width(CommonConstants.FULL_PARENT)
+          .aspectRatio(CompUtils.ASPECT_RATIO_16_9)
+          .borderRadius($r("app.float.border_radius_6"))
+          .alignRules({
+            top: { anchor: '__container__', align: VerticalAlign.Top },
+            left: { anchor: '__container__', align: HorizontalAlign.Start }
+          })
+          .id('img_cover')
+
+        // 2.视频时长(Duration)
+        if (this.item.startTime) {
+          Text(this.item.startTime)
+            .width(CommonConstants.FULL_PARENT)// .height($r('app.float.duration_bg_height'))
+            .padding(10)
+            .fontColor(Color.White)
+            .fontSize($r('app.float.font_size_12'))
+            .fontWeight(FontWeight.Normal)
+            .textAlign(TextAlign.End)
+            .align(Alignment.Center)
+            .maxLines(CompUtils.MAX_LINES_1)// .backgroundColor(Color.Red)
+            .linearGradient({
+              direction: GradientDirection.Top, // 渐变方向:to Top/从下往上
+              colors: [[0x7508111A, 0.0], [0x7508111A, 0.3], [Color.Transparent, 1.0]]
+            })
+            .borderRadius($r("app.float.border_radius_6"))
+            .alignRules({
+              bottom: { anchor: 'img_cover', align: VerticalAlign.Bottom }
+            })
+            .id('txt_duration')
+        }
+      }
+      .width(CommonConstants.FULL_PARENT)
+      .aspectRatio(CompUtils.ASPECT_RATIO_16_9)
+
+      // 3.标题1行/title
+      Text(this.item.title)
+        .width(CommonConstants.FULL_PARENT)
+        .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
+        .fontWeight(FontWeight.Normal)
+        .textAlign(TextAlign.Start)
+        .fontSize($r('app.float.font_size_14'))
+        .fontColor($r('app.color.color_333333'))
+        .maxLines(CompUtils.MAX_LINES_1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .padding({ bottom: 8 })
+    .backgroundColor(Color.White)
+    .borderRadius($r("app.float.border_radius_6"))
+    .hoverEffect(HoverEffect.Scale)
+    .onClick((event: ClickEvent) => {
+      Logger.info(TAG, `SingleColumn01CardView onClick event index: ${this.index}`);
+    })
+  }
+}
+
+/**
+ * 卡片结构：上下结构，上部分再左右结构(左图右文)
+ * 卡片宽度:充满父窗口
+ * 卡片高度,由2部分组成:
+ * 1.左侧图片宽高比为3:4;右侧文本及按钮等
+ * 2.最多3行title文字高度
+ */
+@Component
+export struct SingleColumn02CardView {
+  private item: ContentDTO = {} as ContentDTO;
+  private index: number = -1;
+
+  build() {
+    Column() {
+      Row() {
+        Image(this.item.vImageUrl)
+          .width('38%')
+          .aspectRatio(CompUtils.ASPECT_RATIO_3_4)
+          .borderRadius($r("app.float.border_radius_6"))
+
+        // Blank()
+        Column() {
+          Text(this.item.title)
+            .margin({ right: 20 })
+            .fontColor($r('app.color.color_333333'))
+            .fontSize($r('app.float.font_size_16'))
+            .fontWeight(FontWeight.Bold)// .textAlign(TextAlign.Start)
+            .maxLines(CompUtils.MAX_LINES_1)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+
+          if (this.item.heatValue) {
+            Text() {
+              Span(`热度 `)
+                .fontColor($r('app.color.color_666666'))
+
+              Span(`${this.item.heatValue}`)
+                .fontColor($r('app.color.color_333333'))
+            }
+            .height(20)
+            .margin({ top: 8, right: 20 })
+            .fontSize($r('app.float.font_size_14'))
+            .maxLines(CompUtils.MAX_LINES_1)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+          }
+
+          if (this.item.startTime) {
+            Text() {
+              Span(`开始 `)
+                .fontColor($r('app.color.color_666666'))
+              Span(`${this.item.startTime}`)
+                .fontColor($r('app.color.color_333333'))
+            }
+            .height(20)
+            .margin({ top: 8, right: 20 })
+            .fontSize($r('app.float.font_size_14'))
+            .maxLines(CompUtils.MAX_LINES_1)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+          }
+
+          if (this.item.endTime) {
+            Text() {
+              Span(`结束 `)
+                .fontColor($r('app.color.color_666666'))
+              Span(`${this.item.endTime}`)
+                .fontColor($r('app.color.color_333333'))
+            }
+            .height(20)
+            .margin({ top: 8, right: 20 })
+            .fontSize($r('app.float.font_size_14'))
+            .maxLines(CompUtils.MAX_LINES_1)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+          }
+
+          Text('即将开始')
+            .width(96)
+            .height(34)
+            .margin({ top: 15 })
+            .backgroundImage($r('app.media.bg_event_status_no_start'))
+            .fontColor($r('app.color.color_FE4B05'))
+            .fontSize($r('app.float.font_size_14'))
+            .textAlign(TextAlign.Center)
+            .maxLines(CompUtils.MAX_LINES_1)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+        }
+        .width('62%')
+        .margin({ left: 12, right: 12, top: 8, bottom: 8 })
+        // .backgroundColor(Color.Red)
+        .alignItems(HorizontalAlign.Start) // 内容靠左对齐
+
+      }
+      .width(CommonConstants.FULL_PARENT)
+      .alignItems(VerticalAlign.Top)
+      // .backgroundColor(Color.Orange)
+
+      Text(this.item.description)
+        .width(CommonConstants.FULL_PARENT)
+        .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
+        .fontWeight(FontWeight.Normal)
+        .textAlign(TextAlign.Start)
+        .fontSize($r('app.float.font_size_14'))
+        .fontColor($r('app.color.color_666666'))
+        .maxLines(CompUtils.MAX_LINES_3)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .padding({ bottom: 8 })
+    .backgroundColor(Color.White)
+    .borderRadius($r("app.float.border_radius_6"))
+    .hoverEffect(HoverEffect.Scale)
+    .onClick((event: ClickEvent) => {
+      Logger.info(TAG, `SingleColumn02CardView onClick event index: ${this.index}`);
+    })
+  }
+}

-import LinkList from '@ohos.util.List';
-import { LabelBean } from 'wdBean';
+import { CompDTO } from 'wdBean';
 import { CommonConstants } from 'wdConstant';
 import { CommonConstants } from 'wdConstant';
-import { Logger } from 'wdKit';
-
-import { EmptyComponent } from './EmptyComponent';
+import { CompUtils } from '../utils/CompUtils';
 
 
 const TAG = 'LabelComponent';
 const TAG = 'LabelComponent';
 
 
 /**
 /**
  * 标题/标签组件(暂时仅展示主标题，不展示子标题)
  * 标题/标签组件(暂时仅展示主标题，不展示子标题)
- * LABEL-01
+ * Label-03
  * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
  * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
- * 1.只有一个LABEL主标题(如重磅推荐)
- * 2.左右共两个LABEL(左边【电影】是主标题/右边【上海电影节】是子标题)
  */
  */
+@Entry
 @Component
 @Component
 export struct LabelComponent {
 export struct LabelComponent {
-  @State label: string = '';
+  @State compDTO: CompDTO = {} as CompDTO
 
 
   build() {
   build() {
     Row() {
     Row() {
-      Text(this.label)
+      Text(CompUtils.getLabelTitle(this.compDTO.extraData))
         .width(CommonConstants.FULL_PARENT)
         .width(CommonConstants.FULL_PARENT)
         .padding({
         .padding({
           left: $r('app.float.main_margin'),
           left: $r('app.float.main_margin'),
@@ -30,8 +26,7 @@ export struct LabelComponent {
         })
         })
         .fontSize($r('app.float.normal_text_size'))
         .fontSize($r('app.float.normal_text_size'))
         .fontWeight(FontWeight.Bold)
         .fontWeight(FontWeight.Bold)
-        .maxLines(1)
-        // .backgroundColor(Color.Yellow)
+        .maxLines(1)// .backgroundColor(Color.Yellow)
         .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
         .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
     }
     }
     .width(CommonConstants.FULL_PARENT)
     .width(CommonConstants.FULL_PARENT)

+import { CompDTO, CompStyle, ContentDTO } from 'wdBean';
+import { Logger } from 'wdKit';
+import { SingleColumn01CardView, SingleColumn02CardView } from './CardView';
+import { EmptyComponent } from './EmptyComponent';
+
+const TAG = 'SingleColumn01Component';
+
+/**
+ * 单列组件:SINGLE_COLUMN
+ * 支持样式：
+ * 'Single_Column-01', // 大卡横屏视频：视频、直播
+ * 'Single_Column-02', // 活动卡：活动
+ */
+@Component
+export struct SingleColumnComponent {
+  @State compDTO: CompDTO = {} as CompDTO
+  private compStyle: string = CompStyle.Single_Column_01;
+
+  aboutToAppear() {
+    this.compStyle = this.compDTO.compStyle
+    Logger.info(TAG, `aboutToAppear beanList: ${this.compDTO?.operDataList?.length}`);
+  }
+
+  aboutToDisappear() {
+    Logger.info(TAG, 'aboutToDisappear');
+  }
+
+  onPageShow() {
+    Logger.info(TAG, 'onPageShow');
+  }
+
+  onPageHide() {
+    Logger.info(TAG, 'onPageHide');
+  }
+
+  onBackPress() {
+    Logger.info(TAG, 'onBackPress');
+  }
+
+  build() {
+    if (this.compDTO && this.compDTO?.operDataList?.length > 0) {
+      List({ space: 4 }) {
+        ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
+          ListItem() {
+            this.buildItemView(item, index)
+          }
+        })
+      }
+      .margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin'), bottom: 8 })
+      .listDirection(Axis.Vertical)
+      .lanes(1) // 行/列数，一列
+      .scrollBar(BarState.Off)
+    } else {
+      EmptyComponent({ emptyHeight: 100 })
+    }
+  }
+
+  /**
+   * 组件item
+   * @param programmeBean
+   * @param index
+   */
+  @Builder
+  buildItemView(item: ContentDTO, index: number) {
+    if (this.compStyle == CompStyle.Single_Column_01) {
+      SingleColumn01CardView({
+        item: item,
+        index: index
+      })
+    } else if (this.compStyle == CompStyle.Single_Column_02) {
+      SingleColumn02CardView({
+        item: item,
+        index: index
+      })
+      // } else if (this.compStyle == CompStyle.Single_Column_03) {
+      // SingleColumn03CardView({
+      //   item: item,
+      //   index: index
+      // })
+    } else {
+      Text("尚未实现");
+    }
+  }
+}

@@ -16,8 +16,9 @@ export class CompUtils {
   /**
   /**
    * The max lines.
    * The max lines.
    */
    */
-  public static readonly MAX_LINES_ONE: number = 1;
-  public static readonly MAX_LINES_TWO: number = 2;
+  public static readonly MAX_LINES_1: number = 1;
+  public static readonly MAX_LINES_2: number = 2;
+  public static readonly MAX_LINES_3: number = 3;
 
 
   /**
   /**
    * 获取Label标题
    * 获取Label标题

@@ -9,8 +9,16 @@
       "value": "#333333"
       "value": "#333333"
     },
     },
     {
     {
+      "name": "color_666666",
+      "value": "#666666"
+    },
+    {
       "name": "color_999999",
       "name": "color_999999",
       "value": "#999999"
       "value": "#999999"
+    },
+    {
+      "name": "color_FE4B05",
+      "value": "#FE4B05"
     }
     }
   ]
   ]
 }
 }

 {
 {
   "float": [
   "float": [
     {
     {
+      "name": "font_size_10",
+      "value": "10fp"
+    },
+    {
+      "name": "font_size_11",
+      "value": "11fp"
+    },
+    {
+      "name": "font_size_12",
+      "value": "11fp"
+    },
+    {
+      "name": "font_size_14",
+      "value": "14fp"
+    },
+    {
+      "name": "font_size_16",
+      "value": "16fp"
+    },
+    {
       "name": "normal_text_size",
       "name": "normal_text_size",
       "value": "16fp"
       "value": "16fp"
     },
     },
     {
     {
+      "name": "font_size_24",
+      "value": "24fp"
+    },
+
+    {
       "name": "main_margin",
       "name": "main_margin",
       "value": "14vp"
       "value": "14vp"
     },
     },
     {
     {
+      "name": "margin_8",
+      "value": "8vp"
+    },
+    {
       "name": "label_margin_top",
       "name": "label_margin_top",
       "value": "10vp"
       "value": "10vp"
     },
     },
     {
     {
+      "name": "margin_bottom_16",
+      "value": "16vp"
+    },
+    {
       "name": "label_margin_bottom",
       "name": "label_margin_bottom",
       "value": "8vp"
       "value": "8vp"
     },
     },
@@ -29,16 +62,12 @@
       "value": "88vp"
       "value": "88vp"
     },
     },
     {
     {
-      "name": "font_size_14",
-      "value": "14fp"
-    },
-    {
-      "name": "font_size_10",
-      "value": "10fp"
-    },
-    {
       "name": "image_border_radius",
       "name": "image_border_radius",
       "value": "8vp"
       "value": "8vp"
+    },
+    {
+      "name": "border_radius_6",
+      "value": "6vp"
     }
     }
   ]
   ]
 }
 }