fix: 统一系统弹窗样式

frontend/src/components/codemirror-dialog/codemirror.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="codeVisiable" :destroy-on-close="true" width="70%">
+    <el-dialog v-model="codeVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="70%">
         <template #header>
             <div class="card-header">
                 <span>{{ header }}</span>

frontend/src/components/confirm-dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="submitVisiable" :destroy-on-close="true" width="30%">
+    <el-dialog v-model="submitVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
         <template #header>
             <div class="card-header">
                 <span>{{ header }}</span>

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

@@ -2,10 +2,11 @@
     <el-dialog
         v-model="open"
         :title="$t('app.install')"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
         width="40%"
         :before-close="handleClose"
         @opened="opened"
-        :close-on-click-modal="false"
     >
         <el-form ref="paramForm" label-position="left" :model="form" label-width="150px" :rules="rules">
             <el-form-item :label="$t('app.name')" prop="NAME">

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

@@ -3,6 +3,7 @@
         v-model="open"
         :title="$t('app.backup') + ' - ' + installData.appInstallName"
         width="70%"
+        :destroy-on-close="true"
         :before-close="handleClose"
         :close-on-click-modal="false"
     >
@@ -48,7 +49,14 @@
                 fix
             />
         </ComplexTable>
-        <el-dialog v-model="openRestorePage" :title="$t('commons.msg.operate')" width="30%" :show-close="false">
+        <el-dialog
+            v-model="openRestorePage"
+            :destroy-on-close="true"
+            :close-on-click-modal="false"
+            :title="$t('commons.msg.operate')"
+            width="30%"
+            :show-close="false"
+        >
             <el-alert :title="$t('app.restoreWarn')" type="warning" :closable="false" show-icon />
             <template #footer>
                 <span class="dialog-footer">

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

@@ -78,7 +78,14 @@
                 fix
             />
         </ComplexTable>
-        <el-dialog v-model="open" :title="$t('commons.msg.operate')" :before-close="handleClose" width="30%">
+        <el-dialog
+            v-model="open"
+            :title="$t('commons.msg.operate')"
+            :destroy-on-close="true"
+            :close-on-click-modal="false"
+            :before-close="handleClose"
+            width="30%"
+        >
             <div style="text-align: center">
                 <p>{{ $t('app.versioneSelect') }}</p>
                 <el-select v-model="operateReq.detailId">

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

@@ -25,10 +25,10 @@
                     <table style="width: 100%" class="tab-table">
                         <tr v-if="form.exposedPorts.length !== 0">
                             <th scope="col" width="48%" align="left">
-                                <label>{{ $t('container.containerPort') }}</label>
+                                <label>{{ $t('container.serverPort') }}</label>
                             </th>
                             <th scope="col" width="48%" align="left">
-                                <label>{{ $t('container.serverPort') }}</label>
+                                <label>{{ $t('container.containerPort') }}</label>
                             </th>
                             <th align="left"></th>
                         </tr>
@@ -39,7 +39,7 @@
                                     :max="65535"
                                     style="width: 100%"
                                     controls-position="right"
-                                    v-model.number="row.containerPort"
+                                    v-model.number="row.hostPort"
                                 />
                             </td>
                             <td width="48%">
@@ -48,7 +48,7 @@
                                     :max="65535"
                                     style="width: 100%"
                                     controls-position="right"
-                                    v-model.number="row.hostPort"
+                                    v-model.number="row.containerPort"
                                 />
                             </td>
                             <td>
@@ -78,14 +78,18 @@
             </el-form-item>
             <el-form-item :label="$t('container.cpuQuota')" prop="nanoCPUs">
                 <el-input type="number" style="width: 40%" v-model.number="form.nanoCPUs">
-                    <template #append><div style="width: 60px">Core</div></template>
+                    <template #append>
+                        <el-select v-model="form.cpuUnit" disabled style="width: 65px">
+                            <el-option label="Core" value="Core" />
+                        </el-select>
+                    </template>
                 </el-input>
                 <span class="input-help">{{ $t('container.limitHelper') }}</span>
             </el-form-item>
             <el-form-item :label="$t('container.memoryLimit')" prop="memoryItem">
                 <el-input style="width: 40%" v-model.number="form.memoryItem">
                     <template #append>
-                        <el-select v-model="form.memoryUnit" placeholder="Select" style="width: 100px">
+                        <el-select v-model="form.memoryUnit" placeholder="Select" style="width: 65px">
                             <el-option label="KB" value="KB" />
                             <el-option label="MB" value="MB" />
                             <el-option label="GB" value="GB" />
