Merge remote-tracking branch 'upstream/master'

src/layout/HeaderV2/function-list/Theme.vue

@@ -4,51 +4,62 @@
       <i class="sfont system-shezhi"></i>
     </div>
     <el-drawer v-model="drawer" title="系统设置" custom-class="herder_height">
-      <el-divider>全局设置</el-divider>
-      <el-form>
+      <el-collapse>
 
-        <el-form-item label="侧边菜单栏背景色">
-          <el-color-picker v-model="theme.menu.sideMenuBarBackgroundColor"/>
-        </el-form-item>
+        <el-collapse-item title="菜单配置">
+          <el-form>
+            <el-form-item label="侧边菜单栏背景色">
+              <el-color-picker v-model="theme.menu.sideMenuBarBackgroundColor"/>
+            </el-form-item>
 
-        <el-form-item label="侧边菜单文字颜色">
-          <el-color-picker v-model="theme.menu.sideMenuTextColor"/>
-        </el-form-item>
+            <el-form-item label="侧边菜单文字颜色">
+              <el-color-picker v-model="theme.menu.sideMenuTextColor"/>
+            </el-form-item>
 
-        <el-form-item label="侧边菜单激活项背景色">
-          <el-color-picker v-model="theme.menu.activateMenu"/>
-        </el-form-item>
-
-
-      </el-form>
+            <el-form-item label="侧边菜单激活项背景色">
+              <el-color-picker v-model="theme.menu.activateMenu"/>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+      </el-collapse>
     </el-drawer>
   </div>
 </template>
 
 <script setup name="Theme">
-import {clone} from '@/utils/clone'
-import store from '@/store'
+import {theme, themeStyle} from "@/theme";
+import {clone} from "@/utils/clone";
+
+const tabsHook = {
+  setItem: function (val) {
+    localStorage.setItem('theme', JSON.stringify(val))
+  },
+  getItem: function () {
+    return clone(JSON.parse(localStorage.getItem('theme') || '{}'))
+  },
+}
 
 let drawer = $ref(false)
 
