完善windows开始菜单功能

jiajun00 · Feb 12, 2019 · c28979c · c28979c
1 parent a354bd2
commit c28979c
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,8 @@
 ![](https://img.shields.io/badge/ECMAScipt-6-orange.svg)
 
 ## 项目介绍
-react-desktops是基于react-desktop基础上，封装桌面操作系统前端UI，用了丰富的mac和win10桌面元素，包括桌面图标、窗口化子页面管理、开始菜单等组件，兼容主流现代浏览器，适合快速开发后台管理系统的前端界面。
+react-desktops是基于react-desktop基础上，封装桌面操作系统前端UI，用了丰富的mac和win10桌面元素，包括桌面图标、窗口化子页面管理、开始菜单等组件，兼容主流现代浏览器。
+适合快速开发后台管理系统的前端界面、整合企业诸多应用、通过B/S架构集成系统、可作为企业级应用管理平台。
 
 ### 技术栈
 - react

diff --git a/src/components/menu/StartBoxWindows.js b/src/components/menu/StartBoxWindows.js
@@ -12,15 +12,58 @@ const { Item, Group,SubNav } = Nav
 
 const Logout = <i className="iconfont">&#xeaf7;</i>
 
+//左侧应用列表
+class StartBoxLeftTree extends Component {
+  render(){
+    const { startBoxLeftApps } = this.props
+    return (
+      <Nav style={{width: '100%', height: 330, overflowY: 'auto'}}>
+        {startBoxLeftApps.map((row,i)=>(
+          <Group key={i} label={row.lab}>
+            {this.tree(row.list)}
+          </Group>
+        ))}
+      </Nav>
+    )
+  }
+  tree = (data) => {
+    const {
+      openWindowList,
+      setWindowOpenList,closeStartBox
+    } = this.props
+    return data.map((row)=>{
+      if(row.children){
+        return (
+          <SubNav key={row.type} icon={<img src={row.logo}/>} label={row.name}>
+            {this.tree(row.children)}
+          </SubNav>
+        )
+      }else{
+        return(
+          <Item
+            key={row.type}
+            onClick={()=>{
+              row.isBlank ? window.open(row.url) : setWindowOpenList(row,openWindowList)
+              closeStartBox()
+            }}
+            icon={<img src={row.logo}/>}>{row.name}</Item>
+        )
+      }
+    })
+  }
+}
+
+
 class StartBoxWindows extends Component {
 
   state = {}
 
   render() {
     const {
-      isOpenStartBox,
-      closeStartBox
+      isOpenStartBox,startBoxLeftApps,openWindowList,
+      closeStartBox,setWindowOpenList
     } = this.props
+
     return (
       <Fragment>
         <Animate
@@ -59,24 +102,12 @@ class StartBoxWindows extends Component {
               </div>
             </div>
             <div className="start_box_left_menus">
-              <Nav style={{width: '100%', height: 330, overflowY: 'auto'}}>
-                <Group label="A">
-                  <Item icon="account">Navigation One</Item>
-                  <Item icon="account">Navigation Two</Item>
-                  <Item icon="account">Navigation Three</Item>
-                </Group>
-                <Group label="B">
-                  <Item icon="account">Navigation Four</Item>
-                  <Item icon="account">Navigation Five</Item>
-                  <Item icon="account">Navigation Six</Item>
-                  <SubNav icon="account" label="Sub Nav">
-                    <Item icon="account">Item 1</Item>
-                    <Item icon="account">Item 2</Item>
-                    <Item icon="account">Item 3</Item>
-                    <Item icon="account">Item 4</Item>
-                  </SubNav>
-                </Group>
-              </Nav>
+                <StartBoxLeftTree
+                  startBoxLeftApps={startBoxLeftApps}
+                  setWindowOpenList={setWindowOpenList}
+                  openWindowList={openWindowList}
+                  closeStartBox={closeStartBox}
+                />
             </div>
           </View>
           <View className="start_box_right" layout="vertical">

diff --git a/src/public/style/windows/index.css b/src/public/style/windows/index.css
diff --git a/src/public/style/windows/index.css.map b/src/public/style/windows/index.css.map
diff --git a/src/public/style/windows/index.scss b/src/public/style/windows/index.scss
@@ -249,6 +249,19 @@
         box-shadow: none!important;
         .next-nav-item{
           background-color: transparent;
+          .next-menu-item-text{
+            display: block;
+            overflow: hidden;
+            height: 40px;
+            img{
+              float: left;
+              margin: 7px 8px 0 0;
+              border-radius: 3px;
+              line-height: 40px;
+              width: 24px;
+              height: 24px;
+            }
+          }
         }
       }
     }

diff --git a/src/windows/pages/Home/HomeWindows.js b/src/windows/pages/Home/HomeWindows.js
@@ -21,7 +21,7 @@ class HomeWindows extends Component {
 
   render() {
     const {
-      dataTime,isOpenMessageBox,isOpenStartBox,desktopApps,openWindowList,
+      dataTime,isOpenMessageBox,isOpenStartBox,desktopApps,openWindowList,startBoxLeftApps,
       setDataTime,openMessageBox,closeMessageBox,openStartBox,closeStartBox,setWindowOpenList,closeWindow,hiddenWindow
     } = this.props
     return (
@@ -39,7 +39,14 @@ class HomeWindows extends Component {
           className="desktop"
         >
           <DesktopApps desktopApps={desktopApps} setWindowOpenList={setWindowOpenList} openWindowList={openWindowList}/>
-          <StartBoxWindows isOpenStartBox={isOpenStartBox} openStartBox={openStartBox} closeStartBox={closeStartBox}/>
+          <StartBoxWindows
+            isOpenStartBox={isOpenStartBox}
+            openStartBox={openStartBox}
+            setWindowOpenList={setWindowOpenList}
+            openWindowList={openWindowList}
+            closeStartBox={closeStartBox}
+            startBoxLeftApps={startBoxLeftApps}
+          />
           <MessageBox isOpenMessageBox={isOpenMessageBox} openMessageBox={openMessageBox} closeMessageBox={closeMessageBox}/>
         </View>
         <StartMenuWindows
@@ -83,6 +90,7 @@ const initMapStateToProps = (state) => ({
   isOpenStartBox:state.getIn(['homeWindows','isOpenStartBox']),
   desktopApps:state.getIn(['homeWindows','desktopApps']).toJS(),
   openWindowList:state.getIn(['homeWindows','openWindowList']).toJS(),
+  startBoxLeftApps:state.getIn(['homeWindows','startBoxLeftApps']).toJS(),
 })
 
 const initMapDispatchToProps = (dispatch) => ({

diff --git a/src/windows/pages/Home/store/state.js b/src/windows/pages/Home/store/state.js
@@ -21,7 +21,7 @@ export default fromJS({
   },
   isOpenMessageBox:false,//是否打开消息框
   isOpenStartBox:false,//是否打开开始菜单
-  desktopApps:[ //桌面应用图标
+  desktopApps:[ //桌面应用图标  isBlank是否在新标签页中打开
     {name:'系统管理',type:'system',logo:SystemControl,isShow:true,url:'/win/system',isIframe:true,isBlank:false,sort:1},
     {name:'博客', type:'qqxio', logo:QqxioImg,isShow:true,url:'https://www.qqxio.cn',isIframe:true,isBlank:false,sort:2},
     {name:'文件夹',type:'filename3',logo:FileImg1,isShow:true,url:'/win/system',isIframe:true,isBlank:false,sort:3},
@@ -33,4 +33,62 @@ export default fromJS({
     {name:'太空战机',type:'fly',logo:Fly,isShow:true,url:'http://game.qqxio.cn/fly',isIframe:true,isBlank:false,style:{width:622,height:467},sort:9}
   ],
   openWindowList: [],  //已打开的应用
+  startBoxLeftApps:[  //开始菜单左侧应用列表
+    {
+      lab:'A',
+      list:[
+        {name:'Adobe',type:'Adobe',logo:FileImg1,isShow:true,url:null,isIframe:true,isBlank:false,sort:0,children:[{name:'系统管理',type:'system',logo:SystemControl,isShow:true,url:'/win/system',isIframe:true,isBlank:false,sort:1},{name:'博客', type:'qqxio', logo:QqxioImg,isShow:true,url:'https://www.qqxio.cn',isIframe:true,isBlank:false,sort:2}]}
+      ]
+    },
+    {
+      lab:'B',
+      list:[
+        {name:'博客', type:'qqxio', logo:QqxioImg,isShow:true,url:'https://www.qqxio.cn',isIframe:true,isBlank:false,sort:2,children:null},
+        {name:'捕鱼达人',type:'fish',logo:Fish,isShow:true,url:'http://game.qqxio.cn/fish',isIframe:true,isBlank:false,sort:8,children:null},
+      ]
+    },
+    {
+      lab:'B',
+      list:[
+        {name:'博客', type:'qqxio', logo:QqxioImg,isShow:true,url:'https://www.qqxio.cn',isIframe:true,isBlank:false,sort:2,children:null},
+      ]
+    },
+    {
+      lab:'G',
+      list:[
+        {name:'github',type:'github',logo:GitHubImg,isShow:true,url:'https://github.com/jiajun00',isIframe:false,isBlank:true,sort:5,children:null},
+      ]
+    },
+    {
+      lab:'S',
+      list:[
+        {name:'数据驾驶舱',type:'data_driver',logo:ChartImg,isShow:true,url:'https://github.com/jiajun00',isIframe:false,isBlank:false,sort:6,children:null},
+        {name:'水果忍者',type:'fruit_ninja',logo:FruitNinja,isShow:true,url:'http://game.qqxio.cn/fruit_ninja',isIframe:true,isBlank:false,sort:7,children:null},
+      ]
+    },
+    {
+      lab:'T',
+      list:[
+        {name:'太空战机',type:'fly',logo:Fly,isShow:true,url:'http://game.qqxio.cn/fly',isIframe:true,isBlank:false,style:{width:622,height:467},sort:9,children:null}
+      ]
+    },
+    {
+      lab:'W',
+      list:[
+        {name:'文件夹',type:'filename3',logo:FileImg1,isShow:true,url:'/win/system',isIframe:true,isBlank:false,sort:3,children:null},
+      ]
+    },
+    {
+      lab:'X',
+      list:[
+        {name:'系统管理',type:'system',logo:SystemControl,isShow:true,url:'/win/system',isIframe:true,isBlank:false,sort:1,children:null},
+      ]
+    },
+    {
+      lab:'Y',
+      list:[
+        {name:'云盘',type:'cloud',logo:CloudPan,isShow:true,url:'http://cloud.qqxio.cn',isIframe:true,isBlank:false,sort:4,children:null},
+      ]
+    },
+  ]
 })