fix: 跳转高亮修复并抽象出函数，现在每个页面不必要手动 watch；跳转滚动修复

Author: HouLiXieBuRou

src/App.vue

@@ -12,6 +12,7 @@ const router = useRouter();
 router.afterEach((to, from) => {
   highBrightnessControllerStore.obj[to.path] =
     !highBrightnessControllerStore.obj[to.path];
+  console.log(highBrightnessControllerStore.obj[to.path], 2);
 });
 
 const themeStore = useThemeStore();

src/components/AppSupport.vue

@@ -2,9 +2,9 @@
 import AppLink from './AppLink.vue';
 import CategorySecond from '../components/CategorySecond.vue';
 import highlightElement from '../utils/animation';
-import { ref, watch } from 'vue';
-import { useHighBrightnessControllerStore } from '../stores/miscellaneous';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
+import { useHighlightWatch } from '../utils/utils';
 
 const route = useRoute();
 
@@ -14,21 +14,14 @@ const props = defineProps({
     required: true
   }
 });
-const highBrightnessControllerStore = useHighBrightnessControllerStore();
-
-watch(
-  () => highBrightnessControllerStore.obj[route.path],
-  () => {
-    switch (route.hash) {
-      case '#support':
-        highlightElement(support);
-        break;
-    }
-  },
-  {
-    flush: 'post'
+const switchHash = () => {
+  switch (route.hash) {
+    case '#support':
+      highlightElement(support);
+      break;
   }
-);
+};
+useHighlightWatch(switchHash);
 
 const support = ref();
 </script>

src/pages/afterglow/AfterglowIndex.vue

@@ -1,33 +1,26 @@
 <script setup>
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref } from 'vue';
 import CategorySecond from '../../components/CategorySecond.vue';
 import AppH2 from '../../components/AppH2.vue';
 import { useRoute } from 'vue-router';
 import highlightElement from '../../utils/animation';
 import { useHighBrightnessControllerStore } from '../../stores/miscellaneous';
 import AppSupport from '../../components/AppSupport.vue';
 import AccordionNavigation from '../../components/AccordionNavigation.vue';
-import { onImgLoad, useSeizeSeat } from '../../utils/utils';
+import { onImgLoad, useHighlightWatch, useSeizeSeat } from '../../utils/utils';
 
 const route = useRoute();
 
 const features = ref();
 
