feat：解决推荐列表展示冲突

@@ -19,8 +19,8 @@
       {
         "name": "default",
         "signingConfig": "default",
-        "compileSdkVersion": "4.0.0(10)",
-        "compatibleSdkVersion": "4.0.0(10)",
+        "compileSdkVersion": "4.1.0(11)",
+        "compatibleSdkVersion": "4.1.0(11)",
         "runtimeOS": "HarmonyOS",
       }
     ],

@@ -9,8 +9,14 @@ export class SpConstants{
    static  USER_LONG_TIME_NO_LOGIN_MARK="longTimeNoLoginMark"
    static  USER_STATUS="user_status"
    static  USER_TEMP_TOKEN="tempToken"
+   static  USER_PHONE = "user_phone"
    //协议相关
    static USER_PROTOCOL = "user_protocol" //用户协议
    static PRIVATE_PROTOCOL = "private_protocol" //隐私协议
+   //设置页面
+   static SETTING_WIFI_IMAGE_SWITCH = "setting_wifi_switch" //wifi 图片开关
+   static SETTING_WIFI_VIDEO_SWITCH = "setting_wifi_switch" //wifi 视频开关
+   static SETTING_SUSPENSION_SWITCH = "setting_suspension_switch" //悬浮窗 开关
+   static SETTING_PUSH_SWITCH = "setting_push_switch" //推送 开关
 
 }
\ No newline at end of file

@@ -20,47 +20,47 @@ export const enum CompStyle {
   Masonry_Layout_01 = 'Masonry_Layout-01', // 双列瀑布流/瀑布流卡：视频、直播、专题、活动
 
 
-  Zh_Carousel_Layout_01 = 'Zh_Carousel_Layout-01', //1 轮播图卡---1
-  Zh_Single_Row_01 = 'Zh_Single_Row-01', //2 横划卡 imageScale-封面图比例 1-4:3, 2-16:9, 3-3:2---1
-  Zh_Single_Row_02 = 'Zh_Single_Row-02', //3 小视频横划卡---1
+  Zh_Carousel_Layout_01 = 'Zh_Carousel_Layout-01', //1 轮播图卡
+  Zh_Single_Row_01 = 'Zh_Single_Row-01', //2 横划卡 imageScale-封面图比例 1-4:3, 2-16:9, 3-3:2
+  Zh_Single_Row_02 = 'Zh_Single_Row-02', //3 小视频横划卡
   Zh_Single_Row_03 = 'Zh_Single_Row-03', //6 直播预约卡
-  Zh_Single_Row_04 = 'Zh_Single_Row-04', // 地方精选卡---2
-  Zh_Single_Row_05 = 'Zh_Single_Row-05', //15 人民号横划卡---1
-  Zh_Single_Row_06 = 'Zh_Single_Row-06', //20 热门评论卡--精选评论卡-1
+  Zh_Single_Row_04 = 'Zh_Single_Row-04', // 地方精选卡
+  Zh_Single_Row_05 = 'Zh_Single_Row-05', //15 人民号横划卡
+  Zh_Single_Row_06 = 'Zh_Single_Row-06', //20 热门评论卡--精选评论卡
   Zh_Single_Column_01 = 'Zh_Single_Column-01', //5 专题时间链卡
-  Zh_Single_Column_02 = 'Zh_Single_Column-02', //10 头图卡---2
+  Zh_Single_Column_02 = 'Zh_Single_Column-02', //10 头图卡
   Zh_Single_Column_03 = 'Zh_Single_Column-03', //9 直播大图卡
-  Zh_Single_Column_04 = 'Zh_Single_Column-04', //17 人民号主题卡---1
-  Zh_Single_Column_05 = 'Zh_Single_Column-05', //16 人民号入驻卡---1
+  Zh_Single_Column_04 = 'Zh_Single_Column-04', //17 人民号主题卡
+  Zh_Single_Column_05 = 'Zh_Single_Column-05', //16 人民号入驻卡
   Zh_Single_Column_06 = 'Zh_Single_Column-06', //12 本地问政卡
   Zh_Single_Column_07 = 'Zh_Single_Column-07', //14 热门留言卡
   Zh_Single_Column_08 = 'Zh_Single_Column-08', //12 问政提问卡
   Zh_Single_Column_10 = 'Zh_Single_Column-10', //18 服务组合卡
   Zh_Single_Column_11 = 'Zh_Single_Column-11', //19 问政组合卡
   Zh_Grid_Layout_01 =  'Zh_Grid_Layout-01', //4 信息流组合卡
-  Zh_Grid_Layout_02 = 'Zh_Grid_Layout-02', //7 双列流小视频,一行两图卡---1
-  Zh_Grid_Layout_03 = 'Zh_Grid_Layout-03', //11 金刚位卡---2
+  Zh_Grid_Layout_02 = 'Zh_Grid_Layout-02', //7 双列流小视频,一行两图卡
+  Zh_Grid_Layout_03 = 'Zh_Grid_Layout-03', //11 金刚位卡
   Card_01 = '1', // 小图卡
-  Card_02 = '2', // 大图卡---2
-  Card_03 = '3', // 无图卡(全标题)---2
-  Card_04 = '4', // 三图卡---2
-  Card_05 = '5', // 头图卡---2
-  Card_06 = '6', // 小视频卡---2
+  Card_02 = '2', // 大图卡
+  Card_03 = '3', // 无图卡(全标题)
+  Card_04 = '4', // 三图卡
+  Card_05 = '5', // 头图卡
+  Card_06 = '6', // 小视频卡
   Card_07 = '7', // 作者卡
   Card_08 = '8', // 财经快讯卡
-  Card_09 = '9', // 时间轴卡---2
-  Card_10 = '10', // 大专题卡---2
-  Card_11 = '11', // 无图卡(标题省略)---2
-  Card_12 = '12', // 无图卡人民号---1
-  Card_13 = '13', // 单图卡---2--同6
-  Card_14 = '14', // 单图卡人民号---1
-  Card_15 = '15', // 大图卡人民号---1
-  Card_16 = '16', // 三图卡人民号---1
-  Card_17 = '17', // 图卡集---2
+  Card_09 = '9', // 时间轴卡
+  Card_10 = '10', // 大专题卡
+  Card_11 = '11', // 无图卡(标题省略)
+  Card_12 = '12', // 无图卡人民号
+  Card_13 = '13', // 单图卡--同6
+  Card_14 = '14', // 单图卡人民号
+  Card_15 = '15', // 大图卡人民号
+  Card_16 = '16', // 三图卡人民号
+  Card_17 = '17', // 图卡集
   Card_18 = '18', // 图卡集人民号
-  Card_19 = '19', // 动态图文卡人民号---1
-  Card_20 = '20', // 动态视频卡人民号---1
-  Card_21 = '21', // 小视频卡人民号---1
+  Card_19 = '19', // 动态图文卡人民号
+  Card_20 = '20', // 动态视频卡人民号
+  Card_21 = '21', // 小视频卡人民号
   Card_22 = '22', // 时间链
   Card_23 = '23', // 问政卡
 }

