feat: 实现Redis集成协议并重构项目控制台

refactor(backend): 重构后端服务以支持Redis协议
feat(backend): 添加Redis客户端和服务模块
feat(backend): 实现命令和日志路由处理Redis交互
refactor(frontend): 重构前端状态管理和组件结构
feat(frontend): 实现基于Redis的日志和命令功能
docs: 添加Redis集成协议文档
chore: 更新ESLint配置和依赖

src/frontend/components/DebugArea.vue

@@ -4,105 +4,147 @@
     <div class="debug-header">
       <h2>调试区域</h2>
       <div class="debug-controls">
-        <button class="export-btn" @click="exportDebugInfo">
+        <button
+          class="export-btn"
+          @click="exportDebugInfo"
+        >
           导出调试信息
         </button>
-        <button class="refresh-btn" @click="refreshDebugInfo">
+        <button
+          class="refresh-btn"
+          @click="refreshDebugInfo"
+        >
           刷新数据
         </button>
       </div>
     </div>
-    
+
     <!-- 筛选条件区域 -->
     <div class="filters-container">
       <div class="filter-group">
         <div class="filter-item">
           <label class="filter-label">项目名称</label>
-          <select v-model="selectedProjectId" class="filter-select">
-            <option value="all">全部项目</option>
-            <option 
-              v-for="project in projects" 
-              :key="project.id" 
+          <select
+            v-model="selectedProjectId"
+            class="filter-select"
+          >
+            <option value="all">
+              全部项目
+            </option>
+            <option
+              v-for="project in projects"
+              :key="project.id"
               :value="project.id"
             >
               {{ project.name }}
             </option>
           </select>
         </div>
-        
+
         <div class="filter-item">
           <label class="filter-label">调试类型</label>
-          <select v-model="selectedDebugType" class="filter-select">
-            <option value="all">全部类型</option>
-            <option value="api">API请求</option>
-            <option value="database">数据库操作</option>
-            <option value="cache">缓存操作</option>
-            <option value="error">错误信息</option>
-            <option value="performance">性能监控</option>
+          <select
+            v-model="selectedDebugType"
+            class="filter-select"
+          >
+            <option value="all">
+              全部类型
+            </option>
+            <option value="api">
+              API请求
+            </option>
+            <option value="database">
+              数据库操作
+            </option>
+            <option value="cache">
+              缓存操作
+            </option>
+            <option value="error">
+              错误信息
+            </option>
+            <option value="performance">
+              性能监控
+            </option>
           </select>
         </div>
       </div>
-      
+
       <div class="filter-group">
         <div class="filter-item">
           <label class="filter-label">时间范围</label>
           <div class="date-range">
-            <input 
-              type="datetime-local" 
-              v-model="startTime" 
+            <input
+              v-model="startTime"
+              type="datetime-local"
               class="date-input"
             >
             <span class="date-separator">至</span>
-            <input 
-              type="datetime-local" 
-              v-model="endTime" 
+            <input
+              v-model="endTime"
+              type="datetime-local"
               class="date-input"
             >
           </div>
         </div>
-        
+
         <div class="filter-actions">
-          <button class="apply-filters-btn" @click="applyFilters">
+          <button
+            class="apply-filters-btn"
+            @click="applyFilters"
+          >
             应用筛选
           </button>
-          <button class="reset-filters-btn" @click="resetFilters">
+          <button
+            class="reset-filters-btn"
+            @click="resetFilters"
+          >
             重置筛选
           </button>
         </div>
       </div>
     </div>
-    
+
     <!-- 调试信息展示区域 -->
     <div class="debug-content">
       <!-- 调试信息列表 -->
       <div class="debug-list">
-        <div 
-          class="debug-item" 
-          v-for="item in filteredDebugInfo" 
+        <div
+          v-for="item in filteredDebugInfo"
           :key="item.id"
+          class="debug-item"
           :class="`debug-type-${item.type}`"
         >
           <div class="debug-item-header">
-            <div class="debug-type-badge" :class="`type-${item.type}`">
+            <div
+              class="debug-type-badge"
+              :class="`type-${item.type}`"
+            >
               {{ getTypeText(item.type) }}
             </div>
-            <div class="debug-timestamp">{{ formatTimestamp(item.timestamp) }}</div>
+            <div class="debug-timestamp">
+              {{ formatTimestamp(item.timestamp) }}
+            </div>
             <div class="debug-project">
               {{ getProjectName(item.projectId) }}
             </div>
           </div>
-          
+
           <div class="debug-item-content">
-            <div class="debug-content-main">{{ item.content }}</div>
-            
+            <div class="debug-content-main">
+              {{ item.content }}
+            </div>
+
             <!-- 调试元数据 -->
-            <div class="debug-metadata" v-if="Object.keys(item.metadata).length > 0">
+            <div
+              v-if="Object.keys(item.metadata).length > 0"
+              class="debug-metadata"
+            >
               <h4>元数据</h4>
               <div class="metadata-list">
