From dea424989c4fb612acf34f662ee8e2531ff2c02d Mon Sep 17 00:00:00 2001
From: zjp <jiping_zhou@foxmail.com>
Date: Fri, 29 Nov 2024 20:24:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(TopBar):=20=E5=9C=A8=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=8C=89=E9=92=AE=E4=B8=8A=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E4=B8=8D=E5=90=8C=E7=9A=84=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close https://github.com/os-checker/os-checker.github.io/issues/127
---
 os-checks/components/TopBar.vue | 59 ++++++++++++---------------------
 os-checks/stores/style.ts       |  2 +-
 2 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/os-checks/components/TopBar.vue b/os-checks/components/TopBar.vue
index f131169..5e6ac07 100644
--- a/os-checks/components/TopBar.vue
+++ b/os-checks/components/TopBar.vue
@@ -4,32 +4,31 @@
     <div class="topBarLeft">
 
       <NuxtLink to="/">
-        <Button title="主页" icon="pi pi-box"
-          :style="{ background: bgColor('home'), 'border-color': borderColor('home') }" />
+        <Button title="主页" icon="pi pi-box" :style="btnStyle('/')" />
       </NuxtLink>
 
       <NuxtLink to="/repos">
-        <Button title="Repositories Infomation" icon="pi pi-warehouse" />
+        <Button title="Repositories Infomation" icon="pi pi-warehouse" :style="btnStyle('/repos')" />
       </NuxtLink>
 
       <NuxtLink to="/diagnostics">
-        <Button title="Diagnostics" icon="pi pi-microchip" />
+        <Button title="Diagnostics" icon="pi pi-microchip" :style="btnStyle('/diagnostics')" />
       </NuxtLink>
 
       <NuxtLink to="/file-tree">
-        <Button title="问题文件树" icon="pi pi-sitemap" />
+        <Button title="问题文件树" icon="pi pi-sitemap" :style="btnStyle('/file-tree')"/>
       </NuxtLink>
 
       <NuxtLink to="/charts">
-        <Button title="统计图" icon="pi pi-chart-bar" />
+        <Button title="统计图" icon="pi pi-chart-bar" :style="btnStyle('/charts')"/>
       </NuxtLink>
 
       <NuxtLink to="/target">
-        <Button title="编译目标明细表" icon="pi pi-objects-column" />
+        <Button title="编译目标明细表" icon="pi pi-objects-column" :style="btnStyle('/target')"/>
       </NuxtLink>
 
       <NuxtLink to="/workflows">
-        <Button title="Github Workflows" icon="pi pi-bell" />
+        <Button title="Github Workflows" icon="pi pi-bell" :style="btnStyle('/workflows')"/>
       </NuxtLink>
 
     </div>
@@ -49,39 +48,25 @@
 </template>
 
 <script setup lang="ts">
-const active_default = {
-  home: false,
-  repos: false,
-  diagnostics: false,
-  file_tree: false,
-  target: false,
-  workflows: false,
-};
-const active = ref<{ [key: string]: boolean }>(active_default);
 
 const { color } = storeToRefs(useStyleStore());
-function bgColor(page: string) {
-  return active.value[page] ? color.value.orange: color.value.topButton;
-}
-function borderColor(page: string) {
-  return active.value[page] ? color.value.orange_light  : color.value.topButton;
-}
+// function bgColor(page: string) {
+//   return active.value[page] ? color.value.orange: color.value.topButton;
+// }
+// function borderColor(page: string) {
+//   return active.value[page] ? color.value.orange_light  : color.value.topButton;
+// }
 
 const route = useRoute();
-setActive(route.path);
-watch(() => route.path, setActive);
-
-function setActive(path: string) {
-  active.value = active_default;
-  switch (path) {
-    case "/": { active.value.home = true; return; }
-    case "/repos": { active.value.repos = true; return; }
-    case "/diagnostics": { active.value.diagnostics = true; return; }
-    case "/file_tree": { active.value.file_tree = true; return; }
-    case "/target": { active.value.target = true; return; }
-    case "/workflows": { active.value.workflows = true; return; }
-    default: { }
-  }
+const active = computed(() => route.path);
+
+type ButtonStyle = { background: string, "border-color": string, };
+
+function btnStyle(page: string): ButtonStyle {
+  return (page === active.value) ?
+    { background: color.value.orange_light, "border-color": color.value.orange }
+    :
+    { background: color.value.topButton, "border-color": color.value.topButton };
 }
 
 </script>
diff --git a/os-checks/stores/style.ts b/os-checks/stores/style.ts
index d35d415..1028669 100644
--- a/os-checks/stores/style.ts
+++ b/os-checks/stores/style.ts
@@ -14,7 +14,7 @@ export const useStyleStore = defineStore('style', () => {
     color.red = styles.getPropertyValue('--p-red-500').trim();
     color.grey = styles.getPropertyValue('--p-gray-400').trim();
     color.topButton = styles.getPropertyValue('--p-button-primary-background').trim();
-    color.orange_light = styles.getPropertyValue('--p-orange-300').trim();
+    color.orange_light = styles.getPropertyValue('--p-orange-400').trim();
     color.orange = styles.getPropertyValue('--p-orange-500').trim();
 
     // 视窗高度