fdb2 1.0.6 → 1.0.7

package/packages/vscode/resources/webview/database.js

@@ -0,0 +1,275 @@
+import { d as defineComponent, g as getVSCodeBridge, o as onMounted, a as openBlock, c as createElementBlock, b as createBaseVNode, w as withDirectives, e as vModelSelect, F as Fragment, r as renderList, t as toDisplayString, n as normalizeClass, m as vShow, f as createCommentVNode, h as withModifiers, i as ref, _ as _export_sfc, k as createApp } from "./_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "database-panel" };
+const _hoisted_2 = { style: { "margin-bottom": "20px" } };
+const _hoisted_3 = ["value"];
+const _hoisted_4 = { id: "contentArea" };
+const _hoisted_5 = {
+  key: 0,
+  class: "loading"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "empty-state"
+};
+const _hoisted_7 = { key: 2 };
+const _hoisted_8 = { class: "tabs" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "tab-content active" };
+const _hoisted_11 = { class: "database-grid" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = { class: "database-header" };
+const _hoisted_14 = { class: "database-name" };
+const _hoisted_15 = { class: "database-info" };
+const _hoisted_16 = { class: "database-stat" };
+const _hoisted_17 = { class: "database-stat" };
+const _hoisted_18 = { class: "tab-content" };
+const _hoisted_19 = { class: "database-grid" };
+const _hoisted_20 = ["onClick"];
+const _hoisted_21 = { class: "database-header" };
+const _hoisted_22 = { class: "database-name" };
+const _hoisted_23 = { class: "database-info" };
+const _hoisted_24 = { class: "database-stat" };
+const _hoisted_25 = { class: "database-stat" };
+const _hoisted_26 = { class: "tab-content" };
+const _hoisted_27 = { class: "table-list" };
+const _hoisted_28 = { class: "table-icon" };
+const _hoisted_29 = { class: "table-info" };
+const _hoisted_30 = { class: "table-name" };
+const _hoisted_31 = {
+  key: 0,
+  class: "table-comment"
+};
+const _hoisted_32 = {
+  key: 1,
+  class: "table-meta"
+};
+const _hoisted_33 = { class: "table-actions" };
+const _hoisted_34 = ["onClick"];
+const _hoisted_35 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DatabasePanel",
+  setup(__props) {
+    const vscode = getVSCodeBridge();
+    const connections = ref([]);
+    const selectedConnectionId = ref("");
+    const databases = ref([]);
+    const tables = ref([]);
+    const loading = ref(false);
+    const currentTab = ref("overview");
+    const tabs = [
+      { id: "overview", name: "概览" },
+      { id: "databases", name: "数据库" },
+      { id: "tables", name: "表" }
+    ];
+    onMounted(() => {
+      vscode.postMessage({ command: "getConnections" });
+      vscode.onMessage((message) => {
+        if (message.command === "connections") {
+          connections.value = message.data;
+        } else if (message.command === "selectConnection") {
+          selectConnection(message.data);
+        } else if (message.command === "databases") {
+          databases.value = message.data;
+          loading.value = false;
+        } else if (message.command === "tables") {
+          tables.value = message.data;
+          loading.value = false;
+        } else if (message.command === "error") {
+          handleError(message.data);
+        }
+      });
+    });
+    function handleAddConnection() {
+      vscode.postMessage({ command: "addConnection" });
+    }
+    function handleConnectionChange() {
+      if (selectedConnectionId.value) {
+        const connection = connections.value.find((c) => c.id === selectedConnectionId.value);
+        selectConnection(connection);
+      } else {
+        databases.value = [];
+        tables.value = [];
+      }
+    }
+    function selectConnection(connection) {
+      if (!connection) return;
+      selectedConnectionId.value = connection.id;
+      loading.value = true;
+      vscode.postMessage({
+        command: "getDatabases",
+        data: { connectionId: connection.id }
+      });
+    }
+    function selectDatabase(database) {
+      loading.value = true;
+      currentTab.value = "tables";
+      vscode.postMessage({
+        command: "getTables",
+        data: {
+          connectionId: selectedConnectionId.value,
+          databaseName: database.name
+        }
+      });
+    }
+    function handleViewData(table) {
+      vscode.postMessage({
+        command: "openTableData",
+        data: {
+          connectionId: selectedConnectionId.value,
+          tableName: table.name
+        }
+      });
+    }
+    function handleViewStructure(table) {
+      vscode.postMessage({
+        command: "openTableStructure",
+        data: {
+          connectionId: selectedConnectionId.value,
+          tableName: table.name
+        }
+      });
+    }
+    function handleError(error) {
+      loading.value = false;
+      console.error("Error:", error);
+      alert(`操作失败: ${error}`);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createBaseVNode("div", { class: "panel-header" }, [
+          _cache[1] || (_cache[1] = createBaseVNode("h1", { class: "panel-title" }, "数据库管理", -1)),
+          createBaseVNode("div", { class: "panel-actions" }, [
+            createBaseVNode("button", {
+              onClick: handleAddConnection,
+              class: "btn btn-secondary"
+            }, "添加连接")
+          ])
+        ]),
+        createBaseVNode("div", _hoisted_2, [
+          withDirectives(createBaseVNode("select", {
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedConnectionId.value = $event),
+            class: "connection-selector",
+            onChange: handleConnectionChange
+          }, [
+            _cache[2] || (_cache[2] = createBaseVNode("option", { value: "" }, "选择数据库连接", -1)),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(connections.value, (conn) => {
+              return openBlock(), createElementBlock("option", {
+                key: conn.id,
+                value: conn.id
+              }, toDisplayString(conn.name) + " (" + toDisplayString(conn.host) + ":" + toDisplayString(conn.port) + ") ", 9, _hoisted_3);
+            }), 128))
+          ], 544), [
+            [vModelSelect, selectedConnectionId.value]
+          ])
+        ]),
+        createBaseVNode("div", _hoisted_4, [
+          loading.value ? (openBlock(), createElementBlock("div", _hoisted_5, [..._cache[3] || (_cache[3] = [
+            createBaseVNode("div", { class: "spinner" }, null, -1),
+            createBaseVNode("div", null, "加载中...", -1)
+          ])])) : !selectedConnectionId.value ? (openBlock(), createElementBlock("div", _hoisted_6, [..._cache[4] || (_cache[4] = [
+            createBaseVNode("div", { class: "empty-icon" }, "🗄️", -1),
+            createBaseVNode("div", { class: "empty-title" }, "未选择连接", -1),
+            createBaseVNode("div", { class: "empty-text" }, "请从下拉列表中选择一个数据库连接", -1)
+          ])])) : (openBlock(), createElementBlock("div", _hoisted_7, [
+            createBaseVNode("div", _hoisted_8, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(tabs, (tab) => {
+                return createBaseVNode("button", {
+                  key: tab.id,
+                  class: normalizeClass(["tab", { active: currentTab.value === tab.id }]),
+                  onClick: ($event) => currentTab.value = tab.id
+                }, toDisplayString(tab.name), 11, _hoisted_9);
+              }), 64))
+            ]),
+            withDirectives(createBaseVNode("div", _hoisted_10, [
+              _cache[6] || (_cache[6] = createBaseVNode("h3", { class: "section-title" }, "数据库概览", -1)),
+              createBaseVNode("div", _hoisted_11, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(databases.value, (db) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: db.name,
+                    class: "database-card",
+                    onClick: ($event) => selectDatabase(db)
+                  }, [
+                    createBaseVNode("div", _hoisted_13, [
+                      _cache[5] || (_cache[5] = createBaseVNode("div", { class: "database-icon" }, "🗄️", -1)),
+                      createBaseVNode("div", _hoisted_14, toDisplayString(db.name), 1)
+                    ]),
+                    createBaseVNode("div", _hoisted_15, [
+                      createBaseVNode("span", _hoisted_16, "📊 " + toDisplayString(db.tables) + " 表", 1),
+                      createBaseVNode("span", _hoisted_17, "💾 " + toDisplayString(db.size), 1)
+                    ])
+                  ], 8, _hoisted_12);
+                }), 128))
+              ])
+            ], 512), [
+              [vShow, currentTab.value === "overview"]
+            ]),
+            withDirectives(createBaseVNode("div", _hoisted_18, [
+              _cache[8] || (_cache[8] = createBaseVNode("h3", { class: "section-title" }, "数据库列表", -1)),
+              createBaseVNode("div", _hoisted_19, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(databases.value, (db) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: db.name,
+                    class: "database-card",
+                    onClick: ($event) => selectDatabase(db)
+                  }, [
+                    createBaseVNode("div", _hoisted_21, [
+                      _cache[7] || (_cache[7] = createBaseVNode("div", { class: "database-icon" }, "🗄️", -1)),
+                      createBaseVNode("div", _hoisted_22, toDisplayString(db.name), 1)
+                    ]),
+                    createBaseVNode("div", _hoisted_23, [
+                      createBaseVNode("span", _hoisted_24, "📊 " + toDisplayString(db.tables) + " 表", 1),
+                      createBaseVNode("span", _hoisted_25, "💾 " + toDisplayString(db.size), 1)
+                    ])
+                  ], 8, _hoisted_20);
+                }), 128))
+              ])
+            ], 512), [
+              [vShow, currentTab.value === "databases"]
+            ]),
+            withDirectives(createBaseVNode("div", _hoisted_26, [
+              _cache[9] || (_cache[9] = createBaseVNode("h3", { class: "section-title" }, "表列表", -1)),
+              createBaseVNode("div", _hoisted_27, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(tables.value, (table) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: table.name,
+                    class: "table-item"
+                  }, [
+                    createBaseVNode("div", _hoisted_28, toDisplayString(table.type === "table" ? "📋" : "👁️"), 1),
+                    createBaseVNode("div", _hoisted_29, [
+                      createBaseVNode("div", _hoisted_30, toDisplayString(table.name), 1),
+                      table.comment ? (openBlock(), createElementBlock("div", _hoisted_31, toDisplayString(table.comment), 1)) : createCommentVNode("", true),
+                      table.rows !== null ? (openBlock(), createElementBlock("div", _hoisted_32, [
+                        createBaseVNode("span", null, toDisplayString(table.rows.toLocaleString()) + " 行", 1),
+                        createBaseVNode("span", null, toDisplayString(table.engine || ""), 1),
+                        createBaseVNode("span", null, toDisplayString(table.size || ""), 1)
+                      ])) : createCommentVNode("", true)
+                    ]),
+                    createBaseVNode("span", {
+                      class: normalizeClass(["table-type", table.type])
+                    }, toDisplayString(table.type === "table" ? "TABLE" : "VIEW"), 3),
+                    createBaseVNode("div", _hoisted_33, [
+                      createBaseVNode("button", {
+                        class: "action-btn",
+                        onClick: withModifiers(($event) => handleViewData(table), ["stop"])
+                      }, "数据", 8, _hoisted_34),
+                      createBaseVNode("button", {
+                        class: "action-btn",
+                        onClick: withModifiers(($event) => handleViewStructure(table), ["stop"])
+                      }, "结构", 8, _hoisted_35)
+                    ])
+                  ]);
+                }), 128))
+              ])
+            ], 512), [
+              [vShow, currentTab.value === "tables"]
+            ])
+          ]))
+        ])
+      ]);
+    };
+  }
+});
+const DatabasePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-974a0a17"]]);
+const app = createApp(DatabasePanel);
+app.mount("#app");
+//# sourceMappingURL=database.js.map

