完成授权页面样式重设计、云端数据权限功能、修复代理后台页面问题

frontend/src/pages/agent/users/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Loader2, Users } from 'lucide-vue-next'
-import { onMounted, ref } from 'vue'
+import { Loader2, Search, Users } from 'lucide-vue-next'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { BasicPage } from '@/components/global-layout'
@@ -19,14 +19,36 @@ interface User {
 
 const loading = ref(true)
 const users = ref<User[]>([])
+const searchQuery = ref('')
+
+const filteredUsers = computed(() => {
+  let result = users.value.filter(u => u)
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(u =>
+      u.username?.toLowerCase().includes(query)
+      || u.email?.toLowerCase().includes(query),
+    )
+  }
+  return result
+})
 
 onMounted(async () => {
   try {
-    const data = await api.get<User[]>('/agent/users')
-    users.value = data || []
+    const data = await api.get<any>('/agent/users')
+    if (Array.isArray(data)) {
+      users.value = data
+    } else if (data?.users) {
+      users.value = data.users
+    } else if (data?.data) {
+      users.value = Array.isArray(data.data) ? data.data : []
+    } else {
+      users.value = []
+    }
   }
   catch (error) {
     console.error('Load users failed:', error)
+    users.value = []
   }
   finally {
     loading.value = false
@@ -34,18 +56,41 @@ onMounted(async () => {
 })
 
 function formatDate(dateStr: string | null) {
-  if (!dateStr)
-    return '-'
-  return new Date(dateStr).toLocaleDateString()
+  if (!dateStr) return '-'
+  return dateStr.replace('T', ' ').substring(0, 19)
+}
+
+function getStatusInfo(status: string) {
+  const map: Record<string, { label: string, variant: string }> = {
+    active: { label: '正常', variant: 'default' },
+    disabled: { label: '禁用', variant: 'secondary' },
+    banned: { label: '封禁', variant: 'destructive' },
+  }
+  return map[status] || { label: status || '未知', variant: 'outline' }
 }
 </script>
 
 <template>
   <BasicPage
     :title="t('nav.users')"
-    description="管理用户信息"
+    description="查看和管理用户信息"
+    :breadcrumbs="[
+      { title: '控制台', href: '/agent' },
+      { title: '用户管理' },
+    ]"
     sticky
   >
+    <template #actions>
+      <div class="relative">
+        <Search class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+        <UiInput
+          v-model="searchQuery"
+          placeholder="搜索用户名或邮箱..."
+          class="pl-9 w-[250px]"
+        />
+      </div>
+    </template>
+
     <UiCard>
       <UiCardContent class="p-0">
         <div v-if="loading" class="flex items-center justify-center py-12">
@@ -54,55 +99,41 @@ function formatDate(dateStr: string | null) {
 
         <div v-else-if="users.length === 0" class="text-center py-12 text-muted-foreground">
           <Users class="size-16 mx-auto mb-4 opacity-30" />
-          <p>暂无用户</p>
+          <p>暂无用户数据</p>
         </div>
 
-        <div v-else class="overflow-x-auto">
-          <table class="w-full">
-            <thead class="bg-muted/50">
-              <tr>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  用户名
-                </th>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  邮箱
-                </th>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  状态
-                </th>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  注册时间
-                </th>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  最后登录
-                </th>
-              </tr>
-            </thead>
-            <tbody class="divide-y">
-              <tr v-for="user in users" :key="user.id" class="hover:bg-muted/30">
-                <td class="px-4 py-3 font-medium">
-                  {{ user.username }}
-                </td>
-                <td class="px-4 py-3 text-sm text-muted-foreground">
-                  {{ user.email || '-' }}
-                </td>
-                <td class="px-4 py-3">
-                  <UiBadge
-                    :class="user.status === 'active' ? 'bg-green-500/10 text-green-500' : ''"
-                    variant="outline"
-                  >
-                    {{ user.status === 'active' ? '正常' : user.status }}
-                  </UiBadge>
-                </td>
-                <td class="px-4 py-3 text-sm text-muted-foreground">
-                  {{ formatDate(user.created_at) }}
-                </td>
-                <td class="px-4 py-3 text-sm text-muted-foreground">
-                  {{ formatDate(user.last_login_at) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
+        <div v-else>
+          <div v-if="filteredUsers.length === 0" class="text-center py-12 text-muted-foreground">
+            <Search class="size-12 mx-auto mb-4 opacity-30" />
+            <p>未找到匹配的用户</p>
+          </div>
+
+          <div v-else class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-muted/50">
+                <tr>
+                  <th class="text-left p-3 font-medium">用户名</th>
+                  <th class="text-left p-3 font-medium">邮箱</th>
+                  <th class="text-left p-3 font-medium">状态</th>
+                  <th class="text-left p-3 font-medium">注册时间</th>
+                  <th class="text-left p-3 font-medium">最后登录</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="user in filteredUsers" :key="user.id" class="border-t hover:bg-muted/30 transition-colors">
+                  <td class="p-3 font-medium">{{ user.username }}</td>
+                  <td class="p-3 text-muted-foreground">{{ user.email || '-' }}</td>
+                  <td class="p-3">
+                    <UiBadge :variant="getStatusInfo(user.status).variant as any">
+                      {{ getStatusInfo(user.status).label }}
+                    </UiBadge>
+                  </td>
+                  <td class="p-3 text-muted-foreground">{{ formatDate(user.created_at) }}</td>
+                  <td class="p-3 text-muted-foreground">{{ formatDate(user.last_login_at) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </UiCardContent>
     </UiCard>