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/components/admin/user/UserCreateModal.vue

@@ -25,7 +25,7 @@
         <label class="input-label">{{ t('admin.users.username') }}</label>
         <input v-model="form.username" type="text" class="input" :placeholder="t('admin.users.enterUsername')" />
       </div>
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label class="input-label">{{ t('admin.users.columns.balance') }}</label>
           <input v-model.number="form.balance" type="number" step="any" class="input" />

frontend/src/components/common/DataTable.vue

@@ -1,7 +1,68 @@
 <template>
+  <div class="md:hidden space-y-3">
+    <template v-if="loading">
+      <div v-for="i in 5" :key="i" class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900">
+        <div class="space-y-3">
+          <div v-for="column in columns.filter(c => c.key !== 'actions')" :key="column.key" class="flex justify-between">
+            <div class="h-4 w-20 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+            <div class="h-4 w-32 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+          </div>
+          <div v-if="hasActionsColumn" class="border-t border-gray-200 pt-3 dark:border-dark-700">
+            <div class="h-8 w-full animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="!data || data.length === 0">
+      <div class="rounded-lg border border-gray-200 bg-white p-12 text-center dark:border-dark-700 dark:bg-dark-900">
+        <slot name="empty">
+          <div class="flex flex-col items-center">
+            <Icon
+              name="inbox"
+              size="xl"
+              class="mb-4 h-12 w-12 text-gray-400 dark:text-dark-500"
+            />
+            <p class="text-lg font-medium text-gray-900 dark:text-gray-100">
+              {{ t('empty.noData') }}
+            </p>
+          </div>
+        </slot>
+      </div>
+    </template>
+
+    <template v-else>
+      <div
+        v-for="(row, index) in sortedData"
+        :key="resolveRowKey(row, index)"
+        class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900"
+      >
+        <div class="space-y-3">
+          <div
+            v-for="column in columns.filter(c => c.key !== 'actions')"
+            :key="column.key"
+            class="flex items-start justify-between gap-4"
+          >
+            <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400">
+              {{ column.label }}
+            </span>
+            <div class="text-right text-sm text-gray-900 dark:text-gray-100">
+              <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]" :expanded="actionsExpanded">
+                {{ column.formatter ? column.formatter(row[column.key], row) : row[column.key] }}
+              </slot>
+            </div>
+          </div>
+          <div v-if="hasActionsColumn" class="border-t border-gray-200 pt-3 dark:border-dark-700">
+            <slot name="cell-actions" :row="row" :value="row['actions']" :expanded="actionsExpanded"></slot>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+
   <div
     ref="tableWrapperRef"
-    class="table-wrapper"
+    class="table-wrapper hidden md:block"
     :class="{
       'actions-expanded': actionsExpanded,
       'is-scrollable': isScrollable
@@ -277,7 +338,10 @@ const sortedData = computed(() => {
   })
 })
 
-// 检查第一列是否为勾选列
+const hasActionsColumn = computed(() => {
+  return props.columns.some(column => column.key === 'actions')
+})
+
 const hasSelectColumn = computed(() => {
   return props.columns.length > 0 && props.columns[0].key === 'select'
 })