feat:优化Redis缓存监控页面

src/views/system/monitor/cache/index.vue

@@ -8,7 +8,7 @@
           <div class="status-label">内存使用</div>
           <el-progress 
             v-if="sysInfo.memory" 
-            :percentage="parseFloat(((sysInfo.memory.used_memory / sysInfo.memory.maxmemory) * 100).toFixed(1))" 
+            :percentage="sysInfo.memory.maxmemory && sysInfo.memory.maxmemory > 0 ? parseFloat(((sysInfo.memory.used_memory / sysInfo.memory.maxmemory) * 100).toFixed(1)) : 0" 
             :color="memoryColorGetter" 
             :stroke-width="8" 
             class="memory-progress"
@@ -271,8 +271,7 @@
                 <td>
                   <div class="cell-card">
                     {{ memorySizeFormat(sysInfo.memory.used_memory) }} -
-                    {{ lengthToFixed2(sysInfo.memory.used_memory / sysInfo.memory.maxmemory) }}%
-
+                    {{ sysInfo.memory.maxmemory && sysInfo.memory.maxmemory > 0 ? lengthToFixed2(sysInfo.memory.used_memory / sysInfo.memory.maxmemory * 100) : '0' }}%
                   </div>
                 </td>
               </tr>
@@ -499,6 +498,8 @@ export default defineComponent({
 
     const memoryColorGetter = computed(() => {
       if (!state.sysInfo.memory) return '#409EFF';
+      if (!state.sysInfo.memory.maxmemory || state.sysInfo.memory.maxmemory === 0) return '#409EFF';
+      
       const percentage = (state.sysInfo.memory.used_memory / state.sysInfo.memory.maxmemory) * 100;
       if (percentage < 50) return '#67C23A';
       if (percentage < 80) return '#E6A23C';
@@ -553,8 +554,14 @@ export default defineComponent({
 
     function initCharts() {
       if (memoryChartRef.value) {
-        memoryChart = echarts.init(memoryChartRef.value);
+        // 判断当前是否为深色模式
+        const isDarkMode = document.documentElement.classList.contains('dark');
+        
+        // 根据深色模式初始化图表
+        memoryChart = echarts.init(memoryChartRef.value, isDarkMode ? 'dark' : '');
+        
         const option = {
+          backgroundColor: 'transparent',
           grid: {
             top: 20,
             right: 20,
@@ -590,13 +597,17 @@ export default defineComponent({
               type: 'line',
               smooth: true,
               areaStyle: {
-                opacity: 0.3
+                opacity: 0.3,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: isDarkMode ? 'rgba(64, 158, 255, 0.7)' : 'rgba(64, 158, 255, 0.7)' },
+                  { offset: 1, color: isDarkMode ? 'rgba(64, 158, 255, 0.1)' : 'rgba(64, 158, 255, 0.1)' }
+                ])
               },
               lineStyle: {
                 width: 3
               },
               itemStyle: {
-                color: '#409EFF'
+                color: isDarkMode ? '#5ea8ff' : '#409EFF'
               }
             }
           ]
@@ -604,9 +615,13 @@ export default defineComponent({
         memoryChart.setOption(option);
       }
 
+      // 判断当前是否为深色模式
+      const isDarkMode = document.documentElement.classList.contains('dark');
+        
       if (commandsChartRef.value) {
-        commandsChart = echarts.init(commandsChartRef.value);
+        commandsChart = echarts.init(commandsChartRef.value, isDarkMode ? 'dark' : '');
         const option = {
+          backgroundColor: 'transparent',
           grid: {
             top: 20,
             right: 20,
@@ -631,7 +646,7 @@ export default defineComponent({
               data: [],
               type: 'bar',
               itemStyle: {
-                color: '#67C23A'
+                color: isDarkMode ? '#8ece67' : '#67C23A'
               }
             }
           ]
@@ -640,8 +655,9 @@ export default defineComponent({
       }
 
       if (commandsTrendRef.value) {
-        commandsTrendChart = echarts.init(commandsTrendRef.value);
+        commandsTrendChart = echarts.init(commandsTrendRef.value, isDarkMode ? 'dark' : '');
         const option = {
+          backgroundColor: 'transparent',
           grid: {
             top: 0,
             right: 0,
@@ -665,7 +681,7 @@ export default defineComponent({
               symbol: 'none',
               lineStyle: {
                 width: 2,
-                color: '#67C23A'
+                color: isDarkMode ? '#8ece67' : '#67C23A'
               }
             }
           ]
@@ -674,7 +690,7 @@ export default defineComponent({
       }
 
       if (commandsPieChartRef.value) {
-        commandsPieChart = echarts.init(commandsPieChartRef.value);
+        commandsPieChart = echarts.init(commandsPieChartRef.value, isDarkMode ? 'dark' : '');
         updateCommandsPieChart();
       }
     }
@@ -766,6 +782,9 @@ export default defineComponent({
     function updateCommandsPieChart() {
       if (!commandsPieChart || !state.sysInfo.stats) return;
       
+      // 判断当前是否为深色模式
+      const isDarkMode = document.documentElement.classList.contains('dark');
+      
       // 构建命令统计数据
       if (state.sysInfo.stats.commandstats) {
         const commandsData = [];
@@ -784,7 +803,21 @@ export default defineComponent({
         commandsData.sort((a, b) => b.value - a.value);
         state.topCommands = commandsData.slice(0, 10);
         
+        // 设置默认颜色等配置
+        const pieColors = [
+          '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399',
+          '#9B5DE5', '#2D69F0', '#44B3C2', '#F15C5C', '#FCBC51'
+        ];
+        
+        // 深色模式下使用更亮的颜色
+        const darkModeColors = [
+          '#5ea8ff', '#8ece67', '#f0b25e', '#f78989', '#b4b8bf',
+          '#bb8ef0', '#5c89f5', '#65c6d2', '#f78989', '#ffd780'
+        ];
+        
         commandsPieChart.setOption({
+          backgroundColor: 'transparent',
+          color: isDarkMode ? darkModeColors : pieColors,
           tooltip: {
             trigger: 'item',
             formatter: '{a} <br/>{b}: {c} ({d}%)'
@@ -803,7 +836,7 @@ export default defineComponent({
               avoidLabelOverlap: false,
               itemStyle: {
                 borderRadius: 10,
-                borderColor: '#fff',
+                borderColor: isDarkMode ? 'rgba(0, 0, 0, 0.2)' : '#fff',
                 borderWidth: 2
               },
               label: {
@@ -933,7 +966,7 @@ export default defineComponent({
 
     .status-label {
       font-size: 14px;
-      color: #909399;
+      color: var(--el-text-color-secondary, #909399);
       margin-bottom: 10px;
     }
 
@@ -951,7 +984,7 @@ export default defineComponent({
       margin-top: 10px;
       
       .trend-value {
-        color: #67C23A;
+        color: var(--el-color-success, #67C23A);
         font-weight: bold;
         margin-right: 10px;
       }
@@ -963,7 +996,7 @@ export default defineComponent({
     
     .clients-info, .uptime-info {
       font-size: 12px;
-      color: #909399;
+      color: var(--el-text-color-secondary, #909399);
       margin-top: 15px;
     }
 
@@ -971,10 +1004,10 @@ export default defineComponent({
       margin-top: 5px;
     }
 
-    &.memory-card { border-top: 3px solid #409EFF; }
-    &.keys-card { border-top: 3px solid #67C23A; }
-    &.clients-card { border-top: 3px solid #E6A23C; }
-    &.uptime-card { border-top: 3px solid #F56C6C; }
+    &.memory-card { border-top: 3px solid var(--el-color-primary, #409EFF); }
+    &.keys-card { border-top: 3px solid var(--el-color-success, #67C23A); }
+    &.clients-card { border-top: 3px solid var(--el-color-warning, #E6A23C); }
+    &.uptime-card { border-top: 3px solid var(--el-color-danger, #F56C6C); }
   }
 
   .chart-card, .data-card {
@@ -1011,7 +1044,7 @@ export default defineComponent({
         font-size: 16px;
         font-weight: bold;
         margin-bottom: 15px;
-        color: #409EFF;
+        color: var(--el-color-primary, #409EFF);
       }
       
       .db-info {
@@ -1021,7 +1054,7 @@ export default defineComponent({
           justify-content: space-between;
           
           .db-label {
-            color: #606266;
+            color: var(--el-text-color-regular, #606266);
           }
           
           .db-value {
@@ -1070,7 +1103,7 @@ export default defineComponent({
       padding: 8px;
       &:first-child {
         width: 40%;
-        color: #606266;
+        color: var(--el-text-color-regular, #606266);
       }
       &:last-child {
         font-weight: 500;
@@ -1078,7 +1111,7 @@ export default defineComponent({
     }
     
     tr:nth-child(even) {
-      background-color: #f9f9f9;
+      background-color: var(--el-fill-color-light, #f9f9f9);
     }
   }
 }