From 14915945d80b9542be9e34f21d5fdb3c275e75fe Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <1paneldev@sina.com>
Date: Tue, 30 Jun 2026 14:48:28 +0800
Subject: [PATCH] feat: Unify the default website and default site under the
 same button.

---
 .../website/ssl/dns-account/create/index.vue  |   4 +-
 .../views/website/website/default/index.vue   | 159 +++++++++++++++---
 .../src/views/website/website/html/index.vue  | 108 ------------
 frontend/src/views/website/website/index.vue  |  12 +-
 4 files changed, 141 insertions(+), 142 deletions(-)
 delete mode 100644 frontend/src/views/website/website/html/index.vue

diff --git a/frontend/src/views/website/ssl/dns-account/create/index.vue b/frontend/src/views/website/ssl/dns-account/create/index.vue
index bcd180aaa106..7c3122ad97ed 100644
--- a/frontend/src/views/website/ssl/dns-account/create/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/create/index.vue
@@ -110,7 +110,9 @@
                             <el-input v-model.trim="account.authorization['token']"></el-input>
                         </el-form-item>
                     </div>
-                    <div v-if="account.type === 'FreeMyIP' || account.type === 'Vercel' || account.type === 'IonosCloud'">
+                    <div
+                        v-if="account.type === 'FreeMyIP' || account.type === 'Vercel' || account.type === 'IonosCloud'"
+                    >
                         <el-form-item label="Token" prop="authorization.token">
                             <el-input v-model.trim="account.authorization['token']"></el-input>
                         </el-form-item>
diff --git a/frontend/src/views/website/website/default/index.vue b/frontend/src/views/website/website/default/index.vue
index 0fb6d120a929..11528acc0e2e 100644
--- a/frontend/src/views/website/website/default/index.vue
+++ b/frontend/src/views/website/website/default/index.vue
@@ -1,28 +1,52 @@
 <template>
-    <DrawerPro v-model="open" :header="$t('website.defaultServer')" size="normal" @close="handleClose">
-        <el-form @submit.prevent label-position="top" v-loading="loading">
-            <el-form-item :label="$t('website.defaultServer')">
-                <el-select v-model="defaultId">
-                    <el-option :value="0" :key="-1" :label="$t('website.noDefaultServer')"></el-option>
-                    <el-option
-                        v-for="(website, key) in websites"
-                        :key="key"
-                        :value="website.id"
-                        :label="website.primaryDomain"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-        </el-form>
-        <el-alert :closable="false">
-            <template #default>
-                <span class="whitespace-pre-line">{{ $t('website.defaultServerHelper') }}</span>
-            </template>
-        </el-alert>
+    <DrawerPro v-model="open" :header="$t('website.advancedSettings')" size="normal" @close="handleClose">
+        <template #content>
+            <el-tabs v-model="activeTab" tab-position="left" @tab-change="changeTab">
+                <el-tab-pane :label="$t('website.defaultServer')" name="site">
+                    <el-form @submit.prevent label-position="top" v-loading="loading">
+                        <el-form-item :label="$t('website.defaultServer')">
+                            <el-select v-model="defaultId">
+                                <el-option :value="0" :key="-1" :label="$t('website.noDefaultServer')"></el-option>
+                                <el-option
+                                    v-for="(website, key) in websites"
+                                    :key="key"
+                                    :value="website.id"
+                                    :label="website.primaryDomain"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-form>
+                    <el-alert :closable="false">
+                        <template #default>
+                            <span class="whitespace-pre-line">{{ $t('website.defaultServerHelper') }}</span>
+                        </template>
+                    </el-alert>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('website.defaultHtml')" name="html">
+                    <el-select v-model="req.type" class="w-full" @change="getHtml()" v-loading="loading">
+                        <el-option :value="'404'" :label="$t('website.website404')"></el-option>
+                        <el-option :value="'domain404'" :label="$t('website.domain404')"></el-option>
+                        <el-option :value="'index'" :label="$t('website.indexHtml')"></el-option>
+                        <el-option :value="'php'" :label="$t('website.indexPHP')"></el-option>
+                        <el-option :value="'stop'" :label="$t('website.stopHtml')"></el-option>
+                    </el-select>
+                    <div class="mt-1.5">
+                        <el-text v-if="req.type == '404'" type="info">
+                            {{ $t('website.website404Helper') }}
+                        </el-text>
+                    </div>
+                    <div class="mt-1.5">
+                        <el-checkbox v-model="req.sync">{{ $t('website.syncHtmlHelper') }}</el-checkbox>
+                    </div>
+                    <div ref="htmlRef" class="default-html"></div>
+                </el-tab-pane>
+            </el-tabs>
+        </template>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button v-permission type="primary" @click="submit()" :disabled="loading">
-                    {{ $t('commons.button.confirm') }}
+                    {{ $t(activeTab === 'site' ? 'commons.button.confirm' : 'commons.button.save') }}
                 </el-button>
             </span>
         </template>