-let theme = $ref({
-  menu: {
-    // 侧边菜单激活项背景色
-    activateMenu: '',
-    // 侧边菜单文字颜色
-    sideMenuBarBackgroundColor: '',
-    // 侧边菜单栏背景色
-    sideMenuTextColor: ''
+watch(() => theme.value, () => {
+  let tempStyle = {}
+  for (let key in theme.value) {
+    let item = theme.value[key]
+    if (typeof item === 'object') {
+      for (let key2 in item) {
+        tempStyle['--' + key2] = item[key2]
+      }
+    } else {
+      tempStyle['--' + key] = item
+    }
   }
-})
-
-watch(() => theme, () => {
-  store.commit('app/setTheme', clone(theme))
-}, {deep: true})
+  themeStyle.value = tempStyle
+  tabsHook.setItem(theme.value)
+  console.log(localStorage.getItem('theme'))
+}, {deep: true, immediate: true})
 
 onMounted(() => {
-  console.log(store.state.app.theme)
-  // theme = clone(store.state.app.theme)
+  theme.value = tabsHook.getItem()
 })
 
 </script>

src/layout/MenuV2/MenuV2.vue

@@ -3,7 +3,8 @@
     <Logo ref="logoRef"/>
     <el-scrollbar :height="floatingRef?.clientHeight - logoRef?.clientHeight">
       <el-menu router
-               :text-color="theme?.sideMenuTextColor"
+               :background-color="theme.menu.sideMenuBarBackgroundColor"
+               :text-color="theme.menu.sideMenuTextColor"
                :collapse-transition="false"
                :collapse="isCollapse"
                :default-active="activeMenu"
@@ -20,12 +21,13 @@ import MenuItemV2 from "./MenuItemV2.vue";
 import {computed, Ref, ref} from "vue";
 import {useRoute} from "vue-router";
 import Logo from '../HeaderV2/Logo.vue'
+import {theme} from "@/theme";
 
 const data = store.state.user.routes
 const expandOneMenu = computed(() => store.state.app.expandOneMenu)
 const route = useRoute()
 const isCollapse = computed(() => store.state.app.isCollapse)
-const theme = computed(() => store.state?.app?.theme.menu)
+
 
 const logoRef: Ref<HTMLHtmlElement> = ref(null)
 const floatingRef: Ref<HTMLHtmlElement> = ref(null)
@@ -46,6 +48,7 @@ const activeMenu = computed(() => {
 .floating {
   height: 100%;
   width: 100%;
+  background-color: var(--sideMenuBarBackgroundColor);
 
   .el-menu {
     border-right: 0 !important;

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container style="height: 100vh">
+  <el-container style="height: 100vh" :style="themeStyle">
     <div class="mask" v-show="!isCollapse && !contentFullScreen" @click="hideMenu"></div>
     <el-aside :width="isCollapse ? '50px' : '260px'"
               class="layout_aside"
@@ -31,15 +31,13 @@ import {useRouter} from 'vue-router'
 import {initWebSocket} from '@/utils/websocket'
 import MenuV2 from "@/layout/MenuV2/MenuV2";
 import HeaderV2 from "@/layout/HeaderV2/HeaderV2";
-import ScrollNotifications from "@/layout/HeaderV2/ScrollNotifications";
-import {setVisibleSize, visibleWindowSize} from "@/utils/window-size";
+import {setVisibleSize} from "@/utils/window-size";
+import {themeStyle} from "@/theme";
 
 
 const store = useStore()
 const isCollapse = computed(() => store.state.app.isCollapse)
 const contentFullScreen = computed(() => store.state.app.contentFullScreen)
-const showLogo = computed(() => store.state.app.showLogo)
-const showTabs = computed(() => store.state.app.showTabs)
 
 
 const hideMenu = () => {

src/theme/index.js

@@ -1,96 +1,15 @@
+import {ref} from 'vue'
 
-export const style = {
-  'default': {
+export const theme = ref({
     menu: {
-      textColor: '#bfcbd9',
-      background: '#28415a',
-      childrenBackground: '#1f2d3d',
-      hoverBackground: '#203448',
-      submenuActiveColor: '#fff'
-    },
-    logo: {
-      color: '#f1f1f1',
-      background: '#263445'
-    },
-    header: {
-      background: '#fff',
-      textColor: '#303133',
-      itemHoverColor: 'rgba(0,0,0,.025)',
-      breadcrumbTextColor: '#606266',
-      borderColor: '#d8dce5',
-      tabBackground: '#fff'
-    },
-    container: {
-      background: '#f0f2f5',
-      mainBackground: '#fff'
-    },
-    page: {
-      background: '#fff',
-      color: '#303133',
-      tipColor: 'rgba(0, 0, 0, 0.45)',
-      borderColor: '#ebeef5'
-    }
-  },
-  'light': {
-    menu: {
-      textColor: '#272727',
-      background: '#fff',
-      childrenBackground: '#fff',
-      hoverBackground: '#f1f1f1',
-      submenuActiveColor: 'var(--system-primary-color)'
-    },
-    logo: {
-      color: '#000',
-      background: '#fff'
-    },
-    header: {
-      background: '#fff',
-      textColor: '#303133',
-      itemHoverColor: 'rgba(0,0,0,.025)',
-      breadcrumbTextColor: '#606266',
-      borderColor: '#d8dce5',
-      tabBackground: '#fff'
-    },
-    container: {
-      background: '#f0f2f5',
-      mainBackground: '#fff'
-    },
-    page: {
-      background: '#fff',
-      color: '#303133',
-      tipColor: 'rgba(0, 0, 0, 0.45)',
-      borderColor: '#ebeef5'
-    }
-  },
-  'dark': {
-    menu: {
-      textColor: '#bbb',
-      background: '#18181c',
-      childrenBackground: '#18181c',
-      hoverBackground: '#000',
-      submenuActiveColor: '#fff'
-    },
-    logo: {
-      color: '#fff',
-      background: '#18181c'
-    },
-    header: {
-      background: '#18181c',
-      textColor: '#e3e3e4',
-      itemHoverColor: '#000',
-      breadcrumbTextColor: '#fff',
-      borderColor: '#3e3e3e',
-      tabBackground: '#1b1b1b'
-    },
-    container: {
-      background: '#000',
-      mainBackground: '#18181c'
-    },
-    page: {
-      background: '#18181c',
-      color: '#c7c7c7',
-      tipColor: 'rgba(255, 255, 255, 0.45)',
-      borderColor: '#3e3e3e'
-    }
-  }
-}
+        // 侧边菜单激活项背景色
+        activateMenu: '',
+        // 侧边菜单栏背景色
+        sideMenuBarBackgroundColor: '',
+        // 侧边菜单文字颜色
+        sideMenuTextColor: ''
+    },
+    test: ''
+})
+
+export const themeStyle = ref({})