ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-09-10 08:57:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor:优化系统配置与版权显示

Browse Source
This commit is contained in:
秋帆
2024-06-11 21:24:53 +08:00
parent b1485c238f
commit d7e29e238e
8 changed files with 127 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/apis/system/type.ts
View File

@@ -281,6 +281,7 @@ export interface BasicConfig {
SITE_LOGO: string
SITE_TITLE: string
SITE_COPYRIGHT: string
SITE_BEIAN: string
}
/** 基础配置类型 */
@@ -288,7 +289,9 @@ export interface SiteConfig {
SITE_FAVICON: OptionResp
SITE_LOGO: OptionResp
SITE_TITLE: OptionResp
SITE_DESCRIPTION: OptionResp
SITE_COPYRIGHT: OptionResp
SITE_BEIAN: OptionResp
}
/** 邮箱配置类型 */

2
src/components/GiFooter/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="gi-footer">{{ appStore.getCopyright() }}</div>
<div class="gi-footer">{{ appStore.getCopyright() }}{{ appStore.getForRecord() ? ` · ${appStore.getForRecord()}` : '' }}</div>
</template>
<script lang="ts" setup>

7
src/stores/modules/app.ts
View File

@@ -69,6 +69,7 @@ const storeSetup = () => {
siteConfig.SITE_LOGO = resMap.get('SITE_LOGO')
siteConfig.SITE_TITLE = resMap.get('SITE_TITLE')
siteConfig.SITE_COPYRIGHT = resMap.get('SITE_COPYRIGHT')
siteConfig.SITE_BEIAN = resMap.get('SITE_BEIAN')
document.title = resMap.get('SITE_TITLE')
document
.querySelector('link[rel="shortcut icon"]')
@@ -99,6 +100,9 @@ const storeSetup = () => {
return siteConfig.SITE_COPYRIGHT
}
const getForRecord = () => {
return siteConfig.SITE_BEIAN
}
return {
...toRefs(settingConfig),
...toRefs(siteConfig),
@@ -113,7 +117,8 @@ const storeSetup = () => {
getFavicon,
getLogo,
getTitle,
getCopyright
getCopyright,
getForRecord
}
}

49
src/views/login/index.vue
View File

@@ -43,7 +43,7 @@
<div v-if="isDesktop" class="footer">
<div class="beian">
<div class="below text" v-html="appStore.getCopyright()"></div>
<div class="below text">{{ appStore.getCopyright() }}{{ appStore.getForRecord() ? ` · ${appStore.getForRecord()}` : '' }}</div>
</div>
</div>
@@ -123,6 +123,7 @@ const onOauth = async (source: string) => {
display: none !important;
background-color: white !important;
}
.login {
height: 100%;
display: flex;
@@ -131,6 +132,7 @@ const onOauth = async (source: string) => {
align-items: center;
background-color: var(--color-bg-5);
color: #121314;
&-logo {
width: 100%;
height: 104px;
@@ -144,18 +146,21 @@ const onOauth = async (source: string) => {
background-image: url('/src/assets/images/login_h5.jpg');
background-size: 100% 100%;
box-sizing: border-box;
img {
width: 34px;
height: 34px;
margin-right: 8px;
}
}
&-box {
width: 100%;
display: flex;
z-index: 999;
}
}
.login-right {
width: 100%;
height: 100%;
@@ -163,6 +168,7 @@ const onOauth = async (source: string) => {
flex-direction: column;
padding: 30px 30px 0;
box-sizing: border-box;
&__title {
color: var(--color-text-1);
font-weight: 500;
@@ -170,41 +176,50 @@ const onOauth = async (source: string) => {
line-height: 32px;
margin-bottom: 20px;
}
&__form {
:deep(.arco-tabs-nav-tab) {
display: flex;
justify-content: start;
align-items: center;
}
:deep(.arco-tabs-tab) {
color: var(--color-text-2);
margin: 0 20px 0 0;
}
:deep(.arco-tabs-tab-title) {
font-size: 16px;
font-weight: 500;
line-height: 22px;
}
:deep(.arco-tabs-content) {
margin-top: 10px;
}
:deep(.arco-tabs-tab-active),
:deep(.arco-tabs-tab-title:hover) {
color: rgb(var(--arcoblue-6));
}
:deep(.arco-tabs-nav::before) {
display: none;
}
:deep(.arco-tabs-tab-title:before) {
display: none;
}
}
&__oauth {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
padding-bottom: 20px;
// margin-top: auto;
// margin-bottom: 20px;
:deep(.arco-divider-text) {
@@ -213,14 +228,17 @@ const onOauth = async (source: string) => {
font-weight: 400;
line-height: 20px;
}
.list {
align-items: center;
display: flex;
justify-content: center;
width: 100%;
.item {
margin-right: 15px;
}
.mode {
color: var(--color-text-2);
font-size: 12px;
@@ -235,15 +253,18 @@ const onOauth = async (source: string) => {
height: 32px;
justify-content: center;
cursor: pointer;
.icon {
width: 21px;
height: 20px;
}
}
.mode svg {
font-size: 16px;
margin-right: 10px;
}
.mode:hover,
.mode svg:hover {
background: rgba(var(--primary-6), 0.05);
@@ -267,6 +288,7 @@ const onOauth = async (source: string) => {
position: absolute;
bottom: 10px;
z-index: 999;
.beian {
.text {
font-size: 12px;
@@ -275,6 +297,7 @@ const onOauth = async (source: string) => {
line-height: 20px;
text-align: center;
}
.below {
align-items: center;
display: flex;
@@ -282,10 +305,12 @@ const onOauth = async (source: string) => {
}
}
}
@media screen and (min-width: 571px) {
.h5 {
display: none !important;
}
.login {
height: 100%;
display: flex;
@@ -293,6 +318,7 @@ const onOauth = async (source: string) => {
justify-content: center;
align-items: center;
background-color: var(--color-bg-5);
&-logo {
position: fixed;
top: 20px;
@@ -306,12 +332,14 @@ const onOauth = async (source: string) => {
display: flex;
justify-content: center;
align-items: center;
img {
width: 34px;
height: 34px;
margin-right: 8px;
}
}
&-box {
width: 86%;
max-width: 850px;
@@ -331,6 +359,7 @@ const onOauth = async (source: string) => {
position: relative;
overflow: hidden;
background: linear-gradient(60deg, rgb(var(--primary-6)), rgb(var(--primary-3)));
&__img {
width: 100%;
position: absolute;
@@ -352,6 +381,7 @@ const onOauth = async (source: string) => {
flex-direction: column;
padding: 30px 30px 0;
box-sizing: border-box;
&__title {
color: var(--color-text-1);
font-weight: 500;
@@ -359,51 +389,63 @@ const onOauth = async (source: string) => {
line-height: 32px;
margin-bottom: 20px;
}
&__form {
:deep(.arco-tabs-nav-tab) {
display: flex;
justify-content: center;
align-items: center;
}
:deep(.arco-tabs-tab) {
color: var(--color-text-2);
}
:deep(.arco-tabs-tab-title) {
font-size: 16px;
font-weight: 500;
line-height: 22px;
}
:deep(.arco-tabs-content) {
margin-top: 10px;
}
:deep(.arco-tabs-tab-active),
:deep(.arco-tabs-tab-title:hover) {
color: rgb(var(--arcoblue-6));
}
:deep(.arco-tabs-nav::before) {
display: none;
}
:deep(.arco-tabs-tab-title:before) {
display: none;
}
}
&__oauth {
margin-top: auto;
margin-bottom: 20px;
:deep(.arco-divider-text) {
color: var(--color-text-4);
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
.list {
align-items: center;
display: flex;
justify-content: center;
width: 100%;
.item {
margin-right: 15px;
}
.mode {
color: var(--color-text-2);
font-size: 12px;
@@ -418,15 +460,18 @@ const onOauth = async (source: string) => {
height: 32px;
justify-content: center;
cursor: pointer;
.icon {
width: 21px;
height: 20px;
}
}
.mode svg {
font-size: 16px;
margin-right: 10px;
}
.mode:hover,
.mode svg:hover {
background: rgba(var(--primary-6), 0.05);
@@ -450,6 +495,7 @@ const onOauth = async (source: string) => {
position: absolute;
bottom: 10px;
z-index: 999;
.beian {
.text {
font-size: 12px;
@@ -458,6 +504,7 @@ const onOauth = async (source: string) => {
line-height: 20px;
text-align: center;
}
.below {
align-items: center;
display: flex;

89
src/views/system/config/components/BasicSetting.vue
View File

@@ -57,9 +57,15 @@
<a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name">
<a-input v-model.trim="form.SITE_TITLE" placeholder="请输入网站标题" :max-length="18" />
</a-form-item>
<a-form-item class="input-item" field="SITE_DESCRIPTION" :label="siteConfig.SITE_DESCRIPTION.name">
<a-input v-model.trim="form.SITE_DESCRIPTION" placeholder="请输入网站描述" :max-length="18" />
</a-form-item>
<a-form-item class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name">
<a-input v-model.trim="form.SITE_COPYRIGHT" placeholder="请输入版权信息" />
</a-form-item>
<a-form-item class="input-item" field="SITE_BEIAN" :label="siteConfig.SITE_BEIAN.name">
<a-input v-model.trim="form.SITE_BEIAN" placeholder="请输入备案信息" style="width: 100%;" />
</a-form-item>
<div style="margin-top: 20px">
<a-space>
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
@@ -125,7 +131,9 @@ const siteConfig = ref<SiteConfig>({
SITE_FAVICON: {},
SITE_LOGO: {},
SITE_TITLE: {},
SITE_COPYRIGHT: {}
SITE_DESCRIPTION: {},
SITE_COPYRIGHT: {},
SITE_BEIAN: {}
})
const faviconFile = ref<FileItem>({ uid: '-1' })
const logoFile = ref<FileItem>({ uid: '-2' })
@@ -135,7 +143,9 @@ const reset = () => {
form.SITE_FAVICON = siteConfig.value.SITE_FAVICON.value || ''
form.SITE_LOGO = siteConfig.value.SITE_LOGO.value || ''
form.SITE_TITLE = siteConfig.value.SITE_TITLE.value || ''
form.SITE_DESCRIPTION = siteConfig.value.SITE_DESCRIPTION.value || ''
form.SITE_COPYRIGHT = siteConfig.value.SITE_COPYRIGHT.value || ''
form.SITE_BEIAN = siteConfig.value.SITE_BEIAN.value || ''
faviconFile.value.url = siteConfig.value.SITE_FAVICON.value
logoFile.value.url = siteConfig.value.SITE_LOGO.value
}
@@ -203,20 +213,20 @@ const onResetValue = () => {
const handleUploadFavicon = (options: RequestOption) => {
const controller = new AbortController()
; (async function requestWrap() {
const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
onProgress(20)
const formData = new FormData()
formData.append(name as string, fileItem.file as Blob)
uploadFile(formData)
.then((res) => {
onSuccess(res)
form.SITE_FAVICON = res.data.url
Message.success('上传成功')
})
.catch((error) => {
onError(error)
})
})()
const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
onProgress(20)
const formData = new FormData()
formData.append(name as string, fileItem.file as Blob)
uploadFile(formData)
.then((res) => {
onSuccess(res)
form.SITE_FAVICON = res.data.url
Message.success('上传成功')
})
.catch((error) => {
onError(error)
})
})()
return {
abort() {
controller.abort()
@@ -233,20 +243,20 @@ const handleChangeFavicon = (_: any, currentFile: any) => {
const handleUploadLogo = (options: RequestOption) => {
const controller = new AbortController()
; (async function requestWrap() {
const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
onProgress(20)
const formData = new FormData()
formData.append(name as string, fileItem.file as Blob)
uploadFile(formData)
.then((res) => {
onSuccess(res)
form.SITE_LOGO = res.data.url
Message.success('上传成功')
})
.catch((error) => {
onError(error)
})
})()
const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
onProgress(20)
const formData = new FormData()
formData.append(name as string, fileItem.file as Blob)
uploadFile(formData)
.then((res) => {
onSuccess(res)
form.SITE_LOGO = res.data.url
Message.success('上传成功')
})
.catch((error) => {
onError(error)
})
})()
return {
abort() {
controller.abort()
@@ -266,21 +276,21 @@ onMounted(() => {
<style lang="scss" scoped>
.form {
margin: 20px 0 0 20px;
// margin: 20px 0 0 20px;
}
.logo {
width: 33px;
height: 33px;
min-width: 33px;
line-height: 33px;
width: 50px;
height: 50px;
min-width: 50px;
line-height: 50px;
}
.favicon {
width: 16px;
height: 16px;
min-width: 16px;
line-height: 16px;
width: 46px;
height: 46px;
min-width: 46px;
line-height: 46px;
}
.arco-form .image-item,
@@ -294,6 +304,7 @@ onMounted(() => {
}
:deep(.arco-form-item-wrapper-col) {
width: 50%;
width: 100%;
max-width: 500px;
}
</style>

6
src/views/system/config/components/MailSetting.vue
View File

@@ -1,7 +1,7 @@
<template>
<a-space wrap :size="30">
<a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
:layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
:layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error>
<a-list :bordered="false" :loading="loading">
<a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk>
<a-select v-model.trim="form.MAIL_PROTOCOL">
@@ -169,10 +169,6 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.form {
margin: 20px 0 0 20px;
}
:deep(.arco-form-item.arco-form-item-has-help) {
margin-bottom: 5px;
}

6
src/views/system/config/components/SecuritySetting.vue
View File

@@ -1,7 +1,7 @@
<template>
<a-space wrap :size="30">
<a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
:layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
:layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error>
<a-list :bordered="false" :loading="loading">
<a-form-item field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
:help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk>
@@ -205,10 +205,6 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.form {
margin: 20px 0 0 20px;
}
.input-width {
width: 196px;
}

28
src/views/system/config/index.vue
View File

@@ -1,14 +1,20 @@
<template>
<div class="gi_page">
<a-card class="general-card" title="系统配置">
<a-tabs v-model:active-key="activeKey" hide-content type="rounded" @change="change">
<a-tab-pane key="1" title="基础配置" />
<a-tab-pane key="2" title="邮件配置" />
<a-tab-pane key="3" title="安全配置" />
<a-tabs v-model:active-key="activeKey" position="right" @change="change">
<a-tab-pane key="1" title="基础配置">
<BasicSetting />
</a-tab-pane>
<a-tab-pane key="2" title="邮件配置">
<MailSetting />
</a-tab-pane>
<a-tab-pane key="3" title="安全配置">
<SecuritySetting />
</a-tab-pane>
</a-tabs>
<keep-alive>
<!-- <keep-alive>
<component :is="PanMap[activeKey]" />
</keep-alive>
</keep-alive> -->
</a-card>
</div>
</template>
@@ -20,11 +26,11 @@ import MailSetting from './components/MailSetting.vue'
import SecuritySetting from './components/SecuritySetting.vue'
defineOptions({ name: 'SystemConfig' })
const PanMap: Record<string, Component> = {
1: BasicSetting,
2: MailSetting,
3: SecuritySetting
}
// const PanMap: Record<string, Component> = {
// 1: BasicSetting,
// 2: MailSetting,
// 3: SecuritySetting
// }
const route = useRoute()
const router = useRouter()
const activeKey = ref('1')