feat: enhance ORM functionality with toggle support and UI updates

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' });
     <!--./Row-->
 
     <!--Row: ORM Toggle-->
-    <cl-form-item :span="4" prop="use_orm">
-      <cl-database-orm-toggle
+    <cl-form-item 
+      :span="4" 
+      :label="t('components.database.form.useOrm')"
+      prop="use_orm"
+    >
+      <cl-switch
         v-model="form.use_orm"
-        :data-source="form.data_source"
         :disabled="isDisabled"
       />
     </cl-form-item>

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' });
           <span>{{ t('components.database.form.ormMode') }}</span>
         </div>
       </template>
-      
-      <div v-if="compatibility?.shouldShowToggle" class="orm-settings-content">
+
+      <div v-if="compatibility?.should_show_toggle" class="orm-settings-content">
         <div class="orm-status-section">
           <div class="status-row">
             <span class="label">{{ t('components.database.form.status') }}:</span>
@@ -106,12 +115,12 @@ defineOptions({ name: 'ClDatabaseOrmSettings' });
             />
             <cl-tag
               v-else
-              type="warning"  
+              type="warning"
               :label="t('components.database.orm.disabled')"
               :icon="['fa', 'wrench']"
             />
           </div>
-          
+
           <div class="action-row">
             <el-button
               :type="ormStatus?.enabled ? 'warning' : 'success'"
@@ -119,9 +128,9 @@ defineOptions({ name: 'ClDatabaseOrmSettings' });
               @click="handleToggleOrm"
               :loading="loading"
             >
-              {{ ormStatus?.enabled 
-                  ? t('components.database.orm.switchToLegacy') 
-                  : t('components.database.orm.switchToOrm') 
+              {{ ormStatus?.enabled
+                  ? t('components.database.orm.switchToLegacy')
+                  : t('components.database.orm.switchToOrm')
               }}
             </el-button>
           </div>
@@ -175,6 +184,10 @@ defineOptions({ name: 'ClDatabaseOrmSettings' });
           <p>
             {{ t('components.database.orm.notSupportedMessage') }}
           </p>
+          <div v-if="database?.data_source" class="debug-info">
+            <p><strong>Current database type:</strong> {{ database.data_source }}</p>
+            <p><strong>Supported types:</strong> MySQL, PostgreSQL, SQL Server</p>
+          </div>
         </el-alert>
       </div>
     </el-card>
@@ -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;
 }
-</style>
+
+.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;
+}
+</style>

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<Props>(), {
   modelValue: false,
   disabled: false,
   showTooltip: true,
+  showLabel: true,
 });
 
 const emit = defineEmits<Emits>();
@@ -46,7 +48,7 @@ defineOptions({ name: 'ClDatabaseOrmToggle' });
 <template>
   <div v-if="shouldShow" class="database-orm-toggle">
     <div class="toggle-container">
-      <div class="label-container">
+      <div v-if="showLabel" class="label-container">
         <span class="form-label">{{ t('components.database.form.ormMode') }}</span>
         <el-tooltip
           v-if="showTooltip"

frontend/crawlab-ui/src/i18n/lang/en/components/database.ts

@@ -17,6 +17,7 @@ const database: LComponentsDatabase = {
     address: 'Address',
     changePassword: 'Change Password',
     database: 'Database Name',
+    useOrm: 'Use ORM',
     ormMode: 'Database Engine',
     ormModeTooltip: 'Use modern ORM for better type safety and performance',
     mongo: {
@@ -173,7 +174,7 @@ const database: LComponentsDatabase = {
     migrationTitle: 'Safe Migration',
     migrationMessage: 'You can switch between ORM and Legacy modes anytime without data loss. ORM provides better performance and safety.',
     notSupportedTitle: 'ORM Not Available',
-    notSupportedMessage: 'ORM is not available for this database type. Supported types: MySQL, PostgreSQL, SQL Server.',
+    notSupportedMessage: 'The ORM (Object-Relational Mapping) system is only available for relational databases. This database type uses the traditional database service instead.',
   },
 };
 

frontend/crawlab-ui/src/i18n/lang/zh/components/database.ts

@@ -17,6 +17,7 @@ const database: LComponentsDatabase = {
     password: '密码',
     changePassword: '更改密码',
     database: '数据库名称',
+    useOrm: '使用 ORM',
     ormMode: '数据库引擎',
     ormModeTooltip: '使用现代 ORM 获得更好的类型安全和性能',
     mongo: {
@@ -171,7 +172,7 @@ const database: LComponentsDatabase = {
     migrationTitle: '安全迁移',
     migrationMessage: '您可以随时在 ORM 和传统模式之间切换，不会丢失数据。ORM 提供更好的性能和安全性。',
     notSupportedTitle: 'ORM 不可用',
-    notSupportedMessage: '此数据库类型不支持 ORM。支持的类型：MySQL、PostgreSQL、SQL Server。',
+    notSupportedMessage: 'ORM（对象关系映射）系统仅适用于关系型数据库。此数据库类型使用传统数据库服务。',
   },
 };
 

frontend/crawlab-ui/src/interfaces/i18n/components/database.d.ts

@@ -18,6 +18,7 @@ export declare global {
       username: string;
       password: string;
       changePassword: string;
+      useOrm: string;
       ormMode: string;
       ormModeTooltip: string;
       mongo: {

frontend/crawlab-ui/src/interfaces/models/database.d.ts

@@ -155,9 +155,9 @@ export declare global {
 
   interface DatabaseOrmCompatibility {
     supported: boolean;
-    dataSource: string;
-    shouldShowToggle: boolean;
-    supportedSources: string[];
+    data_source: string;
+    should_show_toggle: boolean;
+    supported_sources: string[];
   }
 
   interface DatabaseOrmStatus {

frontend/crawlab-ui/src/views/database/detail/tabs/DatabaseDetailTabOverview.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { ClDatabaseOrmSettings } from '@/components';
-
 defineOptions({ name: 'ClDatabaseDetailTabOverview' });
 </script>
 
 <template>
   <div class="database-detail-tab-overview">
     <cl-database-form readonly />
-    <cl-database-orm-settings />
   </div>
 </template>