Merge branch 'main' of http://192.168.1.42/developOne/harmonyPool

# Conflicts:
#	sight_harmony/features/wdComponent/src/main/ets/components/CompParser.ets

@@ -19,4 +19,6 @@ export { DurationEnum } from './src/main/ets/enum/DurationEnum';
 
 
 export { ScreenType } from './src/main/ets/enum/ScreenType';
 export { ScreenType } from './src/main/ets/enum/ScreenType';
 
 
-export { SpConstants } from './src/main/ets/constants/SpConstants';
+export { SpConstants } from './src/main/ets/constants/SpConstants';
+
+export { DisplayDirection } from './src/main/ets/constants/VideoConstants';

@@ -11,8 +11,8 @@ export class SpConstants{
    static  USER_TEMP_TOKEN="tempToken"
    static  USER_TEMP_TOKEN="tempToken"
    static  USER_PHONE = "user_phone"
    static  USER_PHONE = "user_phone"
    //协议相关
    //协议相关
-   static USER_PROTOCOL = "user_protocol" //用户协议
-   static PRIVATE_PROTOCOL = "private_protocol" //隐私协议
+   static NET_SERVICE_PROTOCOL = "user_protocol" //人民日报客户端网络服务使用协议
+   static PRIVATE_PROTOCOL = "private_protocol" //人民日报客户端用户隐私协议
    static LOGOUT_PROTOCOL = "logout_protocol" //人民日报客户端app注销协议
    static LOGOUT_PROTOCOL = "logout_protocol" //人民日报客户端app注销协议
    static MESSAGE_BOARD_USER_PROTOCOL = "message_board_user_protocol" //"留言板-用户协议"
    static MESSAGE_BOARD_USER_PROTOCOL = "message_board_user_protocol" //"留言板-用户协议"
    static MESSAGE_BOARD_NOTICE_PROTOCOL = "message_board_notice_protocol" //留言板-留言须知
    static MESSAGE_BOARD_NOTICE_PROTOCOL = "message_board_notice_protocol" //留言板-留言须知
@@ -24,4 +24,6 @@ export class SpConstants{
    static SETTING_SUSPENSION_SWITCH = "setting_suspension_switch" //悬浮窗 开关
    static SETTING_SUSPENSION_SWITCH = "setting_suspension_switch" //悬浮窗 开关
    static SETTING_PUSH_SWITCH = "setting_push_switch" //推送 开关
    static SETTING_PUSH_SWITCH = "setting_push_switch" //推送 开关
 
 
+   //未登录保存兴趣标签
+   static PUBLICVISUTORMODE_INTERESTTAGS = 'PublicVisitorMode_InterestTags'
 }
 }

+export enum DisplayDirection {
+  VERTICAL,
+  VIDEO_HORIZONTAL
+}

@@ -16,7 +16,7 @@ export const enum CompStyle {
   Single_Column_05 = 'Single_Column-05', // 海报图卡：/
   Single_Column_05 = 'Single_Column-05', // 海报图卡：/
   Single_Column_06 = 'Single_Column-06', // 留言板卡：/
   Single_Column_06 = 'Single_Column-06', // 留言板卡：/
   Grid_Layout_01 = 'Grid_Layout-01', // 横屏宫格卡:视频、直播
   Grid_Layout_01 = 'Grid_Layout-01', // 横屏宫格卡:视频、直播
-  Grid_Layout_02 = 'Grid_Layout-02', // 竖屏宫格卡:视频、直播、榜单
+  Grid_Layout_02 = 'Grid_Layout-02', // 竖屏宫格卡  :视频、直播、榜单
   Masonry_Layout_01 = 'Masonry_Layout-01', // 双列瀑布流/瀑布流卡：视频、直播、专题、活动
   Masonry_Layout_01 = 'Masonry_Layout-01', // 双列瀑布流/瀑布流卡：视频、直播、专题、活动
 
 
 
 

 import { Action } from './Action';
 import { Action } from './Action';
 interface dataObject {
 interface dataObject {
+  operateType?: string
   webViewHeight?: string
   webViewHeight?: string
   dataJson?: string
   dataJson?: string
 }
 }

@@ -42,4 +42,6 @@ export { ErrorToastUtils } from './src/main/ets/utils/ErrorToastUtils'
 
 
 export { EmitterUtils } from './src/main/ets/utils/EmitterUtils'
 export { EmitterUtils } from './src/main/ets/utils/EmitterUtils'
 
 
-export { EmitterEventId } from './src/main/ets/utils/EmitterEventId'
+export { EmitterEventId } from './src/main/ets/utils/EmitterEventId'
+
+export { HWLocationUtils } from './src/main/ets/utils/HWLocationUtils'

 import { StringUtils } from './StringUtils';
 import { StringUtils } from './StringUtils';
-import getLunar from './GetLunar'
+import getLunar from './GetLunar';
+
 /**
 /**
  * 日期/时间工具
  * 日期/时间工具
  */
  */
@@ -480,6 +481,34 @@ export class DateTimeUtils {
       return 0
       return 0
     }
     }
   }
   }
+  /**
+   * 进度值换算
+   * @param seconds
+   * @returns
+   */
+  static secondToTime(seconds: number) {
+    let time = '00:00'
+    let hourUnit = 60 * 60;
+    let hour = Math.floor(seconds / hourUnit);
+    let minute = Math.floor((seconds - hour * hourUnit) / 60);
+    let second = seconds - hour * hourUnit - minute * 60;
+    if (hour > 0) {
+      return `${DateTimeUtils.padding(hour.toString())}${':'}${DateTimeUtils.padding(minute.toString())}${':'}${DateTimeUtils.padding(second.toString())}`;
+    }
+    if (minute > 0) {
+      return `${DateTimeUtils.padding(minute.toString())}${':'}${DateTimeUtils.padding(second.toString())}`;
+    } else {
+      return `${'00'}${':'}${DateTimeUtils.padding(second.toString())}`;
+    }
+  }
+
+  static padding(num: string) {
+    let length = 2;
+    for (let len = (num.toString()).length; len < length; len = num.length) {
+      num = `${'0'}${num}`;
+    }
+    return num;
+  }
 }
 }
 
 
 // const dateTimeUtils = new DateTimeUtils()
 // const dateTimeUtils = new DateTimeUtils()

@@ -7,7 +7,17 @@ export namespace ErrorToastUtils {
     NET_CORE_PAGE_ERROR_NETWORK, //网络出小差了，请检查网络后重试
     NET_CORE_PAGE_ERROR_NETWORK, //网络出小差了，请检查网络后重试
     NET_CORE_LOAD_ERROR_NETWORK, //加载失败，请重试
     NET_CORE_LOAD_ERROR_NETWORK, //加载失败，请重试
     NET_CORE_ENTER_ERROR_NETWORK, //很抱歉，当前内容无法加载，请点击重试
     NET_CORE_ENTER_ERROR_NETWORK, //很抱歉，当前内容无法加载，请点击重试
-    LIVE_CORE_NO_NETWORK, //网络出小差了，请检查下网络
+
+    //直播异常
+    LIVE_CORE_NO_NETWORK, //直播 无网络 网络出小差了，请检查下网络
+    LIVE_CORE_WEAK_NETWORK, //直播 弱网 网络出小差了，请检查下网络
+    LIVE_CORE_IO_NETWORK, //直播 直播流异常 直播加载异常
+    LIVE_CORE_SERVICE_NETWORK, //直播 服务端接口异常 直播加载异常
+    LIVE_CORE_SWITCH_FLOW_NETWORK, //直播 网络切换到流量 正在使用流量，请注意流量使用
+
+    //审核后异常报错
+    AUDITING_CORE_CONTENT_DISTRIBUTE, //审核 内容分发下线规则 内容已下线
+    AUDITING_CORE_ACCOUNT_ERROR, //审核 账号有问题下线规则 内容已下线
 
 
   }
   }
 
 
@@ -32,6 +42,27 @@ export namespace ErrorToastUtils {
         case ErrorType.LIVE_CORE_NO_NETWORK:
         case ErrorType.LIVE_CORE_NO_NETWORK:
           ToastUtils.shortToast($r('app.string.live_core_no_network'))
           ToastUtils.shortToast($r('app.string.live_core_no_network'))
           break
           break
+        case ErrorType.LIVE_CORE_WEAK_NETWORK:
+          ToastUtils.shortToast($r('app.string.live_core_weak_network'))
+          break
+        case ErrorType.LIVE_CORE_IO_NETWORK:
+          ToastUtils.shortToast($r('app.string.live_core_io_network'))
+          break
+        case ErrorType.LIVE_CORE_SERVICE_NETWORK:
+          ToastUtils.shortToast($r('app.string.live_core_service_network'))
+          break
+        case ErrorType.LIVE_CORE_SWITCH_FLOW_NETWORK:
+          ToastUtils.shortToast($r('app.string.live_core_switch_flow_network'))
+          break
+        case ErrorType.LIVE_CORE_SWITCH_FLOW_NETWORK:
+          ToastUtils.shortToast($r('app.string.live_core_switch_flow_network'))
+          break
+        case ErrorType.AUDITING_CORE_CONTENT_DISTRIBUTE:
+          ToastUtils.shortToast($r('app.string.auditing_core_error'))
+          break
+        case ErrorType.AUDITING_CORE_ACCOUNT_ERROR:
+          ToastUtils.shortToast($r('app.string.auditing_core_error'))
+          break
       }
       }
 
 
     }
     }

+import { Logger } from './Logger';
+import { PermissionUtils } from './PermissionUtils';
+import { abilityAccessCtrl, bundleManager, Permissions } from '@kit.AbilityKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { geoLocationManager } from '@kit.LocationKit';
+import { SPHelper } from './SPHelper';
+
+/**
+ * 系统定位服务实现
+ * */
+export class HWLocationUtils {
+  //d定位相关
+  static LOCATION_CITY_NAME = "location_city_name" //定位
+  static LOCATION_CITY_CODE = "location_city_code" //定位
+
+
+  static LOCATION: Permissions = 'ohos.permission.LOCATION'
+  static APPROXIMATELY_LOCATION: Permissions = 'ohos.permission.APPROXIMATELY_LOCATION'
+
+  private static getLocation() {
+    let requestInfo: geoLocationManager.LocationRequest = {
+      'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,
+      'scenario': geoLocationManager.LocationRequestScenario.UNSET,
+      distanceInterval: 0,
+      timeInterval: 60,
+      maxAccuracy: 0
+    };
+    geoLocationManager.on('locationChange', requestInfo, (data) => {
+      Logger.debug('location :' + JSON.stringify(data))
+    })
+  }
+
+  private static getLocationData() {
+    return new Promise<Record<string, string | number>>((success, fail) => {
+      let requestInfo: geoLocationManager.LocationRequest = {
+        'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,
+        'scenario': geoLocationManager.LocationRequestScenario.DAILY_LIFE_SERVICE,
+        distanceInterval: 0,
+        timeInterval: 60,
+        maxAccuracy: 0
+      };
+      geoLocationManager.on('locationChange', requestInfo, (data) => {
+        Logger.debug('location :' + JSON.stringify(data)) //{"latitude":31.86870096,"longitude":117.3015341,"altitude":0,"accuracy":5000,"speed":0,"timeStamp":1713332445643,"direction":0,"timeSinceBoot":589519570869240,"additions":"","additionSize":0}
+        let record: Record<string, string | number> = {};
+        record['latitude'] = data.latitude
+        record['longitude'] = data.longitude
+        success(record)
+      })
+    })
+  }
+
+  //开启定位服务
+  static async startLocationService() {
+    let grant = await PermissionUtils.checkPermissions(HWLocationUtils.APPROXIMATELY_LOCATION)
+    if (grant) {
+      HWLocationUtils.getCurrentLocation()
+      return
+    }
+    let context = getContext();
+    let requestGrant = await PermissionUtils.reqPermissionsFromUser([HWLocationUtils.APPROXIMATELY_LOCATION], context);
+    Logger.debug('location2 :' + requestGrant)
+    if (requestGrant) {
+      HWLocationUtils.getCurrentLocation()
+    } else {
+      PermissionUtils.openPermissionsInSystemSettings(context)
+    }
+  }
+
+  private static getCurrentLocation() {
+    let requestInfo: geoLocationManager.CurrentLocationRequest = {
+      'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,
+      'scenario': geoLocationManager.LocationRequestScenario.DAILY_LIFE_SERVICE,
+      'maxAccuracy': 0
+    };
+    try {
+      geoLocationManager.getCurrentLocation(requestInfo).then((result) => {
+        //{"latitude":31.8687047,"longitude":117.30152005,"altitude":0,"accuracy":5000,"speed":0,"timeStamp":1713331875766,"direction":0,"timeSinceBoot":588949694096931,"additions":"","additionSize":0}
+        Logger.debug('location' + JSON.stringify(result))
+        HWLocationUtils.getReverseGeoCodeRequest(result.latitude, result.longitude)
+      })
+        .catch((error: number) => {
+          Logger.debug('location' + JSON.stringify(error))
+        });
+    } catch (err) {
+    }
+  }
+
+  private static getGeoCodeRequest(description: string) {
+    let requestInfo: geoLocationManager.GeoCodeRequest = { 'description': description };
+    geoLocationManager.getAddressesFromLocationName(requestInfo, (error, data) => {
+      if (data) {
+        Logger.debug('location :' + JSON.stringify(data))
+      }
+      //[{"latitude":31.898204927828598,"longitude":117.29702564819466,"locale":"zh","placeName":"安徽省合肥市瑶海区白龙路与北二环路辅路交叉口南20米","countryCode":"CN","countryName":"中国","administrativeArea":"安徽省","subAdministrativeArea":"合肥市","locality":"合肥市","subLocality":"瑶海区","roadName":"白龙路与北二环路辅路","subRoadName":"20","premises":"20","postalCode":"","phoneNumber":"18756071597","addressUrl":"","descriptionsSize":0,"isFromMock":false}]
+    })
+  }
+
+  private static getReverseGeoCodeRequest(latitude: number, longitude: number) {
+    let requestInfo: geoLocationManager.ReverseGeoCodeRequest = {
+      "latitude": latitude,
+      "longitude": longitude,
+      "maxItems": 2
+    };
+    geoLocationManager.getAddressesFromLocation(requestInfo, (error, data) => {
+      if (error) {
+        Logger.debug('location :' + JSON.stringify(error))
+      }
+      if (data) {
+        Logger.debug('location :' + JSON.stringify(data))
+        if (data[0] && data[0].countryName) {
+          if (data[0].descriptionsSize && data[0].descriptions) {
+            let code = data[0].descriptions[1]
+            let cityCode = code.substring(0, 6)
+            let cityName = data[0].subAdministrativeArea;
+            if (cityName) {
+              SPHelper.default.save(HWLocationUtils.LOCATION_CITY_NAME, cityName)
+            }
+            if (cityCode) {
+              SPHelper.default.save(HWLocationUtils.LOCATION_CITY_NAME, cityCode)
+            }
+          }
+        }
+      }
+    })
+  }
+
+
+  //取消定位
+  static cancelLocation() {
+    // geoLocationManager.off('locationChange')
+    return new Promise<boolean>((success, fail) => {
+      geoLocationManager.off("locationChange", (data) => {
+        Logger.debug('location :' + JSON.stringify(data))
+        success(true)
+      })
+    })
+  }
+}

@@ -101,4 +101,9 @@ export class SPHelper {
   //   preferences.clearSync()
   //   preferences.clearSync()
   //   preferences.flush()
   //   preferences.flush()
   // }
   // }
+
+  public  getPreferences(){
+    let preferences =  data_preferences.getPreferences(SPHelper.context, SPHelper.spFilename);
+    return preferences;
+  }
 }
 }

 import window from '@ohos.window';
 import window from '@ohos.window';
-import { BusinessError } from '@ohos.base';
+import { AsyncCallback, BusinessError } from '@ohos.base';
 import deviceInfo from '@ohos.deviceInfo'
 import deviceInfo from '@ohos.deviceInfo'
 import display from '@ohos.display';
 import display from '@ohos.display';
 
 
+
+interface SystemBarProperties {
+  statusBarColor?: string;
+  isStatusBarLightIcon?: boolean;
+  statusBarContentColor?: string;
+  navigationBarColor?: string;
+  isNavigationBarLightIcon?: boolean;
+  navigationBarContentColor?: string;
+}
+
 export class Size {
 export class Size {
   width: number = 0
   width: number = 0
   height: number = 0
   height: number = 0
@@ -15,17 +25,24 @@ export class Size {
 
 
 export class WindowModel {
 export class WindowModel {
   private windowStage?: window.WindowStage;
   private windowStage?: window.WindowStage;
+  private windowClass?: window.Window;
+  private isFullScreen: boolean = false
   static shared: WindowModel = new WindowModel()
   static shared: WindowModel = new WindowModel()
   static TAG = "WindowModel";
   static TAG = "WindowModel";
 
 
   setWindowStage(windowStage: window.WindowStage) {
   setWindowStage(windowStage: window.WindowStage) {
     this.windowStage = windowStage;
     this.windowStage = windowStage;
+    this.windowClass = windowStage.getMainWindowSync();
   }
   }
 
 
   getWindowStage(): window.WindowStage {
   getWindowStage(): window.WindowStage {
     return this.windowStage as window.WindowStage
     return this.windowStage as window.WindowStage
   }
   }
 
 
+  getWindowClass(): window.Window {
+    return this.windowClass as window.Window
+  }
+
   setMainWindowFullScreen(fullScreen: boolean) {
   setMainWindowFullScreen(fullScreen: boolean) {
     if (deviceInfo.deviceType != "phone") {
     if (deviceInfo.deviceType != "phone") {
       return
       return
@@ -103,5 +120,25 @@ export class WindowModel {
       });
       });
     })
     })
   }
   }
+
+  /**
+   * 设置窗口全屏模式时窗口内导航栏、状态栏的属性，使用callback异步回调。
+   * @param systemBarProperties
+   * @param callback
+   */
+  setWindowSystemBarProperties(systemBarProperties: SystemBarProperties, callback?: AsyncCallback<void>): void {
+    this.windowClass?.setWindowSystemBarProperties(systemBarProperties, (err: BusinessError) => {
+      callback && callback(err)
+    })
+  }
+
+  setWindowLayoutFullScreen(isFullScreen: boolean) {
+    this.isFullScreen = isFullScreen
+    this.windowClass?.setWindowLayoutFullScreen(isFullScreen)
+  }
+
+  getIsFullScreen(): boolean {
+    return this.isFullScreen
+  }
 }
 }
 
 

@@ -27,6 +27,26 @@
     {
     {
       "name": "live_core_no_network",
       "name": "live_core_no_network",
       "value": "网络出小差了，请检查下网络"
       "value": "网络出小差了，请检查下网络"
+    },
+    {
+      "name": "live_core_weak_network",
+      "value": "网络出小差了，请检查下网络"
+    },
+    {
+      "name": "live_core_io_network",
+      "value": "直播加载异常"
+    },
+    {
+      "name": "live_core_service_network",
+      "value": "直播加载异常"
+    },
+    {
+      "name": "live_core_switch_flow_network",
+      "value": "正在使用流量，请注意流量使用"
+    },
+    {
+      "name": "auditing_core_error",
+      "value": "内容已下线"
     }
     }
   ]
   ]
 }
 }

 {
 {
-  "lockfileVersion": 1,
+  "meta": {
+    "stableOrder": true
+  },
+  "lockfileVersion": 3,
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
   "specifiers": {
   "specifiers": {
-    "@ohos/axios@^2.1.1": "@ohos/axios@2.2.0"
+    "@ohos/axios@^2.1.1": "@ohos/axios@2.2.0",
+    "wdConstant@../wdConstant": "wdConstant@../wdConstant",
+    "wdKit@../wdKit": "wdKit@../wdKit"
   },
   },
   "packages": {
   "packages": {
     "@ohos/axios@2.2.0": {
     "@ohos/axios@2.2.0": {
+      "name": "@ohos/axios",
+      "integrity": "sha512-v1QBWk6DfcN8wUW3D0ieFbHTR1taSI5cOgxp5l6B5cegXuNYhSc8ggKlAIXe6h/14LsfM+NW0ZGfSXcNEIM5yA==",
       "resolved": "https://repo.harmonyos.com/ohpm/@ohos/axios/-/axios-2.2.0.har",
       "resolved": "https://repo.harmonyos.com/ohpm/@ohos/axios/-/axios-2.2.0.har",
-      "integrity": "sha512-v1QBWk6DfcN8wUW3D0ieFbHTR1taSI5cOgxp5l6B5cegXuNYhSc8ggKlAIXe6h/14LsfM+NW0ZGfSXcNEIM5yA=="
+      "registryType": "ohpm"
+    },
+    "wdConstant@../wdConstant": {
+      "name": "wdconstant",
+      "resolved": "../wdConstant",
+      "registryType": "local"
+    },
+    "wdKit@../wdKit": {
+      "name": "wdkit",
+      "resolved": "../wdKit",
+      "registryType": "local"
     }
     }
   }
   }
 }
 }