@@ -7,7 +7,7 @@ export class Message {
   callbackId: string = ""; //callbackId
   responseId: string = ""; //responseId
   responseData: string = ""; //responseData
-  data?: Action; //data of message
+  data?: object; //data of message
   handlerName: string = ""; //name of handler
 
   /**

 import { Action } from '../bean/Action'
+import { Message } from '../bean/Message'
 
 /**
  * 注册回调接口
  */
 export type Callback = (data: string) => void
 
-export interface BridgeHandler  {
-  handle: (data: Action, f: Callback) => void
+export interface BridgeHandler {
+  handle: (data: Message, f: Callback) => void
 }
 
 export class DefaultBridgeHandler implements BridgeHandler {
-  handle(data: Action, f: Callback) {
+  handle(data: Message, f: Callback) {
     //1,2.3
     f("DefaultHandler response data")
   }

@@ -5,6 +5,9 @@ import { BridgeUtil } from '../utils/BridgeUtil';
 import { Message } from '../bean/Message';
 import { CallBackMessage } from '../bean/CallBackMessage';
 import { StringUtils } from '../utils/StringUtils';
+import hilog from '@ohos.hilog';
+
+// import { hilog } from '@kit.PerformanceAnalysisKit';
 
 const TAG = 'BridgeWebViewControl';
 
@@ -47,6 +50,7 @@ export class BridgeWebViewControl extends webview.WebviewController {
    * 刷新消息
    */
   flushMessageQueue() {
+    hilog.error(0xFF00, TAG, 'flushMessageQueue');
     this.loadUrlCustom(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, (data: string) => {
       let list: Array<Message> = JSON.parse(data)
       if (list == null || list.length == 0) {
@@ -66,11 +70,13 @@ export class BridgeWebViewControl extends webview.WebviewController {
         } else {
           let responseFunction: Callback;
           let callbackId: string = value.callbackId
+          let handlerName: string = value.handlerName
           if (StringUtils.isNotEmpty(callbackId)) {
             responseFunction = (data: string) => {
               let msg: CallBackMessage = new CallBackMessage()
               msg.responseId = callbackId
               msg.responseData = data
+              msg.handlerName = handlerName
               this.queueMessage(msg)
             }
           } else {
@@ -86,7 +92,7 @@ export class BridgeWebViewControl extends webview.WebviewController {
             handle = new DefaultBridgeHandler()
           }
           if (handle != undefined && value.data != undefined) {
-            handle.handle(value.data, responseFunction)
+            handle.handle(value, responseFunction)
           }
         }
       })
@@ -107,12 +113,15 @@ export class BridgeWebViewControl extends webview.WebviewController {
    */
   private dispatchMessage(msg: CallBackMessage) {
     let messageJson: string = msg.toJson()
+    hilog.error(0xFF00, TAG, 'dispatchMessage '+ messageJson);
     // messageJson = messageJson.replace("%7B", encodeURIComponent("%7B"));
     // messageJson = messageJson.replace("%7D", encodeURIComponent("%7D"));
     // messageJson = messageJson.replace("%22", encodeURIComponent("%22"));
 
     let javascriptCommand: string = StringUtils.formatStringForJS(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);
-    this.runJavaScript(javascriptCommand)
+    this.runJavaScript(javascriptCommand).then((res)=>{
+      hilog.error(0xFF00, TAG, 'dispatchMessage res: '+ res);
+    })
   }
 
   /**

@@ -36,4 +36,6 @@ export { UserDataLocal } from './src/main/ets/utils/UserDataLocal'
 
 export { NumberFormatterUtils } from './src/main/ets/utils/NumberFormatterUtils'
 
-// export { PermissionUtils } from './src/main/ets/utils/PermissionUtils'
\ No newline at end of file
+// export { PermissionUtils } from './src/main/ets/utils/PermissionUtils'
+
+export { ErrorToastUtils } from './src/main/ets/utils/ErrorToastUtils'
\ No newline at end of file

+import { cryptoFramework } from '@kit.CryptoArchitectureKit';
+import { util } from '@kit.ArkTS';
+
+const TAG: string = '[AesUtils]'
+/**
+ * ASE密钥 TODO 示例密钥，业务需要按实际密钥修改
+ */
+const AES_ENCRYPT_KEY: string = '5QXzAbJj0TJN9OQNvxFhhw==';
+const AES128: string = 'AES128';
+const AES128_ECB_PKCS5: string = 'AES128|ECB|PKCS5';  // 'AES128|PKCS5';
+
+/**
+ * AES加密/解密
+ */
+export class AesUtils {
+  static stringToUint8Array(str: string) {
+    let arr: number[] = new Array();
+    for (let i = 0, j = str.length; i < j; ++i) {
+      arr.push(str.charCodeAt(i));
+    }
+    let tmpArray = new Uint8Array(arr);
+    return tmpArray;
+  }
+
+  static uint8ArrayToString(array: Uint8Array): string {
+    let arrayString = '';
+    for (let i = 0; i < array.length; i++) {
+      arrayString += String.fromCharCode(array[i]);
+    }
+    return arrayString;
+  }
+
+  /**
+   * aes加密
+   * @param message
+   * @param callback
+   */
+  static async aesEncrypt(message: string, secretKey?: string): Promise<string> {
+    // Logger.debug(TAG, `aesEncrypt message: ${message}`);
+    // 组装convertKey所需的二进制密钥数据
+    let base64Helper = new util.Base64Helper();
+    let pubKey = base64Helper.decodeSync(secretKey ?? AES_ENCRYPT_KEY); // AES密钥
+    let pubKeyBlob: cryptoFramework.DataBlob = { data: pubKey };
+    // 创建对称密钥生成器
+    let aesGenerator = cryptoFramework.createSymKeyGenerator(AES128);
+    // 转换/生成对称密钥对象
+    let symKey: cryptoFramework.SymKey = await aesGenerator.convertKey(pubKeyBlob)
+    // 生成加解密生成器
+    let cipher = cryptoFramework.createCipher(AES128_ECB_PKCS5);
+    // 初始化加密
+    await cipher.init(cryptoFramework.CryptoMode.ENCRYPT_MODE, symKey, null)
+    // 封装加密所需数据
+    let input: cryptoFramework.DataBlob = { data: AesUtils.stringToUint8Array(message) };
+    // 当数据量较小时，可以在init完成后直接调用doFinal
+    // 当数据量较大时，可以多次调用update，即分段加解密。
+    let output: cryptoFramework.DataBlob = await cipher.doFinal(input)
+    // Logger.info(TAG, "aesEncrypt output.data is " + output.data);
+    let result = base64Helper.encodeToStringSync(output?.data)
+    // Logger.info(TAG, "aesEncrypt result is " + result);
+    return result;
+  }
+
+  /**
+   * aes解密
+   * @param message
+   * @param callback
+   */
+  static async aesDecrypt(message: string, secretKey?: string): Promise<string> {
+    // Logger.debug(TAG, `aesDecrypt message: ${message}`);
+    // 组装convertKey所需的二进制密钥数据
+    let base64Helper = new util.Base64Helper();
+    let pubKey = base64Helper.decodeSync(secretKey ?? AES_ENCRYPT_KEY); // AES密钥
+    let pubKeyBlob: cryptoFramework.DataBlob = { data: pubKey };
+    // 创建对称密钥生成器
+    let aesGenerator = cryptoFramework.createSymKeyGenerator(AES128);
+    // 转换/生成对称密钥对象
+    let symKey: cryptoFramework.SymKey = await aesGenerator.convertKey(pubKeyBlob)
+    //  生成加解密生成器
+    let cipher = cryptoFramework.createCipher(AES128_ECB_PKCS5);
+    // 初始化加密
+    await cipher.init(cryptoFramework.CryptoMode.DECRYPT_MODE, symKey, null)
+    // 封装加密所需数据
+    let newMessage = base64Helper.decodeSync(message);
+    let input: cryptoFramework.DataBlob = { data: newMessage };
+    // 当数据量较小时，可以在init完成后直接调用doFinal
+    // 当数据量较大时，可以多次调用update，即分段加解密。
+    let output: cryptoFramework.DataBlob = await cipher.doFinal(input)
+    // Logger.debug(TAG, "aesDecrypt is output.data " + output?.data);
+    let result = AesUtils.uint8ArrayToString(output?.data)
+    // Logger.debug(TAG, "aesDecrypt result is " + result);
+    return result
+  }
+}
\ No newline at end of file

@@ -25,11 +25,11 @@ export class CollectionUtils {
    * @returns  {boolean} true(empty)
    */
   static isEmpty(collection?: any[]): boolean {
-    return !collection || collection.length === 0;
+    return!collection || collection.length === 0;
   }
 
   static isEmptyList<T>(list1?: LinkList<T>): boolean {
-    return !list1 || list1.length === 0;
+    return!list1 || list1.length === 0;
   }
 
   static isEmptyHashMap(obj?: HashMap<any, any>): boolean {
@@ -186,5 +186,6 @@ export class CollectionUtils {
     ss;
     return collection.slice(start, end);
   }
+
 }
 

@@ -466,6 +466,20 @@ export class DateTimeUtils {
   static getLunar(_date?: string) {
     return getLunar(_date)
   }
+
+  /**
+   * 获取指定日期的时间戳
+   * @returns
+   */
+  static getDateTimestamp(date: string): number {
+    if (StringUtils.isEmpty(date))
+      return 0
+    try {
+      return new Date(date).getTime()
+    } catch (e) {
+      return 0
+    }
+  }
 }
 
 // const dateTimeUtils = new DateTimeUtils()
\ No newline at end of file

+import { ToastUtils } from './ToastUtils'
+
+export namespace ErrorToastUtils {
+  export enum ErrorType {
+    NET_CORE_NO_NETWORK, //当前无网络，请重试
+    NET_CORE_WEAK_NETWORK, //当前无网络，请重试
+    NET_CORE_PAGE_ERROR_NETWORK, //网络出小差了，请检查网络后重试
+    NET_CORE_LOAD_ERROR_NETWORK, //加载失败，请重试
+    NET_CORE_ENTER_ERROR_NETWORK, //很抱歉，当前内容无法加载，请点击重试
+    LIVE_CORE_NO_NETWORK, //网络出小差了，请检查下网络
+
+  }
+
+  export class ErrorToast {
+    static showToast(type: ErrorType) {
+      switch (type) {
+        case ErrorType.NET_CORE_NO_NETWORK:
+          ToastUtils.shortToast($r('app.string.net_core_no_network'))
+          break
+        case ErrorType.NET_CORE_WEAK_NETWORK:
+          ToastUtils.shortToast($r('app.string.net_core_no_network'))
+          break
+        case ErrorType.NET_CORE_PAGE_ERROR_NETWORK:
+          ToastUtils.shortToast($r('app.string.net_core_page_error_network'))
+          break
+        case ErrorType.NET_CORE_LOAD_ERROR_NETWORK:
+          ToastUtils.shortToast($r('app.string.net_core_load_fail_network'))
+          break
+        case ErrorType.NET_CORE_ENTER_ERROR_NETWORK:
+          ToastUtils.shortToast($r('app.string.net_core_enter_fail_network'))
+          break
+        case ErrorType.LIVE_CORE_NO_NETWORK:
+          ToastUtils.shortToast($r('app.string.live_core_no_network'))
+          break
+      }
+
+    }
+  }
+
+
+}
+

@@ -8,7 +8,7 @@ export class NumberFormatterUtils {
    */
   static formatNumberWithWan(inputNumber: number | String): string  {
     const num = typeof inputNumber === 'number' ? inputNumber : Number(inputNumber);
-    if (isNaN(num) || num < 10000) {
+    if (Number.isNaN(num) || num < 10000) {
       return num.toString();
     } else {
       const wanUnit = num / 10000;

@@ -15,15 +15,17 @@ export class Size {
 
 export class WindowModel {
   private windowStage?: window.WindowStage;
-
   static shared: WindowModel = new WindowModel()
-
   static TAG = "WindowModel";
 
   setWindowStage(windowStage: window.WindowStage) {
     this.windowStage = windowStage;
   }
 
+  getWindowStage(): window.WindowStage {
+    return this.windowStage as window.WindowStage
+  }
+
   setMainWindowFullScreen(fullScreen: boolean) {
     if (deviceInfo.deviceType != "phone") {
       return
@@ -65,10 +67,10 @@ export class WindowModel {
       windowClass.setWindowKeepScreenOn(isKeepScreenOn, (err: BusinessError) => {
         const errCode: number = err.code;
         if (errCode) {
-          console.error(WindowModel.TAG +'设置屏幕常亮：' + isKeepScreenOn + '，失败: ' + JSON.stringify(err));
+          console.error(WindowModel.TAG + '设置屏幕常亮：' + isKeepScreenOn + '，失败: ' + JSON.stringify(err));
           return;
         }
-        console.info(WindowModel.TAG +'设置屏幕常亮：' + isKeepScreenOn + "，成功");
+        console.info(WindowModel.TAG + '设置屏幕常亮：' + isKeepScreenOn + "，成功");
       })
     })
   }

@@ -3,6 +3,30 @@
     {
       "name": "shared_desc",
       "value": "全局工具包"
+    } ,
+    {
+      "name": "net_core_no_network",
+      "value": "当前无网络，请重试"
+    } ,
+    {
+      "name": "net_core_weak_network",
+      "value": "当前无网络，请重试"
+    } ,
+    {
+      "name": "net_core_page_error_network",
+      "value": "网络出小差了，请检查下网络"
+    },
+    {
+      "name": "net_core_load_fail_network",
+      "value": "加载失败，请重试"
+    },
+    {
+      "name": "net_core_enter_fail_network",
+      "value": "很抱歉，当前内容无法加载，请点击重试"
+    },
+    {
+      "name": "live_core_no_network",
+      "value": "网络出小差了，请检查下网络"
     }
   ]
 }
\ No newline at end of file

@@ -35,9 +35,9 @@ export class HttpUrlUtils {
    */
   static readonly COMP_PATH: string = "/api/rmrb-bff-display-zh/display/zh/c/compInfo";
   /**
-   * 推荐内容的展现comp接口
+   * 展现comp接口(推荐)
    */
-  static readonly HOTCOMP_PATH: string = "/api/rmrb-bff-display-zh/display/zh/c/rec/compInfo";
+  static readonly COMP_REC_PATH: string = "/api/rmrb-bff-display-zh/display/zh/c/rec/compInfo";
   /**
    * 详情页面详情接口
    */
@@ -188,6 +188,32 @@ export class HttpUrlUtils {
    * 搜索主页 热词
    */
   static readonly SEARCH_HOTS_DATA_PATH: string = "/api/rmrb-search-api/zh/c/hots";
+
+  /**
+   * 搜索联想词
+   */
+  static readonly RELATED_SEARCH_CONTENT_DATA_PATH: string = "/api/rmrb-search-api/zh/c/suggestions/";
+
+  /**
+   * 直播详情
+   */
+  static readonly LIVE_DETAILS_PATH: string = "/api/rmrb-bff-display-zh/content/zh/c/content/detail";
+
+  /**
+   * 直播详情-直播间列表
+   */
+  static readonly LIVE_LIST_PATH: string = "/api/live-center-message/zh/a/live/message/video/list";
+
+  /**
+   * 直播详情-大家聊列表
+   */
+  static readonly LIVE_CHAT_LIST_PATH: string = "/api/live-center-message/zh/a/live/message/chat/list";
+  /**
+
+   * 搜索结果 显示tab 数
+   */
+  static readonly SEARCH_RESULT_COUNT_DATA_PATH: string = "/api/rmrb-search-api/zh/c/count?keyword=";
+
   /**
    * 早晚报列表
    * 根据页面id获取页面楼层列表
@@ -199,7 +225,19 @@ export class HttpUrlUtils {
    * */
   static readonly MORNING_EVENING_PAGE_INFO_PATH: string = "/api/rmrb-bff-display-zh/display/zh/c/pageInfo";
   static readonly MORNING_EVENING_COMP_INFO_PATH: string = "/api/rmrb-bff-display-zh/display/zh/c/compInfo";
+  /**
+   * 直播回顾
+   * */
+  static readonly LIVE_REVIEW_PATH: string = "/api/rmrb-bff-display-zh/display/zh/c/channel/live/reviewList"; //?pageNum=1&pageSize=20
+  /**
+   * 早晚报获取PAGEID
+   * */
+  static readonly DAILY_PAPER_TOPIC: string = "/api/rmrb-bff-display-zh/display/zh/c/dailyPaperTopic";
   private static _hostUrl: string = HttpUrlUtils.HOST_PRODUCT;
+  /**
+   * 推荐列表
+   */
+  static readonly RECOMMEND_LIST: string = "/api/rmrb-bff-display-zh/recommend/zh/c/list";
 
   public static set hostUrl(value: string) {
     HttpUrlUtils._hostUrl = value;
@@ -439,6 +477,7 @@ export class HttpUrlUtils {
     let url = HttpUrlUtils._hostUrl + "/api/rmrb-user-center/auth/zh/c/checkVerifyCode";
     return url;
   }
+
   static getAgreement() {
     let url = HttpUrlUtils._hostUrl + "/api/rmrb-bff-display-zh/display/zh/c/agreement";
     return url;
@@ -449,6 +488,18 @@ export class HttpUrlUtils {
     return url;
   }
 
+  //账户注销
+  static accountLogoutUrl() {
+    let url = HttpUrlUtils._hostUrl + "/api/rmrb-user-center/user/zh/c/logoff";
+    return url;
+  }
+
+  //更换手机号绑定
+  static changeBindPhone() {
+    let url = HttpUrlUtils._hostUrl + "/api/rmrb-user-center/user/zh/c/userPhoneChange";
+    return url;
+  }
+
   static getAppointmentListDataUrl() {
     let url = HttpUrlUtils._hostUrl + HttpUrlUtils.APPOINTMENT_LIST_DATA_PATH
     return url
@@ -549,7 +600,30 @@ export class HttpUrlUtils {
     return url
   }
 
+  static getRelatedSearchContentDataUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.RELATED_SEARCH_CONTENT_DATA_PATH
+    return url
+  }
 
+  static getLiveDetailsUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_DETAILS_PATH
+    return url
+  }
+
+  static getLiveListUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_LIST_PATH
+    return url
+  }
+
+  static getLiveChatListUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_CHAT_LIST_PATH
+    return url
+  }
+
+  static getSearchResultCountDataUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.SEARCH_RESULT_COUNT_DATA_PATH
+    return url
+  }
 
   // static getYcgCommonHeaders(): HashMap<string, string> {
   //   let headers: HashMap<string, string> = new HashMap<string, string>()

@@ -49,10 +49,9 @@ export function registerRouter() {
   // })
 
   Action2Page.register("JUMP_DETAIL_PAGE", (action: Action) => {
-    // if (action.params?.detailPageType == 2 || action.params?.detailPageType == 6) {
-    //   return WDRouterPage.detailPlayLivePage
-    // }
-    if (action.params?.detailPageType == 7 || action.params?.detailPageType == 8) {
+    if (action.params?.detailPageType == 2 || action.params?.detailPageType == 6) {
+      return WDRouterPage.detailPlayLivePage
+    } else if (action.params?.detailPageType == 7 || action.params?.detailPageType == 8) {
       return WDRouterPage.detailVideoListPage
     } else if (action.params?.detailPageType == 17) {
       return WDRouterPage.multiPictureDetailPage
@@ -75,8 +74,6 @@ export function registerRouter() {
       return WDRouterPage.imageTextDetailPage
     } else if (action.params?.pageID == "BroadcastPage") {
       return WDRouterPage.broadcastPage
-    } else if (action.params?.pageID == "LIVE_DETAILS_PAGER") {
-      return WDRouterPage.detailPlayLivePage
     }
     return undefined
   })

@@ -9,7 +9,7 @@ export class WDRouterPage {
     this.pagePath = pagePath
   }
 
-  static getBundleInfo(){
+  static getBundleInfo() {
     let bundleInfo = bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT)
     return `@bundle:${bundleInfo.name}/${"phone"}/${"ets/pages/MainPage"}`
   }
@@ -35,6 +35,8 @@ export class WDRouterPage {
   // 短视频详情页
   static detailVideoListPage = new WDRouterPage("wdDetailPlayShortVideo", "ets/pages/DetailVideoListPage");
   static detailPlayShortVideoPage = new WDRouterPage("wdDetailPlayShortVideo", "ets/pages/DetailPlayShortVideoPage");
+  static VideoChannelDetail = new WDRouterPage("wdDetailPlayShortVideo", "ets/pages/VideoChannelDetail");
+  static LottieViewDemo = new WDRouterPage("wdDetailPlayShortVideo", "ets/pages/LottieViewDemo");
   // 点播详情页
   static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage");
   // 直播详情页
@@ -68,20 +70,19 @@ export class WDRouterPage {
   static aboutPage = new WDRouterPage("wdComponent", "ets/components/page/SettingAboutPage");
   // 设置页
   static settingPage = new WDRouterPage("wdComponent", "ets/components/page/SettingPage");
+  // 设置页
+  static logoutPage = new WDRouterPage("wdComponent", "ets/components/setting/LogoutPage");
   // 设置密码页、设置手机号页等等 (需要传参)
   static settingPasswordPage = new WDRouterPage("wdLogin", "ets/pages/login/SettingPasswordPage");
   //其他普通用户 主页
   static otherNormalUserHomePagePage = new WDRouterPage("wdComponent", "ets/pages/OtherNormalUserHomePage");
   static guidePage = new WDRouterPage("wdLogin", "ets/pages/guide/GuidePages");
-
   //隐私政策页面
   static privacyPage = new WDRouterPage("phone", "ets/pages/launchPage/PrivacyPage");
   //启动广告页面
   static launchAdvertisingPage = new WDRouterPage("phone", "ets/pages/launchPage/LaunchAdvertisingPage");
   //主页
   static mainPage = new WDRouterPage("phone", "ets/pages/MainPage");
-
-
   // static loginProtocolPage = new WDRouterPage("wdLogin", "ets/pages/login/LoginProtocolWebview");
 
   //播报页面

+/**
+ * h5调用native，事件id枚举，
+ * h5主动调用app方法
+ */
+export class H5CallNativeType {
+  static JsCallTypeList: string[] = []
+  static jsCall_currentPageOperate = 'jsCall_currentPageOperate'
+  static jsCall_getAppPublicInfo = 'jsCall_getAppPublicInfo'
+  static jsCall_getArticleDetailBussinessData = 'jsCall_getArticleDetailBussinessData'
+  static jsCall_callAppService = 'jsCall_callAppService'
+  // TODO 业务自行新增类型、自行在JsBridgeBiz#performJSCallNative里添加接收分支处理。
+
+  static init() {
+    H5CallNativeType.JsCallTypeList.push(H5CallNativeType.jsCall_currentPageOperate)
+    H5CallNativeType.JsCallTypeList.push(H5CallNativeType.jsCall_getAppPublicInfo)
+    H5CallNativeType.JsCallTypeList.push(H5CallNativeType.jsCall_getArticleDetailBussinessData)
+    H5CallNativeType.JsCallTypeList.push(H5CallNativeType.jsCall_callAppService)
+  }
+}
+
+

-import { Action } from 'wdBean';
-import { Callback } from 'wdJsBridge';
+import { Callback, BridgeWebViewControl } from 'wdJsBridge';
+import { Message } from 'wdJsBridge/src/main/ets/bean/Message';
 import { Logger, StringUtils, } from 'wdKit';
-// import { AccountManagerUtils, ILoginService, Logger, ServiceManager, StringUtils, UserBean, UserInfo } from 'wdKit';
-import { WDRouterPage, WDRouterRule } from 'wdRouter';
+import { H5CallNativeType } from './H5CallNativeType';
 
-// import { wdMenc } from 'wdMenc';
+const TAG = 'JsBridgeBiz'
 
 /**
  * h5调用native代码
  * @param data
  * @param call
  */
-export function performJSCallNative(data: Action, call: Callback) {
-
-  // if (data.name == "GET_PROMOTION_SIGN") {
-  //   wdMenc.getActivitySign(data.params?.intfId, (sign) => {
-  //     if (sign)  {
-  //       call(JSON.stringify(sign));
-  //     } else {
-  //       call("")
-  //     }
-  //   })
-  //   return
-  // }
-
-  //TODO 数据校验
-  switch (data.type) {
-  //获取用户信息
-    case "GET_USER_INFO":
-    //测试环境
-    //   call(JSON.stringify(getTestUserBean()))
-    //   let isLogin = AccountManagerUtils.isLoginSync()
-    //   Logger.info("WebComponent", `GET_USER_INFO#:::refresh==` + isLogin);
-    //
-    //   if (isLogin) {
-    //     const loginService = ServiceManager.getService(ILoginService.name) as ILoginService.Service
-    //     let userBean: UserBean = loginService.getUserBean()
-    //     // userBean.userInfo = JSON.stringify(loginService.getUserInfo())
-    //     call(JSON.stringify(userBean))
-    //   } else {
-    //     call("fail")
-    //   }
-
+export function performJSCallNative(data: Message, call: Callback) {
+  Logger.debug(TAG, 'performJSCallNative handlerName: ' + data.handlerName + ', data: ' + data.data)
+  switch (data.handlerName) {
+    case H5CallNativeType.jsCall_currentPageOperate:
+      break;
+    case H5CallNativeType.jsCall_getAppPublicInfo:
+    // h5获取app配置信息
+      call(getAppPublicInfo())
+      break;
+    case H5CallNativeType.jsCall_getArticleDetailBussinessData:
+      break;
+    case H5CallNativeType.jsCall_callAppService:
       break;
-    case "JUMP_DETAIL_PAGE":
-      WDRouterRule.jumpWithAction(data)
+    case 'changeNativeMessage':
+      call("this is change Web Message")
       break;
-    case "JUMP_INNER_NEW_PAGE":
-      WDRouterRule.jumpWithAction(data)
-      break
-    case "GET_DEVICE_DATA":
-      break
-  //用户登陆
-    case "USER_LOGIN":
-      WDRouterRule.jumpWithAction(data)
-  //支付完成回调
-    case "REGISTER_H5_WEBVIEW_CREATE_ORDER_RESULT":
-      break
-  //打开H5页面
-    case "JUMP_H5_BY_WEB_VIEW":
-      WDRouterRule.jumpWithAction(data)
-      break
-    case "USER_LOGOUT":
-      // const loginService = ServiceManager.getService(ILoginService.name) as ILoginService.Service
-      // loginService.logout()
-      break
     default:
       call("this is def value")
   }
 
 }
 
-// /**
-//  *
-//  * @returns 模拟测试环境的user信息
-//  */
-// function getTestUserBean(): UserBean {
-//   const loginService = ServiceManager.getService(ILoginService.name) as ILoginService.Service
-//   //正是环境
-//   let userBean: UserBean = loginService.getUserBean()
-//   userBean.userId = "930855275"
-//   userBean.userToken = "nlps6FADECE38F5AAD2116F2"
-//   // userBean.clientId = "f1bf515c-4006-4606-a752-2b4cdd9343d0"
-//   // userBean.carrierCode = "CM"
-//   userBean.mobile = "NTTrcDO4ADN1cTM5MTM"
-//   userBean.uname = '139****0887'
-//   userBean.picture = "http://36.155.98.104:23380/publish/voms2/uic_service/picture/userImage/543/626/5181.jpg"
-//   // userBean.ssotoken = "STnid0000011700463753943SKPUlfNxEDJsrauGjCwUldiDfrd0mUuM"
-//   // userBean.clientProvinceCode = "210"
-//   // userBean.clientCityId = "0210"
-//   // userBean.sign = "617DAC548595B7C9EBB13043735F1BE0"
-//   // userBean.blurMobile = "177****9217"
-//   let userinfo: UserInfo = ({
-//     userId: "930855275",
-//     userNum: "NzDrsyN4gDM0UzNxkzMxYDO",
-//     mobile: "NTTrcDO4ADN1cTM5MTM",
-//     areaId: "210",
-//     cityId: "0210",
-//     carrierCode: "CM",
-//     passId: "602201990200225921",
-//     userToken: "nlps6FADECE38F5AAD2116F2",
-//     expiredOn: "1705647754000",
-//     blurMobile: "139****0887",
-//     encrypted: true
-//   })
-//   // userBean.userInfo = JSON.stringify(userinfo);
-//   return userBean
-// }
-//
-// /**
-//  *
-//  * @returns 用户信息
-//  */
-// function getUserBean(): UserBean {
-//   const loginService = ServiceManager.getService(ILoginService.name) as ILoginService.Service
-//   //正是环境
-//   let userBean: UserBean = loginService.getUserBean()
-//   userBean.userId = "1437725487"
-//   userBean.userToken = "nlps08468E117C554CA08A43"
-//   // userBean.clientId = "27fb3129-5a54-45bc-8af1-7dc8f1155501"
-//   // userBean.carrierCode = "CT"
-//   userBean.mobile = "OTTrcTMykTO4ATM3cTM"
-//   userBean.uname = '小可爱啊'
-//   userBean.picture = "http://img.cmvideo.cn:8080/publish/voms2/uic_service/picture/userImage/1437/725/487/20211224174128beax.png"
-//   // userBean.ssotoken = "STnid0000011700461738301N5rjsHdbvyzMpyzwvHrFRJsj7oNT1Juf"
-//   // userBean.clientProvinceCode = "100"
-//   // userBean.clientCityId = "0100"
-//   // userBean.sign = "4ABFB8442EE914B57CCD9F1DE587D96D"
-//   // userBean.blurMobile = "177****9217"
-//   let userinfo: UserInfo = ({
-//     userId: "1437725487",
-//     userNum: "MzDrsyNxITO5gDMxczNxYDO",
-//     mobile: "OTTrcTMykTO4ATM3cTM",
-//     areaId: "100",
-//     cityId: "0100",
-//     carrierCode: "CT",
-//     passId: "467464726359024540",
-//     userToken: "nlps08468E117C554CA08A43",
-//     expiredOn: "1705645738000",
-//     blurMobile: "177****9217",
-//     encrypted: true
-//   })
-//   // userBean.userInfo = JSON.stringify(userinfo);
-//   return userBean
-// }
+class AppInfo {
+  plat: string = ''
+  system: string = ''
+  // TODO 完善
+}
+
+/**
+ * 获取App公共信息
+ */
+function getAppPublicInfo(): string {
+  let info = new AppInfo()
+  info.plat = 'Phone'
+  // 直接用Android，后续适配再新增鸿蒙
+  info.system = 'Android'
+  let result = JSON.stringify(info)
+  return result;
+}
 
 

+/**
+ * native调用h5，事件id枚举
+ * app主动调用h5方法
+ */
+export const enum NativeCallH5Type {
+  jsCall_receiveAppData = 'jsCall_receiveAppData',
+  // TODO 业务自行新增类型，自行调用,例：
+  // TODO this.webviewControl.callHandle(NativeCallH5Type.jsCall_receiveAppData,xxxx)
+
+}
+
+

@@ -5,6 +5,7 @@ import { Logger } from 'wdKit';
 import { BridgeHandler, BridgeUtil, BridgeWebViewControl, Callback } from 'wdJsBridge';
 import { performJSCallNative } from './JsBridgeBiz';
 import { setDefaultNativeWebSettings } from './WebComponentUtil';
+import { Message } from 'wdJsBridge/src/main/ets/bean/Message';
 
 const TAG = 'WdWebComponent';
 
@@ -12,7 +13,7 @@ const TAG = 'WdWebComponent';
 export struct WdWebComponent {
   private webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
   //TODO 默认网页
-  webUrl: string = ConfigConstants.DETAIL_URL
+  webUrl: string | Resource = ConfigConstants.DETAIL_URL
   /**
    * 对外暴露webview的回调，能力
    */
@@ -30,7 +31,7 @@ export struct WdWebComponent {
   /**
    * 默认【CallNative】逻辑处理
    */
-  private defaultPerformJSCallNative: (data: Action, f: Callback) => void = (data: Action, f: Callback) => {
+  private defaultPerformJSCallNative: (data: Message, f: Callback) => void = (data: Message, f: Callback) => {
     performJSCallNative(data, f)
   }
   /**
@@ -41,7 +42,7 @@ export struct WdWebComponent {
 
   defaultRegisterHandler(): void {
     this.webviewControl.registerHandler("CallNative", {
-      handle: (data: Action, f: Callback) => {
+      handle: (data: Message, f: Callback) => {
         this.defaultPerformJSCallNative(data, f)
       }
     });
@@ -88,7 +89,7 @@ export struct WdWebComponent {
           //   },500)
           // })
           // this.onPageBegin(event?.url)
-          this.webviewControl?.setCustomUserAgent('Mozilla/5.0 (Linux; Android 12; HarmonyOS; OXF-AN00; HMSCore 6.13.0.302) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.88 HuaweiBrowser/14.0.6.300 Mobile Safari/537.36')
+          // this.webviewControl?.setCustomUserAgent('Mozilla/5.0 (Linux; Android 12; HarmonyOS; OXF-AN00; HMSCore 6.13.0.302) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.88 HuaweiBrowser/14.0.6.300 Mobile Safari/537.36')
         })
         .onLoadIntercept((event) => {
           let url: string = event.data.getRequestUrl().toString()

 import router from '@ohos.router';
-import { BridgeUtil, BridgeWebViewControl } from 'wdJsBridge';
-import { ResourceManager } from 'wdJsBridge/src/main/ets/utils/ResourceManager';
+import { BridgeHandler, BridgeUtil, BridgeWebViewControl, Callback } from 'wdJsBridge';
+import { Logger } from 'wdKit/Index';
+import { setDefaultNativeWebSettings } from './WebComponentUtil';
+import { Action } from 'wdBean';
+import { performJSCallNative } from './JsBridgeBiz';
+import { H5CallNativeType } from './H5CallNativeType';
+import { Message } from 'wdJsBridge/src/main/ets/bean/Message';
 
 const TAG = 'WdWebLocalComponent';
 
@@ -26,12 +31,34 @@ export struct WdWebLocalComponent {
       .visibility(this.backVisibility ? Visibility.Visible : Visibility.None)
 
       Web({ src: this.webResource, controller: this.webviewControl })
+        .layoutMode(WebLayoutMode.FIT_CONTENT)
         .domStorageAccess(true)
         .databaseAccess(true)
         .javaScriptAccess(true)
+        // .imageAccess(true)
+        // .onlineImageAccess(true)
+        // .fileAccess(true)
         .onPageBegin((event) => {
 
-          })
+          // setDefaultNativeWebSettings(this.webviewControl, this.webResource).then(()=>{
+          //   this.handleInfo && this.handleInfo.length > 1 ? this.handleInfo.forEach(value => {
+          //     this.webviewControl.registerHandler(value[0], value[1])
+          //   }) : this.defaultRegisterHandler()
+          //   setTimeout(()=>{
+          //     BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)
+          //   },500)
+          // })
+          // this.onPageBegin(event?.url)
+          // BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl);
+          this.onPageBegin(event?.url);
+          this.registerHandlers();
+          setTimeout(() => {
+            BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)
+          }, 200)
+        })
+        .onPageEnd((event) => {
+          this.onPageEnd(event?.url)
+        })
         .onLoadIntercept((event) => {
           let url: string = event.data.getRequestUrl().toString()
           url = url.replace("%(?![0-9a-fA-F]{2})", "%25")
@@ -42,12 +69,50 @@ export struct WdWebLocalComponent {
             return true
           }
           if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) {
+            Logger.debug(TAG, 'flushMessageQueue');
             this.webviewControl.flushMessageQueue()
             return true
           }
-          return false
+          return this.onLoadIntercept(event.data.getRequestUrl().toString());
         })
     }
   }
+
+  private registerHandlers(): void {
+    // TODO 待优化
+    H5CallNativeType.init();
+    // 注册h5调用js相关
+    for (let i = 0; i < H5CallNativeType.JsCallTypeList.length; i++) {
+      let handleName = H5CallNativeType.JsCallTypeList[i];
+      let handle = (data: Message, f: Callback) => {
+        this.defaultPerformJSCallNative(data, f)
+      } ;
+      this.webviewControl.registerHandler(handleName, { handle: handle });
+    }
+    // // TODO test
+    // this.webviewControl.registerHandler('changeNativeMessage', {
+    //   handle: (data: Message, f: Callback) => {
+    //     this.defaultPerformJSCallNative(data, f)
+    //   }
+    // });
+
+  }
+
+  /**
+   * 默认【CallNative】逻辑处理
+   */
+  private defaultPerformJSCallNative: (data: Message, f: Callback) => void = (data: Message, f: Callback) => {
+    performJSCallNative(data, f)
+  }
+  onPageBegin: (url?: string) => void = () => {
+    Logger.debug(TAG, 'onPageBegin');
+  }
+  onPageEnd: (url?: string) => void = () => {
+    Logger.debug(TAG, 'onPageEnd');
+  }
+  onLoadIntercept: (url?: string) => boolean = () => {
+    Logger.debug(TAG, 'onPageBegin return false');
+    return false
+  }
 }
 

@@ -36,7 +36,8 @@ export {
   postExecuteLikeParams,
   postExecuteCollectRecordParams,
   contentListParams,
-  postInteractAccentionOperateParams
+  postInteractAccentionOperateParams,
+  postRecommendListParams
 } from './src/main/ets/bean/detail/MultiPictureDetailPageDTO';
 
 export { InteractParam, ContentBean } from './src/main/ets/bean/content/InteractParam';
@@ -51,6 +52,8 @@ export { GroupDTO } from './src/main/ets/bean/component/GroupDTO';
 
 export { CompDTO } from './src/main/ets/bean/component/CompDTO';
 
+export { LiveReviewDTO } from './src/main/ets/bean/component/LiveReviewDTO';
+
 export { NewspaperListBean } from './src/main/ets/bean/newspaper/NewspaperListBean';
 
 export { NewspaperListItemBean } from './src/main/ets/bean/newspaper/NewspaperListItemBean';
@@ -79,6 +82,8 @@ export { ShareInfoDTO } from './src/main/ets/bean/detail/ShareInfoDTO';
 
 export { VideoInfoDTO } from './src/main/ets/bean/detail/VideoInfoDTO';
 
+export { AttentionRmhInfoDTO } from './src/main/ets/bean/detail/AttentionRmhInfoDTO';
+
 export { H5ReceiveDetailBean } from './src/main/ets/bean/h5/H5ReceiveDetailBean';
 
 export { H5ReceiveDataJsonBean } from './src/main/ets/bean/h5/H5ReceiveDataJsonBean';
@@ -105,4 +110,13 @@ export { OperDataList } from './src/main/ets/bean/morningevening/OperDataList';
 
 export { ShareInfo } from './src/main/ets/bean/morningevening/ShareInfo';
 
-export { slideShows } from './src/main/ets/bean/morningevening/slideShows';
\ No newline at end of file
+export { slideShows } from './src/main/ets/bean/morningevening/slideShows';
+
+export { LiveDetailsBean } from './src/main/ets/bean/live/LiveDetailsBean';
+
+export { ArticleListDTO } from './src/main/ets/bean/component/ArticleListDTO';
+
+export { appStyleImagesDTO } from './src/main/ets/bean/content/appStyleImagesDTO';
+
+export { LiveRoomBean,LiveRoomItemBean } from './src/main/ets/bean/live/LiveRoomBean';
+

+/**
+ * http://192.168.1.3:3300/project/3856/interface/api/190567
+ * 接口名称：客户端 客态主页页面-获取作品-从发布库获取该创作者下 稿件列表
+ * 接口路径：GET/zh/c/article/articleList
+ * 人民号-动态tab下列表数据
+ */
+import { appStyleImagesDTO } from '../content/appStyleImagesDTO'
+import {contentVideosDTO} from '../content/contentVideosDTO'
+export interface ArticleListDTO {
+  listTitle: string;
+  mainPicCount: string;
+  videosCount: string;
+  voicesCount: string;
+  landscape: number;
+  sourceName: string;
+  finalStatus: string;
+  score: string;
+  shareUrl: string;
+  sortPosId: string;
+  id: string;
+  serialsId: string;
+  oldContentId: string;
+  type: string;
+  tenancy: string;
+  clientPubFlag: string;
+  grayScale: string;
+  title: string
+  publishType: string;
+  publishTime: string;
+  firstPublishTime: string;
+  onlineStatus: string;
+  auditingStatus: string;
+  zhOnlineStatus: string;
+  zhAuditingStatus: string;
+  selectedStatus: string;
+  qualityScore: string;
+  levelScore: number;
+  isOrg: string;
+  articlePayment: number;
+  appStyle: number;
+  appStyleImages: appStyleImagesDTO[];
+  description: string;
+  introduction: string;
+  deleted: string;
+  keyArticle: string;
+  updateTime: string;
+  createTime: string;
+  createUserId: string;
+  createUserName: string;
+  creatorId: number;
+  creatorName: string;
+  articleExistVote: string;
+  rmhPlatform: string;
+  objectPos: string;
+  objectPosPictures: string;
+  shareFlag: string;
+  firstPublish: string;
+  readNum: string;
+  readFlag: string;
+  creatorLevel: string;
+  creatorTag: string;
+  joinActivity: string;
+  userType: string;
+  content: object;
+  contentShare: [];
+  contentLinkData: string;
+  contentExt: [];
+  contentVideos: contentVideosDTO[];
+  contentPictures: [];
+  contentPayments: string;
+  contentPaymentStaffs: string;
+  contentTxt: [];
+  contentSource: object;
+  contentTags: string;
+  contentVoices: string;
+  contentAuthorLocals: string;
+  contentEpaperArticle: string;
+  contentStatistics: string;
+  topicExistHeadImage: string;
+  topicComps: string;
+  live: string;
+  statusInfo: string;
+  askInfo: string;
+  askAttachmentList: string;
+  askAnswerList: string;
+  askFeedbackList: string;
+  ttopicInteracts: string;
+  ttopic: string;
+  mlive: string;
+  vlives: string
+}
\ No newline at end of file

+import { ContentDTO } from '../content/ContentDTO';
+
+export interface LiveReviewDTO {
+  hasNext: boolean;
+  pageNum: number;
+  pageSize: number;
+  totalCount: number;
+  list: ContentDTO[];
+}
\ No newline at end of file

@@ -4,7 +4,7 @@ import { VideoInfoDTO } from '../detail/VideoInfoDTO';
 import { InteractDataDTO } from './InteractDataDTO';
 import { slideShows } from '../morningevening/slideShows';
 import { VoiceInfoDTO } from '../detail/VoiceInfoDTO';
-
+import { RmhInfoDTO } from '../detail/RmhInfoDTO'
 export interface ContentDTO {
   appStyle: string;
   cityCode: string;
@@ -67,4 +67,8 @@ export interface ContentDTO {
   voiceInfo: VoiceInfoDTO,
   tagWord: number,
   isSelect: boolean;
+  rmhInfo: RmhInfoDTO; // 人民号信息
+  photoNum: number;
+
+
 }
\ No newline at end of file

+export interface appStyleImagesDTO {
+  url: string;
+  bucket: string;
+  landscape: number;
+  sort: number;
+  height: number;
+  weight: number;
+  size: number;
+  format: number;
+  fullUrl: string
+}
\ No newline at end of file

+export interface contentVideosDTO {
+  id: number;
+  contentId: number;
+  ossVideoId: string;
+  url: string;
+  fullUrl: string;
+  bucket: string;
+  duration: number;
+  clarity: number;
+  resolutionWidth: number;
+  resolutionHeight: number;
+  type: number;
+  original: number;
+  originalVideoId: string;
+  landscape: number;
+  size: number;
+  templateId: string;
+  deleted: number;
+  coverPictureId: string;
+  framePictureId: string;
+  createUser: string;
+  createTime: string;
+  updateUser: string;
+  updateTime: string;
+  bak1: string;
+  bak2: string;
+  bak3: string;
+  bak4: string;
+  videoType: number;
+  objectPosId: string;
+}
\ No newline at end of file

+export interface AttentionRmhInfoDTO {
+  attentionCreatorId: string;
+  attentionHeadPhotoUrl: string;
+  attentionNum: number;
+  attentionUserId: string;
+  attentionUserName: string;
+  attentionUserType: number;
+  authIcon: string;
+  authId: number;
+  authPersional: string;
+  authTitle: string;
+  banControl: number;
+  categoryAuth: string;
+  cnLiveCommentControl: number;
+  cnLiveGiftControl: number;
+  cnLiveLikeControl: number;
+  cnLiveShareControl: number;
+  cnShareControl: number;
+  collectNum: number;
+  commentNum: number;
+  createTime: number;
+  fansNum: number;
+  honoraryIcon: string;
+  honoraryTitle: string;
+  id: number;
+  introduction: string;
+  isAttention: number | null;
+  isComment: number;
+  isLike: number;
+  isVisiable: number;
+  likeNum: number;
+  liveCommentControl: number;
+  liveGiftControl: number;
+  liveLikeControl: number;
+  liveShareControl: number;
+  mainControl: number;
+  posterShareControl: number;
+  registTime: number;
+  shareControl: number;
+  shareNum: number;
+  status: number;
+  subjectType: string;
+  updateTime: number;
+  userId: string;
+  userType: number
+}

@@ -3,6 +3,7 @@ export interface FullColumnImgUrlDTO {
   height: number;
   landscape: number;
   size: number | null;
-  url: string;
+  url: string; // 图片地址--列表显示
   weight: number;
+  fullUrl: string; // 图片地址--预览地址使用；【人民号动态卡预览】
 }

@@ -177,4 +177,14 @@ export interface postInteractAccentionOperateParams {
   // userType: number;
   // userId: string;
   status: number;
+}
+
+export interface postRecommendListParams {
+  imei: string;
+  userId ?: string;
+  contentId ?: string;
+  relId ?: string;
+  contentType ?: number;
+  recType: number;
+  channelId ? : string
 }
\ No newline at end of file

@@ -3,11 +3,11 @@ export interface RmhInfoDTO {
   authTitle: string;
   authTitle2: string;
   banControl: number;
-  cnAttention: number;
+  cnIsAttention: number;
   cnMainControl: number;
   cnShareControl: number;
-  cnlsComment: number;
-  cnlsLike: number;
+  cnIsComment: number;
+  cnIsLike: number;
   posterShareControl: number;
   rmhDesc: string;
   rmhHeadUrl: string;

@@ -4,6 +4,7 @@ export interface VideoInfoDTO {
   resolutionWidth: number;
   videoDuration: number; // 视频时长
   videoLandScape: number; // 1横屏 2竖屏
+  videoLandscape: number; // 1横屏 2竖屏
   videoType: number;
   videoUrl: string; //视频播放地址
   firstFrameImageUri: string; // 首帧图；【视频内容，contentPictures中】

@@ -10,7 +10,7 @@ export interface ResponseBean{
   message: string;
 
   // 响应结果
-  data:ContentDetailDTO;
+  data:ContentDetailDTO[];
 
   // 请求响应时间戳（unix格式）
   timestamp?: number;

+export interface LiveDetailsBean {
+  /**
+   * {
+   "code": "0",
+   "data": [
+   {
+   "activityInfos": [],
+   "appstyle": 2,
+   "audioList": [],
+   "authorList": [
+   {
+   "authorName": "雷崔捷"
+   }
+   ],
+   "bestNoticer": null,
+   "commentDisplay": 0,
+   "editorName": "",
+   "firstFrameImageUri": "",
+   "fullColumnImgUrls": [
+   {
+   "format": null,
+   "height": null,
+   "landscape": null,
+   "size": null,
+   "url": "https://rmrbcmsonline.peopleapp.com/upload/image/202404/rmrb_71671711971849.png",
+   "weight": null
+   }
+   ],
+   "hasPopUp": null,
+   "isNewspaper": false,
+   "itemId": "",
+   "itemTypeCode": "",
+   "keyArticle": 0,
+   "likesStyle": null,
+   "liveInfo": {
+   "background": {
+   "imageUrl": "",
+   "name": ""
+   },
+   "backgroundStyle": null,
+   "cornerFlag": 0,
+   "cornerImgUrl": "",
+   "cornerLinkUrl": "",
+   "createUserId": "",
+   "createUserName": "",
+   "endTime": "2024-04-03 11:08:00",
+   "handAngleImageUri": "",
+   "handAngleLink": "",
+   "handAngleSwitch": false,
+   "likeEnable": 1,
+   "likesStyle": "thumb",
+   "liveExperience": 1,
+   "liveExperienceTime": 3,
+   "liveLandScape": "news",
+   "liveState": "end",
+   "liveStyle": 0,
+   "liveWay": 0,
+   "mlive": {
+   "barrageShowEnable": false,
+   "giftEnable": false,
+   "mliveId": 20000016257,
+   "roomId": "5381b934-cea8-4338-bd12-5bf70af43e0c"
+   },
+   "notice": "",
+   "openComment": 1,
+   "padImageUri": "",
+   "planStartTime": "2024-04-03 05:00:00",
+   "playbackSwitch": true,
+   "preCommentFlag": 1,
+   "previewType": 1,
+   "previewUrl": "",
+   "shareSwitch": "",
+   "startTime": "2024-04-03 05:03:23",
+   "tplId": 5,
+   "vlive": [
+   {
+   "coverImageUrl": "",
+   "definition": [],
+   "liveStreamManagerId": null,
+   "liveStreamType": 1,
+   "liveUrl": "https://plwbthird.live.weibo.com/alicdn/5018938748437049.m3u8",
+   "name": "线路1",
+   "replayUri": "http://mlive3.video.weibocdn.com/record/alicdn/5018726527666338/index.m3u8",
+   "serialNum": null,
+   "shiftEnable": false,
+   "showPad": false,
+   "type": "play",
+   "vliveId": 186728
+   }
+   ],
+   "vrType": 0
+   },
+   "menuShow": 1,
+   "newIntroduction": "眼前有山河，心中有家国！每年清明节前夕，宁夏固原市第二中学和固原市弘文中学会组织入学新生，一天之内徒步54公里从学校往返任山河烈士陵园，用这种方式缅怀烈士们，这份坚定与执着已经延续了29年。",
+   "newLinkObject": null,
+   "newsBodyTitle": "",
+   "newsContent": "",
+   "newsContentBak": "",
+   "newsDownTitle": "",
+   "newsId": 20000016229,
+   "newsLinkUrl": "",
+   "newsShortTitle": "",
+   "newsSource": "41",
+   "newsSourceName": "",
+   "newsSummary": "",
+   "newsTags": "",
+   "newsTitle": "徒步54公里的思政课，坚守29年的薪火传承",
+   "newsType": 2,
+   "oldNewsId": "7218507",
+   "openAudio": 0,
+   "openComment": null,
+   "openLikes": null,
+   "photoList": [],
+   "popUps": [],
+   "preCommentFlag": null,
+   "publishTime": "2024-04-01 19:44:00",
+   "reLInfo": {
+   "channelId": 2061,
+   "relId": "500005272745",
+   "relObjectId": 2061,
+   "relType": "1"
+   },
+   "readFlag": 0,
+   "recommendShow": null,
+   "rmhInfo": null,
+   "rmhPlatform": 0,
+   "sceneId": "",
+   "serials": null,
+   "shareInfo": {
+   "shareCoverUrl": "https://rmrbcmsonline.peopleapp.com/upload/image/202404/202404011944259539.png?x-oss-process=image/resize,w_400",
+   "shareOpen": 1,
+   "sharePosterCoverUrl": "https://rmrbcmsonline.peopleapp.com/upload/image/202404/rmrb_71671711971849.png?x-oss-process=image/resize,m_fill,h_450,w_800,limit_0/quality,q_90",
+   "sharePosterOpen": 1,
+   "shareSummary": "人民日报，有品质的新闻",
+   "shareTitle": "徒步54公里的思政课，坚守29年的薪火传承",
+   "shareUrl": "https://people.pdnews.cn/column/20000016229-500005272745"
+   },
+   "specialColumnId": null,
+   "specialColumnName": "",
+   "subSceneId": "",
+   "timeline": null,
+   "topicInfo": null,
+   "traceId": "",
+   "traceInfo": "",
+   "userInfo": null,
+   "videoInfo": [],
+   "viewCount": 0,
+   "visitorComment": 1,
+   "voteInfo": null
+   }
+   ],
+   "message": "Success",
+   "meta": null,
+   "requestId": "",
+   "success": true,
+   "timestamp": 1712807514322
+   }
+   */
+  liveInfo: LiveInfo
+  fullColumnImgUrls: Array<FullColumnImgUrls>
+  vlive: Array<Vlive>
+  newsTitle: string
+  newIntroduction: string
+}
+
+export interface LiveInfo {
+  //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
+  liveState: string
+  //2024-04-12 15:00:00 直播开始时间
+  planStartTime: string
+}
+
+export interface FullColumnImgUrls {
+  url: string
+}
+
+export interface Vlive {
+  //拉流直播 url
+  liveUrl: string
+  //直播回看地址，多路直播录制文件URL
+  replayUri: string
+}
\ No newline at end of file

+export interface LiveRoomBean {
+  pageNum: number
+  pageSize: number
+  totalCount: number
+  barrageResponses: Array<LiveRoomItemBean>
+}
+
+export interface LiveRoomItemBean {
+  text: string
+  senderUserAvatarUrl: string
+  senderUserName: string
+  pictureUrls: string[]
+  time: string
+  //1上墙0未上墙
+  isWall: number
+  //是否置顶 1置顶0不置顶
+  isTop: number
+  role: string
+}
\ No newline at end of file

@@ -34,7 +34,8 @@ export { ENewspaperItemComponent } from "./src/main/ets/components/ENewspaperIte
 
 export { ENewspaperListDialog } from "./src/main/ets/dialog/ENewspaperListDialog"
 
-export { MorningEveningPaperComponent } from "./src/main/ets/components/MorningEveningPaper/MorningEveningPaperComponent"
+export { MorningEveningPaperComponent
+} from "./src/main/ets/components/MorningEveningPaper/MorningEveningPaperComponent"
 
 export { ImageAndTextPageComponent } from "./src/main/ets/components/ImageAndTextPageComponent"
 
@@ -62,3 +63,4 @@ export { FirstTabTopSearchComponent } from "./src/main/ets/components/search/Fir
 
 export { ListHasNoMoreDataUI } from "./src/main/ets/components/reusable/ListHasNoMoreDataUI"
 
+export { LottieView } from './src/main/ets/lottie/LottieView'

@@ -7,13 +7,16 @@
   "main": "Index.ets",
   "version": "1.0.0",
   "dependencies": {
+    "@ohos/lottie": "2.0.0",
     "wdConstant": "file:../../commons/wdConstant",
     "wdPlayer": "file:../../features/wdPlayer",
     "wdLogin": "file:../../features/wdLogin",
     "wdKit": "file:../../commons/wdKit",
     "wdWebComponent": "file:../../commons/wdWebComponent",
     "wdBean": "file:../../features/wdBean",
+    "wdDetailPlayShortVideo": "file:../../features/wdDetailPlayShortVideo",
     "wdRouter": "file:../../commons/wdRouter",
-    "wdNetwork": "file:../../commons/wdNetwork"
+    "wdNetwork": "file:../../commons/wdNetwork",
+    "wdJsBridge": "file:../../commons/wdJsBridge"
   }
 }

@@ -9,6 +9,9 @@ import { Card9Component } from './cardview/Card9Component';
 import { Card10Component } from './cardview/Card10Component';
 import { Card11Component } from './cardview/Card11Component';
 import { Card17Component } from './cardview/Card17Component';
+import { Card15Component } from './cardview/Card15Component';
+import { Card19Component } from './cardview/Card19Component';
+import { Card20Component } from './cardview/Card20Component';
 
 /**
  * card适配器，卡片样式汇总，依据ContentDTO#appStyle
@@ -41,8 +44,14 @@ export struct CardParser {
       Card10Component({ contentDTO })
     } else if (contentDTO.appStyle === CompStyle.Card_11) {
       Card11Component({ contentDTO })
+    } else if (contentDTO.appStyle === CompStyle.Card_15) {
+      Card15Component({ contentDTO })
     } else if (contentDTO.appStyle === CompStyle.Card_17) {
       Card17Component({ contentDTO })
+    } else if (contentDTO.appStyle === CompStyle.Card_19) {
+      Card19Component({ contentDTO })
+    } else if (contentDTO.appStyle === CompStyle.Card_20) {
+      Card20Component({ contentDTO })
     }
     else {
       // todo:组件未实现 / Component Not Implemented

-import { CompDTO} from 'wdBean';
+import { CompDTO } from 'wdBean';
 import { CommonConstants, CompStyle } from 'wdConstant';
 import { BannerComponent } from './view/BannerComponent';
 import { LabelComponent } from './view/LabelComponent';
@@ -9,11 +9,15 @@ import {
 import {
   HorizontalStrokeCardThreeTwoRadioForOneComponent
 } from './view/HorizontalStrokeCardThreeTwoRadioForOneComponent';
-import { ZhSingleRow04 } from './compview/ZhSingleRow04'
-import { ZhSingleColumn04 } from './compview/ZhSingleColumn04'
-import { ZhSingleColumn05 } from './compview/ZhSingleColumn05'
-import { ZhGridLayout03 } from './compview/ZhGridLayout03'
+import { ZhSingleRow04 } from './compview/ZhSingleRow04';
+import { ZhSingleColumn04 } from './compview/ZhSingleColumn04';
+import { ZhSingleColumn05 } from './compview/ZhSingleColumn05';
+import { ZhGridLayout03 } from './compview/ZhGridLayout03';
 import { CardParser } from './CardParser';
+import { LiveHorizontalReservationComponent } from './view/LiveHorizontalReservationComponent';
+import { ZhGridLayout02 } from './compview/ZhGridLayout02';
+import { Card5Component } from './cardview/Card5Component'
+
 /**
  * comp适配器.
  * 首页楼层comp解析器.
@@ -42,16 +46,23 @@ export struct CompParser {
       } else {
         HorizontalStrokeCardThreeTwoRadioForOneComponent({ compDTO: compDTO })
       }
+    } else if (compDTO.compStyle === CompStyle.Zh_Single_Row_03) {
+      LiveHorizontalReservationComponent({ compDTO: compDTO })
+    } else if (compDTO.compStyle === CompStyle.Zh_Grid_Layout_02) {
+      ZhGridLayout02({ compDTO: compDTO })
     } else if (compDTO.compStyle === CompStyle.Zh_Grid_Layout_03) {
       ZhGridLayout03({ compDTO: compDTO })
     } else if (compDTO.compStyle === CompStyle.Zh_Single_Row_04) {
-      ZhSingleRow04({ compDTO: compDTO})
+      ZhSingleRow04({ compDTO: compDTO })
+    } else if (compDTO.compStyle === CompStyle.Zh_Single_Column_02) {
+      //头图卡 和comStyle 2相同，
+      Card5Component({ contentDTO: compDTO.operDataList[0] })
     } else if (compDTO.compStyle === CompStyle.Zh_Single_Column_04) {
-      ZhSingleColumn04({ compDTO: compDTO})
+      ZhSingleColumn04({ compDTO: compDTO })
     } else if (compDTO.compStyle === CompStyle.Zh_Single_Column_05) {
-      ZhSingleColumn05({ compDTO: compDTO})
+      ZhSingleColumn05({ compDTO: compDTO })
     } else if (!Number.isNaN(Number(compDTO.compStyle))) {
-      CardParser({ contentDTO: compDTO.operDataList[0]});
+      CardParser({ contentDTO: compDTO.operDataList[0] });
     }
     else {
       // todo:组件未实现 / Component Not Implemented

-import { Action, ContentDetailDTO } from 'wdBean';
+import { Logger, NumberFormatterUtils } from 'wdKit';
+import {
+  Action,
+  ContentDetailDTO,
+  ContentDTO,
+  postRecommendListParams,
+  postExecuteLikeParams,
+  batchLikeAndCollectResult,
+  batchLikeAndCollectParams,
+  InteractDataDTO,
+  contentListParams,
+} from 'wdBean';
 import DetailViewModel from '../viewmodel/DetailViewModel';
 import { ImageAndTextWebComponent } from './ImageAndTextWebComponent';
 import router from '@ohos.router';
+import { RecommendList } from '../components/view/RecommendList'
+import { CommonConstants } from 'wdConstant'
+import { HttpUrlUtils } from 'wdNetwork/Index';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
+import { PageRepository } from '../repository/PageRepository';
+
+const TAG = 'ImageAndTextPageComponent'
+
+export interface OperationItem {
+  icon: Resource;
+  icon_check?: Resource;
+  text: string | Resource;
+  num?: number; // 个数
+}
 
 @Component
 export struct ImageAndTextPageComponent {
   scroller: Scroller = new Scroller();
   action: Action = {} as Action
-  @State detailData: ContentDetailDTO = {} as ContentDetailDTO
+  @State contentDetailData: ContentDetailDTO [] = [] as ContentDetailDTO []
+  @State recommendList: ContentDTO[] = []
+  @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
+  @State interactData: InteractDataDTO = {} as InteractDataDTO
 
   build() {
-    RelativeContainer() {
-      RelativeContainer() {
-        Text(this.detailData?.publishTime)
-          .fontColor($r('app.color.color_B0B0B0'))
-          .fontSize($r('app.float.font_size_13'))
-          .id('date')
-          .alignRules({ right: { anchor: "__container__", align: HorizontalAlign.End },
-            center:{anchor: "__container__", align:VerticalAlign.Center}})
-
+    Column() {
+      // 发布时间
+      Row() {
         Image($r('app.media.icon_ren_min_ri_bao'))
           .width(70)
           .height(28)
-          .alignRules({ left: { anchor: "__container__", align: HorizontalAlign.Start },
-            center: { anchor: "__container__", align: VerticalAlign.Center } })
+        Text(this.contentDetailData[0]?.publishTime)
+          .fontColor($r('app.color.color_B0B0B0'))
+          .fontSize($r('app.float.font_size_13'))
+          .height('100%')
+          .align(Alignment.End)
       }
+      .width(CommonConstants.FULL_WIDTH)
       .height(32)
-      .width('100%')
-      .id('image_text_detail_top')
-      .alignRules({ top: { anchor: "__container__", align: VerticalAlign.Top } })
-      .visibility(Visibility.None)
-
-      Image($r('app.media.line'))
-        .width('100%')
-        .height(6)
-        .objectFit(ImageFit.Contain)
-        .id('image_text_detail_top_line')
-        .alignRules({ top: { anchor: "image_text_detail_top", align: VerticalAlign.Bottom } })
-        .margin({ top: 10 })
-        .visibility(Visibility.Hidden)
-
-      RelativeContainer() {
-        Image($r('app.media.icon_arrow_left'))
-          .width(24)
-          .height(24)
-          .id('back')
-          .alignRules({ left: { anchor: "__container__", align: HorizontalAlign.Start },
-            center: { anchor: "__container__", align: VerticalAlign.Center } })
-          .onClick((event: ClickEvent) => {
-            router.back()
-          })
-
-        Image($r('app.media.icon_forward'))
-          .width(24)
-          .height(24)
-          .id('forward')
-          .alignRules({ right: { anchor: "__container__", align: HorizontalAlign.End },
-            center: { anchor: "back", align: VerticalAlign.Center } })
-
-        Image($r('app.media.icon_listen'))
-          .width(24)
-          .height(24)
-          .margin({ right: 24 })
-          .id('listen')
-          .alignRules({ right: { anchor: "forward", align: HorizontalAlign.Start },
-            center: { anchor: "back", align: VerticalAlign.Center } })
-
-        Image($r('app.media.icon_star'))
-          .width(24)
-          .height(24)
-          .margin({ right: 24 })
-          .id('star')
-          .alignRules({ right: { anchor: "listen", align: HorizontalAlign.Start },
-            center: { anchor: "back", align: VerticalAlign.Center } })
-
-        Image($r('app.media.icon_comment'))
-          .width(24)
-          .height(24)
-          .margin({ right: 24 })
-          .id('comment')
-          .alignRules({ right: { anchor: "star", align: HorizontalAlign.Start },
-            center: { anchor: "back", align: VerticalAlign.Center } })
+      .padding({ left: 15, right: 15, })
+      .justifyContent(FlexAlign.SpaceBetween)
+      .backgroundColor(Color.White)
 
+      Row() {
+        Image($r('app.media.line'))
+          .width('100%')
+          .height(6)
+          .objectFit(ImageFit.Cover)
+          .margin({ top: 10 })
       }
-      .width('100%')
-      .height(56)
-      .id('image_text_detail_bottom')
-      .alignRules({ bottom: { anchor: "__container__", align: VerticalAlign.Bottom } })
+      .padding({ left: 15, right: 15, })
+      .backgroundColor(Color.White)
 
-      Column() {
-        ImageAndTextWebComponent({ detailData: this.detailData, action: this.action })
-      }
-      .width('100%')
-      .alignRules({ top: { anchor: "image_text_detail_top_line", align: VerticalAlign.Bottom },
-        bottom: { anchor: "image_text_detail_bottom", align: VerticalAlign.Top } })
-      .id('image_text_detail_content')
+      Stack({ alignContent: Alignment.Bottom }) {
+        List() {
+          //详情展示区
+          ListItem() {
+            Column() {
+              ImageAndTextWebComponent({
+                contentDetailData: this.contentDetailData,
+                action: this.action,
+              })
+            }.width(CommonConstants.FULL_WIDTH)
+            .height(CommonConstants.FULL_HEIGHT)
+          }
 
-    }
-    .width('100%')
-    .height('100%')
-    .padding({ left: 16, right: 16 })
+          if (this.contentDetailData[0]?.openLikes === 1) {
+            ListItem() {
+              // 点赞
+              Row() {
+                Row() {
+                  if (this.newsStatusOfUser?.likeStatus === '1') {
+                    Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.ic_like_check') : (this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer_active') : $r('app.media.icon_candle_active')))
+                      .width(24)
+                      .height(24)
+                      .margin({ right: 5 })
+                  } else {
+                    Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.icon_like') : (this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer') : $r('app.media.icon_candle')))
+                      .width(24)
+                      .height(24)
+                      .margin({ right: 5 })
+                  }
+                  Text(`${this.interactData?.likeNum || 0}`)
+                    .fontSize(16)
+                    .fontColor(this.newsStatusOfUser?.likeStatus === '1' ? '#ED2800' : '#999999')
+                    .fontWeight(500)
+                }.alignItems(VerticalAlign.Center)
+                .onClick(() => {
+                  this.toggleLikeStatus()
+                })
+
+              }.width(CommonConstants.FULL_WIDTH).height(80)
+              .justifyContent(FlexAlign.Center)
+            }
+            .border({
+              width: { bottom: 5 },
+              color: '#f5f5f5',
+            })
+          }
+
+          // 相关推荐区
+          ListItem() {
+            RecommendList({ recommendList: this.recommendList })
+          }
+        }
+        .width(CommonConstants.FULL_WIDTH)
+        .height(CommonConstants.FULL_HEIGHT)
+        .padding({ bottom: 56 })
+        .scrollBar(BarState.Off)
+        .edgeEffect(EdgeEffect.None)
+
+        //底部交互区
+        Row() {
+          Image($r('app.media.icon_arrow_left'))
+            .width(24)
+            .height(24)
+            .onClick((event: ClickEvent) => {
+              router.back()
+            })
+
+          Row() {
+            Image($r('app.media.icon_comment'))
+              .width(24)
+              .height(24)
+              .margin({ right: 24 })
+              .id('comment')
+
+            Image($r('app.media.icon_star'))
+              .width(24)
+              .height(24)
+              .margin({ right: 24 })
+
+            Image($r('app.media.icon_listen'))
+              .width(24)
+              .height(24)
+              .margin({ right: 24 })
+
+            Image($r('app.media.icon_forward'))
+              .width(24)
+              .height(24)
+
+          }
+        }
+        .width(CommonConstants.FULL_WIDTH)
+        .height(56)
+        .padding({ left: 15, right: 15, bottom: 50, top: 20 })
+        .justifyContent(FlexAlign.SpaceBetween)
+        .backgroundColor(Color.White)
+      }
+    }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
     .backgroundColor(Color.White)
+
   }
 
-  async aboutToAppear() {
+  private async getDetail() {
     let contentId: string = ''
     let relId: string = ''
     let relType: string = ''
@@ -122,14 +187,106 @@ export struct ImageAndTextPageComponent {
       }
       let detailBeans = await DetailViewModel.getDetailPageData(relId, contentId, relType)
       if (detailBeans && detailBeans.length > 0) {
-        this.detailData = detailBeans[0];
+        this.contentDetailData = detailBeans;
+        if (this.contentDetailData[0]?.recommendShow === 1) {
+          this.getRecommend()
+        }
+        if (this.contentDetailData[0]?.openLikes === 1) {
+          this.getInteractDataStatus()
+          this.queryContentInteractCount()
+        }
       }
+    }
+  }
 
+
+  private async getRecommend() {
+    let params: postRecommendListParams = {
+      imei: "8272c108-4fa2-34ce-80b9-bc425a7c2a7e",
+      userId: HttpUrlUtils.getUserId(),
+      contentId: String(this.contentDetailData[0]?.newsId),
+      recType: 1,
+      contentType: this.contentDetailData[0]?.newsType,
+      relId: this.contentDetailData[0]?.reLInfo?.relId,
+      channelId: String(this.contentDetailData[0]?.reLInfo?.channelId)
+    }
+    let recommendList = await DetailViewModel.postRecommendList(params)
+    if (recommendList && recommendList.length > 0) {
+      this.recommendList = recommendList;
     }
+  }
 
+  // 已登录->查询用户对作品点赞、收藏状态
+  private async getInteractDataStatus() {
+    try {
+      const params: batchLikeAndCollectParams = {
+        contentList: [
+          {
+            contentId: this.contentDetailData[0]?.newsId + '',
+            contentType: this.contentDetailData[0]?.newsType + '',
+          }
+        ]
+      }
+      console.error(TAG, JSON.stringify(this.contentDetailData))
+      let data = await MultiPictureDetailViewModel.getInteractDataStatus(params)
+      console.error(TAG, '查询用户对作品点赞、收藏状态', JSON.stringify(data))
+      this.newsStatusOfUser = data[0];
+      Logger.info(TAG, `newsStatusOfUser：${JSON.stringify(this.newsStatusOfUser)}`)
+    } catch (exception) {
+      console.error(TAG, JSON.stringify(exception))
+    }
   }
 
-  aboutToDisappear() {
+  /**
+   * 点赞、取消点赞
+   */
+  toggleLikeStatus() {
+    // 未登录，跳转登录
+    if (!HttpUrlUtils.getUserId()) {
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+    const params: postExecuteLikeParams = {
+      status: this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1',
+      contentId: this.contentDetailData[0]?.newsId + '',
+      contentType: this.contentDetailData[0]?.newsType + '',
+    }
+    PageRepository.postExecuteLike(params).then(res => {
+      console.log(TAG, '点赞、取消点赞', 'toggleLikeStatus==',)
+      if (this.newsStatusOfUser) {
+        this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus == '1' ? '0' : '1'
+        this.queryContentInteractCount()
+      }
+
+    })
+  }
+
+  /**
+   * 查询点赞、收藏数量
+   */
+  queryContentInteractCount() {
+    console.error(TAG, 'contentDetailData2222', JSON.stringify(this.contentDetailData))
+    const params: contentListParams = {
+      contentList: [{
+        contentId: this.contentDetailData[0]?.newsId + '',
+        contentType: this.contentDetailData[0]?.newsType,
+      }]
+    }
+    PageRepository.getContentInteract(params).then(res => {
+      if (res.data) {
+        this.interactData.likeNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.likeNum)
+        this.interactData.collectNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.collectNum)
+        this.interactData.commentNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.commentNum)
+      }
+      console.log(TAG, '获取互动点赞等数据===', JSON.stringify(res))
+      console.log(TAG, 'this.interactData', JSON.stringify(this.interactData))
+    })
+  }
 
+  aboutToAppear() {
+    this.getDetail()
+  }
+
+  aboutToDisappear() {
   }
 }
\ No newline at end of file

@@ -8,82 +8,96 @@ import {
 } from 'wdBean';
 import { Logger } from 'wdKit';
 import { WdWebComponent, WdWebLocalComponent } from 'wdWebComponent';
-import { BridgeWebViewControl } from '../../../../../../commons/wdWebComponent/oh_modules/wdJsBridge/Index';
+import { NativeCallH5Type } from 'wdWebComponent/src/main/ets/pages/NativeCallH5Type';
+import { BridgeWebViewControl } from 'wdJsBridge/Index';
 
 @Component
 export struct ImageAndTextWebComponent {
-  webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
   action: Action = {} as Action
   @State reload: number = 0;
-  @Prop @Watch('onDetailDataUpdated') detailData: ContentDetailDTO = {} as ContentDetailDTO
+  @Prop @Watch('onDetailDataUpdated') contentDetailData: ContentDetailDTO [] = [] as ContentDetailDTO []
+  webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
 
   onDetailDataUpdated() {
-    // if (this.action) {
-    //   let contentId: string = ''
-    //   let contentType: string = ''
-    //   let topicId: string = ''
-    //   let channelId: string = ''
-    //   let compId: string = ''
-    //   let sourcePage: string = '5'
-    //   if (this.action.params) {
-    //     if (this.action.params.contentID) {
-    //       contentId = this.action.params?.contentID
-    //     }
-    //     if (this.action.params.extra) {
-    //       if (this.action.params.extra.contentType) {
-    //         contentType = this.action.params.extra.contentType
-    //       }
-    //       if (this.action.params.extra.topicId) {
-    //         topicId = this.action.params.extra.topicId
-    //       }
-    //       if (this.action.params.extra.channelId) {
-    //         channelId = this.action.params.extra.channelId
-    //       }
-    //       if (this.action.params.extra.compId) {
-    //         compId = this.action.params.extra.compId
-    //       }
-    //       if (this.action.params.extra.sourcePage) {
-    //         sourcePage = this.action.params.extra.sourcePage
-    //       }
-    //     }
-    //
-    //   }
-    //
-    //   let h5ReceiveAppData: H5ReceiveDetailBean = { dataSource: '2' } as H5ReceiveDetailBean
-    //   let h5ReceiveDataExtraBean: H5ReceiveDataExtraBean = { creatorId: '', isLogin: '0' } as H5ReceiveDataExtraBean
-    //   let h5ReceiveDataJsonBean: H5ReceiveDataJsonBean = {
-    //     contentId: contentId,
-    //     contentType: contentType
-    //   } as H5ReceiveDataJsonBean
-    //   h5ReceiveDataJsonBean.topicId = topicId
-    //   h5ReceiveDataJsonBean.channelId = channelId
-    //   h5ReceiveDataJsonBean.compId = compId
-    //   h5ReceiveDataJsonBean.sourcePage = sourcePage
-    //   h5ReceiveDataJsonBean.netError = '0'
-    //   let response: ResponseBean = {} as ResponseBean
-    //   response.data = this.detailData
-    //   response.code = 0
-    //   response.success = true
-    //   h5ReceiveDataJsonBean.responseMap = response
-    //   h5ReceiveAppData.dataJson = h5ReceiveDataJsonBean
-    //   h5ReceiveAppData.dataExt = h5ReceiveDataExtraBean
-    //   this.webviewControl.callHandle("jsCall_receiveAppData", JSON.stringify(h5ReceiveAppData), (data: string) => {
-    //     Logger.info("from js data = " + data);
-    //   })
+    if (this.action) {
+      let contentId: string = ''
+      let contentType: string = ''
+      let topicId: string = ''
+      let channelId: string = ''
+      let compId: string = ''
+      let sourcePage: string = '5'
+      if (this.action.params) {
+        if (this.action.params.contentID) {
+          contentId = this.action.params?.contentID
+        }
+        if (this.action.params.extra) {
+          if (this.action.params.extra.contentType) {
+            contentType = this.action.params.extra.contentType
+          }
+          if (this.action.params.extra.topicId) {
+            topicId = this.action.params.extra.topicId
+          }
+          if (this.action.params.extra.channelId) {
+            channelId = this.action.params.extra.channelId
+          }
+          if (this.action.params.extra.compId) {
+            compId = this.action.params.extra.compId
+          }
+          if (this.action.params.extra.sourcePage) {
+            sourcePage = this.action.params.extra.sourcePage
+          }
+        }
 
-    // }
+      }
+
+      let h5ReceiveAppData: H5ReceiveDetailBean = { dataSource: '2' } as H5ReceiveDetailBean
+      // TODO 对接user信息、登录情况
+      let h5ReceiveDataExtraBean: H5ReceiveDataExtraBean = { creatorId: '', isLogin: '0' } as H5ReceiveDataExtraBean
+      let h5ReceiveDataJsonBean: H5ReceiveDataJsonBean = {
+        contentId: contentId,
+        contentType: contentType
+      } as H5ReceiveDataJsonBean
+      h5ReceiveDataJsonBean.topicId = topicId
+      h5ReceiveDataJsonBean.channelId = channelId
+      h5ReceiveDataJsonBean.compId = compId
+      h5ReceiveDataJsonBean.sourcePage = sourcePage
+      h5ReceiveDataJsonBean.netError = '0'
+      let response: ResponseBean = {} as ResponseBean
+      response.data = this.contentDetailData
+      response.code = 200
+      response.success = true
+      h5ReceiveDataJsonBean.responseMap = response
+      h5ReceiveAppData.dataJson = h5ReceiveDataJsonBean
+      h5ReceiveAppData.dataExt = h5ReceiveDataExtraBean
+      // TODO 暂延时1s，考虑业务流程再优化
+      setTimeout(() => {
+        this.sendContentData2H5(h5ReceiveAppData);
+      }, 2000)
+
+    }
 
   }
 
   build() {
     Column() {
-      if (this.detailData && this.detailData.shareInfo && this.detailData.shareInfo.shareUrl){
-        WdWebComponent({
-          webviewControl: this.webviewControl,
-          webUrl: this.detailData?.shareInfo?.shareUrl,
-          backVisibility: false,
-        })
-      }
+      WdWebLocalComponent({
+        webviewControl: this.webviewControl,
+        webResource: $rawfile('apph5/index.html'),
+        backVisibility: false,
+      })
+      // WdWebLocalComponent({
+      //   webviewControl: this.webviewControl,
+      //   webResource: "http://pd-people-uat.pdnews.cn/articletopic/35398-10000015965",
+      //   backVisibility: false,
+      // })
     }
   }
+
+  private sendContentData2H5(h5ReceiveAppData: H5ReceiveDetailBean) {
+    Logger.debug('ImageAndTextWebComponent', 'jsCall_receiveAppData');
+    this.webviewControl.callHandle(NativeCallH5Type.jsCall_receiveAppData,
+      JSON.stringify(h5ReceiveAppData), (data: string) => {
+        // Logger.debug('ImageAndTextWebComponent', "from js data = " + data);
+      })
+  }
 }
\ No newline at end of file

 // import { FrontLinkObject, MorningEveningPaperDTO, PageInfoBean } from 'wdBean';
 import { CompList, PageInfoBean } from 'wdBean';
-import { DateTimeUtils, Logger } from 'wdKit/Index';
+import { DateTimeUtils, Logger, SPHelper } from 'wdKit/Index';
 import { PaperReaderSimpleDialog } from '../../dialog/PaperReaderDialog';
 import { MorningEveningViewModel } from '../../viewmodel/MorningEveningViewModel';
 // import { AudioBarView } from './AudioBarView';
@@ -21,6 +21,7 @@ export struct MorningEveningPaperComponent {
   // @State compInfoBean: CompInfoBean = {} as CompInfoBean
   @State compListItem: CompList = {} as CompList
   @State audioPlayUrl: string = ""
+  // @Consume dailyPaperTopicPageId: number
   // @Provide compListItem: CompList = {} as CompList
   // @State morningEveningPaperDTO: MorningEveningPaperDTO = {
   //   name: "新闻夜读",
@@ -92,13 +93,14 @@ export struct MorningEveningPaperComponent {
   }
 
   async aboutToAppear() {
-    console.info(TAG, `aboutToAppear`)
-
+    let dailyPaperTopicPageId = await SPHelper.default.getSync('dailyPaperTopicPageId', "") as String
+    console.info(TAG, `aboutToAppear = ` + dailyPaperTopicPageId)
     const currentTime = new Date().getTime()
     Logger.info(TAG, "currentTime = " + currentTime)
     Logger.info(TAG, `currentTime = ${currentTime}`)
     try {
-      let pageInfoBean = await MorningEveningViewModel.getMorningEveningPageInfo("25091")
+      // let pageInfoBean = await MorningEveningViewModel.getMorningEveningPageInfo("" + this.dailyPaperTopicPageId)
+      let pageInfoBean = await MorningEveningViewModel.getMorningEveningPageInfo("" + dailyPaperTopicPageId) //"25091"
       this.pageInfoBean = pageInfoBean;
       this.title = this.pageInfoBean?.topicInfo?.title
       let dateTime = DateTimeUtils.parseDate(this.pageInfoBean?.topicInfo?.topicDate ?? '', DateTimeUtils.PATTERN_DATE_HYPHEN);

@@ -28,7 +28,7 @@ export struct MultiPictureDetailPageComponent {
   private picWidth: number = 0
   @State picHeight: number = 0
   @State titleHeight: number = 0
-  @State contentDetailData: ContentDetailDTO  = {} as ContentDetailDTO
+  @State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   private swiperController: SwiperController = new SwiperController()
   @State swiperIndex: number = 0;
@@ -37,13 +37,12 @@ export struct MultiPictureDetailPageComponent {
 
   //watch监听页码回调
   onCurrentPageNumUpdated(): void {
-    Logger.info(TAG, `currentPageNum：${this.currentPageNum}`, )
+    Logger.info(TAG, `currentPageNum：${this.currentPageNum}`,)
     let _swiperIndex = Number.parseInt(this.currentPageNum)
     Logger.info(TAG, `_swiperIndex：${_swiperIndex}`)
     this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
   }
 
-
   async aboutToAppear() {
     //获取宽高尺寸
     this.screenWidth = this.displayTool.width
@@ -72,7 +71,7 @@ export struct MultiPictureDetailPageComponent {
       if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
         Swiper(this.swiperController) {
           ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
-            MultiPictureDetailItemComponent({  MultiPictureDetailItem: item })
+            MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
           })
         }
         .index(this.swiperIndex)
@@ -91,10 +90,11 @@ export struct MultiPictureDetailPageComponent {
         .onChange((index: number) => {
           this.swiperIndex = index
         })
-        if(this.contentDetailData.rmhPlatform == 1) {
+
+        if (this.contentDetailData.rmhPlatform == 1) {
           Row() {
-            Row(){
-              Row({space: 8}) {
+            Row() {
+              Row({ space: 8 }) {
                 Image(this.contentDetailData?.rmhInfo?.rmhHeadUrl)
                   .borderRadius('50%')
                   .alt($r('app.media.picture_loading'))
@@ -105,6 +105,7 @@ export struct MultiPictureDetailPageComponent {
               }
               .width('13%')
               .height('100%')
+
               Row() {
                 Flex({
                   direction: FlexDirection.Column,
@@ -124,7 +125,7 @@ export struct MultiPictureDetailPageComponent {
                     .fontWeight(400)
                     .lineHeight(14)
                     .textOverflow({ overflow: TextOverflow.Clip })
-                    .margin (0)
+                    .margin(0)
                 }
               }
               .width('81%')
@@ -136,10 +137,11 @@ export struct MultiPictureDetailPageComponent {
               top: 0,
               bottom: 0,
               left: 16,
-              right:0
+              right: 0
             })
-            if(this.followStatus == '0') {
-              Row(){
+
+            if (this.followStatus == '0') {
+              Row() {
                 Button('+关注', { type: ButtonType.Normal, stateEffect: true })
                   .borderRadius(4)
                   .backgroundColor('#ED2800')
@@ -152,7 +154,7 @@ export struct MultiPictureDetailPageComponent {
                     top: 10,
                     bottom: 10,
                     left: 16,
-                    right:16
+                    right: 16
                   })
                   .fontSize(12)
                   .fontColor(Color.White)
@@ -169,7 +171,7 @@ export struct MultiPictureDetailPageComponent {
           })
           .id('e_attention')
         }
-        Row(){
+        Row() {
           Scroll(this.scroller) {
             Row() {
               Flex({
@@ -177,22 +179,38 @@ export struct MultiPictureDetailPageComponent {
                 justifyContent: FlexAlign.Start
               }) {
                 Text() {
-                  Span(`${this.swiperIndex + 1}`).fontSize(24).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(28)
-                  Span(`/${this.contentDetailData.photoList.length}`).fontSize(14).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(19)
+                  Span(`${this.swiperIndex + 1}`)
+                    .fontSize(24)
+                    .fontFamily('PingFang SC-Medium')
+                    .fontWeight(500)
+                    .lineHeight(28)
+                  Span(`/${this.contentDetailData.photoList.length}`)
+                    .fontSize(14)
+                    .fontFamily('PingFang SC-Medium')
+                    .fontWeight(500)
+                    .lineHeight(19)
                 }.fontColor(Color.White).margin(4)
 
-                Text(`${this.contentDetailData.newsTitle}`).fontColor(Color.White).fontSize(16).fontFamily('PingFang SC-Semibold')
-                  .fontWeight(600).lineHeight(24)
-                  .margin ({
+                Text(`${this.contentDetailData.newsTitle}`)
+                  .fontColor(Color.White)
+                  .fontSize(16)
+                  .fontFamily('PingFang SC-Semibold')
+                  .fontWeight(600)
+                  .lineHeight(24)
+                  .margin({
                     top: 4,
                     left: 0,
                     bottom: 4,
                     right: 0
                   })
-                Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`).fontColor(Color.White)
-                  .fontSize(14).fontFamily('PingFang SC-Regular').fontWeight(400).lineHeight(22)
+                Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
+                  .fontColor(Color.White)
+                  .fontSize(14)
+                  .fontFamily('PingFang SC-Regular')
+                  .fontWeight(400)
+                  .lineHeight(22)
                   .textOverflow({ overflow: TextOverflow.Ellipsis })
-                  .margin ({
+                  .margin({
                     top: 4,
                     left: 0,
                     bottom: 4,
@@ -202,7 +220,7 @@ export struct MultiPictureDetailPageComponent {
               }
             }
             .width('100%')
-            .margin ({
+            .margin({
               top: 8,
               left: 18,
               bottom: 24,
@@ -227,13 +245,15 @@ export struct MultiPictureDetailPageComponent {
             bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
             middle: { anchor: "__container__", align: HorizontalAlign.Center }
           })
-          .width('100%').height(56).margin({
-          top: 16,
-          left: 16,
-          right:16,
-          bottom: 0
-        })
-          .border({ width: {top: 0.5}, color: '#FFFFFF' })
+          .width('100%')
+          .height(56)
+          .margin({
+            top: 16,
+            left: 16,
+            right: 16,
+            bottom: 0
+          })
+          .border({ width: { top: 0.5 }, color: '#FFFFFF' })
           .id('e_oper_row')
       }
     }
@@ -241,6 +261,9 @@ export struct MultiPictureDetailPageComponent {
     .height('100%')
     .backgroundColor(Color.Black)
     .id('e_picture_container')
+    // 设置顶部绘制延伸到状态栏
+    // 设置底部绘制延伸到导航条
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
   }
 
   private async getContentDetailData() {
@@ -285,6 +308,7 @@ export struct MultiPictureDetailPageComponent {
 
     }
   }
+
   /**
    * 关注号主
    */

@@ -14,7 +14,6 @@ import { CommonConstants } from 'wdConstant/Index';
 
 const TAG = 'BroadcastPageComponent';
 
-@Entry
 @Component
 export struct BroadcastPageComponent {
   @State params:Params = router.getParams() as Params;

@@ -4,7 +4,6 @@ import { CommonConstants } from 'wdConstant/Index';
 /**
  * 今日推荐顶部标题--fixed标题
  */
-@Entry
 @Component
 export struct RecommendHeader {
   build() {

@@ -4,7 +4,6 @@ import { ProcessUtils } from '../../utils/ProcessUtils';
 /**
  * 播报--今日推荐列表
  */
-@Entry
 @Component
 export  struct RecommendLists {
   @Prop recommendCompInfoBean: CompInfoBean = {} as CompInfoBean // 推荐-组件信息

@@ -3,7 +3,6 @@ import {  DateTimeUtils } from 'wdKit';
 /**
  * 播报标题描述
  */
-@Entry
 @Component
 export struct RecommendTitle {
   build() {

@@ -5,7 +5,6 @@ import { ProcessUtils } from '../../utils/ProcessUtils';
 /**
  * 精选栏目
  */
-@Entry
 @Component
 export  struct SelectedColumns {
   @Prop columnsCompInfoBean: CompInfoBean = {} as CompInfoBean // 精选栏目组件信息

+import { ContentDTO } from 'wdBean/Index'
+import { DateTimeUtils } from 'wdKit/Index'
+
+/**
+ * 这里是样式卡中，右下角显示的音视频信息
+ * 目前已知：
+ * 音频： 音频图标+时长
+ * 视频：点播图标+时长；直播图标+'直播中'
+ */
+@Component
+export struct CardMediaInfo {
+  @State contentDTO: ContentDTO = {} as ContentDTO // 如果有duraion，代表点播，显示时长；如果不传或者传0，显示直播中
+  // objectType 0:不跳转 1:点播,2:直播,3:活动,4:广告,5:专题,6:链接,7:榜单,8:图文,9:组图,10:H5新闻,11:频道,12:组件,13:音频,
+  // 14动态图文,15动态视频16问政；100人民号,101标签
+
+  build() {
+    Row() {
+      if(this.contentDTO.objectType === '1' || this.contentDTO.objectType === '15' ) {
+        // 点播、动态视频
+        Row(){
+          Image($r('app.media.videoTypeIcon'))
+            .mediaLogo()
+          Text(DateTimeUtils.getFormattedDuration(this.contentDTO.videoInfo.videoDuration * 1000))
+            .mediaText()
+        }
+        .backgroundColor('#4d000000')
+        .borderRadius($r('app.float.button_border_radius'))
+      } else if(this.contentDTO.objectType === '2') {
+        // liveInfo.liveState 直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
+        // 显示直播信息
+        Row(){
+          if(this.contentDTO.liveInfo.liveState === 'running') {
+            Image($r('app.media.icon_live'))
+              .mediaLogo()
+            Text('直播中')
+              .mediaText()
+          } else if(this.contentDTO.liveInfo.liveState === 'end'){
+            Image($r('app.media.videoTypeIcon'))
+              .mediaLogo()
+            Text('回看')
+              .mediaText()
+          }
+        }
+        .backgroundColor('#4d000000')
+        .borderRadius($r('app.float.button_border_radius'))
+      } else if(this.contentDTO.objectType === '9') {
+        // 显示组图；图片数量
+        Row(){
+          Image($r('app.media.album_card_shape'))
+            .mediaLogo()
+          Text(`${this.contentDTO.photoNum}`)
+            .mediaText()
+            .width(20)
+        }
+        .backgroundColor('#4d000000')
+        .borderRadius($r('app.float.button_border_radius'))
+      } else if(this.contentDTO.objectType === '13') {
+        // 显示音频信息
+        Row(){
+          Image($r('app.media.broadcast_listen'))
+            .height(14)
+            .borderRadius($r('app.float.button_border_radius'))
+          Text(DateTimeUtils.getFormattedDuration(this.contentDTO.voiceInfo.voiceDuration * 1000))
+            .mediaText()
+        }
+      }
+    }
+    .margin(6)
+  }
+
+  @Styles mediaLogo() {
+    .width(22)
+    .height(18)
+    .borderRadius($r('app.float.button_border_radius'))
+  }
+}
+
+@Extend(Text) function mediaText() {
+  .fontColor($r('app.color.color_fff'))
+  .fontSize($r('app.float.font_size_12'))
+  .width(40)
+  .height(18)
+  .textAlign(TextAlign.Center)
+  .margin({ left: -3 })
+}
\ No newline at end of file

+/**
+ * 这里是人民号动态中的顶部信息：人民号logo,名字，描述，关注等
+ */
+import { RmhInfoDTO } from 'wdBean'
+import { CommonConstants } from 'wdConstant/Index';
+
+@Component
+export struct RmhTitle {
+  @Prop rmhInfo: RmhInfoDTO
+
+  build() {
+    Flex() {
+      Stack() {
+        Image(this.rmhInfo.rmhHeadUrl)
+          .width(36)
+          .height(36).borderRadius(50)
+        Image(this.rmhInfo.authIcon)
+          .width(14)
+          .height(14)
+          .borderRadius(50)
+      }
+      .margin({ right: 8 })
+      .alignContent(Alignment.BottomEnd)
+      .flexShrink(0)
+
+      Column() {
+        Text(this.rmhInfo.rmhName)
+          .fontSize($r('app.float.font_size_13'))
+          .fontColor($r('app.color.color_222222'))
+          .fontWeight(600)
+          .alignSelf(ItemAlign.Start)
+        Text(this.rmhInfo.rmhDesc)
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_B0B0B0"))
+          .maxLines(1)
+          .alignSelf(ItemAlign.Start)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+      }
+
+      Blank()
+      if (this.rmhInfo.cnIsAttention) {
+        Row() {
+          Image($r('app.media.rmh_follow'))
+            .width(16)
+            .height(16)
+          Text('关注')
+            .fontSize($r('app.float.font_size_13'))
+            .fontColor($r('app.color.color_ED2800'))
+        }
+        .flexShrink(0)
+        .alignSelf(ItemAlign.Center)
+        .onClick(() => {
+          // TODO 调用关注接口
+        })
+      }
+    }
+    .width(CommonConstants.FULL_WIDTH)
+    .margin({ bottom: 10 })
+  }
+}
\ No newline at end of file

+import { AttentionRmhInfoDTO } from 'wdBean';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+
+/**
+ * AttentionListComponent  人民号-关注-我的关注
+ * 没有compstyle
+ */
+const TAG = '人民号-关注-我的关注'
+
+@Entry
+@Component
+export struct AttentionListComponent {
+  @State attentionList: AttentionRmhInfoDTO[] = [] as AttentionRmhInfoDTO[]
+
+  build() {
+    Row({ space: 4 }) {
+      List() {
+        ListItem() {
+          Column() {
+            Image($r('app.media.attention_mine'))
+              .width(48)
+              .height(48)
+              .padding(12)
+              .backgroundColor($r('app.color.color_F5F5F5'))
+              .borderRadius(50)
+              .margin({ bottom: 8 })
+            Text('我的关注')
+              .fontSize($r('app.float.font_size_13'))
+              .fontColor($r('app.color.color_666666'))
+          }
+          .width(78)
+          .height(74)
+          .onClick(() => {
+            // 跳转到关注列表-我的
+            WDRouterRule.jumpWithPage(WDRouterPage.followListPage)
+          })
+        }
+
+        ForEach(this.attentionList, (item: AttentionRmhInfoDTO, index: number) => {
+          ListItem() {
+            Column() {
+              Stack() {
+                Image(item.attentionHeadPhotoUrl)
+                  .width(48)
+                  .height(48)
+                  .borderRadius(50)
+                Image(item.authIcon)
+                  .width(14)
+                  .height(14)
+                  .borderRadius(50)
+              }
+              .margin({ bottom: 8 })
+              .alignContent(Alignment.BottomEnd)
+
+              Text(item.attentionUserName)
+                .fontSize($r('app.float.font_size_13'))
+                .fontColor($r('app.color.color_666666'))
+                .textOverflowStyle(1)
+            }
+            .margin({
+              right: index === this.attentionList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0,
+            })
+            .padding({ left: 2, right: 2 })
+          }
+          .width(78)
+          .height(74)
+          .onClick(() => {
+            //TODO 跳转到对应的人民号主页
+
+          })
+        })
+      }
+      .listDirection(Axis.Horizontal)
+      .height(74)
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+  }
+}
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}

@@ -2,11 +2,12 @@
 import { CommonConstants } from 'wdConstant'
 import { ContentDTO } from 'wdBean'
 import { DateTimeUtils } from 'wdKit'
+import { ProcessUtils } from '../../utils/ProcessUtils';
 
 const TAG = 'Card11Component';
 
 /**
- * 无图卡(标题省略)
+ * 无图卡(标题省略) Card_11 = '11
  */
 @Component
 export struct Card11Component {
@@ -21,33 +22,38 @@ export struct Card11Component {
         .textOverflow({ overflow: TextOverflow.Ellipsis })
         .width(CommonConstants.FULL_WIDTH)
       Row() {
-        Text("锐评")
-          .fontSize($r("app.float.font_size_12"))
-          .fontColor($r("app.color.color_ED2800"))
-        Text(this.contentDTO.source)
-          .fontSize($r("app.float.font_size_12"))
-          .fontColor($r("app.color.color_B0B0B0"))
-          .margin({ left: 6 })
-        Image($r("app.media.point"))
-          .width(16)
-          .height(16)
+        if (this.contentDTO.source) {
+          Text(this.contentDTO.source)
+            .fontSize($r("app.float.font_size_12"))
+            .fontColor($r("app.color.color_B0B0B0"))
+            .margin({ left: 6 })
+          Image($r("app.media.point"))
+            .width(16)
+            .height(16)
+        }
 
-        Text(DateTimeUtils.formatDate(Number.parseFloat(this.contentDTO.publishTime)))
+        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
           .fontSize($r("app.float.font_size_12"))
           .fontColor($r("app.color.color_B0B0B0"))
-
+          .margin({ right: 6 })
+        // TODO '评论取哪个字段'
+        // Text(`1806评`)
+        //   .fontSize($r("app.float.font_size_12"))
+        //   .fontColor($r("app.color.color_B0B0B0"))
       }.width(CommonConstants.FULL_WIDTH)
       .justifyContent(FlexAlign.Start)
       .margin({ top: 8 })
 
     }.width(CommonConstants.FULL_WIDTH)
     .padding({
-      top: 14,
-      left: 16,
-      right: 16,
-      bottom: 14
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
     })
     .backgroundColor($r("app.color.white"))
-    .margin({ bottom: 8 })
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
   }
 }
\ No newline at end of file

+import { ContentDTO } from 'wdBean';
+import { ProcessUtils } from '../../utils/ProcessUtils';
+import { RmhTitle } from '../cardCommon/RmhTitle'
+import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
+import { CommonConstants } from 'wdConstant/Index';
+
+const TAG: string = 'Card15Component';
+
+/**
+ * 大图卡人民号:
+ * compstyle:15
+ * 卡片结构：上下结构
+ * 卡片宽度:充满父窗口
+ * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
+ */
+@Component
+export struct Card15Component {
+  @State contentDTO: ContentDTO = {
+    // appStyle: '15',
+    // coverType: 1,
+    // objectType: '9',
+    // coverUrl: 'https://rmrbcmsonline.peopleapp.com/rb_recsys/img/2024/0413/VL20Z09ISBEKXZU_963672030241091584.jpeg?x-oss-process=image/resize,m_fill,h_450,w_800/quality,q_90',
+    // fullColumnImgUrls: [
+    //   {
+    //     landscape: 2,
+    //     size: 1,
+    //     url: 'https://rmrbcmsonline.peopleapp.com/rb_recsys/img/2024/0413/VL20Z09ISBEKXZU_963672030241091584.jpeg?x-oss-process=image/resize,m_fill,h_450,w_800/quality,q_90',
+    //     weight: 1170
+    //   }
+    // ],
+    // newsTitle: '押解画面公开！被湖北民警从柬埔寨押解回国被湖北民警从柬埔寨押解回国的130名涉赌诈嫌疑人是他们被湖北民警从柬埔寨押解回国的130名涉赌诈嫌疑人是他们的130名涉赌诈嫌疑人是他们',
+    // publishTime: '1712993333000',
+    // rmhInfo: {
+    //   authIcon: '',
+    //   authTitle: '',
+    //   authTitle2: '',
+    //   banControl: 0,
+    //   cnIsAttention: 1,
+    //   rmhDesc: '中共武汉市委机关报长江日报官方人民号',
+    //   rmhHeadUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/vod/content/202302/202302Sa121448724/TUw.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
+    //   rmhId: '4255270',
+    //   rmhName: '长江日报',
+    //   userId: '513696944662469',
+    //   userType: '3'
+    // },
+    // videoInfo: {
+    //   firstFrameImageUri: '',
+    //   videoDuration: 12,
+    //   // videoLandscape: 2,
+    //   videoUrl: 'https://rmrbcmsonline.peopleapp.com/rb_recsys/video/2024/0413/VL20Z09ISBEKXZU_963672027208609792.mp4'
+    // },
+    // photoNum: '9',
+    // voiceInfo: {
+    //   voiceDuration: 12
+    // }
+  } as ContentDTO;
+
+  build() {
+    Column() {
+      // rmh信息
+      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
+      //新闻标题
+      if (this.contentDTO.newsTitle) {
+        Text(this.contentDTO.newsTitle)
+          .fontSize($r('app.float.font_size_17'))
+          .fontColor($r('app.color.color_222222'))
+          .width(CommonConstants.FULL_WIDTH)
+          .textOverflowStyle(2)
+          .margin({ bottom: 8 })
+      }
+      //大图
+      Stack() {
+        Image(this.contentDTO.coverUrl)
+          .borderRadius($r('app.float.image_border_radius'))
+        //播放状态+时长
+        CardMediaInfo({
+          contentDTO: this.contentDTO
+        })
+      }
+      .width(CommonConstants.FULL_WIDTH)
+      .aspectRatio(16 / 9)
+      .alignContent(Alignment.BottomEnd)
+
+      //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
+  }
+}
+
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}
\ No newline at end of file

@@ -3,12 +3,13 @@ import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
 import { CommonConstants } from 'wdConstant/Index';
 import { DateTimeUtils } from 'wdKit';
 import { WDRouterRule } from 'wdRouter';
+import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 
 const TAG = 'Card17Component';
-/**
-* 图卡集---2
-*/
 
+/**
+ * 图卡集---2
+ */
 @Component
 export struct Card17Component {
   @State compDTO: CompDTO = {} as CompDTO
@@ -18,82 +19,54 @@ export struct Card17Component {
     Column({ space: 8 }) {
       Text(this.contentDTO.newsTitle)
         .textOverflow({ overflow: TextOverflow.Ellipsis })
-        .fontSize(17)
-        .fontColor(0x222222)
+        .fontSize($r('app.float.font_size_17'))
+        .fontColor($r('app.color.color_222222'))
         .lineHeight(25)
         .maxLines(3)
         .width(CommonConstants.FULL_WIDTH)
 
-      RelativeContainer() {
-        Image(this.contentDTO.fullColumnImgUrls[0].url)
-          .width('66.6%')
-          .aspectRatio(16 / 9)
-          .alignRules({
-            top: { anchor: "__container__", align: VerticalAlign.Top },
-            left: { anchor: "__container__", align: HorizontalAlign.Start }
-          })
-          .id('mainImage')
-
-        Image(this.contentDTO.fullColumnImgUrls[1].url)
-          .width('33%')
-          .aspectRatio(16 / 9)
-          .alignRules({
-            top: { anchor: "__container__", align: VerticalAlign.Top },
-            right: { anchor: "__container__", align: HorizontalAlign.End }
-          })
-          .id('subTopImage')
+      Stack({ alignContent: Alignment.BottomEnd }) {
+        // 三个图，
+        GridRow({ gutter: 2 }) {
+          GridCol({ span: { xs: 8 } }) {
+            Image(this.contentDTO.fullColumnImgUrls[0].url)
+              .width(CommonConstants.FULL_WIDTH)
+              .aspectRatio(16 / 9)
+              .borderRadius({
+                topLeft: $r('app.float.image_border_radius'),
+                bottomLeft: $r('app.float.image_border_radius'),
+              })
+          }
 
-        Image(this.contentDTO.fullColumnImgUrls[2].url)
-          .width('33%')
-          .aspectRatio(16 / 9)
-          .alignRules({
-            right: { anchor: "__container__", align: HorizontalAlign.End },
-            bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
-          })
-          .id('subBottomImage')
-        // 下面是渲染右下角图标
-        Shape() {
-          Rect().width(33).height(18)
+          GridCol({ span: { xs: 4 } }) {
+            Image(this.contentDTO.fullColumnImgUrls[1].url)
+              .width(CommonConstants.FULL_WIDTH)
+              .aspectRatio(16 / 9)
+              .margin({ bottom: 1 })
+              .borderRadius({
+                topRight: $r('app.float.image_border_radius'),
+              })
+          }
         }
-        .fill(0x000000)
-        .fillOpacity(0.3)
-        .strokeLineCap(LineCapStyle.Round)
-        .strokeLineJoin(LineJoinStyle.Round)
-        .antiAlias(true)
-        .id('shape')
-        .alignRules({
-          right: { anchor: "__container__", align: HorizontalAlign.End },
-          bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
-        })
-        .margin({
-          right: 4,
-          bottom: 4
-        })
 
-        Image($r('app.media.album_card_shape'))
-          .width(22)
-          .height(18)
-          .alignRules({
-            left: { anchor: "shape", align: HorizontalAlign.Start },
-            top: { anchor: "shape", align: VerticalAlign.Top }
-          })
-          .id('shapeSubImage')
+        GridRow({ gutter: 2 }) {
+          GridCol({ span: { xs: 8 } }) {
+          }
+
+          GridCol({ span: { xs: 4 } }) {
+            Image(this.contentDTO.fullColumnImgUrls[2].url)
+              .width(CommonConstants.FULL_WIDTH)
+              .aspectRatio(16 / 9)
+              .margin({ top: 1 })
+              .borderRadius({
+                bottomRight: $r('app.float.image_border_radius'),
+              })
+          }
+        }
 
-        Text(this.contentDTO.fullColumnImgUrls.length + '')
-          .fontSize(13)
-          .fontColor(0xFFFFFF)
-          .id('pageIndex')
-          .alignRules({
-            right: { anchor: "shape", align: HorizontalAlign.End },
-            top: { anchor: "shape", align: VerticalAlign.Top }
-          })
-          .margin({ right: 2 })
-          .textAlign(TextAlign.Center)
-          .width(17)
-          .height(17)
+        CardMediaInfo({ contentDTO: this.contentDTO })
       }
       .width(CommonConstants.FULL_WIDTH)
-      .aspectRatio(24 / 9)
       .onClick((event: ClickEvent) => {
         let taskAction: Action = {
           type: 'JUMP_DETAIL_PAGE',
@@ -112,23 +85,17 @@ export struct Card17Component {
       Row() {
         if (this.contentDTO.source) {
           Text(this.contentDTO.source)
-            .fontSize(13)
-            .fontColor(0xB0B0B0)
+            .fontSize($r('app.float.font_size_13'))
+            .fontColor($r('app.color.color_B0B0B0'))
           Image($r('app.media.point'))
             .width(16)
             .height(16)
         }
         if (this.contentDTO.publishTime && this.contentDTO.publishTime.length === 13) {
           Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
-            .fontSize(13)
-            .fontColor(0xB0B0B0)
+            .fontSize($r('app.float.font_size_13'))
+            .fontColor($r('app.color.color_B0B0B0'))
         }
-        Text('328评')
-          .fontSize(13)
-          .fontColor(0xB0B0B0)
-          .margin({
-            left: 6
-          })
       }
       .width(CommonConstants.FULL_WIDTH)
       .height(16)
@@ -136,10 +103,10 @@ export struct Card17Component {
     }
     .width(CommonConstants.FULL_WIDTH)
     .padding({
-      top: 14,
-      left: 16,
-      right: 16,
-      bottom: 14
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
     })
   }
 }
\ No newline at end of file

+import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean';
+import { RmhTitle } from '../cardCommon/RmhTitle'
+
+const TAG = 'Card19Component';
+
+/**
+ * 人民号-动态---19：动态图文卡人民号； 从无图--9图
+ */
+@Component
+export struct Card19Component {
+  @State contentDTO: ContentDTO = {
+      // appStyle: '19',
+      // coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
+      // fullColumnImgUrls: [
+      //   {
+      //     fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/quality,q_90/auto-orient,1',
+      //     height: 1500,
+      //     landscape: 1,
+      //     size: 1,
+      //     url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
+      //     weight: 2000
+      //   },
+      //   {
+      //     fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/quality,q_90/auto-orient,1',
+      //     height: 1500,
+      //     landscape: 1,
+      //     size: 1,
+      //     url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
+      //     weight: 2000
+      //   },
+      //   {
+      //     fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/quality,q_90/auto-orient,1',
+      //     height: 1280,
+      //     landscape: 1,
+      //     size: 1,
+      //     url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
+      //     weight: 1707
+      //   },
+      //   {
+      //     fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/quality,q_90/auto-orient,1',
+      //     height: 1280,
+      //     landscape: 1,
+      //     size: 1,
+      //     url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
+      //     weight: 1707
+      //   }
+      // ],
+      // newsSummary: '#平安建设双提升#【进工地，送安全】3月21日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
+      // newsTitle: '#平安建设双提升#【进工地，送安全】3月21日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
+      // publishTime: '1711185754000',
+      // relType: '1',
+      // rmhInfo: {
+      //   authIcon: '',
+      //   authTitle: '',
+      //   authTitle2: '',
+      //   banControl: 0,
+      //   cnIsAttention: 1,
+      //   cnIsComment: 1,
+      //   cnIsLike: 1,
+      //   cnMainControl: 1,
+      //   cnShareControl: 1,
+      //   posterShareControl: 1,
+      //   rmhDesc: '合肥市公安局官方人民号',
+      //   rmhHeadUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/vod/content/202302/202302Sa121448724/TUw.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
+      //   rmhId: '4255290',
+      //   rmhName: '合肥警方',
+      //   userId: '513697181730757',
+      //   userType: '2'
+      // }
+  } as ContentDTO
+
+  aboutToAppear(): void {
+  }
+
+  build() {
+    Column() {
+      // rmh信息
+      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
+      // 标题
+      if (this.contentDTO.newsTitle) {
+        Text(this.contentDTO.newsTitle)
+          .fontSize($r('app.float.font_size_17'))
+          .fontColor($r('app.color.color_222222'))
+          .textOverflowStyle(2)
+          .margin({ bottom: 8 })
+      }
+      // 图片-从无图到9图展示
+      createImg({ fullColumnImgUrls: this.contentDTO.fullColumnImgUrls })
+      //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+  }
+}
+
+interface radiusType {
+  topLeft: number | Resource;
+  topRight: number | Resource;
+  bottomLeft: number | Resource;
+  bottomRight: number | Resource;
+}
+
+@Component
+struct createImg {
+  @Prop fullColumnImgUrls: FullColumnImgUrlDTO[]
+  aboutToAppear(): void {
+    if(this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度，加一个占位
+      this.fullColumnImgUrls.splice(2,0, {
+        fullUrl: ''
+      } as FullColumnImgUrlDTO)
+    }
+  }
+  caclImageRadius(index: number) {
+    let radius: radiusType = {
+      topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
+      topRight: 0,
+      bottomLeft: 0,
+      bottomRight: 0,
+    }
+    if (this.fullColumnImgUrls.length === 1) {
+      radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0
+      radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
+      radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0
+    } else if (this.fullColumnImgUrls.length === 5 && !this.fullColumnImgUrls[2].fullUrl) {
+      radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
+      radius.bottomLeft = index === 3 ? $r('app.float.image_border_radius') : 0
+      radius.bottomRight = index === 4 ? $r('app.float.image_border_radius') : 0
+    } else {
+      radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
+      radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0
+      radius.bottomRight = index === 8 ? $r('app.float.image_border_radius') : 0
+    }
+    return radius
+  }
+
+  build() {
+    GridRow({
+      gutter: { x: 2, y: 2 }
+    }) {
+      ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
+        if (this.fullColumnImgUrls.length === 1) {
+          GridCol({
+            span: { xs: 8 }
+          }) {
+            Image(item.fullUrl)
+              .width('100%')
+              .borderRadius(this.caclImageRadius(index))
+          }
+        } else if (this.fullColumnImgUrls.length === 4) {
+          GridCol({
+            span: { xs: 4 }
+          }) {
+            Image(item.fullUrl)
+              .aspectRatio(1)
+              .borderRadius(this.caclImageRadius(index))
+          }
+        } else {
+          GridCol({
+            span: { sm: 4, lg: 3 }
+          }) {
+            Image(item.fullUrl)
+              .aspectRatio(1)
+              .borderRadius(this.caclImageRadius(index))
+          }
+        }
+      })
+    }
+  }
+}
+
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}
\ No newline at end of file

+import { ContentDTO } from 'wdBean';
+import { RmhTitle } from '../cardCommon/RmhTitle'
+import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
+import { CommonConstants } from 'wdConstant/Index';
+
+const TAG = 'Card20Component';
+
+/**
+ * 人民号-动态---20：动态视频卡人民号   分横屏和竖屏；
+ */
+@Component
+export struct Card20Component {
+  @State contentDTO: ContentDTO = {
+    // appStyle: '20',
+    // coverType: 1,
+    // coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
+    // fullColumnImgUrls: [
+    //   {
+    //     landscape: 1,
+    //     size: 1,
+    //     url: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
+    //     weight: 1600
+    //   }
+    // ],
+    // newsTitle: '好玩！》',
+    // rmhInfo: {
+    //   authIcon:
+    //   'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',
+    //   authTitle: '10后音乐人王烁然个人人民号',
+    //   authTitle2: '10后音乐人王烁然个人人民号',
+    //   banControl: 0,
+    //   cnIsAttention: 1,
+    //   rmhDesc: '10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
+    //   rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn/image/creator/rmh/20221031/3d3419e86a.jpeg?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
+    //   rmhName: '王烁然',
+    //   userId: '522435359667845',
+    //   userType: '2'
+    // },
+    // objectType: '1',
+    // videoInfo: {
+    //   firstFrameImageUri: '',
+    //   videoDuration: 37,
+    //   videoUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/mp4/202105/rmrb_GSNARt6P1622451310.mp4'
+    // }
+  } as ContentDTO;
+
+  aboutToAppear(): void {
+  }
+
+  build() {
+    Column() {
+      // rmh信息
+      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
+      // 标题
+      if (this.contentDTO.newsTitle) {
+        Text(this.contentDTO.newsTitle)
+          .fontSize($r('app.float.font_size_17'))
+          .fontColor($r('app.color.color_222222'))
+          .width(CommonConstants.FULL_WIDTH)
+          .textOverflowStyle(2)
+          .margin({ bottom: 8 })
+      }
+      if (this.contentDTO.fullColumnImgUrls[0]) {
+        createImg({ contentDTO: this.contentDTO })
+      }
+      //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+  }
+}
+
+interface radiusType {
+  topLeft: number | Resource;
+  topRight: number | Resource;
+  bottomLeft: number | Resource;
+  bottomRight: number | Resource;
+}
+
+@Component
+struct createImg {
+  @Prop contentDTO: ContentDTO
+
+  build() {
+    GridRow() {
+      if (this.contentDTO.fullColumnImgUrls[0].landscape === 1) {
+        // 横屏
+        GridCol({
+          span: { xs: 12 }
+        }) {
+          Stack() {
+            Image(this.contentDTO.coverUrl)
+              .width(CommonConstants.FULL_WIDTH)
+              .aspectRatio(16 / 9)
+              .borderRadius($r('app.float.image_border_radius'))
+            CardMediaInfo({ contentDTO: this.contentDTO })
+          }
+          .align(Alignment.BottomEnd)
+        }
+      } else {
+        // 竖图显示，宽度占50%，高度自适应
+        GridCol({
+          span: { xs: 6 }
+        }) {
+          Stack() {
+            Image(this.contentDTO.coverUrl)
+              .width(CommonConstants.FULL_WIDTH)
+              .borderRadius($r('app.float.image_border_radius'))
+            CardMediaInfo({ contentDTO: this.contentDTO })
+          }
+          .align(Alignment.BottomEnd)
+        }
+      }
+    }
+  }
+}
+
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}
\ No newline at end of file

 //全标题 "appStyle":"2",
 import { ContentDTO } from 'wdBean';
+import { CommonConstants } from 'wdConstant/Index';
+import { DateTimeUtils } from 'wdKit/Index';
 import { ProcessUtils } from '../../utils/ProcessUtils';
-
+import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 
 const TAG: string = 'Card2Component';
 
@@ -12,55 +14,50 @@ const TAG: string = 'Card2Component';
  * 卡片宽度:充满父窗口
  * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
  */
-// @Entry
 @Component
 export struct Card2Component {
-  @State contentDTO: ContentDTO = {} as ContentDTO;
+  @State contentDTO: ContentDTO = {
+    // appStyle: '2',
+    // objectType: '1',
+    // coverUrl:
+    // 'https://rmrbcmsonline.peopleapp.com/upload/image/202404/202404141115457926.png?x-oss-process=image/resize,m_fill,h_450,w_800/quality,q_90',
+    // newsTitle: '又见花开！新疆伊犁花海延绵清新怡人',
+    // publishTime: '1713067227000',
+    // source: '荔枝新闻',
+    // videoInfo: {
+    //   videoDuration: 25,
+    //   videoLandscape: 1,
+    //   videoUrl:
+    //   'https://rmrbcmsonline.peopleapp.com/upload/video/mp4/202404/1713064515901314d148763996.mp4'
+    // }
+  } as ContentDTO;
 
   build() {
     Column() {
-
       Column() {
         //新闻标题
         Text(this.contentDTO.newsTitle)
-          .fontSize(17)
-          .fontColor('#222222')
+          .fontSize($r('app.float.font_size_17'))
+          .fontColor($r('app.color.color_222222'))
           .maxLines(3)
           .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
           .align(Alignment.Start)
         //大图
         Stack() {
           Image(this.contentDTO.coverUrl)
-            .borderRadius(4)
-
-
+            .width(CommonConstants.FULL_WIDTH)
+            .aspectRatio(16 / 9)
+            .borderRadius($r('app.float.image_border_radius'))
           //播放状态+时长
-          Row() {
-            Image($r('app.media.icon_live'))
-              .width(22)
-              .height(18)
-
-            Stack() {
-              Text('直播中')
-                .fontColor('#FFFFFF')
-                .fontSize(11)
-            }
-            .width(44)
-            .height(18)
-            .backgroundColor('#4d000000')
-          }.margin({ right: 8, bottom: 8 })
-
+          CardMediaInfo({
+            contentDTO: this.contentDTO
+          })
         }
-        .width('100%')
-        .height(192)
         .alignContent(Alignment.BottomEnd)
         .margin({ top: 8 })
-
       }
-      .width('100%')
-      .justifyContent(FlexAlign.Start)
+      .width(CommonConstants.FULL_WIDTH)
       .alignItems(HorizontalAlign.Start)
-      .padding({ top: 14 })
 
       //bottom
       Row() {
@@ -71,22 +68,21 @@ export struct Card2Component {
           .width(12)
           .height(12)
 
-        Text(this.contentDTO.source)
-          .bottomTextStyle()
-        Text(' ')
-
-        Text(this.contentDTO.subtitle)
+        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
           .bottomTextStyle()
-
       }
-      .width('100%')
+      .width(CommonConstants.FULL_WIDTH)
       .height(18)
       .justifyContent(FlexAlign.Start)
-      // .padding({bottom:14})
       .margin({ top: 8 })
     }
-    .width('100%')
-    .padding({ left: 16, right: 16 })
+    .width(CommonConstants.FULL_WIDTH)
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
     .onClick((event: ClickEvent) => {
       ProcessUtils.processPage(this.contentDTO)
     })

@@ -5,10 +5,21 @@ import { ProcessUtils } from '../../utils/ProcessUtils';
 
 /**
  * 卡片样式："appStyle":"3"
+ * Card_03 = '3', // 无图卡(全标题)
  */
 @Component
 export struct Card3Component {
-  @State contentDTO: ContentDTO = {} as ContentDTO;
+  @State contentDTO: ContentDTO = {
+    // appStyle: '3',
+    // channelId: '2002',
+    // newsTitle: '习近平向斯洛伐克当选总统佩',
+    // objectId: '30044351686',
+    // objectType: '8',
+    // publishTime: '1712967589000',
+    // relId: '500005307414',
+    // relType: '1',
+    // source: '新华社',
+  } as ContentDTO;
 
   build() {
     Column() {
@@ -17,35 +28,37 @@ export struct Card3Component {
         .fontColor($r("app.color.color_222222"))
         .width(CommonConstants.FULL_WIDTH)
       Row() {
-        Text("锐评")
-          .fontSize($r("app.float.font_size_12"))
-          .fontColor($r("app.color.color_ED2800"))
-        Text(this.contentDTO.source)
-          .fontSize($r("app.float.font_size_12"))
-          .fontColor($r("app.color.color_B0B0B0"))
-          .margin({ left: 6 })
-        Image($r("app.media.point"))
-          .width(16)
-          .height(16)
-
-        Text(DateTimeUtils.formatDate(Number.parseFloat(this.contentDTO.publishTime)))
+        // TODO "锐评"取得哪个字段，什么时候显示。
+        // Text("锐评")
+        //   .fontSize($r("app.float.font_size_12"))
+        //   .fontColor($r("app.color.color_ED2800"))
+        if(this.contentDTO.source) {
+          Text(this.contentDTO.source)
+            .fontSize($r("app.float.font_size_12"))
+            .fontColor($r("app.color.color_B0B0B0"))
+          Image($r("app.media.point"))
+            .width(16)
+            .height(16)
+        }
+        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
           .fontSize($r("app.float.font_size_12"))
           .fontColor($r("app.color.color_B0B0B0"))
-
+          .margin({ right: 6 })
+        // TODO '评论取哪个字段'
+        // Text(`1806评`)
+        //   .fontSize($r("app.float.font_size_12"))
+        //   .fontColor($r("app.color.color_B0B0B0"))
       }.width(CommonConstants.FULL_WIDTH)
       .justifyContent(FlexAlign.Start)
       .margin({ top: 8 })
-
     }
-    .width("100%")
+    .width(CommonConstants.FULL_WIDTH)
     .padding({
-      top: 14,
-      left: 16,
-      right: 16,
-      bottom: 14
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
     })
-    .backgroundColor($r("app.color.white"))
-    .margin({ bottom: 8 })
     .onClick((event: ClickEvent) => {
       ProcessUtils.processPage(this.contentDTO)
     })

-//全标题 "appStyle":"4",
-import { ContentDTO } from 'wdBean';
+import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean';
+import { CommonConstants } from 'wdConstant/Index';
 import { ProcessUtils } from '../../utils/ProcessUtils';
+import { DateTimeUtils } from 'wdKit/Index';
 
 const TAG: string = 'Card4Component';
 
@@ -13,50 +14,100 @@ const TAG: string = 'Card4Component';
  */
 @Component
 export struct Card4Component {
-  @State contentDTO: ContentDTO = {} as ContentDTO;
+  @State contentDTO: ContentDTO = {
+    // appStyle: '4',
+    // fullColumnImgUrls: [
+    //   {
+    //     format: null,
+    //     fullUrl: '',
+    //     height: 187,
+    //     landscape: 1,
+    //     size: 1,
+    //     url: 'https://rmrbcmsonline.peopleapp.com/upload/article_resource/image/1648118198_0c20f7c31c7b4eca6b0d0871e7771c62.png?x-oss-process=image/resize,m_fill,h_160,w_240/quality,q_90',
+    //     weight: 248
+    //   },
+    //   {
+    //     format: null,
+    //     fullUrl: '',
+    //     height: 187,
+    //     landscape: 1,
+    //     size: 1,
+    //     url: 'https://rmrbcmsonline.peopleapp.com/upload/article_resource/image/1648118198_0c20f7c31c7b4eca6b0d0871e7771c62.png?x-oss-process=image/resize,m_fill,h_160,w_240/quality,q_90',
+    //     weight: 248
+    //   },
+    //   {
+    //     format: null,
+    //     fullUrl: '',
+    //     height: 187,
+    //     landscape: 1,
+    //     size: 1,
+    //     url: 'https://rmrbcmsonline.peopleapp.com/upload/article_resource/image/1648118200_d10309bee894a67311e6c8f77df676d4.png?x-oss-process=image/resize,m_fill,h_160,w_240/quality,q_90',
+    //     weight: 248
+    //   },
+    //   {
+    //     format: null,
+    //     fullUrl: '',
+    //     height: 187,
+    //     landscape: 1,
+    //     size: 1,
+    //     url: 'https://rmrbcmsonline.peopleapp.com/upload/article_resource/image/1648118202_f33743e452fb69ee2c45c18a56eccdf6.png?x-oss-process=image/resize,m_fill,h_160,w_240/quality,q_90',
+    //     weight: 248
+    //   }
+    // ],
+    // newsTitle: '科普：如何发现家中是否有白蚁危害？丨又到白蚁分飞季②',
+    // rmhInfo: {
+    //   authIcon:
+    //   'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/blue.png',
+    //   authTitle: '封面新闻',
+    //   rmhDesc: '封面新闻，亿万年轻人的生活方式。',
+    //   rmhHeadUrl:
+    //   'https://cdnjdphoto.aikan.pdnews.cn/image/creator/rmh/20221212/122faff796.jpeg?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
+    //   rmhId: '2016608',
+    //   rmhName: '封面新闻',
+    //   userId: '522390888224390',
+    //   userType: '2'
+    // },
+    // source: '头条号',
+    // publishTime: '1651204607000',
+  } as ContentDTO;
 
   build() {
     Column() {
-
-
       //body
       Column() {
         //新闻标题
         Text(this.contentDTO.newsTitle)
-          .fontSize(17)
-          .fontColor('#222222')
+          .fontSize($r('app.float.font_size_17'))
+          .fontColor($r('app.color.color_222222'))
           .maxLines(3)
           .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
         //三图
         Row() {
-          Image(this.contentDTO.fullColumnImgUrls[0]?.url)
-            .width('32%')
-
-            .height(75)
-            .borderRadius({ topLeft:4,bottomLeft:4 })
-
-          Image(this.contentDTO.fullColumnImgUrls[1]?.url)
-            .width('32%')
-            .height(75)
-
-          Image(this.contentDTO.fullColumnImgUrls[2]?.url)
-            .width('32%')
-            .height(75)
-            .borderRadius({ topRight:4,bottomRight:4 })
-
+          GridRow({ gutter: 2 }) {
+            ForEach(this.contentDTO.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
+              if (index < 3) {
+                GridCol({ span: { xs: 4 } }) {
+                  Image(item.url)
+                    .width('100%')
+                    .aspectRatio(113 / 75)
+                    .borderRadius({
+                      topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
+                      topRight: index === 2 ? $r('app.float.image_border_radius') : 0,
+                      bottomLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
+                      bottomRight: index === 2 ? $r('app.float.image_border_radius') : 0,
+                    })
+                }
+              }
+            })
+          }
         }
-        .justifyContent(FlexAlign.SpaceBetween)
         .width('100%')
-        .height(75)
-        .margin({top:8})
-        .borderRadius(8)
-
+        .margin({ top: 8 })
       }
       .width('100%')
       .justifyContent(FlexAlign.Start)
       .alignItems(HorizontalAlign.Start)
-      .padding({top:14})
-      .onClick((event: ClickEvent)=>{
+      .onClick((event: ClickEvent) => {
         ProcessUtils.processPage(this.contentDTO)
       })
 
@@ -69,31 +120,29 @@ export struct Card4Component {
         Image($r('app.media.point'))
           .width(12)
           .height(12)
-
-        Text(this.contentDTO.publishTime)
-          .bottomTextStyle()
-        Text(' ')
-
-        Text('518条评论')
+        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
           .bottomTextStyle()
-
+        // TODO 评论字段取值
+        // Text('518条评论')
+        //   .bottomTextStyle()
       }
       .width('100%')
-
       .justifyContent(FlexAlign.Start)
-      // .padding({bottom:14})
-      .margin({top:8})
-      .padding({bottom:14})
-
+      .margin({ top: 8 })
     }
-    .width('100%')
-    .padding({top:8,left:16,right:16})
-
+    .width(CommonConstants.FULL_WIDTH)
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
   }
 }
 
 
-@Extend(Text) function bottomTextStyle() {
+@Extend(Text)
+function bottomTextStyle() {
   .fontSize(12)
   .fontColor('#B0B0B0')
 }
\ No newline at end of file

@@ -5,11 +5,21 @@ import { ProcessUtils } from '../../utils/ProcessUtils';
 const TAG: string = 'Card5Component';
 
 /**
- * 卡片样式："appStyle":"5"
+ * 卡片样式："appStyle":"5" 头图卡
  */
+// @Entry
 @Component
 export struct Card5Component {
-  @State contentDTO: ContentDTO = {} as ContentDTO;
+  @State contentDTO: ContentDTO = {
+    // coverSize: '850*478',
+    // coverType: 1,
+    // coverUrl:
+    // 'https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20240323/image/display/54ce2de0d20842839e96a644c78361b7.jpg?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
+    // linkUrl:
+    // 'https://pd-people-uat.pdnews.cn/h/atv/collect/1000000472?hiddenNavigator=1',
+    // newsTitle: '今天是周日，天气阴天，明天是周一。',
+    // objectType: '6'
+  } as ContentDTO;
 
   build() {
     Stack() {
@@ -43,8 +53,12 @@ export struct Card5Component {
     }
     .alignContent(Alignment.Bottom)
     .width(CommonConstants.FULL_WIDTH)
-    .padding(
-      { top: 16, bottom: 16, left: 14, right: 14 })
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
     .onClick((event: ClickEvent) => {
       ProcessUtils.processPage(this.contentDTO)
     })

@@ -3,11 +3,11 @@ import { CommonConstants, CompStyle } from 'wdConstant';
 import { DateTimeUtils } from 'wdKit';
 import { ProcessUtils } from '../../utils/ProcessUtils';
 
-const TAG: string = 'Card6Component';
+const TAG: string = 'Card6Component-Card13Component';
 const FULL_PARENT: string = '100%';
 
 /**
- * 卡片样式："appStyle":"6"
+ * 卡片样式："appStyle":"6"以及13
  */
 @Component
 export struct Card6Component {

+import { RmhInfoDTO, ContentDTO, Params } from 'wdBean';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { HttpUrlUtils } from 'wdNetwork/Index';
+import { postInteractAccentionOperateParams } from 'wdBean';
+import { PageRepository } from '../../repository/PageRepository';
+import { CommonConstants } from 'wdConstant/Index';
+
+/**
+ * 人民号--推荐---没有关注的情况下，推荐的优质号主---ui称为：人民号冷启动卡
+ * RecommendAttentionRmh
+ */
+const TAG = 'RecommendAttentionRmh'
+
+interface RmhInfo extends RmhInfoDTO {
+  isSelected: boolean;
+  headPhotoUrl: string;
+  introduction: string;
+  userName: string;
+}
+
+@Entry
+@Component
+export struct RecommendAttentionRmh {
+  @State recommendRmhList: RmhInfo[] = [
+    // {
+    //   authIcon: 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/blue.png',
+    //   headPhotoUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/vod/content/202302/202302Sa121448724/TUw.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
+    //   introduction: '1。',
+    //   userName: '中国'
+    // } as RmhInfo,
+  ]
+  @State selectedCount: number = 0
+
+  @Builder
+  buildItemCard(item: RmhInfo) {
+    Column() {
+      Image(item.headPhotoUrl)
+        .width(44)
+        .aspectRatio(1 / 1)
+        .margin(16)
+      Text(item.userName)
+        .fontSize(13)
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .width('100%')
+  }
+
+  build() {
+    Column() {
+      //顶部
+      this.CompHeader()
+      GridRow({
+        gutter: 10,
+        columns: { sm: 3, md: 4, lg: 8 },
+        breakpoints: {
+          value: ['320vp', '520vp', '840vp'],
+          reference: BreakpointsReference.WindowSize
+        }
+      }) {
+        ForEach(this.recommendRmhList, (item: RmhInfo, index: number) => {
+          GridCol() {
+            CreatorItem({ item, index, list: $recommendRmhList, selectedCount: $selectedCount })
+          }
+        })
+      }
+
+      Button(`一键关注(${this.selectedCount})`, { type: ButtonType.Normal })
+        .borderRadius($r('app.float.button_border_radius'))
+        .height(36)
+        .backgroundColor($r('app.color.color_ED2800'))
+        .margin({ top: 20 })
+        .onClick(() => {
+          // TODO 调用一键关注的接口
+          const selectedLists = this.recommendRmhList.filter(item => {
+            console.log(`选中状态：${item.isSelected}`)
+            return item.isSelected !== false
+          })
+          console.log(JSON.stringify(selectedLists))
+        })
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+    .backgroundColor($r('app.color.white'))
+    .margin({ bottom: 8 })
+  }
+
+  @Builder
+  CompHeader() {
+    Row() {
+      Row() {
+        Image($r("app.media.redLine"))
+          .width(3)
+          .height(16)
+          .margin({ right: 4 })
+        Text('为你推荐优质号主')
+          .fontSize($r("app.float.font_size_17"))
+          .fontColor($r("app.color.color_222222"))
+          .fontWeight(600)
+      }
+
+      Row() {
+        Text("换一换")
+          .fontSize($r("app.float.font_size_14"))
+          .fontColor($r("app.color.color_999999"))
+          .margin({ right: 1 })
+        Image($r("app.media.ic_refresh"))
+          .width(14)
+          .height(14)
+          .onClick(() => {
+            // TODO 通知父组件，重新查询推荐数据
+          })
+      }
+      .padding({
+        right: $r('app.float.card_comp_pagePadding_lf'),
+      })
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .margin({ top: 8, bottom: 8 })
+    .width('100%')
+  }
+}
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}
+
+@Component
+struct CreatorItem {
+  @Prop item: RmhInfo
+  @Prop index: number
+  @Link list: RmhInfo[]
+  @Link selectedCount: number;
+  @State isSelected: boolean = true;
+
+  getSelectedCount() {
+    const selected = this.list.filter(item => {
+      return item.isSelected !== false
+    })
+    this.selectedCount = selected.length
+  }
+
+  aboutToAppear(): void {
+    this.getSelectedCount()
+  }
+
+  build() {
+    Column() {
+      Stack() {
+        Image(this.item.headPhotoUrl)
+          .width(44)
+          .height(44)
+        if (this.isSelected) {
+          Image($r('app.media.MyCollection_selected_icon'))
+            .width(16)
+            .height(16)
+        } else {
+          Image($r('app.media.ic_succeed_refresh'))
+            .width(16)
+            .height(16)
+        }
+      }
+      .margin({ top: 2, bottom: 5 })
+      .alignContent(Alignment.BottomEnd)
+
+      Flex({ justifyContent: FlexAlign.Center }) {
+        Text(this.item.userName)
+          .fontColor($r('app.color.color_222222'))
+          .fontSize($r('app.float.font_size_14'))
+          .fontWeight(500)
+          .textOverflowStyle(1)
+          .textAlign(TextAlign.Center)
+        Image(this.item.authIcon)
+          .width(14)
+          .height(14)
+          .borderRadius(50)
+          .flexShrink(0)
+      }
+      .width(CommonConstants.FULL_WIDTH)
+
+      Text(this.item.introduction)
+        .fontColor($r('app.color.color_B0B0B0'))
+        .fontSize($r('app.float.font_size_12'))
+        .margin({ top: 8, bottom: 14 })
+        .textOverflowStyle(2)
+        .textAlign(TextAlign.Center)
+    }
+    .padding({ left: 6, right: 6 })
+    .width('100%')
+    .onClick(() => {
+      // 选中或者取消选中
+      this.isSelected = !this.isSelected
+      this.list[this.index].isSelected = this.isSelected
+      this.getSelectedCount()
+    })
+  }
+}

+import { CompDTO, ContentDTO } from 'wdBean';
+import { CommonConstants } from 'wdConstant/Index';
+
+const TAG = 'Zh_Grid_Layout-02';
+const FULL_PARENT: string = '100%';
+let listSize: number = 2;
+
+/**
+ * 双图卡
+ * 枚举值Zh_Grid_Layout-02
+ * Zh_Grid_Layout-02
+ *
+ */
+@Preview
+@Component
+export struct ZhGridLayout02 {
+  @State compDTO: CompDTO = {} as CompDTO
+
+  aboutToAppear() {
+    if (this.compDTO.operDataList) {
+      listSize = this.compDTO.operDataList.length > 5 ? 2 : this.compDTO.operDataList.length;
+    }
+  }
+
+  build() {
+    Column() {
+      Row() {
+        Image($r("app.media.redLine"))
+          .width(3)
+          .height(16)
+          .margin({ right: 4 })
+        Text(this.compDTO.objectTitle)
+          .fontSize($r("app.float.font_size_17"))
+          .fontColor($r("app.color.color_222222"))
+          .fontWeight(600)
+      }
+      .justifyContent(FlexAlign.Start)
+      .margin({ top: 8, bottom: 8 })
+      .width(CommonConstants.FULL_WIDTH)
+
+
+      GridRow({
+        columns: { sm: listSize, md: 2 },
+        breakpoints: { value: ['320vp', '520vp', '840vp'] }
+      }) {
+        ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
+          GridCol() {
+            this.buildItemCard(this.compDTO.operDataList[index]);
+          }
+        })
+      }
+    }
+    .width(CommonConstants.FULL_WIDTH)
+    .padding({
+      top: 14,
+      left: 16,
+      right: 16
+    })
+
+  }
+
+  /**
+   * 组件项
+   *
+   * @param programmeBean item 组件项, 上面icon,下面标题
+   */
+  @Builder
+  buildItemCard(item: ContentDTO) {
+    Column() {
+      Image(item.fullColumnImgUrls[0].url)
+        .width(170)
+        .height(95)
+        .margin(16)
+      Text(item.newsTitle)
+        .fontSize(13)
+        .maxLines(2)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .width('100%')
+  }
+}
+
+

@@ -8,7 +8,6 @@ const TAG = 'Zh_Single_Column-04';
  * 人民号主题卡
  * 枚举值 Zh_Single_Column-04
  */
-@Entry
 @Component
 export struct ZhSingleColumn04 {
   @State compDTO: CompDTO = {} as CompDTO

@@ -8,20 +8,35 @@ const TAG = 'Zh_Single_Column-05';
  * 人民号入住卡
  * 枚举值 Zh_Single_Column-05
  */
-@Entry
 @Component
 export struct ZhSingleColumn05 {
   @State compDTO: CompDTO = {} as CompDTO
 
   build() {
     Row() {
-      Image($r('app.media.rmh_join_log'))
-        .height(18)
-        .margin({ right: 10 })
-      Text('快速入住通道')
-      Image($r('app.media.arrow_icon_right'))
-        .width(16)
-        .height(16)
+      Row(){
+        Image($r('app.media.rmh_join_log'))
+          .height(18)
+          .margin({ right: 10 })
+        Text('快速入住通道')
+        Image($r('app.media.arrow_icon_right'))
+          .width(16)
+          .height(16)
+      }
+      .padding(10)
+      .width(CommonConstants.FULL_WIDTH)
+      .backgroundColor($r('app.color.color_F9F9F9'))
+      .justifyContent(FlexAlign.Center)
+      .borderRadius($r('app.float.button_border_radius'))
+      .onClick(() => {
+        let taskAction: Action = {
+          type: 'JUMP_H5_BY_WEB_VIEW',
+          params: {
+            url: this.compDTO.linkUrl
+          } as Params,
+        };
+        WDRouterRule.jumpWithAction(taskAction)
+      })
     }
     .width(CommonConstants.FULL_WIDTH)
     .padding({
@@ -30,17 +45,7 @@ export struct ZhSingleColumn05 {
       top: $r('app.float.card_comp_pagePadding_tb'),
       bottom: $r('app.float.card_comp_pagePadding_tb')
     })
-    .backgroundColor($r('app.color.color_fff'))
-    .justifyContent(FlexAlign.Center)
-    .onClick(() => {
-      let taskAction: Action = {
-        type: 'JUMP_H5_BY_WEB_VIEW',
-        params: {
-          url: this.compDTO.linkUrl
-        } as Params,
-      };
-      WDRouterRule.jumpWithAction(taskAction)
-    })
+
   }
 }
 

+import { CompDTO, ContentDTO, Params } from 'wdBean';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { HttpUrlUtils } from 'wdNetwork/Index';
+import { postInteractAccentionOperateParams } from 'wdBean';
+import { PageRepository } from '../../repository/PageRepository';
+import { CommonConstants } from 'wdConstant/Index';
+
+/**
+ * 人民号横划卡
+ * Zh_Single_Row-05
+ */
+const TAG = 'Zh_Single_Row-05'
+
+@Entry
+@Component
+export struct ZhSingleRow05 {
+  @State compDTO: CompDTO = {
+    // objectTitle: '创作者推荐',
+    // operDataList: [
+    //   {
+    //     rmhInfo: {
+    //       rmhId: '2489729',
+    //       rmhName: '陕西青年职业学院',
+    //       rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+    //       rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+    //         '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+    //     }
+    //   },
+    // ]
+  } as CompDTO
+
+  build() {
+    Column() {
+      //顶部
+      this.CompHeader(this.compDTO)
+      Row(){
+        // 列表内容
+        List({ space: 8 }) {
+          ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
+            CreatorItem({
+              item
+            })
+              .margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
+          })
+        }
+        .listDirection(Axis.Horizontal)
+      }
+      .width(CommonConstants.FULL_WIDTH)
+      .height(170)
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      // right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+    .backgroundColor($r('app.color.white'))
+    .margin({ bottom: 8 })
+  }
+
+  @Builder
+  CompHeader(item: CompDTO) {
+    Row() {
+      Row() {
+        Image($r("app.media.redLine"))
+          .width(3)
+          .height(16)
+          .margin({ right: 4 })
+        Text(item.objectTitle)
+          .fontSize($r("app.float.font_size_17"))
+          .fontColor($r("app.color.color_222222"))
+          .fontWeight(600)
+      }
+
+      Row() {
+        Text("更多")
+          .fontSize($r("app.float.font_size_14"))
+          .fontColor($r("app.color.color_999999"))
+          .margin({ right: 1 })
+        Image($r("app.media.more"))
+          .width(14)
+          .height(14)
+          .onClick(() => {
+            // TODO 跳转的页面，定义的入参可能不合理。推荐id: 41
+            let params: Params = {
+              pageID: "1"
+            }
+            WDRouterRule.jumpWithPage(WDRouterPage.followListPage, params)
+          })
+      }
+      .padding({
+        right: $r('app.float.card_comp_pagePadding_lf'),
+      })
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .margin({ top: 8, bottom: 8 })
+    .width('100%')
+  }
+}
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}
+
+@Component
+struct CreatorItem {
+  @Prop item: ContentDTO
+  @State rmhIsAttention: number = 0
+  build() {
+    ListItem() {
+      Column() {
+        Image(this.item.rmhInfo.rmhHeadUrl)
+          .width(44)
+          .height(44)
+          .margin({ top: 12, bottom: 8 })
+        Text(this.item.rmhInfo.rmhName)
+          .fontColor($r('app.color.color_222222'))
+          .fontSize($r('app.float.font_size_14'))
+          .fontWeight(500)
+          .textOverflowStyle(1)
+        Text(this.item.rmhInfo.rmhDesc)
+          .fontColor($r('app.color.color_B0B0B0'))
+          .fontSize($r('app.float.font_size_12'))
+          .margin({ top: 8, bottom: 14 })
+          .textOverflowStyle(2)
+        if (!this.rmhIsAttention) {
+          Text('关注')
+            .width(60)
+            .height(24)
+            .textAlign(TextAlign.Center)
+            .fontSize($r('app.float.font_size_12'))
+            .borderRadius($r('app.float.button_border_radius'))
+            .backgroundColor($r('app.color.color_ED2800'))
+            .fontColor($r('app.color.color_fff'))
+            .onClick(() => {
+              this.handleAccention(this.item, 1)
+            })
+        } else {
+          Text('已关注')
+            .width(60)
+            .height(24)
+            .borderWidth(1)
+            .textAlign(TextAlign.Center)
+            .fontSize($r('app.float.font_size_12'))
+            .borderRadius($r('app.float.button_border_radius'))
+            .borderColor($r('app.color.color_CCCCCC'))
+            .fontColor($r('app.color.color_CCCCCC'))
+            .onClick(() => {
+              this.handleAccention(this.item, 0)
+            })
+        }
+
+      }
+      .width(100)
+      .height(170)
+      .padding({ left: 6, right: 6 })
+      .borderWidth(1)
+      .borderColor($r('app.color.color_EDEDED'))
+      .borderRadius($r('app.float.image_border_radius'))
+    }
+    .onClick(() => {
+      console.log('跳转到rmh');
+    })
+  }
+
+  /**
+   * 关注号主 TODO 这里后面需要抽离
+   */
+  handleAccention(item: ContentDTO, status: number) {
+    this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
+    return
+    // 未登录，跳转登录
+    if (!HttpUrlUtils.getUserId()) {
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+
+    const params: postInteractAccentionOperateParams = {
+      attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
+      attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
+      attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
+      // userType: 1,
+      // userId: '1', // TODO 用户id需要从本地获取
+      status: status,
+    }
+    PageRepository.postInteractAccentionOperate(params).then(res => {
+      console.log(TAG, '关注号主==', JSON.stringify(res.data))
+      if (status === 1) {
+        this.rmhIsAttention = 0
+      } else {
+        this.rmhIsAttention = 1
+      }
+    })
+  }
+}

+import lottie, { AnimationSegment } from '@ohos/lottie';
+
+@Component
+export struct LottieView {
+  @Prop name: string = ''
+  @Prop path: string = ''
+  @Prop lottieWidth?: number = 30
+  @Prop lottieHeight?: number = 30
+  @Prop autoplay?: boolean = false
+  @Prop loop?: boolean = false
+  @Prop initialSegment?: AnimationSegment = [0, 120] // 动画起始帧
+  @Prop onReady: (animateItem: ESObject) => void // 动画初始化完成事件
+  @Prop onComplete?: () => void // 动画完成事件
+  private politeChickyController: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // CanvasRenderingContext2D对象
+  private animateItem: ESObject = null; // 初始化loadAnimation接口的返回对象
+
+  // 页面隐藏销毁动画
+  onPageHide(): void {
+    this.animateItem.destroy()
+
+    if (this.onComplete) {
+      this.animateItem.removeEventListener('complete', this.onComplete)
+    }
+  }
+
+  /**
+   * 加载动画
+   * @param autoplay 控制动画是否自动播放参数
+   */
+  loadAnimation() {
+    // 销毁动画，减少缓存
+    if (this.animateItem !== null) {
+      this.animateItem.destroy();
+      this.animateItem = null;
+    }
+
+    this.animateItem = lottie.loadAnimation({
+      container: this.politeChickyController,
+      renderer: 'canvas',
+      loop: this.loop,
+      autoplay: this.autoplay,
+      name: this.name, // 动画名称
+      path: this.path, // hap包内动画资源文件路径，仅支持json格式
+      // initialSegment: this.initialSegment
+    })
+    if (this.initialSegment) {
+      this.animateItem.initialSegment = this.initialSegment
+    }
+
+    if (this.onComplete) {
+      this.animateItem.addEventListener('complete', this.onComplete)
+    }
+
+  }
+
+  build() {
+    Stack({ alignContent: Alignment.TopStart }) {
+      Canvas(this.politeChickyController)
+        .width(this.lottieWidth)
+        .height(this.lottieHeight)
+        .onReady(() => {
+          this.loadAnimation();
+          if (this.onReady) {
+            this.onReady(this.animateItem)
+          }
+        })
+        .onClick(() => {
+          this.animateItem.play()
+        })
+    }
+  }
+}

@@ -53,6 +53,7 @@ export struct FollowSecondTabsComponent{
       .width('100%')
     }.width('100%')
     .alignItems(VerticalAlign.Top)
+    .backgroundColor('#0FF')
   }
 
   @Builder TabBuilder(index: number, item: FollowSecondListItem) {

@@ -7,16 +7,24 @@ import { CompUtils } from '../../utils/CompUtils';
 import PageViewModel from '../../viewmodel/PageViewModel';
 
 const TAG = 'BottomNavigationComponent';
+let storage = LocalStorage.getShared();
 
 /**
  * 底部页签导航栏/底导
  */
+@Entry(storage)
 @Component
 export struct BottomNavigationComponent {
+  @Provide bottomRectHeight: number = 0
+  @Provide topRectHeight: number = 0
+  @Provide isLayoutFullScreen: boolean = false
+  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
+  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
   // 底导/顶导全部数据
   @State @Watch('onBottomNavigationDataUpdated') bottomNavList: BottomNavDTO[] = []
   // 底导当前选中/焦点下标
   @State currentNavIndex: number = BottomNavi.NEWS;
+  @State barBackgroundColor: Color = Color.Transparent
   // 底导TabsController
   private navController: TabsController = new TabsController();
   readonly ASPECT_RATIO_1_1: number = 1 / 1; // 底导图片宽高比
@@ -51,20 +59,44 @@ export struct BottomNavigationComponent {
               // 我的页面组件数据列表
               MinePageComponent()
             } else {
-              TopNavigationComponent({ topNavList: navItem.topNavChannelList, _currentNavIndex: this.currentNavIndex })
+              TopNavigationComponent({
+                topNavList: navItem.topNavChannelList,
+                _currentNavIndex: this.currentNavIndex,
+                changeBarBackgroundColor: (color: Color) => {
+                  this.barBackgroundColor = color
+                }
+              })
             }
+
           }
         }
         .tabBar(this.tabBarBuilder(navItem, index))
       });
+
     }
     .barHeight($r('app.float.bottom_navigation_barHeight'))
     .barMode(BarMode.Fixed)
+    // TODO:更详细的判断是视频频道
+    .barBackgroundColor(this.barBackgroundColor)
     .onChange((index: number) => {
       Logger.info(TAG, `onChange, index: ${index}`);
       this.currentNavIndex = index;
       // this.onBottomNavigationIndexChange()
     })
+    .backgroundColor(this.barBackgroundColor)
+    .padding({ bottom: this.bottomRectHeight + 'px', top: this.topRectHeight + 'px' }) // 此处margin具体数值在实际中应与导航条区域高度保持一致
+
+  }
+
+  /**
+   * TODO:更详细的判断视频频道
+   */
+  getFontColor(index: number): Color {
+    if (this.currentNavIndex === 2 && this.barBackgroundColor === Color.Black) {
+      return Color.White
+    } else {
+      return this.currentNavIndex === index ? Color.Red : Color.Gray
+    }
   }
 
   @Builder
@@ -79,8 +111,8 @@ export struct BottomNavigationComponent {
         .margin({ bottom: $r('app.float.bottom_navigation_margin_bottom') })
         .fontWeight(this.currentNavIndex === index ? FontWeight.Bold : FontWeight.Normal)
         .textAlign(TextAlign.Center)
-        .fontSize($r('app.float.font_size_10'))
-        .fontColor(this.currentNavIndex === index ? Color.Red : Color.Gray)
+        .fontSize($r('app.float.font_size_10'))// .fontColor(this.currentNavIndex === index ? Color.Red : Color.Gray)
+        .fontColor(this.getFontColor(index))
         .opacity(this.currentNavIndex === index ? this.FULL_OPACITY : this.SIXTY_OPACITY)
     }
     .height($r('app.float.bottom_navigation_barHeight'))

@@ -288,14 +288,15 @@ struct ChannelDialog {
                 .justifyContent(FlexAlign.Center)
                 .backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '#ffffff')
                 .onClick(() => {
-                  if (this.isEditIng) {
-                    if (item.delPermitted === 1) {
-                      this.delChannelItem(index)
-                    }
-                  } else {
-                    this.confirm(index)
-                    this.controller?.close()
-                  }
+                   console.log('onTouch')
+                   if (this.isEditIng) {
+                     if (item.delPermitted === 1) {
+                       this.delChannelItem(index)
+                     }
+                   } else {
+                     this.confirm(index)
+                     this.controller?.close()
+                   }
                 })
               }
               .width('23%')

-import { CommonConstants, ViewType } from 'wdConstant';
+
 import { Logger, DateTimeUtils, CollectionUtils } from 'wdKit';
+import { CommonConstants, CompStyle, ViewType } from 'wdConstant';
 import PageViewModel from '../../viewmodel/PageViewModel';
 import { EmptyComponent } from '../view/EmptyComponent';
 import { ErrorComponent } from '../view/ErrorComponent';
@@ -11,8 +12,10 @@ import NoMoreLayout from './NoMoreLayout';
 import LoadMoreLayout from './LoadMoreLayout';
 import CustomRefreshLoadLayout from './CustomRefreshLoadLayout';
 import { CompParser } from '../CompParser';
-import { CompDTO,PageInfoDTO } from 'wdBean';
 import { GroupInfoDTO } from 'wdBean/src/main/ets/bean/navigation/PageInfoDTO';
+import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
+import { CompDTO, LiveReviewDTO, PageDTO ,PageInfoDTO} from 'wdBean';
+
 
 const TAG = 'PageComponent';
 
@@ -22,6 +25,23 @@ export struct PageComponent {
   navIndex: number = 0;
   pageId: string = "";
   channelId: string = "";
+  pageNum: number = 1;
+  isFirstIn: boolean = true
+  pageDto: PageDTO = {
+    pageId: '',
+    id: 0,
+    name: '',
+    branchMark: false,
+    compList: []
+  }
+  liveReviewDTO: LiveReviewDTO = {
+    hasNext: false,
+    pageNum: 0,
+    pageSize: 0,
+    totalCount: 0,
+    list: []
+  };
+  name: string = "";
   @Link @Watch('onChange') currentTopNavSelectedIndex: number
 
   build() {
@@ -63,7 +83,12 @@ export struct PageComponent {
       LazyForEach(this.pageModel.compList, (compDTO: CompDTO, compIndex: number) => {
         ListItem() {
           Column() {
-            CompParser({ compDTO: compDTO, compIndex: compIndex });
+            if (this.name == '视频') {
+              VideoChannelDetail()
+            } else {
+              CompParser({ compDTO: compDTO, compIndex: compIndex });
+            }
+
           }
         }
       },
@@ -95,63 +120,88 @@ export struct PageComponent {
 
   @Builder
   LoadingLayout() {
-    CustomRefreshLoadLayout({ refreshBean: new RefreshLayoutBean(true,
-      $r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight) })
+    CustomRefreshLoadLayout({
+      refreshBean: new RefreshLayoutBean(true,
+        $r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight)
+    })
   }
 
   async aboutToAppear() {
     // 选中tab，才请求数据。拦截大量接口请求
-    if (this.navIndex === this.currentTopNavSelectedIndex) {
+    if (this.navIndex === 0 && this.navIndex === this.currentTopNavSelectedIndex) {
       this.getData();
+    } else if (this.navIndex === 1) {
+      this.getPreviewData()
     }
+
   }
 
   onChange() {
-    Logger.info(TAG, `onChangezz id: ${this.pageId} , ${this.channelId} , ${this.navIndex} , navIndex: ${this.currentTopNavSelectedIndex}`);
-    if (this.navIndex === this.currentTopNavSelectedIndex) {
+    Logger.info(TAG, `onChangezz id: ${this.pageId} , ${this.channelId} , ${this.navIndex} , ${this.isFirstIn} , navIndex: ${this.currentTopNavSelectedIndex}`);
+    if (this.navIndex === this.currentTopNavSelectedIndex && !this.isFirstIn) {
       this.getData();
     }
   }
 
+  /**
+   * 要按顺序处理pageInfo.groups中的每个元素，并确保每个异步操作完成后再继续执行下一个，你应该避免使用forEach。
+   * 取而代之的是，你可以使用for...of循环，并配合async/await来确保按顺序执行操作。
+   * */
   async getData() {
     Logger.info(TAG, `getData id: ${this.pageId} , ${this.channelId} , navIndex: ${this.currentTopNavSelectedIndex}`);
     this.pageModel.pageId = this.pageId;
     this.pageModel.groupId = this.pageId;
     this.pageModel.channelId = this.channelId;
     this.pageModel.currentPage = 1;
-    let pageInfo = await PageViewModel.getPageInfo(this.pageModel.pageId);
+    let pageInfo = await PageViewModel.getPageUrlData(this.pageModel.pageId);
     if (pageInfo == null) {
       this.pageModel.viewType = ViewType.EMPTY;
       return;
     }
-
     let groupInfo: GroupInfoDTO = CollectionUtils.getElement(pageInfo.groups, 0);
     if (groupInfo != null) {
       this.pageModel.isRecGroup = groupInfo.groupStrategy === 1;
       this.pageModel.groupId = groupInfo.id;
     }
+    // pageInfo.groups.forEach(async (group) => { 不能按顺序加载用for...of替代
+    // for (const group of pageInfo.groups) {
+      this.pageDto = await PageViewModel.getPageData(this.pageModel, getContext(this))
+      this.pageModel.timestamp = DateTimeUtils.getTimeStamp().toString()
+      if (this.pageDto && this.pageDto.compList && this.pageDto.compList.length > 0) {
+        this.pageDto.compList.forEach((comp) => {
+          if (comp.compStyle === CompStyle.Zh_Grid_Layout_02 && this.liveReviewDTO && this.liveReviewDTO.list && this.liveReviewDTO.list.length > 0) {
+            comp.operDataList.push(...this.liveReviewDTO.list)
+          }
+        })
 
-    let pageDto = await PageViewModel.getPageData(this.pageModel, getContext(this))
-    this.pageModel.timestamp = DateTimeUtils.getTimeStamp().toString()
-    if (pageDto && pageDto.compList && pageDto.compList.length > 0) {
-      this.pageModel.viewType = ViewType.LOADED;
-      this.pageModel.compList.push(...pageDto.compList)
-      if (pageDto.compList.length === this.pageModel.pageSize) {
-        this.pageModel.currentPage++;
-        this.pageModel.hasMore = true;
-      } else {
-        this.pageModel.hasMore = false;
-      }
-      // 二次请求，批查互动数据
-      PageViewModel.getInteractData(pageDto.compList).then((data: CompDTO[]) => {
-        // 刷新，替换所有数据
-        this.pageModel.compList.replaceAll(...data)
-        this.pageModel.timestamp = DateTimeUtils.getTimeStamp().toString()
-      })
-    } else {
-      Logger.debug(TAG, 'aboutToAppear, data response page ' + this.pageId + ', comp list is empty.');
-      this.pageModel.viewType = ViewType.EMPTY;
+        this.pageModel.viewType = ViewType.LOADED;
+        this.pageModel.compList.push(...this.pageDto.compList)
+        if (this.pageDto.compList.length === this.pageModel.pageSize) {
+          this.pageModel.currentPage++;
+          this.pageModel.hasMore = true;
+        } else {
+          this.pageModel.hasMore = false;
+        }
+        // // 二次请求，批查互动数据
+        // PageViewModel.getInteractData(pageDto.compList).then((data: CompDTO[]) => {
+        //   // 刷新，替换所有数据
+        //   this.pageModel.compList.replaceAll(...data)
+        //   this.pageModel.timestamp = DateTimeUtils.getTimeStamp().toString()
+        // })
+        this.isFirstIn = false
+        Logger.debug(TAG, 'cj111');
+      // } else {
+      //   Logger.debug(TAG, 'aboutToAppear, data response page ' + this.pageId + ', comp list is empty.');
+      //   this.pageModel.viewType = ViewType.EMPTY;
+      // }
     }
+
+  }
+
+  async getPreviewData() {
+    this.liveReviewDTO = await PageViewModel.getLiveReviewUrl(this.pageNum, this.pageModel.pageSize)
+    Logger.debug(TAG, 'aboutToAppear, getPreviewData ' + this.liveReviewDTO.hasNext);
+    this.getData();
   }
 }