-                <div 
-                  class="metadata-item" 
-                  v-for="(value, key) in item.metadata" 
+                <div
+                  v-for="(value, key) in item.metadata"
                   :key="key"
+                  class="metadata-item"
                 >
                   <span class="metadata-key">{{ key }}:</span>
                   <span class="metadata-value">{{ JSON.stringify(value) }}</span>
@@ -110,58 +152,64 @@
               </div>
             </div>
           </div>
-          
+
           <!-- 展开/折叠按钮 -->
-          <div 
-            class="expand-btn" 
-            @click="toggleExpand(item.id)"
+          <div
+            class="expand-btn"
             :class="{ 'expanded': expandedItems.includes(item.id) }"
+            @click="toggleExpand(item.id)"
           >
             <span class="expand-icon">
               {{ expandedItems.includes(item.id) ? '▼' : '▶' }}
             </span>
           </div>
         </div>
-        
+
         <!-- 空状态 -->
-        <div class="empty-state" v-if="filteredDebugInfo.length === 0">
+        <div
+          v-if="filteredDebugInfo.length === 0"
+          class="empty-state"
+        >
           <p>没有找到匹配的调试信息</p>
         </div>
       </div>
     </div>
-    
+
     <!-- 分页控件 -->
-    <div class="pagination" v-if="totalPages > 1">
-      <button 
-        class="page-btn" 
-        @click="currentPage = 1" 
+    <div
+      v-if="totalPages > 1"
+      class="pagination"
+    >
+      <button
+        class="page-btn"
         :disabled="currentPage === 1"
+        @click="currentPage = 1"
       >
         首页
       </button>
-      <button 
-        class="page-btn" 
-        @click="currentPage--" 
+      <button
+        class="page-btn"
         :disabled="currentPage === 1"
+        @click="currentPage--"
       >
         上一页
       </button>
-      
+
       <div class="page-info">
         第 {{ currentPage }} / {{ totalPages }} 页
       </div>
-      
-      <button 
-        class="page-btn" 
-        @click="currentPage++" 
+
+      <button
+        class="page-btn"
         :disabled="currentPage === totalPages"
+        @click="currentPage++"
       >
         下一页
       </button>
-      <button 
-        class="page-btn" 
-        @click="currentPage = totalPages" 
+      <button
+        class="page-btn"
         :disabled="currentPage === totalPages"
+        @click="currentPage = totalPages"
       >
         末页
       </button>
@@ -179,7 +227,7 @@ const projects = ref([
   { id: 'proj-3', name: '订单处理系统', type: 'backend' },
   { id: 'proj-4', name: '移动端应用', type: 'frontend' },
   { id: 'proj-5', name: 'API网关', type: 'backend' },
-  { id: 'proj-6', name: '管理后台', type: 'frontend' }
+  { id: 'proj-6', name: '管理后台', type: 'frontend' },
 ]);
 
 // 筛选条件
