fdb2 1.0.6 → 1.0.8

package/src/platform/database/components/db-tools.vue

@@ -126,6 +126,38 @@
       </div>
     </div>
 
+    <!-- 执行结果展示区域 -->
+    <div class="execution-results">
+      <div class="results-header">
+        <h6 class="results-title">
+          <i class="bi bi-terminal"></i>
+          执行结果
+        </h6>
+        <button class="btn btn-outline-secondary btn-sm" @click="clearResults">
+          <i class="bi bi-trash"></i> 清空
+        </button>
+      </div>
+      <div class="results-content" ref="resultsContentRef">
+        <div v-if="executionResults.length === 0" class="no-results">
+          <i class="bi bi-inbox"></i>
+          <p>暂无执行结果</p>
+        </div>
+        <div v-for="(result, index) in executionResults" :key="index" class="result-item" :class="`result-${result.status}`">
+          <div class="result-header" @click="toggleResult(index)">
+            <div class="result-title">
+              <i :class="getResultIcon(result.status)"></i>
+              <span class="operation-name">{{ result.operation }}</span>
+              <span class="operation-time">{{ result.timestamp }}</span>
+            </div>
+            <i class="bi bi-chevron-down toggle-icon" :class="{ 'expanded': result.expanded }"></i>
+          </div>
+          <div v-if="result.expanded" class="result-body">
+            <pre><code v-html="highlightJson(result.data)"></code></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 数据恢复模态框 -->
     <div class="modal fade" :class="{ show: restoreModalVisible }" :style="{ display: restoreModalVisible ? 'block' : 'none', zIndex: 1055 }">
       <div class="modal-dialog">
@@ -157,40 +189,6 @@
         </div>
       </div>
     </div>