@@ -2,7 +2,7 @@
  * ResponseDTO
  * ResponseDTO
  */
  */
 export interface ResponseDTO<T = string> {
 export interface ResponseDTO<T = string> {
-  success:boolean;
+  success: boolean;
 
 
   // 服务请求响应值/微服务响应状态码”
   // 服务请求响应值/微服务响应状态码”
   code: number;
   code: number;
@@ -12,6 +12,7 @@ export interface ResponseDTO<T = string> {
 
 
   // 响应结果
   // 响应结果
   data?: T;
   data?: T;
+  totalCount?: number;
 
 
   // 请求响应时间戳（unix格式）
   // 请求响应时间戳（unix格式）
   timestamp?: number;
   timestamp?: number;

-import HashMap from '@ohos.util.HashMap'
-import { ConfigConstants, SpConstants } from 'wdConstant'
-import { DateTimeUtils, Logger, SPHelper, StringUtils } from 'wdKit'
+import HashMap from '@ohos.util.HashMap';
+import { SpConstants } from 'wdConstant';
+import { SPHelper, StringUtils } from 'wdKit';
 
 
 /**
 /**
  * 网络请求业务侧工具类
  * 网络请求业务侧工具类
@@ -46,6 +46,10 @@ export class HttpUrlUtils {
    * 批查接口，查询互动相关数据，如收藏数、评论数等
    * 批查接口，查询互动相关数据，如收藏数、评论数等
    */
    */
   static readonly INTERACT_DATA_PATH: string = "/api/rmrb-contact/contact/zh/c/content/interactData";
   static readonly INTERACT_DATA_PATH: string = "/api/rmrb-contact/contact/zh/c/content/interactData";
+  /**
+   * 查询视频频道推荐楼层
+   */
+  static readonly DISPLAY_REC_COMPINFO: string = "/api/rmrb-bff-display-zh/display/zh/c/rec/compInfo";
   // 多图（图集）详情页
   // 多图（图集）详情页
   /**
   /**
    * 批量查询内容当前用户点赞、收藏状态
    * 批量查询内容当前用户点赞、收藏状态
@@ -196,7 +200,6 @@ export class HttpUrlUtils {
    * 搜索联想词
    * 搜索联想词
    */
    */
   static readonly RELATED_SEARCH_CONTENT_DATA_PATH: string = "/api/rmrb-search-api/zh/c/suggestions/";
   static readonly RELATED_SEARCH_CONTENT_DATA_PATH: string = "/api/rmrb-search-api/zh/c/suggestions/";
-
   /**
   /**
    * 直播详情
    * 直播详情
    */
    */
@@ -205,23 +208,52 @@ export class HttpUrlUtils {
    * 直播详情-直播间列表
    * 直播详情-直播间列表
    */
    */
   static readonly LIVE_LIST_PATH: string = "/api/live-center-message/zh/a/live/message/video/list";
   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";
   static readonly LIVE_CHAT_LIST_PATH: string = "/api/live-center-message/zh/a/live/message/chat/list";
   /**
   /**
+   * 直播详情-直播数据
+   */
+  static readonly LIVE_ROOM_DATA_PATH: string = "/api/live-center-message/zh/a/live/room/number/all";
+  /**
+   * 直播详情-预约直播状态
+   */
+  static readonly LIVE_APPOINTMENT_STATUS_PATH: string = "/api/live-center-message/zh/c/live/subscribe/query";
+  /**
+   * 直播详情-预约/取消预约直播
+   */
+  static readonly LIVE_APPOINTMENT_PATH: string = "/api/live-center-message/zh/c/live/subscribe";
+  /**
 
 
    * 搜索结果 显示tab 数
    * 搜索结果 显示tab 数
    */
    */
   static readonly SEARCH_RESULT_COUNT_DATA_PATH: string = "/api/rmrb-search-api/zh/c/count?keyword=";
   static readonly SEARCH_RESULT_COUNT_DATA_PATH: string = "/api/rmrb-search-api/zh/c/count?keyword=";
-
   /**
   /**
   * 搜索结果 显示list 详情
   * 搜索结果 显示list 详情
   */
   */
   static readonly SEARCH_RESULT_LIST_DATA_PATH: string = "/api/rmrb-search-api/zh/c/search";
   static readonly SEARCH_RESULT_LIST_DATA_PATH: string = "/api/rmrb-search-api/zh/c/search";
 
 
   /**
   /**
+   * 创作者详情接口
+   */
+  static readonly CREATOR_DETAIL_LIST_DATA_PATH: string = "/api/rmrb-contact/contact/zh/c/master/detailList";
+  /**
+   * 客态查询发布作品数量
+   */
+  static readonly ARTICLE_COUNT_HOTS_DATA_PATH: string = "/api/rmrb-content-search/zh/c/article/count";
+
+  /**
+   * 客户端 客态主页页面-获取作品-从发布库获取该创作者下 稿件列表
+   */
+  static readonly ARTICLE_LIST_HOTS_DATA_PATH: string = "/api/rmrb-content-search/zh/c/article/articleList";
+
+  /**
+   * 客户端 客态主页页面-获取影响力
+   */
+  static readonly CREATOR_INFLUENCE_HOTS_DATA_PATH: string = "/api/rmrb-bigdata-bi/zh/c/stats/creator/influence/info";
+
+  /**
    * 早晚报列表
    * 早晚报列表
    * 根据页面id获取页面楼层列表
    * 根据页面id获取页面楼层列表
    * https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/display/zh/c/pageInfo?pageId=28927
    * https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/display/zh/c/pageInfo?pageId=28927
@@ -240,6 +272,17 @@ export class HttpUrlUtils {
    * 早晚报获取PAGEID
    * 早晚报获取PAGEID
    * */
    * */
   static readonly DAILY_PAPER_TOPIC: string = "/api/rmrb-bff-display-zh/display/zh/c/dailyPaperTopic";
   static readonly DAILY_PAPER_TOPIC: string = "/api/rmrb-bff-display-zh/display/zh/c/dailyPaperTopic";
+
+  /**
+   * app启动页 兴趣偏好
+   */
+  static readonly INTERESTS_HOTS_DATA_PATH: string = "/api/rmrb-user-center/user/zh/c/tag/queryTags";
+  /**
+   * 更新 兴趣偏好
+   */
+  static readonly INTERESTS_UPDATETAG_PATH: string = "/api/rmrb-user-center/user/zh/c/tag/updateUserTag";
+
+
   private static _hostUrl: string = HttpUrlUtils.HOST_PRODUCT;
   private static _hostUrl: string = HttpUrlUtils.HOST_PRODUCT;
   /**
   /**
    * 推荐列表
    * 推荐列表
@@ -655,6 +698,17 @@ export class HttpUrlUtils {
     return url
     return url
   }
   }
 
 
+  static getInterestsUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.INTERESTS_HOTS_DATA_PATH;
+    return url;
+
+  }
+
+  static getUpdateInterestsUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.INTERESTS_UPDATETAG_PATH;
+    return url;
+  }
+
   static getLiveDetailsUrl() {
   static getLiveDetailsUrl() {
     let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_DETAILS_PATH
     let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_DETAILS_PATH
     return url
     return url
@@ -670,6 +724,21 @@ export class HttpUrlUtils {
     return url
     return url
   }
   }
 
 
+  static getLiveRoomDataUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_ROOM_DATA_PATH
+    return url
+  }
+
+  static getLiveAppointmentStatusUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_APPOINTMENT_STATUS_PATH
+    return url
+  }
+
+  static getLiveAppointmentUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_APPOINTMENT_PATH
+    return url
+  }
+
   static getSearchResultCountDataUrl() {
   static getSearchResultCountDataUrl() {
     let url = HttpUrlUtils._hostUrl + HttpUrlUtils.SEARCH_RESULT_COUNT_DATA_PATH
     let url = HttpUrlUtils._hostUrl + HttpUrlUtils.SEARCH_RESULT_COUNT_DATA_PATH
     return url
     return url
@@ -680,6 +749,37 @@ export class HttpUrlUtils {
     return url
     return url
   }
   }
 
 
+  static getInteractListDataUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.INTERACT_DATA_PATH
+    return url
+  }
+
+  static getCreatorDetailListDataUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.CREATOR_DETAIL_LIST_DATA_PATH
+    return url
+  }
+
+  static getArticleCountHotsDataUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.ARTICLE_COUNT_HOTS_DATA_PATH
+    return url
+  }
+
+  static getArticleListHotsDataUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.ARTICLE_LIST_HOTS_DATA_PATH
+    return url
+  }
+
+  static getCreatorInfluenceInfoHotsDataUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.CREATOR_INFLUENCE_HOTS_DATA_PATH
+    return url
+  }
+
+  //点赞
+  static executeLike() {
+    let url = HttpUrlUtils._hostUrl + "/api/rmrb-interact/interact/zh/c/like/executeLike";
+    return url;
+  }
+
   // static getYcgCommonHeaders(): HashMap<string, string> {
   // static getYcgCommonHeaders(): HashMap<string, string> {
   //   let headers: HashMap<string, string> = new HashMap<string, string>()
   //   let headers: HashMap<string, string> = new HashMap<string, string>()
   //
   //

 {
 {
-  "lockfileVersion": 1,
+  "meta": {
+    "stableOrder": true
+  },
+  "lockfileVersion": 3,
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
-  "specifiers": {},
-  "packages": {}
+  "specifiers": {
+    "wdBean@../../features/wdBean": "wdBean@../../features/wdBean",
+    "wdKit@../wdKit": "wdKit@../wdKit"
+  },
+  "packages": {
+    "wdBean@../../features/wdBean": {
+      "name": "wdbean",
+      "resolved": "../../features/wdBean",
+      "registryType": "local"
+    },
+    "wdKit@../wdKit": {
+      "name": "wdkit",
+      "resolved": "../wdKit",
+      "registryType": "local"
+    }
+  }
 }
 }

@@ -8,6 +8,7 @@
   "version": "1.0.0",
   "version": "1.0.0",
   "dependencies": {
   "dependencies": {
     "wdKit": "file:../wdKit",
     "wdKit": "file:../wdKit",
-    "wdBean": "file:../../features/wdBean"
+    "wdBean": "file:../../features/wdBean",
+    "wdNetwork": "file:../../commons/wdNetwork"
   }
   }
-}
+}

@@ -50,13 +50,17 @@ export function registerRouter() {
 
 
   Action2Page.register("JUMP_DETAIL_PAGE", (action: Action) => {
   Action2Page.register("JUMP_DETAIL_PAGE", (action: Action) => {
     if (action.params?.detailPageType == 2 || action.params?.detailPageType == 6) {
     if (action.params?.detailPageType == 2 || action.params?.detailPageType == 6) {
-      return WDRouterPage.detailPlayLivePage
+      if (action.params?.liveStyle === 0) {
+        return WDRouterPage.detailPlayLivePage
+      } else {
+        return WDRouterPage.detailPlayVLivePage
+      }
     } else if (action.params?.detailPageType == 7 || action.params?.detailPageType == 8) {
     } else if (action.params?.detailPageType == 7 || action.params?.detailPageType == 8) {
       return WDRouterPage.detailVideoListPage
       return WDRouterPage.detailVideoListPage
-    }else if(action.params?.detailPageType == 9){
+    } else if (action.params?.detailPageType == 9) {
       //图集详情页
       //图集详情页
       return WDRouterPage.multiPictureDetailPage
       return WDRouterPage.multiPictureDetailPage
-    }else if(action.params?.detailPageType == 14 || action.params?.detailPageType == 15){
+    } else if (action.params?.detailPageType == 14 || action.params?.detailPageType == 15) {
       //动态详情页
       //动态详情页
       return WDRouterPage.dynamicDetailPage
       return WDRouterPage.dynamicDetailPage
     } else if (action.params?.detailPageType == 17) {
     } else if (action.params?.detailPageType == 17) {

@@ -14,6 +14,16 @@ export class WDRouterPage {
     return `@bundle:${bundleInfo.name}/${"phone"}/${"ets/pages/MainPage"}`
     return `@bundle:${bundleInfo.name}/${"phone"}/${"ets/pages/MainPage"}`
   }
   }
 
 
+  static getLoginBundleInfo() {
+    let bundleInfo = bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT)
+    return `@bundle:${bundleInfo.name}/${"wdLogin"}/${"ets/pages/login/LoginPage"}`
+  }
+
+  static getSettingBundleInfo() {
+    let bundleInfo = bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT)
+    return `@bundle:${bundleInfo.name}/${"wdComponent"}/${"ets/components/page/SettingPage"}`
+  }
+
 
 
   url() {
   url() {
     let bundleInfo = bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT)
     let bundleInfo = bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT)
@@ -43,6 +53,7 @@ export class WDRouterPage {
   static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage");
   static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage");
   // 直播详情页
   // 直播详情页
   static detailPlayLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLivePage");
   static detailPlayLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLivePage");
+  static detailPlayVLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayVLivePage");
   // 多图(图集)详情页
   // 多图(图集)详情页
   static multiPictureDetailPage = new WDRouterPage("phone", "ets/pages/detail/MultiPictureDetailPage");
   static multiPictureDetailPage = new WDRouterPage("phone", "ets/pages/detail/MultiPictureDetailPage");
   // 音乐详情页
   // 音乐详情页
@@ -89,10 +100,17 @@ export class WDRouterPage {
   static launchAdvertisingPage = new WDRouterPage("phone", "ets/pages/launchPage/LaunchAdvertisingPage");
   static launchAdvertisingPage = new WDRouterPage("phone", "ets/pages/launchPage/LaunchAdvertisingPage");
   //主页
   //主页
   static mainPage = new WDRouterPage("phone", "ets/pages/MainPage");
   static mainPage = new WDRouterPage("phone", "ets/pages/MainPage");
+
+  static launchInterestsPage = new WDRouterPage("phone", "ets/pages/launchPage/LaunchInterestsHobbiesPage");
+
   // static loginProtocolPage = new WDRouterPage("wdLogin", "ets/pages/login/LoginProtocolWebview");
   // static loginProtocolPage = new WDRouterPage("wdLogin", "ets/pages/login/LoginProtocolWebview");
 
 
   //播报页面
   //播报页面
   static broadcastPage = new WDRouterPage("phone", "ets/pages/broadcast/BroadcastPage");
   static broadcastPage = new WDRouterPage("phone", "ets/pages/broadcast/BroadcastPage");
   //搜索主页
   //搜索主页
   static searchPage = new WDRouterPage("wdComponent", "ets/pages/SearchPage");
   static searchPage = new WDRouterPage("wdComponent", "ets/pages/SearchPage");
+  //搜索人民号主页
+  static searchCreatorPage = new WDRouterPage("wdComponent", "ets/pages/SearchCreatorPage");
+  //人民号主页
+  static peopleShipHomePage = new WDRouterPage("wdComponent", "ets/components/page/PeopleShipHomePage");
 }
 }

@@ -18,7 +18,7 @@ export class WDRouterRule {
     if (page) {
     if (page) {
       if (params) {
       if (params) {
         // router.pushUrl({   url: 'pages/routerpage2', , params: params })
         // router.pushUrl({   url: 'pages/routerpage2', , params: params })
-        console.log('page.url()==',page.url())
+        console.log('page.url()==',page.url(),JSON.stringify(params))
         router.pushUrl({ url: page.url(), params: params })
         router.pushUrl({ url: page.url(), params: params })
       } else {
       } else {
         router.pushUrl({ url: page.url() }).catch((error:Error)=>{
         router.pushUrl({ url: page.url() }).catch((error:Error)=>{

 {
 {
-  "lockfileVersion": 1,
+  "meta": {
+    "stableOrder": true
+  },
+  "lockfileVersion": 3,
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
-  "specifiers": {},
-  "packages": {}
+  "specifiers": {
+    "wdBean@../../features/wdBean": "wdBean@../../features/wdBean",
+    "wdConstant@../wdConstant": "wdConstant@../wdConstant",
+    "wdJsBridge@../wdJsBridge": "wdJsBridge@../wdJsBridge",
+    "wdKit@../wdKit": "wdKit@../wdKit",
+    "wdRouter@../wdRouter": "wdRouter@../wdRouter"
+  },
+  "packages": {
+    "wdBean@../../features/wdBean": {
+      "name": "wdbean",
+      "resolved": "../../features/wdBean",
+      "registryType": "local"
+    },
+    "wdConstant@../wdConstant": {
+      "name": "wdconstant",
+      "resolved": "../wdConstant",
+      "registryType": "local"
+    },
+    "wdJsBridge@../wdJsBridge": {
+      "name": "wdjsbridge",
+      "resolved": "../wdJsBridge",
+      "registryType": "local"
+    },
+    "wdKit@../wdKit": {
+      "name": "wdkit",
+      "resolved": "../wdKit",
+      "registryType": "local"
+    },
+    "wdRouter@../wdRouter": {
+      "name": "wdrouter",
+      "resolved": "../wdRouter",
+      "registryType": "local",
+      "dependencies": {
+        "wdKit": "file:../wdKit",
+        "wdBean": "file:../../features/wdBean"
+      }
+    }
+  }
 }
 }

@@ -41,6 +41,7 @@ export function performJSCallNative(data: Message, call: Callback) {
 class AppInfo {
 class AppInfo {
   plat: string = ''
   plat: string = ''
   system: string = ''
   system: string = ''
+  networkStatus: number = 1
   // TODO 完善
   // TODO 完善
 }
 }
 
 
@@ -52,6 +53,7 @@ function getAppPublicInfo(): string {
   info.plat = 'Phone'
   info.plat = 'Phone'
   // 直接用Android，后续适配再新增鸿蒙
   // 直接用Android，后续适配再新增鸿蒙
   info.system = 'Android'
   info.system = 'Android'
+  info.networkStatus = 1
   let result = JSON.stringify(info)
   let result = JSON.stringify(info)
   return result;
   return result;
 }
 }

@@ -13,6 +13,7 @@ export struct WdWebComponent {
   @Prop backVisibility: boolean = false
   @Prop backVisibility: boolean = false
   @Prop webUrl: string = ''
   @Prop webUrl: string = ''
   @Prop @Watch('onReloadStateChanged') reload: number = 0
   @Prop @Watch('onReloadStateChanged') reload: number = 0
+  @Link isPageEnd: boolean
 
 
   build() {
   build() {
     Column() {
     Column() {
@@ -37,7 +38,6 @@ export struct WdWebComponent {
         .horizontalScrollBarAccess(false)
         .horizontalScrollBarAccess(false)
         .verticalScrollBarAccess(false)
         .verticalScrollBarAccess(false)
         .onPageBegin((event) => {
         .onPageBegin((event) => {
-          console.log(this.webUrl,"yzl")
           this.onPageBegin(event?.url);
           this.onPageBegin(event?.url);
         })
         })
         .onPageEnd((event) => {
         .onPageEnd((event) => {
@@ -86,18 +86,19 @@ export struct WdWebComponent {
     BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)
     BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)
   }
   }
   onPageEnd: (url?: string) => void = () => {
   onPageEnd: (url?: string) => void = () => {
+    this.isPageEnd = true
     Logger.debug(TAG, 'onPageEnd');
     Logger.debug(TAG, 'onPageEnd');
   }
   }
   onLoadIntercept: (url?: string) => boolean = () => {
   onLoadIntercept: (url?: string) => boolean = () => {
     Logger.debug(TAG, 'onLoadIntercept return false');
     Logger.debug(TAG, 'onLoadIntercept return false');
     return false
     return false
   }
   }
+
   onReloadStateChanged() {
   onReloadStateChanged() {
     Logger.info(TAG, `onReloadStateChanged:::refresh, this.reload: ${this.reload}`);
     Logger.info(TAG, `onReloadStateChanged:::refresh, this.reload: ${this.reload}`);
     if (this.reload > 0) {
     if (this.reload > 0) {
       this.webviewControl.refresh()
       this.webviewControl.refresh()
     }
     }
   }
   }
-
 }
 }
 
 

@@ -12,9 +12,12 @@ const TAG = 'WdWebLocalComponent';
 @Component
 @Component
 export struct WdWebLocalComponent {
 export struct WdWebLocalComponent {
   webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
   webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
+  onWebPrepared: () => void = () => {
+  }
   @Prop backVisibility: boolean = false
   @Prop backVisibility: boolean = false
   @Prop webResource: Resource = {} as Resource
   @Prop webResource: Resource = {} as Resource
-  @State webHeight : string = '100%'
+  @State webHeight: string | number = '100%'
+  @Link isPageEnd: boolean
 
 
   build() {
   build() {
     Column() {
     Column() {
@@ -39,7 +42,7 @@ export struct WdWebLocalComponent {
         .mixedMode(MixedMode.All)
         .mixedMode(MixedMode.All)
         .onlineImageAccess(true)
         .onlineImageAccess(true)
         .enableNativeEmbedMode(true)
         .enableNativeEmbedMode(true)
-        .height(this.webHeight === '100%' ? '100%' : Number(this.webHeight))
+        .height(this.webHeight)
         .onPageBegin((event) => {
         .onPageBegin((event) => {
           this.onPageBegin(event?.url);
           this.onPageBegin(event?.url);
         })
         })
@@ -79,9 +82,15 @@ export struct WdWebLocalComponent {
 
 
   //webview 高度设置
   //webview 高度设置
   private setCurrentPageOperate: (data: Message) => void = (data) => {
   private setCurrentPageOperate: (data: Message) => void = (data) => {
-    console.log("setCurrentPageOperate",JSON.stringify(data))
-    if (data.handlerName === H5CallNativeType.jsCall_currentPageOperate) {
-      this.webHeight = data?.data?.webViewHeight || '100%'
+    if (data.handlerName === H5CallNativeType.jsCall_currentPageOperate && data?.data?.operateType === '8') {
+      if (typeof this.webHeight === 'number') {
+        if (Number(data?.data?.webViewHeight) > this.webHeight) {
+          this.webHeight = Number(data?.data?.webViewHeight)
+        }
+      }
+      {
+        this.webHeight = Number(data?.data?.webViewHeight) || '100%'
+      }
     }
     }
   }
   }
   /**
   /**
@@ -99,6 +108,8 @@ export struct WdWebLocalComponent {
   }
   }
   onPageEnd: (url?: string) => void = () => {
   onPageEnd: (url?: string) => void = () => {
     Logger.debug(TAG, 'onPageEnd');
     Logger.debug(TAG, 'onPageEnd');
+    this.onWebPrepared()
+    this.isPageEnd = true
   }
   }
   onLoadIntercept: (url?: string) => boolean = () => {
   onLoadIntercept: (url?: string) => boolean = () => {
     Logger.debug(TAG, 'onLoadIntercept return false');
     Logger.debug(TAG, 'onLoadIntercept return false');

@@ -37,7 +37,8 @@ export {
   postExecuteCollectRecordParams,
   postExecuteCollectRecordParams,
   contentListParams,
   contentListParams,
   postInteractAccentionOperateParams,
   postInteractAccentionOperateParams,
-  postRecommendListParams
+  postRecommendListParams,
+  contentListItem
 } from './src/main/ets/bean/detail/MultiPictureDetailPageDTO';
 } from './src/main/ets/bean/detail/MultiPictureDetailPageDTO';
 
 
 export { InteractParam, ContentBean } from './src/main/ets/bean/content/InteractParam';
 export { InteractParam, ContentBean } from './src/main/ets/bean/content/InteractParam';
@@ -120,3 +121,23 @@ export { appStyleImagesDTO } from './src/main/ets/bean/content/appStyleImagesDTO
 
 
 export { LiveRoomBean,LiveRoomItemBean } from './src/main/ets/bean/live/LiveRoomBean';
 export { LiveRoomBean,LiveRoomItemBean } from './src/main/ets/bean/live/LiveRoomBean';
 
 
+export { LiveRoomDataBean } from './src/main/ets/bean/live/LiveRoomDataBean';
+
+export { LiveInfoDTO } from './src/main/ets/bean/detail/LiveInfoDTO';
+
+export { LiveDTO } from './src/main/ets/bean/peoples/LiveDTO';
+
+export { contentVideosDTO } from './src/main/ets/bean/content/contentVideosDTO';
+
+export { ContentExtDTO } from './src/main/ets/bean/peoples/ContentExtDTO';
+
+export { ContentShareDTO } from './src/main/ets/bean/peoples/ContentShareDTO';
+
+export {
+  PeopleShipUserDetailData,
+  ArticleCountData,
+  ArticleTypeData,
+  ArticleListData,
+  InfluenceData
+} from './src/main/ets/bean/peoples/PeopleShipUserDetailData';
+

@@ -6,9 +6,14 @@
  */
  */
 import { appStyleImagesDTO } from '../content/appStyleImagesDTO'
 import { appStyleImagesDTO } from '../content/appStyleImagesDTO'
 import {contentVideosDTO} from '../content/contentVideosDTO'
 import {contentVideosDTO} from '../content/contentVideosDTO'
+import { VlivesDTO } from '../peoples/VlivesDTO'
+import { LiveDTO } from '../peoples/LiveDTO'
+import { ContentExtDTO } from '../peoples/ContentExtDTO'
+import { ContentShareDTO } from  '../peoples/ContentShareDTO'
+
 export interface ArticleListDTO {
 export interface ArticleListDTO {
   listTitle: string;
   listTitle: string;
-  mainPicCount: string;
+  mainPicCount: number;
   videosCount: string;
   videosCount: string;
   voicesCount: string;
   voicesCount: string;
   landscape: number;
   landscape: number;
@@ -20,7 +25,7 @@ export interface ArticleListDTO {
   id: string;
   id: string;
   serialsId: string;
   serialsId: string;
   oldContentId: string;
   oldContentId: string;
-  type: string;
+  type: number;
   tenancy: string;
   tenancy: string;
   clientPubFlag: string;
   clientPubFlag: string;
   grayScale: string;
   grayScale: string;
@@ -62,11 +67,12 @@ export interface ArticleListDTO {
   joinActivity: string;
   joinActivity: string;
   userType: string;
   userType: string;
   content: object;
   content: object;
-  contentShare: [];
+  contentShare: ContentShareDTO[];
   contentLinkData: string;
   contentLinkData: string;
-  contentExt: [];
+  contentExt: ContentExtDTO[];
   contentVideos: contentVideosDTO[];
   contentVideos: contentVideosDTO[];
-  contentPictures: [];
+  appStyleVideos: contentVideosDTO[];
+  contentPictures: appStyleImagesDTO[];
   contentPayments: string;
   contentPayments: string;
   contentPaymentStaffs: string;
   contentPaymentStaffs: string;
   contentTxt: [];
   contentTxt: [];
@@ -78,7 +84,7 @@ export interface ArticleListDTO {
   contentStatistics: string;
   contentStatistics: string;
   topicExistHeadImage: string;
   topicExistHeadImage: string;
   topicComps: string;
   topicComps: string;
-  live: string;
+  live: LiveDTO;
   statusInfo: string;
   statusInfo: string;
   askInfo: string;
   askInfo: string;
   askAttachmentList: string;
   askAttachmentList: string;
@@ -87,5 +93,5 @@ export interface ArticleListDTO {
   ttopicInteracts: string;
   ttopicInteracts: string;
   ttopic: string;
   ttopic: string;
   mlive: string;
   mlive: string;
-  vlives: string
+  vlives: VlivesDTO[];
 }
 }

@@ -29,4 +29,9 @@ export interface CompDTO {
   subType: string;
   subType: string;
   imageScale: number; // 封面图比例 1-4:3, 2-16:9, 3-3:2
   imageScale: number; // 封面图比例 1-4:3, 2-16:9, 3-3:2
   audioDataList: AudioDTO[];
   audioDataList: AudioDTO[];
+
+  /**
+   * 组件内容源类型  (LIVE_HORIZONTAL_CARD\LIVE_RESERVATION\LIVE_LARGE_CARD\LIVE_END\LIVE_MONTHLY_RANKING  )
+   */
+  dataSourceType: string;
 }
 }

@@ -2,6 +2,7 @@ import { CompDTO } from './CompDTO';
 
 
 /**
 /**
  * Page数据DTO
  * Page数据DTO
+ * 其实是comp接口（display/zh/c/compInfo）返回
  */
  */
 export interface PageDTO {
 export interface PageDTO {
   pageId: string; // 页面id
   pageId: string; // 页面id

@@ -12,4 +12,5 @@ export interface ExtraDTO extends ItemDTO {
   sourcePage: string;
   sourcePage: string;
   relId: string;
   relId: string;
   relType: string;
   relType: string;
+  liveStreamType?: number
 }
 }

@@ -21,6 +21,7 @@ export interface ContentDTO {
   lengthTime?: object;
   lengthTime?: object;
   linkUrl: string;
   linkUrl: string;
   openLikes: number;
   openLikes: number;
+  openComment?: number;
   openUrl: string;
   openUrl: string;
   pageId: string;
   pageId: string;
   // playUrls: any[];
   // playUrls: any[];
@@ -71,6 +72,7 @@ export interface ContentDTO {
   photoNum: number;
   photoNum: number;
   corner: string;
   corner: string;
   rmhPlatform: number;
   rmhPlatform: number;
-  newTags: string
-
+  newTags: string;
+  titleShow?: number;
+  isSearch?: boolean; // 是否是搜索的结果，区分搜索和主页的数据
 }
 }

@@ -18,5 +18,6 @@ export interface Params {
   // 8.专辑竖屏详情页
   // 8.专辑竖屏详情页
   // 13.音频详情页
   // 13.音频详情页
   // 17.多图（图集）详情页
   // 17.多图（图集）详情页
-  detailPageType?:number; // 详情页类型
+  detailPageType?: number; // 详情页类型
+  liveStyle?: number; // 直播类型：0横屏，1竖屏
 }
 }

@@ -160,7 +160,7 @@ export interface postExecuteCollectRecordParams {
   contentList: postExecuteCollectRecordParamsItem[]
   contentList: postExecuteCollectRecordParamsItem[]
 }
 }
 
 
-interface contentListItem {
+export interface contentListItem {
   contentId: string;
   contentId: string;
   contentType: number;
   contentType: number;
 }
 }

 export interface H5ReceiveDataExtraBean {
 export interface H5ReceiveDataExtraBean {
   creatorId: string;
   creatorId: string;
   isLogin: string;
   isLogin: string;
+  networkStatus: number;
+  loadImageOnlyWifiSwitch: string
 }
 }

@@ -158,16 +158,27 @@ export interface LiveDetailsBean {
    */
    */
   liveInfo: LiveInfo
   liveInfo: LiveInfo
   fullColumnImgUrls: Array<FullColumnImgUrls>
   fullColumnImgUrls: Array<FullColumnImgUrls>
-  vlive: Array<Vlive>
   newsTitle: string
   newsTitle: string
+  newsId: string
   newIntroduction: string
   newIntroduction: string
+  //迁移id
+  oldNewsId: string
+  reLInfo: ReLInfo
+  rmhInfo: RmhInfo
 }
 }
 
 
 export interface LiveInfo {
 export interface LiveInfo {
-  //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
+  //直播新闻-直播状态  wait 待开播 running 直播中 end 已结束cancel已取消paused暂停
   liveState: string
   liveState: string
   //2024-04-12 15:00:00 直播开始时间
   //2024-04-12 15:00:00 直播开始时间
   planStartTime: string
   planStartTime: string
+  liveStyle: number;
+  vlive: Array<Vlive>
+  mlive: MLive
+}
+
+export interface MLive {
+  mliveId: string
 }
 }
 
 
 export interface FullColumnImgUrls {
 export interface FullColumnImgUrls {
@@ -179,4 +190,18 @@ export interface Vlive {
   liveUrl: string
   liveUrl: string
   //直播回看地址，多路直播录制文件URL
   //直播回看地址，多路直播录制文件URL
   replayUri: string
   replayUri: string
+  // 画面兼容 0-横屏流画面,1-竖屏流画面(仅竖屏直播使用)【前端使用， 可能竖屏模式但是直播流画面是横屏流，前端使用该字段】
+  liveStreamType: number | null
+}
+
+export interface ReLInfo {
+  relId: string
+}
+
+export interface RmhInfo {
+  rmhName: string;
+  rmhHeadUrl: string;
+  rmhId: string;
+  userId: string;
+  userType: string;
 }
 }

+export interface LiveRoomDataBean {
+  barrageNum: number,
+  likeNum: number,
+  liveId: number,
+  pv: number,
+  subscribeNum: number,
+}

+export interface ContentExtDTO {
+  id: number;
+  contentId: number;
+  openLikes: number;
+  openComment: number;
+  openDownload: number;
+  likesStyle: number;
+  top: number;
+  joinActivity: number;
+  hotFlag: number;
+  preCommentFlag: number;
+  currentPoliticsFlag: number;
+  appStyle: number;
+  tenancy: number;
+  downloadFlag: number;
+  publishType: number;
+  payment: number;
+  deleted: number;
+  createUser: string;
+  createTime: string;
+  updateUser: string;
+  updateTime: string;
+  keyArticle: number;
+  toExamine: number;
+  bestNoticer: number;
+  commentDisplay: number;
+  imageQuality: number;
+  haveAdver: number;
+  openAudio: number;
+  withdrawNum: number;
+  menuShow: string;
+  recommendShow: string;
+  recommendSelf: string;
+  concentration: string;
+  objectPosId: string;
+  articleExistVote: number;
+  zhExpireTimeAi: number;
+  zhTagsAi: string;
+  appReadCountShow: number;
+}

+export interface ContentShareDTO {
+  id?: number;
+  shareSwitch: number;
+  contentId?: number;
+  sharePicture: string;
+  fullUrl: string;
+  shareTitle: string;
+  shareDescription: string;
+}

+export interface LiveDTO {
+  status: string;
+  previewType: number;
+  planStartTime: number;
+  tplId: number;
+  startTime: number;
+  endTime: number;
+  userOrigin: string;
+  liveStyle: number;
+  liveWay: number;
+  liveStreamType: number;
+  liveExperienceSwitch: boolean;
+  liveExperienceTime: number;
+  handAngleSwitch: boolean;
+  likeStyle: string;
+  liveType: string;
+  preDisplay: number;
+  playbackSwitch: boolean;
+  originalAddress: string;
+  provinceName: string;
+  liveRemindSwitch: boolean;
+  recordUrlFlag: number;
+  vr: number;
+  landscape: string;
+  recordUrl: string;
+  uri: string;
+}

+import { ArticleListDTO } from  '../component/ArticleListDTO'
+/**
+* http://192.168.1.3:3300/project/3796/interface/api/188629
+* 接口名称：客户端 客态主页页面-获取作品-从发布库获取该创作者下 稿件列表
+  * 接口路径：/contact/zh/c/master/detail
+  * 人民号-主页详情页面数据
+  */
+export interface PeopleShipUserDetailData {
+  articleCreation: number;
+  attentionNum: number;
+  authIcon: string;
+  authId: number;
+  authPersonal: string;
+  authTitle: string;
+  avatarFrame: string;
+  banControl: number;
+  browseNum: number;
+  categoryAuth: string;
+  city: string;
+  cnContentPublish: number;
+  cnIsComment: number;
+  cnIsLike: number;
+  cnLiveCommentControl: number;
+  cnLiveGiftControl: number;
+  cnLiveLikeControl: number;
+  cnLivePublish: number;
+  cnLiveShareControl: number;
+  cnShareControl: number;
+  contentPublish: number;
+  creatorId: string;
+  district: string;
+  dynamicControl: number;
+  dynamicCreation: number;
+  fansNum: number;
+  headPhotoUrl: string;
+  honoraryIcon: string;
+  honoraryTitle: string;
+  introduction: string;
+  isAttention: number;
+  isComment: number;
+  isLike: number;
+  liveCommentControl: number;
+  liveGiftControl: number;
+  liveLikeControl: number;
+  livePublish: number;
+  liveShareControl: number;
+  liveSwitch: number;
+  mainControl: number;
+  originUserId: string;
+  pictureCollectionCreation: number;
+  posterShareControl: number;
+  province: string;
+  region: string;
+  registTime: number;
+  shareControl: number;
+  shareUrl: string;
+  subjectType: number;
+  userId: string;
+  userName: string;
+  userType: string;
+  videoCollectionCreation: number;
+  videoCreation: number;
+}
+
+//article/count
+/*
+ * 客户端 客态查询发布作品数量
+ * http://192.168.1.3:3300/project/3856/interface/api/190579
+ * 接口路径：/zh/c/article/count
+ * */
+export interface ArticleCountData {
+  zbCount: number; //直播数量 （直播）
+  dtCount: number; //动态数量 （动态）
+  twCount: number; //图文数量 (文章)
+  ztCount: number; //组图数量 （图集）
+  spCount: number; // 视频数量	（视频）
+  publishCount: number; // 发布数量
+  serialsCount: number; //
+}
+
+export class ArticleTypeData {
+  name?: string; //名称
+  type?: number; // 类型
+
+  constructor(name?: string, type?: number) {
+    this.name = name;
+    this.type = type;
+  }
+}
+
+export interface ArticleListData {
+  totalCount: number;
+  pageNum: number;
+  pageSize: number;
+  list: ArticleListDTO[];
+}
+
+// 影响力
+export interface InfluenceData {
+  creatorId: string;
+  influence: number;
+  influenceTotal: number;
+}

+export interface VlivesDTO {
+  id: number;
+  type: string;
+  // definition?: any;
+  // streamAppName?: any;
+  // streamName?: any;
+  pullStreamUrl: string;
+  // streamStatus?: any;
+  // shiftEnable?: any;
+  // clipEnable?: any;
+  // recordEnable?: any;
+  status: string;
+  liveId: number;
+  name: string;
+  // serialNum?: any;
+  streamWH: string;
+  recordUrl: string;
+  // playPreviewImageUri?: any;
+  // playPreviewImageFullUrl?: any;
+  // playPreviewImageBucket?: any;
+  showPad: boolean;
+  // liveStreamManagerId?: any;
+  // recordBucket?: any;
+  // recordUri?: any;
+}

@@ -63,3 +63,9 @@ export { SpacialTopicPageComponent } from './src/main/ets/components/SpacialTopi
 
 
 export { LogoutViewModel } from "./src/main/ets/viewmodel/LogoutViewModel"
 export { LogoutViewModel } from "./src/main/ets/viewmodel/LogoutViewModel"
 
 
+export { ImageSwiperComponent } from "./src/main/ets/components/ImageSwiperComponent"
+
+export { newsSkeleton } from "./src/main/ets/components/skeleton/newsSkeleton"
+
+export { LiveCommentComponent } from "./src/main/ets/components/comment/view/LiveCommentComponent"
+

@@ -6,8 +6,11 @@
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
   "specifiers": {
   "specifiers": {
     "@ohos/axios@^2.1.1": "@ohos/axios@2.2.0",
     "@ohos/axios@^2.1.1": "@ohos/axios@2.2.0",
+    "@ohos/lottie@2.0.0": "@ohos/lottie@2.0.0",
     "wdBean@../wdBean": "wdBean@../wdBean",
     "wdBean@../wdBean": "wdBean@../wdBean",
     "wdConstant@../../commons/wdConstant": "wdConstant@../../commons/wdConstant",
     "wdConstant@../../commons/wdConstant": "wdConstant@../../commons/wdConstant",
+    "wdDetailPlayApi@../wdDetailPlayApi": "wdDetailPlayApi@../wdDetailPlayApi",
+    "wdDetailPlayShortVideo@../wdDetailPlayShortVideo": "wdDetailPlayShortVideo@../wdDetailPlayShortVideo",
     "wdJsBridge@../../commons/wdJsBridge": "wdJsBridge@../../commons/wdJsBridge",
     "wdJsBridge@../../commons/wdJsBridge": "wdJsBridge@../../commons/wdJsBridge",
     "wdKit@../../commons/wdKit": "wdKit@../../commons/wdKit",
     "wdKit@../../commons/wdKit": "wdKit@../../commons/wdKit",
     "wdLogin@../wdLogin": "wdLogin@../wdLogin",
     "wdLogin@../wdLogin": "wdLogin@../wdLogin",
@@ -23,6 +26,12 @@
       "resolved": "https://repo.harmonyos.com/ohpm/@ohos/axios/-/axios-2.2.0.har",
       "resolved": "https://repo.harmonyos.com/ohpm/@ohos/axios/-/axios-2.2.0.har",
       "registryType": "ohpm"
       "registryType": "ohpm"
     },
     },
+    "@ohos/lottie@2.0.0": {
+      "name": "@ohos/lottie",
+      "integrity": "sha512-jFEFYfuqGO323aMiwtzHmDGRJI0qTxjZD2Lzbn+LxRdoHSfu5OVu22I8gVm5ej019tCw3WOk547NHZ2GuWiNSg==",
+      "resolved": "https://repo.harmonyos.com/ohpm/@ohos/lottie/-/lottie-2.0.0.har",
+      "registryType": "ohpm"
+    },
     "wdBean@../wdBean": {
     "wdBean@../wdBean": {
       "name": "wdbean",
       "name": "wdbean",
       "resolved": "../wdBean",
       "resolved": "../wdBean",
@@ -33,6 +42,32 @@
       "resolved": "../../commons/wdConstant",
       "resolved": "../../commons/wdConstant",
       "registryType": "local"
       "registryType": "local"
     },
     },
+    "wdDetailPlayApi@../wdDetailPlayApi": {
+      "name": "wddetailplayapi",
+      "resolved": "../wdDetailPlayApi",
+      "registryType": "local",
+      "dependencies": {
+        "wdPlayer": "file:../../features/wdPlayer",
+        "wdKit": "file:../../commons/wdKit",
+        "wdBean": "file:../../features/wdBean",
+        "wdRouter": "file:../../commons/wdRouter",
+        "wdNetwork": "file:../../commons/wdNetwork"
+      }
+    },
+    "wdDetailPlayShortVideo@../wdDetailPlayShortVideo": {
+      "name": "wddetailplayshortvideo",
+      "resolved": "../wdDetailPlayShortVideo",
+      "registryType": "local",
+      "dependencies": {
+        "@ohos/lottie": "2.0.0",
+        "wdPlayer": "file:../../features/wdPlayer",
+        "wdKit": "file:../../commons/wdKit",
+        "wdBean": "file:../../features/wdBean",
+        "wdRouter": "file:../../commons/wdRouter",
+        "wdNetwork": "file:../../commons/wdNetwork",
+        "wdDetailPlayApi": "file:../../features/wdDetailPlayApi"
+      }
+    },
     "wdJsBridge@../../commons/wdJsBridge": {
     "wdJsBridge@../../commons/wdJsBridge": {
       "name": "wdjsbridge",
       "name": "wdjsbridge",
       "resolved": "../../commons/wdJsBridge",
       "resolved": "../../commons/wdJsBridge",

@@ -8,8 +8,11 @@ import { Card6Component } from './cardview/Card6Component';
 import { Card9Component } from './cardview/Card9Component';
 import { Card9Component } from './cardview/Card9Component';
 import { Card10Component } from './cardview/Card10Component';
 import { Card10Component } from './cardview/Card10Component';
 import { Card11Component } from './cardview/Card11Component';
 import { Card11Component } from './cardview/Card11Component';
-import { Card17Component } from './cardview/Card17Component';
+import { Card12Component } from './cardview/Card12Component';
+import { Card14Component } from './cardview/Card14Component';
 import { Card15Component } from './cardview/Card15Component';
 import { Card15Component } from './cardview/Card15Component';
+import { Card16Component } from './cardview/Card16Component';
+import { Card17Component } from './cardview/Card17Component';
 import { Card19Component } from './cardview/Card19Component';
 import { Card19Component } from './cardview/Card19Component';
 import { Card20Component } from './cardview/Card20Component';
 import { Card20Component } from './cardview/Card20Component';
 import { Card21Component } from './cardview/Card21Component';
 import { Card21Component } from './cardview/Card21Component';
@@ -45,8 +48,14 @@ export struct CardParser {
       Card10Component({ contentDTO })
       Card10Component({ contentDTO })
     } else if (contentDTO.appStyle === CompStyle.Card_11) {
     } else if (contentDTO.appStyle === CompStyle.Card_11) {
       Card11Component({ contentDTO })
       Card11Component({ contentDTO })
+    } else if (contentDTO.appStyle === CompStyle.Card_12) {
+      Card12Component({ contentDTO })
+    } else if (contentDTO.appStyle === CompStyle.Card_14) {
+      Card14Component({ contentDTO })
     } else if (contentDTO.appStyle === CompStyle.Card_15) {
     } else if (contentDTO.appStyle === CompStyle.Card_15) {
       Card15Component({ contentDTO })
       Card15Component({ contentDTO })
+    } else if (contentDTO.appStyle === CompStyle.Card_16) {
+      Card16Component({ contentDTO })
     } else if (contentDTO.appStyle === CompStyle.Card_17) {
     } else if (contentDTO.appStyle === CompStyle.Card_17) {
       Card17Component({ contentDTO })
       Card17Component({ contentDTO })
     } else if (contentDTO.appStyle === CompStyle.Card_19) {
     } else if (contentDTO.appStyle === CompStyle.Card_19) {
@@ -58,9 +67,9 @@ export struct CardParser {
     }
     }
     else {
     else {
       // todo:组件未实现 / Component Not Implemented
       // todo:组件未实现 / Component Not Implemented
-      Text(contentDTO.appStyle)
-        .width(CommonConstants.FULL_PARENT)
-        .padding(10)
+      // Text(contentDTO.appStyle)
+      //   .width(CommonConstants.FULL_PARENT)
+      //   .padding(10)
       // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
       // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
     }
     }
   }
   }

@@ -9,6 +9,7 @@ import {
 import {
 import {
   HorizontalStrokeCardThreeTwoRadioForOneComponent
   HorizontalStrokeCardThreeTwoRadioForOneComponent
 } from './view/HorizontalStrokeCardThreeTwoRadioForOneComponent';
 } from './view/HorizontalStrokeCardThreeTwoRadioForOneComponent';
+import { ZhSingleRow02 } from './compview/ZhSingleRow02';
 import { ZhSingleRow04 } from './compview/ZhSingleRow04';
 import { ZhSingleRow04 } from './compview/ZhSingleRow04';
 import { ZhSingleColumn04 } from './compview/ZhSingleColumn04';
 import { ZhSingleColumn04 } from './compview/ZhSingleColumn04';
 import { ZhSingleColumn05 } from './compview/ZhSingleColumn05';
 import { ZhSingleColumn05 } from './compview/ZhSingleColumn05';
@@ -30,7 +31,10 @@ export struct CompParser {
   compIndex: number = 0;
   compIndex: number = 0;
 
 
   build() {
   build() {
-    this.componentBuilder(this.compDTO, this.compIndex);
+    Column(){
+      this.componentBuilder(this.compDTO, this.compIndex);
+      Divider().strokeWidth(1).color('#f5f5f5').padding({left:16,right:16})
+    }
   }
   }
 
 
   @Builder
   @Builder
@@ -47,6 +51,8 @@ export struct CompParser {
       } else {
       } else {
         HorizontalStrokeCardThreeTwoRadioForOneComponent({ compDTO: compDTO })
         HorizontalStrokeCardThreeTwoRadioForOneComponent({ compDTO: compDTO })
       }
       }
+    } else if (compDTO.compStyle === CompStyle.Zh_Single_Row_02) {
+      ZhSingleRow02({ compDTO })
     } else if (compDTO.compStyle === CompStyle.Zh_Single_Row_03) {
     } else if (compDTO.compStyle === CompStyle.Zh_Single_Row_03) {
       LiveHorizontalReservationComponent({ compDTO: compDTO })
       LiveHorizontalReservationComponent({ compDTO: compDTO })
     } else if (compDTO.compStyle === CompStyle.Zh_Grid_Layout_02) {
     } else if (compDTO.compStyle === CompStyle.Zh_Grid_Layout_02) {
@@ -75,6 +81,9 @@ export struct CompParser {
             WDRouterRule.jumpWithPage(WDRouterPage.QualityCommentsPage)
             WDRouterRule.jumpWithPage(WDRouterPage.QualityCommentsPage)
           }
           }
         })
         })
+      // Text(compDTO.compStyle)
+      //   .width(CommonConstants.FULL_PARENT)
+      //   .padding(10)
       // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
       // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
     }
     }
   }
   }

