完成颜色切换的功能

src/layout/HeaderV2/RouteNavigation.vue

@@ -3,7 +3,7 @@
                     :config="opt"/>
   <div class="route_navigation_main" ref="tagRef">
     <div v-for="(item,index) in menuList"
-         class="item"
+         :class="index === currentIndex ? 'active_text item' :  'item'"
          :key="index"
          @contextmenu.prevent="contextmenuItem(item,index,$event)"
          @click="router.push(item.path)">
@@ -12,7 +12,7 @@
         <Close/>
       </el-icon>
     </div>
-    <div class="active-box" :style="selectedStyle"/>
+    <div class="active_box" :style="selectedStyle"/>
   </div>
 </template>
 
@@ -88,7 +88,7 @@ let menuKey = $ref([])
 menuKey = tabsHook.getItemKey();
 
 let currentPath = $ref('')
-let currentIndex = -1
+let currentIndex = $ref(-1)
 
 const closeRouter = (index, path) => {
   menuList.value.splice(index, 1)
@@ -205,14 +205,18 @@ $item-height: 40px;
   overflow-x: auto;
   overflow-y: hidden;
   margin-right: 16px;
-  //padding-bottom: 5px;
 }
 
-.active-box {
+.active_text {
+  color: var(--xc-header-active-text-color);
+  opacity: 1 !important;
+}
+
+.active_box {
   position: absolute;
   height: $item-height;
   border-radius: 4px;
-  background-color: white;
+  background-color: var(--xc-header-active-bg-color);
   box-shadow: var(--el-box-shadow-light);
   transition: all .2s;
   -webkit-transition: all .2s;
@@ -254,9 +258,10 @@ $item-height: 40px;
   transition: all .2s;
   white-space: nowrap;
   -webkit-transition: all .2s;
+  opacity: .7;
 
   &:hover {
-    background: rgba(255,255,255,.7);
+    opacity: 1;
   }
 
   i {

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

@@ -3,21 +3,44 @@
     <div title="系统设置">
       <i class="sfont system-shezhi"></i>
     </div>
-    <el-drawer v-model="drawer" title="系统设置" custom-class="herder_height">
-      <el-collapse>
 
-        <el-collapse-item title="菜单配置">
+
+    <el-drawer v-model="drawer" title="系统设置" custom-class="herder_height">
+      <!--   todo 这里是否需要开启黑夜模式   -->
+      <!--      <el-button @click="toggleDark(false) ">黑夜模式</el-button>-->
+      <el-collapse v-model="activeNames">
+        <el-collapse-item title="菜单配置" name="0">
           <el-form>
             <el-form-item label="侧边菜单栏背景色">
-              <el-color-picker v-model="theme.menu.sideMenuBarBackgroundColor"/>
+              <el-color-picker v-model="theme['--el-menu-bg-color']"/>
             </el-form-item>
 
             <el-form-item label="侧边菜单文字颜色">
-              <el-color-picker v-model="theme.menu.sideMenuTextColor"/>
+              <el-color-picker v-model="theme['--el-menu-text-color']"/>
             </el-form-item>
 
             <el-form-item label="侧边菜单激活项背景色">
-              <el-color-picker v-model="theme.menu.activateMenu"/>
+              <el-color-picker v-model="theme['--el-menu-active-color']"/>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+
+        <el-collapse-item title="顶部配置" name="1">
+          <el-form>
+            <el-form-item label="激活菜单背景颜色">
+              <el-color-picker v-model="theme['--xc-header-active-bg-color']"/>
+            </el-form-item>
+
+            <el-form-item label="激活菜单文字颜色">
+              <el-color-picker v-model="theme['--xc-header-active-text-color']"/>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+
+        <el-collapse-item title="按钮配置" name="2">
+          <el-form>
+            <el-form-item label="默认按钮颜色">
+              <el-color-picker v-model="theme['--el-color-primary']"/>
             </el-form-item>
           </el-form>
         </el-collapse-item>
@@ -27,39 +50,44 @@
 </template>
 
 <script setup name="Theme">
-import {theme, themeStyle} from "@/theme";
-import {clone} from "@/utils/clone";
+import {theme} from "@/theme";
+import {useDark, useToggle} from '@vueuse/core'
 
 const tabsHook = {
   setItem: function (val) {
     localStorage.setItem('theme', JSON.stringify(val))
   },
   getItem: function () {
-    return clone(JSON.parse(localStorage.getItem('theme') || '{}'))
+    return JSON.parse(localStorage.getItem('theme') || '{}')
   },
 }
 
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+
 let drawer = $ref(false)
+let activeNames = $ref(['0', '1', '2'])
+
 
 watch(() => theme.value, () => {
-  let tempStyle = {}
+  const el = document.documentElement
   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
-    }
+    el.style.setProperty(key, theme.value[key])
   }
-  themeStyle.value = tempStyle
   tabsHook.setItem(theme.value)
-  console.log(localStorage.getItem('theme'))
-}, {deep: true, immediate: true})
+}, {deep: true})
 
 onMounted(() => {
-  theme.value = tabsHook.getItem()
+  const el = document.documentElement
+  for (let key in theme.value) {
+    el.style.setProperty(key, theme.value[key])
+  }
+  if (localStorage.getItem('theme') == null) {
+    tabsHook.setItem(theme.value)
+  } else {
+    theme.value = tabsHook.getItem()
+  }
 })
 
 </script>

