添加楼层

@@ -7,10 +7,10 @@
   "main": "",
   "version": "1.0.0",
   "dependencies": {
-    "wdBean": "file:../wdBean",
     "wdComponent": "file:../wdComponent",
     "wdConstant": "file:../wdConstant",
     "wdKit": "file:../wdKit",
+    "wdBean": "file:../wdBean",
     "wdNetwork": "file:../wdNetwork"
   }
 }

 import { CompDTO, CompStyle, GroupDTO, ItemBean, ItemDTO, ViewType } from 'wdBean';
-import { CompUtils, EmptyComponent, ErrorComponent, LabelComponent, LoadingComponent, } from 'wdComponent';
+import { CompUtils, EmptyComponent, ErrorComponent,
+  GridLayout01Component,
+  LabelComponent, LoadingComponent,
+  SingleRow03Component, } from 'wdComponent';
 import { CommonConstants } from 'wdConstant';
 import { LazyDataSource, Logger, StringUtils } from 'wdKit';
 
@@ -54,6 +57,10 @@ export struct PageComponent {
   componentBuilder(compDTO: CompDTO, groupIndex: number, compIndex: number) {
     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})
     } else {
       // todo:组件未实现 / Component Not Implemented
       Text(compDTO.compStyle)

@@ -33,6 +33,11 @@
           }
         ]
       }
+    ],
+    "requestPermissions": [
+      {
+        "name": "ohos.permission.INTERNET"
+      }
     ]
   }
 }
\ No newline at end of file

@@ -5,5 +5,5 @@
 # as it contains information specific to your local configuration.
 #
 # For customization when using a Version Control System, please read the header note.
-hwsdk.dir=D:/Harmony/HarmonyOS_SDK- 4.0.3.700-SP1
-nodejs.dir=D:/nodejs-16.20.1
+nodejs.dir=D:/node
+hwsdk.dir=D:/huawei/Sdk-4.0.700
\ No newline at end of file

 {
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
   "name": "wdbean",
-  "version": "1.0.0",
   "description": "Please describe the basic information.",
   "main": "Index.ets",
-  "author": "",
-  "license": "Apache-2.0",
-  "dependencies": {
-  }
+  "version": "1.0.0",
+  "dependencies": {}
 }

@@ -7,3 +7,7 @@ export { ErrorComponent } from "./src/main/ets/components/ErrorComponent"
 export { LoadingComponent } from "./src/main/ets/components/LoadingComponent"
 
 export { LabelComponent } from "./src/main/ets/components/LabelComponent"
+
+export {SingleRow03Component} from  "./src/main/ets/components/SingleRow03Component"
+
+export {GridLayout01Component} from  "./src/main/ets/components/GridLayout01Component"
\ No newline at end of file

 {
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
   "name": "wdcomponent",
-  "version": "1.0.0",
   "description": "Please describe the basic information.",
   "main": "Index.ets",
-  "author": "",
-  "license": "Apache-2.0",
+  "version": "1.0.0",
   "dependencies": {
-    "wdBean": "file:../wdBean",
     "wdConstant": "file:../wdConstant",
-    "wdKit": "file:../wdKit"
+    "wdKit": "file:../wdKit",
+    "wdBean": "file:../wdBean"
   }
 }