-
-    <!-- 健康检查结果模态框 -->
-    <div class="modal fade" :class="{ show: healthModalVisible }" :style="{ display: healthModalVisible ? 'block' : 'none', zIndex: 1055 }">
-      <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">数据库健康检查</h5>
-            <button type="button" class="btn-close" @click="closeHealthModal"></button>
-          </div>
-          <div class="modal-body">
-            <div v-if="healthChecking" class="text-center py-4">
-              <div class="spinner-border text-primary" role="status"></div>
-              <div class="mt-3">正在检查数据库健康状况...</div>
-            </div>
-            <div v-else>
-              <div class="health-results">
-                <div v-for="check in healthResults" :key="check.name" class="health-item">
-                  <div class="health-status">
-                    <i :class="check.status === 'healthy' ? 'bi bi-check-circle-fill text-success' : 
-                                 check.status === 'warning' ? 'bi bi-exclamation-triangle-fill text-warning' : 
-                                 'bi bi-x-circle-fill text-danger'"></i>
-                    {{ check.name }}
-                  </div>
-                  <div class="health-message text-wrap">{{ check.message }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" @click="closeHealthModal">关闭</button>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -212,192 +210,294 @@ const databaseService = new DatabaseService();
 
 // 状态管理
 const restoreModalVisible = ref(false);
-const healthModalVisible = ref(false);
 const selectedFile = ref<File | null>(null);
 const restoring = ref(false);
-const healthChecking = ref(false);
-const healthResults = ref<any[]>([]);
+const resultsContentRef = ref<HTMLElement | null>(null);
+
+// 执行结果历史
+interface ExecutionResult {
+  operation: string;
+  status: 'success' | 'error' | 'info';
+  timestamp: string;
+  data: any;
+  expanded: boolean;
+}
+
+const executionResults = ref<ExecutionResult[]>([]);
 
 const restoreOptions = ref({
   dropExisting: false
 });
 
+// 添加执行结果
+function addExecutionResult(operation: string, status: 'success' | 'error' | 'info', data: any) {
+  const timestamp = new Date().toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+
+  executionResults.value.unshift({
+    operation,
+    status,
+    timestamp,
+    data,
+    expanded: false
+  });
+
+  // 只保留最近50条记录
+  if (executionResults.value.length > 50) {
+    executionResults.value = executionResults.value.slice(0, 50);
+  }
+
+  // 自动滚动到底部(显示最新结果在顶部,所以滚动到0)
+  setTimeout(() => {
+    if (resultsContentRef.value) {
+      resultsContentRef.value.scrollTop = 0;
+    }
+  }, 100);
+}
+
+// 清空执行结果
+function clearResults() {
+  executionResults.value = [];
+}
+
+// 切换结果展开/收起
+function toggleResult(index: number) {
+  const result = executionResults.value[index];
+  if (result) {
+    result.expanded = !result.expanded;
+  }
+}
+
+// 格式化错误信息
+function formatError(error: any): any {
+  const formatted: any = {
+    success: false,
+    message: error.msg || error.message || '未知错误'
+  };
+  if (error.stack) {
+    formatted.stack = error.stack;
+  }
+  return formatted;
+}
+
+// JSON 语法高亮
+function highlightJson(data: any): string {
+  if (data === null || data === undefined) return '';
+  const jsonStr = JSON.stringify(data, null, 2);
+  return jsonStr.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+    let cls = 'json-number';
+    if (/^"/.test(match)) {
+      if (/:$/.test(match)) {
+        cls = 'json-key';
+      } else {
+        cls = 'json-string';
+      }
+    } else if (/true|false/.test(match)) {
+      cls = 'json-boolean';
+    } else if (/null/.test(match)) {
+      cls = 'json-null';
+    }
+    return '<span class="' + cls + '">' + match + '</span>';
+  });
+}
+
+// 获取结果图标
+function getResultIcon(status: string): string {
+  switch (status) {
+    case 'success':
+      return 'bi bi-check-circle-fill text-success';
+    case 'error':
+      return 'bi bi-x-circle-fill text-danger';
+    case 'info':
+      return 'bi bi-info-circle-fill text-info';
+    default:
+      return 'bi bi-dash-circle-fill text-secondary';
+  }
+}
+
 // 数据备份
 async function backupDatabase() {
+  const operation = '备份数据库';
   try {
     const res = await databaseService.backupDatabase(props.connection?.id || '', props.database);
-    if(res.ret === 0) await modal.success('数据库备份成功');
-    else {
-      modal.error(res.msg || '备份失败', {
-        operation: 'BACKUP',
-        database: props.database,
-      });
+    if(res.ret === 0) {
+      addExecutionResult(operation, 'success', res);
+    } else {
+      modal.error(res.msg || '备份失败');
+      addExecutionResult(operation, 'error', formatError(res));
     }
-  } catch (error) {
+  } catch (error: any) {
     console.error('备份失败:', error);
-    
-    modal.error(error.msg || error.message || '备份失败', {
-      operation: 'BACKUP',
-      database: props.database,
-      //options: backupOptions.value,
-      stack: error.stack
-    });
+    modal.error(error.msg || error.message || '备份失败');
+    addExecutionResult(operation, 'error', formatError(error));
   }
 }
 
 // 用户管理
 function showUsersList() {
-  modal.info('用户列表功能开发中...');
+  addExecutionResult('用户列表', 'info', { message: '用户列表功能开发中...' });
 }
 
 function showCreateUserModal() {
-  modal.info('创建用户功能开发中...');
+  addExecutionResult('创建用户', 'info', { message: '创建用户功能开发中...' });
 }
 
 function showPermissionsModal() {
-  modal.info('权限管理功能开发中...');
+  addExecutionResult('权限管理', 'info', { message: '权限管理功能开发中...' });
 }
 
 // 性能监控
 function showProcessList() {
   const sql = 'SHOW PROCESSLIST';
+  addExecutionResult('进程列表', 'info', { sql: sql, message: '已发送 SQL 查询' });
   emit('execute-sql', sql);
 }
 
 function showSlowQueries() {
   const sql = 'SELECT * FROM mysql.slow_log ORDER BY start_time DESC LIMIT 10';
+  addExecutionResult('慢查询', 'info', { sql: sql, message: '已发送 SQL 查询' });
   emit('execute-sql', sql);
 }
 
 function showConnectionsList() {
   const sql = 'SHOW STATUS LIKE "Threads_connected"';
+  addExecutionResult('连接数', 'info', { sql: sql, message: '已发送 SQL 查询' });
   emit('execute-sql', sql);
 }
 
 // 数据库优化
 async function optimizeDatabase() {
+  const operation = '优化数据库';
   try {
-    await databaseService.optimizeDatabase(props.connection?.id || '', props.database);
-    await modal.success('数据库优化完成');
-  } catch (error) {
+    const res = await databaseService.optimizeDatabase(props.connection?.id || '', props.database);
+    if(res.ret === 0) {
+      addExecutionResult(operation, 'success', res.data);
+    } else {
+      modal.error(res.msg || '优化失败');
+      addExecutionResult(operation, 'error', formatError(res));
+    }
+  } catch (error: any) {
     console.error('优化失败:', error);
-    
-    modal.error(error.msg || error.message || '优化失败', {
-      operation: 'OPTIMIZE',
-      database: props.database,
-      //options: optimizationOptions.value,
-      stack: error.stack
-    });
+    modal.error(error.msg || error.message || '优化失败');
+    addExecutionResult(operation, 'error', formatError(error));
   }
 }
 
 async function analyzeTables() {
+  const operation = '分析表';
   try {
-    await databaseService.analyzeTables(props.connection?.id || '', props.database);
-    await modal.success('表分析完成');
-  } catch (error) {
+    const res = await databaseService.analyzeTables(props.connection?.id || '', props.database);
+    if(res.ret === 0) {
+      addExecutionResult(operation, 'success', res.data);
+    } else {
+      modal.error(res.msg || '分析失败');
+      addExecutionResult(operation, 'error', formatError(res));
+    }
+  } catch (error: any) {
     console.error('分析失败:', error);
-    
-    modal.error(error.msg || error.message || '分析失败', {
-      operation: 'ANALYZE',
-      database: props.database,
-      //options: analysisOptions.value,
-      stack: error.stack
-    });
+    modal.error(res.msg || error.message || '分析失败');
+    addExecutionResult(operation, 'error', formatError(error));
   }
 }
 
 async function repairTables() {
+  const operation = '修复表';
   try {
-    await databaseService.repairTables(props.connection?.id || '', props.database);
-    await modal.success('表修复完成');
-  } catch (error) {
+    const res = await databaseService.repairTables(props.connection?.id || '', props.database);
+    if(res.ret === 0) {
+      addExecutionResult(operation, 'success', res.data);
+    } else {
+      modal.error(res.msg || '修复失败');
+      addExecutionResult(operation, 'error', formatError(res));
+    }
+  } catch (error: any) {
     console.error('修复失败:', error);
-    
-    modal.error(error.msg || error.message || '修复失败', {
-      operation: 'REPAIR',
-      database: props.database,
-      //options: repairOptions.value,
-      stack: error.stack
-    });
+    modal.error(res.msg || error.message || '修复失败');
+    addExecutionResult(operation, 'error', formatError(error));
   }
 }
 
 async function clearLogs() {
+  const operation = '清理日志';
   const logs = [
     'TRUNCATE TABLE mysql.slow_log',
     'TRUNCATE TABLE mysql.general_log',
     'FLUSH LOGS'
   ];
-  
-  logs.forEach(sql => emit('execute-sql', sql));
-  await modal.success('日志清理完成');
+
+  logs.forEach(sql => {
+    addExecutionResult(`清理日志 - ${sql.split(' ')[1]}`, 'info', { sql, message: '已发送 SQL 查询' });
+    emit('execute-sql', sql);
+  });
 }
 
 // 数据迁移
 function showExportModal() {
-  modal.info('导出结构功能开发中...');
+  addExecutionResult('导出结构', 'info', { message: '导出结构功能开发中...' });
 }
 
 function showImportModal() {
-  modal.info('导入数据功能开发中...');
+  addExecutionResult('导入数据', 'info', { message: '导入数据功能开发中...' });
 }
 
 function showSyncModal() {
-  modal.info('数据同步功能开发中...');
+  addExecutionResult('数据同步', 'info', { message: '数据同步功能开发中...' });
 }
 
 // 健康检查
 async function runHealthCheck() {
-  healthChecking.value = true;
-  healthResults.value = [];
-  
-  try {
-    const checks = [
-      { name: '连接状态', sql: 'SELECT 1 as status' },
-      { name: '表完整性', sql: 'SELECT COUNT(*) as status FROM information_schema.tables WHERE table_schema = DATABASE() AND table_type = "BASE TABLE"' },
-      { name: '索引状态', sql: 'SELECT COUNT(*) as status FROM information_schema.statistics WHERE table_schema = DATABASE()' },
-      { name: '磁盘空间', sql: 'SELECT SUM(data_length + index_length) as status FROM information_schema.tables WHERE table_schema = DATABASE()' }
-    ];
-    
-    for (const check of checks) {
-      try {
-        // 这里应该调用实际的数据库查询
-        healthResults.value.push({
-          name: check.name,
-          status: 'healthy',
-          message: '正常'
-        });
-      } catch (error) {
-        healthResults.value.push({
-          name: check.name,
-          status: 'error',
-          message: error.message
-        });
-      }
+  const operation = '健康检查';
+  const checks = [
+    { name: '连接状态', sql: 'SELECT 1 as status' },
+    { name: '表完整性', sql: 'SELECT COUNT(*) as status FROM information_schema.tables WHERE table_schema = DATABASE() AND table_type = "BASE TABLE"' },
+    { name: '索引状态', sql: 'SELECT COUNT(*) as status FROM information_schema.statistics WHERE table_schema = DATABASE()' },
+    { name: '磁盘空间', sql: 'SELECT SUM(data_length + index_length) as status FROM information_schema.tables WHERE table_schema = DATABASE()' }
+  ];
+
+  const results: any[] = [];
+  for (const check of checks) {
+    try {
+      // 这里应该调用实际的数据库查询
+      results.push({
+        name: check.name,
+        status: 'healthy',
+        message: '正常'
+      });
+    } catch (error: any) {
+      results.push({
+        name: check.name,
+        status: 'error',
+        message: error.message
+      });
     }
-    
-    healthModalVisible.value = true;
-  } finally {
-    healthChecking.value = false;
   }
+
+  addExecutionResult(operation, 'success', { checks: results });
 }
 
 function showStatistics() {
   const sql = `
-    SELECT 
+    SELECT
       table_name as '表名',
       table_rows as '记录数',
       ROUND(((data_length + index_length) / 1024 / 1024), 2) as '大小(MB)'
-    FROM information_schema.tables 
-    WHERE table_schema = DATABASE() 
+    FROM information_schema.tables
+    WHERE table_schema = DATABASE()
     ORDER BY (data_length + index_length) DESC
   `;
+  addExecutionResult('数据统计', 'info', { sql: sql, message: '已发送 SQL 查询' });
   emit('execute-sql', sql);
 }
 
 function showAuditLog() {
   const sql = 'SELECT * FROM mysql.general_log ORDER BY event_time DESC LIMIT 100';
+  addExecutionResult('审计日志', 'info', { sql: sql, message: '已发送 SQL 查询' });
   emit('execute-sql', sql);
 }
 
@@ -414,55 +514,38 @@ function closeRestoreModal() {
 function handleFileSelect(event: Event) {
   const target = event.target as HTMLInputElement;
   if (target.files && target.files.length > 0) {
-    selectedFile.value = target.files[0];
+    selectedFile.value = target.files[0] as File;
   }
 }
 
 async function performRestore() {
   if (!selectedFile.value) return;
-  
+
+  const operation = '恢复数据库';
   try {
     restoring.value = true;
-    // 这里简化处理，实际项目中可能需要先上传文件
     const filePath = selectedFile.value.name;
-    
-    await databaseService.restoreDatabase(
+
+    const res = await databaseService.restoreDatabase(
       props.connection?.id || '',
       props.database,
       filePath,
       { dropExisting: restoreOptions.value.dropExisting }
     );
-    
-    await modal.success('数据库恢复成功');
+
+    addExecutionResult(operation, 'success', res);
     closeRestoreModal();
-  } catch (error) {
+  } catch (error: any) {
     console.error('恢复失败:', error);
-    
-    modal.error(error.msg || error.message || '恢复失败', {
-      operation: 'RESTORE',
-      database: props.database,
-      //file: restoreFile.value,
-      stack: error.stack
-    });
+    modal.error(error.msg || error.message || '恢复失败');
+    addExecutionResult(operation, 'error', formatError(error));
   } finally {
     restoring.value = false;
   }
 }
 
-// 健康检查模态框
-function closeHealthModal() {
-  healthModalVisible.value = false;
-  healthResults.value = [];
-}
-
-// 辅助函数
-async function fetchTableList(): Promise<string[]> {
-  // 这里应该调用API获取表列表
-  return [];
-}
-
 function showScheduleModal() {
-  modal.info('定时备份功能开发中...');
+  addExecutionResult('定时备份', 'info', { message: '定时备份功能开发中...' });
 }
 </script>
 
@@ -523,55 +606,212 @@ function showScheduleModal() {
   gap: 0.5rem;
 }
 
-.health-results {
-  max-height: 400px;
-  overflow-y: auto;
+.modal {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-dialog {
+  max-width: 600px;
+}
+
+.modal-header {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.modal-title {
+  color: #1e293b;
+  font-weight: 600;
+}
+
+.modal-footer {
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
 }
 
-.health-item {
+/* 执行结果区域 */
+.execution-results {
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.results-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  padding: 0.75rem;
+  padding: 1rem 1.5rem;
+  background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
   border-bottom: 1px solid #e2e8f0;
 }
 
-.health-status {
-  min-width: 150px;
+.results-title {
+  margin: 0;
+  font-size: 1rem;
   font-weight: 600;
+  color: #1e293b;
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
-.health-message {
-  flex: 1;
-  color: #6b7280;
+.results-content {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 1rem;
 }
 
-.modal {
-  background-color: rgba(0, 0, 0, 0.5);
+.no-results {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  color: #94a3b8;
 }
 
-.modal-dialog {
-  max-width: 600px;
+.no-results i {
+  font-size: 3rem;
+  margin-bottom: 1rem;
 }
 
-.modal-lg .modal-dialog {
-  max-width: 800px;
+.no-results p {
+  margin: 0;
+  font-size: 1rem;
 }
 
-.modal-header {
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  border-bottom: 1px solid #e2e8f0;
+.result-item {
+  margin-bottom: 0.75rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: white;
+  overflow: hidden;
+  transition: box-shadow 0.2s;
 }
 
-.modal-title {
-  color: #1e293b;
-  font-weight: 600;
+.result-item:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.modal-footer {
+.result-item.result-success {
+  border-left: 4px solid #22c55e;
+}
+
+.result-item.result-error {
+  border-left: 4px solid #ef4444;
+}
+
+.result-item.result-info {
+  border-left: 4px solid #3b82f6;
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  background: white;
+  transition: background 0.2s;
+}
+
+.result-header:hover {
   background: #f8fafc;
+}
+
+.result-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.result-title i {
+  font-size: 1.1rem;
+}
+
+.operation-name {
+  font-weight: 600;
+  color: #1e293b;
+  font-size: 0.95rem;
+}
+
+.operation-time {
+  color: #64748b;
+  font-size: 0.85rem;
+  margin-left: auto;
+}
+
+.toggle-icon {
+  transition: transform 0.2s;
+  color: #94a3b8;
+  font-size: 0.9rem;
+}
+
+.toggle-icon.expanded {
+  transform: rotate(180deg);
+}
+
+.result-body {
+  padding: 1rem;
+  background: #fafafa;
   border-top: 1px solid #e2e8f0;
 }
+
+.result-body pre {
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.result-body code {
+  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
+}
+
+/* JSON 语法高亮 - 不使用 scoped 以确保 v-html 内容能应用样式 */
+:deep(.json-key) {
+  color: #d04255;
+  font-weight: 500;
+}
+
+:deep(.json-string) {
+  color: #22863a;
+}
+
+:deep(.json-number) {
+  color: #005cc5;
+}
+
+:deep(.json-boolean) {
+  color: #d73a49;
+}
+
+:deep(.json-null) {
+  color: #6f42c1;
+}
+
+/* 滚动条样式 */
+.results-content::-webkit-scrollbar,
+.result-body pre::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.results-content::-webkit-scrollbar-track,
+.result-body pre::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 4px;
+}
+
+.results-content::-webkit-scrollbar-thumb,
+.result-body pre::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+.results-content::-webkit-scrollbar-thumb:hover,
+.result-body pre::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
 </style>