feat: ui update

miniprogram/components/navigation-bar/navigation-bar.ts

@@ -5,78 +5,43 @@ const LOG = 'navigation-bar'
 
 Component({
   options: {
-    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+    multipleSlots: true, // 右侧操作槽（如「编辑」「取消」「更多」）
   },
-  /**
-   * 组件的属性列表
-   */
   properties: {
-    extClass: {
-      type: String,
-      value: ''
-    },
+    // 滚动收缩后显示的居中标题
     title: {
       type: String,
-      value: ''
-    },
-    background: {
-      type: String,
-      value: ''
-    },
-    color: {
-      type: String,
-      value: ''
+      value: '',
     },
+    // 是否显示返回按钮
     back: {
       type: Boolean,
-      value: true
+      value: true,
     },
-    loading: {
-      type: Boolean,
-      value: false
+    // 返回的页面深度
+    delta: {
+      type: Number,
+      value: 1,
     },
-    homeButton: {
+    // 是否已滚动（由页面 utils/nav.ts 的 handler 驱动）
+    scrolled: {
       type: Boolean,
       value: false,
     },
-    animated: {
-      // 显示隐藏的时候opacity动画效果
-      type: Boolean,
-      value: true
-    },
-    show: {
-      // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
-      type: Boolean,
-      value: true,
-      observer: '_showChange'
-    },
-    // back为true的时候，返回的页面深度
-    delta: {
-      type: Number,
-      value: 1
-    },
   },
-  /**
-   * 组件的初始数据
-   */
   data: {
-    displayStyle: '',
-    ios: false,
-    innerPaddingRight: '',
-    leftWidth: '',
-    safeAreaTop: ''
+    // 状态栏高度（px）与微信胶囊占位（右侧 padding）
+    safeTop: 0,
+    capsulePad: '',
   },
   lifetimes: {
     attached() {
       const rect = wx.getMenuButtonBoundingClientRect()
-      const apply = (windowWidth: number, platform: string, safeTop: number) => {
-        const isAndroid = platform === 'android'
-        const isDevtools = platform === 'devtools'
+      const apply = (windowWidth: number, safeTop: number) => {
         this.setData({
-          ios: !isAndroid,
-          innerPaddingRight: `padding-right: ${windowWidth - rect.left}px`,
-          leftWidth: `width: ${windowWidth - rect.left}px`,
-          safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${safeTop}px); padding-top: ${safeTop}px` : ``
+          safeTop: safeTop > 0 ? safeTop : 0,
+          // 预留右上角胶囊宽度，保证右侧操作不压到胶囊
+          capsulePad: `padding-right: ${Math.max(windowWidth - rect.left, 0)}px;`,
         })
       }
 
@@ -85,35 +50,18 @@ Component({
       if (typeof wxAny.getWindowInfo === 'function') {
         const win = wxAny.getWindowInfo()
         const dev = typeof wxAny.getDeviceInfo === 'function' ? wxAny.getDeviceInfo() : {}
-        apply(win.windowWidth, dev.platform || win.platform || '', win.safeArea ? win.safeArea.top : 0)
+        apply(win.windowWidth, win.safeArea ? win.safeArea.top : 0)
         logger.debug(LOG, '布局计算完成, 窗口宽=', win.windowWidth, '平台=', dev.platform || win.platform)
         return
       }
       // 低版本基础库走废弃接口兜底
       logger.warn(LOG, 'getWindowInfo 不可用，降级到已废弃的 wx.getSystemInfo')
       wx.getSystemInfo({
-        success: (res) => apply(res.windowWidth, res.platform, res.safeArea ? res.safeArea.top : 0)
+        success: (res) => apply(res.windowWidth, res.safeArea ? res.safeArea.top : 0),
       })
     },
   },
-  /**
-   * 组件的方法列表
-   */
   methods: {
-    _showChange(show: boolean) {
-      const animated = this.data.animated
-      let displayStyle = ''
-      if (animated) {
-        displayStyle = `opacity: ${
-          show ? '1' : '0'
-        };transition:opacity 0.5s;`
-      } else {
-        displayStyle = `display: ${show ? '' : 'none'}`
-      }
-      this.setData({
-        displayStyle
-      })
-    },
     back() {
       const data = this.data
       if (data.delta) {
@@ -124,17 +72,17 @@ Component({
           logger.debug(LOG, '返回上一页, delta=', data.delta)
           wx.navigateBack({
             delta: data.delta,
-            fail: (e) => logger.warn(LOG, 'navigateBack 失败, err=', e && e.errMsg)
+            fail: (e) => logger.warn(LOG, 'navigateBack 失败, err=', e && e.errMsg),
           })
         } else {
           logger.warn(LOG, '页面栈不足，switchTab 回衣橱兜底, 栈深=', pages.length)
           wx.switchTab({
             url: '/pages/wardrobe/wardrobe',
-            fail: (e) => logger.warn(LOG, 'switchTab 衣橱失败, err=', e && e.errMsg)
+            fail: (e) => logger.warn(LOG, 'switchTab 衣橱失败, err=', e && e.errMsg),
           })
         }
       }
       this.triggerEvent('back', { delta: data.delta }, {})
-    }
+    },
   },
 })