From 82c6674e7c896f46b1093699f0b4ec56034612f7 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 23 Jan 2026 10:26:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor(monitor/cache):=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20CSS=20Grid=20=E6=9B=BF=E6=8D=A2=20Ant=20Design=20Row/Col=20?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 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 统一设置卡片间距
---
 .../src/views/monitor/cache/index.vue         | 91 +++++++++----------
 1 file changed, 41 insertions(+), 50 deletions(-)

diff --git a/apps/web-antd/src/views/monitor/cache/index.vue b/apps/web-antd/src/views/monitor/cache/index.vue
index f8ec8852..84a4653d 100644
--- a/apps/web-antd/src/views/monitor/cache/index.vue
+++ b/apps/web-antd/src/views/monitor/cache/index.vue
@@ -6,14 +6,12 @@ import { onMounted, reactive, ref } from 'vue';
 import { Page } from '@vben/common-ui';
 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 { CommandChart, MemoryChart, RedisDescription } from './components';
 
-const baseSpan = { lg: 12, md: 24, sm: 24, xl: 12, xs: 24 };
-
 const chartData = reactive<{
   command: { name: string; value: string }[];
   memory: string;
@@ -55,53 +53,46 @@ async function loadInfo() {
 
 <template>
   <Page>
-    <Row :gutter="[15, 15]">
-      <Col :span="24">
-        <Card size="small">
-          <template #title>
-            <div class="flex items-center justify-start gap-[6px]">
-              <RedisIcon class="size-[16px]" />
-              <span>redis信息</span>
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <Card class="lg:col-span-2" size="small">
+        <template #title>
+          <div class="flex items-center justify-start gap-[6px]">
+            <RedisIcon class="size-[16px]" />
+            <span>redis信息</span>
+          </div>
+        </template>
+        <template #extra>
+          <Button size="small" @click="loadInfo">
+            <div class="flex">
+              <span class="icon-[charm--refresh]"></span>
             </div>
-          </template>
-          <template #extra>
-            <Button size="small" @click="loadInfo">
-              <div class="flex">
-                <span class="icon-[charm--refresh]"></span>
-              </div>
-            </Button>
-          </template>
-          <RedisDescription v-if="redisInfo" :data="redisInfo" />
-        </Card>
-      </Col>
-      <Col v-bind="baseSpan">
-        <Card size="small">
-          <template #title>
-            <div class="flex items-center gap-[6px]">
-              <CommandLineIcon class="size-[16px]" />
-              <span>命令统计</span>
-            </div>
-          </template>
-          <CommandChart
-            v-if="chartData.command.length > 0"
-            :data="chartData.command"
-          />
-        </Card>
-      </Col>
-      <Col v-bind="baseSpan">
-        <Card size="small">
-          <template #title>
-            <div class="flex items-center justify-start gap-[6px]">
-              <MemoryIcon class="size-[16px]" />
-              <span>内存占用</span>
-            </div>
-          </template>
-          <MemoryChart
-            v-if="chartData.memory !== '0'"
-            :data="chartData.memory"
-          />
-        </Card>
-      </Col>
-    </Row>
+          </Button>
+        </template>
+        <RedisDescription v-if="redisInfo" :data="redisInfo" />
+      </Card>
+
+      <Card size="small">
+        <template #title>
+          <div class="flex items-center gap-[6px]">
+            <CommandLineIcon class="size-[16px]" />
+            <span>命令统计</span>
+          </div>
+        </template>
+        <CommandChart
+          v-if="chartData.command.length > 0"
+          :data="chartData.command"
+        />
+      </Card>
+
+      <Card size="small">
+        <template #title>
+          <div class="flex items-center justify-start gap-[6px]">
+            <MemoryIcon class="size-[16px]" />
+            <span>内存占用</span>
+          </div>
+        </template>
+        <MemoryChart v-if="chartData.memory !== '0'" :data="chartData.memory" />
+      </Card>
+    </div>
   </Page>
 </template>