项目图标和名称

package.json

@@ -15,7 +15,7 @@
         "element-plus": "2.3.3",
         "js-base64": "^3.7.5",
         "js-cookie": "^3.0.4",
-        "js-fast-way": "^0.0.8",
+        "js-fast-way": "^0.0.9",
         "js-md5": "^0.7.3",
         "js-web-screen-shot": "^1.9.2",
         "nprogress": "^0.2.0",

src/layout/index.vue

@@ -6,10 +6,8 @@
         <el-aside :class="[isCollapse?'is-collapse':'', MenuBarKey]" :width="isCollapse?'90px':'250px'"
                   class="hc-aside-box">
             <div class="hc-aside-logo-box" @click="logoClick">
-                <img :src="getAssetsHomeFile(`${AppColor.name}.png`)" alt="" class="logo-img">
-                <img v-if="!isCollapse" :src="MenuBarKey === 'home-index' ? NameWhite : NameDark" alt=""
-                     class="logo-img-1 white">
-                <img v-if="!isCollapse" :src="NameWhite" alt="" class="logo-img-1 dark">
+                <img :src="appLogoIcon" alt="" id="logo-icon">
+                <img :src="appLogoName" alt="" id="logo-name" v-if="!isCollapse">
             </div>
             <div class="hc-aside-menu-box">
                 <el-scrollbar>
@@ -72,9 +70,9 @@ import UserInfoBar from "./modules/UserInfoBar.vue"
 import ConfigBar from "./modules/ConfigBar.vue"
 import TopMenuBar from "./modules/TopMenuBar.vue"
 import {initButtons, initProjectContract} from "~sto/app";
-import NameDark from "~src/assets/logo/name-dark.png";
-import NameWhite from "~src/assets/logo/name-white.png";
 import website from '~src/config/index'
+import {setImageColor} from "js-fast-way";
+import {setAppName} from "~uti/tools";
 
 //初始组合式
 const router = useRouter()
@@ -87,6 +85,11 @@ const reloadRouter = ref(true)
 const BarMenuKey = useRoutes?.name ?? 'home-index';
 const BarMenuTitle = useRoutes?.meta?.title ?? '';
 
+//系统信息
+const appTitle = ref(useAppState.getTitle)
+const appLogoIcon = ref(useAppState.getLogoIcon)
+const appLogoName = ref(useAppState.getLogoName)
+
 //主题和色调变量
 const HomeTheme = ref(useAppState.getHomeTheme);
 const AppColor = ref(useAppState.getColor);
@@ -119,6 +122,7 @@ onMounted(() => {
     useAppState.barMenuName = BarMenuTitle
     setIsCollapse(RoutesName.value)
     setInitSocket()
+    setLogoImageColor()
 })
 
 //监听
