fix: 数据库、计划任务下拉框样式调整 (#2255)

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

@@ -27,8 +27,11 @@
                     <template #prefix>{{ $t('commons.table.type') }}</template>
                     <el-option-group :label="$t('database.local')">
                         <div v-for="(item, index) in dbOptionsLocal" :key="index">
-                            <el-option v-if="item.from === 'local'" :value="item.database">
-                                <span>{{ item.database }}</span>
+                            <el-option v-if="item.from === 'local'" :value="item.database" class="optionClass">
+                                <span v-if="item.database.length < 25">{{ item.database }}</span>
+                                <el-tooltip v-else :content="item.database" placement="top">
+                                    <span>{{ item.database.substring(0, 25) }}...</span>
+                                </el-tooltip>
                                 <el-tag class="tagClass">
                                     {{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }}
                                 </el-tag>
@@ -40,8 +43,11 @@
                     </el-option-group>
                     <el-option-group :label="$t('database.remote')">
                         <div v-for="(item, index) in dbOptionsRemote" :key="index">
-                            <el-option v-if="item.from === 'remote'" :value="item.database">
-                                <span>{{ item.database }}</span>
+                            <el-option v-if="item.from === 'remote'" :value="item.database" class="optionClass">
+                                <span v-if="item.database.length < 25">{{ item.database }}</span>
+                                <el-tooltip v-else :content="item.database" placement="top">
+                                    <span>{{ item.database.substring(0, 25) }}...</span>
+                                </el-tooltip>
                                 <el-tag class="tagClass">
                                     {{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }}
                                 </el-tag>
@@ -573,4 +579,7 @@ onMounted(() => {
     font-size: 12px;
     margin-top: 5px;
 }
+.optionClass {
+    min-width: 350px;
+}
 </style>

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

@@ -116,6 +116,25 @@
             </template>
         </LayoutContent>
 
+        <el-dialog
+            v-model="upgradeVisiable"
+            :title="$t('app.checkTitle')"
+            width="30%"
+            :close-on-click-modal="false"
+            :destroy-on-close="true"
+        >
+            <el-alert :closable="false" :title="$t('database.confNotFound')" type="info">
+                <el-link icon="Position" @click="goUpgrade()" type="primary">
+                    {{ $t('database.goUpgrade') }}
+                </el-link>
+            </el-alert>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="upgradeVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                </span>
+            </template>
+        </el-dialog>
+
         <ConfirmDialog ref="confirmPortRef" @confirm="onSubmitChangePort"></ConfirmDialog>
         <ConfirmDialog ref="confirmConfRef" @confirm="onSubmitChangeConf"></ConfirmDialog>
     </div>
@@ -136,7 +155,8 @@ import { loadDatabaseFile, loadMysqlBaseInfo, loadMysqlVariables, updateMysqlCon
 import { ChangePort, CheckAppInstalled, GetAppDefaultConfig } from '@/api/modules/app';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
-import { MsgError, MsgSuccess } from '@/utils/message';
+import { MsgSuccess } from '@/utils/message';
+import router from '@/routers';
 
 const loading = ref(false);
 
@@ -152,6 +172,7 @@ const baseInfo = reactive({
 });
 const panelFormRef = ref<FormInstance>();
 const mysqlConf = ref();
+const upgradeVisiable = ref();
 
 const useOld = ref(false);
 
@@ -312,11 +333,15 @@ const loadMysqlConf = async () => {
             mysqlConf.value = res.data;
         })
         .catch(() => {
-            MsgError(i18n.global.t('database.confNotFound'));
+            upgradeVisiable.value = true;
             loading.value = false;
         });
 };
 
+const goUpgrade = () => {
+    router.push({ name: 'AppUpgrade' });
+};
+
 const onLoadInfo = async () => {
     await CheckAppInstalled(props.type, props.database).then((res) => {
         mysqlName.value = res.data.name;