1- import React , { useState } from 'react' ;
1+ import React , { useState , useEffect , useReducer } from 'react' ;
22import Header_ from './layout/header.tsx'
33import Page from './page/page.tsx'
44
5- import { Layout , Nav , Button , Notification } from '@douyinfe/semi-ui' ;
5+ import { Layout , Nav , Button , Notification , Badge } from '@douyinfe/semi-ui' ;
66import { IconAppCenter , IconHelpCircle , IconPaperclip , IconHome , IconSetting } from '@douyinfe/semi-icons' ;
7+ import { HPMDLRender , HPMDlList } from './services/hpm.ts' ;
78
89const { Header, Sider, Content } = Layout ;
910
1011export default function App ( ) {
11- const naviItems = [
12- { itemKey : 'Home' , text : '首页' , icon : < IconHome /> } ,
13- {
14- text : '安装' ,
15- icon : < IconPaperclip /> ,
16- itemKey : 'Setup' ,
17- items : [ { itemKey : 'SetupToSys' , text : '安装到系统' } , { itemKey : 'SetupToUDisk' , text : '安装到U盘' } , { itemKey : 'MakeISO' , text : '生成ISO镜像' } ] ,
18- } ,
19- {
20- text : '模块' ,
21- icon : < IconAppCenter /> ,
22- itemKey : 'HPM' ,
23- items : [ { itemKey : 'HPMDl' , text : '下载模块' } , { itemKey : 'HPMMgr' , text : '模块管理' } , { itemKey : 'TaskMgr' , text : '任务管理' } ] ,
24- } ,
25- { itemKey : 'Docs' , text : '文档' , icon : < IconHelpCircle /> } ,
26- { itemKey : 'Setting' , text : '设置' , icon : < IconSetting /> }
27- ] ;
12+
2813
2914 const [ navKey , setNavKey ] = useState ( 'Home' ) ;
3015 const [ lockMuen , setLockMuen ] = useState ( false ) ;
@@ -51,15 +36,8 @@ export default function App() {
5136 </ Header >
5237 < Layout style = { { width : '100%' , height : 'calc(100vh - 41px)' } } >
5338 < Sider style = { { backgroundColor : 'var(--semi-color-bg-1)' } } >
54- < Nav
55- style = { { maxWidth : 170 , height : '100%' } }
56- selectedKeys = { [ navKey ] }
57- defaultSelectedKeys = { [ 'Home' ] }
58- defaultOpenKeys = { [ 'Setup' , 'HPM' ] }
59- items = { naviItems }
60- onSelect = { ( e ) => { upNavKey ( e . itemKey . toString ( ) ) } }
61- footer = { { collapseButton : true , } }
62- />
39+ < Navigation navKey = { navKey } upNavKey = { upNavKey } > </ Navigation >
40+
6341 </ Sider >
6442 < Content style = { { backgroundColor : 'var(--semi-color-bg-0)' , height : "100%" } } >
6543 < Page navKey = { navKey } setNavKey = { setNavKey } setLockMuen = { setLockMuen } > </ Page >
@@ -69,4 +47,45 @@ export default function App() {
6947 </ Layout >
7048
7149 )
72- }
50+ }
51+
52+ function Navigation ( props :any ) {
53+ const [ ignored , forceUpdate ] = useReducer ( x => x + 1 , 0 ) ; //刷新组件
54+
55+ useEffect ( ( ) => {
56+ HPMDLRender . callRefreshNav = forceUpdate
57+ } )
58+
59+ const naviItems = [
60+ { itemKey : 'Home' , text : '首页' , icon : < IconHome /> } ,
61+ {
62+ text : '安装' ,
63+ icon : < IconPaperclip /> ,
64+ itemKey : 'Setup' ,
65+ items : [ { itemKey : 'SetupToSys' , text : '安装到系统' } , { itemKey : 'SetupToUDisk' , text : '安装到U盘' } , { itemKey : 'MakeISO' , text : '生成ISO镜像' } ] ,
66+ } ,
67+ {
68+ text : '模块' ,
69+ icon : < IconAppCenter /> ,
70+ itemKey : 'HPM' ,
71+ items : [ { itemKey : 'HPMDl' , text : '下载模块' } , { itemKey : 'HPMMgr' , text : '模块管理' } , {
72+ itemKey : 'TaskMgr' , text : < >
73+ 任务管理{ HPMDlList . length > 0 ? < Badge count = { HPMDlList . length } overflowCount = { 99 } type = 'primary' /> : < > </ > }
74+ </ >
75+ } ] ,
76+ } ,
77+ { itemKey : 'Docs' , text : '文档' , icon : < IconHelpCircle /> } ,
78+ { itemKey : 'Setting' , text : '设置' , icon : < IconSetting /> }
79+ ] ;
80+
81+ return < Nav
82+ style = { { maxWidth : 170 , height : '100%' } }
83+ selectedKeys = { [ props . navKey ] }
84+ defaultSelectedKeys = { [ 'Home' ] }
85+ defaultOpenKeys = { [ 'Setup' , 'HPM' ] }
86+ items = { naviItems }
87+ onSelect = { ( e ) => { props . upNavKey ( e . itemKey . toString ( ) ) } }
88+ footer = { { collapseButton : true , } }
89+ />
90+
91+ }
0 commit comments