public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-28 09:13:23 +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 { 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,53 +53,46 @@ 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]" /> <span>redis信息</span>
<span>redis信息</span> </div>
</template>
<template #extra>
<Button size="small" @click="loadInfo">
<div class="flex">
<span class="icon-[charm--refresh]"></span>
</div> </div>
</template> </Button>
<template #extra> </template>
<Button size="small" @click="loadInfo"> <RedisDescription v-if="redisInfo" :data="redisInfo" />
<div class="flex"> </Card>
<span class="icon-[charm--refresh]"></span>
</div> <Card size="small">
</Button> <template #title>
</template> <div class="flex items-center gap-[6px]">
<RedisDescription v-if="redisInfo" :data="redisInfo" /> <CommandLineIcon class="size-[16px]" />
</Card> <span>命令统计</span>
</Col> </div>
<Col v-bind="baseSpan"> </template>
<Card size="small"> <CommandChart
<template #title> v-if="chartData.command.length > 0"
<div class="flex items-center gap-[6px]"> :data="chartData.command"
<CommandLineIcon class="size-[16px]" /> />
<span>命令统计</span> </Card>
</div>
</template> <Card size="small">
<CommandChart <template #title>
v-if="chartData.command.length > 0" <div class="flex items-center justify-start gap-[6px]">
:data="chartData.command" <MemoryIcon class="size-[16px]" />
/> <span>内存占用</span>
</Card> </div>
</Col> </template>
<Col v-bind="baseSpan"> <MemoryChart v-if="chartData.memory !== '0'" :data="chartData.memory" />
<Card size="small"> </Card>
<template #title> </div>
<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>
</Page> </Page>
</template> </template>