fdb2 1.0.0

package/src/platform/database/components/sql-executor.vue

@@ -0,0 +1,738 @@
+<template>
+  <div class="sql-executor">
+    <div class="sql-toolbar">
+      <div class="toolbar-left">
+        <button class="btn btn-primary btn-sm" @click="executeSql" :disabled="loading">
+          <i class="bi bi-play-fill"></i> 执行SQL
+        </button>
+        <button class="btn btn-outline-secondary btn-sm" @click="formatSql">
+          <i class="bi bi-braces"></i> 格式化
+        </button>
+      </div>
+      <div class="toolbar-right">
+        <button class="btn btn-outline-primary btn-sm" @click="clearSql">
+          <i class="bi bi-trash"></i> 清空
+        </button>
+      </div>
+    </div>
+    
+    <div class="sql-container" ref="containerRef">
+      <!-- SQL编辑器 -->
+      <div class="sql-editor">
+        <div ref="editorRef" class="codemirror-editor"></div>
+      </div>
+      
+      <!-- 可拖动分隔栏 -->
+      <div 
+        class="resizer" 
+        @mousedown="startResize"
+        :class="{ 'resizing': isResizing }"
+      ></div>
+      
+      <!-- SQL执行结果显示 -->
+      <div class="sql-result">
+        <div class="result-content">
+          <div class="result-header">
+            <h6 class="result-title">
+              <div v-if="loading" class="sql-loading">
+                <div class="spinner-border spinner-border-sm me-2"></div>
+                执行中...
+              </div>
+              <template v-else-if="sqlResult">
+                <i class="bi bi-check-circle-fill text-success" v-if="sqlResult.success"></i>
+                <i class="bi bi-x-circle-fill text-danger" v-else></i>
+                执行结果
+              </template>
+              <template v-else>
+                执行结果
+              </template>
+            </h6>
+            <div class="result-actions" v-if="sqlResult && !loading">
+              <button class="btn btn-sm btn-outline-secondary me-2" @click="formatJsonResult">
+                <i class="bi bi-braces"></i> 格式化
+              </button>
+              <button class="btn btn-sm btn-outline-secondary" @click="exportResult('json')">
+                <i class="bi bi-file-earmark-code"></i> 导出JSON
+              </button>
+            </div>
+          </div>
+          
+          <!-- 执行中的loading状态 -->
+          <div v-if="loading" class="sql-loading-state">
+            <div class="d-flex align-items-center justify-content-center py-4">
+              <div class="spinner-border text-primary me-3"></div>
+              <div>
+                <div class="fw-bold">正在执行SQL...</div>
+                <div class="text-muted small">请稍候，复杂查询可能需要较长时间</div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- JSON结果显示 -->
+          <div class="json-result">
+            <div ref="resultEditorRef" class="codemirror-editor"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watch } from 'vue';
+// 导入CodeMirror相关模块
+import { EditorState } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightActiveLine, drawSelection, placeholder } from '@codemirror/view';
+import { defaultKeymap } from '@codemirror/commands';
+import { sql } from '@codemirror/lang-sql';
+import { json } from '@codemirror/lang-json';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+
+// 导入其他依赖
+import { DatabaseService } from '@/service/database';
+import { modal } from '@/utils/modal';
+import { exportDataToCSV, exportDataToJSON, formatFileName } from '../utils/export';
+
+// Props
+const props = defineProps<{
+  connection: any;
+  database: string;
+  height?: number;
+}>();
+
+const databaseService = new DatabaseService();
+
+// 响应式数据
+const sqlQuery = ref('');
+const loading = ref(false);
+const sqlResult = ref<any>(null);
+const containerRef = ref<HTMLElement | null>(null);
+const editorRef = ref<HTMLElement | null>(null);
+const resultEditorRef = ref<HTMLElement | null>(null);
+const editor = ref<EditorView | null>(null);
+const resultEditor = ref<EditorView | null>(null);
+const isResizing = ref(false);
+const height = ref(props.height || 0);
+const editorHeight = ref(0);
+const resultHeight = computed(() => height.value - editorHeight.value - 8);
+
+// 方法
+function startResize(event: MouseEvent) {
+  isResizing.value = true;
+  const startY = event.clientY;
+  const container = containerRef.value;
+  if (!container) return;
+  
+  const containerHeight = container.clientHeight;
+  const startEditorHeight = container.querySelector('.sql-editor')?.clientHeight || 0;
+  
+  function onMouseMove(e: MouseEvent) {
+    if (!isResizing.value || !container) return;
+    const deltaY = e.clientY - startY;
+    const newEditorHeight = startEditorHeight + deltaY;
+    const newEditorRatio = newEditorHeight / containerHeight;
+    
+    if (newEditorRatio > 0.2 && newEditorRatio < 0.8) {
+      const sqlEditor = container.querySelector('.sql-editor');
+      if (sqlEditor) {
+        sqlEditor.style.flex = `0 0 ${newEditorRatio * 100}%`;
+      }
+    }
+  }
+  
+  function onMouseUp() {
+    isResizing.value = false;
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  }
+  
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+}
+
+async function executeSql() {
+  if (!sqlQuery.value.trim()) {
+    modal.warning('请输入SQL语句');
+    return;
+  }
+  
+  if (!props.connection) {
+    modal.error('请先选择数据库连接');
+    return;
+  }
+  
+  loading.value = true;
+  sqlResult.value = null;
+  
+  try {
+    const result = await databaseService.executeQuery(
+      props.connection.id,
+      sqlQuery.value,
+      props.database
+    );
+    
+    if (typeof result.data === 'object' && result.data !== null) {
+      // 判断执行是否成功：ret === 0 表示成功，否则表示失败
+      const isSuccess = result.ret === 0;
+      
+      sqlResult.value = {
+        success: isSuccess,
+        data: isSuccess ? (result.data || []) : null,        
+        error: !isSuccess ? result.msg : null
+      };
+    } 
+    // 处理其他情况
+    else {
+      sqlResult.value = {
+        success: true,
+        data: result,
+        error: null
+      };
+    }
+  } catch (error: any) {
+    sqlResult.value = {
+      success: false,
+      error: error.message || '执行SQL时发生未知错误'
+    };
+  } finally {
+    loading.value = false;
+    // 更新结果编辑器内容
+    if (!loading.value && sqlResult.value) {
+      updateResultEditor();
+    }
+  }
+}
+
+function formatSql() {
+  // 简单的SQL格式化
+  let formatted = sqlQuery.value
+    .replace(/\bSELECT\b/gi, '\nSELECT ')
+    .replace(/\bFROM\b/gi, '\nFROM ')
+    .replace(/\bWHERE\b/gi, '\nWHERE ')
+    .replace(/\bJOIN\b/gi, '\nJOIN ')
+    .replace(/\bAND\b/gi, '\n  AND ')
+    .replace(/\bOR\b/gi, '\n  OR ')
+    .replace(/\bGROUP BY\b/gi, '\nGROUP BY ')
+    .replace(/\bORDER BY\b/gi, '\nORDER BY ');
+  
+  sqlQuery.value = formatted.trim();
+  // 更新编辑器内容
+  if (editor.value) {
+    editor.value.dispatch({
+      changes: {
+        from: 0,
+        to: editor.value.state.doc.length,
+        insert: sqlQuery.value
+      }
+    });
+  }
+}
+
+function clearSql() {
+  sqlQuery.value = '';
+  sqlResult.value = null;
+  // 清空编辑器内容
+  if (editor.value) {
+    editor.value.dispatch({
+      changes: {
+        from: 0,
+        to: editor.value.state.doc.length,
+        insert: ''
+      }
+    });
+  }
+}
+
+function formatCellValue(value: any): string {
+  if (value === null || value === undefined) return 'NULL';
+  
+  // 尝试检测并格式化 JSON 数据
+  let strValue = String(value);
+  if (typeof value === 'string') {
+    const trimmedValue = strValue.trim();
+    if ((trimmedValue.startsWith('{') && trimmedValue.endsWith('}')) || 
+        (trimmedValue.startsWith('[') && trimmedValue.endsWith(']'))) {
+      try {
+        const parsed = JSON.parse(trimmedValue);
+        const formatted = JSON.stringify(parsed, null, 2);
+        if (formatted.length > 50) {
+          return formatted.substring(0, 50) + '...';
+        }
+        return formatted;
+      } catch (e) {
+        // 不是有效的 JSON，继续处理
+      }
+    }
+  } else if (typeof value === 'object') {
+    try {
+      const formatted = JSON.stringify(value, null, 2);
+      if (formatted.length > 50) {
+        return formatted.substring(0, 50) + '...';
+      }
+      return formatted;
+    } catch (e) {
+      // 格式化失败，继续处理
+    }
+  }
+  
+  // 对于普通字符串，限制显示长度
+  if (strValue.length > 50) return strValue.substring(0, 50) + '...';
+  
+  return strValue;
+}
+
+function exportResult(format: 'json') {
+  if (!sqlResult.value) {
+    return;
+  }
+  
+  const filename = formatFileName('sql_result', format);
+  
+  // 准备要导出的JSON数据
+  let jsonData;
+  if (sqlResult.value.success) {
+    jsonData = sqlResult.value.data;
+  } else {
+    jsonData = {
+      error: sqlResult.value.error
+    };
+  }
+  
+  // 导出JSON数据
+  exportDataToJSON(jsonData, filename);
+}
+
+// 初始化SQL编辑器
+function initEditor() {
+  if (!editorRef.value) return;
+  
+  // 创建编辑器状态
+  const state = EditorState.create({
+    doc: sqlQuery.value,
+    extensions: [
+      lineNumbers(),
+      highlightActiveLineGutter(),
+      highlightActiveLine(),
+      drawSelection(),
+      placeholder('输入SQL查询语句...'),
+      sql(),
+      oneDark,
+      keymap.of(defaultKeymap),
+      EditorView.updateListener.of(update => {
+        if (update.docChanged) {
+          sqlQuery.value = update.state.doc.toString();
+        }
+      }),
+      EditorView.lineWrapping,
+      EditorView.theme({
+        '&': {
+          height: '100%',
+          fontSize: '14px',
+          fontFamily: 'Monaco, Menlo, Consolas, "Courier New", monospace'
+        },
+        '.cm-content': {
+          padding: '10px',
+          minHeight: '100%'
+        },
+        '.cm-gutters': {
+          backgroundColor: '#282c34',
+          color: '#abb2bf',
+          border: 'none'
+        },
+        '.cm-activeLineGutter': {
+          backgroundColor: '#282c34'
+        },
+        '.cm-activeLine': {
+          backgroundColor: 'rgba(255, 255, 255, 0.1)'
+        }
+      })
+    ]
+  });
+  
+  // 创建编辑器视图
+  editor.value = new EditorView({
+    state,
+    parent: editorRef.value
+  });
+}
+
+// 初始化结果编辑器
+function initResultEditor() {
+  if (!resultEditorRef.value) return;
+  
+  // 创建编辑器状态
+  const state = EditorState.create({
+    doc: '',
+    extensions: [
+      lineNumbers(),
+      highlightActiveLineGutter(),
+      highlightActiveLine(),
+      drawSelection(),
+      placeholder('执行SQL以查看结果...'),
+      json(),
+      syntaxHighlighting(defaultHighlightStyle),
+      keymap.of(defaultKeymap),
+      EditorView.lineWrapping,
+      // 设置只读
+      EditorState.readOnly.of(true),
+      EditorView.theme({
+        '&': {
+          height: '100%',
+          fontSize: '14px',
+          fontFamily: 'Monaco, Menlo, Consolas, "Courier New", monospace',
+          backgroundColor: '#f8f9fa',
+          color: '#212529'
+        },
+        '.cm-content': {
+          padding: '10px',
+          minHeight: '100%',
+          backgroundColor: '#ffffff',
+          color: '#212529',
+          border: '1px solid #dee2e6'
+        },
+        '.cm-gutters': {
+          backgroundColor: '#f8f9fa',
+          color: '#6c757d',
+          border: '1px solid #dee2e6',
+          borderRight: 'none'
+        },
+        '.cm-activeLineGutter': {
+          backgroundColor: '#e9ecef'
+        },
+        '.cm-activeLine': {
+          backgroundColor: '#e9ecef'
+        },
+        '.cm-selectionBackground': {
+          backgroundColor: '#cce7ff'
+        },
+        '.cm-line': {
+          color: '#212529'
+        }
+      })
+    ]
+  });
+  
+  // 创建编辑器视图
+  resultEditor.value = new EditorView({
+    state,
+    parent: resultEditorRef.value
+  });
+}
+
+// 更新结果编辑器内容
+function updateResultEditor() {
+  if (!resultEditor.value || !sqlResult.value) return;
+  
+  // 准备要显示的JSON数据
+  let jsonData;
+  if (sqlResult.value.success) {
+    jsonData = sqlResult.value.data || sqlResult.value; 
+  } else {
+    jsonData = {
+      error: sqlResult.value.error
+    };
+  }
+  
+  // 格式化JSON字符串
+  try {
+    const jsonString = JSON.stringify(jsonData, null, 2);
+    
+    // 更新编辑器内容
+    resultEditor.value.dispatch({
+      changes: {
+        from: 0,
+        to: resultEditor.value.state.doc.length,
+        insert: jsonString
+      }
+    });
+  } catch (error) {
+    // 如果JSON.stringify失败，直接显示原始数据
+    resultEditor.value.dispatch({
+      changes: {
+        from: 0,
+        to: resultEditor.value.state.doc.length,
+        insert: String(jsonData)
+      }
+    });
+  }
+}
+
+// 格式化JSON结果
+function formatJsonResult() {
+  if (!resultEditor.value || !sqlResult.value) return;
+  
+  // 准备要显示的JSON数据
+  let jsonData;
+  if (sqlResult.value.success) {
+    jsonData = sqlResult.value.data || sqlResult.value;
+  } else {
+    jsonData = {
+      error: sqlResult.value.error
+    };
+  }
+  
+  // 格式化JSON字符串
+  try {
+    const jsonString = JSON.stringify(jsonData, null, 2);
+    
+    // 更新编辑器内容
+    resultEditor.value.dispatch({
+      changes: {
+        from: 0,
+        to: resultEditor.value.state.doc.length,
+        insert: jsonString
+      }
+    });
+  } catch (error) {
+    // 如果JSON.stringify失败，显示错误信息
+    resultEditor.value.dispatch({
+      changes: {
+        from: 0,
+        to: resultEditor.value.state.doc.length,
+        insert: '无法格式化结果: ' + String(error)
+      }
+    });
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  // 初始化编辑器
+  initEditor();
+  initResultEditor();
+});
+
+
+
+// 监听 sqlResult 变化，更新结果编辑器内容
+watch(sqlResult, () => {
+  // 当 sqlResult 变化且 resultEditor 已初始化时，更新结果编辑器内容
+  if (sqlResult.value && resultEditor.value) {
+    updateResultEditor();
+  }
+});
+</script>
+
+<style scoped>
+.sql-executor {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.sql-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+}
+
+.toolbar-left,
+.toolbar-right {
+  display: flex;
+  gap: 8px;
+}
+
+.sql-container {
+  position: relative;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.sql-editor {
+  position: relative;
+  overflow: auto;
+  flex: 0 1 300px;
+  min-height: 200px;
+}
+
+.sql-result {
+  position: relative;
+  overflow: auto;
+  border-top: 1px solid #dee2e6;
+  flex: 1;
+}
+
+.codemirror-editor {
+  height: 100%;
+  width: 100%;
+}
+
+.resizer {
+  height: 8px;
+  background-color: #e9ecef;
+  cursor: ns-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.resizer:hover {
+  background-color: #dee2e6;
+}
+
+.resizer::before {
+  content: '';
+  width: 40px;
+  height: 2px;
+  background-color: #adb5bd;
+  border-radius: 1px;
+}
+
+.resizer.resizing {
+  background-color: #dee2e6;
+}
+
+.resizer.resizing::before {
+  background-color: #6c757d;
+}
+
+.sql-result {
+  position: relative;
+  overflow: auto;
+  border-top: 1px solid #dee2e6;
+}
+
+.result-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.result-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sql-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.result-stats {
+  display: flex;
+  gap: 8px;
+}
+
+.result-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.result-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.result-table-container {
+  flex: 1;
+  overflow: auto;
+}
+
+/* 对象结果样式 */
+.result-object {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.object-container {
+  flex: 1;
+  overflow: auto;
+}
+
+.object-container table {
+  width: 100%;
+}
+
+.object-container th:first-child {
+  width: 20%;
+  min-width: 100px;
+}
+
+.object-container td:first-child {
+  font-weight: 500;
+  background-color: #f8f9fa;
+}
+
+.sql-loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  flex: 1;
+}
+
+.sql-empty-result,
+.sql-error {
+  padding: 12px;
+  flex: 1;
+}
+
+.result-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #6c757d;
+  gap: 10px;
+}
+
+.result-empty i {
+  font-size: 48px;
+  opacity: 0.5;
+}
+
+.json-result {
+  flex: 1;
+  overflow: hidden;
+}
+
+.json-result .codemirror-editor {
+  height: 100%;
+  width: 100%;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .sql-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+  
+  .toolbar-left,
+  .toolbar-right {
+    justify-content: center;
+  }
+}
+</style>