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

backend/app/dto/database.go

@@ -27,6 +27,7 @@ type MysqlDBInfo struct {
 type MysqlOption struct {
 	ID       uint   `json:"id"`
 	From     string `json:"from"`
+	Type     string `json:"type"`
 	Database string `json:"database"`
 	Name     string `json:"name"`
 }

backend/app/service/database_mysql.go

@@ -75,6 +75,14 @@ func (u *MysqlService) SearchWithPage(search dto.MysqlDBSearch) (int64, interfac
 
 func (u *MysqlService) ListDBOption() ([]dto.MysqlOption, error) {
 	mysqls, err := mysqlRepo.List()
+	if err != nil {
+		return nil, err
+	}
+
+	databases, err := databaseRepo.GetList(databaseRepo.WithTypeList("mysql,mariadb"))
+	if err != nil {
+		return nil, err
+	}
 	var dbs []dto.MysqlOption
 	for _, mysql := range mysqls {
 		var item dto.MysqlOption
@@ -82,6 +90,11 @@ func (u *MysqlService) ListDBOption() ([]dto.MysqlOption, error) {
 			return nil, errors.WithMessage(constant.ErrStructTransform, err.Error())
 		}
 		item.Database = mysql.MysqlName
+		for _, database := range databases {
+			if database.Name == item.Database {
+				item.Type = database.Type
+			}
+		}
 		dbs = append(dbs, item)
 	}
 	return dbs, err

cmd/server/docs/docs.go

@@ -12215,6 +12215,12 @@ const docTemplate = `{
                 "cpuShares": {
                     "type": "integer"
                 },
+                "entrypoint": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                },
                 "env": {
                     "type": "array",
                     "items": {
@@ -13714,6 +13720,9 @@ const docTemplate = `{
                 },
                 "name": {
                     "type": "string"
+                },
+                "type": {
+                    "type": "string"
                 }
             }
         },

cmd/server/docs/swagger.json

@@ -12208,6 +12208,12 @@
                 "cpuShares": {
                     "type": "integer"
                 },
+                "entrypoint": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                },
                 "env": {
                     "type": "array",
                     "items": {
@@ -13707,6 +13713,9 @@
                 },
                 "name": {
                     "type": "string"
+                },
+                "type": {
+                    "type": "string"
                 }
             }
         },

cmd/server/docs/swagger.yaml

@@ -347,6 +347,10 @@ definitions:
         type: string
       cpuShares:
         type: integer
+      entrypoint:
+        items:
+          type: string
+        type: array
       env:
         items:
           type: string
@@ -1362,6 +1366,8 @@ definitions:
         type: integer
       name:
         type: string
+      type:
+        type: string
     type: object
   dto.MysqlStatus:
     properties:

frontend/src/api/interface/database.ts

@@ -134,6 +134,7 @@ export namespace Database {
     export interface MysqlOption {
         id: number;
         from: string;
+        type: string;
         database: string;
         name: string;
     }

frontend/src/lang/modules/en.ts

@@ -318,7 +318,8 @@ const message = {
         deleteHelper: '" to delete this database',
         create: 'Create database',
         noMysql: 'Database service (MySQL or MariaDB)',
-        goInstall: 'Go to install',
+        goUpgrade: 'Go for upgrade',
+        goInstall: 'Go for install',
         source: 'Source',
         permission: 'Permission',
         permissionForIP: 'IP',

frontend/src/lang/modules/tw.ts

@@ -314,6 +314,7 @@ const message = {
         deleteHelper: '" 刪除此數據庫',
         create: '創建數據庫',
         noMysql: '數據庫服務 (MySQL 或 MariaDB)',
+        goUpgrade: '去應用商店升級',
         goInstall: '去應用商店安裝',
         source: '來源',
         permission: '權限',

frontend/src/lang/modules/zh.ts

@@ -314,6 +314,7 @@ const message = {
         deleteHelper: '" 删除此数据库',
         create: '创建数据库',
         noMysql: '数据库服务 (MySQL 或 MariaDB)',
+        goUpgrade: '去应用列表升级',
         goInstall: '去应用商店安装',
         source: '来源',
         permission: '权限',

frontend/src/views/container/container/operate/index.vue

@@ -138,7 +138,7 @@
                                                 <el-tooltip :hide-after="20" :content="item.option" placement="top">
                                                     <el-option
                                                         :value="item.option"
-                                                        :label="item.option.substring(0, 12)"
+                                                        :label="item.option.substring(0, 30)"
                                                     />
                                                 </el-tooltip>
                                             </div>

frontend/src/views/cronjob/operate/index.vue

@@ -125,7 +125,7 @@
                             <el-select class="selectClass" clearable v-model="dialogData.rowData!.appID">
                                 <el-option :label="$t('commons.table.all')" value="all" />
                                 <div v-for="item in appOptions" :key="item.id">
-                                    <el-option :value="item.id + ''">
+                                    <el-option :value="item.id + ''" :label="item.name">
                                         <span>{{ item.name }}</span>
                                         <el-tag class="tagClass">
                                             {{ item.key }}
@@ -140,13 +140,18 @@
                         <el-form-item :label="$t('cronjob.database')" prop="dbName">
                             <el-select class="selectClass" clearable v-model="dialogData.rowData!.dbName">
                                 <el-option :label="$t('commons.table.all')" value="all" />
-                                <el-option v-for="item in mysqlInfo.dbs" :key="item.id" :value="item.id + ''">
+                                <el-option
+                                    v-for="item in mysqlInfo.dbs"
+                                    :key="item.id"
+                                    :value="item.id + ''"
+                                    :label="item.name"
+                                >
                                     <span>{{ item.name }}</span>
                                     <el-tag class="tagClass">
                                         {{ item.from === 'local' ? $t('database.local') : $t('database.remote') }}
                                     </el-tag>
                                     <el-tag class="tagClass">
-                                        {{ item.database }}
+                                        {{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }}
                                     </el-tag>
                                 </el-option>
                             </el-select>

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">
+                            <el-option v-if="item.from === 'local'" :value="item.database" class="optionClass">
-                                <span>{{ item.database }}</span>
+                                <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">
+                            <el-option v-if="item.from === 'remote'" :value="item.database" class="optionClass">
-                                <span>{{ item.database }}</span>
+                                <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;

frontend/src/views/setting/snapshot/snap_status/index.vue

@@ -62,7 +62,9 @@
             </el-alert>
             <el-alert :type="loadStatus(status.compress)" :closable="false">
                 <template #title>
-                    <el-button :icon="loadIcon(status.compress)" link>{{ $t('setting.compress') }}</el-button>
+                    <el-button :icon="loadIcon(status.compress)" link>
+                        {{ $t('setting.compress') }} {{ status.size }}
+                    </el-button>
                     <div v-if="showErrorMsg(status.compress)" class="top-margin">
                         <span class="err-message">{{ status.compress }}</span>
                     </div>
@@ -71,7 +73,7 @@
             <el-alert :type="loadStatus(status.upload)" :closable="false">
                 <template #title>
                     <el-button :icon="loadIcon(status.upload)" link>
-                        {{ $t('setting.upload') }} {{ status.size }}
+                        {{ $t('setting.upload') }}
                     </el-button>
                     <div v-if="showErrorMsg(status.upload)" class="top-margin">
                         <span class="err-message">{{ status.upload }}</span>
@@ -187,6 +189,7 @@ const onWatch = () => {
             status.backupData = res.data.backupData;
 
             status.compress = res.data.compress;
+            status.size = res.data.size;
             status.upload = res.data.upload;
         }
     }, 1000 * 3);