fix: 🐛 修复banner未加载完成出现细线异常

app/web/src/App.vue

@@ -45,10 +45,18 @@ const themeOverrides: GlobalThemeOverrides = {
     fontFamily: 'ChillRoundGothic',
     fontFamilyMono: 'ChillRoundGothic',
   },
+  Menu: {
+    itemTextColorActiveHoverHorizontal: 'var(--text-color)',
+    itemTextColorHoverHorizontal: 'var(--text-color)',
+    itemTextColorActiveHorizontal: 'var(--text-color)',
+  },
   Card: {
     color: 'transparent',
     borderColor: 'transparent',
   },
+  BackTop: {
+    iconColorHover: 'var(--text-color)',
+  },
 }
 </script>
 

app/web/src/store/app.ts

@@ -159,7 +159,7 @@ export const useAppStore = defineStore('app', {
             RouterLink,
             {
               to: { name: menu.routerName },
-              class: 'hover:!text-orange-500 dark:hover:!text-green-300',
+              // class: 'hover:!text-orange-500 dark:hover:!text-green-300',
             },
             { default: () => i18nt(menu.name) },
           ),

app/web/src/style/index.css

@@ -3,12 +3,12 @@
 @tailwind utilities;
 
 :root {
-  --text-color: rgb(249 115 22);
+  --text-color: #f97316;
   --bg-color: #f0f0f0;
 }
 
 html.dark:root{
-  --text-color: rgb(134 239 172);
+  --text-color: #86efac;
   --bg-color: #18181c;
 }
 
@@ -44,7 +44,7 @@ body::-webkit-scrollbar {
 }
 
 body::-webkit-scrollbar-thumb {
-  background: hsl(0deg 0% 70%);
+  background: #b3b3b3;
   border-radius: 5px;
 }
 

app/web/src/use/media-query.ts

@@ -0,0 +1,61 @@
+import { onUnmounted, ref } from 'vue'
+
+export function useMediaQuery(query: string) {
+  const mediaQueryList = window.matchMedia(query)
+  const matches = ref(mediaQueryList.matches)
+
+  const changeHandler = (event: MediaQueryListEvent) => {
+    matches.value = event.matches
+  }
+
+  mediaQueryList.addEventListener('change', changeHandler)
+
+  onUnmounted(() => mediaQueryList.removeEventListener('change', changeHandler))
+
+  return matches
+}
+
+// sm
+export function useIsSmScreen() {
+  return useMediaQuery('(min-width: 640px)')
+}
+
+// md
+export function useIsMdScreen() {
+  return useMediaQuery('(min-width: 768px)')
+}
+
+// lg
+export function useIsLgScreen() {
+  return useMediaQuery('(min-width: 1024px)')
+}
+
+// xl
+export function useIsXlScreen() {
+  return useMediaQuery('(min-width: 1280px)')
+}
+
+// 2xl
+export function useIs2XlScreen() {
+  return useMediaQuery('(min-width: 1536px)')
+}
+
+// [0,sm)
+export function useIsLessThanSmScreen() {
+  return useMediaQuery('(max-width: 639px)')
+}
+
+// [sm,md)
+export function useIsBetweenSmAndMdScreen() {
+  return useMediaQuery('(min-width: 640px) and (max-width: 767px)')
+}
+
+// [md,lg)
+export function useIsBetweenMdAndLgScreen() {
+  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)')
+}
+
+// [lg,xl)
+export function useIsBetweenLgAndXlScreen() {
+  return useMediaQuery('(min-width: 1024px) and (max-width: 1279px)')
+}

app/web/src/views/components/CBanner.vue

@@ -6,8 +6,8 @@ const appStore = useAppStore()
 </script>
 
 <template>
-  <div class="relative">
-    <NCarousel v-if="appStore.banners.length > 0" autoplay>
+  <div v-if="appStore.banners.length > 0" class="relative">
+    <NCarousel autoplay>
       <div
         v-for="banner in appStore.banners"
         :key="banner.src" class="border border-transparent h-48 md:h-56 lg:h-64 xl:h-72 w-full inline-block rounded-md overflow-hidden"

app/web/src/views/layout/LBody.vue

@@ -8,7 +8,3 @@
     </router-view>
   </div>
 </template>
-
-<style lang="css" scoped>
-
-</style>

app/web/src/views/layout/LHeader.vue

@@ -7,6 +7,7 @@ import appConfig from '~/app.config'
 import { IGithubCircle, IMenu, IWorld } from '~/icons'
 import { RouteName } from '~/router/routes'
 import { useAppStore } from '~/store/app'
+import { useIsMdScreen } from '~/use/media-query'
 import CHeaderSelect from '../components/CHeaderSearch.vue'
 
 const appStore = useAppStore()
@@ -28,6 +29,8 @@ router.beforeEach((_to, _from, next) => {
 watch(() => route.name, () => {
   menu.value = route.name as string
 }, { immediate: true })
+
+const isMdScreen = useIsMdScreen()
 </script>
 
 <template>
@@ -43,7 +46,7 @@ watch(() => route.name, () => {
           </div>
           <div class="flex items-center">
             <CHeaderSelect />
-            <div class="hidden md:block">
+            <div v-if="isMdScreen">
               <NSpace align="center">
                 <NMenu v-model:value="menu" :options="appStore.menuOptions" mode="horizontal" />
                 <CLink @click="appStore.toggleLanguage">
@@ -63,7 +66,7 @@ watch(() => route.name, () => {
                 </CLink>
               </NSpace>
             </div>
-            <CLink class="block md:hidden">
+            <CLink v-else>
               <IMenu :size="30" @click="toggleDrawer" />
             </CLink>
             <div v-show="drawer" class="absolute left-0 top-full w-full h-screen">
@@ -117,18 +120,4 @@ watch(() => route.name, () => {
 ::v-deep(.n-menu .n-menu-item-content:hover::before) {
   background: none !important;
 }
-
-::v-deep(.n-menu .n-menu-item-content--selected .n-menu-item-content-header a){
-  color: var(--text-color) !important;
-}
-
-/* .header .n-card {
-  background-image: radial-gradient(transparent 3px, #ffffff 10px);
-  backdrop-filter: saturate(80%) blur(1px);
-  background-size: 6px 6px;
-}
-
-html.dark .header .n-card {
-  background-image: radial-gradient(transparent 3px, rgb(16, 16, 20) 3px);
-} */
 </style>

app/web/src/views/layout/LMain.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { useLoadingBar, useMessage } from 'naive-ui'
+import { NBackTop, useLoadingBar, useMessage } from 'naive-ui'
+import { useIsMdScreen } from '~/use/media-query'
 import LBody from './LBody.vue'
 import LFooter from './LFooter.vue'
 import LHeader from './LHeader.vue'
 
 window.$message = useMessage()
 window.$loadingBar = useLoadingBar()
+
+const isMdScreen = useIsMdScreen()
 </script>
 
 <template>
@@ -14,4 +17,5 @@ window.$loadingBar = useLoadingBar()
     <LBody class="flex-grow my-2" />
     <LFooter />
   </div>
+  <NBackTop :right="isMdScreen ? 40 : 20" :bottom="isMdScreen ? 40 : 20" />
 </template>