refactor: 使用原生组件重构redis-info

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

@@ -1,96 +1,58 @@
 <script setup lang="ts">
 import type { RedisInfo } from '#/api/monitor/cache';
-import type { DescItem } from '#/components/description';
 
-import { onMounted, watch } from 'vue';
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
-
-import { Description, useDescription } from '#/components/description';
 
 interface IRedisInfo extends RedisInfo {
   dbSize: string;
 }
 
-const props = defineProps<{ data: IRedisInfo }>();
+defineProps<{ data: IRedisInfo }>();
-
-const descSchemas: DescItem[] = [
-  { field: 'redis_version', label: 'redis版本' },
-  {
-    field: 'redis_mode',
-    label: 'redis模式',
-    render(value) {
-      return value === 'standalone' ? '单机模式' : '集群模式';
-    },
-  },
-  {
-    field: 'tcp_port',
-    label: 'tcp端口',
-  },
-  {
-    field: 'connected_clients',
-    label: '客户端数',
-  },
-  {
-    field: 'uptime_in_days',
-    label: '运行时间',
-    render(value) {
-      return `${value}天`;
-    },
-  },
-  {
-    field: 'used_memory_human',
-    label: '使用内存',
-  },
-  {
-    field: 'used_cpu_user_children',
-    label: '使用CPU',
-    render(value) {
-      return Number.parseFloat(value).toFixed(2);
-    },
-  },
-  {
-    field: 'maxmemory_human',
-    label: '内存配置',
-  },
-  {
-    field: 'aof_enabled',
-    label: 'AOF是否开启',
-    render(value) {
-      return value === '0' ? '否' : '是';
-    },
-  },
-  {
-    field: 'rdb_last_bgsave_status',
-    label: 'RDB是否成功',
-  },
-  {
-    field: 'dbSize',
-    label: 'Key数量',
-  },
-  {
-    field: 'instantaneous_input_kbps',
-    label: '网络入口/出口',
-    render(_, data) {
-      const { instantaneous_input_kbps, instantaneous_output_kbps } = data;
-      return `${instantaneous_input_kbps}kps/${instantaneous_output_kbps}kps`;
-    },
-  },
-];
-
-const [registerDescription, { setDescProps }] = useDescription({
-  column: { lg: 4, md: 3, sm: 1, xl: 4, xs: 1 },
-  schema: descSchemas,
-});
-
-onMounted(() => setDescProps({ data: props.data }));
-
-watch(
-  () => props.data,
-  (data) => {
-    setDescProps({ data });
-  },
-);
 </script>
 
 <template>
-  <Description @register="registerDescription" />
+  <Descriptions
+    bordered
+    :column="{ lg: 4, md: 3, sm: 1, xl: 4, xs: 1 }"
+    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>