public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-08 07:31:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
将 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
1 changed files with 41 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
apps/web-antd/src/views/monitor/cache/index.vue vendored
View File

@@ -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>