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

2025-01-18 22:22:59 +08:00 · 2023-09-11 18:28:19 +08:00 · 2023-09-11 18:28:19 +08:00 · a364dbffbf
commit a364dbffbf
parent 9aaf3bf435
14 changed files with 97 additions and 13 deletions
--- a/backend/app/dto/database.go
+++ b/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"`
 }
--- a/backend/app/service/database_mysql.go
+++ b/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
--- a/cmd/server/docs/docs.go
+++ b/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"
                }
            }
        },
--- a/cmd/server/docs/swagger.json
+++ b/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"
                }
            }
        },
--- a/cmd/server/docs/swagger.yaml
+++ b/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:
--- a/frontend/src/api/interface/database.ts
+++ b/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;
    }
--- a/frontend/src/lang/modules/en.ts
+++ b/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',
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@ -314,6 +314,7 @@ const message = {
        deleteHelper: '" 刪除此數據庫',
        create: '創建數據庫',
        noMysql: '數據庫服務 (MySQL 或 MariaDB)',
+        goUpgrade: '去應用商店升級',
        goInstall: '去應用商店安裝',
        source: '來源',
        permission: '權限',
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -314,6 +314,7 @@ const message = {
        deleteHelper: '" 删除此数据库',
        create: '创建数据库',
        noMysql: '数据库服务 (MySQL 或 MariaDB)',
+        goUpgrade: '去应用列表升级',
        goInstall: '去应用商店安装',
        source: '来源',
        permission: '权限',
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/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>
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/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>
--- a/frontend/src/views/database/mysql/index.vue
+++ b/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>
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/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;
--- a/frontend/src/views/setting/snapshot/snap_status/index.vue
+++ b/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);