+import { ContentDTO } from 'wdBean';
+import { CommonConstants } from 'wdConstant';
+
+
+const TAG = 'GridLayout01Component';
+
+/**
+ * 热点视频推荐
+ * Grid_Layout-03
+ * 支持添加视频、直播内容
+ */
+@Component
+export struct GridLayout01Component {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = 'xs';
+  @State dataList?: ContentDTO[] = undefined
+  @State adapterBeanList?:ContentDTO[] = []
+
+  aboutToAppear() {
+    this.buildAdapterBeanList(this.currentBreakpoint)
+  }
+
+  aboutToDisappear() {
+  }
+
+  build() {
+    GridRow({
+      columns: 12,
+      gutter: { x: vp2px(2.5), y: vp2px(2.5) },
+    }) {
+      ForEach(this.dataList, (programmeBean: ContentDTO, index: number) => {
+        GridCol({ span: { xs: 6, sm: 6, md: 3, lg: 3 } }) {
+          this.buildItemTopImgBottomTxt01(programmeBean, index)
+        }
+      })
+    }
+    .margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin') })
+    .onBreakpointChange((currentBreakpoint: string) => {
+      this.currentBreakpoint = currentBreakpoint
+      this.buildAdapterBeanList(currentBreakpoint)
+    })
+  }
+
+  // 只从list最后添加/补充数据item，不截断list
+  buildAdapterBeanList(currentBreakpoint: string): void {
+    if (!this.dataList || this.dataList.length == 0) {
+      return
+    }
+    let divisor: number = 1; // 除数
+    switch (currentBreakpoint) {
+      case 'xs': // break; // pass through
+      case 'sm':
+          divisor = 2;
+        break;
+      case 'md': // break; // pass through
+      case 'lg': // break; // pass through
+      default:
+          divisor = 4;
+        break;
+    }
+    this.adapterBeanList = [] // 重置
+    this.adapterBeanList.push(...this.dataList.reverse());
+    let mod = this.dataList.length % divisor // 余数
+    if (mod == 0) {
+      return
+    }
+    // 在尾部补全数据
+    let complementIndex = 0
+    while (complementIndex < mod) {
+      // 从原有数据前(循环)依次取数据，补充到列表尾部，
+      this.adapterBeanList.push(this.dataList[complementIndex])
+      complementIndex++
+    }
+    return
+  }
+
+  @Builder
+  buildItemTopImgBottomTxt01(item: ContentDTO, index: number){
+    Column(){
+      RelativeContainer() {
+        Image(item.hImageUrl)
+          .width('100%')
+          .aspectRatio(16 / 9)
+          .borderRadius($r("app.float.image_border_radius"))
+          .objectFit(ImageFit.Cover)
+          .alignRules({
+            top: { anchor: '__container__', align: VerticalAlign.Top },
+            left: { anchor: '__container__', align: HorizontalAlign.Start }
+          })
+          .id('img_cover')
+
+        Text(item.title)
+          .width('100%')
+          .margin({ top: 4, left: 6, right: 6 })
+          .fontWeight(FontWeight.Normal)
+          .textAlign(TextAlign.Start)
+          .fontSize($r('app.float.font_size_14'))
+          .fontColor($r('app.color.color_333333'))
+          .maxLines(2)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .alignRules({
+            top: {anchor:'img_cover', align: VerticalAlign.Bottom},
+            left: {anchor: 'img_cover', align: HorizontalAlign.Start},
+            right:{anchor: 'img_cover', align: HorizontalAlign.End}
+          })
+          .id("tv_title")
+
+      }
+      .width('100%')
+      .height($r('app.float.single_row_03_item_height'))
+    }
+    .backgroundColor(Color.White)
+    .hoverEffect(HoverEffect.Scale)
+    .alignItems(HorizontalAlign.Start)
+
+
+  }
+}
\ No newline at end of file

