From 99ab05c9a10ba408ea0e00204d9b72ba1424bd98 Mon Sep 17 00:00:00 2001
From: ssongliu <songlius11@163.com>
Date: Fri, 17 Feb 2023 15:18:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=87=E4=BB=BD=E8=B4=A6=E5=8F=B7=20c?=
 =?UTF-8?q?ard=20=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/en.ts               |   2 +-
 frontend/src/lang/modules/zh.ts               |   2 +-
 .../container/container/create/index.vue      |   2 +-
 frontend/src/views/cronjob/record/index.vue   |  27 +-
 .../views/setting/backup-account/index.vue    | 333 ++++++++----------
 5 files changed, 173 insertions(+), 193 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index b4cb2cfc5..69f5f41a9 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -405,7 +405,7 @@ export default {
 
         custom: 'Custom',
         emptyUser: 'When empty, you will log in as  default',
-        containerTerminal: 'Container terminal',
+        containerTerminal: 'Terminal',
 
         port: 'Port',
         exposePort: 'Expose port',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 8885002ce..9bb436a57 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -418,7 +418,7 @@ export default {
         newName: '新名称',
 
         custom: '自定义',
-        containerTerminal: '容器终端',
+        containerTerminal: '终端',
         emptyUser: '为空时，将使用容器默认的用户登录',
 
         port: '端口',
diff --git a/frontend/src/views/container/container/create/index.vue b/frontend/src/views/container/container/create/index.vue
index a25e59181..15d45b488 100644
--- a/frontend/src/views/container/container/create/index.vue
+++ b/frontend/src/views/container/container/create/index.vue
@@ -10,7 +10,7 @@
                         <el-input clearable v-model.trim="form.name" />
                     </el-form-item>
                     <el-form-item :label="$t('container.image')" prop="image">
-                        <el-select style="width: 100%" filterable v-model="form.image">
+                        <el-select style="width: 100%" allow-create filterable v-model="form.image">
                             <el-option
                                 v-for="(item, index) of images"
                                 :key="index"
diff --git a/frontend/src/views/cronjob/record/index.vue b/frontend/src/views/cronjob/record/index.vue
index cafd9a8b7..4f93266e2 100644
--- a/frontend/src/views/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/record/index.vue
@@ -77,7 +77,7 @@
         <LayoutContent :title="$t('cronjob.record')" :reload="true">
             <template #search v-if="hasRecords">
                 <el-row :gutter="20">
-                    <el-col :span="6">
+                    <el-col :span="8">
                         <el-date-picker
                             style="width: calc(100% - 20px)"
                             @change="search()"
@@ -89,7 +89,7 @@
                             :shortcuts="shortcuts"
                         ></el-date-picker>
                     </el-col>
-                    <el-col :span="18">
+                    <el-col :span="16">
                         <el-select @change="search()" v-model="searchInfo.status">
                             <template #prefix>{{ $t('commons.table.status') }}</template>
                             <el-option :label="$t('commons.table.all')" value="" />
@@ -101,7 +101,7 @@
             </template>
             <template #main>
                 <el-row :gutter="20" v-if="hasRecords">
-                    <el-col :span="6">
+                    <el-col :span="8">
                         <el-card>
                             <ul v-infinite-scroll="nextPage" class="infinite-list" style="overflow: auto">
                                 <li
@@ -123,7 +123,7 @@
                             </div>
                         </el-card>
                     </el-col>
-                    <el-col :span="18">
+                    <el-col :span="16">
                         <el-card style="height: 362px">
                             <el-form>
                                 <el-row v-if="hasScript()">
@@ -157,7 +157,21 @@
                                     </el-col>
                                     <el-col :span="8" v-if="dialogData.rowData!.type === 'directory'">
                                         <el-form-item :label="$t('cronjob.directory')">
-                                            {{ dialogData.rowData!.sourceDir }}
+                                            <span v-if="dialogData.rowData!.sourceDir.length <= 20">
+                                                {{ dialogData.rowData!.sourceDir }}
+                                            </span>
+                                            <div v-else>
+                                                <el-popover
+                                                    placement="top-start"
+                                                    trigger="hover"
+                                                    width="250"
+                                                    :content="dialogData.rowData!.sourceDir"
+                                                >
+                                                    <template #reference>
+                                                        {{ dialogData.rowData!.sourceDir.substring(0, 20) }}...
+                                                    </template>
+                                                </el-popover>
+                                            </div>
                                         </el-form-item>
                                     </el-col>
                                     <el-col :span="8" v-if="isBackup()">
@@ -450,7 +464,8 @@ const onDownload = async (recordID: number, backupID: number) => {
         a.download =
             dialogData.value.rowData!.website + '_' + dateFormatForName(currentRecord.value?.startTime) + '.tar.gz';
     } else {
-        a.download = dateFormatForName(currentRecord.value?.startTime) + '.sql.gz';
+        let name = dialogData.value.rowData!.sourceDir.replaceAll('/', '_');
+        a.download = name + '_' + dateFormatForName(currentRecord.value?.startTime) + '.tar.gz';
     }
     const event = new MouseEvent('click');
     a.dispatchEvent(event);
diff --git a/frontend/src/views/setting/backup-account/index.vue b/frontend/src/views/setting/backup-account/index.vue
index a42585bf2..9590b6024 100644
--- a/frontend/src/views/setting/backup-account/index.vue
+++ b/frontend/src/views/setting/backup-account/index.vue
@@ -5,25 +5,24 @@
                 <el-form label-position="left" label-width="130px" :v-key="reflash">
                     <el-row :gutter="20">
                         <el-col :span="24">
-                            <el-card>
-                                <template #header>
-                                    <svg-icon style="font-size: 7px" iconName="p-file-folder"></svg-icon>
-                                    <span style="font-size: 16px; font-weight: 500">
-                                        &nbsp;{{ $t('setting.LOCAL') }}
-                                    </span>
-                                    <div style="float: right">
-                                        <el-button round @click="onOpenDialog('edit', 'local', localData)">
-                                            {{ $t('commons.button.edit') }}
-                                        </el-button>
-                                    </div>
-                                </template>
+                            <div>
+                                <svg-icon style="font-size: 7px" iconName="p-file-folder"></svg-icon>
+                                <span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.LOCAL') }}</span>
+                                <div style="float: right">
+                                    <el-button round @click="onOpenDialog('edit', 'local', localData)">
+                                        {{ $t('commons.button.edit') }}
+                                    </el-button>
+                                </div>
+                            </div>
+                            <el-divider class="devider" />
+                            <div style="margin-left: 20px">
                                 <el-form-item :label="$t('setting.currentPath')">
                                     {{ localData.varsJson['dir'] }}
                                 </el-form-item>
                                 <el-form-item :label="$t('commons.table.createdAt')">
                                     {{ dateFormat(0, 0, localData.createdAt) }}
                                 </el-form-item>
-                            </el-card>
+                            </div>
                         </el-col>
                     </el-row>
                 </el-form>
@@ -31,203 +30,156 @@
                 <div style="margin-top: 20px">
                     <span style="font-size: 14px; font-weight: 500">{{ $t('setting.thirdParty') }}</span>
                 </div>
-                <el-row :gutter="20" style="margin-top: 5px">
+                <el-row :gutter="20" style="margin-top: 20px">
                     <el-col :span="12">
-                        <el-card style="height: 265px">
-                            <template #header>
-                                <svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon>
-                                <span style="font-size: 16px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span>
-                                <div style="float: right">
-                                    <el-button round :disabled="s3Data.id === 0" @click="onBatchDelete(s3Data)">
-                                        {{ $t('commons.button.delete') }}
-                                    </el-button>
-                                    <el-button
-                                        round
-                                        :disabled="s3Data.id === 0"
-                                        @click="onOpenDialog('edit', 'S3', s3Data)"
-                                    >
-                                        {{ $t('commons.button.edit') }}
-                                    </el-button>
-                                </div>
-                            </template>
-                            <div v-if="s3Data.id !== 0">
-                                <el-form-item label="Region">
-                                    {{ s3Data.varsJson['region'] }}
-                                </el-form-item>
-                                <el-form-item label="Endpoint">
-                                    {{ s3Data.varsJson['endpoint'] }}
-                                </el-form-item>
-                                <el-form-item label="Bucket">
-                                    {{ s3Data.bucket }}
-                                </el-form-item>
-                                <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFormatSimple(s3Data.createdAt) }}
-                                </el-form-item>
-                            </div>
-                            <el-alert
-                                v-else
-                                center
-                                style="height: 167px; background-color: var(--panel-alert-bg)"
-                                :closable="false"
-                            >
+                        <div>
+                            <svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon>
+                            <span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span>
+                            <div style="float: right">
                                 <el-button
