refactor: add const

apps/frontend/src/components/header/TheHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useGoto } from '@/composables/goto'
+import { openGithub, useGoto } from '@/composables/goto'
 
-const { gotoHome, gotoGithub, gotoSettings } = useGoto()
+const { gotoHome, gotoSettings } = useGoto()
 </script>
 
 <template>
@@ -13,7 +13,7 @@ const { gotoHome, gotoGithub, gotoSettings } = useGoto()
       <button class="mx-2 !outline-none" @click="gotoSettings()">
         <div i="carbon-settings" />
       </button>
-      <button class="mx-2 !outline-none" @click="gotoGithub()">
+      <button class="mx-2 !outline-none" @click="openGithub()">
         <div i="mdi-github" />
       </button>
     </div>

apps/frontend/src/composables/goto.ts

@@ -1,34 +1,35 @@
 import { useRouter } from 'vue-router'
+import { RouteNames } from '@/router/const'
 
 export function useGoto() {
   const router = useRouter()
 
   function gotoHome() {
     router.push({
-      name: 'Home',
+      name: RouteNames.HOME,
     })
   }
 
   function gotoSettings() {
     router.push({
-      name: 'Settings',
+      name: RouteNames.SETTINGS,
     })
   }
 
   function gotoSettingsTheme() {
     router.push({
-      name: 'SettingsTheme',
+      name: RouteNames.SETTINGS_THEME,
     })
   }
 
-  function gotoGithub() {
-    window.open('https://github.com/cuixueshe/dida')
-  }
-
   return {
     gotoHome,
     gotoSettings,
-    gotoGithub,
     gotoSettingsTheme,
   }
 }
+
+export const GITHUB_URL = 'https://github.com/cuixueshe/dida'
+export function openGithub() {
+  window.open(GITHUB_URL)
+}

apps/frontend/src/composables/tests/goto.spec.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
-import { useGoto } from '../goto'
+import { GITHUB_URL, openGithub, useGoto } from '../goto'
 import { useSetup } from '@/tests/helper'
+import { RouteNames } from '@/router/const'
 
 describe('goto', () => {
   it('should be go to Settings', () => {
@@ -9,7 +10,7 @@ describe('goto', () => {
       gotoSettings()
     })
 
-    expect(router.push).toBeCalledWith({ name: 'Settings' })
+    expect(router.push).toBeCalledWith({ name: RouteNames.SETTINGS })
   })
 
   it('should be go to Home', () => {
@@ -18,17 +19,23 @@ describe('goto', () => {
       gotoHome()
     })
 
-    expect(router.push).toBeCalledWith({ name: 'Home' })
+    expect(router.push).toBeCalledWith({ name: RouteNames.HOME })
   })
 
-  it('should be go to github', () => {
+  it('should be go to SettingsTheme', () => {
+    const { router } = useSetup(() => {
+      const { gotoSettingsTheme } = useGoto()
+      gotoSettingsTheme()
+    })
+
+    expect(router.push).toBeCalledWith({ name: RouteNames.SETTINGS_THEME })
+  })
+
+  it('should be open github url', () => {
     window.open = vi.fn()
 
-    useSetup(() => {
-      const { gotoGithub } = useGoto()
-      gotoGithub()
-    })
+    openGithub()
 
-    expect(window.open).toBeCalledWith('https://github.com/cuixueshe/dida')
+    expect(window.open).toBeCalledWith(GITHUB_URL)
   })
 })

apps/frontend/src/router/const.ts

@@ -0,0 +1,6 @@
+export enum RouteNames {
+  HOME = 'Home',
+  TASK = 'Task',
+  SETTINGS = 'Settings',
+  SETTINGS_THEME = 'SettingsTheme',
+}

apps/frontend/src/router/index.ts

@@ -2,16 +2,17 @@ import type { RouteRecordRaw, Router } from 'vue-router'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import type { App } from 'vue'
 import { SettingsRoute } from './settings'
+import { RouteNames } from './const'
 import Task from '@/pages/Task.vue'
 import { getDiscreteApi } from '@/composables/useNaiveDiscreteApi'
 
 export const routes: RouteRecordRaw[] = [
   {
     path: '/',
     redirect: '/task',
-    name: 'Home',
+    name: RouteNames.HOME,
   },
-  { path: '/task', component: Task, name: 'Task' },
+  { path: '/task', component: Task, name: RouteNames.TASK },
   SettingsRoute,
 ]
 

apps/frontend/src/router/settings.ts

@@ -1,5 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router'
 import type { Component } from 'vue'
+import { RouteNames } from './const'
 import Settings from '@/pages/Settings.vue'
 import { sidebars } from '@/composables/settings'
 
@@ -19,7 +20,7 @@ const subRoutes: RouteRecordRaw[] = sidebars.map(sidebar => ({
 export const SettingsRoute = {
   path: `/${SETTINGS_PATH}`,
   component: Settings,
-  name: 'Settings',
+  name: RouteNames.SETTINGS,
   meta: { title: '设置' },
   children: subRoutes,
   redirect: subRoutes[0].path,