src/layout/MenuV2/MenuV2.vue

@@ -3,8 +3,6 @@
     <Logo ref="logoRef"/>
     <el-scrollbar :height="floatingRef?.clientHeight - logoRef?.clientHeight">
       <el-menu router
-               :background-color="theme.menu.sideMenuBarBackgroundColor"
-               :text-color="theme.menu.sideMenuTextColor"
                :collapse-transition="false"
                :collapse="isCollapse"
                :default-active="activeMenu"
@@ -48,7 +46,7 @@ const activeMenu = computed(() => {
 .floating {
   height: 100%;
   width: 100%;
-  background-color: var(--sideMenuBarBackgroundColor);
+  background-color: var(--el-menu-bg-color);
 
   .el-menu {
     border-right: 0 !important;

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container style="height: 100vh" :style="themeStyle">
+  <el-container style="height: 100vh" >
     <div class="mask" v-show="!isCollapse && !contentFullScreen" @click="hideMenu"></div>
     <el-aside :width="isCollapse ? '50px' : '260px'"
               class="layout_aside"
@@ -32,7 +32,6 @@ import {initWebSocket} from '@/utils/websocket'
 import MenuV2 from "@/layout/MenuV2/MenuV2";
 import HeaderV2 from "@/layout/HeaderV2/HeaderV2";
 import {setVisibleSize} from "@/utils/window-size";
-import {themeStyle} from "@/theme";
 
 
 const store = useStore()

src/main.js

@@ -1,6 +1,7 @@
 import {createApp} from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'normalize.css' // css初始化
 import './assets/style/common.scss' // 公共css
 import App from './App.vue'

src/router/index.js

@@ -25,6 +25,7 @@ const router = createRouter({
 let routesAsynced = false
 
 const vueFile = import.meta.glob('/src/views/**/*.vue')
+
 // TODO 这个方法可以动态添加 路由
 function text() {
     let a = [{
@@ -47,9 +48,7 @@ function text() {
 }
 
 export function addRoutes() {
-    console.log(vueFile)
     text()
-
     let modules = [...Dashboard]
     System.forEach((item) => {
         modules.push(item)

src/theme/index.js

@@ -1,15 +1,10 @@
 import {ref} from 'vue'
 
 export const theme = ref({
-    menu: {
-        // 侧边菜单激活项背景色
-        activateMenu: '',
-        // 侧边菜单栏背景色
-        sideMenuBarBackgroundColor: '',
-        // 侧边菜单文字颜色
-        sideMenuTextColor: ''
-    },
-    test: ''
+    '--el-menu-bg-color': '',
+    '--el-menu-text-color': '',
+    '--el-menu-active-color': '',
+    '--xc-header-active-bg-color': '#fff',
+    '--xc-header-active-text-color': '#000',
 })
 
-export const themeStyle = ref({})