style: add scrollbar and max height to log detail dialogs
This commit is contained in:
@@ -277,7 +277,7 @@ function onDialogClose(open: boolean) {
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 rounded-xl bg-muted/20 border border-border/10 space-y-2">
|
||||
<p class="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">事件内容</p>
|
||||
<div v-if="detailDialogProps.content" class="text-sm leading-relaxed text-foreground/80 break-all whitespace-pre-wrap">
|
||||
<div v-if="detailDialogProps.content" class="text-sm leading-relaxed text-foreground/80 break-all whitespace-pre-wrap max-h-[30vh] overflow-y-auto custom-scrollbar">
|
||||
{{ detailDialogProps.content }}
|
||||
</div>
|
||||
<div v-else class="text-sm text-muted-foreground italic">无内容</div>
|
||||
@@ -285,7 +285,7 @@ function onDialogClose(open: boolean) {
|
||||
|
||||
<div v-if="detailDialogProps.error" class="p-4 rounded-xl bg-destructive/5 border border-destructive/10 space-y-2">
|
||||
<p class="text-[10px] uppercase tracking-widest text-destructive font-bold">错误堆栈/信息</p>
|
||||
<div class="text-sm leading-relaxed text-destructive/90 break-all whitespace-pre-wrap font-mono bg-destructive/5 p-3 rounded-lg border border-destructive/10">
|
||||
<div class="text-sm leading-relaxed text-destructive/90 break-all whitespace-pre-wrap font-mono bg-destructive/5 p-3 rounded-lg border border-destructive/10 max-h-[30vh] overflow-y-auto custom-scrollbar">
|
||||
{{ detailDialogProps.error }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -277,7 +277,7 @@ function onDialogClose(open: boolean) {
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 rounded-xl bg-muted/20 border border-border/10 space-y-2">
|
||||
<p class="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">事件内容</p>
|
||||
<div v-if="detailDialogProps.content" class="text-sm leading-relaxed text-foreground/80 break-all whitespace-pre-wrap">
|
||||
<div v-if="detailDialogProps.content" class="text-sm leading-relaxed text-foreground/80 break-all whitespace-pre-wrap max-h-[30vh] overflow-y-auto custom-scrollbar">
|
||||
{{ detailDialogProps.content }}
|
||||
</div>
|
||||
<div v-else class="text-sm text-muted-foreground italic">无内容</div>
|
||||
@@ -285,7 +285,7 @@ function onDialogClose(open: boolean) {
|
||||
|
||||
<div v-if="detailDialogProps.error" class="p-4 rounded-xl bg-destructive/5 border border-destructive/10 space-y-2">
|
||||
<p class="text-[10px] uppercase tracking-widest text-destructive font-bold">错误堆栈/信息</p>
|
||||
<div class="text-sm leading-relaxed text-destructive/90 break-all whitespace-pre-wrap font-mono bg-destructive/5 p-3 rounded-lg border border-destructive/10">
|
||||
<div class="text-sm leading-relaxed text-destructive/90 break-all whitespace-pre-wrap font-mono bg-destructive/5 p-3 rounded-lg border border-destructive/10 max-h-[30vh] overflow-y-auto custom-scrollbar">
|
||||
{{ detailDialogProps.error }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -311,7 +311,7 @@ function onDialogClose(open: boolean) {
|
||||
<!-- 装饰性背景,模拟高级卡片 -->
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-br from-primary/5 via-transparent to-primary/5 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-500" />
|
||||
<div v-if="detailDialogProps.content"
|
||||
class="relative bg-background/50 dark:bg-muted/10 p-5 rounded-2xl border border-border/40 whitespace-pre-wrap break-all leading-relaxed shadow-[0_2px_15px_-3px_rgba(0,0,0,0.03)] text-[13px] text-foreground/90 font-medium"
|
||||
class="relative bg-background/50 dark:bg-muted/10 p-5 rounded-2xl border border-border/40 whitespace-pre-wrap break-all leading-relaxed shadow-[0_2px_15px_-3px_rgba(0,0,0,0.03)] text-[13px] text-foreground/90 font-medium max-h-[50vh] overflow-y-auto custom-scrollbar"
|
||||
v-html="renderedContent">
|
||||
</div>
|
||||
<div v-else class="relative bg-muted/20 p-6 rounded-2xl border border-dashed border-border/60 text-center text-sm text-muted-foreground">
|
||||
@@ -326,7 +326,7 @@ function onDialogClose(open: boolean) {
|
||||
<div class="w-1 h-3.5 bg-destructive/40 rounded-full" />
|
||||
<span class="text-xs font-bold text-destructive/80 uppercase tracking-widest">错误报告</span>
|
||||
</div>
|
||||
<div class="bg-destructive/[0.03] p-5 rounded-2xl border border-destructive/10 text-[13px] text-destructive/90 font-mono leading-relaxed break-all">
|
||||
<div class="bg-destructive/[0.03] p-5 rounded-2xl border border-destructive/10 text-[13px] text-destructive/90 font-mono leading-relaxed break-all max-h-[200px] overflow-y-auto custom-scrollbar">
|
||||
{{ detailDialogProps.error }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user