fix: DEFECT-1355修复平台定制信息回显不正确

ww
1 parent bd736be5
Showing 9 changed files with 63 additions and 136 deletions
src/api/oem/model/index.ts
src/components/Application/src/AppLogo.vue
src/enums/cacheEnum.ts
src/sys/login/LoginForm.vue
src/views/sys/login/Login.vue
src/views/sys/login/LoginForm.vue
src/views/system/customize/cpns/CVIDraw.vue
src/views/system/customize/hook/usePlatformInfo.ts
src/views/visual/palette/index.vue
--- a/src/api/oem/model/index.ts
View file @622f9c5
+++ b/src/api/oem/model/index.ts
View file @622f9c5
@@ -18,4 +18,5 @@ export interface Platform {
   copyright: string;
   presentedOurselves: string;
   domain: string;
+  icon: string;
 }
--- a/src/components/Application/src/AppLogo.vue
View file @622f9c5
+++ b/src/components/Application/src/AppLogo.vue
View file @622f9c5
@@ -49,13 +49,6 @@
     return userStore.platInfo?.logo;
   });
   const getTitle = computed(() => {
-    // 设置icon
-    let link = (document.querySelector("link[rel*='icon']") ||
-      document.createElement('link')) as HTMLLinkElement;
-    link.type = 'image/x-icon';
-    link.rel = 'shortcut icon';
-    link.href = userStore.platInfo?.icon ?? '/favicon.ico';
-    document.getElementsByTagName('head')[0].appendChild(link);
     return userStore.platInfo?.name ?? title;
   });
 </script>
@@ -67,6 +60,7 @@
     padding-left: 7px;
     cursor: pointer;
     transition: all 0.2s ease;
+
     &.light {
       border-bottom: 1px solid @border-color-base;
     }
--- a/src/enums/cacheEnum.ts
View file @622f9c5
+++ b/src/enums/cacheEnum.ts
View file @622f9c5
@@ -35,6 +35,8 @@ export const APP_SESSION_CACHE_KEY = 'COMMON__SESSION__KEY__';
 export const PLATFORM = 'PLATFORM';
+export const PLATFORM_INFO_CACHE_KEY = 'PLATFORM_INFO';
+
 export const MENU_LIST = 'MENU_LIST';
 export enum CacheTypeEnum {
   SESSION,
--- a/src/sys/login/LoginForm.vue
View file @622f9c5
+++ b/src/sys/login/LoginForm.vue
View file @622f9c5
@@ -71,7 +71,6 @@
   import { useUserStore } from '/@/store/modules/user';
   import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
-  import { useDesign } from '/@/hooks/web/useDesign';
   import { getPlatForm } from '/@/api/oem';
   import { createLocalStorage } from '/@/utils/cache';
@@ -80,8 +79,7 @@
   const FormItem = Form.Item;
   const InputPassword = Input.Password;
   const { t } = useI18n();
-  const { notification, createMessage } = useMessage();
-  const { prefixCls } = useDesign('login');
+  const { notification } = useMessage();
   const userStore = useUserStore();
   const { setLoginState, getLoginState } = useLoginState();
@@ -115,7 +113,7 @@
         username: data.account,
         mode: 'modal', //不要默认的错误提示
       })
