diff --git a/spug_web/src/pages/ssh/FileManager.js b/spug_web/src/pages/ssh/FileManager.js index dbb8225..7290b64 100644 --- a/spug_web/src/pages/ssh/FileManager.js +++ b/spug_web/src/pages/ssh/FileManager.js @@ -4,14 +4,15 @@ * Released under the AGPL-3.0 License. */ import React from 'react'; -import { Breadcrumb, Table, Switch, Progress, Modal, message } from 'antd'; +import { Breadcrumb, Table, Switch, Progress, Modal, Input, message } from 'antd'; import { DeleteOutlined, DownloadOutlined, FileOutlined, FolderOutlined, HomeOutlined, - UploadOutlined + UploadOutlined, + EditOutlined } from '@ant-design/icons'; import { AuthButton, Action } from 'components'; import { http, uniqueId, X_TOKEN } from 'libs'; @@ -23,10 +24,12 @@ class FileManager extends React.Component { constructor(props) { super(props); this.input = null; + this.input2 = null this.state = { fetching: false, showDot: false, uploading: false, + inputPath: null, uploadStatus: 'active', pwd: [], objects: [], @@ -97,10 +100,11 @@ class FileManager extends React.Component { this.setState({fetching: true}); pwd = pwd || this.state.pwd; const path = '/' + pwd.join('/'); - http.get('/api/file/', {params: {id: this.props.id, path}}) + return http.get('/api/file/', {params: {id: this.props.id, path}}) .then(res => { const objects = lds.orderBy(res, [this._kindSort, 'name'], ['desc', 'asc']); this.setState({objects, pwd}) + this.state.inputPath !== null && this.setState({inputPath: path}) }) .finally(() => this.setState({fetching: false})) }; @@ -109,6 +113,7 @@ class FileManager extends React.Component { let pwd = this.state.pwd.map(x => x); if (action === '1') { pwd.push(name) + this.setState({inputPath: null}) } else if (action === '2') { const index = pwd.indexOf(name); pwd = pwd.splice(0, index + 1) @@ -118,6 +123,28 @@ class FileManager extends React.Component { this.fetchFiles(pwd) }; + handlePathInput = (e) => { + const value = e.target.value; + const pwd = value.substring(1).split('/') + this.setState({pwd}) + }; + + handleInputEnter = () => { + if (this.state.inputPath === null) { + if (this.state.pwd.length > 0) { + this.setState({inputPath: `/${this.state.pwd.join('/')}/`}) + } else { + this.setState({inputPath: '/'}) + } + setTimeout(() => this.input2.focus(), 100) + } else { + let pwdStr = this.state.inputPath.replace(/^\/+/, '') + pwdStr = pwdStr.replace(/\/+$/, '') + this.fetchFiles(pwdStr.split('/')) + .then(() => this.setState({inputPath: null})) + } + } + handleUpload = () => { this.input.click(); this.input.onchange = e => { @@ -198,16 +225,27 @@ class FileManager extends React.Component { this.input = ref}/>
- - this.handleChdir('', '0')}> - - - {this.state.pwd.map(item => ( - this.handleChdir(item, '2')}> - {item} + {this.state.inputPath !== null ? ( + this.input2 = ref} size="small" className={styles.input} + suffix={
回车确认
} + value={this.state.inputPath} onChange={e => this.setState({inputPath: e.target.value})} + onPressEnter={this.handleInputEnter}/> + ) : ( + + this.handleChdir('', '0')}> + - ))} - + {this.state.pwd.map(item => ( + this.handleChdir(item, '2')}> + {item} + + ))} + + + +
+ )} +
显示隐藏文件: