feat: 样式优化 (#3928)

frontend/src/components/app-status/index.vue

@@ -76,15 +76,15 @@
             <LayoutContent :title="getTitle(key)" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flx-center">
                             <span>{{ $t('app.checkInstalledWarn', [data.app]) }}</span>
-                            <span @click="goRouter(key)">
+                            <span @click="goRouter(key)" class="flx-align-center">
                                 <el-icon class="ml-2"><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
-                            <div>
+                        </div>
-                                <img src="@/assets/images/no_app.svg" />
+                        <div>
-                            </div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>

frontend/src/components/status/index.vue

@@ -1,9 +1,11 @@
 <template>
     <el-tag :type="getType(status)" round effect="light">
-        {{ $t('commons.status.' + status) }}
+        <span class="flx-align-center">
-        <el-icon v-if="loadingIcon(status)" class="is-loading">
+            {{ $t('commons.status.' + status) }}
-            <Loading />
+            <el-icon v-if="loadingIcon(status)" class="is-loading">
-        </el-icon>
+                <Loading />
+            </el-icon>
+        </span>
     </el-tag>
 </template>
 

frontend/src/lang/modules/en.ts

@@ -821,7 +821,8 @@ const message = {
         default_download_path: 'Default Download Link',
         saveLocal: 'Retain local backups (the same as the number of cloud storage copies)',
         url: 'URL Address',
-        targetHelper: 'Backup accounts are maintained in panel settings.',
+        target: 'Target',
+        targetHelper: 'Third-party backup accounts are maintained in panel settings.',
         retainCopies: 'Retain copies',
         retainCopiesHelper: 'Number of copies to retain for execution records and logs',
         retainCopiesHelper1: 'Number of copies to retain for backup files',
@@ -1068,7 +1069,6 @@ const message = {
         hardLink: 'Hard link',
         linkPath: 'Link Path',
         selectFile: 'Select file',
-        downloadSuccess: 'Download succeeded',
         downloadUrl: 'Download URL',
         downloadStart: 'Download start!',
         moveSuccess: 'Move success',
@@ -1083,6 +1083,7 @@ const message = {
         infoDetail: 'File Properties',
         list: 'File List',
         sub: 'Subdirectory',
+        downloadSuccess: 'Download Success',
         theme: 'Theme',
         language: 'Language',
         eol: 'End Of Line',
@@ -1401,6 +1402,7 @@ const message = {
         backupData: 'Backup local backup directory for 1Panel',
         compress: 'Create snapshot file',
         upload: 'Upload snapshot file',
+        thirdPartySupport: 'Only third-party accounts are supported',
         recoverDetail: 'Recover detail',
         createSnapshot: 'Create snapshot',
         importSnapshot: 'Sync snapshot',

frontend/src/lang/modules/tw.ts

@@ -781,7 +781,8 @@ const message = {
         default_download_path: '默認下載地址',
         saveLocal: '同時保留本地備份（和雲存儲保留份數一致）',
         url: 'URL 地址',
-        targetHelper: '備份賬號可在面板設置中維護',
+        target: '備份到',
+        targetHelper: '第三方備份賬號在面板設置中維護',
         retainCopies: '保留份數',
         retainCopiesHelper: '執行記錄及日誌保留份数',
         retainCopiesHelper1: '備份文件保留份数',
@@ -1242,6 +1243,7 @@ const message = {
         backupData: '備份 1Panel 本地備份目錄',
         compress: '製作快照文件',
         upload: '上傳快照文件',
+        thirdPartySupport: '僅支持第三方賬號',
         recoverDetail: '恢復詳情',
         createSnapshot: '創建快照',
         importSnapshot: '同步快照',

frontend/src/lang/modules/zh.ts

@@ -782,7 +782,8 @@ const message = {
         default_download_path: '默认下载地址',
         saveLocal: '同时保留本地备份（和云存储保留份数一致）',
         url: 'URL 地址',
-        targetHelper: '备份账号可在面板设置中维护',
+        target: '备份到',
+        targetHelper: '第三方备份账号在面板设置中维护',
         retainCopies: '保留份数',
         retainCopiesHelper: '执行记录及日志保留份数',
         retainCopiesHelper1: '备份文件保留份数',
@@ -1243,6 +1244,7 @@ const message = {
         backupData: '备份 1Panel 本地备份目录',
         compress: '制作快照文件',
         upload: '上传快照文件',
+        thirdPartySupport: '仅支持第三方账号',
         recoverDetail: '恢复详情',
         createSnapshot: '创建快照',
         importSnapshot: '同步快照',

frontend/src/styles/common.scss

@@ -410,3 +410,7 @@ html {
 .p-ml-5 {
     margin-left: 5px !important;
 }
+
+.p-mb-5 {
+	margin-bottom: 5px !important;
+}

frontend/src/views/app-store/detail/params/index.vue

@@ -42,7 +42,7 @@
                     {{ $t('app.toInstall') }}
                 </el-link>
             </span>
-            <el-select v-model="form[p.envKey]" v-if="p.type == 'select'" :multiple="p.multiple">
+            <el-select v-model="form[p.envKey]" v-if="p.type == 'select'">
                 <el-option
                     v-for="service in p.values"
                     :key="service.label"

frontend/src/views/app-store/installed/detail/index.vue

@@ -30,11 +30,7 @@
                                 v-model.number="paramModel.params[p.key]"
                                 :disabled="!p.edit"
                             ></el-input>
-                            <el-select
+                            <el-select v-model="paramModel.params[p.key]" v-else-if="p.type == 'select'">
-                                v-model="paramModel.params[p.key]"
-                                v-else-if="p.type == 'select'"
-                                :multiple="p.multiple"
-                            >
                                 <el-option
                                     v-for="value in p.values"
                                     :key="value.label"
@@ -205,7 +201,6 @@ const get = async () => {
                     type: d.type,
                     values: d.values,
                     showValue: d.showValue,
-                    multiple: d.multiple,
                 });
                 rules.params[d.key] = [Rules.requiredInput];
                 if (d.rule) {

frontend/src/views/app-store/installed/index.vue

@@ -79,11 +79,14 @@
 
         <template #main>
             <el-alert type="info" :closable="false" v-if="mode === 'installed'">
-                <template #default>
+                <template #title>
-                    {{ $t('app.installHelper') }}
+                    <span class="flx-align-center">
-                    <el-link class="ml-5" icon="Position" @click="quickJump()" type="primary">
+                        {{ $t('app.installHelper') }}
-                        {{ $t('firewall.quickJump') }}
+                        <el-link class="ml-5" icon="Position" @click="quickJump()" type="primary">
-                    </el-link>
+                            {{ $t('firewall.quickJump') }}
+                        </el-link>
+                        　
+                    </span>
                 </template>
             </el-alert>
             <el-alert type="info" :title="$t('app.upgradeHelper')" :closable="false" v-if="mode === 'upgrade'" />

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

@@ -12,8 +12,8 @@
         <LayoutContent v-if="!isOnDetail" :title="$t('container.compose')" :class="{ mask: dockerStatus != 'Running' }">
             <template #prompt>
                 <el-alert type="info" :closable="false">
-                    <template #default>
+                    <template #title>
-                        <span>
+                        <span class="flx-align-center">
                             <span>{{ $t('container.composeHelper', [baseDir]) }}</span>
                             <el-button type="primary" link @click="toFolder">
                                 <el-icon>

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

@@ -66,7 +66,7 @@
                                     </template>
                                 </el-input>
                                 <span class="input-help">{{ $t('container.mirrorsHelper') }}</span>
-                                <span class="input-help">
+                                <span class="input-help flx-align-center" style="display: flex">
                                     {{ $t('container.mirrorsHelper2') }}
                                     <el-link
                                         style="font-size: 12px; margin-left: 5px"

frontend/src/views/cronjob/index.vue

@@ -113,7 +113,7 @@
                             {{ row.lastRecordTime }}
                         </template>
                     </el-table-column>
-                    <el-table-column :min-width="80" :label="$t('setting.backupAccount')" prop="defaultDownload">
+                    <el-table-column :min-width="80" :label="$t('cronjob.target')" prop="defaultDownload">
                         <template #default="{ row }">
                             <div v-for="(item, index) of row.backupAccounts?.split(',')" :key="index">
                                 <div v-if="row.accountExpand || (!row.accountExpand && index < 3)">

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

@@ -248,7 +248,7 @@
                     </el-form-item>
 
                     <div v-if="isBackup()">
-                        <el-form-item :label="$t('setting.backupAccount')" prop="backupAccountList">
+                        <el-form-item :label="$t('cronjob.target')" prop="backupAccountList">
                             <el-select
                                 multiple
                                 class="selectClass"
@@ -366,7 +366,6 @@ const acceptParams = (params: DialogProps): void => {
     if (dialogData.value.title === 'create') {
         changeType();
         dialogData.value.rowData.dbType = 'mysql';
-        dialogData.value.rowData.defaultDownload = 'LOCAL';
     }
     if (dialogData.value.rowData.backupAccounts) {
         dialogData.value.rowData.backupAccountList = dialogData.value.rowData.backupAccounts.split(',');

frontend/src/views/home/index.vue

@@ -26,8 +26,8 @@
             type="warning"
             @close="hideEntrance"
         >
-            <template #default>
+            <template #title>
-                <span>
+                <span class="flx-align-center">
                     <span>{{ $t('home.entranceHelper') }}</span>
                     <el-link
                         style="font-size: 12px; margin-left: 5px"

frontend/src/views/host/file-management/index.vue

@@ -43,8 +43,8 @@
         <LayoutContent :title="$t('file.file')" v-loading="loading">
             <template #prompt>
                 <el-alert type="info" :closable="false">
-                    <template #default>
+                    <template #title>
-                        <span><span v-html="$t('file.fileHeper')"></span></span>
+                        <span v-html="$t('file.fileHeper')"></span>
                     </template>
                 </el-alert>
             </template>

frontend/src/views/host/firewall/port/index.vue

@@ -21,7 +21,7 @@
                     <template #prompt>
                         <el-alert type="info" :closable="false">
                             <template #default>
-                                <span>
+                                <span class="flx-align-center">
                                     <span>{{ $t('firewall.dockerHelper', [fireName]) }}</span>
                                     <el-link
                                         style="font-size: 12px; margin-left: 5px"

frontend/src/views/setting/about/index.vue

@@ -71,7 +71,6 @@ onMounted(() => {
 
     .svg-icon {
         font-size: 7px;
-        margin-bottom: 3px;
     }
     span {
         line-height: 20px;

frontend/src/views/setting/backup-account/index.vue

@@ -5,9 +5,11 @@
                 <el-form label-width="130px" :v-key="refresh">
                     <el-row :gutter="20">
                         <el-col :span="24">
-                            <div>
+                            <div class="flx-justify-between">
-                                <svg-icon class="card-logo" iconName="p-file-folder"></svg-icon>
+                                <span class="flx-align-center">
-                                <span class="card-title">&nbsp;{{ $t('setting.LOCAL') }}</span>
+                                    <svg-icon class="card-logo" iconName="p-file-folder"></svg-icon>
+                                    <span class="card-title">&nbsp;{{ $t('setting.LOCAL') }}</span>
+                                </span>
                                 <div style="float: right">
                                     <el-button round @click="onOpenDialog('edit', 'LOCAL', localData)">
                                         {{ $t('commons.button.edit') }}
@@ -32,17 +34,19 @@
                 </div>
 
                 <el-alert type="info" :closable="false" class="common-div">
-                    <template #default>
+                    <template #title>
-                        <div style="margin-bottom: 3px"><span v-html="$t('setting.backupAlert')"></span></div>
+                        <span v-html="$t('setting.backupAlert')"></span>
                     </template>
                 </el-alert>
 
                 <el-row :gutter="20" class="common-div">
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <div>
+                        <div class="flx-justify-between">
-                            <svg-icon class="card-logo" iconName="p-aws"></svg-icon>
+                            <span class="flx-align-center">
-                            <span class="card-title">&nbsp;{{ $t('setting.S3') }}</span>
+                                <svg-icon class="card-logo" iconName="p-aws"></svg-icon>
-                            <div style="float: right">
+                                <span class="card-title">&nbsp;{{ $t('setting.S3') }}</span>
+                            </span>
+                            <div>
                                 <el-button
                                     round
                                     :disabled="s3Data.id === 0"
@@ -54,8 +58,8 @@
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
                             </div>
-                            <el-divider class="divider" />
                         </div>
+                        <el-divider class="divider" />
                         <div v-if="s3Data.id !== 0" style="margin-left: 20px">
                             <el-form-item label="Region">
                                 {{ s3Data.varsJson['region'] }}
@@ -95,10 +99,12 @@
                         </el-alert>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <div>
+                        <div class="flx-justify-between">
-                            <svg-icon class="card-logo" iconName="p-oss"></svg-icon>
+                            <span class="flx-align-center">
-                            <span class="card-title">&nbsp;{{ $t('setting.OSS') }}</span>
+                                <svg-icon class="card-logo" iconName="p-oss"></svg-icon>
-                            <div style="float: right">
+                                <span class="card-title">&nbsp;{{ $t('setting.OSS') }}</span>
+                            </span>
+                            <div>
                                 <el-button
                                     round
                                     :disabled="ossData.id === 0"
@@ -151,10 +157,12 @@
                 </el-row>
                 <el-row :gutter="20" class="common-div">
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <div>
+                        <div class="flx-justify-between">
-                            <svg-icon class="card-logo" iconName="p-tengxunyun1"></svg-icon>
+                            <span class="flx-align-center">
-                            <span class="card-title">&nbsp;{{ $t('setting.COS') }}</span>
+                                <svg-icon class="card-logo" iconName="p-tengxunyun1"></svg-icon>
-                            <div style="float: right">
+                                <span class="card-title">&nbsp;{{ $t('setting.COS') }}</span>
+                            </span>
+                            <div>
                                 <el-button
                                     round
                                     :disabled="cosData.id === 0"
@@ -166,8 +174,8 @@
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
                             </div>
-                            <el-divider class="divider" />
                         </div>
+                        <el-divider class="divider" />
                         <div v-if="cosData.id !== 0" style="margin-left: 20px">
                             <el-form-item label="Region">
                                 {{ cosData.varsJson['region'] }}
@@ -204,10 +212,12 @@
                         </el-alert>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <div>
+                        <div class="flx-justify-between">
-                            <svg-icon class="card-logo" iconName="p-onedrive"></svg-icon>
+                            <span class="flx-align-center">
-                            <span class="card-title">&nbsp;{{ $t('setting.OneDrive') }}</span>
+                                <svg-icon class="card-logo" iconName="p-onedrive"></svg-icon>
-                            <div style="float: right">
+                                <span class="card-title">&nbsp;{{ $t('setting.OneDrive') }}</span>
+                            </span>
+                            <div>
                                 <el-button
                                     round
                                     plain
@@ -266,10 +276,12 @@
                 </el-row>
                 <el-row :gutter="20" style="margin-top: 20px">
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <div>
+                        <div class="flx-justify-between">
-                            <svg-icon class="card-logo" iconName="p-qiniuyun"></svg-icon>
+                            <span class="flx-align-center">
-                            <span class="card-title">&nbsp;{{ $t('setting.KODO') }}</span>
+                                <svg-icon class="card-logo" iconName="p-qiniuyun"></svg-icon>
-                            <div style="float: right">
+                                <span class="card-title">&nbsp;{{ $t('setting.KODO') }}</span>
+                            </span>
+                            <div>
                                 <el-button
                                     round
                                     :disabled="kodoData.id === 0"
@@ -306,10 +318,12 @@
                         </el-alert>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <div>
+                        <div class="flx-justify-between">
-                            <svg-icon class="card-logo" iconName="p-minio"></svg-icon>
+                            <span class="flx-align-center">
-                            <span class="card-title">&nbsp;MINIO</span>
+                                <svg-icon class="card-logo" iconName="p-minio"></svg-icon>
-                            <div style="float: right">
+                                <span class="card-title">&nbsp;MINIO</span>
+                            </span>
+                            <div>
                                 <el-button
                                     round
                                     :disabled="minioData.id === 0"
@@ -347,10 +361,12 @@
                 </el-row>
                 <el-row :gutter="20" style="margin-top: 20px">
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <div>
+                        <div class="flx-justify-between">
-                            <svg-icon class="card-logo" iconName="p-SFTP"></svg-icon>
+                            <span class="flx-align-center">
-                            <span class="card-title">&nbsp;SFTP</span>
+                                <svg-icon class="card-logo" iconName="p-SFTP"></svg-icon>
-                            <div style="float: right">
+                                <span class="card-title">&nbsp;SFTP</span>
+                            </span>
+                            <div>
                                 <el-button
                                     round
                                     plain
@@ -386,10 +402,12 @@
                         </el-alert>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <div>
+                        <div class="flx-justify-between">
-                            <svg-icon class="card-logo" iconName="p-webdav"></svg-icon>
+                            <span class="flx-align-center">
-                            <span class="card-title">&nbsp;WebDAV</span>
+                                <svg-icon class="card-logo" iconName="p-webdav"></svg-icon>
-                            <div style="float: right">
+                                <span class="card-title">&nbsp;WebDAV</span>
+                            </span>
+                            <div>
                                 <el-button
                                     round
                                     plain

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

@@ -133,7 +133,10 @@
             >
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
-                        <el-form-item :label="$t('setting.backupAccount')" prop="fromAccounts">
+                        <el-form-item
+                            :label="$t('cronjob.target') + ' ( ' + $t('setting.thirdPartySupport') + ' )'"
+                            prop="fromAccounts"
+                        >
                             <el-select multiple @change="changeAccount" v-model="snapInfo.fromAccounts" clearable>
                                 <el-option
                                     v-for="item in backupOptions"

frontend/src/views/website/runtime/node/index.vue

@@ -4,8 +4,8 @@
         <LayoutContent :title="'Node.js'" v-loading="loading">
             <template #prompt>
                 <el-alert type="info" :closable="false">
-                    <template #default>
+                    <template #title>
-                        <span><span v-html="$t('runtime.statusHelper')"></span></span>
+                        <span v-html="$t('runtime.statusHelper')"></span>
                     </template>
                 </el-alert>
             </template>

frontend/src/views/website/runtime/php/index.vue

@@ -4,7 +4,7 @@
         <LayoutContent :title="'PHP'" v-loading="loading">
             <template #prompt>
                 <el-alert type="info" :closable="false">
-                    <template #default>
+                    <template #title>
                         <span>{{ $t('runtime.systemRestartHelper') }}</span>
                     </template>
                 </el-alert>