refactor: all in one navigation

MaaXYZ · Aug 22, 2023 · ab6b440 · ab6b440
1 parent 375f17a
commit ab6b440
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 45 deletions.
diff --git a/packages/client/src/components/NavigationButtons.vue b/packages/client/src/components/NavigationButtons.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import {
+  BuildOutlined,
+  CropOutlined,
+  EditOutlined,
+  MapOutlined
+} from '@vicons/material'
+import type { Component } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import IconButton from '@/components/atomic/IconButton.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const infos: {
+  name: string
+  icon: Component
+}[] = [
+  {
+    name: 'edit',
+    icon: EditOutlined
+  },
+  {
+    name: 'roi',
+    icon: CropOutlined
+  },
+  {
+    name: 'eval',
+    icon: BuildOutlined
+  },
+  {
+    name: 'visual',
+    icon: MapOutlined
+  }
+]
+</script>
+
+<template>
+  <IconButton
+    v-for="info in infos"
+    :key="info.name"
+    :text="false"
+    :icon="info.icon"
+    :type="route.name === info.name ? 'primary' : 'default'"
+    @click="
+      router.push({
+        name: info.name
+      })
+    "
+  ></IconButton>
+</template>
diff --git a/packages/client/src/components/atomic/IconButton.vue b/packages/client/src/components/atomic/IconButton.vue
@@ -2,9 +2,24 @@
 import { NButton, NIcon } from 'naive-ui'
 import { type Component, h } from 'vue'
 
-const props = defineProps<{
-  icon: Component
-}>()
+const props = withDefaults(
+  defineProps<{
+    icon: Component
+    text?: boolean
+    type?:
+      | 'default'
+      | 'tertiary'
+      | 'primary'
+      | 'info'
+      | 'success'
+      | 'warning'
+      | 'error'
+  }>(),
+  {
+    text: true,
+    type: 'default'
+  }
+)
 
 const emits = defineEmits<{
   click: []
@@ -17,7 +32,8 @@ function Icon() {
 
 <template>
   <NButton
-    text
+    :text="text"
+    :type="type"
     @click="
       ev => {
         ev.stopPropagation()

diff --git a/packages/client/src/router/index.ts b/packages/client/src/router/index.ts
@@ -13,18 +13,22 @@ const router = createRouter({
       redirect: '/edit'
     },
     {
+      name: 'edit',
       path: '/edit',
       component: EditView
     },
     {
+      name: 'eval',
       path: '/eval',
       component: EvalView
     },
     {
+      name: 'roi',
       path: '/roi',
       component: RoiView
     },
     {
+      name: 'visual',
       path: '/visual',
       component: VisualView
     }

diff --git a/packages/client/src/views/EditView.vue b/packages/client/src/views/EditView.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import {
-  BuildOutlined,
-  CropOutlined,
   FileDownloadOutlined,
   FileUploadOutlined,
   HealthAndSafetyOutlined,
-  MapOutlined,
   NavigateBeforeOutlined,
   NavigateNextOutlined,
   RedoOutlined,
@@ -28,6 +25,7 @@ import {
 import { fs } from '@/filesystem'
 import { loadFS, saveCfg, saveFS } from '@/loader'
 
+import NavigationButtons from '@/components/NavigationButtons.vue'
 import TaskEdit from '@/components/TaskEdit.vue'
 import ValidateTask from '@/components/task/ValidateTask.vue'
 import TaskTree from '@/components/tree/TaskTree.vue'
@@ -84,27 +82,7 @@ function doValidate() {
 
   <MainLayout>
     <template #action>
-      <NButton @click="router.push('/eval')">
-        <template #icon>
-          <NIcon>
-            <BuildOutlined></BuildOutlined>
-          </NIcon>
-        </template>
-      </NButton>
-      <NButton @click="router.push('/roi')">
-        <template #icon>
-          <NIcon>
-            <CropOutlined></CropOutlined>
-          </NIcon>
-        </template>
-      </NButton>
-      <NButton @click="router.push('/visual')">
-        <template #icon>
-          <NIcon>
-            <MapOutlined></MapOutlined>
-          </NIcon>
-        </template>
-      </NButton>
+      <NavigationButtons></NavigationButtons>
       <NButton @click="doValidate">
         <template #icon>
           <NIcon>

diff --git a/packages/client/src/views/EvalView.vue b/packages/client/src/views/EvalView.vue
@@ -16,6 +16,7 @@ import { config, taskIndex } from '@/data'
 import { DispatcherStatus, type TaskRunInfo } from '@/types'
 
 import ConfigEdit from '@/components/ConfigEdit.vue'
+import NavigationButtons from '@/components/NavigationButtons.vue'
 import ArrayEdit from '@/components/array/ArrayEdit.vue'
 import ClearButton from '@/components/atomic/ClearButton.vue'
 import MonitorView from '@/components/framework/MonitorView.vue'
@@ -108,13 +109,7 @@ async function tryStart() {
 <template>
   <MainLayout>
     <template #action>
-      <NButton @click="router.push('/edit')">
-        <template #icon>
-          <NIcon>
-            <EditOutlined></EditOutlined>
-          </NIcon>
-        </template>
-      </NButton>
+      <NavigationButtons></NavigationButtons>
       <NButton @click="tryStart" :disabled="!inited">
         <template #icon>
           <NIcon>

diff --git a/packages/client/src/views/RoiView.vue b/packages/client/src/views/RoiView.vue
@@ -13,6 +13,7 @@ import { useRouter } from 'vue-router'
 import { type FileContentRef, type PathKey, fs, path, pool } from '@/filesystem'
 import type { Rect } from '@/types'
 
+import NavigationButtons from '@/components/NavigationButtons.vue'
 import ChooseDir from '@/components/filesystem/ChooseDir.vue'
 import MonitorView from '@/components/framework/MonitorView.vue'
 
@@ -189,13 +190,7 @@ function doSave() {
 
   <div class="flex flex-col gap-2">
     <div class="flex gap-2">
-      <NButton @click="router.push('/edit')">
-        <template #icon>
-          <NIcon>
-            <EditOutlined></EditOutlined>
-          </NIcon>
-        </template>
-      </NButton>
+      <NavigationButtons></NavigationButtons>
       <NButton @click="takeImage" :disabled="!monitor?.imageURL">
         <template #icon>
           <NIcon>

diff --git a/packages/client/src/views/VisualView.vue b/packages/client/src/views/VisualView.vue
@@ -3,6 +3,9 @@ import { NButton } from 'naive-ui'
 
 import { taskForwardIndex } from '@/data'
 
+import NavigationButtons from '@/components/NavigationButtons.vue'
+import MainLayout from '@/layout/MainLayout.vue'
+
 function render() {
   const vertIndex = Object.keys(taskForwardIndex.value)
   const edges: number[] = []
@@ -17,7 +20,10 @@ function render() {
 </script>
 
 <template>
-  <div>
-    <NButton @click="render">计算</NButton>
-  </div>
+  <MainLayout>
+    <template #action>
+      <NavigationButtons></NavigationButtons>
+      <NButton @click="render">计算</NButton>
+    </template>
+  </MainLayout>
 </template>