主题配置

src/components/HeadMenu/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="head-menu">
     <div class="hm-head-logo" :class="{__hover: AppStore.userInfo?.isAdmin}" @click="switchMenu">
-      <template v-if="AppStore.theme.logo">
-        <img class="logo" :src="AppStore.theme.logo"/>
+      <template v-if="ThemeStore.logo">
+        <img class="logo" :src="ThemeStore.logo"/>
       </template>
       <div class="title">
-        <div class="main-title">{{AppStore.theme.title}}</div>
-        <div class="sub-title" v-if="AppStore.theme.subTitle">{{AppStore.theme.subTitle}}</div>
+        <div class="main-title">{{ThemeStore.title}}</div>
+        <div class="sub-title" v-if="ThemeStore.subTitle">{{ThemeStore.subTitle}}</div>
       </div>
     </div>
     <slot/>
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import {useAppStore} from "@/stores";
+import {useAppStore, useThemeStore} from "@/stores";
 
 defineOptions({
   name: 'HeadMenu',
@@ -37,6 +37,7 @@ const {proxy} = getCurrentInstance()
 const route = useRoute()
 const router = useRouter()
 const AppStore = useAppStore()
+const ThemeStore = useThemeStore()
 const state: any = reactive({})
 
 const onLoginOut = () => {
@@ -44,8 +45,7 @@ const onLoginOut = () => {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
     type: 'warning',
-  })
-  .then(() => {
+  } as any).then(() => {
     toLogin()
   }).catch(() => {})
 }

src/router/index.ts

@@ -5,7 +5,7 @@ import manageRouter from './modules/manage'
 import Temp404 from '@/views/global/temp/404.vue'
 import {mockGetUserInfo, mockGetConfig} from "@/api/modules/mock/mock";
 import {ElLoading, ElMessage} from "element-plus";
-import {useAppStore} from "@/stores";
+import {useAppStore, useThemeStore} from "@/stores";
 import {toLogin} from "@/utils/permissions";
 import initRootVar from "@/style/initRootVar";
 
@@ -24,8 +24,9 @@ const router = createRouter({
 
 router.beforeEach((to, from , next) => {
     const AppStore = useAppStore()
-    if (themeConfig && !AppStore.theme.init) {
-        AppStore.setTheme(themeConfig)
+    const ThemeStore = useThemeStore()
+    if (themeConfig && !ThemeStore.init) {
+        ThemeStore.setTheme(themeConfig)
     }
     if (userInfo) {
         if (!AppStore.userInfo) {
@@ -36,7 +37,7 @@ router.beforeEach((to, from , next) => {
         if (to.query.routeTitle) {
             to.meta.title = to.query.routeTitle
         }
-        document.title = to.meta?.title || AppStore.theme.title || import.meta.env.VITE_TITLE
+        document.title = to.meta?.title || ThemeStore.title || import.meta.env.VITE_TITLE
         next()
     } else if (to.path === '/login') {
         next()
@@ -76,7 +77,10 @@ export const initMainRouter = async () => {
             mainColor: '#f82828',
             logo: 'https://element-plus.org/images/element-plus-logo.svg',
             title: '海南社管智慧搜索平台',
-            subTitle: 'HAI NAN SHE GUAN ZHI HUI SOU SUO PING TAI'
+            subTitle: 'HAI NAN SHE GUAN ZHI HUI SOU SUO PING TAI',
+            // titleLogo: 'https://element-plus.org/images/element-plus-logo.svg',
+            // webBgImg: 'https://element-plus.org/images/element-plus-logo.svg',
+            loginImg: 'https://element-plus.org/images/element-plus-logo.svg',
         }
         initRootVar(themeConfig)
     } else if (location.pathname !== '/login') {

src/stores/index.ts

@@ -1,3 +1,4 @@
 export * from './app'
 export * from './web'
 export * from './dictionary'
+export * from './theme'

src/stores/theme.ts

@@ -0,0 +1,33 @@
+import {defineStore} from "pinia";
+import titleLogo from '@/assets/images/web/web-home_title.png'
+import webBgImg from '@/assets/images/web/web-home_bg.png'
+
+export const useThemeStore = defineStore('theme', {
+  state: () => ({
+    init: false,
+    title: '智慧搜索平台',
+    subTitle: '',
+    logo: '',
+    titleLogo: titleLogo,
+    webBgImg: webBgImg,
+    loginImg: titleLogo,
+  }),
+  getters: {
+  },
+  actions: {
+    setTheme(config) {
+      this.init = true
+      const setValue = (key1, key2) => {
+        if (config[key2]) {
+          this[key1] = config[key2]
+        }
+      }
+      setValue('title', 'title')
+      setValue('subTitle', 'subTitle')
+      setValue('logo', 'logo')
+      setValue('titleLogo', 'titleLogo')
+      setValue('webBgImg', 'webBgImg')
+      setValue('loginImg', 'loginImg')
+    }
+  },
+})

src/views/web/home/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="web-home">
+  <div class="web-home" :style="{
+    backgroundImage: `url('${ThemeStore.webBgImg}')`
+  }">
     <div class="title">
-      <img src="@/assets/images/web/web-home_title.png"/>
+      <img :src="ThemeStore.titleLogo"/>
     </div>
     <div class="area">
       <div class="selected">
@@ -72,11 +74,12 @@
 import {computed, getCurrentInstance, onMounted, reactive} from "vue";
 import router from "@/router";
 import {ElMessage} from "element-plus";
-import {useWebStore} from "@/stores";
+import {useThemeStore, useWebStore} from "@/stores";
 import {mockGetSearchHistory} from "@/api/modules/mock/mock";
 
 const {proxy} = getCurrentInstance()
 const WebStore = useWebStore()
+const ThemeStore = useThemeStore()
 const state: any = reactive({
   searchText: '',
   historyList: [],
@@ -162,7 +165,6 @@ onMounted(() => {
 .web-home {
   width: 100%;
   height: 100%;
-  background-image: url("@/assets/images/web/web-home_bg.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   display: flex;
@@ -171,6 +173,9 @@ onMounted(() => {
   gap: 40px;
   .title {
     margin-top: 300px;
+    >img {
+      width: 100%;
+    }
   }
   .area {
     width: 1000px;

src/views/web/list/index.vue

@@ -187,8 +187,8 @@
                         </div>
                       </div>
                       <div class="cols" :style="{
-                      gridTemplateColumns: `repeat(${tableConfigCpt.cardCol}, 1fr)`
-                    }">
+                        gridTemplateColumns: `repeat(${tableConfigCpt.cardCol}, 1fr)`
+                      }">
                         <template v-for="c in tableConfigCpt.cardConfig">
                           <div class="cols-item" :style="{
                           gridColumn: `span ${c.col}`