style: 优化表格显示固定列宽

2026-01-23 09:38:02 +00:00 · 2025-11-29 11:20:07 +08:00
parent 63a7c2514b
commit 68f003976e
3 changed files with 1672 additions and 1045 deletions
--- a/web/admin-spa/src/components/common/ActionDropdown.vue
+++ b/web/admin-spa/src/components/common/ActionDropdown.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="relative">
+    <!-- 触发器按钮 -->
+    <button
+      ref="triggerRef"
+      class="flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition-all duration-200 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+      :class="[
+        isOpen &&
+          'border-blue-400 bg-blue-50 text-blue-600 dark:border-blue-500 dark:bg-blue-900/30 dark:text-blue-400'
+      ]"
+      title="更多操作"
+      @click.stop="toggleDropdown"
+    >
+      <i class="fas fa-ellipsis-v text-sm"></i>
+    </button>
+
+    <!-- 下拉菜单 - 使用 Teleport 避免被父容器裁剪 -->
+    <Teleport to="body">
+      <transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="transform scale-95 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-95 opacity-0"
+      >
+        <div
+          v-if="isOpen"
+          ref="dropdownRef"
+          class="fixed z-[9999] min-w-[140px] overflow-hidden rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-600 dark:bg-gray-800"
+          :style="dropdownStyle"
+        >
+          <button
+            v-for="action in actions"
+            :key="action.key"
+            class="flex w-full items-center gap-2 whitespace-nowrap px-3 py-2 text-left text-sm transition-colors duration-150"
+            :class="getActionClass(action)"
+            @click.stop="handleAction(action)"
+          >
+            <i :class="['fas', action.icon, 'w-4 text-center text-xs']"></i>
+            <span>{{ action.label }}</span>
+          </button>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+
+defineProps({
+  actions: {
+    type: Array,
+    required: true
+    // 格式: [{ key: 'edit', label: '编辑', icon: 'fa-edit', color: 'blue', handler: () => {} }]
+  }
+})
+
+const emit = defineEmits(['action'])
+
+const isOpen = ref(false)
+const triggerRef = ref(null)
+const dropdownRef = ref(null)
+const dropdownStyle = ref({})
+
+const getActionClass = (action) => {
+  const colorMap = {
+    purple: 'text-purple-600 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-900/20',
+    indigo: 'text-indigo-600 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-900/20',
+    blue: 'text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20',
+    green: 'text-green-600 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-900/20',
+    orange: 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-900/20',
+    red: 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20',
+    gray: 'text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-700'
+  }
+  return colorMap[action.color] || colorMap.gray
+}
+
+const toggleDropdown = async () => {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    await nextTick()
+    updateDropdownPosition()
+  }
+}
+
+const closeDropdown = () => {
+  isOpen.value = false
+}
+
+const handleAction = (action) => {
+  closeDropdown()
+  if (action.handler) {
+    action.handler()
+  }
+  emit('action', action.key)
+}
+
+const updateDropdownPosition = () => {
+  if (!triggerRef.value || !isOpen.value) return
+
+  const trigger = triggerRef.value.getBoundingClientRect()
+  const dropdownHeight = 200 // 预估高度
+  const dropdownWidth = 160 // 预估宽度
+  const spaceBelow = window.innerHeight - trigger.bottom
+  const spaceAbove = trigger.top
+  const spaceRight = window.innerWidth - trigger.right
+  const spaceLeft = trigger.left
+
+  let top, left
+
+  // 计算垂直位置
+  if (spaceBelow >= dropdownHeight || spaceBelow >= spaceAbove) {
+    top = trigger.bottom + 4
+  } else {
+    top = trigger.top - dropdownHeight - 4
+  }
+
+  // 计算水平位置 - 优先显示在左侧（因为按钮在右侧固定列）
+  if (spaceLeft >= dropdownWidth) {
+    left = trigger.left - dropdownWidth + trigger.width
+  } else if (spaceRight >= dropdownWidth) {
+    left = trigger.left
+  } else {
+    left = window.innerWidth - dropdownWidth - 10
+  }
+
+  // 确保不超出边界
+  if (left < 10) left = 10
+  if (top < 10) top = 10
+
+  dropdownStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`
+  }
+}
+
+const handleScroll = () => {
+  if (isOpen.value) {
+    updateDropdownPosition()
+  }
+}
+
+const handleResize = () => {
+  if (isOpen.value) {
+    closeDropdown()
+  }
+}
+
+const handleClickOutside = (event) => {
+  if (!triggerRef.value || !isOpen.value) return
+
+  if (!triggerRef.value.contains(event.target)) {
+    if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+      closeDropdown()
+    } else if (!dropdownRef.value) {
+      closeDropdown()
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, true)
+  window.addEventListener('resize', handleResize)
+  document.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll, true)
+  window.removeEventListener('resize', handleResize)
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>