@@ -30,24 +54,43 @@
 </template>
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
-import { changeDefaultServer, listWebsites } from '@/api/modules/website';
+import { changeDefaultServer, getDefaultHtml, listWebsites, updateDefaultHtml } from '@/api/modules/website';
 import i18n from '@/lang';
-import { ref } from 'vue';
+import { nextTick, reactive, ref } from 'vue';
 import { MsgSuccess } from '@/utils/message';
+import { EditorState } from '@codemirror/state';
+import { basicSetup, EditorView } from 'codemirror';
+import { html } from '@codemirror/lang-html';
+import { php } from '@codemirror/lang-php';
+import { oneDark } from '@codemirror/theme-one-dark';
 
 let open = ref(false);
 let websites = ref<any>();
 let defaultId = ref(-1);
 let loading = ref(false);
+const activeTab = ref('site');
+const content = ref('');
+const view = ref();
+const htmlRef = ref();
+const htmlLoaded = ref(false);
+const req = reactive({
+    type: '404',
+    sync: false,
+});
 
 const acceptParams = () => {
+    activeTab.value = 'site';
     defaultId.value = 0;
+    req.type = '404';
+    htmlLoaded.value = false;
+    destroyEditor();
     get();
     open.value = true;
 };
 
 const handleClose = () => {
     open.value = false;
+    destroyEditor();
 };
 
 const get = async () => {
@@ -60,7 +103,61 @@ const get = async () => {
     });
 };
 
