diff --git a/AppScope/app.json5 b/AppScope/app.json5
index 566a5603d14fa63b1a55a257613ad54780754fc9..28eac465352255ccb262622c5a1dd8b8d4ca8caa 100644
--- a/AppScope/app.json5
+++ b/AppScope/app.json5
@@ -4,7 +4,7 @@
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
-    "icon": "$media:app_icon",
+    "icon": "$media:layered_image",
     "label": "$string:app_name"
   }
 }
diff --git a/AppScope/resources/base/media/app_icon.png b/AppScope/resources/base/media/app_icon.png
deleted file mode 100644
index cd45accb1dfd2fd0da16c732c72faa6e46b26521..0000000000000000000000000000000000000000
Binary files a/AppScope/resources/base/media/app_icon.png and /dev/null differ
diff --git a/AppScope/resources/base/media/background.png b/AppScope/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..923f2b3f27e915d6871871deea0420eb45ce102f
Binary files /dev/null and b/AppScope/resources/base/media/background.png differ
diff --git a/AppScope/resources/base/media/foreground.png b/AppScope/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb9427585b36d14b12477435b6419d1f07b3e0bb
Binary files /dev/null and b/AppScope/resources/base/media/foreground.png differ
diff --git a/AppScope/resources/base/media/layered_image.json b/AppScope/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/AppScope/resources/base/media/layered_image.json
@@ -0,0 +1,7 @@
+{
+  "layered-image":
+  {
+    "background" : "$media:background",
+    "foreground" : "$media:foreground"
+  }
+}
\ No newline at end of file
diff --git a/README.en.md b/README.en.md
index 643b211813ee39cb3c41251311cf50c706ac9d9c..f2000c3da0cb133dc3105daef593cb69a40c4394 100644
--- a/README.en.md
+++ b/README.en.md
@@ -40,6 +40,6 @@ N/A.
 ### Constraints
 
 1. The sample app is supported only on Huawei phones running the standard system.
-2. HarmonyOS: HarmonyOS NEXT Developer Beta 1 or later
-3. DevEco Studio: DevEco Studio NEXT Developer Beta 1 or later
-4. HarmonyOS SDK: HarmonyOS NEXT Developer Beta 1 SDK or later
+2. HarmonyOS: HarmonyOS 5.0.0 Release or later
+3. DevEco Studio: DevEco Studio 5.0.0 Release or later
+4. HarmonyOS SDK: HarmonyOS 5.0.0 Release SDK or later
diff --git a/README.md b/README.md
index 0b264a7057c92b30ddcae49822a50fe2967bd1d8..56cff194eec72b3cbbae1f90798b6763a5867b58 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# 优秀实践-一次开发，多端部署-社区评论
+# 一次开发，多端部署-社区评论
 
 ### 简介
 
@@ -40,6 +40,6 @@
 ### 约束与限制
 
 1. 本示例仅支持标准系统上运行，支持设备：华为手机。
-2. HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
-3. DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
-4. HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
diff --git a/build-profile.json5 b/build-profile.json5
index d55e553f66c8efd3a7b8c1f2c23f80b6e82817ee..0e9cedf82137489dd93d0163d43c20d024211388 100644
--- a/build-profile.json5
+++ b/build-profile.json5
@@ -6,7 +6,13 @@
         "name": "default",
         "signingConfig": "default",
         "compatibleSdkVersion": "5.0.0(12)",
-        "runtimeOS": "HarmonyOS"
+        "runtimeOS": "HarmonyOS",
+        "buildOption": {
+          "strictMode": {
+            "caseSensitiveCheck": true,
+            "useNormalizedOHMUrl": true
+          }
+        }
       }
     ],
     "buildModeSet": [
diff --git a/features/detail/oh-package.json5 b/features/detail/oh-package.json5
index aa9f409c8b4aa9cdaf08dc06aba8894c80f3a56e..6bd13713c49637549ac065ea7537983f70fc8c3e 100644
--- a/features/detail/oh-package.json5
+++ b/features/detail/oh-package.json5
@@ -8,6 +8,6 @@
   "version": "1.0.0",
   "dynamicDependencies": {},
   "dependencies": {
-    "@ohos/base": "file:../../commons/base"
+    "base": "file:../../commons/base"
   }
 }
diff --git a/features/detail/src/main/ets/view/CommentBarView.ets b/features/detail/src/main/ets/view/CommentBarView.ets
index 9872aa68808a1157f201b29897648f40937ad797..381538bd895f74bded13d49ed228696b1c68481f 100644
--- a/features/detail/src/main/ets/view/CommentBarView.ets
+++ b/features/detail/src/main/ets/view/CommentBarView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { CommonConstants as BaseCommon, BreakpointConstants as Breakpoint } from '@ohos/base';
+import { CommonConstants as BaseCommon, BreakpointConstants as Breakpoint } from 'base';
 import { CommonConstants as Common } from '../constants/CommonConstants';
 
 const KEY_TEXTAREA: string = 'textarea_input';
@@ -97,7 +97,7 @@ export struct CommentBarView {
               .onChange((value: string) => {
                 this.content = value;
               })
-              .key(KEY_TEXTAREA)
+              .id(KEY_TEXTAREA)
               .onAppear(() => {
                 focusControl.requestFocus(KEY_TEXTAREA)
               })
diff --git a/features/detail/src/main/ets/view/CommentInputView.ets b/features/detail/src/main/ets/view/CommentInputView.ets
index 2cf872a7341fb8e8c831355053dfbdd0d4523bcc..cb5c1014435f5c1d38949a556c47458c98ccc003 100644
--- a/features/detail/src/main/ets/view/CommentInputView.ets
+++ b/features/detail/src/main/ets/view/CommentInputView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { CommonConstants as BaseCommon } from '@ohos/base';
+import { CommonConstants as BaseCommon } from 'base';
 import { CommonConstants as Common } from '../constants/CommonConstants';
 
 const TEXTAREA_KEY: string = 'textarea';
@@ -27,7 +27,7 @@ export struct CommentInputView {
   build() {
     Row() {
       TextArea({ placeholder: $r('app.string.detail_write_comment'), text: this.content })
-        .key(TEXTAREA_KEY)
+        .id(TEXTAREA_KEY)
         .maxLines(Common.TEXT_AREA_MAX_LINES)
         .constraintSize({
           minHeight: $r('app.float.constraint_size')
@@ -50,7 +50,7 @@ export struct CommentInputView {
           left: $r('app.float.toolbar_sent_ml'),
           bottom: $r('app.float.toolbar_sent_mb')
         })
-        .key(BUTTON_KEY)
+        .id(BUTTON_KEY)
         .onClick(() => {
           AppStorage.setOrCreate('isShowInput', false);
           focusControl.requestFocus(BUTTON_KEY);
diff --git a/features/detail/src/main/ets/view/CommentItemView.ets b/features/detail/src/main/ets/view/CommentItemView.ets
index 612283675b5af9a3b0b386a5bf5dbd027929697b..8edde1ae51ce586b4ca6e5e48fe4adf9c4717a78 100644
--- a/features/detail/src/main/ets/view/CommentItemView.ets
+++ b/features/detail/src/main/ets/view/CommentItemView.ets
@@ -18,7 +18,7 @@ import {
   CommonConstants as BaseCommon,
   BreakpointType,
   BreakpointConstants as Breakpoint
-} from '@ohos/base';
+} from 'base';
 import { CommonConstants as Common } from '../constants/CommonConstants';
 
 @Component
diff --git a/features/detail/src/main/ets/view/CommentListView.ets b/features/detail/src/main/ets/view/CommentListView.ets
index e93e7bd3305bf2c796ecbe5e9059dddbd30ef0d9..a27c24bfd11d3e09ab97362e0cbcb5632328cbab 100644
--- a/features/detail/src/main/ets/view/CommentListView.ets
+++ b/features/detail/src/main/ets/view/CommentListView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, CommentItemInterface, } from '@ohos/base';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, CommentItemInterface, } from 'base';
 import { CommonConstants as Common } from '../constants/CommonConstants';
 import { CommentItemView } from '../view/CommentItemView';
 import { CommentBarView } from '../view/CommentBarView';
diff --git a/features/detail/src/main/ets/view/DetailPage.ets b/features/detail/src/main/ets/view/DetailPage.ets
index b6ed6aebdcf75caf904117c718ce02243e7a29a6..5cdcbd92545285056822ff4541035a569b7aaf2f 100644
--- a/features/detail/src/main/ets/view/DetailPage.ets
+++ b/features/detail/src/main/ets/view/DetailPage.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as Common, BreakpointType } from '@ohos/base';
+import { BreakpointConstants as Breakpoint, CommonConstants as Common, BreakpointType } from 'base';
 import { DetailTitleView } from './DetailTitleView';
 import { MircoBlogView } from './MircoBlogView';
 import { CommentListView } from './CommentListView';
@@ -160,7 +160,7 @@ export struct DetailPage {
             .height(Common.FULL_PERCENT)
             .backgroundColor(Color.Black)
             .opacity($r('app.float.text_input_bgc_opacity'))
-            .key(KEY_BACKGROUND)
+            .id(KEY_BACKGROUND)
             .onClick(() => {
               AppStorage.setOrCreate('isShowInput', false);
               focusControl.requestFocus(KEY_BACKGROUND);
diff --git a/features/detail/src/main/ets/view/DetailTitleView.ets b/features/detail/src/main/ets/view/DetailTitleView.ets
index 48fc05a5ee4782c6392b8c4dad1ca2bee0afb817..f74bc4fd2823fceffa38550d13be106e4c372fe4 100644
--- a/features/detail/src/main/ets/view/DetailTitleView.ets
+++ b/features/detail/src/main/ets/view/DetailTitleView.ets
@@ -14,7 +14,7 @@
  */
 
 import { deviceInfo } from '@kit.BasicServicesKit';
-import { BreakpointConstants as Breakpoint, BreakpointType, CommonConstants as BaseCommon } from '@ohos/base';
+import { BreakpointConstants as Breakpoint, BreakpointType, CommonConstants as BaseCommon } from 'base';
 
 @Component
 export struct DetailTitleView {
diff --git a/features/detail/src/main/ets/view/MircoBlogView.ets b/features/detail/src/main/ets/view/MircoBlogView.ets
index acb9310b94aebfd3579961cad0fe46d04bf6d268..45dbd011623b95c7cdbeb7f0ca0361ff8008e8fe 100644
--- a/features/detail/src/main/ets/view/MircoBlogView.ets
+++ b/features/detail/src/main/ets/view/MircoBlogView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { CardItemInterface, BreakpointConstants as Breakpoint, CommonConstants as BaseCommon } from '@ohos/base';
+import { CardItemInterface, BreakpointConstants as Breakpoint, CommonConstants as BaseCommon } from 'base';
 import { CardItem } from '../viewmodel/CardViewModel';
 import { CommonConstants as Common } from '../constants/CommonConstants';
 
@@ -50,11 +50,7 @@ export struct MircoBlogView {
 
   jump(index: number) {
     AppStorage.setOrCreate('selectCardIndex', this.index);
-    if (this.isDetailPage) {
-      this.pageInfos.replacePath({ name: 'pictureDetail', param: index });
-    } else {
-      this.pageInfos.pushPath({ name: 'pictureDetail', param: index });
-    }
+    this.pageInfos.pushPath({ name: 'pictureDetail', param: index });
   }
 
   build() {
diff --git a/features/detail/src/main/ets/viewmodel/CardArrayViewModel.ets b/features/detail/src/main/ets/viewmodel/CardArrayViewModel.ets
index 7ba58d9547c81f10b04889367ad1f947b6e7324c..4db56c718dd0dc4d11de1d51f0ee7d90c379ce0b 100644
--- a/features/detail/src/main/ets/viewmodel/CardArrayViewModel.ets
+++ b/features/detail/src/main/ets/viewmodel/CardArrayViewModel.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { CardItemInterface, CARD_LIST } from '@ohos/base';
+import { CardItemInterface, CARD_LIST } from 'base';
 import { CardItem } from './CardViewModel';
 
 export class CardArray {
diff --git a/features/detail/src/main/ets/viewmodel/CardViewModel.ets b/features/detail/src/main/ets/viewmodel/CardViewModel.ets
index 6305046809de77b1f0d9b353c1dee3f0d7cc61f1..6319546465a1838c3843114f7873dc75ebd79a2b 100644
--- a/features/detail/src/main/ets/viewmodel/CardViewModel.ets
+++ b/features/detail/src/main/ets/viewmodel/CardViewModel.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { COMMENT_LIST, CommentItemInterface, CardItemInterface, CommentItem, PICTURE_ARRAY_LIST } from '@ohos/base';
+import { COMMENT_LIST, CommentItemInterface, CardItemInterface, CommentItem, PICTURE_ARRAY_LIST } from 'base';
 
 export class CardItem implements CardItemInterface {
   icon: ResourceStr;
diff --git a/features/hot/oh-package.json5 b/features/hot/oh-package.json5
index 6a0983f570f1ab1d25b30d4b001e75e69369667c..20150c2c55588879242004ba7bcd57f04bdc4af2 100644
--- a/features/hot/oh-package.json5
+++ b/features/hot/oh-package.json5
@@ -8,8 +8,8 @@
   "version": "1.0.0",
   "dynamicDependencies": {},
   "dependencies": {
-    "@ohos/rank": "file:../rank",
-    "@ohos/base": "file:../../commons/base",
-    "@ohos/detail": "file:../detail"
+    "rank": "file:../rank",
+    "base": "file:../../commons/base",
+    "detail": "file:../detail"
   }
 }
diff --git a/features/hot/src/main/ets/view/CardItemView.ets b/features/hot/src/main/ets/view/CardItemView.ets
index 1a97423ca23c2e4a90bba9986286565a4d160fdd..4e057d73f986af090c9a0ebae599b1e79a9bea59 100644
--- a/features/hot/src/main/ets/view/CardItemView.ets
+++ b/features/hot/src/main/ets/view/CardItemView.ets
@@ -14,7 +14,7 @@
  */
 
 import { App as app } from '@kit.ArkUI';
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from '@ohos/base';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
 import { CommonConstants as Common } from '../constants/CommonConstants'
 import { FollowItemInterface, FOLLOW_LIST, TITLE_DETAIL_LIST } from '../model/FollowModel';
 
diff --git a/features/hot/src/main/ets/view/FollowView.ets b/features/hot/src/main/ets/view/FollowView.ets
index ec771b38d2a4853ec30846349abb09519cc695b9..afd2caec7f125765ba7873cab7dee7dccb823e7c 100644
--- a/features/hot/src/main/ets/view/FollowView.ets
+++ b/features/hot/src/main/ets/view/FollowView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from '@ohos/base';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
 import { CommonConstants as Common } from '../constants/CommonConstants'
 import { CardItemView } from './CardItemView';
 import { TitleDetailInterface, TITLE_DETAIL_LIST } from '../model/FollowModel';
diff --git a/features/hot/src/main/ets/view/FoundView.ets b/features/hot/src/main/ets/view/FoundView.ets
index a520bfa1c8702af36a2ca4b1b71e16f3d212fec3..b4b218cb39b45d591e0ff822e8f7c41d022ba195 100644
--- a/features/hot/src/main/ets/view/FoundView.ets
+++ b/features/hot/src/main/ets/view/FoundView.ets
@@ -13,10 +13,10 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from '@ohos/base';
-import { CommentBarView, MircoBlogView } from '@ohos/detail';
-import { CardArrayViewModel, CardArray } from '@ohos/detail';
-import { CardItem } from '@ohos/detail';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
+import { CommentBarView, MircoBlogView } from 'detail';
+import { CardArrayViewModel, CardArray } from 'detail';
+import { CardItem } from 'detail';
 import { CommonConstants as Common } from '../constants/CommonConstants';
 import { HotColumnView } from '../view/HotColumnView';
 
diff --git a/features/hot/src/main/ets/view/HotColumnView.ets b/features/hot/src/main/ets/view/HotColumnView.ets
index 724be509d233386b24500f11c1b2b7928bb6989f..082a319578128d9638773898253f1442852a68bd 100644
--- a/features/hot/src/main/ets/view/HotColumnView.ets
+++ b/features/hot/src/main/ets/view/HotColumnView.ets
@@ -13,9 +13,9 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from '@ohos/base';
-import { HotItemInterface, HOST_LIST_ARRAY } from '@ohos/base';
-import { HotListItemView } from '@ohos/rank';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
+import { HotItemInterface, HOST_LIST_ARRAY } from 'base';
+import { HotListItemView } from 'rank';
 import { CommonConstants as Common } from '../constants/CommonConstants';
 import { ToRankView } from './ToRankView';
 
diff --git a/features/hot/src/main/ets/view/HotPointPage.ets b/features/hot/src/main/ets/view/HotPointPage.ets
index 96fd1587a4cca8bde1f1e8953b8a8e1fc3743ef2..b3196a477fc6f790c249f1f0efb58af10379b004 100644
--- a/features/hot/src/main/ets/view/HotPointPage.ets
+++ b/features/hot/src/main/ets/view/HotPointPage.ets
@@ -14,7 +14,7 @@
  */
 
 import { deviceInfo } from '@kit.BasicServicesKit';
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon } from '@ohos/base/';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon } from 'base/';
 import { FoundView } from './FoundView';
 import { FollowView } from './FollowView';
 import { HotTitleView } from './HotTitleView';
diff --git a/features/hot/src/main/ets/view/HotTitleView.ets b/features/hot/src/main/ets/view/HotTitleView.ets
index 8cd1a52b39244a324e8315020529a4071549194a..54dce745a8f81881aa033d99fb43e43656c57719 100644
--- a/features/hot/src/main/ets/view/HotTitleView.ets
+++ b/features/hot/src/main/ets/view/HotTitleView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from '@ohos/base';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
 import { SearchBarView } from '../view/SearchBarView';
 
 @Component
diff --git a/features/hot/src/main/ets/view/SearchBarView.ets b/features/hot/src/main/ets/view/SearchBarView.ets
index 9d1e3616d9500cc4b8c9dbce1a223e63cccd3759..5036809b6a909c9a5c91a12f9fc793a240f0dc82 100644
--- a/features/hot/src/main/ets/view/SearchBarView.ets
+++ b/features/hot/src/main/ets/view/SearchBarView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon } from '@ohos/base';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon } from 'base';
 import { CommonConstants as Common } from '../constants/CommonConstants';
 
 @Component
diff --git a/features/picture/oh-package.json5 b/features/picture/oh-package.json5
index 8e2aff4b7a030fa9b17fcb8db57cddbfd6068366..9ef2eecc9260dbd57405aede998a7a73d98e8a64 100644
--- a/features/picture/oh-package.json5
+++ b/features/picture/oh-package.json5
@@ -8,7 +8,7 @@
   "version": "1.0.0",
   "dynamicDependencies": {},
   "dependencies": {
-    "@ohos/base": "file:../../commons/base",
-    "@ohos/detail": "file:../detail"
+    "base": "file:../../commons/base",
+    "detail": "file:../detail"
   }
 }
diff --git a/features/picture/src/main/ets/view/DetailVerticalView.ets b/features/picture/src/main/ets/view/DetailVerticalView.ets
index 0febfec3f58e75f584909094053271e7eda63ade..82277051c21fae62ad1f46ba27ad3df217321cc4 100644
--- a/features/picture/src/main/ets/view/DetailVerticalView.ets
+++ b/features/picture/src/main/ets/view/DetailVerticalView.ets
@@ -14,8 +14,8 @@
  */
 
 import { deviceInfo } from '@kit.BasicServicesKit';
-import { CommonConstants as BaseCommon, BreakpointConstants as Breakpoint } from '@ohos/base'
-import { MircoBlogView, CommentListView, CommentBarView, CardArrayViewModel, CardArray } from '@ohos/detail';
+import { CommonConstants as BaseCommon, BreakpointConstants as Breakpoint } from 'base'
+import { MircoBlogView, CommentListView, CommentBarView, CardArrayViewModel, CardArray } from 'detail';
 
 @Component
 export struct DetailVertical {
diff --git a/features/picture/src/main/ets/view/PictureDetail.ets b/features/picture/src/main/ets/view/PictureDetail.ets
index 7e0e7474957bb26e85b1f5b8815ea038e3763d01..654a06f029d6c9936fb84c4cf5bfe74bd2f3b6ef 100644
--- a/features/picture/src/main/ets/view/PictureDetail.ets
+++ b/features/picture/src/main/ets/view/PictureDetail.ets
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from '@ohos/base/';
-import { CardArrayViewModel, CardArray, CommentInputView } from '@ohos/detail/';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base/';
+import { CardArrayViewModel, CardArray, CommentInputView } from 'detail/';
 import { DetailVertical } from './DetailVerticalView';
 
 const KEY_BACKGROUND: string = 'background';
@@ -120,6 +120,7 @@ export struct PictureDetail {
               .index(this.index)
               .onClick(() => {
                 if (this.isDetailPage) {
+                  this.pageInfos.pop();
                   this.pageInfos.replacePath({ name: 'detailPage' });
                 } else {
                   this.pageInfos.pop();
@@ -131,6 +132,7 @@ export struct PictureDetail {
                 .aspectRatio(1)
                 .onClick(() => {
                   if (this.isDetailPage) {
+                    this.pageInfos.pop();
                     this.pageInfos.replacePath({ name: 'detailPage' });
                   } else {
                     this.pageInfos.pop();
@@ -173,7 +175,7 @@ export struct PictureDetail {
             .height(BaseCommon.FULL_PERCENT)
             .backgroundColor(Color.Black)
             .opacity($r('app.float.text_input_bgc_opacity'))
-            .key(KEY_BACKGROUND)
+            .id(KEY_BACKGROUND)
             .onClick(() => {
               AppStorage.setOrCreate('isShowInput', false);
               focusControl.requestFocus(KEY_BACKGROUND);
diff --git a/features/rank/oh-package.json5 b/features/rank/oh-package.json5
index d50f9f5e07d50c8d094bdedc480f3b30c369884a..2e8e982446596886849e3f2aba1e8e2fb3a54b5d 100644
--- a/features/rank/oh-package.json5
+++ b/features/rank/oh-package.json5
@@ -8,6 +8,6 @@
   "version": "1.0.0",
   "dynamicDependencies": {},
   "dependencies": {
-    "@ohos/base": "file:../../commons/base"
+    "base": "file:../../commons/base"
   }
 }
diff --git a/features/rank/src/main/ets/view/HotListItemView.ets b/features/rank/src/main/ets/view/HotListItemView.ets
index dc81d05e7c632cf39681c38d7c326939a9e5e841..33ca2dd30455d96d64da5380a4f660de85a169f0 100644
--- a/features/rank/src/main/ets/view/HotListItemView.ets
+++ b/features/rank/src/main/ets/view/HotListItemView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { HotItemInterface, HOST_LIST_ARRAY, CommonConstants as BaseCommon } from '@ohos/base';
+import { HotItemInterface, HOST_LIST_ARRAY, CommonConstants as BaseCommon } from 'base';
 import { CommonConstants as Common } from '../constants/CommonConstants';
 
 @Component
diff --git a/features/rank/src/main/ets/view/HotListView.ets b/features/rank/src/main/ets/view/HotListView.ets
index b6774f0976ea5521f2b583df5f03812034e6430e..37ff8042150abfce97be6cc70963c5d33f8614a6 100644
--- a/features/rank/src/main/ets/view/HotListView.ets
+++ b/features/rank/src/main/ets/view/HotListView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { HOST_LIST_ARRAY, CommonConstants as BaseCommon, HotItemInterface } from '@ohos/base';
+import { HOST_LIST_ARRAY, CommonConstants as BaseCommon, HotItemInterface } from 'base';
 import { HotListItemView } from './HotListItemView';
 
 @Component
diff --git a/features/rank/src/main/ets/view/HotRankPage.ets b/features/rank/src/main/ets/view/HotRankPage.ets
index 9e6b83eb3752894fd2dbeeaa307cfd22da9be38f..ae8f4f668b83eefffbbe8672ea5e34cbe3c283e1 100644
--- a/features/rank/src/main/ets/view/HotRankPage.ets
+++ b/features/rank/src/main/ets/view/HotRankPage.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from '@ohos/base';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
 import { HotListView } from './HotListView';
 import { CommonConstants as Common } from '../constants/CommonConstants'
 
diff --git a/products/phone/oh-package.json5 b/products/phone/oh-package.json5
index 741d553fedc281fe79b76d89e5c6a720fc640ec0..f487bc32b6e80d73804fc0bc373d2d232c521c70 100644
--- a/products/phone/oh-package.json5
+++ b/products/phone/oh-package.json5
@@ -8,10 +8,10 @@
   "version": "1.0.0",
   "dynamicDependencies": {},
   "dependencies": {
-    "@ohos/hot": "file:../../features/hot",
-    "@ohos/base": "file:../../commons/base",
-    "@ohos/detail": "file:../../features/detail",
-    "@ohos/rank": "file:../../features/rank",
-    "@ohos/picture": "file:../../features/picture"
+    "hot": "file:../../features/hot",
+    "base": "file:../../commons/base",
+    "detail": "file:../../features/detail",
+    "rank": "file:../../features/rank",
+    "picture": "file:../../features/picture"
   }
 }
diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets
index eb6a8811a9e8a67e44b33977a25e5c97a1ca5128..d7ad56a678171219b753afa3aa139376b9afdab2 100644
--- a/products/phone/src/main/ets/entryability/EntryAbility.ets
+++ b/products/phone/src/main/ets/entryability/EntryAbility.ets
@@ -17,7 +17,7 @@ import { UIAbility, Want, AbilityConstant } from '@kit.AbilityKit';
 import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { window, display } from '@kit.ArkUI';
-import { CommonConstants as BaseCommon, BreakpointConstants } from '@ohos/base'
+import { CommonConstants as BaseCommon, BreakpointConstants } from 'base'
 
 export default class EntryAbility extends UIAbility {
 
diff --git a/products/phone/src/main/ets/pages/MainPage.ets b/products/phone/src/main/ets/pages/MainPage.ets
index dc35dfd1fbd9e6a47d5119c39f2d64033276682a..e0427748ccb33e011a39511f423883d05891b538 100644
--- a/products/phone/src/main/ets/pages/MainPage.ets
+++ b/products/phone/src/main/ets/pages/MainPage.ets
@@ -13,10 +13,10 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as Common } from '@ohos/base';
-import { DetailPage } from '@ohos/detail';
-import { HotRankPage } from '@ohos/rank';
-import { PictureDetail } from '@ohos/picture';
+import { BreakpointConstants as Breakpoint, CommonConstants as Common } from 'base';
+import { DetailPage } from 'detail';
+import { HotRankPage } from 'rank';
+import { PictureDetail } from 'picture';
 import { TabContentView } from '../view/TabContentView';
 
 @Entry
diff --git a/products/phone/src/main/ets/view/TabContentView.ets b/products/phone/src/main/ets/view/TabContentView.ets
index 59b6e3ec7d9828c056ed3be15e2d60c76a626895..59febd64933f0b636557f624d2ee9f199d1dcd71 100644
--- a/products/phone/src/main/ets/view/TabContentView.ets
+++ b/products/phone/src/main/ets/view/TabContentView.ets
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants as Breakpoint, CommonConstants as Common } from '@ohos/base';
-import { HotPointPage } from '@ohos/hot';
+import { BreakpointConstants as Breakpoint, CommonConstants as Common } from 'base';
+import { HotPointPage } from 'hot';
 import { BarItemInterface } from '../model/TabBarModel';
 import { TabBarViewModel } from '../viewmodel/TabBarViewModel';
 
diff --git a/products/phone/src/main/module.json5 b/products/phone/src/main/module.json5
index 94497e06985123430c9452504e1dd5956cef695b..fd31b21d26f919a0f0883acb1059dd197b790f36 100644
--- a/products/phone/src/main/module.json5
+++ b/products/phone/src/main/module.json5
@@ -17,7 +17,7 @@
         "name": "EntryAbility",
         "srcEntry": "./ets/entryability/EntryAbility.ets",
         "description": "$string:EntryAbility_desc",
-        "icon": "$media:icon",
+        "icon": "$media:layered_image",
         "label": "$string:EntryAbility_label",
         "startWindowIcon": "$media:startIcon",
         "startWindowBackground": "$color:start_window_background",
diff --git a/products/phone/src/main/resources/base/media/background.png b/products/phone/src/main/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..923f2b3f27e915d6871871deea0420eb45ce102f
Binary files /dev/null and b/products/phone/src/main/resources/base/media/background.png differ
diff --git a/products/phone/src/main/resources/base/media/foreground.png b/products/phone/src/main/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..97014d3e10e5ff511409c378cd4255713aecd85f
Binary files /dev/null and b/products/phone/src/main/resources/base/media/foreground.png differ
diff --git a/products/phone/src/main/resources/base/media/layered_image.json b/products/phone/src/main/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/products/phone/src/main/resources/base/media/layered_image.json
@@ -0,0 +1,7 @@
+{
+  "layered-image":
+  {
+    "background" : "$media:background",
+    "foreground" : "$media:foreground"
+  }
+}
\ No newline at end of file
diff --git a/products/phone/src/main/resources/base/media/startIcon.png b/products/phone/src/main/resources/base/media/startIcon.png
index 366f76459ffd4494ec40d0ddd5c59385b9c5da11..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b 100644
Binary files a/products/phone/src/main/resources/base/media/startIcon.png and b/products/phone/src/main/resources/base/media/startIcon.png differ