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="space-y-4">
|
||||||
<div class="p-4 rounded-xl bg-muted/20 border border-border/10 space-y-2">
|
<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>
|
<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 }}
|
{{ detailDialogProps.content }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="text-sm text-muted-foreground italic">无内容</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">
|
<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>
|
<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 }}
|
{{ detailDialogProps.error }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -277,7 +277,7 @@ function onDialogClose(open: boolean) {
|
|||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div class="p-4 rounded-xl bg-muted/20 border border-border/10 space-y-2">
|
<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>
|
<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 }}
|
{{ detailDialogProps.content }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="text-sm text-muted-foreground italic">无内容</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">
|
<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>
|
<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 }}
|
{{ detailDialogProps.error }}
|
||||||
</div>
|
</div>
|
||||||
</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 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"
|
<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">
|
v-html="renderedContent">
|
||||||
</div>
|
</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">
|
<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" />
|
<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>
|
<span class="text-xs font-bold text-destructive/80 uppercase tracking-widest">错误报告</span>
|
||||||
</div>
|
</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 }}
|
{{ detailDialogProps.error }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user