refactor：基于 lint 处理排版

apps/web-antd/src/views/infra/redis/index.vue

@@ -1,17 +1,20 @@
 <script lang="ts" setup>
 import type { InfraRedisApi } from '#/api/infra/redis';
 
-import { Card } from 'ant-design-vue';
+import { onMounted, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
-import Memory from './modules/memory.vue';
-import Commands from './modules/commands.vue';
-import Info from './modules/info.vue';
+
+import { Card } from 'ant-design-vue';
+
+import { getRedisMonitorInfo } from '#/api/infra/redis';
 import { DocAlert } from '#/components/doc-alert';
 
-import { onMounted, ref } from 'vue';
-import { getRedisMonitorInfo } from '#/api/infra/redis';
+import Commands from './modules/commands.vue';
+import Info from './modules/info.vue';
+import Memory from './modules/memory.vue';
 
-const redisData = ref<InfraRedisApi.InfraRedisMonitorInfo>();
+const redisData = ref<InfraRedisApi.RedisMonitorInfo>();
 
 /** 统一加载 Redis 数据 */
 const loadRedisData = async () => {
@@ -36,7 +39,7 @@ onMounted(() => {
       <Info :redis-data="redisData" />
     </Card>
 
-    <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
       <Card title="内存使用">
         <Memory :redis-data="redisData" />
       </Card>

apps/web-antd/src/views/infra/redis/modules/commands.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import type { EchartsUIType } from '@vben/plugins/echarts';
-import type { InfraRedisApi } from '#/api/infra/redis';
 
-import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import type { InfraRedisApi } from '#/api/infra/redis';
 
 import { onMounted, ref, watch } from 'vue';
 
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
 const props = defineProps<{
-  redisData?: InfraRedisApi.InfraRedisMonitorInfo;
+  redisData?: InfraRedisApi.RedisMonitorInfo;
 }>();
 
 const chartRef = ref<EchartsUIType>();
@@ -25,7 +26,7 @@ const renderCommandStats = () => {
   props.redisData.commandStats.forEach((row) => {
     commandStats.push({
       name: row.command,
-      value: row.calls
+      value: row.calls,
     });
     nameList.push(row.command);
   });
@@ -34,11 +35,11 @@ const renderCommandStats = () => {
   renderEcharts({
     title: {
       text: '命令统计',
-      left: 'center'
+      left: 'center',
     },
     tooltip: {
       trigger: 'item',
-      formatter: '{a} <br/>{b} : {c} ({d}%)'
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
     },
     legend: {
       type: 'scroll',
@@ -48,8 +49,8 @@ const renderCommandStats = () => {
       bottom: 20,
       data: nameList,
       textStyle: {
-        color: '#a1a1a1'
-      }
+        color: '#a1a1a1',
+      },
     },
     series: [
       {
@@ -60,29 +61,33 @@ const renderCommandStats = () => {
         data: commandStats,
         roseType: 'radius',
         label: {
-          show: true
+          show: true,
         },
         emphasis: {
           label: {
-            show: true
+            show: true,
           },
           itemStyle: {
             shadowBlur: 10,
             shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
   });
 };
 
 /** 监听数据变化，重新渲染图表 */
-watch(() => props.redisData, (newVal) => {
-  if (newVal) {
-    renderCommandStats();
-  }
-}, { deep: true });
+watch(
+  () => props.redisData,
+  (newVal) => {
+    if (newVal) {
+      renderCommandStats();
+    }
+  },
+  { deep: true },
+);
 
 onMounted(() => {
   if (props.redisData) {

apps/web-antd/src/views/infra/redis/modules/info.vue

@@ -1,15 +1,20 @@
 <script lang="ts" setup>
-import { type InfraRedisApi } from '#/api/infra/redis';
+import type { InfraRedisApi } from '#/api/infra/redis';
 
 import { Descriptions } from 'ant-design-vue';
 
 defineProps<{
-  redisData?: InfraRedisApi.InfraRedisMonitorInfo;
+  redisData?: InfraRedisApi.RedisMonitorInfo;
 }>();
 </script>
 
 <template>
-  <Descriptions :column="6" bordered size="middle" :label-style="{ width: '138px' }">
+  <Descriptions
+    :column="6"
+    bordered
+    size="middle"
+    :label-style="{ width: '138px' }"
+  >
     <Descriptions.Item label="Redis 版本">
       {{ redisData?.info?.redis_version }}
     </Descriptions.Item>
@@ -29,7 +34,11 @@ defineProps<{
       {{ redisData?.info?.used_memory_human }}
     </Descriptions.Item>
     <Descriptions.Item label="使用 CPU">
-      {{ redisData?.info ? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2) : '' }}
+      {{
+        redisData?.info
+          ? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2)
+          : ''
+      }}
     </Descriptions.Item>
     <Descriptions.Item label="内存配置">
       {{ redisData?.info?.maxmemory_human }}

apps/web-antd/src/views/infra/redis/modules/memory.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import type { EchartsUIType } from '@vben/plugins/echarts';
-import type { InfraRedisApi } from '#/api/infra/redis';
 
-import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import type { InfraRedisApi } from '#/api/infra/redis';
 
 import { onMounted, ref, watch } from 'vue';
 
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
 const props = defineProps<{
-  redisData?: InfraRedisApi.InfraRedisMonitorInfo;
+  redisData?: InfraRedisApi.RedisMonitorInfo;
 }>();
 
 const chartRef = ref<EchartsUIType>();
@@ -22,8 +23,8 @@ const parseMemoryValue = (memStr: string | undefined): number => {
     // 从字符串中提取数字部分，例如 "1.2M" 中的 1.2
     const str = String(memStr); // 显式转换为字符串类型
     const match = str.match(/^([\d.]+)/);
-    return match ? parseFloat(match[1] as string) : 0;
-  } catch (e) {
+    return match ? Number.parseFloat(match[1] as string) : 0;
+  } catch {
     return 0;
   }
 };
@@ -45,7 +46,7 @@ const renderMemoryChart = () => {
       left: 'center',
     },
     tooltip: {
-      formatter: '{b} <br/>{a} : ' + usedMemory
+      formatter: `{b} <br/>{a} : ${usedMemory}`,
     },
     series: [
       {
@@ -64,59 +65,63 @@ const renderMemoryChart = () => {
             color: [
               [0.2, '#7FFF00'],
               [0.8, '#00FFFF'],
-              [1, '#FF0000']
+              [1, '#FF0000'],
             ],
-            width: 10
-          }
+            width: 10,
+          },
         },
         axisTick: {
           length: 5,
           lineStyle: {
-            color: '#76D9D7'
-          }
+            color: '#76D9D7',
+          },
         },
         splitLine: {
           length: 20,
           lineStyle: {
-            color: '#76D9D7'
-          }
+            color: '#76D9D7',
+          },
         },
         axisLabel: {
           color: '#76D9D7',
           distance: 15,
-          fontSize: 15
+          fontSize: 15,
         },
         pointer: {
           width: 7,
-          show: true
+          show: true,
         },
         detail: {
           show: true,
           offsetCenter: [0, '50%'],
           color: 'auto',
           fontSize: 30,
-          formatter: usedMemory
+          formatter: usedMemory,
         },
         progress: {
-          show: true
+          show: true,
         },
         data: [
           {
             value: memoryValue,
-            name: '内存消耗'
-          }
-        ]
-      }
-    ]
+            name: '内存消耗',
+          },
+        ],
+      },
+    ],
   });
 };
 
 /** 监听数据变化，重新渲染图表 */
-watch(() => props.redisData, (newVal) => {
-  if (newVal) {
-    renderMemoryChart();
-  }
-}, { deep: true });
+watch(
+  () => props.redisData,
+  (newVal) => {
+    if (newVal) {
+      renderMemoryChart();
+    }
+  },
+  { deep: true },
+);
 
 onMounted(() => {
   if (props.redisData) {