From ec0f815a536f2cbb6344e14e0be3ec4b574f23e0 Mon Sep 17 00:00:00 2001
From: qian <wuchengqian5@163.com>
Date: Sat, 15 Aug 2026 00:07:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=E4=BC=98=E5=8C=96=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E6=A1=86=E8=A2=AB=E5=85=B6=E4=BB=96=E7=BB=84=E4=BB=B6=E9=81=AE?=
 =?UTF-8?q?=E6=8C=A1=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/TableFilterForm.vue | 88 ++++++-------------
 web/tenant/src/views/finance/OrdersPage.vue   | 28 +++---
 .../src/views/finance/TransactionsPage.vue    | 24 ++---
 .../views/notification/NotificationsPage.vue  | 27 +++---
 web/tenant/src/views/service/ApiKeysPage.vue  | 28 +++---
 web/tenant/src/views/service/TaskLogsPage.vue | 25 +++---
 .../src/views/service/UsageLogsPage.vue       | 24 ++---
 web/tenant/src/views/support/TicketsPage.vue  | 28 +++---
 web/tenant/src/views/team/MembersPage.vue     |  1 -
 9 files changed, 138 insertions(+), 135 deletions(-)

diff --git a/web/tenant/src/components/common/TableFilterForm.vue b/web/tenant/src/components/common/TableFilterForm.vue
index adf58c8..cdae757 100644
--- a/web/tenant/src/components/common/TableFilterForm.vue
+++ b/web/tenant/src/components/common/TableFilterForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, h } from 'vue'
-import { NForm, NFormItem, NInput, NSelect, NDatePicker, NInputNumber, NButton, NDrawer, NDrawerContent } from 'naive-ui'
+import { NForm, NFormItem, NInput, NSelect, NDatePicker, NInputNumber, NButton, NDrawer, NDrawerContent, NDropdown } from 'naive-ui'
 import Icon from './Icon.vue'
 import MobileRangeFilter from './MobileRangeFilter.vue'
 
