From af5d12bfee36b229b47bf473e0c3c40d5e448687 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Fri, 14 Mar 2025 18:11:08 +0800
Subject: [PATCH] style(website): optimize website config page logic (#8156)

---
 .../config/basic/domain/create/index.vue      |   2 +-
 .../website/website/config/basic/index.vue    | 158 ++++++++++++------
 .../views/website/website/config/index.vue    |   2 +-
 .../views/website/website/create/index.vue    |   2 +-
 .../website/website/domain-create/index.vue   |   2 +
 5 files changed, 112 insertions(+), 54 deletions(-)

diff --git a/frontend/src/views/website/website/config/basic/domain/create/index.vue b/frontend/src/views/website/website/config/basic/domain/create/index.vue
index 767a94657..b53b93f43 100644
--- a/frontend/src/views/website/website/config/basic/domain/create/index.vue
+++ b/frontend/src/views/website/website/config/basic/domain/create/index.vue
@@ -1,7 +1,7 @@
 <template>
     <DrawerPro v-model="open" :header="$t('website.addDomain')" @close="handleClose">
         <el-form ref="domainForm" label-position="top" :model="create">
-            <DomainCreate v-model:form="create"></DomainCreate>
+            <DomainCreate v-model:form="create" @gengerate="domainForm.clearValidate()"></DomainCreate>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
diff --git a/frontend/src/views/website/website/config/basic/index.vue b/frontend/src/views/website/website/config/basic/index.vue
index 81a9d71f7..3858e897c 100644
--- a/frontend/src/views/website/website/config/basic/index.vue
+++ b/frontend/src/views/website/website/config/basic/index.vue
@@ -1,56 +1,58 @@
 <template>
-    <el-tabs tab-position="left" v-model="tabIndex" v-if="id > 0">
-        <el-tab-pane :label="$t('website.domainConfig')">
-            <Domain :key="id" :id="id" v-if="tabIndex == '0'"></Domain>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.sitePath')">
-            <SitePath :id="id" v-if="tabIndex == '1'"></SitePath>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.defaultDoc')">
-            <Default :id="id" v-if="tabIndex == '2'"></Default>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.rate')">
-            <LimitConn :id="id" v-if="tabIndex == '3'"></LimitConn>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.proxy')">
-            <Proxy :id="id" v-if="tabIndex == '4'"></Proxy>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.loadBalance')">
-            <LoadBalance :id="id" v-if="tabIndex == '5'"></LoadBalance>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.basicAuth')">
-            <AuthBasic :id="id" v-if="tabIndex == '6'"></AuthBasic>
-        </el-tab-pane>
-        <el-tab-pane :label="'HTTPS'">
-            <HTTPS :id="id" v-if="tabIndex == '7'"></HTTPS>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.realIP')">
-            <RealIP :id="id" v-if="tabIndex == '8'"></RealIP>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.rewrite')">
-            <Rewrite :id="id" v-if="tabIndex == '9'"></Rewrite>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.antiLeech')">
-            <AntiLeech :id="id" v-if="tabIndex == '10'"></AntiLeech>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.redirect')">
-            <Redirect :id="id" v-if="tabIndex == '11'"></Redirect>
-        </el-tab-pane>
+    <div :style="{ '--main-height': mainHeight + 'px' }">
+        <el-tabs tab-position="left" v-model="tabIndex" v-if="id > 0" class="custom-tabs" ref="tabsRef">
+            <el-tab-pane :label="$t('website.domainConfig')">
+                <Domain :key="id" :id="id" v-if="tabIndex == '0'"></Domain>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.sitePath')">
+                <SitePath :id="id" v-if="tabIndex == '1'"></SitePath>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.defaultDoc')">
+                <Default :id="id" v-if="tabIndex == '2'"></Default>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.rate')">
+                <LimitConn :id="id" v-if="tabIndex == '3'"></LimitConn>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.proxy')">
+                <Proxy :id="id" v-if="tabIndex == '4'"></Proxy>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.loadBalance')">
+                <LoadBalance :id="id" v-if="tabIndex == '5'"></LoadBalance>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.basicAuth')">
+                <AuthBasic :id="id" v-if="tabIndex == '6'"></AuthBasic>
+            </el-tab-pane>
+            <el-tab-pane :label="'HTTPS'">
+                <HTTPS :id="id" v-if="tabIndex == '7'"></HTTPS>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.realIP')">
+                <RealIP :id="id" v-if="tabIndex == '8'"></RealIP>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.rewrite')">
+                <Rewrite :id="id" v-if="tabIndex == '9'"></Rewrite>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.antiLeech')">
+                <AntiLeech :id="id" v-if="tabIndex == '10'"></AntiLeech>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.redirect')">
+                <Redirect :id="id" v-if="tabIndex == '11'"></Redirect>
+            </el-tab-pane>
 
-        <el-tab-pane
-            :label="'PHP'"
-            name="13"
-            v-if="(website.type === 'runtime' && website.runtimeType === 'php') || website.type === 'static'"
-        >
-            <PHP :id="id" v-if="tabIndex == '13'"></PHP>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('logs.resource')" name="14">
-            <Resource :id="id" v-if="tabIndex == '14'"></Resource>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('website.other')" name="12">
-            <Other :id="id" v-if="tabIndex == '12'"></Other>
-        </el-tab-pane>
-    </el-tabs>
+            <el-tab-pane
+                :label="'PHP'"
+                name="13"
+                v-if="(website.type === 'runtime' && website.runtimeType === 'php') || website.type === 'static'"
+            >
+                <PHP :id="id" v-if="tabIndex == '13'"></PHP>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('logs.resource')" name="14">
+                <Resource :id="id" v-if="tabIndex == '14'"></Resource>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('website.other')" name="12">
+                <Other :id="id" v-if="tabIndex == '12'"></Other>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
 </template>
 
 <script lang="ts" setup name="Basic">
@@ -76,7 +78,14 @@ const props = defineProps({
     website: {
         type: Object,
     },
+    heightDiff: {
+        type: Number,
+        default: 0,
+    },
 });
+const windowHeight = ref(window.innerHeight);
+const mainHeight = computed(() => windowHeight.value - props.heightDiff);
+
 const id = computed(() => {
     return props.website.id;
 });
@@ -86,10 +95,57 @@ watch(tabIndex, (newVal) => {
     localStorage.setItem('site-tabIndex', newVal);
 });
 
+const handleResize = () => {
+    windowHeight.value = window.innerHeight;
+};
+
+const tabsRef = ref();
+const handleScroll = (event: WheelEvent) => {
+    if (!tabsRef.value) return;
+    const tabContainer = tabsRef.value.$el.querySelector('.el-tabs__nav-scroll');
+    if (!tabContainer) return;
+
+    const target = event.target as HTMLElement;
+    const isInsideTabPane = target.closest('.el-tab-pane');
+    if (isInsideTabPane) {
+        return;
+    }
+    event.preventDefault();
+    tabContainer.scrollTop += event.deltaY;
+};
+
 onMounted(() => {
     const storedTabIndex = localStorage.getItem('site-tabIndex');
     if (storedTabIndex !== null) {
         tabIndex.value = storedTabIndex;
     }
+    window.addEventListener('resize', handleResize);
+    document.addEventListener('wheel', handleScroll, { passive: false });
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    document.removeEventListener('wheel', handleScroll);
 });
 </script>
+<style scoped>
+.custom-tabs {
+    height: var(--main-height);
+    display: flex;
+    overflow: hidden;
+}
+
+.custom-tabs >>> .el-tabs__header.is-left {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-shrink: 0;
+}
+
+.custom-tabs >>> .el-tabs__content {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-grow: 1;
+}
+</style>
diff --git a/frontend/src/views/website/website/config/index.vue b/frontend/src/views/website/website/config/index.vue
index 2e3e0dcbb..7b211ced2 100644
--- a/frontend/src/views/website/website/config/index.vue
+++ b/frontend/src/views/website/website/config/index.vue
@@ -30,7 +30,7 @@
             </template>
             <template #main>
                 <MainDiv :heightDiff="320">
-                    <Basic :website="website" v-if="index === 'basic'"></Basic>
+                    <Basic :website="website" v-if="index === 'basic'" :heightDiff="320"></Basic>
                     <Log :id="id" v-if="index === 'log'"></Log>
                     <Resource :id="id" v-if="index === 'resource'"></Resource>
                 </MainDiv>
diff --git a/frontend/src/views/website/website/create/index.vue b/frontend/src/views/website/website/create/index.vue
index 83f3f1dad..6b3ff27e3 100644
--- a/frontend/src/views/website/website/create/index.vue
+++ b/frontend/src/views/website/website/create/index.vue
@@ -307,7 +307,7 @@
                         <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
                     </el-form-item>
                 </div>
-                <DomainCreate v-model:form="website"></DomainCreate>
+                <DomainCreate v-model:form="website" @gengerate="websiteForm.clearValidate()"></DomainCreate>
                 <el-form-item prop="IPV6">
                     <el-checkbox v-model="website.IPV6" :label="$t('website.ipv6')" size="large" />
                 </el-form-item>
diff --git a/frontend/src/views/website/website/domain-create/index.vue b/frontend/src/views/website/website/domain-create/index.vue
index 48864e20b..cdcb169fc 100644
--- a/frontend/src/views/website/website/domain-create/index.vue
+++ b/frontend/src/views/website/website/domain-create/index.vue
@@ -73,6 +73,7 @@ import i18n from '@/lang';
 import { MsgError } from '@/utils/message';
 import { ref } from 'vue';
 
+const emit = defineEmits(['gengerate']);
 const props = defineProps({
     form: {
         type: Object,
@@ -138,6 +139,7 @@ const gengerateDomains = () => {
             });
         }
     });
+    emit('gengerate');
 };
 
 const handleParams = () => {