package/packages/vscode/resources/webview/database.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"database.js","sources":["../../../../src/platform/vscode/components/DatabasePanel.vue","../../../../src/platform/vscode/entry/database.ts"],"sourcesContent":["<template>\r\n  <div class=\"database-panel\">\r\n    <div class=\"panel-header\">\r\n      <h1 class=\"panel-title\">数据库管理</h1>\r\n      <div class=\"panel-actions\">\r\n        <button @click=\"handleAddConnection\" class=\"btn btn-secondary\">添加连接</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div style=\"margin-bottom: 20px;\">\r\n      <select v-model=\"selectedConnectionId\" class=\"connection-selector\" @change=\"handleConnectionChange\">\r\n        <option value=\"\">选择数据库连接</option>\r\n        <option v-for=\"conn in connections\" :key=\"conn.id\" :value=\"conn.id\">\r\n          {{ conn.name }} ({{ conn.host }}:{{ conn.port }})\r\n        </option>\r\n      </select>\r\n    </div>\r\n\r\n    <div id=\"contentArea\">\r\n      <div v-if=\"loading\" class=\"loading\">\r\n        <div class=\"spinner\"></div>\r\n        <div>加载中...</div>\r\n      </div>\r\n      <div v-else-if=\"!selectedConnectionId\" class=\"empty-state\">\r\n        <div class=\"empty-icon\">🗄️</div>\r\n        <div class=\"empty-title\">未选择连接</div>\r\n        <div class=\"empty-text\">请从下拉列表中选择一个数据库连接</div>\r\n      </div>\r\n      <div v-else>\r\n        <div class=\"tabs\">\r\n          <button\r\n            v-for=\"tab in tabs\"\r\n            :key=\"tab.id\"\r\n            :class=\"['tab', { active: currentTab === tab.id }]\"\r\n            @click=\"currentTab = tab.id\"\r\n          >\r\n            {{ tab.name }}\r\n          </button>\r\n        </div>\r\n\r\n        <div v-show=\"currentTab === 'overview'\" class=\"tab-content active\">\r\n          <h3 class=\"section-title\">数据库概览</h3>\r\n          <div class=\"database-grid\">\r\n            <div\r\n              v-for=\"db in databases\"\r\n              :key=\"db.name\"\r\n              class=\"database-card\"\r\n              @click=\"selectDatabase(db)\"\r\n            >\r\n              <div class=\"database-header\">\r\n                <div class=\"database-icon\">🗄️</div>\r\n                <div class=\"database-name\">{{ db.name }}</div>\r\n              </div>\r\n              <div class=\"database-info\">\r\n                <span class=\"database-stat\">📊 {{ db.tables }} 表</span>\r\n                <span class=\"database-stat\">💾 {{ db.size }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div v-show=\"currentTab === 'databases'\" class=\"tab-content\">\r\n          <h3 class=\"section-title\">数据库列表</h3>\r\n          <div class=\"database-grid\">\r\n            <div\r\n              v-for=\"db in databases\"\r\n              :key=\"db.name\"\r\n              class=\"database-card\"\r\n              @click=\"selectDatabase(db)\"\r\n            >\r\n              <div class=\"database-header\">\r\n                <div class=\"database-icon\">🗄️</div>\r\n                <div class=\"database-name\">{{ db.name }}</div>\r\n              </div>\r\n              <div class=\"database-info\">\r\n                <span class=\"database-stat\">📊 {{ db.tables }} 表</span>\r\n                <span class=\"database-stat\">💾 {{ db.size }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div v-show=\"currentTab === 'tables'\" class=\"tab-content\">\r\n          <h3 class=\"section-title\">表列表</h3>\r\n          <div class=\"table-list\">\r\n            <div\r\n              v-for=\"table in tables\"\r\n              :key=\"table.name\"\r\n              class=\"table-item\"\r\n            >\r\n              <div class=\"table-icon\">{{ table.type === 'table' ? '📋' : '👁️' }}</div>\r\n              <div class=\"table-info\">\r\n                <div class=\"table-name\">{{ table.name }}</div>\r\n                <div v-if=\"table.comment\" class=\"table-comment\">{{ table.comment }}</div>\r\n                <div v-if=\"table.rows !== null\" class=\"table-meta\">\r\n                  <span>{{ table.rows.toLocaleString() }} 行</span>\r\n                  <span>{{ table.engine || '' }}</span>\r\n                  <span>{{ table.size || '' }}</span>\r\n                </div>\r\n              </div>\r\n              <span :class=\"['table-type', table.type]\">{{ table.type === 'table' ? 'TABLE' : 'VIEW' }}</span>\r\n              <div class=\"table-actions\">\r\n                <button class=\"action-btn\" @click.stop=\"handleViewData(table)\">数据</button>\r\n                <button class=\"action-btn\" @click.stop=\"handleViewStructure(table)\">结构</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, reactive, computed, onMounted } from 'vue';\r\nimport { getVSCodeBridge } from '../bridge';\r\n\r\nconst vscode = getVSCodeBridge();\r\n\r\nconst connections = ref<any[]>([]);\r\nconst selectedConnectionId = ref('');\r\nconst databases = ref<any[]>([]);\r\nconst tables = ref<any[]>([]);\r\nconst loading = ref(false);\r\nconst currentTab = ref('overview');\r\n\r\nconst selectedConnection = computed(() => {\r\n  return connections.value.find(c => c.id === selectedConnectionId.value);\r\n});\r\n\r\nconst tabs = [\r\n  { id: 'overview', name: '概览' },\r\n  { id: 'databases', name: '数据库' },\r\n  { id: 'tables', name: '表' }\r\n];\r\n\r\nonMounted(() => {\r\n  // 请求连接列表\r\n  vscode.postMessage({ command: 'getConnections' });\r\n\r\n  // 监听来自扩展的消息\r\n  vscode.onMessage((message: any) => {\r\n    if (message.command === 'connections') {\r\n      connections.value = message.data;\r\n    } else if (message.command === 'selectConnection') {\r\n      selectConnection(message.data);\r\n    } else if (message.command === 'databases') {\r\n      databases.value = message.data;\r\n      loading.value = false;\r\n    } else if (message.command === 'tables') {\r\n      tables.value = message.data;\r\n      loading.value = false;\r\n    } else if (message.command === 'error') {\r\n      handleError(message.data);\r\n    }\r\n  });\r\n});\r\n\r\nfunction handleAddConnection() {\r\n  vscode.postMessage({ command: 'addConnection' });\r\n}\r\n\r\nfunction handleConnectionChange() {\r\n  if (selectedConnectionId.value) {\r\n    const connection = connections.value.find(c => c.id === selectedConnectionId.value);\r\n    selectConnection(connection);\r\n  } else {\r\n    databases.value = [];\r\n    tables.value = [];\r\n  }\r\n}\r\n\r\nfunction selectConnection(connection: any) {\r\n  if (!connection) return;\r\n\r\n  selectedConnectionId.value = connection.id;\r\n  loading.value = true;\r\n\r\n  // 请求数据库列表\r\n  vscode.postMessage({\r\n    command: 'getDatabases',\r\n    data: { connectionId: connection.id }\r\n  });\r\n}\r\n\r\nfunction selectDatabase(database: any) {\r\n  loading.value = true;\r\n  currentTab.value = 'tables';\r\n\r\n  // 请求表列表\r\n  vscode.postMessage({\r\n    command: 'getTables',\r\n    data: {\r\n      connectionId: selectedConnectionId.value,\r\n      databaseName: database.name\r\n    }\r\n  });\r\n}\r\n\r\nfunction handleViewData(table: any) {\r\n  vscode.postMessage({\r\n    command: 'openTableData',\r\n    data: {\r\n      connectionId: selectedConnectionId.value,\r\n      tableName: table.name\r\n    }\r\n  });\r\n}\r\n\r\nfunction handleViewStructure(table: any) {\r\n  vscode.postMessage({\r\n    command: 'openTableStructure',\r\n    data: {\r\n      connectionId: selectedConnectionId.value,\r\n      tableName: table.name\r\n    }\r\n  });\r\n}\r\n\r\nfunction handleError(error: string) {\r\n  loading.value = false;\r\n  console.error('Error:', error);\r\n  alert(`操作失败: ${error}`);\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.database-panel {\r\n  padding: 16px;\r\n  height: 100vh;\r\n  overflow: auto;\r\n}\r\n\r\n.panel-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-bottom: 20px;\r\n  padding-bottom: 16px;\r\n  border-bottom: 1px solid var(--vscode-panel-border);\r\n}\r\n\r\n.panel-title {\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  margin: 0;\r\n  color: var(--vscode-foreground);\r\n}\r\n\r\n.panel-actions {\r\n  display: flex;\r\n  gap: 8px;\r\n}\r\n\r\n.connection-selector {\r\n  width: 300px;\r\n  padding: 6px 10px;\r\n  border: 1px solid var(--vscode-input-border);\r\n  background-color: var(--vscode-input-background);\r\n  color: var(--vscode-input-foreground);\r\n  border-radius: 4px;\r\n  font-size: 13px;\r\n}\r\n\r\n.btn {\r\n  padding: 6px 14px;\r\n  border: none;\r\n  border-radius: 4px;\r\n  font-size: 13px;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.btn-primary {\r\n  background-color: var(--vscode-button-background);\r\n  color: var(--vscode-button-foreground);\r\n}\r\n\r\n.btn-primary:hover {\r\n  background-color: var(--vscode-button-hoverBackground);\r\n}\r\n\r\n.btn-secondary {\r\n  background-color: var(--vscode-button-secondaryBackground);\r\n  color: var(--vscode-button-secondaryForeground);\r\n}\r\n\r\n.btn-secondary:hover {\r\n  background-color: var(--vscode-button-secondaryHoverBackground);\r\n}\r\n\r\n.database-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n  gap: 16px;\r\n}\r\n\r\n.database-card {\r\n  padding: 16px;\r\n  background-color: var(--vscode-editor-background);\r\n  border: 1px solid var(--vscode-panel-border);\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n  transition: all 0.2s;\r\n}\r\n\r\n.database-card:hover {\r\n  border-color: var(--vscode-focusBorder);\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.database-header {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.database-icon {\r\n  font-size: 28px;\r\n  color: var(--vscode-textLink-foreground);\r\n}\r\n\r\n.database-name {\r\n  flex: 1;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  color: var(--vscode-foreground);\r\n}\r\n\r\n.database-info {\r\n  display: flex;\r\n  gap: 16px;\r\n  font-size: 12px;\r\n  color: var(--vscode-descriptionForeground);\r\n}\r\n\r\n.database-stat {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n}\r\n\r\n.section-title {\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  margin: 24px 0 16px 0;\r\n  padding-bottom: 8px;\r\n  border-bottom: 1px solid var(--vscode-panel-border);\r\n  color: var(--vscode-foreground);\r\n}\r\n\r\n.tabs {\r\n  display: flex;\r\n  gap: 4px;\r\n  margin-bottom: 16px;\r\n  border-bottom: 1px solid var(--vscode-panel-border);\r\n}\r\n\r\n.tab {\r\n  padding: 8px 16px;\r\n  border: none;\r\n  background-color: transparent;\r\n  color: var(--vscode-foreground);\r\n  font-size: 13px;\r\n  cursor: pointer;\r\n  border-bottom: 2px solid transparent;\r\n  transition: all 0.2s;\r\n}\r\n\r\n.tab:hover {\r\n  background-color: var(--vscode-list-hoverBackground);\r\n}\r\n\r\n.tab.active {\r\n  border-bottom-color: var(--vscode-focusBorder);\r\n  color: var(--vscode-textLink-foreground);\r\n}\r\n\r\n.tab-content {\r\n  display: none;\r\n}\r\n\r\n.tab-content.active {\r\n  display: block;\r\n}\r\n\r\n.table-list {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n}\r\n\r\n.table-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 12px;\r\n  border-radius: 6px;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.table-item:hover {\r\n  background-color: var(--vscode-list-hoverBackground);\r\n}\r\n\r\n.table-icon {\r\n  font-size: 20px;\r\n  color: var(--vscode-textLink-foreground);\r\n  width: 24px;\r\n  text-align: center;\r\n}\r\n\r\n.table-info {\r\n  flex: 1;\r\n}\r\n\r\n.table-name {\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  margin-bottom: 2px;\r\n  color: var(--vscode-foreground);\r\n}\r\n\r\n.table-comment {\r\n  font-size: 12px;\r\n  color: var(--vscode-descriptionForeground);\r\n}\r\n\r\n.table-meta {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  font-size: 12px;\r\n  color: var(--vscode-descriptionForeground);\r\n  margin-top: 4px;\r\n}\r\n\r\n.table-type {\r\n  padding: 2px 8px;\r\n  border-radius: 12px;\r\n  background-color: var(--vscode-badge-background);\r\n  font-weight: 500;\r\n  font-size: 12px;\r\n}\r\n\r\n.table-type.table {\r\n  background-color: var(--vscode-badge-background);\r\n}\r\n\r\n.table-type.view {\r\n  background-color: var(--vscode-gitDecorationModifiedResourceForeground);\r\n  color: white;\r\n}\r\n\r\n.table-actions {\r\n  display: flex;\r\n  gap: 8px;\r\n  opacity: 0;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.table-item:hover .table-actions {\r\n  opacity: 1;\r\n}\r\n\r\n.action-btn {\r\n  padding: 4px 8px;\r\n  font-size: 12px;\r\n  background-color: var(--vscode-button-secondaryBackground);\r\n  color: var(--vscode-button-secondaryForeground);\r\n  border: none;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n}\r\n\r\n.action-btn:hover {\r\n  background-color: var(--vscode-button-secondaryHoverBackground);\r\n}\r\n\r\n.empty-state {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 80px 20px;\r\n  text-align: center;\r\n}\r\n\r\n.empty-icon {\r\n  font-size: 64px;\r\n  margin-bottom: 16px;\r\n  opacity: 0.3;\r\n}\r\n\r\n.empty-title {\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  margin-bottom: 8px;\r\n  color: var(--vscode-foreground);\r\n}\r\n\r\n.empty-text {\r\n  font-size: 14px;\r\n  color: var(--vscode-descriptionForeground);\r\n}\r\n\r\n.loading {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 40px;\r\n}\r\n\r\n.spinner {\r\n  width: 32px;\r\n  height: 32px;\r\n  border: 3px solid var(--vscode-progressBar-background);\r\n  border-top-color: var(--vscode-progressBar-foreground);\r\n  border-radius: 50%;\r\n  animation: spin 0.6s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n</style>\r\n","/**\r\n * VSCode WebView - Database Entry Point\r\n * 数据库管理面板入口\r\n */\r\n\r\nimport { createApp } from 'vue';\r\nimport DatabasePanel from '../components/DatabasePanel.vue';\r\n\r\n// 创建 Vue 应用\r\nconst app = createApp(DatabasePanel);\r\n\r\n// 挂载\r\napp.mount('#app');\r\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_toDisplayString","_normalizeClass","_withDirectives","_withModifiers"],"mappings":"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"}

