style: fix header alignment and code block padding in log details
This commit is contained in:
@@ -120,9 +120,9 @@ function getStatusBadgeClass(status: string) {
|
|||||||
<!-- 头部菜单 (响应式两行布局) -->
|
<!-- 头部菜单 (响应式两行布局) -->
|
||||||
<div class="flex flex-col border-b bg-muted/20 shrink-0">
|
<div class="flex flex-col border-b bg-muted/20 shrink-0">
|
||||||
<!-- 第一行: 标题与核心控制按钮 -->
|
<!-- 第一行: 标题与核心控制按钮 -->
|
||||||
<div class="flex items-center justify-between px-4 h-11 gap-4">
|
<div class="flex items-center justify-between px-4 h-[28px] gap-4">
|
||||||
<div class="flex items-center gap-2 min-w-0">
|
<div class="flex items-center gap-2 min-w-0">
|
||||||
<span class="text-sm font-medium text-foreground whitespace-nowrap truncate">{{ title }}</span>
|
<span class="text-xs font-medium text-foreground whitespace-nowrap truncate">{{ title }}</span>
|
||||||
|
|
||||||
<!-- Simple 模式下的状态显示 -->
|
<!-- Simple 模式下的状态显示 -->
|
||||||
<Badge v-if="variant === 'simple'" variant="outline" :class="[
|
<Badge v-if="variant === 'simple'" variant="outline" :class="[
|
||||||
@@ -147,18 +147,18 @@ function getStatusBadgeClass(status: string) {
|
|||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<Button v-if="variant === 'simple'" variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground"
|
<Button v-if="variant === 'simple'" variant="ghost" size="icon" class="h-6 w-6 text-muted-foreground"
|
||||||
title="全屏切换" @click="$emit('maximize')">
|
title="全屏切换" @click="$emit('maximize')">
|
||||||
<Maximize2 class="h-4 w-4" />
|
<Maximize2 class="h-3.5 w-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-destructive"
|
<Button variant="ghost" size="icon" class="h-6 w-6 text-muted-foreground hover:text-destructive"
|
||||||
title="删除该日志" @click="$emit('delete', log.id)">
|
title="删除该日志" @click="$emit('delete', log.id)">
|
||||||
<Trash2 class="h-4 w-4" />
|
<Trash2 class="h-3.5 w-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button v-if="showClose" variant="ghost" size="icon" class="h-8 w-8" @click="$emit('close')" title="关闭">
|
<Button v-if="showClose" variant="ghost" size="icon" class="h-6 w-6" @click="$emit('close')" title="关闭">
|
||||||
<X class="h-4 w-4" />
|
<X class="h-3.5 w-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -277,15 +277,3 @@ function getStatusBadgeClass(status: string) {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
:deep(code) {
|
|
||||||
display: block;
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(span) {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -378,7 +378,7 @@ watch(() => route.query, (newQuery) => {
|
|||||||
<div class="flex-1 min-w-0 rounded-lg border bg-card overflow-hidden flex flex-col">
|
<div class="flex-1 min-w-0 rounded-lg border bg-card overflow-hidden flex flex-col">
|
||||||
<!-- 小屏表头 -->
|
<!-- 小屏表头 -->
|
||||||
<div
|
<div
|
||||||
class="flex sm:hidden items-center gap-2 px-3 py-2 border-b bg-muted/20 text-xs text-muted-foreground font-medium">
|
class="flex sm:hidden items-center gap-2 px-3 h-[28px] border-b bg-muted/20 text-xs text-muted-foreground font-medium">
|
||||||
<span class="w-14 shrink-0 pl-1">序号</span>
|
<span class="w-14 shrink-0 pl-1">序号</span>
|
||||||
<span class="w-8 shrink-0 text-center">类型</span>
|
<span class="w-8 shrink-0 text-center">类型</span>
|
||||||
<span class="flex-1 min-w-0">任务名称</span>
|
<span class="flex-1 min-w-0">任务名称</span>
|
||||||
@@ -387,7 +387,7 @@ watch(() => route.query, (newQuery) => {
|
|||||||
</div>
|
</div>
|
||||||
<!-- 大屏表头 -->
|
<!-- 大屏表头 -->
|
||||||
<div
|
<div
|
||||||
class="hidden sm:flex items-center gap-4 px-4 h-11 border-b bg-muted/20 text-sm text-muted-foreground font-medium">
|
class="hidden sm:flex items-center gap-4 px-4 h-[28px] border-b bg-muted/20 text-xs text-muted-foreground font-medium">
|
||||||
<span class="w-16 shrink-0 pl-1">序号</span>
|
<span class="w-16 shrink-0 pl-1">序号</span>
|
||||||
<span class="w-12 shrink-0 text-center">类型</span>
|
<span class="w-12 shrink-0 text-center">类型</span>
|
||||||
<span class="w-36 shrink-0">任务名称</span>
|
<span class="w-36 shrink-0">任务名称</span>
|
||||||
@@ -503,15 +503,3 @@ watch(() => route.query, (newQuery) => {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
:deep(.log-pre code) {
|
|
||||||
display: block;
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.log-pre span) {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user