A 文件管理器增加输入地址功能 #495

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 {
       <React.Fragment>
         <input style={{display: 'none'}} type="file" ref={ref => this.input = ref}/>
         <div className={styles.drawerHeader}>
-          <Breadcrumb>
+          {this.state.inputPath !== null ? (
-            <Breadcrumb.Item href="#" onClick={() => this.handleChdir('', '0')}>
+            <Input ref={ref => this.input2 = ref} size="small" className={styles.input}
-              <HomeOutlined/>
+                   suffix={<div style={{color: '#999', fontSize: 12}}>回车确认</div>}
-            </Breadcrumb.Item>
+                   value={this.state.inputPath} onChange={e => this.setState({inputPath: e.target.value})}
-            {this.state.pwd.map(item => (
+                   onPressEnter={this.handleInputEnter}/>
-              <Breadcrumb.Item key={item} href="#" onClick={() => this.handleChdir(item, '2')}>
+          ) : (
-                <span>{item}</span>
+            <Breadcrumb className={styles.bread}>
+              <Breadcrumb.Item href="#" onClick={() => this.handleChdir('', '0')}>
+                <HomeOutlined style={{fontSize: 16}}/>
               </Breadcrumb.Item>
-            ))}
+              {this.state.pwd.map(item => (
-          </Breadcrumb>
+                <Breadcrumb.Item key={item} href="#" onClick={() => this.handleChdir(item, '2')}>
+                  <span>{item}</span>
+                </Breadcrumb.Item>
+              ))}
+              <Breadcrumb.Item onClick={this.handleInputEnter}>
+                <EditOutlined className={styles.edit}/>
+              </Breadcrumb.Item>
+            </Breadcrumb>
+          )}
+
           <div className={styles.action}>
             <span>显示隐藏文件：</span>
             <Switch

spug_web/src/pages/ssh/index.module.less

@@ -162,6 +162,24 @@
     height: 24px;
   }
 
+  .bread:hover {
+    .edit {
+      display: inline-block;
+    }
+  }
+
+  .input {
+    width: 60%;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  }
+
+  .edit {
+    display: none;
+    color: #2563fcbb;
+    margin-left: 24px;
+    cursor: pointer;
+  }
+
   .progress {
     width: 94px;
     margin-left: 12px;
@@ -174,6 +192,15 @@
     white-space: nowrap;
     margin-right: 24px;
   }
+
+  :global(.ant-breadcrumb-separator) {
+    margin: 0 4px;
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  :global(.ant-breadcrumb-link) {
+    color: rgba(0, 0, 0, 0.85);
+  }
 }
 
 .drawerBtn {