项目图标和名称

package.json

@@ -32,7 +32,7 @@
         "archiver": "^5.3.1",
         "autoprefixer": "^10.4.14",
         "codemirror": "^6.0.1",
-        "js-fast-way": "^0.0.8",
+        "js-fast-way": "^0.0.9",
         "mitt": "^3.0.0",
         "postcss": "^8.4.23",
         "sass": "^1.62.0",

src/config/index.json

@@ -1,6 +1,6 @@
 {
   "version": "20230423142605",
-  "target": "http://127.0.0.1:8090",
+  "target": "http://47.110.251.215:8090",
   "smsPhone": "",
   "vite": {}
-}
+}

src/layout/index.vue

@@ -5,9 +5,8 @@
         </div> -->
         <el-aside :width="isCollapse?'120px':'250px'" class="hc-aside-box" :class="[isCollapse?'is-collapse':'']" v-show="MenuBarKey !== 'home-index'">
             <div class="hc-aside-logo-box" @click="logoClick">
-                <img class="logo-img" :src="getAssetsHomeFile(`${AppColor.name}.png`)" alt="">
-                <img class="logo-img-1 white" :src="NameDark" alt="" v-if="!isCollapse">
-                <img class="logo-img-1 dark" :src="NameWhite" alt="" v-if="!isCollapse">
+                <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>
@@ -64,15 +63,20 @@ import HelpInfoBar from "./modules/HelpInfoBar.vue"
 import UserInfoBar from "./modules/UserInfoBar.vue"
 import ConfigBar from "./modules/ConfigBar.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()
 const useRoutes = useRoute()
 const useAppState = useAppStore()
 
+//系统信息
+const appTitle = ref(useAppState.getTitle)
+const appLogoIcon = ref(useAppState.getLogoIcon)
+const appLogoName = ref(useAppState.getLogoName)
+
 //路由参数
 const routerQuery = useRoutes?.query;
 const reloadRouter = ref(true)
@@ -115,6 +119,7 @@ onMounted(() => {
     setIsCollapse(RoutesName.value)
     useAppState.barMenuName = BarMenuTitle
     setInitSocket()
+    setLogoImageColor()
 })
 
 //监听
@@ -142,8 +147,29 @@ watch(() => [
         projectInfoData.value = projectInfo
     }
     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') {
@@ -234,19 +260,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上传的图片数据;
-    let url = window.URL.createObjectURL(file); // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
-    document.getElementById("imagebox").src = url;
-}
-
 //首页
 const logoClick = () => {
     router.push({name: 'home-index'});

src/layout/layout.scss

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

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', {
         getCollapse: state => state.isCollapse
     },
     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
@@ -165,6 +188,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

@@ -93,3 +93,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 href="http://hczc.hcxxy.com/" target="_blank" class="left-logo">
-            <img src="../../assets/logo/logo-2.png" alt="">
+        <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>
@@ -63,20 +64,26 @@
 </template>
 
 <script setup>
-import {ref, onMounted} from "vue";
+import {ref, onMounted, nextTick} from "vue";
 import website from '~src/config/index'
 import router from '~src/router/index';
 import {useAppStore} from "~src/store";
 import {useAppLogin} from "~sto/user";
-import {formValidate, getObjVal} from "js-fast-way"
 import HcPicVue from './components/pic.vue'
 import HcHomeBg from './components/home-bg.vue'
 import {getTenantID} from "~api/user";
-import {getTopUrl} from "~uti/tools";
+import {getTopUrl, setAppName} 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)
@@ -87,8 +94,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)
@@ -121,12 +137,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(website.title)
+        setAppName(website.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

@@ -1032,10 +1032,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.npmjs.org/js-fast-way/-/js-fast-way-0.0.8.tgz"
-  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"