-import { Logger } from 'wdKit';
+import { AccountManagerUtils, Logger } from 'wdKit';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
-import { ContentDetailDTO } from 'wdBean';
+import { ContentDetailDTO,batchLikeAndCollectResult,batchLikeAndCollectParams,postBatchAttentionStatusParams,
+  PhotoListBean,
+  ContentDTO, } from 'wdBean';
 import media from '@ohos.multimedia.media';
 import media from '@ohos.multimedia.media';
 import { OperRowListView } from './view/OperRowListView';
 import { OperRowListView } from './view/OperRowListView';
 import { WDPlayerController } from 'wdPlayer/Index';
 import { WDPlayerController } from 'wdPlayer/Index';
+import { ContentConstants } from '../constants/ContentConstants';
+import { ProcessUtils } from '../utils/ProcessUtils';
 
 
 const TAG = 'DynamicDetailComponent'
 const TAG = 'DynamicDetailComponent'
 @Preview
 @Preview
@@ -14,8 +18,16 @@ export struct DynamicDetailComponent {
   private contentId: string = ''
   private contentId: string = ''
   private relType: string = ''
   private relType: string = ''
   //出参
   //出参
-  @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]
+  @State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
+  //变量
+  /**
+   * 默认未关注 点击去关注
+   */
+  private  followStatus: String = '0';
+  @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
 
 
+  //跳转
+  private mJumpInfo: ContentDTO = {} as ContentDTO;
 
 
   async aboutToAppear() {
   async aboutToAppear() {
     await this.getContentDetailData()
     await this.getContentDetailData()
@@ -25,20 +37,408 @@ export struct DynamicDetailComponent {
   }
   }
 
 
   build() {
   build() {
-      Row() {
-        Column(){
-        Text("this is a test!")
+    Row() {
+      Column(){
+        //logo、日期
+        Row() {
+          Image($r('app.media.ic_article_rmh'))
+            .width($r('app.float.margin_80'))
+            .height($r('app.float.margin_28'))
+            .margin({ left: $r('app.float.margin_16') })
+          Blank()
+          Text("2023年03月14日 08:16")
+            .fontColor($r('app.color.color_B0B0B0'))
+            .fontSize($r('app.float.font_size_12'))
+            .lineHeight($r('app.float.margin_28'))
+            .margin({ right: $r('app.float.margin_16') })
         }
         }
-      }
+        .height($r('app.float.margin_48'))
+        .width('100%')
+        //分割线
+        Image($r('app.media.ic_news_detail_division'))
+            .width('100%')
+            .height($r('app.float.margin_7'))
+            .margin({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} )
+        //号主信息
+        Row() {
+          //头像
+          Stack() {
+            Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
+              .alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))
+              .width($r('app.float.margin_32'))
+              .height($r('app.float.margin_32'))
+              .objectFit(ImageFit.Cover)
+              .borderRadius($r('app.float.margin_16'))
+            Image($r('app.media.icon_border_test'))
+              .width($r('app.float.margin_48'))
+              .height($r('app.float.margin_48'))
+              .objectFit(ImageFit.Cover)
+              .borderRadius($r('app.float.margin_24'))
+          }
+          .width($r('app.float.margin_48'))
+          .height($r('app.float.margin_48'))
+          .alignContent(Alignment.Center)
+          Column(){
+            //昵称
+            Text("this.contentDetailData.rmhInfo?.rmhName")
+              .fontSize($r('app.float.font_size_14'))
+              .fontColor($r('app.color.color_222222'))
+              .fontWeight(FontWeight.Medium)
+              .margin({ left: $r('app.float.margin_5') })
+            //简介
+            Text("this.contentDetailData.rmhInfo?.rmhDesc")
+              .fontSize($r('app.float.font_size_14'))
+              .fontColor($r('app.color.color_B0B0B0'))
+              .fontWeight(FontWeight.Medium)
+              .margin({ left: $r('app.float.margin_5') })
+          }
+          if (this.followStatus == '0') {
+            Text('关注')
+              .width(60)
+              .height($r('app.float.margin_48'))
+              .textAlign(TextAlign.Center)
+              .fontSize($r('app.float.font_size_12'))
+              .borderRadius($r('app.float.vp_3'))
+              .backgroundColor($r('app.color.color_ED2800'))
+              .fontColor($r('app.color.color_fff'))
+              .onClick(() => {
+                // this.handleAccention(this.item, 1)
+              })
+          } else {
+            Text('已关注')
+              .width($r('app.float.margin_60'))
+              .height($r('app.float.margin_48'))
+              .borderWidth(1)
+              .textAlign(TextAlign.Center)
+              .fontSize($r('app.float.font_size_12'))
+              .borderRadius($r('app.float.vp_3'))
+              .borderColor($r('app.color.color_CCCCCC'))
+              .fontColor($r('app.color.color_CCCCCC'))
+              .onClick(() => {
+                // this.handleAccention(this.item, 0)
+              })
+          }
+        }
+        .width('100%')
+        //内容
+        Text("这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里")
+          .fontColor($r('app.color.color_222222'))
+          .fontSize($r('app.float.font_size_18'))
+          .lineHeight($r('app.float.margin_25'))
+          .margin({ top: $r('app.float.margin_6')
+          ,left: $r('app.float.margin_16')
+          ,right: $r('app.float.margin_16') })
+        if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){
+          //附件内容：图片/视频
+          if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){
+            GridRow({
+              columns: { sm: this.contentDetailData.photoList.length
+              , md: this.contentDetailData.photoList.length == 1?1:
+                  this.contentDetailData.photoList.length == 4?2:
+                    3 },
+              breakpoints: { value: ['320vp', '520vp', '840vp'] }
+            }) {
+              ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
+                GridCol() {
+                  this.buildItemCard(this.contentDetailData.photoList[index],this.contentDetailData.photoList.length, index);
+                }
+              })
+            }
+          }else{
+            //附件内容：视频，只有一个
+            ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
+              GridCol() {
+                this.buildItemCard(this.contentDetailData.photoList[index],this.contentDetailData.photoList.length, index);
+              }
+            })
+          }
+        }
+        //特别声明
+        Text("特别声明：本文为人民日报新媒体平台“人民号”作者上传并发布，仅代表作者观点。人民日报仅提供信息发布平台。")
+          .fontColor($r('app.color.color_CCCCCC'))
+          .fontSize($r('app.float.font_size_12'))
+          .lineHeight($r('app.float.margin_16'))
+          .margin({ top: $r('app.float.margin_16')
+          ,left: $r('app.float.margin_16')
+          ,right: $r('app.float.margin_16') })
+        //微信/朋友圈/微博
+        Row(){
+          Image($r('app.media.xxhdpi_pic_wechat'))
+            .width($r('app.float.margin_116'))
+            .height($r('app.float.margin_36'))
+            .objectFit(ImageFit.Cover)
+          Image($r('app.media.xxhdpi_pic_pyq'))
+            .width($r('app.float.margin_116'))
+            .height($r('app.float.margin_36'))
+            .margin({ left: $r('app.float.margin_4_negative')})
+            .objectFit(ImageFit.Cover)
+          Image($r('app.media.xxhdpi_pic_wb'))
+            .width($r('app.float.margin_116'))
+            .height($r('app.float.margin_36'))
+            .margin({ left: $r('app.float.margin_4_negative')})
+            .objectFit(ImageFit.Cover)
+        }
+        .margin({ top: $r('app.float.margin_24')})
+        //点赞
+        Row(){
+          Image($r('app.media.icon_like_selected_redheart'))
+            .width($r('app.float.margin_24'))
+            .height($r('app.float.margin_24'))
+            .objectFit(ImageFit.Cover)
+          Text("2.6万")
+            .fontColor($r('app.color.color_999999'))
+            .fontSize($r('app.float.font_size_16'))
+            .lineHeight($r('app.float.margin_20'))
+            .margin({ left: $r('app.float.margin_2')})
+        }
+        //评论组件/底部组件
 
 
+      }
+    }
+    .backgroundColor('#FFFFFFFF')
   }
   }
