admin/TaskPool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: opt mobile style

Browse Source
This commit is contained in:
duorameng
2026-04-02 20:31:20 +08:00
parent 08715e0172
commit ad2dbd8523
9 changed files with 465 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/notify/components/PushLog.vue
+54 -20
View File
@@ -129,9 +129,9 @@ const selectedLog = computed(() => logs.value.find((l: AppLog) => l.id === selec
function getStatusBadgeClass(status: string) {
switch (status) {
case LOG_STATUS.SUCCESS:
return 'bg-green-500/10 text-green-700 border-green-200/50 dark:bg-green-500/20 dark:text-green-400 dark:border-green-900/50'
return 'bg-green-500/15 text-green-500 border-green-500/30'
case LOG_STATUS.FAILED:
return 'bg-red-500/10 text-red-700 border-red-200/50 dark:bg-red-500/20 dark:text-red-400 dark:border-red-900/50'
return 'bg-red-500/15 text-red-500 border-red-500/30'
default:
return 'bg-secondary text-secondary-foreground border-transparent'
}
@@ -212,38 +212,72 @@ 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>
<span class="w-40 sm:w-56 shrink-0">标题及渠道</span>
<span class="hidden sm:flex sm:flex-1">内容详情</span>
<span class="w-10 sm:w-16 shrink-0 text-center">状态</span>
<span class="shrink-0 w-24 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-56 shrink-0">标题及渠道</span>
<span class="flex-1 min-w-0">内容详情</span>
<span class="w-16 shrink-0 text-center">状态</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, index) 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" @click="showDetail(log)"
:class="[selectedLogId === log.id && 'bg-accent/50']">
<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">#{{ getLogIndex(index) }}</span>
<span class="font-bold text-sm truncate">{{ log.title }}</span>
</div>
<span
:class="['h-2 w-2 mt-1.5 rounded-full shrink-0', log.status === 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 v-if="log.channel_name" class="flex items-center gap-3">
<span class="w-8 shrink-0 font-medium opacity-70">渠道:</span>
<span class="text-foreground bg-muted/40 px-1.5 py-0.5 rounded text-[10px]">{{ log.channel_name }}</span>
</div>
<div class="flex items-start gap-3">
<span class="w-8 shrink-0 font-medium mt-0.5 opacity-70">内容:</span>
<div class="flex-1 min-w-0 text-foreground break-all leading-relaxed line-clamp-2">
{{ log.content || '-' }}
</div>
</div>
<div class="flex items-center gap-3">
<span class="w-8 shrink-0 font-medium opacity-70">时间:</span>
<span class="text-[10px] text-muted-foreground">{{ formatDate(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 cursor-pointer group"
:class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
<span class="w-12 sm:w-16 shrink-0 text-muted-foreground text-xs sm:text-sm">#{{ getLogIndex(index) }}</span>
<span class="w-40 sm:w-56 shrink-0 font-medium text-xs sm:text-sm truncate" :title="log.title">
<span class="w-16 shrink-0 text-muted-foreground text-sm pl-1">#{{ getLogIndex(index) }}</span>
<span class="w-56 shrink-0 font-medium text-sm truncate" :title="log.title">
<span v-if="log.channel_name" class="mr-1 text-muted-foreground">[{{ log.channel_name }}]</span>{{ log.title
}}
</span>
<span class="hidden sm:flex sm:flex-1 text-xs sm:text-sm text-muted-foreground truncate" :title="log.content">
<span class="flex-1 min-w-0 text-sm text-muted-foreground truncate" :title="log.content">
{{ log.content || '-' }}
</span>
<span class="w-10 sm:w-16 shrink-0 flex justify-center">
<span class="w-16 shrink-0 flex justify-center">
<span
:class="['h-2 w-2 rounded-full', log.status === LOG_STATUS.SUCCESS ? 'bg-green-500' : 'bg-red-500']"></span>
</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">
{{ formatDate(log.created_at) }}
</span>
</div>
@@ -259,10 +293,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 transition-all duration-300',
'px-2 py-0.5 text-[10px] font-bold rounded-md border shadow-sm transition-all duration-300',
selectedLog ? getStatusBadgeClass(selectedLog.status) : ''
]">
<div class="flex items-center gap-1.5 uppercase tracking-wider">
<div class="flex items-center gap-1 uppercase tracking-tighter">
<Check v-if="selectedLog?.status === LOG_STATUS.SUCCESS" class="h-3 w-3" />
<X v-else class="h-3 w-3" />
<span>{{ selectedLog?.status === LOG_STATUS.SUCCESS ? 'Success' : 'Failed' }}</span>