zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: system-setting

Browse Source
This commit is contained in:
wangdan-fit2cloud 2025-06-11 17:41:53 +08:00
parent ba0dcf6b1b
commit a9381ab914
21 changed files with 393 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
ui/src/api/systemSettings/auth-setting.ts → ui/src/api/system-settings/auth-setting.ts
View File

0
ui/src/api/systemSettings/email-setting.ts → ui/src/api/system-settings/email-setting.ts
View File

0
ui/src/api/systemSettings/platform-source.ts → ui/src/api/system-settings/platform-source.ts
View File

0
ui/src/api/systemSettings/theme.ts → ui/src/api/system-settings/theme.ts
View File

2
ui/src/layout/components/sidebar/SidebarItem.vue
View File

@ -88,7 +88,7 @@ const menuIcon = computed(() => {
} }
} }
:deep(.el-sub-menu__title) { :deep(.el-sub-menu__title) {
padding: 13px 12px 13px 16px !important; padding: 13px 12px 13px 10px !important;
&:hover { &:hover {
background: none; background: none;
color: var(--el-color-primary); color: var(--el-color-primary);

32
ui/src/router/modules/system.ts
View File

@ -46,7 +46,7 @@ const systemRouter = {
component: () => import('@/views/role/index.vue'), component: () => import('@/views/role/index.vue'),
}, },
{ {
path:'/system/setting', path: '/system/setting',
name: 'setting', name: 'setting',
meta: { meta: {
icon: 'app-setting', icon: 'app-setting',
@ -58,13 +58,13 @@ const systemRouter = {
}, },
children: [ children: [
{ {
path: '/system/theme', path: '/system/setting/theme',
name: 'theme', name: 'theme',
meta: { meta: {
title: 'views.system.theme.title', title: 'views.system.theme.title',
activeMenu: '/setting', activeMenu: '/system',
parentPath: '/setting', parentPath: '/system',
parentName: 'setting', parentName: 'system',
//permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND') //permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND')
}, },
component: () => import('@/views/theme/index.vue'), component: () => import('@/views/theme/index.vue'),
@ -74,27 +74,27 @@ const systemRouter = {
name: 'authentication', name: 'authentication',
meta: { meta: {
title: 'views.system.authentication.title', title: 'views.system.authentication.title',
activeMenu: '/setting', activeMenu: '/system',
parentPath: '/setting', parentPath: '/system',
parentName: 'setting', parentName: 'system',
//permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND') //permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND')
}, },
component: () => import('@/views/authentication/index.vue') component: () => import('@/views/authentication/index.vue'),
}, },
{ {
path: '/system/email', path: '/system/email',
name: 'email', name: 'email',
meta: { meta: {
title: 'views.system.email.title', title: 'views.system.email.title',
activeMenu: '/setting', activeMenu: '/system',
parentPath: '/setting', parentPath: '/system',
parentName: 'setting', parentName: 'system',
//permission: new Role('ADMIN') //permission: new Role('ADMIN')
}, },
component: () => import('@/views/email/index.vue') component: () => import('@/views/email/index.vue'),
} },
] ],
} },
], ],
} }

2
ui/src/stores/modules/theme.ts
View File

@ -1,7 +1,7 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { cloneDeep } from 'lodash' import { cloneDeep } from 'lodash'
import { useElementPlusTheme } from 'use-element-plus-theme' import { useElementPlusTheme } from 'use-element-plus-theme'
import ThemeApi from '@/api/systemSettings/theme' import ThemeApi from '@/api/system-settings/theme'
import type {Ref} from "vue"; import type {Ref} from "vue";
export interface themeStateTypes { export interface themeStateTypes {
themeInfo: any themeInfo: any

4
ui/src/stores/modules/user.ts
View File

@ -3,8 +3,8 @@ import { type Ref } from 'vue'
import type { User } from '@/api/type/user' import type { User } from '@/api/type/user'
import UserApi from '@/api/user/user' import UserApi from '@/api/user/user'
import LoginApi from '@/api/user/login' import LoginApi from '@/api/user/login'
import { cloneDeep } from 'lodash' import {cloneDeep} from 'lodash'
import ThemeApi from '@/api/systemSettings/theme' import ThemeApi from '@/api/system-settings/theme'
// import { defaultPlatformSetting } from '@/utils/theme' // import { defaultPlatformSetting } from '@/utils/theme'
import { useLocalStorage } from '@vueuse/core' import { useLocalStorage } from '@vueuse/core'
import { localeConfigKey, getBrowserLang } from '@/locales/index' import { localeConfigKey, getBrowserLang } from '@/locales/index'

4
ui/src/styles/app.scss
View File

@ -395,6 +395,10 @@ h5 {
background: var(--el-color-success); background: var(--el-color-success);
} }
.layout-bg {
background: var(--app-layout-bg-color);
}
/* /*
标题前带竖线样式 标题前带竖线样式
*/ */

23
ui/src/styles/component.scss
View File

@ -150,3 +150,26 @@
padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 2); padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 2);
} }
} }
// radio-button-group
.app-radio-button-group {
border: 1px solid var(--app-border-color-dark);
border-radius: var(--el-border-radius-base);
.el-radio-button {
padding: 3px;
}
.el-radio-button__inner {
border: none !important;
border-radius: var(--el-border-radius-base) !important;
padding: 5px 8px;
font-weight: 400;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
color: var(--el-color-primary) !important;
background: var(--el-color-primary-light-9) !important;
border: none !important;
box-shadow: none !important;
font-weight: 500;
}
}