+  /**
+   * 请求（动态）详情页数据
+   * */
   private async getContentDetailData() {
   private async getContentDetailData() {
     try {
     try {
       let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
       let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
-      this.contentDetailData = data;
+      this.contentDetailData = data[0];
+      this.makeJumpInfo
       console.log('动态详情',JSON.stringify(this.contentDetailData))
       console.log('动态详情',JSON.stringify(this.contentDetailData))
     } catch (exception) {
     } catch (exception) {
     console.log('请求失败',JSON.stringify(exception))
     console.log('请求失败',JSON.stringify(exception))
     }
     }
+    this.getBatchAttentionStatus
+    this.getInteractDataStatus
+  }
+
+  // 查询当前登录用户点赞状态
+  private async getInteractDataStatus() {
+    //未登录
+    if(!AccountManagerUtils.isLoginSync() || this.contentDetailData?.openLikes != 1){
+      return
+    }
+    try {
+      const params: batchLikeAndCollectParams = {
+        contentList: [
+          {
+            contentId: this.contentDetailData?.newsId + '',
+            contentType: this.contentDetailData?.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))
+    }
+  }
+
+  /**
+   * 查询当前登录用户是否关注作品号主
+   * */
+  private async getBatchAttentionStatus() {
+    try {
+      const params: postBatchAttentionStatusParams = {
+        creatorIds: [{ creatorId: this.contentDetailData?.rmhInfo?.rmhId ?? '' }]
+      }
+      let data = await MultiPictureDetailViewModel.getBatchAttentionStatus(params)
+      this.followStatus = data[0]?.status;
+      Logger.info(TAG, `followStatus：${JSON.stringify(this.followStatus)}`)
+    } catch (exception) {
+
+    }
+  }
+  @Builder
+  setItemImageStyle(picPath: string,topLeft: number,topRight: number,bottomLeft: number,bottomRight: number){
+    //四角圆角
+    Image(picPath)
+      .width(44).aspectRatio(1 / 1).margin(16).borderRadius({topLeft: topLeft, topRight: topRight, bottomLeft: bottomLeft, bottomRight: bottomRight})
+  }
+  /**
+   * 组件项
+   *
+   * @param programmeBean item 组件项, 上面icon,下面标题
+   */
+  @Builder
+  buildItemCard(item: PhotoListBean,len: number,index: number) {
+    Column() {
+      this.setItemImageRoundCorner(len, item, index)
+      Flex({ direction: FlexDirection.Row }) {
+        Image($r('app.media.icon_long_pic'))
+          .width(14)
+          .height(14)
+          .margin({right: 4})
+        Text('长图')
+          .fontSize(12)
+          .fontWeight(400)
+          .fontColor(0xffffff)
+          .fontFamily('PingFang SC')
+      }
+      .width(48)
+      .padding({bottom: 9})
+    }
+    .width('100%')
+    .onClick((event: ClickEvent) => {
+      if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){
+        //fixme 跳转到查看图片页面（带页脚/下载按钮）
+        // this.mJumpInfo.objectType = ContentConstants.TYPE_
+        ProcessUtils.processPage(this.mJumpInfo)
+      }else{
+        //fixme 跳转到播放视频页面（点播）
+        this.mJumpInfo.objectType = ContentConstants.TYPE_VOD
+        ProcessUtils.processPage(this.mJumpInfo)
+      }
+    })
+  }
+
+  //创建跳转信息
+  makeJumpInfo(){
+    this.mJumpInfo.pageId = 'dynamicDetailPage';
+    // this.mJumpInfo.from = 'dynamicDetailPage';
+    this.mJumpInfo.objectId = this.contentDetailData.newsId+"";
+    this.mJumpInfo.relType = this.contentDetailData.reLInfo?.relType+"";
+    this.mJumpInfo.relId = this.contentDetailData.reLInfo?.relId+"";
+  }
+
+  //设置图片圆角
+  @Builder
+  setItemImageRoundCorner(len: number, item: PhotoListBean, index: number) {
+    if (len == 1) {
+      //四角圆角
+      this.setItemImageStyle(item.picPath, 4, 4, 4, 4);
+    } else if (len == 2) {
+      if (index == 0) {
+        //左边圆角
+        this.setItemImageStyle(item.picPath, 4, 0, 4, 0);
+      } else {
+        //右边圆角
+        this.setItemImageStyle(item.picPath, 0, 4, 0, 4);
+      }
+    } else if (3 == len) {
+      if (index == 0) {
+        //左边圆角
+        this.setItemImageStyle(item.picPath, 4, 0, 4, 0);
+      } else if (index == 1) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else {
+        //右边圆角
+        this.setItemImageStyle(item.picPath, 0, 4, 0, 4);
+      }
+    } else if (4 == len) {
+      if (index == 0) {
+        //左边圆角
+        this.setItemImageStyle(item.picPath, 4, 0, 4, 0);
+      } else if (index == 1) {
+        //右边圆角
+        this.setItemImageStyle(item.picPath, 0, 4, 0, 4);
+      } else if (index = 2) {
+        //左边圆角
+        this.setItemImageStyle(item.picPath, 4, 0, 4, 0);
+      } else {
+        //右边圆角
+        this.setItemImageStyle(item.picPath, 0, 4, 0, 4);
+      }
+    } else if (5 == len) {
+      if (index == 0) {
+        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+      } else if (index == 1) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index = 2) {
+        this.setItemImageStyle(item.picPath, 4, 4, 4, 4);
+      } else if (index = 3) {
+        this.setItemImageStyle(item.picPath, 0, 0, 4, 0);
+      } else {
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+      }
+    } else if (6 == len) {
+      if (index == 0) {
+        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+      } else if (index == 1) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index = 2) {
+        this.setItemImageStyle(item.picPath, 0, 4, 0, 0);
+      } else if (index = 3) {
+        this.setItemImageStyle(item.picPath, 0, 0, 4, 0);
+      } else if (index = 4) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else {
+        //右边圆角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+      }
+    } else if (7 == len) {
+      if (index == 0) {
+        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+      } else if (index == 1) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index = 2) {
+        this.setItemImageStyle(item.picPath, 0, 4, 0, 0);
+      } else if (index = 3) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index = 4) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index = 5) {
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+      } else {
+        this.setItemImageStyle(item.picPath, 0, 0, 4, 4);
+      }
+    } else if (8 == len) {
+      if (index == 0) {
+        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+      } else if (index == 1) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index = 2) {
+        this.setItemImageStyle(item.picPath, 0, 4, 0, 0);
+      } else if (index = 3) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index = 4) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index = 5) {
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+      } else if (index = 6) {
+        this.setItemImageStyle(item.picPath, 0, 0, 4, 0);
+      } else {
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+      }
+    } else {
+      if (index == 0) {
+        this.setItemImageStyle(item.picPath, 4, 0, 0, 0);
+      } else if (index == 1) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index == 2) {
+        this.setItemImageStyle(item.picPath, 0, 4, 0, 0);
+      } else if (index == 3) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index == 4) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index == 5) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else if (index == 6) {
+        this.setItemImageStyle(item.picPath, 0, 0, 4, 0);
+      } else if (index == 7) {
+        //直角
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 0);
+      } else {
+        this.setItemImageStyle(item.picPath, 0, 0, 0, 4);
+      }
+    }
   }
   }
 }
 }

