主题logo调整

index.html

@@ -32,8 +32,8 @@
   <!--end::Theme mode setup on page load-->
   <div id="app"></div>
   <!--begin::Loading markup-->
-  <div id="splash-screen" class="splash-screen">
-    <img src="/media/logos/default-small.svg" alt="IWB logo" />
+  <div class="splash-screen">
+    <img src="/media/logos/logo.png" alt="IWB logo" />
     <span>加载中 ...</span>
   </div>
   <!--end::Loading markup-->

src/assets/sass/_theme-green.scss

@@ -0,0 +1,31 @@
+[data-kt-app-layout=green-sidebar]{
+  .app-sidebar {
+    background-color: #00a88e;
+    .app-sidebar-logo{
+      border-bottom: 1px dashed #009a8e;
+    }
+    .menu {
+      .menu-item {
+        .menu-link{
+          &.active {
+            background-color:  #009a8e;
+          }
+          color: #eee;
+          .menu-bullet{
+            .bullet{
+              background-color: #ccc;
+            }
+          }
+          .menu-title{
+            color: #eee;
+          }
+          .menu-arrow{
+            &:after{
+              background-color: #eee;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/assets/sass/style.scss

@@ -13,5 +13,6 @@
 @import "./core/layout/base/layout";
 @import "layout/layout";
 
+@import "theme-green";
 @import "table";
 @import "common";

src/core/config/LayoutConfigTypes.ts

@@ -1,8 +1,8 @@
 interface General {
-  mode: "dark" | "light"
+  mode: "dark" | "light" | "green"
   primaryColor: "#50CD89"
   pageWidth: string
-  layout: "dark-sidebar" | "light-sidebar" | "light-header" | "dark-header"
+  layout: "dark-sidebar" | "light-sidebar" | "green-sidebar" | "light-header" | "dark-header"
 }
 
 interface Illustrations {

src/core/services/LayoutService.ts

@@ -32,7 +32,7 @@ class LayoutService {
   public static initLayoutSettings(): void {
     const pageWidth = objectPath.get(config.value, "general.pageWidth")
     const layout = objectPath.get(config.value, "general.layout")
-
+    //console.log("LAYOUT", layout)
     this.store.addBodyAttribute({
       qualifiedName: "id",
       value: "kt_app_body",

src/layouts/main-layout/header/Header.vue

@@ -14,7 +14,7 @@
         class="d-flex align-items-center flex-grow-1 flex-lg-grow-0 me-lg-15"
       >
         <router-link to="/">
-          <img
+          <!-- <img
             v-if="themeMode === 'light' && layout === 'light-header'"
             alt="Logo"
             :src="getAssetPath('media/logos/default.svg')"
@@ -25,6 +25,11 @@
             alt="Logo"
             :src="getAssetPath('media/logos/default-dark.svg')"
             class="h-20px h-lg-30px app-sidebar-logo-default"
+          /> -->
+          <img
+            alt="Logo"
+            :src="getAssetPath('media/logos/logo.png')"
+            class="h-20px h-lg-30px app-sidebar-logo-default"
           />
         </router-link>
       </div>
@@ -40,7 +45,8 @@
       <!--begin::Mobile logo-->
       <div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0">
         <router-link to="/" class="d-lg-none">
-          <img alt="Logo" :src="getAssetPath('media/logos/default-small.svg')" class="h-30px" />
+          <!-- <img alt="Logo" :src="getAssetPath('media/logos/default-small.svg')" class="h-30px" /> -->
+          <img alt="Logo" :src="getAssetPath('media/logos/logo.png')" class="h-30px" />
         </router-link>
       </div>
       <!--end::Mobile logo-->

src/layouts/main-layout/sidebar/SidebarLogo.vue

@@ -3,7 +3,7 @@
   <div class="app-sidebar-logo px-6" id="kt_app_sidebar_logo">
     <!--begin::Logo image-->
     <router-link to="/">
-      <img
+      <!-- <img
         v-if="layout === 'dark-sidebar' || (themeMode === 'dark' && layout === 'light-sidebar')"
         alt="Logo"
         :src="getAssetPath('media/logos/default-dark.svg')"
@@ -14,8 +14,14 @@
         alt="Logo"
         :src="getAssetPath('media/logos/default.svg')"
         class="h-25px app-sidebar-logo-default"
-      />
-      <img alt="Logo" :src="getAssetPath('media/logos/default-small.svg')" class="h-20px app-sidebar-logo-minimize" />
+      /> -->
+      <div class="h-25px app-sidebar-logo-default p-0">
+        <div class="d-flex align-items-center h-100">
+          <img alt="Logo" :src="getAssetPath('media/logos/logo.png')" class="h-100 p-0" />
+          <span class="ps-4 fs-3 text-light fw-bolder h-100">餐饮油烟监管平台</span>
+        </div>
+      </div>
+      <img alt="Logo" :src="getAssetPath('media/logos/logo.png')" class="h-20px app-sidebar-logo-minimize" />
     </router-link>
     <!--end::Logo image-->
     <!--begin::Sidebar toggle-->

src/stores/_auth.ts

@@ -30,6 +30,7 @@ export const useAuthStore = defineStore("auth", () => {
     user.value = null
     storages.removeItem(USER_KEY)
     appStore.menuStore.removeMenus()
+    appStore.bodyConfigStore.clearThemeMode()
     JwtService.destroyToken()
   }
 

src/stores/_bodyConfig.ts

@@ -4,6 +4,7 @@ import objectPath from "object-path"
 import type LayoutConfigTypes from "@/core/config/LayoutConfigTypes"
 import layoutConfig from "@/core/config/DefaultLayoutConfig"
 import { ThemeModeComponent } from "@/assets/ts/layout"
+import storages from "@/core/utils/storages"
 
 export const LS_CONFIG_NAME_KEY = "config_" + import.meta.env.VITE_APP_NAME
 
@@ -21,7 +22,7 @@ export const useBodyConfigStore = defineStore("body", () => {
 
   function setLayoutConfigProperty(property: string, value: any) {
     objectPath.set(config.value, property, value)
-    localStorage.setItem(LS_CONFIG_NAME_KEY, JSON.stringify(config.value))
+    storages.setItem(LS_CONFIG_NAME_KEY, JSON.stringify(config.value))
   }
 
   function resetLayoutConfig() {
@@ -32,7 +33,7 @@ export const useBodyConfigStore = defineStore("body", () => {
     config.value = initial.value = Object.assign(
       {},
       initial.value,
-      JSON.parse(window.localStorage.getItem(LS_CONFIG_NAME_KEY) || "{}")
+      JSON.parse(storages.getItem(LS_CONFIG_NAME_KEY) || "{}")
     )
   }
 
@@ -66,19 +67,22 @@ export const useBodyConfigStore = defineStore("body", () => {
       classes.value[position].push(className)
     }
   }
-  const mode = ref<"light" | "dark" | "system">(
-    localStorage.getItem(THEME_MODE_LS_KEY)
-      ? (localStorage.getItem(THEME_MODE_LS_KEY) as "light" | "dark" | "system")
+  const mode = ref<"light" | "dark" | "system" | "green">(
+    storages.getItem(THEME_MODE_LS_KEY)
+      ? (storages.getItem(THEME_MODE_LS_KEY) as "light" | "dark" | "system" | "green")
       : ThemeModeComponent.getSystemMode()
   )
 
-  function setThemeMode(payload: "light" | "dark" | "system") {
-    localStorage.setItem(THEME_MODE_LS_KEY, payload)
-    localStorage.setItem(THEME_MENU_MODE_LS_KEY, payload)
+  function setThemeMode(payload: "light" | "dark" | "system" | "green") {
+    storages.setItem(THEME_MODE_LS_KEY, payload)
+    storages.setItem(THEME_MENU_MODE_LS_KEY, payload)
     document.documentElement.setAttribute("data-bs-theme", payload)
     ThemeModeComponent.init()
     mode.value = payload
   }
+  function clearThemeMode() {
+    storages.removeItem(LS_CONFIG_NAME_KEY)
+  }
 
   return {
     config,
@@ -94,5 +98,6 @@ export const useBodyConfigStore = defineStore("body", () => {
     addClassname,
     themeMode: mode,
     setThemeMode,
+    clearThemeMode,
   }
 })

tsconfig.config.json

@@ -7,6 +7,7 @@
     "playwright.config.*"
   ],
   "compilerOptions": {
+    "ignoreDeprecations": "5.0",
     "composite": true,
     "types": [
       "node"

tsconfig.json

@@ -12,6 +12,7 @@
   ],
   "compilerOptions": {
     "target": "es5",
+    "ignoreDeprecations": "5.0",
     "downlevelIteration": true,
     "module": "esnext",
     "strict": true,