@electerm/electerm-react 2.4.38 → 2.5.9

package/client/components/auth/login.jsx

@@ -86,7 +86,7 @@ export default function Login () {
               readOnly={loading}
               onChange={handlePassChange}
               placeholder={e('password')}
-              addonAfter={renderAfter()}
+              suffix={renderAfter()}
               onPressEnter={handleSubmit}
             />
           </div>

package/client/components/bookmark-form/common/fields.jsx

@@ -90,7 +90,7 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
         )
         break
       case 'colorTitle':
-        control = <InputAutoFocus addonBefore={<ColorPickerItem />} {...item.props} />
+        control = <InputAutoFocus prefix={<ColorPickerItem />} {...item.props} />
         break
       case 'password':
         control = <Password {...item.props} />

package/client/components/bookmark-form/common/hex-input.jsx

@@ -17,6 +17,11 @@ export const HexInput = (props) => {
     return <CheckOutlined className='pointer' onClick={submit} />
   }
   return (
-    <Input addonBefore='#' {...props} value={v} onChange={handleChange} addonAfter={renderAfter()} />
+    <Input
+      prefix='#' {...props}
+      value={v}
+      onChange={handleChange}
+      suffix={renderAfter()}
+    />
   )
 }

package/client/components/bookmark-form/common/run-scripts.jsx

