优化图片预览组件，替换为wd-navbar并调整样式

components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
     WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
     WdNavbar: typeof import('wot-design-uni/components/wd-navbar/wd-navbar.vue')['default']
+    WdNavbarCapsule: typeof import('wot-design-uni/components/wd-navbar-capsule/wd-navbar-capsule.vue')['default']
     WdNoticeBar: typeof import('wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue')['default']
   }
 }

src/pages/index/components/ImagePreviewOverlay.vue

@@ -1,15 +1,24 @@
 <template>
-  <view v-if="visible" class="preview-mask" @touchstart.stop @touchmove.stop>
-    <view class="preview-header" :style="{ paddingTop: safeTop + 'px' }">
-      <view class="left" @touchstart.stop="close">‹</view>
-      <view class="title">图片预览</view>
+  <view v-if="visible" class="preview-mask">
+    <view class="preview-header">
+      <wd-navbar
+        fixed
+        placeholder
+        left-arrow
+        :bordered="false"
+        title="图片预览"
+        safeAreaInsetTop
+        customClass="navbar"
+        @click-left="close"
+      >
+      </wd-navbar>
     </view>
 
     <view class="preview-body">
       <image v-if="watermarkSrc" class="preview-image" :src="watermarkSrc" mode="scaleToFill" />
     </view>
 
-    <view class="preview-footer" :style="{ paddingBottom: safeBottom + 'px' }">
+    <view class="preview-footer">
       <view class="btn" @touchstart.stop="$emit('retake')">重拍</view>
       <view class="btn primary" @touchstart.stop="download">下载照片</view>
     </view>
@@ -41,10 +50,6 @@ defineEmits<{
   (e: 'retake'): void
 }>()
 
-const system = uni.getSystemInfoSync()
-const safeTop = system.safeAreaInsets?.top ?? 0
-const safeBottom = system.safeAreaInsets?.bottom ?? 0
-
 const watermarkSrc = ref('')
 
 const close = () => {
@@ -115,33 +120,23 @@ watch(visible, (val) => {
 }
 
 .preview-header {
-  height: 88rpx;
+  height: 96rpx;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   color: #fff;
   padding: 0 24rpx;
-  box-sizing: content-box;
-
-  .left {
-    width: 88rpx;
-    font-size: 40rpx;
-  }
-
-  .title {
-    flex: 1;
-    text-align: center;
-    font-size: 32rpx;
-  }
+  box-sizing: border-box;
 }
 
 .preview-body {
-  height: calc(100vh - 88rpx - 128rpx);
+  height: calc(100vh - 96rpx - 128rpx);
   display: flex;
   align-items: center;
   justify-content: center;
 
   .preview-image {
-    height: calc(100vh - 88rpx - 128rpx);
+    height: calc(100vh - 96rpx - 128rpx);
     max-width: 100%;
     width: 750rpx;
   }