66 */
77
88import type { Ref } from "vue"
9- import type { IconProps , MenuItemRegistered } from "element-plus"
9+ import type { IconProps } from "element-plus"
1010import type { Router } from "vue-router"
1111import type { I18nKey } from "@app/locale"
12- import type { MenuMessage } from "@i18n/message/app/menu"
1312
1413import { defineComponent , h , onMounted , ref , watch } from "vue"
1514import { ElIcon , ElMenu , ElMenuItem , ElMenuItemGroup } from "element-plus"
@@ -27,83 +26,83 @@ import { createTabAfterCurrent } from "@api/chrome/tab"
2726import { ANALYSIS_ROUTE , MERGE_ROUTE } from "@app/router/constants"
2827
2928type _MenuItem = {
30- title : keyof MenuMessage
29+ title : I18nKey
3130 icon : IconProps | string
3231 route ?: string
3332 href ?: string
3433 index ?: string
3534}
3635
3736type _MenuGroup = {
38- title : keyof MenuMessage
37+ title : I18nKey
3938 children : _MenuItem [ ]
4039}
4140
4241/**
4342 * Menu items
4443 */
4544const MENUS : _MenuGroup [ ] = [ {
46- title : ' data' ,
45+ title : msg => msg . menu . data ,
4746 children : [ {
48- title : ' dashboard' ,
47+ title : msg => msg . menu . dashboard ,
4948 route : '/data/dashboard' ,
5049 icon : Stopwatch
5150 } , {
52- title : ' dataReport' ,
51+ title : msg => msg . menu . dataReport ,
5352 route : '/data/report' ,
5453 icon : Table
5554 } , {
56- title : ' siteAnalysis' ,
55+ title : msg => msg . menu . siteAnalysis ,
5756 route : ANALYSIS_ROUTE ,
5857 icon : Trend
5958 } , {
60- title : ' dataClear' ,
59+ title : msg => msg . menu . dataClear ,
6160 route : '/data/manage' ,
6261 icon : Database
6362 } ]
6463} , {
65- title : ' behavior' ,
64+ title : msg => msg . menu . behavior ,
6665 children : [ {
67- title : ' habit' ,
66+ title : msg => msg . menu . habit ,
6867 route : '/behavior/habit' ,
6968 icon : Aim
7069 } , {
71- title : ' limit' ,
70+ title : msg => msg . menu . limit ,
7271 route : '/behavior/limit' ,
7372 icon : Timer
7473 } ]
7574} , {
76- title : ' additional' ,
75+ title : msg => msg . menu . additional ,
7776 children : [ {
78- title : ' siteManage' ,
77+ title : msg => msg . menu . siteManage ,
7978 route : '/additional/site-manage' ,
8079 icon : Website
8180 } , {
82- title : ' whitelist' ,
81+ title : msg => msg . menu . whitelist ,
8382 route : '/additional/whitelist' ,
8483 icon : Whitelist
8584 } , {
86- title : ' mergeRule' ,
85+ title : msg => msg . menu . mergeRule ,
8786 route : MERGE_ROUTE ,
8887 icon : Rank
8988 } , {
90- title : ' option' ,
89+ title : msg => msg . menu . option ,
9190 route : '/additional/option' ,
9291 icon : SetUp
9392 } ]
9493} , {
95- title : ' other' ,
94+ title : msg => msg . menu . other ,
9695 children : [ {
97- title : 'userManual' ,
96+ title : msg => msg . base . guidePage ,
9897 href : getGuidePageUrl ( ) ,
9998 icon : Memo ,
10099 index : '_guide' ,
101100 } , {
102- title : ' helpUs' ,
101+ title : msg => msg . menu . helpUs ,
103102 route : '/other/help' ,
104103 icon : HelpFilled ,
105104 } , {
106- title : " about" ,
105+ title : msg => msg . menu . about ,
107106 route : '/other/about' ,
108107 icon : About ,
109108 } ]
@@ -122,7 +121,7 @@ const openHref = (href: string) => createTabAfterCurrent(href)
122121function handleClick ( menuItem : _MenuItem , router : Router , currentActive : Ref < string > ) {
123122 const { route, title, href } = menuItem
124123 if ( route ) {
125- openMenu ( route , msg => msg . menu [ title ] , router )
124+ openMenu ( route , title , router )
126125 } else {
127126 openHref ( href )
128127 currentActive . value = router . currentRoute ?. value ?. path
@@ -138,32 +137,25 @@ const iconStyle: Partial<CSSStyleDeclaration> = {
138137
139138function renderMenuLeaf ( menu : _MenuItem , router : Router , currentActive : Ref < string > ) {
140139 const { route, title, icon, index } = menu
141- const props : { onClick : ( item : MenuItemRegistered ) => void ; index ?: string } = {
142- onClick : ( _item ) => handleClick ( menu , router , currentActive )
143- }
144- const realIndex = index || route
145- realIndex && ( props . index = realIndex )
146- return h ( ElMenuItem , props , {
147- default : ( ) => (
148- < ElIcon size = { 15 } style = { iconStyle } >
149- { h ( icon ) }
150- </ ElIcon > )
151- ,
152- title : ( ) => h ( 'span' , t ( msg => msg . menu [ title ] ) ) ,
153- } )
154- }
155-
156- function renderMenu ( menu : _MenuGroup , router : Router , currentActive : Ref < string > ) {
157- const title = t ( msg => msg . menu [ menu . title ] )
158- return h ( ElMenuItemGroup , { title } , ( ) => menu . children . map ( item => renderMenuLeaf ( item , router , currentActive ) ) )
140+ return < ElMenuItem
141+ onClick = { ( _item ) => handleClick ( menu , router , currentActive ) }
142+ index = { index || route }
143+ v-slots = { {
144+ default : ( ) => (
145+ < ElIcon size = { 15 } style = { iconStyle } >
146+ { h ( icon ) }
147+ </ ElIcon > ) ,
148+ title : ( ) => < span > { t ( title ) } </ span >
149+ } }
150+ />
159151}
160152
161153async function initTitle ( router : Router ) {
162154 await router . isReady ( )
163155 const currentPath = router . currentRoute . value . path
164156 for ( const group of MENUS ) {
165157 for ( const { route, title } of group . children ) {
166- const docTitle = route === currentPath && t ( msg => msg . menu [ title ] )
158+ const docTitle = route === currentPath && t ( title )
167159 if ( docTitle ) {
168160 document . title = docTitle
169161 return
@@ -186,7 +178,9 @@ const _default = defineComponent(() => {
186178 return ( ) => (
187179 < div class = "menu-container" >
188180 < ElMenu defaultActive = { currentActive . value } >
189- { MENUS . map ( menu => renderMenu ( menu , router , currentActive ) ) }
181+ { MENUS . map ( menu => < ElMenuItemGroup title = { t ( menu . title ) } >
182+ { menu . children . map ( item => renderMenuLeaf ( item , router , currentActive ) ) }
183+ </ ElMenuItemGroup > ) }
190184 </ ElMenu >
191185 </ div >
192186 )
0 commit comments