fdb2 1.0.6 → 1.0.8

package/packages/vscode/src/provider/DatabaseTreeProvider.ts

@@ -0,0 +1,167 @@
+import * as vscode from 'vscode';
+import { DatabaseServiceBridge } from '../service/DatabaseServiceBridge';
+import { DatabaseConnection, DatabaseInfo, TableInfo } from '../typings/connection';
+
+/**
+ * 树形视图项目类型
+ */
+type TreeItemContext =
+    | 'connection'      // 数据库连接
+    | 'database'        // 数据库
+    | 'table'           // 表
+    | 'view'            // 视图
+    | 'table-actions';  // 表操作
+
+/**
+ * 树形视图项目
+ */
+class DatabaseItem extends vscode.TreeItem {
+    constructor(
+        public readonly label: string,
+        public readonly collapsibleState: vscode.TreeItemCollapsibleState,
+        public readonly contextValue: TreeItemContext,
+        public readonly connection?: DatabaseConnection,
+        public readonly database?: DatabaseInfo,
+        public readonly table?: TableInfo
+    ) {
+        super(label, collapsibleState);
+
+        // 设置图标
+        this.iconPath = this.getIconPath(contextValue);
+
+        // 设置描述
+        if (contextValue === 'connection' && connection) {
+            this.description = `${connection.host}:${connection.port}`;
+        } else if (contextValue === 'table' && table) {
+            this.description = table.type;
+        }
+    }
+
+    private getIconPath(contextValue: TreeItemContext): vscode.ThemeIcon {
+        switch (contextValue) {
+            case 'connection':
+                return new vscode.ThemeIcon('database');
+            case 'database':
+                return new vscode.ThemeIcon('server');
+            case 'table':
+                return new vscode.ThemeIcon('table');
+            case 'view':
+                return new vscode.ThemeIcon('preview');
+            case 'table-actions':
+                return new vscode.ThemeIcon('ellipsis');
+            default:
+                return new vscode.ThemeIcon('circle-outline');
+        }
+    }
+}
+
+/**
+ * 数据库树形视图提供者
+ * 提供侧边栏的数据库连接和结构树
+ */
+export class DatabaseTreeProvider implements vscode.TreeDataProvider<DatabaseItem> {
+    private _onDidChangeTreeData = new vscode.EventEmitter<DatabaseItem | undefined>();
+    readonly onDidChangeTreeData = this._onDidChangeTreeData.event;
+
+    constructor(
+        private context: vscode.ExtensionContext,
+        private dbBridge: DatabaseServiceBridge
+    ) {}
+
+    refresh(): void {
+        this._onDidChangeTreeData.fire(undefined);
+    }
+
+    getTreeItem(element: DatabaseItem): vscode.TreeItem {
+        return element;
+    }
+
+    async getChildren(element?: DatabaseItem): Promise<DatabaseItem[]> {
+        if (!element) {
+            // 根节点：显示所有连接
+            const connections = await this.dbBridge.connection.getAllConnections();
+            return connections.map((conn: any) => {
+                const item = new DatabaseItem(
+                    conn.name,
+                    vscode.TreeItemCollapsibleState.Collapsed,
+                    'connection',
+                    conn
+                );
+                item.command = {
+                    command: 'fdb2.openDatabasePanel',
+                    title: '打开数据库',
+                    arguments: [conn]
+                };
+                return item;
+            });
+        }
+
+        if (element.contextValue === 'connection') {
+            // 连接节点：显示数据库列表（SQLite 不显示）
+            if (element.connection?.type === 'sqlite') {
+                return await this.getTables(element.connection, '');
+            }
+            return await this.getDatabases(element.connection);
+        }
+
+        if (element.contextValue === 'database') {
+            // 数据库节点：显示表列表
+            return await this.getTables(element.connection, element.database?.name || '');
+        }
+
+        if (element.contextValue === 'table' || element.contextValue === 'view') {
+            // 表节点：显示操作按钮
+            return [
+                new DatabaseItem('查看数据', vscode.TreeItemCollapsibleState.None, 'table-actions'),
+                new DatabaseItem('查看结构', vscode.TreeItemCollapsibleState.None, 'table-actions'),
+                new DatabaseItem('导出数据', vscode.TreeItemCollapsibleState.None, 'table-actions')
+            ];
+        }
+
+        return [];
+    }
+
+    /**
+     * 获取数据库列表
+     */
+    private async getDatabases(connection: DatabaseConnection): Promise<DatabaseItem[]> {
+        if (!connection) return [];
+        try {
+            const databases = await this.dbBridge.database.getDatabases(connection.id);
+            return databases.map(db =>
+                new DatabaseItem(
+                    db,
+                    vscode.TreeItemCollapsibleState.Collapsed,
+                    'database',
+                    connection,
+                    db
+                )
+            );
+        } catch (error: any) {
+            vscode.window.showErrorMessage(`获取数据库列表失败: ${error.message}`);
+            return [];
+        }
+    }
+
+    /**
+     * 获取表列表
+     */
+    private async getTables(connection: DatabaseConnection, databaseName: string): Promise<DatabaseItem[]> {
+        try {
+            const tables = await this.dbBridge.database.getTables(connection.id, databaseName);
+            return tables.map(table =>
+                new DatabaseItem(
+                    table.name,
+                    vscode.TreeItemCollapsibleState.Collapsed,
+                    table.type === 'view' ? 'view' : 'table',
+                    connection,
+                    undefined,
+                    table
+                )
+            );
+        } catch (error: any) {
+            vscode.window.showErrorMessage(`获取表列表失败: ${error.message}`);
+            return [];
+        }
+    }
+}

