starred/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2026-10-09 08:00:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(website): optimize website config page logic (#8156)

Browse Source
This commit is contained in:
zhengkunwang
2025-03-14 10:11:08 +00:00
committed by GitHub
parent e9e425038c
commit af5d12bfee
5 changed files with 112 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/website/website/config/basic/domain/create/index.vue
+1 -1
View File
@@ -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">
frontend/src/views/website/website/config/basic/index.vue
+107 -51
View File
@@ -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>
frontend/src/views/website/website/config/index.vue
+1 -1
View File
@@ -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>
frontend/src/views/website/website/create/index.vue
+1 -1
View File
@@ -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>
frontend/src/views/website/website/domain-create/index.vue
+2
View File
@@ -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 = () => {