refactor(redis-description): 重构 Redis 描述组件使用 computed 属性

使用 computed 属性动态生成 Descriptions 的 items 配置，提升代码可维护性
移除模板中的硬编码，使数据结构更清晰

apps/web-antd/src/views/monitor/cache/components/redis-description.vue

@@ -1,58 +1,80 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { DescriptionsProps } from 'antdv-next';
+
 import type { RedisInfo } from '#/api/monitor/cache';
 
-import { Descriptions, DescriptionsItem } from 'antdv-next';
+import { computed } from 'vue';
+
+import { Descriptions } from 'antdv-next';
 
 interface IRedisInfo extends RedisInfo {
   dbSize: string;
 }
 
-defineProps<{ data: IRedisInfo }>();
+const props = defineProps<{ data: IRedisInfo }>();
+
+const items = computed<DescriptionsProps['items']>(() => {
+  const { data } = props;
+  return [
+    {
+      content: data.redis_version,
+      label: 'redis版本',
+    },
+    {
+      content: data.redis_mode === 'standalone' ? '单机模式' : '集群模式',
+      label: 'redis模式',
+    },
+    {
+      content: data.tcp_port,
+      label: 'tcp端口',
+    },
+    {
+      content: data.connected_clients,
+      label: '客户端数',
+    },
+    {
+      content: `${data.uptime_in_days} 天`,
+      label: '运行时间',
+    },
+    {
+      content: data.used_memory_human,
+      label: '使用内存',
+    },
+    {
+      content: Number.parseFloat(data?.used_cpu_user_children ?? '0').toFixed(
+        2,
+      ),
+      label: '使用CPU',
+    },
+    {
+      content: data.maxmemory_human,
+      label: '内存配置',
+    },
+    {
+      content: data.aof_enabled === '0' ? '否' : '是',
+      label: 'AOF是否开启',
+    },
+    {
+      content: data.rdb_last_bgsave_status,
+      label: 'RDB是否成功',
+    },
+    {
+      content: data.dbSize,
+      label: 'key数量',
+    },
+    {
+      content: `${data.instantaneous_input_kbps}kps/${data.instantaneous_output_kbps}kps`,
+      label: '网络入口/出口',
+    },
+  ];
+});
 </script>
 
 <template>
   <Descriptions
-    bordered
     :column="{ lg: 4, md: 3, sm: 1, xl: 4, xs: 1 }"
+    :items="items"
+    bordered
     size="small"
-  >
-    <DescriptionsItem label="redis版本">
-      {{ data.redis_version }}
-    </DescriptionsItem>
-    <DescriptionsItem label="redis模式">
-      {{ data.redis_mode === 'standalone' ? '单机模式' : '集群模式' }}
-    </DescriptionsItem>
-    <DescriptionsItem label="tcp端口">
-      {{ data.tcp_port }}
-    </DescriptionsItem>
-    <DescriptionsItem label="客户端数">
-      {{ data.connected_clients }}
-    </DescriptionsItem>
-    <DescriptionsItem label="运行时间">
-      {{ data.uptime_in_days }} 天
-    </DescriptionsItem>
-    <DescriptionsItem label="使用内存">
-      {{ data.used_memory_human }}
-    </DescriptionsItem>
-    <DescriptionsItem label="使用CPU">
-      {{ Number.parseFloat(data?.used_cpu_user_children ?? '0').toFixed(2) }}
-    </DescriptionsItem>
-    <DescriptionsItem label="内存配置">
-      {{ data.maxmemory_human }}
-    </DescriptionsItem>
-    <DescriptionsItem label="AOF是否开启">
-      {{ data.aof_enabled === '0' ? '否' : '是' }}
-    </DescriptionsItem>
-    <DescriptionsItem label="RDB是否成功">
-      {{ data.rdb_last_bgsave_status }}
-    </DescriptionsItem>
-    <DescriptionsItem label="key数量">
-      {{ data.dbSize }}
-    </DescriptionsItem>
-    <DescriptionsItem label="网络入口/出口">
-      {{
-        `${data.instantaneous_input_kbps}kps/${data.instantaneous_output_kbps}kps`
-      }}
-    </DescriptionsItem>
-  </Descriptions>
+  />
 </template>