@electerm/electerm-react 1.80.18 → 1.90.8

package/client/components/session/session.jsx

@@ -21,7 +21,6 @@ import {
   Splitter
 } from 'antd'
 import { pick } from 'lodash-es'
-import generate from '../../common/uid'
 import copy from 'json-deep-copy'
 import classnames from 'classnames'
 import {
@@ -30,7 +29,8 @@ import {
   terminalRdpType,
   terminalVncType,
   terminalWebType,
-  terminalTelnetType
+  terminalTelnetType,
+  terminalFtpType
 } from '../../common/constants'
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
@@ -50,7 +50,6 @@ export default class SessionWrapper extends Component {
       key: Math.random(),
       splitSize: [50, 50],
       sessionOptions: null,
-      sessionId: generate(),
       delKeyPressed: false,
       broadcastInput: false
     }
@@ -60,11 +59,6 @@ export default class SessionWrapper extends Component {
   minWithForSplit = 640
   minHeightForSplit = 400
 
-  componentDidMount () {
-    this.updateTab()
-    // this.initEvent()
-  }
-
   componentWillUnmount () {
     clearTimeout(this.backspaceKeyPressedTimer)
   }
@@ -244,14 +238,6 @@ export default class SessionWrapper extends Component {
     this.editTab(update)
   }
 
-  updateTab = () => {
-    this.editTab(
-      {
-        sessionId: this.state.sessionId
-      }
-    )
-  }
-
   computePosition = (index) => {
     return {
       left: 0,
@@ -266,7 +252,6 @@ export default class SessionWrapper extends Component {
   renderTerminals = () => {
     const {
       sessionOptions,
-      sessionId,
       sftpPathFollowSsh,
       broadcastInput
     } = this.state
@@ -292,7 +277,6 @@ export default class SessionWrapper extends Component {
     if (type === terminalRdpType || type === terminalVncType) {
       const rdpProps = {
         tab: this.props.tab,
-        sessionId,
         ...pick(this.props, [
           'resolutions',
           'height',
@@ -319,6 +303,7 @@ export default class SessionWrapper extends Component {
           />
         )
       }
+
       return (
         <RdpSession
           {...rdpProps}
@@ -326,6 +311,22 @@ export default class SessionWrapper extends Component {
       )
     }
 
+    if (type === terminalFtpType) {
+      const ftpProps = {
+        ...this.props,
+        ...pick(this, [
+          'onChangePane',
+          'setCwd'
+        ]),
+        isFtp: true
+      }
+      return (
+        <Sftp
+          {...ftpProps}
+        />
+      )
+    }
+
     const cls = pane === paneMap.terminal ||
       (sshSftpSplitView && this.canSplitView())
       ? 'terms-box'
@@ -363,7 +364,6 @@ export default class SessionWrapper extends Component {
       >
         <Term
           logName={logName}
-          sessionId={sessionId}
           sessionOptions={sessionOptions}
           {...pops}
         />
@@ -376,7 +376,8 @@ export default class SessionWrapper extends Component {
     return type === terminalRdpType ||
       type === terminalVncType ||
       type === terminalWebType ||
-      type === terminalTelnetType
+      type === terminalTelnetType ||
+      type === terminalFtpType
   }
 
   calcSftpWidthHeight = () => {
@@ -424,7 +425,6 @@ export default class SessionWrapper extends Component {
   renderSftp = () => {
     const {
       sessionOptions,
-      sessionId,
       enableSftp,
       sftpPathFollowSsh,
       cwd
@@ -452,7 +452,6 @@ export default class SessionWrapper extends Component {
       enableSftp,
       sessionOptions,
       height,
-      sessionId,
       pane,
       ...this.calcSftpWidthHeight()
     }

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

@@ -494,6 +494,7 @@ export default class SettingTerminal extends Component {
         <Link to={regexHelpLink}>wiki</Link>
       </div>
     )
+    const startDirectoryLocalTxt = `${e('startDirectory')}:${e('local')}`
     return (
       <div className='form-wrap pd1y pd2x'>
         <div className='pd1y font16 bold'>
@@ -559,6 +560,10 @@ export default class SettingTerminal extends Component {
         </div>
         <div className='pd1b'>{e('terminalBackgroundImage')}</div>
         <TerminalBackgroundConfig {...bgProps} />
+        <div className='pd1b'>{startDirectoryLocalTxt}</div>
+        {
+          this.renderText('startDirectoryLocal', startDirectoryLocalTxt)
+        }
         <div className='pd1b'>{e('terminalWordSeparator')}</div>
         {
           this.renderText('terminalWordSeparator', e('terminalWordSeparator'))

package/client/components/sftp/address-bar.jsx

@@ -4,7 +4,8 @@ import {
   EyeFilled,
   ReloadOutlined,
   ArrowRightOutlined,
-  LoadingOutlined
+  LoadingOutlined,
+  HomeOutlined
 } from '@ant-design/icons'
 import {
   Input,
@@ -55,6 +56,10 @@ function renderAddonBefore (props, realPath) {
           className='mg1r'
         />
       </Tooltip>
+      <HomeOutlined
+        onClick={() => props.gotoHome(type)}
+        className='mg1r'
+      />
       <KeywordFilter {...keywordProps} />
       <AddrBookmark
         store={window.store}

package/client/components/sftp/file-info-modal.jsx

@@ -28,7 +28,6 @@ export default class FileMode extends React.PureComponent {
     loading: false,
     tab: null,
     pid: '',
-    sessionId: '',
     size: 0,
     file: {},
     editPermission: false
@@ -128,7 +127,6 @@ export default class FileMode extends React.PureComponent {
     const cmd = `du -sh '${folder}'`
     const r = await runCmd(
       this.state.pid,
-      this.state.sessionId,
       cmd
     ).catch(window.store.onError)
     return r ? r.split(/\s+/)[0] : 0

package/client/components/sftp/file-item.jsx

@@ -6,7 +6,8 @@ import React from 'react'
 import ExtIcon from './file-icon'
 import {
   FolderOutlined,
-  FileOutlined
+  FileOutlined,
+  ArrowRightOutlined
 } from '@ant-design/icons'
 import classnames from 'classnames'
 import copy from 'json-deep-copy'
@@ -397,7 +398,6 @@ export default class FileSection extends React.Component {
       tab: this.props.tab,
       visible: true,
       pid: this.props.pid,
-      sessionId: this.props.sessionId,
       uidTree: this.props[`${type}UidTree`],
       gidTree: this.props[`${type}GidTree`]
     })
@@ -883,27 +883,55 @@ export default class FileSection extends React.Component {
     return !isWin
   }
 
+  handleContextMenuCapture = (e) => {
+    this.contextMenuPosition = {
+      clientY: e.clientY
+    }
+  }
+
+  itemToMenuFormat = (r) => {
+    const { func, text, disabled, icon, subText, requireConfirm } = r
+    const IconCom = iconsMap[icon]
+    return {
+      key: func,
+      label: text,
+      disabled,
+      icon: <IconCom />,
+      extra: subText,
+      danger: requireConfirm
+    }
+  }
+
   renderContextMenu = () => {
-    return this.renderContextItems()
-      .map(r => {
-        const {
-          func,
-          text,
-          disabled,
-          icon,
-          subText,
-          requireConfirm
-        } = r
-        const IconCom = iconsMap[icon]
-        return {
-          key: func,
-          label: text,
-          disabled,
-          icon: <IconCom />,
-          extra: subText,
-          danger: requireConfirm
+    const items = this.renderContextItems()
+
+    // Check if we need to split the menu
+    if (this.contextMenuPosition) {
+      const windowHeight = window.innerHeight
+      const { clientY } = this.contextMenuPosition
+      const estimatedMenuHeight = items.length * 32 // Approximate height per menu item
+      const availableHeight = windowHeight - clientY
+
+      // If menu would extend beyond window, split into two parts
+      if (estimatedMenuHeight > availableHeight && items.length > 6) {
+        const firstHalf = items.slice(0, Math.ceil(items.length / 2))
+        const secondHalf = items.slice(Math.ceil(items.length / 2))
+
+        // Create "More..." submenu with second half of items
+        const moreSubmenu = {
+          key: 'more-submenu',
+          label: '…',
+          icon: <ArrowRightOutlined />,
+          children: secondHalf.map(this.itemToMenuFormat)
         }
-      })
+
+        // Return first half + "More..." submenu
+        return [...firstHalf.map(this.itemToMenuFormat), moreSubmenu]
+      }
+    }
+
+    // Otherwise return normal menu
+    return items.map(this.itemToMenuFormat)
   }
 
   renderContextItems () {
@@ -957,7 +985,8 @@ export default class FileSection extends React.Component {
       (
         (hasHost && enableSsh !== false && isRemote) ||
         (isLocal && !hasHost)
-      )
+      ) &&
+      !this.props.isFtp
     ) {
       res.push({
         func: 'gotoFolderInTerminal',
@@ -1055,7 +1084,10 @@ export default class FileSection extends React.Component {
       icon: 'ReloadOutlined',
       text: e('refresh')
     })
-    if (this.showModeEdit(type, isRealFile)) {
+    if (
+      this.showModeEdit(type, isRealFile) &&
+      !this.props.isFtp
+    ) {
       res.push({
         func: 'editPermission',
         icon: 'LockOutlined',
@@ -1073,7 +1105,10 @@ export default class FileSection extends React.Component {
   }
 
   onContextMenu = ({ key }) => {
-    this[key]()
+    // If it's not the submenu itself
+    if (key !== 'more-submenu') {
+      this[key]()
+    }
   }
 
   renderEditing (file) {
@@ -1207,6 +1242,7 @@ export default class FileSection extends React.Component {
         <div
           ref={this.domRef}
           {...props}
+          onContextMenu={this.handleContextMenuCapture}
         >
           <div className='file-bg' />
           <div className='file-props-div'>

package/client/components/sftp/owner-list.js

@@ -27,8 +27,8 @@ function parseNames (str) {
 const linuxListUser = 'cat /etc/passwd'
 const linuxListGroup = 'cat /etc/group'
 
-export async function remoteListUsers (pid, sessionId) {
-  const users = await runCmd(pid, sessionId, linuxListUser)
+export async function remoteListUsers (pid) {
+  const users = await runCmd(pid, linuxListUser)
     .catch(log.error)
   if (users) {
     return parseNames(users)
@@ -36,8 +36,8 @@ export async function remoteListUsers (pid, sessionId) {
   return {}
 }
 
-export async function remoteListGroups (pid, sessionId) {
-  const groups = await runCmd(pid, sessionId, linuxListGroup)
+export async function remoteListGroups (pid) {
+  const groups = await runCmd(pid, linuxListGroup)
     .catch(log.error)
   if (groups) {
     return parseNames(groups)

package/client/components/sftp/sftp-entry.jsx

@@ -15,6 +15,7 @@ import {
   typeMap, maxSftpHistory, paneMap,
   fileTypeMap,
   terminalSerialType,
+  terminalFtpType,
   unexpectedPacketErrorDesc,
   sftpRetryInterval
 } from '../../common/constants'
@@ -48,10 +49,12 @@ export default class Sftp extends Component {
   }
 
   componentDidMount () {
-    this.id = 'sftp-' + this.props.sessionId
-    this.tid = 'sftp-' + this.props.tab.id
+    this.id = 'sftp-' + this.props.tab.id
     refs.add(this.id, this)
-    refs.add(this.tid, this)
+    if (this.props.isFtp) {
+      this.type = 'ftp'
+      this.initData()
+    }
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -89,11 +92,12 @@ export default class Sftp extends Component {
 
   componentWillUnmount () {
     refs.remove(this.id)
-    refs.remove(this.tid)
     this.sftp && this.sftp.destroy()
     this.sftp = null
     clearTimeout(this.timer4)
     this.timer4 = null
+    clearTimeout(this.timer5)
+    this.timer5 = null
   }
 
   directions = [
@@ -112,15 +116,15 @@ export default class Sftp extends Component {
         [`sortProp.${k}`]: window.store.sftpSortSetting[k].prop,
         [`sortDirection.${k}`]: window.store.sftpSortSetting[k].direction,
         [k]: [],
-        [`${k}FileTree`]: {},
+        [`${k}FileTree`]: new Map(),
         [`${k}Loading`]: false,
         [`${k}InputFocus`]: false,
         [`${k}ShowHiddenFile`]: def,
         [`${k}Path`]: '',
         [`${k}PathTemp`]: '',
         [`${k}PathHistory`]: [],
-        [`${k}GidTree`]: {},
-        [`${k}UidTree`]: {},
+        [`${k}GidTree`]: new Map(),
+        [`${k}UidTree`]: new Map(),
         [`${k}Keyword`]: ''
       })
       return prev
@@ -170,9 +174,11 @@ export default class Sftp extends Component {
   }, isEqual)
 
   isActive () {
-    return this.props.currentBatchTabId === this.props.tab.id &&
-      (this.props.pane === paneMap.fileManager ||
-      this.props.sshSftpSplitView)
+    const { currentBatchTabId, pane, sshSftpSplitView } = this.props
+    const { tab } = this.props
+    const isFtp = tab.type === terminalFtpType
+
+    return (currentBatchTabId === tab.id && (pane === paneMap.fileManager || sshSftpSplitView)) || isFtp
   }
 
   updateKeyword = (keyword, type) => {
@@ -191,6 +197,26 @@ export default class Sftp extends Component {
     }
   }
 
+  gotoHome = async (type) => {
+    const n = `${type}Path`
+    const nt = n + 'Temp'
+    let path
+
+    if (type === typeMap.remote) {
+      path = this.props.tab.startDirectoryRemote
+      if (!path && this.sftp) {
+        path = await this.getPwd(this.props.tab.username)
+      }
+    } else {
+      path = this.getLocalHome()
+    }
+
+    this.setState({
+      [n]: path,
+      [nt]: path
+    }, () => this[`${type}List`]())
+  }
+
   updateCwd = (cwd) => {
     if (!this.state.inited) {
       return
@@ -401,7 +427,8 @@ export default class Sftp extends Component {
     this[type + 'Dom'].onPaste()
   }
 
-  initData = () => {
+  initData = (terminalId) => {
+    this.terminalId = terminalId
     if (this.shouldRenderRemote()) {
       this.initRemoteAll()
     }
@@ -502,12 +529,10 @@ export default class Sftp extends Component {
 
   remoteListOwner = async () => {
     const remoteUidTree = await owner.remoteListUsers(
-      this.props.pid,
-      this.props.sessionId
+      this.props.pid
     )
     const remoteGidTree = await owner.remoteListGroups(
-      this.props.pid,
-      this.props.sessionId
+      this.props.pid
     )
     this.setState({
       remoteGidTree,
@@ -549,7 +574,7 @@ export default class Sftp extends Component {
     remotePathReal,
     oldPath
   ) => {
-    const { tab, sessionOptions, sessionId } = this.props
+    const { tab, sessionOptions } = this.props
     const { username, startDirectory } = tab
     let remotePath
     const noPathInit = remotePathReal || this.state.remotePath
@@ -567,7 +592,7 @@ export default class Sftp extends Component {
     let sftp = this.sftp
     try {
       if (!this.sftp) {
-        sftp = await Client(sessionId)
+        sftp = await Client(this.terminalId, this.type)
         if (!sftp) {
           return
         }
@@ -580,7 +605,7 @@ export default class Sftp extends Component {
         const opts = deepCopy({
           ...tab,
           readyTimeout: config.sshReadyTimeout,
-          sessionId,
+          terminalId: this.terminalId,
           keepaliveInterval: config.keepaliveInterval,
           proxy: getProxy(tab, config),
           ...sessionOptions
@@ -649,11 +674,21 @@ export default class Sftp extends Component {
         ]).slice(0, maxSftpHistory)
       }
       this.setState(update, () => {
-        this.updateRemoteList(remote, remotePath, sftp)
+        if (this.type !== 'ftp') {
+          this.updateRemoteList(remote, remotePath, sftp)
+        }
         this.props.editTab(tab.id, {
           sftpCreated: true
         })
       })
+      this.timer5 = setTimeout(() => {
+        if (this.type !== 'ftp') {
+          this.updateRemoteList(remote, remotePath, sftp)
+        }
+        this.props.editTab(tab.id, {
+          sftpCreated: true
+        })
+      }, 1000)
     } catch (e) {
       const update = {
         remoteLoading: false,
@@ -716,6 +751,12 @@ export default class Sftp extends Component {
     this.setState(update)
   }
 
+  getLocalHome = () => {
+    return this.props.tab.startDirectoryLocal ||
+    this.props.config.startDirectoryLocal ||
+    window.pre.homeOrTmp
+  }
+
   localList = async (returnList = false, localPathReal, oldPath) => {
     if (!fs) return
     if (!returnList) {
@@ -730,8 +771,7 @@ export default class Sftp extends Component {
       const noPathInit = localPathReal || this.state.localPath
       const localPath = noPathInit ||
         this.getCwdLocal() ||
-        this.props.tab.startDirectoryLocal ||
-        window.pre.homeOrTmp
+        this.getLocalHome()
       const locals = await fs.readdirAsync(localPath)
       const local = []
       for (const name of locals) {
@@ -1015,6 +1055,7 @@ export default class Sftp extends Component {
         [
           'onChange',
           'onGoto',
+          'gotoHome',
           'onInputFocus',
           'onInputBlur',
           'toggleShowHiddenFile',

package/client/components/sftp/transfer-common.js

@@ -3,7 +3,6 @@ import createTitle from '../../common/create-title'
 export function createTransferProps (props) {
   return {
     title: createTitle(props.tab, false),
-    tabId: props.tab.id,
-    sessionId: props.sessionId
+    tabId: props.tab.id
   }
 }

package/client/components/sidebar/transfer-list-control.jsx

@@ -37,15 +37,15 @@ export default class TransferModalUI extends Component {
       const {
         id,
         title,
-        sessionId
+        tabId
       } = k
-      if (!p[sessionId]) {
-        p[sessionId] = {
+      if (!p[tabId]) {
+        p[tabId] = {
           title,
           transfers: []
         }
       }
-      p[sessionId].transfers.push(id)
+      p[tabId].transfers.push(id)
       return p
     }, {})
     return Object.keys(tree)
@@ -72,7 +72,7 @@ export default class TransferModalUI extends Component {
     const fileTransfers = this.props.fileTransfers
     return filter === 'all'
       ? fileTransfers
-      : fileTransfers.filter(d => d.sessionId === filter)
+      : fileTransfers.filter(d => d.tabId === filter)
   }
 
   computePercent = () => {

package/client/components/terminal/terminal-apis.js

@@ -11,37 +11,33 @@ export function createTerm (body) {
   })
 }
 
-export function runCmd (pid, sessionId, cmd) {
+export function runCmd (pid, cmd) {
   return fetch({
     pid,
-    sessionId,
     cmd,
     action: 'run-cmd'
   })
 }
 
-export function resizeTerm (pid, sessionId, cols, rows) {
+export function resizeTerm (pid, cols, rows) {
   return fetch({
     pid,
-    sessionId,
     cols,
     rows,
     action: 'resize-terminal'
   })
 }
 
-export function toggleTerminalLog (pid, sessionId) {
+export function toggleTerminalLog (pid) {
   return fetch({
     pid,
-    sessionId,
     action: 'toggle-terminal-log'
   })
 }
 
-export function toggleTerminalLogTimestamp (pid, sessionId) {
+export function toggleTerminalLogTimestamp (pid) {
   return fetch({
     pid,
-    sessionId,
     action: 'toggle-terminal-log-timestamp'
   })
 }

package/client/components/terminal/terminal.jsx

@@ -336,7 +336,6 @@ clear\r`
       try {
         const fileData = JSON.parse(fromFile)
         const filePath = resolve(fileData.path, fileData.name)
-        console.log('filePath', filePath)
         if (this.isUnsafeFilename(filePath)) {
           message.error(notSafeMsg)
           return
@@ -1078,11 +1077,10 @@ clear\r`
         host,
         port,
         tokenElecterm,
-        id,
-        this.props.sessionId
+        id
       )
     }
-    return `ws://${host}:${port}/terminals/${id}?sessionId=${this.props.sessionId}&token=${tokenElecterm}`
+    return `ws://${host}:${port}/terminals/${id}?token=${tokenElecterm}`
   }
 
   remoteInit = async (term = this.term) => {
@@ -1094,7 +1092,7 @@ clear\r`
     const {
       keywords = []
     } = config
-    const { sessionId, logName } = this.props
+    const { logName } = this.props
     const tab = window.store.applyProfileToTabs(deepCopy(this.props.tab || {}))
     const {
       srcId, from = 'bookmarks',
@@ -1128,7 +1126,6 @@ clear\r`
         'debug'
       ]),
       keepaliveInterval: tab.keepaliveInterval === undefined ? config.keepaliveInterval : tab.keepaliveInterval,
-      sessionId,
       tabId: id,
       uid: id,
       srcTabId: tab.id,
@@ -1159,7 +1156,7 @@ clear\r`
       return
     }
     this.setStatus(statusMap.success)
-    refs.get('sftp-' + id)?.initData()
+    refs.get('sftp-' + id)?.initData(id)
     term.pid = id
     this.pid = id
     const wsUrl = this.buildWsUrl()
@@ -1300,7 +1297,7 @@ clear\r`
 
   onResizeTerminal = size => {
     const { cols, rows } = size
-    resizeTerm(this.pid, this.props.sessionId, cols, rows)
+    resizeTerm(this.pid, cols, rows)
   }
 
   handleCancel = () => {
@@ -1309,12 +1306,11 @@ clear\r`
   }
 
   handleShowInfo = () => {
-    const { sessionId, logName, tab } = this.props
+    const { logName, tab } = this.props
     const infoProps = {
       logName,
       id: tab.id,
       pid: tab.id,
-      sessionId,
       isRemote: this.isRemote(),
       isActive: this.isActiveTerminal()
     }