@@ -2,6 +2,7 @@ import { Action, NewspaperListItemBean, NewspaperPositionItemBean, Params } from
 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
 import { StringUtils } from 'wdKit';
 import { StringUtils } from 'wdKit';
 import { WDRouterRule } from 'wdRouter';
 import { WDRouterRule } from 'wdRouter';
+import { newsSkeleton } from './skeleton/newsSkeleton';
 
 
 @Component
 @Component
 export struct ENewspaperItemComponent {
 export struct ENewspaperItemComponent {
@@ -11,13 +12,20 @@ export struct ENewspaperItemComponent {
   private startX: number = 0
   private startX: number = 0
   private startY: number = 0
   private startY: number = 0
   private itemBeanClicked: NewspaperPositionItemBean = {} as NewspaperPositionItemBean
   private itemBeanClicked: NewspaperPositionItemBean = {} as NewspaperPositionItemBean
+  @State isShowSkeleton: boolean = true
 
 
   build() {
   build() {
     Stack() {
     Stack() {
+      newsSkeleton()
+        .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None)
       Image(this.newspaperListItemBean.pagePic)
       Image(this.newspaperListItemBean.pagePic)
         .width('100%')
         .width('100%')
         .aspectRatio(378 / 566)
         .aspectRatio(378 / 566)
         .objectFit(ImageFit.Fill)
         .objectFit(ImageFit.Fill)
+        .onComplete(() => {
+          this.isShowSkeleton = false
+        })
+        .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible)
 
 
       Canvas(this.context)
       Canvas(this.context)
         .width('100%')
         .width('100%')
@@ -62,7 +70,7 @@ export struct ENewspaperItemComponent {
               pageID: 'IMAGE_TEXT_DETAIL',
               pageID: 'IMAGE_TEXT_DETAIL',
               extra: {
               extra: {
                 relType: this.itemBeanClicked.relType ?? '',
                 relType: this.itemBeanClicked.relType ?? '',
-                relId: ''+this.itemBeanClicked.relId,
+                relId: '' + this.itemBeanClicked.relId,
                 sourcePage: '5'
                 sourcePage: '5'
               } as ExtraDTO
               } as ExtraDTO
             } as Params,
             } as Params,

@@ -8,6 +8,7 @@ import { ENewspaperCalendarDialog } from '../dialog/ENewspaperCalendarDialog';
 import font from '@ohos.font';
 import font from '@ohos.font';
 import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog';
 import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog';
 import { RMCalendarBean } from './calendar/RMCalendarBean';
 import { RMCalendarBean } from './calendar/RMCalendarBean';
+import { newsSkeleton } from './skeleton/newsSkeleton';
 
 
 @Component
 @Component
 export struct ENewspaperPageComponent {
 export struct ENewspaperPageComponent {
@@ -63,13 +64,15 @@ export struct ENewspaperPageComponent {
     customStyle: true,
     customStyle: true,
   })
   })
   //文字报纸弹框
   //文字报纸弹框
-  listDialogController: CustomDialogController = new CustomDialogController({
-    builder: ENewspaperListDialog({
-      newspaperListBean: this.newspaperListBean
-    }),
-    alignment: DialogAlignment.Bottom,
-    offset: { dx: 0, dy: 0 }
-  })
+  @State isOpenListDialog: boolean = false
+
+  // listDialogController: CustomDialogController = new CustomDialogController({
+  //   builder: ENewspaperListDialog({
+  //     newspaperListBean: this.newspaperListBean
+  //   }),
+  //   alignment: DialogAlignment.Bottom,
+  //   offset: { dx: 0, dy: 0 }
+  // })
 
 
   async aboutToAppear() {
   async aboutToAppear() {
     //获取宽高尺寸
     //获取宽高尺寸
@@ -95,182 +98,207 @@ export struct ENewspaperPageComponent {
   }
   }
 
 
   build() {
   build() {
-    RelativeContainer() {
+    Stack() {
       RelativeContainer() {
       RelativeContainer() {
-        Image($r('app.media.icon_arrow_down'))
-          .height($r('app.float.top_arrow_size'))
-          .width($r('app.float.top_arrow_size'))
+        RelativeContainer() {
+          Image($r('app.media.icon_arrow_down'))
+            .height($r('app.float.top_arrow_size'))
+            .width($r('app.float.top_arrow_size'))
+            .alignRules({
+              left: { anchor: "__container__", align: HorizontalAlign.Start },
+              center: { anchor: "__container__", align: VerticalAlign.Center }
+            })
+            .id('e_newspaper_back')
+            .onClick((event: ClickEvent) => {
+              router.back()
+            })
+
+          Row() {
+            Text(this.calendarDate?.replace('-', '.')?.replace('-', '.'))
+              .fontSize($r('app.float.font_size_20'))
+              .fontColor($r('app.color.white'))
+              .fontFamily('BebasNeue_Regular')
+              .fontWeight(FontWeight.Regular)
+
+            Image($r('app.media.icon_triangle'))
+              .width($r('app.float.border_radius_6'))
+              .height($r('app.float.border_radius_6'))
+              .margin({ left: 2, bottom: 5 })
+          }
+          .alignItems(VerticalAlign.Bottom)
           .alignRules({
           .alignRules({
-            left: { anchor: "__container__", align: HorizontalAlign.Start },
+            middle: { anchor: "__container__", align: HorizontalAlign.Center },
             center: { anchor: "__container__", align: VerticalAlign.Center }
             center: { anchor: "__container__", align: VerticalAlign.Center }
           })
           })
-          .id('e_newspaper_back')
+          .id('e_newspaper_date')
+          .onClick(() => {
+            this.calendarDialogShow = !this.calendarDialogShow
+            if (this.calendarDialogShow) {
+              this.calendarDialogController.open()
+            } else {
+              this.calendarDialogController.close()
+            }
+          })
+
+          Image($r('app.media.icon_share'))
+            .height($r('app.float.top_arrow_size'))
+            .width($r('app.float.top_arrow_size'))
+            .alignRules({
+              right: { anchor: "__container__", align: HorizontalAlign.End },
+              center: { anchor: "__container__", align: VerticalAlign.Center }
+            })
+            .id('e_newspaper_share')
+        }
+        .margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })
+        .height($r('app.float.top_bar_height'))
+        .alignRules({
+          top: { anchor: '__container__', align: VerticalAlign.Top },
+          left: { anchor: '__container__', align: HorizontalAlign.Start },
+          right: { anchor: '__container__', align: HorizontalAlign.End }
+        })
+        .id('e_newspaper_top')
+
+        if (!this.newspaperListBean || !this.newspaperListBean.list || this.newspaperListBean.list.length == 0) {
+          newsSkeleton()
+            .alignRules({
+              top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
+              middle: { anchor: "__container__", align: HorizontalAlign.Center }
+            })
+            .id('news_skeleton_id')
+            .width('100%')
+            .height(px2vp(this.picHeight) + 32)
+            .margin({ top: 35, left: 10, right: 10 })
+        }
+
+        if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
+          Swiper(this.swiperController) {
+            ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
+              ENewspaperItemComponent({ newspaperListItemBean: item })
+            })
+          }
+          .index(this.swiperIndex)
+          .width('100%')
+          .height(px2vp(this.picHeight) + 32)
+          .vertical(true)
+          .autoPlay(false)
+          .cachedCount(3)
+          .indicator(false)
+          .loop(false)
+          .displayCount(1)
+          .margin({ top: 35, left: 10, right: 10 })
+          .id('e_newspaper_content')
+          .alignRules({
+            top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
+            middle: { anchor: "__container__", align: HorizontalAlign.Center }
+          })
+          .onChange((index: number) => {
+            this.currentPageNum = this.newspaperListBean?.list[index]?.pageNum
+            this.swiperIndex = index
+          })
+
+          Image($r('app.media.newspaper_shadow'))
+            .height($r('app.float.vp_12'))
+            .margin({ left: 20, right: 20, top: -1 })
+            .objectFit(ImageFit.Contain)
+            .alignRules({
+              top: { anchor: "e_newspaper_content", align: VerticalAlign.Bottom },
+              left: { anchor: 'e_newspaper_content', align: HorizontalAlign.Start },
+              right: { anchor: 'e_newspaper_content', align: HorizontalAlign.End }
+            })
+            .id('e_newspaper_shadow')
+
+          Row() {
+            Text(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? '已到底部，可以选择其他日期' : '滑动查看下一版')
+              .fontColor(Color.White)
+              .fontSize($r('app.float.font_size_14'))
+            Image($r('app.media.icon_next_page'))
+              .width($r('app.float.vp_16'))
+              .height($r('app.float.vp_16'))
+              .visibility(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? Visibility.None : Visibility.Visible)
+          }
+          .justifyContent(FlexAlign.Center)
+          .margin({ top: $r('app.float.margin_16') })
+          .alignRules({
+            top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom },
+            middle: { anchor: "__container__", align: HorizontalAlign.Center }
+          })
+          .id('e_newspaper_next')
           .onClick((event: ClickEvent) => {
           .onClick((event: ClickEvent) => {
-            router.back()
+            this.swiperController.showNext()
           })
           })
+        }
 
 
         Row() {
         Row() {
-          Text(this.calendarDate)
-            .fontSize($r('app.float.font_size_20'))
+          Text(this.currentPageNum)
+            .fontSize($r('app.float.font_size_36'))
             .fontColor($r('app.color.white'))
             .fontColor($r('app.color.white'))
             .fontFamily('BebasNeue_Regular')
             .fontFamily('BebasNeue_Regular')
-            .fontWeight(FontWeight.Bold)
+          Text('版')
+            .fontSize($r('app.float.font_size_16'))
+            .fontColor($r('app.color.white'))
+            .margin({ bottom: 6 })
 
 
           Image($r('app.media.icon_triangle'))
           Image($r('app.media.icon_triangle'))
             .width($r('app.float.border_radius_6'))
             .width($r('app.float.border_radius_6'))
             .height($r('app.float.border_radius_6'))
             .height($r('app.float.border_radius_6'))
-            .margin({ left: 2, bottom: 5 })
+            .margin({ left: 2, bottom: 6 })
         }
         }
         .alignItems(VerticalAlign.Bottom)
         .alignItems(VerticalAlign.Bottom)
+        .margin({ left: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
         .alignRules({
         .alignRules({
-          middle: { anchor: "__container__", align: HorizontalAlign.Center },
-          center: { anchor: "__container__", align: VerticalAlign.Center }
+          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
+          left: { anchor: '__container__', align: HorizontalAlign.Start }
         })
         })
-        .id('e_newspaper_date')
-        .onClick(() => {
-          this.calendarDialogShow = !this.calendarDialogShow
-          if (this.calendarDialogShow) {
-            this.calendarDialogController.open()
+        .id('e_newspaper_page_num')
+        .onClick((event: ClickEvent) => {
+          this.pageDialogShow = !this.pageDialogShow
+          if (this.pageDialogShow) {
+            this.pageDialogController.open()
           } else {
           } else {
-            this.calendarDialogController.close()
+            this.pageDialogController.close()
           }
           }
         })
         })
 
 
-        Image($r('app.media.icon_share'))
-          .height($r('app.float.top_arrow_size'))
-          .width($r('app.float.top_arrow_size'))
-          .alignRules({
-            right: { anchor: "__container__", align: HorizontalAlign.End },
-            center: { anchor: "__container__", align: VerticalAlign.Center }
-          })
-          .id('e_newspaper_share')
-      }
-      .margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })
-      .height($r('app.float.top_bar_height'))
-      .alignRules({
-        top: { anchor: '__container__', align: VerticalAlign.Top },
-        left: { anchor: '__container__', align: HorizontalAlign.Start },
-        right: { anchor: '__container__', align: HorizontalAlign.End }
-      })
-      .id('e_newspaper_top')
-
-      if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
-        Swiper(this.swiperController) {
-          ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
-            ENewspaperItemComponent({ newspaperListItemBean: item })
-          })
-        }
-        .index(this.swiperIndex)
-        .width('100%')
-        .height(px2vp(this.picHeight) + 32)
-        .vertical(true)
-        .autoPlay(false)
-        .cachedCount(3)
-        .indicator(false)
-        .displayCount(1)
-        .margin({ top: 35, left: 10, right: 10 })
-        .id('e_newspaper_content')
-        .alignRules({
-          top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
-          middle: { anchor: "__container__", align: HorizontalAlign.Center }
-        })
-        .onChange((index: number) => {
-          this.currentPageNum = this.newspaperListBean?.list[index]?.pageNum
-          this.swiperIndex = index
-        })
-
-        Image($r('app.media.newspaper_shadow'))
-          .height($r('app.float.vp_12'))
-          .margin({ left: 20, right: 20, top: -1 })
-          .objectFit(ImageFit.Contain)
-          .alignRules({
-            top: { anchor: "e_newspaper_content", align: VerticalAlign.Bottom },
-            left: { anchor: 'e_newspaper_content', align: HorizontalAlign.Start },
-            right: { anchor: 'e_newspaper_content', align: HorizontalAlign.End }
-          })
-          .id('e_newspaper_shadow')
+        // .bindPopup(this.pageNumPopup, {
+        //   builder: this.popupBuilder,
+        //   placement: Placement.Top,
+        //   popupColor: Color.White
+        // })
 
 
         Row() {
         Row() {
-          Text('滑动查看下一版')
-            .fontColor(Color.White)
+          Image($r('app.media.icon_read_paper'))
+            .width($r('app.float.vp_20'))
+            .height($r('app.float.vp_20'))
+            .margin({ right: $r('app.float.vp_3') })
+          Text('读报纸')
             .fontSize($r('app.float.font_size_14'))
             .fontSize($r('app.float.font_size_14'))
-          Image($r('app.media.icon_next_page'))
-            .width($r('app.float.vp_16'))
-            .height($r('app.float.vp_16'))
+            .fontColor($r('app.color.white'))
         }
         }
-        .justifyContent(FlexAlign.Center)
-        .margin({ top: $r('app.float.margin_16') })
+        .alignItems(VerticalAlign.Center)
+        .margin({ right: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
         .alignRules({
         .alignRules({
-          top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom },
-          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
+          right: { anchor: '__container__', align: HorizontalAlign.End }
         })
         })
-        .id('e_newspaper_next')
+        .id('e_newspaper_read')
         .onClick((event: ClickEvent) => {
         .onClick((event: ClickEvent) => {
-          this.swiperController.showNext()
+          this.isOpenListDialog = true
         })
         })
       }
       }