@@ -98,19 +102,19 @@
                 <el-card style="width: 100%">
                     <table style="width: 100%" class="tab-table">
                         <tr v-if="form.volumes.length !== 0">
-                            <th scope="col" width="32%" align="left">
+                            <th scope="col" width="42%" align="left">
                                 <label>{{ $t('container.serverPath') }}</label>
                             </th>
-                            <th scope="col" width="32%" align="left">
+                            <th scope="col" width="12%" align="left">
                                 <label>{{ $t('container.mode') }}</label>
                             </th>
-                            <th scope="col" width="32%" align="left">
+                            <th scope="col" width="42%" align="left">
                                 <label>{{ $t('container.containerDir') }}</label>
                             </th>
                             <th align="left"></th>
                         </tr>
                         <tr v-for="(row, index) in form.volumes" :key="index">
-                            <td width="32%">
+                            <td width="42%">
                                 <el-select
                                     style="width: 100%"
                                     allow-create
@@ -126,13 +130,13 @@
                                     />
                                 </el-select>
                             </td>
-                            <td width="32%">
+                            <td width="12%">
                                 <el-select style="width: 100%" filterable v-model="row.mode">
                                     <el-option value="rw" :label="$t('container.modeRW')" />
                                     <el-option value="ro" :label="$t('container.modeR')" />
                                 </el-select>
                             </td>
-                            <td width="32%">
+                            <td width="42%">
                                 <el-input v-model="row.containerDir" />
                             </td>
                             <td>
