From daa40d237a7fa9f7125417b978743d7b5ba5b83e Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Thu, 19 Jan 2023 16:40:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E8=AF=81=E4=B9=A6?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/drawer-header/index.vue    |   2 +
 .../website/ssl/acme-account/create/index.vue |  21 ++-
 .../views/website/ssl/acme-account/index.vue  |  16 +-
 .../src/views/website/ssl/create/index.vue    | 152 ++++++++++--------
 .../src/views/website/ssl/detail/index.vue    |   7 +-
 .../website/ssl/dns-account/create/index.vue  |  82 +++++-----
 .../views/website/ssl/dns-account/index.vue   |  20 ++-
 frontend/src/views/website/ssl/index.vue      |  30 ++--
 .../views/website/website/create/index.vue    |   7 +-
 .../views/website/website/default/index.vue   |  20 +--
 10 files changed, 193 insertions(+), 164 deletions(-)

diff --git a/frontend/src/components/drawer-header/index.vue b/frontend/src/components/drawer-header/index.vue
index 0da1623ff..7907492cb 100644
--- a/frontend/src/components/drawer-header/index.vue
+++ b/frontend/src/components/drawer-header/index.vue
@@ -16,6 +16,8 @@
 import { useSlots } from 'vue';
 const slots = useSlots();
 