@@ -198,26 +246,26 @@ const debugInfo = ref([]);
 
 // 初始化模拟数据
 const initDebugData = () => {
-  const types = ['api', 'database', 'cache', 'error', 'performance'];
+  const types = [ 'api', 'database', 'cache', 'error', 'performance' ];
   const newDebugInfo = [];
-  
+
   // 生成50条模拟数据
   for (let i = 0; i < 50; i++) {
     const type = types[Math.floor(Math.random() * types.length)];
     const projectId = projects.value[Math.floor(Math.random() * projects.value.length)].id;
     const timestamp = new Date(Date.now() - Math.random() * 3600000 * 24).toISOString();
-    
+
     // 根据类型生成不同的内容
     let content = '';
     let metadata = {};
-    
+
     switch (type) {
       case 'api':
         content = `API请求: GET /api/users/${i + 1}`;
         metadata = {
           status: Math.random() > 0.1 ? 200 : 404,
           responseTime: Math.floor(Math.random() * 500) + 50,
-          ip: `192.168.1.${Math.floor(Math.random() * 255)}`
+          ip: `192.168.1.${Math.floor(Math.random() * 255)}`,
         };
         break;
       case 'database':
@@ -225,7 +273,7 @@ const initDebugData = () => {
         metadata = {
           queryTime: Math.floor(Math.random() * 100) + 10,
           rowsAffected: Math.floor(Math.random() * 10) + 1,
-          table: 'users'
+          table: 'users',
         };
         break;
       case 'cache':
@@ -233,19 +281,19 @@ const initDebugData = () => {
         metadata = {
           cacheKey: `user:${i + 1}`,
           cacheType: Math.random() > 0.5 ? 'redis' : 'memcached',
-          ttl: 3600
+          ttl: 3600,
         };
         break;
       case 'error':
-        content = `错误信息: Error: Cannot read property 'name' of undefined`;
+        content = '错误信息: Error: Cannot read property \'name\' of undefined';
         metadata = {
           errorType: 'TypeError',
           stackTrace: [
             'at Object.<anonymous> (/app/src/index.js:10:20)',
             'at Module._compile (internal/modules/cjs/loader.js:1085:14)',
-            'at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)'
+            'at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)',
           ],
-          severity: 'high'
+          severity: 'high',
         };
         break;
       case 'performance':
@@ -254,82 +302,82 @@ const initDebugData = () => {
           metric: 'pageLoadTime',
           value: Math.floor(Math.random() * 2000) + 500,
           threshold: 1500,
-          status: Math.random() > 0.3 ? 'warning' : 'ok'
+          status: Math.random() > 0.3 ? 'warning' : 'ok',
         };
         break;
     }
-    
+
     newDebugInfo.push({
       id: `debug-${Date.now()}-${i}`,
       projectId,
       timestamp,
       type,
       content,
-      metadata
+      metadata,
     });
   }
-  
+
   // 按时间降序排序
-  debugInfo.value = newDebugInfo.sort((a, b) => 
-    new Date(b.timestamp) - new Date(a.timestamp)
+  debugInfo.value = newDebugInfo.sort((a, b) =>
+    new Date(b.timestamp) - new Date(a.timestamp),
   );
 };
 
 // 计算过滤后的调试信息
 const filteredDebugInfo = computed(() => {
-  let result = [...debugInfo.value];
-  
+  let result = [ ...debugInfo.value ];
+
   // 按项目筛选
   if (selectedProjectId.value !== 'all') {
     result = result.filter(item => item.projectId === selectedProjectId.value);
   }
-  
+
   // 按调试类型筛选
   if (selectedDebugType.value !== 'all') {
     result = result.filter(item => item.type === selectedDebugType.value);
   }
-  
+
   // 按时间范围筛选
   if (startTime.value) {
     const startDate = new Date(startTime.value);
     result = result.filter(item => new Date(item.timestamp) >= startDate);
   }
-  
+
   if (endTime.value) {
     const endDate = new Date(endTime.value);
     result = result.filter(item => new Date(item.timestamp) <= endDate);
   }
-  
+
   // 分页处理
   const startIndex = (currentPage.value - 1) * pageSize.value;
   const endIndex = startIndex + pageSize.value;
-  
+
   return result.slice(startIndex, endIndex);
 });
 
 // 计算总页数
 const totalPages = computed(() => {
-  let result = [...debugInfo.value];
-  
+  let result = [ ...debugInfo.value ];
+
   // 应用相同的过滤条件来计算总条数
   if (selectedProjectId.value !== 'all') {
     result = result.filter(item => item.projectId === selectedProjectId.value);
   }
-  
+
   if (selectedDebugType.value !== 'all') {
     result = result.filter(item => item.type === selectedDebugType.value);
   }
-  
+
   if (startTime.value) {
     const startDate = new Date(startTime.value);
     result = result.filter(item => new Date(item.timestamp) >= startDate);
   }
-  
+
   if (endTime.value) {
     const endDate = new Date(endTime.value);
     result = result.filter(item => new Date(item.timestamp) <= endDate);
   }
-  
+
   return Math.ceil(result.length / pageSize.value);
 });
 
@@ -366,13 +414,13 @@ const exportDebugInfo = () => {
       selectedProjectId: selectedProjectId.value,
       selectedDebugType: selectedDebugType.value,
       startTime: startTime.value,
-      endTime: endTime.value
+      endTime: endTime.value,
     },
-    debugInfo: filteredDebugInfo.value
+    debugInfo: filteredDebugInfo.value,
   };
-  
+
   // 创建下载链接
-  const blob = new Blob([JSON.stringify(dataToExport, null, 2)], { type: 'application/json' });
+  const blob = new Blob([ JSON.stringify(dataToExport, null, 2) ], { type: 'application/json' });
   const url = URL.createObjectURL(blob);
   const a = document.createElement('a');
   a.href = url;
@@ -406,7 +454,7 @@ const getTypeText = (type) => {
     database: '数据库操作',
     cache: '缓存操作',
     error: '错误信息',
-    performance: '性能监控'
+    performance: '性能监控',
   };
   return typeMap[type] || type;
 };
@@ -420,7 +468,7 @@ const formatTimestamp = (timestamp) => {
     day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',
-    second: '2-digit'
+    second: '2-digit',
   });
 };
 
@@ -841,49 +889,49 @@ onMounted(() => {
     flex-direction: column;
     gap: 1rem;
   }
-  
+
   .filter-item {
     max-width: 100%;
     min-width: auto;
   }
-  
+
   .filter-group:last-child {
     align-items: stretch;
   }
-  
+
   .filter-actions {
     flex-direction: column;
     gap: 0.5rem;
   }
-  
+
   .debug-controls {
     flex-direction: column;
     gap: 0.5rem;
   }
-  
+
   .export-btn,
   .refresh-btn {
     width: 100%;
   }
-  
+
   .debug-item-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 0.5rem;
   }
-  
+
   .expand-btn {
     position: static;
     align-self: flex-end;
     margin-top: -0.5rem;
     margin-bottom: 0.5rem;
   }
-  
+
   .pagination {
     flex-wrap: wrap;
     gap: 0.5rem;
   }
-  
+
   .page-btn {
     padding: 0.4rem 0.8rem;
     font-size: 0.8rem;