fix: 修复登录页背景logo设置

2024-01-04 19:49:40 +08:00
parent 6f5bbb045d
commit 6798fca362
5 changed files with 62 additions and 26 deletions
--- a/web/.env.development
+++ b/web/.env.development
@@ -2,7 +2,7 @@
 ENV = 'development'

 # 本地环境接口地址
-VITE_API_URL = 'http://127.0.0.1:8001'
+VITE_API_URL = 'http://127.0.0.1:8000'

 # 是否启用按钮权限
 VITE_PM_ENABLED = true
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
 		"@fast-crud/fast-extends": "^1.19.2",
 		"@fast-crud/ui-element": "^1.19.2",
 		"@fast-crud/ui-interface": "^1.19.2",
+		"@types/lodash": "^4.14.202",
 		"@vitejs/plugin-vue-jsx": "^3.0.0",
 		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
--- a/web/src/layout/logo/index.vue
+++ b/web/src/layout/logo/index.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-		<img :src="logoMini" class="layout-logo-medium-img" />
+		<img :src="siteLogo" class="layout-logo-medium-img" />
 		<span style="font-size: x-large">{{ getSystemConfig['login.site_title'] || themeConfig.globalTitle }}</span>
 	</div>
 	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
-		<img :src="logoMini" class="layout-logo-size-img" />
+		<img :src="siteLogo" class="layout-logo-size-img" />
 	</div>
 </template>

@@ -13,8 +13,8 @@ import { computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import logoMini from '/@/assets/logo-mini.svg';
-import {SystemConfigStore} from "/@/stores/systemConfig";
-
+import { SystemConfigStore } from "/@/stores/systemConfig";
+import _ from "lodash";
 // 定义变量内容
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -31,11 +31,18 @@ const onThemeConfigChange = () => {
 };

 const systemConfigStore = SystemConfigStore()
-const {systemConfig} = storeToRefs(systemConfigStore)
-const getSystemConfig = computed(()=>{
-  return systemConfig.value
+const { systemConfig } = storeToRefs(systemConfigStore)
+const getSystemConfig = computed(() => {
+	return systemConfig.value
 })

+const siteLogo = computed(() => {
+	if (!_.isEmpty(getSystemConfig.value['login.site_logo'])) {
+		return getSystemConfig.value['login.site_logo']
+	}
+	return logoMini
+});
+
 </script>

 <style scoped lang="scss">
@@ -50,30 +57,36 @@ const getSystemConfig = computed(()=>{
 	font-size: 16px;
 	cursor: pointer;
 	animation: logoAnimation 0.3s ease-in-out;
+
 	span {
 		white-space: nowrap;
 		display: inline-block;
 	}
+
 	&:hover {
 		span {
 			color: var(--color-primary-light-2);
 		}
 	}
+
 	&-medium-img {
 		width: 40px;
 		margin-right: 5px;
 	}
 }
+
 .layout-logo-size {
 	width: 100%;
 	height: 50px;
 	display: flex;
 	cursor: pointer;
 	animation: logoAnimation 0.3s ease-in-out;
+
 	&-img {
 		width: 40px;
 		margin: auto;
 	}
+
 	&:hover {
 		img {
 			animation: logoAnimation 0.3s ease-in-out;
--- a/web/src/views/system/login/index.vue
+++ b/web/src/views/system/login/index.vue
@@ -1,11 +1,12 @@
 <template>
-	<div class="login-container flex">
+	<div class="login-container flex z-10">
 		<div class="login-left">
 			<div class="login-left-logo">
-				<img :src="logoMini" />
+				<img :src="siteLogo" />
 				<div class="login-left-logo-text">
-					<span>{{ getSystemConfig['login.site_title']||getThemeConfig.globalViceTitle }}</span>
-					<span class="login-left-logo-text-msg">{{ getSystemConfig['login.site_name']||getThemeConfig.globalViceTitleMsg }}</span>
+					<span>{{ getSystemConfig['login.site_title'] || getThemeConfig.globalViceTitle }}</span>
+					<span class="login-left-logo-text-msg">{{
+						getSystemConfig['login.site_name'] || getThemeConfig.globalViceTitleMsg }}</span>
 				</div>
 			</div>
 			<div class="login-left-img">
@@ -13,12 +14,13 @@
 			</div>
 			<img :src="loginBg" class="login-left-waves" />
 		</div>
-		<div class="login-right flex">
+		<div class="login-right flex z-10">
 			<div class="login-right-warp flex-margin">
 				<span class="login-right-warp-one"></span>
 				<span class="login-right-warp-two"></span>
 				<div class="login-right-warp-mian">
-					<div class="login-right-warp-main-title">{{ getSystemConfig['login.site_title'] || getThemeConfig.globalTitle }} 欢迎您！</div>
+					<div class="login-right-warp-main-title">{{ getSystemConfig['login.site_title'] ||
+						getThemeConfig.globalTitle }} 欢迎您！</div>
 					<div class="login-right-warp-main-form">
 						<div v-if="!state.isScan">
 							<el-tabs v-model="state.tabsActiveName">
@@ -41,19 +43,26 @@
 			</div>
 		</div>

-		<div class="login-authorization">
-			<p>Copyright © {{getSystemConfig['login.copyright'] || '2021-2024 django-vue-admin.com'}} 版权所有</p>
+		<div class="login-authorization z-10">
+			<p>Copyright © {{ getSystemConfig['login.copyright'] || '2021-2024 django-vue-admin.com' }} 版权所有</p>
 			<p class="la-other">
-				<a href="https://beian.miit.gov.cn" target="_blank">{{getSystemConfig['login.keep_record'] || '晋ICP备18005113号-3'}}</a>
+				<a href="https://beian.miit.gov.cn" target="_blank">{{ getSystemConfig['login.keep_record'] ||
+					'晋ICP备18005113号-3' }}</a>
 				|
-				<a :href="getSystemConfig['login.help_url']?getSystemConfig['login.help_url']:'https://django-vue-admin.com'" target="_blank">帮助</a>
+				<a :href="getSystemConfig['login.help_url'] ? getSystemConfig['login.help_url'] : 'https://django-vue-admin.com'"
+					target="_blank">帮助</a>
 				|
-				<a :href="getSystemConfig['login.privacy_url']?getBaseURL(getSystemConfig['login.privacy_url']):'#'">隐私</a>
+				<a
+					:href="getSystemConfig['login.privacy_url'] ? getBaseURL(getSystemConfig['login.privacy_url']) : '#'">隐私</a>
 				|
-				<a :href="getSystemConfig['login.clause_url']?getBaseURL(getSystemConfig['login.clause_url']):'#'">条款</a>
+				<a
+					:href="getSystemConfig['login.clause_url'] ? getBaseURL(getSystemConfig['login.clause_url']) : '#'">条款</a>
 			</p>
 		</div>
 	</div>
+	<div v-if="siteBg">
+		<img :src="siteBg" class="fixed inset-0 z-1 w-full h-full" />
+	</div>
 </template>

 <script setup lang="ts" name="loginIndex">
@@ -64,12 +73,13 @@ import { NextLoading } from '/@/utils/loading';
 import logoMini from '/@/assets/logo-mini.svg';
 import loginMain from '/@/assets/login-main.svg';
 import loginBg from '/@/assets/login-bg.svg';
-import {SystemConfigStore} from '/@/stores/systemConfig'
-import {getBaseURL} from "/@/utils/baseUrl";
+import { SystemConfigStore } from '/@/stores/systemConfig'
+import { getBaseURL } from "/@/utils/baseUrl";
 // 引入组件
 const Account = defineAsyncComponent(() => import('/@/views/system/login/component/account.vue'));
 const Mobile = defineAsyncComponent(() => import('/@/views/system/login/component/mobile.vue'));
 const Scan = defineAsyncComponent(() => import('/@/views/system/login/component/scan.vue'));
+import _ from "lodash";

 // 定义变量内容
 const storesThemeConfig = useThemeConfig();
@@ -85,11 +95,23 @@ const getThemeConfig = computed(() => {
 });

 const systemConfigStore = SystemConfigStore()
-const {systemConfig} = storeToRefs(systemConfigStore)
-const getSystemConfig = computed(()=>{
-  return systemConfig.value
+const { systemConfig } = storeToRefs(systemConfigStore)
+const getSystemConfig = computed(() => {
+	return systemConfig.value
 })

+const siteLogo = computed(() => {
+	if (!_.isEmpty(getSystemConfig.value['login.site_logo'])) {
+		return getSystemConfig.value['login.site_logo']
+	}
+	return logoMini
+});
+
+const siteBg = computed(() => {
+	if (!_.isEmpty(getSystemConfig.value['login.login_background'])) {
+		return getSystemConfig.value['login.login_background']
+	}
+});

 // 页面加载时
 onMounted(() => {