-                                    size="large"
                                     round
-                                    plain
-                                    type="primary"
-                                    @click="onOpenDialog('create', 'S3')"
+                                    :disabled="s3Data.id === 0"
+                                    @click="onOpenDialog('edit', 'S3', s3Data)"
                                 >
-                                    {{ $t('setting.createBackupAccount', ['S3']) }}
+                                    {{ $t('commons.button.edit') }}
                                 </el-button>
-                            </el-alert>
-                        </el-card>
+                                <el-button round :disabled="s3Data.id === 0" @click="onBatchDelete(s3Data)">
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </div>
+                            <el-divider class="devider" />
+                        </div>
+                        <div v-if="s3Data.id !== 0" style="margin-left: 20px">
+                            <el-form-item label="Region">
+                                {{ s3Data.varsJson['region'] }}
+                            </el-form-item>
+                            <el-form-item label="Endpoint">
+                                {{ s3Data.varsJson['endpoint'] }}
+                            </el-form-item>
+                            <el-form-item label="Bucket">
+                                {{ s3Data.bucket }}
+                            </el-form-item>
+                            <el-form-item :label="$t('commons.table.createdAt')">
+                                {{ dateFormatSimple(s3Data.createdAt) }}
+                            </el-form-item>
+                        </div>
+                        <el-alert v-else center class="alert" style="height: 167px" :closable="false">
+                            <el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'S3')">
+                                {{ $t('setting.createBackupAccount', ['S3']) }}
+                            </el-button>
+                        </el-alert>
                     </el-col>
                     <el-col :span="12">
