修改导航栏

src/components/layout/Layout.vue

@@ -1,89 +1,103 @@
 <script setup lang="ts">
+import type { NavButton } from '../nav/types'
+
 const { xs, sm } = useTailwindBreakpoints()
 const { t } = useI18n()
 
-const menu = computed(() => [
+const menu = computed<Array<NavButton>>(() => [
   {
     icon: 'i-mdi:view-dashboard-outline',
     activeIcon: 'i-mdi:view-dashboard',
     name: t('nav.overview'),
     to: '/',
-    visible: true,
     key: 'overview',
   },
   {
     icon: 'i-mdi:timeline-text-outline',
     activeIcon: 'i-mdi:timeline-text',
     name: t('nav.timeline'),
     to: '/timeline',
-    visible: true,
     key: 'timeline',
   },
   {
-    icon: 'i-mdi:sitemap-outline',
-    activeIcon: 'i-mdi:sitemap',
-    name: t('nav.plan'),
-    to: '/plan',
-    visible: sm.value,
-    key: 'plan',
-  },
-  {
-    icon: 'i-mdi:label-variant-outline',
-    activeIcon: 'i-mdi:label-variant',
-    name: t('nav.label'),
-    to: '/label',
-    visible: sm.value,
-    key: 'label',
-  },
-  {
-    icon: 'i-mdi:timer-outline',
-    activeIcon: 'i-mdi:timer',
-    name: t('nav.timer'),
-    to: '/timer',
-    visible: sm.value,
-    key: 'timer',
-  },
-  {
-    icon: 'i-mdi:eye-outline',
-    activeIcon: 'i-mdi:eye',
-    name: t('nav.monitor'),
-    to: '/monitor',
-    visible: sm.value,
-    key: 'monitor',
+    icon: 'i-mdi:database-outline',
+    activeIcon: 'i-mdi:database',
+    to: '/collection',
+    name: t('nav.collection'),
+    key: 'collection',
+    children: [
+      {
+        icon: 'i-mdi:sitemap-outline',
+        activeIcon: 'i-mdi:sitemap',
+        name: t('nav.plan'),
+        to: '/collection/plan',
+        key: 'plan',
+      },
+      {
+        icon: 'i-mdi:label-variant-outline',
+        activeIcon: 'i-mdi:label-variant',
+        name: t('nav.label'),
+        to: '/collection/label',
+        key: 'label',
+      },
+      {
+        icon: 'i-mdi:eye-outline',
+        activeIcon: 'i-mdi:eye',
+        name: t('nav.monitor'),
+        to: '/collection/monitor',
+        key: 'monitor',
+      },
+      {
+        icon: 'i-mdi:cube-outline',
+        activeIcon: 'i-mdi:cube',
+        name: t('nav.box'),
+        to: '/collection/box',
+        key: 'box',
+      },
+    ],
   },
   {
-    icon: 'i-mdi:cube-outline',
-    activeIcon: 'i-mdi:cube',
-    name: t('nav.box'),
-    to: '/box',
-    visible: sm.value,
-    key: 'box',
-  },
-  {
-    icon: 'i-mdi:lightning-bolt-outline',
-    activeIcon: 'i-mdi:lightning-bolt',
-    name: t('nav.moment'),
-    to: '/moment',
-    visible: sm.value,
-    key: 'moment',
-  },
-  {
-    icon: 'i-mdi:view-grid-plus-outline',
-    activeIcon: 'i-mdi:view-grid-plus',
-    name: t('nav.list'),
-    to: '/list',
-    visible: xs.value,
-    key: 'list',
-  },
-  {
-    icon: 'i-mdi:account-outline',
-    activeIcon: 'i-mdi:account',
-    name: t('nav.account'),
-    to: '/account',
-    visible: isMobile,
-    key: 'account',
+    icon: 'i-mdi:pencil-outline',
+    activeIcon: 'i-mdi:pencil',
+    to: '/record',
+    name: t('nav.record'),
+    key: 'record',
+    children: [
+      {
+        icon: 'i-mdi:timer-outline',
+        activeIcon: 'i-mdi:timer',
+        name: t('nav.timer'),
+        to: '/record/timer',
+        key: 'timer',
+      },
+
+      {
+        icon: 'i-mdi:lightning-bolt-outline',
+        activeIcon: 'i-mdi:lightning-bolt',
+        name: t('nav.moment'),
+        to: '/record/moment',
+        key: 'moment',
+      },
+    ],
   },
-].filter(({ visible }) => visible))
+])
+// {
+//   icon: 'i-mdi:view-grid-plus-outline',
+//   activeIcon: 'i-mdi:view-grid-plus',
+//   name: t('nav.list'),
+//   to: '/list',
+//   visible: xs.value,
+//   key: 'list',
+// },
+// {
+//   icon: 'i-mdi:account-outline',
+//   activeIcon: 'i-mdi:account',
+//   name: t('nav.account'),
+//   to: '/account',
+//   visible: isMobile,
+//   key: 'account',
+// },
+// ].filter(({ visible }) => visible))
 </script>
 
 <template>

