chore: opt all screen palce
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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">
|
||||||
加载中...
|
加载中...
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user