-                        <el-card style="height: 265px">
-                            <template #header>
-                                <svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
-                                <span style="font-size: 16px; font-weight: 500">&nbsp;{{ $t('setting.OSS') }}</span>
-                                <div style="float: right">
-                                    <el-button round :disabled="ossData.id === 0" @click="onBatchDelete(ossData)">
-                                        {{ $t('commons.button.delete') }}
-                                    </el-button>
-                                    <el-button
-                                        round
-                                        :disabled="ossData.id === 0"
-                                        @click="onOpenDialog('edit', 'OSS', ossData)"
-                                    >
-                                        {{ $t('commons.button.edit') }}
-                                    </el-button>
-                                </div>
-                            </template>
-                            <div v-if="ossData.id !== 0">
-                                <el-form-item label="Endpoint">
-                                    {{ ossData.varsJson['endpoint'] }}
-                                </el-form-item>
-                                <el-form-item label="Bucket">
-                                    {{ ossData.bucket }}
-                                </el-form-item>
-                                <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFormatSimple(ossData.createdAt) }}
-                                </el-form-item>
-                            </div>
-                            <el-alert
-                                v-else
-                                center
-                                style="height: 167px; background-color: var(--panel-alert-bg)"
-                                :closable="false"
-                            >
+                        <div>
+                            <svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
+                            <span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.OSS') }}</span>
+                            <div style="float: right">
                                 <el-button
-                                    size="large"
                                     round
