chore: opt all screen palce

This commit is contained in:
engigu
2026-04-01 11:35:16 +08:00
parent e00ccdcaa7
commit 2b2c8af2cb
4 changed files with 44 additions and 44 deletions
+4 -4
View File
@@ -111,7 +111,7 @@ onMounted(() => {
<!-- Sidebar --> <!-- Sidebar -->
<aside :class="[ <aside :class="[
'fixed lg:static inset-y-0 z-50 w-44 border-r bg-background flex flex-col transition-transform duration-300 ease-in-out', 'fixed lg:static inset-y-0 z-50 w-44 2xl:w-60 border-r bg-background flex flex-col transition-all duration-300 ease-in-out',
mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0' mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
]"> ]">
<div class="h-14 flex items-center justify-center px-4 font-semibold text-lg border-b relative"> <div class="h-14 flex items-center justify-center px-4 font-semibold text-lg border-b relative">
@@ -140,8 +140,8 @@ onMounted(() => {
</aside> </aside>
<!-- Main Content --> <!-- Main Content -->
<main class="flex-1 overflow-auto w-full lg:w-auto min-w-0 relative"> <main class="flex-1 overflow-auto w-full lg:w-auto min-w-0 relative flex flex-col items-center bg-gray-50/50 dark:bg-transparent">
<div class="h-14 border-b bg-background flex items-center justify-between px-4 lg:px-6"> <div class="w-full h-14 border-b bg-background flex items-center justify-between px-4 lg:px-6 2xl:px-10 shrink-0">
<div class="flex items-center gap-3 flex-1 min-w-0"> <div class="flex items-center gap-3 flex-1 min-w-0">
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0" @click="mobileMenuOpen = true"> <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0" @click="mobileMenuOpen = true">
<Menu class="h-5 w-5" /> <Menu class="h-5 w-5" />
@@ -156,7 +156,7 @@ onMounted(() => {
<ThemeToggle /> <ThemeToggle />
</div> </div>
</div> </div>
<div class="p-4 lg:p-6"> <div class="w-full max-w-[2000px] p-4 lg:p-6 2xl:p-12 flex-1">
<RouterView /> <RouterView />
</div> </div>
</main> </main>
+38 -38
View File
@@ -441,47 +441,47 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<div class="space-y-4"> <div class="space-y-4 xl:space-y-6 2xl:space-y-10">
<div> <div>
<h2 class="text-2xl font-bold tracking-tight">数据仪表</h2> <h2 class="text-2xl 2xl:text-4xl font-bold tracking-tight">数据仪表</h2>
<p class="text-muted-foreground">查看系统运行状态和统计数据</p> <p class="text-muted-foreground 2xl:text-lg">查看系统运行状态和统计数据</p>
</div> </div>
<div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-6"> <div class="grid gap-4 xl:gap-6 2xl:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
<Card v-for="item in statItems" :key="item.key" class="cursor-pointer hover:bg-accent/50 transition-colors" <Card v-for="item in statItems" :key="item.key" class="cursor-pointer hover:bg-accent/50 transition-colors"
@click="navigateTo(item.route)"> @click="navigateTo(item.route)">
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2 2xl:pb-4">
<CardTitle class="text-xs sm:text-sm font-medium">{{ item.label }}</CardTitle> <CardTitle class="text-xs sm:text-sm 2xl:text-base font-medium">{{ item.label }}</CardTitle>
<component :is="item.icon" class="h-4 w-4 text-muted-foreground" /> <component :is="item.icon" class="h-4 w-4 2xl:h-5 2xl:w-5 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div class="text-xl sm:text-2xl font-bold">{{ displayStats[item.key as keyof Stats] }}</div> <div class="text-xl sm:text-2xl 2xl:text-4xl font-bold">{{ displayStats[item.key as keyof Stats] }}</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<div class="grid gap-4 lg:grid-cols-10"> <div class="grid gap-4 xl:gap-6 2xl:gap-8 lg:grid-cols-10">
<Card class="lg:col-span-7 h-[400px] sm:h-[400px]"> <Card class="lg:col-span-7 h-[400px] 2xl:h-[500px]">
<CardHeader class="pb-2"> <CardHeader class="pb-2">
<CardTitle class="text-base sm:text-lg">执行统计</CardTitle> <CardTitle class="text-base sm:text-lg 2xl:text-xl">执行统计</CardTitle>
<CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行情况</CardDescription> <CardDescription class="text-xs sm:text-sm 2xl:text-base">最近{{ chartDays }}天任务执行情况</CardDescription>
</CardHeader> </CardHeader>
<CardContent class="relative h-[300px]"> <CardContent class="relative h-[300px] 2xl:h-[400px]">
<div id="stats-chart" class="w-full h-full"></div> <div id="stats-chart" class="w-full h-full"></div>
<div v-if="!chartsLoaded" <div v-if="!chartsLoaded"
class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card"> class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
加载中... 加载中...
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card class="lg:col-span-3 h-[400px] sm:h-[400px]"> <Card class="lg:col-span-3 h-[400px] 2xl:h-[500px]">
<CardHeader class="pb-2"> <CardHeader class="pb-2">
<CardTitle class="text-base sm:text-lg">任务占比</CardTitle> <CardTitle class="text-base sm:text-lg 2xl:text-xl">任务占比</CardTitle>
<CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行分布</CardDescription> <CardDescription class="text-xs sm:text-sm 2xl:text-base">最近{{ chartDays }}天任务执行分布</CardDescription>
</CardHeader> </CardHeader>
<CardContent class="relative h-[300px]"> <CardContent class="relative h-[300px] 2xl:h-[400px]">
<div id="pie-chart" class="w-full h-full"></div> <div id="pie-chart" class="w-full h-full"></div>
<div v-if="!chartsLoaded" <div v-if="!chartsLoaded"
class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card"> class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
加载中... 加载中...
+1 -1
View File
@@ -420,7 +420,7 @@ async function save() {
<template> <template>
<Dialog :open="open" @update:open="emit('update:open', $event)"> <Dialog :open="open" @update:open="emit('update:open', $event)">
<DialogContent class="sm:max-w-[620px] p-0 overflow-hidden border-none bg-background shadow-2xl transition-all duration-300" style="text-rendering: optimizeLegibility;" @openAutoFocus.prevent> <DialogContent class="max-w-[95vw] sm:max-w-[700px] xl:max-w-[950px] p-0 overflow-hidden border-none bg-background shadow-2xl transition-all duration-300" style="text-rendering: optimizeLegibility;" @openAutoFocus.prevent>
<div class="flex flex-col max-h-[85vh]"> <div class="flex flex-col max-h-[85vh]">
<DialogHeader class="px-6 pr-12 pt-6 pb-2 shrink-0"> <DialogHeader class="px-6 pr-12 pt-6 pb-2 shrink-0">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
+1 -1
View File
@@ -443,7 +443,7 @@ async function save() {
<template> <template>
<Dialog :open="open" @update:open="emit('update:open', $event)"> <Dialog :open="open" @update:open="emit('update:open', $event)">
<DialogContent class="sm:max-w-[560px] p-0 overflow-hidden border-none bg-background shadow-2xl transition-all duration-300" style="text-rendering: optimizeLegibility;" @openAutoFocus.prevent> <DialogContent class="max-w-[95vw] sm:max-w-[600px] xl:max-w-[850px] p-0 overflow-hidden border-none bg-background shadow-2xl transition-all duration-300" style="text-rendering: optimizeLegibility;" @openAutoFocus.prevent>
<div class="flex flex-col max-h-[85vh]"> <div class="flex flex-col max-h-[85vh]">
<DialogHeader class="px-6 pr-12 pt-6 pb-2 shrink-0 border-b border-muted/50"> <DialogHeader class="px-6 pr-12 pt-6 pb-2 shrink-0 border-b border-muted/50">
<DialogTitle class="text-xl font-bold py-2"> <DialogTitle class="text-xl font-bold py-2">