fix(mobile): 优化移动端表格、操作栏和弹窗显示

**问题描述**：
- 表格在移动端显示列过多，需要横向滚动，内容被截断
- 顶部操作栏按钮拥挤，占用过多空间
- 弹窗表单在小屏幕上布局不合理
- "更多"操作菜单定位错误，位置过高或超出屏幕
- 滚动页面时菜单不会自动关闭，与卡片分离

**解决方案**：

1. **DataTable 组件 - 移动端卡片视图**
   - 在 < 768px 时自动切换到卡片布局
   - 每个表格行渲染为独立卡片，所有字段清晰可见
   - 操作按钮在卡片底部，触摸目标足够大
   - 支持深色模式，包含加载和空状态
   - 自动应用于所有使用 DataTable 的管理页面

2. **UsersView 顶部操作栏优化**
   - 移动端：搜索框全宽 + 次要按钮显示为图标 + 创建按钮突出
   - 桌面端：保持原有布局（图标 + 文字）
   - 使用响应式 Tailwind classes

3. **UserCreateModal 弹窗优化**
   - 余额/并发数字段：移动端单列，桌面端双列
   - 弹窗边距：移动端 8px，桌面端 16px

4. **操作菜单定位修复**
   - UsersView: 移动端菜单居中对齐按钮，智能定位
   - AccountsView: 移动端菜单优先显示在按钮下方
   - 所有情况下确保菜单不超出屏幕边界
   - 添加滚动监听，滚动时自动关闭菜单

**影响范围**：
- 所有使用 DataTable 的管理页面（8 个页面）自动获得移动端卡片视图
- 用户管理和账号管理页面的操作菜单定位优化
- 创建用户弹窗的响应式布局优化

**技术要点**：
- 使用 Tailwind 响应式断点（md:, sm:）
- 触摸目标 ≥ 44px
- 完整支持深色模式
- 向后兼容，桌面端保持原有布局

frontend/src/views/admin/AccountsView.vue

@@ -120,7 +120,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { useAuthStore } from '@/stores/auth'
@@ -202,7 +202,56 @@ const cols = computed(() => {
 })
 
 const handleEdit = (a: Account) => { edAcc.value = a; showEdit.value = true }
-const openMenu = (a: Account, e: MouseEvent) => { menu.acc = a; menu.pos = { top: e.clientY, left: e.clientX - 200 }; menu.show = true }
+const openMenu = (a: Account, e: MouseEvent) => {
+  menu.acc = a
+
+  const target = e.currentTarget as HTMLElement
+  if (target) {
+    const rect = target.getBoundingClientRect()
+    const menuWidth = 200
+    const menuHeight = 240
+    const padding = 8
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    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 = padding
+        }
+      }
+    } 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
+      }
+    }
+
+    menu.pos = { top, left }
+  } else {
+    menu.pos = { top: e.clientY, left: e.clientX - 200 }
+  }
+
+  menu.show = true
+}
 const toggleSel = (id: number) => { const i = selIds.value.indexOf(id); if(i === -1) selIds.value.push(id); else selIds.value.splice(i, 1) }
 const selectPage = () => { selIds.value = [...new Set([...selIds.value, ...accounts.value.map(a => a.id)])] }
 const handleBulkDelete = async () => { if(!confirm(t('common.confirm'))) return; try { await Promise.all(selIds.value.map(id => adminAPI.accounts.delete(id))); selIds.value = []; reload() } catch (error) { console.error('Failed to bulk delete accounts:', error) } }
@@ -360,5 +409,14 @@ const isExpired = (value: number | null) => {
   return value * 1000 <= Date.now()
 }
 
-onMounted(async () => { load(); try { const [p, g] = await Promise.all([adminAPI.proxies.getAll(), adminAPI.groups.getAll()]); proxies.value = p; groups.value = g } catch (error) { console.error('Failed to load proxies/groups:', error) } })
+// 滚动时关闭菜单
+const handleScroll = () => {
+  menu.show = false
+}
+
+onMounted(async () => { load(); try { const [p, g] = await Promise.all([adminAPI.proxies.getAll(), adminAPI.groups.getAll()]); proxies.value = p; groups.value = g } catch (error) { console.error('Failed to load proxies/groups:', error) }; window.addEventListener('scroll', handleScroll, true) })
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll, true)
+})
 </script>