-                                    plain
-                                    type="primary"
-                                    @click="onOpenDialog('create', 'OSS')"
+                                    :disabled="ossData.id === 0"
+                                    @click="onOpenDialog('edit', 'OSS', ossData)"
                                 >
-                                    {{ $t('setting.createBackupAccount', ['OSS']) }}
+                                    {{ $t('commons.button.edit') }}
                                 </el-button>
-                            </el-alert>
-                        </el-card>
+                                <el-button round :disabled="ossData.id === 0" @click="onBatchDelete(ossData)">
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </div>
+                        </div>
+
+                        <el-divider class="devider" />
+                        <div v-if="ossData.id !== 0" style="margin-left: 20px">
+                            <el-form-item label="Endpoint">
+                                {{ ossData.varsJson['endpoint'] }}
+                            </el-form-item>
+                            <el-form-item label="Bucket">
+                                {{ ossData.bucket }}
+                            </el-form-item>
+                            <el-form-item :label="$t('commons.table.createdAt')">
+                                {{ dateFormatSimple(ossData.createdAt) }}
+                            </el-form-item>
+                        </div>
+                        <el-alert v-else center class="alert" style="height: 167px" :closable="false">
+                            <el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'OSS')">
+                                {{ $t('setting.createBackupAccount', ['OSS']) }}
+                            </el-button>
+                        </el-alert>
                     </el-col>
                 </el-row>
                 <el-row :gutter="20" style="margin-top: 20px">
                     <el-col :span="12">
-                        <el-card style="height: 265px">
-                            <template #header>
-                                <svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
-                                <span style="font-size: 16px; font-weight: 500">&nbsp;MINIO</span>
-                                <div style="float: right">
-                                    <el-button :disabled="minioData.id === 0" round @click="onBatchDelete(minioData)">
-                                        {{ $t('commons.button.delete') }}
-                                    </el-button>
-                                    <el-button
-                                        round
-                                        :disabled="minioData.id === 0"
-                                        @click="onOpenDialog('edit', 'MINIO', minioData)"
-                                    >
-                                        {{ $t('commons.button.edit') }}
-                                    </el-button>
-                                </div>
-                            </template>
-                            <div v-if="minioData.id !== 0">
-                                <el-form-item label="Endpoint">
-                                    {{ minioData.varsJson['endpoint'] }}
-                                </el-form-item>
-                                <el-form-item label="Bucket">
-                                    {{ minioData.bucket }}
-                                </el-form-item>
-                                <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFormatSimple(minioData.createdAt) }}
-                                </el-form-item>
-                            </div>
-                            <el-alert
-                                v-else
-                                center
-                                style="height: 167px; background-color: var(--panel-alert-bg)"
-                                :closable="false"
-                            >
+                        <div>
+                            <svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
+                            <span style="font-size: 14px; font-weight: 500">&nbsp;MINIO</span>
+                            <div style="float: right">
                                 <el-button
-                                    size="large"
                                     round
-                                    plain
-                                    type="primary"
-                                    @click="onOpenDialog('create', 'MINIO')"
+                                    :disabled="minioData.id === 0"
+                                    @click="onOpenDialog('edit', 'MINIO', minioData)"
                                 >
-                                    {{ $t('setting.createBackupAccount', ['MINIO']) }}
+                                    {{ $t('commons.button.edit') }}
                                 </el-button>
-                            </el-alert>
-                        </el-card>
+                                <el-button :disabled="minioData.id === 0" round @click="onBatchDelete(minioData)">
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </div>
+                        </div>
+                        <el-divider class="devider" />
+                        <div v-if="minioData.id !== 0" style="margin-left: 20px">
+                            <el-form-item label="Endpoint">
+                                {{ minioData.varsJson['endpoint'] }}
+                            </el-form-item>
+                            <el-form-item label="Bucket">
+                                {{ minioData.bucket }}
+                            </el-form-item>
+                            <el-form-item :label="$t('commons.table.createdAt')">
+                                {{ dateFormatSimple(minioData.createdAt) }}
+                            </el-form-item>
+                        </div>
+                        <el-alert v-else center class="alert" style="height: 167px" :closable="false">
+                            <el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'MINIO')">
+                                {{ $t('setting.createBackupAccount', ['MINIO']) }}
+                            </el-button>
+                        </el-alert>
                     </el-col>
                     <el-col :span="12">
