消息页面加号样式以及交互逻辑优化

pages/tabs/messages.vue

@@ -2,9 +2,24 @@
   <view class="page msg edge">
     <fy-header title="消息" :extra="unreadLabel">
       <template #right>
-        <text class="ico" @click="plus">＋</text>
+        <view class="plus" @click.stop="menu = !menu">
+          <view class="plus-h" />
+          <view class="plus-v" />
+        </view>
       </template>
     </fy-header>
+    <view v-if="menu" class="mask" @click="menu = false" />
+    <view v-if="menu" class="drop" :style="{ top: dropTop + 'px' }">
+      <view class="caret" />
+      <view class="drop-item" @click="newGroup">
+        <wd-icon name="usergroup" size="32rpx" color="#374151" />
+        <text>发起群聊</text>
+      </view>
+      <view class="drop-item" @click="addMate">
+        <wd-icon name="user-add" size="32rpx" color="#374151" />
+        <text>添加同事</text>
+      </view>
+    </view>
     <fy-scroll class="edge-scroll list" dock @refresh="reload">
       <view class="finder" @click="goSearch">
         <wd-icon name="search" size="28rpx" color="#9CA3AF" />
@@ -50,7 +65,7 @@ import { store } from '../../utils/store.js'
 export default {
   components: { FyHeader, FyFileMark, FyScroll },
   data() {
-    return { rows: [], unread: 0, off: null }
+    return { rows: [], unread: 0, off: null, menu: false, dropTop: 64 }
   },
   computed: {
     unreadLabel() {
@@ -58,6 +73,11 @@ export default {
       return '(' + (this.unread > 99 ? '99+' : this.unread) + ')'
     }
   },
+  created() {
+    let status = 20
+    try { status = uni.getSystemInfoSync().statusBarHeight || 20 } catch (_) {}
+    this.dropTop = status + uni.upx2px(88) + 6
+  },
   onShow() {
     if (this.off) this.off()
     this.guard()
@@ -66,6 +86,7 @@ export default {
     this.off = store.on(() => this.pull())
   },
   onHide() {
+    this.menu = false
     if (this.off) this.off()
     this.off = null
   },
@@ -124,14 +145,13 @@ export default {
         }
       })
     },
-    plus() {
-      uni.showActionSheet({
-        itemList: ['发起群聊', '添加同事'],
-        success: (res) => {
-          if (res.tapIndex === 0) uni.navigateTo({ url: '/pages/chat/create' })
-          else uni.navigateTo({ url: '/pages/search/search' })
-        }
-      })
+    newGroup() {
+      this.menu = false
+      uni.navigateTo({ url: '/pages/chat/create' })
+    },
+    addMate() {
+      this.menu = false
+      uni.navigateTo({ url: '/pages/search/search' })
     },
     goSearch() {
       uni.navigateTo({
@@ -178,4 +198,59 @@ export default {
 .mute { font-size: 22rpx; margin-left: 8rpx; color: #9CA3AF; }
 .empty { padding: 160rpx 40rpx; text-align: center; color: #6B7280; font-size: 28rpx; background: transparent; }
 .ico { font-size: 36rpx; color: #1677FF; padding: 8rpx 12rpx; }
+.plus {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.plus-h, .plus-v {
+  position: absolute;
+  background: #111827;
+  border-radius: 2rpx;
+  transition: transform 180ms ease;
+}
+.plus-h { width: 28rpx; height: 3rpx; }
+.plus-v { width: 3rpx; height: 28rpx; }
+.mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 30; background: rgba(17, 24, 39, 0.04); }
+.drop {
+  position: fixed;
+  right: 16rpx;
+  z-index: 31;
+  width: 280rpx;
+  padding: 8rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  box-shadow: 0 12rpx 40rpx rgba(17, 24, 39, 0.1);
+  transform-origin: calc(100% - 28rpx) 0;
+  animation: drop-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.caret {
+  position: absolute;
+  top: -10rpx;
+  right: 28rpx;
+  width: 20rpx;
+  height: 20rpx;
+  background: #fff;
+  transform: rotate(45deg);
+  border-radius: 4rpx;
+  box-shadow: -2rpx -2rpx 6rpx rgba(17, 24, 39, 0.04);
+}
+.drop-item {
+  height: 84rpx;
+  padding: 0 20rpx;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  font-size: 28rpx;
+  color: #111827;
+  border-radius: 14rpx;
+}
+.drop-item + .drop-item { margin-top: 4rpx; }
+@keyframes drop-in {
+  from { opacity: 0; transform: translateY(-8rpx) scale(0.96); }
+  to { opacity: 1; transform: none; }
+}
 </style>