fdb2 1.0.8 → 1.0.9

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

@@ -1,272 +1,272 @@
-<template>
-  <div class="connection-form">
-    <h1 class="panel-title">{{ isEditMode ? '编辑' : '添加' }}数据库连接</h1>
-
-    <form @submit.prevent="handleSubmit">
-      <div class="form-group">
-        <label class="form-label">连接名称</label>
-        <input
-          type="text"
-          v-model="form.name"
-          class="form-control"
-          placeholder="例如：生产环境 MySQL"
-          required
-        />
-      </div>
-
-      <div class="form-group">
-        <label class="form-label">数据库类型</label>
-        <select v-model="form.type" class="form-control" @change="handleTypeChange" required>
-          <option v-for="db in databaseTypes" :key="db.type" :value="db.type">
-            {{ db.name }}
-          </option>
-        </select>
-      </div>
-
-      <div class="form-row" v-if="form.type !== 'sqlite'">
-        <div class="form-col form-group">
-          <label class="form-label">主机地址</label>
-          <input
-            type="text"
-            v-model="form.host"
-            class="form-control"
-            placeholder="localhost"
-            required
-          />
-        </div>
-
-        <div class="form-col form-group">
-          <label class="form-label">端口</label>
-          <input
-            type="number"
-            v-model.number="form.port"
-            class="form-control"
-            placeholder="3306"
-            required
-          />
-        </div>
-      </div>
-
-      <div class="form-group" :id="form.type === 'sqlite' ? 'sqlite-path' : 'database-name'">
-        <label class="form-label">
-          {{ form.type === 'sqlite' ? '数据库文件路径' : '数据库名称' }}
-        </label>
-        <input
-          type="text"
-          v-model="form.database"
-          class="form-control"
-          :placeholder="form.type === 'sqlite' ? '/path/to/database.sqlite' : '数据库名称'"
-        />
-      </div>
-
-      <div class="form-group" v-if="form.type !== 'sqlite'">
-        <div class="form-row">
-          <div class="form-col">
-            <label class="form-label">用户名</label>
-            <input
-              type="text"
-              v-model="form.username"
-              class="form-control"
-              placeholder="root"
-            />
-          </div>
-
-          <div class="form-col">
-            <label class="form-label">密码</label>
-            <input
-              type="password"
-              v-model="form.password"
-              class="form-control"
-              placeholder="••••••••"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-actions">
-        <button type="button" @click="handleTestConnection" class="btn btn-secondary">
-          测试连接
-        </button>
-        <button type="button" @click="handleCancel" class="btn btn-secondary">
-          取消
-        </button>
-        <button type="submit" class="btn btn-primary">
-          {{ isEditMode ? '保存' : '添加' }}
-        </button>
-      </div>
-    </form>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import { getVSCodeBridge } from '../bridge';
-
-const vscode = getVSCodeBridge();
-
-const isEditMode = ref(false);
-const editingConnection = ref<any>(null);
-
-const form = reactive({
-  name: '',
-  type: 'mysql',
-  host: 'localhost',
-  port: 3306,
-  database: '',
-  username: '',
-  password: ''
-});
-
-const databaseTypes = [
-  { 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 }
-];
-
-onMounted(() => {
-  // 监听来自扩展的消息
-  vscode.onMessage((message: any) => {
-    if (message.command === 'editConnection') {
-      enterEditMode(message.data);
-    } else if (message.command === 'testResult') {
-      handleTestResult(message.data);
-    }
-  });
-});
-
-function enterEditMode(connection: any) {
-  editingConnection.value = connection;
-  isEditMode.value = true;
-
-  Object.assign(form, {
-    name: connection.name,
-    type: connection.type,
-    host: connection.host,
-    port: connection.port,
-    database: connection.database || '',
-    username: connection.username || '',
-    password: connection.password || ''
-  });
-}
-
-function handleTypeChange() {
-  const dbType = databaseTypes.find(db => db.type === form.type);
-  if (dbType && dbType.defaultPort > 0) {
-    form.port = dbType.defaultPort;
-  }
-}
-
-function handleSubmit() {
-  const connectionData = { ...form };
-
-  if (isEditMode.value && editingConnection.value) {
-    connectionData.id = editingConnection.value.id;
-    vscode.postMessage({ command: 'updateConnection', data: connectionData });
-  } else {
-    vscode.postMessage({ command: 'addConnection', data: connectionData });
-  }
-}
-
-function handleTestConnection() {
-  vscode.postMessage({ command: 'testConnection', data: { ...form } });
-}
-
-function handleTestResult(data: any) {
-  if (data.success) {
-    alert('连接测试成功');
-  } else {
-    alert('连接测试失败');
-  }
-}
-
-function handleCancel() {
-  // 在 WebView 中无法直接关闭，通知扩展关闭
-  vscode.postMessage({ command: 'close' });
-}
-</script>
-
-<style scoped>
-.connection-form {
-  padding: 20px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.panel-title {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 24px;
-  color: var(--vscode-foreground);
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-  color: var(--vscode-foreground);
-}
-
-.form-control {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--vscode-input-border);
-  background-color: var(--vscode-input-background);
-  color: var(--vscode-input-foreground);
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.form-control:focus {
-  outline: none;
-  border-color: var(--vscode-focusBorder);
-}
-
-.form-row {
-  display: flex;
-  gap: 12px;
-}
-
-.form-col {
-  flex: 1;
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-}
-
-.btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  font-size: 14px;
-  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);
-}
-</style>
+<template>
+  <div class="connection-form">
+    <h1 class="panel-title">{{ isEditMode ? '编辑' : '添加' }}数据库连接</h1>
+
+    <form @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label class="form-label">连接名称</label>
+        <input
+          type="text"
+          v-model="form.name"
+          class="form-control"
+          placeholder="例如：生产环境 MySQL"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">数据库类型</label>
+        <select v-model="form.type" class="form-control" @change="handleTypeChange" required>
+          <option v-for="db in databaseTypes" :key="db.type" :value="db.type">
+            {{ db.name }}
+          </option>
+        </select>
+      </div>
+
+      <div class="form-row" v-if="form.type !== 'sqlite'">
+        <div class="form-col form-group">
+          <label class="form-label">主机地址</label>
+          <input
+            type="text"
+            v-model="form.host"
+            class="form-control"
+            placeholder="localhost"
+            required
+          />
+        </div>
+
+        <div class="form-col form-group">
+          <label class="form-label">端口</label>
+          <input
+            type="number"
+            v-model.number="form.port"
+            class="form-control"
+            placeholder="3306"
+            required
+          />
+        </div>
+      </div>
+
+      <div class="form-group" :id="form.type === 'sqlite' ? 'sqlite-path' : 'database-name'">
+        <label class="form-label">
+          {{ form.type === 'sqlite' ? '数据库文件路径' : '数据库名称' }}
+        </label>
+        <input
+          type="text"
+          v-model="form.database"
+          class="form-control"
+          :placeholder="form.type === 'sqlite' ? '/path/to/database.sqlite' : '数据库名称'"
+        />
+      </div>
+
+      <div class="form-group" v-if="form.type !== 'sqlite'">
+        <div class="form-row">
+          <div class="form-col">
+            <label class="form-label">用户名</label>
+            <input
+              type="text"
+              v-model="form.username"
+              class="form-control"
+              placeholder="root"
+            />
+          </div>
+
+          <div class="form-col">
+            <label class="form-label">密码</label>
+            <input
+              type="password"
+              v-model="form.password"
+              class="form-control"
+              placeholder="••••••••"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-actions">
+        <button type="button" @click="handleTestConnection" class="btn btn-secondary">
+          测试连接
+        </button>
+        <button type="button" @click="handleCancel" class="btn btn-secondary">
+          取消
+        </button>
+        <button type="submit" class="btn btn-primary">
+          {{ isEditMode ? '保存' : '添加' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { getVSCodeBridge } from '../bridge';
+
+const vscode = getVSCodeBridge();
+
+const isEditMode = ref(false);
+const editingConnection = ref<any>(null);
+
+const form = reactive({
+  name: '',
+  type: 'mysql',
+  host: 'localhost',
+  port: 3306,
+  database: '',
+  username: '',
+  password: ''
+});
+
+const databaseTypes = [
+  { 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 }
+];
+
+onMounted(() => {
+  // 监听来自扩展的消息
+  vscode.onMessage((message: any) => {
+    if (message.command === 'editConnection') {
+      enterEditMode(message.data);
+    } else if (message.command === 'testResult') {
+      handleTestResult(message.data);
+    }
+  });
+});
+
+function enterEditMode(connection: any) {
+  editingConnection.value = connection;
+  isEditMode.value = true;
+
+  Object.assign(form, {
+    name: connection.name,
+    type: connection.type,
+    host: connection.host,
+    port: connection.port,
+    database: connection.database || '',
+    username: connection.username || '',
+    password: connection.password || ''
+  });
+}
+
+function handleTypeChange() {
+  const dbType = databaseTypes.find(db => db.type === form.type);
+  if (dbType && dbType.defaultPort > 0) {
+    form.port = dbType.defaultPort;
+  }
+}
+
+function handleSubmit() {
+  const connectionData = { ...form };
+
+  if (isEditMode.value && editingConnection.value) {
+    connectionData.id = editingConnection.value.id;
+    vscode.postMessage({ command: 'updateConnection', data: connectionData });
+  } else {
+    vscode.postMessage({ command: 'addConnection', data: connectionData });
+  }
+}
+
+function handleTestConnection() {
+  vscode.postMessage({ command: 'testConnection', data: { ...form } });
+}
+
+function handleTestResult(data: any) {
+  if (data.success) {
+    alert('连接测试成功');
+  } else {
+    alert('连接测试失败');
+  }
+}
+
+function handleCancel() {
+  // 在 WebView 中无法直接关闭，通知扩展关闭
+  vscode.postMessage({ command: 'close' });
+}
+</script>
+
+<style scoped>
+.connection-form {
+  padding: 20px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.panel-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 24px;
+  color: var(--vscode-foreground);
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: var(--vscode-foreground);
+}
+
+.form-control {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--vscode-input-border);
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--vscode-focusBorder);
+}
+
+.form-row {
+  display: flex;
+  gap: 12px;
+}
+
+.form-col {
+  flex: 1;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  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);
+}
+</style>