github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

u: code format reset

pull/592/head
yombo 2023-03-02 10:10:20 +08:00
parent baf2d8c5d3
commit f9e28f4738
1 changed files with 88 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
spug_web/src/pages/ssh/FileManager.js
View File

@ -46,7 +46,7 @@ class FileManager extends React.Component {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (this.props.id !== prevProps.id) { if (this.props.id !== prevProps.id) {
this.fetchFiles() this.fetchFiles()
this.setState({ objects: [] }) this.setState({objects: []})
} }
} }
@ -54,14 +54,14 @@ class FileManager extends React.Component {
title: '名称', title: '名称',
key: 'name', key: 'name',
render: info => info.kind === 'd' ? ( render: info => info.kind === 'd' ? (
<div onClick={() => this.handleChdir(info.name, '1')} style={{ cursor: 'pointer' }}> <div onClick={() => this.handleChdir(info.name, '1')} style={{cursor: 'pointer'}}>
<FolderOutlined style={{ color: info.is_link ? '#008b8b' : '#2563fc' }} /> <FolderOutlined style={{color: info.is_link ? '#008b8b' : '#2563fc'}}/>
<span style={{ color: info.is_link ? '#008b8b' : '#2563fc', paddingLeft: 5 }}>{info.name}</span> <span style={{color: info.is_link ? '#008b8b' : '#2563fc', paddingLeft: 5}}>{info.name}</span>
</div> </div>
) : ( ) : (
<React.Fragment> <React.Fragment>
<FileOutlined /> <FileOutlined/>
<span style={{ paddingLeft: 5 }}>{info.name}</span> <span style={{paddingLeft: 5}}>{info.name}</span>
</React.Fragment> </React.Fragment>
), ),
ellipsis: true ellipsis: true
@ -87,10 +87,10 @@ class FileManager extends React.Component {
key: 'action', key: 'action',
render: info => info.kind === '-' ? ( render: info => info.kind === '-' ? (
<Action> <Action>
<Action.Button className={styles.drawerBtn} icon={<DownloadOutlined />} <Action.Button className={styles.drawerBtn} icon={<DownloadOutlined/>}
onClick={() => this.handleDownload(info.name)} /> onClick={() => this.handleDownload(info.name)}/>
<Action.Button danger auth="host.console.del" className={styles.drawerBtn} icon={<DeleteOutlined />} <Action.Button danger auth="host.console.del" className={styles.drawerBtn} icon={<DeleteOutlined/>}
onClick={() => this.handleDelete(info.name)} /> onClick={() => this.handleDelete(info.name)}/>
</Action> </Action>
) : null ) : null
}]; }];
@ -108,176 +108,144 @@ class FileManager extends React.Component {
pwd = pwdCache.filter(x => !!x) pwd = pwdCache.filter(x => !!x)
} }
const path = '/' + pwd.join('/'); const path = '/' + pwd.join('/');
return http.get('/api/file/', { params: { id: this.props.id, path } }) return http.get('/api/file/', {params: {id: this.props.id, path}})
.then(res => { .then(res => {
const objects = lds.orderBy(res, [this._kindSort, 'name'], ['desc', 'asc']); const objects = lds.orderBy(res, [this._kindSort, 'name'], ['desc', 'asc']);
this.setState({ objects, pwd }) this.setState({objects, pwd})
this.pwdHistoryCaches.set(this.props.id, pwd) this.pwdHistoryCaches.set(this.props.id, pwd)
this.state.inputPath !== null && this.setState({ inputPath: path }) this.state.inputPath !== null && this.setState({inputPath: path})
}) })
.finally(() => this.setState({ fetching: false })) .finally(() => this.setState({fetching: false}))
}; };
handleChdir = (name, action) => { handleChdir = (name, action) => {
let pwd = this.state.pwd.map(x => x); let pwd = this.state.pwd.map(x => x);
if (action === '1') { if (action === '1') {
pwd.push(name) pwd.push(name)
this.setState({ inputPath: null }) this.setState({inputPath: null})
} else if (action === '2') { } else if (action === '2') {
const index = pwd.indexOf(name); const index = pwd.indexOf(name);
pwd = pwd.splice(0, index + 1); pwd = pwd.splice(0, index + 1)
} else { } else {
pwd = []; pwd = []
} }
this.fetchFiles(pwd); this.fetchFiles(pwd)
}; };
handleInputEnter = () => { handleInputEnter = () => {
if (this.state.inputPath === null) { if (this.state.inputPath === null) {
if (this.state.pwd.length > 0) { if (this.state.pwd.length > 0) {
this.setState({ inputPath: `/${this.state.pwd.join("/")}/` }); this.setState({inputPath: `/${this.state.pwd.join('/')}/`})
} else { } else {
this.setState({ inputPath: "/" }); this.setState({inputPath: '/'})
} }
setTimeout(() => this.input2.focus(), 100); setTimeout(() => this.input2.focus(), 100)
} else { } else {
let pwdStr = this.state.inputPath.replace(/^\/+/, ""); let pwdStr = this.state.inputPath.replace(/^\/+/, '')
pwdStr = pwdStr.replace(/\/+$/, ""); pwdStr = pwdStr.replace(/\/+$/, '')
this.fetchFiles(pwdStr.split("/")).then(() => this.fetchFiles(pwdStr.split('/'))
this.setState({ inputPath: null }) .then(() => this.setState({inputPath: null}))
);
} }
}; }
handleUpload = () => { handleUpload = () => {
this.input.click(); this.input.click();
this.input.onchange = (e) => { this.input.onchange = e => {
this.setState({ uploading: true, uploadStatus: "active", percent: 0 }); this.setState({uploading: true, uploadStatus: 'active', percent: 0});
const file = e.target["files"][0]; const file = e.target['files'][0];
const formData = new FormData(); const formData = new FormData();
const token = uniqueId(); const token = uniqueId();
this._updatePercent(token); this._updatePercent(token);
formData.append("file", file); formData.append('file', file);
formData.append("id", this.props.id); formData.append('id', this.props.id);
formData.append("token", token); formData.append('token', token);
formData.append("path", "/" + this.state.pwd.join("/")); formData.append('path', '/' + this.state.pwd.join('/'));
this.input.value = ""; this.input.value = '';
http http.post('/api/file/object/', formData, {timeout: 600000, onUploadProgress: this._updateLocal})
.post("/api/file/object/", formData, { .then(() => {
timeout: 600000, this.setState({uploadStatus: 'success'});
onUploadProgress: this._updateLocal, this.fetchFiles()
}) }, () => this.setState({uploadStatus: 'exception'}))
.then( .finally(() => setTimeout(() => this.setState({uploading: false}), 2000))
() => { }
this.setState({ uploadStatus: "success" });
this.fetchFiles();
},
() => this.setState({ uploadStatus: "exception" })
)
.finally(() =>
setTimeout(() => this.setState({ uploading: false }), 2000)
);
};
}; };
_updateLocal = (e) => { _updateLocal = (e) => {
const percent = ((e.loaded / e.total) * 100) / 2; const percent = e.loaded / e.total * 100 / 2
this.setState({ percent: Number(percent.toFixed(1)) }); this.setState({percent: Number(percent.toFixed(1))})
}; }
_updatePercent = (token) => { _updatePercent = token => {
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"; const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
this.socket = new WebSocket( this.socket = new WebSocket(`${protocol}//${window.location.host}/api/ws/subscribe/${token}/?x-token=${X_TOKEN}`);
`${protocol}//${window.location.host}/api/ws/subscribe/${token}/?x-token=${X_TOKEN}` this.socket.onopen = () => this.socket.send('ok');
); this.socket.onmessage = e => {
this.socket.onopen = () => this.socket.send("ok"); if (e.data === 'pong') {
this.socket.onmessage = (e) => { this.socket.send('ping')
if (e.data === "pong") {
this.socket.send("ping");
} else { } else {
const percent = this.state.percent + Number(e.data) / 2; const percent = this.state.percent + Number(e.data) / 2;
if (percent > this.state.percent) if (percent > this.state.percent) this.setState({percent: Number(percent.toFixed(1))});
this.setState({ percent: Number(percent.toFixed(1)) });
if (percent === 100) { if (percent === 100) {
this.socket.close(); this.socket.close()
} }
} }
}; }
}; };
handleDownload = (name) => { handleDownload = (name) => {
const file = `/${this.state.pwd.join("/")}/${name}`; const file = `/${this.state.pwd.join('/')}/${name}`;
const link = document.createElement("a"); const link = document.createElement('a');
link.download = name; link.download = name;
link.href = `/api/file/object/?id=${this.props.id}&file=${file}&x-token=${X_TOKEN}`; link.href = `/api/file/object/?id=${this.props.id}&file=${file}&x-token=${X_TOKEN}`;
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
message.warning("即将开始下载，请勿重复点击。"); message.warning('即将开始下载，请勿重复点击。')
}; };
handleDelete = (name) => { handleDelete = (name) => {
const file = `/${this.state.pwd.join("/")}/${name}`; const file = `/${this.state.pwd.join('/')}/${name}`;
Modal.confirm({ Modal.confirm({
title: "删除文件确认", title: '删除文件确认',
content: `确认删除文件：${file} ?`, content: `确认删除文件：${file} ?`,
onOk: () => { onOk: () => {
return http return http.delete('/api/file/object/', {params: {id: this.props.id, file}})
.delete("/api/file/object/", { params: { id: this.props.id, file } })
.then(() => { .then(() => {
message.success("删除成功"); message.success('删除成功');
this.fetchFiles(); this.fetchFiles()
}); })
}, }
}); })
}; };
render() { render() {
let objects = this.state.objects; let objects = this.state.objects;
if (!this.state.showDot) { if (!this.state.showDot) {
objects = objects.filter((x) => !x.name.startsWith(".")); objects = objects.filter(x => !x.name.startsWith('.'))
} }
const scrollY = document.body.clientHeight - 168; const scrollY = document.body.clientHeight - 168;
return ( return (
<React.Fragment> <React.Fragment>
<input <input style={{display: 'none'}} type="file" ref={ref => this.input = ref}/>
style={{ display: "none" }}
type="file"
ref={(ref) => (this.input = ref)}
/>
<div className={styles.drawerHeader}> <div className={styles.drawerHeader}>
{this.state.inputPath !== null ? ( {this.state.inputPath !== null ? (
<Input <Input ref={ref => this.input2 = ref} size="small" className={styles.input}
ref={(ref) => (this.input2 = ref)} suffix={<div style={{color: '#999', fontSize: 12}}>回车确认</div>}
size="small" value={this.state.inputPath} onChange={e => this.setState({inputPath: e.target.value})}
className={styles.input} onBlur={this.handleInputEnter}
suffix={ onPressEnter={this.handleInputEnter}/>
<div style={{ color: "#999", fontSize: 12 }}>回车确认</div>
}
value={this.state.inputPath}
onChange={(e) => this.setState({ inputPath: e.target.value })}
onBlur={this.handleInputEnter}
onPressEnter={this.handleInputEnter}
/>
) : ( ) : (
<Breadcrumb className={styles.bread}> <Breadcrumb className={styles.bread}>
<Breadcrumb.Item <Breadcrumb.Item href="#" onClick={() => this.handleChdir('', '0')}>
href="#" <HomeOutlined style={{fontSize: 16}}/>
onClick={() => this.handleChdir("", "0")}
>
<HomeOutlined style={{ fontSize: 16 }} />
</Breadcrumb.Item> </Breadcrumb.Item>
{this.state.pwd.map((item) => ( {this.state.pwd.map(item => (
<Breadcrumb.Item <Breadcrumb.Item key={item} href="#" onClick={() => this.handleChdir(item, '2')}>
key={item}
href="#"
onClick={() => this.handleChdir(item, "2")}
>
<span>{item}</span> <span>{item}</span>
</Breadcrumb.Item> </Breadcrumb.Item>
))} ))}
<Breadcrumb.Item onClick={this.handleInputEnter}> <Breadcrumb.Item onClick={this.handleInputEnter}>
<EditOutlined className={styles.edit} /> <EditOutlined className={styles.edit}/>
</Breadcrumb.Item> </Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
)} )}
@ -288,26 +256,18 @@ class FileManager extends React.Component {
checked={this.state.showDot} checked={this.state.showDot}
checkedChildren="开启" checkedChildren="开启"
unCheckedChildren="关闭" unCheckedChildren="关闭"
onChange={(v) => this.setState({ showDot: v })} onChange={v => this.setState({showDot: v})}/>
/>
{this.state.uploading ? ( {this.state.uploading ? (
<Progress <Progress className={styles.progress} strokeWidth={14} status={this.state.uploadStatus}
className={styles.progress} percent={this.state.percent}/>
strokeWidth={14}
status={this.state.uploadStatus}
percent={this.state.percent}
/>
) : ( ) : (
<AuthButton <AuthButton
auth="host.console.upload" auth="host.console.upload"
style={{ marginLeft: 12 }} style={{marginLeft: 12}}
size="small" size="small"
type="primary" type="primary"
icon={<UploadOutlined />} icon={<UploadOutlined/>}
onClick={this.handleUpload} onClick={this.handleUpload}>上传文件</AuthButton>
>
上传文件
</AuthButton>
)} )}
</div> </div>
</div> </div>
@ -317,16 +277,12 @@ class FileManager extends React.Component {
loading={this.state.fetching} loading={this.state.fetching}
pagination={false} pagination={false}
columns={this.columns} columns={this.columns}
scroll={{ y: scrollY }} scroll={{y: scrollY}}
style={{ style={{fontFamily: 'Source Code Pro, Courier New, Courier, Monaco, monospace, PingFang SC, Microsoft YaHei'}}
fontFamily: dataSource={objects}/>
"Source Code Pro, Courier New, Courier, Monaco, monospace, PingFang SC, Microsoft YaHei",
}}
dataSource={objects}
/>
</React.Fragment> </React.Fragment>
); )
} }
} }
export default FileManager; export default FileManager