fdb2 1.0.6 → 1.0.8

package/src/platform/vscode/components/QueryPanel.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="query-panel">
+    <div class="query-toolbar">
+      <select v-model="selectedConnectionId" class="query-selector" @change="handleConnectionChange">
+        <option value="">选择数据库连接</option>
+        <option v-for="conn in connections" :key="conn.id" :value="conn.id">
+          {{ conn.name }} ({{ conn.host }}:{{ conn.port }})
+        </option>
+      </select>
+      <button @click="executeQuery" class="btn btn-primary">
+        执行 (Ctrl+Enter)
+      </button>
+      <button @click="clearQuery" class="btn btn-secondary">
+        清空
+      </button>
+    </div>
+
+    <div class="query-editor">
+      <textarea
+        ref="queryTextarea"
+        v-model="queryText"
+        class="query-textarea"
+        placeholder="在此输入 SQL 查询语句...&#10;&#10;例如: SELECT * FROM users LIMIT 100"
+        @keydown="handleKeydown"
+      ></textarea>
+    </div>
+
+    <div class="query-results">
+      <div v-if="loading" class="loading-state">
+        <div class="spinner"></div>
+        <span>执行中...</span>
+      </div>
+      <div v-else-if="queryResults" class="results">
+        <div class="results-header">
+          <div class="results-title">查询结果</div>
+          <div class="results-meta">
+            {{ queryResults.rowCount }} 行 · {{ queryResults.executionTime }}ms
+          </div>
+        </div>
+
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th v-for="col in queryResults.columns" :key="col">{{ col }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, index) in queryResults.rows" :key="index">
+              <td v-for="(cell, cellIndex) in row" :key="cellIndex">
+                {{ formatCell(cell) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-else class="empty-state">
+        <div class="empty-icon">📊</div>
+        <div class="empty-text">执行查询后，结果将显示在这里</div>
+      </div>
+    </div>
+
+    <div class="status-bar">
+      <div class="status-item">
+        <span class="status-icon">🔗</span>
+        <span>{{ selectedConnection?.name || '未选择连接' }}</span>
+      </div>
+      <div class="status-item">
+        <span id="statusTime">{{ queryResults ? `执行时间: ${queryResults.executionTime}ms` : '' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue';
+import { getVSCodeBridge } from '../bridge';
+
+const vscode = getVSCodeBridge();
+
+const connections = ref<any[]>([]);
+const selectedConnectionId = ref('');
+const queryText = ref('');
+const queryResults = ref<any>(null);
+const loading = ref(false);
+const queryTextarea = ref<HTMLTextAreaElement | null>(null);
+
+const selectedConnection = computed(() => {
+  return connections.value.find(c => c.id === selectedConnectionId.value);
+});
+
+onMounted(() => {
+  // 请求连接列表
+  vscode.postMessage({ command: 'getConnections' });
+
+  // 监听来自扩展的消息
+  vscode.onMessage((message: any) => {
+    if (message.command === 'connections') {
+      connections.value = message.data;
+    } else if (message.command === 'queryResult') {
+      displayQueryResult(message.data);
+    } else if (message.command === 'error') {
+      handleError(message.data);
+    }
+  });
+});
+
+function handleConnectionChange() {
+  // 连接变化时的处理
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  // Ctrl+Enter 或 Cmd+Enter 执行查询
+  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+    e.preventDefault();
+    executeQuery();
+  }
+
+  // Tab 键插入2个空格
+  if (e.key === 'Tab') {
+    e.preventDefault();
+    const textarea = queryTextarea.value;
+    if (textarea) {
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      queryText.value = queryText.value.substring(0, start) + '  ' + queryText.value.substring(end);
+      textarea.selectionStart = textarea.selectionEnd = start + 2;
+    }
+  }
+}
+
+function executeQuery() {
+  if (!selectedConnectionId.value) {
+    alert('请先选择数据库连接');
+    return;
+  }
+
+  if (!queryText.value.trim()) {
+    alert('请输入 SQL 查询语句');
+    return;
+  }
+
+  loading.value = true;
+
+  vscode.postMessage({
+    command: 'executeQuery',
+    data: {
+      connectionId: selectedConnectionId.value,
+      sql: queryText.value
+    }
+  });
+}
+
+function clearQuery() {
+  queryText.value = '';
+  queryResults.value = null;
+}
+
+function displayQueryResult(data: any) {
+  queryResults.value = data;
+  loading.value = false;
+}
+
+function handleError(error: string) {
+  loading.value = false;
+  alert(`查询错误: ${error}`);
+}
+
+function formatCell(cell: any) {
+  if (cell === null || cell === undefined) {
+    return 'NULL';
+  }
+  if (typeof cell === 'boolean') {
+    return cell ? '✓' : '✗';
+  }
+  if (typeof cell === 'object') {
+    return JSON.stringify(cell);
+  }
+  return String(cell);
+}
+</script>
+
+<style scoped>
+.query-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.query-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background-color: var(--vscode-editorGroupHeader-tabsBackground);
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.query-selector {
+  min-width: 200px;
+  padding: 6px 10px;
+  border: 1px solid var(--vscode-input-border);
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border-radius: 4px;
+}
+
+.btn {
+  padding: 6px 14px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.btn-primary {
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+
+.btn-primary:hover {
+  background-color: var(--vscode-button-hoverBackground);
+}
+
+.btn-secondary {
+  background-color: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+}
+
+.btn-secondary:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+
+.query-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--vscode-panel-border);
+  min-height: 200px;
+}
+
+.query-textarea {
+  flex: 1;
+  padding: 16px;
+  font-family: var(--vscode-editor-font-family, 'Consolas', 'Monaco', monospace);
+  font-size: 14px;
+  line-height: 1.6;
+  border: none;
+  resize: none;
+  background-color: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+}
+
+.query-textarea:focus {
+  outline: none;
+}
+
+.query-results {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+}
+
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  gap: 12px;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--vscode-progressBar-background);
+  border-top-color: var(--vscode-progressBar-foreground);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background-color: var(--vscode-editorGroupHeader-tabsBackground);
+  border-radius: 4px;
+}
+
+.results-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.results-meta {
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 8px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.data-table th {
+  background-color: var(--vscode-editorGroupHeader-tabsBackground);
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+}
+
+.data-table tbody tr:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-text {
+  font-size: 14px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: var(--vscode-statusBar-background);
+  color: var(--vscode-statusBar-foreground);
+  font-size: 12px;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-icon {
+  color: var(--vscode-textLink-foreground);
+}
+</style>

package/src/platform/vscode/entry/connection.ts

@@ -0,0 +1,13 @@
+/**
+ * VSCode WebView - Connection Entry Point
+ * 连接管理面板入口
+ */
+
+import { createApp } from 'vue';
+import ConnectionPanel from '../components/ConnectionPanel.vue';
+
+// 创建 Vue 应用
+const app = createApp(ConnectionPanel);
+
+// 挂载
+app.mount('#app');

package/src/platform/vscode/entry/database.ts

@@ -0,0 +1,13 @@
+/**
+ * VSCode WebView - Database Entry Point
+ * 数据库管理面板入口
+ */
+
+import { createApp } from 'vue';
+import DatabasePanel from '../components/DatabasePanel.vue';
+
+// 创建 Vue 应用
+const app = createApp(DatabasePanel);
+
+// 挂载
+app.mount('#app');

package/src/platform/vscode/entry/query.ts

@@ -0,0 +1,13 @@
+/**
+ * VSCode WebView - Query Entry Point
+ * SQL 查询面板入口
+ */
+
+import { createApp } from 'vue';
+import QueryPanel from '../components/QueryPanel.vue';
+
+// 创建 Vue 应用
+const app = createApp(QueryPanel);
+
+// 挂载
+app.mount('#app');

package/src/platform/vscode/index.ts

@@ -0,0 +1,5 @@
+/**
+ * VSCode 平台入口
+ */
+
+export { VSCodeBridge, getVSCodeBridge, isVSCodeEnvironment } from './bridge';

package/src/service/database.ts

@@ -258,16 +258,12 @@ export class DatabaseService {
   async alterTable(
     connectionId: string,
     database: string,
-    tableName: string,
-    columns: any[],
-    oldColumns?: any[]
+    tableDiff: any
   ) {
     return request('/api/database/alterTable', {
       id: connectionId,
       database,
-      tableName,
-      columns,
-      oldColumns
+      tableDiff
     });
   }
 

package/vite.config.ts

@@ -46,24 +46,24 @@ const config = defineConfig({
             writeBundle: async () => {
                 const serverSrcDir = path.resolve(__dirname, './server');
                 const serverDistDir = path.resolve(__dirname, './dist/server');
-                
+
                 if (!fs.existsSync(serverDistDir)) {
                     fs.mkdirSync(serverDistDir, { recursive: true });
                 }
-                
+
                 const copyRecursiveSync = (src: string, dest: string) => {
                     const exists = fs.existsSync(src);
                     const stats = exists && fs.statSync(src);
                     const isDirectory = exists && stats.isDirectory();
-                    
+
                     if (isDirectory) {
                         if (!fs.existsSync(dest)) {
                             fs.mkdirSync(dest);
                         }
-                        
+
                         fs.readdirSync(src).forEach(childItemName => {
                             copyRecursiveSync(
-                                path.join(src, childItemName), 
+                                path.join(src, childItemName),
                                 path.join(dest, childItemName)
                             );
                         });
@@ -73,11 +73,51 @@ const config = defineConfig({
                         }
                     }
                 };
-                
+
                 copyRecursiveSync(serverSrcDir, serverDistDir);
                 console.log('Server files copied to', serverDistDir);
             }
         },
+        {
+            name: 'copy-scripts',
+            writeBundle: async () => {
+                const scriptsSrcDir = path.resolve(__dirname, './scripts');
+                const scriptsDistDir = path.resolve(__dirname, './dist/scripts');
+
+                if (!fs.existsSync(scriptsSrcDir)) {
+                    console.log('Scripts directory does not exist, skipping.');
+                    return;
+                }
+
+                if (!fs.existsSync(scriptsDistDir)) {
+                    fs.mkdirSync(scriptsDistDir, { recursive: true });
+                }
+
+                const copyRecursiveSync = (src: string, dest: string) => {
+                    const exists = fs.existsSync(src);
+                    const stats = exists && fs.statSync(src);
+                    const isDirectory = exists && stats.isDirectory();
+
+                    if (isDirectory) {
+                        if (!fs.existsSync(dest)) {
+                            fs.mkdirSync(dest);
+                        }
+
+                        fs.readdirSync(src).forEach(childItemName => {
+                            copyRecursiveSync(
+                                path.join(src, childItemName),
+                                path.join(dest, childItemName)
+                            );
+                        });
+                    } else {
+                        fs.copyFileSync(src, dest);
+                    }
+                };
+
+                copyRecursiveSync(scriptsSrcDir, scriptsDistDir);
+                console.log('Scripts files copied to', scriptsDistDir);
+            }
+        },
         {
             name: 'fix-html-paths',
             writeBundle: async () => {

package/vite.config.vscode.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * VSCode WebView 构建配置
+ */
+export default defineConfig({
+  plugins: [vue()],
+
+  build: {
+    outDir: 'packages/vscode/resources/webview',
+    emptyOutDir: true,
+    rollupOptions: {
+      input: {
+        connection: path.resolve(__dirname, 'src/platform/vscode/entry/connection.ts'),
+        query: path.resolve(__dirname, 'src/platform/vscode/entry/query.ts'),
+        database: path.resolve(__dirname, 'src/platform/vscode/entry/database.ts')
+      },
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name][extname]',
+        formats: ['iife']
+      }
+    },
+    target: 'es2020',
+    minify: false, // 不压缩以便调试
+    sourcemap: true
+  },
+
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+
+  // 环境变量
+  define: {
+    __VS_CODE_ENV__: 'true',
+    'process.env.NODE_ENV': '"production"'
+  }
+});