fdb2 1.0.0

package/src/components/connection-editor/index.vue

@@ -0,0 +1,590 @@
+<template>
+  <!-- 统一modal组件 - 添加/编辑连接 -->
+  <Modal 
+    ref="connectionModal"
+    :title="editingConnection ? '编辑数据库连接' : '新增数据库连接'"
+    :closeButton="{ text: '取消', show: true }"
+    :confirmButton="{ text: '', show: false }"
+    :isFullScreen="true"
+    :style="{ maxWidth: '800px', width: '100%' }"
+    @onClose="handleModalClose"
+  >
+    <form @submit.prevent="saveConnection" class="connection-form-modern">
+      <!-- 基本信息 -->
+      <div class="form-section">
+        <div class="section-header">
+          <div class="section-icon">
+            <i class="bi bi-info-circle"></i>
+          </div>
+          <h3 class="section-title">基本信息</h3>
+        </div>
+        <div class="section-content">
+          <div class="form-grid">
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <i class="bi bi-tag me-2"></i>连接名称 <span class="required">*</span>
+              </label>
+              <input type="text" class="form-control-modern" v-model="connectionForm.name" 
+                     placeholder="为连接起一个易记的名称" required>
+            </div>
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <i class="bi bi-diagram-3 me-2"></i>数据库类型 <span class="required">*</span>
+              </label>
+              <select class="form-select-modern" v-model="connectionForm.type" @change="onTypeChange" required>
+                <option value="">请选择数据库类型</option>
+                <option v-for="dbType in databaseTypes" :key="dbType.value" :value="dbType.value">
+                  {{ dbType.label }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 连接配置 -->
+      <div class="form-section" v-if="connectionForm.type !== 'sqlite'">
+        <div class="section-header">
+          <div class="section-icon">
+            <i class="bi bi-hdd-network"></i>
+          </div>
+          <h3 class="section-title">连接配置</h3>
+        </div>
+        <div class="section-content">
+          <div class="form-grid">
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <i class="bi bi-server me-2"></i>主机地址 <span class="required">*</span>
+              </label>
+              <input type="text" class="form-control-modern" v-model="connectionForm.host" 
+                     placeholder="数据库服务器地址" required>
+            </div>
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <i class="bi bi-door-closed me-2"></i>端口 <span class="required">*</span>
+              </label>
+              <input type="number" class="form-control-modern" v-model.number="connectionForm.port" 
+                     placeholder="数据库端口号" min="1" max="65535" required>
+            </div>
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <i class="bi bi-database me-2"></i>数据库名 <span class="required">*</span>
+              </label>
+              <input type="text" class="form-control-modern" v-model="connectionForm.database" 
+                     placeholder="要连接的数据库名" required>
+            </div>
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <i class="bi bi-clock me-2"></i>连接超时
+              </label>
+              <input type="number" class="form-control-modern" v-model.number="connectionForm.options.timeout" 
+                     placeholder="连接超时时间（秒）" min="1">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- SQLite配置 -->
+      <div class="form-section" v-if="connectionForm.type === 'sqlite'">
+        <div class="section-header">
+          <div class="section-icon">
+            <i class="bi bi-file-earmark-text"></i>
+          </div>
+          <h3 class="section-title">SQLite配置</h3>
+        </div>
+        <div class="section-content">
+          <div class="form-grid">
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <i class="bi bi-file-earmark me-2"></i>数据库文件 <span class="required">*</span>
+              </label>
+              <input type="text" class="form-control-modern" v-model="connectionForm.database" 
+                     placeholder="SQLite数据库文件路径" required>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 认证信息 -->
+      <div class="form-section">
+        <div class="section-header">
+          <div class="section-icon">
+            <i class="bi bi-shield-lock"></i>
+          </div>
+          <h3 class="section-title">认证信息</h3>
+        </div>
+        <div class="section-content">
+          <div class="form-grid">
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <i class="bi bi-person me-2"></i>用户名
+              </label>
+              <input type="text" class="form-control-modern" v-model="connectionForm.username" 
+                     placeholder="数据库用户名">
+            </div>
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <i class="bi bi-key me-2"></i>密码
+              </label>
+              <input type="password" class="form-control-modern" v-model="connectionForm.password" 
+                     placeholder="数据库密码">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 高级选项 -->
+      <div class="form-section">
+        <div class="section-header">
+          <div class="section-icon">
+            <i class="bi bi-gear"></i>
+          </div>
+          <h3 class="section-title">其他选项</h3>
+        </div>
+        <div class="section-content">
+          <div class="form-group-modern">
+            <label class="form-label-modern">
+              <i class="bi bi-toggle-on me-2"></i>连接状态
+            </label>
+            <div class="form-check-modern">
+              <input class="form-check-input-modern" type="checkbox" v-model="connectionForm.enabled" id="enabled">
+              <label class="form-check-label-modern" for="enabled">
+                <span class="check-text">启用此连接</span>
+                <span class="check-description">创建后将自动启用连接</span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+    
+    <!-- 自定义footer -->
+    <template #footer>
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+        <i class="bi bi-x-circle me-1"></i>取消
+      </button>
+      <button type="button" class="btn btn-outline-primary" @click="testConnection(connectionForm)">
+        <i class="bi bi-wifi me-1"></i>测试连接
+      </button>
+      <button type="button" class="btn btn-primary" @click="saveConnection">
+        <i class="bi bi-save me-1"></i>{{ editingConnection ? '更新配置' : '保存配置' }}
+      </button>
+      <button type="button" class="btn btn-success" @click="saveAndTestConnection">
+        <i class="bi bi-check-circle me-1"></i>保存并测试
+      </button>
+    </template>
+  </Modal>
+  
+  <!-- 错误提示模态框 -->
+  <Modal 
+    ref="errorModal"
+    title="错误提示"
+    :closeButton="{ text: '确定', show: true }"
+    :confirmButton="{ text: '', show: false }"
+    :isFullScreen="false"
+    :style="{ maxWidth: '400px!important', width: '100%' }"
+  >
+    <div class="error-content">
+      <div class="error-icon">
+        <i class="bi bi-exclamation-triangle"></i>
+      </div>
+      <div class="error-message">{{ errorMessage }}</div>
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch } from 'vue';
+import { ConnectionService } from '@/service/database';
+import type { ConnectionEntity } from '@/typings/database';
+import Modal from '@/components/modal/index.vue';
+import Toast from '@/components/toast/toast.vue';
+
+// Props
+interface Props {
+  modelValue?: boolean;
+  connection?: ConnectionEntity | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  connection: null
+});
+
+// Emits
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  'saved': [connection: ConnectionEntity];
+}>();
+
+// 组件实例
+const connectionModal = ref();
+const toastRef = ref();
+const errorModal = ref();
+const errorMessage = ref('');
+
+// 响应式数据
+const editingConnection = ref<ConnectionEntity | null>(null);
+const connectionForm = ref<ConnectionEntity>({
+  id: '',
+  name: '',
+  type: '',
+  host: 'localhost',
+  port: 3306,
+  database: '',
+  username: '',
+  password: '',
+  options: {},
+  enabled: true,
+  createdAt: new Date(),
+  updatedAt: new Date()
+});
+const databaseTypes = ref<any[]>([]);
+
+// 计算属性
+const enabledConnections = computed(() => connections.value.filter(conn => conn.enabled));
+
+// 验证连接配置（前端验证）
+function validateConnection(connection: ConnectionEntity): { isValid: boolean; message: string } {
+  if (!connection.name?.trim()) {
+    return { isValid: false, message: '连接名称不能为空' };
+  }
+  
+  if (!connection.type?.trim()) {
+    return { isValid: false, message: '数据库类型不能为空' };
+  }
+  
+  if (connection.type !== 'sqlite') {
+    if (!connection.host?.trim()) {
+      return { isValid: false, message: '主机地址不能为空' };
+    }
+    
+    if (!connection.port || connection.port <= 0 || connection.port > 65535) {
+      return { isValid: false, message: '端口号必须在1-65535之间' };
+    }
+  }
+  
+  // 对于某些数据库类型，数据库名是必需的
+  if (['mysql', 'postgres', 'mssql'].includes(connection.type) && !connection.database?.trim()) {
+    return { isValid: false, message: `${connection.type.toUpperCase()} 数据库名不能为空` };
+  }
+  
+  // SQLite需要数据库文件路径
+  if (connection.type === 'sqlite' && !connection.database?.trim()) {
+    return { isValid: false, message: 'SQLite数据库文件路径不能为空' };
+  }
+  
+  return { isValid: true, message: '配置验证通过' };
+}
+
+// 显示模态框
+function show() {
+  connectionModal.value?.show();
+}
+
+// 隐藏模态框
+function hide() {
+  connectionModal.value?.hide();
+}
+
+// 显示添加模态框
+function showAddModal() {
+  editingConnection.value = null;
+  connectionForm.value = {
+    id: '',
+    name: '',
+    type: '',
+    host: 'localhost',
+    port: 3306,
+    database: '',
+    username: '',
+    password: '',
+    options: {},
+    enabled: true,
+    createdAt: new Date(),
+    updatedAt: new Date()
+  };
+  show();
+}
+
+// 显示编辑模态框
+function showEditModal(connection: ConnectionEntity) {
+  editingConnection.value = connection;
+  connectionForm.value = { ...connection };
+  show();
+}
+
+// 保存连接配置（不测试连接）
+async function saveConnection(closeModal = true) {
+  try {
+    debugger
+    // 先进行前端验证
+    const validation = validateConnection(connectionForm.value);
+    if (!validation.isValid) {
+      errorMessage.value = validation.message;
+      errorModal.value?.show();
+      return;
+    }
+    
+    const connectionService = new ConnectionService();
+    if (editingConnection.value) {
+      await connectionService.updateConnection(editingConnection.value.id!, connectionForm.value);
+    } else {
+      await connectionService.addConnection(connectionForm.value);
+    }
+    
+    if (closeModal) {
+      hide();
+    }
+    emit('saved', connectionForm.value);
+    showToast('', editingConnection.value ? '连接配置更新成功' : '连接配置添加成功');
+  } catch (error) {
+    console.error('保存连接配置失败:', error);
+    let errorMsg = '保存配置失败';
+    if (error.message) {
+      if (error.message.includes('连接') && error.message.includes('失败')) {
+        errorMsg = '配置保存失败，请检查服务器状态';
+      } else {
+        errorMsg = `保存配置失败: ${error.message}`;
+      }
+    }
+    errorMessage.value = errorMsg;
+    errorModal.value?.show();
+  }
+}
+
+// 保存并测试连接
+async function saveAndTestConnection() {
+  try {
+    // 先保存配置（不关闭模态框）
+    await saveConnection(false);
+    
+    // 然后测试连接
+    await testConnection(connectionForm.value);
+    
+    // 测试成功后关闭模态框
+    hide();
+    emit('saved', connectionForm.value);
+    showToast('', editingConnection.value ? '连接配置更新并测试成功' : '连接配置添加并测试成功');
+  } catch (error) {
+    console.error('保存并测试连接失败:', error);
+    // 如果是保存失败，错误已经在 saveConnection 中处理了
+    // 如果是测试失败，显示警告
+    if (error.message && error.message.includes('连接测试失败')) {
+      showToast('警告', '配置已保存，但连接测试失败', 'warning');
+      hide();
+      emit('saved', connectionForm.value);
+    }
+  }
+}
+
+// 测试连接
+async function testConnection(connection: ConnectionEntity) {
+  try {
+    const connectionService = new ConnectionService();
+    const response = await connectionService.testConnection(connection);
+    
+    if (response) {
+      showToast('', `"${connection.name}" 连接测试成功`, 'success');
+    } else {
+      showToast('', `"${connection.name}" 连接测试失败`, 'error');
+    }
+  } catch (error) {
+    console.error('测试连接失败:', error);
+    showToast('', `"${connection.name}" 连接测试失败: ${error.message || '未知错误'}`, 'error');
+  }
+}
+
+// 处理模态框关闭
+function handleModalClose() {
+  hide();
+}
+
+// 数据库类型改变
+function onTypeChange() {
+  const selectedType = databaseTypes.value.find(t => t.value === connectionForm.value.type);
+  if (selectedType?.defaultPort) {
+    connectionForm.value.port = selectedType.defaultPort;
+  }
+}
+
+// Toast 提示
+function showToast(title: string, message: string, type?: string) {
+  toastRef.value?.show(title, message, type);
+}
+
+// 加载数据库类型
+async function loadDatabaseTypes() {
+  try {
+    const connectionService = new ConnectionService();
+    const response = await connectionService.getDatabaseTypes();
+    databaseTypes.value = response?.data || [];
+  } catch (error) {
+    console.error('加载数据库类型失败:', error);
+  }
+}
+
+// 监听 props 变化
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    show();
+  } else {
+    hide();
+  }
+});
+
+watch(() => props.connection, (newConnection) => {
+  if (newConnection) {
+    showEditModal(newConnection);
+  }
+}, { immediate: true });
+
+// 暴露方法给父组件
+defineExpose({
+  showAddModal,
+  showEditModal,
+  show,
+  hide
+});
+
+// 生命周期
+loadDatabaseTypes();
+</script>
+
+<style scoped>
+/* 继承原有的样式，这里可以添加组件特定的样式 */
+.connection-form-modern {
+  padding: 0;
+}
+
+.form-section {
+  margin-bottom: 2rem;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.section-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  margin-right: 1rem;
+}
+
+.section-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0;
+  color: #333;
+}
+
+.section-content {
+  padding-left: 56px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.form-group-modern {
+  margin-bottom: 1rem;
+}
+
+.form-label-modern {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  color: #555;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.form-control-modern,
+.form-select-modern {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+}
+
+.form-control-modern:focus,
+.form-select-modern:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-check-modern {
+  display: flex;
+  align-items: flex-start;
+  padding: 0;
+}
+
+.form-check-input-modern {
+  margin-right: 0.75rem;
+  margin-top: 0.25rem;
+}
+
+.form-check-label-modern {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.check-text {
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 0.25rem;
+}
+
+.check-description {
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.required {
+  color: #dc3545;
+  margin-left: 0.25rem;
+}
+
+.error-content {
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+  gap: 1rem;
+}
+
+.error-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #dc3545 0%, #ff6b6b 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.error-message {
+  flex: 1;
+  color: #333;
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+</style>

package/src/components/dataGrid/index.vue

@@ -0,0 +1,105 @@
+<template>
+<div class="datagrid-container">
+  <div class="datagrid-inner">
+    <table class="table table-light table-striped table-hover">
+        <thead class="table-light">
+            <tr>
+                <th v-for="column in props.columns" :key="column.name" scope="col" class="datagrid-th" :style="column.headerStyle||''" > 
+                  <slot :name="column.name+'_header'" :column="column">
+                        <span>{{column.text||column.name||''}}</span>
+                    </slot>                    
+                </th>
+            </tr>
+        </thead>
+        <tbody class="table-group-divider">
+            <tr v-for="(row, index) in props.data" :key="index" @click="emits('rowClicked', row, index)" style="cursor: pointer;">
+                <td v-for="column in props.columns" :key="column.name">
+                    <slot :name="column.name||column" :row="row" :column="column">
+                        <component v-if="column.component" :is="column.component"></component>
+                        <span v-else>{{ renderDataItem(row, column) }}</span>
+                    </slot>                    
+                </td>
+            </tr>
+        </tbody>
+        <tfoot>
+            <slot name="footer" :columns="props.columns"></slot>   
+        </tfoot>
+    </table>
+    <Loading :isLoading="props.isLoading" :message="props.loadingMessage"></Loading>
+  </div>
+    <!-- 分页组件 -->
+    <Pagination v-if="props.showPagination" :currentPage="props.currentPage" :totalPages="props.totalPages" @pageChanged="pageChanged"></Pagination>
+</div>
+</template>
+  
+<script setup lang="ts">
+  import { ref, computed, defineComponent, type Component } from 'vue';
+  import Loading from '../loading/index.vue';
+  import Pagination from './pagination.vue';
+
+  type ColumnType = {
+    name: string;
+    text?: string;
+    component?: Component;
+    headerStyle?: string;
+    style?: string;
+    formatter?: (value: any) => string;
+  };
+  
+  const props = defineProps({
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    loadingMessage: {
+      type: String,
+      default: '加载中...'
+    },
+    // 总页数
+    totalPages: {
+        type: Number,
+        default: 1
+    },
+    currentPage: {
+        type: Number,
+        default: 1,
+    },
+    showPagination: {
+        type: Boolean,
+        default: true
+    },
+    data: {
+        type: Array<any>,
+        default: []
+    },
+    columns: {
+        type: Array<ColumnType>,
+        default: []
+    }
+  });
+
+  const emits = defineEmits(['pageChanged', 'rowClicked']);
+
+  function renderDataItem(row: any, column: any) {
+    if(typeof column === 'string') return row[column];
+    if(column.formatter) {
+        return column.formatter(row, column);
+    }
+    return row[column.name];
+  }
+
+  function pageChanged(page: number) {
+    emits('pageChanged', page);
+  }
+
+</script>
+  
+<style scoped>
+  .datagrid-inner {
+    overflow: auto;
+    margin-bottom: 10px;
+  }
+  .datagrid-th {
+    min-width: 80px;
+  }
+</style>