mirror of https://github.com/1Panel-dev/1Panel
feat: 面板设置统一改为抽屉实现 (#880)
ssongliu
GitHub
parent
40633619ca
commit
b67739af13
|
|
@ -2,39 +2,32 @@
|
|||
<div v-loading="loading">
|
||||
<LayoutContent :title="$t('setting.panel')" :divider="true">
|
||||
<template #main>
|
||||
<el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
|
||||
<el-form :model="form" label-position="left" label-width="180px">
|
||||
<el-row>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('setting.user')" :rules="Rules.userName" prop="userName">
|
||||
<el-input clearable v-model="form.userName">
|
||||
<el-form-item :label="$t('setting.user')" prop="userName">
|
||||
<el-input disabled v-model="form.userName">
|
||||
<template #append>
|
||||
<el-button
|
||||
style="width: 85px"
|
||||
@click="onSaveUserName(panelFormRef, 'UserName', form.userName)"
|
||||
icon="Collection"
|
||||
>
|
||||
{{ $t('commons.button.save') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('setting.passwd')" :rules="Rules.requiredInput" prop="password">
|
||||
<el-input type="password" disabled v-model="form.password">
|
||||
<template #append>
|
||||
<el-button style="width: 85px" icon="Setting" @click="onChangePassword">
|
||||
<el-button @click="onChangeUserName()" icon="Setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('setting.theme')" :rules="Rules.requiredSelect" prop="theme">
|
||||
<el-radio-group
|
||||
@change="onSave(panelFormRef, 'Theme', form.theme)"
|
||||
v-model="form.theme"
|
||||
>
|
||||
<el-form-item :label="$t('setting.passwd')" prop="password">
|
||||
<el-input type="password" disabled v-model="form.password">
|
||||
<template #append>
|
||||
<el-button icon="Setting" @click="onChangePassword">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('setting.theme')" prop="theme">
|
||||
<el-radio-group @change="onSave('Theme', form.theme)" v-model="form.theme">
|
||||
<el-radio-button label="light">
|
||||
<el-icon><Sunny /></el-icon>
|
||||
{{ $t('setting.light') }}
|
||||
|
|
@ -46,24 +39,20 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('setting.title')" :rules="Rules.requiredInput" prop="panelName">
|
||||
<el-input clearable v-model="form.panelName">
|
||||
<el-form-item :label="$t('setting.title')" prop="panelName">
|
||||
<el-input disabled v-model="form.panelName">
|
||||
<template #append>
|
||||
<el-button
|
||||
style="width: 85px"
|
||||
@click="onSave(panelFormRef, 'PanelName', form.panelName)"
|
||||
icon="Collection"
|
||||
>
|
||||
{{ $t('commons.button.save') }}
|
||||
<el-button icon="Setting" @click="onChangeTitle">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('setting.language')" :rules="Rules.requiredSelect" prop="language">
|
||||
<el-form-item :label="$t('setting.language')" prop="language">
|
||||
<el-radio-group
|
||||
style="width: 100%"
|
||||
@change="onSave(panelFormRef, 'Language', form.language)"
|
||||
@change="onSave('Language', form.language)"
|
||||
v-model="form.language"
|
||||
>
|
||||
<el-radio label="zh">中文</el-radio>
|
||||
|
|
@ -71,38 +60,23 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
:label="$t('setting.sessionTimeout')"
|
||||
:rules="[Rules.integerNumber, checkNumberRange(300, 864000)]"
|
||||
prop="sessionTimeout"
|
||||
>
|
||||
<el-input v-model.number="form.sessionTimeout">
|
||||
<el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
|
||||
<el-input disabled v-model.number="form.sessionTimeout">
|
||||
<template #append>
|
||||
<el-button
|
||||
style="width: 85px"
|
||||
@click="onSave(panelFormRef, 'SessionTimeout', form.sessionTimeout)"
|
||||
icon="Collection"
|
||||
>
|
||||
{{ $t('commons.button.save') }}
|
||||
<el-button @click="onChangeTimeout" icon="Setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<div>
|
||||
<span class="input-help">
|
||||
{{ $t('setting.sessionTimeoutHelper', [form.sessionTimeout]) }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="input-help">
|
||||
{{ $t('setting.sessionTimeoutHelper', [form.sessionTimeout]) }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('setting.syncTime')">
|
||||
<el-input disabled v-model="form.localTime">
|
||||
<template #append>
|
||||
<el-button
|
||||
style="width: 85px"
|
||||
v-show="!show"
|
||||
@click="onSyncTime"
|
||||
icon="Refresh"
|
||||
>
|
||||
<el-button v-show="!show" @click="onSyncTime" icon="Refresh">
|
||||
{{ $t('commons.button.sync') }}
|
||||
</el-button>
|
||||
<div style="width: 45px" v-show="show">
|
||||
|
|
@ -116,23 +90,27 @@
|
|||
</el-form>
|
||||
</template>
|
||||
</LayoutContent>
|
||||
|
||||
<Password ref="passwordRef" />
|
||||
<UserName ref="userNameRef" />
|
||||
<PanelName ref="panelNameRef" @search="search()" />
|
||||
<Timeout ref="timeoutRef" @search="search()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { ElForm, ElMessageBox } from 'element-plus';
|
||||
import { ElForm } from 'element-plus';
|
||||
import LayoutContent from '@/layout/layout-content.vue';
|
||||
import { syncTime, getSettingInfo, updateSetting, getSystemAvailable } from '@/api/modules/setting';
|
||||
import { Rules, checkNumberRange } from '@/global/form-rules';
|
||||
import { GlobalStore } from '@/store';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useTheme } from '@/hooks/use-theme';
|
||||
import { MsgError, MsgSuccess } from '@/utils/message';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
import Password from '@/views/setting/panel/password/index.vue';
|
||||
import router from '@/routers';
|
||||
import { logOutApi } from '@/api/modules/auth';
|
||||
import UserName from '@/views/setting/panel/username/index.vue';
|
||||
import Timeout from '@/views/setting/panel/timeout/index.vue';
|
||||
import PanelName from '@/views/setting/panel/name/index.vue';
|
||||
|
||||
const loading = ref(false);
|
||||
const i18n = useI18n();
|
||||
|
|
@ -140,8 +118,6 @@ const globalStore = GlobalStore();
|
|||
const themeConfig = computed(() => globalStore.themeConfig);
|
||||
const { switchDark } = useTheme();
|
||||
|
||||
type FormInstance = InstanceType<typeof ElForm>;
|
||||
|
||||
const form = reactive({
|
||||
userName: '',
|
||||
password: '',
|
||||
|
|
@ -159,7 +135,10 @@ const TIME_COUNT = ref(10);
|
|||
const count = ref();
|
||||
const show = ref();
|
||||
|
||||
const userNameRef = ref();
|
||||
const passwordRef = ref();
|
||||
const panelNameRef = ref();
|
||||
const timeoutRef = ref();
|
||||
|
||||
const search = async () => {
|
||||
const res = await getSettingInfo();
|
||||
|
|
@ -172,73 +151,29 @@ const search = async () => {
|
|||
form.language = res.data.language;
|
||||
form.complexityVerification = res.data.complexityVerification;
|
||||
};
|
||||
const panelFormRef = ref<FormInstance>();
|
||||
|
||||
const onChangePassword = () => {
|
||||
passwordRef.value.acceptParams({ complexityVerification: form.complexityVerification });
|
||||
};
|
||||
|
||||
const onSaveUserName = async (formEl: FormInstance | undefined, key: string, val: any) => {
|
||||
if (!formEl) return;
|
||||
const result = await formEl.validateField('userName', callback);
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
ElMessageBox.confirm(i18n.t('setting.userChangeHelper'), i18n.t('setting.userChange'), {
|
||||
confirmButtonText: i18n.t('commons.button.confirm'),
|
||||
cancelButtonText: i18n.t('commons.button.cancel'),
|
||||
type: 'info',
|
||||
}).then(async () => {
|
||||
await updateSetting({ key: key, value: val })
|
||||
.then(async () => {
|
||||
await logOutApi();
|
||||
loading.value = false;
|
||||
MsgSuccess(i18n.t('commons.msg.operationSuccess'));
|
||||
router.push({ name: 'entrance', params: { code: globalStore.entrance } });
|
||||
globalStore.setLogStatus(false);
|
||||
return;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
const onChangeUserName = () => {
|
||||
userNameRef.value.acceptParams({ userName: form.userName });
|
||||
};
|
||||
const onChangeTitle = () => {
|
||||
panelNameRef.value.acceptParams({ panelName: form.panelName });
|
||||
};
|
||||
const onChangeTimeout = () => {
|
||||
timeoutRef.value.acceptParams({ sessionTimeout: form.sessionTimeout });
|
||||
};
|
||||
|
||||
const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
|
||||
if (!formEl) return;
|
||||
const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
if (val === '') {
|
||||
return;
|
||||
}
|
||||
const onSave = async (key: string, val: any) => {
|
||||
loading.value = true;
|
||||
switch (key) {
|
||||
case 'Language':
|
||||
i18n.locale.value = val;
|
||||
globalStore.updateLanguage(val);
|
||||
break;
|
||||
case 'Theme':
|
||||
globalStore.setThemeConfig({ ...themeConfig.value, theme: val });
|
||||
switchDark();
|
||||
break;
|
||||
case 'SessionTimeout':
|
||||
if (Number(val) < 300) {
|
||||
loading.value = false;
|
||||
MsgError(i18n.t('setting.sessionTimeoutError'));
|
||||
search();
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case 'PanelName':
|
||||
globalStore.setThemeConfig({ ...themeConfig.value, panelName: val });
|
||||
document.title = val;
|
||||
break;
|
||||
case 'MonitorStoreDays':
|
||||
case 'ServerPort':
|
||||
val = val + '';
|
||||
break;
|
||||
if (key === 'Language') {
|
||||
i18n.locale.value = val;
|
||||
globalStore.updateLanguage(val);
|
||||
}
|
||||
if (key === 'Theme') {
|
||||
globalStore.setThemeConfig({ ...themeConfig.value, theme: val });
|
||||
switchDark();
|
||||
}
|
||||
let param = {
|
||||
key: key,
|
||||
|
|
@ -246,14 +181,6 @@ const onSave = async (formEl: FormInstance | undefined, key: string, val: any) =
|
|||
};
|
||||
await updateSetting(param)
|
||||
.then(async () => {
|
||||
if (param.key === 'UserName') {
|
||||
await logOutApi();
|
||||
loading.value = false;
|
||||
MsgSuccess(i18n.t('commons.msg.operationSuccess'));
|
||||
router.push({ name: 'entrance', params: { code: globalStore.entrance } });
|
||||
globalStore.setLogStatus(false);
|
||||
return;
|
||||
}
|
||||
if (param.key === 'Language') {
|
||||
location.reload();
|
||||
}
|
||||
|
|
@ -280,14 +207,6 @@ function countdown() {
|
|||
}, 1000);
|
||||
}
|
||||
|
||||
function callback(error: any) {
|
||||
if (error) {
|
||||
return error.message;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const onSyncTime = async () => {
|
||||
loading.value = true;
|
||||
await syncTime()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('setting.title')" :back="handleClose" />
|
||||
</template>
|
||||
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="22">
|
||||
<el-form-item :label="$t('setting.title')" prop="panelName" :rules="Rules.requiredInput">
|
||||
<el-input clearable v-model="form.panelName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button :disabled="loading" type="primary" @click="onSavePanelName(formRef)">
|
||||
{{ $t('commons.button.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import i18n from '@/lang';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
import { updateSetting } from '@/api/modules/setting';
|
||||
import { FormInstance } from 'element-plus';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
import { GlobalStore } from '@/store';
|
||||
const globalStore = GlobalStore();
|
||||
const themeConfig = computed(() => globalStore.themeConfig);
|
||||
|
||||
const emit = defineEmits<{ (e: 'search'): void }>();
|
||||
|
||||
interface DialogProps {
|
||||
panelName: string;
|
||||
}
|
||||
const drawerVisiable = ref();
|
||||
const loading = ref();
|
||||
|
||||
const form = reactive({
|
||||
panelName: '',
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const acceptParams = (params: DialogProps): void => {
|
||||
form.panelName = params.panelName;
|
||||
drawerVisiable.value = true;
|
||||
};
|
||||
|
||||
const onSavePanelName = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
await updateSetting({ key: 'PanelName', value: form.panelName })
|
||||
.then(async () => {
|
||||
globalStore.setThemeConfig({ ...themeConfig.value, panelName: form.panelName });
|
||||
document.title = form.panelName;
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
loading.value = false;
|
||||
drawerVisiable.value = false;
|
||||
emit('search');
|
||||
return;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
drawerVisiable.value = false;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('setting.sessionTimeout')" :back="handleClose" />
|
||||
</template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
@submit.prevent
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="22">
|
||||
<el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
|
||||
<el-input clearable v-model.number="form.sessionTimeout" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button :disabled="loading" type="primary" @click="onSaveTimeout(formRef)">
|
||||
{{ $t('commons.button.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import i18n from '@/lang';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
import { FormInstance } from 'element-plus';
|
||||
import { Rules, checkNumberRange } from '@/global/form-rules';
|
||||
import { updateSetting } from '@/api/modules/setting';
|
||||
|
||||
const emit = defineEmits<{ (e: 'search'): void }>();
|
||||
|
||||
interface DialogProps {
|
||||
sessionTimeout: number;
|
||||
}
|
||||
const drawerVisiable = ref();
|
||||
const loading = ref();
|
||||
|
||||
const form = reactive({
|
||||
sessionTimeout: 86400,
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
sessionTimeout: [Rules.integerNumber, checkNumberRange(300, 864000)],
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const acceptParams = (params: DialogProps): void => {
|
||||
form.sessionTimeout = params.sessionTimeout;
|
||||
drawerVisiable.value = true;
|
||||
};
|
||||
|
||||
const onSaveTimeout = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
await updateSetting({ key: 'SessionTimeout', value: form.sessionTimeout + '' })
|
||||
.then(async () => {
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
loading.value = false;
|
||||
drawerVisiable.value = false;
|
||||
emit('search');
|
||||
return;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
drawerVisiable.value = false;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('setting.user')" :back="handleClose" />
|
||||
</template>
|
||||
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="22">
|
||||
<el-form-item :label="$t('setting.user')" prop="userName" :rules="Rules.userName">
|
||||
<el-input clearable v-model="form.userName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button :disabled="loading" type="primary" @click="onSaveUserName(formRef)">
|
||||
{{ $t('commons.button.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import i18n from '@/lang';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
import { updateSetting } from '@/api/modules/setting';
|
||||
import { ElMessageBox, FormInstance } from 'element-plus';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
import { logOutApi } from '@/api/modules/auth';
|
||||
import router from '@/routers';
|
||||
import { GlobalStore } from '@/store';
|
||||
const globalStore = GlobalStore();
|
||||
|
||||
interface DialogProps {
|
||||
userName: string;
|
||||
}
|
||||
const drawerVisiable = ref();
|
||||
const loading = ref();
|
||||
|
||||
const form = reactive({
|
||||
userName: '',
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const acceptParams = (params: DialogProps): void => {
|
||||
form.userName = params.userName;
|
||||
drawerVisiable.value = true;
|
||||
};
|
||||
|
||||
const onSaveUserName = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
ElMessageBox.confirm(i18n.global.t('setting.userChangeHelper'), i18n.global.t('setting.userChange'), {
|
||||
confirmButtonText: i18n.global.t('commons.button.confirm'),
|
||||
cancelButtonText: i18n.global.t('commons.button.cancel'),
|
||||
type: 'info',
|
||||
}).then(async () => {
|
||||
await updateSetting({ key: 'UserName', value: form.userName })
|
||||
.then(async () => {
|
||||
await logOutApi();
|
||||
loading.value = false;
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
router.push({ name: 'entrance', params: { code: globalStore.entrance } });
|
||||
globalStore.setLogStatus(false);
|
||||
return;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
drawerVisiable.value = false;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -4,11 +4,18 @@
|
|||
<template #header>
|
||||
<DrawerHeader :header="$t('setting.entrance')" :back="handleClose" />
|
||||
</template>
|
||||
<el-form label-position="top" @submit.prevent v-loading="loading">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
label-position="top"
|
||||
:model="form"
|
||||
@submit.prevent
|
||||
v-loading="loading"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="22">
|
||||
<el-form-item :label="$t('setting.entrance')" prop="days">
|
||||
<el-input clearable v-model="securityEntrance">
|
||||
<el-form-item :label="$t('setting.entrance')" prop="securityEntrance">
|
||||
<el-input clearable v-model="form.securityEntrance">
|
||||
<template #append>
|
||||
<el-button @click="random" icon="RefreshRight"></el-button>
|
||||
</template>
|
||||
|
|
@ -16,9 +23,6 @@
|
|||
<span class="input-help">
|
||||
{{ $t('setting.entranceInputHelper') }}
|
||||
</span>
|
||||
<span class="input-error" v-if="codeError">
|
||||
{{ $t('setting.entranceError') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -26,7 +30,7 @@
|
|||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button :disabled="loading" type="primary" @click="submitEntrance">
|
||||
<el-button :disabled="loading" type="primary" @click="submitEntrance(formRef)">
|
||||
{{ $t('commons.button.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
|
|
@ -35,12 +39,13 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import i18n from '@/lang';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
import { updateSetting } from '@/api/modules/setting';
|
||||
import { GlobalStore } from '@/store';
|
||||
import { getRandomStr } from '@/utils/util';
|
||||
import { FormInstance } from 'element-plus';
|
||||
const globalStore = GlobalStore();
|
||||
|
||||
const emit = defineEmits<{ (e: 'search'): void }>();
|
||||
|
|
@ -48,44 +53,58 @@ const emit = defineEmits<{ (e: 'search'): void }>();
|
|||
interface DialogProps {
|
||||
securityEntrance: string;
|
||||
}
|
||||
const securityEntrance = ref();
|
||||
const drawerVisiable = ref();
|
||||
const loading = ref();
|
||||
const codeError = ref();
|
||||
|
||||
const form = reactive({
|
||||
securityEntrance: '',
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const rules = reactive({
|
||||
securityEntrance: [{ validator: checkSecurityEntrance, trigger: 'blur' }],
|
||||
});
|
||||
|
||||
function checkSecurityEntrance(rule: any, value: any, callback: any) {
|
||||
if (form.securityEntrance !== '') {
|
||||
const reg = /^[A-Za-z0-9]{6,10}$/;
|
||||
if (!reg.test(form.securityEntrance)) {
|
||||
return callback(new Error(i18n.global.t('setting.entranceError')));
|
||||
}
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
||||
const acceptParams = (params: DialogProps): void => {
|
||||
securityEntrance.value = params.securityEntrance;
|
||||
form.securityEntrance = params.securityEntrance;
|
||||
drawerVisiable.value = true;
|
||||
};
|
||||
|
||||
const random = async () => {
|
||||
securityEntrance.value = getRandomStr(10);
|
||||
form.securityEntrance = getRandomStr(10);
|
||||
};
|
||||
|
||||
const submitEntrance = async () => {
|
||||
if (securityEntrance.value !== '') {
|
||||
const reg = /^[A-Za-z0-9]{6,10}$/;
|
||||
if (!reg.test(securityEntrance.value)) {
|
||||
codeError.value = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
let param = {
|
||||
key: 'SecurityEntrance',
|
||||
value: securityEntrance.value,
|
||||
};
|
||||
loading.value = true;
|
||||
await updateSetting(param)
|
||||
.then(() => {
|
||||
globalStore.entrance = securityEntrance.value;
|
||||
loading.value = false;
|
||||
drawerVisiable.value = false;
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
emit('search');
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
const submitEntrance = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
let param = {
|
||||
key: 'SecurityEntrance',
|
||||
value: form.securityEntrance,
|
||||
};
|
||||
loading.value = true;
|
||||
await updateSetting(param)
|
||||
.then(() => {
|
||||
globalStore.entrance = form.securityEntrance;
|
||||
loading.value = false;
|
||||
drawerVisiable.value = false;
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
emit('search');
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
|
|
@ -96,9 +115,3 @@ defineExpose({
|
|||
acceptParams,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.margintop {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,19 +2,15 @@
|
|||
<div>
|
||||
<LayoutContent v-loading="loading" :title="$t('setting.safe')" :divider="true">
|
||||
<template #main>
|
||||
<el-form :model="form" ref="panelFormRef" v-loading="loading" label-position="left" label-width="180px">
|
||||
<el-form :model="form" v-loading="loading" label-position="left" label-width="180px">
|
||||
<el-row>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('setting.panelPort')" :rules="Rules.port" prop="serverPort">
|
||||
<el-input clearable v-model.number="form.serverPort">
|
||||
<el-form-item :label="$t('setting.panelPort')" prop="serverPort">
|
||||
<el-input disabled v-model.number="form.serverPort">
|
||||
<template #append>
|
||||
<el-button
|
||||
style="width: 85px"
|
||||
@click="onSavePort(panelFormRef, 'ServerPort', form.serverPort)"
|
||||
icon="Collection"
|
||||
>
|
||||
{{ $t('commons.button.save') }}
|
||||
<el-button @click="onChangePort" icon="Setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
|
|
@ -28,14 +24,14 @@
|
|||
v-model="form.securityEntrance"
|
||||
>
|
||||
<template #append>
|
||||
<el-button style="width: 85px" @click="onChangeEntrance" icon="Setting">
|
||||
<el-button @click="onChangeEntrance" icon="Setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input disabled v-if="!form.securityEntrance" v-model="unset">
|
||||
<template #append>
|
||||
<el-button style="width: 85px" @click="onChangeEntrance" icon="Setting">
|
||||
<el-button @click="onChangeEntrance" icon="Setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</template>
|
||||
|
|
@ -46,7 +42,7 @@
|
|||
<el-form-item :label="$t('setting.expirationTime')" prop="expirationTime">
|
||||
<el-input disabled v-model="form.expirationTime">
|
||||
<template #append>
|
||||
<el-button style="width: 85px" @click="onChangeExpirationTime" icon="Setting">
|
||||
<el-button @click="onChangeExpirationTime" icon="Setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</template>
|
||||
|
|
@ -62,9 +58,7 @@
|
|||
</el-form-item>
|
||||
<el-form-item :label="$t('setting.complexity')" prop="complexityVerification">
|
||||
<el-switch
|
||||
@change="
|
||||
onSave(panelFormRef, 'ComplexityVerification', form.complexityVerification)
|
||||
"
|
||||
@change="onSaveComplexity"
|
||||
v-model="form.complexityVerification"
|
||||
active-value="enable"
|
||||
inactive-value="disable"
|
||||
|
|
@ -112,6 +106,7 @@
|
|||
</template>
|
||||
</LayoutContent>
|
||||
|
||||
<PortSetting ref="portRef" />
|
||||
<MfaSetting ref="mfaRef" @search="search" />
|
||||
<SSLSetting ref="sslRef" @search="search" />
|
||||
<EntranceSetting ref="entranceRef" @search="search" />
|
||||
|
|
@ -123,25 +118,19 @@
|
|||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElForm, ElMessageBox } from 'element-plus';
|
||||
import LayoutContent from '@/layout/layout-content.vue';
|
||||
import PortSetting from '@/views/setting/safe/port/index.vue';
|
||||
import SSLSetting from '@/views/setting/safe/ssl/index.vue';
|
||||
import MfaSetting from '@/views/setting/safe/mfa/index.vue';
|
||||
import TimeoutSetting from '@/views/setting/safe/timeout/index.vue';
|
||||
import EntranceSetting from '@/views/setting/safe/entrance/index.vue';
|
||||
import {
|
||||
updateSetting,
|
||||
getSettingInfo,
|
||||
updatePort,
|
||||
getSystemAvailable,
|
||||
updateSSL,
|
||||
loadSSLInfo,
|
||||
} from '@/api/modules/setting';
|
||||
import { updateSetting, getSettingInfo, getSystemAvailable, updateSSL, loadSSLInfo } from '@/api/modules/setting';
|
||||
import i18n from '@/lang';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
import { Setting } from '@/api/interface/setting';
|
||||
|
||||
const loading = ref(false);
|
||||
const entranceRef = ref();
|
||||
const portRef = ref();
|
||||
const timeoutref = ref();
|
||||
const mfaRef = ref();
|
||||
|
||||
|
|
@ -155,10 +144,9 @@ const form = reactive({
|
|||
securityEntrance: '',
|
||||
expirationDays: 0,
|
||||
expirationTime: '',
|
||||
complexityVerification: '',
|
||||
complexityVerification: 'disable',
|
||||
mfaStatus: 'disable',
|
||||
});
|
||||
type FormInstance = InstanceType<typeof ElForm>;
|
||||
|
||||
const unset = ref(i18n.global.t('setting.unSetting'));
|
||||
|
||||
|
|
@ -176,20 +164,11 @@ const search = async () => {
|
|||
form.complexityVerification = res.data.complexityVerification;
|
||||
form.mfaStatus = res.data.mfaStatus;
|
||||
};
|
||||
const panelFormRef = ref<FormInstance>();
|
||||
|
||||
const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
|
||||
if (!formEl) return;
|
||||
const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
if (val === '') {
|
||||
return;
|
||||
}
|
||||
const onSaveComplexity = async () => {
|
||||
let param = {
|
||||
key: key,
|
||||
value: val + '',
|
||||
key: 'ComplexityVerification',
|
||||
value: form.complexityVerification,
|
||||
};
|
||||
loading.value = true;
|
||||
await updateSetting(param)
|
||||
|
|
@ -202,41 +181,7 @@ const onSave = async (formEl: FormInstance | undefined, key: string, val: any) =
|
|||
loading.value = false;
|
||||
});
|
||||
};
|
||||
function callback(error: any) {
|
||||
if (error) {
|
||||
return error.message;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
const onSavePort = async (formEl: FormInstance | undefined, key: string, val: any) => {
|
||||
if (!formEl) return;
|
||||
const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
ElMessageBox.confirm(i18n.global.t('setting.portChangeHelper'), i18n.global.t('setting.portChange'), {
|
||||
confirmButtonText: i18n.global.t('commons.button.confirm'),
|
||||
cancelButtonText: i18n.global.t('commons.button.cancel'),
|
||||
type: 'info',
|
||||
}).then(async () => {
|
||||
loading.value = true;
|
||||
let param = {
|
||||
serverPort: val,
|
||||
};
|
||||
await updatePort(param)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
let href = window.location.href;
|
||||
let ip = href.split('//')[1].split(':')[0];
|
||||
window.open(`${href.split('//')[0]}//${ip}:${val}/`, '_self');
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleMFA = async () => {
|
||||
if (form.mfaStatus === 'enable') {
|
||||
mfaRef.value.acceptParams();
|
||||
|
|
@ -257,6 +202,9 @@ const handleMFA = async () => {
|
|||
const onChangeEntrance = async () => {
|
||||
entranceRef.value.acceptParams({ securityEntrance: form.securityEntrance });
|
||||
};
|
||||
const onChangePort = async () => {
|
||||
portRef.value.acceptParams({ serverPort: form.serverPort });
|
||||
};
|
||||
const handleSSL = async () => {
|
||||
if (form.ssl === 'enable') {
|
||||
let params = {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('setting.panelPort')" :back="handleClose" />
|
||||
</template>
|
||||
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="22">
|
||||
<el-form-item :label="$t('setting.panelPort')" prop="serverPort" :rules="Rules.port">
|
||||
<el-input clearable v-model.number="form.serverPort" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button :disabled="loading" type="primary" @click="onSavePort(formRef)">
|
||||
{{ $t('commons.button.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import i18n from '@/lang';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
import { updatePort } from '@/api/modules/setting';
|
||||
import { ElMessageBox, FormInstance } from 'element-plus';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
|
||||
interface DialogProps {
|
||||
serverPort: number;
|
||||
}
|
||||
const drawerVisiable = ref();
|
||||
const loading = ref();
|
||||
|
||||
const form = reactive({
|
||||
serverPort: 9999,
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const acceptParams = (params: DialogProps): void => {
|
||||
form.serverPort = params.serverPort;
|
||||
drawerVisiable.value = true;
|
||||
};
|
||||
|
||||
const onSavePort = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
ElMessageBox.confirm(i18n.global.t('setting.portChangeHelper'), i18n.global.t('setting.portChange'), {
|
||||
confirmButtonText: i18n.global.t('commons.button.confirm'),
|
||||
cancelButtonText: i18n.global.t('commons.button.cancel'),
|
||||
type: 'info',
|
||||
}).then(async () => {
|
||||
loading.value = true;
|
||||
let param = {
|
||||
serverPort: form.serverPort,
|
||||
};
|
||||
await updatePort(param)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
let href = window.location.href;
|
||||
let ip = href.split('//')[1].split(':')[0];
|
||||
window.open(`${href.split('//')[0]}//${ip}:${form.serverPort}/`, '_self');
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
drawerVisiable.value = false;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -186,7 +186,6 @@ const onDownload = async () => {
|
|||
};
|
||||
|
||||
const onSaveSSL = async (formEl: FormInstance | undefined) => {
|
||||
onDownload();
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
|
|
|
|||
|
|
@ -81,9 +81,3 @@ defineExpose({
|
|||
acceptParams,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.margintop {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue