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) {
padding: 13px 12px 13px 16px !important;
padding: 13px 12px 13px 10px !important;
&:hover {
background: none;
color: var(--el-color-primary);

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

@ -58,13 +58,13 @@ const systemRouter = {
},
children: [
{
path: '/system/theme',
path: '/system/setting/theme',
name: 'theme',
meta: {
title: 'views.system.theme.title',
activeMenu: '/setting',
parentPath: '/setting',
parentName: 'setting',
activeMenu: '/system',
parentPath: '/system',
parentName: 'system',
//permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND')
},
component: () => import('@/views/theme/index.vue'),
@ -74,27 +74,27 @@ const systemRouter = {
name: 'authentication',
meta: {
title: 'views.system.authentication.title',
activeMenu: '/setting',
parentPath: '/setting',
parentName: 'setting',
activeMenu: '/system',
parentPath: '/system',
parentName: 'system',
//permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND')
},
component: () => import('@/views/authentication/index.vue')
component: () => import('@/views/authentication/index.vue'),
},
{
path: '/system/email',
name: 'email',
meta: {
title: 'views.system.email.title',
activeMenu: '/setting',
parentPath: '/setting',
parentName: 'setting',
activeMenu: '/system',
parentPath: '/system',
parentName: 'system',
//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 { cloneDeep } from 'lodash'
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";
export interface themeStateTypes {
themeInfo: any

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

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

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

@ -395,6 +395,10 @@ h5 {
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);
}
}
// 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>
<script setup lang="ts">
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 { t } from '@/locales'
import { MsgSuccess } from '@/utils/message'

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

@ -52,7 +52,7 @@ template
<script setup lang="ts">
import { reactive, ref } from 'vue'
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 { t } from '@/locales'

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

@ -79,7 +79,7 @@
</template>
<script setup lang="ts">
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 { t } from '@/locales'
import { MsgSuccess } from '@/utils/message'

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

@ -100,7 +100,7 @@
</template>
<script setup lang="ts">
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 { t } from '@/locales'
import { MsgSuccess } from '@/utils/message'

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

@ -97,7 +97,7 @@
</template>
<script setup lang="ts">
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 { t } from '@/locales'
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 { copyClick } from '@/utils/clipboard'
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 { t } from '@/locales'

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

@ -1,6 +1,7 @@
<template>
<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">
<template v-for="(item, index) in tabList" :key="index">
<el-tab-pane :label="item.label" :name="item.name">
@ -29,28 +30,28 @@ const tabList = [
{
label: t('views.system.authentication.ldap.title'),
name: 'LDAP',
component: LDAP
component: LDAP,
},
{
label: t('views.system.authentication.cas.title'),
name: 'CAS',
component: CAS
component: CAS,
},
{
label: t('views.system.authentication.oidc.title'),
name: 'OIDC',
component: OIDC
component: OIDC,
},
{
label: t('views.system.authentication.oauth2.title'),
name: 'OAuth2',
component: OAuth2
component: OAuth2,
},
{
label: t('views.system.authentication.scanTheQRCode.title'),
name: 'SCAN',
component: SCAN
}
component: SCAN,
},
]
function handleClick() {}

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

@ -1,8 +1,9 @@
<template>
<div class="email-setting">
<h4 class="p-16-24">{{ $t('views.system.email.title') }}</h4>
<div class="email-setting p-16-24">
<h4 class="mb-16">{{ $t('views.system.email.title') }}</h4>
<el-card style="--el-card-padding: 16px" v-loading="loading">
<el-scrollbar>
<div class="p-24" v-loading="loading">
<div class="email-setting__main p-16">
<el-form
ref="emailFormRef"
:rules="rules"
@ -51,23 +52,21 @@
>{{ $t('views.system.email.enableTLS') }}
</el-checkbox>
</el-form-item>
<el-button @click="submit(emailFormRef)" type="primary" :disabled="loading">
{{ $t('common.save') }}
</el-button>
<el-button @click="submit(emailFormRef, 'test')" :disabled="loading">
{{ $t('views.system.test') }}
</el-button>
</el-form>
<div class="text-right">
<el-button @click="submit(emailFormRef)" type="primary" :disabled="loading">
{{ $t('common.save') }}
</el-button>
</div>
</div>
</el-scrollbar>
</el-card>
</div>
</template>
<script setup lang="ts">
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 { MsgSuccess } from '@/utils/message'
@ -80,7 +79,7 @@ const form = ref<any>({
email_host_password: '',
email_use_tls: false,
email_use_ssl: false,
from_email: ''
from_email: '',
})
const emailFormRef = ref()
@ -89,20 +88,20 @@ const loading = ref(false)
const rules = reactive<FormRules<any>>({
email_host: [
{required: true, message: t('views.system.email.smtpHostPlaceholder'), trigger: 'blur'}
{ required: true, message: t('views.system.email.smtpHostPlaceholder'), trigger: 'blur' },
],
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: [
{required: true, message: t('views.system.email.smtpUserPlaceholder'), trigger: 'blur'}
{ required: true, message: t('views.system.email.smtpUserPlaceholder'), trigger: 'blur' },
],
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: [
{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) => {
@ -136,8 +135,10 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.email-setting {
&__main {
width: 70%;
margin: 0 auto;
}
:deep(.el-checkbox__label) {
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 LoginLayout from '@/views/login/components/LoginLayout.vue'
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 useStore from '@/stores'
import {useI18n} from 'vue-i18n'

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

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

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

@ -1,9 +1,8 @@
<template>
<div class="theme-setting" v-loading="loading">
<h4 class="p-16-24">{{ $t('views.system.theme.title') }}</h4>
<div class="theme-setting p-16-24" v-loading="loading">
<h4 class="mb-16">{{ $t('views.system.theme.title') }}</h4>
<el-scrollbar>
<div class="p-24 pt-0">
<div class="app-card p-24">
<el-card style="--el-card-padding: 16px">
<h5 class="mb-16">{{ $t('views.system.theme.platformDisplayTheme') }}</h5>
<el-radio-group
v-model="themeRadio"
@ -19,8 +18,9 @@
<h5 class="mt-16 mb-8">{{ $t('views.system.theme.customTheme') }}</h5>
<el-color-picker v-model="customColor" @change="customColorHandle" />
</div>
</div>
<div class="app-card p-24 mt-16">
</el-card>
<el-card style="--el-card-padding: 16px" class="mt-16">
<h5 class="mb-16">{{ $t('views.system.theme.platformLoginSettings') }}</h5>
<el-card shadow="never" class="layout-bg">
<div class="flex-between">
@ -83,9 +83,7 @@
</el-card>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.system.theme.loginBackground')
}}</span>
<span class="lighter">{{ $t('views.system.theme.loginBackground') }}</span>
<el-upload
ref="uploadRef"
action="#"
@ -120,9 +118,8 @@
:placeholder="$t('views.system.theme.websiteNamePlaceholder')"
>
</el-input>
<el-text type="info">{{
$t('views.system.theme.websiteNameTip')
}}
<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">
@ -133,9 +130,8 @@
show-word-limit
>
</el-input>
<el-text type="info">{{
$t('views.system.theme.websiteSloganTip')
}}
<el-text type="info"
>{{ $t('views.system.theme.websiteSloganTip') }}
</el-text>
</el-form-item>
</el-form>
@ -148,8 +144,8 @@
<el-text type="info">{{ $t('views.system.theme.logoDefaultTip') }}</el-text>
</div>
</el-card>
</div>
<div class="app-card p-24 mt-16">
</el-card>
<el-card style="--el-card-padding: 16px" class="mt-16">
<h5 class="mb-16">{{ $t('views.system.theme.platformSetting') }}</h5>
<el-card shadow="never" class="layout-bg">
<div class="flex-between">
@ -244,15 +240,13 @@
<el-text type="info">{{ $t('views.system.theme.defaultTip') }}</el-text>
</div>
</el-card>
</div>
</div>
</el-card>
</el-scrollbar>
<div class="theme-setting__operate w-full p-16-24">
<el-button @click="resetTheme">{{ $t('views.system.theme.abandonUpdate') }}</el-button>
<el-button type="primary" @click="updateTheme(themeFormRef)">
{{ $t('views.system.theme.saveAndApply') }}
</el-button
>
</el-button>
</div>
</div>
</template>
@ -264,7 +258,7 @@ import type {FormInstance, FormRules, UploadFiles} from 'element-plus'
import { cloneDeep } from 'lodash'
import LoginPreview from './LoginPreview.vue'
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 useStore from '@/stores'
import { t } from '@/locales'
@ -291,18 +285,18 @@ const themeForm = ref<any>({
loginImage: '',
title: 'MaxKB',
slogan: t('views.system.theme.defaultSlogan'),
...defaultPlatformSetting
...defaultPlatformSetting,
})
const themeRadio = ref('')
const customColor = ref('')
const rules = reactive<FormRules>({
title: [
{required: true, message: t('views.system.theme.websiteNamePlaceholder'), trigger: 'blur'}
{ required: true, message: t('views.system.theme.websiteNamePlaceholder'), trigger: 'blur' },
],
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) => {
@ -340,12 +334,12 @@ function resetForm(val: string) {
? {
...themeForm.value,
theme: themeForm.value.theme,
...defaultSetting
...defaultSetting,
}
: {
...themeForm.value,
theme: themeForm.value.theme,
...defaultPlatformSetting
...defaultPlatformSetting,
}
user.setTheme(themeForm.value)