-      .catch((data) => {
+      .catch(() => {
         //登录失败返回的html,所以提示框什么都没有
         //去掉提示框
         // createMessage.error(data.message);
@@ -129,13 +127,6 @@
       const res = await getPlatForm();
       storage.set('platformInfo', res);
       userStore.setPlatInfo(res);
-      // 设置icon
-      let link = (document.querySelector("link[rel*='icon']") ||
-        document.createElement('link')) as HTMLLinkElement;
-      link.type = 'image/x-icon';
-      link.rel = 'shortcut icon';
-      link.href = res.icon ?? '/favicon.ico';
-      document.getElementsByTagName('head')[0].appendChild(link);
       var _hmt = _hmt || [];
       (function () {
--- a/src/views/sys/login/Login.vue
View file @622f9c5
+++ b/src/views/sys/login/Login.vue
View file @622f9c5
 <template>
-  <div
-    style="background-size: 100% 100%"
-    :style="{ backgroundImage: 'url(' + (logoUrl !== undefined ? logoUrl : '') + ')' }"
-    :class="prefixCls"
-    class="relative w-full h-full px-4"
-  >
+  <div :class="prefixCls" class="relative w-full h-full px-4">
     <AppLocalePicker
       class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
       :showText="false"
@@ -36,12 +31,8 @@
               {{ defaultTitle }}
             </div>
           </div>
-          <div v-if="ifCustom" class="my-auto">
-            <img
-              :alt="title"
-              src="../../../assets/svg/thingskit-login-background.svg"
-              class="w-1/2 -mt-16 -enter-x"
-            />
+          <div v-if="show" class="my-auto">
+            <img :alt="title" :src="defaultBackgroundImage" class="w-1/2 -mt-16 -enter-x" />
             <div class="mt-10 font-medium text-white -enter-x">
               <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
             </div>
@@ -67,7 +58,6 @@
 </template>
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
-  // import { AppLogo } from '/@/components/Application';
   import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
   import LoginForm from './LoginForm.vue';
   import ForgetPasswordForm from './ForgetPasswordForm.vue';
@@ -77,13 +67,9 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLocaleStore } from '/@/store/modules/locale';
-  // import { useUserStore } from '/@/store/modules/user';
-  import { getPlatForm } from '/@/api/oem/index';
-  import defaultShowLogoImg from '/@/assets/svg/login-bg.svg';
-  import defaultShowLogoDarkImg from '/@/assets/svg/login-bg-dark.svg';
   import { useTitle } from '@vueuse/core';
-  import { createLocalStorage } from '/@/utils/cache';
-  // import {usePlatform} from '/@/views/system/customize/hook/usePlatformInfo'
+  import defaultBackgroundImage from '/@/assets/svg/thingskit-login-background.svg';
+  import { getPlatFormInfo } from '../../system/customize/hook/usePlatformInfo';
   defineProps({
     sessionTimeout: {
@@ -93,88 +79,22 @@
   const { title } = useGlobSetting();
   const defaultTitle = ref('');
   const defaultLogo = ref('');
-  const logoUrl = ref('');
-  // const userStore = useUserStore();
-  const storage = createLocalStorage();
-
-  onMounted(async () => {
-    let res = storage.get('platformInfo');
-    if (res === '' || res === null) {
-      res = await getPlatForm();
-    }
-    logoUrl.value = res?.background;
-    defaultTitle.value = res?.name || title;
-    defaultLogo.value = res?.logo;
-    let link = (document.querySelector("link[rel*='icon']") ||
-      document.createElement('link')) as HTMLLinkElement;
-    link.type = 'image/x-icon';
-    link.rel = 'shortcut icon';
-    link.href = res?.icon ?? '/favicon.ico';
-    document.getElementsByTagName('head')[0].appendChild(link);
-    let defaultLogoBg = document.createElement('style');
-    let defaultLogoDarkBg = document.createElement('style');
-    if (logoUrl.value !== undefined) {
-      //企业自定义
-      ifCustom.value = false;
-      //默认图片
-      defaultLogoBg.innerHTML = `.vben-login::before{
-      background-image:url("");
-      position:absolute;
-    }`;
-      //切换黑暗模式图片
-      defaultLogoDarkBg.innerHTML = `html[data-theme='dark'] .vben-login::before{
-      background-image:url("");
-      position:absolute;
-    }`;
-    } else {
-      logoUrl.value = 'url(' + defaultShowLogoImg + ')';
-      //默认图片
-      defaultLogoBg.innerHTML = `.vben-login::before{
-      background-image:url(${defaultShowLogoImg});
-      position:absolute;
-    }`;
-      //切换黑暗模式图片
-      defaultLogoDarkBg.innerHTML = `html[data-theme='dark'] .vben-login::before{
-      background-image:url(${defaultShowLogoDarkImg});
-      position:absolute;
-    }`;
-    }
-    document.head.appendChild(defaultLogoBg);
-    document.head.appendChild(defaultLogoDarkBg);
-  });
-  // const userStore = useUserStore();
-
-  const ifCustom = ref(true);
-  // const getLogo = computed(() => {
-  //   return userStore.platInfo?.logo;
-  // });
-  // const getTitle = computed(() => {
-  //   // 设置icon
-  //   let link = (document.querySelector("link[rel*='icon']") ||
-  //     document.createElement('link')) as HTMLLinkElement;
-  //   link.type = 'image/x-icon';
-  //   link.rel = 'shortcut icon';
-  //   link.href = userStore.platInfo?.icon ?? '/favicon.ico';
-  //   document.getElementsByTagName('head')[0].appendChild(link);
-  //   // logoUrl.value = userStore.platInfo?.background;
-  //   // if (logoUrl.value !== undefined) {
-  //   //   ifCustom.value = false;
-  //   // } else {
-  //   //   logoUrl.value = 'url(' + defaultShowLogoImg + ')';
-  //   // }
-  //   return userStore.platInfo?.name ?? title;
-  // });
-  // const globSetting = useGlobSetting();
   const { prefixCls } = useDesign('login');
   const { t } = useI18n();
   const localeStore = useLocaleStore();
   const showLocale = localeStore.getShowPicker;
-  // const title = computed(() => globSetting?.title ?? '');
   onMounted(() => {
     useTitle('ThingsKit 物联网平台');
   });
+
+  const show = ref(false);
+
+  onMounted(() => {
+    const platform = getPlatFormInfo();
+    show.value = !platform.background;
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-login';
--- a/src/views/sys/login/LoginForm.vue
View file @622f9c5
+++ b/src/views/sys/login/LoginForm.vue
View file @622f9c5
@@ -71,7 +71,6 @@
   import { useUserStore } from '/@/store/modules/user';
   import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
-  import { useDesign } from '/@/hooks/web/useDesign';
   import { getPlatForm } from '/@/api/oem';
   import { createLocalStorage, createSessionStorage } from '/@/utils/cache';
@@ -81,7 +80,6 @@
   const InputPassword = Input.Password;
   const { t } = useI18n();
   const { notification, createMessage } = useMessage();
-  const { prefixCls } = useDesign('login');
   const userStore = useUserStore();
   const { setLoginState, getLoginState } = useLoginState();
@@ -137,13 +135,6 @@
       const res = await getPlatForm();
       storage.set('platformInfo', res);
       userStore.setPlatInfo(res);
-      // 设置icon
-      let link = (document.querySelector("link[rel*='icon']") ||
-        document.createElement('link')) as HTMLLinkElement;
-      link.type = 'image/x-icon';
-      link.rel = 'shortcut icon';
-      link.href = res.icon ?? '/favicon.ico';
-      document.getElementsByTagName('head')[0].appendChild(link);
       var _hmt = _hmt || [];
       (function () {
--- a/src/views/system/customize/cpns/CVIDraw.vue
View file @622f9c5
+++ b/src/views/system/customize/cpns/CVIDraw.vue
View file @622f9c5
@@ -38,7 +38,7 @@
                 >
               </template>
               <template #uploadText>
-                <div class="box-outline"> 支持.ICON格式，建议尺寸为16*16px </div>
+                <div class="box-outline"> 支持.ICO格式，建议尺寸为16*16px </div>
               </template>
             </ContentUploadText>
           </template>
@@ -149,9 +149,10 @@
         }
       }
       const beforeUploadIconPic = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/x-icon';
+        console.log(file);
+        const isJpgOrPng = file.type === 'image/vnd.microsoft.icon';
         if (!isJpgOrPng) {
-          createMessage.error('只能上传.icon图片文件!');
+          createMessage.error('只能上传.ico图片文件!');
         }
         const isLt2M = (file.size as number) / 1024 < 500;
         if (!isLt2M) {
--- a/src/views/system/customize/hook/usePlatformInfo.ts
View file @622f9c5
+++ b/src/views/system/customize/hook/usePlatformInfo.ts
View file @622f9c5
 import { getPlatForm } from '/@/api/oem';
-import { createLocalStorage } from '/@/utils/cache';
+import lightThemeBgImage from '/@/assets/svg/login-bg.svg';
+import darkThemeBgImage from '/@/assets/svg/login-bg-dark.svg';
+import { createStorage } from '/@/utils/cache';
+import { Platform } from '/@/api/oem/model';
+import { PLATFORM_INFO_CACHE_KEY } from '/@/enums/cacheEnum';
 enum DefaultPlatform {
   LOGO = '/resource/img/logo.png',
@@ -7,19 +11,15 @@ enum DefaultPlatform {
   ICO = '/favicon.ico',
 }
+const storage = createStorage();
+
+export const getPlatFormInfo = () => storage.get(PLATFORM_INFO_CACHE_KEY) as Platform;
+export const setPlatFormInfo = (info: Recordable) => storage.set(PLATFORM_INFO_CACHE_KEY, info);
+
 export const usePlatform = async () => {
-  const platformInfo = await getPlatForm();
-  const storage = createLocalStorage();
-  if (
-    platformInfo === '' ||
-    platformInfo === null ||
-    Object.getOwnPropertyNames(platformInfo).length === 0
-  ) {
-    storage.set('platformInfo', 1234);
-  } else {
-    storage.set('platformInfo', platformInfo);
-  }
+  const platformInfo = (await getPlatForm()) || {};
+  setPlatFormInfo(platformInfo);
   const createLoadingEffect = () => {
     const wrap = document.createElement('div');
     wrap.setAttribute('class', 'app-loading-wrap');
@@ -50,7 +50,7 @@ export const usePlatform = async () => {
   const replaceSiteIco = () => {
     const linkEl = document.querySelectorAll('link[rel*="icon"]');
     linkEl.forEach((item) => {
-      item.setAttribute('href', platformInfo.logo || DefaultPlatform.ICO);
+      item.setAttribute('href', platformInfo.icon || DefaultPlatform.ICO);
     });
   };
@@ -60,9 +60,31 @@ export const usePlatform = async () => {
     loadingWrapper?.appendChild(createLoadingEffect());
   };
+  const setBackgroundImage = () => {
+    const { background } = platformInfo;
+    const styleEl = document.createElement('style');
+
+    styleEl.innerHTML = `
+      .vben-login::before{
+        background-image:url("${background || lightThemeBgImage}");
+        position:absolute;
+        margin-left: ${background ? 0 : '-48%'} !important;
+      }
+      html[data-theme='dark'] .vben-login::before{
+        background-image:url("${background || darkThemeBgImage}");
+        position:absolute;
+        margin-left: ${background ? 0 : '-48%'} !important;
+      }
+    `;
+
+    console.log(styleEl);
+    document.head.appendChild(styleEl);
+  };
+
   const bootstrap = () => {
     replaceSiteIco();
     replaceLoadingEffect();
+    setBackgroundImage();
   };
   bootstrap();
--- a/src/views/visual/palette/index.vue
View file @622f9c5
+++ b/src/views/visual/palette/index.vue
View file @622f9c5
@@ -27,6 +27,8 @@
   import { HistoryTrendModal } from './components/HistoryTrendModal';
   import { useSocket } from '../packages/hook/useSocket';
   import { watch } from 'vue';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { ThemeEnum } from '/@/enums/appEnum';
   const props = defineProps<{
     value?: Recordable;
@@ -72,12 +74,15 @@
   useSocket(dataSource);
+  const { getDarkMode } = useRootSetting();
   watch(
     getIsSharePage,
     (value) => {
       if (value) {
+        console.log(unref(getDarkMode));
         const root = document.querySelector('#app');
-        (root as HTMLDivElement).style.backgroundColor = '#F5F5F5';
+        (root as HTMLDivElement).style.backgroundColor =
+          unref(getDarkMode) === ThemeEnum.LIGHT ? '#F5F5F5' : '#1b1b1b';
       }
     },
     { immediate: true }