@@ -126,14 +130,12 @@ watch(() => [
     useAppState.getProjectContract,
     useAppState.getMenus,
     useAppState.getHomeTheme,
-    useAppState.getColor,
     useRoutes?.name,
     useRoutes?.meta?.title,
     useAppState.getCollapse,
-], ([projectContractArr, userMenus, theme, ColorVal, RouteName, RouteTitle, collapse]) => {
-    MenuBarData.value = userMenus
+], ([projectContractArr, userMenus, theme, RouteName, RouteTitle, collapse]) => {
     HomeTheme.value = theme
-    AppColor.value = ColorVal
+    MenuBarData.value = userMenus
     RoutesName.value = RouteName ?? 'home-index'
     MenuBarKey.value = RouteName ?? 'home-index'
     RoutesTitle.value = RouteTitle ?? ''
@@ -141,8 +143,29 @@ watch(() => [
     setIsCollapse(RoutesName.value)
     projectContractData(projectContractArr || []);
     useAppState.barMenuName = RouteTitle ?? ''
+    setAppName(appTitle.value)
 })
 
+//监听
+watch(() => [
+    useAppState.getTitle,
+    useAppState.getLogoIcon,
+    useAppState.getLogoName,
+    useAppState.getColor,
+], ([Title, LogoIcon, LogoName, ColorVal]) => {
+    appTitle.value = Title
+    appLogoIcon.value = LogoIcon
+    appLogoName.value = LogoName
+    AppColor.value = ColorVal
+    setLogoImageColor()
+})
+
+//设置Logo图片颜色
+const setLogoImageColor = () => {
+    const { result } = setImageColor(AppColor.value?.color);
+    document.getElementById('logo-icon').style = result.filter
+}
+
 //设置折叠
 const setIsCollapse = (key) => {
     if (key === 'data-fill-wbs') {
@@ -241,19 +264,6 @@ const MenuBarChange = (item) => {
     router.push({name: item?.code});
 }
 
-// 获取assets静态资源
-const getAssetsHomeFile = (url) => {
-    const path = `../assets/icon/${url}`;
-    const modules = import.meta.globEager("../assets/icon/*");
-    return modules[path].default;
-}
-
-const handleChange = () => {
-    let file = document.getElementById("file").files[0]; // 获取input上传的图片数据;
-    const url = window.URL.createObjectURL(file); // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
-    document.getElementById("imagebox").src = url;
-}
-
 //首页
 const logoClick = () => {
     router.push({name: 'home-index'});

src/layout/layout.scss

@@ -33,12 +33,12 @@
             cursor: pointer;
             margin: 32px 0;
             left: -10px;
-            .logo-img {
-                height: 40px;
-                width: 40px;
-            }
-            .logo-img-1 {
+            #logo-icon {
                 height: 35px;
+                width: 35px;
+            }
+            #logo-name {
+                height: 40px;
                 margin-left: 5px;
             }
             &:hover {

src/router/index.js

@@ -1,6 +1,5 @@
 import * as vueRouter from 'vue-router'
 import baseData from "./modules/base";
-import config from '~src/config/index'
 import {getToken} from '~src/api/util/auth'
 import {getRouterData} from './routers'
 import NProgress from "nprogress";
@@ -33,12 +32,10 @@ router.beforeResolve(async (to) => {
 })
 
 router.afterEach((to) => {
-    //根据当前跳转的路由设置显示在浏览器标签的title
-    let pageTitle = to.meta['title'], title = config.title;
     if (to.path !== "/") {
-        window.document.title =  pageTitle?`${pageTitle} - ${title}`:title;
+        window.document.title = to.meta['title'];
     } else {
-        window.document.title = title;
+        window.document.title = '';
     }
     window.scrollTo(0, 0)
     NProgress.done();

src/store/index.js

@@ -1,11 +1,17 @@
 import {defineStore} from 'pinia'
 import pinia from "~src/store/init"
 import appConfig from '~src/config/app';
+import logoIcon from "~src/assets/logo/icon.png";
+import logoName from "~src/assets/logo/name.png";
 import {getStoreValue, setStoreValue, clearStoreAll} from '~src/utils/storage'
 import {setToken, setRefreshToken, removeToken, removeRefreshToken} from '~src/api/util/auth'
 
 export const useAppStore = defineStore('main', {
     state: () => ({
+        //系统信息
+        title: getStoreValue('title') || appConfig.title,
+        logoIcon: getStoreValue('logoIcon') || logoIcon,
+        logoName: getStoreValue('logoName') || logoName,
         //主题信息
         theme: getStoreValue('theme') || appConfig.theme,    //用户可选择类型：auto,light, dark
         themeVal: getStoreValue('themeVal') || '',           //实际主题：light, dark
@@ -36,6 +42,10 @@ export const useAppStore = defineStore('main', {
         barMenuName: '',
     }),
     getters: {
+        //系统信息
+        getTitle: state => state.title,
+        getLogoIcon: state => state.logoIcon,
+        getLogoName: state => state.logoName,
         //主题信息
         getTheme: state => state.theme,
         getThemeVal: state => state.themeVal,
@@ -65,6 +75,19 @@ export const useAppStore = defineStore('main', {
         getDragModalSortTop: state => state.dragModalSortTop,
     },
     actions: {
+        //系统信息
+        setTitle(value) {
+            this.title = value
+            setStoreValue('title', value)
+        },
+        setLogoIcon(value) {
+            this.logoIcon = value
+            setStoreValue('logoIcon', value)
+        },
+        setLogoName(value) {
+            this.logoName = value
+            setStoreValue('logoName', value)
+        },
         //主题信息
         setTheme(value) {
             this.theme = value
@@ -164,6 +187,9 @@ export const useAppStore = defineStore('main', {
         //清除缓存和token
         clearStoreData() {
             //清除状态
+            this.title = null
+            this.logoIcon = null
+            this.logoName = null
             this.token = null
             this.refreshToken = null
             this.tenantId = null

src/styles/view/login.scss

@@ -11,7 +11,13 @@
         top: 30px;
         user-select: none;
         img {
-            height: 50px;
+            height: 40px;
+        }
+        #logo-icon {
+            height: 36px;
+        }
+        #logo-name {
+            margin-left: 6px;
         }
     }
     .left-pic-container {

src/utils/tools.js

@@ -72,3 +72,9 @@ export const dateFormat = (date, format) => {
 export const getTopUrl = () => {
     return window.location.href.split('/#/')[0];
 }
+
+//设置系统名称
+export const setAppName = (name) => {
+    const title = window.document.title;
+    window.document.title = `${title} - ${name}`;
+}

src/views/login/index.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="login-body">
-        <a class="left-logo" href="http://hczc.hcxxy.com/" target="_blank">
-            <img alt="" src="../../assets/logo/logo-2.png">
+        <a class="left-logo" href="http://hczc.hcxxy.com/" target="_blank" v-if="appLogoIcon">
+            <img alt="" id="logo-icon" :src="appLogoIcon">
+            <img alt="" id="logo-name" :src="appLogoName">
         </a>
         <div class="left-pic-container">
             <Suspense>
@@ -68,19 +69,26 @@
 </template>
 
 <script setup>
-import {ref, onMounted} from "vue";
+import {ref, onMounted, nextTick} from "vue";
 import router from '~src/router/index';
 import {useAppStore} from "~src/store";
 import {useAppLogin} from "~sto/user";
-import {formValidate, getObjVal} from "js-fast-way"
+import {getTenantID} from "~api/user";
+import config from "~src/config/index";
+import {getTopUrl, setAppName} from "~uti/tools";
 import HcPicVue from './components/pic.vue'
 import HcHomeBg from './components/home-bg.vue'
-import {getTenantID} from "~api/user";
-import {getTopUrl} from "~uti/tools";
+import logoIcon from "~src/assets/logo/icon.png";
+import logoName from "~src/assets/logo/name.png";
+import {formValidate, getObjVal, setImageColor} from "js-fast-way"
 
 const userStore = useAppStore()
 userStore.clearStoreData() //先清理下缓存
 
+//系统信息
+const appLogoIcon = ref('')
+const appLogoName = ref('')
+
 //切换登录类型
 const account = ref(true)
 const tenantMode = ref(true)
@@ -91,8 +99,17 @@ const accountClick = () => {
 
 onMounted(() => {
     getTenantIdApi()
+    setAppImageColor()
 })
 
+const setAppImageColor = () => {
+    const dom = document.getElementById('logo-icon')
+    if (dom) {
+        const { result } = setImageColor('#1ECC95');
+        dom.style = result.filter
+    }
+}
+
 //表单
 const formRef = ref(null);
 const checkbox = ref(false)
@@ -125,12 +142,46 @@ const getTenantIdApi = async () => {
     const {error, code, data} = await getTenantID(getTopUrl())
     const res = getObjVal(data)
     if (!error && code === 200 && res) {
+        const {tenantAvatar, tenantAvatarText, tenantTitle, tenantId} = res
         tenantMode.value = false
-        formValue.value.tenantId = res.tenantId
+        //设置标题
+        userStore.setTitle(tenantTitle)
+        setAppName(tenantTitle)
+
+        //设置logo图标
+        const logoIconValue = tenantAvatar ? tenantAvatar : logoIcon
+        appLogoIcon.value = logoIconValue
+        userStore.setLogoIcon(logoIconValue)
+
+        //设置logo文字
+        const logoNameValue = tenantAvatarText ? tenantAvatarText : logoName
+        appLogoName.value = logoNameValue
+        userStore.setLogoName(logoNameValue)
+
+        //设置租户ID
+        formValue.value.tenantId = tenantId
+        userStore.setTenantId(tenantId)
     } else {
         tenantMode.value = true
+        //设置标题
+        userStore.setTitle(config.title)
+        setAppName(config.title)
+
+        //设置logo图标
+        appLogoIcon.value = logoIcon
+        userStore.setLogoIcon(logoIcon)
+
+        //设置logo文字
+        appLogoName.value = logoName
+        userStore.setLogoName(logoName)
+
+        //设置租户ID
         formValue.value.tenantId = "000000"
+        userStore.setTenantId("000000")
     }
+    nextTick(() => {
+        setAppImageColor()
+    })
 }
 
 //登录

yarn.lock

@@ -931,10 +931,10 @@ js-cookie@^3.0.4:
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.4.tgz#9ae3c5f6eb34d2292d76e0579fabfe7c872e1fae"
   integrity sha512-tlu5VGqPFMP5eBefnmszCFZkPXG2n527NRN9XdNtN6FZ5n/0e98TdDm8BOz290OIIsxtXb9XTJjfqE6gVhOHQw==
 
-js-fast-way@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/js-fast-way/-/js-fast-way-0.0.8.tgz#175b1f530cb6220daf22afbf632125f2e7f6b257"
-  integrity sha512-wJ9Am3x2NjiuPFcN3v+5Rwz0Nw95vHrMllNx4YapzmH2fKLqZMW9xFMjOsqOhFL8qORGeNjd94/j+ckPrS6lCQ==
+js-fast-way@^0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/js-fast-way/-/js-fast-way-0.0.9.tgz#4b438e132c85aebddca7c17f600a7a44a3f8b58b"
+  integrity sha512-9ZAsgq3kYbtEqAYqD+gkMQASSk0ymK/evbKuyJBnMBRG+JG7bMmdYuUZssJIBS6OBepF1el/blHGszSDGiebrg==
 
 js-md5@^0.7.3:
   version "0.7.3"