@electerm/electerm-react 1.72.48 → 1.80.3

package/client/components/main/main.jsx

@@ -7,15 +7,15 @@ import SettingModal from '../setting-panel/setting-modal'
 import TextEditor from '../text-editor/text-editor'
 import Sidebar from '../sidebar'
 import BatchOp from '../batch-op/batch-op-entry'
-import CssOverwrite from './css-overwrite'
+import CssOverwrite from '../bg/css-overwrite'
 import UiTheme from './ui-theme'
-import CustomCss from './custom-css.jsx'
+import CustomCss from '../bg/custom-css.jsx'
 import Resolutions from '../rdp/resolution-edit'
 import TerminalInteractive from '../terminal/terminal-interactive'
-import ConfirmModalStore from '../sftp/confirm-modal-store.jsx'
-import TransferConflictStore from '../sftp/transfer-conflict-store.jsx'
+import ConfirmModalStore from '../file-transfer/conflict-resolve.jsx'
+import TransferQueue from '../file-transfer/transfer-queue'
 import TerminalCmdSuggestions from '../terminal/terminal-command-dropdown'
-import TransportsActionStore from '../sftp/transports-action-store.jsx'
+import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin } from '../../common/constants'
@@ -117,16 +117,26 @@ export default auto(function Index (props) {
   const ext1 = {
     className: cls
   }
-  const cpConf = config
-  const confsCss = Object
-    .keys((cpConf))
-    .filter(d => d.startsWith('terminalBackground'))
-    .reduce((p, k) => {
-      return {
+  const bgTabs = config.terminalBackgroundImagePath === 'index' || config.terminalBackgroundImagePath === 'randomShape'
+    ? store.getTabs()
+    : store.getTabs().filter(tab =>
+      tab.terminalBackground?.terminalBackgroundImagePath
+    )
+  const confsCss = {
+    ...Object.keys(config)
+      .filter(d => d.startsWith('terminalBackground'))
+      .reduce((p, k) => ({
         ...p,
-        [k]: cpConf[k]
+        [k]: config[k]
+      }), {}),
+    tabs: bgTabs.map(tab => {
+      return {
+        tabCount: tab.tabCount,
+        terminalBackground: tab.terminalBackground,
+        id: tab.id
       }
-    }, {})
+    })
+  }
   const themeProps = {
     themeConfig: store.getUiThemeConfig()
   }
@@ -246,7 +256,7 @@ export default auto(function Index (props) {
         <CustomCss customCss={config.customCss} />
         <TextEditor />
         <UpdateCheck
-          skipVersion={cpConf.skipVersion}
+          skipVersion={config.skipVersion}
           upgradeInfo={upgradeInfo}
           installSrc={installSrc}
         />
@@ -265,10 +275,6 @@ export default auto(function Index (props) {
         <ConfirmModalStore
           transferToConfirm={transferToConfirm}
         />
-        <TransferConflictStore
-          {...conflictStoreProps}
-          transferToConfirm={transferToConfirm}
-        />
         <TransportsActionStore
           {...conflictStoreProps}
           config={config}
@@ -286,6 +292,7 @@ export default auto(function Index (props) {
         />
         <ConnectionHoppingWarning {...warningProps} />
         <TerminalCmdSuggestions {...cmdSuggestionsProps} />
+        <TransferQueue />
       </div>
     </ConfigProvider>
   )

package/client/components/main/wrapper.styl

@@ -36,3 +36,19 @@
   .loading-data
     display none
 
+#container
+  .session-batch-active
+    .xterm-screen
+      &::before
+        font-size 30vmin
+        font-weight bold
+        color alpha(text, 0.15)
+        display flex
+        justify-content center
+        align-items center
+        position absolute
+        top 0
+        left 0
+        right 0
+        bottom 0
+        z-index -1

package/client/components/profile/profile-list.jsx

@@ -40,7 +40,7 @@ export default class ProfileList extends List {
     )
     return (
       <div
-        key={i + id}
+        key={id}
         className={cls}
         onClick={() => this.onClickItem(item)}
         data-id={id}

package/client/components/quick-commands/qm.styl

@@ -29,4 +29,7 @@
       opacity 1
 @media (max-width: 500px)
   .qm-search-input
-    width 100px
+    width 100px
+
+.item-list-unit.dragover
+  border: 1px dashed primary

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

@@ -38,12 +38,22 @@ export default class QuickCommandsList extends List {
   }
 
   handleDragStart = e => {
-    e.dataTransfer.setData('idDragged', e.target.getAttribute('data-id'))
+    const dragElement = e.target.closest('.item-list-unit')
+    if (dragElement) {
+      e.dataTransfer.setData('idDragged', dragElement.getAttribute('data-id'))
+    }
+  }
+
+  handleDragEnter = e => {
+    e.target.closest('.item-list-unit').classList.add('dragover')
+  }
+
+  handleDragLeave = e => {
+    e.target.closest('.item-list-unit').classList.remove('dragover')
   }
 
-  // adjust window.store.quickCommands array order when drop, so that the dragged item will be placed at the right position, e.target.getAttribute('data-id') would target item id, e.dataTransfer.getData('idDragged') would target dragged item id
   handleDrop = e => {
-    onDrop(e)
+    onDrop(e, '.item-list-unit')
   }
 
   renderItem = (item, i) => {
@@ -65,7 +75,7 @@ export default class QuickCommandsList extends List {
     )
     return (
       <div
-        key={i + id}
+        key={id}
         className={cls}
         onClick={() => this.onClickItem(item)}
         data-id={id}
@@ -73,6 +83,8 @@ export default class QuickCommandsList extends List {
         onDragOver={this.handleDragOver}
         onDragStart={this.handleDragStart}
         onDrop={this.handleDrop}
+        onDragEnter={this.handleDragEnter}
+        onDragLeave={this.handleDragLeave}
       >
         <div className='elli pd1y pd2x' title={name}>
           {

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

@@ -113,7 +113,7 @@ export default class ItemList extends React.PureComponent {
     const isGroup = false
     return (
       <div
-        key={i + '__' + id}
+        key={id}
         className={cls}
         onClick={() => onClickItem(item, type)}
       >

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

@@ -587,30 +587,32 @@ export default class SettingCommon extends Component {
             value={theme}
           >
             {
-              terminalThemes.map(l => {
-                const { id, name, uiThemeConfig } = l
-                const { main, text } = uiThemeConfig
-                const isDark = isColorDark(main)
-                const txt = isDark ? <MoonOutlined /> : <SunOutlined />
-                const tag = (
-                  <Tag
-                    color={main}
-                    className='mg1l'
-                    style={
-                      {
-                        color: text
+              terminalThemes
+                .filter(d => d.id && d.name && d.uiThemeConfig)
+                .map(l => {
+                  const { id, name, uiThemeConfig } = l
+                  const { main, text } = uiThemeConfig
+                  const isDark = isColorDark(main)
+                  const txt = isDark ? <MoonOutlined /> : <SunOutlined />
+                  const tag = (
+                    <Tag
+                      color={main}
+                      className='mg1l'
+                      style={
+                        {
+                          color: text
+                        }
                       }
-                    }
-                  >
-                    {txt}
-                  </Tag>
-                )
-                return (
-                  <Option key={id} value={id}>
-                    {tag} {name}
-                  </Option>
-                )
-              })
+                    >
+                      {txt}
+                    </Tag>
+                  )
+                  return (
+                    <Option key={id} value={id}>
+                      {tag} {name}
+                    </Option>
+                  )
+                })
             }
           </Select>
         </div>

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

@@ -485,7 +485,8 @@ export default class SettingTerminal extends Component {
     const bgProps = {
       onChangeValue: this.onChangeValue,
       name: 'terminalBackgroundImagePath',
-      config: this.props.config
+      config: this.props.config,
+      isGlobal: true
     }
     const tip = (
       <div>

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

@@ -16,7 +16,8 @@ const e = window.translate
 export default function TerminalBackgroundConfig ({
   onChangeValue,
   name,
-  config
+  config,
+  isGlobal = false
 }) {
   const value = config[name]
   const defaultValue = defaultSettings[name]
@@ -42,6 +43,18 @@ export default function TerminalBackgroundConfig ({
       desc: e('noTerminalBg')
     }
   ]
+  if (isGlobal) {
+    dataSource.push(
+      {
+        value: 'index',
+        desc: e('index')
+      },
+      {
+        value: 'randomShape',
+        desc: e('randomCats')
+      }
+    )
+  }
   const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
 
   function renderNumber (name, options, title = '', width = 136) {
@@ -75,7 +88,7 @@ export default function TerminalBackgroundConfig ({
   }
 
   const renderFilter = () => {
-    if (config[name] === noTerminalBgValue) return
+    if (config[name] === noTerminalBgValue || config[name] === 'index') return
 
     return (
       <div>

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

@@ -101,6 +101,9 @@ export default class FileMode extends React.PureComponent {
       file: {},
       visible: false
     })
+    if (this.state.fileId) {
+      refs.get(this.state.fileId)?.clearRef()
+    }
   }
 
   getSize = (str = '') => {

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

@@ -22,11 +22,12 @@ import wait from '../../common/wait'
 import {
   fileOperationsMap,
   isWin, transferTypeMap, typeMap,
+  paneMap,
   isMac, maxEditFileSize, ctrlOrCmd
 } from '../../common/constants'
 import findParent from '../../common/find-parent'
 import sorter from '../../common/index-sorter'
-import { getFolderFromFilePath, getLocalFileInfo, checkFolderSize } from './file-read'
+import { getFolderFromFilePath, getLocalFileInfo } from './file-read'
 import { readClipboard, copy as copyToClipboard, hasFileInClipboardText } from '../../common/clipboard'
 import fs from '../../common/fs'
 import time from '../../common/time'
@@ -51,15 +52,15 @@ export default class FileSection extends React.Component {
     super(props)
     this.state = {
       file: copy(props.file),
-      overwriteStrategy: ''
+      overwriteStrategy: '',
+      dropdownOpen: false
     }
     // Create ref
     this.domRef = React.createRef()
+    this.id = 'file-' + this.props.file.id
   }
 
   componentDidMount () {
-    this.id = 'file-' + (this.props.file?.id || generate())
-    refs.add(this.id, this)
     this.applyStyle()
   }
 
@@ -73,7 +74,6 @@ export default class FileSection extends React.Component {
   }
 
   componentWillUnmount () {
-    refsStatic.remove(this.id)
     clearTimeout(this.timer)
     this.timer = null
     this.domRef = null
@@ -81,10 +81,20 @@ export default class FileSection extends React.Component {
     this.removeFileEditEvent()
   }
 
+  clearRef = () => {
+    refs.remove(this.id)
+  }
+
   get editor () {
     return refsStatic.get('text-editor')
   }
 
+  handleDropdownOpenChange = (open) => {
+    if (open) {
+      this.forceUpdate()
+    }
+  }
+
   applyStyle = () => {
     if (!this.domRef) {
       return
@@ -511,6 +521,7 @@ export default class FileSection extends React.Component {
   }
 
   changeFileMode = async (file) => {
+    this.clearRef()
     const { permission, type, path, name } = file
     const func = type === typeMap.local
       ? fs.chmod
@@ -522,6 +533,7 @@ export default class FileSection extends React.Component {
 
   openFileModeModal = () => {
     const { type } = this.props
+    refs.add(this.id, this)
     refsStatic.get('file-modal')?.showFileModeModal(
       {
         tab: this.props.tab,
@@ -611,6 +623,7 @@ export default class FileSection extends React.Component {
   }
 
   removeFileEditEvent = () => {
+    this.clearRef()
     if (this.watchingFile) {
       window.pre.ipcOffEvent('file-change', this.onFileChange)
       window.pre.runGlobalAsync('unwatchFile', this.watchingFile)
@@ -659,15 +672,8 @@ export default class FileSection extends React.Component {
       path, name
     } = this.state.file
     const rp = resolve(path, name)
-    ;(
-      document.querySelector('.session-current .term-sftp-tabs .type-tab.terminal') ||
-      document.querySelector('.session-current .term-sftp-tabs .type-tab.ssh')
-    ).click()
-    this.timer = setTimeout(() => {
-      window.store.runQuickCommand(
-        `cd "${rp}"`
-      )
-    }, 500)
+    this.props.tab.pane = paneMap.terminal
+    refs.get('term-' + this.props.tab.id)?.cd(rp)
   }
 
   fetchEditorText = async (path, type) => {
@@ -698,6 +704,7 @@ export default class FileSection extends React.Component {
       data.file = null
       data.text = ''
     }
+    this.clearRef()
     this.editor?.setState(data)
     if (r && !noClose) {
       this.props[`${type}List`]()
@@ -705,6 +712,7 @@ export default class FileSection extends React.Component {
   }
 
   editFile = () => {
+    refs.add(this.id, this)
     this.editor?.openEditor({
       id: this.id,
       file: this.state.file
@@ -741,7 +749,7 @@ export default class FileSection extends React.Component {
     _typeTo,
     operation
   ) => {
-    const { name, path, type, isDirectory } = file
+    const { name, path, type } = file
     const isLocal = type === typeMap.local
     let typeTo = isLocal
       ? typeMap.remote
@@ -766,13 +774,6 @@ export default class FileSection extends React.Component {
       ...createTransferProps(this.props),
       operation
     }
-    if (isDirectory) {
-      const zip = await checkFolderSize(this.props, file)
-      Object.assign(obj, {
-        zip,
-        skipExpand: zip
-      })
-    }
     return [obj]
   }
 
@@ -1198,7 +1199,8 @@ export default class FileSection extends React.Component {
         items: this.renderContextMenu(),
         onClick: this.onContextMenu
       },
-      trigger: ['contextMenu']
+      trigger: ['contextMenu'],
+      onOpenChange: this.handleDropdownOpenChange
     }
     return (
       <Dropdown {...ddProps}>

package/client/components/sftp/file-read.js

@@ -4,8 +4,7 @@
 
 import generate from '../../common/uid'
 import fs from '../../common/fs'
-import { isWin, typeMap } from '../../common/constants'
-import resolve from '../../common/resolve'
+import { isWin } from '../../common/constants'
 
 export const getFileExt = fileName => {
   const sep = '.'
@@ -75,28 +74,3 @@ export const getRemoteFileInfo = async (sftp, filePath) => {
     isDirectory: stat.isDirectory
   }
 }
-
-export async function checkFolderSize (props, f) {
-  const pth = resolve(f.path, f.name)
-  const func = f.type === typeMap.remote
-    ? props.sftp
-    : window.fs
-  const {
-    size,
-    count
-  } = await func.getFolderSize(pth)
-    .catch(err => {
-      console.log('get folder size fail', err)
-      return { size: 0, count: 0 }
-    })
-  if (count === 0) {
-    return true
-  }
-  if (size >= 600) {
-    return false
-  }
-  if (size / count >= 100) {
-    return false
-  }
-  return true
-}

package/client/components/sftp/list-table-ui.jsx

@@ -250,10 +250,10 @@ export default class FileListTable extends Component {
     this.setState(this.initFromProps())
   }
 
-  renderItem = (item, i) => {
+  renderItem = (item) => {
     const { type } = this.props
     const cls = item.isParent ? 'parent-file-item' : 'real-file-item'
-    const key = i + '*f*' + item.id
+    const key = item.id
     return (
       <FileSection
         {...this.props.getFileProps(item, type)}

package/client/components/sidebar/transfer-history-modal.jsx

@@ -28,7 +28,7 @@ export default memo(function TransferHistoryModal (props) {
   const {
     clearTransferHistory
   } = window.store
-  const transferHistory = props.transferHistory.filter(d => !d.unzip)
+  const transferHistory = props.transferHistory
   const columns = [{
     title: e('startTime'),
     dataIndex: 'startTime',

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

@@ -118,7 +118,7 @@ export default class TransferModalUI extends Component {
               <Transport
                 transfer={t}
                 index={i}
-                key={id + ':tr:' + i}
+                key={id}
               />
             )
           })

package/client/components/sidebar/transport-ui.jsx

@@ -12,6 +12,7 @@ import {
 } from '@ant-design/icons'
 import { action } from 'manate'
 import { addClass, removeClass } from '../../common/class'
+import { refsStatic } from '../common/ref'
 import './transfer.styl'
 
 const e = window.translate
@@ -38,19 +39,25 @@ export default function Transporter (props) {
   const onDragCls = 'ondrag-tr'
   const onDragOverCls = 'dragover-tr'
   function moveToTop () {
-    action(function () {
-      const arr = window.store.fileTransfers
-      if (index > 0) {
-        const [item] = arr.splice(index, 1)
-        arr.unshift(item)
-      }
-    })()
+    refsStatic.get('transfer-queue')?.addToQueue(
+      'moveTop',
+      id
+    )
   }
   function cancel () {
-    window.store.cancelTransfer(id)
+    refsStatic.get('transfer-queue')?.addToQueue(
+      'delete',
+      id
+    )
   }
   function handlePauseOrResume () {
-    window.store.toggleTransfer(id)
+    refsStatic.get('transfer-queue')?.addToQueue(
+      'update',
+      id,
+      {
+        pausing: !pausing
+      }
+    )
   }
 
   function clearCls () {

package/client/components/terminal/terminal.jsx

@@ -11,7 +11,8 @@ import {
   notification,
   Spin,
   Button,
-  Dropdown
+  Dropdown,
+  message
 } from 'antd'
 import classnames from 'classnames'
 import './terminal.styl'
@@ -314,15 +315,31 @@ clear\r`
     this.term.focus()
   }
 
+  isUnsafeFilename = (filename) => {
+    return /["'\n\r]/.test(filename)
+  }
+
+  cd = (p) => {
+    if (this.isUnsafeFilename(p)) {
+      return message.error('File name contains unsafe characters')
+    }
+    this.runQuickCommand(`cd "${p}"`)
+  }
+
   onDrop = e => {
     const dt = e.dataTransfer
     const fromFile = dt.getData('fromFile')
+    const notSafeMsg = 'File name contains unsafe characters'
 
     if (fromFile) {
       // Handle SFTP file drop
       try {
         const fileData = JSON.parse(fromFile)
         const filePath = resolve(fileData.path, fileData.name)
+        if (this.isUnsafeFilename(filePath)) {
+          message.error(notSafeMsg)
+          return
+        }
         this.attachAddon._sendData(`"${filePath}" `)
         return
       } catch (e) {
@@ -333,6 +350,11 @@ clear\r`
     // Handle regular file drop
     const files = dt.files
     if (files && files.length) {
+      const filesAll = Array.from(files).map(f => `"${f.path}"`).join(' ')
+      if (this.isUnsafeFilename(filesAll)) {
+        message.error(notSafeMsg)
+        return
+      }
       this.attachAddon._sendData(
         Array.from(files).map(f => `"${f.path}"`).join(' ')
       )