+const changeTab = async () => {
+    if (activeTab.value === 'html' && !htmlLoaded.value) {
+        await getHtml();
+    }
+};
+
+const getHtml = async () => {
+    loading.value = true;
+    try {
+        const res = await getDefaultHtml(req.type);
+        content.value = res.data.content;
+        htmlLoaded.value = true;
+        await nextTick();
+        initEditor();
+    } finally {
+        loading.value = false;
+    }
+};
+
+const destroyEditor = () => {
+    if (view.value) {
+        view.value.destroy();
+        view.value = undefined;
+    }
+};
+
+const initEditor = () => {
+    destroyEditor();
+    let extensions = [basicSetup, oneDark];
+    if (req.type === 'php') {
+        extensions.push(php());
+    } else {
+        extensions.push(html());
+    }
+    const startState = EditorState.create({
+        doc: content.value,
+        extensions: extensions,
+    });
+    if (htmlRef.value) {
+        view.value = new EditorView({
+            state: startState,
+            parent: htmlRef.value,
+        });
+    }
+};
+
 const submit = () => {
+    if (activeTab.value === 'html') {
+        submitHtml();
+        return;
+    }
+    submitDefaultServer();
+};
+
+const submitDefaultServer = () => {
     loading.value = true;
     changeDefaultServer({ id: defaultId.value })
         .then(() => {
@@ -71,5 +168,23 @@ const submit = () => {
             loading.value = false;
         });
 };
+
+const submitHtml = async () => {
+    loading.value = true;
+    try {
+        const content = view.value.state.doc.toString();
+        await updateDefaultHtml({ type: req.type, content: content, sync: req.sync });
+        MsgSuccess(i18n.global.t('commons.msg.updateSuccess'));
+    } finally {
+        loading.value = false;
+    }
+};
 defineExpose({ acceptParams });
 </script>
+
+<style scoped lang="scss">
+.default-html {
+    width: 100%;
+    min-height: 300px;
+}
+</style>
diff --git a/frontend/src/views/website/website/html/index.vue b/frontend/src/views/website/website/html/index.vue
deleted file mode 100644
index f2afb5d3f493..000000000000
--- a/frontend/src/views/website/website/html/index.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-    <DrawerPro v-model="open" :header="$t('website.defaultHtml')" @close="handleClose" size="normal">
-        <el-select v-model="req.type" class="w-full" @change="get()" v-loading="loading">
-            <el-option :value="'404'" :label="$t('website.website404')"></el-option>
-            <el-option :value="'domain404'" :label="$t('website.domain404')"></el-option>
-            <el-option :value="'index'" :label="$t('website.indexHtml')"></el-option>
-            <el-option :value="'php'" :label="$t('website.indexPHP')"></el-option>
-            <el-option :value="'stop'" :label="$t('website.stopHtml')"></el-option>
-        </el-select>
-        <div class="mt-1.5">
-            <el-text v-if="req.type == '404'" type="info">
-                {{ $t('website.website404Helper') }}
-            </el-text>
-        </div>
-        <div class="mt-1.5">
-            <el-checkbox v-model="req.sync">{{ $t('website.syncHtmlHelper') }}</el-checkbox>
-        </div>
-        <div ref="htmlRef" class="default-html"></div>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button v-permission type="primary" @click="submit()" :disabled="loading">
-                    {{ $t('commons.button.save') }}
-                </el-button>
-            </span>
-        </template>
-    </DrawerPro>
-</template>
-<script lang="ts" setup>
-import { updateDefaultHtml, getDefaultHtml } from '@/api/modules/website';
-import i18n from '@/lang';
-import { ref } from 'vue';
-import { MsgSuccess } from '@/utils/message';
-import { EditorState } from '@codemirror/state';
-import { basicSetup, EditorView } from 'codemirror';
-import { html } from '@codemirror/lang-html';
-import { php } from '@codemirror/lang-php';
-import { oneDark } from '@codemirror/theme-one-dark';
-
-let open = ref(false);
-let loading = ref(false);
-const content = ref('');
-const view = ref();
-const htmlRef = ref();
-const req = reactive({
-    type: '404',
-    sync: false,
-});
-
-const acceptParams = () => {
-    req.type = '404';
-    get();
-    open.value = true;
-};
-
-const handleClose = () => {
-    open.value = false;
-};
-
-const get = async () => {
-    const res = await getDefaultHtml(req.type);
-    content.value = res.data.content;
-    initEditor();
-};
-
-const initEditor = () => {
-    if (view.value) {
-        view.value.destroy();
-    }
-    let extensions = [basicSetup, oneDark];
-    if (req.type === 'php') {
-        extensions.push(php());
-    } else {
-        extensions.push(html());
-    }
-    const startState = EditorState.create({
-        doc: content.value,
-        extensions: extensions,
-    });
-    if (htmlRef.value) {
-        view.value = new EditorView({
-            state: startState,
-            parent: htmlRef.value,
-        });
-    }
-};
-
-const submit = async () => {
-    loading.value = true;
-    try {
-        const content = view.value.state.doc.toString();
-        await updateDefaultHtml({ type: req.type, content: content, sync: req.sync });
-        MsgSuccess(i18n.global.t('commons.msg.updateSuccess'));
-    } catch (error) {
-    } finally {
-        loading.value = false;
-    }
-};
-defineExpose({ acceptParams });
-</script>
-
-<style scoped lang="scss">
-.default-html {
-    width: 100%;
-    min-height: 300px;
-}
-</style>
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index c6594b11fd95..5268ddd54af4 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -27,10 +27,7 @@
                     {{ $t('commons.table.group') }}
                 </el-button>
                 <el-button v-permission type="primary" plain @click="openDefault" :disabled="disabledConfig">
-                    {{ $t('website.defaultServer') }}
-                </el-button>
-                <el-button v-permission type="primary" plain @click="openDefaultHtml" :disabled="disabledConfig">
-                    {{ $t('website.defaultHtml') }}
+                    {{ $t('website.advancedSettings') }}
                 </el-button>
             </template>
             <template v-if="!openNginxConfig && nginxIsExist" #rightToolBar>
@@ -298,7 +295,6 @@
         <DefaultServer ref="defaultRef" />
         <GroupDialog @search="listGroup" ref="groupRef" />
         <NginxConfig v-if="openNginxConfig" v-loading="loading" :containerName="containerName" :status="nginxStatus" />
-        <DefaultHtml ref="defaultHtmlRef" />
         <TaskLog ref="taskLogRef" @close="search" />
         <OpDialog ref="opRef" @search="openTaskLog" />
         <BatchSetGroup ref="batchSetGroupRef" @close="search" />
@@ -310,7 +306,6 @@
 import Backups from '@/components/backup/index.vue';
 import UploadDialog from '@/components/upload/index.vue';
 import DefaultServer from '@/views/website/website/default/index.vue';
-import DefaultHtml from '@/views/website/website/html/index.vue';
 import CreateWebSite from '@/views/website/website/create/index.vue';
 import DeleteWebsite from '@/views/website/website/delete/index.vue';
 import NginxConfig from '@/views/website/website/nginx/index.vue';
@@ -362,7 +357,6 @@ const maskShow = ref(false);
 const createRef = ref();
 const deleteRef = ref();
 const groupRef = ref();
-const defaultHtmlRef = ref();
 const openNginxConfig = ref(false);
 const nginxIsExist = ref(false);
 const containerName = ref('');
@@ -622,10 +616,6 @@ const openDefault = () => {
     defaultRef.value.acceptParams();
 };
 
-const openDefaultHtml = () => {
-    defaultHtmlRef.value.acceptParams();
-};
-
 const checkExist = (data: App.CheckInstalled) => {
     nginxIsExist.value = data.isExist;
     containerName.value = data.containerName;