移动端页面适配

src/pages/admin/usage/index.vue

@@ -14,18 +14,19 @@
 
     <!-- 单用户模式操作按钮 -->
     <template #actions v-if="singleUserMode">
-      <div class="flex items-center gap-3">
-        <div class="flex items-center gap-2 text-sm text-gray-600">
+      <div :class="['flex items-center gap-3', isMobile ? 'flex-wrap' : '']">
+        <div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'w-full mb-2' : '']">
           <User class="w-4 h-4" />
-          <span>{{ currentUser?.company_name || currentUser?.phone }}</span>
+          <span :class="isMobile ? 'truncate flex-1' : ''">{{ currentUser?.company_name || currentUser?.phone }}</span>
         </div>
-        <el-button size="small" @click="exitSingleUserMode">
+        <el-button :size="isMobile ? 'small' : 'small'" @click="exitSingleUserMode">
           <Close class="w-4 h-4 mr-1" />
-          取消
+          <span :class="isMobile ? 'hidden sm:inline' : ''">取消</span>
         </el-button>
-        <el-button size="small" type="primary" @click="goBackToUsers">
+        <el-button :size="isMobile ? 'small' : 'small'" type="primary" @click="goBackToUsers">
           <Back class="w-4 h-4 mr-1" />
-          返回用户管理
+          <span :class="isMobile ? 'hidden sm:inline' : ''">返回用户管理</span>
+          <span :class="isMobile ? 'sm:hidden' : 'hidden'">返回</span>
         </el-button>
       </div>
     </template>
@@ -343,6 +344,7 @@ import ExportDialog from '@/components/common/ExportDialog.vue'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { Back, Close, Download, User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { onMounted, reactive, ref, watch } from 'vue'
@@ -351,6 +353,9 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()
 
+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const apiCalls = ref([])