+import { ContentDTO } from 'wdBean';
+
+
+const TAG = 'SingleRow03Component';
+
+/**
+ * 直播横划卡
+ * Single_Row-03
+ * 支持添加直播内容
+ */
+@Component
+export struct SingleRow03Component {
+  @State dataList?: ContentDTO[] = undefined
+
+  build() {
+    List( {space: 2.5}){
+      ForEach(this.dataList, (item : ContentDTO, index?: number) =>{
+        ListItem(){
+           this.contentItem(item)
+        }
+
+      } , (item: ContentDTO) => JSON.stringify(item))
+
+    }
+    .listDirection(Axis.Horizontal)
+    .lanes(1)
+    .scrollBar(BarState.Off)
+  }
+
+  @Builder
+  contentItem(item: ContentDTO){
+    Column(){
+      RelativeContainer() {
+        Image(item.coverUrl)
+          .width('100%')
+          .height($r('app.float.single_row_03_img_height'))
+          .borderRadius($r("app.float.image_border_radius"))
+          .objectFit(ImageFit.Cover)
+          .alignRules({
+            top: { anchor: '__container__', align: VerticalAlign.Top },
+            left: { anchor: '__container__', align: HorizontalAlign.Start }
+          })
+          .id('img_cover')
+
+        Text(item.title)
+          .width('100%')
+          .margin({ top: 4, left: 6, right: 6 })
+          .fontWeight(FontWeight.Normal)
+          .textAlign(TextAlign.Start)
+          .fontSize($r('app.float.font_size_14'))
+          .fontColor($r('app.color.color_333333'))
+          .maxLines(2)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .alignRules({
+            top: {anchor:'img_cover', align: VerticalAlign.Bottom},
+            left: {anchor: 'img_cover', align: HorizontalAlign.Start},
+            right:{anchor: 'img_cover', align: HorizontalAlign.End}
+          })
+          .id("tv_title")
+
+        Button('预约')
+          .width(58)
+          .height(24)
+          .margin({bottom: 6})
+          .backgroundColor(0xF55A42)
+          .id('button')
+          .alignRules({
+            bottom: {anchor:'__container__', align: VerticalAlign.Bottom},
+            right:{anchor: '__container__', align: HorizontalAlign.End}
+          })
+          .onClick((event: ClickEvent) => {
+
+        })
+
+        Text(item.startTime)
+          .fontWeight(FontWeight.Normal)
+          .textAlign(TextAlign.Start)
+          .margin({ left: 6})
+          .fontSize($r('app.float.font_size_10'))
+          .fontColor($r('app.color.color_999999'))
+          .maxLines(1)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .alignRules({
+            center: {anchor:'button', align:VerticalAlign.Center},
+            left: {anchor: 'tv_title', align: HorizontalAlign.Start},
+          })
+          .id("tv_start_time")
+
+
+
+      }
+      .width('100%')
+      .height('100%')
+    }
+    .width($r('app.float.single_row_03_item_width'))
+    .height($r('app.float.single_row_03_item_height'))
+    .backgroundColor(Color.White)
+    .alignItems(HorizontalAlign.Start)
+
+
+  }
+}
\ No newline at end of file

@@ -8,6 +8,11 @@
       "tablet",
       "2in1"
     ],
-    "deliveryWithInstall": true
+    "deliveryWithInstall": true,
+    "requestPermissions": [
+      {
+        "name": "ohos.permission.INTERNET"
+      }
+    ]
   }
 }
\ No newline at end of file

@@ -3,6 +3,14 @@
     {
       "name": "white",
       "value": "#FFFFFF"
+    },
+    {
+      "name": "color_333333",
+      "value": "#333333"
+    },
+    {
+      "name": "color_999999",
+      "value": "#999999"
     }
   ]
 }
\ No newline at end of file

@@ -15,6 +15,30 @@
     {
       "name": "label_margin_bottom",
       "value": "8vp"
+    },
+    {
+      "name": "single_row_03_item_width",
+      "value": "158vp"
+    },
+    {
+      "name": "single_row_03_item_height",
+      "value": "160vp"
+    },
+    {
+      "name": "single_row_03_img_height",
+      "value": "88vp"
+    },
+    {
+      "name": "font_size_14",
+      "value": "14fp"
+    },
+    {
+      "name": "font_size_10",
+      "value": "10fp"
+    },
+    {
+      "name": "image_border_radius",
+      "value": "8vp"
     }
   ]
 }
\ No newline at end of file

 {
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
   "name": "wdconstant",
-  "version": "1.0.0",
   "description": "Please describe the basic information.",
   "main": "Index.ets",
-  "author": "",
-  "license": "Apache-2.0",
-  "dependencies": {
-  }
+  "version": "1.0.0",
+  "dependencies": {}
 }

 {
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
   "name": "wdkit",
-  "version": "1.0.0",
   "description": "Please describe the basic information.",
   "main": "Index.ets",
-  "author": "",
-  "license": "Apache-2.0",
-  "dependencies": {
-  }
+  "version": "1.0.0",
+  "dependencies": {}
 }

 {
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
   "name": "wdnetwork",
-  "version": "1.0.0",
   "description": "Please describe the basic information.",
   "main": "Index.ets",
-  "author": "",
-  "license": "Apache-2.0",
+  "version": "1.0.0",
   "dependencies": {
     "@ohos/axios": "^2.1.1"
   }