package/packages/vscode/resources/webview/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include "./modules/header.tpl" %}
+  <body>
+    <div id="app" class="min-vh-100"></div>
+    <script type="module" lang="ts" src="{{prefix}}/src/platform/index.ts">      
+    </script>
+  </body>
+</html>

package/packages/vscode/resources/webview/modules/header.tpl

@@ -0,0 +1,14 @@
+  <head>
+    <meta charset="UTF-8" />
+    <base href="{{viteTarget}}" />
+    {% include "./initial_state.tpl" %}   
+    <link rel="icon" href="{{prefix}}/public/favicon.png" />    
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>数据库管理</title>
+    <meta name="description" content="{{description}}">
+    <script>
+      window.addEventListener('vite:preloadError', function (event) {
+        console.error(event);
+      });
+    </script> 
+  </head>

package/packages/vscode/resources/webview/modules/initial_state.tpl

@@ -0,0 +1,55 @@
+<script type="text/template" id="__INITIAL_STATE__">
+    {{ data | dump | safe }}
+</script>
+<script type="text/template" id="__DEFAULTINITIAL_STATE__">
+  {{ __DEFAULTINITIAL_STATE__ }}
+</script>
+<script>
+  function __get_templateJson(id) {
+    try { 
+        var tag = document.getElementById(id);
+        var obj = JSON.parse(tag.innerHTML);
+        return obj;
+    }
+    catch (e) {    
+      return null;
+    }
+  }
+  var __INITIAL_STATE__ = __get_templateJson('__INITIAL_STATE__');
+  if(!__INITIAL_STATE__) __INITIAL_STATE__ = __get_templateJson('__DEFAULTINITIAL_STATE__');
+  // 动态加载入口
+  function __vitejs_load_entry(url, type) {        
+        if(!url) return;
+        if(url.indexOf('/') !== 0) url = '/' + url;
+        var prefix = (window.__INITIAL_STATE__ && window.__INITIAL_STATE__.config && window.__INITIAL_STATE__.config.prefix) || '';
+        if(prefix && url.indexOf(prefix) !== 0) {
+          url = prefix + url;
+        }   
+        var nodeObj; 
+        switch(type) {
+          case 'script': {
+            // 检查是否已加载过
+            var existing = document.querySelector(`script[src="${url}"]`);   
+            if(existing) return; 
+            nodeObj = document.createElement('script');
+            nodeObj.src = url;
+            nodeObj.type = 'module';
+            break;
+          }
+          case 'stylesheet': 
+          case 'modulepreload':
+          case 'icon':  {
+            // 检查是否已加载过
+            var existing = document.querySelector(`link[href="${url}"]`);   
+            if(existing) return; 
+            nodeObj = document.createElement('link');
+            nodeObj.href = url;
+            nodeObj.rel = type;
+            break;
+          }
+        }  
+        if(!nodeObj) return;     
+        nodeObj.crossOrigin = 'crossorigin';
+        document.head.appendChild(nodeObj);
+      }
+</script>

