|
|
@@ -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++
|