新增文件树管理功能模块

jiajun00 · Feb 19, 2019 · 9437e3f · 9437e3f
1 parent 32a3ced
commit 9437e3f
Show file tree

Hide file tree

Showing 31 changed files with 492 additions and 107 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # 桌面系统
-![](https://img.shields.io/badge/react_desktops-0.1.2-green.svg)
+![](https://img.shields.io/badge/react_desktops-0.2.0-green.svg)
 ![](https://img.shields.io/badge/build-passing-yellow.svg)
 ![](https://img.shields.io/badge/language-javascript-red.svg)
 ![](https://img.shields.io/badge/license-MIT-000000.svg)
@@ -46,19 +46,19 @@ npm run build
 ### Mac风格桌面
 路由：/mac
 
-![image](https://github.com/jiajun00/react-desktops/raw/master/another/mac-home.png)
+![image](https://react-desktop.oss-cn-shenzhen.aliyuncs.com/demo/mac-home.png)
 
-![image](https://github.com/jiajun00/react-desktops/raw/master/another/mac-finder-file.png)
+![image](https://react-desktop.oss-cn-shenzhen.aliyuncs.com/demo/mac-finder-file.png)
 
-![image](https://github.com/jiajun00/react-desktops/raw/master/another/mac-finder-list.png)
+![image](https://react-desktop.oss-cn-shenzhen.aliyuncs.com/demo/mac-finder-list.png)
 
-![image](https://github.com/jiajun00/react-desktops/raw/master/another/mac-lanpach.png)
+![image](https://react-desktop.oss-cn-shenzhen.aliyuncs.com/demo/mac-lanpach.png)
 
 
 ### Windows风格桌面
 路由：/win
 
-![image](https://github.com/jiajun00/react-desktops/raw/master/another/win-home.png)
+![image](https://react-desktop.oss-cn-shenzhen.aliyuncs.com/demo/win-home.png)
 
 ## 在线演示
 [演示地址](http://desk.qqxio.cn)

diff --git a/another/mac-finder-file.png b/another/mac-finder-file.png
diff --git a/another/mac-finder-list.png b/another/mac-finder-list.png
diff --git a/another/mac-home.png b/another/mac-home.png
diff --git a/another/mac-lanpach.png b/another/mac-lanpach.png
diff --git a/another/win-home.png b/another/win-home.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-desktops",
- "version": "0.1.2",
+ "version": "0.2.0",
  "private": true,
  "homepage": "http://desk.qqxio.cn",
  "dependencies": {

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
  <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no, user-scalable=no, target-densitydpi=device-dpi" >
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no, user-scalable=no" >
  <meta name="theme-color" content="#000000">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

diff --git a/src/components/content/ContentRight.js b/src/components/content/ContentRight.js
@@ -1,28 +1,89 @@
 import React, {Component} from 'react'
 import { Breadcrumb } from '@alifd/next'
+import { Link } from 'react-router-dom'
 
 import "../../public/style/components/content/content_right.scss"
 
 class ContentRight extends Component {
+ constructor(props){
+ super(props)
+ this.breakcrumbList = []
+ this.i = 0
 
- state = {}
-
+ }
+ state = {
+ breadcrumb_list:[]
+ }
+ componentDidMount(){
+ if(this.props.isFile){
+ this.search_item(this.props.match.params.id)
+ }
+ }
+ shouldComponentUpdate(newProps, newState){
+ if(this.props.isFile && newProps.match.params.id !== this.props.match.params.id){
+ this.search_item(newProps.match.params.id)
+ }
+ return true
+ }
  render() {
  const {
- merge_url,route_url,className,title
+ merge_url,route_url,className,title,isFile
  } = this.props
  return (
  <div className={"content_right "+className}>
- <Breadcrumb>
- <Breadcrumb.Item link={merge_url}>首页</Breadcrumb.Item>
- <Breadcrumb.Item link={merge_url+route_url}>{title}</Breadcrumb.Item>
- </Breadcrumb>
+ {isFile ?
+ this.fileBreadcrumbItem()
+ :
+ <Breadcrumb>
+ <Breadcrumb.Item><Link to={merge_url}>首页</Link></Breadcrumb.Item>
+ <Breadcrumb.Item><Link to={merge_url + route_url}>{title}</Link></Breadcrumb.Item>
+ </Breadcrumb>
+ }
  <div className={"content_right_main "+className+"_content"}>
  {this.props.children}
  </div>
  </div>
  )
  }
+ fileBreadcrumbItem = () => {
+ const { breadcrumb_list } = this.state
+ const { match_old,menuList } = this.props
+ return (
+ <Breadcrumb>
+ <Breadcrumb.Item><Link to={match_old.path+"/0"}>{menuList.name}</Link></Breadcrumb.Item>
+ {breadcrumb_list.map(row=>(
+ <Breadcrumb.Item key={row.id}><Link to={match_old.path+"/"+row.id}>{row.name}</Link></Breadcrumb.Item>
+ ))}
+ </Breadcrumb>
+ )
+ }
+
+ search_item = (id) => {
+ if(parseInt(id)){
+ const { menuList } = this.props
+ const { list } = menuList
+ const menu = list.find(row=>{
+ return row.id === parseInt(id)
+ })
+ this.breakcrumbList[this.i] = menu
+ this.i += 1
+ if(menu.pid === 0){
+ const breadcrumb_list = this.breakcrumbList.reverse()
+ this.setState({
+ breadcrumb_list
+ },()=>{
+ this.breakcrumbList = []
+ this.i = 0
+ })
+ }else {
+ this.search_item(menu.pid)
+ }
+ }else{
+ this.setState({
+ breadcrumb_list: []
+ })
+ }
+ }
 }
 
 

diff --git a/src/components/file/File.js b/src/components/file/File.js
@@ -1,6 +1,8 @@
 import React, {Component} from 'react'
 import {calc_empty_list} from "../../public/utils/com";
-import {file_logo} from "../../public/utils/file_logo";
+
+import "../../public/style/components/file/file.scss"
+
 
 class File extends Component {
  componentDidMount(){
@@ -11,28 +13,31 @@ class File extends Component {
  window.removeEventListener('resize', this.onWindowResize)
  }
  render() {
+ const {
+ fileLists,match,history
+ } = this.props
  return (
  <div
  ref={(files_list)=>{this.files_list=files_list}}
  className="findder_files_list"
  >
- {this.props.fileLists.sort(this.compare('sort')).map((row)=>(
+ {fileLists.sort(this.compare('sort')).map((row)=>(
  <div
  key={row.name}
  className="finder_file"
  >
- <div
- className="file"
- onDragEnter={this.dragenter}
- onDragLeave={this.dragleave}
- onDragStart={(el)=>{this.domdrugstart( row.sort, row.name, row.imgUrl, el)}}
- onDrop={(el)=>{this.drop(row.sort, this.props.fileLists, 'sort', el)}}
- onDragOver={this.allowDrop}
- >
- <img src={file_logo(row.type)} alt={row.name}/>
- <span>{row.name}</span>
- </div>
-
+  <div
+  onDoubleClick={()=>{history.push(match.path+'/'+row.id)}}
+  className="file"
+  onDragEnter={this.dragenter}
+  onDragLeave={this.dragleave}
+  onDragStart={(el)=>{this.domdrugstart( row.sort, row.name, row.imgUrl, el)}}
+  onDrop={(el)=>{this.drop(row.sort, this.props.fileLists, 'sort', el)}}
+  onDragOver={this.allowDrop}
+ >
+  <img src={row.logo} alt={row.name}/>
+  <span>{row.name}</span>
+ </div>
  </div>
  ))}
  {this.props.emptyLists}

diff --git a/src/components/tree/FileLeftMenuTree.js b/src/components/tree/FileLeftMenuTree.js
@@ -0,0 +1,82 @@
+import React, {Component} from 'react'
+import { NavLink } from 'react-router-dom'
+import { View } from 'react-desktop'
+import { Tree } from '@alifd/next'
+import {setTreeData} from "../../public/utils/com";
+
+const TreeNode = Tree.Node
+
+class FileLeftMenuTree extends Component {
+
+ state = {}
+
+ render() {
+ const {
+ menuList,match
+ } = this.props
+ const listTree = setTreeData(menuList.list)
+ return (
+ <View height='100%' style={{overflow:'auto'}}>
+ <Tree defaultExpandAll defaultSelectedKeys={['desk_manage']} style={{ width: '100%' }}>
+ <TreeNode
+ label={
+ <NavLink to={match.path+'/0'}>
+ <div className="file_manage_label">
+ <img src={menuList.logo} alt={menuList.name}/>
+ <span>{menuList.name}</span>
+ </div>
+ </NavLink>
+ }
+ key="0"
+ selectable={false}
+ >
+ {this.tree(listTree)}
+ </TreeNode>
+ </Tree>
+ </View>
+ )
+ }
+ /*
+ * 左侧文件树
+ * @param data Array 数据 {name:"我的文档",type:"",logo:"",children:null}
+ */
+ tree = (data) => {
+ const { match } = this.props
+ return data.map((row)=>{
+ if(row.children){
+ return (
+ <TreeNode
+ key={row.type}
+ label={
+ <NavLink to={match.path+'/'+row.id} >
+ <div className="file_manage_label">
+ <img src={row.logo} alt={row.type}/>
+ <span>{row.name}</span>
+ </div>
+ </NavLink>
+ }
+ selectable={false}
+ >
+ {row.children && this.tree(row.children)}
+ </TreeNode>
+ )
+ }else{
+ return (
+ <TreeNode
+ key={row.type}
+ label={
+ <NavLink to={match.path+'/'+row.id}>
+ <img src={row.logo} alt={row.type}/>
+ <span>{row.name}</span>
+ </NavLink>
+ }
+ isLeaf
+ />
+ )
+ }
+ })
+ }
+}
+
+
+export default FileLeftMenuTree
diff --git a/src/components/tree/PrivilegeTree.js b/src/components/tree/PrivilegeTree.js
@@ -18,16 +18,17 @@ const dataList =
  ]}
  ]},
  {id:10,name:'博客',url:'',children:null},
- {id:11,name:'博客',url:'',children:null}
+ {id:11,name:'文件夹',url:'',children:null}
  ]}
 
 class PrivilegeTree extends Component {
 
  state = {}
 
  render() {
+ const { isShow } = this.props
  return (
- <Tree defaultExpandAll showLine>
+ <Tree checkable={!isShow} defaultExpandAll showLine>
  <TreeNode label={dataList.name}>
  {this.tree(dataList.children)}
  </TreeNode>
@@ -43,7 +44,7 @@ class PrivilegeTree extends Component {
  key = {row.id}
  label={
  <div className="privilege_manage_tree_leaf">
- <span>系统管理</span>
+ <span>{row.name}</span>
  {!isShow && <Button size="small">修改</Button>}
  </div>
  }
@@ -57,7 +58,7 @@ class PrivilegeTree extends Component {
  key = {row.id}
  label={
  <div className="privilege_manage_tree_leaf">
- <span>桌面管理</span>
+ <span>{row.name}</span>
  {!isShow &&
  <Fragment>
  <Button size="small">修改</Button>

diff --git a/src/mac/pages/File/store/state.js b/src/mac/pages/File/store/state.js
@@ -3,19 +3,19 @@ import { fromJS } from 'immutable'
 export default fromJS({
  emptyLists:[],
  fileLists: [ //文件列表
- {name:'文件名1',type:'file',sort:1},
- {name:'文件名22',type:'file',sort:2},
- {name:'文件名3',type:'file',sort:3},
- {name:'文件名4',type:'file',sort:4},
- {name:'文件名43',type:'file',sort:5},
- {name:'文件名6',type:'file',sort:6},
- {name:'文件名7',type:'file',sort:7},
- {name:'文件名8',type:'file',sort:8},
- {name:'文件名9',type:'file',sort:9},
- {name:'文件名87',type:'fileimg',sort:10},
- {name:'文件名232',type:'file',sort:11},
- {name:'文件名34',type:'file',sort:12},
- {name:'文件名55',type:'file',sort:13},
+ {name:'文件名1',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:1},
+ {name:'文件名22',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:2},
+ {name:'文件名3',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:3},
+ {name:'文件名4',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:4},
+ {name:'文件名43',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:5},
+ {name:'文件名6',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:6},
+ {name:'文件名7',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:7},
+ {name:'文件名8',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:8},
+ {name:'文件名9',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:9},
+ {name:'文件名87',type:'fileimg',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/fileimg.png',sort:10},
+ {name:'文件名232',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:11},
+ {name:'文件名34',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:12},
+ {name:'文件名55',type:'file',logo:'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png',sort:13},
  ],
  leftNavLists: [
  {

diff --git a/src/public/style/components/content/content_right.scss b/src/public/style/components/content/content_right.scss
@@ -3,10 +3,14 @@
  font-size: 14px;
  overflow: hidden;
  box-sizing: border-box;
-
+ .next-breadcrumb{
+ height: auto;
+ padding: 8px 0 8px 10px;
+ }
  .content_right_main {
  height: calc(100% - 35px);
  overflow-x: hidden;
  overflow-y: auto;
+
  }
 }