-                        <el-card style="height: 265px">
-                            <template #header>
-                                <svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon>
-                                <span style="font-size: 16px; font-weight: 500">&nbsp;SFTP</span>
-                                <div style="float: right">
-                                    <el-button round :disabled="sftpData.id === 0" @click="onBatchDelete(sftpData)">
-                                        {{ $t('commons.button.delete') }}
-                                    </el-button>
-                                    <el-button
-                                        round
-                                        plain
-                                        :disabled="sftpData.id === 0"
-                                        @click="onOpenDialog('edit', 'SFTP', sftpData)"
-                                    >
-                                        {{ $t('commons.button.edit') }}
-                                    </el-button>
-                                </div>
-                            </template>
-                            <div v-if="sftpData.id !== 0">
-                                <el-form-item :label="$t('setting.address')">
-                                    {{ sftpData.varsJson['address'] }}
-                                </el-form-item>
-                                <el-form-item :label="$t('setting.port')">
-                                    {{ sftpData.varsJson['port'] }}
-                                </el-form-item>
-                                <el-form-item :label="$t('setting.path')">
-                                    {{ sftpData.bucket }}
-                                </el-form-item>
-                                <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFormatSimple(sftpData.createdAt) }}
-                                </el-form-item>
-                            </div>
-                            <el-alert
-                                v-else
-                                center
-                                style="height: 167px; background-color: var(--panel-alert-bg)"
-                                :closable="false"
-                            >
+                        <div>
+                            <svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon>
+                            <span style="font-size: 14px; font-weight: 500">&nbsp;SFTP</span>
+                            <div style="float: right">
                                 <el-button
-                                    size="large"
                                     round
                                     plain
-                                    type="primary"
-                                    @click="onOpenDialog('create', 'SFTP')"
+                                    :disabled="sftpData.id === 0"
+                                    @click="onOpenDialog('edit', 'SFTP', sftpData)"
                                 >
-                                    {{ $t('setting.createBackupAccount', ['SFTP']) }}
+                                    {{ $t('commons.button.edit') }}
                                 </el-button>
-                            </el-alert>
-                        </el-card>
+                                <el-button round :disabled="sftpData.id === 0" @click="onBatchDelete(sftpData)">
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </div>
+                        </div>
+                        <el-divider class="devider" />
+                        <div v-if="sftpData.id !== 0" style="margin-left: 20px">
+                            <el-form-item :label="$t('setting.address')">
+                                {{ sftpData.varsJson['address'] }}
+                            </el-form-item>
+                            <el-form-item :label="$t('setting.port')">
+                                {{ sftpData.varsJson['port'] }}
+                            </el-form-item>
+                            <el-form-item :label="$t('setting.path')">
+                                {{ sftpData.bucket }}
+                            </el-form-item>
+                            <el-form-item :label="$t('commons.table.createdAt')">
+                                {{ dateFormatSimple(sftpData.createdAt) }}
+                            </el-form-item>
+                        </div>
+                        <el-alert v-else center class="alert" style="height: 167px" :closable="false">
+                            <el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'SFTP')">
+                                {{ $t('setting.createBackupAccount', ['SFTP']) }}
+                            </el-button>
+                        </el-alert>
                     </el-col>
                 </el-row>
             </template>
@@ -367,3 +319,16 @@ onMounted(() => {
     search();
 });
 </script>
+
+<style scoped lang="scss">
+.devider {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 12px 0;
+    border-top: 1px var(--el-border-color) var(--el-border-style);
+}
+.alert {
+    background-color: rgba(0, 94, 235, 0.03);
+}
+</style>