+defineOptions({ name: 'DrawerHeader' });
+
 const props = defineProps({
     header: String,
     back: Function,
diff --git a/frontend/src/views/website/ssl/acme-account/create/index.vue b/frontend/src/views/website/ssl/acme-account/create/index.vue
index 1f2126659..a3f885ba0 100644
--- a/frontend/src/views/website/ssl/acme-account/create/index.vue
+++ b/frontend/src/views/website/ssl/acme-account/create/index.vue
@@ -7,18 +7,15 @@
         width="30%"
         :before-close="handleClose"
     >
-        <el-form
-            ref="accountForm"
-            label-position="right"
-            :model="account"
-            label-width="100px"
-            :rules="rules"
-            v-loading="loading"
-        >
-            <el-form-item :label="$t('website.email')" prop="email">
-                <el-input v-model="account.email"></el-input>
-            </el-form-item>
-        </el-form>
+        <el-row>
+            <el-col :span="22" :offset="1">
+                <el-form ref="accountForm" label-position="top" :model="account" :rules="rules" v-loading="loading">
+                    <el-form-item :label="$t('website.email')" prop="email">
+                        <el-input v-model="account.email"></el-input>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
diff --git a/frontend/src/views/website/ssl/acme-account/index.vue b/frontend/src/views/website/ssl/acme-account/index.vue
index d8f5a5b81..1aed4fc02 100644
--- a/frontend/src/views/website/ssl/acme-account/index.vue
+++ b/frontend/src/views/website/ssl/acme-account/index.vue
@@ -1,10 +1,8 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('website.acmeAccountManage')"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-    >
+    <el-drawer v-model="open" :size="'50%'" :show-close="false">
+        <template #header>
+            <DrawerHeader :header="$t('website.acmeAccountManage')" :back="handleClose" />
+        </template>
         <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
             <template #toolbar>
                 <el-button type="primary" icon="Plus" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
@@ -20,7 +18,7 @@
             />
         </ComplexTable>
         <Create ref="createRef" @close="search()"></Create>
-    </el-dialog>
+    </el-drawer>
 </template>
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
@@ -70,6 +68,10 @@ const openCreate = () => {
     createRef.value.acceptParams();
 };
 
+const handleClose = () => {
+    open.value = false;
+};
+
 const deleteAccount = async (id: number) => {
     await useDeleteData(DeleteAcmeAccount, { id: id }, 'commons.msg.delete');
     search();
diff --git a/frontend/src/views/website/ssl/create/index.vue b/frontend/src/views/website/ssl/create/index.vue
index 0cb01aa00..5565bbf3d 100644
--- a/frontend/src/views/website/ssl/create/index.vue
+++ b/frontend/src/views/website/ssl/create/index.vue
@@ -1,75 +1,85 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('commons.button.create')"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        width="50%"
-        :before-close="handleClose"
-    >
-        <el-form
-            ref="sslForm"
-            label-position="right"
-            :model="ssl"
-            label-width="100px"
-            :rules="rules"
-            v-loading="loading"
-        >
-            <el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
-                <el-input v-model="ssl.primaryDomain"></el-input>
-            </el-form-item>
-            <el-form-item :label="$t('website.otherDomains')" prop="otherDomains">
-                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="ssl.otherDomains"></el-input>
-            </el-form-item>
-            <el-form-item :label="$t('website.acmeAccount')" prop="acmeAccountId">
-                <el-select v-model="ssl.acmeAccountId">
-                    <el-option
-                        v-for="(acme, index) in acmeAccounts"
-                        :key="index"
-                        :label="acme.email"
-                        :value="acme.id"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('website.provider')" prop="provider">
-                <el-radio-group v-model="ssl.provider" @change="changeProvider()">
-                    <el-radio label="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio>
-                    <el-radio label="dnsManual">{{ $t('website.dnsCommon') }}</el-radio>
-                    <el-radio label="http">HTTP</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item :label="$t('website.dnsAccount')" prop="dnsAccountId" v-if="ssl.provider === 'dnsAccount'">
-                <el-select v-model="ssl.dnsAccountId">
-                    <el-option
-                        v-for="(dns, index) in dnsAccounts"
-                        :key="index"
-                        :label="dns.name + ' ( ' + dns.type + ' )'"
-                        :value="dns.id"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item v-if="ssl.provider === 'dnsManual' && dnsResolve.length > 0">
-                <span>{{ $t('ssl.dnsResolveHelper') }}</span>
-                <div v-for="(re, index) in dnsResolve" :key="index">
-                    <el-descriptions direction="vertical" :column="4" border>
-                        <el-descriptions-item :label="$t('website.domain')">{{ re.domain }}</el-descriptions-item>
-                        <div v-if="re.err != ''">
-                            <el-descriptions-item :label="$t('ssl.err')">{{ re.err }}</el-descriptions-item>
+    <el-drawer v-model="open" size="50%" :show-close="false">
+        <template #header>
+            <DrawerHeader :header="$t('commons.button.create')" :back="handleClose" />
+        </template>
+        <el-row>
+            <el-col :span="22" :offset="1">
+                <el-form
+                    ref="sslForm"
+                    label-position="top"
+                    :model="ssl"
+                    label-width="100px"
+                    :rules="rules"
+                    v-loading="loading"
+                >
+                    <el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
+                        <el-input v-model="ssl.primaryDomain"></el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('website.otherDomains')" prop="otherDomains">
+                        <el-input
+                            type="textarea"
+                            :autosize="{ minRows: 2, maxRows: 6 }"
+                            v-model="ssl.otherDomains"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('website.acmeAccount')" prop="acmeAccountId">
+                        <el-select v-model="ssl.acmeAccountId">
+                            <el-option
+                                v-for="(acme, index) in acmeAccounts"
+                                :key="index"
+                                :label="acme.email"
+                                :value="acme.id"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="$t('website.provider')" prop="provider">
+                        <el-radio-group v-model="ssl.provider" @change="changeProvider()">
+                            <el-radio label="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio>
+                            <el-radio label="dnsManual">{{ $t('website.dnsCommon') }}</el-radio>
+                            <el-radio label="http">HTTP</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item
+                        :label="$t('website.dnsAccount')"
+                        prop="dnsAccountId"
+                        v-if="ssl.provider === 'dnsAccount'"
+                    >
+                        <el-select v-model="ssl.dnsAccountId">
+                            <el-option
+                                v-for="(dns, index) in dnsAccounts"
+                                :key="index"
+                                :label="dns.name + ' ( ' + dns.type + ' )'"
+                                :value="dns.id"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item v-if="ssl.provider === 'dnsManual' && dnsResolve.length > 0">
+                        <span>{{ $t('ssl.dnsResolveHelper') }}</span>
+                        <div v-for="(re, index) in dnsResolve" :key="index">
+                            <el-descriptions direction="vertical" :column="4" border>
+                                <el-descriptions-item :label="$t('website.domain')">
+                                    {{ re.domain }}
+                                </el-descriptions-item>
+                                <div v-if="re.err != ''">
+                                    <el-descriptions-item :label="$t('ssl.err')">{{ re.err }}</el-descriptions-item>
+                                </div>
+                                <div v-else>
+                                    <el-descriptions-item :label="$t('ssl.resolveDomain')">
+                                        {{ re.resolve }}
+                                    </el-descriptions-item>
+                                    <el-descriptions-item :label="$t('ssl.value')">{{ re.value }}</el-descriptions-item>
+                                    <el-descriptions-item :label="$t('ssl.type')">TXT</el-descriptions-item>
+                                </div>
+                            </el-descriptions>
                         </div>
-                        <div v-else>
-                            <el-descriptions-item :label="$t('ssl.resolveDomain')">
-                                {{ re.resolve }}
-                            </el-descriptions-item>
-                            <el-descriptions-item :label="$t('ssl.value')">{{ re.value }}</el-descriptions-item>
-                            <el-descriptions-item :label="$t('ssl.type')">TXT</el-descriptions-item>
-                        </div>
-                    </el-descriptions>
-                </div>
-            </el-form-item>
-            <el-form-item :label="$t('ssl.autoRenew')" prop="autoRenew" v-if="ssl.provider !== 'dnsManual'">
-                <el-checkbox v-model="ssl.autoRenew" />
-            </el-form-item>
-        </el-form>
+                    </el-form-item>
+                    <el-form-item :label="''" prop="autoRenew" v-if="ssl.provider !== 'dnsManual'">
+                        <el-checkbox v-model="ssl.autoRenew" :label="$t('ssl.autoRenew')" />
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -78,7 +88,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/ssl/detail/index.vue b/frontend/src/views/website/ssl/detail/index.vue
index 186bcaced..b200553ef 100644
--- a/frontend/src/views/website/ssl/detail/index.vue
+++ b/frontend/src/views/website/ssl/detail/index.vue
@@ -1,5 +1,8 @@
 <template>
-    <el-dialog v-model="open" :before-close="handleClose" :title="$t('ssl.detail')" width="30%">
+    <el-drawer v-model="open" size="50%" :show-close="false">
+        <template #header>
+            <DrawerHeader :header="$t('ssl.detail')" :back="handleClose" />
+        </template>
         <div>
             <el-radio-group v-model="curr">
                 <el-radio-button label="detail">{{ $t('ssl.msg') }}</el-radio-button>
@@ -56,7 +59,7 @@
                 </div>
             </div>
         </div>
-    </el-dialog>
+    </el-drawer>
 </template>
 <script lang="ts" setup>
 import { GetSSL } from '@/api/modules/website';
diff --git a/frontend/src/views/website/ssl/dns-account/create/index.vue b/frontend/src/views/website/ssl/dns-account/create/index.vue
index 66ac327bb..2c6a4c93a 100644
--- a/frontend/src/views/website/ssl/dns-account/create/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/create/index.vue
@@ -7,45 +7,49 @@
         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>
-            </el-form-item>
-            <el-form-item :label="$t('website.type')" prop="type">
-                <el-select v-model="account.type" :disabled="accountData.mode === 'edit'">
-                    <el-option
-                        v-for="(type, index) in types"
-                        :key="index"
-                        :label="type.label"
-                        :value="type.value"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <div v-if="account.type === 'AliYun'">
-                <el-form-item label="AccessKey" prop="authorization.accessKey">
-                    <el-input v-model="account.authorization['accessKey']"></el-input>
-                </el-form-item>
-                <el-form-item label="SecretKey" prop="authorization.secretKey">
-                    <el-input v-model="account.authorization['secretKey']"></el-input>
-                </el-form-item>
-            </div>
-            <div v-if="account.type === 'DnsPod'">
-                <el-form-item label="ID" prop="authorization.id">
-                    <el-input v-model="account.authorization['id']"></el-input>
-                </el-form-item>
-                <el-form-item label="Token" prop="authorization.token">
-                    <el-input v-model="account.authorization['token']"></el-input>
-                </el-form-item>
-            </div>
-            <div v-if="account.type === 'CloudFlare'">
-                <el-form-item label="EMAIL" prop="authorization.email">
-                    <el-input v-model="account.authorization['email']"></el-input>
-                </el-form-item>
-                <el-form-item label="API Key" prop="authorization.apiKey">
-                    <el-input v-model="account.authorization['apiKey']"></el-input>
-                </el-form-item>
-            </div>
-        </el-form>
+        <el-row>
+            <el-col :span="22" :offset="1">
+                <el-form ref="accountForm" label-position="top" :model="account" :rules="rules">
+                    <el-form-item :label="$t('commons.table.name')" prop="name">
+                        <el-input v-model="account.name"></el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('website.type')" prop="type">
+                        <el-select v-model="account.type" :disabled="accountData.mode === 'edit'">
+                            <el-option
+                                v-for="(type, index) in types"
+                                :key="index"
+                                :label="type.label"
+                                :value="type.value"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <div v-if="account.type === 'AliYun'">
+                        <el-form-item label="AccessKey" prop="authorization.accessKey">
+                            <el-input v-model="account.authorization['accessKey']"></el-input>
+                        </el-form-item>
+                        <el-form-item label="SecretKey" prop="authorization.secretKey">
+                            <el-input v-model="account.authorization['secretKey']"></el-input>
+                        </el-form-item>
+                    </div>
+                    <div v-if="account.type === 'DnsPod'">
+                        <el-form-item label="ID" prop="authorization.id">
+                            <el-input v-model="account.authorization['id']"></el-input>
+                        </el-form-item>
+                        <el-form-item label="Token" prop="authorization.token">
+                            <el-input v-model="account.authorization['token']"></el-input>
+                        </el-form-item>
+                    </div>
+                    <div v-if="account.type === 'CloudFlare'">
+                        <el-form-item label="EMAIL" prop="authorization.email">
+                            <el-input v-model="account.authorization['email']"></el-input>
+                        </el-form-item>
+                        <el-form-item label="API Key" prop="authorization.apiKey">
+                            <el-input v-model="account.authorization['apiKey']"></el-input>
+                        </el-form-item>
+                    </div>
+                </el-form>
+            </el-col>
+        </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
diff --git a/frontend/src/views/website/ssl/dns-account/index.vue b/frontend/src/views/website/ssl/dns-account/index.vue
index a2394df96..0da7e0030 100644
--- a/frontend/src/views/website/ssl/dns-account/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/index.vue
@@ -1,13 +1,13 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :title="$t('website.dnsAccountManage')"
-    >
+    <el-drawer v-model="open" :size="'50%'" :show-close="false">
+        <template #header>
+            <DrawerHeader :header="$t('website.dnsAccountManage')" :back="handleClose" />
+        </template>
         <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
             <template #toolbar>
-                <el-button type="primary" icon="Plus" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
+                <el-button type="primary" icon="Plus" @click="openCreate">
+                    {{ $t('commons.button.create') }}
+                </el-button>
             </template>
             <el-table-column :label="$t('commons.table.name')" fix show-overflow-tooltip prop="name"></el-table-column>
             <el-table-column :label="$t('commons.table.type')" prop="type">
@@ -30,7 +30,7 @@
             />
         </ComplexTable>
         <Create ref="createRef" @close="search()"></Create>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -66,6 +66,10 @@ const acceptParams = () => {
     open.value = true;
 };
 
+const handleClose = () => {
+    open.value = false;
+};
+
 const search = () => {
     const req = {
         page: paginationConfig.currentPage,
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index 1f0a045b2..746c1ed03 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -1,4 +1,5 @@
 <template>
+    <RouterButton :buttons="routerButton" />
     <LayoutContent :title="$t('website.ssl')">
         <template #prompt>
             <el-alert type="info" :closable="false">
@@ -7,20 +8,20 @@
                 </template>
             </el-alert>
         </template>
+        <template #toolbar>
+            <el-button type="primary" icon="Plus" @click="openSSL()">
+                {{ $t('commons.button.create') }}
+            </el-button>
+            <el-button type="primary" plain @click="openAcmeAccount()">
+                {{ $t('website.acmeAccountManage') }}
+            </el-button>
+            <el-button type="primary" plain @click="openDnsAccount()">
+                {{ $t('website.dnsAccountManage') }}
+            </el-button>
+        </template>
         <template #main>
             <br />
             <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
-                <template #toolbar>
-                    <el-button type="primary" icon="Plus" @click="openSSL()">
-                        {{ $t('commons.button.create') }}
-                    </el-button>
-                    <el-button type="primary" plain @click="openAcmeAccount()">
-                        {{ $t('website.acmeAccountManage') }}
-                    </el-button>
-                    <el-button type="primary" plain @click="openDnsAccount()">
-                        {{ $t('website.dnsAccountManage') }}
-                    </el-button>
-                </template>
                 <el-table-column
                     :label="$t('website.domain')"
                     fix
@@ -94,6 +95,13 @@ const detailRef = ref();
 let data = ref();
 let loading = ref(false);
 
+const routerButton = [
+    {
+        label: i18n.global.t('website.ssl'),
+        path: '/websites/ssl',
+    },
+];
+
 const buttons = [
     {
         label: i18n.global.t('ssl.detail'),
diff --git a/frontend/src/views/website/website/create/index.vue b/frontend/src/views/website/website/create/index.vue
index d986b7268..c5fafdc49 100644
--- a/frontend/src/views/website/website/create/index.vue
+++ b/frontend/src/views/website/website/create/index.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-drawer v-model="open" :size="'50%'" :show-close="false">
+    <el-drawer v-model="open" size="50%" :show-close="false">
         <template #header>
-            <Header :header="$t('website.create')" :back="handleClose">
+            <DrawerHeader :header="$t('website.create')" :back="handleClose">
                 <template #buttons>
                     <el-button
                         type="primary"
@@ -17,7 +17,7 @@
                         {{ $t('website.proxy') }}
                     </el-button>
                 </template>
-            </Header>
+            </DrawerHeader>
         </template>
         <el-row>
             <el-col :span="22" :offset="1">
@@ -178,7 +178,6 @@ import { ElForm, FormInstance, ElMessage } from 'element-plus';
 import { reactive, ref } from 'vue';
 import Params from '@/views/app-store/detail/params/index.vue';
 import Check from '../check/index.vue';
-import Header from '@/components/drawer-header/index.vue';
 
 const websiteForm = ref<FormInstance>();
 const website = ref({
diff --git a/frontend/src/views/website/website/default/index.vue b/frontend/src/views/website/website/default/index.vue
index 26203d6a2..c6cf94670 100644
--- a/frontend/src/views/website/website/default/index.vue
+++ b/frontend/src/views/website/website/default/index.vue
@@ -2,15 +2,15 @@
     <el-dialog
         v-model="open"
         :title="$t('website.defaulServer')"
-        width="25%"
+        width="35%"
         @close="handleClose"
         :close-on-click-modal="false"
     >
         <el-row>
-            <el-col :offset="5">
-                <div style="text-align: center">
+            <el-col :span="22" :offset="1">
+                <el-form label-position="top">
                     <el-form-item :label="$t('website.defaulServer')">
-                        <el-select v-model="defaultId">
+                        <el-select v-model="defaultId" style="width: 100%">
                             <el-option :value="0" :key="-1" :label="$t('website.noDefaulServer')"></el-option>
                             <el-option
                                 v-for="(website, key) in websites"
@@ -20,13 +20,13 @@
                             ></el-option>
                         </el-select>
                     </el-form-item>
-                </div>
+                </el-form>
+                <el-alert :closable="false">
+                    <template #default>
+                        <span style="white-space: pre-line">{{ $t('website.defaulServerHelper') }}</span>
+                    </template>
+                </el-alert>
             </el-col>
-            <el-alert :closable="false">
-                <template #default>
-                    <span style="white-space: pre-line">{{ $t('website.defaulServerHelper') }}</span>
-                </template>
-            </el-alert>
         </el-row>
 
         <template #footer>