fix: 解决数据库切换导致的错乱样式问题 (#2259)

backend/init/migration/migrations/init.go

@@ -576,13 +576,15 @@ var AddDatabases = &gormigrate.Migration{
 			_ = tx.Where("name = ?", mysqlInfo.Name).First(&mysqlDb).Error
 			if mysqlDb.ID == 0 {
 				if err := tx.Create(&model.Database{
-					Name:     mysqlDb.Name,
-					Type:     "mysql",
-					Version:  mysqlInfo.Version,
-					From:     "local",
-					Address:  mysqlInfo.ServiceName,
-					Username: "root",
-					Password: mysqlInfo.Password,
+					AppInstallID: mysqlInfo.ID,
+					Name:         mysqlInfo.Name,
+					Type:         "mysql",
+					Version:      mysqlInfo.Version,
+					From:         "local",
+					Address:      mysqlInfo.ServiceName,
+					Port:         uint(mysqlInfo.Port),
+					Username:     "root",
+					Password:     mysqlInfo.Password,
 				}).Error; err != nil {
 					return err
 				}

frontend/src/views/database/mysql/index.vue

@@ -164,7 +164,7 @@
             </template>
         </LayoutContent>
 
-        <div v-if="!currentDB">
+        <div v-if="!currentDB?.id">
             <LayoutContent :title="'MySQL ' + $t('menu.database')" :divider="true">
                 <template #main>
                     <div class="app-warn">