fix: opt page style
This commit is contained in:
@@ -140,11 +140,11 @@ onMounted(() => {
|
|||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<main class="flex-1 overflow-auto w-full">
|
<main class="flex-1 overflow-auto w-full">
|
||||||
<div class="h-14 border-b bg-background flex items-center justify-between px-4 lg:px-6">
|
<div class="h-14 border-b bg-background flex items-center justify-between px-4 lg:px-6">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3 flex-1 min-w-0">
|
||||||
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden" @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" />
|
||||||
</Button>
|
</Button>
|
||||||
<span class="text-sm text-muted-foreground truncate flex-1 min-w-0 mr-4" :title="sentence">
|
<span class="text-sm text-muted-foreground truncate" :title="sentence">
|
||||||
<span class="hidden sm:inline">{{ sentence }}</span>
|
<span class="hidden sm:inline">{{ sentence }}</span>
|
||||||
<span class="sm:hidden">{{ sentenceContent }}</span>
|
<span class="sm:hidden">{{ sentenceContent }}</span>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -12,12 +12,7 @@ const displayStats = ref<Stats>({ tasks: 0, today_execs: 0, envs: 0, logs: 0, sc
|
|||||||
const sendStats = ref<DailyStats[]>([])
|
const sendStats = ref<DailyStats[]>([])
|
||||||
const taskStats = ref<TaskStatsItem[]>([])
|
const taskStats = ref<TaskStatsItem[]>([])
|
||||||
const chartsLoaded = ref(false)
|
const chartsLoaded = ref(false)
|
||||||
const sentence = ref('')
|
|
||||||
const isMobile = ref(window.innerWidth < 768)
|
const isMobile = ref(window.innerWidth < 768)
|
||||||
const sentenceContent = computed(() => {
|
|
||||||
const match = sentence.value.match(/^"(.+)"—— /)
|
|
||||||
return match ? match[1] : sentence.value
|
|
||||||
})
|
|
||||||
const chartDays = computed(() => isMobile.value ? 15 : 30)
|
const chartDays = computed(() => isMobile.value ? 15 : 30)
|
||||||
|
|
||||||
let lineChart: ApexCharts | null = null
|
let lineChart: ApexCharts | null = null
|
||||||
@@ -402,16 +397,14 @@ onMounted(async () => {
|
|||||||
window.addEventListener('resize', handleResize)
|
window.addEventListener('resize', handleResize)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const [statsData, sendStatsData, taskStatsData, sentenceData] = await Promise.all([
|
const [statsData, sendStatsData, taskStatsData] = await Promise.all([
|
||||||
api.dashboard.stats(),
|
api.dashboard.stats(),
|
||||||
api.dashboard.sendStats(chartDays.value),
|
api.dashboard.sendStats(chartDays.value),
|
||||||
api.dashboard.taskStats(chartDays.value),
|
api.dashboard.taskStats(chartDays.value)
|
||||||
api.dashboard.sentence()
|
|
||||||
])
|
])
|
||||||
updateStats(statsData)
|
updateStats(statsData)
|
||||||
sendStats.value = sendStatsData
|
sendStats.value = sendStatsData
|
||||||
taskStats.value = taskStatsData
|
taskStats.value = taskStatsData
|
||||||
sentence.value = sentenceData.sentence
|
|
||||||
|
|
||||||
// 渲染图表
|
// 渲染图表
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -451,10 +444,7 @@ onUnmounted(() => {
|
|||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-2xl font-bold tracking-tight">数据仪表</h2>
|
<h2 class="text-2xl font-bold tracking-tight">数据仪表</h2>
|
||||||
<p class="text-muted-foreground truncate" :title="sentence">
|
<p class="text-muted-foreground">查看系统运行状态和统计数据</p>
|
||||||
<span class="hidden sm:inline">{{ sentence || '查看系统运行状态和统计数据' }}</span>
|
|
||||||
<span class="sm:hidden">{{ sentenceContent || '查看系统运行状态和统计数据' }}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
|
<div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
|
||||||
|
|||||||
Reference in New Issue
Block a user