From 6c3311ba3c0c1226f4b8bbd1046147986faa10f7 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Tue, 8 Oct 2024 14:54:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=9F=E4=B8=80=E6=8A=BD=E5=B1=89?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(#6650)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 agent/app/service/backup_website.go           |   2 +-
 agent/app/service/container.go                |   3 +-
 agent/app/service/website_ca.go               |  17 +-
 agent/app/service/website_utils.go            |   3 +
 frontend/src/components/compose-log/index.vue | 115 +++++------
 frontend/src/views/app-store/detail/index.vue |  13 +-
 .../src/views/app-store/installed/index.vue   |   6 -
 .../views/container/container/log/index.vue   |  97 ++++-----
 .../src/views/website/ssl/ca/detail/index.vue |   7 +-
 .../config/basic/proxy/create/index.vue       | 195 ++++++++----------
 10 files changed, 203 insertions(+), 255 deletions(-)

diff --git a/agent/app/service/backup_website.go b/agent/app/service/backup_website.go
index e5ce7f527..fb574eba6 100644
--- a/agent/app/service/backup_website.go
+++ b/agent/app/service/backup_website.go
@@ -181,7 +181,7 @@ func handleWebsiteRecover(website *model.Website, recoverFile string, isRollback
 		}
 		taskName := i18n.GetMsgByKey("TaskRecover") + i18n.GetMsgByKey("websiteDir")
 		t.Log(taskName)
-		if err = handleUnTar(fmt.Sprintf("%s/%s.web.tar.gz", tmpPath, website.Alias), GetWebSiteRootDir(), ""); err != nil {
+		if err = handleUnTar(fmt.Sprintf("%s/%s.web.tar.gz", tmpPath, website.Alias), GetSitePath(*website, SiteDir), ""); err != nil {
 			t.LogFailedWithErr(taskName, err)
 			return err
 		}
diff --git a/agent/app/service/container.go b/agent/app/service/container.go
index 1d79b7ad4..6483a9e1e 100644
--- a/agent/app/service/container.go
+++ b/agent/app/service/container.go
@@ -769,8 +769,7 @@ func (u *ContainerService) ContainerLogs(wsConn *websocket.Conn, containerType,
 	commandName := "docker"
 	commandArg := []string{"logs", container}
 	if containerType == "compose" {
-		commandName = "docker compose"
-		commandArg = []string{"-f", container, "logs"}
+		commandArg = []string{"compose", "-f", container, "logs"}
 	}
 	if tail != "0" {
 		commandArg = append(commandArg, "--tail")
diff --git a/agent/app/service/website_ca.go b/agent/app/service/website_ca.go
index 90bcf1251..6f1c09c53 100644
--- a/agent/app/service/website_ca.go
+++ b/agent/app/service/website_ca.go
@@ -10,6 +10,7 @@ import (
 	"crypto/x509/pkix"
 	"encoding/pem"
 	"fmt"
+	"github.com/1Panel-dev/1Panel/agent/utils/common"
 	"log"
 	"math/big"
 	"net"
@@ -26,7 +27,6 @@ import (
 	"github.com/1Panel-dev/1Panel/agent/global"
 	"github.com/1Panel-dev/1Panel/agent/i18n"
 	"github.com/1Panel-dev/1Panel/agent/utils/cmd"
-	"github.com/1Panel-dev/1Panel/agent/utils/common"
 	"github.com/1Panel-dev/1Panel/agent/utils/files"
 	"github.com/1Panel-dev/1Panel/agent/utils/ssl"
 	"github.com/go-acme/lego/v4/certcrypto"
@@ -218,15 +218,14 @@ func (w WebsiteCAService) ObtainSSL(req request.WebsiteCAObtain) (*model.Website
 		if req.Domains != "" {
 			domainArray := strings.Split(req.Domains, "\n")
 			for _, domain := range domainArray {
-				if !common.IsValidDomain(domain) {
-					err = buserr.WithName("ErrDomainFormat", domain)
-					return nil, err
-				} else {
-					if ipAddress := net.ParseIP(domain); ipAddress == nil {
-						domains = append(domains, domain)
-					} else {
-						ips = append(ips, ipAddress)
+				if ipAddress := net.ParseIP(domain); ipAddress == nil {
+					if !common.IsValidDomain(domain) {
+						err = buserr.WithName("ErrDomainFormat", domain)
+						return nil, err
 					}
+					domains = append(domains, domain)
+				} else {
+					ips = append(ips, ipAddress)
 				}
 			}
 			if len(domains) > 0 {
diff --git a/agent/app/service/website_utils.go b/agent/app/service/website_utils.go
index 5710c11e2..6718c90d7 100644
--- a/agent/app/service/website_utils.go
+++ b/agent/app/service/website_utils.go
@@ -1206,6 +1206,7 @@ const (
 	SiteRedirectDir = "SiteRedirectDir"
 	SiteCacheDir    = "SiteCacheDir"
 	SiteConfDir     = "SiteConfDir"
+	SitesRootDir    = "SitesRootDir"
 )
 
 func GetSitePath(website model.Website, confType string) string {
@@ -1234,6 +1235,8 @@ func GetSitePath(website model.Website, confType string) string {
 		return path.Join(GteSiteDir(website.Alias), "redirect")
 	case SiteConfDir:
 		return path.Join(GetWebSiteRootDir(), "conf.d")
+	case SitesRootDir:
+		return path.Join(GetWebSiteRootDir(), "sites")
 	}
 	return ""
 }
diff --git a/frontend/src/components/compose-log/index.vue b/frontend/src/components/compose-log/index.vue
index 5d4c82b3d..05a5d78d9 100644
--- a/frontend/src/components/compose-log/index.vue
+++ b/frontend/src/components/compose-log/index.vue
@@ -1,54 +1,51 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="open"
-        :size="globalStore.isFullScreen ? '100%' : '50%'"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :before-close="handleClose"
+        :header="$t('commons.button.log')"
+        :back="handleClose"
+        :size="globalStore.isFullScreen ? 'full' : 'large'"
+        :resource="resource"
     >
-        <template #header>
-            <DrawerHeader :header="$t('commons.button.log')" :resource="resource" :back="handleClose">
-                <template #extra v-if="!mobile">
-                    <el-tooltip :content="loadTooltip()" placement="top">
-                        <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
-                    </el-tooltip>
-                </template>
-            </DrawerHeader>
+        <template #extra v-if="!mobile">
+            <el-tooltip :content="loadTooltip()" placement="top">
+                <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
+            </el-tooltip>
         </template>
-        <div class="flex flex-wrap">
-            <el-select @change="searchLogs" v-model="logSearch.mode" class="selectWidth">
-                <template #prefix>{{ $t('container.fetch') }}</template>
-                <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
-            </el-select>
-            <el-select @change="searchLogs" class="ml-5 selectWidth" v-model.number="logSearch.tail">
-                <template #prefix>{{ $t('container.lines') }}</template>
-                <el-option :value="0" :label="$t('commons.table.all')" />
-                <el-option :value="100" :label="100" />
-                <el-option :value="200" :label="200" />
-                <el-option :value="500" :label="500" />
-                <el-option :value="1000" :label="1000" />
-            </el-select>
-            <div class="ml-5">
-                <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
-                    {{ $t('commons.button.watch') }}
-                </el-checkbox>
+        <template #content>
+            <div class="flex flex-wrap">
+                <el-select @change="searchLogs" v-model="logSearch.mode" class="selectWidth">
+                    <template #prefix>{{ $t('container.fetch') }}</template>
+                    <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
+                </el-select>
+                <el-select @change="searchLogs" class="ml-5 selectWidth" v-model.number="logSearch.tail">
+                    <template #prefix>{{ $t('container.lines') }}</template>
+                    <el-option :value="0" :label="$t('commons.table.all')" />
+                    <el-option :value="100" :label="100" />
+                    <el-option :value="200" :label="200" />
+                    <el-option :value="500" :label="500" />
+                    <el-option :value="1000" :label="1000" />
+                </el-select>
+                <div class="ml-5">
+                    <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
+                        {{ $t('commons.button.watch') }}
+                    </el-checkbox>
+                </div>
+                <el-button class="ml-5" @click="onDownload" icon="Download">
+                    {{ $t('file.download') }}
+                </el-button>
             </div>
-            <el-button class="ml-5" @click="onDownload" icon="Download">
-                {{ $t('file.download') }}
-            </el-button>
-        </div>
 
-        <div class="mt-2.5">
-            <highlightjs
-                v-if="showLog"
-                ref="editorRef"
-                class="editor-main"
-                language="JavaScript"
-                :autodetect="false"
-                :code="logInfo"
-            ></highlightjs>
-        </div>
-    </el-drawer>
+            <div class="mt-2.5">
+                <highlightjs
+                    ref="editorRef"
+                    class="editor-main"
+                    language="JavaScript"
+                    :autodetect="false"
+                    :code="logInfo"
+                ></highlightjs>
+            </div>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -66,7 +63,6 @@ const open = ref(false);
 const resource = ref('');
 const globalStore = GlobalStore();
 const logVisible = ref(false);
-const showLog = ref(false);
 const editorRef = ref();
 const scrollerElement = ref<HTMLElement | null>(null);
 
@@ -136,6 +132,7 @@ const searchLogs = async () => {
     terminalSocket.value.onmessage = (event) => {
         logInfo.value += event.data;
         nextTick(() => {
+            console.log(scrollerElement.value);
             scrollerElement.value.scrollTop = scrollerElement.value.scrollHeight;
         });
     };
@@ -189,23 +186,20 @@ const acceptParams = (props: DialogProps): void => {
             globalStore.isFullScreen = screenfull.isFullscreen;
         });
     }
+    nextTick(() => {
+        if (editorRef.value) {
+            scrollerElement.value = editorRef.value.$el as HTMLElement;
+            let hljsDom = scrollerElement.value.querySelector('.hljs') as HTMLElement;
+            hljsDom.style['min-height'] = '300px';
+            hljsDom.style['flex-grow'] = 1;
+        }
+    });
 };
 
 onBeforeUnmount(() => {
     handleClose();
 });
 
-onMounted(async () => {
-    await nextTick(() => {
-        showLog.value = true;
-    });
-    if (editorRef.value) {
-        scrollerElement.value = editorRef.value.$el as HTMLElement;
-        let hljsDom = scrollerElement.value.querySelector('.hljs') as HTMLElement;
-        hljsDom.style['min-height'] = '500px';
-    }
-});
-
 defineExpose({
     acceptParams,
 });
@@ -217,9 +211,8 @@ defineExpose({
 }
 
 .editor-main {
-    height: calc(100vh - 100px);
-    width: 100%;
-    min-height: 600px;
-    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    height: 80vh;
 }
 </style>
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 7446db4cf..49466f642 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -1,14 +1,5 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('app.detail')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="open" :header="$t('app.detail')" :back="handleClose" size="large">
         <div class="brief" v-loading="loadingApp">
             <div class="detail flex">
                 <div class="w-12 h-12 rounded p-1 shadow-md icon">
@@ -70,7 +61,7 @@
             </div>
         </div>
         <MdEditor previewOnly v-model="app.readMe" :theme="isDarkTheme ? 'dark' : 'light'" />
-    </el-drawer>
+    </DrawerPro>
     <Install ref="installRef"></Install>
 </template>
 
diff --git a/frontend/src/views/app-store/installed/index.vue b/frontend/src/views/app-store/installed/index.vue
index 97073e816..8116a5342 100644
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@@ -235,7 +235,6 @@
 
                                                     <el-button
                                                         v-if="installed.httpPort > 0"
-                                                        @click="goDashboard(installed.httpPort, 'http')"
                                                         class="tagMargin"
                                                         plain
                                                         size="small"
@@ -245,7 +244,6 @@
 
                                                     <el-button
                                                         v-if="installed.httpsPort > 0"
-                                                        @click="goDashboard(installed.httpsPort, 'https')"
                                                         class="tagMargin"
                                                         plain
                                                         size="small"
@@ -497,10 +495,6 @@ const search = async () => {
     });
 };
 
-const goDashboard = async (port: any, protocol: string) => {
-    dialogPortJumpRef.value.acceptParams({ port: port, protocol: protocol });
-};
-
 const openOperate = (row: any, op: string) => {
     operateReq.installId = row.id;
     operateReq.operate = op;
diff --git a/frontend/src/views/container/container/log/index.vue b/frontend/src/views/container/container/log/index.vue
index 024164370..cfdc30b27 100644
--- a/frontend/src/views/container/container/log/index.vue
+++ b/frontend/src/views/container/container/log/index.vue
@@ -1,57 +1,50 @@
 <template>
-    <div>
-        <DrawerPro
-            v-model="logVisible"
-            :header="$t('commons.button.log')"
-            :back="handleClose"
-            :resource="logSearch.container"
-            :size="globalStore.isFullScreen ? 'full' : 'large'"
-        >
-            <template #extra v-if="!mobile">
-                <el-tooltip :content="loadTooltip()" placement="top">
-                    <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
-                </el-tooltip>
-            </template>
-            <template #content>
-                <div>
-                    <el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode">
-                        <template #prefix>{{ $t('container.fetch') }}</template>
-                        <el-option
-                            v-for="item in timeOptions"
-                            :key="item.label"
-                            :value="item.value"
-                            :label="item.label"
-                        />
-                    </el-select>
-                    <el-select @change="searchLogs" class="tailClass" v-model.number="logSearch.tail">
-                        <template #prefix>{{ $t('container.lines') }}</template>
-                        <el-option :value="0" :label="$t('commons.table.all')" />
-                        <el-option :value="100" :label="100" />
-                        <el-option :value="200" :label="200" />
-                        <el-option :value="500" :label="500" />
-                        <el-option :value="1000" :label="1000" />
-                    </el-select>
-                    <div class="margin-button float-left">
-                        <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
-                            {{ $t('commons.button.watch') }}
-                        </el-checkbox>
-                    </div>
-                    <el-button class="margin-button" @click="onDownload" icon="Download">
-                        {{ $t('file.download') }}
-                    </el-button>
-                    <el-button class="margin-button" @click="onClean" icon="Delete">
-                        {{ $t('commons.button.clean') }}
-                    </el-button>
+    <DrawerPro
+        v-model="logVisible"
+        :header="$t('commons.button.log')"
+        :back="handleClose"
+        :resource="logSearch.container"
+        :size="globalStore.isFullScreen ? 'full' : 'large'"
+    >
+        <template #extra v-if="!mobile">
+            <el-tooltip :content="loadTooltip()" placement="top">
+                <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
+            </el-tooltip>
+        </template>
+        <template #content>
+            <div>
+                <el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode">
+                    <template #prefix>{{ $t('container.fetch') }}</template>
+                    <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
+                </el-select>
+                <el-select @change="searchLogs" class="tailClass" v-model.number="logSearch.tail">
+                    <template #prefix>{{ $t('container.lines') }}</template>
+                    <el-option :value="0" :label="$t('commons.table.all')" />
+                    <el-option :value="100" :label="100" />
+                    <el-option :value="200" :label="200" />
+                    <el-option :value="500" :label="500" />
+                    <el-option :value="1000" :label="1000" />
+                </el-select>
+                <div class="margin-button float-left">
+                    <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
+                        {{ $t('commons.button.watch') }}
+                    </el-checkbox>
                 </div>
-                <LogPro v-model="logInfo"></LogPro>
-            </template>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                </span>
-            </template>
-        </DrawerPro>
-    </div>
+                <el-button class="margin-button" @click="onDownload" icon="Download">
+                    {{ $t('file.download') }}
+                </el-button>
+                <el-button class="margin-button" @click="onClean" icon="Delete">
+                    {{ $t('commons.button.clean') }}
+                </el-button>
+            </div>
+            <LogPro v-model="logInfo"></LogPro>
+        </template>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/ssl/ca/detail/index.vue b/frontend/src/views/website/ssl/ca/detail/index.vue
index 5ca838f12..614740bf9 100644
--- a/frontend/src/views/website/ssl/ca/detail/index.vue
+++ b/frontend/src/views/website/ssl/ca/detail/index.vue
@@ -1,8 +1,5 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="50%">
-        <template #header>
-            <DrawerHeader :header="$t('ssl.organizationDetail')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="open" :header="$t('ssl.organizationDetail')" :back="handleClose" size="large">
         <div v-loading="loading">
             <el-radio-group v-model="curr">
                 <el-radio-button value="detail">{{ $t('ssl.organizationDetail') }}</el-radio-button>
@@ -49,7 +46,7 @@
                 </div>
             </div>
         </div>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import DrawerHeader from '@/components/drawer-header/index.vue';
diff --git a/frontend/src/views/website/website/config/basic/proxy/create/index.vue b/frontend/src/views/website/website/config/basic/proxy/create/index.vue
index b32a98dd3..381c8758c 100644
--- a/frontend/src/views/website/website/config/basic/proxy/create/index.vue
+++ b/frontend/src/views/website/website/config/basic/proxy/create/index.vue
@@ -1,120 +1,99 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="40%"
-        :before-close="handleClose"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('commons.button.' + proxy.operate)" :back="handleClose" />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form ref="proxyForm" label-position="top" :model="proxy" :rules="rules">
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input v-model.trim="proxy.name" :disabled="proxy.operate === 'edit'"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('website.modifier')" prop="modifier">
-                        <el-input v-model.trim="proxy.modifier"></el-input>
-                        <div>
-                            <span class="input-help">{{ $t('website.modifierHelper') }}</span>
-                        </div>
-                    </el-form-item>
-                    <el-form-item :label="$t('website.proxyPath')" prop="match">
-                        <el-input v-model.trim="proxy.match"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('website.enableCache')" prop="cache">
-                        <el-switch v-model="proxy.cache" @change="changeCache(proxy.cache)"></el-switch>
-                    </el-form-item>
-                    <el-form-item :label="$t('website.sni')" prop="sni">
-                        <el-switch v-model="proxy.sni"></el-switch>
-                        <span class="input-help">{{ $t('website.sniHelper') }}</span>
-                    </el-form-item>
-                    <el-form-item :label="$t('website.cacheTime')" prop="cacheTime" v-if="proxy.cache">
-                        <el-input v-model.number="proxy.cacheTime" maxlength="15">
-                            <template #append>
-                                <el-select v-model="proxy.cacheUnit" style="width: 100px">
-                                    <el-option
-                                        v-for="(unit, index) in Units"
-                                        :key="index"
-                                        :label="unit.label"
-                                        :value="unit.value"
-                                    ></el-option>
+    <DrawerPro v-model="open" :header="$t('commons.button.' + proxy.operate)" :back="handleClose" size="normal">
+        <el-form ref="proxyForm" label-position="top" :model="proxy" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-model.trim="proxy.name" :disabled="proxy.operate === 'edit'"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('website.modifier')" prop="modifier">
+                <el-input v-model.trim="proxy.modifier"></el-input>
+                <div>
+                    <span class="input-help">{{ $t('website.modifierHelper') }}</span>
+                </div>
+            </el-form-item>
+            <el-form-item :label="$t('website.proxyPath')" prop="match">
+                <el-input v-model.trim="proxy.match"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('website.enableCache')" prop="cache">
+                <el-switch v-model="proxy.cache" @change="changeCache(proxy.cache)"></el-switch>
+            </el-form-item>
+            <el-form-item :label="$t('website.sni')" prop="sni">
+                <el-switch v-model="proxy.sni"></el-switch>
+                <span class="input-help">{{ $t('website.sniHelper') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('website.cacheTime')" prop="cacheTime" v-if="proxy.cache">
+                <el-input v-model.number="proxy.cacheTime" maxlength="15">
+                    <template #append>
+                        <el-select v-model="proxy.cacheUnit" style="width: 100px">
+                            <el-option
+                                v-for="(unit, index) in Units"
+                                :key="index"
+                                :label="unit.label"
+                                :value="unit.value"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-row :gutter="10">
+                <el-col :span="12">
+                    <el-form-item :label="$t('website.proxyPass')" prop="proxyPass">
+                        <el-input
+                            v-model.trim="proxy.proxyAddress"
+                            :placeholder="$t('website.proxyHelper')"
+                            @blur="getProxyHost"
+                        >
+                            <template #prepend>
+                                <el-select v-model="proxy.proxyProtocol" class="pre-select">
+                                    <el-option label="http" value="http://" />
+                                    <el-option label="https" value="https://" />
+                                    <el-option :label="$t('website.other')" value="" />
                                 </el-select>
                             </template>
                         </el-input>
-                    </el-form-item>
-                    <el-row :gutter="10">
-                        <el-col :span="12">
-                            <el-form-item :label="$t('website.proxyPass')" prop="proxyPass">
-                                <el-input
-                                    v-model.trim="proxy.proxyAddress"
-                                    :placeholder="$t('website.proxyHelper')"
-                                    @blur="getProxyHost"
-                                >
-                                    <template #prepend>
-                                        <el-select v-model="proxy.proxyProtocol" class="pre-select">
-                                            <el-option label="http" value="http://" />
-                                            <el-option label="https" value="https://" />
-                                            <el-option :label="$t('website.other')" value="" />
-                                        </el-select>
-                                    </template>
-                                </el-input>
-                                <div>
-                                    <span class="input-help">{{ $t('website.proxyPassHelper') }}</span>
-                                </div>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item :label="$t('website.proxyHost')" prop="proxyHost">
-                                <el-input v-model.trim="proxy.proxyHost"></el-input>
-                                <div>
-                                    <span class="input-help">{{ $t('website.proxyHostHelper') }}</span>
-                                </div>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-form-item :label="$t('website.replace')">
-                        <div style="width: 100%" v-for="(replace, index) in replaces" :key="index">
-                            <el-row :gutter="10">
-                                <el-col :span="10">
-                                    <el-input
-                                        v-model.trim="replace.key"
-                                        :placeholder="$t('website.replaced')"
-                                    ></el-input>
-                                </el-col>
-                                <el-col :span="10">
-                                    <el-input
-                                        v-model.trim="replace.value"
-                                        :placeholder="$t('website.replaceText')"
-                                    ></el-input>
-                                </el-col>
-                                <el-col :span="2">
-                                    <el-button link @click="removeReplace(index)" type="danger">
-                                        {{ $t('commons.button.delete') }}
-                                    </el-button>
-                                </el-col>
-                            </el-row>
+                        <div>
+                            <span class="input-help">{{ $t('website.proxyPassHelper') }}</span>
                         </div>
                     </el-form-item>
-                    <el-form-item>
-                        <el-button type="primary" @click="addReplaces">
-                            {{ $t('website.addReplace') }}
-                        </el-button>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item :label="$t('website.proxyHost')" prop="proxyHost">
+                        <el-input v-model.trim="proxy.proxyHost"></el-input>
+                        <div>
+                            <span class="input-help">{{ $t('website.proxyHostHelper') }}</span>
+                        </div>
                     </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>
-                <el-button type="primary" @click="submit(proxyForm)" :disabled="loading">
-                    {{ $t('commons.button.confirm') }}
+                </el-col>
+            </el-row>
+            <el-form-item :label="$t('website.replace')">
+                <div style="width: 100%" v-for="(replace, index) in replaces" :key="index">
+                    <el-row :gutter="10">
+                        <el-col :span="10">
+                            <el-input v-model.trim="replace.key" :placeholder="$t('website.replaced')"></el-input>
+                        </el-col>
+                        <el-col :span="10">
+                            <el-input v-model.trim="replace.value" :placeholder="$t('website.replaceText')"></el-input>
+                        </el-col>
+                        <el-col :span="2">
+                            <el-button link @click="removeReplace(index)" type="danger">
+                                {{ $t('commons.button.delete') }}
+                            </el-button>
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="addReplaces">
+                    {{ $t('website.addReplace') }}
                 </el-button>
-            </span>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button type="primary" @click="submit(proxyForm)" :disabled="loading">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>