@@ -25,14 +25,16 @@ export default function renderRunScripts () {
             name={[field.name, 'delay']}
             required
           >
-            <InputNumber
-              min={1}
-              step={1}
-              max={65535}
-              addonBefore={e('loginScriptDelay')}
-              rules={[{ required: true, message: e('loginScriptDelay') + ' required' }]}
-              className='compact-input'
-            />
+            <Space.Compact>
+              <Space.Addon>{e('loginScriptDelay')}</Space.Addon>
+              <InputNumber
+                min={1}
+                step={1}
+                max={65535}
+                rules={[{ required: true, message: e('loginScriptDelay') + ' required' }]}
+                className='compact-input'
+              />
+            </Space.Compact>
           </FormItem>
           <FormItem
             label=''

package/client/components/bookmark-form/common/ssh-host-selector.jsx

@@ -53,7 +53,7 @@ export default function SshHostSelector ({ ips = [], useIp, form, onBlur, onPast
           name='host'
           onBlur={props.onBlur}
           onPaste={e => onPaste(e, form)}
-          addonBefore={<ColorPickerItem />}
+          prefix={<ColorPickerItem />}
         />
       </FormItem>
     </FormItem>

package/client/components/bookmark-form/common/ssh-tunnels.jsx

@@ -268,7 +268,6 @@ export default function renderSshTunnels (props) {
               <InputNumber
                 min={1}
                 max={65535}
-                // addonBefore={e('localPort')}
                 placeholder={e('port')}
               />
             </FormItem>

package/client/components/common/input-confirm-common.jsx

@@ -7,8 +7,8 @@ export default function InputConfirmCommon ({
   value,
   onChange,
   inputComponent: InputComponent,
-  iconPlacement = 'addonAfter', // 'addonAfter', 'suffix', or 'below'
-  extraAddonAfter,
+  addonBefore,
+  addonAfter,
   ...rest
 }) {
   const [localValue, setLocalValue] = useState(value)
@@ -50,10 +50,11 @@ export default function InputConfirmCommon ({
     : null
   const { className, ...restProps } = rest
   const cls = className ? `${className} input-confirm` : 'input-confirm'
-  const finalAddon = extraAddonAfter || icons
+  const beforeAddon = addonBefore || null
+  const afterAddon = addonAfter || icons
     ? (
       <Space.Addon>
-        {extraAddonAfter}
+        {addonAfter}
         {icons}
       </Space.Addon>
       )
@@ -70,8 +71,9 @@ export default function InputConfirmCommon ({
   return (
     <div>
       <Space.Compact className={cls}>
+        {beforeAddon}
         {inputElement}
-        {finalAddon}
+        {afterAddon}
       </Space.Compact>
     </div>
   )

package/client/components/common/input-confirm.jsx

@@ -2,12 +2,10 @@ import { Input } from 'antd'
 import InputConfirmCommon from './input-confirm-common'
 
 export default function InputConfirm (props) {
-  const { extraAddonAfter, ...rest } = props
   return (
     <InputConfirmCommon
-      {...rest}
+      {...props}
       inputComponent={Input}
-      extraAddonAfter={extraAddonAfter}
     />
   )
 }

package/client/components/common/input-number-confirm.jsx

@@ -2,12 +2,10 @@ import { InputNumber } from 'antd'
 import InputConfirmCommon from './input-confirm-common'
 
 export default function InputNumberConfirm (props) {
-  const { addonAfter, ...rest } = props
   return (
     <InputConfirmCommon
-      {...rest}
+      {...props}
       inputComponent={InputNumber}
-      extraAddonAfter={addonAfter}
     />
   )
 }

package/client/components/common/password.jsx

@@ -49,9 +49,6 @@ export default forwardRef(function Password (props, ref) {
     }
   }, [props.onBlur])
 
-  // Keep addonBefore as-is from props; must be null when caps lock is off
-  const addonBefore = props.addonBefore ?? null
-
   // Show caps lock indicator inside prefix to avoid remounting the input wrapper
   let capsPrefix = null
   if (isCapsLockOn) {
@@ -75,7 +72,6 @@ export default forwardRef(function Password (props, ref) {
     <Input.Password
       {...props}
       ref={ref}
-      addonBefore={addonBefore}
       prefix={prefix}
       onKeyDown={handleKeyEvent}
       onKeyUp={handleKeyEvent}

package/client/components/common/ref.js

@@ -3,6 +3,7 @@ window.refs = new Map()
 window.refsStatic = new Map()
 window.refsTransfers = new Map()
 window.refsTabs = new Map()
+window.filesRef = new Map()
 
 class Ref {
   constructor (key) {
@@ -59,3 +60,4 @@ export const refs = new Ref('refs')
 export const refsTransfers = new Ref('refsTransfers')
 export const refsStatic = new Ref('refsStatic')
 export const refsTabs = new TabsRef('refsTabs')
+export const filesRef = new Ref('filesRef')

package/client/components/main/main.jsx

@@ -37,12 +37,8 @@ import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
 
-function setupGlobalMessageDismiss () {
-}
-
 export default auto(function Index (props) {
   useEffect(() => {
-    setupGlobalMessageDismiss()
     const { store } = props
     window.addEventListener('resize', store.onResize)
     setTimeout(store.triggerResize, 200)
@@ -107,6 +103,7 @@ export default auto(function Index (props) {
     'not-mac': !isMac,
     'is-win': isWin,
     pinned,
+    'not-win': !isWin,
     'qm-pinned': pinnedQuickCommandBar,
     'term-fullscreen': terminalFullScreen,
     'is-main': !isSecondInstance

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

@@ -29,14 +29,16 @@ export default function renderQm () {
           name={[field.name, 'delay']}
           required
         >
-          <InputNumber
-            min={1}
-            step={1}
-            max={65535}
-            addonBefore={e('delay')}
-            placeholder={100}
-            className='compact-input'
-          />
+          <Space.Compact>
+            <Space.Addon>{e('delay')}</Space.Addon>
+            <InputNumber
+              min={1}
+              step={1}
+              max={65535}
+              placeholder={100}
+              className='compact-input'
+            />
+          </Space.Compact>
         </FormItem>
         <FormItem
           label=''
@@ -44,20 +46,21 @@ export default function renderQm () {
           required
           className='mg2x'
         >
-          <Input.TextArea
-            autoSize={{ minRows: 1 }}
-            placeholder={e('quickCommand')}
-            className='compact-input qm-input'
-            onFocus={() => {
-              focused.current = i
-            }}
-          />
+          <Space.Compact>
+            <Input.TextArea
+              autoSize={{ minRows: 1 }}
+              placeholder={e('quickCommand')}
+              className='compact-input qm-input'
+              onFocus={() => {
+                focused.current = i
+              }}
+            />
+            <Button
+              icon={<MinusCircleOutlined />}
+              onClick={() => remove(field.name)}
+            />
+          </Space.Compact>
         </FormItem>
-        <Button
-          icon={<MinusCircleOutlined />}
-          onClick={() => remove(field.name)}
-          className='mg24b'
-        />
       </Space>
     )
   }

package/client/components/setting-panel/keywords-form.jsx

@@ -55,16 +55,17 @@ export default function KeywordForm (props) {
             name={[field.name, 'keyword']}
             rules={[{ validator: checker }]}
           >
-            <InputConfirm
-              addonBefore={renderBefore(field.name)}
-            />
+            <Space.Compact>
+              <InputConfirm
+                addonBefore={renderBefore(field.name)}
+              />
+              <Button
+                icon={<MinusCircleOutlined />}
+                onClick={() => remove(field.name)}
+              />
+            </Space.Compact>
           </FormItem>
         </FormItem>
-        <Button
-          icon={<MinusCircleOutlined />}
-          onClick={() => remove(field.name)}
-          className='mg24b'
-        />
       </Space>
     )
   }

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

@@ -442,7 +442,7 @@ export default class SettingCommon extends Component {
       onFocus: this.handleLoginPassFocus,
       onBlur: this.handleLoginPassBlur,
       onChange: this.handleChangeLoginPass,
-      addonAfter: this.renderLoginPassAfter(),
+      suffix: this.renderLoginPassAfter(),
       placeholder: placeholderLogin
     }
     return (

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

@@ -11,7 +11,8 @@ import {
   Button,
   AutoComplete,
   Tooltip,
-  Flex
+  Flex,
+  Space
 } from 'antd'
 import deepCopy from 'json-deep-copy'
 import {
@@ -176,23 +177,25 @@ export default class SettingTerminal extends Component {
           <Button
             onClick={this.handleChooseFolder}
             className='mg1r'
+            type='text'
             size='small'
           >
             {e('chooseFolder')}
           </Button>
           <Button
             size='small'
+            type='text'
             onClick={() => this.handleLogChange('')}
           >
             {e('reset')}
           </Button>
         </>
       ),
+      prefix: e('terminalLogPath'),
       addonBefore: (
-        <>
-          <span className='mg1r'>{e('terminalLogPath')}</span>
+        <Space.Addon>
           <ShowItem to={path} />
-        </>
+        </Space.Addon>
       )
     }
     return (
@@ -340,7 +343,7 @@ export default class SettingTerminal extends Component {
               options={dataSource.map(this.renderBgOption)}
             >
               <InputConfirm
-                extraAddonAfter={after}
+                addonAfter={after}
               />
             </AutoComplete>
           </Tooltip>

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

@@ -235,7 +235,7 @@ export default function TerminalBackgroundConfig ({
             options={dataSource.map(renderBgOption)}
           >
             <Input
-              addonAfter={after}
+              suffix={after}
             />
           </AutoComplete>
         </Tooltip>

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

@@ -66,6 +66,7 @@ function renderAddonBefore (props, realPath) {
         realPath={realPath}
         host={host}
         type={type}
+        className='mg1r'
         onClickHistory={props.onClickHistory}
       />
     </>
@@ -134,11 +135,11 @@ export default function AddressBar (props) {
           value={path}
           onChange={e => props.onChange(e, n)}
           onPressEnter={e => props.onGoto(type, e)}
-          addonBefore={renderAddonBefore(props, realPath)}
+          prefix={renderAddonBefore(props, realPath)}
           onFocus={() => props.onInputFocus(type)}
           onBlur={() => props.onInputBlur(type)}
           disabled={loadingSftp}
-          addonAfter={
+          suffix={
             renderAddonAfter(isLoadingRemote, onGoto, GoIcon, type)
           }
         />

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

@@ -101,7 +101,7 @@ export default auto(function AddrBookmark (props) {
       placement='bottom'
       trigger='click'
     >
-      <StarOutlined />
+      <StarOutlined className={props.className || ''} />
     </Popover>
   )
 })

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

@@ -36,11 +36,8 @@ import time from '../../common/time'
 import { filesize } from 'filesize'
 import { createTransferProps } from './transfer-common'
 import generate from '../../common/uid'
-import { refsStatic, refs } from '../common/ref'
+import { refsStatic, refs, filesRef } from '../common/ref'
 import iconsMap from '../sys-menu/icons-map'
-import {
-  Dropdown
-} from 'antd'
 
 const e = window.translate
 
@@ -63,6 +60,7 @@ export default class FileSection extends React.Component {
   }
 
   componentDidMount () {
+    filesRef.add(this.id, this)
     this.applyStyle()
   }
 
@@ -76,6 +74,7 @@ export default class FileSection extends React.Component {
   }
 
   componentWillUnmount () {
+    filesRef.remove(this.id)
     clearTimeout(this.timer)
     this.timer = null
     this.domRef = null
@@ -91,11 +90,11 @@ export default class FileSection extends React.Component {
     return refsStatic.get('text-editor')
   }
 
-  handleDropdownOpenChange = (open) => {
-    if (open) {
-      this.forceUpdate()
-    }
-  }
+  // handleDropdownOpenChange = (open) => {
+  //   if (open) {
+  //     this.forceUpdate()
+  //   }
+  // }
 
   applyStyle = () => {
     if (!this.domRef) {
@@ -447,20 +446,18 @@ export default class FileSection extends React.Component {
     const {
       id,
       type,
-      isParent
+      isParent,
+      isEmpty
     } = file
-    if (isParent) {
-      return
+    if (isEmpty || isParent) {
+      return this.props.modifier({
+        selectedFiles: new Set()
+      })
     }
     this.props.modifier({
       lastClickedFile: file
     })
     this.onDragEnd(e)
-    if (!id) {
-      return this.props.modifier({
-        selectedFiles: new Set()
-      })
-    }
     const selectedFilesOld = this.props.getSelectedFiles()
     const isSameSide = selectedFilesOld.length &&
       type === selectedFilesOld[0].type
@@ -519,7 +516,7 @@ export default class FileSection extends React.Component {
 
   handleBlur = () => {
     const file = copy(this.state.file)
-    const { nameTemp, name, id, type } = this.state.file
+    const { nameTemp, name, type, id } = this.state.file
     if (name === nameTemp) {
       if (!id) {
         return this.cancelNew(type)
@@ -854,8 +851,8 @@ export default class FileSection extends React.Component {
     return this.props.renderDelConfirmTitle(files, true)
   }
 
-  showModeEdit (type, id) {
-    if (!id) {
+  showModeEdit (type, isRealFile) {
+    if (!isRealFile) {
       return false
     }
     if (type === typeMap.remote) {
@@ -865,6 +862,7 @@ export default class FileSection extends React.Component {
   }
 
   handleContextMenuCapture = (e) => {
+    this.props.setClickFileId(this.id)
     if (!this.isSelected(this.state.file.id)) {
       this.onClick(e)
     }
@@ -925,12 +923,13 @@ export default class FileSection extends React.Component {
         isDirectory,
         size,
         id,
+        isEmpty,
         isParent
       },
       selectedFiles,
       tab
     } = this.props
-    const isRealFile = id && !isParent
+    const isRealFile = !isEmpty && !isParent
     const hasHost = !!tab.host
     const { enableSsh } = tab
     const isLocal = type === typeMap.local
@@ -1113,7 +1112,7 @@ export default class FileSection extends React.Component {
       <div className='sftp-item'>
         <Input
           value={nameTemp}
-          addonBefore={pre}
+          prefix={pre}
           onChange={this.handleChange}
           onBlur={this.handleBlur}
           onPressEnter={this.handleBlur}
@@ -1202,9 +1201,7 @@ export default class FileSection extends React.Component {
     const props = {
       className,
       draggable: draggable && !isParent,
-      onDoubleClick: this.transferOrEnterDirectory,
       ...pick(this, [
-        'onClick',
         'onDrag',
         'onDragEnter',
         'onDragExit',
@@ -1216,33 +1213,22 @@ export default class FileSection extends React.Component {
       onDragStart: onDragStart || this.onDragStart,
       'data-id': id,
       id: this.id,
-      'data-is-parent': isParent ? 'y' : 'n',
       'data-type': type,
       title: file.name
     }
-    const ddProps = {
-      menu: {
-        items: this.renderContextMenu(),
-        onClick: this.onContextMenu
-      },
-      trigger: ['contextMenu'],
-      onOpenChange: this.handleDropdownOpenChange
-    }
     return (
-      <Dropdown {...ddProps}>
-        <div
-          ref={this.domRef}
-          {...props}
-          onContextMenu={this.handleContextMenuCapture}
-        >
-          <div className='file-bg' />
-          <div className='file-props-div'>
-            {
-              properties.map(this.renderProp)
-            }
-          </div>
+      <div
+        ref={this.domRef}
+        {...props}
+        onContextMenu={this.handleContextMenuCapture}
+      >
+        <div className='file-bg' />
+        <div className='file-props-div'>
+          {
+            properties.map(this.renderProp)
+          }
         </div>
-      </Dropdown>
+      </div>
     )
   }
 }

package/client/components/sftp/keyword-filter.jsx

@@ -37,11 +37,11 @@ export default function KeywordFilter ({ keyword, type, updateKeyword }) {
   const inputProps = {
     value: text,
     onChange: handleInputChange,
-    addonBefore: <FilterOutlined />,
+    prefix: <FilterOutlined />,
     onKeyPress: handleKeyPress,
     placeholder: e('keyword'),
     className: 'keyword-filter-input',
-    addonAfter: <CheckOutlined onClick={applyFilter} />
+    suffix: <CheckOutlined onClick={applyFilter} />
   }
 
   const tooltipContent = (

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

@@ -3,6 +3,7 @@
  */
 
 import { Component } from 'react'
+import { Dropdown } from 'antd'
 import classnames from 'classnames'
 import FileSection from './file-item'
 import PagedList from './paged-list'
@@ -11,6 +12,7 @@ import {
   CheckOutlined
 } from '@ant-design/icons'
 import IconHolder from '../sys-menu/icon-holder'
+import { filesRef } from '../common/ref'
 
 const e = window.translate
 
@@ -168,57 +170,6 @@ export default class FileListTable extends Component {
     'left'
   ]
 
-  // saveOldStyle = () => {
-  //   const { properties } = this.state
-  //   const ids = [
-  //     ...properties,
-  //     ...splitHandles
-  //   ]
-  //   const { type, id } = this.props
-  //   const parentWidth = document.querySelector(
-  //     `#id-${id} .tw-${type} .sftp-table`
-  //   ).clientWidth
-  //   this.oldStyles = ids.reduce((prev, { id, name }) => {
-  //     const sel = `.session-current .tw-${type} .sftp-file-table-header .shi-${name || id}`
-  //     return {
-  //       ...prev,
-  //       [name || id]: {
-  //         style: pick(
-  //           document.querySelector(sel)?.style || {},
-  //           this.positionProps
-  //         ),
-  //         parentWidth
-  //       }
-  //     }
-  //   }, {})
-  // }
-
-  // changePosition = (
-  //   dom,
-  //   xDiff,
-  //   type,
-  //   style
-  // ) => {
-  //   const realWidth = style.width
-  //   const realLeft = style.left
-  //   if (type === 'prev') {
-  //     dom.forEach(d => {
-  //       d.style.width = (realWidth + xDiff) + 'px'
-  //     })
-  //   } else if (type === 'dom') {
-  //     dom.style.left = (realLeft + xDiff) + 'px'
-  //   } else {
-  //     dom.forEach(d => {
-  //       d.style.width = (realWidth - xDiff) + 'px'
-  //       d.style.left = (realLeft + xDiff) + 'px'
-  //     })
-  //   }
-  // }
-
-  // onDragEnd = () => {}
-
-  // onDoubleClick = () => this.resetWidth()
-
   hasPager = () => {
     const {
       pageSize
@@ -230,36 +181,29 @@ export default class FileListTable extends Component {
     return len > pageSize
   }
 
-  // rebuildStyle = (name) => {
-  //   let { style, parentWidth } = this.oldStyles[name]
-  //   style = copy(style)
-  //   const {
-  //     type,
-  //     id
-  //   } = this.props
-  //   const currentParentWidth = document.querySelector(
-  //     `#id-${id} .tw-${type} .sftp-table`
-  //   ).clientWidth
-  //   style.width = (parseFloat(style.width) * currentParentWidth / parentWidth) + 'px'
-  //   style.left = (parseFloat(style.left) * currentParentWidth / parentWidth) + 'px'
-  //   return style
-  // }
-
   // reset
   resetWidth = () => {
     this.setState(this.initFromProps())
   }
 
+  setClickFileId = (id) => {
+    this.currentFileId = id
+  }
+
   renderItem = (item) => {
     const { type } = this.props
     const cls = item.isParent ? 'parent-file-item' : 'real-file-item'
     const key = item.id
+    const fileProps = {
+      ...this.props.getFileProps(item, type),
+      cls,
+      properties: this.state.properties,
+      setClickFileId: this.setClickFileId
+    }
     return (
       <FileSection
-        {...this.props.getFileProps(item, type)}
+        {...fileProps}
         key={key}
-        cls={cls}
-        properties={this.state.properties}
       />
     )
   }
@@ -268,9 +212,59 @@ export default class FileListTable extends Component {
     this.onToggleProp(key)
   }
 
+  handleClick = (e) => {
+    const target = e.target.closest('[data-id]')
+    if (target) {
+      const id = target.getAttribute('data-id')
+      const refKey = 'file-' + id
+      const ref = filesRef.get(refKey)
+      if (ref) {
+        ref.onClick(e)
+      }
+    }
+  }
+
+  handleDoubleClick = (e) => {
+    const target = e.target.closest('[data-id]')
+    if (target) {
+      const id = target.getAttribute('data-id')
+      const ref = filesRef.get('file-' + id)
+      if (ref) {
+        ref.transferOrEnterDirectory(e)
+      }
+    }
+  }
+
+  getClickedFile = () => {
+    const refKey = this.currentFileId
+    return filesRef.get(refKey)
+  }
+
+  handleDropdownOpenChange = (open) => {
+    if (open) {
+      this.forceUpdate()
+    }
+  }
+
+  onContextMenuFile = ({ key }) => {
+    if (key !== 'more-submenu') {
+      const inst = this.getClickedFile()
+      if (inst) {
+        inst[key]()
+      }
+    }
+  }
+
+  renderContextMenuFile = () => {
+    const fileInst = this.getClickedFile()
+    return fileInst ? fileInst.renderContextMenu() : []
+  }
+
   renderParent = (type) => {
     const { parentItem } = this.props
-    return parentItem ? this.renderItem(parentItem) : null
+    return parentItem
+      ? this.renderItem(parentItem)
+      : null
   }
 
   render () {
@@ -282,7 +276,9 @@ export default class FileListTable extends Component {
       style: {
         height: height - 42 - 30 - 32 - 90
       },
-      draggable: false
+      draggable: false,
+      onClick: this.handleClick,
+      onDoubleClick: this.handleDoubleClick
     }
     const hasPager = this.hasPager()
     const cls = classnames(
@@ -291,21 +287,37 @@ export default class FileListTable extends Component {
         'sftp-has-pager': hasPager
       }
     )
-
+    const ddProps = {
+      menu: {
+        items: this.renderContextMenuFile(),
+        onClick: this.onContextMenuFile
+      },
+      trigger: ['contextMenu'],
+      onOpenChange: this.handleDropdownOpenChange
+    }
     return (
       <div className={cls}>
         {this.renderTableHeader()}
-        <div
-          {...props}
-        >
-          {this.props.renderEmptyFile(type)}
-          {this.renderParent(type)}
-          <PagedList
-            list={fileList}
-            renderItem={this.renderItem}
-            hasPager={hasPager}
-          />
-        </div>
+        <Dropdown {...ddProps}>
+          <div
+            {...props}
+          >
+            {
+                this.props.renderEmptyFile(
+                  type,
+                  {
+                    setClickFileId: this.setClickFileId
+                  }
+                )
+            }
+            {this.renderParent(type)}
+            <PagedList
+              list={fileList}
+              renderItem={this.renderItem}
+              hasPager={hasPager}
+            />
+          </div>
+        </Dropdown>
       </div>
     )
   }

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

@@ -1054,29 +1054,45 @@ export default class Sftp extends Component {
     }
   }
 
-  renderEmptyFile = (type) => {
+  renderEmptyFile = (type, extra = {}) => {
+    const uniqueId = this.getPathUid(type, 'empty')
     const item = {
       type,
       name: '',
-      isDirectory: true
+      isDirectory: true,
+      id: uniqueId,
+      isEmpty: true
+    }
+    const allProps = {
+      ...this.getFileProps(item, type),
+      ...extra,
+      cls: 'virtual-file-unit',
+      key: 'empty' + type,
+      isEmpty: true,
+      draggable: false,
+      ref: ref => {
+        this[type + 'Dom'] = ref
+      }
     }
     return (
       <div
         className={`virtual-file virtual-file-${type}`}
       >
         <FileSection
-          {...this.getFileProps(item, type)}
-          ref={ref => {
-            this[type + 'Dom'] = ref
-          }}
-          draggable={false}
-          cls='virtual-file-unit'
-          key={'empty' + type}
+          {...allProps}
+          key={uniqueId}
         />
       </div>
     )
   }
 
+  getPathUid = (type, type1) => {
+    const currentPath = this.state[`${type}Path`]
+    const parentPath = resolve(currentPath, '..')
+    const { id } = this.props.tab
+    return `${type1}-${parentPath}-${id}-${type}`
+  }
+
   renderParentItem = (type) => {
     const currentPath = this.state[`${type}Path`]
     const parentPath = resolve(currentPath, '..')
@@ -1085,8 +1101,7 @@ export default class Sftp extends Component {
       return null
     }
 
-    const { id } = this.props.tab
-    const uniqueId = `parent-${parentPath}-${id}-${type}`
+    const uniqueId = this.getPathUid(type, 'parent')
 
     return {
       type,

package/client/components/shortcuts/shortcut-editor.jsx

@@ -201,7 +201,7 @@ export default class ShortcutEdit extends PureComponent {
     return (
       <div className={this.getCls()}>
         <Input
-          addonAfter={this.renderAfter()}
+          suffix={this.renderAfter()}
           value={shortcut}
           className='shortcut-input'
         />

package/client/components/sidebar/sidebar.styl

@@ -13,7 +13,8 @@
   .item-list-unit:hover
     .list-item-remove
       display none !important
-
+.sidebar-panel
+  top 36px
 .sidebar
   position absolute
   left 0

package/client/components/sys-menu/zoom.jsx

@@ -1,5 +1,7 @@
 import InputNumberConfirm from '../common/input-number-confirm'
-
+import {
+  Space
+} from 'antd'
 import {
   MinusCircleOutlined,
   PlusCircleOutlined
@@ -18,9 +20,9 @@ export default function ZoomMenu (props) {
       step={1}
       min={25}
       max={500}
-      addonAfter='%'
+      suffix='%'
       addonBefore={
-        <>
+        <Space.Addon>
           <PlusCircleOutlined
             onClick={() => store.zoom(0.25, true)}
             className='mg1r pointer font16'
@@ -29,7 +31,7 @@ export default function ZoomMenu (props) {
             onClick={() => store.zoom(-0.25, true)}
             className='pointer font16'
           />
-        </>
+        </Space.Addon>
       }
     />
   )

package/client/components/tabs/app-drag.jsx

@@ -48,23 +48,37 @@ export default function AppDrag (props) {
       window.pre.runGlobalAsync('maximize')
     }
   }
+  if (!window.store.shouldSendWindowMove) {
+    useEffect(() => {
+      // Listen for mouseup at document level to catch mouseup outside window
+      document.addEventListener('mouseup', onMouseUp)
+      window.addEventListener('contextmenu', onMouseUp)
 
-  useEffect(() => {
-    // Listen for mouseup at document level to catch mouseup outside window
-    document.addEventListener('mouseup', onMouseUp)
-    window.addEventListener('contextmenu', onMouseUp)
-
-    return () => {
-      document.removeEventListener('mouseup', onMouseUp)
-      window.removeEventListener('contextmenu', onMouseUp)
+      return () => {
+        document.removeEventListener('mouseup', onMouseUp)
+        window.removeEventListener('contextmenu', onMouseUp)
+      }
+    }, [])
+  }
+  const props0 = {
+    className: 'app-drag',
+    onDoubleClick
+  }
+  if (
+    window.store.shouldSendWindowMove
+  ) {
+    Object.assign(props0, {
+      onMouseDown,
+      onMouseUp
+    })
+  } else {
+    props0.style = {
+      WebkitAppRegion: 'drag'
     }
-  }, [])
+  }
   return (
     <div
-      className='app-drag'
-      onMouseDown={onMouseDown}
-      onMouseUp={onMouseUp}
-      onDoubleClick={onDoubleClick}
+      {...props0}
     >
       {props.children}
     </div>

package/client/components/tabs/tabs.styl

@@ -308,3 +308,11 @@
   text-overflow ellipsis
   white-space nowrap
 
+.not-webapp.not-win
+  .tab
+  .tabs-add-btn
+  .window-control-box
+  .tab-close
+  .tab-reload
+  .tabs-extra
+    -webkit-app-region no-drag

package/client/components/terminal/term-search.jsx

@@ -206,9 +206,8 @@ export default class TermSearch extends PureComponent {
       value: termSearch,
       className: 'iblock',
       onChange: this.handleChange,
-      suffix: this.renderSuffix(),
+      suffix: <>{this.renderSuffix()} {this.renderAfter()}</>,
       onPressEnter: this.next,
-      addonAfter: this.renderAfter(),
       selectall: true
     }
     return (

package/client/components/terminal/terminal.jsx

@@ -239,12 +239,21 @@ class Term extends Component {
             type: 'shell_integration',
             execute: async () => {
               await this.injectShellIntegration()
+              if (currSftpFollow) {
+                this.attachAddon._sendData('\r')
+              }
             }
           })
         } else {
           // No active queue, inject directly
-          this.injectShellIntegration()
+          this.injectShellIntegration().then(() => {
+            if (currSftpFollow) {
+              this.attachAddon._sendData('\r')
+            }
+          })
         }
+      } else if (this.shellInjected && currSftpFollow) {
+        this.getCwd()
       }
     }
     if (

package/client/components/text-editor/simple-editor.jsx

@@ -165,7 +165,7 @@ export default function SimpleEditor (props) {
           enterButton={<SearchOutlined />}
           onSearch={handleSearch}
           onPressEnter={handleSearch}
-          addonAfter={renderAfter()}
+          suffix={renderAfter()}
           style={{ width: 'auto' }}
         />
         <Button

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

@@ -570,8 +570,8 @@ export default class ItemListTree extends Component {
         value={categoryTitle}
         onChange={this.handleChangeEdit}
         onPressEnter={this.handleSubmitEdit}
-        addonBefore={colorPicker}
-        addonAfter={confirm}
+        prefix={colorPicker}
+        suffix={confirm}
       />
     )
   }
@@ -757,8 +757,8 @@ export default class ItemListTree extends Component {
           value={bookmarkGroupTitle}
           onPressEnter={this.handleSubmit}
           onChange={this.handleChangeBookmarkGroupTitle}
-          addonBefore={colorPicker}
-          addonAfter={confirm}
+          prefix={colorPicker}
+          suffix={confirm}
           onBlur={this.handleBlurBookmarkGroupTitle}
         />
       </div>

package/client/components/tree-list/tree-list.styl

@@ -28,6 +28,7 @@
     .tree-control-btn
       display inline-block
       vertical-align middle
+      line-height 26px
   &.item-dragover-top
     border-top 1px solid #18d551
 .tree-item-title

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

@@ -33,12 +33,12 @@ export default function AddressBar (props) {
         <Input
           value={url}
           onClick={handleClick}
-          addonBefore={
+          prefix={
             <ReloadOutlined
               onClick={onReload}
             />
           }
-          addonAfter={
+          suffix={
             <GlobalOutlined
               onClick={onOpen}
             />

package/client/store/event.js

@@ -12,13 +12,17 @@ export default Store => {
 
   Store.prototype.blur = function () {
     window.focused = false
-    window.pre.runSync('windowMove', false)
+    if (window.store.shouldSendWindowMove) {
+      window.pre.runSync('windowMove', false)
+    }
     refs.get('term-' + window.store.activeTabId)?.term?.blur()
   }
 
   Store.prototype.onBlur = function () {
     window.focused = false
-    window.pre.runSync('windowMove', false)
+    if (window.store.shouldSendWindowMove) {
+      window.pre.runSync('windowMove', false)
+    }
   }
 
   Store.prototype.selectall = function () {

package/client/store/store.js

@@ -36,7 +36,8 @@ import {
   settingMap,
   terminalSshConfigType,
   paneMap,
-  staticNewItemTabs
+  staticNewItemTabs,
+  isWin
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
 import createTitle from '../common/create-title'
@@ -89,6 +90,12 @@ class Store {
     return tab.props.tab
   }
 
+  get shouldSendWindowMove () {
+    return isWin &&
+        !window.et.isWebApp &&
+        !window.store.config.useSystemTitleBar
+  }
+
   get batchInputSelectedTabIds () {
     return Array.from(window.store._batchInputSelectedTabIds)
   }

package/package.json

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