diff --git a/.clang-format b/.clang-format
index ec09519..48439ed 100644
--- a/.clang-format
+++ b/.clang-format
@@ -1,7 +1,7 @@
 Language: Cpp
 # BasedOnStyle: LLVM
 ColumnLimit: 120
-SortIncludes: false
+SortIncludes: CaseSensitive
 TabWidth: 4
 IndentWidth: 4
 UseTab: Never
diff --git a/build-profile.json5 b/build-profile.json5
index 3e060d1..ae06abb 100644
--- a/build-profile.json5
+++ b/build-profile.json5
@@ -19,8 +19,8 @@
       {
         "name": "default",
         "signingConfig": "default",
-        "compileSdkVersion": 12,
-        "compatibleSdkVersion": 12
+        "compileSdkVersion": 14,
+        "compatibleSdkVersion": 14
       }
     ],
     "signingConfigs": [
diff --git a/common/src/main/ets/default/camera/CameraPlatformCapability.ts b/common/src/main/ets/default/camera/CameraPlatformCapability.ts
index 65639c0..eb0f19c 100644
--- a/common/src/main/ets/default/camera/CameraPlatformCapability.ts
+++ b/common/src/main/ets/default/camera/CameraPlatformCapability.ts
@@ -30,22 +30,22 @@ export class CameraPlatformCapability {
   public mPhotoPreviewSize = [
     { width: 640, height: 480 }, //Photo 4:3
     { width: 720, height: 720 }, //Photo 1:1
-    { width: 1920, height: 1080 }, //Photo 16:9
+    { width: 1920, height: 1080 },//Photo 16:9
   ]
   public mVideoPreviewSize = [
     { width: 1280, height: 720 }, //Video 16:9 720p
     { width: 1920, height: 1080 }, //Video 16:9 1080p
-    { width: 1920, height: 1080 } //Video 16:9 4k
+    { width: 1920, height: 1080 }//Video 16:9 4k
   ]
   public mImageSize = [
     { width: 1280, height: 960 }, //4:3
     { width: 3120, height: 3120 }, //1:1
-    { width: 1920, height: 1080 } //16:9
+    { width: 1920, height: 1080 }//16:9
   ]
   public mVideoFrameSize = [
     { width: 1280, height: 720 }, //16:9 720p
     { width: 1920, height: 1080 }, //16:9 1080p
-    { width: 3840, height: 2160 } //16:9 4k
+    { width: 3840, height: 2160 }//16:9 4k
   ]
 
   constructor() {
diff --git a/common/src/main/ets/default/camera/CameraService.ts b/common/src/main/ets/default/camera/CameraService.ts
index b23bbdd..fb63ef1 100644
--- a/common/src/main/ets/default/camera/CameraService.ts
+++ b/common/src/main/ets/default/camera/CameraService.ts
@@ -142,10 +142,12 @@ export class CameraService {
           for (let i = 0; i < cameras.length; i++) {
             Log.info(`${TAG} camera_id: ${cameras[i].cameraId}  cameraPosition: ${cameras[i].cameraPosition}
               cameraType: ${cameras[i].cameraType} connectionType: ${cameras[i].connectionType}`);
-            if (cameras[i].cameraPosition === FRONT_CAMERA_POSITION && cameras[i].connectionType !== CAMERA_CONNECT_TYPE) {
+            if (cameras[i].cameraPosition === FRONT_CAMERA_POSITION &&
+              cameras[i].connectionType !== CAMERA_CONNECT_TYPE) {
               this.mLocalCameraMap.set('front', 'true');
             }
-            if (cameras[i].cameraPosition !== FRONT_CAMERA_POSITION && cameras[i].connectionType !== CAMERA_CONNECT_TYPE) {
+            if (cameras[i].cameraPosition !== FRONT_CAMERA_POSITION &&
+              cameras[i].connectionType !== CAMERA_CONNECT_TYPE) {
               this.mLocalCameraMap.set('back', 'true');
             }
           }
@@ -369,7 +371,8 @@ export class CameraService {
         ReportUtil.write(ReportUtil.OPEN_FAIL);
       }
     }
-    if (GlobalContext.get().getT<boolean>('cameraStartFlag') && (new Date().getTime() - GlobalContext.get().getT<number>('cameraStartTime')) > 2000) {
+    if (GlobalContext.get().getT<boolean>('cameraStartFlag') &&
+      (new Date().getTime() - GlobalContext.get().getT<number>('cameraStartTime')) > 2000) {
       ReportUtil.write(ReportUtil.START_TIMEOUT);
     }
     GlobalContext.get().setObject('cameraStartFlag', false);
diff --git a/common/src/main/ets/default/camera/SaveCameraAsset.ts b/common/src/main/ets/default/camera/SaveCameraAsset.ts
index 93675fc..5a82d1b 100644
--- a/common/src/main/ets/default/camera/SaveCameraAsset.ts
+++ b/common/src/main/ets/default/camera/SaveCameraAsset.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import fs, { Filter, ConflictFiles } from '@ohos.file.fs';
+import fs from '@ohos.file.fs';
 import image from '@ohos.multimedia.image';
 import UserFileManager from '@ohos.filemanagement.userFileManager';
 import dataSharePredicates from '@ohos.data.dataSharePredicates';
@@ -24,7 +24,6 @@ import { FunctionCallBack, VideoCallBack } from './CameraService';
 import ThumbnailGetter from './ThumbnailGetter';
 import ReportUtil from '../utils/ReportUtil';
 import { GlobalContext } from '../utils/GlobalContext';
-import buffer from '@ohos.buffer';
 
 const TAG = '[SaveCameraAsset]:';
 
@@ -34,10 +33,10 @@ export type FetchOpType = {
 };
 
 export default class SaveCameraAsset {
+  public videoPrepareFile: UserFileManager.FileAsset;
   private lastSaveTime = '';
   private saveIndex = 0;
   private mUserFileManager: UserFileManager.UserFileManager;
-  public videoPrepareFile: UserFileManager.FileAsset;
   private mCameraAlbum: UserFileManager.Album;
   private photoUri: string = '';
   private videoUri: string = '';
@@ -51,17 +50,8 @@ export default class SaveCameraAsset {
     return this.photoUri;
   }
 
-  private async createCameraAlbum(): Promise<void> {
-    Log.log(`${TAG} createCameraAlbum E`);
-    if (!this.mCameraAlbum) {
-      let fetchResult = await this.mUserFileManager?.getAlbums(UserFileManager.AlbumType.SYSTEM, UserFileManager.AlbumSubType.CAMERA);
-      this.mCameraAlbum = await fetchResult?.getFirstObject();
-      Log.log(`${TAG} createCameraAlbum albumUri: ${JSON.stringify(this.mCameraAlbum.albumUri)}`);
-    }
-    Log.log(`${TAG} createCameraAlbum X`);
-  }
-
-  public saveImage(mReceiver, thumbWidth: number, thumbHeight: number, thumbnailGetter: ThumbnailGetter, captureCallBack: FunctionCallBack): void {
+  public saveImage(mReceiver, thumbWidth: number, thumbHeight: number, thumbnailGetter: ThumbnailGetter,
+    captureCallBack: FunctionCallBack): void {
     Log.info(`${TAG} saveImage E mediaLibrary.getMediaLibrary media: ${this.mUserFileManager}`);
     mReceiver.on('imageArrival', async () => {
       Log.start(Log.UPDATE_PHOTO_THUMBNAIL);
@@ -174,6 +164,58 @@ export default class SaveCameraAsset {
     return fileAsset;
   }
 
+  public async createAsset(type: UserFileManager.FileType): Promise<UserFileManager.FileAsset> {
+    const displayName = this.getDisplayName(type);
+    Log.info(`${TAG} createAsset  displayName: ${displayName}`);
+    let option: UserFileManager.PhotoCreateOptions = {
+      subType: UserFileManager.PhotoSubType.CAMERA,
+    };
+    let fileAsset: UserFileManager.FileAsset;
+    try {
+      fileAsset = await this.mUserFileManager.createPhotoAsset(displayName, option);
+      if (fileAsset !== undefined) {
+        Log.info(`${TAG} createPhotoAsset successfully displayName` + fileAsset.displayName);
+      } else {
+        Log.error(`${TAG} createPhotoAsset failed, fileAsset is undefined `);
+      }
+    } catch (e) {
+      Log.error(`${TAG} createPhotoAsset failed, error: ${JSON.stringify(e)}}`);
+    }
+    return fileAsset;
+  }
+
+  public async createVideoFd(captureCallBack: VideoCallBack): Promise<number | undefined> {
+    Log.info(`${TAG} createVideoFd E`);
+    const fileAsset: UserFileManager.FileAsset = await this.createAsset(UserFileManager.FileType.VIDEO);
+    if (!fileAsset) {
+      Log.error(`${TAG} createVideoFd mediaLibrary createAsset error: fileAsset undefined.`);
+      return undefined;
+    }
+    let fdNumber: number = 0;
+    try {
+      this.videoPrepareFile = fileAsset;
+      this.videoUri = fileAsset.uri;
+      captureCallBack.videoUri(this.videoUri);
+      Log.info(`${TAG} SaveCameraAsset getLastObject.uri: ${JSON.stringify(fileAsset.uri)}`);
+      fdNumber = await fileAsset.open('Rw');
+    } catch (err) {
+      Log.error(`${TAG} createVideoFd err: ${err}`);
+    }
+    Log.info(`${TAG} createVideoFd X`);
+    return fdNumber;
+  }
+
+  private async createCameraAlbum(): Promise<void> {
+    Log.log(`${TAG} createCameraAlbum E`);
+    if (!this.mCameraAlbum) {
+      let fetchResult =
+        await this.mUserFileManager?.getAlbums(UserFileManager.AlbumType.SYSTEM, UserFileManager.AlbumSubType.CAMERA);
+      this.mCameraAlbum = await fetchResult?.getFirstObject();
+      Log.log(`${TAG} createCameraAlbum albumUri: ${JSON.stringify(this.mCameraAlbum.albumUri)}`);
+    }
+    Log.log(`${TAG} createCameraAlbum X`);
+  }
+
   private async fileAssetOperate(fileAsset: UserFileManager.FileAsset, operate: (fd: number) => void): Promise<void> {
     const fd: number = <number> await fileAsset.open('Rw').catch(error => {
       Log.error(`${TAG} fileAsset open error: ${JSON.stringify(error)}`);
@@ -218,26 +260,6 @@ export default class SaveCameraAsset {
     return undefined;
   }
 
-  public async createAsset(type: UserFileManager.FileType): Promise<UserFileManager.FileAsset> {
-    const displayName = this.getDisplayName(type);
-    Log.info(`${TAG} createAsset  displayName: ${displayName}`);
-    let option: UserFileManager.PhotoCreateOptions = {
-      subType: UserFileManager.PhotoSubType.CAMERA,
-    };
-    let fileAsset: UserFileManager.FileAsset;
-    try {
-      fileAsset = await this.mUserFileManager.createPhotoAsset(displayName, option);
-      if (fileAsset !== undefined) {
-        Log.info(`${TAG} createPhotoAsset successfully displayName` + fileAsset.displayName);
-      } else {
-        Log.error(`${TAG} createPhotoAsset failed, fileAsset is undefined `);
-      }
-    } catch (e) {
-      Log.error(`${TAG} createPhotoAsset failed, error: ${JSON.stringify(e)}}`);
-    }
-    return fileAsset;
-  }
-
   private getDisplayName(type: UserFileManager.FileType): string {
     const mDateTimeUtil: DateTimeUtil = new DateTimeUtil();
     const mData: string = mDateTimeUtil.getDate();
@@ -249,27 +271,6 @@ export default class SaveCameraAsset {
     }
   }
 
-  public async createVideoFd(captureCallBack: VideoCallBack): Promise<number | undefined> {
-    Log.info(`${TAG} createVideoFd E`);
-    const fileAsset: UserFileManager.FileAsset = await this.createAsset(UserFileManager.FileType.VIDEO);
-    if (!fileAsset) {
-      Log.error(`${TAG} createVideoFd mediaLibrary createAsset error: fileAsset undefined.`);
-      return undefined;
-    }
-    let fdNumber: number = 0;
-    try {
-      this.videoPrepareFile = fileAsset;
-      this.videoUri = fileAsset.uri;
-      captureCallBack.videoUri(this.videoUri);
-      Log.info(`${TAG} SaveCameraAsset getLastObject.uri: ${JSON.stringify(fileAsset.uri)}`);
-      fdNumber = await fileAsset.open('Rw');
-    } catch (err) {
-      Log.error(`${TAG} createVideoFd err: ${err}`);
-    }
-    Log.info(`${TAG} createVideoFd X`);
-    return fdNumber;
-  }
-
   private checkName(name: string): string {
     if (this.lastSaveTime === name) {
       this.saveIndex++;
diff --git a/common/src/main/ets/default/camera/ThumbnailGetter.ts b/common/src/main/ets/default/camera/ThumbnailGetter.ts
index e593310..c37ae5e 100644
--- a/common/src/main/ets/default/camera/ThumbnailGetter.ts
+++ b/common/src/main/ets/default/camera/ThumbnailGetter.ts
@@ -16,13 +16,12 @@
 import UserFileManager from '@ohos.filemanagement.userFileManager';
 import dataSharePredicates from '@ohos.data.dataSharePredicates';
 import image from '@ohos.multimedia.image';
-import { Log } from '../utils/Log'
+import { Log } from '../utils/Log';
 import { GlobalContext } from '../utils/GlobalContext';
 
 const TAG = '[ThumbnailGetter]:';
 
 export default class ThumbnailGetter {
-
   private mUserFileManager: UserFileManager.UserFileManager;
   private mCameraAlbum: UserFileManager.Album;
   private mRecentFileUri: string = '';
@@ -62,16 +61,6 @@ export default class ThumbnailGetter {
     return this.getFileAssetByFetchOp(fetchOptions);
   }
 
-  private async createCameraAlbum(): Promise<void> {
-    Log.log(`${TAG} createCameraAlbum E`);
-    if (!this.mCameraAlbum) {
-      let fetchResult = await this.mUserFileManager?.getAlbums(UserFileManager.AlbumType.SYSTEM, UserFileManager.AlbumSubType.CAMERA);
-      this.mCameraAlbum = await fetchResult?.getFirstObject();
-      Log.log(`${TAG} createCameraAlbum albumUri: ${JSON.stringify(this.mCameraAlbum.albumUri)}`);
-    }
-    Log.log(`${TAG} createCameraAlbum X`);
-  }
-
   public getRecentFileUri(): string {
     return this.mRecentFileUri;
   }
@@ -98,4 +87,15 @@ export default class ThumbnailGetter {
     Log.info(`${TAG} mRecentFileUri : ${JSON.stringify(this.mRecentFileUri)}`);
     return fileAsset;
   }
+
+  private async createCameraAlbum(): Promise<void> {
+    Log.log(`${TAG} createCameraAlbum E`);
+    if (!this.mCameraAlbum) {
+      let fetchResult =
+        await this.mUserFileManager?.getAlbums(UserFileManager.AlbumType.SYSTEM, UserFileManager.AlbumSubType.CAMERA);
+      this.mCameraAlbum = await fetchResult?.getFirstObject();
+      Log.log(`${TAG} createCameraAlbum albumUri: ${JSON.stringify(this.mCameraAlbum.albumUri)}`);
+    }
+    Log.log(`${TAG} createCameraAlbum X`);
+  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/animate/ShowFlashBlack.ets b/common/src/main/ets/default/featurecommon/animate/ShowFlashBlack.ets
index 06cb906..7570a17 100644
--- a/common/src/main/ets/default/featurecommon/animate/ShowFlashBlack.ets
+++ b/common/src/main/ets/default/featurecommon/animate/ShowFlashBlack.ets
@@ -14,9 +14,9 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
+
 class StateStruct {
   xComponentWidth: number = 0;
   xComponentHeight: number = 0;
@@ -24,8 +24,6 @@ class StateStruct {
 
 
 class ShowFlashBlackDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -33,13 +31,15 @@ class ShowFlashBlackDispatcher {
   public updateShowFlashBlackFlag(flag: boolean): void {
     this.mDispatch(Action.updateShowFlashBlackFlag(flag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct ShowFlashBlack {
-  private TAG: string = '[ShowFlashBlack]:'
   @State state: StateStruct = new StateStruct()
   @State opacityValue: number = 1
+  private TAG: string = '[ShowFlashBlack]:'
   private mAction: ShowFlashBlackDispatcher = new ShowFlashBlackDispatcher();
 
   aboutToAppear() {
diff --git a/common/src/main/ets/default/featurecommon/assistivegridview/AssistiveGridView.ets b/common/src/main/ets/default/featurecommon/assistivegridview/AssistiveGridView.ets
index 03b8a58..58c1011 100644
--- a/common/src/main/ets/default/featurecommon/assistivegridview/AssistiveGridView.ets
+++ b/common/src/main/ets/default/featurecommon/assistivegridview/AssistiveGridView.ets
@@ -14,8 +14,7 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 
 class StateStruct {
   xComponentWidth: number = 0;
@@ -23,15 +22,16 @@ class StateStruct {
 }
 
 class AssistiveGridViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct AssistiveGridView {
+  @State state: StateStruct = new StateStruct();
   private TAG: string = '[AssistiveGridView]:';
   private mGlobalAlpha: number = 0.5;
   private mLineWidth: number = 0.5;
@@ -43,7 +43,6 @@ export struct AssistiveGridView {
   private settings: RenderingContextSettings = new RenderingContextSettings(true);
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   private mAction: AssistiveGridViewDispatcher = new AssistiveGridViewDispatcher();
-  @State state: StateStruct = new StateStruct();
 
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear invoke E`);
diff --git a/common/src/main/ets/default/featurecommon/cameraswitcher/CameraSwitchButton.ets b/common/src/main/ets/default/featurecommon/cameraswitcher/CameraSwitchButton.ets
index d5a3520..e82901f 100644
--- a/common/src/main/ets/default/featurecommon/cameraswitcher/CameraSwitchButton.ets
+++ b/common/src/main/ets/default/featurecommon/cameraswitcher/CameraSwitchButton.ets
@@ -15,8 +15,7 @@
 
 import { Action } from '../../redux/actions/Action';
 import { CameraSwitchController } from './CameraSwitchController';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Log } from '../../utils/Log';
 import MultiCameraDialog from '../customdialog/MultiCameraDialog';
 import deviceInfo from '@ohos.deviceInfo';
@@ -34,8 +33,6 @@ class StateStruct {
 
 
 class CameraSwitchDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -45,12 +42,13 @@ class CameraSwitchDispatcher {
     this.mDispatch(Action.switchCamera(cameraPosition));
     this.mDispatch(Action.resetZoomRatio(1));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export struct CameraSwitchButton {
-  private TAG: string = '[CameraSwitchButton]:'
   @State state: StateStruct = new StateStruct()
   @State deviceType: string = deviceInfo.deviceType
   @StorageLink('storageCameraId') storageCameraId: string = ''
@@ -60,7 +58,6 @@ export struct CameraSwitchButton {
   mMargin: number = 0;
   type: ButtonType = ButtonType.Capsule;
   stateEffect: boolean = false;
-  private mAction: CameraSwitchDispatcher = new CameraSwitchDispatcher();
   cameraSwitchController: CameraSwitchController = new CameraSwitchController()
   multiDialogController: CustomDialogController = new CustomDialogController({
     builder: MultiCameraDialog({
@@ -72,6 +69,8 @@ export struct CameraSwitchButton {
     customStyle: true,
     cancel: this.existView
   })
+  private TAG: string = '[CameraSwitchButton]:'
+  private mAction: CameraSwitchDispatcher = new CameraSwitchDispatcher();
 
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear E`);
@@ -95,22 +94,20 @@ export struct CameraSwitchButton {
     Log.info(`${this.TAG} aboutToAppear X`)
   }
 
-  private openMultiDialog() {
-    Log.info(`${this.TAG} openMultiDialog E`)
-    this.multiDialogController.open()
-    Log.info(`${this.TAG} openMultiDialog X`)
-  }
-
-  private existView(): void {}
-
   build() {
     Column() {
       Stack() {
         Image($r('app.media.small_switch_camera'))
           .width('67.5%').aspectRatio(1)
           .clip(new Circle({ width: '100%', height: '100%' }))
-        Column() {}.width(44).height(44)
-        .border({ width: 1, color: Color.White, radius: 22, style: BorderStyle.Solid })
+        Column() {
+        }.width(44).height(44)
+        .border({
+          width: 1,
+          color: Color.White,
+          radius: 22,
+          style: BorderStyle.Solid
+        })
       }
       .width('100%').height('100%').enabled(this.state.uiEnable)
       .onClick(() => {
@@ -121,7 +118,7 @@ export struct CameraSwitchButton {
           if (this.state.mode === 'MULTI') {
             this.openMultiDialog()
           } else {
-            GlobalContext.get().setObject('switchCameraTime',new Date().getTime())
+            GlobalContext.get().setObject('switchCameraTime', new Date().getTime())
             if (this.state.cameraPosition !== 'BACK') {
               this.mAction.changeCameraPosition('BACK')
               this.storageCameraId = 'BACK'
@@ -135,4 +132,13 @@ export struct CameraSwitchButton {
       })
     }.width(44).aspectRatio(1)
   }
+
+  private openMultiDialog() {
+    Log.info(`${this.TAG} openMultiDialog E`)
+    this.multiDialogController.open()
+    Log.info(`${this.TAG} openMultiDialog X`)
+  }
+
+  private existView(): void {
+  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/customdialog/EntryComponentForMulti.ets b/common/src/main/ets/default/featurecommon/customdialog/EntryComponentForMulti.ets
index a8d80db..0026568 100644
--- a/common/src/main/ets/default/featurecommon/customdialog/EntryComponentForMulti.ets
+++ b/common/src/main/ets/default/featurecommon/customdialog/EntryComponentForMulti.ets
@@ -14,8 +14,7 @@
  */
 
 import { CameraService } from '../../camera/CameraService';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Log } from '../../utils/Log';
 
 class StateStruct {
@@ -23,29 +22,28 @@ class StateStruct {
 }
 
 class ComponentForMultiDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export default struct EntryComponentForMulti {
-  private TAG: string = '[EntryComponentForMulti]:';
   @State state: StateStruct = new StateStruct();
   @State isLocalDevice: boolean = false;
   @State switchCameraState: boolean = false;
   @State recCameraState: boolean = true;
   @State defaultChecked: boolean = false;
   @State curCameraName: string = '';
+  private TAG: string = '[EntryComponentForMulti]:';
   private localList: string = '';
   private item: string = '';
-  private onChange: Function = () => {};
   private cameraService: CameraService = CameraService.getInstance();
   private deviceName: string = '';
-  private cameraPositionRes:string | Resource = '';
+  private cameraPositionRes: string | Resource = '';
   private cameraPositionName: string = '';
   private mAction: ComponentForMultiDispatcher = new ComponentForMultiDispatcher();
 
@@ -66,29 +64,6 @@ export default struct EntryComponentForMulti {
     }
   }
 
-  private getShowName(item: string): void {
-    this.cameraPositionName = item.split('_').pop() as string;
-    switch (this.cameraPositionName) {
-      case 'FRONT':
-        this.cameraPositionRes = $r('app.string.front')
-        break
-      case 'BACK':
-        this.cameraPositionRes = $r('app.string.back')
-        break
-      default:
-        break
-    }
-    if (item.split('_').length == 1) {
-      this.isLocalDevice = true
-    } else {
-      const cameraItem = this.cameraService.getCameraMap().get(item)
-      if (cameraItem) {
-        this.deviceName = cameraItem.deviceName as string;
-        this.isLocalDevice = false
-      }
-    }
-  }
-
   build() {
     Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
       Row() {
@@ -127,4 +102,30 @@ export default struct EntryComponentForMulti {
     .height(48)
     .width('100%')
   }
+
+  private onChange: Function = () => {
+  };
+
+  private getShowName(item: string): void {
+    this.cameraPositionName = item.split('_').pop() as string;
+    switch (this.cameraPositionName) {
+      case 'FRONT':
+        this.cameraPositionRes = $r('app.string.front')
+        break
+      case 'BACK':
+        this.cameraPositionRes = $r('app.string.back')
+        break
+      default:
+        break
+    }
+    if (item.split('_').length == 1) {
+      this.isLocalDevice = true
+    } else {
+      const cameraItem = this.cameraService.getCameraMap().get(item)
+      if (cameraItem) {
+        this.deviceName = cameraItem.deviceName as string;
+        this.isLocalDevice = false
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/customdialog/MultiCameraDialog.ets b/common/src/main/ets/default/featurecommon/customdialog/MultiCameraDialog.ets
index b5a4ea7..e4effcd 100644
--- a/common/src/main/ets/default/featurecommon/customdialog/MultiCameraDialog.ets
+++ b/common/src/main/ets/default/featurecommon/customdialog/MultiCameraDialog.ets
@@ -17,8 +17,7 @@ import { CameraService } from '../../camera/CameraService';
 import { CameraId } from '../../setting/settingitem/CameraId';
 import { Log } from '../../utils/Log';
 import EntryComponentForMulti from './EntryComponentForMulti';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 
 let storageCameraId: string = AppStorage.Link('storageCameraId') as string;
@@ -27,8 +26,6 @@ class StateStruct {
 }
 
 class MultiCameraDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -38,34 +35,39 @@ class MultiCameraDispatcher {
     this.mDispatch(Action.switchCamera(cameraPosition));
     this.mDispatch(Action.resetZoomRatio(1));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @CustomDialog
 export default struct MultiCameraDialog {
-  private TAG: string = '[MultiCameraDialog]:';
-  private cameraService = CameraService.getInstance();
   controller?: CustomDialogController;
-  cancel: () => void = () => {};
-  confirm: () => void = () => {};
-  private localList: string[] = [
-  CameraId.FRONT,
-  CameraId.BACK
-  ];
-  @State private moreList: string[] = [];
   @State state: StateStruct = new StateStruct();
   @State isShowMore: boolean = false;
   @State gridColumns: number = 12;
   @State useSizeTypeOffset: number = 4;
   @Link deviceType: string;
   @StorageLink('storageCameraId') storageCameraId: string = '';
+  private TAG: string = '[MultiCameraDialog]:';
+  private cameraService = CameraService.getInstance();
+  private localList: string[] = [
+    CameraId.FRONT,
+    CameraId.BACK
+  ];
+  @State private moreList: string[] = [];
   private mAction: MultiCameraDispatcher = new MultiCameraDispatcher();
 
+  cancel: () => void = () => {
+  };
+
+  confirm: () => void = () => {
+  };
+
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear.`)
     getStore().subscribe((state: OhCombinedState) => {
-      this.state = {
-      };
+      this.state = {};
     }, (dispatch: Dispatch) => {
       this.mAction.setDispatch(dispatch);
     });
@@ -76,7 +78,7 @@ export default struct MultiCameraDialog {
     } else if (!localCameraInfo.get('back')) {
       this.localList.pop()
     }
-    if (this.deviceType === 'phone' || this .deviceType === 'default') {
+    if (this.deviceType === 'phone' || this.deviceType === 'default') {
       this.gridColumns = 4
       this.useSizeTypeOffset = 0
     } else {
@@ -85,20 +87,6 @@ export default struct MultiCameraDialog {
     }
   }
 
-  private onChange(item: string): void {
-    Log.info(`${this.TAG} MultiCameraPosition ${JSON.stringify(item)}`)
-    if (item.includes('BACK')) {
-      this.storageCameraId = 'BACK'
-    } else if(item.includes('FRONT')) {
-      this.storageCameraId = 'FRONT'
-    }
-    this.mAction.changeCameraPosition(item);
-    this.cancel();
-    if (this.controller) {
-      this.controller.close();
-    }
-  }
-
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       GridContainer({ columns: this.gridColumns, gutter: 12, margin: 12 }) {
@@ -122,7 +110,7 @@ export default struct MultiCameraDialog {
           }
           .width('100%')
           .height('48vp')
-          .padding({top: 20, bottom: 8})
+          .padding({ top: 20, bottom: 8 })
 
           List() {
             ForEach(this.localList, (item: string) => {
@@ -130,7 +118,7 @@ export default struct MultiCameraDialog {
                 EntryComponentForMulti({
                   item: item,
                   localList: this.localList.toString(),
-                  onChange: (data:string) => this.onChange(data)
+                  onChange: (data: string) => this.onChange(data)
                 })
               }
               .width('100%')
@@ -138,7 +126,12 @@ export default struct MultiCameraDialog {
             })
           }
           .listDirection(Axis.Vertical)
-          .divider({ strokeWidth: '1vp', color: '#33182431', startMargin: 0, endMargin: 12})
+          .divider({
+            strokeWidth: '1vp',
+            color: '#33182431',
+            startMargin: 0,
+            endMargin: 12
+          })
 
           Row() {
             Text($r('app.string.more_devices'))
@@ -148,7 +141,7 @@ export default struct MultiCameraDialog {
           }
           .width('100%')
           .height('48vp')
-          .padding({top: 20, bottom: 8})
+          .padding({ top: 20, bottom: 8 })
 
           if (this.isShowMore) {
             List() {
@@ -165,7 +158,12 @@ export default struct MultiCameraDialog {
               })
             }
             .listDirection(Axis.Vertical)
-            .divider({ strokeWidth: 0.5, color: '#33000000', startMargin: 0, endMargin: 12 })
+            .divider({
+              strokeWidth: 0.5,
+              color: '#33000000',
+              startMargin: 0,
+              endMargin: 12
+            })
           }
 
           Column() {
@@ -203,4 +201,18 @@ export default struct MultiCameraDialog {
       }.width('100%')
     }
   }
+
+  private onChange(item: string): void {
+    Log.info(`${this.TAG} MultiCameraPosition ${JSON.stringify(item)}`)
+    if (item.includes('BACK')) {
+      this.storageCameraId = 'BACK'
+    } else if (item.includes('FRONT')) {
+      this.storageCameraId = 'FRONT'
+    }
+    this.mAction.changeCameraPosition(item);
+    this.cancel();
+    if (this.controller) {
+      this.controller.close();
+    }
+  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/customdialog/dialogComponent/CustomDialogView.ets b/common/src/main/ets/default/featurecommon/customdialog/dialogComponent/CustomDialogView.ets
index c059187..4f31be2 100644
--- a/common/src/main/ets/default/featurecommon/customdialog/dialogComponent/CustomDialogView.ets
+++ b/common/src/main/ets/default/featurecommon/customdialog/dialogComponent/CustomDialogView.ets
@@ -17,28 +17,26 @@ import deviceInfo from '@ohos.deviceInfo';
 
 import { Action } from '../../../redux/actions/Action';
 import { Log } from '../../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../../redux/store';
-import { getStore } from '../../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 import EntryComponent from './EntryComponent';
 
 @Observed
 export class CustomDialogDetails {
-  confirmCallback: Function = () => {
-  };
   confirmItem: boolean = false;
   height: number = 0;
   width: number = 0;
   setAlias: string = '';
   childrenList: ChildrenItemStruct[] = [];
   settingTitle: string = '';
+
+  confirmCallback: Function = () => {
+  };
 }
 
 class StateStruct {
 }
 
 class CustomDialogViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -46,6 +44,8 @@ class CustomDialogViewDispatcher {
   public closeDialog(isCloseFlag: boolean): void {
     this.mDispatch(Action.closeDialog(isCloseFlag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ChildrenItemStruct {
@@ -59,20 +59,22 @@ class StyleStruct {
 
 @CustomDialog
 export struct CustomDialogView {
-  private TAG: string = '[CustomDialogView]:'
   localStyle: StyleStruct = { columns: 4, offset: 0 };
   controller?: CustomDialogController;
-  cancel: () => void = () => {
-  };
-  confirm: () => void = () => {
-  };
   @Consume customDialogDetails: CustomDialogDetails;
   @State settingAlias: string = "";
   @State getValue: string = "";
   @State childrenList: Array<ChildrenItemStruct> = [];
   @State state: StateStruct = new StateStruct();
+  private TAG: string = '[CustomDialogView]:'
   private mAction: CustomDialogViewDispatcher = new CustomDialogViewDispatcher();
 
+  cancel: () => void = () => {
+  };
+
+  confirm: () => void = () => {
+  };
+
   async aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear start`)
     this.childrenList = this.customDialogDetails.childrenList
@@ -127,7 +129,12 @@ export struct CustomDialogView {
             })
           }
           .listDirection(Axis.Vertical)
-          .divider({ strokeWidth: 0.5, color: '#33000000', startMargin: 0, endMargin: 12 }) // 每行之间的分界线
+          .divider({
+            strokeWidth: 0.5,
+            color: '#33000000',
+            startMargin: 0,
+            endMargin: 12
+          }) // 每行之间的分界线
           Column() {
             Button({ type: ButtonType.Capsule, stateEffect: true }) {
               Text($r('app.string.cancel'))
@@ -188,7 +195,12 @@ export struct CustomDialogView {
               })
             }
             .listDirection(Axis.Vertical)
-            .divider({ strokeWidth: 0.5, color: '#33000000', startMargin: 0, endMargin: 12 }) // 每行之间的分界线
+            .divider({
+              strokeWidth: 0.5,
+              color: '#33000000',
+              startMargin: 0,
+              endMargin: 12
+            }) // 每行之间的分界线
             Column() {
               Button({ type: ButtonType.Capsule, stateEffect: true }) {
                 Text($r('app.string.cancel'))
diff --git a/common/src/main/ets/default/featurecommon/customdialog/dialogComponent/EntryComponent.ets b/common/src/main/ets/default/featurecommon/customdialog/dialogComponent/EntryComponent.ets
index bb25740..c95ddef 100644
--- a/common/src/main/ets/default/featurecommon/customdialog/dialogComponent/EntryComponent.ets
+++ b/common/src/main/ets/default/featurecommon/customdialog/dialogComponent/EntryComponent.ets
@@ -18,31 +18,29 @@ import { SettingManager } from '../../../setting/SettingManager';
 import Timer from '../../../setting/settingitem/Timer';
 import AspectRatio from '../../../setting/settingitem/AspectRatio';
 import Resolution from '../../../setting/settingitem/Resolution';
-import { Dispatch, OhCombinedState } from '../../../redux/store';
-import { getStore } from '../../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 
 class StateStruct {
   mode: string = '';
 }
 
 class EntryComponentDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export default struct EntryComponent {
-  private TAG: string = '[EntryComponent]:';
   @State itemValue: Resource = $r('app.string.photo_ratio_4_3');
   @State checkedValue: string = '';
   @State settingAlias: string = '';
-  private getValue: Resource = $r('app.string.resolution_1280_720');
-  private onChange: Function = () => {};
-  private settingManager = SettingManager.getInstance();
   @State state: StateStruct = new StateStruct();
+  private TAG: string = '[EntryComponent]:';
+  private getValue: Resource = $r('app.string.resolution_1280_720');
+  private settingManager = SettingManager.getInstance();
   private mAction: EntryComponentDispatcher = new EntryComponentDispatcher();
 
   aboutToAppear(): void {
@@ -93,4 +91,7 @@ export default struct EntryComponent {
     }
     .width('100%')
   }
+
+  private onChange: Function = () => {
+  };
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/geolocation/GeoLocation.ets b/common/src/main/ets/default/featurecommon/geolocation/GeoLocation.ets
index b65edcb..967e5d5 100644
--- a/common/src/main/ets/default/featurecommon/geolocation/GeoLocation.ets
+++ b/common/src/main/ets/default/featurecommon/geolocation/GeoLocation.ets
@@ -19,8 +19,8 @@ import { SettingManager } from '../../setting/SettingManager';
 import { BusinessError } from '@ohos.base';
 
 export class GeoLocation {
-  private TAG: string = '[GeoLocation]:'
   private static instance: GeoLocation
+  private TAG: string = '[GeoLocation]:'
   private requestInfo: geolocation.LocationRequest = {
     priority: 0x203,
     scenario: 0x300,
@@ -28,10 +28,6 @@ export class GeoLocation {
     distanceInterval: 0,
     maxAccuracy: 0
   }
-  private locationChange = (location: geolocation.Location): void => { //删掉参数err及相关逻辑
-    Log.info(`[GeoLocation]: locationChange: ${location}`)
-    SettingManager.getInstance().setCurGeoLocation(location)
-  }
 
   public static getInstance() {
     if (!GeoLocation.instance) {
@@ -57,7 +53,7 @@ export class GeoLocation {
         geolocation.getCurrentLocation(curRequestInfo).then((result) => {
           Log.info(`${this.TAG} on getCurrentLocation result: ${JSON.stringify(result)}`)
           SettingManager.getInstance().setCurGeoLocation(result)
-        }).catch((err:BusinessError) => {
+        }).catch((err: BusinessError) => {
           Log.info(`${this.TAG} on getCurrentLocation err result: ${JSON.stringify(err)}`)
         })
         geolocation.on('locationChange', this.requestInfo, this.locationChange)
@@ -75,4 +71,9 @@ export class GeoLocation {
     geolocation.off('locationChange', this.locationChange)
     Log.info(`${this.TAG} off X`)
   }
+
+  private locationChange = (location: geolocation.Location): void => { //删掉参数err及相关逻辑
+    Log.info(`[GeoLocation]: locationChange: ${location}`)
+    SettingManager.getInstance().setCurGeoLocation(location)
+  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/moreList/moreList.ets b/common/src/main/ets/default/featurecommon/moreList/moreList.ets
index 7ac4099..9e7d227 100644
--- a/common/src/main/ets/default/featurecommon/moreList/moreList.ets
+++ b/common/src/main/ets/default/featurecommon/moreList/moreList.ets
@@ -15,8 +15,7 @@
 import deviceInfo from '@ohos.deviceInfo';
 import { Action } from '../../redux/actions/Action';
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 
 class MoreListInfo {
   itemIcon: Resource = $r('app.media.photo');
@@ -28,8 +27,6 @@ class StateStruct {
 }
 
 class MoreListDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -37,12 +34,14 @@ class MoreListDispatcher {
   public swipeChangeMode(swipeModeIndex: number): void {
     this.mDispatch(Action.swipeChangeMode(swipeModeIndex));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct MoreList {
-  private TAG: string = '[moreList]:';
   @State state: StateStruct = new StateStruct();
+  private TAG: string = '[moreList]:';
   private mAction: MoreListDispatcher = new MoreListDispatcher();
   private mDirection: PanDirection = PanDirection.Right;
   private moreList: MoreListInfo[] = [{
@@ -75,20 +74,6 @@ export struct MoreList {
     Log.info(`${this.TAG} aboutToAppear end`)
   }
 
-  private setDirection(): void {
-    switch (deviceInfo.deviceType) {
-      case 'PAD':
-        this.mDirection = PanDirection.Down
-        break
-      case 'tablet':
-        this.mDirection = PanDirection.Down
-        break
-      default:
-        this.mDirection = PanDirection.Right
-        break
-    }
-  }
-
   build() {
     Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
       Grid() {
@@ -118,10 +103,24 @@ export struct MoreList {
     .width('100%')
     .height('70%')
     .gesture(
-    PanGesture({ direction: this.mDirection })
-      .onActionEnd(() => {
-        this.mAction.swipeChangeMode(this.state.modeIndex - 1)
-      })
+      PanGesture({ direction: this.mDirection })
+        .onActionEnd(() => {
+          this.mAction.swipeChangeMode(this.state.modeIndex - 1)
+        })
     )
   }
+
+  private setDirection(): void {
+    switch (deviceInfo.deviceType) {
+      case 'PAD':
+        this.mDirection = PanDirection.Down
+        break
+      case 'tablet':
+        this.mDirection = PanDirection.Down
+        break
+      default:
+        this.mDirection = PanDirection.Right
+        break
+    }
+  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/playsound/playSound.ets b/common/src/main/ets/default/featurecommon/playsound/playSound.ets
index 229b3e7..5e1d66c 100644
--- a/common/src/main/ets/default/featurecommon/playsound/playSound.ets
+++ b/common/src/main/ets/default/featurecommon/playsound/playSound.ets
@@ -24,6 +24,7 @@ import { SettingManager } from '../../setting/SettingManager'
 import { Voice } from '../../setting/settingitem/Voice'
 
 export class PlaySound {
+  private static sInstancePlaySound: PlaySound;
   private TAG: string = '[PlaySound]:'
   private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   private settingManager = SettingManager.getInstance()
@@ -31,7 +32,6 @@ export class PlaySound {
   private fdPath
   // @ts-ignore
   private mAVPlayer: media.AVPlayer
-  private static sInstancePlaySound: PlaySound;
 
   constructor() {
     Log.info(`${this.TAG} constructor start, enroll playCapture to ACTION_CAPTURE`)
@@ -44,6 +44,13 @@ export class PlaySound {
     })
   }
 
+  public static getInstance(): PlaySound {
+    if (!PlaySound.sInstancePlaySound) {
+      PlaySound.sInstancePlaySound = new PlaySound();
+    }
+    return PlaySound.sInstancePlaySound;
+  }
+
   setAVPlayerCallback(): void {
     Log.info(`${this.TAG} setAudioCallback`)
     this.mAVPlayer.on('stateChange', async (state, reason) => {
@@ -53,7 +60,8 @@ export class PlaySound {
           break;
         case 'initialized':
           Log.info(`${this.TAG} stateChange initialized state`)
-          this.mAVPlayer.prepare().then(() => {}, (err) => {
+          this.mAVPlayer.prepare().then(() => {
+          }, (err) => {
             Log.error(`${this.TAG} case prepare error`)
           })
           break;
@@ -88,12 +96,6 @@ export class PlaySound {
     })
   }
 
-  public static getInstance(): PlaySound {
-    if (!PlaySound.sInstancePlaySound) {
-      PlaySound.sInstancePlaySound = new PlaySound();
-    }
-    return PlaySound.sInstancePlaySound;
-  }
   private playCapture(data): void {
     Log.info(`${this.TAG} playCapture invoke E`);
     if (this.settingManager.getCaptureMute() == Voice.SOUND) {
diff --git a/common/src/main/ets/default/featurecommon/preferences/PreferencesService.ts b/common/src/main/ets/default/featurecommon/preferences/PreferencesService.ts
index 9130708..1d1535c 100644
--- a/common/src/main/ets/default/featurecommon/preferences/PreferencesService.ts
+++ b/common/src/main/ets/default/featurecommon/preferences/PreferencesService.ts
@@ -29,7 +29,8 @@ export class PreferencesService {
   public static getInstance(): PreferencesService {
     if (!globalThis?.sInstancePreferencesService) {
       globalThis.sInstancePreferencesService = new PreferencesService();
-      PreferencesService.modeStorage = dataStorage.getStorageSync(GlobalContext.get().getCameraAbilityContext().filesDir + '/mode_persist_values');
+      PreferencesService.modeStorage =
+        dataStorage.getStorageSync(GlobalContext.get().getCameraAbilityContext().filesDir + '/mode_persist_values');
     }
     return globalThis.sInstancePreferencesService;
   }
@@ -49,7 +50,8 @@ export class PreferencesService {
   }
 
   flush(): void {
-    PreferencesService.modeStorage.putSync(this.getModePersistKey(PersistType.FOR_AWHILE, 'Timestamp'), new Date().getTime());
+    PreferencesService.modeStorage.putSync(this.getModePersistKey(PersistType.FOR_AWHILE, 'Timestamp'),
+      new Date().getTime());
     this.flushMode();
   }
 
diff --git a/common/src/main/ets/default/featurecommon/screenlock/Decorators.ts b/common/src/main/ets/default/featurecommon/screenlock/Decorators.ts
index 51b6dcc..aabf152 100644
--- a/common/src/main/ets/default/featurecommon/screenlock/Decorators.ts
+++ b/common/src/main/ets/default/featurecommon/screenlock/Decorators.ts
@@ -13,33 +13,33 @@
  * limitations under the License.
  */
 
-import { Log } from '../../utils/Log'
+import { Log } from '../../utils/Log';
 
 const TAG = '[Decorators]:'
 
 export function debounce(timeout: number) {
-    return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
-        let curFunc: number = 0;
-        const original = descriptor.value;
-        descriptor.value = function (...args: string[]) {
-            Log.log(`${TAG} debounce invoke ${propKey} curFunc: ${curFunc}`);
-            curFunc && clearTimeout(curFunc);
-            curFunc = setTimeout(() => original.call(this, ...args), timeout);
-        };
+  return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
+    let curFunc: number = 0;
+    const original = descriptor.value;
+    descriptor.value = function (...args: string[]) {
+      Log.log(`${TAG} debounce invoke ${propKey} curFunc: ${curFunc}`);
+      curFunc && clearTimeout(curFunc);
+      curFunc = setTimeout(() => original.call(this, ...args), timeout);
     };
+  };
 }
 
 export function throttle(waitTime: number) {
-    return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
-        let lastTime: number = 0;
-        const original = descriptor.value;
-        descriptor.value = function (...args: string[]) {
-            let curTime = Date.now();
-            Log.log(`${TAG} throttle invoke ${propKey} timeInterval: ${curTime - lastTime}`);
-            if (curTime - lastTime >= waitTime) {
-                original.call(this, ...args);
-                lastTime = curTime;
-            }
-        };
+  return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
+    let lastTime: number = 0;
+    const original = descriptor.value;
+    descriptor.value = function (...args: string[]) {
+      let curTime = Date.now();
+      Log.log(`${TAG} throttle invoke ${propKey} timeInterval: ${curTime - lastTime}`);
+      if (curTime - lastTime >= waitTime) {
+        original.call(this, ...args);
+        lastTime = curTime;
+      }
     };
+  };
 }
diff --git a/common/src/main/ets/default/featurecommon/settingview/model/SettingData.ts b/common/src/main/ets/default/featurecommon/settingview/model/SettingData.ts
index b675cba..e2af8ca 100644
--- a/common/src/main/ets/default/featurecommon/settingview/model/SettingData.ts
+++ b/common/src/main/ets/default/featurecommon/settingview/model/SettingData.ts
@@ -14,9 +14,6 @@
  */
 
 export class SettingData {
-  constructor() {
-  }
-
   settingTitle?: string | Resource;
   imagePath?: string | Resource;
   settingName?: Resource;
@@ -26,6 +23,9 @@ export class SettingData {
   radio?: string;
   toggle?: string;
   description?: string;
+
+  constructor() {
+  }
 }
 
 
diff --git a/common/src/main/ets/default/featurecommon/settingview/phone/SetResolution.ets b/common/src/main/ets/default/featurecommon/settingview/phone/SetResolution.ets
index 1099548..ea30268 100644
--- a/common/src/main/ets/default/featurecommon/settingview/phone/SetResolution.ets
+++ b/common/src/main/ets/default/featurecommon/settingview/phone/SetResolution.ets
@@ -15,11 +15,9 @@
 
 import { Action } from '../../../redux/actions/Action';
 import Timer from '../../../setting/settingitem/Timer';
-import { CustomDialogDetails } from '../../customdialog/dialogComponent/CustomDialogView';
-import { CustomDialogView } from '../../customdialog/dialogComponent/CustomDialogView';
+import { CustomDialogDetails, CustomDialogView } from '../../customdialog/dialogComponent/CustomDialogView';
 import { Log } from '../../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../../redux/store';
-import { getStore } from '../../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 import { SettingManager } from '../../../setting/SettingManager';
 import { SettingData, SettingGroupItem } from '../model/SettingData';
 
@@ -27,8 +25,6 @@ class StateStruct {
 }
 
 class SetResolutionDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -36,22 +32,30 @@ class SetResolutionDispatcher {
   public closeDialog(isCloseFlag: boolean): void {
     this.mDispatch(Action.closeDialog(isCloseFlag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export struct SetResolution {
-  private TAG: string = '[SetResolution]:';
   @Link settingsList: SettingGroupItem[];
   @Link @Watch('onCloseDialog') closeFlag: boolean;
+  @StorageLink('settingDialogFlag') settingDialogFlag: boolean = true;
+  @State curCheckName: Resource = $r('app.string.default_value');
+  @State state: StateStruct = new StateStruct();
+  CustomDialogView: CustomDialogController = new CustomDialogController({
+    builder: CustomDialogView({ cancel: () => this.existView() }),
+    autoCancel: true,
+    alignment: DialogAlignment.Bottom,
+    cancel: this.existView,
+    customStyle: true
+  });
+  private TAG: string = '[SetResolution]:';
   private itemValue: SettingData = {};
   private WH_100_100: string = "100%";
   private settingManager = SettingManager.getInstance();
   private setAlias: string = '';
-  @StorageLink('settingDialogFlag') settingDialogFlag: boolean = true;
-  @State curCheckName: Resource = $r('app.string.default_value');
-  @State state: StateStruct = new StateStruct();
-  private mAction: SetResolutionDispatcher = new SetResolutionDispatcher();
   @Provide customDialogDetails: CustomDialogDetails = {
     confirmCallback: Function,
     confirmItem: true,
@@ -61,13 +65,7 @@ export struct SetResolution {
     childrenList: [],
     settingTitle: ''
   };
-  CustomDialogView: CustomDialogController = new CustomDialogController({
-    builder: CustomDialogView({ cancel: () => this.existView() }),
-    autoCancel: true,
-    alignment: DialogAlignment.Bottom,
-    cancel: this.existView,
-    customStyle: true
-  });
+  private mAction: SetResolutionDispatcher = new SetResolutionDispatcher();
 
   existView(): void {
     Log.info(`${this.TAG} existView E`)
diff --git a/common/src/main/ets/default/featurecommon/settingview/phone/SetToggle.ets b/common/src/main/ets/default/featurecommon/settingview/phone/SetToggle.ets
index 3701fb0..f78aaa5 100644
--- a/common/src/main/ets/default/featurecommon/settingview/phone/SetToggle.ets
+++ b/common/src/main/ets/default/featurecommon/settingview/phone/SetToggle.ets
@@ -16,31 +16,30 @@
 import { Log } from '../../../utils/Log';
 import { SettingManager } from '../../../setting/SettingManager';
 import { SettingData, SettingGroupItem } from '../model/SettingData';
-import { Dispatch, OhCombinedState } from '../../../redux/store';
-import { getStore } from '../../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 
 class StateStruct {
   mode: string = '';
 }
 
 class SetToggleDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct SetToggle {
-  private TAG: string = '[SetToggle]:';
   @Link settingsList: SettingGroupItem[];
   @State isOn: boolean = false;
+  @State generalStatusValue: boolean = false;
+  @State state: StateStruct = new StateStruct();
+  private TAG: string = '[SetToggle]:';
   private itemValue: SettingData = {};
   private WH_100_100: string = "100%";
   private settingManager = SettingManager.getInstance();
-  @State generalStatusValue: boolean = false;
-  @State state: StateStruct = new StateStruct();
   private mAction: SetToggleDispatcher = new SetToggleDispatcher();
 
   aboutToAppear() {
@@ -95,7 +94,8 @@ export struct SetToggle {
                 .opacity($r('sys.float.ohos_id_alpha_content_secondary'))
             }.margin({
               top: $r('sys.float.ohos_id_text_margin_vertical'),
-              left: 40 })
+              left: 40
+            })
           }
         }
         .layoutWeight(1)
diff --git a/common/src/main/ets/default/featurecommon/settingview/phone/SettingItem.ets b/common/src/main/ets/default/featurecommon/settingview/phone/SettingItem.ets
index 5a21b5f..8a84d51 100644
--- a/common/src/main/ets/default/featurecommon/settingview/phone/SettingItem.ets
+++ b/common/src/main/ets/default/featurecommon/settingview/phone/SettingItem.ets
@@ -13,18 +13,16 @@
  * limitations under the License.
  */
 
-import { SettingManager } from '../../../setting/SettingManager'
 import { Log } from '../../../utils/Log'
 import { SetResolution } from './SetResolution'
 import { SetToggle } from './SetToggle'
-import { BaseData } from '../model/BaseData'
 import { SettingData, SettingGroupItem } from '../model/SettingData'
 
 @Component
 export struct SettingItem {
-  private TAG: string = '[SettingItem]:';
   @Link settingsList: SettingGroupItem[];
   @Link closeFlag: Boolean;
+  private TAG: string = '[SettingItem]:';
   private item: SettingGroupItem = {};
   private index: number = 0;
   private WH_100_100: string = "100%";
@@ -36,15 +34,19 @@ export struct SettingItem {
   }
 
   build() {
-    Flex({ direction: FlexDirection.Column,
+    Flex({
+      direction: FlexDirection.Column,
       alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.SpaceBetween }) {
+      justifyContent: FlexAlign.SpaceBetween
+    }) {
       Column() {
         Row() {
           Text(this.item.settingTitle)
-            .margin({ top: $r('app.float.margin_value_20'),
+            .margin({
+              top: $r('app.float.margin_value_20'),
               left: $r('sys.float.ohos_id_card_margin_start'),
-              bottom: $r('app.float.margin_value_8') })
+              bottom: $r('app.float.margin_value_8')
+            })
             .fontColor($r('app.color.font_color_FFFFFF'))
             .opacity($r('app.float.opacity_6'))
             .fontSize($r('app.float.font_14'))
@@ -79,7 +81,12 @@ export struct SettingItem {
           })
         }
         .listDirection(Axis.Vertical)
-        .divider({ strokeWidth: 0.5, color: '#33FFFFFF', startMargin: 56, endMargin: 12 })
+        .divider({
+          strokeWidth: 0.5,
+          color: '#33FFFFFF',
+          startMargin: 56,
+          endMargin: 12
+        })
         .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
         .backgroundColor('#202224')
         .padding({ top: 4, bottom: 4 })
diff --git a/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetResolution.ets b/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetResolution.ets
index 6e1141b..04ef5ca 100644
--- a/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetResolution.ets
+++ b/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetResolution.ets
@@ -15,20 +15,17 @@
 
 import { Action } from '../../../redux/actions/Action'
 import Timer from '../../../setting/settingitem/Timer'
-import { CustomDialogDetails } from '../../customdialog/dialogComponent/CustomDialogView'
-import { CustomDialogView } from '../../customdialog/dialogComponent/CustomDialogView'
+import { CustomDialogDetails, CustomDialogView } from '../../customdialog/dialogComponent/CustomDialogView'
 import { Log } from '../../../utils/Log'
-import { Dispatch, OhCombinedState } from '../../../redux/store'
-import { getStore } from '../../../redux/store'
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store'
 import { SettingManager } from '../../../setting/SettingManager'
 import { SettingData, SettingGroupItem } from '../model/SettingData'
 
 class StateStruct {
   isCloseFlag: boolean = false;
 }
-class SetResolutionDispatcher {
-  private mDispatch: Dispatch = (data) => data;
 
+class SetResolutionDispatcher {
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -36,24 +33,34 @@ class SetResolutionDispatcher {
   public closeDialog(isCloseFlag: boolean): void {
     this.mDispatch(Action.closeDialog(isCloseFlag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct TabletSetResolution {
-  private TAG: string = '[TabletSetResolution]:';
   @Link settingsList: SettingGroupItem[];
   @Link @Watch('onCloseDialog') closeFlag: boolean;
+  @StorageLink('settingDialogFlag') settingDialogFlag: boolean = true;
+  @State curCheckName: Resource = $r('app.string.default_value');
+  @State state: StateStruct = new StateStruct();
+  CustomDialogView: CustomDialogController = new CustomDialogController({
+    builder: CustomDialogView({ cancel: () => this.existView }),
+    autoCancel: true,
+    alignment: DialogAlignment.Center,
+    cancel: this.existView,
+    customStyle: true
+  })
+  private TAG: string = '[TabletSetResolution]:';
   private itemValue: SettingData = new SettingData();
   private WH_100_100: string = "100%";
   private settingManager: SettingManager = SettingManager.getInstance();
   private setAlias: string = '';
-  @StorageLink('settingDialogFlag') settingDialogFlag: boolean = true;
-  @State curCheckName: Resource = $r('app.string.default_value');
-  @State state: StateStruct = new StateStruct();
   private mAction: SetResolutionDispatcher = new SetResolutionDispatcher();
 
   @Provide customDialogDetails: CustomDialogDetails = {
-    confirmCallback: () => {},
+    confirmCallback: () => {
+    },
     confirmItem: true,
     height: 256,
     width: 256,
@@ -62,13 +69,6 @@ export struct TabletSetResolution {
     settingTitle: '',
     //    dialogCloseFlag:false
   }
-  CustomDialogView: CustomDialogController = new CustomDialogController({
-    builder: CustomDialogView({ cancel: () => this.existView }),
-    autoCancel: true,
-    alignment: DialogAlignment.Center,
-    cancel: this.existView,
-    customStyle: true
-  })
 
   existView() {
     Log.info(`${this.TAG} existView E`)
@@ -83,7 +83,7 @@ export struct TabletSetResolution {
     Log.info(`${this.TAG} aboutToAppear settingsList: ${JSON.stringify(this.settingsList)} E`)
     getStore().subscribe((state: OhCombinedState) => {
       this.state = {
-        isCloseFlag:state.settingReducer.isCloseFlag
+        isCloseFlag: state.settingReducer.isCloseFlag
       };
     }, (dispatch: Dispatch) => {
       this.mAction.setDispatch(dispatch);
diff --git a/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetToggle.ets b/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetToggle.ets
index 0d4fcb0..0bdd4e5 100644
--- a/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetToggle.ets
+++ b/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetToggle.ets
@@ -13,35 +13,34 @@
  * limitations under the License.
  */
 
-import { Log } from '../../../utils/Log'
-import { SettingManager } from '../../../setting/SettingManager'
-import { SettingData, SettingGroupItem } from '../model/SettingData'
-import { Dispatch, OhCombinedState } from '../../../redux/store'
-import { getStore } from '../../../redux/store';
+import { Log } from '../../../utils/Log';
+import { SettingManager } from '../../../setting/SettingManager';
+import { SettingData, SettingGroupItem } from '../model/SettingData';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 
 class StateStruct {
   mode: string = ''
 }
 
 class SetToggleDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct TabletSetToggle {
-  private TAG: string = '[TabletSetToggle]:'
   @Link settingsList: SettingGroupItem[]
   @State isOn: boolean = false
+  @State generalStatusValue: boolean = false
+  @State state: StateStruct = new StateStruct()
+  private TAG: string = '[TabletSetToggle]:'
   private itemValue: SettingData = new SettingData();
   // private getToggleStatus: Promise<string>
   private WH_100_100: string = "100%"
   private settingManager = SettingManager.getInstance()
-  @State generalStatusValue: boolean = false
-  @State state: StateStruct = new StateStruct()
   private mAction: SetToggleDispatcher = new SetToggleDispatcher();
 
   aboutToAppear() {
@@ -95,7 +94,8 @@ export struct TabletSetToggle {
                 .opacity($r('sys.float.ohos_id_alpha_content_secondary'))
             }.margin({
               top: $r('sys.float.ohos_id_text_margin_vertical'),
-              left: 40 })
+              left: 40
+            })
           }
         }
         .layoutWeight(1)
@@ -119,7 +119,12 @@ export struct TabletSetToggle {
         }
         .margin({ left: $r('sys.float.ohos_id_card_margin_end') })
       }
-      .padding({ left: 12, right: 12, top: 4, bottom: 4 })
+      .padding({
+        left: 12,
+        right: 12,
+        top: 4,
+        bottom: 4
+      })
     }
     .height(this.itemValue?.description ? 72 : 56)
     .width(this.WH_100_100)
diff --git a/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSettingItem.ets b/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSettingItem.ets
index 0b217e2..a582b7c 100644
--- a/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSettingItem.ets
+++ b/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSettingItem.ets
@@ -17,19 +17,20 @@ import { SettingManager } from '../../../setting/SettingManager'
 import { Log } from '../../../utils/Log'
 import { TabletSetResolution } from './TabletSetResolution'
 import { TabletSetToggle } from './TabletSetToggle'
-import { BaseData } from '../model/BaseData'
 import { SettingData, SettingGroupItem } from '../model/SettingData'
 
 @Component
 export struct TabletSettingItem {
-  private TAG: string = '[TabletSettingItem]:'
   @Link settingsList: SettingGroupItem[]
   @Link closeFlag: Boolean
+  private TAG: string = '[TabletSettingItem]:'
   private item: SettingGroupItem = new SettingGroupItem();
   private index: number = 0
   private settingsListIndex: number = 0
-  private getPhotoValue: Promise<string> = new Promise(() => {});
-  private getVideoValue: Promise<string> = new Promise(() => {});
+  private getPhotoValue: Promise<string> = new Promise(() => {
+  });
+  private getVideoValue: Promise<string> = new Promise(() => {
+  });
   private WH_100_100: string = "100%"
   private settingManager = SettingManager.getInstance()
 
@@ -40,15 +41,19 @@ export struct TabletSettingItem {
   }
 
   build() {
-    Flex({ direction: FlexDirection.Column,
+    Flex({
+      direction: FlexDirection.Column,
       alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.SpaceBetween }) {
+      justifyContent: FlexAlign.SpaceBetween
+    }) {
       Column() {
         Row() {
           Text(this.item.settingTitle)
-            .margin({ top: $r('app.float.margin_value_20'),
+            .margin({
+              top: $r('app.float.margin_value_20'),
               left: $r('sys.float.ohos_id_card_margin_start'),
-              bottom: $r('app.float.margin_value_8') })
+              bottom: $r('app.float.margin_value_8')
+            })
             .fontColor($r('app.color.font_color_FFFFFF'))
             .opacity($r('app.float.opacity_6'))
             .fontSize($r('app.float.font_14'))
@@ -83,7 +88,12 @@ export struct TabletSettingItem {
           })
         }
         .listDirection(Axis.Vertical)
-        .divider({ strokeWidth: 0.5, color: '#33FFFFFF', startMargin: 56, endMargin: 12 })
+        .divider({
+          strokeWidth: 0.5,
+          color: '#33FFFFFF',
+          startMargin: 56,
+          endMargin: 12
+        })
         .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
         .backgroundColor('#202224')
         .padding({ top: 4, bottom: 4 })
diff --git a/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButton.ets b/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButton.ets
index f553e1f..af3f149 100644
--- a/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButton.ets
+++ b/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButton.ets
@@ -16,8 +16,7 @@
 import router from '@system.router';
 import image from '@ohos.multimedia.image';
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
@@ -42,8 +41,6 @@ class StateStruct {
 
 
 class ShutterButtonDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -89,6 +86,8 @@ class ShutterButtonDispatcher {
   public changeTimeLapse(isShowtimeLapse: boolean): void {
     this.mDispatch(Action.changeTimeLapse(isShowtimeLapse));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ModeStruct {
@@ -102,13 +101,13 @@ class UpdateThumbnailStruct {
 
 @Component
 export struct ShutterButton {
-  private TAG: string = '[ShutterButton]:';
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
-  private settingManager = SettingManager.getInstance();
   type: ButtonType = ButtonType.Capsule;
   stateEffect: boolean = false;
   @State state: StateStruct = new StateStruct();
   @State captureBtnScale: number = 1;
+  private TAG: string = '[ShutterButton]:';
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
+  private settingManager = SettingManager.getInstance();
   private mAction: ShutterButtonDispatcher = new ShutterButtonDispatcher();
 
   aboutToAppear() {
@@ -145,6 +144,122 @@ export struct ShutterButton {
     Log.info(`${this.TAG} aboutToDisappear X`);
   }
 
+  build() {
+    if (this.state.videoState === 'beforeTakeVideo') {
+      Stack({ alignContent: Alignment.Center }) {
+        if (this.state.mode === 'VIDEO') {
+          Image(this.state.shutterIcon)
+            .key(ComponentIdKeys.SHUTTER_VIDEO_1)
+            .width(76)
+            .aspectRatio(1)
+            .enabled(this.state.uiEnable)
+            .onTouch((event?: TouchEvent) => {
+              if (!event) {
+                return;
+              }
+              if (event.type === TouchType.Up) {
+                let timerLapse = this.settingManager.getTimeLapse()
+                Log.log(`${this.TAG} ShutterButton startRecording getValue= ${JSON.stringify(timerLapse)}`)
+                if (timerLapse && timerLapse.id !== Timer.RESOURCE_OFF.id) {
+                  Log.log('ShutterButton startRecording changeTimeLapse called')
+                  this.mAction.changeTimeLapse(true)
+                } else {
+                  Log.log('ShutterButton startRecording changeTimeLapse not called')
+                  this.mAction.startRecording()
+                }
+              }
+            })
+        } else {
+          Image($r('app.media.ic_circled')).fillColor(Color.White)
+          Image(this.state.shutterIcon)
+            .width(54)
+            .aspectRatio(1)
+            .fillColor(Color.White)
+            .key(ComponentIdKeys.SHUTTER_PHOTO_1)
+            .scale({ x: this.captureBtnScale, y: this.captureBtnScale, z: this.captureBtnScale })
+            .enabled(this.state.uiEnable)
+            .onTouch((event?: TouchEvent) => {
+              if (!event) {
+                return;
+              }
+              if (event.type === TouchType.Down) {
+                animateTo(
+                  { duration: 125, curve: Curve.Sharp, delay: 0 },
+                  () => {
+                    this.captureBtnScale = 0.85
+                  })
+              } else if (event.type === TouchType.Up) {
+                animateTo(
+                  {
+                    duration: 125,
+                    curve: Curve.Sharp,
+                    delay: 0,
+                    onFinish: () => {
+                      this.captureBtnScale = 1
+                    }
+                  },
+                  () => {
+                    this.captureBtnScale = 1
+                  })
+                let timerLapse = this.settingManager.getTimeLapse()
+                Log.log(`${this.TAG} ShutterButton start capture getValue= ${JSON.stringify(timerLapse)}`)
+                if (timerLapse && timerLapse.id !== Timer.RESOURCE_OFF.id) {
+                  Log.log('ShutterButton startRecording changeTimeLapse called')
+                  this.mAction.changeTimeLapse(true)
+                } else {
+                  Log.log('ShutterButton capture changeTimeLapse not called')
+                  this.mAction.capture()
+                }
+              }
+            })
+        }
+      }.width(76).aspectRatio(1).margin({ left: 48, right: 48 })
+    } else {
+      Column() {
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Column() {
+            Image($r('app.media.ic_video_end'))
+              .key(ComponentIdKeys.SHUTTER_VIDEO_END_1)
+              .width(20)
+              .aspectRatio(1)
+              .fillColor(Color.White)
+              .enabled(this.state.uiEnable)
+          }
+          .width(40)
+          .padding({ left: 10, right: 10 })
+          .margin({ right: 6 })
+          .enabled(this.state.uiEnable)
+          .onClick(() => {
+            this.mAction.stopRecording()
+          })
+
+          Column() {
+            if (this.state.videoState === 'startTakeVideo') {
+              Image($r('app.media.ic_video_recording'))
+                .width(20).aspectRatio(1).fillColor(Color.White)
+                .enabled(this.state.uiEnable)
+            } else if (this.state.videoState === 'pauseTakeVideo') {
+              Image($r('app.media.ic_video_pause')).width(20).aspectRatio(1).fillColor(Color.Red)
+                .enabled(this.state.uiEnable)
+            }
+          }
+          .width(40)
+          .padding({ left: 10, right: 10 })
+          .margin({ left: 6 })
+          .enabled(this.state.uiEnable)
+          .onClick(() => {
+            this.state.videoState === 'startTakeVideo' ? this.mAction.pauseRecording() : this.mAction.resumeRecording()
+          })
+        }.width('100%').height('100%')
+      }
+      .width(120)
+      .height(56)
+      .borderRadius(28)
+      .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
+      .margin({ left: 24, right: 24 })
+    }
+  }
+
   private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
     Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
     Log.info(`${this.TAG} onThumbnailUpdate resourceUri= ${JSON.stringify(this.state.resourceUri)} E`)
@@ -192,103 +307,4 @@ export struct ShutterButton {
     }
     Log.info(`${this.TAG} refreshIcon X`);
   }
-
-  build() {
-    if (this.state.videoState === 'beforeTakeVideo') {
-      Stack({ alignContent: Alignment.Center }) {
-        if (this.state.mode === 'VIDEO') {
-          Image(this.state.shutterIcon)
-            .key(ComponentIdKeys.SHUTTER_VIDEO_1)
-            .width(76).aspectRatio(1).enabled(this.state.uiEnable)
-            .onTouch((event?: TouchEvent) => {
-              if (!event) {
-                return;
-              }
-              if (event.type === TouchType.Up) {
-                let timerLapse = this.settingManager.getTimeLapse()
-                Log.log(`${this.TAG} ShutterButton startRecording getValue= ${JSON.stringify(timerLapse)}`)
-                if (timerLapse && timerLapse.id !== Timer.RESOURCE_OFF.id) {
-                  Log.log('ShutterButton startRecording changeTimeLapse called')
-                  this.mAction.changeTimeLapse(true)
-                } else {
-                  Log.log('ShutterButton startRecording changeTimeLapse not called')
-                  this.mAction.startRecording()
-                }
-              }
-            })
-        } else {
-          Image($r('app.media.ic_circled')).fillColor(Color.White)
-          Image(this.state.shutterIcon).width(54).aspectRatio(1).fillColor(Color.White)
-            .key(ComponentIdKeys.SHUTTER_PHOTO_1)
-            .scale({ x: this.captureBtnScale, y: this.captureBtnScale, z: this.captureBtnScale })
-            .enabled(this.state.uiEnable)
-            .onTouch((event?: TouchEvent) => {
-              if (!event) {
-                return;
-              }
-              if (event.type === TouchType.Down) {
-                animateTo(
-                  { duration: 125, curve: Curve.Sharp, delay: 0 },
-                  () => { this.captureBtnScale = 0.85 })
-              } else if (event.type === TouchType.Up) {
-                animateTo(
-                  { duration: 125, curve: Curve.Sharp, delay: 0,
-                    onFinish: () => { this.captureBtnScale = 1 }},
-                  () => { this.captureBtnScale = 1 })
-                let timerLapse = this.settingManager.getTimeLapse()
-                Log.log(`${this.TAG} ShutterButton start capture getValue= ${JSON.stringify(timerLapse)}`)
-                if (timerLapse && timerLapse.id !== Timer.RESOURCE_OFF.id) {
-                  Log.log('ShutterButton startRecording changeTimeLapse called')
-                  this.mAction.changeTimeLapse(true)
-                } else {
-                  Log.log('ShutterButton capture changeTimeLapse not called')
-                  this.mAction.capture()
-                }
-              }
-            })
-        }
-      }.width(76).aspectRatio(1).margin({ left: 48, right: 48 })
-    } else {
-      Column() {
-        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Column() {
-            Image($r('app.media.ic_video_end'))
-              .key(ComponentIdKeys.SHUTTER_VIDEO_END_1)
-              .width(20)
-              .aspectRatio(1)
-              .fillColor(Color.White)
-              .enabled(this.state.uiEnable)
-          }
-          .width(40)
-          .padding({ left: 10, right: 10 })
-          .margin({ right: 6 })
-          .enabled(this.state.uiEnable)
-          .onClick(() => {
-            this.mAction.stopRecording()
-          })
-
-          Column() {
-            if (this.state.videoState === 'startTakeVideo') {
-              Image($r('app.media.ic_video_recording'))
-                .width(20).aspectRatio(1).fillColor(Color.White)
-                .enabled(this.state.uiEnable)
-            } else if (this.state.videoState === 'pauseTakeVideo') {
-              Image($r('app.media.ic_video_pause')).width(20).aspectRatio(1).fillColor(Color.Red)
-                .enabled(this.state.uiEnable)
-            }
-          }
-          .width(40)
-          .padding({ left: 10, right: 10 })
-          .margin({ left: 6 })
-          .enabled(this.state.uiEnable)
-          .onClick(() => {
-              this.state.videoState === 'startTakeVideo' ? this.mAction.pauseRecording() : this.mAction.resumeRecording()
-          })
-        }.width('100%').height('100%')
-      }
-      .width(120).height(56).borderRadius(28)
-      .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
-      .margin({ left: 24, right: 24 })
-    }
-  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButtonLand.ets b/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButtonLand.ets
index 0582cac..a72daa8 100644
--- a/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButtonLand.ets
+++ b/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButtonLand.ets
@@ -19,8 +19,7 @@ import { Action } from '../../redux/actions/Action';
 import { Log } from '../../utils/Log';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { SettingManager } from '../../setting/SettingManager';
 import Timer from '../../setting/settingitem/Timer';
 import { ComponentPosition } from '../../utils/ComponentPosition';
@@ -42,8 +41,6 @@ class StateStruct {
 }
 
 class ShutterButtonDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -89,6 +86,8 @@ class ShutterButtonDispatcher {
   public changeTimeLapse(isShowtimeLapse: boolean): void {
     this.mDispatch(Action.changeTimeLapse(isShowtimeLapse));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ScreenSizeType {
@@ -107,15 +106,15 @@ class UpdateThumbnailStruct {
 
 @Component
 export struct ShutterButtonLand {
-  private TAG: string = '[ShutterButtonLand]:';
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
-  private settingManager = SettingManager.getInstance();
-  private lastTime = 0;
   @Link screenSize: ScreenSizeType;
   type: ButtonType = ButtonType.Capsule;
   stateEffect: boolean = false;
   @State state: StateStruct = new StateStruct();
   @State captureBtnScale: number = 1;
+  private TAG: string = '[ShutterButtonLand]:';
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
+  private settingManager = SettingManager.getInstance();
+  private lastTime = 0;
   private mAction: ShutterButtonDispatcher = new ShutterButtonDispatcher();
 
   aboutToAppear(): void {
@@ -152,46 +151,6 @@ export struct ShutterButtonLand {
     Log.info(`${this.TAG} aboutToDisappear X`);
   }
 
-  private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
-    Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
-    Log.info(`${this.TAG} onThumbnailUpdate resourceUri= ${JSON.stringify(this.state.resourceUri)} E`);
-    Log.info(`${this.TAG} onThumbnailUpdate isThirdPartyCall= ${this.state.isThirdPartyCall} E`)
-    Log.info(`${this.TAG} onThumbnailUpdate videoUri= ${this.state.videoUri} E`);
-    if (this.state.isThirdPartyCall) {
-      Log.info(`${this.TAG} onThumbnailUpdate start router to ThirdPreviewView`)
-      router.push({
-        uri: "pages/ThirdPreviewView",
-        params: {
-          width: this.state.xComponentWidth,
-          height: this.state.xComponentHeight,
-          mode: this.state.mode,
-          uri: this.state.resourceUri,
-          videoUri: this.state.videoUri,
-          callBundleName: GlobalContext.get().getCameraAbilityWant()?.parameters?.callBundleName
-        }
-      })
-    }
-    Log.info(`${this.TAG} onThumbnailUpdate this.state.thumbnail: ${JSON.stringify(this.state.thumbnail)} X`)
-  }
-
-  private async changeShutterIcon(data: ModeStruct): Promise<void> {
-    Log.info(`${this.TAG} resetShutterIcon E`);
-    this.refreshIcon(data.mode)
-    Log.info(`${this.TAG} resetShutterIcon X`);
-  }
-
-  private async refreshIcon(mode: string): Promise<void> {
-    Log.info(`${this.TAG} refreshIcon E`);
-    if (mode === 'PHOTO') {
-      this.mAction.updateShutterIcon($r('app.media.ic_circled_filled'))
-    } else if (mode === 'VIDEO') {
-      this.mAction.updateShutterIcon($r('app.media.take_video_normal'))
-    } else {
-      this.mAction.updateShutterIcon($r('app.media.ic_circled_filled'))
-    }
-    Log.info(`${this.TAG} refreshIcon X`);
-  }
-
   build() {
     if (this.state.videoState === 'beforeTakeVideo') {
       Stack({ alignContent: Alignment.Center }) {
@@ -226,10 +185,14 @@ export struct ShutterButtonLand {
                   })
               } else if (event.type === TouchType.Up) {
                 animateTo(
-                  { duration: 125, curve: Curve.Sharp, delay: 0,
+                  {
+                    duration: 125,
+                    curve: Curve.Sharp,
+                    delay: 0,
                     onFinish: () => {
                       this.captureBtnScale = 1
-                    } },
+                    }
+                  },
                   () => {
                     this.captureBtnScale = 1
                   })
@@ -250,8 +213,10 @@ export struct ShutterButtonLand {
             })
         }
       }.width(76).aspectRatio(1).margin({
-        top: ComponentPosition.getShutterButtonMargin(this.screenSize.width, this.screenSize.height, this.state.xComponentHeight),
-        bottom: ComponentPosition.getShutterButtonMargin(this.screenSize.width, this.screenSize.height, this.state.xComponentHeight)
+        top: ComponentPosition.getShutterButtonMargin(this.screenSize.width, this.screenSize.height,
+          this.state.xComponentHeight),
+        bottom: ComponentPosition.getShutterButtonMargin(this.screenSize.width, this.screenSize.height,
+          this.state.xComponentHeight)
       })
     } else {
       Column() {
@@ -295,4 +260,44 @@ export struct ShutterButtonLand {
       .margin({ top: 26, bottom: 26 })
     }
   }
+
+  private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
+    Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
+    Log.info(`${this.TAG} onThumbnailUpdate resourceUri= ${JSON.stringify(this.state.resourceUri)} E`);
+    Log.info(`${this.TAG} onThumbnailUpdate isThirdPartyCall= ${this.state.isThirdPartyCall} E`)
+    Log.info(`${this.TAG} onThumbnailUpdate videoUri= ${this.state.videoUri} E`);
+    if (this.state.isThirdPartyCall) {
+      Log.info(`${this.TAG} onThumbnailUpdate start router to ThirdPreviewView`)
+      router.push({
+        uri: "pages/ThirdPreviewView",
+        params: {
+          width: this.state.xComponentWidth,
+          height: this.state.xComponentHeight,
+          mode: this.state.mode,
+          uri: this.state.resourceUri,
+          videoUri: this.state.videoUri,
+          callBundleName: GlobalContext.get().getCameraAbilityWant()?.parameters?.callBundleName
+        }
+      })
+    }
+    Log.info(`${this.TAG} onThumbnailUpdate this.state.thumbnail: ${JSON.stringify(this.state.thumbnail)} X`)
+  }
+
+  private async changeShutterIcon(data: ModeStruct): Promise<void> {
+    Log.info(`${this.TAG} resetShutterIcon E`);
+    this.refreshIcon(data.mode)
+    Log.info(`${this.TAG} resetShutterIcon X`);
+  }
+
+  private async refreshIcon(mode: string): Promise<void> {
+    Log.info(`${this.TAG} refreshIcon E`);
+    if (mode === 'PHOTO') {
+      this.mAction.updateShutterIcon($r('app.media.ic_circled_filled'))
+    } else if (mode === 'VIDEO') {
+      this.mAction.updateShutterIcon($r('app.media.take_video_normal'))
+    } else {
+      this.mAction.updateShutterIcon($r('app.media.ic_circled_filled'))
+    }
+    Log.info(`${this.TAG} refreshIcon X`);
+  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/tabbar/TabBar.ets b/common/src/main/ets/default/featurecommon/tabbar/TabBar.ets
index f6f2b0c..c98fd31 100644
--- a/common/src/main/ets/default/featurecommon/tabbar/TabBar.ets
+++ b/common/src/main/ets/default/featurecommon/tabbar/TabBar.ets
@@ -14,8 +14,7 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 
 class StateStruct {
@@ -23,8 +22,6 @@ class StateStruct {
 }
 
 class TabBarDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -32,14 +29,15 @@ class TabBarDispatcher {
   public showSettingView(isShowSettingView: boolean): void {
     this.mDispatch(Action.showSettingView(isShowSettingView));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export struct TabBar {
-  private TAG: string = '[TabBar]';
   @State state: StateStruct = new StateStruct();
-  private onBackClicked: Function = () => {};
+  private TAG: string = '[TabBar]';
   private mAction: TabBarDispatcher = new TabBarDispatcher();
 
   aboutToAppear(): void {
@@ -59,6 +57,7 @@ export struct TabBar {
       Column() {
         //        TabBarOther()
       }.width('40%').height('100%')
+
       Column() {
         if (this.state.isThirdPartyCall) {
           Row() {
@@ -68,10 +67,11 @@ export struct TabBar {
                 this.onBackClicked()
               })
           }.width(48).height(48)
-          .padding({left: 12})
+          .padding({ left: 12 })
           .margin({ bottom: 12 })
         }
       }.width('40%').height('100%')
+
       Column() {
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Image($r('app.media.setting')).width(24).height(24)
@@ -81,4 +81,7 @@ export struct TabBar {
       })
     }.width('100%').height('100%')
   }
+
+  private onBackClicked: Function = () => {
+  };
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/tabbar/TabBarLand.ets b/common/src/main/ets/default/featurecommon/tabbar/TabBarLand.ets
index 689b0f0..16329c8 100644
--- a/common/src/main/ets/default/featurecommon/tabbar/TabBarLand.ets
+++ b/common/src/main/ets/default/featurecommon/tabbar/TabBarLand.ets
@@ -17,8 +17,7 @@ import { Action } from '../../redux/actions/Action'
 import { Log } from '../../utils/Log'
 import { EventBus } from '../../worker/eventbus/EventBus'
 import { EventBusManager } from '../../worker/eventbus/EventBusManager'
-import { Dispatch, OhCombinedState } from '../../redux/store'
-import { getStore } from '../../redux/store'
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store'
 import ReportUtil from '../../utils/ReportUtil'
 
 class StateStruct {
@@ -31,8 +30,6 @@ class ScreenSizeType {
 }
 
 class TabBarDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -40,18 +37,18 @@ class TabBarDispatcher {
   public showSettingView(isShowSettingView: boolean): void {
     this.mDispatch(Action.showSettingView(isShowSettingView));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct TabBarLand {
-  private TAG: string = '[TabBarLand]';
   @State state: StateStruct = new StateStruct();
   @State opacityTabBar: number = 0;
   @State isShowTabBarOther: boolean = false;
   @Link screenSize: ScreenSizeType;
-  private onBackClicked: Function = () => {
-  };
   appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
+  private TAG: string = '[TabBarLand]';
   private mAction: TabBarDispatcher = new TabBarDispatcher();
 
   aboutToAppear(): void {
@@ -91,4 +88,7 @@ export struct TabBarLand {
       .position(this.state.isThirdPartyCall ? { x: 0, y: 12 } : { x: 0, y: this.screenSize.height - 144 })
     }.width(48).height('100%')
   }
+
+  private onBackClicked: Function = () => {
+  };
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/thumbnail/ThumbnailView.ets b/common/src/main/ets/default/featurecommon/thumbnail/ThumbnailView.ets
index 7351f91..19172b3 100644
--- a/common/src/main/ets/default/featurecommon/thumbnail/ThumbnailView.ets
+++ b/common/src/main/ets/default/featurecommon/thumbnail/ThumbnailView.ets
@@ -14,8 +14,7 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
@@ -42,60 +41,26 @@ class StartAbilityParameterStruct {
 }
 
 class ThumbnailViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct ThumbnailView {
-  private TAG: string = '[ThumbnailView]:'
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   @State thumbnailBorder: BorderOptions = {};
   @State state: StateStruct = new StateStruct()
   @State thumbnail: Resource | PixelMap = $r('app.media.ic_camera_thumbnail_default_white')
   @State hasThumbnail: boolean = false
   @State scaleValue: number = 1
   @State tempOpacity: number = 1
+  private TAG: string = '[ThumbnailView]:'
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   private cameraService = CameraService.getInstance()
   private mAction: ThumbnailViewDispatcher = new ThumbnailViewDispatcher();
 
-  private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
-    Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
-    this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail)
-    this.hasThumbnail = data.thumbnail != undefined
-    if (this.hasThumbnail) {
-      this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid }
-    } else {
-      this.thumbnailBorder = { width: 0 }
-    }
-    this.scaleValue = 1.5
-    this.tempOpacity = 0.0
-    animateTo({ duration: 100, curve: Curve.Sharp }, () => {
-      this.tempOpacity = 1
-    })
-    animateTo({ duration: 300, curve: Curve.Sharp }, () => {
-      this.scaleValue = 1
-    })
-    Log.info(`${this.TAG} onThumbnailUpdate this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`)
-  }
-
-  private async onThumbnailLoad(data: ThumbnailStruct): Promise<void> {
-    Log.info(`${this.TAG} onThumbnailLoad data: ${JSON.stringify(data)} E`)
-    this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail)
-    this.hasThumbnail = data.thumbnail != undefined
-    if (this.hasThumbnail) {
-      this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid }
-    } else {
-      this.thumbnailBorder = { width: 0 }
-    }
-    this.scaleValue = 1
-    this.tempOpacity = 1
-    Log.info(`${this.TAG} onThumbnailLoad this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`)
-  }
-
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -143,6 +108,40 @@ export struct ThumbnailView {
     .scale({ x: this.scaleValue, y: this.scaleValue })
   }
 
+  private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
+    Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
+    this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail)
+    this.hasThumbnail = data.thumbnail != undefined
+    if (this.hasThumbnail) {
+      this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid }
+    } else {
+      this.thumbnailBorder = { width: 0 }
+    }
+    this.scaleValue = 1.5
+    this.tempOpacity = 0.0
+    animateTo({ duration: 100, curve: Curve.Sharp }, () => {
+      this.tempOpacity = 1
+    })
+    animateTo({ duration: 300, curve: Curve.Sharp }, () => {
+      this.scaleValue = 1
+    })
+    Log.info(`${this.TAG} onThumbnailUpdate this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`)
+  }
+
+  private async onThumbnailLoad(data: ThumbnailStruct): Promise<void> {
+    Log.info(`${this.TAG} onThumbnailLoad data: ${JSON.stringify(data)} E`)
+    this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail)
+    this.hasThumbnail = data.thumbnail != undefined
+    if (this.hasThumbnail) {
+      this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid }
+    } else {
+      this.thumbnailBorder = { width: 0 }
+    }
+    this.scaleValue = 1
+    this.tempOpacity = 1
+    Log.info(`${this.TAG} onThumbnailLoad this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`)
+  }
+
   private buildCameraAbilityWant(parameter: Record<string, string>): Want {
     let res: Want = {
       parameters: parameter,
diff --git a/common/src/main/ets/default/featurecommon/timelapseview/TimeLapseView.ets b/common/src/main/ets/default/featurecommon/timelapseview/TimeLapseView.ets
index d1e3439..fc9c4c5 100644
--- a/common/src/main/ets/default/featurecommon/timelapseview/TimeLapseView.ets
+++ b/common/src/main/ets/default/featurecommon/timelapseview/TimeLapseView.ets
@@ -13,10 +13,9 @@
  * limitations under the License.
  */
 
-import { BusinessError } from "@ohos.base";
+import { BusinessError } from '@ohos.base';
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { SettingManager } from '../../setting/SettingManager';
 import Timer from '../../setting/settingitem/Timer';
@@ -29,8 +28,6 @@ class StateStruct {
 }
 
 class TimeLapseViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -50,6 +47,8 @@ class TimeLapseViewDispatcher {
     this.mDispatch(Action.updateBigVideoTimerVisible(true));
     this.mDispatch(Action.updateScreenStatus(true));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class KeepScreenStruct {
@@ -58,30 +57,14 @@ class KeepScreenStruct {
 
 @Component
 export struct TimeLapseView {
-  private TAG: string = '[TimeLapseView]:'
-  private timer: number = 0
-  private settingManager = SettingManager.getInstance()
   appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   @State state: StateStruct = new StateStruct()
   @State timerLapse: number = 0
+  private TAG: string = '[TimeLapseView]:'
+  private timer: number = 0
+  private settingManager = SettingManager.getInstance()
   private mAction: TimeLapseViewDispatcher = new TimeLapseViewDispatcher();
 
-  private onKeepScreen(data: KeepScreenStruct): void {
-    Log.info(`${this.TAG} onKeepScreen E`)
-    if (data) {
-      GlobalContext.get()
-        .getCameraWinClass()
-        .setKeepScreenOn(data.isKeepScreenOn)
-        .then(() => {
-          Log.info('Succeeded in setting the screen to be always on');
-        })
-        .catch((err: BusinessError) => {
-          Log.error('Failed to set the screen to be always on. Cause: ' + JSON.stringify(err));
-        });
-    }
-    Log.info(`${this.TAG} onKeepScreen X`)
-  }
-
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -144,4 +127,20 @@ export struct TimeLapseView {
         .textAlign(TextAlign.Center)
     }.width('100%').height('100%')
   }
+
+  private onKeepScreen(data: KeepScreenStruct): void {
+    Log.info(`${this.TAG} onKeepScreen E`)
+    if (data) {
+      GlobalContext.get()
+        .getCameraWinClass()
+        .setKeepScreenOn(data.isKeepScreenOn)
+        .then(() => {
+          Log.info('Succeeded in setting the screen to be always on');
+        })
+        .catch((err: BusinessError) => {
+          Log.error('Failed to set the screen to be always on. Cause: ' + JSON.stringify(err));
+        });
+    }
+    Log.info(`${this.TAG} onKeepScreen X`)
+  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/zoomview/ZoomText.ets b/common/src/main/ets/default/featurecommon/zoomview/ZoomText.ets
index e7adab5..98b6c01 100644
--- a/common/src/main/ets/default/featurecommon/zoomview/ZoomText.ets
+++ b/common/src/main/ets/default/featurecommon/zoomview/ZoomText.ets
@@ -14,25 +14,24 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 
 class StateStruct {
   zoomRatio: number = 1;
 }
 
 class ZoomTextDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct ZoomText {
-  private TAG: string = '[ZoomText]'
   @Link state: StateStruct
+  private TAG: string = '[ZoomText]'
   private mAction: ZoomTextDispatcher = new ZoomTextDispatcher();
 
   aboutToAppear() {
diff --git a/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets b/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets
index 5c7d9a5..9f99530 100644
--- a/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets
+++ b/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets
@@ -13,8 +13,7 @@
  * limitations under the License.
  */
 
-import { Dispatch, OhCombinedState, Unsubscribe } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
@@ -36,8 +35,6 @@ class StateStruct {
 }
 
 class ZoomViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -53,6 +50,8 @@ class ZoomViewDispatcher {
   public updateShowZoomLabelValue(flag: boolean): void {
     this.mDispatch(Action.updateShowZoomLabelValue(flag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ZoomRatioStruct {
@@ -65,10 +64,10 @@ class VideoStateStruct {
 
 @Component
 export struct ZoomView {
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   @State state: StateStruct = new StateStruct();
   @State offsetX: number = 0
   @State triggerRebuildNum: number = 0
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   private mAction: ZoomViewDispatcher = new ZoomViewDispatcher();
   private notTakeVideoExtCanvasWidth: number = 360
   private takingVideoExtCanvasWidth: number = 196
@@ -81,11 +80,11 @@ export struct ZoomView {
   private takingVideoExtCanvasCtx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private foldCanvasCtx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private notTakeVideoExtOffCanvasCtx: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.notTakeVideoExtCanvasWidth, this.canvasHeight, this.canvasSettings)
+    this.notTakeVideoExtCanvasWidth, this.canvasHeight, this.canvasSettings)
   private takingVideoExtOffCanvasCxt: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.takingVideoExtCanvasWidth, this.canvasHeight, this.canvasSettings)
+    this.takingVideoExtCanvasWidth, this.canvasHeight, this.canvasSettings)
   private foldOffCanvasCtx: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.foldCanvasWidth, this.canvasHeight, this.canvasSettings)
+    this.foldCanvasWidth, this.canvasHeight, this.canvasSettings)
   private lpgTimer: number = 0
   private pgTimer: number = 0
   private lpgExp: boolean = false
@@ -120,12 +119,245 @@ export struct ZoomView {
     this.appEventBus.off(Action.ACTION_UPDATE_VIDEO_STATE, (data: VideoStateStruct) => this.updateZoomState(data))
   }
 
+  build() {
+    Stack({ alignContent: Alignment.Top }) {
+      Stack({ alignContent: Alignment.Top })
+        .width(this.offsetX + this.touchedOffsetX + this.state.zoomRatio)
+        .height(this.triggerRebuildNum)
+        .visibility(Visibility.None)
+      if (this.getCurrentCanvasType() === SHOW_NOT_TAKE_VIDEO_CANVAS) {
+        Canvas(this.notTakeVideoExtCanvasCtx)
+          .width(this.notTakeVideoExtCanvasWidth)
+          .height(this.canvasHeight)
+          .onReady(() => {
+            this.notTakeVideoExtCanvasCtx.clearRect(0, 0, this.notTakeVideoExtCanvasWidth, this.canvasHeight)
+            this.notTakeVideoExtOffCanvasCtx.clearRect(0, 0, this.notTakeVideoExtCanvasWidth, this.canvasHeight)
+            this.notTakeVideoExtOffCanvasCtx.strokeStyle = '#ffffff'
+            this.notTakeVideoExtOffCanvasCtx.fillStyle = '#ffffff'
+            this.notTakeVideoExtOffCanvasCtx.lineWidth = 1.5
+            this.notTakeVideoExtOffCanvasCtx.beginPath()
+            this.notTakeVideoExtOffCanvasCtx.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2,
+              this.getZoomBtnRadius(), 0, 6.28)
+            this.notTakeVideoExtOffCanvasCtx.stroke()
+            if (this.state.showZoomLabelValue) {
+              this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
+              this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
+              this.notTakeVideoExtOffCanvasCtx.fillText(this.getZoomText(), this.getZoomBtnCenterX(),
+                this.canvasHeight / 2 + 5)
+            } else {
+              this.notTakeVideoExtOffCanvasCtx.beginPath()
+              this.notTakeVideoExtOffCanvasCtx.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2,
+                this.centerDotRadius, 0, 6.28)
+              this.notTakeVideoExtOffCanvasCtx.fill()
+            }
+
+            let spotCount =
+              (this.notTakeVideoExtCanvasWidth - this.getPadding() * 2 - this.mainDotRadius * 4 - this.dotSpacing) /
+                (this.dotSpacing + this.secDotRadius * 2) + 2
+            for (let i = 0; i < spotCount; i++) {
+              let spotCenter = 0
+              let spotRadius = 0
+              if (i === 0) {
+                spotRadius = this.mainDotRadius
+                spotCenter = this.getPadding() + spotRadius
+                this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
+                this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
+                this.notTakeVideoExtOffCanvasCtx.fillText(`${this.state.minZoomRatio}x`, spotCenter,
+                  this.canvasHeight / 2 - (!this.state.showZoomLabelValue ? 26 : 24))
+              } else if (i === spotCount - 1) {
+                spotRadius = this.mainDotRadius
+                spotCenter = this.notTakeVideoExtCanvasWidth - this.getPadding() - spotRadius
+                this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
+                this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
+                this.notTakeVideoExtOffCanvasCtx.fillText(`${this.state.maxZoomRatio}x`, spotCenter,
+                  this.canvasHeight / 2 - (!this.state.showZoomLabelValue ? 26 : 24))
+              } else {
+                spotRadius = this.secDotRadius
+                spotCenter =
+                  this.getPadding() + this.mainDotRadius + (2 * i - 1) * this.secDotRadius + i * this.dotSpacing
+                this.notTakeVideoExtOffCanvasCtx.globalAlpha = 0.2
+              }
+              if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() ||
+                spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) {
+                this.notTakeVideoExtOffCanvasCtx.beginPath()
+                this.notTakeVideoExtOffCanvasCtx.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
+                this.notTakeVideoExtOffCanvasCtx.fill()
+              }
+              this.notTakeVideoExtOffCanvasCtx.globalAlpha = 1
+            }
+            this.notTakeVideoExtCanvasCtx.transferFromImageBitmap(this.notTakeVideoExtOffCanvasCtx.transferToImageBitmap())
+          })
+          .gesture(GestureGroup(GestureMode.Parallel,
+            PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+              .onActionStart(() => this.pgOnActionStart())
+              .onActionUpdate((event?: GestureEvent) => {
+                if (event) {
+                  return this.pgOnActionUpdate(event);
+                }
+              })
+              .onActionEnd(() => this.pgOnActionEnd())))
+          .onTouch((event?: TouchEvent) => {
+            if (event) {
+              return this.mOnTouch(event);
+            }
+          })
+      } else if (this.getCurrentCanvasType() === SHOW_TAKING_VIDEO_CANVAS) {
+        Row() {
+          Image($r('app.media.ic_camera_public_focus_ev_bright_subtract'))
+            .width(24)
+            .height(24)
+            .fillColor(Color.White)
+            .onTouch((event?: TouchEvent) => this.subtractTouched(event))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction((event?: GestureEvent) => this.subtractLongOnAction(event))
+                  .onActionEnd(() => this.subtractLongOnActionEnd()),
+              )
+            )
+          Canvas(this.takingVideoExtCanvasCtx)
+            .width(this.takingVideoExtCanvasWidth)
+            .height(this.canvasHeight)
+            .onReady(() => {
+              this.takingVideoExtCanvasCtx.clearRect(0, 0, this.takingVideoExtCanvasWidth, this.canvasHeight)
+              this.takingVideoExtOffCanvasCxt.clearRect(0, 0, this.takingVideoExtCanvasWidth, this.canvasHeight)
+              this.takingVideoExtOffCanvasCxt.strokeStyle = '#ffffff'
+              this.takingVideoExtOffCanvasCxt.fillStyle = '#ffffff'
+              this.takingVideoExtOffCanvasCxt.lineWidth = 1.5
+              this.takingVideoExtOffCanvasCxt.beginPath()
+              this.takingVideoExtOffCanvasCxt.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2,
+                this.getZoomBtnRadius(), 0, 6.28)
+              this.takingVideoExtOffCanvasCxt.stroke()
+              if (this.state.isShowZoomText) {
+                this.takingVideoExtOffCanvasCxt.beginPath()
+                this.takingVideoExtOffCanvasCxt.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2,
+                  this.centerDotRadius, 0, 6.28)
+                this.takingVideoExtOffCanvasCxt.fill()
+              } else {
+                this.takingVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
+                this.takingVideoExtOffCanvasCxt.textAlign = 'center'
+                this.takingVideoExtOffCanvasCxt.fillText(this.getZoomText(), this.getZoomBtnCenterX(),
+                  this.canvasHeight / 2 + 5)
+              }
+
+              let spotCount = 30
+              for (let i = 0; i < spotCount; i++) {
+                let spotCenter = 0
+                let spotRadius = 0
+                spotRadius = this.secDotRadius
+                spotCenter = this.getPadding() + (2 * i + 1) * this.secDotRadius + i * this.dotSpacing
+                this.takingVideoExtOffCanvasCxt.globalAlpha = 0.2
+                if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() ||
+                  spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) {
+                  this.takingVideoExtOffCanvasCxt.beginPath()
+                  this.takingVideoExtOffCanvasCxt.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
+                  this.takingVideoExtOffCanvasCxt.fill()
+                }
+                this.takingVideoExtOffCanvasCxt.globalAlpha = 1
+              }
+
+              this.takingVideoExtCanvasCtx.transferFromImageBitmap(this.takingVideoExtOffCanvasCxt.transferToImageBitmap())
+            })
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction((event?: GestureEvent) => this.takingVideoExtLongPgAction(event))
+                  .onActionEnd(() => this.takingVideoExtLongPgActionEnd()),
+                PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+                  .onActionStart((event?: GestureEvent) => this.takingVideoExtPgActionStart(event))
+                  .onActionUpdate((event?: GestureEvent) => this.takingVideoExtPgActionUpdate(event))
+                  .onActionEnd((event?: GestureEvent) => this.takingVideoExtPgActionEnd(event))
+              ))
+            .onTouch((event?: TouchEvent) => this.takingVideoExtTouched(event))
+          Image($r('app.media.ic_camera_public_focus_ev_bright_add'))
+            .width(24)
+            .height(24)
+            .fillColor(Color.White)
+            .onTouch((event?: TouchEvent) => this.addTouched(event))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction(() => this.addLongOnAction())
+                  .onActionEnd(() => this.addLongOnActionEnd()),
+              )
+            )
+        }.width(this.notTakeVideoExtCanvasWidth).height('100%').padding({ left: 58, right: 58 })
+      } else {
+        Canvas(this.foldCanvasCtx)
+          .width(this.foldCanvasWidth)
+          .height(this.canvasHeight)
+          .onReady(() => {
+            this.foldCanvasCtx.clearRect(0, 0, this.foldCanvasWidth, this.canvasHeight)
+            this.foldOffCanvasCtx.clearRect(0, 0, this.foldCanvasWidth, this.canvasHeight)
+            this.foldOffCanvasCtx.strokeStyle = '#ffffff'
+            this.foldOffCanvasCtx.fillStyle = '#ffffff'
+            this.foldOffCanvasCtx.lineWidth = 1.5
+            this.foldOffCanvasCtx.beginPath()
+            this.foldOffCanvasCtx.arc(this.foldCanvasWidth / 2, this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28)
+            this.foldOffCanvasCtx.stroke()
+            this.foldOffCanvasCtx.font = `bold ${vp2px(10)}px`
+            this.foldOffCanvasCtx.textAlign = 'center'
+            this.foldOffCanvasCtx.fillText(this.getZoomText(), this.foldCanvasWidth / 2, this.canvasHeight / 2 + 3)
+
+            let fullWidth = this.foldCanvasWidth / 2 - this.mainDotRadius
+            let spotCount =
+              (fullWidth - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
+            let spotOffset = this.state.zoomRatio === this.state.maxZoomRatio ? this.foldCanvasWidth / 2 - fullWidth
+              : this.foldCanvasWidth / 2
+            for (let i = 0; i < spotCount; i++) {
+              let spotCenter = 0
+              let spotRadius = 0
+              if (i === 0) {
+                spotRadius = this.mainDotRadius
+                spotCenter = spotOffset + spotRadius
+              } else if (i === spotCount - 1) {
+                spotRadius = this.mainDotRadius
+                spotCenter =
+                  spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius -
+                  this.secDotRadius + spotRadius
+              } else {
+                spotRadius = this.secDotRadius
+                spotCenter =
+                  spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius +
+                    spotRadius
+                this.foldOffCanvasCtx.globalAlpha = 0.2
+              }
+              if (spotCenter < this.foldCanvasWidth / 2 - this.getZoomBtnRadius() ||
+                spotCenter > this.foldCanvasWidth / 2 + this.getZoomBtnRadius()) {
+                this.foldOffCanvasCtx.beginPath()
+                this.foldOffCanvasCtx.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
+                this.foldOffCanvasCtx.fill()
+              }
+              this.foldOffCanvasCtx.globalAlpha = 1.0
+            }
+
+            this.foldCanvasCtx.transferFromImageBitmap(this.foldOffCanvasCtx.transferToImageBitmap())
+          })
+          .gesture(
+            GestureGroup(
+              GestureMode.Parallel,
+              LongPressGesture({ repeat: true })
+                .onAction(() => this.lpgOnAction())
+                .onActionEnd(() => this.lpgOnActionEnd()),
+              PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+                .onActionStart(() => this.pgOnActionStart())
+                .onActionUpdate((event?: GestureEvent) => this.pgOnActionUpdate(event))
+                .onActionEnd(() => this.pgOnActionEnd())
+            )
+          )
+      }
+    }.width('100%').height(this.canvasHeight).margin({ bottom: !this.state.showZoomLabelValue ? 58 : 0 })
+  }
+
   private getCurrentCanvasType(): number {
     if (this.state.isShowZoomText && (this.state.videoState === 'beforeTakeVideo'
-    && (this.state.mode === 'PHOTO' || this.state.mode === 'VIDEO'))) {
+      && (this.state.mode === 'PHOTO' || this.state.mode === 'VIDEO'))) {
       return SHOW_NOT_TAKE_VIDEO_CANVAS
     } else if (this.state.mode === 'VIDEO'
-    && (this.state.isShowZoomText || this.state.videoState !== 'beforeTakeVideo')) {
+      && (this.state.isShowZoomText || this.state.videoState !== 'beforeTakeVideo')) {
       return SHOW_TAKING_VIDEO_CANVAS
     } else {
       return SHOW_FOLD_CANVAS
@@ -409,7 +641,8 @@ export struct ZoomView {
   private updateZoomRatio(): void {
     let padding = this.getPadding()
     let fullWidth = this.notTakeVideoExtCanvasWidth - padding * 2 - this.mainDotRadius * 2
-    let curZoomRatio = (this.offsetX / fullWidth) * (this.state.maxZoomRatio - this.state.minZoomRatio) + this.state.minZoomRatio
+    let curZoomRatio =
+      (this.offsetX / fullWidth) * (this.state.maxZoomRatio - this.state.minZoomRatio) + this.state.minZoomRatio
     if (curZoomRatio > this.state.maxZoomRatio) {
       curZoomRatio = this.state.maxZoomRatio
     }
@@ -440,218 +673,4 @@ export struct ZoomView {
       return 15.25
     }
   }
-
-  build() {
-    Stack({ alignContent: Alignment.Top }) {
-      Stack({ alignContent: Alignment.Top })
-        .width(this.offsetX + this.touchedOffsetX + this.state.zoomRatio)
-        .height(this.triggerRebuildNum)
-        .visibility(Visibility.None)
-      if (this.getCurrentCanvasType() === SHOW_NOT_TAKE_VIDEO_CANVAS) {
-        Canvas(this.notTakeVideoExtCanvasCtx)
-          .width(this.notTakeVideoExtCanvasWidth)
-          .height(this.canvasHeight)
-          .onReady(() => {
-            this.notTakeVideoExtCanvasCtx.clearRect(0, 0, this.notTakeVideoExtCanvasWidth, this.canvasHeight)
-            this.notTakeVideoExtOffCanvasCtx.clearRect(0, 0, this.notTakeVideoExtCanvasWidth, this.canvasHeight)
-            this.notTakeVideoExtOffCanvasCtx.strokeStyle = '#ffffff'
-            this.notTakeVideoExtOffCanvasCtx.fillStyle = '#ffffff'
-            this.notTakeVideoExtOffCanvasCtx.lineWidth = 1.5
-            this.notTakeVideoExtOffCanvasCtx.beginPath()
-            this.notTakeVideoExtOffCanvasCtx.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28)
-            this.notTakeVideoExtOffCanvasCtx.stroke()
-            if (this.state.showZoomLabelValue) {
-              this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
-              this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
-              this.notTakeVideoExtOffCanvasCtx.fillText(this.getZoomText(), this.getZoomBtnCenterX(), this.canvasHeight / 2 + 5)
-            } else {
-              this.notTakeVideoExtOffCanvasCtx.beginPath()
-              this.notTakeVideoExtOffCanvasCtx.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.centerDotRadius, 0, 6.28)
-              this.notTakeVideoExtOffCanvasCtx.fill()
-            }
-
-            let spotCount = (this.notTakeVideoExtCanvasWidth - this.getPadding() * 2 - this.mainDotRadius * 4 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
-            for (let i = 0; i < spotCount; i++) {
-              let spotCenter = 0
-              let spotRadius = 0
-              if (i === 0) {
-                spotRadius = this.mainDotRadius
-                spotCenter = this.getPadding() + spotRadius
-                this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
-                this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
-                this.notTakeVideoExtOffCanvasCtx.fillText(`${this.state.minZoomRatio}x`, spotCenter, this.canvasHeight / 2 - (!this.state.showZoomLabelValue ? 26 : 24))
-              } else if (i === spotCount - 1) {
-                spotRadius = this.mainDotRadius
-                spotCenter = this.notTakeVideoExtCanvasWidth - this.getPadding() - spotRadius
-                this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
-                this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
-                this.notTakeVideoExtOffCanvasCtx.fillText(`${this.state.maxZoomRatio}x`, spotCenter, this.canvasHeight / 2 - (!this.state.showZoomLabelValue ? 26 : 24))
-              } else {
-                spotRadius = this.secDotRadius
-                spotCenter = this.getPadding() + this.mainDotRadius + (2 * i - 1) * this.secDotRadius + i * this.dotSpacing
-                this.notTakeVideoExtOffCanvasCtx.globalAlpha = 0.2
-              }
-              if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) {
-                this.notTakeVideoExtOffCanvasCtx.beginPath()
-                this.notTakeVideoExtOffCanvasCtx.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
-                this.notTakeVideoExtOffCanvasCtx.fill()
-              }
-              this.notTakeVideoExtOffCanvasCtx.globalAlpha = 1
-            }
-            this.notTakeVideoExtCanvasCtx.transferFromImageBitmap(this.notTakeVideoExtOffCanvasCtx.transferToImageBitmap())
-          })
-          .gesture(GestureGroup(GestureMode.Parallel,
-          PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-            .onActionStart(() => this.pgOnActionStart())
-            .onActionUpdate((event?: GestureEvent) => {
-              if (event) {
-                return this.pgOnActionUpdate(event);
-              }
-            })
-            .onActionEnd(() => this.pgOnActionEnd())))
-          .onTouch((event?: TouchEvent) => {
-            if (event) {
-              return this.mOnTouch(event);
-            }
-          })
-      } else if (this.getCurrentCanvasType() === SHOW_TAKING_VIDEO_CANVAS) {
-        Row() {
-          Image($r('app.media.ic_camera_public_focus_ev_bright_subtract'))
-            .width(24)
-            .height(24)
-            .fillColor(Color.White)
-            .onTouch((event?: TouchEvent) => this.subtractTouched(event))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction((event?: GestureEvent) => this.subtractLongOnAction(event))
-              .onActionEnd(() => this.subtractLongOnActionEnd()),
-            )
-            )
-          Canvas(this.takingVideoExtCanvasCtx)
-            .width(this.takingVideoExtCanvasWidth)
-            .height(this.canvasHeight)
-            .onReady(() => {
-              this.takingVideoExtCanvasCtx.clearRect(0, 0, this.takingVideoExtCanvasWidth, this.canvasHeight)
-              this.takingVideoExtOffCanvasCxt.clearRect(0, 0, this.takingVideoExtCanvasWidth, this.canvasHeight)
-              this.takingVideoExtOffCanvasCxt.strokeStyle = '#ffffff'
-              this.takingVideoExtOffCanvasCxt.fillStyle = '#ffffff'
-              this.takingVideoExtOffCanvasCxt.lineWidth = 1.5
-              this.takingVideoExtOffCanvasCxt.beginPath()
-              this.takingVideoExtOffCanvasCxt.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28)
-              this.takingVideoExtOffCanvasCxt.stroke()
-              if (this.state.isShowZoomText) {
-                this.takingVideoExtOffCanvasCxt.beginPath()
-                this.takingVideoExtOffCanvasCxt.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.centerDotRadius, 0, 6.28)
-                this.takingVideoExtOffCanvasCxt.fill()
-              } else {
-                this.takingVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
-                this.takingVideoExtOffCanvasCxt.textAlign = 'center'
-                this.takingVideoExtOffCanvasCxt.fillText(this.getZoomText(), this.getZoomBtnCenterX(), this.canvasHeight / 2 + 5)
-              }
-
-              let spotCount = 30
-              for (let i = 0; i < spotCount; i++) {
-                let spotCenter = 0
-                let spotRadius = 0
-                spotRadius = this.secDotRadius
-                spotCenter = this.getPadding() + (2 * i + 1) * this.secDotRadius + i * this.dotSpacing
-                this.takingVideoExtOffCanvasCxt.globalAlpha = 0.2
-                if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) {
-                  this.takingVideoExtOffCanvasCxt.beginPath()
-                  this.takingVideoExtOffCanvasCxt.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
-                  this.takingVideoExtOffCanvasCxt.fill()
-                }
-                this.takingVideoExtOffCanvasCxt.globalAlpha = 1
-              }
-
-              this.takingVideoExtCanvasCtx.transferFromImageBitmap(this.takingVideoExtOffCanvasCxt.transferToImageBitmap())
-            })
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction((event?: GestureEvent) => this.takingVideoExtLongPgAction(event))
-              .onActionEnd(() => this.takingVideoExtLongPgActionEnd()),
-            PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-              .onActionStart((event?: GestureEvent) => this.takingVideoExtPgActionStart(event))
-              .onActionUpdate((event?: GestureEvent) => this.takingVideoExtPgActionUpdate(event))
-              .onActionEnd((event?: GestureEvent) => this.takingVideoExtPgActionEnd(event))
-            ))
-            .onTouch((event?: TouchEvent) => this.takingVideoExtTouched(event))
-          Image($r('app.media.ic_camera_public_focus_ev_bright_add'))
-            .width(24)
-            .height(24)
-            .fillColor(Color.White)
-            .onTouch((event?: TouchEvent) => this.addTouched(event))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction(() => this.addLongOnAction())
-              .onActionEnd(() => this.addLongOnActionEnd()),
-            )
-            )
-        }.width(this.notTakeVideoExtCanvasWidth).height('100%').padding({ left: 58, right: 58 })
-      } else {
-        Canvas(this.foldCanvasCtx)
-          .width(this.foldCanvasWidth)
-          .height(this.canvasHeight)
-          .onReady(() => {
-            this.foldCanvasCtx.clearRect(0, 0, this.foldCanvasWidth, this.canvasHeight)
-            this.foldOffCanvasCtx.clearRect(0, 0, this.foldCanvasWidth, this.canvasHeight)
-            this.foldOffCanvasCtx.strokeStyle = '#ffffff'
-            this.foldOffCanvasCtx.fillStyle = '#ffffff'
-            this.foldOffCanvasCtx.lineWidth = 1.5
-            this.foldOffCanvasCtx.beginPath()
-            this.foldOffCanvasCtx.arc(this.foldCanvasWidth / 2, this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28)
-            this.foldOffCanvasCtx.stroke()
-            this.foldOffCanvasCtx.font = `bold ${vp2px(10)}px`
-            this.foldOffCanvasCtx.textAlign = 'center'
-            this.foldOffCanvasCtx.fillText(this.getZoomText(), this.foldCanvasWidth / 2, this.canvasHeight / 2 + 3)
-
-            let fullWidth = this.foldCanvasWidth / 2 - this.mainDotRadius
-            let spotCount = (fullWidth - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
-            let spotOffset = this.state.zoomRatio === this.state.maxZoomRatio ? this.foldCanvasWidth / 2 - fullWidth
-                                                                              : this.foldCanvasWidth / 2
-            for (let i = 0; i < spotCount; i++) {
-              let spotCenter = 0
-              let spotRadius = 0
-              if (i === 0) {
-                spotRadius = this.mainDotRadius
-                spotCenter = spotOffset + spotRadius
-              } else if (i === spotCount - 1) {
-                spotRadius = this.mainDotRadius
-                spotCenter = spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius - this.secDotRadius + spotRadius
-              } else {
-                spotRadius = this.secDotRadius
-                spotCenter = spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius + spotRadius
-                this.foldOffCanvasCtx.globalAlpha = 0.2
-              }
-              if (spotCenter < this.foldCanvasWidth / 2 - this.getZoomBtnRadius() || spotCenter > this.foldCanvasWidth / 2 + this.getZoomBtnRadius()) {
-                this.foldOffCanvasCtx.beginPath()
-                this.foldOffCanvasCtx.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
-                this.foldOffCanvasCtx.fill()
-              }
-              this.foldOffCanvasCtx.globalAlpha = 1.0
-            }
-
-            this.foldCanvasCtx.transferFromImageBitmap(this.foldOffCanvasCtx.transferToImageBitmap())
-          })
-          .gesture(
-          GestureGroup(
-          GestureMode.Parallel,
-          LongPressGesture({ repeat: true })
-            .onAction(() => this.lpgOnAction())
-            .onActionEnd(() => this.lpgOnActionEnd()),
-          PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-            .onActionStart(() => this.pgOnActionStart())
-            .onActionUpdate((event?: GestureEvent) => this.pgOnActionUpdate(event))
-            .onActionEnd(() => this.pgOnActionEnd())
-          )
-          )
-      }
-    }.width('100%').height(this.canvasHeight).margin({ bottom: !this.state.showZoomLabelValue ? 58 : 0 })
-  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featurecommon/zoomview/ZoomViewLand.ets b/common/src/main/ets/default/featurecommon/zoomview/ZoomViewLand.ets
index faf7f45..6d44f66 100644
--- a/common/src/main/ets/default/featurecommon/zoomview/ZoomViewLand.ets
+++ b/common/src/main/ets/default/featurecommon/zoomview/ZoomViewLand.ets
@@ -13,8 +13,7 @@
  * limitations under the License.
  */
 
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
@@ -37,8 +36,6 @@ class StateStruct {
 
 
 class ZoomViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -54,6 +51,8 @@ class ZoomViewDispatcher {
   public updateShowZoomLabelValue(flag: boolean): void {
     this.mDispatch(Action.updateShowZoomLabelValue(flag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ZoomRatioStruct {
@@ -66,9 +65,6 @@ class VideoStateStruct {
 
 @Component
 export struct ZoomViewLand {
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
-  private mAction: ZoomViewDispatcher = new ZoomViewDispatcher();
-
   @State state: StateStruct = new StateStruct()
   @State @Watch('onZoomRatioRefresh') zoomRatio: number = 0
   @State @Watch('onZoomRatioRefresh') showZoomLabelValue: boolean = true
@@ -76,33 +72,30 @@ export struct ZoomViewLand {
   @State @Watch('onZoomRatioRefresh') curZoomRatio: number = 0
   @State offsetY: number = 0
   @State triggerRebuildNum: number = 0
-
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
+  private mAction: ZoomViewDispatcher = new ZoomViewDispatcher();
   private canvasWidth: number = 82
   private notTakeVideoExtCanvasHeight: number = 360
   private takingVideoExtCanvasHeight: number = 196
   private foldCanvasHeight: number = 94
-
   private touchedOffsetY: number = this.takingVideoExtCanvasHeight / 2
   private startOffsetY: number = 0
-
   private canvasSettings: RenderingContextSettings = new RenderingContextSettings(true)
   private notTakeVideoExtCanvasCxt: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private takingVideoExtCanvasCxt: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private foldCanvasCxt: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private notTakeVideoExtOffCanvasCxt: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.canvasWidth, this.notTakeVideoExtCanvasHeight, this.canvasSettings)
+    this.canvasWidth, this.notTakeVideoExtCanvasHeight, this.canvasSettings)
   private takingVideoExtOffCanvasCxt: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.canvasWidth, this.notTakeVideoExtCanvasHeight, this.canvasSettings)
+    this.canvasWidth, this.notTakeVideoExtCanvasHeight, this.canvasSettings)
   private foldOffCanvasCxt: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.canvasWidth, this.foldCanvasHeight, this.canvasSettings)
-
+    this.canvasWidth, this.foldCanvasHeight, this.canvasSettings)
   private lpgTimer: number = 0
   private pgTimer: number = 0
   private lpgExp: boolean = false
   private pgExp: boolean = false
   private zoomTimer: number = 0
   private baseZoomRatio: number = 1
-
   private mainDotRadius: number = 1.5
   private secDotRadius: number = 0.75
   private centerDotRadius: number = 2.5
@@ -134,12 +127,105 @@ export struct ZoomViewLand {
     this.appEventBus.off(Action.ACTION_UPDATE_VIDEO_STATE, (data: VideoStateStruct) => this.updateZoomState(data))
   }
 
+  build() {
+    Stack({ alignContent: Alignment.Start }) {
+      Stack({ alignContent: Alignment.Top })
+        .width(this.triggerRebuildNum)
+        .height(this.offsetY + this.touchedOffsetY + this.zoomRatio)
+        .visibility(Visibility.None)
+      if (this.getCurrentCanvasType() === SHOW_NOT_TAKE_VIDEO_CANVAS) {
+        Canvas(this.notTakeVideoExtCanvasCxt)
+          .width(this.canvasWidth)
+          .height(this.notTakeVideoExtCanvasHeight)
+          .onReady(() => this.canvasInit(SHOW_NOT_TAKE_VIDEO_CANVAS))
+          .gesture(
+            GestureGroup(
+              GestureMode.Parallel,
+              PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Vertical })
+                .onActionStart(() => this.pgOnActionStart())
+                .onActionUpdate((event?: GestureEvent) => {
+                  if (event) {
+                    return this.pgOnActionUpdate(event);
+                  }
+                })
+                .onActionEnd(() => this.pgOnActionEnd())))
+          .onTouch((event?: TouchEvent) => {
+            if (event) {
+              return this.mOnTouch(event);
+            }
+          })
+      } else if (this.getCurrentCanvasType() === SHOW_TAKING_VIDEO_CANVAS) {
+        Column() {
+          Image($r('app.media.ic_camera_public_focus_ev_bright_add'))
+            .width(24)
+            .height(24)
+            .fillColor(Color.White)
+            .onTouch((event?: TouchEvent) => this.addTouched(event))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction(() => this.addLongOnAction())
+                  .onActionEnd(() => this.addLongOnActionEnd()),
+              )
+            )
+          Canvas(this.takingVideoExtCanvasCxt)
+            .width(this.canvasWidth)
+            .height(this.takingVideoExtCanvasHeight)
+            .onReady(() => this.canvasInit(SHOW_TAKING_VIDEO_CANVAS))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction((event?: GestureEvent) => this.takingVideoExtLongPgAction(event))
+                  .onActionEnd(() => this.takingVideoExtLongPgActionEnd()),
+                PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+                  .onActionStart((event?: GestureEvent) => this.takingVideoExtPgActionStart(event))
+                  .onActionUpdate((event?: GestureEvent) => this.takingVideoExtPgActionUpdate(event))
+                  .onActionEnd((event?: GestureEvent) => this.takingVideoExtPgActionEnd(event))
+              ))
+            .onTouch((event?: TouchEvent) => this.takingVideoExtTouched(event))
+          Image($r('app.media.ic_camera_public_focus_ev_bright_subtract'))
+            .width(24)
+            .height(24)
+            .fillColor(Color.White)
+            .onTouch((event?: TouchEvent) => this.subtractTouched(event))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction((event?: GestureEvent) => this.subtractLongOnAction(event))
+                  .onActionEnd(() => this.subtractLongOnActionEnd()),
+              )
+            )
+        }.width('100%').height(this.notTakeVideoExtCanvasHeight).padding({ top: 58, bottom: 58 })
+      } else {
+        Canvas(this.foldCanvasCxt)
+          .width(this.canvasWidth)
+          .height(this.foldCanvasHeight)
+          .onReady(() => this.canvasInit(SHOW_FOLD_CANVAS))
+          .gesture(
+            GestureGroup(
+              GestureMode.Parallel,
+              LongPressGesture({ repeat: true })
+                .onAction(() => this.lpgOnAction())
+                .onActionEnd(() => this.lpgOnActionEnd()),
+              PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+                .onActionStart(() => this.pgOnActionStart())
+                .onActionUpdate((event?: GestureEvent) => this.pgOnActionUpdate(event))
+                .onActionEnd(() => this.pgOnActionEnd())
+            )
+          )
+      }
+    }.width(82).height('100%')
+  }
+
   private getCurrentCanvasType(): number {
     if (this.isShowZoomText && (this.state.videoState === 'beforeTakeVideo'
-    && (this.state.mode === 'PHOTO' || this.state.mode === 'VIDEO'))) {
+      && (this.state.mode === 'PHOTO' || this.state.mode === 'VIDEO'))) {
       return SHOW_NOT_TAKE_VIDEO_CANVAS
     } else if (this.state.mode === 'VIDEO'
-    && (this.isShowZoomText || this.state.videoState !== 'beforeTakeVideo')) {
+      && (this.isShowZoomText || this.state.videoState !== 'beforeTakeVideo')) {
       return SHOW_TAKING_VIDEO_CANVAS
     } else {
       return SHOW_FOLD_CANVAS
@@ -200,7 +286,6 @@ export struct ZoomViewLand {
     this.changeZoomRatioOnTakingVideoExt()
   }
 
-
   private takingVideoExtLongPgActionEnd(): void {
     this.touchedOffsetY = this.takingVideoExtCanvasHeight / 2
     this.changeZoomRatioOnTakingVideoExt()
@@ -392,7 +477,6 @@ export struct ZoomViewLand {
     return fullHeight / (this.state.maxZoomRatio - this.state.minZoomRatio)
   }
 
-
   private updateZoomOffset(data: ZoomRatioStruct): void {
     let offset = (data.zoomRatio - this.state.minZoomRatio) * this.getZoomOffsetUnit();
     this.offsetY = offset;
@@ -418,7 +502,8 @@ export struct ZoomViewLand {
   private updateZoomRatio(): void {
     let padding = this.getPadding()
     let fullHeight = this.notTakeVideoExtCanvasHeight - padding * 2 - this.mainDotRadius * 2
-    this.curZoomRatio = (this.offsetY / fullHeight) * (this.state.maxZoomRatio - this.state.minZoomRatio) + this.state.minZoomRatio
+    this.curZoomRatio =
+      (this.offsetY / fullHeight) * (this.state.maxZoomRatio - this.state.minZoomRatio) + this.state.minZoomRatio
     if (this.curZoomRatio > this.state.maxZoomRatio) {
       this.curZoomRatio = this.state.maxZoomRatio
     }
@@ -481,7 +566,8 @@ export struct ZoomViewLand {
     this.notTakeVideoExtOffCanvasCxt.fillStyle = '#ffffff'
     this.notTakeVideoExtOffCanvasCxt.lineWidth = 1.5
     this.notTakeVideoExtOffCanvasCxt.beginPath()
-    this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.getZoomBtnRadius(), 0, 6.28)
+    this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.getZoomBtnRadius(), 0,
+      6.28)
     this.notTakeVideoExtOffCanvasCxt.stroke()
     if (this.showZoomLabelValue) {
       this.notTakeVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
@@ -489,11 +575,14 @@ export struct ZoomViewLand {
       this.notTakeVideoExtOffCanvasCxt.fillText(this.getZoomText(), this.canvasWidth / 2, this.getZoomBtnCenterY() + 5)
     } else {
       this.notTakeVideoExtOffCanvasCxt.beginPath()
-      this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.centerDotRadius, 0, 6.28)
+      this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.centerDotRadius, 0,
+        6.28)
       this.notTakeVideoExtOffCanvasCxt.fill()
     }
 
-    let spotCount = (this.notTakeVideoExtCanvasHeight - this.getPadding() * 2 - this.mainDotRadius * 4 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
+    let spotCount =
+      (this.notTakeVideoExtCanvasHeight - this.getPadding() * 2 - this.mainDotRadius * 4 - this.dotSpacing) /
+        (this.dotSpacing + this.secDotRadius * 2) + 2
     for (let i = 0; i < spotCount; i++) {
       let spotCenter = 0
       let spotRadius = 0
@@ -502,19 +591,23 @@ export struct ZoomViewLand {
         spotCenter = this.notTakeVideoExtCanvasHeight - this.getPadding() - spotRadius
         this.notTakeVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
         this.notTakeVideoExtOffCanvasCxt.textAlign = 'right'
-        this.notTakeVideoExtOffCanvasCxt.fillText(`${this.state.minZoomRatio}x`,this.canvasWidth / 2 - (!this.showZoomLabelValue ? 26: 24), spotCenter)
+        this.notTakeVideoExtOffCanvasCxt.fillText(`${this.state.minZoomRatio}x`,
+          this.canvasWidth / 2 - (!this.showZoomLabelValue ? 26 : 24), spotCenter)
       } else if (i === spotCount - 1) {
         spotRadius = this.mainDotRadius
         spotCenter = this.getPadding() + spotRadius
         this.notTakeVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
         this.notTakeVideoExtOffCanvasCxt.textAlign = 'right'
-        this.notTakeVideoExtOffCanvasCxt.fillText(`${this.state.maxZoomRatio}x`,this.canvasWidth / 2 - (!this.showZoomLabelValue ? 26: 24), spotCenter)
+        this.notTakeVideoExtOffCanvasCxt.fillText(`${this.state.maxZoomRatio}x`,
+          this.canvasWidth / 2 - (!this.showZoomLabelValue ? 26 : 24), spotCenter)
       } else {
         spotRadius = this.secDotRadius
-        spotCenter = this.notTakeVideoExtCanvasHeight - this.getPadding() - this.mainDotRadius * 2 - (2 * i - 1) * this.secDotRadius - i * this.dotSpacing
+        spotCenter = this.notTakeVideoExtCanvasHeight - this.getPadding() - this.mainDotRadius * 2 -
+          (2 * i - 1) * this.secDotRadius - i * this.dotSpacing
         this.notTakeVideoExtOffCanvasCxt.globalAlpha = 0.2
       }
-      if (spotCenter < this.getZoomBtnCenterY() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterY() + this.getZoomBtnRadius()) {
+      if (spotCenter < this.getZoomBtnCenterY() - this.getZoomBtnRadius() ||
+        spotCenter > this.getZoomBtnCenterY() + this.getZoomBtnRadius()) {
         this.notTakeVideoExtOffCanvasCxt.beginPath()
         this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, spotCenter, spotRadius, 0, 6.28)
         this.notTakeVideoExtOffCanvasCxt.fill()
@@ -531,7 +624,8 @@ export struct ZoomViewLand {
     this.takingVideoExtOffCanvasCxt.fillStyle = '#ffffff'
     this.takingVideoExtOffCanvasCxt.lineWidth = 1.5
     this.takingVideoExtOffCanvasCxt.beginPath()
-    this.takingVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.getZoomBtnRadius(), 0, 6.28)
+    this.takingVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.getZoomBtnRadius(), 0,
+      6.28)
     this.takingVideoExtOffCanvasCxt.stroke()
     if (this.isShowZoomText) {
       this.takingVideoExtOffCanvasCxt.beginPath()
@@ -550,7 +644,8 @@ export struct ZoomViewLand {
       spotRadius = this.secDotRadius
       spotCenter = this.getPadding() + (2 * i + 1) * this.secDotRadius + i * this.dotSpacing
       this.takingVideoExtOffCanvasCxt.globalAlpha = 0.2
-      if (spotCenter < this.getZoomBtnCenterY() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterY() + this.getZoomBtnRadius()) {
+      if (spotCenter < this.getZoomBtnCenterY() - this.getZoomBtnRadius() ||
+        spotCenter > this.getZoomBtnCenterY() + this.getZoomBtnRadius()) {
         this.takingVideoExtOffCanvasCxt.beginPath()
         this.takingVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, spotCenter, spotRadius, 0, 6.28)
         this.takingVideoExtOffCanvasCxt.fill()
@@ -576,9 +671,10 @@ export struct ZoomViewLand {
     this.foldOffCanvasCxt.fillText(this.getZoomText(), this.canvasWidth / 2, this.foldCanvasHeight / 2 + 3)
 
     let fullHeight = this.foldCanvasHeight / 2 - this.mainDotRadius
-    let spotCount = (fullHeight - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
+    let spotCount =
+      (fullHeight - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
     let spotOffset = (this.zoomRatio === this.state.maxZoomRatio) ? this.foldCanvasHeight / 2 + fullHeight
-                                                                  : this.foldCanvasHeight / 2
+      : this.foldCanvasHeight / 2
     for (let i = 0; i < spotCount; i++) {
       let spotCenter = 0
       let spotRadius = 0
@@ -587,13 +683,16 @@ export struct ZoomViewLand {
         spotCenter = spotOffset - spotRadius
       } else if (i === spotCount - 1) {
         spotRadius = this.mainDotRadius
-        spotCenter = spotOffset - this.mainDotRadius * 2 - (i - 1) * this.dotSpacing - (2 * i - 1) * this.secDotRadius + this.secDotRadius - spotRadius
+        spotCenter = spotOffset - this.mainDotRadius * 2 - (i - 1) * this.dotSpacing - (2 * i - 1) * this.secDotRadius +
+        this.secDotRadius - spotRadius
       } else {
         spotRadius = this.secDotRadius
-        spotCenter = spotOffset - this.mainDotRadius * 2 - (i - 1) * this.dotSpacing - (2 * i - 1) * this.secDotRadius - spotRadius
+        spotCenter =
+          spotOffset - this.mainDotRadius * 2 - (i - 1) * this.dotSpacing - (2 * i - 1) * this.secDotRadius - spotRadius
         this.foldOffCanvasCxt.globalAlpha = 0.2
       }
-      if (spotCenter > this.foldCanvasHeight / 2 + this.getZoomBtnRadius() || spotCenter < this.foldCanvasHeight / 2 - this.getZoomBtnRadius()) {
+      if (spotCenter > this.foldCanvasHeight / 2 + this.getZoomBtnRadius() ||
+        spotCenter < this.foldCanvasHeight / 2 - this.getZoomBtnRadius()) {
         this.foldOffCanvasCxt.beginPath()
         this.foldOffCanvasCxt.arc(this.canvasWidth / 2, spotCenter, spotRadius, 0, 6.28)
         this.foldOffCanvasCxt.fill()
@@ -602,94 +701,4 @@ export struct ZoomViewLand {
     }
     this.foldCanvasCxt.transferFromImageBitmap(this.foldOffCanvasCxt.transferToImageBitmap())
   }
-
-  build() {
-    Stack({ alignContent: Alignment.Start}) {
-      Stack({ alignContent: Alignment.Top }).width(this.triggerRebuildNum).height(this.offsetY + this.touchedOffsetY + this.zoomRatio).visibility(Visibility.None)
-      if (this.getCurrentCanvasType() === SHOW_NOT_TAKE_VIDEO_CANVAS) {
-        Canvas(this.notTakeVideoExtCanvasCxt)
-          .width(this.canvasWidth)
-          .height(this.notTakeVideoExtCanvasHeight)
-          .onReady(() => this.canvasInit(SHOW_NOT_TAKE_VIDEO_CANVAS))
-          .gesture(
-          GestureGroup(
-          GestureMode.Parallel,
-          PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Vertical})
-            .onActionStart(() => this.pgOnActionStart())
-            .onActionUpdate((event?: GestureEvent) => {
-              if (event) {
-                return this.pgOnActionUpdate(event);
-              }
-            })
-            .onActionEnd(() => this.pgOnActionEnd())))
-          .onTouch((event?: TouchEvent) => {
-            if (event) {
-              return this.mOnTouch(event);
-            }
-          })
-      } else if (this.getCurrentCanvasType() === SHOW_TAKING_VIDEO_CANVAS) {
-        Column() {
-          Image($r('app.media.ic_camera_public_focus_ev_bright_add'))
-            .width(24)
-            .height(24)
-            .fillColor(Color.White)
-            .onTouch((event?: TouchEvent) => this.addTouched(event))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction(() => this.addLongOnAction())
-              .onActionEnd(() => this.addLongOnActionEnd()),
-            )
-            )
-          Canvas(this.takingVideoExtCanvasCxt)
-            .width(this.canvasWidth)
-            .height(this.takingVideoExtCanvasHeight)
-            .onReady(() => this.canvasInit(SHOW_TAKING_VIDEO_CANVAS))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction((event?: GestureEvent) => this.takingVideoExtLongPgAction(event))
-              .onActionEnd(() => this.takingVideoExtLongPgActionEnd()),
-            PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-              .onActionStart((event?: GestureEvent) => this.takingVideoExtPgActionStart(event))
-              .onActionUpdate((event?: GestureEvent) => this.takingVideoExtPgActionUpdate(event))
-              .onActionEnd((event?: GestureEvent) => this.takingVideoExtPgActionEnd(event))
-            ))
-            .onTouch((event?: TouchEvent) => this.takingVideoExtTouched(event))
-          Image($r('app.media.ic_camera_public_focus_ev_bright_subtract'))
-            .width(24)
-            .height(24)
-            .fillColor(Color.White)
-            .onTouch((event?: TouchEvent) => this.subtractTouched(event))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction((event?: GestureEvent) => this.subtractLongOnAction(event))
-              .onActionEnd(() => this.subtractLongOnActionEnd()),
-            )
-            )
-        }.width('100%').height(this.notTakeVideoExtCanvasHeight).padding({ top: 58, bottom: 58 })
-      } else {
-        Canvas(this.foldCanvasCxt)
-          .width(this.canvasWidth)
-          .height(this.foldCanvasHeight)
-          .onReady(() => this.canvasInit(SHOW_FOLD_CANVAS))
-          .gesture(
-          GestureGroup(
-          GestureMode.Parallel,
-          LongPressGesture({ repeat: true })
-            .onAction(() => this.lpgOnAction())
-            .onActionEnd(() => this.lpgOnActionEnd()),
-          PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-            .onActionStart(() => this.pgOnActionStart())
-            .onActionUpdate((event?: GestureEvent) => this.pgOnActionUpdate(event))
-            .onActionEnd(() => this.pgOnActionEnd())
-          )
-          )
-      }
-    }.width(82).height('100%')
-  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featureservice/FeatureManager.ts b/common/src/main/ets/default/featureservice/FeatureManager.ts
index 7cfee7d..2cca85c 100644
--- a/common/src/main/ets/default/featureservice/FeatureManager.ts
+++ b/common/src/main/ets/default/featureservice/FeatureManager.ts
@@ -22,7 +22,6 @@ import type { EventBus } from '../worker/eventbus/EventBus';
 import { EventBusManager } from '../worker/eventbus/EventBusManager';
 import { ModeAssembler } from './ModeAssembler';
 import { RecordFunction } from '../function/RecordFunction';
-import { WorkerManager } from '../worker/WorkerManager';
 import { ZoomFunction } from '../function/ZoomFunction';
 import type { IModeMap } from './IModeMap';
 
diff --git a/common/src/main/ets/default/featureservice/FunctionId.ts b/common/src/main/ets/default/featureservice/FunctionId.ts
index aea88de..709826a 100644
--- a/common/src/main/ets/default/featureservice/FunctionId.ts
+++ b/common/src/main/ets/default/featureservice/FunctionId.ts
@@ -14,9 +14,9 @@
  */
 
 export enum FunctionId {
-    NONE,
-    CAMERA_BASIC_FUNCTION,
-    CAPTURE_FUNCTION,
-    RECORDING_FUNCTION,
-    ZOOM_FUNCTION
+  NONE,
+  CAMERA_BASIC_FUNCTION,
+  CAPTURE_FUNCTION,
+  RECORDING_FUNCTION,
+  ZOOM_FUNCTION
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/featureservice/ModeAssembler.ts b/common/src/main/ets/default/featureservice/ModeAssembler.ts
index 405eb14..c80b912 100644
--- a/common/src/main/ets/default/featureservice/ModeAssembler.ts
+++ b/common/src/main/ets/default/featureservice/ModeAssembler.ts
@@ -45,11 +45,11 @@ export class ModeAssembler {
       this.mNeedAdd = JSON.parse(JSON.stringify(currentModeFun))
       for (let fun of preModeFun) {
         let index = currentModeFun.indexOf(fun)
-          if (index == -1) {
-            this.mNeedDelete.push(fun)
-          } else {
-            this.mNeedAdd.splice(index, 1)
-          }
+        if (index == -1) {
+          this.mNeedDelete.push(fun)
+        } else {
+          this.mNeedAdd.splice(index, 1)
+        }
       }
     }
     Log.info(`${this.TAG} assembler mNeedAdd = ${this.mNeedAdd}  mNeedDelete = ${this.mNeedDelete}`)
diff --git a/common/src/main/ets/default/function/BaseFunction.ts b/common/src/main/ets/default/function/BaseFunction.ts
index 834c49b..49fd757 100644
--- a/common/src/main/ets/default/function/BaseFunction.ts
+++ b/common/src/main/ets/default/function/BaseFunction.ts
@@ -25,6 +25,10 @@ export abstract class BaseFunction {
   protected mWorkerManager: WorkerManager = new WorkerManager();
   protected mEventBus: EventBus = EventBusManager.getInstance().getEventBus();
 
+  abstract load(): void
+
+  abstract unload(): void
+
   protected enableUi(): void {
     this.mWorkerManager.postMessage(Action.uiState(true));
   }
@@ -40,8 +44,4 @@ export abstract class BaseFunction {
   protected disableUiWithMode(uiStateMode: UiStateMode): void {
     this.mWorkerManager.postMessage(Action.uiStateWithMode(false, uiStateMode));
   }
-
-  abstract load(): void
-
-  abstract unload(): void
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/function/CameraBasicFunction.ts b/common/src/main/ets/default/function/CameraBasicFunction.ts
index 994ab20..1ddbfa1 100644
--- a/common/src/main/ets/default/function/CameraBasicFunction.ts
+++ b/common/src/main/ets/default/function/CameraBasicFunction.ts
@@ -24,6 +24,7 @@ import ReportUtil from '../utils/ReportUtil';
 import { GlobalContext } from '../utils/GlobalContext';
 
 export class CameraBasicFunction extends BaseFunction {
+  public startIdentification: boolean = false
   private TAG = '[CameraBasicFunction]:';
   private mCameraId: string = CameraId.BACK;
   private mSurfaceId: string = '';
@@ -31,7 +32,78 @@ export class CameraBasicFunction extends BaseFunction {
   private mSessionList: string[] = [];
   private isSessionReleasing: boolean = false
   private initDataCache: any = null
-  public startIdentification: boolean = false
+
+  static getInstance() {
+    if (!globalThis?.cameraBasicMethod) {
+      globalThis.cameraBasicMethod = new CameraBasicFunction()
+    }
+    return globalThis.cameraBasicMethod
+  }
+
+  public async initCamera(data, callType?: string) {
+    GlobalContext.get().setObject('cameraStatus', CameraStatus.CAMERA_BEGIN_INIT);
+    Log.info(`${this.TAG} initCamera this.startIdentification:${JSON.stringify(this.startIdentification)} `);
+    if (this.startIdentification) {
+      const platformCapability = CameraPlatformCapability.getInstance();
+      this.mWorkerManager.postMessage(Action.initCameraDone(platformCapability));
+      return;
+    }
+    if (callType) {
+      this.startIdentification = true
+    }
+    Log.start(`${this.TAG} initCamera`)
+    this.mSessionList.push('CREATE')
+    let curStorageCameraId = AppStorage.Get<string>('storageCameraId')
+    if (curStorageCameraId) {
+      data.cameraId = curStorageCameraId
+    }
+    Log.info(`${this.TAG} initData:${JSON.stringify(data)} `)
+    this.initDataCache = data
+    if (GlobalContext.get().getT<boolean>('isSessionCreating') || this.isSessionReleasing) {
+      Log.info(`${this.TAG} initCamera isSessionCreating or isSessionReleasing return`)
+      return
+    }
+    this.mCameraId = data.cameraId
+    this.mCurrentMode = data.mode
+    let mCameraCount = await this.mCameraService.initCamera(this.mCameraId)
+    const platformCapability = CameraPlatformCapability.getInstance()
+    await platformCapability.init(mCameraCount)
+    this.mWorkerManager.postMessage(Action.initCameraDone(platformCapability))
+    this.mCameraService.getThumbnail(this.functionBackImpl)
+    GlobalContext.get().setObject('cameraStatus', CameraStatus.CAMERA_INIT_FINISHED);
+    this.mWorkerManager.postMessage(Action.updateCameraStatus())
+    Log.end(`${this.TAG} initCamera`)
+  }
+
+  load(): void {
+    Log.info(`${this.TAG} load E`)
+    this.mEventBus.on(Action.ACTION_INIT, this.initCamera.bind(this))
+    this.mEventBus.on(Action.ACTION_CHANGE_IMAGE_SIZE, this.imageSize.bind(this))
+    this.mEventBus.on(Action.ACTION_CHANGE_VIDEO_SIZE, this.videoSize.bind(this))
+    this.mEventBus.on(Action.ACTION_PREPARE_SURFACE, this.onSurfacePrepare.bind(this))
+    this.mEventBus.on(Action.ACTION_START_PREVIEW, this.startPreview.bind(this))
+    this.mEventBus.on(Action.ACTION_RESTART_PREVIEW, this.reStartPreview.bind(this))
+    this.mEventBus.on(Action.ACTION_CHANGE_MODE, this.changeMode.bind(this))
+    this.mEventBus.on(Action.ACTION_SWITCH_CAMERA, this.switchCamera.bind(this))
+    this.mEventBus.on(Action.ACTION_CLOSE_CAMERA, this.close.bind(this))
+    this.mEventBus.on(Action.ACTION_RELOAD_THUMBNAIL, this.reloadThumbnail.bind(this))
+    Log.info(`${this.TAG} load X`)
+  }
+
+  unload(): void {
+    Log.info(`${this.TAG} unload E`)
+    this.mEventBus.off(Action.ACTION_INIT, this.initCamera.bind(this))
+    this.mEventBus.off(Action.ACTION_CHANGE_IMAGE_SIZE, this.imageSize.bind(this))
+    this.mEventBus.off(Action.ACTION_CHANGE_VIDEO_SIZE, this.videoSize.bind(this))
+    this.mEventBus.off(Action.ACTION_PREPARE_SURFACE, this.onSurfacePrepare.bind(this))
+    this.mEventBus.off(Action.ACTION_START_PREVIEW, this.startPreview.bind(this))
+    this.mEventBus.off(Action.ACTION_RESTART_PREVIEW, this.reStartPreview.bind(this))
+    this.mEventBus.off(Action.ACTION_CHANGE_MODE, this.changeMode.bind(this))
+    this.mEventBus.off(Action.ACTION_SWITCH_CAMERA, this.switchCamera.bind(this))
+    this.mEventBus.off(Action.ACTION_CLOSE_CAMERA, this.close.bind(this))
+    this.mEventBus.off(Action.ACTION_RELOAD_THUMBNAIL, this.reloadThumbnail.bind(this))
+    Log.info(`${this.TAG} unload X`)
+  }
 
   private functionBackImpl: FunctionCallBack = {
     onCapturePhotoOutput: (): void => {
@@ -60,39 +132,6 @@ export class CameraBasicFunction extends BaseFunction {
     }
   }
 
-  public async initCamera(data, callType?: string) {
-    GlobalContext.get().setObject('cameraStatus', CameraStatus.CAMERA_BEGIN_INIT);
-    Log.info(`${this.TAG} initCamera this.startIdentification:${JSON.stringify(this.startIdentification)} `);
-    if (this.startIdentification) {
-      const platformCapability = CameraPlatformCapability.getInstance();
-      this.mWorkerManager.postMessage(Action.initCameraDone(platformCapability));
-      return;
-    }
-    if (callType) this.startIdentification = true
-    Log.start(`${this.TAG} initCamera`)
-    this.mSessionList.push('CREATE')
-    let curStorageCameraId = AppStorage.Get<string>('storageCameraId')
-    if (curStorageCameraId) {
-      data.cameraId = curStorageCameraId
-    }
-    Log.info(`${this.TAG} initData:${JSON.stringify(data)} `)
-    this.initDataCache = data
-    if (GlobalContext.get().getT<boolean>('isSessionCreating') || this.isSessionReleasing) {
-      Log.info(`${this.TAG} initCamera isSessionCreating or isSessionReleasing return`)
-      return
-    }
-    this.mCameraId = data.cameraId
-    this.mCurrentMode = data.mode
-    let mCameraCount = await this.mCameraService.initCamera(this.mCameraId)
-    const platformCapability = CameraPlatformCapability.getInstance()
-    await platformCapability.init(mCameraCount)
-    this.mWorkerManager.postMessage(Action.initCameraDone(platformCapability))
-    this.mCameraService.getThumbnail(this.functionBackImpl)
-    GlobalContext.get().setObject('cameraStatus', CameraStatus.CAMERA_INIT_FINISHED);
-    this.mWorkerManager.postMessage(Action.updateCameraStatus())
-    Log.end(`${this.TAG} initCamera`)
-  }
-
   private async imageSize(data) {
     Log.info(`${this.TAG} imageSize ${JSON.stringify(data)}  E`)
     this.mCameraService.mImageSize.imageWidth = data.imageSize.width
@@ -255,41 +294,4 @@ export class CameraBasicFunction extends BaseFunction {
     this.mCameraService.getThumbnail(this.functionBackImpl)
     Log.info(`${this.TAG} loadThumbnail X`)
   }
-
-  static getInstance() {
-    if (!globalThis?.cameraBasicMethod) {
-      globalThis.cameraBasicMethod = new CameraBasicFunction()
-    }
-    return globalThis.cameraBasicMethod
-  }
-
-  load(): void {
-    Log.info(`${this.TAG} load E`)
-    this.mEventBus.on(Action.ACTION_INIT, this.initCamera.bind(this))
-    this.mEventBus.on(Action.ACTION_CHANGE_IMAGE_SIZE, this.imageSize.bind(this))
-    this.mEventBus.on(Action.ACTION_CHANGE_VIDEO_SIZE, this.videoSize.bind(this))
-    this.mEventBus.on(Action.ACTION_PREPARE_SURFACE, this.onSurfacePrepare.bind(this))
-    this.mEventBus.on(Action.ACTION_START_PREVIEW, this.startPreview.bind(this))
-    this.mEventBus.on(Action.ACTION_RESTART_PREVIEW, this.reStartPreview.bind(this))
-    this.mEventBus.on(Action.ACTION_CHANGE_MODE, this.changeMode.bind(this))
-    this.mEventBus.on(Action.ACTION_SWITCH_CAMERA, this.switchCamera.bind(this))
-    this.mEventBus.on(Action.ACTION_CLOSE_CAMERA, this.close.bind(this))
-    this.mEventBus.on(Action.ACTION_RELOAD_THUMBNAIL, this.reloadThumbnail.bind(this))
-    Log.info(`${this.TAG} load X`)
-  }
-
-  unload(): void {
-    Log.info(`${this.TAG} unload E`)
-    this.mEventBus.off(Action.ACTION_INIT, this.initCamera.bind(this))
-    this.mEventBus.off(Action.ACTION_CHANGE_IMAGE_SIZE, this.imageSize.bind(this))
-    this.mEventBus.off(Action.ACTION_CHANGE_VIDEO_SIZE, this.videoSize.bind(this))
-    this.mEventBus.off(Action.ACTION_PREPARE_SURFACE, this.onSurfacePrepare.bind(this))
-    this.mEventBus.off(Action.ACTION_START_PREVIEW, this.startPreview.bind(this))
-    this.mEventBus.off(Action.ACTION_RESTART_PREVIEW, this.reStartPreview.bind(this))
-    this.mEventBus.off(Action.ACTION_CHANGE_MODE, this.changeMode.bind(this))
-    this.mEventBus.off(Action.ACTION_SWITCH_CAMERA, this.switchCamera.bind(this))
-    this.mEventBus.off(Action.ACTION_CLOSE_CAMERA, this.close.bind(this))
-    this.mEventBus.off(Action.ACTION_RELOAD_THUMBNAIL, this.reloadThumbnail.bind(this))
-    Log.info(`${this.TAG} unload X`)
-  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/function/RecordFunction.ts b/common/src/main/ets/default/function/RecordFunction.ts
index 3167725..f84f963 100644
--- a/common/src/main/ets/default/function/RecordFunction.ts
+++ b/common/src/main/ets/default/function/RecordFunction.ts
@@ -23,12 +23,26 @@ import { GlobalContext } from '../utils/GlobalContext';
 const TAG = '[RecordFunction]:';
 
 export class RecordFunction extends BaseFunction {
+  load(): void {
+    this.mEventBus.on(Action.ACTION_RECORD_START, this.startRecording.bind(this));
+    this.mEventBus.on(Action.ACTION_RECORD_PAUSE, this.pauseRecording.bind(this));
+    this.mEventBus.on(Action.ACTION_RECORD_RESUME, this.resumeRecording.bind(this));
+    this.mEventBus.on(Action.ACTION_RECORD_STOP, this.stopRecording.bind(this));
+  }
+
+  unload(): void {
+    this.mEventBus.off(Action.ACTION_RECORD_START, this.startRecording.bind(this));
+    this.mEventBus.off(Action.ACTION_RECORD_PAUSE, this.pauseRecording.bind(this));
+    this.mEventBus.off(Action.ACTION_RECORD_RESUME, this.resumeRecording.bind(this));
+    this.mEventBus.off(Action.ACTION_RECORD_STOP, this.stopRecording.bind(this));
+  }
+
   private functionBackImpl: VideoCallBack = {
     videoUri: (videoUri: any): void => {
       Log.info(`${TAG} functionBackImpl videoUri ${videoUri}`);
       this.mWorkerManager.postMessage(Action.updateVideoUri(videoUri));
     },
-    onRecodeError:(data: any): void => {
+    onRecodeError: (data: any): void => {
       this.mWorkerManager.postMessage(Action.recordError());
       this.mWorkerManager.postMessage(Action.reStartPreview(1));
     }
@@ -79,7 +93,8 @@ export class RecordFunction extends BaseFunction {
   private async stopRecording() {
     Log.info(`${TAG} stopRecording E`);
 
-    Log.info(`${TAG} globalThis.startRecording : ${JSON.stringify(GlobalContext.get().getT<boolean>('startRecordingFlag'))}`);
+    Log.info(`${TAG} globalThis.startRecording : ${JSON.stringify(GlobalContext.get()
+      .getT<boolean>('startRecordingFlag'))}`);
     if (GlobalContext.get().getT<boolean>('startRecordingFlag')) {
       return;
     }
@@ -97,18 +112,4 @@ export class RecordFunction extends BaseFunction {
     this.enableUiWithMode(UiStateMode.EXCLUDE_PREVIEW);
     Log.info(`${TAG} stopRecording X`);
   }
-
-  load(): void{
-    this.mEventBus.on(Action.ACTION_RECORD_START, this.startRecording.bind(this));
-    this.mEventBus.on(Action.ACTION_RECORD_PAUSE, this.pauseRecording.bind(this));
-    this.mEventBus.on(Action.ACTION_RECORD_RESUME, this.resumeRecording.bind(this));
-    this.mEventBus.on(Action.ACTION_RECORD_STOP, this.stopRecording.bind(this));
-  }
-
-  unload(): void {
-    this.mEventBus.off(Action.ACTION_RECORD_START, this.startRecording.bind(this));
-    this.mEventBus.off(Action.ACTION_RECORD_PAUSE, this.pauseRecording.bind(this));
-    this.mEventBus.off(Action.ACTION_RECORD_RESUME, this.resumeRecording.bind(this));
-    this.mEventBus.off(Action.ACTION_RECORD_STOP, this.stopRecording.bind(this));
-  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/function/ZoomFunction.ts b/common/src/main/ets/default/function/ZoomFunction.ts
index 09eb439..a193132 100644
--- a/common/src/main/ets/default/function/ZoomFunction.ts
+++ b/common/src/main/ets/default/function/ZoomFunction.ts
@@ -20,12 +20,6 @@ import { BaseFunction } from './BaseFunction'
 export class ZoomFunction extends BaseFunction {
   private TAG = '[ZoomFunction]:'
 
-  private async changeZoomRatio(data) {
-    Log.info(`${this.TAG} setZoomRatio ${JSON.stringify(data)}  E`)
-    await this.mCameraService.setZoomRatio(data.zoomRatio)
-    Log.info(`${this.TAG} setZoomRatio X`)
-  }
-
   load(): void {
     Log.info(`${this.TAG} load E`)
     this.mEventBus.on(Action.ACTION_CHANGE_ZOOM_RATIO, this.changeZoomRatio.bind(this))
@@ -37,4 +31,10 @@ export class ZoomFunction extends BaseFunction {
     this.mEventBus.off(Action.ACTION_CHANGE_ZOOM_RATIO, this.changeZoomRatio.bind(this))
     Log.info(`${this.TAG} unload X`)
   }
+
+  private async changeZoomRatio(data) {
+    Log.info(`${this.TAG} setZoomRatio ${JSON.stringify(data)}  E`)
+    await this.mCameraService.setZoomRatio(data.zoomRatio)
+    Log.info(`${this.TAG} setZoomRatio X`)
+  }
 }
\ No newline at end of file
diff --git a/common/src/main/ets/default/redux/reducers/CameraReducer.ts b/common/src/main/ets/default/redux/reducers/CameraReducer.ts
index 9a85db5..7499881 100644
--- a/common/src/main/ets/default/redux/reducers/CameraReducer.ts
+++ b/common/src/main/ets/default/redux/reducers/CameraReducer.ts
@@ -14,8 +14,7 @@
  */
 import { CameraId } from '../../setting/settingitem/CameraId';
 
-import { ActionData } from '../actions/Action';
-import { Action } from '../actions/Action';
+import { Action, ActionData } from '../actions/Action';
 
 export type CameraState = {
   cameraPosition: CameraId,
diff --git a/common/src/main/ets/default/redux/reducers/ZoomReducer.ts b/common/src/main/ets/default/redux/reducers/ZoomReducer.ts
index 3779565..f3d164c 100644
--- a/common/src/main/ets/default/redux/reducers/ZoomReducer.ts
+++ b/common/src/main/ets/default/redux/reducers/ZoomReducer.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { Action, ActionData } from '../actions/Action'
+import { Action, ActionData } from '../actions/Action';
 
 export type ZoomState = {
   zoomRatio: number,
diff --git a/hvigor/hvigor-config.json5 b/hvigor/hvigor-config.json5
index 122677b..925d913 100644
--- a/hvigor/hvigor-config.json5
+++ b/hvigor/hvigor-config.json5
@@ -1,6 +1,5 @@
 {
-  "hvigorVersion": "3.0.9",
+  "modelVersion": "5.0.2",
   "dependencies": {
-    "@ohos/hvigor-ohos-plugin": "3.0.9"
   }
 }
\ No newline at end of file
diff --git a/hvigor/hvigor-wrapper.js b/hvigor/hvigor-wrapper.js
deleted file mode 100644
index 372eae8..0000000
--- a/hvigor/hvigor-wrapper.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";var u=require("path"),D=require("os"),e=require("fs"),t=require("crypto"),r=require("child_process"),n="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i={},C={},F=n&&n.__importDefault||function(u){return u&&u.__esModule?u:{default:u}};Object.defineProperty(C,"__esModule",{value:!0}),C.maxPathLength=C.isMac=C.isLinux=C.isWindows=void 0;const E=F(D),A="Windows_NT",o="Darwin";function a(){return E.default.type()===A}function c(){return E.default.type()===o}C.isWindows=a,C.isLinux=function(){return"Linux"===E.default.type()},C.isMac=c,C.maxPathLength=function(){return c()?1016:a()?259:4095},function(e){var t=n&&n.__createBinding||(Object.create?function(u,D,e,t){void 0===t&&(t=e);var r=Object.getOwnPropertyDescriptor(D,e);r&&!("get"in r?!D.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return D[e]}}),Object.defineProperty(u,t,r)}:function(u,D,e,t){void 0===t&&(t=e),u[t]=D[e]}),r=n&&n.__setModuleDefault||(Object.create?function(u,D){Object.defineProperty(u,"default",{enumerable:!0,value:D})}:function(u,D){u.default=D}),i=n&&n.__importStar||function(u){if(u&&u.__esModule)return u;var D={};if(null!=u)for(var e in u)"default"!==e&&Object.prototype.hasOwnProperty.call(u,e)&&t(D,u,e);return r(D,u),D};Object.defineProperty(e,"__esModule",{value:!0}),e.WORK_SPACE=e.HVIGOR_PROJECT_WRAPPER_HOME=e.HVIGOR_PROJECT_ROOT_DIR=e.HVIGOR_PROJECT_CACHES_HOME=e.HVIGOR_PNPM_STORE_PATH=e.HVIGOR_WRAPPER_PNPM_SCRIPT_PATH=e.PROJECT_CACHES=e.HVIGOR_WRAPPER_TOOLS_HOME=e.HVIGOR_USER_HOME=e.DEFAULT_PACKAGE_JSON=e.DEFAULT_HVIGOR_CONFIG_JSON_FILE_NAME=e.PNPM=e.HVIGOR=e.NPM_TOOL=e.PNPM_TOOL=e.HVIGOR_ENGINE_PACKAGE_NAME=void 0;const F=i(D),E=i(u),A=C;e.HVIGOR_ENGINE_PACKAGE_NAME="@ohos/hvigor",e.PNPM_TOOL=(0,A.isWindows)()?"pnpm.cmd":"pnpm",e.NPM_TOOL=(0,A.isWindows)()?"npm.cmd":"npm",e.HVIGOR="hvigor",e.PNPM="pnpm",e.DEFAULT_HVIGOR_CONFIG_JSON_FILE_NAME="hvigor-config.json5",e.DEFAULT_PACKAGE_JSON="package.json",e.HVIGOR_USER_HOME=E.resolve(F.homedir(),".hvigor"),e.HVIGOR_WRAPPER_TOOLS_HOME=E.resolve(e.HVIGOR_USER_HOME,"wrapper","tools"),e.PROJECT_CACHES="project_caches",e.HVIGOR_WRAPPER_PNPM_SCRIPT_PATH=E.resolve(e.HVIGOR_WRAPPER_TOOLS_HOME,"node_modules",".bin",e.PNPM_TOOL),e.HVIGOR_PNPM_STORE_PATH=E.resolve(e.HVIGOR_USER_HOME,"caches"),e.HVIGOR_PROJECT_CACHES_HOME=E.resolve(e.HVIGOR_USER_HOME,e.PROJECT_CACHES),e.HVIGOR_PROJECT_ROOT_DIR=process.cwd(),e.HVIGOR_PROJECT_WRAPPER_HOME=E.resolve(e.HVIGOR_PROJECT_ROOT_DIR,e.HVIGOR),e.WORK_SPACE="workspace"}(i);var s={},l={};Object.defineProperty(l,"__esModule",{value:!0}),l.logInfoPrintConsole=l.logErrorAndExit=void 0,l.logErrorAndExit=function(u){u instanceof Error?console.error(u.message):console.error(u),process.exit(-1)},l.logInfoPrintConsole=function(u){console.log(u)};var B=n&&n.__createBinding||(Object.create?function(u,D,e,t){void 0===t&&(t=e);var r=Object.getOwnPropertyDescriptor(D,e);r&&!("get"in r?!D.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return D[e]}}),Object.defineProperty(u,t,r)}:function(u,D,e,t){void 0===t&&(t=e),u[t]=D[e]}),d=n&&n.__setModuleDefault||(Object.create?function(u,D){Object.defineProperty(u,"default",{enumerable:!0,value:D})}:function(u,D){u.default=D}),f=n&&n.__importStar||function(u){if(u&&u.__esModule)return u;var D={};if(null!=u)for(var e in u)"default"!==e&&Object.prototype.hasOwnProperty.call(u,e)&&B(D,u,e);return d(D,u),D};Object.defineProperty(s,"__esModule",{value:!0});var _=s.executeBuild=void 0;const p=f(e),O=f(u),h=l;_=s.executeBuild=function(u){const D=O.resolve(u,"node_modules","@ohos","hvigor","bin","hvigor.js");try{const u=p.realpathSync(D);require(u)}catch(e){(0,h.logErrorAndExit)(`Error: ENOENT: no such file ${D},delete ${u} and retry.`)}};var P={},v={};!function(u){var D=n&&n.__importDefault||function(u){return u&&u.__esModule?u:{default:u}};Object.defineProperty(u,"__esModule",{value:!0}),u.hashFile=u.hash=u.createHash=void 0;const r=D(t),i=D(e);u.createHash=(u="MD5")=>r.default.createHash(u);u.hash=(D,e)=>(0,u.createHash)(e).update(D).digest("hex");u.hashFile=(D,e)=>{if(i.default.existsSync(D))return(0,u.hash)(i.default.readFileSync(D,"utf-8"),e)}}(v);var g={},m={},R={};Object.defineProperty(R,"__esModule",{value:!0}),R.Unicode=void 0;class y{}R.Unicode=y,y.SPACE_SEPARATOR=/[\u1680\u2000-\u200A\u202F\u205F\u3000]/,y.ID_START=/[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312E\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEA\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AE\uA7B0-\uA7B7\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF2D-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF19]|\uD806[\uDCA0-\uDCDF\uDCFF\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE83\uDE86-\uDE89\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50\uDF93-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFEC]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4\uDD00-\uDD43]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]/,y.ID_CONTINUE=/[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0300-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u0483-\u0487\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05F0-\u05F2\u0610-\u061A\u0620-\u0669\u066E-\u06D3\u06D5-\u06DC\u06DF-\u06E8\u06EA-\u06FC\u06FF\u0710-\u074A\u074D-\u07B1\u07C0-\u07F5\u07FA\u0800-\u082D\u0840-\u085B\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u08D4-\u08E1\u08E3-\u0963\u0966-\u096F\u0971-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BC-\u09C4\u09C7\u09C8\u09CB-\u09CE\u09D7\u09DC\u09DD\u09DF-\u09E3\u09E6-\u09F1\u09FC\u0A01-\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A59-\u0A5C\u0A5E\u0A66-\u0A75\u0A81-\u0A83\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABC-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AD0\u0AE0-\u0AE3\u0AE6-\u0AEF\u0AF9-\u0AFF\u0B01-\u0B03\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3C-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B5C\u0B5D\u0B5F-\u0B63\u0B66-\u0B6F\u0B71\u0B82\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD0\u0BD7\u0BE6-\u0BEF\u0C00-\u0C03\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C58-\u0C5A\u0C60-\u0C63\u0C66-\u0C6F\u0C80-\u0C83\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBC-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CDE\u0CE0-\u0CE3\u0CE6-\u0CEF\u0CF1\u0CF2\u0D00-\u0D03\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D44\u0D46-\u0D48\u0D4A-\u0D4E\u0D54-\u0D57\u0D5F-\u0D63\u0D66-\u0D6F\u0D7A-\u0D7F\u0D82\u0D83\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DE6-\u0DEF\u0DF2\u0DF3\u0E01-\u0E3A\u0E40-\u0E4E\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB9\u0EBB-\u0EBD\u0EC0-\u0EC4\u0EC6\u0EC8-\u0ECD\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E-\u0F47\u0F49-\u0F6C\u0F71-\u0F84\u0F86-\u0F97\u0F99-\u0FBC\u0FC6\u1000-\u1049\u1050-\u109D\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u135D-\u135F\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1714\u1720-\u1734\u1740-\u1753\u1760-\u176C\u176E-\u1770\u1772\u1773\u1780-\u17D3\u17D7\u17DC\u17DD\u17E0-\u17E9\u180B-\u180D\u1810-\u1819\u1820-\u1877\u1880-\u18AA\u18B0-\u18F5\u1900-\u191E\u1920-\u192B\u1930-\u193B\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19D9\u1A00-\u1A1B\u1A20-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AA7\u1AB0-\u1ABD\u1B00-\u1B4B\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1BF3\u1C00-\u1C37\u1C40-\u1C49\u1C4D-\u1C7D\u1C80-\u1C88\u1CD0-\u1CD2\u1CD4-\u1CF9\u1D00-\u1DF9\u1DFB-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u203F\u2040\u2054\u2071\u207F\u2090-\u209C\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D7F-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2DE0-\u2DFF\u2E2F\u3005-\u3007\u3021-\u302F\u3031-\u3035\u3038-\u303C\u3041-\u3096\u3099\u309A\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312E\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEA\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66F\uA674-\uA67D\uA67F-\uA6F1\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AE\uA7B0-\uA7B7\uA7F7-\uA827\uA840-\uA873\uA880-\uA8C5\uA8D0-\uA8D9\uA8E0-\uA8F7\uA8FB\uA8FD\uA900-\uA92D\uA930-\uA953\uA960-\uA97C\uA980-\uA9C0\uA9CF-\uA9D9\uA9E0-\uA9FE\uAA00-\uAA36\uAA40-\uAA4D\uAA50-\uAA59\uAA60-\uAA76\uAA7A-\uAAC2\uAADB-\uAADD\uAAE0-\uAAEF\uAAF2-\uAAF6\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABEA\uABEC\uABED\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE00-\uFE0F\uFE20-\uFE2F\uFE33\uFE34\uFE4D-\uFE4F\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF3F\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDDFD\uDE80-\uDE9C\uDEA0-\uDED0\uDEE0\uDF00-\uDF1F\uDF2D-\uDF4A\uDF50-\uDF7A\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCA0-\uDCA9\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00-\uDE03\uDE05\uDE06\uDE0C-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE38-\uDE3A\uDE3F\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE6\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC00-\uDC46\uDC66-\uDC6F\uDC7F-\uDCBA\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD00-\uDD34\uDD36-\uDD3F\uDD50-\uDD73\uDD76\uDD80-\uDDC4\uDDCA-\uDDCC\uDDD0-\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE37\uDE3E\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEEA\uDEF0-\uDEF9\uDF00-\uDF03\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3C-\uDF44\uDF47\uDF48\uDF4B-\uDF4D\uDF50\uDF57\uDF5D-\uDF63\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC00-\uDC4A\uDC50-\uDC59\uDC80-\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDB5\uDDB8-\uDDC0\uDDD8-\uDDDD\uDE00-\uDE40\uDE44\uDE50-\uDE59\uDE80-\uDEB7\uDEC0-\uDEC9\uDF00-\uDF19\uDF1D-\uDF2B\uDF30-\uDF39]|\uD806[\uDCA0-\uDCE9\uDCFF\uDE00-\uDE3E\uDE47\uDE50-\uDE83\uDE86-\uDE99\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC36\uDC38-\uDC40\uDC50-\uDC59\uDC72-\uDC8F\uDC92-\uDCA7\uDCA9-\uDCB6\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD36\uDD3A\uDD3C\uDD3D\uDD3F-\uDD47\uDD50-\uDD59]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDE60-\uDE69\uDED0-\uDEED\uDEF0-\uDEF4\uDF00-\uDF36\uDF40-\uDF43\uDF50-\uDF59\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50-\uDF7E\uDF8F-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFEC]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99\uDC9D\uDC9E]|\uD834[\uDD65-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD\uDE42-\uDE44]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB\uDFCE-\uDFFF]|\uD836[\uDE00-\uDE36\uDE3B-\uDE6C\uDE75\uDE84\uDE9B-\uDE9F\uDEA1-\uDEAF]|\uD838[\uDC00-\uDC06\uDC08-\uDC18\uDC1B-\uDC21\uDC23\uDC24\uDC26-\uDC2A]|\uD83A[\uDC00-\uDCC4\uDCD0-\uDCD6\uDD00-\uDD4A\uDD50-\uDD59]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]|\uDB40[\uDD00-\uDDEF]/,Object.defineProperty(m,"__esModule",{value:!0}),m.JudgeUtil=void 0;const I=R;m.JudgeUtil=class{static isIgnoreChar(u){return"string"==typeof u&&("\t"===u||"\v"===u||"\f"===u||" "===u||" "===u||"\ufeff"===u||"\n"===u||"\r"===u||"\u2028"===u||"\u2029"===u)}static isSpaceSeparator(u){return"string"==typeof u&&I.Unicode.SPACE_SEPARATOR.test(u)}static isIdStartChar(u){return"string"==typeof u&&(u>="a"&&u<="z"||u>="A"&&u<="Z"||"$"===u||"_"===u||I.Unicode.ID_START.test(u))}static isIdContinueChar(u){return"string"==typeof u&&(u>="a"&&u<="z"||u>="A"&&u<="Z"||u>="0"&&u<="9"||"$"===u||"_"===u||"‌"===u||"‍"===u||I.Unicode.ID_CONTINUE.test(u))}static isDigitWithoutZero(u){return/[1-9]/.test(u)}static isDigit(u){return"string"==typeof u&&/[0-9]/.test(u)}static isHexDigit(u){return"string"==typeof u&&/[0-9A-Fa-f]/.test(u)}};var N=n&&n.__importDefault||function(u){return u&&u.__esModule?u:{default:u}};Object.defineProperty(g,"__esModule",{value:!0}),g.parseJsonText=g.parseJsonFile=void 0;const b=N(e),S=N(D),w=N(u),H=m;var x;!function(u){u[u.Char=0]="Char",u[u.EOF=1]="EOF",u[u.Identifier=2]="Identifier"}(x||(x={}));let M,T,V,G,j,J,W="start",U=[],L=0,$=1,k=0,K=!1,z="default",q="'",Z=1;function X(u,D=!1){T=String(u),W="start",U=[],L=0,$=1,k=0,G=void 0,K=D;do{M=Q(),nu[W]()}while("eof"!==M.type);return G}function Q(){for(z="default",j="",q="'",Z=1;;){J=Y();const u=Du[z]();if(u)return u}}function Y(){if(T[L])return String.fromCodePoint(T.codePointAt(L))}function uu(){const u=Y();return"\n"===u?($++,k=0):u?k+=u.length:k++,u&&(L+=u.length),u}g.parseJsonFile=function(u,D=!1,e="utf-8"){const t=b.default.readFileSync(w.default.resolve(u),{encoding:e});try{return X(t,D)}catch(D){if(D instanceof SyntaxError){const e=D.message.split("at");if(2===e.length)throw new Error(`${e[0].trim()}${S.default.EOL}\t at ${u}:${e[1].trim()}`)}throw new Error(`${u} is not in valid JSON/JSON5 format.`)}},g.parseJsonText=X;const Du={default(){switch(J){case"/":return uu(),void(z="comment");case void 0:return uu(),eu("eof")}if(!H.JudgeUtil.isIgnoreChar(J)&&!H.JudgeUtil.isSpaceSeparator(J))return Du[W]();uu()},start(){z="value"},beforePropertyName(){switch(J){case"$":case"_":return j=uu(),void(z="identifierName");case"\\":return uu(),void(z="identifierNameStartEscape");case"}":return eu("punctuator",uu());case'"':case"'":return q=J,uu(),void(z="string")}if(H.JudgeUtil.isIdStartChar(J))return j+=uu(),void(z="identifierName");throw Eu(x.Char,uu())},afterPropertyName(){if(":"===J)return eu("punctuator",uu());throw Eu(x.Char,uu())},beforePropertyValue(){z="value"},afterPropertyValue(){switch(J){case",":case"}":return eu("punctuator",uu())}throw Eu(x.Char,uu())},beforeArrayValue(){if("]"===J)return eu("punctuator",uu());z="value"},afterArrayValue(){switch(J){case",":case"]":return eu("punctuator",uu())}throw Eu(x.Char,uu())},end(){throw Eu(x.Char,uu())},comment(){switch(J){case"*":return uu(),void(z="multiLineComment");case"/":return uu(),void(z="singleLineComment")}throw Eu(x.Char,uu())},multiLineComment(){switch(J){case"*":return uu(),void(z="multiLineCommentAsterisk");case void 0:throw Eu(x.Char,uu())}uu()},multiLineCommentAsterisk(){switch(J){case"*":return void uu();case"/":return uu(),void(z="default");case void 0:throw Eu(x.Char,uu())}uu(),z="multiLineComment"},singleLineComment(){switch(J){case"\n":case"\r":case"\u2028":case"\u2029":return uu(),void(z="default");case void 0:return uu(),eu("eof")}uu()},value(){switch(J){case"{":case"[":return eu("punctuator",uu());case"n":return uu(),tu("ull"),eu("null",null);case"t":return uu(),tu("rue"),eu("boolean",!0);case"f":return uu(),tu("alse"),eu("boolean",!1);case"-":case"+":return"-"===uu()&&(Z=-1),void(z="numerical");case".":case"0":case"I":case"N":return void(z="numerical");case'"':case"'":return q=J,uu(),j="",void(z="string")}if(void 0===J||!H.JudgeUtil.isDigitWithoutZero(J))throw Eu(x.Char,uu());z="numerical"},numerical(){switch(J){case".":return j=uu(),void(z="decimalPointLeading");case"0":return j=uu(),void(z="zero");case"I":return uu(),tu("nfinity"),eu("numeric",Z*(1/0));case"N":return uu(),tu("aN"),eu("numeric",NaN)}if(void 0!==J&&H.JudgeUtil.isDigitWithoutZero(J))return j=uu(),void(z="decimalInteger");throw Eu(x.Char,uu())},zero(){switch(J){case".":case"e":case"E":return void(z="decimal");case"x":case"X":return j+=uu(),void(z="hexadecimal")}return eu("numeric",0)},decimalInteger(){switch(J){case".":case"e":case"E":return void(z="decimal")}if(!H.JudgeUtil.isDigit(J))return eu("numeric",Z*Number(j));j+=uu()},decimal(){switch(J){case".":j+=uu(),z="decimalFraction";break;case"e":case"E":j+=uu(),z="decimalExponent"}},decimalPointLeading(){if(H.JudgeUtil.isDigit(J))return j+=uu(),void(z="decimalFraction");throw Eu(x.Char,uu())},decimalFraction(){switch(J){case"e":case"E":return j+=uu(),void(z="decimalExponent")}if(!H.JudgeUtil.isDigit(J))return eu("numeric",Z*Number(j));j+=uu()},decimalExponent(){switch(J){case"+":case"-":return j+=uu(),void(z="decimalExponentSign")}if(H.JudgeUtil.isDigit(J))return j+=uu(),void(z="decimalExponentInteger");throw Eu(x.Char,uu())},decimalExponentSign(){if(H.JudgeUtil.isDigit(J))return j+=uu(),void(z="decimalExponentInteger");throw Eu(x.Char,uu())},decimalExponentInteger(){if(!H.JudgeUtil.isDigit(J))return eu("numeric",Z*Number(j));j+=uu()},hexadecimal(){if(H.JudgeUtil.isHexDigit(J))return j+=uu(),void(z="hexadecimalInteger");throw Eu(x.Char,uu())},hexadecimalInteger(){if(!H.JudgeUtil.isHexDigit(J))return eu("numeric",Z*Number(j));j+=uu()},identifierNameStartEscape(){if("u"!==J)throw Eu(x.Char,uu());uu();const u=ru();switch(u){case"$":case"_":break;default:if(!H.JudgeUtil.isIdStartChar(u))throw Eu(x.Identifier)}j+=u,z="identifierName"},identifierName(){switch(J){case"$":case"_":case"‌":case"‍":return void(j+=uu());case"\\":return uu(),void(z="identifierNameEscape")}if(!H.JudgeUtil.isIdContinueChar(J))return eu("identifier",j);j+=uu()},identifierNameEscape(){if("u"!==J)throw Eu(x.Char,uu());uu();const u=ru();switch(u){case"$":case"_":case"‌":case"‍":break;default:if(!H.JudgeUtil.isIdContinueChar(u))throw Eu(x.Identifier)}j+=u,z="identifierName"},string(){switch(J){case"\\":return uu(),void(j+=function(){const u=Y(),D=function(){switch(Y()){case"b":return uu(),"\b";case"f":return uu(),"\f";case"n":return uu(),"\n";case"r":return uu(),"\r";case"t":return uu(),"\t";case"v":return uu(),"\v"}return}();if(D)return D;switch(u){case"0":if(uu(),H.JudgeUtil.isDigit(Y()))throw Eu(x.Char,uu());return"\0";case"x":return uu(),function(){let u="",D=Y();if(!H.JudgeUtil.isHexDigit(D))throw Eu(x.Char,uu());if(u+=uu(),D=Y(),!H.JudgeUtil.isHexDigit(D))throw Eu(x.Char,uu());return u+=uu(),String.fromCodePoint(parseInt(u,16))}();case"u":return uu(),ru();case"\n":case"\u2028":case"\u2029":return uu(),"";case"\r":return uu(),"\n"===Y()&&uu(),""}if(void 0===u||H.JudgeUtil.isDigitWithoutZero(u))throw Eu(x.Char,uu());return uu()}());case'"':case"'":if(J===q){const u=eu("string",j);return uu(),u}return void(j+=uu());case"\n":case"\r":case void 0:throw Eu(x.Char,uu());case"\u2028":case"\u2029":!function(u){console.warn(`JSON5: '${Fu(u)}' in strings is not valid ECMAScript; consider escaping.`)}(J)}j+=uu()}};function eu(u,D){return{type:u,value:D,line:$,column:k}}function tu(u){for(const D of u){if(Y()!==D)throw Eu(x.Char,uu());uu()}}function ru(){let u="",D=4;for(;D-- >0;){const D=Y();if(!H.JudgeUtil.isHexDigit(D))throw Eu(x.Char,uu());u+=uu()}return String.fromCodePoint(parseInt(u,16))}const nu={start(){if("eof"===M.type)throw Eu(x.EOF);iu()},beforePropertyName(){switch(M.type){case"identifier":case"string":return V=M.value,void(W="afterPropertyName");case"punctuator":return void Cu();case"eof":throw Eu(x.EOF)}},afterPropertyName(){if("eof"===M.type)throw Eu(x.EOF);W="beforePropertyValue"},beforePropertyValue(){if("eof"===M.type)throw Eu(x.EOF);iu()},afterPropertyValue(){if("eof"===M.type)throw Eu(x.EOF);switch(M.value){case",":return void(W="beforePropertyName");case"}":Cu()}},beforeArrayValue(){if("eof"===M.type)throw Eu(x.EOF);"punctuator"!==M.type||"]"!==M.value?iu():Cu()},afterArrayValue(){if("eof"===M.type)throw Eu(x.EOF);switch(M.value){case",":return void(W="beforeArrayValue");case"]":Cu()}},end(){}};function iu(){const u=function(){let u;switch(M.type){case"punctuator":switch(M.value){case"{":u={};break;case"[":u=[]}break;case"null":case"boolean":case"numeric":case"string":u=M.value}return u}();if(K&&"object"==typeof u&&(u._line=$,u._column=k),void 0===G)G=u;else{const D=U[U.length-1];Array.isArray(D)?K&&"object"!=typeof u?D.push({value:u,_line:$,_column:k}):D.push(u):D[V]=K&&"object"!=typeof u?{value:u,_line:$,_column:k}:u}!function(u){if(u&&"object"==typeof u)U.push(u),W=Array.isArray(u)?"beforeArrayValue":"beforePropertyName";else{const u=U[U.length-1];W=u?Array.isArray(u)?"afterArrayValue":"afterPropertyValue":"end"}}(u)}function Cu(){U.pop();const u=U[U.length-1];W=u?Array.isArray(u)?"afterArrayValue":"afterPropertyValue":"end"}function Fu(u){const D={"'":"\\'",'"':'\\"',"\\":"\\\\","\b":"\\b","\f":"\\f","\n":"\\n","\r":"\\r","\t":"\\t","\v":"\\v","\0":"\\0","\u2028":"\\u2028","\u2029":"\\u2029"};if(D[u])return D[u];if(u<" "){const D=u.charCodeAt(0).toString(16);return`\\x${`00${D}`.substring(D.length)}`}return u}function Eu(u,D){let e="";switch(u){case x.Char:e=void 0===D?`JSON5: invalid end of input at ${$}:${k}`:`JSON5: invalid character '${Fu(D)}' at ${$}:${k}`;break;case x.EOF:e=`JSON5: invalid end of input at ${$}:${k}`;break;case x.Identifier:k-=5,e=`JSON5: invalid identifier character at ${$}:${k}`}const t=new Au(e);return t.lineNumber=$,t.columnNumber=k,t}class Au extends SyntaxError{}var ou={},au=n&&n.__createBinding||(Object.create?function(u,D,e,t){void 0===t&&(t=e);var r=Object.getOwnPropertyDescriptor(D,e);r&&!("get"in r?!D.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return D[e]}}),Object.defineProperty(u,t,r)}:function(u,D,e,t){void 0===t&&(t=e),u[t]=D[e]}),cu=n&&n.__setModuleDefault||(Object.create?function(u,D){Object.defineProperty(u,"default",{enumerable:!0,value:D})}:function(u,D){u.default=D}),su=n&&n.__importStar||function(u){if(u&&u.__esModule)return u;var D={};if(null!=u)for(var e in u)"default"!==e&&Object.prototype.hasOwnProperty.call(u,e)&&au(D,u,e);return cu(D,u),D},lu=n&&n.__importDefault||function(u){return u&&u.__esModule?u:{default:u}};Object.defineProperty(ou,"__esModule",{value:!0}),ou.isFileExists=ou.offlinePluginConversion=ou.executeCommand=ou.getNpmPath=ou.hasNpmPackInPaths=void 0;const Bu=r,du=lu(e),fu=su(u),_u=i,pu=l;ou.hasNpmPackInPaths=function(u,D){try{return require.resolve(u,{paths:[...D]}),!0}catch(u){return!1}},ou.getNpmPath=function(){const u=process.execPath;return fu.join(fu.dirname(u),_u.NPM_TOOL)},ou.executeCommand=function(u,D,e){0!==(0,Bu.spawnSync)(u,D,e).status&&(0,pu.logErrorAndExit)(`Error: ${u} ${D} execute failed.See above for details.`)},ou.offlinePluginConversion=function(u,D){return D.startsWith("file:")||D.endsWith(".tgz")?fu.resolve(u,_u.HVIGOR,D.replace("file:","")):D},ou.isFileExists=function(u){return du.default.existsSync(u)&&du.default.statSync(u).isFile()};var Ou=n&&n.__createBinding||(Object.create?function(u,D,e,t){void 0===t&&(t=e);var r=Object.getOwnPropertyDescriptor(D,e);r&&!("get"in r?!D.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return D[e]}}),Object.defineProperty(u,t,r)}:function(u,D,e,t){void 0===t&&(t=e),u[t]=D[e]}),hu=n&&n.__setModuleDefault||(Object.create?function(u,D){Object.defineProperty(u,"default",{enumerable:!0,value:D})}:function(u,D){u.default=D}),Pu=n&&n.__importStar||function(u){if(u&&u.__esModule)return u;var D={};if(null!=u)for(var e in u)"default"!==e&&Object.prototype.hasOwnProperty.call(u,e)&&Ou(D,u,e);return hu(D,u),D},vu=n&&n.__importDefault||function(u){return u&&u.__esModule?u:{default:u}};Object.defineProperty(P,"__esModule",{value:!0});var gu=P.initProjectWorkSpace=void 0;const mu=Pu(e),Ru=vu(D),yu=Pu(u),Iu=v,Nu=i,bu=g,Su=l,wu=ou;let Hu,xu,Mu;function Tu(u,D,e){return void 0!==e.dependencies&&(0,wu.offlinePluginConversion)(Nu.HVIGOR_PROJECT_ROOT_DIR,D.dependencies[u])===yu.normalize(e.dependencies[u])}function Vu(){const u=yu.join(Mu,Nu.WORK_SPACE);if((0,Su.logInfoPrintConsole)("Hvigor cleaning..."),!mu.existsSync(u))return;const D=mu.readdirSync(u);if(!D||0===D.length)return;const e=yu.resolve(Mu,"node_modules","@ohos","hvigor","bin","hvigor.js");mu.existsSync(e)&&(0,wu.executeCommand)(process.argv[0],[e,"--stop-daemon"],{});try{D.forEach((D=>{mu.rmSync(yu.resolve(u,D),{recursive:!0})}))}catch(D){(0,Su.logErrorAndExit)(`The hvigor build tool cannot be installed. Please manually clear the workspace directory and synchronize the project again.\n\n      Workspace Path: ${u}.`)}}gu=P.initProjectWorkSpace=function(){if(Hu=function(){const u=yu.resolve(Nu.HVIGOR_PROJECT_WRAPPER_HOME,Nu.DEFAULT_HVIGOR_CONFIG_JSON_FILE_NAME);mu.existsSync(u)||(0,Su.logErrorAndExit)(`Error: Hvigor config file ${u} does not exist.`);return(0,bu.parseJsonFile)(u)}(),Mu=function(u){let D;D=function(u){let D=u.hvigorVersion;if(D.startsWith("file:")||D.endsWith(".tgz"))return!1;const e=u.dependencies,t=Object.getOwnPropertyNames(e);for(const u of t){const D=e[u];if(D.startsWith("file:")||D.endsWith(".tgz"))return!1}if(1===t.length&&"@ohos/hvigor-ohos-plugin"===t[0])return D>"2.5.0";return!1}(u)?function(u){let D=`${Nu.HVIGOR_ENGINE_PACKAGE_NAME}@${u.hvigorVersion}`;const e=u.dependencies;if(e){Object.getOwnPropertyNames(e).sort().forEach((u=>{D+=`,${u}@${e[u]}`}))}return(0,Iu.hash)(D)}(u):(0,Iu.hash)(process.cwd());return yu.resolve(Ru.default.homedir(),".hvigor","project_caches",D)}(Hu),xu=function(){const u=yu.resolve(Mu,Nu.WORK_SPACE,Nu.DEFAULT_PACKAGE_JSON);return mu.existsSync(u)?(0,bu.parseJsonFile)(u):{dependencies:{}}}(),!(0,wu.hasNpmPackInPaths)(Nu.HVIGOR_ENGINE_PACKAGE_NAME,[yu.join(Mu,Nu.WORK_SPACE)])||(0,wu.offlinePluginConversion)(Nu.HVIGOR_PROJECT_ROOT_DIR,Hu.hvigorVersion)!==xu.dependencies[Nu.HVIGOR_ENGINE_PACKAGE_NAME]||!function(){function u(u){const D=null==u?void 0:u.dependencies;return void 0===D?0:Object.getOwnPropertyNames(D).length}const D=u(Hu),e=u(xu);if(D+1!==e)return!1;for(const u in null==Hu?void 0:Hu.dependencies)if(!(0,wu.hasNpmPackInPaths)(u,[yu.join(Mu,Nu.WORK_SPACE)])||!Tu(u,Hu,xu))return!1;return!0}()){Vu();try{!function(){(0,Su.logInfoPrintConsole)("Hvigor installing...");for(const u in Hu.dependencies)Hu.dependencies[u]&&(Hu.dependencies[u]=(0,wu.offlinePluginConversion)(Nu.HVIGOR_PROJECT_ROOT_DIR,Hu.dependencies[u]));const u={dependencies:{...Hu.dependencies}};u.dependencies[Nu.HVIGOR_ENGINE_PACKAGE_NAME]=(0,wu.offlinePluginConversion)(Nu.HVIGOR_PROJECT_ROOT_DIR,Hu.hvigorVersion);const D=yu.join(Mu,Nu.WORK_SPACE);try{mu.mkdirSync(D,{recursive:!0});const e=yu.resolve(D,Nu.DEFAULT_PACKAGE_JSON);mu.writeFileSync(e,JSON.stringify(u))}catch(u){(0,Su.logErrorAndExit)(u)}(function(){const u=["config","set","store-dir",Nu.HVIGOR_PNPM_STORE_PATH],D={cwd:yu.join(Mu,Nu.WORK_SPACE),stdio:["inherit","inherit","inherit"]};(0,wu.executeCommand)(Nu.HVIGOR_WRAPPER_PNPM_SCRIPT_PATH,u,D)})(),function(){const u=["install"],D={cwd:yu.join(Mu,Nu.WORK_SPACE),stdio:["inherit","inherit","inherit"]};(0,wu.executeCommand)(Nu.HVIGOR_WRAPPER_PNPM_SCRIPT_PATH,u,D)}(),(0,Su.logInfoPrintConsole)("Hvigor install success.")}()}catch(u){Vu()}}return Mu};var Gu={};!function(t){var C=n&&n.__createBinding||(Object.create?function(u,D,e,t){void 0===t&&(t=e);var r=Object.getOwnPropertyDescriptor(D,e);r&&!("get"in r?!D.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return D[e]}}),Object.defineProperty(u,t,r)}:function(u,D,e,t){void 0===t&&(t=e),u[t]=D[e]}),F=n&&n.__setModuleDefault||(Object.create?function(u,D){Object.defineProperty(u,"default",{enumerable:!0,value:D})}:function(u,D){u.default=D}),E=n&&n.__importStar||function(u){if(u&&u.__esModule)return u;var D={};if(null!=u)for(var e in u)"default"!==e&&Object.prototype.hasOwnProperty.call(u,e)&&C(D,u,e);return F(D,u),D},A=n&&n.__importDefault||function(u){return u&&u.__esModule?u:{default:u}};Object.defineProperty(t,"__esModule",{value:!0}),t.executeInstallPnpm=t.isPnpmInstalled=t.environmentHandler=t.checkNpmConifg=t.PNPM_VERSION=void 0;const o=r,a=E(e),c=A(D),s=E(u),B=i,d=l,f=ou;t.PNPM_VERSION="7.30.0",t.checkNpmConifg=function(){const u=s.resolve(B.HVIGOR_PROJECT_ROOT_DIR,".npmrc"),D=s.resolve(c.default.homedir(),".npmrc");if((0,f.isFileExists)(u)||(0,f.isFileExists)(D))return;const e=(0,f.getNpmPath)(),t=(0,o.spawnSync)(e,["config","get","prefix"],{cwd:B.HVIGOR_PROJECT_ROOT_DIR});if(0!==t.status||!t.stdout)return void(0,d.logErrorAndExit)("Error: The hvigor depends on the npmrc file. Configure the npmrc file first.");const r=s.resolve(`${t.stdout}`.replace(/[\r\n]/gi,""),".npmrc");(0,f.isFileExists)(r)||(0,d.logErrorAndExit)("Error: The hvigor depends on the npmrc file. Configure the npmrc file first.")},t.environmentHandler=function(){process.env["npm_config_update-notifier"]="false"},t.isPnpmInstalled=function(){return!!a.existsSync(B.HVIGOR_WRAPPER_PNPM_SCRIPT_PATH)&&(0,f.hasNpmPackInPaths)("pnpm",[B.HVIGOR_WRAPPER_TOOLS_HOME])},t.executeInstallPnpm=function(){(0,d.logInfoPrintConsole)(`Installing pnpm@${t.PNPM_VERSION}...`);const u=(0,f.getNpmPath)();!function(){const u=s.resolve(B.HVIGOR_WRAPPER_TOOLS_HOME,B.DEFAULT_PACKAGE_JSON);try{a.existsSync(B.HVIGOR_WRAPPER_TOOLS_HOME)||a.mkdirSync(B.HVIGOR_WRAPPER_TOOLS_HOME,{recursive:!0});const D={dependencies:{}};D.dependencies[B.PNPM]=t.PNPM_VERSION,a.writeFileSync(u,JSON.stringify(D))}catch(D){(0,d.logErrorAndExit)(`Error: EPERM: operation not permitted,create ${u} failed.`)}}(),(0,f.executeCommand)(u,["install","pnpm"],{cwd:B.HVIGOR_WRAPPER_TOOLS_HOME,stdio:["inherit","inherit","inherit"],env:process.env}),(0,d.logInfoPrintConsole)("Pnpm install success.")}}(Gu),function(){Gu.checkNpmConifg(),Gu.environmentHandler(),Gu.isPnpmInstalled()||Gu.executeInstallPnpm();const D=gu();_(u.join(D,i.WORK_SPACE))}();
\ No newline at end of file
diff --git a/hvigorw b/hvigorw
deleted file mode 100644
index 54aadd2..0000000
--- a/hvigorw
+++ /dev/null
@@ -1,48 +0,0 @@
-#!/bin/bash
-
-# ----------------------------------------------------------------------------
-#  Hvigor startup script, version 1.0.0
-# 
-#  Required ENV vars:
-#  ------------------
-#    NODE_HOME - location of a Node home dir
-#    or 
-#    Add /usr/local/nodejs/bin to the PATH environment variable
-# ----------------------------------------------------------------------------
-
-HVIGOR_APP_HOME=$(dirname $(readlink -f $0))
-HVIGOR_WRAPPER_SCRIPT=${HVIGOR_APP_HOME}/hvigor/hvigor-wrapper.js
-warn() {
-	echo ""
-	echo -e "\033[1;33m`date '+[%Y-%m-%d %H:%M:%S]'`$@\033[0m"
-}
-
-error() {
-	echo ""
-	echo -e "\033[1;31m`date '+[%Y-%m-%d %H:%M:%S]'`$@\033[0m"
-}
-
-fail() {
-	error "$@"
-	exit 1
-}
-
-# Determine node to start hvigor wrapper script
-if [ -n "${NODE_HOME}" ];then
-   EXECUTABLE_NODE="${NODE_HOME}/bin/node"
-   if [ ! -x "$EXECUTABLE_NODE" ];then
-       fail "ERROR: NODE_HOME is set to an invalid directory,check $NODE_HOME\n\nPlease set NODE_HOME in your environment to the location where your nodejs installed"
-   fi
-else
-   EXECUTABLE_NODE="node"
-   which ${EXECUTABLE_NODE} > /dev/null 2>&1 || fail "ERROR: NODE_HOME is not set and not 'node' command found in your path"
-fi
-
-# Check hvigor wrapper script
-if [ ! -r "$HVIGOR_WRAPPER_SCRIPT" ];then
-	fail "ERROR: Couldn't find hvigor/hvigor-wrapper.js in ${HVIGOR_APP_HOME}"
-fi
-
-# start hvigor-wrapper script
-exec "${EXECUTABLE_NODE}" \
-	"${HVIGOR_WRAPPER_SCRIPT}" "$@"
diff --git a/hvigorw.bat b/hvigorw.bat
deleted file mode 100644
index 29196b4..0000000
--- a/hvigorw.bat
+++ /dev/null
@@ -1,57 +0,0 @@
-@if "%DEBUG%" == "" @echo off
-@rem ##########################################################################
-@rem
-@rem  Hvigor startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-set WRAPPER_MODULE_PATH=%APP_HOME%\hvigor\hvigor-wrapper.js
-set NODE_EXE=node.exe
-
-goto start
-
-:start
-@rem Find node.exe
-if defined NODE_HOME goto findNodeFromNodeHome
-
-%NODE_EXE% --version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
-
-echo.
-echo ERROR: NODE_HOME is not set and no 'node' command could be found in your PATH.
-echo.
-echo Please set the NODE_HOME variable in your environment to match the
-echo location of your NodeJs installation.
-
-goto fail
-
-:findNodeFromNodeHome
-set NODE_HOME=%NODE_HOME:"=%
-set NODE_EXE_PATH=%NODE_HOME%/%NODE_EXE%
-
-if exist "%NODE_EXE_PATH%" goto execute
-echo.
-echo ERROR: NODE_HOME is not set and no 'node' command could be found in your PATH.
-echo.
-echo Please set the NODE_HOME variable in your environment to match the
-echo location of your NodeJs installation.
-
-goto fail
-
-:execute
-@rem Execute hvigor
-"%NODE_EXE%" %WRAPPER_MODULE_PATH% %*
-
-:fail
-exit /b 1
diff --git a/oh-package.json5 b/oh-package.json5
index 1608de0..f9b51d6 100644
--- a/oh-package.json5
+++ b/oh-package.json5
@@ -1,5 +1,5 @@
 {
-  "modelVersion": "5.0.1",
+  "modelVersion": "5.0.2",
   "license": "ISC",
   "devDependencies": {
     "@ohos/hypium": "1.0.6"
diff --git a/product/phone/src/main/ets/MainAbility/ExtensionPickerAbility.ts b/product/phone/src/main/ets/MainAbility/ExtensionPickerAbility.ts
index 19dd63e..7d7583d 100644
--- a/product/phone/src/main/ets/MainAbility/ExtensionPickerAbility.ts
+++ b/product/phone/src/main/ets/MainAbility/ExtensionPickerAbility.ts
@@ -23,7 +23,6 @@ import { GlobalContext } from '@ohos/common/src/main/ets/default/utils/GlobalCon
 import UIExtensionAbility from '@ohos.app.ability.UIExtensionAbility';
 import Want from '@ohos.app.ability.Want';
 import UIExtensionContentSession from '@ohos.app.ability.UIExtensionContentSession';
-import hilog from '@ohos.hilog';
 
 export default class ExtensionPickerAbility extends UIExtensionAbility {
   private cameraBasicFunction: any = null;
diff --git a/product/phone/src/main/ets/MainAbility/MainAbility.ts b/product/phone/src/main/ets/MainAbility/MainAbility.ts
index b308dff..9685d09 100644
--- a/product/phone/src/main/ets/MainAbility/MainAbility.ts
+++ b/product/phone/src/main/ets/MainAbility/MainAbility.ts
@@ -95,14 +95,14 @@ export default class MainAbility extends Ability {
     })
 
     if (this.launchWant?.action === wantConstant.Action.ACTION_IMAGE_CAPTURE ||
-    this.launchWant?.parameters?.action === wantConstant.Action.ACTION_IMAGE_CAPTURE) {
+      this.launchWant?.parameters?.action === wantConstant.Action.ACTION_IMAGE_CAPTURE) {
       GlobalContext.get().setCameraFormParam({
         action: 'capture',
         cameraPosition: 'PHOTO',
         mode: 'PHOTO'
       });
     } else if (this.launchWant?.action === wantConstant.Action.ACTION_VIDEO_CAPTURE ||
-    this.launchWant?.parameters?.action === wantConstant.Action.ACTION_VIDEO_CAPTURE) {
+      this.launchWant?.parameters?.action === wantConstant.Action.ACTION_VIDEO_CAPTURE) {
       GlobalContext.get().setCameraFormParam({
         action: 'video',
         cameraPosition: 'VIDEO',
diff --git a/product/phone/src/main/ets/common/ModeConfig.ts b/product/phone/src/main/ets/common/ModeConfig.ts
index 02012a2..ae6e628 100644
--- a/product/phone/src/main/ets/common/ModeConfig.ts
+++ b/product/phone/src/main/ets/common/ModeConfig.ts
@@ -19,10 +19,10 @@ export class ModeConfig {
 
   public getPaddingConfig(mode: string): PaddingData {
     switch (mode) {
-    case 'PHOTO':
-      return this.photoPadding
-    case 'VIDEO':
-      return this.videoPadding
+      case 'PHOTO':
+        return this.photoPadding
+      case 'VIDEO':
+        return this.videoPadding
     }
   }
 }
diff --git a/product/phone/src/main/ets/pages/BigVideoTimer.ets b/product/phone/src/main/ets/pages/BigVideoTimer.ets
index cd98afc..8b56df7 100644
--- a/product/phone/src/main/ets/pages/BigVideoTimer.ets
+++ b/product/phone/src/main/ets/pages/BigVideoTimer.ets
@@ -17,8 +17,7 @@ import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { GlobalContext } from '@ohos/common/src/main/ets/default/utils/GlobalContext';
 
 class StateStruct {
@@ -30,8 +29,6 @@ class StateStruct {
 }
 
 class BigVideoTimerDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -63,32 +60,20 @@ class BigVideoTimerDispatcher {
     this.mDispatch(Action.updateSmallVideoTimerVisible(false))
     this.mDispatch(Action.updateScreenStatus(false))
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export struct BigVideoTimer {
+  @State state: StateStruct = new StateStruct()
   private TAG: string = '[BigVideoTimer]'
   private timer: number = 0
   private timerTick: number = 0
   private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
-  @State state: StateStruct = new StateStruct()
   private mAction: BigVideoTimerDispatcher = new BigVideoTimerDispatcher();
 
-  private async onRecordPaused(): Promise<void> {
-    Log.info(`${this.TAG} onRecordPaused timer id: ${this.timer} E`)
-    clearInterval(this.timer)
-    Log.info(`${this.TAG} onRecordPaused X`)
-  }
-
-  private async onRecordResumed(): Promise<void> {
-    Log.info(`${this.TAG} onRecordResumed E`)
-    if (this.state.recordingTime <= 2) {
-      this.setIntervalTimer()
-    }
-    Log.info(`${this.TAG} onRecordResumed X`)
-  }
-
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -118,48 +103,6 @@ export struct BigVideoTimer {
     Log.info(`${this.TAG} aboutToDisappear X`)
   }
 
-  private setIntervalTimer(): void {
-    clearInterval(this.timer)
-    this.timer = setInterval(() => {
-      this.timerTick++
-      if (this.timerTick % 2 === 0) {
-        this.mAction.updateRecordingTime(this.state.recordingTime + 1)
-        let shownSec = '00'
-        let shownMin = '00'
-        let sec = this.state.recordingTime % 60
-        if (sec < 10) {
-          shownSec = `0${sec}`
-        } else {
-          shownSec = `${sec}`
-        }
-        let minute = Math.floor(this.state.recordingTime / 60)
-        if (minute < 10) {
-          shownMin = `0${minute}`
-        } else {
-          shownMin = `${minute}`
-        }
-        this.mAction.updateRecordingTimeDisplay(`${shownMin}:${shownSec}`)
-        if (this.state.recordingTime > 2) {
-          clearInterval(this.timer)
-          this.mAction.updateSmallVideoTimerVisible(true)
-          this.mAction.updateBigVideoTimerVisible(false)
-        }
-      }
-      this.mAction.updateRecordingSpotVisible(!this.state.isRecordingSpotVisible)
-      if (this.state.isThirdPartyCall && GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration) {
-        try {
-          let videoDuration: number = Number.parseInt(GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration as string)
-          Log.info(`${this.TAG} videoDuration is ${videoDuration}`);
-          if (this.state.recordingTime >= videoDuration) {
-            this.mAction.stopRecording();
-          }
-        } catch (error) {
-          Log.info(`${this.TAG} picker videoDuration --> ${JSON.stringify(error)}}`)
-        }
-      }
-    }, 500)
-  }
-
   build() {
     Column() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -200,4 +143,61 @@ export struct BigVideoTimer {
       }
     }.width('100%').height(96).position({ x: 0, y: 0 })
   }
+
+  private async onRecordPaused(): Promise<void> {
+    Log.info(`${this.TAG} onRecordPaused timer id: ${this.timer} E`)
+    clearInterval(this.timer)
+    Log.info(`${this.TAG} onRecordPaused X`)
+  }
+
+  private async onRecordResumed(): Promise<void> {
+    Log.info(`${this.TAG} onRecordResumed E`)
+    if (this.state.recordingTime <= 2) {
+      this.setIntervalTimer()
+    }
+    Log.info(`${this.TAG} onRecordResumed X`)
+  }
+
+  private setIntervalTimer(): void {
+    clearInterval(this.timer)
+    this.timer = setInterval(() => {
+      this.timerTick++
+      if (this.timerTick % 2 === 0) {
+        this.mAction.updateRecordingTime(this.state.recordingTime + 1)
+        let shownSec = '00'
+        let shownMin = '00'
+        let sec = this.state.recordingTime % 60
+        if (sec < 10) {
+          shownSec = `0${sec}`
+        } else {
+          shownSec = `${sec}`
+        }
+        let minute = Math.floor(this.state.recordingTime / 60)
+        if (minute < 10) {
+          shownMin = `0${minute}`
+        } else {
+          shownMin = `${minute}`
+        }
+        this.mAction.updateRecordingTimeDisplay(`${shownMin}:${shownSec}`)
+        if (this.state.recordingTime > 2) {
+          clearInterval(this.timer)
+          this.mAction.updateSmallVideoTimerVisible(true)
+          this.mAction.updateBigVideoTimerVisible(false)
+        }
+      }
+      this.mAction.updateRecordingSpotVisible(!this.state.isRecordingSpotVisible)
+      if (this.state.isThirdPartyCall && GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration) {
+        try {
+          let videoDuration: number =
+            Number.parseInt(GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration as string)
+          Log.info(`${this.TAG} videoDuration is ${videoDuration}`);
+          if (this.state.recordingTime >= videoDuration) {
+            this.mAction.stopRecording();
+          }
+        } catch (error) {
+          Log.info(`${this.TAG} picker videoDuration --> ${JSON.stringify(error)}}`)
+        }
+      }
+    }, 500)
+  }
 }
\ No newline at end of file
diff --git a/product/phone/src/main/ets/pages/Control.ets b/product/phone/src/main/ets/pages/Control.ets
index f085b93..4e58934 100644
--- a/product/phone/src/main/ets/pages/Control.ets
+++ b/product/phone/src/main/ets/pages/Control.ets
@@ -16,8 +16,7 @@
 import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import {
   PersistType,
@@ -36,8 +35,6 @@ class StateStruct {
 }
 
 class ControlDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -67,6 +64,8 @@ class ControlDispatcher {
   public updateListStatus(enable: boolean): void {
     this.mDispatch(Action.uiState(enable));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class SwipeModeIndexStruct {
@@ -76,17 +75,17 @@ class SwipeModeIndexStruct {
 
 @Component
 export struct Control {
-  private TAG: string = '[Control]';
   appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
-  private scroller: Scroller = new Scroller();
-  private modeArray: Array<string> = ['PHOTO', 'VIDEO'];
-  private itemWidth: number = 56;
-  protected mPreferencesService: PreferencesService = PreferencesService.getInstance();
   @State state: StateStruct = new StateStruct();
-  private mAction: ControlDispatcher = new ControlDispatcher();
   @State startScroll: number = 0;
   @State endScroll: number = 0;
   @State index: number = 0;
+  protected mPreferencesService: PreferencesService = PreferencesService.getInstance();
+  private TAG: string = '[Control]';
+  private scroller: Scroller = new Scroller();
+  private modeArray: Array<string> = ['PHOTO', 'VIDEO'];
+  private itemWidth: number = 56;
+  private mAction: ControlDispatcher = new ControlDispatcher();
 
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear E`);
@@ -115,36 +114,11 @@ export struct Control {
     Log.info(`${this.TAG} aboutToDisappear X`);
   }
 
-  private changeToMode(modeIndex: number): void {
-    Log.info(`${this.TAG} changeToMode modeIndex: ${modeIndex} E`);
-    this.scroller.scrollToIndex(modeIndex);
-    if (this.modeArray[modeIndex] !== this.state.mode) {
-      Log.info(`${this.TAG} this.state.changeToMode(${this.modeArray[modeIndex]})`);
-      this.mAction.changeToMode(this.modeArray[modeIndex]);
-      this.mPreferencesService.putModeValue(PersistType.FOR_AWHILE, modeIndex);
-      this.mPreferencesService.flushMode();
-    } else {
-      this.mAction.updateListStatus(true);
-    }
-    Log.info(`${this.TAG} changeToMode X`);
-  }
-
-  private getModeFontWeight(modeIndex: number): FontWeight {
-    if (this.state.mode === this.modeArray[modeIndex]) {
-      return FontWeight.Bold;
-    } else {
-      return FontWeight.Regular;
-    }
-  }
-
-  private swipeChangeMode(data: SwipeModeIndexStruct): void {
-    this.changeToMode(data.swipeModeIndex);
-  }
-
   build() {
     Column() {
       Stack({ alignContent: Alignment.BottomStart }) {
-        if ((this.state.isThirdPartyCall || this.state.isFaCall) && this.state.mode === 'PHOTO' && (this.state.thirdCallAction != 'ALL')) {
+        if ((this.state.isThirdPartyCall || this.state.isFaCall) && this.state.mode === 'PHOTO' &&
+          (this.state.thirdCallAction != 'ALL')) {
           Row() {
             Text($r('app.string.photo_mode'))
               .width('100%')
@@ -154,7 +128,8 @@ export struct Control {
               .fontWeight(FontWeight.Bold)
               .textAlign(TextAlign.Center)
           }.width('100%').height('100%').offset({ x: -156, y: 0 })
-        } else if ((this.state.isThirdPartyCall || this.state.isFaCall) && this.state.mode === 'VIDEO' && (this.state.thirdCallAction != 'ALL')) {
+        } else if ((this.state.isThirdPartyCall || this.state.isFaCall) && this.state.mode === 'VIDEO' &&
+          (this.state.thirdCallAction != 'ALL')) {
           Row() {
             Text($r('app.string.video_mode'))
               .width('100%')
@@ -225,4 +200,30 @@ export struct Control {
       }.width('100%').height(58)
     }
   }
+
+  private changeToMode(modeIndex: number): void {
+    Log.info(`${this.TAG} changeToMode modeIndex: ${modeIndex} E`);
+    this.scroller.scrollToIndex(modeIndex);
+    if (this.modeArray[modeIndex] !== this.state.mode) {
+      Log.info(`${this.TAG} this.state.changeToMode(${this.modeArray[modeIndex]})`);
+      this.mAction.changeToMode(this.modeArray[modeIndex]);
+      this.mPreferencesService.putModeValue(PersistType.FOR_AWHILE, modeIndex);
+      this.mPreferencesService.flushMode();
+    } else {
+      this.mAction.updateListStatus(true);
+    }
+    Log.info(`${this.TAG} changeToMode X`);
+  }
+
+  private getModeFontWeight(modeIndex: number): FontWeight {
+    if (this.state.mode === this.modeArray[modeIndex]) {
+      return FontWeight.Bold;
+    } else {
+      return FontWeight.Regular;
+    }
+  }
+
+  private swipeChangeMode(data: SwipeModeIndexStruct): void {
+    this.changeToMode(data.swipeModeIndex);
+  }
 }
\ No newline at end of file
diff --git a/product/phone/src/main/ets/pages/FootBar.ets b/product/phone/src/main/ets/pages/FootBar.ets
index 6ab237c..6eb6a8a 100644
--- a/product/phone/src/main/ets/pages/FootBar.ets
+++ b/product/phone/src/main/ets/pages/FootBar.ets
@@ -18,8 +18,7 @@ import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { CameraSwitchButton } from '@ohos/common/src/main/ets/default/featurecommon/cameraswitcher/CameraSwitchButton';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { ShutterButton } from '@ohos/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButton';
 import { ThumbnailView } from '@ohos/common/src/main/ets/default/featurecommon/thumbnail/ThumbnailView';
@@ -34,31 +33,21 @@ class StateStruct {
 }
 
 class FootBarDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct FootBar {
-  private TAG: string = '[FootBar]:';
   @State state: StateStruct = new StateStruct();
   @State isRecording: boolean = false;
+  private TAG: string = '[FootBar]:';
   private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
   private mAction: FootBarDispatcher = new FootBarDispatcher();
 
-  private async onRecordStart(): Promise<void> {
-    this.isRecording = true
-    Log.info(`${this.TAG} onRecordStart`)
-  }
-
-  private async onRecordStop(): Promise<void> {
-    this.isRecording = false
-    Log.info(`${this.TAG} onRecordStop`)
-  }
-
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -85,20 +74,6 @@ export struct FootBar {
     Log.info(`${this.TAG} aboutToDisappear X`)
   }
 
-  private isThumbnailViewVisibility(): boolean {
-    return!this.isRecording && !this.state.isThirdPartyCall &&
-    this.state.videoState !== "startTakeVideo" && this.state.videoState !== "pauseTakeVideo"
-  }
-
-  private isPhoneSwitchShow(): boolean {
-    if (this.state.platformCapability) {
-      return deviceInfo.deviceType !== 'default' && this.state.platformCapability?.mCameraCount > 1 &&
-      !this.isRecording
-    } else {
-      return false;
-    }
-  }
-
   build() {
     Flex({
       direction: FlexDirection.Row,
@@ -125,4 +100,28 @@ export struct FootBar {
     .padding({ top: 10, bottom: 10 })
     .visibility(this.state.showZoomLabelValue ? Visibility.Visible : Visibility.Hidden)
   }
+
+  private async onRecordStart(): Promise<void> {
+    this.isRecording = true
+    Log.info(`${this.TAG} onRecordStart`)
+  }
+
+  private async onRecordStop(): Promise<void> {
+    this.isRecording = false
+    Log.info(`${this.TAG} onRecordStop`)
+  }
+
+  private isThumbnailViewVisibility(): boolean {
+    return !this.isRecording && !this.state.isThirdPartyCall &&
+      this.state.videoState !== "startTakeVideo" && this.state.videoState !== "pauseTakeVideo"
+  }
+
+  private isPhoneSwitchShow(): boolean {
+    if (this.state.platformCapability) {
+      return deviceInfo.deviceType !== 'default' && this.state.platformCapability?.mCameraCount > 1 &&
+        !this.isRecording
+    } else {
+      return false;
+    }
+  }
 }
\ No newline at end of file
diff --git a/product/phone/src/main/ets/pages/PreviewArea.ets b/product/phone/src/main/ets/pages/PreviewArea.ets
index 95bcc04..bedafa1 100644
--- a/product/phone/src/main/ets/pages/PreviewArea.ets
+++ b/product/phone/src/main/ets/pages/PreviewArea.ets
@@ -23,8 +23,7 @@ import { CameraNeedStatus, CameraStatus } from '@ohos/common/src/main/ets/defaul
 import { CameraId } from '@ohos/common/src/main/ets/default/setting/settingitem/CameraId';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { GeoLocation } from '@ohos/common/src/main/ets/default/featurecommon/geolocation/GeoLocation';
 import { SettingManager } from '@ohos/common/src/main/ets/default/setting/SettingManager';
@@ -76,8 +75,6 @@ class StateStruct {
 }
 
 class PreviewAreaDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -233,6 +230,8 @@ class PreviewAreaDispatcher {
   public swipeModeChangeDone(actionOff: boolean): void {
     this.mDispatch(Action.swipeModeChangeDone(actionOff));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class SizeStruct {
@@ -254,7 +253,6 @@ class KeepScreenOnStruct {
 
 @Component
 export struct PreviewArea {
-  private TAG: string = '[PreviewArea]:';
   appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
   @State state: StateStruct = new StateStruct();
   @State mAspectRatio: number = 3 / 4;
@@ -262,6 +260,7 @@ export struct PreviewArea {
   @State btnSwitchSec: boolean = false;
   @State isSwitchBackground: boolean = false;
   @State pageType: string = '';
+  private TAG: string = '[PreviewArea]:';
   private isShowPreview: boolean = false;
   private isForegroundInit: boolean = false;
   private settingManager = SettingManager.getInstance();
@@ -270,6 +269,251 @@ export struct PreviewArea {
   private modeArray: Array<string> = ['PHOTO', 'VIDEO'];
   private mAction: PreviewAreaDispatcher = new PreviewAreaDispatcher();
 
+  aboutToAppear(): void {
+    Log.info(`${this.TAG} PreviewArea aboutToAppear ${JSON.stringify(router.getParams())}`);
+    let routerParams = router.getParams();
+    if (routerParams && routerParams.pageType) {
+      this.pageType = routerParams.pageType.toString();
+    }
+
+    getStore().subscribe((state: OhCombinedState) => {
+      let isShowBlur: boolean = !state.contextReducer.uiEnable && state.contextReducer.uiStateMode == UiStateMode.NONE;
+      this.state = {
+        mode: state.modeReducer.mode,
+        curMode: state.modeReducer.curMode,
+        isShowPreview: state.previewReducer.isShowPreview,
+        surfaceId: state.previewReducer.surfaceId,
+        xComponentWidth: state.previewReducer.xComponentWidth,
+        xComponentHeight: state.previewReducer.xComponentHeight,
+        cameraPosition: state.cameraReducer.cameraPosition,
+        curCameraPosition: state.cameraReducer.curCameraPosition,
+        minZoomRatio: state.zoomReducer.minZoomRatio,
+        maxZoomRatio: state.zoomReducer.maxZoomRatio,
+        zoomRatio: state.zoomReducer.zoomRatio,
+        platformCapability: state.cameraInitReducer.platformCapability,
+        videoState: state.recordReducer.videoState,
+        isShowZoomText: state.zoomReducer.isShowZoomText,
+        showZoomLabelValue: state.zoomReducer.showZoomLabelValue,
+        footBarHeight: state.contextReducer.footBarHeight,
+        isShowFlashBlack: state.previewReducer.isShowFlashBlack,
+        isShowBigText: state.modeReducer.isShowBigText,
+        isShowtimeLapse: state.settingReducer.isShowtimeLapse,
+        isBigVideoTimerVisible: state.recordReducer.isBigVideoTimerVisible,
+        isSmallVideoTimerVisible: state.recordReducer.isSmallVideoTimerVisible,
+        isAssGridViewShow: state.settingReducer.isAssGridViewShow,
+        modeIndex: state.modeReducer.modeIndex,
+        isThirdPartyCall: state.contextReducer.isThirdPartyCall,
+        modeChangeDone: state.modeReducer.modeChangeDone,
+        isShowPageView: state.settingReducer.isShowSettingView,
+        showBlur: isShowBlur,
+        isFaCall: state.contextReducer.isFaCall,
+        rotateAngle: 0,
+        rotateAngleSec: 0,
+        switchBackgroundOpacity: 1,
+      };
+    }, (dispatch: Dispatch) => {
+      this.mAction.setDispatch(dispatch);
+    });
+    this.state.platformCapability;
+    this.appEventBus.on(Action.ACTION_INIT_DONE, (data: CameraInitStruct) => this.onCameraInit(data));
+    this.appEventBus.on(Action.ACTION_ON_MODE_CHANGED, (data: ModeStruct) => this.onModeChanged(data));
+    this.appEventBus.on(Action.ACTION_KEEP_SCREEN_ON, (data: KeepScreenOnStruct) => this.onKeepScreen(data));
+    this.appEventBus.on(Action.ACTION_RECORD_ERROR, () => this.onRecordError());
+    this.appEventBus.on(Action.ACTION_UPDATE_CAMERA_STATUS, () => this.updateCameraStatus());
+    GlobalContext.get().setObject('updateCameraStatus', () => {
+      Log.info(`${this.TAG} globalThis.updateCameraStatus called`);
+      this.updateCameraStatus();
+    });
+    this.calledByOther();
+    this.mAction.initCamera(this.state.curCameraPosition, this.state.mode);
+    this.mAction.initZoomRatio(1, 6); //TODO 需要动态取得实际变焦能力范围
+    Log.start(Log.X_COMPONENT_LIFE);
+  }
+
+  aboutToDisappear(): void {
+    Log.info(`${this.TAG} previewAreaLand aboutToDisappear called`);
+    this.appEventBus.off(Action.ACTION_INIT_DONE, (data: CameraInitStruct) => this.onCameraInit(data));
+    this.appEventBus.off(Action.ACTION_ON_MODE_CHANGED, (data: ModeStruct) => this.onModeChanged(data));
+    this.appEventBus.off(Action.ACTION_UPDATE_CAMERA_STATUS, () => this.updateCameraStatus());
+    GeoLocation.getInstance().off();
+    GlobalContext.get().setObject('cameraNeedStatus', CameraNeedStatus.CAMERA_NEED_RELEASE);
+    this.updateCameraStatus();
+  }
+
+  onBackPress(): void {
+    Log.info(`${this.TAG} previewAreaLand onBackPress called`);
+  }
+
+  onPageHide(): void {
+    this.mAction.startVideoFlag(false);
+  }
+
+  build() {
+    Column() {
+      if (this.state.isShowPreview) {
+        Stack() {
+          XComponent({
+            id: '',
+            type: 'surface',
+            libraryname: '',
+            controller: GlobalContext.get().getXComponentController()
+          })
+            .onLoad(() => {
+              Log.end(Log.X_COMPONENT_LIFE);
+              Log.info(`${this.TAG} XComponent_onLoad `);
+              let surfaceId: number = GlobalContext.get().getXComponentController().getXComponentSurfaceId();
+              this.mAction.prepareSurface(surfaceId);
+              this.doCameraAction();
+            })
+            .width(this.state.xComponentWidth)
+            .height(this.state.xComponentHeight)
+            .animation({
+              duration: 100,
+              curve: Curve.Sharp,
+              delay: 0,
+              iterations: 1,
+              playMode: PlayMode.Normal
+            })
+
+          if (this.isSwitchBackground) {
+            Column() {
+            }
+            .width(this.state.xComponentWidth)
+            .height(this.state.xComponentHeight)
+            .backgroundColor('#000')
+            .opacity(this.state.switchBackgroundOpacity)
+          }
+
+          if (this.state.showBlur) {
+            Column()
+              .width(this.state.xComponentWidth)
+              .height(this.state.xComponentHeight)
+              .backgroundColor(Color.Black)
+              .border({ width: { top: 0.5, bottom: 0.5 }, color: Color.Black })
+          }
+
+          if (this.btnSwitch) {
+            Image($r('app.media.whitePicture'))
+              .width(this.state.xComponentWidth)
+              .height(this.state.xComponentHeight)
+              .syncLoad(false)
+              .scale({ y: 1.0 })
+              .rotate({
+                x: 0,
+                y: 10,
+                z: 0,
+                angle: this.state.rotateAngle
+              })// .opacity(this.state.btnOpacity_first)
+              .onComplete(() => {
+              })
+          }
+
+          if (this.btnSwitchSec) {
+            Image($r('app.media.whitePicture'))
+              .width(this.state.xComponentWidth)
+              .height(this.state.xComponentHeight)
+              .syncLoad(false)
+              .scale({ y: 1.0 })
+              .rotate({
+                x: 0,
+                y: 10,
+                z: 0,
+                angle: this.state.rotateAngleSec
+              })// .opacity(this.state.btnOpacity_sec)
+              .onComplete(() => {
+              })
+          }
+
+          if (this.state.isShowFlashBlack) {
+            ShowFlashBlack();
+          }
+
+          if (this.state.isShowZoomText && deviceInfo.deviceType !== "default" && !this.state.isShowtimeLapse) {
+            Stack({ alignContent: Alignment.Top }) {
+              ZoomText({ state: $state })
+            }
+            .width('100%')
+            .height('96%')
+          }
+
+          if (this.state.isShowBigText) {
+            Stack({ alignContent: Alignment.BottomStart }) {
+              BigText()
+            }
+            .width('100%')
+            .height('100%')
+            .padding({ bottom: '40vp' })
+          }
+
+          if (this.state.isAssGridViewShow === '1' && this.state.mode !== 'MORE') {
+            AssistiveGridView();
+          }
+
+          if (this.state.isSmallVideoTimerVisible) {
+            SmallVideoTimer();
+          }
+
+          if (this.state.isBigVideoTimerVisible) {
+            BigVideoTimer();
+          }
+
+          if (this.state.isShowtimeLapse) {
+            Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+              Column() {
+                TimeLapseView();
+              }.width('100%').height(150)
+            }
+          }
+        }
+        .width('100%')
+        .height('100%')
+      }
+    }
+    .height('100%')
+    .width(this.state.xComponentWidth)
+    .aspectRatio(this.mAspectRatio)
+    .margin({ top: 0 })
+    .backgroundColor('#000')
+    .gesture(
+      GestureGroup(
+        GestureMode.Exclusive,
+        TapGesture({ fingers: 1, count: 1 })
+          .onAction(() => this.onPreviewClicked()),
+        PinchGesture({ fingers: 2, distance: 1 })
+          .onActionStart((event) => {
+            if (event === undefined) {
+              return;
+            }
+            this.pinchGestureStart(event)
+          })
+          .onActionUpdate((event) => {
+            if (event === undefined) {
+              return;
+            }
+            this.pinchGestureUpdate(event)
+          })
+          .onActionEnd((event) => {
+            if (event === undefined) {
+              return;
+            }
+            this.pinchGestureEnd(event)
+          }),
+        PanGesture({ fingers: 1, direction: PanDirection.Left, distance: 10 })
+          .onActionEnd(() => {
+            if (!this.state.isThirdPartyCall && !GlobalContext.get().getCameraAbilityWant()?.parameters?.from) {
+              this.swipeChangeMode(1);
+            }
+          }),
+        PanGesture({ fingers: 1, direction: PanDirection.Right, distance: 10 })
+          .onActionEnd(() => {
+            if (!this.state.isThirdPartyCall && !GlobalContext.get().getCameraAbilityWant()?.parameters?.from) {
+              this.swipeChangeMode(-1);
+            }
+          })
+      )
+    )
+  }
+
   private async onCameraInit(data: CameraInitStruct): Promise<void> {
     Log.info(`${this.TAG} EventBus onCameraInit isShowPreview = ${this.isShowPreview} platformCapability = ${this.state.platformCapability} E`);
     if (this.isForegroundInit === true) {
@@ -351,77 +595,6 @@ export struct PreviewArea {
     Log.info(`${this.TAG} onRecordError invoke X`);
   }
 
-  aboutToAppear(): void {
-    Log.info(`${this.TAG} PreviewArea aboutToAppear ${JSON.stringify(router.getParams())}`);
-    let routerParams = router.getParams();
-    if (routerParams && routerParams.pageType) {
-      this.pageType = routerParams.pageType.toString();
-    }
-
-    getStore().subscribe((state: OhCombinedState) => {
-      let isShowBlur: boolean = !state.contextReducer.uiEnable && state.contextReducer.uiStateMode == UiStateMode.NONE;
-      this.state = {
-        mode: state.modeReducer.mode,
-        curMode: state.modeReducer.curMode,
-        isShowPreview: state.previewReducer.isShowPreview,
-        surfaceId: state.previewReducer.surfaceId,
-        xComponentWidth: state.previewReducer.xComponentWidth,
-        xComponentHeight: state.previewReducer.xComponentHeight,
-        cameraPosition: state.cameraReducer.cameraPosition,
-        curCameraPosition: state.cameraReducer.curCameraPosition,
-        minZoomRatio: state.zoomReducer.minZoomRatio,
-        maxZoomRatio: state.zoomReducer.maxZoomRatio,
-        zoomRatio: state.zoomReducer.zoomRatio,
-        platformCapability: state.cameraInitReducer.platformCapability,
-        videoState: state.recordReducer.videoState,
-        isShowZoomText: state.zoomReducer.isShowZoomText,
-        showZoomLabelValue: state.zoomReducer.showZoomLabelValue,
-        footBarHeight: state.contextReducer.footBarHeight,
-        isShowFlashBlack: state.previewReducer.isShowFlashBlack,
-        isShowBigText: state.modeReducer.isShowBigText,
-        isShowtimeLapse: state.settingReducer.isShowtimeLapse,
-        isBigVideoTimerVisible: state.recordReducer.isBigVideoTimerVisible,
-        isSmallVideoTimerVisible: state.recordReducer.isSmallVideoTimerVisible,
-        isAssGridViewShow: state.settingReducer.isAssGridViewShow,
-        modeIndex: state.modeReducer.modeIndex,
-        isThirdPartyCall: state.contextReducer.isThirdPartyCall,
-        modeChangeDone: state.modeReducer.modeChangeDone,
-        isShowPageView: state.settingReducer.isShowSettingView,
-        showBlur: isShowBlur,
-        isFaCall: state.contextReducer.isFaCall,
-        rotateAngle: 0,
-        rotateAngleSec: 0,
-        switchBackgroundOpacity: 1,
-      };
-    }, (dispatch: Dispatch) => {
-      this.mAction.setDispatch(dispatch);
-    });
-    this.state.platformCapability;
-    this.appEventBus.on(Action.ACTION_INIT_DONE, (data: CameraInitStruct) => this.onCameraInit(data));
-    this.appEventBus.on(Action.ACTION_ON_MODE_CHANGED, (data: ModeStruct) => this.onModeChanged(data));
-    this.appEventBus.on(Action.ACTION_KEEP_SCREEN_ON, (data: KeepScreenOnStruct) => this.onKeepScreen(data));
-    this.appEventBus.on(Action.ACTION_RECORD_ERROR, () => this.onRecordError());
-    this.appEventBus.on(Action.ACTION_UPDATE_CAMERA_STATUS, () => this.updateCameraStatus());
-    GlobalContext.get().setObject('updateCameraStatus', () => {
-      Log.info(`${this.TAG} globalThis.updateCameraStatus called`);
-      this.updateCameraStatus();
-    });
-    this.calledByOther();
-    this.mAction.initCamera(this.state.curCameraPosition, this.state.mode);
-    this.mAction.initZoomRatio(1, 6); //TODO 需要动态取得实际变焦能力范围
-    Log.start(Log.X_COMPONENT_LIFE);
-  }
-
-  aboutToDisappear(): void {
-    Log.info(`${this.TAG} previewAreaLand aboutToDisappear called`);
-    this.appEventBus.off(Action.ACTION_INIT_DONE, (data: CameraInitStruct) => this.onCameraInit(data));
-    this.appEventBus.off(Action.ACTION_ON_MODE_CHANGED, (data: ModeStruct) => this.onModeChanged(data));
-    this.appEventBus.off(Action.ACTION_UPDATE_CAMERA_STATUS, () => this.updateCameraStatus());
-    GeoLocation.getInstance().off();
-    GlobalContext.get().setObject('cameraNeedStatus', CameraNeedStatus.CAMERA_NEED_RELEASE);
-    this.updateCameraStatus();
-  }
-
   private releaseCamera(): void {
     Log.info(`${this.TAG} globalThis.releaseCamera called`);
     GlobalContext.get().setObject('cameraNeedStatus', CameraNeedStatus.CAMERA_NO_NEED_TO_DO);
@@ -499,7 +672,7 @@ export struct PreviewArea {
       case 'ALL':
         this.mAction.initMode(this.state.mode);
         this.mAction.updateModeIndex(this.state.modeIndex);
-      // private modeArray: Array<string> = ['PHOTO', 'VIDEO']; //, 'MORE'this.modeArray[modeIndex]
+        // private modeArray: Array<string> = ['PHOTO', 'VIDEO']; //, 'MORE'this.modeArray[modeIndex]
         break;
       default:
         Log.info(`${this.TAG} FA default`);
@@ -533,14 +706,6 @@ export struct PreviewArea {
       GlobalContext.get().getT<string>('cameraStatus') == CameraStatus.CAMERA_TAKE_VIDEO_FINISHED;
   }
 
-  onBackPress(): void {
-    Log.info(`${this.TAG} previewAreaLand onBackPress called`);
-  }
-
-  onPageHide(): void {
-    this.mAction.startVideoFlag(false);
-  }
-
   private pinchGestureStart(event: GestureEvent): void {
     Log.info(`${this.TAG} pinchGestureStart E`);
     if (this.state.mode != 'MULTI' && this.state.curCameraPosition !== 'FRONT') {
@@ -593,7 +758,8 @@ export struct PreviewArea {
 
   private swipeChangeMode(swipe: number): void {
     Log.info(`${this.TAG} swipeChangeMode E`);
-    if (!this.state.modeChangeDone && this.state.modeIndex + swipe >= 0 && this.state.modeIndex + swipe <= this.modeArray.length - 1 && !this.state.isShowtimeLapse) {
+    if (!this.state.modeChangeDone && this.state.modeIndex + swipe >= 0 &&
+      this.state.modeIndex + swipe <= this.modeArray.length - 1 && !this.state.isShowtimeLapse) {
       this.mAction.swipeChangeMode(this.state.modeIndex + swipe);
       this.mAction.swipeModeChangeDone(true);
     }
@@ -615,154 +781,4 @@ export struct PreviewArea {
     }
     Log.info(`${this.TAG} onKeepScreen X`);
   }
-
-  build() {
-    Column() {
-      if (this.state.isShowPreview) {
-        Stack() {
-          XComponent({
-            id: '',
-            type: 'surface',
-            libraryname: '',
-            controller: GlobalContext.get().getXComponentController()
-          })
-            .onLoad(() => {
-              Log.end(Log.X_COMPONENT_LIFE);
-              Log.info(`${this.TAG} XComponent_onLoad `);
-              let surfaceId: number = GlobalContext.get().getXComponentController().getXComponentSurfaceId();
-              this.mAction.prepareSurface(surfaceId);
-              this.doCameraAction();
-            })
-            .width(this.state.xComponentWidth)
-            .height(this.state.xComponentHeight)
-            .animation({
-              duration: 100,
-              curve: Curve.Sharp,
-              delay: 0,
-              iterations: 1,
-              playMode: PlayMode.Normal
-            })
-
-          if (this.isSwitchBackground) {
-            Column() {
-            }
-            .width(this.state.xComponentWidth)
-            .height(this.state.xComponentHeight)
-            .backgroundColor('#000')
-            .opacity(this.state.switchBackgroundOpacity)
-          }
-
-          if (this.state.showBlur) {
-            Column()
-              .width(this.state.xComponentWidth)
-              .height(this.state.xComponentHeight)
-              .backgroundColor(Color.Black)
-              .border({ width: { top: 0.5, bottom: 0.5 }, color: Color.Black })
-          }
-
-          if (this.btnSwitch) {
-            Image($r('app.media.whitePicture'))
-              .width(this.state.xComponentWidth)
-              .height(this.state.xComponentHeight)
-              .syncLoad(false)
-              .scale({ y: 1.0 })
-              .rotate({ x: 0, y: 10, z: 0, angle: this.state.rotateAngle })// .opacity(this.state.btnOpacity_first)
-              .onComplete(() => {
-              })
-          }
-
-          if (this.btnSwitchSec) {
-            Image($r('app.media.whitePicture'))
-              .width(this.state.xComponentWidth)
-              .height(this.state.xComponentHeight)
-              .syncLoad(false)
-              .scale({ y: 1.0 })
-              .rotate({ x: 0, y: 10, z: 0, angle: this.state.rotateAngleSec })// .opacity(this.state.btnOpacity_sec)
-              .onComplete(() => {
-              })
-          }
-
-          if (this.state.isShowFlashBlack) {
-            ShowFlashBlack();
-          }
-
-          if (this.state.isShowZoomText && deviceInfo.deviceType !== "default" && !this.state.isShowtimeLapse) {
-            Stack({ alignContent: Alignment.Top }) {
-              ZoomText({ state: $state })
-            }
-            .width('100%')
-            .height('96%')
-          }
-
-          if (this.state.isShowBigText) {
-            Stack({ alignContent: Alignment.BottomStart }) {
-              BigText()
-            }
-            .width('100%')
-            .height('100%')
-            .padding({ bottom: '40vp' })
-          }
-
-          if (this.state.isAssGridViewShow === '1' && this.state.mode !== 'MORE') {
-            AssistiveGridView();
-          }
-
-          if (this.state.isSmallVideoTimerVisible) {
-            SmallVideoTimer();
-          }
-
-          if (this.state.isBigVideoTimerVisible) {
-            BigVideoTimer();
-          }
-
-          if (this.state.isShowtimeLapse) {
-            Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-              Column() {
-                TimeLapseView();
-              }.width('100%').height(150)
-            }
-          }
-        }
-        .width('100%')
-        .height('100%')
-      }
-    }
-    .height('100%')
-    .width(this.state.xComponentWidth)
-    .aspectRatio(this.mAspectRatio)
-    .margin({ top: 0 })
-    .backgroundColor('#000')
-    .gesture(
-      GestureGroup(
-        GestureMode.Exclusive,
-        TapGesture({ fingers: 1, count: 1 })
-          .onAction(() => this.onPreviewClicked()),
-        PinchGesture({ fingers: 2, distance: 1 })
-          .onActionStart((event) => {
-            if (event === undefined) return;
-            this.pinchGestureStart(event)
-          })
-          .onActionUpdate((event) => {
-            if (event === undefined) return;
-            this.pinchGestureUpdate(event)
-          })
-          .onActionEnd((event) => {
-            if (event === undefined) return;
-            this.pinchGestureEnd(event)
-          }),
-        PanGesture({ fingers: 1, direction: PanDirection.Left, distance: 10 })
-          .onActionEnd(() => {
-            if (!this.state.isThirdPartyCall && !GlobalContext.get().getCameraAbilityWant()?.parameters?.from) {
-              this.swipeChangeMode(1);
-            }
-          }),
-        PanGesture({ fingers: 1, direction: PanDirection.Right, distance: 10 })
-          .onActionEnd(() => {
-            if (!this.state.isThirdPartyCall && !GlobalContext.get().getCameraAbilityWant()?.parameters?.from) {
-              this.swipeChangeMode(-1);
-            }
-          })
-      )
-    )
-  }
 }
\ No newline at end of file
diff --git a/product/phone/src/main/ets/pages/SettingView.ets b/product/phone/src/main/ets/pages/SettingView.ets
index 7ac602c..310d2a4 100644
--- a/product/phone/src/main/ets/pages/SettingView.ets
+++ b/product/phone/src/main/ets/pages/SettingView.ets
@@ -16,8 +16,7 @@
 import deviceInfo from '@ohos.deviceInfo';
 import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { SettingManager } from '@ohos/common/src/main/ets/default/setting/SettingManager';
 import { SettingItem } from '@ohos/common/src/main/ets/default/featurecommon/settingview/phone/SettingItem';
@@ -31,8 +30,6 @@ class StateStruct {
 }
 
 class SettingViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -56,6 +53,8 @@ class SettingViewDispatcher {
   public reStartPreview(zoomRatio: number): void {
     this.mDispatch(Action.reStartPreview(zoomRatio));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class SizeStruct {
@@ -65,14 +64,14 @@ class SizeStruct {
 
 @Component
 export struct SettingView {
-  private TAG: string = '[SettingView]:'
-  private settingManager = SettingManager.getInstance()
   @State checkNameList: Array<string> = ['4:3', '[16:9] 720p']
   @State closeFlag: boolean = false
   @State tempGutter: number = 12; //列间距
   @State tempMargin: number = 12; //两侧间距
   @State settingsList: SettingGroupItem[] = new SettingListModel().getSettingList()
   @State state: StateStruct = new StateStruct()
+  private TAG: string = '[SettingView]:'
+  private settingManager = SettingManager.getInstance()
   private mEventBus = EventBusManager.getInstance().getEventBus()
   private WH_100_100: string = "100%";
   private mAction: SettingViewDispatcher = new SettingViewDispatcher();
@@ -111,24 +110,6 @@ export struct SettingView {
     return true;
   }
 
-  private aspectRatioChange(xComponentSize: SizeStruct): void {
-    if (this.state.mode != 'VIDEO') {
-      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
-      this.mAction.reStartPreview(this.state.zoomRatio)
-    }
-  }
-
-  private resolutionChange(xComponentSize: SizeStruct): void {
-    if (this.state.mode == 'VIDEO') {
-      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
-      this.mAction.reStartPreview(this.state.zoomRatio)
-    }
-  }
-
-  private assistiveGridChange(mAssistiveGrid: number): void {
-    this.mAction.assistiveGridView(mAssistiveGrid)
-  }
-
   build() {
     Flex({ direction: FlexDirection.Column }) {
       Row() {
@@ -194,4 +175,22 @@ export struct SettingView {
     .height(this.WH_100_100)
     .backgroundColor(Color.Black)
   }
+
+  private aspectRatioChange(xComponentSize: SizeStruct): void {
+    if (this.state.mode != 'VIDEO') {
+      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
+      this.mAction.reStartPreview(this.state.zoomRatio)
+    }
+  }
+
+  private resolutionChange(xComponentSize: SizeStruct): void {
+    if (this.state.mode == 'VIDEO') {
+      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
+      this.mAction.reStartPreview(this.state.zoomRatio)
+    }
+  }
+
+  private assistiveGridChange(mAssistiveGrid: number): void {
+    this.mAction.assistiveGridView(mAssistiveGrid)
+  }
 }
\ No newline at end of file
diff --git a/product/phone/src/main/ets/pages/SmallVideoTimer.ets b/product/phone/src/main/ets/pages/SmallVideoTimer.ets
index 1ff15cf..f3a765d 100644
--- a/product/phone/src/main/ets/pages/SmallVideoTimer.ets
+++ b/product/phone/src/main/ets/pages/SmallVideoTimer.ets
@@ -16,8 +16,7 @@
 import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { GlobalContext } from '@ohos/common/src/main/ets/default/utils/GlobalContext';
 
@@ -30,8 +29,6 @@ class StateStruct {
 }
 
 class SmallVideoTimerDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -55,29 +52,19 @@ class SmallVideoTimerDispatcher {
     this.mDispatch(Action.updateSmallVideoTimerVisible(false))
     this.mDispatch(Action.updateScreenStatus(false))
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct SmallVideoTimer {
+  @State state: StateStruct = new StateStruct()
   private TAG: string = '[SmallVideoTimer]'
   private timer: number = 0
   private timerTick: number = 0
   private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
-  @State state: StateStruct = new StateStruct()
   private mAction: SmallVideoTimerDispatcher = new SmallVideoTimerDispatcher();
 
-  private async onRecordPaused(): Promise<void> {
-    Log.info(`${this.TAG} onRecordPaused timer id: ${this.timer} E`)
-    clearInterval(this.timer)
-    Log.info(`${this.TAG} onRecordPaused X`)
-  }
-
-  private async onRecordResumed(): Promise<void> {
-    Log.info(`${this.TAG} onRecordResumed E`)
-    this.setIntervalTimer()
-    Log.info(`${this.TAG} onRecordResumed timer id: ${this.timer} X`)
-  }
-
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -105,43 +92,6 @@ export struct SmallVideoTimer {
     Log.info(`${this.TAG} aboutToDisappear X`)
   }
 
-  private setIntervalTimer(): void {
-    clearInterval(this.timer)
-    this.timer = setInterval(() => {
-      this.timerTick++
-      if (this.timerTick % 2 === 0) {
-        this.mAction.updateRecordingTime(this.state.recordingTime + 1)
-        let shownSec = '00'
-        let shownMin = '00'
-        let sec = this.state.recordingTime % 60
-        if (sec < 10) {
-          shownSec = `0${sec}`
-        } else {
-          shownSec = `${sec}`
-        }
-        let minute = Math.floor(this.state.recordingTime / 60)
-        if (minute < 10) {
-          shownMin = `0${minute}`
-        } else {
-          shownMin = `${minute}`
-        }
-        this.mAction.updateRecordingTimeDisplay(`${shownMin}:${shownSec}`)
-      }
-      this.mAction.updateSpotVisible(!this.state.isRecordingSpotVisible)
-      if (this.state.isThirdPartyCall && GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration) {
-        try {
-          let videoDuration: number = Number.parseInt(GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration as string)
-          Log.info(`${this.TAG} videoDuration is ${videoDuration}`);
-          if (this.state.recordingTime >= videoDuration) {
-            this.mAction.stopRecording();
-          }
-        } catch (error) {
-          Log.info(`${this.TAG} picker videoDuration --> ${JSON.stringify(error)}}`)
-        }
-      }
-    }, 500)
-  }
-
   build() {
     Column() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -182,4 +132,54 @@ export struct SmallVideoTimer {
       }
     }.width('100%').height(48).position({ x: 0, y: -48 })
   }
+
+  private async onRecordPaused(): Promise<void> {
+    Log.info(`${this.TAG} onRecordPaused timer id: ${this.timer} E`)
+    clearInterval(this.timer)
+    Log.info(`${this.TAG} onRecordPaused X`)
+  }
+
+  private async onRecordResumed(): Promise<void> {
+    Log.info(`${this.TAG} onRecordResumed E`)
+    this.setIntervalTimer()
+    Log.info(`${this.TAG} onRecordResumed timer id: ${this.timer} X`)
+  }
+
+  private setIntervalTimer(): void {
+    clearInterval(this.timer)
+    this.timer = setInterval(() => {
+      this.timerTick++
+      if (this.timerTick % 2 === 0) {
+        this.mAction.updateRecordingTime(this.state.recordingTime + 1)
+        let shownSec = '00'
+        let shownMin = '00'
+        let sec = this.state.recordingTime % 60
+        if (sec < 10) {
+          shownSec = `0${sec}`
+        } else {
+          shownSec = `${sec}`
+        }
+        let minute = Math.floor(this.state.recordingTime / 60)
+        if (minute < 10) {
+          shownMin = `0${minute}`
+        } else {
+          shownMin = `${minute}`
+        }
+        this.mAction.updateRecordingTimeDisplay(`${shownMin}:${shownSec}`)
+      }
+      this.mAction.updateSpotVisible(!this.state.isRecordingSpotVisible)
+      if (this.state.isThirdPartyCall && GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration) {
+        try {
+          let videoDuration: number =
+            Number.parseInt(GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration as string)
+          Log.info(`${this.TAG} videoDuration is ${videoDuration}`);
+          if (this.state.recordingTime >= videoDuration) {
+            this.mAction.stopRecording();
+          }
+        } catch (error) {
+          Log.info(`${this.TAG} picker videoDuration --> ${JSON.stringify(error)}}`)
+        }
+      }
+    }, 500)
+  }
 }
\ No newline at end of file
diff --git a/product/phone/src/main/ets/pages/ThirdPreviewView.ets b/product/phone/src/main/ets/pages/ThirdPreviewView.ets
index 4231636..6e96ea0 100644
--- a/product/phone/src/main/ets/pages/ThirdPreviewView.ets
+++ b/product/phone/src/main/ets/pages/ThirdPreviewView.ets
@@ -25,6 +25,9 @@ import { ComponentIdKeys } from '@ohos/common/src/main/ets/default/utils/Compone
 @Entry
 @Component
 struct ThirdPreviewView {
+  @State controls: boolean = false;
+  @State isShowVideoButton: boolean = true;
+  myVideoController: VideoController = new VideoController();
   private TAG: string = '[ThirdPreviewView]:';
   private photoWidth: string = '';
   private photoHeight: string = '';
@@ -32,9 +35,6 @@ struct ThirdPreviewView {
   private videoUri: string = '';
   private mode: string = '';
   private callBundleName: string = '';
-  @State controls: boolean = false;
-  @State isShowVideoButton: boolean = true;
-  myVideoController: VideoController = new VideoController();
 
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear E`);
@@ -75,7 +75,7 @@ struct ThirdPreviewView {
     Log.info(`${this.TAG} backCalledApp X`);
   }
 
-  terminateSelfWithResult(resourceUri: string, resultCode : number): void {
+  terminateSelfWithResult(resourceUri: string, resultCode: number): void {
     Log.info(`${this.TAG} terminateSelfWithResult start`);
     let abilityResult: ability.AbilityResult = {
       resultCode: resultCode,
@@ -107,18 +107,6 @@ struct ThirdPreviewView {
 
   }
 
-  private getVideoPlayIcon() {
-    if (vp2px(1) >= 1 && vp2px(1) < 2) {
-      return $r('app.media.ic_video_play_btn_hdpi');
-    } else if (vp2px(1) == 2) {
-      return $r('app.media.ic_video_play_btn_xhdpi');
-    } else if (vp2px(1) == 3) {
-      return $r('app.media.ic_video_play_btn_xxhdpi');
-    } else {
-      return $r('app.media.ic_video_play_btn_xxxhdpi');
-    }
-  }
-
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Stack() {
@@ -194,4 +182,16 @@ struct ThirdPreviewView {
       .position({ x: 0, y: 0 })
     }.width('100%').height('100%').backgroundColor('#000')
   }
+
+  private getVideoPlayIcon() {
+    if (vp2px(1) >= 1 && vp2px(1) < 2) {
+      return $r('app.media.ic_video_play_btn_hdpi');
+    } else if (vp2px(1) == 2) {
+      return $r('app.media.ic_video_play_btn_xhdpi');
+    } else if (vp2px(1) == 3) {
+      return $r('app.media.ic_video_play_btn_xxhdpi');
+    } else {
+      return $r('app.media.ic_video_play_btn_xxxhdpi');
+    }
+  }
 }
\ No newline at end of file
diff --git a/product/phone/src/main/ets/pages/index.ets b/product/phone/src/main/ets/pages/index.ets
index ab605c8..2372fee 100644
--- a/product/phone/src/main/ets/pages/index.ets
+++ b/product/phone/src/main/ets/pages/index.ets
@@ -20,8 +20,7 @@ import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { CameraWorker } from '@ohos/common/src/main/ets/default/worker/CameraWorker';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { MoreList } from '@ohos/common/src/main/ets/default/featurecommon/moreList/moreList';
 import {
@@ -62,8 +61,6 @@ class StateStruct {
 }
 
 class IndexDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -116,6 +113,8 @@ class IndexDispatcher {
   public faCall(isFaCall: boolean): void {
     this.mDispatch(Action.faCall(isFaCall));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 const ZOOM_HEIGHT = 140;
@@ -179,24 +178,25 @@ struct Index {
       Log.info(`${this.TAG} permissions need to require from user: ${JSON.stringify(permissionList)}`);
       let atManager = abilityAccessCtrl.createAtManager();
       try {
-        atManager.requestPermissionsFromUser(GlobalContext.get().getCameraAbilityContext(), permissionList).then((data) => {
-          Log.info(`${this.TAG} data permissions: ${JSON.stringify(data.permissions)}`);
-          Log.info(`${this.TAG} data authResult: ${JSON.stringify(data.authResults)}`);
-          let sum = 0
-          for (let i = 0; i < data.authResults.length; i++) {
-            sum += data.authResults[i];
-          }
-          if (sum >= 0) {
-            GlobalContext.get().setObject('permissionFlag', true);
-            this.mAction.setPermissionFlag(true);
-          } else {
-            GlobalContext.get().setObject('permissionFlag', false);
-            this.mAction.setPermissionFlag(false);
-          }
-          Log.info(`${this.TAG} request permissions result: ${GlobalContext.get().getT<boolean>('permissionFlag')}`);
-        }, (err: BusinessError) => {
-          Log.error(`${this.TAG} Failed to start ability err code: ${err.code}`);
-        })
+        atManager.requestPermissionsFromUser(GlobalContext.get().getCameraAbilityContext(), permissionList)
+          .then((data) => {
+            Log.info(`${this.TAG} data permissions: ${JSON.stringify(data.permissions)}`);
+            Log.info(`${this.TAG} data authResult: ${JSON.stringify(data.authResults)}`);
+            let sum = 0
+            for (let i = 0; i < data.authResults.length; i++) {
+              sum += data.authResults[i];
+            }
+            if (sum >= 0) {
+              GlobalContext.get().setObject('permissionFlag', true);
+              this.mAction.setPermissionFlag(true);
+            } else {
+              GlobalContext.get().setObject('permissionFlag', false);
+              this.mAction.setPermissionFlag(false);
+            }
+            Log.info(`${this.TAG} request permissions result: ${GlobalContext.get().getT<boolean>('permissionFlag')}`);
+          }, (err: BusinessError) => {
+            Log.error(`${this.TAG} Failed to start ability err code: ${err.code}`);
+          })
       } catch (error) {
         Log.info(`${this.TAG} catch error: ${JSON.stringify(error)}`);
       }
@@ -223,10 +223,13 @@ struct Index {
   }
 
   onPageShow(): void {
-    Log.info(`${this.TAG} onPageShow this.permissionFlag: ${this.state.permissionFlag} permissionFlag: ${GlobalContext.get().getT<boolean>('permissionFlag')}`);
+    Log.info(`${this.TAG} onPageShow this.permissionFlag: ${this.state.permissionFlag} permissionFlag: ${GlobalContext.get()
+      .getT<boolean>('permissionFlag')}`);
     this.mAction.setPermissionFlag(GlobalContext.get().getT<boolean>('permissionFlag'));
     let curCameraId = AppStorage.Get<string>('storageCameraId');
-    if (curCameraId) this.mAction.initCameraPosition(curCameraId);
+    if (curCameraId) {
+      this.mAction.initCameraPosition(curCameraId);
+    }
     this.mAction.resetRecordingTime();
     Log.info(`${this.TAG} onPageShow X`);
   }
@@ -313,7 +316,8 @@ struct Index {
       }.width('100%').position({ y: 48 })
 
       Stack() {
-        if (deviceInfo.deviceType !== "default" && this.state.videoState === "beforeTakeVideo" && !this.state.isShowtimeLapse && this.state.showZoomLabelValue) {
+        if (deviceInfo.deviceType !== "default" && this.state.videoState === "beforeTakeVideo" &&
+          !this.state.isShowtimeLapse && this.state.showZoomLabelValue) {
           TabBar({ onBackClicked: () => this.onBackClicked() });
         }
       }.width('100%').height(48).position({ x: '0', y: '0' })
@@ -328,14 +332,16 @@ struct Index {
               Column() {
                 ZoomView()
               }
-              .visibility(!this.state.isShowtimeLapse && !this.state.isShowPinch ? Visibility.Visible : Visibility.Hidden)
+              .visibility(!this.state.isShowtimeLapse && !this.state.isShowPinch ? Visibility.Visible :
+              Visibility.Hidden)
             }
           }
           if (this.state.videoState === "beforeTakeVideo" && this.state.showZoomLabelValue) {
             Column() {
               Control()
             }
-            .visibility((!this.state.isShowtimeLapse && this.state.showZoomLabelValue) ? Visibility.Visible : Visibility.Hidden)
+            .visibility((!this.state.isShowtimeLapse && this.state.showZoomLabelValue) ? Visibility.Visible :
+            Visibility.Hidden)
             .width('100%')
             .offset({
               x: 156, y: 0
@@ -344,7 +350,8 @@ struct Index {
           Column() {
             FootBar()
           }
-          .visibility((!this.state.isShowtimeLapse && this.state.showZoomLabelValue) ? Visibility.Visible : Visibility.Hidden)
+          .visibility((!this.state.isShowtimeLapse && this.state.showZoomLabelValue) ? Visibility.Visible :
+          Visibility.Hidden)
         }
       }.width('100%').height(302 - ZOOM_HEIGHT).position({ y: this.state.footBarHeight + ZOOM_HEIGHT })
       .visibility(!this.state.isShowtimeLapse ? Visibility.Visible : Visibility.Hidden)