+      .width('100%')
+      .height('100%')
+      .backgroundColor($r('app.color.color_80000000'))
+      .id('e_newspaper_container')
 
 
-      Row() {
-        Text(this.currentPageNum)
-          .fontSize($r('app.float.font_size_36'))
-          .fontColor($r('app.color.white'))
-          .fontFamily('BebasNeue_Regular')
-        Text('版')
-          .fontSize($r('app.float.font_size_16'))
-          .fontColor($r('app.color.white'))
-          .margin({ bottom: 6 })
-
-        Image($r('app.media.icon_triangle'))
-          .width($r('app.float.border_radius_6'))
-          .height($r('app.float.border_radius_6'))
-          .margin({ left: 2, bottom: 6 })
-      }
-      .alignItems(VerticalAlign.Bottom)
-      .margin({ left: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
-      .alignRules({
-        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
-        left: { anchor: '__container__', align: HorizontalAlign.Start }
-      })
-      .id('e_newspaper_page_num')
-      .onClick((event: ClickEvent) => {
-        this.pageDialogShow = !this.pageDialogShow
-        if (this.pageDialogShow) {
-          this.pageDialogController.open()
-        } else {
-          this.pageDialogController.close()
+      ENewspaperListDialog({
+        newspaperListBean: this.newspaperListBean,
+        closeDialog: () => {
+          this.isOpenListDialog = false
         }
         }
       })
       })
-
-      // .bindPopup(this.pageNumPopup, {
-      //   builder: this.popupBuilder,
-      //   placement: Placement.Top,
-      //   popupColor: Color.White
-      // })
-
-      Row() {
-        Image($r('app.media.icon_read_paper'))
-          .width($r('app.float.vp_20'))
-          .height($r('app.float.vp_20'))
-          .margin({ right: $r('app.float.vp_3') })
-        Text('读报纸')
-          .fontSize($r('app.float.font_size_14'))
-          .fontColor($r('app.color.white'))
-      }
-      .alignItems(VerticalAlign.Center)
-      .margin({ right: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
-      .alignRules({
-        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
-        right: { anchor: '__container__', align: HorizontalAlign.End }
-      })
-      .id('e_newspaper_read')
-      .onClick((event: ClickEvent) => {
-        this.listDialogController.open()
-      })
+        .visibility(this.isOpenListDialog ? Visibility.Visible : Visibility.None)
     }
     }
-    .width('100%')
-    .height('100%')
-    .backgroundColor($r('app.color.color_80000000'))
-    .id('e_newspaper_container')
+
   }
   }
 
 
   private async getNewspaperTime() {
   private async getNewspaperTime() {

-import { Logger, NumberFormatterUtils } from 'wdKit';
+import { Logger, NumberFormatterUtils, DateTimeUtils } from 'wdKit';
 import {
 import {
   Action,
   Action,
   ContentDetailDTO,
   ContentDetailDTO,
@@ -14,14 +14,15 @@ import DetailViewModel from '../viewmodel/DetailViewModel';
 import { ImageAndTextWebComponent } from './ImageAndTextWebComponent';
 import { ImageAndTextWebComponent } from './ImageAndTextWebComponent';
 import router from '@ohos.router';
 import router from '@ohos.router';
 import { RecommendList } from '../components/view/RecommendList'
 import { RecommendList } from '../components/view/RecommendList'
-import { CommonConstants } from 'wdConstant'
+import { CommonConstants } from 'wdConstant';
 import { HttpUrlUtils } from 'wdNetwork/Index';
 import { HttpUrlUtils } from 'wdNetwork/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
 import { PageRepository } from '../repository/PageRepository';
 import { PageRepository } from '../repository/PageRepository';
+import { detailedSkeleton } from './skeleton/detailSkeleton';
+const PATTERN_DATE_CN_RN: string = 'yyyy年MM月dd日 HH:mm';
 
 
 const TAG = 'ImageAndTextPageComponent'
 const TAG = 'ImageAndTextPageComponent'
-
 @Component
 @Component
 export struct ImageAndTextPageComponent {
 export struct ImageAndTextPageComponent {
   scroller: Scroller = new Scroller();
   scroller: Scroller = new Scroller();
@@ -30,41 +31,49 @@ export struct ImageAndTextPageComponent {
   @State recommendList: ContentDTO[] = []
   @State recommendList: ContentDTO[] = []
   @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
   @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
   @State interactData: InteractDataDTO = {} as InteractDataDTO
   @State interactData: InteractDataDTO = {} as InteractDataDTO
+  @State isPageEnd: boolean = false
+  @State publishTime: string = ''
   build() {
   build() {
     Column() {
     Column() {
-      // 发布时间
-      Row() {
-        Image($r('app.media.icon_ren_min_ri_bao'))
-          .width(70)
-          .height(28)
-        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)
-      .padding({ left: 15, right: 15, })
-      .justifyContent(FlexAlign.SpaceBetween)
-      .backgroundColor(Color.White)
+      if (!this.isPageEnd) {
+        detailedSkeleton()
+      } else {
+        // 发布时间
+        Row() {
+          Image(this.contentDetailData[0]?.rmhInfo ? $r('app.media.logo_rmh') : $r('app.media.logo_rmrb'))
+            .width(80)
+            .height(28)
+            Text(this.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)
+        .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 })
+        Row() {
+          Image($r('app.media.line'))
+            .width('100%')
+            .height(6)
+            .objectFit(ImageFit.Cover)
+            .margin({ top: 10 })
+        }
+        .padding({ left: 15, right: 15 })
+        .backgroundColor(Color.White)
       }
       }
-      .padding({ left: 15, right: 15 })
-      .backgroundColor(Color.White)
+
 
 
       Stack({ alignContent: Alignment.Bottom }) {
       Stack({ alignContent: Alignment.Bottom }) {
         Scroll(this.scroller) {
         Scroll(this.scroller) {
           Column() {
           Column() {
             ImageAndTextWebComponent({
             ImageAndTextWebComponent({
               contentDetailData: this.contentDetailData,
               contentDetailData: this.contentDetailData,
-              action: this.action
+              action: this.action,
+              isPageEnd: $isPageEnd
             })
             })
             Column() {
             Column() {
               if (this.recommendList.length > 0) {
               if (this.recommendList.length > 0) {
@@ -77,7 +86,7 @@ export struct ImageAndTextPageComponent {
         .width(CommonConstants.FULL_WIDTH)
         .width(CommonConstants.FULL_WIDTH)
         .height(CommonConstants.FULL_HEIGHT)
         .height(CommonConstants.FULL_HEIGHT)
         .padding({ bottom: 76 })
         .padding({ bottom: 76 })
-        // .scrollBar(BarState.Off)
+        .scrollBar(BarState.Off)
 
 
         //底部交互区
         //底部交互区
         Row() {
         Row() {
@@ -122,138 +131,6 @@ export struct ImageAndTextPageComponent {
     .height(CommonConstants.FULL_HEIGHT)
     .height(CommonConstants.FULL_HEIGHT)
   }
   }
 
 
-  // build() {
-  //   Column() {
-  //     // 发布时间
-  //     Row() {
-  //       Image($r('app.media.icon_ren_min_ri_bao'))
-  //         .width(70)
-  //         .height(28)
-  //       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)
-  //     .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 })
-  //     }
-  //     .padding({ left: 15, right: 15, })
-  //     .backgroundColor(Color.White)
-  //
-  //     Stack({ alignContent: Alignment.Bottom }) {
-  //
-  //       List() {
-  //         //详情展示区
-  //         ListItem() {
-  //           Column() {
-  //             ImageAndTextWebComponent({
-  //               contentDetailData: this.contentDetailData,
-  //               action: this.action,
-  //             })
-  //           }.width(CommonConstants.FULL_WIDTH)
-  //           // .height(CommonConstants.FULL_HEIGHT)
-  //         }
-  //
-  //         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)
-  //
-  // }
-
   private async getDetail() {
   private async getDetail() {
     let contentId: string = ''
     let contentId: string = ''
     let relId: string = ''
     let relId: string = ''
@@ -274,6 +151,8 @@ export struct ImageAndTextPageComponent {
       let detailBeans = await DetailViewModel.getDetailPageData(relId, contentId, relType)
       let detailBeans = await DetailViewModel.getDetailPageData(relId, contentId, relType)
       if (detailBeans && detailBeans.length > 0) {
       if (detailBeans && detailBeans.length > 0) {
         this.contentDetailData = detailBeans;
         this.contentDetailData = detailBeans;
+        let dateTime = DateTimeUtils.parseDate(this.contentDetailData[0]?.publishTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN);
+        this.publishTime = DateTimeUtils.formatDate(dateTime,PATTERN_DATE_CN_RN)
         if (this.contentDetailData[0]?.recommendShow === 1) {
         if (this.contentDetailData[0]?.recommendShow === 1) {
           this.getRecommend()
           this.getRecommend()
         }
         }

@@ -15,8 +15,12 @@ import { BridgeWebViewControl } from 'wdJsBridge/Index';
 export struct ImageAndTextWebComponent {
 export struct ImageAndTextWebComponent {
   action: Action = {} as Action
   action: Action = {} as Action
   @State reload: number = 0;
   @State reload: number = 0;
+  @Link isPageEnd: boolean
   @Prop @Watch('onDetailDataUpdated') contentDetailData: ContentDetailDTO [] = [] as ContentDetailDTO []
   @Prop @Watch('onDetailDataUpdated') contentDetailData: ContentDetailDTO [] = [] as ContentDetailDTO []
   webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
   webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
+  private h5ReceiveAppData: H5ReceiveDetailBean = { dataSource: '2' } as H5ReceiveDetailBean
+  private webPrepared = false;
+  private dataPrepared = false;
 
 
   onDetailDataUpdated() {
   onDetailDataUpdated() {
     if (this.action) {
     if (this.action) {
@@ -50,9 +54,14 @@ export struct ImageAndTextWebComponent {
 
 
       }
       }
 
 
-      let h5ReceiveAppData: H5ReceiveDetailBean = { dataSource: '2' } as H5ReceiveDetailBean
       // TODO 对接user信息、登录情况
       // TODO 对接user信息、登录情况
-      let h5ReceiveDataExtraBean: H5ReceiveDataExtraBean = { creatorId: '', isLogin: '0' } as H5ReceiveDataExtraBean
+      let h5ReceiveDataExtraBean: H5ReceiveDataExtraBean = {
+        creatorId: '',
+        isLogin: '0',
+        networkStatus: 1,
+        loadImageOnlyWifiSwitch: '2',
+
+      } as H5ReceiveDataExtraBean
       let h5ReceiveDataJsonBean: H5ReceiveDataJsonBean = {
       let h5ReceiveDataJsonBean: H5ReceiveDataJsonBean = {
         contentId: contentId,
         contentId: contentId,
         contentType: contentType
         contentType: contentType
@@ -67,12 +76,10 @@ export struct ImageAndTextWebComponent {
       response.code = 200
       response.code = 200
       response.success = true
       response.success = true
       h5ReceiveDataJsonBean.responseMap = response
       h5ReceiveDataJsonBean.responseMap = response
-      h5ReceiveAppData.dataJson = h5ReceiveDataJsonBean
-      h5ReceiveAppData.dataExt = h5ReceiveDataExtraBean
-      // TODO 暂延时1s，考虑业务流程再优化
-      setTimeout(() => {
-        this.sendContentData2H5(h5ReceiveAppData);
-      }, 2000)
+      this.h5ReceiveAppData.dataJson = h5ReceiveDataJsonBean
+      this.h5ReceiveAppData.dataExt = h5ReceiveDataExtraBean
+      this.dataPrepared = true
+      this.trySendData2H5()
 
 
     }
     }
 
 
@@ -84,10 +91,26 @@ export struct ImageAndTextWebComponent {
         webviewControl: this.webviewControl,
         webviewControl: this.webviewControl,
         webResource: $rawfile('apph5/index.html'),
         webResource: $rawfile('apph5/index.html'),
         backVisibility: false,
         backVisibility: false,
+        onWebPrepared: this.onWebPrepared.bind(this),
+        isPageEnd: $isPageEnd
+
       })
       })
     }
     }
   }
   }
 
 
+  private trySendData2H5() {
+    if (!this.webPrepared || !this.dataPrepared) {
+      return
+    }
+    // 数据、web组件，都准备好了，开始塞详情数据
+    this.sendContentData2H5(this.h5ReceiveAppData)
+  }
+
+  private onWebPrepared() {
+    this.webPrepared = true
+    this.trySendData2H5()
+  }
+
   private sendContentData2H5(h5ReceiveAppData: H5ReceiveDetailBean) {
   private sendContentData2H5(h5ReceiveAppData: H5ReceiveDetailBean) {
     Logger.debug('ImageAndTextWebComponent', 'jsCall_receiveAppData');
     Logger.debug('ImageAndTextWebComponent', 'jsCall_receiveAppData');
     this.webviewControl.callHandle(NativeCallH5Type.jsCall_receiveAppData,
     this.webviewControl.callHandle(NativeCallH5Type.jsCall_receiveAppData,

+import { abilityAccessCtrl, common, Permissions } from '@kit.AbilityKit';
+import { http } from '@kit.NetworkKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { promptAction } from '@kit.ArkUI';
+import { image } from '@kit.ImageKit';
+import { photoAccessHelper } from '@kit.MediaLibraryKit';
+import fs from '@ohos.file.fs';
+
+const PERMISSIONS: Array<Permissions> = [
+  'ohos.permission.READ_IMAGEVIDEO',
+  'ohos.permission.WRITE_IMAGEVIDEO'
+];
+
+/*
+ * saveButton参考文档
+ * https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/savebutton-0000001820999677
+ * */
+@Component
+export struct ImageDownloadComponent {
+  @State image: PixelMap | undefined = undefined;
+  @State photoAccessHelper: photoAccessHelper.PhotoAccessHelper | undefined = undefined; // 相册模块管理实例
+  @State imageBuffer: ArrayBuffer | undefined = undefined; // 图片ArrayBuffer
+  url: string = ''
+
+  build() {
+    Column() {
+      SaveButton({ icon: SaveIconStyle.LINES })
+        .iconColor(Color.White)
+        .onClick(async () => {
+          console.info(`cj2024 onClick ${this.imageBuffer}`)
+          if (this.imageBuffer !== undefined) {
+            await this.saveImage(this.imageBuffer);
+            promptAction.showToast({
+              message: $r('app.string.image_request_success'),
+              duration: 2000
+            })
+          }
+        })
+    }
+
+  }
+
+  async aboutToAppear(): Promise<void> {
+    console.info(`cj2024 图片下载 ${this.url}`)
+    const context = getContext(this) as common.UIAbilityContext;
+    const atManager = abilityAccessCtrl.createAtManager();
+    await atManager.requestPermissionsFromUser(context, PERMISSIONS);
+    this.getPicture();
+  }
+
+  /**
+   * 通过http的request方法从网络下载图片资源
+   */
+  async getPicture() {
+    console.info(`cj2024 getPicture`)
+    http.createHttp()
+      .request(this.url,
+        (error: BusinessError, data: http.HttpResponse) => {
+          if (error) {
+            // 下载失败时弹窗提示检查网络，不执行后续逻辑
+            promptAction.showToast({
+              message: $r('app.string.image_request_fail'),
+              duration: 2000
+            })
+            return;
+          }
+          this.transcodePixelMap(data);
+          // 判断网络获取到的资源是否为ArrayBuffer类型
+          console.info(`cj2024 getPicture ${data.result}`)
+          if (data.result instanceof ArrayBuffer) {
+            console.info(`cj2024 getPicture 222`)
+            this.imageBuffer = data.result as ArrayBuffer;
+          }
+        }
+      )
+  }
+
+  /**
+   * 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型
+   * @param data：网络获取到的资源
+   */
+  transcodePixelMap(data: http.HttpResponse) {
+    console.info(`cj2024 transcodePixelMap ${data.responseCode}`)
+    if (http.ResponseCode.OK === data.responseCode) {
+      const imageData: ArrayBuffer = data.result as ArrayBuffer;
+      // 通过ArrayBuffer创建图片源实例。
+      const imageSource: image.ImageSource = image.createImageSource(imageData);
+      const options: image.InitializationOptions = {
+        'alphaType': 0, // 透明度
+        'editable': false, // 是否可编辑
+        'pixelFormat': 3, // 像素格式
+        'scaleMode': 1, // 缩略值
+        'size': { height: 100, width: 100 }
+      }; // 创建图片大小
+
+      // 通过属性创建PixelMap
+      imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
+        this.image = pixelMap;
+      });
+    }
+  }
+
+  /**
+   * 保存ArrayBuffer到图库
+   * @param buffer：图片ArrayBuffer
+   * @returns
+   */
+  async saveImage(buffer: ArrayBuffer | string): Promise<void> {
+    console.info(`cj2024 saveImage buffer ${buffer}`)
+    const context = getContext(this) as common.UIAbilityContext; // 获取getPhotoAccessHelper需要的context
+    const helper = photoAccessHelper.getPhotoAccessHelper(context); // 获取相册管理模块的实例
+    const uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 指定待创建的文件类型、后缀和创建选项，创建图片或视频资源
+    console.info(`cj2024 saveImage uri ${uri}`)
+    const file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
+    await fs.write(file.fd, buffer);
+    await fs.close(file.fd);
+  }
+}

+import { PhotoListBean } from 'wdBean/Index';
+import { Logger } from 'wdKit/Index';
+import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
+import { display, router } from '@kit.ArkUI';
+import { ImageDownloadComponent } from './ImageDownloadComponent';
+
+const TAG = 'ImageSwiperComponent';
+
+@Component
+export struct ImageSwiperComponent {
+  @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
+  private scroller: Scroller = new Scroller()
+  @State swiperIndex: number = 0;
+  photoList: PhotoListBean[] = [];
+  private swiperController: SwiperController = new SwiperController()
+  private displayTool = display.getDefaultDisplaySync()
+  private screenWidth: number = 0
+  private picWidth: number = 0
+  @State picHeight: number = 0
+
+  //watch监听页码回调
+  onCurrentPageNumUpdated(): void {
+    Logger.info(TAG, `currentPageNum：${this.currentPageNum}`,)
+    let _swiperIndex = Number.parseInt(this.currentPageNum)
+    Logger.info(TAG, `_swiperIndex：${_swiperIndex}`)
+    this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
+  }
+
+  aboutToAppear(): void {
+    //获取宽高尺寸
+    this.screenWidth = this.displayTool.width
+    // this.picWidth = this.screenWidth - vp2px(52)
+    this.picWidth = this.screenWidth
+    this.picHeight = this.picWidth * 578 / 375
+  }
+
+  build() {
+    RelativeContainer() {
+      Image($r('app.media.icon_arrow_left_white'))
+        .width(24)
+        .height(24)
+        .aspectRatio(1)
+        .interpolation(ImageInterpolation.High)
+        .alignRules({
+          top: { anchor: "__container__", align: VerticalAlign.Top },
+          left: { anchor: "__container__", align: HorizontalAlign.Start }
+        })
+        .onClick(() => {
+          router.back();
+        })
+        .id("backImg")
+
+      if (this.photoList && this.photoList?.length > 0) {
+        Swiper(this.swiperController) {
+          ForEach(this.photoList, (item: PhotoListBean) => {
+            MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
+          })
+        }
+        .index(this.swiperIndex)
+        .width('100%')
+        .height(px2vp(this.picHeight) + 32)
+        .vertical(false)
+        .autoPlay(false)
+        .cachedCount(3)
+        .indicator(false)
+        .displayCount(1)
+        .id('e_swiper_content')
+        .alignRules({
+          center: { anchor: "__container__", align: VerticalAlign.Center },
+          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+        })
+        .onChange((index: number) => {
+          this.swiperIndex = index
+        })
+
+        Row() {
+          Scroll(this.scroller) {
+            Row() {
+              Flex({
+                direction: FlexDirection.Column,
+                justifyContent: FlexAlign.Start
+              }) {
+                Text() {
+                  Span(`${this.swiperIndex + 1}`)
+                    .fontSize(24)
+                    .fontFamily('PingFang SC-Medium')
+                    .fontWeight(500)
+                    .lineHeight(28)
+                  Span(`/${this.photoList.length}`)
+                    .fontSize(14)
+                    .fontFamily('PingFang SC-Medium')
+                    .fontWeight(500)
+                    .lineHeight(19)
+                }.fontColor(Color.White).margin(4)
+              }
+            }
+            .width('100%')
+            .margin({
+              top: 8,
+              left: 18,
+              bottom: 24,
+              right: 18
+            })
+          }
+          .scrollable(ScrollDirection.Vertical)
+          .scrollBarWidth(0)
+        }
+        .id('e_swiper_titles')
+        .alignRules({
+          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
+          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+        })
+      }
+
+      ImageDownloadComponent({ url: this.photoList[this.swiperIndex].picPath })
+        .alignRules({
+          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
+          right: { anchor: "__container__", align: HorizontalAlign.End }
+        })
+        .margin({
+          top: 8,
+          left: 18,
+          bottom: 24,
+          right: 18
+        })
+        .id("downloadImg")
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Black)
+    .id('e_picture_container')
+    // 设置顶部绘制延伸到状态栏
+    // 设置底部绘制延伸到导航条
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
+  }
+}

+import { CommonConstants } from 'wdConstant';
+import { Logger } from 'wdKit';
+
+const TAG = 'EmptyComponent';
+
+/**
+ * WDViewDefaultType 缺省页
+ */
+export const enum WDViewDefaultType {
+  ///无网
+  WDViewDefaultType_NoNetwork,
+  ///网络失败 请稍后重试-倒计时
+  WDViewDefaultType_NetworkFailed,
+  ///内容获取失败
+  WDViewDefaultType_ContentFailed,
+}
+
+/**
+ * 空数据/无数据
+ */
+@Preview
+@Component
+export struct MultiPictureDetailEmptyComponent {
+  // private emptySize: SizeOptions = {};
+  @State emptyWidth: string | number = CommonConstants.FULL_PARENT;
+  @State emptyHeight: string | number = CommonConstants.FULL_PARENT;
+  @State emptyType: number = WDViewDefaultType.WDViewDefaultType_ContentFailed
+  /**
+   * The empty image width percentage setting.
+   */
+  readonly EMPTY_IMAGE_WIDTH: string = '15%';
+  /**
+   * The empty image height percentage setting.
+   */
+  readonly EMPTY_IMAGE_HEIGHT: string = '15%';
+  /**
+   * The empty data text component margin top.
+   */
+  readonly EMPTY_TIP_TEXT_MARGIN_TOP: string = '10';
+  /**
+   * The empty data text opacity.
+   */
+  readonly TEXT_OPACITY: number = 1;
+
+  build() {
+    this.noProgrammeData();
+  }
+
+  /**
+   * 无数据，空白view组件
+   */
+  @Builder
+  noProgrammeData() {
+    Column() {
+      Image(this.buildNoDataTipImage())
+        .width('this.EMPTY_IMAGE_WIDTH')
+        .height(this.EMPTY_IMAGE_HEIGHT)
+        .objectFit(ImageFit.Contain)
+      // .border({ width: 1, color: Color.Red, radius: 6 })
+
+      Text(this.buildNoDataTip())
+        .fontSize($r('app.float.font_size_14'))
+        .fontColor('#999999')
+        .fontWeight(FontWeight.Normal)
+        .opacity(this.TEXT_OPACITY)
+        .margin({ top: this.EMPTY_TIP_TEXT_MARGIN_TOP })
+        .onClick((event: ClickEvent) => {
+          Logger.info(TAG, `noProgrammeData onClick event?.source: ${event.source}`);
+        })
+      Button('点击重试', { type: ButtonType.Normal, stateEffect: true })
+        .borderRadius(4)
+        .margin(16)
+        .height(28)
+        .fontSize(12)
+        .fontColor('#CCCCCC')
+        .fontFamily('PingFang SC-Medium')
+        .border({ width: 1, color: '#545454' })
+        .backgroundColor(Color.Black)
+    }
+    .justifyContent(FlexAlign.Center)
+    .width(this.emptyWidth)
+    .height(this.emptyHeight)
+    .backgroundColor(Color.Black)
+  }
+
+  buildNoDataTip(): string {
+    Logger.info(TAG, "buildNoDataTip");
+    let contentString: string = '获取内容失败请重试'
+    if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) {
+      contentString = '网络出小差了，请检查网络后重试'
+    } else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) {
+      contentString = '获取内容失败请重试'
+    }
+
+    return contentString
+  }
+
+  buildNoDataTipImage(): Resource | string {
+    Logger.info(TAG, "buildNoDataTip");
+    let imageString: Resource | string = $r('app.media.icon_no_content')
+    if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) {
+      imageString = $r('app.media.icon_no_net')
+    } else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) {
+      imageString = $r('app.media.icon_no_content')
+    } else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NetworkFailed) {
+      imageString = $r('app.media.icon_no_net')
+    }
+    return imageString
+  }
+}

 import { Logger } from 'wdKit';
 import { Logger } from 'wdKit';
+import { ResponseDTO } from 'wdNetwork';
 import {
 import {
   ContentDetailDTO,
   ContentDetailDTO,
   PhotoListBean,
   PhotoListBean,
@@ -11,6 +12,7 @@ import display from '@ohos.display';
 import font from '@ohos.font';
 import font from '@ohos.font';
 import { OperRowListView } from './view/OperRowListView';
 import { OperRowListView } from './view/OperRowListView';
 import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
 import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
+import { MultiPictureDetailEmptyComponent } from './MultiPictureDetailEmptyComponent';
 import { DateTimeUtils } from 'wdKit/Index';
 import { DateTimeUtils } from 'wdKit/Index';
 import { HttpUrlUtils } from 'wdNetwork/Index';
 import { HttpUrlUtils } from 'wdNetwork/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
@@ -34,6 +36,7 @@ export struct MultiPictureDetailPageComponent {
   @State swiperIndex: number = 0;
   @State swiperIndex: number = 0;
   @Provide followStatus: string = '0' // 关注状态
   @Provide followStatus: string = '0' // 关注状态
   private scroller: Scroller = new Scroller()
   private scroller: Scroller = new Scroller()
+  @State netStatus: number = 0 // 存储网络状态用来展示缺省图
 
 
   //watch监听页码回调
   //watch监听页码回调
   onCurrentPageNumUpdated(): void {
   onCurrentPageNumUpdated(): void {
@@ -56,10 +59,6 @@ export struct MultiPictureDetailPageComponent {
       familySrc: $rawfile('font/BebasNeue_Regular.otf')
       familySrc: $rawfile('font/BebasNeue_Regular.otf')
     })
     })
     this.getContentDetailData()
     this.getContentDetailData()
-    if (HttpUrlUtils.getUserId()) {
-      this.getInteractBrowsOperate()
-      this.getBatchAttentionStatus()
-    }
   }
   }
 
 
   aboutToDisappear() {
   aboutToDisappear() {
@@ -238,24 +237,33 @@ export struct MultiPictureDetailPageComponent {
         })
         })
         .height(px2vp(this.titleHeight) + 64)
         .height(px2vp(this.titleHeight) + 64)
 
 
-        OperRowListView({
-          contentDetailData: this.contentDetailData,
-        })
-          .alignRules({
-            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' })
-          .id('e_oper_row')
+      } else {
+        if (this.netStatus === 1) {
+          MultiPictureDetailEmptyComponent({ emptyType: 2})
+            .id('e_empty_content')
+            .alignRules({
+              center: { anchor: "__container__", align: VerticalAlign.Center },
+              middle: { anchor: "__container__", align: HorizontalAlign.Center }
+            })
+        }
       }
       }
+      OperRowListView({
+        contentDetailData: this.contentDetailData,
+      })
+        .alignRules({
+          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' })
+        .id('e_oper_row')
     }
     }
     .width('100%')
     .width('100%')
     .height('100%')
     .height('100%')
@@ -266,11 +274,41 @@ export struct MultiPictureDetailPageComponent {
     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
   }
   }
 
 
-  private async getContentDetailData() {
+  private getContentDetailData() {
     try {
     try {
-      let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
-      this.contentDetailData = data?.[0];
-      Logger.info(TAG, `contentDetailData：${JSON.stringify(this.contentDetailData)}`)
+      PageRepository.fetchDetailData(this.relId, this.contentId, this.relType).then((resDTO: ResponseDTO<ContentDetailDTO[]>) => {
+        // Logger.info(TAG, `fetchDetailData then,navResDTO.timestamp ${resDTO.timestamp}`);
+        // Logger.info(TAG, `fetchDetailData then,navResDTO: ${JSON.stringify(resDTO)}`);
+        // Logger.info(TAG, `fetchDetailData then,navResDTO.data: ${JSON.stringify(resDTO.data)}`);
+        if (!resDTO || !resDTO.data) {
+          Logger.error(TAG, 'fetchDetailData is empty');
+          return
+        }
+        if (resDTO.code != 0) {
+          Logger.error(TAG, `fetchDetailData then code:${resDTO.code}, message:${resDTO.message}`);
+          return
+        }
+        this.contentDetailData = resDTO.data?.[0];
+        Logger.info(TAG, `contentDetailData：${JSON.stringify(this.contentDetailData)}`)
+        if (HttpUrlUtils.getUserId()) {
+          this.getInteractBrowsOperate()
+          this.getBatchAttentionStatus()
+        }
+      }).catch((err: Error) => {
+        Logger.info(TAG, `fetchDetailData then,err: ${JSON.stringify(err)}`);
+        /*// 请求失败处理
+        if (err.response) {
+          // 请求已发出，但服务器响应的状态码不在2xx范围内
+          console.error('请求失败，状态码：', err.response.status);
+          console.error('响应数据：', err.response.data);
+        } else if (err.request) {
+          // 请求已发出，但无响应（例如：网络故障）
+          console.error('请求已发出，但无响应：', err.request);
+        } else {
+          // 发生了其他类型的错误（如配置错误或拒绝权限等）
+          console.error('请求发生错误：', err.message);
+        }*/
+      })
     } catch (exception) {
     } catch (exception) {
 
 
     }
     }

@@ -4,6 +4,7 @@ import { WdWebComponent } from 'wdWebComponent';
 import router from '@ohos.router';
 import router from '@ohos.router';
 import { CommonConstants } from 'wdConstant'
 import { CommonConstants } from 'wdConstant'
 import { BridgeWebViewControl } from 'wdJsBridge/Index';
 import { BridgeWebViewControl } from 'wdJsBridge/Index';
+import { detailedSkeleton } from './skeleton/detailSkeleton'
 
 
 const TAG = 'SpacialTopicPageComponent'
 const TAG = 'SpacialTopicPageComponent'
 
 
@@ -13,14 +14,20 @@ export struct SpacialTopicPageComponent {
   scroller: Scroller = new Scroller();
   scroller: Scroller = new Scroller();
   action: Action = {} as Action
   action: Action = {} as Action
   @State webUrl: string = '';
   @State webUrl: string = '';
+  @State isPageEnd: boolean = false
+
   build() {
   build() {
     Column() {
     Column() {
+      if (!this.isPageEnd) {
+        detailedSkeleton()
+      }
       Stack({ alignContent: Alignment.Bottom }) {
       Stack({ alignContent: Alignment.Bottom }) {
         Column() {
         Column() {
           WdWebComponent({
           WdWebComponent({
             webviewControl: this.webviewControl,
             webviewControl: this.webviewControl,
             webUrl: this.webUrl,
             webUrl: this.webUrl,
             backVisibility: false,
             backVisibility: false,
+            isPageEnd:$isPageEnd
           })
           })
         }
         }
         .padding({ bottom: 56 })
         .padding({ bottom: 56 })
@@ -64,6 +71,8 @@ export struct SpacialTopicPageComponent {
         .padding({ left: 15, right: 15, bottom: 20, top: 20 })
         .padding({ left: 15, right: 15, bottom: 20, top: 20 })
         .justifyContent(FlexAlign.SpaceBetween)
         .justifyContent(FlexAlign.SpaceBetween)
         .backgroundColor(Color.White)
         .backgroundColor(Color.White)
+
+
       }
       }
     }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
     }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
     .backgroundColor(Color.White)
     .backgroundColor(Color.White)

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

@@ -5,44 +5,52 @@ import { DateTimeUtils } from 'wdKit/Index';
 @Component
 @Component
 export struct CardSourceInfo {
 export struct CardSourceInfo {
   @State contentDTO: ContentDTO = {} as ContentDTO;
   @State contentDTO: ContentDTO = {} as ContentDTO;
+
   build() {
   build() {
     Flex() {
     Flex() {
-      if(this.contentDTO.corner) {
+      if (this.contentDTO.corner) {
         Text(this.contentDTO.corner)
         Text(this.contentDTO.corner)
           .fontSize($r("app.float.font_size_12"))
           .fontSize($r("app.float.font_size_12"))
           .fontColor($r("app.color.color_ED2800"))
           .fontColor($r("app.color.color_ED2800"))
-          .margin({right: 2})
+          .margin({ right: 2 })
       }
       }
-      if(this.contentDTO.rmhPlatform === 1) {
-        Text(this.contentDTO.rmhInfo.rmhName)
+      if (this.contentDTO.rmhPlatform === 1) {
+        Text(this.contentDTO.rmhInfo?.rmhName)
           .fontSize($r("app.float.font_size_12"))
           .fontSize($r("app.float.font_size_12"))
           .fontColor($r("app.color.color_B0B0B0"))
           .fontColor($r("app.color.color_B0B0B0"))
           .maxLines(1)
           .maxLines(1)
-          .textOverflow({overflow: TextOverflow.Ellipsis})
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
         Image($r("app.media.point"))
         Image($r("app.media.point"))
           .width(16)
           .width(16)
           .height(16)
           .height(16)
-      } else if(this.contentDTO.source) {
+      } else if (this.contentDTO.source) {
         Text(`${this.contentDTO.source}`)
         Text(`${this.contentDTO.source}`)
           .fontSize($r("app.float.font_size_12"))
           .fontSize($r("app.float.font_size_12"))
           .fontColor($r("app.color.color_B0B0B0"))
           .fontColor($r("app.color.color_B0B0B0"))
           .maxLines(1)
           .maxLines(1)
-          .textOverflow({overflow: TextOverflow.Ellipsis})
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
         Image($r("app.media.point"))
         Image($r("app.media.point"))
           .width(16)
           .width(16)
           .height(16)
           .height(16)
       }
       }
-      // TODO 这里还有个判断需要完善，依赖外部，新闻tab下的卡片，2天之前的不显示时间。但是如果是搜索情况下展示的卡片，显示时间
-      Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
-        .fontSize($r("app.float.font_size_12"))
-        .fontColor($r("app.color.color_B0B0B0"))
-        .margin({ right: 6 })
-        .flexShrink(0)
-      if(this.contentDTO?.interactData?.commentNum) {
+      // 新闻tab下的卡片，2天之前的不显示时间。但是如果是搜索情况下展示的卡片，显示时间
+      if (this.contentDTO.isSearch || !this.contentDTO.isSearch && DateTimeUtils.getCommentTime
+      (Number
+        .parseFloat(this
+          .contentDTO.publishTime))
+        .indexOf
+        ('-') === -1) {
+        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_B0B0B0"))
+          .flexShrink(0)
+      }
+      if (this.contentDTO?.interactData?.commentNum) {
         Text(`${this.contentDTO.interactData.commentNum}评`)
         Text(`${this.contentDTO.interactData.commentNum}评`)
           .fontSize($r("app.float.font_size_12"))
           .fontSize($r("app.float.font_size_12"))
           .fontColor($r("app.color.color_B0B0B0"))
           .fontColor($r("app.color.color_B0B0B0"))
           .flexShrink(0)
           .flexShrink(0)
+          .margin({ left: 6 })
       }
       }
     }
     }
     .width(CommonConstants.FULL_WIDTH)
     .width(CommonConstants.FULL_WIDTH)

@@ -17,7 +17,7 @@ export struct Card10Component {
   build() {
   build() {
     Column() {
     Column() {
       // 顶部标题，最多两行
       // 顶部标题，最多两行
-      if (this.contentDTO.newsTitle) {
+      if (this.contentDTO.titleShow === 1 && this.contentDTO.newsTitle) {
         Text(this.contentDTO.newsTitle)
         Text(this.contentDTO.newsTitle)
           .width(CommonConstants.FULL_WIDTH)
           .width(CommonConstants.FULL_WIDTH)
           .fontSize($r('app.float.font_size_17'))
           .fontSize($r('app.float.font_size_17'))

@@ -2,6 +2,7 @@ import { ContentDTO } from 'wdBean';
 import { RmhTitle } from '../cardCommon/RmhTitle'
 import { RmhTitle } from '../cardCommon/RmhTitle'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CommonConstants } from 'wdConstant/Index';
 import { CommonConstants } from 'wdConstant/Index';
+import { ProcessUtils } from '../../utils/ProcessUtils';
 
 
 const TAG = 'Card12Component';
 const TAG = 'Card12Component';
 
 
@@ -10,39 +11,7 @@ const TAG = 'Card12Component';
  */
  */
 @Component
 @Component
 export struct Card12Component {
 export struct Card12Component {
-  @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: '好玩！》10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
-    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;
+  @State contentDTO: ContentDTO = {} as ContentDTO;
 
 
   aboutToAppear(): void {
   aboutToAppear(): void {
   }
   }
@@ -50,7 +19,9 @@ export struct Card12Component {
   build() {
   build() {
     Column() {
     Column() {
       // rmh信息
       // rmh信息
-      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
+      if  (this.contentDTO.rmhInfo) {
+        RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
+      }
       // 标题
       // 标题
       if (this.contentDTO.newsTitle) {
       if (this.contentDTO.newsTitle) {
         Text(this.contentDTO.newsTitle)
         Text(this.contentDTO.newsTitle)
@@ -64,9 +35,6 @@ export struct Card12Component {
           .fontFamily('PingFang SC-Regular')
           .fontFamily('PingFang SC-Regular')
       }
       }
 
 
-      // if (this.contentDTO.fullColumnImgUrls?.[0]) {
-      //   createImg({ contentDTO: this.contentDTO })
-      // }
       //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
       //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
     }
     }
     .padding({
     .padding({
@@ -75,6 +43,9 @@ export struct Card12Component {
       top: $r('app.float.card_comp_pagePadding_tb'),
       top: $r('app.float.card_comp_pagePadding_tb'),
       bottom: $r('app.float.card_comp_pagePadding_tb')
       bottom: $r('app.float.card_comp_pagePadding_tb')
     })
     })
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
   }
   }
 }
 }
 
 
@@ -85,45 +56,6 @@ interface radiusType {
   bottomRight: 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)
 @Extend(Text)
 function textOverflowStyle(maxLine: number) {
 function textOverflowStyle(maxLine: number) {
   .maxLines(maxLine)
   .maxLines(maxLine)

@@ -2,15 +2,15 @@ import { ContentDTO } from 'wdBean';
 import { RmhTitle } from '../cardCommon/RmhTitle'
 import { RmhTitle } from '../cardCommon/RmhTitle'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CommonConstants } from 'wdConstant/Index';
 import { CommonConstants } from 'wdConstant/Index';
+import { ProcessUtils } from '../../utils/ProcessUtils';
 
 
-const TAG = 'Card12Component';
+const TAG = 'Card14Component';
 
 
 /**
 /**
- * 人民号-动态---12：人民号无图卡；
+ * 人民号-动态---14：人民号单图卡；
  */
  */
-@Entry
 @Component
 @Component
-export struct Card12Component {
+export struct Card14Component {
   @State contentDTO: ContentDTO = {
   @State contentDTO: ContentDTO = {
     appStyle: '20',
     appStyle: '20',
     coverType: 1,
     coverType: 1,
@@ -23,7 +23,7 @@ export struct Card12Component {
         weight: 1600
         weight: 1600
       }
       }
     ],
     ],
-    newsTitle: '好玩！》10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
+    newsTitle: '好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》',
     rmhInfo: {
     rmhInfo: {
       authIcon:
       authIcon:
       'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',
       'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',
@@ -51,9 +51,11 @@ export struct Card12Component {
   build() {
   build() {
     Column() {
     Column() {
       // rmh信息
       // rmh信息
-      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
+      if (this.contentDTO.rmhInfo) {
+        RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
+      }
       // 左标题，右图
       // 左标题，右图
-      Flex({ direction: FlexDirection.Row }) {
+      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
 
 
         Text(this.contentDTO.newsTitle)
         Text(this.contentDTO.newsTitle)
           .fontSize($r('app.float.font_size_17'))
           .fontSize($r('app.float.font_size_17'))
@@ -62,12 +64,13 @@ export struct Card12Component {
           .lineHeight(25)
           .lineHeight(25)
           .fontFamily('PingFang SC-Regular')
           .fontFamily('PingFang SC-Regular')
           .textAlign(TextAlign.Start)
           .textAlign(TextAlign.Start)
-          .flexBasis('auto')
+          // .flexBasis('auto')
           .margin({right: 12})
           .margin({right: 12})
+          .flexBasis(214)
 
 
         Image(this.contentDTO.coverUrl)
         Image(this.contentDTO.coverUrl)
-          .flexBasis(174)
-          .height(75)
+          .flexBasis(117)
+          .height(78)
           .borderRadius($r('app.float.image_border_radius'))
           .borderRadius($r('app.float.image_border_radius'))
         // .flexBasis(160)
         // .flexBasis(160)
         .backgroundImageSize(ImageSize.Auto)
         .backgroundImageSize(ImageSize.Auto)
@@ -86,6 +89,9 @@ export struct Card12Component {
       top: $r('app.float.card_comp_pagePadding_tb'),
       top: $r('app.float.card_comp_pagePadding_tb'),
       bottom: $r('app.float.card_comp_pagePadding_tb')
       bottom: $r('app.float.card_comp_pagePadding_tb')
     })
     })
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
   }
   }
 }
 }
 
 

+import { ContentDTO } from 'wdBean';
+import { RmhTitle } from '../cardCommon/RmhTitle'
+import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
+import { CommonConstants } from 'wdConstant/Index';
+import { ProcessUtils } from '../../utils/ProcessUtils';
+
+const TAG = 'Card16Component';
+
+interface fullColumnImgUrlItem {
+  url: string
+}
+
+
+/**
+ * 人民号-动态---16：人民号三图卡；
+ */
+@Component
+export struct Card16Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  aboutToAppear(): void {
+  }
+
+  build() {
+    Column() {
+      // rmh信息
+      if (this.contentDTO.rmhInfo) {
+        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 })
+          .lineHeight(25)
+      }
+      if (this.contentDTO.fullColumnImgUrls?.length > 0) {
+        Flex() {
+          ForEach(this.contentDTO.fullColumnImgUrls.slice(0, 3), (item: fullColumnImgUrlItem, index: number) => {
+            Image(item.url).flexBasis(113).height(75).margin({ right: index > 1 ? 0 : 2 })
+          })
+        }
+      }
+      //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)
+    })
+  }
+}
+
+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 })
+}

 import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean';
 import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean';
 import { RmhTitle } from '../cardCommon/RmhTitle'
 import { RmhTitle } from '../cardCommon/RmhTitle'
-
+import { ProcessUtils } from '../../utils/ProcessUtils';
 const TAG = 'Card19Component';
 const TAG = 'Card19Component';
 
 
 /**
 /**
@@ -13,37 +13,37 @@ export struct Card19Component {
       // coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
       // 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: [
       // 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',
       //     fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/quality,q_90/auto-orient,1',
       //     height: 1500,
       //     height: 1500,
       //     landscape: 1,
       //     landscape: 1,
       //     size: 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',
+      //     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
       //     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
-      //   }
+        // {
+        //   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日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
       // newsSummary: '#平安建设双提升#【进工地，送安全】3月21日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
       // newsTitle: '#平安建设双提升#【进工地，送安全】3月21日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
       // newsTitle: '#平安建设双提升#【进工地，送安全】3月21日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
@@ -94,6 +94,9 @@ export struct Card19Component {
       top: $r('app.float.card_comp_pagePadding_tb'),
       top: $r('app.float.card_comp_pagePadding_tb'),
       bottom: $r('app.float.card_comp_pagePadding_tb')
       bottom: $r('app.float.card_comp_pagePadding_tb')
     })
     })
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
   }
   }
 }
 }
 
 
@@ -107,6 +110,8 @@ interface radiusType {
 @Component
 @Component
 struct createImg {
 struct createImg {
   @Prop fullColumnImgUrls: FullColumnImgUrlDTO[]
   @Prop fullColumnImgUrls: FullColumnImgUrlDTO[]
+  @State picWidth: number = 0;
+  @State picHeight: number = 0;
   aboutToAppear(): void {
   aboutToAppear(): void {
     if(this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度，加一个占位
     if(this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度，加一个占位
       this.fullColumnImgUrls.splice(2,0, {
       this.fullColumnImgUrls.splice(2,0, {
@@ -137,18 +142,77 @@ struct createImg {
     return radius
     return radius
   }
   }
 
 
+  getPicType(){
+    if (this.picWidth && this.picWidth) {
+      if (this.picWidth / this.picHeight > 343/172) {
+        return 1; //横长图
+      } else if (this.picHeight / this.picWidth > 305/228) {
+        return 2; //竖长图
+      } else {
+        return 3
+      }
+    } else {
+      return 3; //普通图
+    }
+  }
+
+
   build() {
   build() {
     GridRow({
     GridRow({
       gutter: { x: 2, y: 2 }
       gutter: { x: 2, y: 2 }
     }) {
     }) {
       ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
       ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
         if (this.fullColumnImgUrls.length === 1) {
         if (this.fullColumnImgUrls.length === 1) {
-          GridCol({
-            span: { xs: 8 }
-          }) {
-            Image(item.fullUrl)
-              .width('100%')
-              .borderRadius(this.caclImageRadius(index))
+          if (this.getPicType() !== 3) {
+            GridCol({
+              span: this.getPicType() === 1 ? 12 : 8
+            }){
+              Stack({
+                alignContent: Alignment.BottomEnd
+              }) {
+                if (this.getPicType() === 1) {
+                  Image(item.fullUrl)
+                    .width('100%')
+                    .height(172)
+                    .autoResize(true)
+                    .borderRadius(this.caclImageRadius(index))
+                } else if (this.getPicType() === 2) {
+                  Image(item.fullUrl)
+                    .width('100%')
+                    .height(305)
+                    .autoResize(true)
+                    .borderRadius(this.caclImageRadius(index))
+                }
+                Flex({ direction: FlexDirection.Row }) {
+                  Image($r('app.media.icon_long_pic'))
+                    .width(14)
+                    .height(14)
+                    .margin({right: 4})
+                  Text('长图')
+                    .fontSize(12)
+                    .fontWeight(400)
+                    .fontColor(0xffffff)
+                    .fontFamily('PingFang SC')
+                }
+                .width(48)
+                .padding({bottom: 9})
+
+              }
+            }
+          } else {
+            GridCol({
+              span: { xs: 8 }
+            }) {
+              Image(item.fullUrl)
+                .width('100%')
+                .borderRadius(this.caclImageRadius(index))
+                .autoResize(true)
+                .opacity(!this.picWidth && !this.picHeight ? 0 : 1)
+                .onComplete(callback => {
+                  this.picWidth = callback?.width || 0;
+                  this.picHeight = callback?.height || 0;
+                })
+            }
           }
           }
         } else if (this.fullColumnImgUrls.length === 4) {
         } else if (this.fullColumnImgUrls.length === 4) {
           GridCol({
           GridCol({

@@ -2,7 +2,7 @@ import { ContentDTO } from 'wdBean';
 import { RmhTitle } from '../cardCommon/RmhTitle'
 import { RmhTitle } from '../cardCommon/RmhTitle'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CommonConstants } from 'wdConstant/Index';
 import { CommonConstants } from 'wdConstant/Index';
-
+import { ProcessUtils } from '../../utils/ProcessUtils';
 const TAG = 'Card20Component';
 const TAG = 'Card20Component';
 
 
 /**
 /**
@@ -71,6 +71,9 @@ export struct Card20Component {
       top: $r('app.float.card_comp_pagePadding_tb'),
       top: $r('app.float.card_comp_pagePadding_tb'),
       bottom: $r('app.float.card_comp_pagePadding_tb')
       bottom: $r('app.float.card_comp_pagePadding_tb')
     })
     })
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
   }
   }
 }
 }
 
 

@@ -42,16 +42,15 @@ export struct Card6Component {
       .alignItems(HorizontalAlign.Start)
       .alignItems(HorizontalAlign.Start)
       .justifyContent(FlexAlign.Start)
       .justifyContent(FlexAlign.Start)
       .width('58%')
       .width('58%')
-      if (this.contentDTO.coverUrl) {
-        Stack() {
-          Image(this.contentDTO.coverUrl)
-            .borderRadius(5)
-            .aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
-            .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 90 : 180)
-          CardMediaInfo({ contentDTO: this.contentDTO })
-        }
-        .alignContent(Alignment.BottomEnd)
+      Stack() {
+        Image(this.contentDTO.coverUrl)
+          .backgroundColor($r('app.color.color_B0B0B0'))
+          .borderRadius(5)
+          .aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
+          .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 90 : 180)
+        CardMediaInfo({ contentDTO: this.contentDTO })
       }
       }
+      .alignContent(Alignment.BottomEnd)
     }
     }
     .onClick((event: ClickEvent) => {
     .onClick((event: ClickEvent) => {
       ProcessUtils.processPage(this.contentDTO)
       ProcessUtils.processPage(this.contentDTO)

@@ -15,7 +15,7 @@ export struct Card9Component {
   build() {
   build() {
     Column() {
     Column() {
       // 顶部标题，最多两行
       // 顶部标题，最多两行
-      if (this.contentDTO.newsTitle) {
+      if (this.contentDTO.titleShow === 1 && this.contentDTO.newsTitle) {
         Text(this.contentDTO.newsTitle)
         Text(this.contentDTO.newsTitle)
           .width(CommonConstants.FULL_WIDTH)
           .width(CommonConstants.FULL_WIDTH)
           .fontSize($r('app.float.font_size_17'))
           .fontSize($r('app.float.font_size_17'))
@@ -104,7 +104,7 @@ export struct Card9Component {
         Column() {
         Column() {
           Row() {
           Row() {
             // 标题
             // 标题
-            Image($r("app.media.point_icon"))
+            Image($r("app.media.timeline_rect"))
               .width(9)
               .width(9)
               .height(9)
               .height(9)
               .margin({ right: 5 })
               .margin({ right: 5 })

@@ -157,11 +157,11 @@ struct CreatorItem {
           .width(44)
           .width(44)
           .height(44)
           .height(44)
         if (this.isSelected) {
         if (this.isSelected) {
-          Image($r('app.media.MyCollection_selected_icon'))
+          Image($r('app.media.rmh_selected'))
             .width(16)
             .width(16)
             .height(16)
             .height(16)
         } else {
         } else {
-          Image($r('app.media.ic_succeed_refresh'))
+          Image($r('app.media.rmh_unselected'))
             .width(16)
             .width(16)
             .height(16)
             .height(16)
         }
         }

+import { router } from '@kit.ArkUI'
+import { NumberFormatterUtils, ToastUtils } from 'wdKit/Index'
+
+@Component
+export struct LiveCommentComponent {
+  public clickCollect?: (isCollect: boolean) => void
+  public clickHeart?: (isHeart: boolean) => void
+  @State isCollect: boolean = false
+  @State isLike: boolean = false
+  @State heartNum: number = 0
+
+  build() {
+    Row() {
+      Image($r('app.media.back_icon'))
+        .width(24)
+        .height(24)
+        .margin({
+          left: 16,
+          right: 12
+        })
+        .onClick(() => {
+          router.back()
+        })
+      Stack() {
+        Image($r('app.media.background_search'))
+          .interpolation(ImageInterpolation.High)
+          .width('100%')
+          .height(30)
+        TextArea({ placeholder: '说两句...' })
+          .backgroundColor(Color.Transparent)
+          .enabled(false)
+          .margin({
+            left: 5,
+            right: 20
+          })
+      }
+      .layoutWeight(1)
+      .onClick(() => {
+        ToastUtils.shortToast('依赖其它功能开发')
+      })
+
+      Image(this.isCollect ? $r('app.media.ic_collect_check') : $r('app.media.iv_live_comment_collect_un'))
+        .width(24)
+        .height(24)
+        .margin({
+          left: 20,
+          right: 24
+        })
+        .onClick(() => {
+          this.isCollect = !this.isCollect
+        })
+      Image($r('app.media.iv_live_comment_share'))
+        .width(24)
+        .height(24)
+        .onClick(() => {
+          ToastUtils.shortToast('依赖其它功能开发')
+        })
+      Stack() {
+        Text(NumberFormatterUtils.formatNumberWithWan(this.heartNum))
+          .height(12)
+          .fontSize('8fp')
+          .fontWeight(500)
+          .fontColor(Color.White)
+          .backgroundImage($r('app.media.iv_live_comment_hert_num'))
+          .backgroundImageSize(ImageSize.Cover)
+          .margin({
+            left: 6,
+            bottom: 33
+          })
+          .padding({
+            left: 6,
+            right: 2
+          })
+        Image(this.isLike ? $r('app.media.iv_live_comment_hert_light') : $r('app.media.comment_like_normal'))
+          .width(24)
+          .height(24)
+          .margin({
+            right: 20,
+          })
+      }
+      .width(44)
+      .height(56)
+      .margin({
+        left: 24
+      })
+      .onClick(() => {
+        this.isLike = !this.isLike
+      })
+    }
+    .height(56)
+    .width('100%')
+    .backgroundColor(Color.White)
+  }
+}

 import { CompDTO, ContentDTO } from 'wdBean';
 import { CompDTO, ContentDTO } from 'wdBean';
 import { CommonConstants } from 'wdConstant/Index';
 import { CommonConstants } from 'wdConstant/Index';
+import { CollectionUtils, DateTimeUtils, Logger, StringUtils, ToastUtils } from 'wdKit/Index';
+import PageViewModel from '../../viewmodel/PageViewModel';
 
 
 const TAG = 'Zh_Grid_Layout-02';
 const TAG = 'Zh_Grid_Layout-02';
 const FULL_PARENT: string = '100%';
 const FULL_PARENT: string = '100%';
@@ -11,46 +13,76 @@ let listSize: number = 2;
  * Zh_Grid_Layout-02
  * Zh_Grid_Layout-02
  *
  *
  */
  */
-@Preview
 @Component
 @Component
 export struct ZhGridLayout02 {
 export struct ZhGridLayout02 {
   @State compDTO: CompDTO = {} as CompDTO
   @State compDTO: CompDTO = {} as CompDTO
+  @State operDataList: ContentDTO[] = []
+  currentPage = 1
+  pageSize = 12
 
 
   aboutToAppear() {
   aboutToAppear() {
-    if (this.compDTO.operDataList) {
-      listSize = this.compDTO.operDataList.length > 5 ? 2 : this.compDTO.operDataList.length;
-    }
+    Logger.debug(TAG, 'aboutToAppear ' + this.compDTO.objectTitle)
+    this.currentPage = 1
+    PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => {
+      this.operDataList = []
+      this.operDataList.push(...liveReviewDTO.list)
+    })
   }
   }
 
 
   build() {
   build() {
     Column() {
     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]);
+      Scroll() {
+        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.operDataList, (item: ContentDTO, index: number) => {
+              GridCol() {
+                this.buildItemCard(item);
+              }
+            })
           }
           }
-        })
+        }
+
       }
       }
+      .width("100%")
+      .height("100%")
+      // .layoutWeight(1)
+      .edgeEffect(EdgeEffect.None)
+      .scrollBar(BarState.Off)
+      .onReachStart(() => {
+        Logger.debug(TAG, 'onReachStart')
+      })
+      .onReachEnd(() => {
+        Logger.debug(TAG, 'onReachEnd')
+        this.addItems()
+      })
+      .nestedScroll({
+        scrollForward: NestedScrollMode.PARENT_FIRST,
+        scrollBackward: NestedScrollMode.SELF_FIRST
+      })
     }
     }
     .width(CommonConstants.FULL_WIDTH)
     .width(CommonConstants.FULL_WIDTH)
+    // .width("100%")
+    .height("100%")
+    // .layoutWeight(1)
     .padding({
     .padding({
       top: 14,
       top: 14,
       left: 16,
       left: 16,
@@ -78,6 +110,15 @@ export struct ZhGridLayout02 {
     }
     }
     .width('100%')
     .width('100%')
   }
   }
+
+  addItems() {
+    Logger.debug(TAG, 'addItems')
+    this.currentPage++
+    PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => {
+      this.operDataList.push(...liveReviewDTO.list)
+      Logger.debug(TAG, 'addItems after: ' + this.operDataList.length)
+    })
+  }
 }
 }
 
 
 
 

@@ -56,6 +56,9 @@ export struct ZhGridLayout03 {
         .textOverflow({ overflow: TextOverflow.Ellipsis })
         .textOverflow({ overflow: TextOverflow.Ellipsis })
     }
     }
     .width('100%')
     .width('100%')
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(item)
+    })
   }
   }
 }
 }
 
 

+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-02
+ */
+const TAG = 'Zh_Single_Row-02'
+
+@Entry
+@Component
+export struct ZhSingleRow02 {
+  @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'
+        }
+      },
+      {
+        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'
+        }
+      },
+      {
+        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'
+        }
+      },
+      {
+        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'
+        }
+      },
+      {
+        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() {
+          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(208)
+    }
+    .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() {
+        Stack({ alignContent: Alignment.Bottom }) {
+          Image('')
+            .width(156)
+            .height(208)
+          Row()
+            .width(156)
+            .height(80)
+            .linearGradient({
+              direction: GradientDirection.Bottom,
+              colors: [[0xffffff, 0.0], [0x000000, 1.0]]
+            })
+            .opacity(0.3)
+          Text('这里显示卡片标题这里显示卡片标题这里显示卡片标题这里显示卡片标题这里显示卡片标题')
+            .fontColor(0xffffff)
+            .fontSize(14)
+            .maxLines(2)
+            .textOverflow({overflow: TextOverflow.Ellipsis})
+            .width(140)
+            .height(40)
+            .margin({bottom: 8})
+        }
+
+      }
+      .width(156)
+      .height(208)
+      .margin({ right: 11 })
+      .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 { 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-06
+ */
+const TAG = 'Zh_Single_Row-06'
+
+@Entry
+@Component
+export struct ZhSingleRow06 {
+  @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'
+        }
+      },
+      {
+        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'
+        }
+      },
+      {
+        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'
+        }
+      },
+      {
+        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'
+        }
+      },
+      {
+        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() {
+          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(208)
+    }
+    .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.icon_elite_comment"))
+          .width(24)
+          .height(24)
+          .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.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() {
+        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
+          Column() {
+            Row() {
+              Image('')
+                .width(20)
+                .height(20)
+                .margin({right: 4})
+                .border({width: 1, color: 0xcccccc, radius: 10})
+              Text('立志之间')
+                .fontColor(0x212228)
+                .fontSize(12)
+            }
+          }
+
+          Column() {
+            Row() {
+              Image($r('app.media.icon_like_no'))
+                .width(16)
+                .height(16)
+                .margin({right: 4})
+              Text('3835')
+                .fontSize(14)
+                .fontColor(0x999999)
+            }
+          }
+        }
+        .margin({top: 10, left: 10, right: 10, bottom: 8})
+
+        Text('就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，')
+          .maxLines(2)
+          .textOverflow({overflow: TextOverflow.Ellipsis})
+          .margin({left: 10, right: 10, bottom: 8})
+          .fontSize(17)
+          .fontColor(0x212228)
+          .lineHeight(25)
+
+        Row() {
+          Image('')
+            .width(66)
+            .height(44)
+            .borderRadius({topLeft: 3, topRight: 0, bottomLeft: 3, bottomRight: 0})
+          Text('原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制')
+            .margin({left: 8})
+            .width(172)
+            .maxLines(2)
+            .textOverflow({overflow: TextOverflow.Ellipsis})
+        }
+        .linearGradient({
+          direction: GradientDirection.Right,
+          colors: [[0xffffff, 0.0],[0xffffff, 0.8], [0xf9f9f9, 1.0]]
+        })
+      }
+      .width(276)
+      .height(150)
+      .margin({ right: 10 })
+      .borderWidth(1)
+      .borderColor($r('app.color.color_EDEDED'))
+      .borderRadius($r('app.float.image_border_radius'))
+      .backgroundColor(0xf9f9f9)
+    }
+    .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
+      }
+    })
+  }
+}