-const highBrightnessControllerStore = useHighBrightnessControllerStore();
-
-watch(
-  () => highBrightnessControllerStore.obj[route.path],
-  () => {
-    switch (route.hash) {
-      case '#features':
-        highlightElement(features);
-        break;
-    }
-  },
-  {
-    flush: 'post'
+const switchHash = () => {
+  switch (route.hash) {
+    case '#features':
+      highlightElement(features);
+      break;
   }
-);
+};
+useHighlightWatch(switchHash);
 
 const navigationList = [
   {

src/pages/aosc-os/AoscIndex.vue

@@ -1,33 +1,26 @@
 <script setup>
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref } from 'vue';
 import CategorySecond from '../../components/CategorySecond.vue';
 import AppH2 from '../../components/AppH2.vue';
 import { useRoute } from 'vue-router';
 import highlightElement from '../../utils/animation';
-import { useHighBrightnessControllerStore } from '../../stores/miscellaneous';
 import AppSupport from '../../components/AppSupport.vue';
 import AccordionNavigation from '../../components/AccordionNavigation.vue';
-import { onImgLoad, useSeizeSeat } from '../../utils/utils';
+import { onImgLoad, useHighlightWatch, useSeizeSeat } from '../../utils/utils';
 
 const route = useRoute();
 
 const features = ref();
 
-const highBrightnessControllerStore = useHighBrightnessControllerStore();
-
-watch(
-  () => highBrightnessControllerStore.obj[route.path],
-  () => {
-    switch (route.hash) {
-      case '#features':
-        highlightElement(features);
-        break;
-    }
-  },
-  {
-    flush: 'post'
+const switchHash = () => {
+  switch (route.hash) {
+    case '#features':
+      highlightElement(features);
+      break;
   }
-);
+};
+
+useHighlightWatch(switchHash);
 
 const navigationList = [
   {

src/pages/download/DownloadIndex.vue

@@ -3,15 +3,14 @@ import CategorySecond from '../../components/CategorySecond.vue';
 import TitleComponent from './components/TitleComponent.vue';
 import DownloadButtonGroup from './components/DownloadButtonGroup.vue';
 import WslDetails from './components/WslDetails.vue';
-import { ref, useTemplateRef, watch, computed } from 'vue';
+import { ref, useTemplateRef , computed } from 'vue';
 import DownloadButton from './components/DownloadButton.vue';
 import { useRoute } from 'vue-router';
 import useClipboard from 'vue-clipboard3';
 import { ElMessage, ElDialog } from 'element-plus';
-import { useHighBrightnessControllerStore } from '../../stores/miscellaneous.js';
 import { useDownloadPageStore } from '../../stores/download-page.js';
 import { highlightElement } from '../../utils/animation.ts';
-import { requestGetJson } from '../../utils/utils.js';
+import { requestGetJson, useHighlightWatch } from '../../utils/utils.js';
 
 //#region Common
 const archGroupInfo = {
@@ -45,8 +44,6 @@ const otherRef = useTemplateRef('otherDownload');
 const afterglowRef = useTemplateRef('afterglowDownload');
 const omaRef = useTemplateRef('omaDownload');
 
-const highBrightnessControllerStore = useHighBrightnessControllerStore();
-
 const switchHash = () => {
   switch (route.hash) {
     case '#aosc-os-download':
@@ -63,16 +60,7 @@ const switchHash = () => {
       break;
   }
 };
-
-watch(
-  () => highBrightnessControllerStore.obj[route.path],
-  () => {
-    switchHash();
-  },
-  {
-    flush: 'post'
-  }
-);
+useHighlightWatch(switchHash);
 //#endregion
 
 //#region remote
@@ -533,6 +521,7 @@ const omaInstallScript = 'curl -sSf https://repo.aosc.io/get-oma.sh | sudo sh';
 
     <!-- Afterglow -->
     <div
+      id="afterglow-download"
       ref="afterglowDownload"
       class="afterglow-container flex flex-wrap justify-between p-[30px] text-white gap-6">
       <TitleComponent
@@ -570,7 +559,7 @@ const omaInstallScript = 'curl -sSf https://repo.aosc.io/get-oma.sh | sudo sh';
     <category-second class="highlight" title="实用工具" />
 
     <!-- oma -->
-    <div ref="omaDownload" class="oma-container p-[30px]">
+    <div id="oma-download" ref="omaDownload" class="oma-container p-[30px]">
       <TitleComponent
         title="小熊猫包管理 (oma)"
         description="简明好用的 APT 软件包管理界面"

src/utils/utils.js

@@ -1,5 +1,7 @@
 import router from '../router.js';
+import { watch } from 'vue';
 import axios from 'axios';
+import { useRoute } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import yaml from 'js-yaml';
 import {
@@ -10,6 +12,7 @@ import {
   toValue,
   useTemplateRef
 } from 'vue';
+import { useHighBrightnessControllerStore } from '../stores/miscellaneous.js';
 
 export function getImgUrl(url) {
   return new URL(`${url}`, import.meta.url).href;
@@ -178,3 +181,20 @@ export const useSeizeSeat = (refName, proportion, imgHeights, fixedHeight) => {
   });
   return [observer, imgHeights];
 };
+
+export const useHighlightWatch = (switchHash) => {
+  const highBrightnessControllerStore = useHighBrightnessControllerStore();
+  const route = useRoute();
+  watch(
+    () => highBrightnessControllerStore.obj[route.path.replace(/\/+$/, '')],
+    () => {
+      switchHash();
+    },
+    {
+      flush: 'post'
+    }
+  );
+  onMounted(() => {
+    switchHash();
+  });
+};