chore: opt mobile style
This commit is contained in:
duorameng
@@ -124,37 +124,69 @@ onMounted(loadLogs)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border bg-card overflow-x-auto">
|
||||
<!-- 表头 -->
|
||||
<div class="rounded-lg border bg-card overflow-hidden">
|
||||
<!-- 大屏表头 -->
|
||||
<div
|
||||
class="flex items-center gap-2 sm:gap-4 px-3 sm:px-4 py-2 border-b bg-muted/50 text-xs sm:text-sm text-muted-foreground font-medium sm:min-w-[500px]">
|
||||
<span class="w-16 sm:w-24 shrink-0">用户名</span>
|
||||
<span class="w-20 sm:w-32 shrink-0">IP 地址</span>
|
||||
<span class="w-10 sm:w-16 shrink-0 text-center">状态</span>
|
||||
<span class="hidden sm:flex sm:flex-1">User Agent</span>
|
||||
<span class="shrink-0 sm:w-40 sm:text-right">时间</span>
|
||||
class="hidden sm:flex items-center gap-4 px-4 py-2 border-b bg-muted/20 text-sm text-muted-foreground font-medium">
|
||||
<span class="w-16 shrink-0 pl-1">序号</span>
|
||||
<span class="w-24 sm:w-32 shrink-0">用户名</span>
|
||||
<span class="w-32 sm:w-40 shrink-0">IP 地址</span>
|
||||
<span class="w-16 shrink-0 text-center">状态</span>
|
||||
<span class="flex-1 min-w-0">User Agent</span>
|
||||
<span class="w-40 shrink-0 text-right">登录时间</span>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<div class="divide-y sm:min-w-[500px]">
|
||||
<div class="divide-y">
|
||||
<div v-if="logs.length === 0" class="text-sm text-muted-foreground text-center py-8">
|
||||
暂无登录日志
|
||||
</div>
|
||||
<div v-for="log in logs" :key="log.id"
|
||||
class="flex items-center gap-2 sm:gap-4 px-3 sm:px-4 py-2 hover:bg-muted/50 transition-colors">
|
||||
<span class="w-16 sm:w-24 shrink-0 font-medium text-xs sm:text-sm truncate">{{ log.username
|
||||
}}</span>
|
||||
<code
|
||||
class="w-20 sm:w-32 shrink-0 text-xs text-muted-foreground bg-muted px-1 sm:px-2 py-0.5 sm:py-1 rounded truncate cursor-pointer hover:bg-muted/80 transition-colors"
|
||||
@click="showIpInfo(log.ip)">{{ log.ip }}</code>
|
||||
<span class="w-10 sm:w-16 shrink-0 flex justify-center">
|
||||
|
||||
<!-- 小屏卡片布局 -->
|
||||
<div v-for="(log, index) in logs" :key="`mobile-${log.id}`"
|
||||
class="sm:hidden p-3 hover:bg-muted/50 transition-colors">
|
||||
<div class="flex items-start justify-between mb-3 border-b border-border/40 pb-2">
|
||||
<div class="flex items-center gap-2 flex-1 min-w-0 mr-2">
|
||||
<span class="text-xs text-muted-foreground shrink-0">#{{ total - (currentPage - 1) * pageSize - index }}</span>
|
||||
<span class="font-bold text-sm truncate">{{ log.username }}</span>
|
||||
</div>
|
||||
<span
|
||||
:class="['h-2 w-2 mt-1.5 rounded-full shrink-0', log.status === 'success' ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]' : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]']"></span>
|
||||
</div>
|
||||
|
||||
<!-- 详情信息列表 -->
|
||||
<div class="space-y-1.5 text-xs text-muted-foreground mb-1 px-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-8 shrink-0 font-medium opacity-70">IP:</span>
|
||||
<span
|
||||
class="text-foreground bg-muted/40 px-1.5 py-0.5 rounded cursor-pointer hover:bg-muted/80 transition-colors"
|
||||
@click="showIpInfo(log.ip)">{{ log.ip }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-8 shrink-0 font-medium opacity-70">时间:</span>
|
||||
<span class="text-muted-foreground">{{ log.created_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 大屏行布局 -->
|
||||
<div v-for="(log, index) in logs" :key="`desktop-${log.id}`"
|
||||
class="hidden sm:flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors">
|
||||
<span class="w-16 shrink-0 text-muted-foreground text-sm pl-1">#{{ total - (currentPage - 1) * pageSize - index }}</span>
|
||||
<span class="w-24 sm:w-32 shrink-0 font-medium text-sm truncate">{{ log.username }}</span>
|
||||
<div class="w-32 sm:w-40 shrink-0">
|
||||
<code
|
||||
class="text-xs text-muted-foreground bg-muted px-2 py-1 rounded truncate cursor-pointer hover:bg-muted/80 transition-colors inline-block"
|
||||
@click="showIpInfo(log.ip)">{{ log.ip }}</code>
|
||||
</div>
|
||||
<span class="w-16 shrink-0 flex justify-center">
|
||||
<span
|
||||
:class="['h-2 w-2 rounded-full', log.status === 'success' ? 'bg-green-500' : 'bg-red-500']"></span>
|
||||
</span>
|
||||
<span class="hidden sm:flex sm:flex-1 text-xs text-muted-foreground truncate">
|
||||
<span class="flex-1 min-w-0 text-xs text-muted-foreground truncate">
|
||||
<TextOverflow :text="log.user_agent || '-'" title="User Agent" />
|
||||
</span>
|
||||
<span class="shrink-0 sm:w-40 sm:text-right text-xs text-muted-foreground">{{ log.created_at
|
||||
}}</span>
|
||||
<span class="w-40 shrink-0 text-right text-xs text-muted-foreground">{{ log.created_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
|
||||
@@ -127,11 +127,11 @@ const selectedLog = computed(() => logs.value.find((l: AppLog) => l.id === selec
|
||||
function getLevelBadgeClass(level: string) {
|
||||
switch (level) {
|
||||
case LOG_LEVEL.INFO:
|
||||
return 'bg-blue-500/10 text-blue-700 border-blue-200/50'
|
||||
return 'bg-blue-500/15 text-blue-500 border-blue-500/30'
|
||||
case LOG_LEVEL.WARNING:
|
||||
return 'bg-yellow-500/10 text-yellow-700 border-yellow-200/50'
|
||||
return 'bg-amber-500/15 text-amber-500 border-amber-500/30'
|
||||
case LOG_LEVEL.ERROR:
|
||||
return 'bg-red-500/10 text-red-700 border-red-200/50'
|
||||
return 'bg-red-500/15 text-red-500 border-red-500/30'
|
||||
default:
|
||||
return 'bg-secondary text-secondary-foreground border-transparent'
|
||||
}
|
||||
@@ -217,34 +217,63 @@ function onDialogClose(open: boolean) {
|
||||
</AlertDialog>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border bg-card overflow-x-auto">
|
||||
<div class="rounded-lg border bg-card overflow-hidden">
|
||||
<!-- 大屏表头 -->
|
||||
<div
|
||||
class="flex items-center gap-2 sm:gap-4 px-3 sm:px-4 py-2 border-b bg-muted/50 text-xs sm:text-sm text-muted-foreground font-medium sm:min-w-[700px]">
|
||||
<span class="w-12 sm:w-16 shrink-0">级别</span>
|
||||
class="hidden sm:flex items-center gap-4 px-4 py-2 border-b bg-muted/20 text-sm text-muted-foreground font-medium">
|
||||
<span class="w-16 shrink-0 pl-1">序号</span>
|
||||
<span class="w-12 sm:w-16 shrink-0 text-center">级别</span>
|
||||
<span class="w-40 sm:w-56 shrink-0">事件标题</span>
|
||||
<span class="hidden sm:flex sm:flex-1">详情内容</span>
|
||||
<span class="shrink-0 w-24 sm:w-40 sm:text-right">发生时间</span>
|
||||
<span class="flex-1 min-w-0">详情内容</span>
|
||||
<span class="w-40 shrink-0 text-right">发生时间</span>
|
||||
</div>
|
||||
|
||||
<div class="divide-y sm:min-w-[700px]">
|
||||
<!-- 列表 -->
|
||||
<div class="divide-y">
|
||||
<div v-if="logs.length === 0 && !loading" class="text-sm text-muted-foreground text-center py-8">
|
||||
暂无系统事件
|
||||
</div>
|
||||
<div v-for="log in logs" :key="log.id"
|
||||
class="flex items-center gap-2 sm:gap-4 px-3 sm:px-4 py-2 hover:bg-muted/50 transition-colors cursor-pointer group"
|
||||
|
||||
<!-- 小屏卡片布局 -->
|
||||
<div v-for="(log, index) in logs" :key="`mobile-${log.id}`"
|
||||
class="sm:hidden p-3 hover:bg-muted/50 transition-colors cursor-pointer group"
|
||||
:class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-2 flex-1 min-w-0 mr-2">
|
||||
<span class="text-xs text-muted-foreground shrink-0 tabular-nums">#{{ total - (filters.page - 1) * pageSize - index }}</span>
|
||||
<component :is="getLevelIcon(log.level)" :class="['h-4 w-4 shrink-0',
|
||||
log.level === LOG_LEVEL.INFO ? 'text-blue-500' :
|
||||
log.level === LOG_LEVEL.WARNING ? 'text-yellow-500' : 'text-red-500']" />
|
||||
<span class="font-medium text-sm truncate" :title="log.title">{{ log.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-muted/30 rounded px-2 py-1.5 mb-2">
|
||||
<div class="text-muted-foreground text-xs truncate">
|
||||
{{ log.content || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[10px] text-muted-foreground text-right tabular-nums">
|
||||
{{ formatDate(log.created_at) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 大屏行布局 -->
|
||||
<div v-for="(log, index) in logs" :key="`desktop-${log.id}`"
|
||||
class="hidden sm:flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors cursor-pointer group"
|
||||
:class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
|
||||
<span class="w-16 shrink-0 text-muted-foreground text-sm tabular-nums pl-1">#{{ total - (filters.page - 1) * pageSize - index }}</span>
|
||||
<span class="w-12 sm:w-16 shrink-0 flex justify-center">
|
||||
<component :is="getLevelIcon(log.level)" :class="['h-4 w-4',
|
||||
log.level === LOG_LEVEL.INFO ? 'text-blue-500' :
|
||||
log.level === LOG_LEVEL.WARNING ? 'text-yellow-500' : 'text-red-500']" />
|
||||
</span>
|
||||
<span class="w-40 sm:w-56 shrink-0 font-medium text-xs sm:text-sm truncate" :title="log.title">{{
|
||||
<span class="w-40 sm:w-56 shrink-0 font-medium text-sm truncate" :title="log.title">{{
|
||||
log.title }}</span>
|
||||
<span class="hidden sm:flex sm:flex-1 text-xs sm:text-sm text-muted-foreground truncate"
|
||||
<span class="flex-1 min-w-0 text-sm text-muted-foreground truncate"
|
||||
:title="log.content">
|
||||
{{ log.content || '-' }}
|
||||
</span>
|
||||
<span class="shrink-0 w-24 sm:w-40 sm:text-right text-xs text-muted-foreground">
|
||||
<span class="w-40 shrink-0 text-right text-xs text-muted-foreground tabular-nums">
|
||||
{{ formatDate(log.created_at) }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -259,10 +288,10 @@ function onDialogClose(open: boolean) {
|
||||
<div class="flex items-center justify-between pr-8">
|
||||
<DialogTitle>事件详情</DialogTitle>
|
||||
<Badge variant="outline" :class="[
|
||||
'px-2 py-0.5 text-[10px] font-bold rounded-full border shadow-sm',
|
||||
'px-2 py-0.5 text-[10px] font-bold rounded-md border shadow-sm',
|
||||
selectedLog ? getLevelBadgeClass(selectedLog.level) : ''
|
||||
]">
|
||||
<div class="flex items-center gap-1.5 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-1 uppercase tracking-tighter">
|
||||
<component :is="getLevelIcon(selectedLog?.level || 'info')" class="h-3 w-3" />
|
||||
<span>{{ selectedLog?.level || 'INFO' }}</span>
|
||||
</div>
|
||||
@@ -273,11 +302,11 @@ function onDialogClose(open: boolean) {
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="px-6 py-4 border-b space-y-3 bg-card">
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-muted-foreground">标题</span>
|
||||
<span class="font-medium text-foreground">{{ detailDialogProps.title }}</span>
|
||||
<span class="text-muted-foreground font-medium">标题</span>
|
||||
<span class="font-bold text-foreground">{{ detailDialogProps.title }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-muted-foreground">发生时间</span>
|
||||
<span class="text-muted-foreground font-medium">发生时间</span>
|
||||
<span class="font-mono text-xs text-muted-foreground">{{ selectedLog ?
|
||||
formatDate(selectedLog.created_at) : '-' }}</span>
|
||||
</div>
|
||||
@@ -285,7 +314,7 @@ function onDialogClose(open: boolean) {
|
||||
|
||||
<div class="flex flex-col min-h-0 bg-muted/5">
|
||||
<div
|
||||
class="px-6 py-2.5 text-xs font-semibold text-muted-foreground border-b bg-muted/10 uppercase tracking-wider">
|
||||
class="px-6 py-2.5 text-[10px] font-bold text-muted-foreground border-b bg-muted/10 uppercase tracking-widest">
|
||||
内容详情
|
||||
</div>
|
||||
<div class="p-6">
|
||||
@@ -298,7 +327,7 @@ function onDialogClose(open: boolean) {
|
||||
|
||||
<template v-if="detailDialogProps.error">
|
||||
<div
|
||||
class="px-6 py-2.5 text-xs font-semibold uppercase tracking-wider border-y bg-muted/10 text-muted-foreground border-border/60">
|
||||
class="px-6 py-2.5 text-[10px] font-bold uppercase tracking-widest border-y bg-muted/10 text-muted-foreground border-border/60">
|
||||
错误信息
|
||||
</div>
|
||||
<div class="p-6">
|
||||
|
||||
Reference in New Issue
Block a user