@electerm/electerm-react 2.5.6 → 2.5.16

package/client/common/constants.js

@@ -233,7 +233,7 @@ export const downloadUpgradeTimeout = 20000
 export const expandedKeysLsKey = 'expanded-keys'
 export const resolutionsLsKey = 'custom-resolution-key'
 export const checkedKeysLsKey = 'checked-keys'
-export const quickCommandLabelsLsKey = 'quick-command-labels'
+export const quickCommandLabelsLsKey = 'quick-command-label'
 export const localAddrBookmarkLsKey = 'local-addr-bookmark-keys'
 export const dismissDelKeyTipLsKey = 'dismiss-del-key-tip'
 export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-to-use-ssh-tunnel'

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/bookmark-form.styl

@@ -13,3 +13,5 @@
 .ip-item:hover
     .item-item-use
       display inline-block
+.number-input
+  min-width 210px

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

@@ -17,40 +17,44 @@ export default function renderRunScripts () {
     return (
       <>
         <Space
-          align='center'
+          align='baseline'
+          block
           key={field.key}
         >
           <FormItem
             label=''
             name={[field.name, 'delay']}
             required
+            noStyle
           >
             <InputNumber
               min={1}
               step={1}
+              prefix={e('loginScriptDelay')}
+              suffix='ms'
               max={65535}
-              addonBefore={e('loginScriptDelay')}
+              className='number-input'
               rules={[{ required: true, message: e('loginScriptDelay') + ' required' }]}
-              className='compact-input'
             />
           </FormItem>
-          <FormItem
-            label=''
-            name={[field.name, 'script']}
-            required
-            className='mg2x'
-          >
-            <Input.TextArea
-              autoSize={{ minRows: 1 }}
-              placeholder={e('loginScript')}
-              className='compact-input'
+          <Space.Compact>
+            <FormItem
+              label=''
+              name={[field.name, 'script']}
+              required
+              noStyle
+            >
+              <Input.TextArea
+                autoSize={{ minRows: 1 }}
+                placeholder={e('loginScript')}
+              />
+            </FormItem>
+            <Button
+              icon={<MinusCircleOutlined />}
+              onClick={() => remove(field.name)}
+              className='mg24b'
             />
-          </FormItem>
-          <Button
-            icon={<MinusCircleOutlined />}
-            onClick={() => remove(field.name)}
-            className='mg24b'
-          />
+          </Space.Compact>
         </Space>
       </>
     )

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/bookmark-form/{tree-delete.jsx → tree-select.jsx}

@@ -71,28 +71,42 @@ function buildData (bookmarks, bookmarkGroups) {
   return level1
 }
 
-export default function BookmarkTreeDelete (props) {
-  const { expandedKeys, checkedKeys, bookmarks, bookmarkGroups } = props
+export default function BookmarkTreeSelect (props) {
+  const { expandedKeys: propExpandedKeys, checkedKeys: propCheckedKeys, bookmarks, bookmarkGroups, type = 'delete', onCheck: propOnCheck, onExpand: propOnExpand } = props
 
-  const onExpand = (expandedKeys) => {
+  const expandedKeys = propExpandedKeys !== undefined ? propExpandedKeys : window.store.expandedKeys
+  const checkedKeys = propCheckedKeys !== undefined ? propCheckedKeys : window.store.checkedKeys
+
+  const onExpand = propOnExpand || ((expandedKeys) => {
     window.store.expandedKeys = deepCopy(expandedKeys)
-  }
+  })
 
-  const onCheck = (checkedKeys) => {
+  const onCheck = propOnCheck || ((checkedKeys) => {
     window.store.checkedKeys = deepCopy(checkedKeys)
-  }
+  })
 
-  const handleDel = () => {
+  const handleOperation = () => {
     const { store } = window
     const arr = checkedKeys.filter(d => d !== defaultBookmarkGroupId)
-    store.delItems(arr, settingMap.bookmarks)
-    store.delItems(arr, settingMap.bookmarkGroups)
+    if (type === 'delete') {
+      store.delItems(arr, settingMap.bookmarks)
+      store.delItems(arr, settingMap.bookmarkGroups)
+    } else {
+      store.openBookmarks(arr)
+      if (props.onClose) {
+        props.onClose()
+      }
+    }
     store.checkedKeys = []
   }
 
   const handleCancel = () => {
     const { store } = window
-    store.bookmarkSelectMode = false
+    if (props.onClose) {
+      props.onClose()
+    } else {
+      store.bookmarkSelectMode = false
+    }
     store.checkedKeys = []
   }
 
@@ -109,13 +123,13 @@ export default function BookmarkTreeDelete (props) {
   return (
     <div>
       <div className='pd2'>
-        <Space.Compact>
+        <Space.Compact className='mg2b'>
           <Button
             type='primary'
             disabled={!len}
-            onClick={handleDel}
+            onClick={handleOperation}
           >
-            {e('delSelected')} ({len})
+            {type === 'delete' ? e('delSelected') : e('open')} ({len})
           </Button>
           <Button
             onClick={handleCancel}

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)
@@ -34,6 +34,12 @@ export default function InputConfirmCommon ({
     setIsEditing(false)
   }
 
+  function handleBlur () {
+    if (isEditing) {
+      handleConfirm()
+    }
+  }
+
   const icons = isEditing
     ? (
       <>
@@ -50,10 +56,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>
       )
@@ -62,17 +69,17 @@ export default function InputConfirmCommon ({
   const childProps = {
     ...restProps,
     value: localValue,
-    onChange: handleChange
+    onChange: handleChange,
+    onBlur: handleBlur
   }
 
   const inputElement = <InputComponent {...childProps} />
 
   return (
-    <div>
-      <Space.Compact className={cls}>
-        {inputElement}
-        {finalAddon}
-      </Space.Compact>
-    </div>
+    <Space.Compact className={cls}>
+      {beforeAddon}
+      {inputElement}
+      {afterAddon}
+    </Space.Compact>
   )
 }

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/modal.styl

@@ -22,6 +22,7 @@
   justify-content center
   min-height 100%
   padding 24px
+  word-break break-word
 
 .custom-modal-content
   position relative

package/client/components/common/multi-select-modal.jsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import Modal from './modal'
+import BookmarkTreeSelect from '../bookmark-form/tree-select'
+
+const e = window.translate
+
+const MultiSelectModal = ({ onClose, open }) => {
+  const [checkedKeys, setCheckedKeys] = useState([])
+  const [expandedKeys, setExpandedKeys] = useState([])
+  if (!open) {
+    return null
+  }
+  const { store } = window
+  return (
+    <Modal
+      title={e('open') + ' ' + e('bookmarks')}
+      open={open}
+      onCancel={onClose}
+      footer={null}
+    >
+      <BookmarkTreeSelect
+        type='open'
+        onClose={onClose}
+        bookmarks={store.bookmarks}
+        bookmarkGroups={store.bookmarkGroups}
+        expandedKeys={expandedKeys}
+        checkedKeys={checkedKeys}
+        onExpand={setExpandedKeys}
+        onCheck={setCheckedKeys}
+      />
+    </Modal>
+  )
+}
+
+export default MultiSelectModal

package/client/components/common/notification.styl

@@ -19,7 +19,7 @@
 
 .notification-message
   font-weight bold
-  margin-bottom 10px
+
 .notification-title
   overflow hidden
   text-overflow ellipsis

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/quick-commands/quick-commands-box.jsx

@@ -23,7 +23,7 @@ const { Option } = Select
 
 export default function QuickCommandsFooterBox (props) {
   const [keyword, setKeyword] = useState('')
-  const [labels, setLabels] = useState(ls.getItemJSON(quickCommandLabelsLsKey, []))
+  const [label, setLabel] = useState(ls.getItem(quickCommandLabelsLsKey, ''))
   const timer = useRef(null)
 
   function handleMouseLeave () {
@@ -68,8 +68,8 @@ export default function QuickCommandsFooterBox (props) {
   }
 
   function handleChangeLabels (v) {
-    ls.setItemJSON(quickCommandLabelsLsKey, v)
-    setLabels(v)
+    ls.setItem(quickCommandLabelsLsKey, v || '')
+    setLabel(v)
   }
 
   // function filterFunc (v, opt) {
@@ -132,10 +132,10 @@ export default function QuickCommandsFooterBox (props) {
     )
   }
 
-  function filterArray (array, keyword, labels) {
+  function filterArray (array, keyword, label) {
     return array.filter(obj => {
       const nameMatches = !keyword || obj.name.toLowerCase().includes(keyword)
-      const labelMatches = !labels.length || labels.some((label) => (obj.labels || []).includes(label))
+      const labelMatches = !label || (obj.labels || []).includes(label)
       return nameMatches && labelMatches
     })
   }
@@ -156,16 +156,16 @@ export default function QuickCommandsFooterBox (props) {
     return renderNoCmd()
   }
   const keyword0 = keyword.toLowerCase()
-  const filtered = filterArray(all, keyword0, labels)
+  const filtered = filterArray(all, keyword0, label)
   const sorted = qmSortByFrequency
     ? sortBy(filtered, (obj) => -(obj.clickCount || 0))
     : filtered
   const sprops = {
-    value: labels,
-    mode: 'multiple',
+    value: label,
     onChange: handleChangeLabels,
     placeholder: e('labels'),
-    className: 'qm-label-select'
+    className: 'qm-label-select',
+    allowClear: true
   }
   const tp = pinnedQuickCommandBar
     ? 'primary'

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

@@ -3,11 +3,9 @@ import {
   InputNumber,
   Space,
   Button,
-  Input,
-  Tag
+  Input
 } from 'antd'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
-import { formItemLayout } from '../../common/form-layout'
 import HelpIcon from '../common/help-icon'
 import { copy } from '../../common/clipboard'
 import { useRef } from 'react'
@@ -20,22 +18,26 @@ export default function renderQm () {
   const focused = useRef(0)
   function renderItem (field, i, add, remove) {
     return (
-      <Space
+      <Space.Compact
         align='center'
+        block
         key={field.key}
+        className='mg2b'
       >
+        <Space.Addon>{e('delay')}</Space.Addon>
         <FormItem
           label=''
           name={[field.name, 'delay']}
           required
+          noStyle
         >
           <InputNumber
             min={1}
             step={1}
             max={65535}
-            addonBefore={e('delay')}
             placeholder={100}
             className='compact-input'
+            suffix='ms'
           />
         </FormItem>
         <FormItem
@@ -43,6 +45,7 @@ export default function renderQm () {
           name={[field.name, 'command']}
           required
           className='mg2x'
+          noStyle
         >
           <Input.TextArea
             autoSize={{ minRows: 1 }}
@@ -56,9 +59,8 @@ export default function renderQm () {
         <Button
           icon={<MinusCircleOutlined />}
           onClick={() => remove(field.name)}
-          className='mg24b'
         />
-      </Space>
+      </Space.Compact>
     )
   }
   const commonCmds = [
@@ -86,28 +88,29 @@ export default function renderQm () {
 
   const cmds = commonCmds.map(c => {
     return (
-      <Tag
+      <Button
         title={c.desc}
-        variant='solid'
+        type='text'
         key={c.cmd}
+        size='small'
         onClick={() => {
           copy(c.cmd)
         }}
       >
         <b className='pointer'>{c.cmd}</b>
-      </Tag>
+      </Button>
     )
   })
   const label = (
     <div>
-      {e('commonCommands')}
+      {e('quickCommands')}
       <HelpIcon
         title={cmds}
       />
     </div>
   )
   return (
-    <FormItem {...formItemLayout} label={label}>
+    <FormItem label={label}>
       <FormList
         name='commands'
       >
@@ -124,7 +127,6 @@ export default function renderQm () {
                   <Button
                     type='dashed'
                     onClick={() => add()}
-                    block
                     icon={<PlusOutlined />}
                   >
                     {e('quickCommand')}

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

@@ -1,10 +1,10 @@
 import TreeList from '../tree-list/tree-list'
-import BookmarkTreeDelete from '../bookmark-form/tree-delete'
+import BookmarkTreeSelect from '../bookmark-form/tree-select'
 
 export default function BookmarkTreeList (props) {
   return props.bookmarkSelectMode
     ? (
-      <BookmarkTreeDelete
+      <BookmarkTreeSelect
         {...props}
       />
       )

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

@@ -41,31 +41,26 @@ export default function KeywordForm (props) {
 
   function renderItem (field, i, add, remove) {
     return (
-      <Space
+      <Space.Compact
         align='center'
         key={field.key}
-        className='mg3r'
+        className='mg3r mg2b'
       >
         <FormItem
-          hasFeedback
+          noStyle
+          required
+          name={[field.name, 'keyword']}
+          rules={[{ validator: checker }]}
         >
-          <FormItem
-            noStyle
-            required
-            name={[field.name, 'keyword']}
-            rules={[{ validator: checker }]}
-          >
-            <InputConfirm
-              addonBefore={renderBefore(field.name)}
-            />
-          </FormItem>
+          <InputConfirm
+            addonBefore={renderBefore(field.name)}
+          />
         </FormItem>
         <Button
           icon={<MinusCircleOutlined />}
           onClick={() => remove(field.name)}
-          className='mg24b'
         />
-      </Space>
+      </Space.Compact>
     )
   }
 

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

@@ -6,10 +6,10 @@ import {
   MoonOutlined
 } from '@ant-design/icons'
 import message from '../common/message'
+import { notification } from '../common/notification'
 import {
   Select,
   Switch,
-  Alert,
   Button,
   Table,
   Space,
@@ -42,8 +42,6 @@ const e = window.translate
 export default class SettingCommon extends Component {
   state = {
     ready: false,
-    languageChanged: false,
-    passwordChanged: false,
     submittingPass: false,
     passInputFocused: false,
     placeholderLogin: window.pre.requireAuth ? '********' : e('notSet'),
@@ -82,7 +80,6 @@ export default class SettingCommon extends Component {
       this.setState({
         loginPass: pass ? '********' : '',
         submittingPass: false,
-        passwordChanged: true,
         placeholderLogin: pass ? '********' : e('notSet')
       }, () => {
         this.submitting = false
@@ -121,10 +118,6 @@ export default class SettingCommon extends Component {
     })
   }
 
-  handleRestart = () => {
-    window.location.reload()
-  }
-
   handleResetAll = () => {
     this.saveConfig(
       deepCopy(defaultSettings)
@@ -137,13 +130,24 @@ export default class SettingCommon extends Component {
     })
   }
 
-  handleChangeLang = language => {
-    this.setState({
-      languageChanged: true
-    })
-    return this.saveConfig({
+  handleChangeLang = async language => {
+    await this.saveConfig({
       language
     })
+    notification.info({
+      message: (
+        <div>
+          {e('saveLang')}
+          <Button
+            onClick={() => window.location.reload()}
+            className='mg1l'
+            size='small'
+          >
+            {e('restartNow')}
+          </Button>
+        </div>
+      )
+    })
   }
 
   handleChangeTerminalTheme = id => {
@@ -199,30 +203,6 @@ export default class SettingCommon extends Component {
     )
   }
 
-  renderRestart = (name) => {
-    if (!this.state[name]) {
-      return null
-    }
-    return (
-      <div className='pd1t'>
-        <Alert
-          message={
-            <div>
-              {e('saveLang')}
-              <Button
-                onClick={this.handleRestart}
-                className='mg1l'
-              >
-                {e('restartNow')}
-              </Button>
-            </div>
-          }
-          type='success'
-        />
-      </div>
-    )
-  }
-
   renderNumber = (name, options, title = '') => {
     let value = this.props.config[name]
     if (options.valueParser) {
@@ -296,7 +276,7 @@ export default class SettingCommon extends Component {
     }
     return (
       <div className='pd2b'>
-        <Space.Compact block>
+        <Space.Compact className='width-100'>
           <InputConfirm
             value={value}
             onChange={onChange}
@@ -442,7 +422,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 (
@@ -592,7 +572,6 @@ export default class SettingCommon extends Component {
           </Select>
           <Link className='mg1l' to={createEditLangLink(language)}>{e('edit')}</Link>
         </div>
-        {this.renderRestart('languageChanged')}
         <div className='pd1b'>{e('default')} {e('execWindows')}</div>
         {
           this.renderTextExec('execWindows')

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>
@@ -537,7 +540,7 @@ export default class SettingTerminal extends Component {
             <Flex flex='auto'>{this.renderFontFamily()}</Flex>
           </Flex>
         </div>
-        <div className='pd2b'>
+        <div>
           <div className='pd1b'>
             <span className='inline-title mg1r'>{e('keywordsHighlight')}</span>
             <HelpIcon

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

@@ -24,8 +24,14 @@
   width 340px
   bottom 0
   padding 20px 0 20px 20px
-  .ant-tree
-    background none
+  display flex
+  flex-direction column
+  .model-bookmark-tree-wrap
+    flex 1
+    display flex
+    flex-direction column
+    overflow hidden
+    min-height 0
 .setting-row-right
   left 340px
   right 0

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

@@ -74,6 +74,7 @@ export default class FileSection extends React.Component {
   }
 
   componentWillUnmount () {
+    filesRef.remove(this.id)
     clearTimeout(this.timer)
     this.timer = null
     this.domRef = null
@@ -82,7 +83,6 @@ export default class FileSection extends React.Component {
   }
 
   clearRef = () => {
-    filesRef.remove(this.id)
     refs.remove(this.id)
   }
 
@@ -1112,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}

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/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-panel.jsx

@@ -2,17 +2,19 @@
  * bookmark select
  */
 
-import { memo } from 'react'
+import { memo, useState } from 'react'
 import BookmarkWrap from './bookmark'
 import History from './history'
 import { Tabs, Tooltip } from 'antd'
+import MultiSelectModal from '../common/multi-select-modal'
 import {
   ArrowsAltOutlined,
   EditOutlined,
   PlusCircleOutlined,
   ShrinkOutlined,
   PushpinOutlined,
-  UnorderedListOutlined
+  UnorderedListOutlined,
+  SelectOutlined
 } from '@ant-design/icons'
 
 const e = window.translate
@@ -20,6 +22,7 @@ const e = window.translate
 export default memo(function SidebarPanel (props) {
   const { sidebarPanelTab, pinned } = props
   const { store } = window
+  const [openSelectModal, setOpenSelectModal] = useState(false)
   const prps = {
     className: 'font16 mg1x mg2l pointer iblock control-icon'
   }
@@ -81,6 +84,12 @@ export default memo(function SidebarPanel (props) {
         <ShrinkOutlined
           {...pop3}
         />
+      </Tooltip>,
+      <Tooltip title={e('open') + ' ' + e('bookmarks')} key='multi'>
+        <SelectOutlined
+          {...prps}
+          onClick={() => setOpenSelectModal(true)}
+        />
       </Tooltip>
     ]
   }
@@ -119,6 +128,10 @@ export default memo(function SidebarPanel (props) {
           ? <BookmarkWrap {...props} />
           : <History store={store} />
       }
+      <MultiSelectModal
+        open={openSelectModal}
+        onClose={() => setOpenSelectModal(false)}
+      />
     </div>
   )
 })

package/client/components/sidebar/sidebar.styl

@@ -39,9 +39,15 @@
   right 0
   top 112px
   bottom 0
-  overflow-y scroll
-  .item-list-wrap
-    overflow-y hidden
+  overflow hidden
+  display flex
+  flex-direction column
+  .sidebar-inner
+    flex 1
+    display flex
+    flex-direction column
+    overflow hidden
+    min-height 0
 .not-system-ui.is-mac
   .sidebar-bar
     margin-top 20px

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/add-btn-menu.jsx

@@ -72,16 +72,20 @@ export default function AddBtnMenu ({
       <DragHandle
         {...dragProps}
       />
-      <div
-        className={cls}
-        onClick={onNewSsh}
-      >
-        <CodeFilled /> {e('newBookmark')}
+      <div className='add-menu-header'>
+        <div
+          className={cls}
+          onClick={onNewSsh}
+        >
+          <CodeFilled /> {e('newBookmark')}
+        </div>
+        {addTabBtn}
+      </div>
+      <div className='add-menu-list'>
+        <BookmarksList
+          store={window.store}
+        />
       </div>
-      {addTabBtn}
-      <BookmarksList
-        store={window.store}
-      />
     </div>
   )
 }

package/client/components/tabs/add-btn.styl

@@ -8,10 +8,20 @@
   box-shadow 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--main-darker)
   min-width 300px
   max-width 600px
-  overflow-y auto
+  overflow hidden
   margin-top 4px
   padding 4px 15px
+  display flex
+  flex-direction column
   .drag-handle
     right 3px
     display block
+  .add-menu-header
+    flex-shrink 0
+  .add-menu-list
+    flex 1
+    overflow hidden
+    display flex
+    flex-direction column
+    min-height 0
 

package/client/components/tabs/tab.jsx

@@ -399,7 +399,11 @@ class Tab extends Component {
   }
 
   render () {
-    const { isLast, tab, currentBatchTabId } = this.props
+    const {
+      isLast,
+      tab,
+      currentBatchTabId
+    } = this.props
     const {
       id,
       isEditting,
@@ -411,10 +415,12 @@ class Tab extends Component {
       terminalOnData
     } = this.state
     const active = id === currentBatchTabId
+    const activeAll = id === window.store.activeTabId
     const cls = classnames(
       `tab-${id}`,
       'tab',
       { active },
+      { 'active-all': activeAll },
       {
         'tab-last': isLast
       },

package/client/components/tabs/tabs.styl

@@ -52,8 +52,11 @@
   &.active
     color var(--text)
     background var(--main)
+  &.active-all
+    font-weight bold
     .tab-count
-      opacity 1
+      border-radius 15px
+      font-weight bold
   &:hover
     .tab-close
       display block

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>
@@ -849,14 +849,16 @@ export default class ItemListTree extends Component {
       : []
     return (
       <div className={`tree-list item-type-${type}`}>
-        {
-          staticList
-            ? null
-            : this.renderNewButtons()
-        }
-        {
-          this.renderSearch()
-        }
+        <div className='tree-list-header'>
+          {
+            staticList
+              ? null
+              : this.renderNewButtons()
+          }
+          {
+            this.renderSearch()
+          }
+        </div>
         <div className='item-list-wrap' style={listStyle}>
           {this.renderNewCat({ id: '' })}
           {level1Bookgroups.map(this.renderGroup)}

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
@@ -84,3 +85,17 @@
   max-height 300px
   overflow-y auto
   padding 8px
+
+.tree-list
+  display flex
+  flex-direction column
+  height 100%
+  overflow hidden
+
+.tree-list-header
+  flex-shrink 0
+
+.item-list-wrap
+  flex 1
+  overflow-y auto
+  min-height 0

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/bookmark.js

@@ -19,6 +19,13 @@ export default Store => {
     return window.store.setItems('bookmarks', items)
   }
 
+  Store.prototype.openBookmarks = function (ids) {
+    const { store } = window
+    ids.forEach(id => {
+      store.onSelectBookmark(id)
+    })
+  }
+
   Store.prototype.addSshConfigs = function (items) {
     const { store } = window
 

package/package.json

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