2
ui/src/views/authentication/component/CAS.vue
View File

@ -54,7 +54,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, watch, onMounted } from 'vue' import { reactive, ref, watch, onMounted } from 'vue'
import authApi from '@/api/systemSettings/auth-setting' import authApi from '@/api/system-settings/auth-setting'
import type { FormInstance, FormRules } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
import { t } from '@/locales' import { t } from '@/locales'
import { MsgSuccess } from '@/utils/message' import { MsgSuccess } from '@/utils/message'

2
ui/src/views/authentication/component/EditModal.vue
View File

@ -52,7 +52,7 @@ template
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { ElForm } from 'element-plus' import { ElForm } from 'element-plus'
import platformApi from '@/api/systemSettings/platform-source' import platformApi from '@/api/system-settings/platform-source'
import { MsgError, MsgSuccess } from '@/utils/message' import { MsgError, MsgSuccess } from '@/utils/message'
import { t } from '@/locales' import { t } from '@/locales'

2
ui/src/views/authentication/component/LDAP.vue
View File

@ -79,7 +79,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, watch, onMounted } from 'vue' import { reactive, ref, watch, onMounted } from 'vue'
import authApi from '@/api/systemSettings/auth-setting' import authApi from '@/api/system-settings/auth-setting'
import type { FormInstance, FormRules } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
import { t } from '@/locales' import { t } from '@/locales'
import { MsgSuccess } from '@/utils/message' import { MsgSuccess } from '@/utils/message'

2
ui/src/views/authentication/component/OAuth2.vue
View File

@ -100,7 +100,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted } from 'vue' import { reactive, ref, onMounted } from 'vue'
import authApi from '@/api/systemSettings/auth-setting' import authApi from '@/api/system-settings/auth-setting'
import type { FormInstance, FormRules } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
import { t } from '@/locales' import { t } from '@/locales'
import { MsgSuccess } from '@/utils/message' import { MsgSuccess } from '@/utils/message'

2
ui/src/views/authentication/component/OIDC.vue
View File

@ -97,7 +97,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, watch, onMounted } from 'vue' import { reactive, ref, watch, onMounted } from 'vue'
import authApi from '@/api/systemSettings/auth-setting' import authApi from '@/api/system-settings/auth-setting'
import type { FormInstance, FormRules } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
import { t } from '@/locales' import { t } from '@/locales'
import { MsgSuccess } from '@/utils/message' import { MsgSuccess } from '@/utils/message'

2
ui/src/views/authentication/component/SCAN.vue
View File

@ -89,7 +89,7 @@
import { reactive, ref, onMounted } from 'vue' import { reactive, ref, onMounted } from 'vue'
import { copyClick } from '@/utils/clipboard' import { copyClick } from '@/utils/clipboard'
import EditModel from './EditModal.vue' import EditModel from './EditModal.vue'
import platformApi from '@/api/systemSettings/platform-source' import platformApi from '@/api/system-settings/platform-source'
import { MsgError, MsgSuccess } from '@/utils/message' import { MsgError, MsgSuccess } from '@/utils/message'
import { t } from '@/locales' import { t } from '@/locales'

