mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2026-09-22 00:00:50 +00:00
feat: Unify the default website and default site under the same button. (#13149)
This commit is contained in:
CityFun
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user