@electerm/electerm-react 2.3.136 → 2.3.166

package/client/common/constants.js

@@ -102,7 +102,8 @@ export const settingMap = buildConst([
   'quickCommands',
   'addressBookmarks',
   'profiles',
-  'widgets'
+  'widgets',
+  'workspaces'
 ])
 
 export const staticNewItemTabs = new Set([
@@ -331,7 +332,8 @@ export const syncDataMaps = {
   terminalThemes: ['terminalThemes'],
   quickCommands: ['quickCommands'],
   profiles: ['profiles'],
-  addressBookmarks: ['addressBookmarks']
+  addressBookmarks: ['addressBookmarks'],
+  workspaces: ['workspaces']
 }
 export const terminalTypes = [
   'xterm-256color',

package/client/common/db.js

@@ -31,7 +31,8 @@ export const dbNames = without(
 
 export const dbNamesForWatch = without(
   Object.keys(settingMap),
-  settingMap.setting
+  settingMap.setting,
+  settingMap.widgets
 )
 
 /**

package/client/common/init-setting-item.js

@@ -36,5 +36,12 @@ export default (arr, tab) => {
       id: '',
       name: e(settingMap.widgets)
     }
+  } else if (tab === settingMap.workspaces) {
+    return {
+      id: '',
+      name: e(settingMap.workspaces),
+      layout: 'default',
+      tabsByBatch: {}
+    }
   }
 }

package/client/components/batch-op/batch-op.jsx

@@ -11,9 +11,9 @@ import {
   Input,
   Button,
   Table,
-  Drawer,
   Tabs
 } from 'antd'
+import Drawer from '../common/drawer'
 import {
   sidebarWidth,
   statusMap,
@@ -672,15 +672,10 @@ export default class BatchOp extends PureComponent {
     const pops = {
       open: showBatchOp,
       onClose: this.handleCancel,
-      className: 'setting-wrap',
+      className: 'setting-wrap batch-op-wrap',
       size: innerWidth - sidebarWidth,
       zIndex: 888,
-      placement: 'left',
-      styles: {
-        header: {
-          display: 'none'
-        }
-      }
+      placement: 'left'
     }
     return (
       <Drawer

package/client/components/bookmark-form/common/color-picker.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import { Popover } from 'antd'
-import { HexColorPicker, RgbaColorPicker } from 'react-colorful'
+import { Popover, ColorPicker as AntColorPicker } from 'antd'
 import { defaultColors, getRandomHexColor } from '../../../common/rand-hex-color.js'
 import { HexInput } from './hex-input.jsx'
 import './color-picker.styl'
@@ -18,8 +17,11 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     setVisible(vis)
   }
 
+  function onColorChange (color) {
+    handleChange(props.isRgba ? color.toRgbString() : color.toHexString())
+  }
+
   function renderContent () {
-    const Picker = props.isRgba ? RgbaColorPicker : HexColorPicker
     return (
       <div className='color-picker-box'>
         <div className='fix'>
@@ -40,7 +42,10 @@ export const ColorPicker = React.forwardRef((props, ref) => {
             }
           </div>
           <div className='fright'>
-            <Picker color={value} onChange={handleChange} />
+            <AntColorPicker
+              value={value}
+              onChange={onColorChange}
+            />
           </div>
         </div>
         <div className='pd1y'>
@@ -57,7 +62,13 @@ export const ColorPicker = React.forwardRef((props, ref) => {
   if (props.disabled) return inner
 
   return (
-    <Popover content={renderContent()} trigger='click' open={visible} placement='bottomLeft' onOpenChange={handleVisibleChange}>
+    <Popover
+      content={renderContent()}
+      trigger='click'
+      open={visible}
+      placement='bottomLeft'
+      onOpenChange={handleVisibleChange}
+    >
       {inner}
     </Popover>
   )

package/client/components/bookmark-form/common/color-picker.styl

@@ -10,8 +10,7 @@
   width 92px
 .color-picker-box
   width 420px
-  .react-colorful
-    height 200px
+
 .color-picker-defaults
   width 200px
 .color-picker-choose

package/client/components/bookmark-form/common/connection-hopping.jsx

@@ -180,6 +180,7 @@ export default function renderConnectionHopping (props) {
         form={formChild}
         onFinish={handleFinish}
         initialValues={initialValues}
+        component='div'
       >
         {renderList()}
         {renderWarn()}

package/client/components/bookmark-form/config/common-fields.js

@@ -219,6 +219,7 @@ export const commonFields = {
 export const terminalSettings = [
   commonFields.envLang,
   commonFields.terminalType,
+  commonFields.proxy,
   commonFields.displayRaw,
   commonFields.fontFamily,
   commonFields.fontSize,

package/client/components/common/drawer.jsx

@@ -0,0 +1,62 @@
+/**
+ * Simple drawer component without animation
+ * Replaces antd Drawer for better performance
+ */
+
+import classnames from 'classnames'
+import './drawer.styl'
+
+export default function Drawer (props) {
+  const {
+    open,
+    placement = 'left',
+    size,
+    zIndex = 1000,
+    className,
+    children,
+    styles = {},
+    onClose
+  } = props
+
+  function handleMaskClick (e) {
+    if (e.target === e.currentTarget && onClose) {
+      onClose()
+    }
+  }
+
+  if (!open) {
+    return null
+  }
+
+  const drawerStyle = {
+    zIndex
+  }
+
+  const contentStyle = {
+    width: typeof size === 'number' ? `${size}px` : size,
+    ...styles.content
+  }
+
+  const cls = classnames(
+    'custom-drawer',
+    `custom-drawer-${placement}`,
+    className
+  )
+
+  return (
+    <div className={cls} style={drawerStyle}>
+      <div
+        className='custom-drawer-mask'
+        onClick={handleMaskClick}
+      />
+      <div
+        className='custom-drawer-content-wrapper'
+        style={contentStyle}
+      >
+        <div className='custom-drawer-content'>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

package/client/components/common/drawer.styl

@@ -0,0 +1,34 @@
+.custom-drawer
+  position fixed
+  top 0
+  left 43px
+  right 0
+  bottom 0
+
+.custom-drawer-mask
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background rgba(0, 0, 0, 0.45)
+
+.custom-drawer-content-wrapper
+  position absolute
+  top 0
+  bottom 0
+  background var(--main)
+  box-shadow 2px 0 8px rgba(0, 0, 0, 0.15)
+  overflow auto
+  color var(--text)
+
+.custom-drawer-left .custom-drawer-content-wrapper
+  left 0
+
+.custom-drawer-right .custom-drawer-content-wrapper
+  right 0
+
+.custom-drawer-content
+  position relative
+  height 100%
+  width 100%

package/client/components/common/modal.jsx

@@ -0,0 +1,89 @@
+/**
+ * Simple modal component without animation
+ * Replaces antd Modal for better performance
+ */
+
+import { CloseOutlined } from '@ant-design/icons'
+import classnames from 'classnames'
+import './modal.styl'
+
+export default function Modal (props) {
+  const {
+    open,
+    title,
+    width = 520,
+    zIndex = 1000,
+    className,
+    wrapClassName,
+    children,
+    footer,
+    maskClosable = true,
+    onCancel
+  } = props
+
+  function handleMaskClick (e) {
+    if (e.target === e.currentTarget && maskClosable && onCancel) {
+      onCancel()
+    }
+  }
+
+  function handleClose () {
+    if (onCancel) {
+      onCancel()
+    }
+  }
+
+  if (!open) {
+    return null
+  }
+
+  const modalStyle = {
+    zIndex
+  }
+
+  const contentStyle = {
+    width: typeof width === 'number' ? `${width}px` : width
+  }
+
+  const cls = classnames(
+    'custom-modal-wrap',
+    wrapClassName,
+    className
+  )
+
+  return (
+    <div className={cls} style={modalStyle}>
+      <div
+        className='custom-modal-mask'
+        onClick={handleMaskClick}
+      />
+      <div className='custom-modal-container' onClick={handleMaskClick}>
+        <div
+          className='custom-modal-content'
+          style={contentStyle}
+        >
+          {title && (
+            <div className='custom-modal-header'>
+              <div className='custom-modal-title'>{title}</div>
+              <button
+                type='button'
+                className='custom-modal-close'
+                onClick={handleClose}
+              >
+                <CloseOutlined />
+              </button>
+            </div>
+          )}
+          <div className='custom-modal-body'>
+            {children}
+          </div>
+          {footer !== null && footer !== undefined && (
+            <div className='custom-modal-footer'>
+              {footer}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/client/components/common/modal.styl

@@ -0,0 +1,77 @@
+.custom-modal-wrap
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  overflow auto
+  outline 0
+
+.custom-modal-mask
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background rgba(0, 0, 0, 0.45)
+
+.custom-modal-container
+  position relative
+  display flex
+  align-items flex-start
+  justify-content center
+  min-height 100%
+  padding 24px
+
+.custom-modal-content
+  position relative
+  background var(--main)
+  border-radius 8px
+  box-shadow 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)
+  margin-top 50px
+  max-width calc(100vw - 48px)
+
+.custom-modal-header
+  display flex
+  align-items center
+  justify-content space-between
+  padding 16px 24px
+  border-bottom 1px solid var(--main-darker)
+
+.custom-modal-title
+  font-size 16px
+  font-weight 600
+  color var(--text)
+  line-height 1.5
+  flex 1
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+
+.custom-modal-close
+  display flex
+  align-items center
+  justify-content center
+  width 32px
+  height 32px
+  padding 0
+  margin-left 8px
+  background transparent
+  border none
+  border-radius 4px
+  color var(--text)
+  cursor pointer
+  transition background-color 0.2s
+  &:hover
+    background var(--main-darker)
+  &:focus
+    outline none
+
+.custom-modal-body
+  padding 0 24px 24px 24px
+  color var(--text)
+
+.custom-modal-footer
+  padding 12px 24px
+  border-top 1px solid var(--main-darker)
+  text-align right

package/client/components/common/notification-with-details.jsx

@@ -0,0 +1,34 @@
+import { notification } from 'antd'
+import { CopyOutlined } from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
+
+export function showMsg (message, type = 'success', serverInfo = null, duration = 10, description = '') {
+  const handleCopy = () => {
+    if (serverInfo && serverInfo.url) {
+      copy(serverInfo.url)
+    }
+  }
+
+  let desc = description
+  if (serverInfo) {
+    desc = (
+      <div>
+        {description && <div>{description}</div>}
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <span>URL: <b>{serverInfo.url}</b></span>
+          <CopyOutlined
+            className='pointer mg1l'
+            onClick={handleCopy}
+          />
+        </div>
+        <div>Path: <b>{serverInfo.path}</b></div>
+      </div>
+    )
+  }
+
+  notification[type]({
+    message,
+    description: desc,
+    duration
+  })
+}

package/client/components/file-transfer/conflict-resolve.jsx

@@ -4,7 +4,8 @@
  */
 
 import { Component } from 'react'
-import { Modal, Button } from 'antd'
+import { Button } from 'antd'
+import Modal from '../common/modal'
 import { isString } from 'lodash-es'
 import AnimateText from '../common/animate-text'
 import formatTime from '../../common/time'

package/client/components/file-transfer/transfer-speed-format.js

@@ -47,6 +47,12 @@ export const computePassedTime = (startTime) => {
 }
 
 export const computeLeftTime = (bytes, total, startTime) => {
+  if (total === 0) {
+    return {
+      leftTime: '0s',
+      leftTimeInt: 0
+    }
+  }
   let now = Date.now()
   if (now <= startTime) {
     now = startTime + 1

package/client/components/file-transfer/transfer.jsx

@@ -71,6 +71,9 @@ export default class TransportAction extends Component {
     this.transport = null
     this.fromFile = null
     refsTransfers.remove(this.id)
+    if (this.isFtp) {
+      window.initingFtpTabIds?.delete(this.tabId)
+    }
   }
 
   localCheckExist = (path) => {
@@ -185,9 +188,9 @@ export default class TransportAction extends Component {
     const up = {}
     const total = transfer.fromFile.size
     let percent = total === 0
-      ? 0
+      ? 100
       : Math.floor(100 * transferred / total)
-    percent = percent >= 100 ? 99 : percent
+    percent = percent >= 100 ? 100 : percent
     up.percent = percent
     up.status = 'active'
     up.transferred = transferred

package/client/components/file-transfer/transports-action-store.jsx

@@ -9,6 +9,8 @@ import { maxTransport } from '../../common/constants'
 import { refsStatic } from '../common/ref'
 // import { action } from 'manate'
 
+window.initingFtpTabIds = new Set()
+
 export default class TransportsActionStore extends Component {
   componentDidMount () {
     this.control()
@@ -71,7 +73,9 @@ export default class TransportsActionStore extends Component {
         typeTo,
         typeFrom,
         inited,
-        id
+        id,
+        tabType,
+        tabId
       } = tr
 
       const isTransfer = typeTo !== typeFrom
@@ -80,6 +84,15 @@ export default class TransportsActionStore extends Component {
         continue
       }
 
+      // For ftp transfers, ensure only one per tabId is inited
+      if (tabType === 'ftp') {
+        const hasInited = fileTransfers.some(t => t.tabId === tabId && t.inited && t.id !== id)
+        if (hasInited || window.initingFtpTabIds.has(tabId)) {
+          continue
+        }
+        window.initingFtpTabIds.add(tabId)
+      }
+
       if (count < maxTransport) {
         count++
         refsStatic.get('transfer-queue')?.addToQueue(

package/client/components/main/main.jsx

@@ -31,6 +31,7 @@ import AIChat from '../ai/ai-chat'
 import Opacity from '../common/opacity'
 import MoveItemModal from '../tree-list/move-item-modal'
 import InputContextMenu from '../common/input-context-menu'
+import WorkspaceSaveModal from '../tabs/workspace-save-modal'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -305,6 +306,7 @@ export default auto(function Index (props) {
         <ConnectionHoppingWarning {...warningProps} />
         <TerminalCmdSuggestions {...cmdSuggestionsProps} />
         <TransferQueue />
+        <WorkspaceSaveModal store={store} />
       </div>
     </ConfigProvider>
   )

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

@@ -12,7 +12,7 @@ export default class ProfleFormIndex extends PureComponent {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

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

@@ -20,11 +20,12 @@
 .fil-keyword
 .fil-label
   .qm-item
-    color var(--text-light)
+    color var(--text-disabled)
   .qm-item
     &.name-match
     &.label-match
       font-weight bold
+      color var(--text)
 
 .qm-search-input
   max-width 200px

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

@@ -12,7 +12,7 @@ export default class QuickCommandFormIndex extends PureComponent {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

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

@@ -29,7 +29,7 @@ export default class ItemList extends React.PureComponent {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

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

@@ -66,7 +66,7 @@ export default class SettingCommon extends Component {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {
@@ -518,6 +518,7 @@ export default class SettingCommon extends Component {
       onStartSessions: props.config.onStartSessions,
       bookmarks: props.bookmarks,
       bookmarkGroups: props.bookmarkGroups,
+      workspaces: props.store.workspaces,
       onChangeStartSessions: this.onChangeStartSessions
     }
     return (
@@ -528,7 +529,7 @@ export default class SettingCommon extends Component {
           <Select
             value={modifier}
             onChange={this.handleChangeModifier}
-            className='iblock width100'
+            className='width100'
             popupMatchSelectWidth={false}
             showSearch
           >
@@ -536,10 +537,10 @@ export default class SettingCommon extends Component {
               modifiers.map(this.renderOption)
             }
           </Select>
-          <span className='iblock mg1x'>+</span>
+          <span className='mg1x'>+</span>
           <Select
             value={key}
-            className='iblock width100'
+            className='width100'
             onChange={this.handleChangeKey}
             popupMatchSelectWidth={false}
             showSearch

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

@@ -52,7 +52,7 @@ export default class SettingTerminal extends Component {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

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

@@ -3,7 +3,7 @@
  */
 
 import { Component } from 'react'
-import { Drawer } from 'antd'
+import Drawer from '../common/drawer'
 import { CloseCircleOutlined } from '@ant-design/icons'
 import { sidebarWidth } from '../../common/constants'
 import AppDrag from '../tabs/app-drag'
@@ -23,13 +23,7 @@ export default class SettingWrap extends Component {
       className: 'setting-wrap',
       size: this.props.innerWidth - sidebarWidth,
       zIndex: 888,
-      placement: 'left',
-      destroyOnHidden: true,
-      styles: {
-        header: {
-          display: 'none'
-        }
-      }
+      placement: 'left'
     }
     return (
       <Drawer
@@ -40,13 +34,13 @@ export default class SettingWrap extends Component {
           onClick={this.props.onCancel}
         />
         <CloseCircleOutlined
-          className='close-setting-wrap-icon alt-close-setting-wrap'
+          className='close-setting-wrap alt-close-setting-wrap'
           onClick={this.props.onCancel}
         />
         {
           this.props.useSystemTitleBar ? null : <AppDrag />
         }
-        {this.props.visible ? this.props.children : null}
+        {this.props.children}
       </Drawer>
     )
   }