feat: add login log record

web/src/components/pages/settings/LoginLogs.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 // @ts-ignore
 import { request } from '@/api/api'
 
@@ -32,15 +33,19 @@ onMounted(fetchLogs)
 </script>
 
 <template>
-  <div class="space-y-3">
+  <Card>
-    <div class="flex items-center justify-between">
+    <CardHeader class="flex items-start sm:items-center justify-between gap-2">
-      <h2 class="text-lg font-semibold">最近登录日志</h2>
+      <div class="min-w-0">
-      <button class="text-sm text-muted-foreground hover:text-foreground" @click="fetchLogs" :disabled="loading">
+        <CardTitle>最近登录日志</CardTitle>
+        <CardDescription class="mt-1">展示最近 8 条登录记录</CardDescription>
+      </div>
+      <button class="text-sm text-muted-foreground hover:text-foreground flex-shrink-0" @click="fetchLogs" :disabled="loading">
         {{ loading ? '刷新中...' : '刷新' }}
       </button>
-    </div>
+    </CardHeader>
-
+    <CardContent>
-    <div class="overflow-hidden rounded-md border border-border">
+      <div class="overflow-x-auto">
+        <div class="min-w-full rounded-md border border-border">
         <table class="w-full text-sm">
           <thead>
             <tr class="bg-muted">
@@ -61,13 +66,15 @@ onMounted(fetchLogs)
             <tr v-for="item in logs" :key="item.id" class="border-t border-border">
               <td class="px-3 py-2">{{ item.username }}</td>
               <td class="px-3 py-2">{{ item.ip }}</td>
-            <td class="px-3 py-2 truncate max-w-[420px]" :title="item.ua">{{ item.ua }}</td>
+              <td class="px-3 py-2 truncate max-w-[220px] sm:max-w-[420px]" :title="item.ua">{{ item.ua }}</td>
               <td class="px-3 py-2">{{ item.created_on }}</td>
             </tr>
           </tbody>
         </table>
         </div>
       </div>
+    </CardContent>
+  </Card>
 </template>