From 8ebdd98f99f219d832e031d9a8e415f6c246a303 Mon Sep 17 00:00:00 2001 From: Marvin Zhang Date: Tue, 16 Sep 2025 16:09:33 +0800 Subject: [PATCH] feat: enhance ORM functionality with toggle support and UI updates --- .../components/core/database/DatabaseForm.vue | 10 +-- .../core/database/DatabaseOrmSettings.vue | 69 +++++++++++++------ .../core/database/DatabaseOrmToggle.vue | 4 +- .../src/i18n/lang/en/components/database.ts | 3 +- .../src/i18n/lang/zh/components/database.ts | 3 +- .../interfaces/i18n/components/database.d.ts | 1 + .../src/interfaces/models/database.d.ts | 6 +- .../detail/tabs/DatabaseDetailTabOverview.vue | 3 - 8 files changed, 64 insertions(+), 35 deletions(-) diff --git a/frontend/crawlab-ui/src/components/core/database/DatabaseForm.vue b/frontend/crawlab-ui/src/components/core/database/DatabaseForm.vue index 12a15ef5..e7ec24f6 100644 --- a/frontend/crawlab-ui/src/components/core/database/DatabaseForm.vue +++ b/frontend/crawlab-ui/src/components/core/database/DatabaseForm.vue @@ -6,7 +6,6 @@ import useDatabaseDetail from '@/views/database/detail/useDatabaseDetail'; import { translate } from '@/utils'; import { getDatabaseDefaultByDataSource } from '@/utils/database'; import { useDatabaseOrmService } from '@/services/database/databaseService'; -import ClDatabaseOrmToggle from './DatabaseOrmToggle.vue'; defineProps<{ readonly?: boolean; @@ -115,10 +114,13 @@ defineOptions({ name: 'ClDatabaseForm' }); - - + diff --git a/frontend/crawlab-ui/src/components/core/database/DatabaseOrmSettings.vue b/frontend/crawlab-ui/src/components/core/database/DatabaseOrmSettings.vue index 9f6a933c..4ef4a231 100644 --- a/frontend/crawlab-ui/src/components/core/database/DatabaseOrmSettings.vue +++ b/frontend/crawlab-ui/src/components/core/database/DatabaseOrmSettings.vue @@ -16,11 +16,11 @@ const store = getStore(); const { activeId } = useDatabaseDetail(); // ORM service -const { - getOrmCompatibility, - getOrmStatus, - setOrmStatus, - isOrmSupported +const { + getOrmCompatibility, + getOrmStatus, + setOrmStatus, + isOrmSupported } = useDatabaseOrmService(); // reactive state @@ -32,7 +32,7 @@ const database = computed(() => store.getters['database/form']); // methods const loadOrmInfo = async () => { if (!activeId.value) return; - + loading.value = true; try { const [compatibilityRes, statusRes] = await Promise.all([ @@ -41,6 +41,15 @@ const loadOrmInfo = async () => { ]); compatibility.value = compatibilityRes; ormStatus.value = statusRes; + + // Debug logging to understand the issue + console.log('Database ORM Compatibility Debug:', { + databaseId: activeId.value, + compatibility: compatibilityRes, + status: statusRes, + database: database.value, + dataSource: database.value?.data_source + }); } catch (error) { console.error('Failed to load ORM info:', error); } finally { @@ -50,24 +59,24 @@ const loadOrmInfo = async () => { const handleToggleOrm = async () => { if (!activeId.value || !ormStatus.value) return; - + loading.value = true; try { const newValue = !ormStatus.value.enabled; await setOrmStatus(activeId.value, newValue); - + // Update local state ormStatus.value.enabled = newValue; - + // Update form in store store.commit('database/setForm', { ...database.value, use_orm: newValue, }); - + // Show success message // You might want to add a success notification here - + } catch (error) { console.error('Failed to toggle ORM:', error); // You might want to add an error notification here @@ -93,8 +102,8 @@ defineOptions({ name: 'ClDatabaseOrmSettings' }); {{ t('components.database.form.ormMode') }} - -
+ +
{{ t('components.database.form.status') }}: @@ -106,12 +115,12 @@ defineOptions({ name: 'ClDatabaseOrmSettings' }); />
- +
- {{ ormStatus?.enabled - ? t('components.database.orm.switchToLegacy') - : t('components.database.orm.switchToOrm') + {{ ormStatus?.enabled + ? t('components.database.orm.switchToLegacy') + : t('components.database.orm.switchToOrm') }}
@@ -175,6 +184,10 @@ defineOptions({ name: 'ClDatabaseOrmSettings' });

{{ t('components.database.orm.notSupportedMessage') }}

+
+

Current database type: {{ database.data_source }}

+

Supported types: MySQL, PostgreSQL, SQL Server

+
@@ -214,12 +227,12 @@ defineOptions({ name: 'ClDatabaseOrmSettings' }); .label { font-weight: 500; - color: var(--cl-text-color-primary); + color: var(--el-text-color-primary); } .orm-benefits h4 { margin: 0 0 12px 0; - color: var(--cl-text-color-primary); + color: var(--el-text-color-primary); font-size: 14px; } @@ -237,7 +250,7 @@ defineOptions({ name: 'ClDatabaseOrmSettings' }); align-items: center; gap: 8px; font-size: 14px; - color: var(--cl-text-color-regular); + color: var(--el-text-color-regular); } .benefit-icon.success { @@ -248,4 +261,16 @@ defineOptions({ name: 'ClDatabaseOrmSettings' }); .orm-not-supported { margin-top: 16px; } - \ No newline at end of file + +.debug-info { + margin-top: 12px; + padding-top: 8px; + border-top: 1px solid var(--el-border-color-lighter); + font-size: 13px; + color: var(--el-text-color-secondary); +} + +.debug-info p { + margin: 4px 0; +} + diff --git a/frontend/crawlab-ui/src/components/core/database/DatabaseOrmToggle.vue b/frontend/crawlab-ui/src/components/core/database/DatabaseOrmToggle.vue index d5bcdca8..0a1051f9 100644 --- a/frontend/crawlab-ui/src/components/core/database/DatabaseOrmToggle.vue +++ b/frontend/crawlab-ui/src/components/core/database/DatabaseOrmToggle.vue @@ -10,6 +10,7 @@ interface Props { modelValue?: boolean; disabled?: boolean; showTooltip?: boolean; + showLabel?: boolean; } interface Emits { @@ -20,6 +21,7 @@ const props = withDefaults(defineProps(), { modelValue: false, disabled: false, showTooltip: true, + showLabel: true, }); const emit = defineEmits(); @@ -46,7 +48,7 @@ defineOptions({ name: 'ClDatabaseOrmToggle' });