@@ -49,9 +49,17 @@ const emit = defineEmits<{
 // 表单数据（由父组件通过 v-model 绑定）
 const modelValue = defineModel<Record<string, any>>({ required: true })
 
-const showExportDropdown = ref(false)
 const showFilterDrawer = ref(false)
 
+// 导出格式下拉选项（NDropdown 默认 teleport 到 body，避免被 .card 的 backdrop-filter
+// stacking context 困住而被下方表格面板遮挡）
+const exportDropdownOptions = computed(() =>
+  props.exportFormats.map(format => ({
+    label: format === 'csv' ? '导出 CSV' : '导出 Excel',
+    key: format,
+  }))
+)
+
 // 检测是否为移动端
 const isMobile = ref(false)
 const checkMobile = () => {
@@ -104,9 +112,8 @@ function handleReset() {
   emit('reset')
 }
 
-function handleExport(format: 'csv' | 'xlsx') {
-  showExportDropdown.value = false
-  emit('export', format)
+function handleExport(format: string | number) {
+  emit('export', format as 'csv' | 'xlsx')
 }
 
 // 日期时间范围默认快捷选项
@@ -243,39 +250,19 @@ const renderField = (field: FilterField) => {
 
         <div class="flex items-center gap-2">
           <!-- 导出按钮 -->
-          <div v-if="showExport" class="relative">
-            <n-button
-              :loading="exporting"
-              :disabled="exporting"
-              @click="showExportDropdown = !showExportDropdown"
-            >
+          <n-dropdown
+            v-if="showExport"
+            trigger="click"
+            :options="exportDropdownOptions"
+            @select="handleExport"
+          >
+            <n-button :loading="exporting" :disabled="exporting">
               <template #icon>
                 <Icon name="download" size="sm" />
               </template>
               导出
             </n-button>
-            <div
-              v-if="showExportDropdown"
-              class="absolute right-0 z-50 mt-2 w-36 overflow-hidden rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
-            >
-              <button
-                v-if="exportFormats.includes('csv')"
-                type="button"
-                class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
-                @click="handleExport('csv')"
-              >
-                导出 CSV
-              </button>
-              <button
-                v-if="exportFormats.includes('xlsx')"
-                type="button"
-                class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
-                @click="handleExport('xlsx')"
-              >
-                导出 Excel
-              </button>
-            </div>
-          </div>
+          </n-dropdown>
 
           <!-- 自定义额外按钮插槽 -->
           <slot name="extra-actions" />
@@ -356,12 +343,12 @@ const renderField = (field: FilterField) => {
             <!-- 导出按钮 -->
             <template v-if="showExport">
               <span class="mx-1 h-6 w-px bg-gray-200" aria-hidden="true"></span>
-              <div class="relative">
-                <n-button
-                  :loading="exporting"
-                  :disabled="exporting"
-                  @click="showExportDropdown = !showExportDropdown"
-                >
+              <n-dropdown
+                trigger="click"
+                :options="exportDropdownOptions"
+                @select="handleExport"
+              >
+                <n-button :loading="exporting" :disabled="exporting">
                   <template #icon>
                     <Icon name="download" size="sm" />
                   </template>
@@ -370,28 +357,7 @@ const renderField = (field: FilterField) => {
                     <Icon name="chevronDown" size="xs" />
                   </template>
                 </n-button>
-                <div
-                  v-if="showExportDropdown"
-                  class="absolute right-0 z-50 mt-2 w-36 overflow-hidden rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
-                >
-                  <button
-                    v-if="exportFormats.includes('csv')"
-                    type="button"
-                    class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
-                    @click="handleExport('csv')"
-                  >
-                    导出 CSV
-                  </button>
-                  <button
-                    v-if="exportFormats.includes('xlsx')"
-                    type="button"
-                    class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
-                    @click="handleExport('xlsx')"
-                  >
-                    导出 Excel
-                  </button>
-                </div>
-              </div>
+              </n-dropdown>
             </template>
 
             <!-- 自定义额外按钮插槽 -->
diff --git a/web/tenant/src/views/finance/OrdersPage.vue b/web/tenant/src/views/finance/OrdersPage.vue
index a392603..8bb0da8 100644
--- a/web/tenant/src/views/finance/OrdersPage.vue
+++ b/web/tenant/src/views/finance/OrdersPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, h } from 'vue'
 import type { DataTableColumns } from 'naive-ui'
-import { NButton } from 'naive-ui'
+import { NButton, NDropdown } from 'naive-ui'
 import Icon from '@/components/common/Icon.vue'
 import ResponsiveDataTable from '@/components/common/ResponsiveDataTable.vue'
 import { renderBadge, formatMoney, tableScrollX } from '@/utils/renderUtils'
@@ -15,7 +15,16 @@ const pageSize = ref(20)
 const total = ref(0)
 const statusFilter = ref('')
 
-const showExportDropdown = ref(false)
+// 导出格式下拉选项（NDropdown 默认 teleport 到 body，避免被 .card 的 backdrop-filter
+// stacking context 困住而被下方表格面板遮挡）
+const exportDropdownOptions = [
+	{ label: '导出 CSV', key: 'csv' },
+	{ label: '导出 Excel', key: 'xlsx' },
+]
+
+function handleExport(format: string | number) {
+	exportFile(format as 'csv' | 'xlsx')
+}
 const { exporting, exportFile } = useExport({
 	url: '/tenant/orders/export',
 	getFilters: () => ({
@@ -162,17 +171,14 @@ onMounted(() => {
           <p class="page-description">查看所有订阅和充值订单</p>
         </div>
         <!-- Export dropdown -->
-        <div class="relative inline-block">
-          <button class="btn btn-secondary btn-sm" :disabled="exporting" @click="showExportDropdown = !showExportDropdown">
-            <svg v-if="!exporting" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
-            <svg v-else class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+        <n-dropdown trigger="click" :options="exportDropdownOptions" @select="handleExport">
+          <button type="button" class="btn btn-secondary btn-sm" :disabled="exporting">
+            <Icon v-if="exporting" name="refresh" size="sm" class="animate-spin" />
+            <Icon v-else name="download" size="sm" />
             导出
+            <Icon name="chevronDown" size="xs" />
           </button>
-          <div v-if="showExportDropdown" class="absolute right-0 mt-2 w-36 bg-white rounded-xl border shadow-lg py-1 z-50">
-            <div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</div>
-            <div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</div>
-          </div>
-        </div>
+        </n-dropdown>
       </div>
     </div>
 
diff --git a/web/tenant/src/views/finance/TransactionsPage.vue b/web/tenant/src/views/finance/TransactionsPage.vue
index 20a7c8a..c9dca45 100644
--- a/web/tenant/src/views/finance/TransactionsPage.vue
+++ b/web/tenant/src/views/finance/TransactionsPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, h } from 'vue'
 import type { DataTableColumns } from 'naive-ui'
-import { NInput, NInputNumber, NSelect } from 'naive-ui'
+import { NInput, NInputNumber, NSelect, NDropdown } from 'naive-ui'
 import Icon from '@/components/common/Icon.vue'
 import DateRangePicker from '@/components/common/DateRangePicker.vue'
 import ResponsiveDataTable from '@/components/common/ResponsiveDataTable.vue'
@@ -32,8 +32,16 @@ const filters = ref({
 	model: '',
 })
 
-// 导出下拉菜单
-const showExportDropdown = ref(false)
+// 导出格式下拉选项（NDropdown 默认 teleport 到 body，避免被 .card 的 backdrop-filter
+// stacking context 困住而被下方表格面板遮挡）
+const exportDropdownOptions = [
+	{ label: '导出 CSV', key: 'csv' },
+	{ label: '导出 Excel', key: 'xlsx' },
+]
+
+function handleExport(format: string | number) {
+	exportFile(format as 'csv' | 'xlsx')
+}
 
 const { exporting, exportFile } = useExport({
 	url: '/tenant/wallet/transactions/export',
@@ -231,18 +239,14 @@ onMounted(fetchTransactions)
 							刷新
 						</button>
 						<span class="mx-1 h-6 w-px bg-gray-200" aria-hidden="true"></span>
-						<div class="relative">
-							<button type="button" class="btn btn-secondary btn-sm" :disabled="exporting || loading" @click="showExportDropdown = !showExportDropdown">
+						<n-dropdown trigger="click" :options="exportDropdownOptions" @select="handleExport">
+							<button type="button" class="btn btn-secondary btn-sm" :disabled="exporting || loading">
 								<Icon v-if="exporting" name="refresh" size="sm" class="animate-spin" />
 								<Icon v-else name="download" size="sm" />
 								导出
 								<Icon name="chevronDown" size="xs" />
 							</button>
-							<div v-if="showExportDropdown" class="absolute right-0 z-50 mt-2 w-36 overflow-hidden rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
-								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</button>
-								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</button>
-							</div>
-						</div>
+						</n-dropdown>
 					</div>
 				</form>
 			</div>
diff --git a/web/tenant/src/views/notification/NotificationsPage.vue b/web/tenant/src/views/notification/NotificationsPage.vue
index bd8ee69..2774600 100644
--- a/web/tenant/src/views/notification/NotificationsPage.vue
+++ b/web/tenant/src/views/notification/NotificationsPage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { NDropdown } from 'naive-ui'
 import Icon from '@/components/common/Icon.vue'
 import BasePagination from '@/components/common/BasePagination.vue'
 import request from '@/utils/request'
@@ -23,7 +24,16 @@ const pageSize = ref(20)
 const total = ref(0)
 const activeTab = ref<'all' | 'unread'>('all')
 
-const showExportDropdown = ref(false)
+// 导出格式下拉选项（NDropdown 默认 teleport 到 body，避免被 .card 的 backdrop-filter
+// stacking context 困住而被下方表格面板遮挡）
+const exportDropdownOptions = [
+	{ label: '导出 CSV', key: 'csv' },
+	{ label: '导出 Excel', key: 'xlsx' },
+]
+
+function handleExport(format: string | number) {
+	exportFile(format as 'csv' | 'xlsx')
+}
 const { exporting, exportFile } = useExport({
 	url: '/tenant/notifications/export',
 })
@@ -125,17 +135,14 @@ onMounted(() => {
 			</div>
 			<div class="flex items-center gap-2">
 				<!-- Export dropdown -->
-				<div class="relative inline-block">
-					<button class="btn btn-secondary" :disabled="exporting" @click="showExportDropdown = !showExportDropdown">
-						<svg v-if="!exporting" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
-						<svg v-else class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+				<n-dropdown trigger="click" :options="exportDropdownOptions" @select="handleExport">
+					<button type="button" class="btn btn-secondary" :disabled="exporting">
+						<Icon v-if="exporting" name="refresh" size="sm" class="animate-spin" />
+						<Icon v-else name="download" size="sm" />
 						导出
+						<Icon name="chevronDown" size="xs" />
 					</button>
-					<div v-if="showExportDropdown" class="absolute right-0 mt-2 w-36 bg-white rounded-xl border shadow-lg py-1 z-50">
-						<div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</div>
-						<div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</div>
-					</div>
-				</div>
+				</n-dropdown>
 				<button class="btn btn-secondary" @click="markAllRead" :disabled="unreadCount === 0">
 					<Icon name="check" size="sm" />
 					全部已读
diff --git a/web/tenant/src/views/service/ApiKeysPage.vue b/web/tenant/src/views/service/ApiKeysPage.vue
index 6d314a8..3d281a6 100644
--- a/web/tenant/src/views/service/ApiKeysPage.vue
+++ b/web/tenant/src/views/service/ApiKeysPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, h } from 'vue'
 import type { DataTableColumns } from 'naive-ui'
-import { NButton, NTag } from 'naive-ui'
+import { NButton, NTag, NDropdown } from 'naive-ui'
 import BaseModal from '@/components/common/BaseModal.vue'
 import ResponsiveDataTable from '@/components/common/ResponsiveDataTable.vue'
 import ApiKeyEditModal from '@/components/common/ApiKeyEditModal.vue'
@@ -41,7 +41,16 @@ const page = ref(1)
 const pageSize = ref(20)
 const total = ref(0)
 
-const showExportDropdown = ref(false)
+// 导出格式下拉选项（NDropdown 默认 teleport 到 body，避免被 .card 的 backdrop-filter
+// stacking context 困住而被下方表格面板遮挡）
+const exportDropdownOptions = [
+	{ label: '导出 CSV', key: 'csv' },
+	{ label: '导出 Excel', key: 'xlsx' },
+]
+
+function handleExport(format: string | number) {
+	exportFile(format as 'csv' | 'xlsx')
+}
 const { exporting, exportFile } = useExport({
 	url: '/tenant/api-keys/export',
 	getFilters: () => ({
@@ -298,17 +307,14 @@ onMounted(() => {
 			</div>
 			<div class="flex flex-wrap items-center gap-2 lg:flex-none">
 				<!-- Export dropdown -->
-				<div class="relative inline-block">
-					<button class="btn btn-secondary" :disabled="exporting" @click="showExportDropdown = !showExportDropdown">
-						<svg v-if="!exporting" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
-						<svg v-else class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+				<n-dropdown trigger="click" :options="exportDropdownOptions" @select="handleExport">
+					<button type="button" class="btn btn-secondary" :disabled="exporting">
+						<Icon v-if="exporting" name="refresh" size="sm" class="animate-spin" />
+						<Icon v-else name="download" size="sm" />
 						导出
+						<Icon name="chevronDown" size="xs" />
 					</button>
-					<div v-if="showExportDropdown" class="absolute right-0 mt-2 w-36 bg-white rounded-xl border shadow-lg py-1 z-50">
-						<div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</div>
-						<div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</div>
-					</div>
-				</div>
+				</n-dropdown>
 				<button class="btn btn-primary" @click="showCreateModal = true">
 					<Icon name="plus" size="sm" />
 					创建密钥
diff --git a/web/tenant/src/views/service/TaskLogsPage.vue b/web/tenant/src/views/service/TaskLogsPage.vue
index ab4cb47..8c2c0ad 100644
--- a/web/tenant/src/views/service/TaskLogsPage.vue
+++ b/web/tenant/src/views/service/TaskLogsPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, h } from 'vue'
 import type { DataTableColumns } from 'naive-ui'
-import { NButton, NTag, NInput } from 'naive-ui'
+import { NButton, NTag, NInput, NDropdown } from 'naive-ui'
 import { useRoute } from 'vue-router'
 import Icon from '@/components/common/Icon.vue'
 import BaseModal from '@/components/common/BaseModal.vue'
@@ -57,7 +57,16 @@ const filterPlatform = ref('')
 const filterTaskId = ref('')
 const filterStartDate = ref(todayStart())
 const filterEndDate = ref(todayEnd())
-const showExportDropdown = ref(false)
+// 导出格式下拉选项（NDropdown 默认 teleport 到 body，避免被 .card 的 backdrop-filter
+// stacking context 困住而被下方表格面板遮挡）
+const exportDropdownOptions = [
+	{ label: '导出 CSV', key: 'csv' },
+	{ label: '导出 Excel', key: 'xlsx' },
+]
+
+function handleExport(format: string | number) {
+	exportFile(format as 'csv' | 'xlsx')
+}
 
 const showDetail = ref(false)
 const detailLoading = ref(false)
@@ -261,7 +270,7 @@ onMounted(() => {
 <template>
 	<div class="viewport-table-page space-y-6">
 		<!-- Filters -->
-		<div class="relative z-20 overflow-visible card">
+		<div class="card">
 			<div class="card-body !p-4">
 				<form class="flex flex-wrap items-center gap-x-3 gap-y-3" @submit.prevent="applyFilters">
 					<DateTimeRangePicker
@@ -288,18 +297,14 @@ onMounted(() => {
 						</button>
 						<button type="button" class="btn btn-secondary btn-sm" @click="resetFilters">重置</button>
 						<span class="mx-1 h-6 w-px bg-gray-200" aria-hidden="true"></span>
-						<div class="relative">
-							<button type="button" class="btn btn-secondary btn-sm" :disabled="exporting || loading" @click="showExportDropdown = !showExportDropdown">
+						<n-dropdown trigger="click" :options="exportDropdownOptions" @select="handleExport">
+							<button type="button" class="btn btn-secondary btn-sm" :disabled="exporting || loading">
 								<Icon v-if="exporting" name="refresh" size="sm" class="animate-spin" />
 								<Icon v-else name="download" size="sm" />
 								导出
 								<Icon name="chevronDown" size="xs" />
 							</button>
-							<div v-if="showExportDropdown" class="absolute right-0 z-50 mt-2 w-36 overflow-hidden rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
-								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</button>
-								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</button>
-							</div>
-						</div>
+						</n-dropdown>
 					</div>
 				</form>
 			</div>
diff --git a/web/tenant/src/views/service/UsageLogsPage.vue b/web/tenant/src/views/service/UsageLogsPage.vue
index cc59f04..936692e 100644
--- a/web/tenant/src/views/service/UsageLogsPage.vue
+++ b/web/tenant/src/views/service/UsageLogsPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, h } from 'vue'
 import type { DataTableColumns } from 'naive-ui'
-import { NButton, NInput, NSelect } from 'naive-ui'
+import { NButton, NInput, NSelect, NDropdown } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import Icon from '@/components/common/Icon.vue'
 import BaseModal from '@/components/common/BaseModal.vue'
@@ -45,8 +45,16 @@ const filters = ref({
 	requestType: '',
 })
 
-// 导出下拉菜单
-const showExportDropdown = ref(false)
+// 导出格式下拉选项（NDropdown 默认 teleport 到 body，避免被 .card 的 backdrop-filter
+// stacking context 困住而被下方表格面板遮挡）
+const exportDropdownOptions = [
+	{ label: '导出 CSV', key: 'csv' },
+	{ label: '导出 Excel', key: 'xlsx' },
+]
+
+function handleExport(format: string | number) {
+	exportFile(format as 'csv' | 'xlsx')
+}
 
 const { exporting, exportFile } = useExport({
 	url: '/tenant/usage-logs/export',
@@ -500,18 +508,14 @@ onMounted(() => {
 						</button>
 						<button type="button" class="btn btn-secondary btn-sm" @click="resetFilters">重置</button>
 						<span class="mx-1 h-6 w-px bg-gray-200" aria-hidden="true"></span>
-						<div class="relative">
-							<button type="button" class="btn btn-secondary btn-sm" :disabled="exporting || loading" @click="showExportDropdown = !showExportDropdown">
+						<n-dropdown trigger="click" :options="exportDropdownOptions" @select="handleExport">
+							<button type="button" class="btn btn-secondary btn-sm" :disabled="exporting || loading">
 								<Icon v-if="exporting" name="refresh" size="sm" class="animate-spin" />
 								<Icon v-else name="download" size="sm" />
 								导出
 								<Icon name="chevronDown" size="xs" />
 							</button>
-							<div v-if="showExportDropdown" class="absolute right-0 z-50 mt-2 w-36 overflow-hidden rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
-								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</button>
-								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</button>
-							</div>
-						</div>
+						</n-dropdown>
 					</div>
 				</form>
 			</div>
diff --git a/web/tenant/src/views/support/TicketsPage.vue b/web/tenant/src/views/support/TicketsPage.vue
index b9f3feb..855747c 100644
--- a/web/tenant/src/views/support/TicketsPage.vue
+++ b/web/tenant/src/views/support/TicketsPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, h } from 'vue'
 import type { DataTableColumns } from 'naive-ui'
-import { NInput } from 'naive-ui'
+import { NInput, NDropdown } from 'naive-ui'
 import BaseModal from '@/components/common/BaseModal.vue'
 import ResponsiveDataTable from '@/components/common/ResponsiveDataTable.vue'
 import Icon from '@/components/common/Icon.vue'
@@ -37,7 +37,16 @@ const page = ref(1)
 const pageSize = ref(20)
 const total = ref(0)
 
-const showExportDropdown = ref(false)
+// 导出格式下拉选项（NDropdown 默认 teleport 到 body，避免被 .card 的 backdrop-filter
+// stacking context 困住而被下方表格面板遮挡）
+const exportDropdownOptions = [
+	{ label: '导出 CSV', key: 'csv' },
+	{ label: '导出 Excel', key: 'xlsx' },
+]
+
+function handleExport(format: string | number) {
+	exportFile(format as 'csv' | 'xlsx')
+}
 const { exporting, exportFile } = useExport({
 	url: '/tenant/tickets/export',
 })
@@ -248,17 +257,14 @@ onMounted(() => {
 			</div>
 			<div class="flex items-center gap-2">
 				<!-- Export dropdown -->
-				<div class="relative inline-block">
-					<button class="btn btn-secondary" :disabled="exporting" @click="showExportDropdown = !showExportDropdown">
-						<svg v-if="!exporting" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
-						<svg v-else class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+				<n-dropdown trigger="click" :options="exportDropdownOptions" @select="handleExport">
+					<button type="button" class="btn btn-secondary" :disabled="exporting">
+						<Icon v-if="exporting" name="refresh" size="sm" class="animate-spin" />
+						<Icon v-else name="download" size="sm" />
 						导出
+						<Icon name="chevronDown" size="xs" />
 					</button>
-					<div v-if="showExportDropdown" class="absolute right-0 mt-2 w-36 bg-white rounded-xl border shadow-lg py-1 z-50">
-						<div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</div>
-						<div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</div>
-					</div>
-				</div>
+				</n-dropdown>
 				<button class="btn btn-primary" @click="showCreateModal = true">
 					<Icon name="plus" size="sm" />
 					新建工单
diff --git a/web/tenant/src/views/team/MembersPage.vue b/web/tenant/src/views/team/MembersPage.vue
index 2aceb9b..d19cbe1 100644
--- a/web/tenant/src/views/team/MembersPage.vue
+++ b/web/tenant/src/views/team/MembersPage.vue
@@ -35,7 +35,6 @@ const filterFields: FilterField[] = [
 	},
 ]
 
-const showExportDropdown = ref(false)
 const showMoreMenu = ref(false)
 const { exporting, exportFile } = useExport({
 	url: '/tenant/members/export',