Merge pull request #956 from akinoccc/dev

fix(dashboard): adjust layout and improve responsiveness in Nginx dashboard
This commit is contained in:
Jacky 2025-04-11 21:44:37 +08:00 committed by GitHub
commit d815e292db
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -104,9 +104,9 @@ onMounted(() => {
</script> </script>
<template> <template>
<div> <div class="max-w-full of-x-hidden">
<!-- Top operation bar --> <!-- Top operation bar -->
<div class="mb-4 mx-6 md:mx-0 flex flex-wrap justify-between items-center"> <div class="mb-4 mx-6 md:mx-0 flex flex-wrap gap-4 justify-between items-center">
<div class="flex items-center"> <div class="flex items-center">
<ABadge :status="status === NginxStatus.Running ? 'success' : 'error'" /> <ABadge :status="status === NginxStatus.Running ? 'success' : 'error'" />
<span class="font-medium">{{ status === NginxStatus.Running ? $gettext('Nginx is running') : $gettext('Nginx is not running') }}</span> <span class="font-medium">{{ status === NginxStatus.Running ? $gettext('Nginx is running') : $gettext('Nginx is not running') }}</span>
@ -191,12 +191,12 @@ onMounted(() => {
<ARow :gutter="[16, 16]" class="mb-4"> <ARow :gutter="[16, 16]" class="mb-4">
<!-- Metrics card --> <!-- Metrics card -->
<ACol :sm="24" :lg="12"> <ACol :xs="24" :sm="24" :lg="12">
<ConnectionMetricsCard :nginx-info="nginxInfo" /> <ConnectionMetricsCard :nginx-info="nginxInfo" />
</ACol> </ACol>
<!-- CPU and memory usage --> <!-- CPU and memory usage -->
<ACol :sm="24" :lg="12"> <ACol :xs="24" :sm="24" :lg="12">
<ResourceUsageCard :nginx-info="nginxInfo" /> <ResourceUsageCard :nginx-info="nginxInfo" />
</ACol> </ACol>
</ARow> </ARow>