Forráskód Böngészése

fix: routeTravel夜间模式失效问题

lvkun 2 éve
szülő
commit
a8a8c9ece5
1 módosított fájl, 12 hozzáadás és 5 törlés
  1. 12 5
      src/layout/routerTravel.vue

+ 12 - 5
src/layout/routerTravel.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="router-travel"  ref="routeTravelDom"  >
+  <div class="router-travel"  ref="routeTravelDom"  :style="{backgroundColor: bgColor, color: textColor}">
     <div class="route-list" ref="routeListDom"  @wheel="horizontalScroll">
       <div
         :class="[
           'route',
           useRouterTravel.currentRoute?.path === item.path ? 'active' : ''
         ]"
+        :style="{backgroundColor: bgColor}"
         v-for="(item, index) in useRouterTravel.history"
         :key="item.path"
         @click="onChangeRoute(item)"
@@ -21,11 +22,11 @@
       </a-space>
       </div>
     </div>
-    <div class="expend-button" ref="expendButtonDom" >
+    <div class="expend-button" ref="expendButtonDom" :style="{backgroundColor: bgColor, color: textColor}"   >
       <a-space>
         <a-dropdown>
           <a class="ant-dropdown-link" @click.prevent>
-            <MoreOutlined style="font-size: 24px;" />
+            <MoreOutlined :style="{ fontSize: '24px'}"  />
           </a>
           <template #overlay>
             <a-menu>
@@ -44,8 +45,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useRouterTravelStore } from '@/store'
+import { ref, computed } from 'vue'
+import { useRouterTravelStore, useDesignStore } from '@/store'
 import { ReloadIconTsx } from '@/components/MicroComponents'
 import { CloseOutlined, MoreOutlined } from '@ant-design/icons-vue'
 import { useSchedulerOnce } from '@/hooks'
@@ -62,6 +63,12 @@ const expendButtonDom = ref<HTMLElement>()
 
 const onChangeRoute = (item) => useRouterTravel.setCurrentRoute(item)
 
+const designStore = useDesignStore()
+
+const bgColor = computed(() => designStore.theme ? '#141414' : '#fff')
+
+const textColor = computed(() => designStore.theme ? '#fff' : '#141414')
+
 const reloadPage = () => {
   loading.value = true
   useRouterTravel.keyCount++