15
ui/src/views/authentication/index.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="authentication-setting p-16-24"> <div class="authentication-setting p-16-24">
<h4>{{ $t('views.system.authentication.title') }}</h4> <h4 class="mb-16">{{ $t('views.system.authentication.title') }}</h4>
<el-tabs v-model="activeName" class="mt-4" @tab-click="handleClick"> <el-tabs v-model="activeName" class="mt-4" @tab-click="handleClick">
<template v-for="(item, index) in tabList" :key="index"> <template v-for="(item, index) in tabList" :key="index">
<el-tab-pane :label="item.label" :name="item.name"> <el-tab-pane :label="item.label" :name="item.name">
@ -29,28 +30,28 @@ const tabList = [
{ {
label: t('views.system.authentication.ldap.title'), label: t('views.system.authentication.ldap.title'),
name: 'LDAP', name: 'LDAP',
component: LDAP component: LDAP,
}, },
{ {
label: t('views.system.authentication.cas.title'), label: t('views.system.authentication.cas.title'),
name: 'CAS', name: 'CAS',
component: CAS component: CAS,
}, },
{ {
label: t('views.system.authentication.oidc.title'), label: t('views.system.authentication.oidc.title'),
name: 'OIDC', name: 'OIDC',
component: OIDC component: OIDC,
}, },
{ {
label: t('views.system.authentication.oauth2.title'), label: t('views.system.authentication.oauth2.title'),
name: 'OAuth2', name: 'OAuth2',
component: OAuth2 component: OAuth2,
}, },
{ {
label: t('views.system.authentication.scanTheQRCode.title'), label: t('views.system.authentication.scanTheQRCode.title'),
name: 'SCAN', name: 'SCAN',
component: SCAN component: SCAN,
} },
] ]
function handleClick() {} function handleClick() {}

155
ui/src/views/email/index.vue
View File