package/packages/vscode/src/provider/WebViewProvider.ts

@@ -0,0 +1,277 @@
+import * as vscode from 'vscode';
+import * as path from 'path';
+import { DatabaseServiceBridge } from '../service/DatabaseServiceBridge';
+
+/**
+ * WebView 提供者
+ * 负责创建和管理 WebView 面板
+ */
+export class WebViewProvider {
+    private panels: Map<string, vscode.WebviewPanel> = new Map();
+
+    constructor(
+        private context: vscode.ExtensionContext,
+        private dbBridge: DatabaseServiceBridge
+    ) {}
+
+    /**
+     * 显示查询面板
+     */
+    async showQueryPanel(): Promise<void> {
+        const panel = vscode.window.createWebviewPanel(
+            'fdb2.query',
+            'SQL 查询',
+            vscode.ViewColumn.One,
+            {
+                enableScripts: true,
+                retainContextWhenHidden: true,
+                localResourceRoots: [
+                    vscode.Uri.file(path.join(this.context.extensionPath, 'resources', 'webview'))
+                ]
+            }
+        );
+
+        panel.webview.html = this.getWebviewContent(panel.webview, 'query');
+        this.setupMessageHandler(panel, 'query');
+
+        this.panels.set('query', panel);
+
+        // 发送连接列表
+        this.sendConnections(panel);
+    }
+
+    /**
+     * 显示数据库管理面板
+     */
+    async showDatabasePanel(connection?: any): Promise<void> {
+        const panel = vscode.window.createWebviewPanel(
+            'fdb2.database',
+            '数据库管理',
+            vscode.ViewColumn.One,
+            {
+                enableScripts: true,
+                retainContextWhenHidden: true,
+                localResourceRoots: [
+                    vscode.Uri.file(path.join(this.context.extensionPath, 'resources', 'webview'))
+                ]
+            }
+        );
+
+        panel.webview.html = this.getWebviewContent(panel.webview, 'database');
+        this.setupMessageHandler(panel, 'database');
+
+        this.panels.set('database', panel);
+
+        // 如果指定了连接，发送连接信息
+        if (connection) {
+            panel.webview.postMessage({ command: 'selectConnection', data: connection });
+        }
+    }
+
+    /**
+     * 显示添加连接面板
+     */
+    async showAddConnectionPanel(): Promise<void> {
+        const panel = vscode.window.createWebviewPanel(
+            'fdb2.connection',
+            '添加数据库连接',
+            vscode.ViewColumn.One,
+            {
+                enableScripts: true,
+                retainContextWhenHidden: true
+            }
+        );
+
+        panel.webview.html = this.getWebviewContent(panel.webview, 'connection');
+        this.setupMessageHandler(panel, 'connection');
+
+        panel.onDidDispose(() => {
+            // 面板关闭后刷新树形视图
+            vscode.commands.executeCommand('fdb2.refreshConnections');
+        });
+    }
+
+    /**
+     * 显示编辑连接面板
+     */
+    async showEditConnectionPanel(connection: any): Promise<void> {
+        const panel = vscode.window.createWebviewPanel(
+            'fdb2.connection',
+            '编辑数据库连接',
+            vscode.ViewColumn.One,
+            {
+                enableScripts: true,
+                retainContextWhenHidden: true
+            }
+        );
+
+        panel.webview.html = this.getWebviewContent(panel.webview, 'connection');
+        this.setupMessageHandler(panel, 'connection');
+
+        // 发送连接数据用于编辑
+        setTimeout(() => {
+            panel.webview.postMessage({ command: 'editConnection', data: connection });
+        }, 100);
+
+        panel.onDidDispose(() => {
+            vscode.commands.executeCommand('fdb2.refreshConnections');
+        });
+    }
+
+    /**
+     * 获取 WebView 内容
+     */
+    private getWebviewContent(webview: vscode.Webview, type: string): string {
+        const scriptPath = path.join(this.context.extensionPath, 'resources', 'webview', `${type}.js`);
+        const stylePath = path.join(this.context.extensionPath, 'resources', 'webview', `${type}.css`);
+
+        const scriptUri = webview.asWebviewUri(vscode.Uri.file(scriptPath));
+        const styleUri = webview.asWebviewUri(vscode.Uri.file(stylePath));
+
+        // 获取数据库类型列表
+        const databaseTypes = this.getDatabaseTypes();
+
+        return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Database Tool</title>
+    <link rel="stylesheet" href="${styleUri}">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: var(--vscode-font-family);
+            color: var(--vscode-foreground);
+            background-color: var(--vscode-editor-background);
+        }
+        #app {
+            height: 100vh;
+            overflow: auto;
+        }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <script>
+        // VSCode API
+        const vscode = acquireVsCodeApi();
+
+        // 数据库类型配置
+        window.DATABASE_TYPES = ${JSON.stringify(databaseTypes)};
+    </script>
+    <script src="${scriptUri}"></script>
+</body>
+</html>`;
+    }
+
+    /**
+     * 设置消息处理器
+     */
+    private setupMessageHandler(panel: vscode.WebviewPanel, type: string): void {
+        panel.webview.onDidReceiveMessage(
+            async message => {
+                await this.handleMessage(panel, message);
+            },
+            undefined,
+            this.context.subscriptions
+        );
+
+        panel.onDidDispose(() => {
+            this.panels.delete(type);
+        });
+    }
+
+    /**
+     * 处理来自 WebView 的消息
+     */
+    private async handleMessage(panel: vscode.WebviewPanel, message: any): Promise<void> {
+        try {
+            switch (message.command) {
+                case 'getConnections':
+                    this.sendConnections(panel);
+                    break;
+
+                case 'addConnection':
+                    await this.dbBridge.connection.addConnection(message.data);
+                    panel.webview.postMessage({ command: 'connectionAdded', data: message.data });
+                    vscode.window.showInformationMessage('连接添加成功');
+                    break;
+
+                case 'updateConnection':
+                    await this.dbBridge.connection.updateConnection(message.data.id, message.data);
+                    panel.webview.postMessage({ command: 'connectionUpdated', data: message.data });
+                    vscode.window.showInformationMessage('连接更新成功');
+                    break;
+
+                case 'testConnection':
+                    const success = await this.dbBridge.connection.testConnection(message.data);
+                    panel.webview.postMessage({ command: 'testResult', data: { success } });
+                    if (success) {
+                        vscode.window.showInformationMessage('连接测试成功');
+                    } else {
+                        vscode.window.showErrorMessage('连接测试失败');
+                    }
+                    break;
+
+                case 'executeQuery':
+                    const queryResult = await this.dbBridge.database.executeQuery(message.data.connectionId, message.data.sql, message.data.database);
+                    panel.webview.postMessage({
+                        command: 'queryResult',
+                        data: queryResult
+                    });
+                    break;
+
+                case 'getTables':
+                    const tables = await this.dbBridge.database.getTables(message.data.connectionId, message.data.database);
+                    panel.webview.postMessage({
+                        command: 'tables',
+                        data: tables
+                    });
+                    break;
+
+                case 'getDatabases':
+                    const databases = await this.dbBridge.database.getDatabases(message.data.connectionId);
+                    panel.webview.postMessage({
+                        command: 'databases',
+                        data: databases
+                    });
+                    break;
+
+                default:
+                    console.warn('Unknown command:', message.command);
+            }
+        } catch (error: any) {
+            vscode.window.showErrorMessage(`操作失败: ${error.message}`);
+            panel.webview.postMessage({
+                command: 'error',
+                data: error.message
+            });
+        }
+    }
+
+    /**
+     * 发送连接列表到 WebView
+     */
+    private async sendConnections(panel: vscode.WebviewPanel): Promise<void> {
+        const connections = await this.dbBridge.connection.getAllConnections();
+        panel.webview.postMessage({ command: 'connections', data: connections });
+    }
+
+    /**
+     * 获取数据库类型列表
+     */
+    private getDatabaseTypes(): any[] {
+        return [
+            { type: 'mysql', name: 'MySQL', defaultPort: 3306 },
+            { type: 'postgresql', name: 'PostgreSQL', defaultPort: 5432 },
+            { type: 'sqlite', name: 'SQLite', defaultPort: 0 },
+            { type: 'sqlserver', name: 'SQL Server', defaultPort: 1433 },
+            { type: 'oracle', name: 'Oracle', defaultPort: 1521 },
+            { type: 'cockroachdb', name: 'CockroachDB', defaultPort: 26257 },
+            { type: 'mongodb', name: 'MongoDB', defaultPort: 27017 },
+            { type: 'sap_hana', name: 'SAP HANA', defaultPort: 39013 }
+        ];
+    }
+}