fix: Resolve the issue where the page does not display correctly after enabling browser caching. (#10257)

Refs https://github.com/1Panel-dev/1Panel/issues/10245

frontend/src/lang/modules/en.ts

@@ -2427,7 +2427,6 @@ const message = {
         blockedRef: 'Allow non-standard Referer',
         accessControl: 'Anti-leech control',
         leechcacheControl: 'Cache control',
-        leechlogControl: 'Log control',
         logEnableControl: 'Log static asset requests',
         leechSpecialValidHelper:
             "When 'Allow empty Referer' is enabled, requests without a Referer (direct access, etc.) are not blocked; enabling 'Allow non-standard Referer' allows any Referer that does not start with http/https (client requests, etc.).",

frontend/src/lang/modules/ja.ts

@@ -2343,7 +2343,6 @@ const message = {
         blockedRef: '非標準のリファラーを許可',
         accessControl: '反リーチ制御',
         leechcacheControl: 'キャッシュ制御',
-        leechlogControl: 'ログ制御',
         logEnableControl: '静的アセットのリクエストを記録',
         leechSpecialValidHelper:
             '「空のリファラーを許可」を有効にすると、リファラーのないリクエスト（直接アクセス等）はブロックされません。「非標準のリファラーを許可」を有効にすると、http/httpsで始まらないリファラー（クライアントからのリクエスト等）をすべて許可します。',

frontend/src/lang/modules/ko.ts

@@ -2302,7 +2302,6 @@ const message = {
         blockedRef: '비표준 참조 허용',
         accessControl: '링크 차단 제어',
         leechcacheControl: '캐시 제어',
-        leechlogControl: '로그 제어',
         logEnableControl: '정적 리소스 요청 로그 기록',
         leechSpecialValidHelper:
             "'빈 참조 허용'을 활성화하면 리퍼러가 없는 요청(직접 접근 등)은 차단되지 않습니다. '비표준 참조 허용'을 활성화하면 http/https로 시작하지 않는 모든 리퍼러 요청(클라이언트 요청 등)을 허용합니다.",

frontend/src/lang/modules/ms.ts

@@ -2397,7 +2397,6 @@ const message = {
         blockedRef: 'Benarkan referrer tidak standard',
         accessControl: 'Kawalan anti-leech',
         leechcacheControl: 'Kawalan cache',
-        leechlogControl: 'Kawalan log',
         logEnableControl: 'Log permintaan aset statik',
         leechSpecialValidHelper:
             "Apabila 'Benarkan referrer kosong' didayakan, permintaan tanpa referrer (akses terus dan sebagainya) tidak akan disekat; mendayakan 'Benarkan referrer tidak standard' akan membenarkan mana-mana referrer yang tidak bermula dengan http/https (permintaan klien dan sebagainya).",

frontend/src/lang/modules/pt-br.ts

@@ -2396,7 +2396,6 @@ const message = {
         blockedRef: 'Permitir Referer não padrão',
         accessControl: 'Controle anti-leech',
         leechcacheControl: 'Controle de cache',
-        leechlogControl: 'Controle de log',
         logEnableControl: 'Registrar solicitações de ativos estáticos',
         leechSpecialValidHelper:
             "Quando 'Permitir Referer vazio' estiver ativado, as solicitações sem Referer (acesso direto etc.) não serão bloqueadas; ao ativar 'Permitir Referer não padrão', qualquer Referer que não comece com http/https será permitido (solicitações de cliente etc.).",

frontend/src/lang/modules/ru.ts

@@ -2393,7 +2393,6 @@ const message = {
         blockedRef: 'Разрешить нестандартный Referer',
         accessControl: 'Управление анти-личем',
         leechcacheControl: 'Управление кэшем',
-        leechlogControl: 'Управление журналом',
         logEnableControl: 'Логировать запросы статических ресурсов',
         leechSpecialValidHelper:
             'При включённой опции «Разрешить пустой referrer» запросы без Referer (прямой доступ и т. п.) не блокируются; включение «Разрешить нестандартный Referer» пропускает любой Referer, не начинающийся с http/https (клиентские запросы и т. п.).',

frontend/src/lang/modules/tr.ts

@@ -2455,7 +2455,6 @@ const message = {
         blockedRef: 'Standart olmayan Referer’e izin ver',
         accessControl: 'Sömürü karşıtı kontrol',
         leechcacheControl: 'Önbellek kontrolü',
-        leechlogControl: 'Günlük kontrolü',
         logEnableControl: 'Statik varlık isteklerini günlüğe al',
         leechSpecialValidHelper:
             "'Boş yönlendirme izni ver' etkinse yönlendiricisi olmayan istekler (doğrudan erişim vb.) engellenmez; 'Standart olmayan Referer’e izin ver' etkinse http/https ile başlamayan tüm Referer isteklerine (istemci istekleri vb.) izin verilir.",

frontend/src/lang/modules/zh-Hant.ts

@@ -2265,7 +2265,6 @@ const message = {
         blockedRef: '允許非標準 Referer',
         accessControl: '防盜鏈控制',
         leechcacheControl: '快取控制',
-        leechlogControl: '日誌控制',
         logEnableControl: '記錄靜態資源請求日誌',
         leechSpecialValidHelper:
             '啟用「允許 Referer 為空」時，不會阻止無 Referer 的請求（直接訪問等）；啟用「允許非標準 Referer」時，會放行任何不以 http/https 開頭的 Referer 請求（客戶端請求等）',

frontend/src/lang/modules/zh.ts

@@ -2255,8 +2255,7 @@ const message = {
         blockedRef: '允许非标准 Referer',
         accessControl: '防盗链控制',
         leechcacheControl: '缓存控制',
-        leechlogControl: '日志控制',
-        logEnableControl: '记录静态资源请求日志',
+        logEnableControl: '记录请求日志',
         leechSpecialValidHelper:
             '允许 Referer 为空启用时，不会阻止无 Referer 的请求（直接访问等），启用非标准 Referer 时会放行任何不以 http/https 开头的 Referer 请求（客户端请求等）',
         leechInvalidReturnHelper: '拦截盗链请求后，返回的 HTTP 状态码',

frontend/src/views/website/website/config/basic/anti-Leech/index.vue

@@ -1,111 +1,96 @@
 <template>
     <el-row :gutter="20" v-loading="loading">
-        <el-col :xs="24" :sm="18" :md="18" :lg="20" :xl="22">
-            <el-form :model="form" :rules="rules" ref="leechRef" label-position="right" class="moblie-form">
+        <el-col :xs="24" :sm="18" :md="18" :lg="14" :xl="14">
+            <el-form
+                :model="form"
+                :rules="rules"
+                ref="leechRef"
+                label-position="right"
+                label-width="150px"
+                class="moblie-form"
+            >
                 <el-form-item :label="$t('website.extends')" prop="extends" class="mt-2">
                     <el-input v-model="form.extends" class="p-w-600"></el-input>
                 </el-form-item>
-                <div class="mt-2">
-                    <el-tabs type="border-card">
-                        <el-tab-pane :label="$t('website.accessControl')">
-                            <el-form-item :label="$t('website.enableOrNot')" prop="enable">
-                                <el-switch v-model="form.enable" @change="changeEnable"></el-switch>
+                <el-divider content-position="left">{{ $t('website.antiLeech') }}</el-divider>
+                <el-form-item :label="$t('website.enableOrNot')" prop="enable">
+                    <el-switch v-model="form.enable" @change="changeEnable"></el-switch>
+                </el-form-item>
+                <template v-if="form.enable">
+                    <el-form-item :label="$t('website.accessDomain')" prop="domains">
+                        <div class="domain-list-container">
+                            <div v-for="(_, index) in domainList" :key="index" class="flex items-center mb-2">
+                                <el-input
+                                    v-model="domainList[index]"
+                                    @input="updateDomainsString"
+                                    class="flex-1 mr-2"
+                                ></el-input>
+                                <el-button
+                                    type="danger"
+                                    size="small"
+                                    :icon="Delete"
+                                    @click="removeDomain(index)"
+                                    v-if="domainList.length > 1"
+                                ></el-button>
+                            </div>
+                            <el-button type="primary" size="small" :icon="Plus" @click="addDomain" plain>
+                                {{ $t('commons.button.add') }}
+                            </el-button>
+                        </div>
+                    </el-form-item>
+                    <el-row :gutter="15">
+                        <el-col>
+                            <el-form-item :label="$t('website.noneRef')" prop="noneRef">
+                                <el-switch v-model="form.noneRef" />
                             </el-form-item>
+                        </el-col>
 
-                            <template v-if="form.enable">
-                                <el-divider />
-
-                                <el-form-item :label="$t('website.accessDomain')" prop="domains">
-                                    <div class="domain-list-container">
-                                        <div
-                                            v-for="(_, index) in domainList"
-                                            :key="index"
-                                            class="flex items-center mb-2"
-                                        >
-                                            <el-input
-                                                v-model="domainList[index]"
-                                                @input="updateDomainsString"
-                                                class="flex-1 mr-2"
-                                            ></el-input>
-                                            <el-button
-                                                type="danger"
-                                                size="small"
-                                                :icon="Delete"
-                                                @click="removeDomain(index)"
-                                                v-if="domainList.length > 1"
-                                            ></el-button>
-                                        </div>
-                                        <el-button type="primary" size="small" :icon="Plus" @click="addDomain" plain>
-                                            {{ $t('commons.button.add') }}
-                                        </el-button>
-                                    </div>
-                                </el-form-item>
-
-                                <el-divider />
-
-                                <el-row :gutter="15">
-                                    <el-col>
-                                        <el-form-item :label="$t('website.noneRef')" prop="noneRef">
-                                            <el-switch v-model="form.noneRef" />
-                                        </el-form-item>
-                                    </el-col>
-
-                                    <el-col>
-                                        <el-form-item :label="$t('website.blockedRef')" prop="blocked">
-                                            <el-switch v-model="form.blocked" />
-                                        </el-form-item>
-                                    </el-col>
-                                    <span class="input-help mt-1 mb-1">
-                                        {{ $t('website.leechSpecialValidHelper') }}
-                                    </span>
-                                </el-row>
-                                <el-divider />
-
-                                <el-form-item :label="$t('website.leechReturn')" prop="return">
-                                    <el-select v-model="form.return" class="p-w-600">
-                                        <el-option
-                                            v-for="option in returnOptions"
-                                            :key="option.value"
-                                            :label="option.label"
-                                            :value="option.value"
-                                        ></el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <span class="input-help mt-1 mb-1">
-                                    {{ $t('website.leechInvalidReturnHelper') }}
+                        <el-col>
+                            <el-form-item :label="$t('website.blockedRef')" prop="blocked">
+                                <el-switch v-model="form.blocked" />
+                                <span class="input-help">
+                                    {{ $t('website.leechSpecialValidHelper') }}
                                 </span>
-                            </template>
-                        </el-tab-pane>
-
-                        <el-tab-pane :label="$t('website.leechcacheControl')">
-                            <el-form-item :label="$t('website.browserCache')" prop="cache">
-                                <el-switch v-model="form.cache" />
                             </el-form-item>
-                            <el-form-item :label="$t('website.cacheTime')" prop="cacheTime" v-if="form.cache">
-                                <el-input v-model.number="form.cacheTime" maxlength="15" class="p-w-300">
-                                    <template #append>
-                                        <el-select v-model="form.cacheUint" class="w-s-button p-w-100">
-                                            <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>
-                            <span class="input-help mt-2">{{ $t('website.browserCacheTimeHelper') }}</span>
-                        </el-tab-pane>
-
-                        <el-tab-pane :label="$t('website.leechlogControl')">
-                            <el-form-item :label="$t('website.logEnableControl')" prop="logEnable">
-                                <el-switch v-model="form.logEnable" />
-                            </el-form-item>
-                            <span class="input-help mt-2">{{ $t('website.leechlogControlHelper') }}</span>
-                        </el-tab-pane>
-                    </el-tabs>
-                </div>
+                        </el-col>
+                    </el-row>
+                    <el-form-item :label="$t('website.leechReturn')" prop="return">
+                        <el-select v-model="form.return" class="p-w-200">
+                            <el-option
+                                v-for="option in returnOptions"
+                                :key="option.value"
+                                :label="option.label"
+                                :value="option.value"
+                            ></el-option>
+                        </el-select>
+                        <span class="input-help">
+                            {{ $t('website.leechInvalidReturnHelper') }}
+                        </span>
+                    </el-form-item>
+                </template>
+                <el-divider content-position="left">{{ $t('website.leechcacheControl') }}</el-divider>
+                <el-form-item :label="$t('website.browserCache')" prop="cache">
+                    <el-switch v-model="form.cache" />
+                </el-form-item>
+                <el-form-item :label="$t('website.cacheTime')" prop="cacheTime" v-if="form.cache">
+                    <el-input v-model.number="form.cacheTime" maxlength="15" class="p-w-300">
+                        <template #append>
+                            <el-select v-model="form.cacheUint" class="w-s-button p-w-100">
+                                <el-option
+                                    v-for="(unit, index) in Units"
+                                    :key="index"
+                                    :label="unit.label"
+                                    :value="unit.value"
+                                ></el-option>
+                            </el-select>
+                        </template>
+                    </el-input>
+                    <span class="input-help">{{ $t('website.browserCacheTimeHelper') }}</span>
+                </el-form-item>
+                <el-form-item :label="$t('website.logEnableControl')" prop="logEnable" v-if="form.cache || form.enable">
+                    <el-switch v-model="form.logEnable" />
+                    <span class="input-help">{{ $t('website.leechlogControlHelper') }}</span>
+                </el-form-item>
                 <div class="flex items-center gap-4 mt-2">
                     <el-button type="primary" @click="submit(leechRef, form.enable)" :disabled="loading">
                         {{ $t('commons.button.save') }}
@@ -151,7 +136,7 @@ const domainList = ref(['']);
 
 const form = reactive({
     enable: false,
-    cache: true,
+    cache: false,
     cacheTime: 30,
     cacheUint: 'd',
     extends: 'js,css,png,jpg,jpeg,gif,webp,webm,avif,ico,bmp,swf,eot,svg,ttf,woff,woff2',
@@ -215,7 +200,7 @@ const search = async () => {
     loading.value = true;
     const res = await getAntiLeech({ websiteID: id.value });
     loading.value = false;
-    if (!res.data.enable) {
+    if (!res.data.enable && !res.data.cache) {
         return;
     }
     resData.value = res.data;