添加折叠菜单

src/components/views/DashboardView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import {useLocale} from "vuetify";
+import { useLocale } from "vuetify";
 
-const {t} = useLocale()
+const { t } = useLocale()
 </script>
 
 <template>
@@ -9,14 +9,21 @@ const {t} = useLocale()
     <v-col cols="auto">
       <v-sheet elevation="1" class="rounded-lg">
         <v-list class="rounded-lg">
-          <v-list-item to="/dashboard/url-management" prepend-icon="mdi-link" append-icon="mdi-chevron-right">
+          <v-list-group value="Management">
-            <v-list-item-title>{{t('$vuetify.dashboard.menu.url-management')}}</v-list-item-title>
+            <template v-slot:activator="{ props }">
-          </v-list-item>
+              <v-list-item v-bind="props" :title="t('$vuetify.dashboard.menu.url-management.title')" prepend-icon="mdi-link">
+              </v-list-item>
+            </template>
+            <v-list-item to="/dashboard/url-management" prepend-icon="mdi-list-box-outline" append-icon="mdi-chevron-right"
+              :title="t('$vuetify.dashboard.menu.url-management.display') ">
+            </v-list-item>
+          </v-list-group>
+
           <v-list-item to="/dashboard/profile" prepend-icon="mdi-account" append-icon="mdi-chevron-right">
-            <v-list-item-title>{{t('$vuetify.dashboard.menu.profile')}}</v-list-item-title>
+            <v-list-item-title>{{ t('$vuetify.dashboard.menu.profile') }}</v-list-item-title>
           </v-list-item>
           <v-list-item to="/dashboard/security" prepend-icon="mdi-security" append-icon="mdi-chevron-right">
-            <v-list-item-title>{{t('$vuetify.dashboard.menu.security')}}</v-list-item-title>
+            <v-list-item-title>{{ t('$vuetify.dashboard.menu.security') }}</v-list-item-title>
           </v-list-item>
         </v-list>
       </v-sheet>
@@ -29,5 +36,4 @@ const {t} = useLocale()
   </v-row>
 </template>
 
-<style scoped>
+<style scoped></style>
-</style>

src/script/i18n/en.ts

@@ -46,7 +46,11 @@ const en: LocaleInterface = {
     },
     dashboard: {
         menu: {
-            'url-management': 'URL Management',
+            'url-management': {
+                title: 'URL Management',
+                edit: 'Edit',
+                display: 'Display'
+            },
             profile: 'Profile',
             security: 'Security'
         }

src/script/i18n/locale-interface.ts

@@ -43,7 +43,11 @@ export default interface LocaleInterface {
     },
     dashboard: {
         menu: {
-            'url-management': string,
+            'url-management': {
+                title: string,
+                edit: string,
+                display: string
+            },
             profile: string,
             security: string
         }

src/script/i18n/zhHans.ts

@@ -46,7 +46,11 @@ const zhHans: LocaleInterface = {
     },
     dashboard: {
         menu: {
-            'url-management': '链接管理',
+            'url-management': {
+                title: '链接管理',
+                edit: '编辑',
+                display: '查看'
+            },
             profile: '用户信息',
             security: '安全性'
         }