fix(mobile): 修复 UsersView 更多菜单定位并统一逻辑
**问题描述**: - UsersView 的"更多"菜单仍然出现在页面左上角错误位置 - UsersView 使用 actionButtonRefs Map 获取按钮元素,导致定位失败 - UsersView 和 AccountsView 的菜单定位逻辑不一致,难以维护 **解决方案**: - 修改 openActionMenu 函数签名,添加 MouseEvent 参数 - 使用 e.currentTarget 直接从事件对象获取触发元素 - 移除不必要的 actionButtonRefs Map 和 setActionButtonRef 函数 - 统一菜单宽度为 200px(与 AccountsView 一致) - 完全复制 AccountsView 的定位逻辑,确保两者行为一致 **技术要点**: - 移动端:菜单居中对齐按钮,优先显示在按钮下方 - 桌面端:使用鼠标位置定位,添加边界检测 - 简化代码,移除不必要的防御性检查 - 两个组件的菜单定位逻辑完全一致,便于维护
This commit is contained in:
@@ -372,8 +372,7 @@
|
||||
|
||||
<!-- More Actions Menu Trigger -->
|
||||
<button
|
||||
:ref="(el) => setActionButtonRef(row.id, el)"
|
||||
@click="openActionMenu(row)"
|
||||
@click="openActionMenu(row, $event)"
|
||||
class="action-menu-trigger flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
|
||||
:class="{ 'bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-white': activeMenuId === row.id }"
|
||||
>
|
||||
@@ -485,7 +484,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted, onUnmounted, type ComponentPublicInstance } from 'vue'
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
@@ -745,56 +744,56 @@ let abortController: AbortController | null = null
|
||||
// Action Menu State
|
||||
const activeMenuId = ref<number | null>(null)
|
||||
const menuPosition = ref<{ top: number; left: number } | null>(null)
|
||||
const actionButtonRefs = ref<Map<number, HTMLElement>>(new Map())
|
||||
|
||||
const setActionButtonRef = (userId: number, el: Element | ComponentPublicInstance | null) => {
|
||||
if (el instanceof HTMLElement) {
|
||||
actionButtonRefs.value.set(userId, el)
|
||||
} else {
|
||||
actionButtonRefs.value.delete(userId)
|
||||
}
|
||||
}
|
||||
|
||||
const openActionMenu = (user: User) => {
|
||||
const openActionMenu = (user: User, e: MouseEvent) => {
|
||||
if (activeMenuId.value === user.id) {
|
||||
closeActionMenu()
|
||||
} else {
|
||||
const buttonEl = actionButtonRefs.value.get(user.id)
|
||||
if (buttonEl) {
|
||||
const rect = buttonEl.getBoundingClientRect()
|
||||
const menuWidth = 192
|
||||
const menuHeight = 240
|
||||
const padding = 8
|
||||
const viewportWidth = window.innerWidth
|
||||
const viewportHeight = window.innerHeight
|
||||
const target = e.currentTarget as HTMLElement
|
||||
if (!target) {
|
||||
closeActionMenu()
|
||||
return
|
||||
}
|
||||
|
||||
let left, top
|
||||
const rect = target.getBoundingClientRect()
|
||||
const menuWidth = 200
|
||||
const menuHeight = 240
|
||||
const padding = 8
|
||||
const viewportWidth = window.innerWidth
|
||||
const viewportHeight = window.innerHeight
|
||||
|
||||
if (viewportWidth < 768) {
|
||||
left = Math.max(padding, Math.min(
|
||||
rect.left + rect.width / 2 - menuWidth / 2,
|
||||
viewportWidth - menuWidth - padding
|
||||
))
|
||||
let left, top
|
||||
|
||||
if (viewportWidth < 768) {
|
||||
// 居中显示,水平位置
|
||||
left = Math.max(padding, Math.min(
|
||||
rect.left + rect.width / 2 - menuWidth / 2,
|
||||
viewportWidth - menuWidth - padding
|
||||
))
|
||||
|
||||
// 优先显示在按钮下方
|
||||
top = rect.bottom + 4
|
||||
|
||||
// 如果下方空间不够,显示在上方
|
||||
if (top + menuHeight > viewportHeight - padding) {
|
||||
top = rect.top - menuHeight - 4
|
||||
// 如果上方也不够,就贴在视口顶部
|
||||
if (top < padding) {
|
||||
top = rect.bottom + 4
|
||||
}
|
||||
} else {
|
||||
left = Math.min(
|
||||
Math.max(rect.right - menuWidth, padding),
|
||||
Math.max(viewportWidth - menuWidth - padding, padding)
|
||||
)
|
||||
top = rect.bottom + 4
|
||||
if (top + menuHeight > viewportHeight - padding) {
|
||||
top = Math.max(rect.top - menuHeight - 4, padding)
|
||||
top = padding
|
||||
}
|
||||
}
|
||||
|
||||
menuPosition.value = {
|
||||
top,
|
||||
left
|
||||
} else {
|
||||
left = Math.max(padding, Math.min(
|
||||
e.clientX - menuWidth,
|
||||
viewportWidth - menuWidth - padding
|
||||
))
|
||||
top = e.clientY
|
||||
if (top + menuHeight > viewportHeight - padding) {
|
||||
top = viewportHeight - menuHeight - padding
|
||||
}
|
||||
}
|
||||
|
||||
menuPosition.value = { top, left }
|
||||
activeMenuId.value = user.id
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user