refactor(monitor/cache): 使用 CSS Grid 替换 Ant Design Row/Col 布局

将 Redis 监控页面的布局从 Ant Design 的 Row/Col 组件迁移到 Tailwind CSS 的 Grid 系统,以简化代码结构并提高布局灵活性。

- 移除未使用的 Row、Col 组件导入和 baseSpan 变量
- 使用 grid-cols-1 和 lg:grid-cols-2 实现响应式网格布局
- 通过 lg:col-span-2 让 Redis 信息卡片跨两列显示
- 使用 gap-4 统一设置卡片间距
This commit is contained in:
dap
2026-01-23 10:26:03 +08:00
parent 49736f49a4
commit 82c6674e7c

View File

@@ -6,14 +6,12 @@ import { onMounted, reactive, ref } from 'vue';
import { Page } from '@vben/common-ui'; import { Page } from '@vben/common-ui';
import { CommandLineIcon, MemoryIcon, RedisIcon } from '@vben/icons'; import { CommandLineIcon, MemoryIcon, RedisIcon } from '@vben/icons';
import { Button, Card, Col, Row } from 'antdv-next'; import { Button, Card } from 'antdv-next';
import { redisCacheInfo } from '#/api/monitor/cache'; import { redisCacheInfo } from '#/api/monitor/cache';
import { CommandChart, MemoryChart, RedisDescription } from './components'; import { CommandChart, MemoryChart, RedisDescription } from './components';
const baseSpan = { lg: 12, md: 24, sm: 24, xl: 12, xs: 24 };
const chartData = reactive<{ const chartData = reactive<{
command: { name: string; value: string }[]; command: { name: string; value: string }[];
memory: string; memory: string;
@@ -55,9 +53,8 @@ async function loadInfo() {
<template> <template>
<Page> <Page>
<Row :gutter="[15, 15]"> <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<Col :span="24"> <Card class="lg:col-span-2" size="small">
<Card size="small">
<template #title> <template #title>
<div class="flex items-center justify-start gap-[6px]"> <div class="flex items-center justify-start gap-[6px]">
<RedisIcon class="size-[16px]" /> <RedisIcon class="size-[16px]" />
@@ -73,8 +70,7 @@ async function loadInfo() {
</template> </template>
<RedisDescription v-if="redisInfo" :data="redisInfo" /> <RedisDescription v-if="redisInfo" :data="redisInfo" />
</Card> </Card>
</Col>
<Col v-bind="baseSpan">
<Card size="small"> <Card size="small">
<template #title> <template #title>
<div class="flex items-center gap-[6px]"> <div class="flex items-center gap-[6px]">
@@ -87,8 +83,7 @@ async function loadInfo() {
:data="chartData.command" :data="chartData.command"
/> />
</Card> </Card>
</Col>
<Col v-bind="baseSpan">
<Card size="small"> <Card size="small">
<template #title> <template #title>
<div class="flex items-center justify-start gap-[6px]"> <div class="flex items-center justify-start gap-[6px]">
@@ -96,12 +91,8 @@ async function loadInfo() {
<span>内存占用</span> <span>内存占用</span>
</div> </div>
</template> </template>
<MemoryChart <MemoryChart v-if="chartData.memory !== '0'" :data="chartData.memory" />
v-if="chartData.memory !== '0'"
:data="chartData.memory"
/>
</Card> </Card>
</Col> </div>
</Row>
</Page> </Page>
</template> </template>