package/packages/vscode/resources/webview/query.css

@@ -0,0 +1,162 @@
+
+.query-panel[data-v-eaf4025e] {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+.query-toolbar[data-v-eaf4025e] {
+  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[data-v-eaf4025e] {
+  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[data-v-eaf4025e] {
+  padding: 6px 14px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.btn-primary[data-v-eaf4025e] {
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+.btn-primary[data-v-eaf4025e]:hover {
+  background-color: var(--vscode-button-hoverBackground);
+}
+.btn-secondary[data-v-eaf4025e] {
+  background-color: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+}
+.btn-secondary[data-v-eaf4025e]:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+.query-editor[data-v-eaf4025e] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--vscode-panel-border);
+  min-height: 200px;
+}
+.query-textarea[data-v-eaf4025e] {
+  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[data-v-eaf4025e]:focus {
+  outline: none;
+}
+.query-results[data-v-eaf4025e] {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+}
+.loading-state[data-v-eaf4025e] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  gap: 12px;
+}
+.spinner[data-v-eaf4025e] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--vscode-progressBar-background);
+  border-top-color: var(--vscode-progressBar-foreground);
+  border-radius: 50%;
+  animation: spin-eaf4025e 0.6s linear infinite;
+}
+@keyframes spin-eaf4025e {
+to {
+    transform: rotate(360deg);
+}
+}
+.results-header[data-v-eaf4025e] {
+  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[data-v-eaf4025e] {
+  font-size: 14px;
+  font-weight: 600;
+}
+.results-meta[data-v-eaf4025e] {
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+}
+.data-table[data-v-eaf4025e] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.data-table th[data-v-eaf4025e],
+.data-table td[data-v-eaf4025e] {
+  padding: 8px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+.data-table th[data-v-eaf4025e] {
+  background-color: var(--vscode-editorGroupHeader-tabsBackground);
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+}
+.data-table tbody tr[data-v-eaf4025e]:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.empty-state[data-v-eaf4025e] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+.empty-icon[data-v-eaf4025e] {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+.empty-text[data-v-eaf4025e] {
+  font-size: 14px;
+  color: var(--vscode-descriptionForeground);
+}
+.status-bar[data-v-eaf4025e] {
+  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[data-v-eaf4025e] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.status-icon[data-v-eaf4025e] {
+  color: var(--vscode-textLink-foreground);
+}