@@ -204,6 +208,7 @@ const form = reactive({
     memory: 100,
     memoryItem: 100,
     memoryUnit: 'MB',
+    cpuUnit: 'Core',
     volumes: [] as Array<Container.Volume>,
     autoRemove: false,
     labels: [] as Array<string>,
@@ -237,8 +242,8 @@ const formRef = ref<FormInstance>();
 
 const handlePortsAdd = () => {
     let item = {
-        containerPort: 80,
+        containerPort: null,
-        hostPort: 8080,
+        hostPort: null,
     };
     form.exposedPorts.push(item);
 };

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

@@ -4,7 +4,10 @@
         <el-card style="margin-top: 20px">
             <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
                 <template #toolbar>
-                    <el-button-group>
+                    <el-button icon="Plus" type="primary" @click="onCreate()">
+                        {{ $t('commons.button.create') }}
+                    </el-button>
+                    <el-button-group style="margin-left: 10px">
                         <el-button :disabled="checkStatus('start')" @click="onOperate('start')">
                             {{ $t('container.start') }}
                         </el-button>
@@ -27,9 +30,6 @@
                             {{ $t('container.remove') }}
                         </el-button>
                     </el-button-group>
-                    <el-button icon="Plus" style="margin-left: 10px" @click="onCreate()">
-                        {{ $t('commons.button.create') }}
-                    </el-button>
                 </template>
                 <el-table-column type="selection" fix />
                 <el-table-column

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

@@ -59,7 +59,7 @@
                 </ComplexTable>
             </el-card>
         </div>
-        <el-dialog v-model="changeVisiable" :destroy-on-close="true" width="30%">
+        <el-dialog v-model="changeVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
             <template #header>
                 <div class="card-header">
                     <span>{{ $t('database.changePassword') }}</span>

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

@@ -1,5 +1,13 @@
 <template>
-    <el-dialog v-model="open" :before-close="handleClose" :title="$t('file.setRole')" width="30%" @open="onOpen">
+    <el-dialog
+        v-model="open"
+        :before-close="handleClose"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :title="$t('file.setRole')"
+        width="30%"
+        @open="onOpen"
+    >
         <FileRole v-loading="loading" :mode="mode" @get-mode="getMode"></FileRole>
         <template #footer>
             <span class="dialog-footer">

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

@@ -1,5 +1,13 @@
 <template>
-    <el-dialog v-model="open" :title="title" :before-close="handleClose" width="30%" @open="onOpen">
+    <el-dialog
+        v-model="open"
+        :title="title"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :before-close="handleClose"
+        width="30%"
+        @open="onOpen"
+    >
         <el-form
             ref="fileForm"
             label-position="left"

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

@@ -2,6 +2,8 @@
     <el-dialog
         v-model="open"
         :before-close="handleClose"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
         :title="$t('commons.button.create')"
         width="30%"
         @open="onOpen"

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

@@ -1,6 +1,14 @@
 <template>
     <div>
-        <el-dialog v-model="open" :title="$t('file.deCompress')" :before-close="handleClose" width="30%" @open="onOpen">
+        <el-dialog
+            v-model="open"
+            :title="$t('file.deCompress')"
+            :destroy-on-close="true"
+            :close-on-click-modal="false"
+            :before-close="handleClose"
+            width="30%"
+            @open="onOpen"
+        >
             <el-form
                 ref="fileForm"
                 label-position="left"

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

@@ -1,6 +1,14 @@
 <template>
     <div>
-        <el-dialog v-model="open" :title="$t('file.download')" :before-close="handleClose" width="30%" @open="onOpen">
+        <el-dialog
+            v-model="open"
+            :title="$t('file.download')"
+            :destroy-on-close="true"
+            :close-on-click-modal="false"
+            :before-close="handleClose"
+            width="30%"
+            @open="onOpen"
+        >
             <el-form
                 ref="fileForm"
                 label-position="left"

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

@@ -1,5 +1,13 @@
 <template>
-    <el-dialog v-model="open" :title="title" :before-close="handleClose" width="30%" @open="onOpen">
+    <el-dialog
+        v-model="open"
+        :title="title"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :before-close="handleClose"
+        width="30%"
+        @open="onOpen"
+    >
         <el-form
             ref="fileForm"
             label-position="left"

frontend/src/views/setting/tabs/backup.vue

@@ -27,9 +27,6 @@
                         <el-form-item v-if="item.type === 'LOCAL'" label="Directory">
                             {{ item.varsJson['dir'] }}
                         </el-form-item>
-                        <el-form-item v-if="hasBucket(item.type)" label="Access Key ID">
-                            {{ item.varsJson['accessKey'] }}
-                        </el-form-item>
                         <el-form-item v-if="item.type === 'S3'" label="Region">
                             {{ item.varsJson['region'] }}
                         </el-form-item>
@@ -56,7 +53,13 @@
             </el-col>
         </el-row>
 
-        <el-dialog @close="search" v-model="backupVisiable" :title="$t('setting.backupAccount')" width="30%">
+        <el-dialog
+            @close="search"
+            v-model="backupVisiable"
+            :destroy-on-close="true"
+            :title="$t('setting.backupAccount')"
+            width="30%"
+        >
             <el-form ref="formRef" label-position="left" :model="form" label-width="160px">
                 <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
                     <el-select style="width: 100%" v-model="form.type" :disabled="operation === 'edit'">
@@ -81,7 +84,7 @@
                     </el-input>
                 </el-form-item>
                 <el-form-item
-                    v-if="hasBucket(form.type)"
+                    v-if="hasBucket(form.type) && operation !== 'edit'"
                     label="Access Key ID"
                     prop="varsJson.accessKey"
                     :rules="Rules.requiredInput"

frontend/src/views/setting/tabs/panel.vue

@@ -33,7 +33,7 @@
                     >
                         <el-input type="password" clearable disabled v-model="form.settingInfo.password">
                             <template #append>
-                                <el-button icon="Setting" @click="passwordVisiable = true">
+                                <el-button icon="Setting" @click="onChangePassword">
                                     {{ $t('commons.button.set') }}
                                 </el-button>
                             </template>
@@ -128,7 +128,13 @@
             </el-row>
         </el-card>
     </el-form>
-    <el-dialog v-model="passwordVisiable" :title="$t('setting.changePassword')" width="30%">
+    <el-dialog
+        v-model="passwordVisiable"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :title="$t('setting.changePassword')"
+        width="30%"
+    >
         <el-form ref="passFormRef" label-width="80px" label-position="left" :model="passForm" :rules="passRules">
             <el-form-item :label="$t('setting.oldPassword')" prop="oldPassword">
                 <el-input type="password" show-password clearable v-model="passForm.oldPassword" />
@@ -225,6 +231,14 @@ function checkPassword(rule: any, value: any, callback: any) {
     callback();
 }
 
+const onChangePassword = async () => {
+    passForm.oldPassword = '';
+    passForm.newPassword = '';
+    passForm.newPasswordComplexity = '';
+    passForm.retryPassword = '';
+    passwordVisiable.value = true;
+};
+
 const submitChangePassword = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {

frontend/src/views/website/ssl/acme-account/create/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <el-dialog v-model="open" :title="$t('commons.button.create')" width="30%" :before-close="handleClose">
+    <el-dialog
+        v-model="open"
+        :title="$t('commons.button.create')"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        width="30%"
+        :before-close="handleClose"
+    >
         <el-form
             ref="accountForm"
             label-position="right"

frontend/src/views/website/ssl/acme-account/index.vue

@@ -1,5 +1,10 @@
 <template>
-    <el-dialog v-model="open" :title="$t('website.acmeAccountManage')">
+    <el-dialog
+        v-model="open"
+        :title="$t('website.acmeAccountManage')"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+    >
         <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
             <template #toolbar>
                 <el-button type="primary" plain @click="openCreate">{{ $t('commons.button.create') }}</el-button>

frontend/src/views/website/ssl/create/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <el-dialog v-model="open" :title="$t('commons.button.create')" width="60%" :before-close="handleClose">
+    <el-dialog
+        v-model="open"
+        :title="$t('commons.button.create')"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        width="60%"
+        :before-close="handleClose"
+    >
         <el-form
             ref="sslForm"
             label-position="right"

frontend/src/views/website/ssl/dns-account/create/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <el-dialog v-model="open" :title="$t('website.createDnsAccount')" width="40%" :before-close="handleClose">
+    <el-dialog
+        v-model="open"
+        :title="$t('website.createDnsAccount')"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        width="40%"
+        :before-close="handleClose"
+    >
         <el-form ref="accountForm" label-position="right" :model="account" label-width="100px" :rules="rules">
             <el-form-item :label="$t('commons.table.name')" prop="name">
                 <el-input v-model="account.name"></el-input>

frontend/src/views/website/ssl/dns-account/index.vue

@@ -1,5 +1,10 @@
 <template>
-    <el-dialog v-model="open" :title="$t('website.dnsAccountManage')">
+    <el-dialog
+        v-model="open"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :title="$t('website.dnsAccountManage')"
+    >
         <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
             <template #toolbar>
                 <el-button type="primary" plain @click="openCreate">{{ $t('commons.button.create') }}</el-button>

frontend/src/views/website/ssl/renew/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <el-dialog v-model="open" :title="$t('website.renewSSL')" width="30%" :before-close="handleClose">
+    <el-dialog
+        v-model="open"
+        :title="$t('website.renewSSL')"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        width="30%"
+        :before-close="handleClose"
+    >
         <div style="text-align: center">
             <span>是否确定续签?</span>
         </div>

frontend/src/views/website/website/config/basic/domain/create/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <el-dialog v-model="open" :title="$t('website.create')" width="40%" :before-close="handleClose">
+    <el-dialog
+        v-model="open"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :title="$t('website.create')"
+        width="40%"
+        :before-close="handleClose"
+    >
         <el-form ref="domainForm" label-position="right" :model="domain" label-width="130px" :rules="rules">
             <el-form-item :label="$t('website.domain')" prop="domain">
                 <el-input v-model="domain.domain"></el-input>

frontend/src/views/website/website/create/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <el-dialog v-model="open" :title="$t('website.create')" width="40%" :before-close="handleClose">
+    <el-dialog
+        v-model="open"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :title="$t('website.create')"
+        width="40%"
+        :before-close="handleClose"
+    >
         <el-form ref="websiteForm" label-position="right" :model="website" label-width="130px" :rules="rules">
             <el-form-item :label="$t('website.type')" prop="type">
                 <el-select v-model="website.type">

frontend/src/views/website/website/delete/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <el-dialog v-model="open" :title="$t('website.delete')" width="40%" :before-close="handleClose">
+    <el-dialog
+        v-model="open"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :title="$t('website.delete')"
+        width="40%"
+        :before-close="handleClose"
+    >
         <div style="text-align: center">
             <el-checkbox v-model="deleteReq.deleteApp" :label="$t('website.deleteApp')" />
             <el-checkbox v-model="deleteReq.deleteBackup" :label="$t('website.deleteBackup')" />

frontend/src/views/website/website/group/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <el-dialog v-model="open" :title="$t('website.groupSetting')" width="40%" :before-close="handleClose">
+    <el-dialog
+        v-model="open"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :title="$t('website.groupSetting')"
+        width="40%"
+        :before-close="handleClose"
+    >
         <ComplexTable :data="data" @search="search()">
             <template #toolbar>
                 <el-button type="primary" plain @click="openCreate">{{ $t('commons.button.create') }}</el-button>