src/components/nav/NavAction.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-interface NavButton {
-  icon: string
-  activeIcon: string
-  name: string
-  to: string
-  key: string
-}
+import type { NavButton } from './types'
 
 withDefaults(defineProps<{
   vertical?: boolean
@@ -18,51 +12,66 @@ withDefaults(defineProps<{
 
 const router = useRouter()
 
+const expanded = ref(false)
+const submenu = ref<Array<NavButton>>([])
+
 function goBack() {
   router.back()
 }
+
+function expandMenu(menu?: Array<NavButton>) {
+  if (!menu)
+    return
+
+  expanded.value = true
+  submenu.value = menu
+}
 </script>
 
 <template>
-  <div
-    h-full flex justify-between items-center py-2 :class="{
-      'flex-col': $props.vertical,
-    }"
-  >
-    <v-btn v-show="$props.vertical" icon variant="text" size="small" invisible>
-      <div i-mdi:arrow-left text-6 @click="goBack" />
-    </v-btn>
+  <nav-drawer v-model="expanded">
     <div
-      :class="$props.vertical ? ['space-y-1'] : ['flex', 'flex-1', 'justify-around', 'h-full', 'items-center']"
+      h-full flex justify-between items-center py-2 :class="{
+        'flex-col': $props.vertical,
+      }"
     >
-      <router-link
-        v-for="{ icon, activeIcon, name, to, key } in $props.menu" :id="key" :key="key" v-slot="{ isActive }"
-        :to="to"
-        block w-20 text-center
-      >
-        <v-btn variant="text" rounded :color="isActive ? 'primary' : ''" size="small">
-          <div :class="[isActive ? activeIcon : icon]" text-7 />
-          <v-tooltip
-            v-if="!isActive"
-            activator="parent"
+      <v-btn v-show="$props.vertical" icon variant="text" size="small" invisible>
+        <div i-mdi:arrow-left text-6 @click="goBack" />
+      </v-btn>
+      <div :class="$props.vertical ? ['space-y-6'] : ['flex', 'flex-1', 'justify-around', 'h-full', 'items-center']">
+        <router-link
+          v-for="{ icon, activeIcon, name, to, key, children } in $props.menu" :id="key" :key="key"
+          v-slot="{ isActive }" :to="to" block w-20 text-center @mouseenter="expandMenu(children)"
+        >
+          <v-btn variant="text" rounded :color="isActive ? 'primary' : ''" size="small">
+            <div :class="[isActive ? activeIcon : icon]" text-7 />
+          </v-btn>
+          <div
+            v-if="$props.navText" text-3.5 mt-1 :class="{
+              'text-primary': isActive,
+            }"
           >
             {{ name }}
-          </v-tooltip>
-        </v-btn>
-        <div
-          v-if="$props.navText"
-          text-3.5 mt-1
-          :class="{
-            'invisible': !isActive,
-            'text-primary': isActive,
-          }"
-        >
-          {{ name }}
-        </div>
-      </router-link>
+          </div>
+        </router-link>
+      </div>
+      <div v-show="$props.vertical">
+        <slot />
+      </div>
     </div>
-    <div v-show="$props.vertical">
-      <slot />
-    </div>
-  </div>
+    <template #menu>
+      <v-list>
+        <router-link
+          v-for="{ icon, activeIcon, name, to, key } in submenu" :id="key" :key="key" v-slot="{ isActive }"
+          :to="to"
+        >
+          <v-list-item :value="key" :title="name" color="primary" :active="isActive">
+            <template #prepend>
+              <div :class="[isActive ? activeIcon : icon]" text-5 mr-4 />
+            </template>
+          </v-list-item>
+        </router-link>
+      </v-list>
+    </template>
+  </nav-drawer>
 </template>

src/components/nav/types.ts

@@ -0,0 +1,8 @@
+export interface NavButton {
+  icon: string
+  activeIcon: string
+  name: string
+  to: string
+  key: string
+  children?: NavButton[]
+}

src/locales/en-US.yaml

@@ -10,6 +10,8 @@ nav:
   about: About
   moment: Moment
   box: Box
+  collection: Collection
+  record: Record
   list: List
   account: Account
 config:

src/locales/zh-CN.yaml

@@ -10,6 +10,8 @@ nav:
   about: 关于
   moment: 瞬间
   box: 匣子
+  collection: 数据集合
+  record: 记录
   list: 列表
   account: 我的
 config:

src/pages/collection.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/pages/record.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

vite.config.ts

@@ -46,7 +46,17 @@ export default defineConfig({
       dirs: ['src/components', mobile ? 'src/mobile/components' : 'src/desktop/components'],
       dts: 'src/components.d.ts',
     }),
-    Pages(),
+    Pages({
+      extendRoute: (route) => {
+        if (route.path == '/collection')
+          return { ...route, redirect: '/collection/plan' }
+
+        if (route.path == '/record')
+          return { ...route, redirect: '/record/timer' }
+
+        return route
+      },
+    }),
     tsconfigPaths({
       loose: true,
     }),