1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-10 23:47:39 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: reverse proxy rules (#10131)

Browse source
This commit is contained in:
CityFun 2025-08-25 16:15:57 +08:00 • committed by GitHub
parent 780b6cdec9
commit 47e60bfdcb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 40 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
frontend/src/views/website/website/config/basic/proxy/create/index.vue
View file

@ -13,10 +13,7 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item :label="$t('website.modifier')" prop="modifier"> <el-form-item :label="$t('website.modifier')" prop="modifier">
<el-input v-model.trim="proxy.modifier" /> <el-input v-model.trim="proxy.modifier" />
<div class="flex items-center gap-1 mt-1 text-xs"> <span class="input-help">{{ $t('website.modifierHelper') }}</span>
<el-icon class="text-sm"><QuestionFilled /></el-icon>
<span>{{ $t('website.modifierHelper') }}</span>
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -41,19 +38,13 @@
</el-select> </el-select>
</template> </template>
</el-input> </el-input>
<div class="flex items-center gap-1 mt-1 text-xs"> <span class="input-help">{{ $t('website.proxyPassHelper') }}</span>
<el-icon class="text-sm"><QuestionFilled /></el-icon>
<span>{{ $t('website.proxyPassHelper') }}</span>
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item :label="$t('website.proxyHost')" prop="proxyHost"> <el-form-item :label="$t('website.proxyHost')" prop="proxyHost">
<el-input v-model.trim="proxy.proxyHost" /> <el-input v-model.trim="proxy.proxyHost" />
<div class="flex items-center gap-1 mt-1 text-xs"> <span class="input-help">{{ $t('website.proxyHostHelper') }}</span>
<el-icon class="text-sm"><QuestionFilled /></el-icon>
<span>{{ $t('website.proxyHostHelper') }}</span>
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -64,10 +55,7 @@
<div class="flex justify-between items-center py-3"> <div class="flex justify-between items-center py-3">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<span class="font-medium">{{ $t('website.sni') }}</span> <span class="font-medium">{{ $t('website.sni') }}</span>
<div class="flex items-center gap-1 mt-1 text-xs"> <span class="input-help">{{ $t('website.sniHelper') }}</span>
<el-icon class="text-sm"><QuestionFilled /></el-icon>
<span>{{ $t('website.sniHelper') }}</span>
</div>
</div> </div>
<el-switch v-model="proxy.sni" size="large" /> <el-switch v-model="proxy.sni" size="large" />
</div> </div>
@ -110,10 +98,7 @@
</el-select> </el-select>
</template> </template>
</el-input> </el-input>
<div class="flex items-center gap-1 mt-1 text-xs"> <span class="input-help">{{ $t('website.browserCacheTimeHelper') }}</span>
<el-icon class="text-sm"><QuestionFilled /></el-icon>
<span>{{ $t('website.browserCacheTimeHelper') }}</span>
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -130,10 +115,7 @@
</el-select> </el-select>
</template> </template>
</el-input> </el-input>
<div class="flex items-center gap-1 mt-1 text-xs"> <span class="input-help">{{ $t('website.serverCacheTimeHelper') }}</span>
<el-icon class="text-sm"><QuestionFilled /></el-icon>
<span>{{ $t('website.serverCacheTimeHelper') }}</span>
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -142,52 +124,42 @@
<el-divider content-position="left">{{ $t('website.replace') }}</el-divider> <el-divider content-position="left">{{ $t('website.replace') }}</el-divider>
<div class="replace-section"> <div>
<div v-if="replaces.length === 0" class="empty-state"> <div v-for="(replace, index) in replaces" :key="index" class="mb-3">
<el-empty :image-size="60" :description="$t('website.replacedListEmpty')" /> <el-row :gutter="16">
</div> <el-col :span="10">
<div v-else class="replace-list"> <el-input
<div v-for="(replace, index) in replaces" :key="index" class="mb-3"> v-model.trim="replace.key"
<div class="flex justify-between items-center mb-3"> :placeholder="$t('website.replaced')"
<span class="text-sm font-medium">Rule {{ index + 1 }}</span> size="default"
<el-button @click="removeReplace(index)" type="danger" link size="small"> ></el-input>
</el-col>
<el-col :span="10">
<el-input
v-model.trim="replace.value"
:placeholder="$t('website.replaceText')"
size="default"
></el-input>
</el-col>
<el-col :span="2">
<el-button
@click="removeReplace(index)"
type="danger"
link
size="small"
class="mt-1"
>
<el-icon><Delete /></el-icon> <el-icon><Delete /></el-icon>
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</div> </el-col>
<el-row :gutter="16"> </el-row>
<el-col :span="11">
<el-input
v-model.trim="replace.key"
:placeholder="$t('website.replaced')"
size="default"
>
<template #prepend>Search</template>
</el-input>
</el-col>
<el-col :span="2" class="flex items-center justify-center">
<el-icon size="16"><ArrowRight /></el-icon>
</el-col>
<el-col :span="11">
<el-input
v-model.trim="replace.value"
:placeholder="$t('website.replaceText')"
size="default"
>
<template #prepend>Replace</template>
</el-input>
</el-col>
</el-row>
</div>
</div> </div>
<div class="text-center mt-4"> <div class="mt-4">
<el-button type="primary" @click="addReplaces" :icon="Plus"> <el-button type="primary" @click="addReplaces" :icon="Plus">
{{ $t('website.addReplace') }} {{ $t('website.addReplace') }}
</el-button> </el-button>
</div> <span class="input-help mt-4">{{ $t('website.replaceHelper') }}</span>
<div class="flex items-center gap-1 mt-1 text-xs">
<el-icon class="text-sm"><QuestionFilled /></el-icon>
<span>{{ $t('website.replaceHelper') }}</span>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
@ -212,7 +184,7 @@ import { MsgError, MsgSuccess } from '@/utils/message';
import { Website } from '@/api/interface/website'; import { Website } from '@/api/interface/website';
import { Units } from '@/global/mimetype'; import { Units } from '@/global/mimetype';
import { isDomain } from '@/utils/util'; import { isDomain } from '@/utils/util';
import { QuestionFilled, Delete, Plus, ArrowRight } from '@element-plus/icons-vue'; import { Delete, Plus } from '@element-plus/icons-vue';
const proxyForm = ref<FormInstance>(); const proxyForm = ref<FormInstance>();
const rules = ref({ const rules = ref({
@ -235,7 +207,7 @@ const initData = (): Website.ProxyConfig => ({
cacheTime: 1, cacheTime: 1,
cacheUnit: 'm', cacheUnit: 'm',
name: '', name: '',
modifier: '^~', modifier: '',
match: '/', match: '/',
proxyPass: 'http://127.0.0.1:8080', proxyPass: 'http://127.0.0.1:8080',
proxyHost: '$host', proxyHost: '$host',
@ -260,6 +232,7 @@ const handleClose = () => {
const acceptParams = (proxyParam: Website.ProxyConfig) => { const acceptParams = (proxyParam: Website.ProxyConfig) => {
replaces.value = []; replaces.value = [];
proxy.value = proxyParam; proxy.value = proxyParam;
activeTab.value = 'basic';
const res = getProtocolAndHost(proxyParam.proxyPass); const res = getProtocolAndHost(proxyParam.proxyPass);
if (res != null) { if (res != null) {

4
frontend/src/views/website/website/config/basic/proxy/index.vue
View file

@ -17,7 +17,7 @@
</el-table-column> </el-table-column>
<el-table-column :label="$t('commons.table.status')" prop="enable"> <el-table-column :label="$t('commons.table.status')" prop="enable">
<template #default="{ row }"> <template #default="{ row }">
<Status :status="row.enable ? 'enable' : 'disable'" @click="opProxy(row)" /> <Status :status="row.enable ? 'enable' : 'disable'" @click="opProxy(row)" :operate="true" />
</template> </template>
</el-table-column> </el-table-column>
<fu-table-operations <fu-table-operations
@ -105,7 +105,7 @@ const initData = (id: number): Website.ProxyConfig => ({
cacheTime: 1, cacheTime: 1,
cacheUnit: 'm', cacheUnit: 'm',
name: '', name: '',
modifier: '^~', modifier: '',
match: '/', match: '/',
proxyPass: 'http://', proxyPass: 'http://',
proxyHost: '$host', proxyHost: '$host',