@electerm/electerm-react 1.37.128 → 1.38.6

package/client/common/constants.js

@@ -35,7 +35,7 @@ export const filePropMinWidth = 1
 export const contextMenuHeight = 28
 export const contextMenuWidth = 280
 export const contextMenuPaddingTop = 10
-export const sftpControlHeight = 28 + 42 + 33 + 46
+export const sftpControlHeight = 28 + 42 + 33 + 36
 export const sidebarWidth = 43
 export const maxHistory = 50
 export const maxTransport = 5
@@ -339,3 +339,4 @@ export const instSftpKeys = [
   'writeFile'
 ]
 export const cwdId = '=__+__'
+export const zmodemTransferPackSize = 1024 * 1024 * 2

package/client/common/default-setting.js

@@ -31,7 +31,7 @@ export default {
   checkUpdateOnStart: true,
   cursorBlink: false,
   cursorStyle: 'block',
-  useSystemTitleBar: false,
+  useSystemTitleBar: window.pre.isLinux || window.et.isLinux || false,
   opacity: 1,
   defaultEditor: '',
   terminalWordSeparator: './\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~ ?',

package/client/common/pre.js

@@ -104,7 +104,7 @@ const fs = {
     const cb = args.pop()
     window.fs.readCustom(
       p1,
-      encodeUint8Array(arr),
+      arr.length,
       ...args
     )
       .then((data) => {

package/client/components/main/main.jsx

@@ -73,6 +73,7 @@ export default class Index extends Component {
     const cls = classnames({
       loaded: configLoaded,
       'system-ui': store.config.useSystemTitleBar,
+      'not-system-ui': !store.config.useSystemTitleBar,
       'is-mac': isMac,
       'is-win': isWin,
       pinned,

package/client/components/quick-commands/quick-commands-select.jsx

@@ -29,6 +29,7 @@ export default class QuickCommandsFooter extends PureComponent {
           size='small'
           onMouseEnter={this.handleOpen}
           onMouseLeave={this.handleMouseLeave}
+          type='ghost'
         >
           <span className='w500'>{e('quickCommands')}</span>
           <span className='l500'>Q</span>

package/client/components/session/sessions.jsx

@@ -49,6 +49,13 @@ class Sessions extends Component {
     )
   }
 
+  reloadCurrentTabShortcut = (e) => {
+    e.stopPropagation()
+    this.reloadTab(
+      this.getCurrentTab()
+    )
+  }
+
   watch = () => {
     window.addEventListener('message', this.onEvent)
   }

package/client/components/setting-panel/setting-modal.jsx

@@ -144,7 +144,8 @@ export default class SettingModalWrap extends Component {
     const {
       showModal,
       hideSettingModal,
-      innerWidth
+      innerWidth,
+      useSystemTitleBar
     } = this.props.store
     const show = showModal === modals.setting
     if (!show) {
@@ -154,6 +155,7 @@ export default class SettingModalWrap extends Component {
       <SettingModal
         onCancel={hideSettingModal}
         visible={show}
+        useSystemTitleBar={useSystemTitleBar}
         innerWidth={innerWidth}
       >
         {this.renderTabs()}

package/client/components/setting-panel/setting-wrap.jsx

@@ -6,9 +6,16 @@ import { Component } from 'react'
 import { Drawer } from 'antd'
 import { CloseCircleOutlined } from '@ant-design/icons'
 import { sidebarWidth } from '../../common/constants'
+import AppDrag from '../tabs/app-drag'
 import './setting-wrap.styl'
 
 export default class SettingWrap extends Component {
+  renderDrag () {
+    return (
+      <AppDrag />
+    )
+  }
+
   render () {
     const pops = {
       open: this.props.visible,
@@ -32,6 +39,9 @@ export default class SettingWrap extends Component {
           className='close-setting-wrap'
           onClick={this.props.onCancel}
         />
+        {
+          this.props.useSystemTitleBar ? null : <AppDrag />
+        }
         {this.props.visible ? this.props.children : null}
       </Drawer>
     )

package/client/components/setting-panel/setting.styl

@@ -3,4 +3,11 @@
   padding 0
   margin 5px 5px 0 0
 .font-sel
-  min-width 200px
+  min-width 200px
+.setting-wrap .app-drag
+  position fixed
+  top 0
+  left 43px
+  height 60px
+  right 0
+  z-index 888

package/client/components/shortcuts/shortcut-handler.js

@@ -75,6 +75,17 @@ export function shortcutExtend (Cls) {
     ) {
       return true
     }
+    if (
+      this.term &&
+      key === 'c' &&
+      type === 'keydown' &&
+      !altKey &&
+      !shiftKey &&
+      ctrlKey &&
+      this.onZmodem
+    ) {
+      this.onZmodemEnd()
+    }
     const codeName = event instanceof window.WheelEvent
       ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
       : code

package/client/components/shortcuts/shortcuts-defaults.js

@@ -5,6 +5,11 @@ export default () => {
       shortcut: 'alt+w',
       shortcutMac: 'alt+w'
     },
+    {
+      name: 'app_reloadCurrentTab',
+      shortcut: 'alt+r',
+      shortcutMac: 'alt+r'
+    },
     {
       name: 'app_newBookmark',
       shortcut: 'ctrl+n',

package/client/components/sidebar/sidebar.styl

@@ -26,6 +26,9 @@
   box-shadow 0px 0px 3px 3px alpha(main, .1)
   .item-list
     padding-right 0
+.not-system-ui.is-mac
+  .sidebar-bar
+    margin-top 20px
 .type-bookmarks
   .bookmarks-panel
     width 100%
@@ -50,7 +53,7 @@
 .sidebar-list
   position absolute
   left 43px
-  top 45px
+  top 36px
   bottom 0
   z-index 200
   width 0

package/client/components/tabs/index.jsx

@@ -18,7 +18,13 @@ import {
 import { Dropdown, Menu, Popover } from 'antd'
 import Tab from './tab'
 import './tabs.styl'
-import { tabWidth, tabMargin, extraTabWidth, windowControlWidth } from '../../common/constants'
+import {
+  tabWidth,
+  tabMargin,
+  extraTabWidth,
+  windowControlWidth,
+  isMacJs
+} from '../../common/constants'
 import findParentBySel from '../../common/find-parent'
 import WindowControl from './window-control'
 import BookmarksList from '../sidebar/bookmark-select'
@@ -239,8 +245,9 @@ export default class Tabs extends React.Component {
     const left = overflow
       ? '100%'
       : tabsWidthAll
+    const w1 = isMacJs ? 30 : windowControlWidth
     const style = {
-      width: width - windowControlWidth - 136
+      width: width - w1 - 136
     }
     return (
       <div

package/client/components/tabs/tab.jsx

@@ -2,7 +2,7 @@
  * file section
  */
 
-import React from 'react'
+import { Component } from 'react'
 import runIdle from '../../common/run-idle'
 import {
   CloseOutlined,
@@ -21,7 +21,7 @@ import {
   terminalSshConfigType,
   commonActions
 } from '../../common/constants'
-import TabTitle from './tab-title'
+import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
 const { prefix } = window
 const e = prefix('tabs')
@@ -29,7 +29,7 @@ const m = prefix('menu')
 const onDragCls = 'ondrag-tab'
 const onDragOverCls = 'dragover-tab'
 
-export default class Tab extends React.Component {
+class Tab extends Component {
   constructor (props) {
     super(props)
     this.state = {
@@ -245,13 +245,14 @@ export default class Tab extends React.Component {
     setTabs(tabs)
   }
 
-  renderContext () {
+  renderContext = () => {
     const { tabs, tab } = this.props
     const len = tabs.length
     const index = findIndex(tabs, t => t.id === tab.id)
     const noRight = index >= len - 1
     const isSshConfig = tab.type === terminalSshConfigType
     const res = []
+    const reloadShortcut = this.getShortcut('app_reloadCurrentTab')
     res.push({
       func: 'handleClose',
       icon: 'CloseOutlined',
@@ -288,7 +289,8 @@ export default class Tab extends React.Component {
     res.push({
       func: 'handleReloadTab',
       icon: 'Loading3QuartersOutlined',
-      text: m('reload')
+      text: m('reload'),
+      subText: reloadShortcut
     })
     return res
   }
@@ -379,6 +381,10 @@ export default class Tab extends React.Component {
     if (isEditting) {
       return this.renderEditting(tab, cls)
     }
+    const { tabCount, color } = tab
+    const styleTag = color
+      ? { borderTop: `1px solid ${color}` }
+      : {}
     return (
       <Tooltip
         title={title}
@@ -404,6 +410,7 @@ export default class Tab extends React.Component {
             className='tab-title elli pd1x'
             onClick={this.handleClick}
             onDoubleClick={this.handleDup}
+            style={styleTag}
             onContextMenu={this.handleContextMenu}
           >
             <Loading3QuartersOutlined
@@ -411,7 +418,9 @@ export default class Tab extends React.Component {
               onClick={this.handleReloadTab}
               title={m('reload')}
             />
-            <TabTitle tab={tab} />
+            <span className='tab-title'>
+              {tabCount}. {title}
+            </span>
           </div>
           <div className={'tab-status ' + status} />
           <div className='tab-traffic' />
@@ -424,3 +433,5 @@ export default class Tab extends React.Component {
     )
   }
 }
+
+export default shortcutDescExtend(Tab)

package/client/components/tabs/tabs.styl

@@ -1,17 +1,24 @@
 @require '../../css/includes/theme-default'
 .tabs
   position relative
-  height 45px
+  height 36px
   overflow hidden
   background main-dark
-
+  ::-webkit-scrollbar
+    width 0
+    display none
+.not-system-ui.is-mac
+  .tabs-inner
+    margin-left 72px
+  .tabs-extra
+    right 0
 .tabs-inner
   position relative
   z-index 2
   padding 0
   margin-top 0
   display inline-block
-  height 63px
+  height 36px
   overflow-x scroll
   overflow-y hidden
   margin-left 42px
@@ -25,7 +32,7 @@
   min-width 100px
   max-width 200px
   line-height 36px
-  margin 10px 1px 0 0
+  margin 0 1px 0 0
   border-radius 3px 3px 0 0
   background main-dark
   text-align center
@@ -118,13 +125,13 @@
 .tabs-add-btn
   display inline-block
   vertical-align middle
-  margin 10px 3px 0 3px
+  margin 0 3px 0 3px
   -webkit-app-region no-drag
   color text
   &.empty
     font-size 20px
     margin-left 20px
-    margin-top 20px
+    margin-top 10px
   &:hover
     color text-light
 .tabs-extra

package/client/components/tabs/window-control.jsx

@@ -4,6 +4,9 @@
 
 import { CloseOutlined, MinusOutlined } from '@ant-design/icons'
 import { Component } from '../common/react-subx'
+import {
+  isMacJs
+} from '../../common/constants'
 
 const { prefix } = window
 const m = prefix('menu')
@@ -14,7 +17,7 @@ export default class WindowControl extends Component {
       isMaximized,
       config
     } = this.props.store
-    if (config.useSystemTitleBar) {
+    if (config.useSystemTitleBar || isMacJs) {
       return null
     }
     const minimize = () => {

package/client/components/terminal/attach-addon-custom.js

@@ -7,12 +7,16 @@ import strip from '@electerm/strip-ansi'
 export default class AttachAddonCustom extends AttachAddon {
   constructor (term, options, encode, isWindowsShell) {
     super(term, options)
+    this.term = term
     this.decoder = new TextDecoder(encode)
     this.isWindowsShell = isWindowsShell
   }
 
-  activate (terminal) {
+  activate (terminal = this.term) {
     const writeToTerminal = (data) => {
+      if (terminal.parent?.onZmodem) {
+        return
+      }
       if (typeof data === 'string') {
         return terminal.write(data)
       }
@@ -79,6 +83,12 @@ export default class AttachAddonCustom extends AttachAddon {
     this._disposables.push(addSocketListener(this._socket, 'close', () => this.dispose()))
     this._disposables.push(addSocketListener(this._socket, 'error', () => this.dispose()))
   }
+
+  dispose () {
+    this.term = null
+    this._disposables.forEach(d => d.dispose())
+    this._disposables.length = 0
+  }
 }
 
 function addSocketListener (socket, type, handler) {
@@ -86,7 +96,6 @@ function addSocketListener (socket, type, handler) {
   return {
     dispose: () => {
       if (!handler) {
-        // Already disposed
         return
       }
       socket.removeEventListener(type, handler)

package/client/components/terminal/fs.js

@@ -0,0 +1,59 @@
+export const open = (filePath, flag) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.open(filePath, flag, (err, fd) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(fd)
+    })
+  })
+}
+
+export const close = (fd) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.close(fd, (err) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(true)
+    })
+  })
+}
+
+export const exists = (filePath) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.access(filePath, (err) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(true)
+    })
+  })
+}
+
+export const read = (fd, buffer, offset, length, position) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.read(fd, buffer, offset, length, position, (err, bytesRead, buffer) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(buffer.subarray(0, bytesRead))
+    })
+  })
+}
+
+export const write = (fd, buffer) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.write(fd, buffer, (err, buffer) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(buffer)
+    })
+  })
+}

package/client/components/terminal/index.jsx

@@ -1,5 +1,4 @@
 import { Component } from 'react'
-import ZmodemTransfer from './zmodem-transfer'
 import { handleErr } from '../../common/fetch'
 import generate from '../../common/uid'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
@@ -27,7 +26,8 @@ import {
   commonActions,
   rendererTypes,
   cwdId,
-  isMac
+  isMac,
+  zmodemTransferPackSize
 } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, copy } from '../../common/clipboard'
@@ -39,7 +39,7 @@ import { CanvasAddon } from 'xterm-addon-canvas'
 import { WebglAddon } from 'xterm-addon-webgl'
 import { LigaturesAddon } from 'xterm-addon-ligatures'
 import getProxy from '../../common/get-proxy'
-import { Zmodem, AddonZmodem } from './xterm-zmodem'
+import { AddonZmodem } from './xterm-zmodem'
 import { Unicode11Addon } from 'xterm-addon-unicode11'
 import keyControlPressed from '../../common/key-control-pressed'
 import { Terminal } from 'xterm'
@@ -47,8 +47,11 @@ import NormalBuffer from './normal-buffer'
 import { createTerm, resizeTerm } from './terminal-apis'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import { KeywordHighlighterAddon } from './highlight-addon.js'
+import { getLocalFileInfo } from '../sftp/file-read.js'
 import { SerializeAddon } from 'xterm-addon-serialize'
 import strip from '@electerm/strip-ansi'
+import { formatBytes } from '../../common/byte-format.js'
+import * as fs from './fs.js'
 
 const { prefix } = window
 const e = prefix('ssh')
@@ -71,7 +74,6 @@ class Term extends Component {
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
       addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
       passType: 'password',
-      zmodemTransfer: null,
       lines: []
     }
   }
@@ -128,6 +130,9 @@ class Term extends Component {
   }
 
   componentWillUnmount () {
+    if (this.zsession) {
+      this.onZmodemEnd()
+    }
     delete this.term.parent
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
@@ -161,6 +166,21 @@ class Term extends Component {
     }
   ]
 
+  initAttachAddon = (encode) => {
+    this.attachAddon = new AttachAddon(
+      this.socket,
+      undefined,
+      this.props.tab.encode,
+      isWin && !this.isRemote()
+    )
+    if (encode || this.decode) {
+      this.attachAddon.decoder = encode
+        ? new TextDecoder(encode)
+        : this.decode
+    }
+    this.term.loadAddon(this.attachAddon)
+  }
+
   getValue = (props, type, name) => {
     return type === 'glob'
       ? props.config[name]
@@ -420,152 +440,259 @@ class Term extends Component {
     log.debug('zmodemRetract')
   }
 
-  onReceiveZmodemSession = () => {
-    //  * zmodem transfer
-    //  * then run rz to send from your browser or
-    //  * sz <file> to send from the remote peer.
+  writeBanner = (type) => {
     this.term.write('\r\nRecommmend use trzsz instead: https://github.com/trzsz/trzsz\r\n')
+    this.term.write(`\x1b[32mZMODEM::${type}::START\x1b[0m\r\n\r\n`)
+  }
+
+  onReceiveZmodemSession = async () => {
+    const savePath = await this.openSaveFolderSelect()
     this.zsession.on('offer', this.onOfferReceive)
     this.zsession.start()
+    this.term.write('\r\n\x1b[2A\r\n')
+    if (!savePath) {
+      return this.onZmodemEnd()
+    }
+    this.writeBanner('RECEIVE')
+    this.zmodemSavePath = savePath
     return new Promise((resolve) => {
       this.zsession.on('session_end', resolve)
-    }).then(this.onZmodemEnd).catch(this.onZmodemCatch)
+    })
+      .then(this.onZmodemEnd)
+      .catch(this.onZmodemCatch)
   }
 
-  updateProgress = (xfer, type) => {
-    if (this.onCanceling) {
+  initZmodemDownload = async (name, size) => {
+    if (!this.zmodemSavePath) {
       return
     }
-    const fileInfo = xfer.get_details()
-    const {
-      size
-    } = fileInfo
-    const total = xfer.get_offset() || 0
-    let percent = Math.floor(100 * total / size)
-    if (percent > 99) {
-      percent = 99
+    let pth = window.pre.resolve(
+      this.zmodemSavePath, name
+    )
+    const exist = await fs.exists(pth)
+    if (exist) {
+      pth = pth + '.' + generate()
     }
-    this.setState({
-      zmodemTransfer: {
-        fileInfo,
-        percent,
-        transferedSize: total,
-        type
-      }
-    })
+    const fd = await fs.open(pth, 'w').catch(this.onZmodemEnd)
+    this.downloadFd = fd
+    this.downloadPath = pth
+    this.downloadCount = 0
+    this.zmodemStartTime = Date.now()
+    this.downloadSize = size
+    this.updateZmodemProgress(
+      0, pth, size, transferTypeMap.download
+    )
+    return fd
   }
 
-  saveToDisk = (xfer, buffer) => {
-    return Zmodem.Browser
-      .save_to_disk(buffer, xfer.get_details().name)
+  onOfferReceive = async (xfer) => {
+    const {
+      name,
+      size
+    } = xfer.get_details()
+    if (!this.downloadFd) {
+      await this.initZmodemDownload(name, size)
+    }
+    xfer.on('input', this.onZmodemDownload)
+    this.xfer = xfer
+    await xfer.accept()
+      .then(this.finishZmodemTransfer)
+      .catch(this.onZmodemEnd)
   }
 
-  onOfferReceive = xfer => {
-    this.updateProgress(xfer, transferTypeMap.download)
-    const FILE_BUFFER = []
-    xfer.on('input', (payload) => {
-      this.updateProgress(xfer, transferTypeMap.download)
-      FILE_BUFFER.push(new Uint8Array(payload))
-    })
-    xfer.accept()
-      .then(
-        () => {
-          this.saveToDisk(xfer, FILE_BUFFER)
-        }
-      )
-      .catch(window.store.onError)
+  checkCache = async () => {
+    if (this.DownloadCache?.length > 0) {
+      return fs.write(this.downloadFd, new Uint8Array(this.DownloadCache))
+    }
   }
 
-  beforeZmodemUpload = (file, files) => {
-    if (!files.length) {
-      return false
+  onZmodemDownload = async payload => {
+    if (this.onCanceling || !this.downloadFd) {
+      return
     }
-    // const f = files[0]
-    // if (f.size > maxZmodemUploadSize) {
-    //   if (this.zsession) {
-    //     this.zsession.abort()
-    //   }
-    //   this.onZmodemEnd()
-    //   // if (this.props.tab.enableSftp) {
-    //   //   notification.info({
-    //   //     message: `Uploading by sftp`,
-    //   //     duration: 8
-    //   //   })
-    //   //   return this.transferBySftp(files)
-    //   // } else {
-    //   const url = 'https://github.com/FGasper/zmodemjs/issues/11'
-    //   const msg = (
-    //     <div>
-    //       <p>Currently <b>rz</b> only support upload file size less than {filesize(maxZmodemUploadSize)}, due to known issue:</p>
-    //       <p><Link to={url}>{url}</Link></p>
-    //       <p>You can try upload in sftp which is much faster.</p>
-    //     </div>
+    // if (!this.DownloadCache) {
+    //   this.DownloadCache = []
+    // }
+    // this.DownloadCache = this.DownloadCache.concat(payload)
+    // this.downloadCount += payload.length
+    // if (this.DownloadCache.length < zmodemTransferPackSize) {
+    //   return this.updateZmodemProgress(
+    //     this.downloadCount,
+    //     this.downloadPath,
+    //     this.downloadSize,
+    //     transferTypeMap.download
     //   )
-    //   notification.error({
-    //     message: msg,
-    //     duration: 8
-    //   })
-    //   // }
     // }
-    const th = this
-    Zmodem.Browser.send_files(
-      this.zsession,
-      files, {
-        on_offer_response (obj, xfer) {
-          if (xfer) {
-            th.updateProgress(xfer, transferTypeMap.upload)
-          }
-        },
-        on_progress (obj, xfer) {
-          th.updateProgress(xfer, transferTypeMap.upload)
-        }
-      }
+    // this.writeCache = this.DownloadCache
+    // this.DownloadCache = []
+    this.downloadCount += payload.length
+    await fs.write(this.downloadFd, new Uint8Array(payload))
+    this.updateZmodemProgress(
+      this.downloadCount,
+      this.downloadPath,
+      this.downloadSize,
+      transferTypeMap.download
     )
-      .then(th.onZmodemEndSend)
-      .catch(th.onZmodemCatch)
+  }
 
-    return false
+  updateZmodemProgress = throttle((start, name, size, type) => {
+    this.zmodemTransfer = {
+      type,
+      start,
+      name,
+      size
+    }
+    this.writeZmodemProgress()
+  }, 500)
+
+  finishZmodemTransfer = () => {
+    this.zmodemTransfer = {
+      ...this.zmodemTransfer,
+      start: this.zmodemTransfer.size
+    }
+    this.writeZmodemProgress()
   }
 
-  onSendZmodemSession = () => {
-    this.setState(() => {
-      return {
-        zmodemTransfer: {
-          type: transferTypeMap.upload
-        }
+  writeZmodemProgress = () => {
+    if (this.onCanceling) {
+      return
+    }
+    const {
+      size, start, name
+    } = this.zmodemTransfer
+    const speed = size > 0 ? formatBytes(start * 1000 / 1024 / (Date.now() - this.zmodemStartTime)) : 0
+    const percent = size > 0 ? Math.floor(start * 100 / size) : 100
+    const str = `\x1b[32m${name}\x1b[0m::${percent}%,${start}/${size},${speed}/s`
+    this.term.write('\r\n\x1b[2A' + str + '\n')
+  }
+
+  zmodemTransferFile = async (file, filesRemaining, sizeRemaining) => {
+    const offer = {
+      obj: file,
+      name: file.name,
+      size: file.size,
+      files_remaining: filesRemaining,
+      bytes_remaining: sizeRemaining
+    }
+    const xfer = await this.zsession.send_offer(offer)
+    if (!xfer) {
+      this.onZmodemEnd()
+      return window.store.onError(new Error('Transfer cancelled, maybe file already exists'))
+    }
+    this.zmodemStartTime = Date.now()
+    const fd = await fs.open(file.filePath, 'r')
+    let start = 0
+    const { size } = file
+    let inited = false
+    while (start < size || !inited) {
+      const rest = size - start
+      const len = rest > zmodemTransferPackSize ? zmodemTransferPackSize : rest
+      const buffer = new Uint8Array(len)
+      const newArr = await fs.read(fd, buffer, 0, len, null)
+      const n = newArr.length
+      await xfer.send(newArr)
+      start = start + n
+      inited = true
+      this.updateZmodemProgress(start, file.name, size, transferTypeMap.upload)
+      if (n < zmodemTransferPackSize || start >= file.size || this.onCanceling) {
+        break
       }
+    }
+    await fs.close(fd)
+    this.finishZmodemTransfer()
+    await xfer.end()
+  }
+
+  openFileSelect = async () => {
+    const properties = [
+      'openFile',
+      'multiSelections',
+      'showHiddenFiles',
+      'noResolveAliases',
+      'treatPackageAsDirectory',
+      'dontAddToRecent'
+    ]
+    const files = await window.api.openDialog({
+      title: 'Choose some files to send',
+      message: 'Choose some files to send',
+      properties
     })
+    if (!files || !files.length) {
+      return this.onZmodemEnd()
+    }
+    const r = []
+    for (const filePath of files) {
+      const stat = await getLocalFileInfo(filePath)
+      r.push({ ...stat, filePath })
+    }
+    return r
+  }
+
+  openSaveFolderSelect = async () => {
+    const savePaths = await window.api.openDialog({
+      title: 'Choose a folder to save file(s)',
+      message: 'Choose a folder to save file(s)',
+      properties: [
+        'openDirectory',
+        'showHiddenFiles',
+        'createDirectory',
+        'noResolveAliases',
+        'treatPackageAsDirectory',
+        'dontAddToRecent'
+      ]
+    })
+    if (!savePaths || !savePaths.length) {
+      return false
+    }
+    return savePaths[0]
   }
 
-  cancelZmodem = () => {
-    this.onZmodemEndSend()
+  beforeZmodemUpload = async (files) => {
+    if (!files || !files.length) {
+      return false
+    }
+    this.writeBanner('SEND')
+    let filesRemaining = files.length
+    let sizeRemaining = files.reduce((a, b) => a + b.size, 0)
+    for (const f of files) {
+      await this.zmodemTransferFile(f, filesRemaining, sizeRemaining)
+      filesRemaining = filesRemaining - 1
+      sizeRemaining = sizeRemaining - f.size
+    }
+    this.onZmodemEnd()
   }
 
-  onZmodemEndSend = () => {
-    this.zsession && this.zsession.close && this.zsession.close()
-    this.onZmodemEnd()
+  onSendZmodemSession = async () => {
+    this.term.write('\r\n\x1b[2A\n')
+    const files = await this.openFileSelect()
+    this.beforeZmodemUpload(files)
   }
 
-  onZmodemEnd = () => {
-    delete this.onZmodem
+  onZmodemEnd = async () => {
+    delete this.zmodemSavePath
     this.onCanceling = true
-    this.attachAddon = new AttachAddon(
-      this.socket,
-      undefined,
-      this.props.tab.encode,
-      isWin && !this.isRemote()
-    )
-    if (this.decoder) {
-      this.attachAddon.decoder = this.decode
+    if (this.downloadFd) {
+      await fs.close(this.downloadFd)
     }
-    this.term.loadAddon(this.attachAddon)
-    this.setState(() => {
-      return {
-        zmodemTransfer: null
-      }
-    })
+    if (this.xfer && this.xfer.end) {
+      await this.xfer.end().catch(
+        console.error
+      )
+    }
+    delete this.xfer
+    if (this.zsession && this.zsession.close) {
+      await this.zsession.close().catch(
+        console.error
+      )
+    }
+    delete this.zsession
     this.term.focus()
     this.term.write('\r\n')
+    delete this.downloadFd
+    delete this.downloadPath
+    delete this.downloadCount
+    delete this.downloadSize
+    delete this.DownloadCache
   }
 
   onZmodemCatch = (e) => {
@@ -575,7 +702,6 @@ class Term extends Component {
 
   onZmodemDetect = detection => {
     this.onCanceling = false
-    this.attachAddon.dispose()
     this.term.blur()
     this.onZmodem = true
     const zsession = detection.confirm()
@@ -1055,9 +1181,7 @@ class Term extends Component {
       this.zmodemAddon = new AddonZmodem()
       this.fitAddon.fit()
       term.loadAddon(this.zmodemAddon)
-      term.zmodemAttach(this.socket, {
-        noTerminalWriteOutsideSession: true
-      }, this)
+      term.zmodemAttach(this)
     }
     term.displayRaw = displayRaw
     term.loadAddon(
@@ -1085,7 +1209,7 @@ class Term extends Component {
 
   onerrorSocket = err => {
     this.setStatus(statusMap.error)
-    log.warning('onerrorSocket', err)
+    log.error('onerrorSocket', err)
   }
 
   oncloseSocket = () => {
@@ -1184,7 +1308,7 @@ class Term extends Component {
   }
 
   render () {
-    const { id, loading, zmodemTransfer } = this.state
+    const { id, loading } = this.state
     const { height, width, left, top, position, id: pid, activeSplitId } = this.props
     const cls = classnames('term-wrap', {
       'not-first-term': !!position
@@ -1242,11 +1366,6 @@ class Term extends Component {
             close={this.closeNormalBuffer}
           />
         </div>
-        <ZmodemTransfer
-          zmodemTransfer={zmodemTransfer}
-          cancelZmodem={this.cancelZmodem}
-          beforeZmodemUpload={this.beforeZmodemUpload}
-        />
         <Spin className='loading-wrapper' spinning={loading} />
       </div>
     )

package/client/components/terminal/xterm-zmodem.js

@@ -1,48 +1,55 @@
 import zmodem from 'zmodem.js/src/zmodem_browser'
 
-function zmodemAttach (ws, opts, ctx) {
-  if (opts === undefined) { opts = {} }
-  const term = this
-  const senderFunc = function (octets) { return ws.send(new Uint8Array(octets)) }
-  let zsentry = null
-  function shouldWrite () {
-    return !!zsentry.get_confirmed_session() || !opts.noTerminalWriteOutsideSession
+export class AddonZmodem {
+  _disposables = []
+
+  activate (terminal) {
+    terminal.zmodemAttach = this.zmodemAttach.bind(this)
   }
-  zsentry = new zmodem.Sentry({
-    to_terminal: function (octets) {
-      if (shouldWrite()) {
-        term.write(String.fromCharCode.apply(String, octets))
-      }
-    },
-    sender: senderFunc,
-    on_retract: ctx.onzmodemRetract,
-    on_detect: ctx.onZmodemDetect
-  })
-  function handleWSMessage (evt) {
-    if (typeof evt.data === 'string') {
-      if (shouldWrite()) {
-        term.write(evt.data)
-      }
+
+  sendWebSocket (octets) {
+    const { socket } = this
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      return socket.send(new Uint8Array(octets))
     } else {
-      zsentry.consume(evt.data)
+      console.error('WebSocket is not open')
     }
   }
-  ws.binaryType = 'arraybuffer'
-  ws.addEventListener('message', handleWSMessage)
-}
 
-export class AddonZmodem {
-  _disposables = []
+  zmodemAttach (ctx) {
+    this.socket = ctx.socket
+    this.term = ctx.term
+    this.ctx = ctx
+    this.zsentry = new zmodem.Sentry({
+      to_terminal: (octets) => {
+        if (ctx.onZmodem) {
+          this.term.write(String.fromCharCode.apply(String, octets))
+        }
+      },
+      sender: this.sendWebSocket.bind(this),
+      on_retract: ctx.onzmodemRetract,
+      on_detect: ctx.onZmodemDetect
+    })
+    this.socket.binaryType = 'arraybuffer'
+    this.socket.addEventListener('message', this.handleWSMessage.bind(this))
+  }
 
-  activate (terminal) {
-    terminal.zmodemAttach = zmodemAttach
-    terminal.zmodemBrowser = zmodem.Browser
+  handleWSMessage (evt) {
+    if (typeof evt.data === 'string') {
+      if (this.ctx.onZmodem) {
+        this.term.write(evt.data)
+      }
+    } else {
+      this.zsentry.consume(evt.data)
+    }
   }
 
   dispose () {
+    this.socket && this.socket.removeEventListener('message', this.handleWSMessage)
     this._disposables.forEach(d => d.dispose())
     this._disposables.length = 0
+    this.term = null
+    this.zsentry = null
+    this.socket = null
   }
 }
-
-export const Zmodem = zmodem

package/client/store/index.js

@@ -216,7 +216,6 @@ class Store {
       store
     } = window
     return store.showModal ||
-      store.termSearchOpen ||
       store.showInfoModal ||
       store.showEditor ||
       store.showFileModal
@@ -226,10 +225,6 @@ class Store {
     return 0
   }
 
-  get tabsHeight () {
-    return 45 // window.store.config.useSystemTitleBar ? 45 : 56
-  }
-
   get langs () {
     return JSON.parse(window.store._langs)
   }

package/client/store/init-state.js

@@ -187,6 +187,7 @@ export default () => {
     height: 500,
     isMaximized: window.pre.runSync('isMaximized'),
     terminalFullScreen: false,
-    hideDelKeyTip: ls.getItem(dismissDelKeyTipLsKey) === 'y'
+    hideDelKeyTip: ls.getItem(dismissDelKeyTipLsKey) === 'y',
+    tabsHeight: 36
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.37.128",
+  "version": "1.38.6",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",

package/client/components/terminal/zmodem-transfer.jsx

@@ -1,98 +0,0 @@
-/**
- * zmodem transfer UI module
- * then run rz to send from your browser or
- * sz <file> to send from the remote peer.
- */
-
-import { memo } from 'react'
-import { Progress, Button, Upload, Tag } from 'antd'
-import { transferTypeMap } from '../../common/constants'
-import Link from '../common/external-link'
-import './zmodem.styl'
-
-const { prefix } = window
-const s = prefix('sftp')
-const c = prefix('common')
-
-export default memo((props) => {
-  const { zmodemTransfer, cancelZmodem, beforeZmodemUpload } = props
-  if (!zmodemTransfer) {
-    return null
-  }
-  const {
-    fileInfo,
-    type,
-    transferedSize,
-    percent
-    // options
-  } = zmodemTransfer
-  let btn = null
-  let progress = null
-  const recm = (
-    <Tag color='success'>
-      <div className='pd1y'>
-        <b className='mg1r'>Recommend Use trzsz instead:</b>
-        <Link to='https://github.com/trzsz/trzsz'>https://github.com/trzsz/trzsz</Link>
-      </div>
-    </Tag>
-  )
-  const cancelBtn = (
-    <Button
-      type='danger'
-      className='iblock mg2l'
-      onClick={cancelZmodem}
-    >{c('cancel')}
-    </Button>
-  )
-  if (type === transferTypeMap.upload) {
-    btn = (
-      <div className={fileInfo ? 'hide' : 'mg2b'}>
-        <div className='iblock'>
-          <Upload
-            showUploadList={false}
-            beforeUpload={beforeZmodemUpload}
-            className={fileInfo ? 'hide' : 'iblock'}
-          >
-            <Button>
-              {s(type)}
-            </Button>
-          </Upload>
-        </div>
-        {cancelBtn}
-      </div>
-    )
-  }
-  if (fileInfo) {
-    const {
-      size,
-      name
-    } = fileInfo
-    progress = (
-      <div className='pd1b'>
-        <Progress
-          percent={percent}
-          size='small'
-          status='active'
-          format={() => {
-            return `%${percent}(${transferedSize}/${size})`
-          }}
-        />
-        <h2 className='pd2y'>
-          <span className='iblock'>
-            {s(type)}: {name}
-          </span>
-        </h2>
-        <h4 className='pd2t pd2x'>Upload file(❯1M) may not show progress and may not end properly, but still would finish uploading in background.</h4>
-      </div>
-    )
-  }
-  return (
-    <div className='zmodem-transfer'>
-      <div className='zmodem-transfer-inner'>
-        {btn}
-        {progress}
-        {recm}
-      </div>
-    </div>
-  )
-})