@ -1,77 +1,76 @@
<template> <template>
<div class="email-setting"> <div class="email-setting p-16-24">
<h4 class="p-16-24">{{ $t('views.system.email.title') }}</h4> <h4 class="mb-16">{{ $t('views.system.email.title') }}</h4>
<el-scrollbar> <el-card style="--el-card-padding: 16px" v-loading="loading">
<div class="p-24" v-loading="loading"> <el-scrollbar>
<el-form <div class="email-setting__main p-16">
ref="emailFormRef" <el-form
:rules="rules" ref="emailFormRef"
:model="form" :rules="rules"
label-position="top" :model="form"
require-asterisk-position="right" label-position="top"
> require-asterisk-position="right"
<el-form-item :label="$t('views.system.email.smtpHost')" prop="email_host"> >
<el-input <el-form-item :label="$t('views.system.email.smtpHost')" prop="email_host">
v-model="form.email_host" <el-input
:placeholder="$t('views.system.email.smtpHostPlaceholder')" v-model="form.email_host"
/> :placeholder="$t('views.system.email.smtpHostPlaceholder')"
</el-form-item> />
<el-form-item :label="$t('views.system.email.smtpPort')" prop="email_port"> </el-form-item>
<el-input <el-form-item :label="$t('views.system.email.smtpPort')" prop="email_port">
v-model="form.email_port" <el-input
:placeholder="$t('views.system.email.smtpPortPlaceholder')" v-model="form.email_port"
/> :placeholder="$t('views.system.email.smtpPortPlaceholder')"
</el-form-item> />
<el-form-item :label="$t('views.system.email.smtpUser')" prop="email_host_user"> </el-form-item>
<el-input <el-form-item :label="$t('views.system.email.smtpUser')" prop="email_host_user">
v-model="form.email_host_user" <el-input
:placeholder="$t('views.system.email.smtpUserPlaceholder')" v-model="form.email_host_user"
/> :placeholder="$t('views.system.email.smtpUserPlaceholder')"
</el-form-item> />
<el-form-item :label="$t('views.system.email.sendEmail')" prop="from_email"> </el-form-item>
<el-input <el-form-item :label="$t('views.system.email.sendEmail')" prop="from_email">
v-model="form.from_email" <el-input
:placeholder="$t('views.system.email.sendEmailPlaceholder')" v-model="form.from_email"
/> :placeholder="$t('views.system.email.sendEmailPlaceholder')"
</el-form-item> />
<el-form-item :label="$t('views.system.password')" prop="email_host_password"> </el-form-item>
<el-input <el-form-item :label="$t('views.system.password')" prop="email_host_password">
v-model="form.email_host_password" <el-input
:placeholder="$t('views.system.email.smtpPasswordPlaceholder')" v-model="form.email_host_password"
show-password :placeholder="$t('views.system.email.smtpPasswordPlaceholder')"
/> show-password
</el-form-item> />
<el-form-item> </el-form-item>
<el-checkbox v-model="form.email_use_ssl" <el-form-item>
>{{ $t('views.system.email.enableSSL') }} <el-checkbox v-model="form.email_use_ssl"
</el-checkbox> >{{ $t('views.system.email.enableSSL') }}
</el-form-item> </el-checkbox>
<el-form-item> </el-form-item>
<el-checkbox v-model="form.email_use_tls" <el-form-item>
>{{ $t('views.system.email.enableTLS') }} <el-checkbox v-model="form.email_use_tls"
</el-checkbox> >{{ $t('views.system.email.enableTLS') }}
</el-form-item> </el-checkbox>
<el-button @click="submit(emailFormRef, 'test')" :disabled="loading"> </el-form-item>
{{ $t('views.system.test') }} <el-button @click="submit(emailFormRef)" type="primary" :disabled="loading">
</el-button> {{ $t('common.save') }}
</el-form> </el-button>
<el-button @click="submit(emailFormRef, 'test')" :disabled="loading">
<div class="text-right"> {{ $t('views.system.test') }}
<el-button @click="submit(emailFormRef)" type="primary" :disabled="loading"> </el-button>
{{ $t('common.save') }} </el-form>
</el-button>
</div> </div>
</div> </el-scrollbar>
</el-scrollbar> </el-card>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {reactive, ref, watch, onMounted} from 'vue' import { reactive, ref, watch, onMounted } from 'vue'
import emailApi from '@/api/systemSettings/email-setting' import emailApi from '@/api/system-settings/email-setting'
import type {FormInstance, FormRules} from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
import {MsgSuccess} from '@/utils/message' import { MsgSuccess } from '@/utils/message'
import {t} from '@/locales' import { t } from '@/locales'
const form = ref<any>({ const form = ref<any>({
email_host: '', email_host: '',
@ -80,7 +79,7 @@ const form = ref<any>({
email_host_password: '', email_host_password: '',
email_use_tls: false, email_use_tls: false,
email_use_ssl: false, email_use_ssl: false,
from_email: '' from_email: '',
}) })
const emailFormRef = ref() const emailFormRef = ref()
@ -89,20 +88,20 @@ const loading = ref(false)
const rules = reactive<FormRules<any>>({ const rules = reactive<FormRules<any>>({
email_host: [ email_host: [
{required: true, message: t('views.system.email.smtpHostPlaceholder'), trigger: 'blur'} { required: true, message: t('views.system.email.smtpHostPlaceholder'), trigger: 'blur' },
], ],
email_port: [ email_port: [
{required: true, message: t('views.system.email.smtpPortPlaceholder'), trigger: 'blur'} { required: true, message: t('views.system.email.smtpPortPlaceholder'), trigger: 'blur' },
], ],
email_host_user: [ email_host_user: [
{required: true, message: t('views.system.email.smtpUserPlaceholder'), trigger: 'blur'} { required: true, message: t('views.system.email.smtpUserPlaceholder'), trigger: 'blur' },
], ],
email_host_password: [ email_host_password: [
{required: true, message: t('views.system.email.smtpPasswordPlaceholder'), trigger: 'blur'} { required: true, message: t('views.system.email.smtpPasswordPlaceholder'), trigger: 'blur' },
], ],
from_email: [ from_email: [
{required: true, message: t('views.system.email.sendEmailPlaceholder'), trigger: 'blur'} { required: true, message: t('views.system.email.sendEmailPlaceholder'), trigger: 'blur' },
] ],
}) })
const submit = async (formEl: FormInstance | undefined, test?: string) => { const submit = async (formEl: FormInstance | undefined, test?: string) => {
@ -136,8 +135,10 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.email-setting { .email-setting {
width: 70%; &__main {
margin: 0 auto; width: 70%;
margin: 0 auto;
}
:deep(.el-checkbox__label) { :deep(.el-checkbox__label) {
font-weight: 400; font-weight: 400;

2
ui/src/views/login/index.vue
View File

@ -127,7 +127,7 @@ import type {LoginRequest} from '@/api/type/login'
import LoginContainer from '@/views/login/components/LoginContainer.vue' import LoginContainer from '@/views/login/components/LoginContainer.vue'
import LoginLayout from '@/views/login/components/LoginLayout.vue' import LoginLayout from '@/views/login/components/LoginLayout.vue'
import loginApi from '@/api/user/login' import loginApi from '@/api/user/login'
import authApi from '@/api/systemSettings/auth-setting' import authApi from '@/api/system-settings/auth-setting'
import {t, getBrowserLang} from '@/locales' import {t, getBrowserLang} from '@/locales'
import useStore from '@/stores' import useStore from '@/stores'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'

2
ui/src/views/theme/LoginPreview.vue
View File

@ -95,7 +95,7 @@ const fileURL = computed(() => {
} }
.header { .header {
background: var(--el-disabled-bg-color); background: #eceeef;
height: 38px; height: 38px;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
position: relative; position: relative;

510
ui/src/views/theme/index.vue
View File

@ -1,275 +1,269 @@
<template> <template>
<div class="theme-setting" v-loading="loading"> <div class="theme-setting p-16-24" v-loading="loading">
<h4 class="p-16-24">{{ $t('views.system.theme.title') }}</h4> <h4 class="mb-16">{{ $t('views.system.theme.title') }}</h4>
<el-scrollbar> <el-scrollbar>
<div class="p-24 pt-0"> <el-card style="--el-card-padding: 16px">
<div class="app-card p-24"> <h5 class="mb-16">{{ $t('views.system.theme.platformDisplayTheme') }}</h5>
<h5 class="mb-16">{{ $t('views.system.theme.platformDisplayTheme') }}</h5> <el-radio-group
<el-radio-group v-model="themeRadio"
v-model="themeRadio" class="app-radio-button-group"
class="app-radio-button-group" @change="changeThemeHandle"
@change="changeThemeHandle" >
> <template v-for="(item, index) in themeList" :key="index">
<template v-for="(item, index) in themeList" :key="index"> <el-radio-button :label="item.label" :value="item.value" />
<el-radio-button :label="item.label" :value="item.value"/> </template>
</template> <el-radio-button :label="$t('views.system.theme.custom')" value="custom" />
<el-radio-button :label="$t('views.system.theme.custom')" value="custom"/> </el-radio-group>
</el-radio-group> <div v-if="themeRadio === 'custom'">
<div v-if="themeRadio === 'custom'"> <h5 class="mt-16 mb-8">{{ $t('views.system.theme.customTheme') }}</h5>
<h5 class="mt-16 mb-8">{{ $t('views.system.theme.customTheme') }}</h5> <el-color-picker v-model="customColor" @change="customColorHandle" />
<el-color-picker v-model="customColor" @change="customColorHandle"/>
</div>
</div> </div>
<div class="app-card p-24 mt-16"> </el-card>
<h5 class="mb-16">{{ $t('views.system.theme.platformLoginSettings') }}</h5>
<el-card shadow="never" class="layout-bg">
<div class="flex-between">
<h5 class="mb-16">{{ $t('views.system.theme.pagePreview') }}</h5>
<el-button type="primary" link @click="resetForm('login')">
{{ $t('views.system.theme.restoreDefaults') }}
</el-button>
</div>
<el-scrollbar>
<div class="theme-preview">
<el-row :gutter="8">
<el-col :span="16">
<LoginPreview :data="themeForm"/>
</el-col>
<el-col :span="8">
<div class="theme-form">
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{ $t('views.system.theme.websiteLogo') }}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="
(file: any, fileList: any) => onChange(file, fileList, 'icon')
"
>
<el-button size="small">
{{ $t('views.system.theme.replacePicture') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small"
>{{ $t('views.system.theme.websiteLogoTip') }}
</el-text>
</el-card>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter"> {{ $t('views.system.theme.loginLogo') }}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="
(file: any, fileList: any) => onChange(file, fileList, 'loginLogo')
"
>
<el-button size="small">
{{ $t('views.system.theme.replacePicture') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small"
>{{ $t('views.system.theme.loginLogoTip') }}
</el-text>
</el-card>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.system.theme.loginBackground')
}}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="
(file: any, fileList: any) => onChange(file, fileList, 'loginImage')
"
>
<el-button size="small">
{{ $t('views.system.theme.replacePicture') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small">
{{ $t('views.system.theme.loginBackgroundTip') }}
</el-text>
</el-card>
<el-form <el-card style="--el-card-padding: 16px" class="mt-16">
ref="themeFormRef" <h5 class="mb-16">{{ $t('views.system.theme.platformLoginSettings') }}</h5>
:model="themeForm" <el-card shadow="never" class="layout-bg">
label-position="top" <div class="flex-between">
require-asterisk-position="right" <h5 class="mb-16">{{ $t('views.system.theme.pagePreview') }}</h5>
:rules="rules" <el-button type="primary" link @click="resetForm('login')">
@submit.prevent {{ $t('views.system.theme.restoreDefaults') }}
> </el-button>
<el-form-item :label="$t('views.system.theme.websiteName')" prop="title"> </div>
<el-input <el-scrollbar>
v-model="themeForm.title" <div class="theme-preview">
:placeholder="$t('views.system.theme.websiteNamePlaceholder')" <el-row :gutter="8">
> <el-col :span="16">
</el-input> <LoginPreview :data="themeForm" />
<el-text type="info">{{ </el-col>
$t('views.system.theme.websiteNameTip') <el-col :span="8">
}} <div class="theme-form">
</el-text> <el-card shadow="never" class="mb-8">
</el-form-item> <div class="flex-between mb-8">
<el-form-item :label="$t('views.system.theme.websiteSlogan')" prop="slogan"> <span class="lighter">{{ $t('views.system.theme.websiteLogo') }}</span>
<el-input <el-upload
v-model="themeForm.slogan" ref="uploadRef"
:placeholder="$t('views.system.theme.websiteSloganPlaceholder')" action="#"
maxlength="64" :auto-upload="false"
show-word-limit :show-file-list="false"
> accept="image/jpeg, image/png, image/gif"
</el-input> :on-change="
<el-text type="info">{{ (file: any, fileList: any) => onChange(file, fileList, 'icon')
$t('views.system.theme.websiteSloganTip') "
}} >
</el-text> <el-button size="small">
</el-form-item> {{ $t('views.system.theme.replacePicture') }}
</el-form> </el-button>
</div> </el-upload>
</el-col> </div>
</el-row> <el-text type="info" size="small"
</div> >{{ $t('views.system.theme.websiteLogoTip') }}
</el-scrollbar> </el-text>
<div class="mt-16"> </el-card>
<el-text type="info">{{ $t('views.system.theme.logoDefaultTip') }}</el-text> <el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter"> {{ $t('views.system.theme.loginLogo') }}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="
(file: any, fileList: any) => onChange(file, fileList, 'loginLogo')
"
>
<el-button size="small">
{{ $t('views.system.theme.replacePicture') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small"
>{{ $t('views.system.theme.loginLogoTip') }}
</el-text>
</el-card>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{ $t('views.system.theme.loginBackground') }}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="
(file: any, fileList: any) => onChange(file, fileList, 'loginImage')
"
>
<el-button size="small">
{{ $t('views.system.theme.replacePicture') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small">
{{ $t('views.system.theme.loginBackgroundTip') }}
</el-text>
</el-card>
<el-form
ref="themeFormRef"
:model="themeForm"
label-position="top"
require-asterisk-position="right"
:rules="rules"
@submit.prevent
>
<el-form-item :label="$t('views.system.theme.websiteName')" prop="title">
<el-input
v-model="themeForm.title"
:placeholder="$t('views.system.theme.websiteNamePlaceholder')"
>
</el-input>
<el-text type="info"
>{{ $t('views.system.theme.websiteNameTip') }}
</el-text>
</el-form-item>
<el-form-item :label="$t('views.system.theme.websiteSlogan')" prop="slogan">
<el-input
v-model="themeForm.slogan"
:placeholder="$t('views.system.theme.websiteSloganPlaceholder')"
maxlength="64"
show-word-limit
>
</el-input>
<el-text type="info"
>{{ $t('views.system.theme.websiteSloganTip') }}
</el-text>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</div> </div>
</el-card> </el-scrollbar>
</div> <div class="mt-16">
<div class="app-card p-24 mt-16"> <el-text type="info">{{ $t('views.system.theme.logoDefaultTip') }}</el-text>
<h5 class="mb-16">{{ $t('views.system.theme.platformSetting') }}</h5> </div>
<el-card shadow="never" class="layout-bg"> </el-card>
<div class="flex-between"> </el-card>
<h5 class="mb-16">{{ $t('views.system.theme.pagePreview') }}</h5> <el-card style="--el-card-padding: 16px" class="mt-16">
<el-button type="primary" link @click="resetForm('platform')"> <h5 class="mb-16">{{ $t('views.system.theme.platformSetting') }}</h5>
{{ $t('views.system.theme.restoreDefaults') }} <el-card shadow="never" class="layout-bg">
</el-button> <div class="flex-between">
</div> <h5 class="mb-16">{{ $t('views.system.theme.pagePreview') }}</h5>
<el-scrollbar> <el-button type="primary" link @click="resetForm('platform')">
<div class="theme-preview"> {{ $t('views.system.theme.restoreDefaults') }}
<el-row :gutter="8"> </el-button>
<el-col :span="16"> </div>
<div class="theme-platform mr-16"> <el-scrollbar>
<div <div class="theme-preview">
class="theme-platform-header border-b flex-between" <el-row :gutter="8">
:class="!isDefaultTheme ? 'custom-header' : ''" <el-col :span="16">
> <div class="theme-platform mr-16">
<div class="flex-center h-full"> <div
<div class="app-title-container cursor"> class="theme-platform-header border-b flex-between"
<div class="logo flex-center"> :class="!isDefaultTheme ? 'custom-header' : ''"
<LogoFull height="25px"/> >
</div> <div class="flex-center h-full">
<div class="app-title-container cursor">
<div class="logo flex-center">
<LogoFull height="25px" />
</div> </div>
</div> </div>
<div class="flex-center"> </div>
<AppIcon <div class="flex-center">
iconName="app-github" <AppIcon
class="cursor color-secondary mr-8 ml-8" iconName="app-github"
style="font-size: 20px" class="cursor color-secondary mr-8 ml-8"
v-if="themeForm.showProject" style="font-size: 20px"
></AppIcon> v-if="themeForm.showProject"
<AppIcon ></AppIcon>
iconName="app-user-manual" <AppIcon
class="cursor color-secondary mr-8 ml-8" iconName="app-user-manual"
style="font-size: 20px" class="cursor color-secondary mr-8 ml-8"
v-if="themeForm.showUserManual" style="font-size: 20px"
></AppIcon> v-if="themeForm.showUserManual"
<AppIcon ></AppIcon>
iconName="app-help" <AppIcon
class="cursor color-secondary ml-8" iconName="app-help"
style="font-size: 20px" class="cursor color-secondary ml-8"
v-if="themeForm.showForum" style="font-size: 20px"
></AppIcon> v-if="themeForm.showForum"
</div> ></AppIcon>
</div> </div>
</div> </div>
</el-col> </div>
<el-col :span="8"> </el-col>
<div class="theme-form"> <el-col :span="8">
<div> <div class="theme-form">
<el-checkbox <div>
v-model="themeForm.showUserManual" <el-checkbox
:label="$t('views.system.theme.showUserManual')" v-model="themeForm.showUserManual"
:label="$t('views.system.theme.showUserManual')"
/>
<div class="ml-24">
<el-input
v-model="themeForm.userManualUrl"
:placeholder="$t('views.system.theme.urlPlaceholder')"
/> />
<div class="ml-24">
<el-input
v-model="themeForm.userManualUrl"
:placeholder="$t('views.system.theme.urlPlaceholder')"
/>
</div>
</div>
<div class="mt-4">
<el-checkbox
v-model="themeForm.showForum"
:label="$t('views.system.theme.showForum')"
/>
<div class="ml-24">
<el-input
v-model="themeForm.forumUrl"
:placeholder="$t('views.system.theme.urlPlaceholder')"
/>
</div>
</div>
<div class="mt-4">
<el-checkbox
v-model="themeForm.showProject"
:label="$t('views.system.theme.showProject')"
/>
<div class="ml-24">
<el-input
v-model="themeForm.projectUrl"
:placeholder="$t('views.system.theme.urlPlaceholder')"
/>
</div>
</div> </div>
</div> </div>
</el-col> <div class="mt-4">
</el-row> <el-checkbox
</div> v-model="themeForm.showForum"
</el-scrollbar> :label="$t('views.system.theme.showForum')"
<div class="mt-16"> />
<el-text type="info">{{ $t('views.system.theme.defaultTip') }}</el-text> <div class="ml-24">
<el-input
v-model="themeForm.forumUrl"
:placeholder="$t('views.system.theme.urlPlaceholder')"
/>
</div>
</div>
<div class="mt-4">
<el-checkbox
v-model="themeForm.showProject"
:label="$t('views.system.theme.showProject')"
/>
<div class="ml-24">
<el-input
v-model="themeForm.projectUrl"
:placeholder="$t('views.system.theme.urlPlaceholder')"
/>
</div>
</div>
</div>
</el-col>
</el-row>
</div> </div>
</el-card> </el-scrollbar>
</div> <div class="mt-16">
</div> <el-text type="info">{{ $t('views.system.theme.defaultTip') }}</el-text>
</div>
</el-card>
</el-card>
</el-scrollbar> </el-scrollbar>
<div class="theme-setting__operate w-full p-16-24"> <div class="theme-setting__operate w-full p-16-24">
<el-button @click="resetTheme">{{ $t('views.system.theme.abandonUpdate') }}</el-button> <el-button @click="resetTheme">{{ $t('views.system.theme.abandonUpdate') }}</el-button>
<el-button type="primary" @click="updateTheme(themeFormRef)"> <el-button type="primary" @click="updateTheme(themeFormRef)">
{{ $t('views.system.theme.saveAndApply') }} {{ $t('views.system.theme.saveAndApply') }}
</el-button </el-button>
>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, reactive, onMounted, computed} from 'vue' import { ref, reactive, onMounted, computed } from 'vue'
import {useRouter, onBeforeRouteLeave} from 'vue-router' import { useRouter, onBeforeRouteLeave } from 'vue-router'
import type {FormInstance, FormRules, UploadFiles} from 'element-plus' import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
import {cloneDeep} from 'lodash' import { cloneDeep } from 'lodash'
import LoginPreview from './LoginPreview.vue' import LoginPreview from './LoginPreview.vue'
import {themeList, defaultSetting, defaultPlatformSetting} from '@/utils/theme' import { themeList, defaultSetting, defaultPlatformSetting } from '@/utils/theme'
import ThemeApi from '@/api/systemSettings/theme' import ThemeApi from '@/api/system-settings/theme'
import {MsgSuccess, MsgError} from '@/utils/message' import { MsgSuccess, MsgError } from '@/utils/message'
import useStore from '@/stores' import useStore from '@/stores'
import {t} from '@/locales' import { t } from '@/locales'
const {user} = useStore() const { user } = useStore()
const router = useRouter() const router = useRouter()
onBeforeRouteLeave((to, from) => { onBeforeRouteLeave((to, from) => {
@ -291,18 +285,18 @@ const themeForm = ref<any>({
loginImage: '', loginImage: '',
title: 'MaxKB', title: 'MaxKB',
slogan: t('views.system.theme.defaultSlogan'), slogan: t('views.system.theme.defaultSlogan'),
...defaultPlatformSetting ...defaultPlatformSetting,
}) })
const themeRadio = ref('') const themeRadio = ref('')
const customColor = ref('') const customColor = ref('')
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
title: [ title: [
{required: true, message: t('views.system.theme.websiteNamePlaceholder'), trigger: 'blur'} { required: true, message: t('views.system.theme.websiteNamePlaceholder'), trigger: 'blur' },
], ],
slogan: [ slogan: [
{required: true, message: t('views.system.theme.websiteSloganPlaceholder'), trigger: 'blur'} { required: true, message: t('views.system.theme.websiteSloganPlaceholder'), trigger: 'blur' },
] ],
}) })
const onChange = (file: any, fileList: UploadFiles, attr: string) => { const onChange = (file: any, fileList: UploadFiles, attr: string) => {
@ -338,15 +332,15 @@ function resetForm(val: string) {
themeForm.value = themeForm.value =
val === 'login' val === 'login'
? { ? {
...themeForm.value, ...themeForm.value,
theme: themeForm.value.theme, theme: themeForm.value.theme,
...defaultSetting ...defaultSetting,
} }
: { : {
...themeForm.value, ...themeForm.value,
theme: themeForm.value.theme, theme: themeForm.value.theme,
...defaultPlatformSetting ...defaultPlatformSetting,
} }
user.setTheme(themeForm.value) user.setTheme(themeForm.value)
} }