@electerm/electerm-react 3.2.0 → 3.5.6

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

@@ -1,3 +1,4 @@
+import React, { useRef, useEffect } from 'react'
 import {
   ArrowUpOutlined,
   EyeInvisibleFilled,
@@ -74,9 +75,15 @@ function renderAddonBefore (props, realPath) {
 }
 
 function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (!isLoadingRemote) {
+      onGoto(type)
+    }
+  }
   return (
     <GoIcon
-      onClick={isLoadingRemote ? () => null : () => onGoto(type)}
+      onClick={handleClick}
     />
   )
 }
@@ -128,15 +135,28 @@ export default function AddressBar (props) {
   const GoIcon = isLoadingRemote
     ? LoadingOutlined
     : (realPath === path ? ReloadOutlined : ArrowRightOutlined)
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    const wrapEl = inputRef.current
+    if (!wrapEl) return
+    const inputEl = wrapEl.querySelector('input')
+    if (!inputEl) return
+    const handler = () => props.onInputFocus(type)
+    inputEl.addEventListener('click', handler)
+    return () => {
+      inputEl.removeEventListener('click', handler)
+    }
+  }, [type])
+
   return (
     <div className='pd1y sftp-title-wrap'>
-      <div className='sftp-title'>
+      <div className='sftp-title' ref={inputRef}>
         <Input
           value={path}
           onChange={e => props.onChange(e, n)}
           onPressEnter={e => props.onGoto(type, e)}
           prefix={renderAddonBefore(props, realPath)}
-          onFocus={() => props.onInputFocus(type)}
           onBlur={() => props.onInputBlur(type)}
           disabled={loadingSftp}
           suffix={

package/client/components/sidebar/bookmark-select.jsx

@@ -6,7 +6,7 @@ import { auto } from 'manate/react'
 import TreeList from '../tree-list/tree-list'
 
 export default auto(function BookmarkSelect (props) {
-  const { store, from } = props
+  const { store, from, autoFocus } = props
   const {
     listStyle,
     openedSideBar,
@@ -38,7 +38,8 @@ export default auto(function BookmarkSelect (props) {
     bookmarkGroups: store.getBookmarkGroupsTotal(),
     expandedKeys,
     leftSidebarWidth,
-    bookmarkGroupTree: store.bookmarkGroupTree
+    bookmarkGroupTree: store.bookmarkGroupTree,
+    autoFocus
   }
   return (
     <TreeList

package/client/components/sidebar/history-item.jsx

@@ -40,7 +40,9 @@ export default function HistoryItem (props) {
     e.stopPropagation()
     refsStatic.get('bookmark-from-history-modal')?.show(item.tab)
   }
-
+  if (!item.tab) {
+    return null
+  }
   const title = createTitleWithTag(item.tab)
   const tt = createTitle(item.tab)
   return (

package/client/components/sidebar/index.jsx

@@ -6,7 +6,6 @@ import {
   PlusCircleOutlined,
   SettingOutlined,
   UpCircleOutlined,
-  BarsOutlined,
   AppstoreOutlined,
   ThunderboltOutlined
 } from '@ant-design/icons'
@@ -92,7 +91,6 @@ export default function Sidebar (props) {
     openAbout,
     openSettingSync,
     openTerminalThemes,
-    toggleBatchOp,
     setLeftSidePanelWidth
   } = store
   const {
@@ -102,7 +100,6 @@ export default function Sidebar (props) {
     shouldUpgrade
   } = upgradeInfo
   const showSetting = showModal === modals.setting
-  const showBatchOp = showModal === modals.batchOps
   const settingActive = showSetting && settingTab === settingMap.setting && settingItem.id === 'setting-common'
   const syncActive = showSetting && settingTab === settingMap.setting && settingItem.id === 'setting-sync'
   const themeActive = showSetting && settingTab === settingMap.terminalThemes
@@ -190,12 +187,6 @@ export default function Sidebar (props) {
             spin={isSyncingSetting}
           />
         </SideIcon>
-        <SideIcon
-          title={e('batchOp')}
-          active={showBatchOp}
-        >
-          <BarsOutlined className='iblock font20 control-icon' onClick={toggleBatchOp} />
-        </SideIcon>
         <SideIcon
           title={e('widgets')}
           active={widgetsActive}

package/client/components/sidebar/info-modal.jsx

@@ -42,8 +42,10 @@ export default auto(function InfoModal (props) {
       upgradeInfo
     } = props
     const onCheckUpdating = upgradeInfo.checkingRemoteVersion || upgradeInfo.upgrading
+    const { noUpdateMessage, noUpdateMessageExpires } = upgradeInfo
+    const showMessage = noUpdateMessage && noUpdateMessageExpires && Date.now() < noUpdateMessageExpires
     return (
-      <p className='mg1b mg2t'>
+      <div className='mg1b mg2t'>
         <Button
           type='primary'
           loading={onCheckUpdating}
@@ -51,7 +53,10 @@ export default auto(function InfoModal (props) {
         >
           {e('checkForUpdate')}
         </Button>
-      </p>
+        {showMessage && (
+          <span className='mg1l update-msg'>{noUpdateMessage}</span>
+        )}
+      </div>
     )
   }
 

package/client/components/tabs/add-btn-menu.jsx

@@ -75,7 +75,7 @@ export default function AddBtnMenu ({
 
   let listContent
   if (activeTab === 'bookmarks') {
-    listContent = <BookmarksList store={window.store} />
+    listContent = <BookmarksList store={window.store} autoFocus />
   } else {
     listContent = <History store={window.store} />
   }

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

@@ -40,15 +40,18 @@ export default class AddBtn extends Component {
   componentWillUnmount () {
     if (this.state.open) {
       document.removeEventListener('click', this.handleDocumentClick)
+      document.removeEventListener('keydown', this.handleKeyDown)
     }
     // Clean up portal container
     if (this.portalContainer) {
       document.body.removeChild(this.portalContainer)
       this.portalContainer = null
     }
-    // Clear focus timeout
-    if (this.çƒ) {
-      clearTimeout(this.focusTimeout)
+  }
+
+  handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      this.setState({ open: false })
     }
   }
 
@@ -56,8 +59,10 @@ export default class AddBtn extends Component {
     // Attach or detach document click listener only when menu open state changes
     if (this.state.open && !prevState.open) {
       document.addEventListener('click', this.handleDocumentClick)
+      document.addEventListener('keydown', this.handleKeyDown)
     } else if (!this.state.open && prevState.open) {
       document.removeEventListener('click', this.handleDocumentClick)
+      document.removeEventListener('keydown', this.handleKeyDown)
     }
   }
 
@@ -115,17 +120,6 @@ export default class AddBtn extends Component {
     )
   }
 
-  focusSearchInput = () => {
-    // Focus the search input after the menu renders
-    this.focusTimeout = setTimeout(() => {
-      const searchInput = this.menuRef.current?.querySelector('.add-menu-list .ant-input')
-      if (searchInput) {
-        searchInput.focus()
-        searchInput.select()
-      }
-    }, 500)
-  }
-
   handleAddBtnClick = () => {
     if (this.state.open) {
       this.setState({ open: false })
@@ -172,7 +166,7 @@ export default class AddBtn extends Component {
           menuPosition,
           menuTop,
           menuLeft
-        }, this.focusSearchInput)
+        })
 
         window.openTabBatch = this.props.batch
       }

package/client/components/tabs/quick-connect.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
-import { Button, Space } from 'antd'
+import { Button, Space, Input } from 'antd'
 import { ArrowRightOutlined, ThunderboltOutlined } from '@ant-design/icons'
 import message from '../common/message'
 import InputAutoFocus from '../common/input-auto-focus'
@@ -29,18 +29,14 @@ export default function QuickConnect ({ batch, inputOnly }) {
   const [inputValue, setInputValue] = useState('')
   const inputRef = useRef(null)
 
-  useEffect(() => {
-    if (showInput && inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [showInput])
-
-  // When inputOnly is true, always show the input
+  // When inputOnly is true, always show the input (without auto-focus)
   useEffect(() => {
     if (inputOnly) {
       setShowInput(true)
+    } else if (showInput && inputRef.current) {
+      inputRef.current.focus()
     }
-  }, [inputOnly])
+  }, [inputOnly, showInput])
 
   const handleToggle = () => {
     setShowInput(!showInput)
@@ -94,7 +90,7 @@ export default function QuickConnect ({ batch, inputOnly }) {
         <Button
           {...iconsProps1}
         />
-        <InputAutoFocus {...inputProps} />
+        {inputOnly ? <Input {...inputProps} /> : <InputAutoFocus {...inputProps} />}
         <Button
           {...iconProps}
         />

package/client/components/terminal/terminal.jsx

@@ -378,11 +378,10 @@ class Term extends Component {
   }
 
   runQuickCommand = (cmd, inputOnly = false) => {
-    this.term && this.attachAddon._sendData(
-      cmd +
-      (inputOnly ? '' : '\r')
-    )
-    this.term.focus()
+    if (this.term && this.attachAddon) {
+      this.attachAddon._sendData(cmd + (inputOnly ? '' : '\r'))
+      this.term.focus()
+    }
   }
 
   cd = (p) => {

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

@@ -2,6 +2,7 @@
  * tree list for bookmarks
  */
 
+import React from 'react'
 import { Component } from 'manate/react/class-components'
 import {
   CheckOutlined,
@@ -44,6 +45,7 @@ export default class ItemListTree extends Component {
       categoryColor: '',
       categoryId: ''
     }
+    this.treeRef = React.createRef()
   }
 
   onSubmit = false
@@ -102,9 +104,55 @@ export default class ItemListTree extends Component {
   }
 
   handleChange = keyword => {
-    this.setState({
-      keyword
+    this.setState({ keyword })
+  }
+
+  handleKeyDown = (e) => {
+    const { keyword } = this.state
+    if (!keyword) return
+
+    const treeContainer = this.treeRef.current
+    if (!treeContainer) return
+
+    const allItems = treeContainer.querySelectorAll('.tree-item')
+    const matchedItems = Array.from(allItems).filter(item => {
+      const isGroup = item.getAttribute('data-is-group') === 'true'
+      if (isGroup) return false
+      const title = item.querySelector('.tree-item-title')
+      if (!title) return false
+      const text = title.textContent || ''
+      return text.toLowerCase().includes(keyword.toLowerCase())
     })
+
+    if (matchedItems.length === 0) return
+
+    const currentSelected = treeContainer.querySelector('.tree-item.search-selected')
+    let currentIndex = -1
+    if (currentSelected) {
+      currentSelected.classList.remove('search-selected')
+      currentIndex = matchedItems.indexOf(currentSelected)
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const nextIndex = (currentIndex + 1) % matchedItems.length
+      matchedItems[nextIndex].classList.add('search-selected')
+      matchedItems[nextIndex].scrollIntoView({ block: 'nearest' })
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const nextIndex = currentIndex <= 0 ? matchedItems.length - 1 : currentIndex - 1
+      matchedItems[nextIndex].classList.add('search-selected')
+      matchedItems[nextIndex].scrollIntoView({ block: 'nearest' })
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const target = currentIndex >= 0 ? matchedItems[currentIndex] : matchedItems[0]
+      if (target) {
+        const titleEl = target.querySelector('.tree-item-title')
+        if (titleEl) {
+          titleEl.click()
+        }
+      }
+    }
   }
 
   handleCancelNew = () => {
@@ -298,8 +346,8 @@ export default class ItemListTree extends Component {
   onSelect = (
     e
   ) => {
-    const id = e.target.getAttribute('data-item-id')
-    const isGroup = e.target.getAttribute('data-is-group') === 'true'
+    const id = e.currentTarget.getAttribute('data-item-id')
+    const isGroup = e.currentTarget.getAttribute('data-is-group') === 'true'
     const { store } = window
     if (isGroup) {
       store.storeAssign({
@@ -329,6 +377,8 @@ export default class ItemListTree extends Component {
         <TreeSearch
           onSearch={this.handleChange}
           keyword={this.state.keyword}
+          autoFocus={this.props.autoFocus}
+          onKeyDown={this.handleKeyDown}
         />
       </div>
     )
@@ -717,6 +767,35 @@ export default class ItemListTree extends Component {
   renderGroup = (group, index, parentId) => {
     const pids = typeof parentId === 'string' ? parentId : ''
     const pid = pids + '#' + group.id
+    const { bookmarkIds = [], bookmarkGroupIds = [] } = group
+
+    const hasMatchedItems = (ids) => {
+      const tree = this.props.bookmarksMap
+      const { keyword } = this.state
+      return ids.some(id => {
+        const item = tree.get(id)
+        return item && createName(item).toLowerCase().includes(keyword.toLowerCase())
+      })
+    }
+
+    const hasMatchedSubGroup = (bg) => {
+      const bgIds = bg.bookmarkIds || []
+      const bgSubIds = bg.bookmarkGroupIds || []
+      if (hasMatchedItems(bgIds)) return true
+      return bgSubIds.some(sgid => {
+        const subBg = window.store.bookmarkGroupTree[sgid]
+        return subBg && hasMatchedSubGroup(subBg)
+      })
+    }
+
+    if (this.state.keyword) {
+      if (!hasMatchedItems(bookmarkIds) && !bookmarkGroupIds.some(id => {
+        const sg = window.store.bookmarkGroupTree[id]
+        return sg && hasMatchedSubGroup(sg)
+      })) {
+        return null
+      }
+    }
     return (
       <div key={group.id} className='group-container'>
         {
@@ -803,9 +882,14 @@ export default class ItemListTree extends Component {
     if (!shouldRender) {
       return null
     }
+    const subGroups = this.renderSubGroup(bookmarkGroupIds, parentId)
+    const childs = this.renderChilds(bookmarkIds, parentId)
+    if (this.state.keyword && subGroups.length === 0 && childs.length === 0) {
+      return null
+    }
     return [
-      ...this.renderSubGroup(bookmarkGroupIds, parentId),
-      ...this.renderChilds(bookmarkIds, parentId)
+      ...subGroups,
+      ...childs
     ]
   }
 
@@ -851,12 +935,33 @@ export default class ItemListTree extends Component {
       listStyle = {}
     } = this.props
     const level1Bookgroups = ready
-      ? bookmarkGroups.filter(
-        d => !d.level || d.level < 2
-      )
+      ? bookmarkGroups.filter(d => {
+        if (!d.level || d.level < 2) {
+          if (this.state.keyword) {
+            const hasMatchedItemsRecursive = (bg) => {
+              const ids = bg.bookmarkIds || []
+              const subIds = bg.bookmarkGroupIds || []
+              const tree = this.props.bookmarksMap
+              const { keyword } = this.state
+              const hasMatch = ids.some(id => {
+                const item = tree.get(id)
+                return item && createName(item).toLowerCase().includes(keyword.toLowerCase())
+              })
+              if (hasMatch) return true
+              return subIds.some(sgid => {
+                const subBg = window.store.bookmarkGroupTree[sgid]
+                return subBg && hasMatchedItemsRecursive(subBg)
+              })
+            }
+            return hasMatchedItemsRecursive(d)
+          }
+          return true
+        }
+        return false
+      })
       : []
     return (
-      <div className={`tree-list item-type-${type}`}>
+      <div className={`tree-list item-type-${type}`} ref={this.treeRef}>
         <div className='tree-list-header'>
           {
             staticList

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

@@ -18,6 +18,9 @@
     .tree-item-title
       font-weight bold
       font-size 14px
+
+  &.search-selected
+    outline 1px dashed var(--primary)
   &.selected
   &.item-dragover
   &:hover

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

@@ -3,7 +3,7 @@ import { debounce } from 'lodash-es'
 import Search from '../common/search'
 import runIdle from '../../common/run-idle'
 
-export default memo(function TreeSearchComponent ({ onSearch, keyword }) {
+export default memo(function TreeSearchComponent ({ onSearch, keyword, autoFocus, onKeyDown }) {
   const [searchTerm, setSearchTerm] = useState(keyword)
 
   const performSearch = debounce((term) => {
@@ -18,11 +18,19 @@ export default memo(function TreeSearchComponent ({ onSearch, keyword }) {
     performSearch(term)
   }
 
+  const handleKeyDown = (e) => {
+    if (onKeyDown) {
+      onKeyDown(e)
+    }
+  }
+
   return (
     <Search
       onChange={handleChange}
+      onKeyDown={handleKeyDown}
       value={searchTerm}
       allowClear
+      autoFocus={autoFocus}
     />
   )
 })

package/client/components/widgets/widget-form.jsx

@@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react'
 import { Form, Input, InputNumber, Switch, Select, Button, Tooltip, Alert } from 'antd'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 import HelpIcon from '../common/help-icon'
+import BatchOpEditor from '../batch-op/batch-op-editor'
 
 export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInstance }) {
   const [form] = Form.useForm()
@@ -33,6 +34,7 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
   const { info } = widget
   const { configs, type, singleInstance } = info
   const isInstanceWidget = type === 'instance'
+  const isFrontendWidget = type === 'frontend'
   const txt = isInstanceWidget ? 'Start widget' : 'Run widget'
   const isDisabled = loading || (singleInstance && hasRunningInstance)
 
@@ -112,6 +114,10 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
     return acc
   }, {})
 
+  if (isFrontendWidget && info.name === 'Batch Operation') {
+    return <BatchOpEditor widget={widget} />
+  }
+
   return (
     <div className='widget-form'>
       <div className='pd1b alignright'>

package/client/store/app-upgrade.js

@@ -5,8 +5,8 @@
 import { refsStatic } from '../components/common/ref'
 
 export default Store => {
-  Store.prototype.onCheckUpdate = (noSkip = true) => {
-    refsStatic.get('upgrade')?.appUpdateCheck(noSkip)
+  Store.prototype.onCheckUpdate = (isManual = false) => {
+    refsStatic.get('upgrade')?.appUpdateCheck(isManual)
   }
   Store.prototype.getProxySetting = function () {
     const {

package/client/store/common.js

@@ -6,7 +6,6 @@ import handleError from '../common/error-handler'
 import Modal from '../components/common/modal'
 import { debounce, some, get, pickBy } from 'lodash-es'
 import {
-  modals,
   leftSidebarWidthKey,
   rightSidebarWidthKey,
   addPanelWidthLsKey,
@@ -95,33 +94,6 @@ export default Store => {
     window.store['_' + name] = JSON.stringify(value)
   }
 
-  Store.prototype.toggleBatchOp = function () {
-    window.store.showModal = window.store.showModal === modals.batchOps ? modals.hide : modals.batchOps
-  }
-
-  Store.prototype.runBatchOp = function (path) {
-    window.store.showModal = modals.batchOps
-    async function updateText () {
-      const text = await window.fs.readFile(path)
-      refsStatic.get('batch-op')?.setState({
-        text
-      })
-    }
-    function queue () {
-      refsStatic.get('batch-op')?.handleClick()
-    }
-    function run () {
-      refsStatic.get('batch-op')?.handleExec()
-    }
-    try {
-      setTimeout(updateText, 2000)
-      setTimeout(queue, 3000)
-      setTimeout(run, 4000)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
   Store.prototype.setSettingItem = function (v) {
     window.store.settingItem = v
   }

package/client/store/load-data.js

@@ -7,12 +7,12 @@ import parseInt10 from '../common/parse-int10'
 import { infoTabs, statusMap, defaultEnvLang } from '../common/constants'
 import fs from '../common/fs'
 import generate from '../common/id-with-stamp'
+import { refsStatic } from '../components/common/ref'
 import defaultSettings from '../common/default-setting'
 import encodes from '../components/bookmark-form/common/encodes'
 import { initWsCommon } from '../common/fetch-from-server'
 import safeParse from '../common/parse-json-safe'
 import initWatch from './watch'
-import { refsStatic } from '../components/common/ref'
 import { parseQuickConnect } from '../common/parse-quick-connect'
 
 function getHost (argv, opts) {
@@ -108,8 +108,8 @@ export async function addTabFromCommandLine (store, opts) {
   ) {
     window.initFolder = options.initFolder
   }
-  if (options && options.batchOp) {
-    window.store.runBatchOp(options.batchOp)
+  if (options.batchOp) {
+    refsStatic.get('batch-op-runner')?.runBatchOpFromFile(options.batchOp)
   }
 }
 

package/client/store/mcp-handler.js

@@ -625,7 +625,7 @@ export default Store => {
       throw new Error('remotePath is required')
     }
 
-    window._transferConflictPolicy = args.conflictPolicy || 'overwrite'
+    window._transferConflictPolicy = args.conflictPolicy || 'mergeOrOverwriteAll'
 
     const fromFile = await getLocalFileInfo(localPath)
     const transferItem = {
@@ -670,7 +670,7 @@ export default Store => {
       throw new Error('localPath is required')
     }
 
-    window._transferConflictPolicy = args.conflictPolicy || 'overwrite'
+    window._transferConflictPolicy = args.conflictPolicy || 'mergeOrOverwriteAll'
 
     const fromFile = await getRemoteFileInfo(sftp, remotePath)
     const transferItem = {

package/client/store/sync.js

@@ -176,6 +176,30 @@ export default (Store) => {
     window.onSyncAll = false
   }
 
+  Store.prototype.downloadSettingAll = async function () {
+    const { store, onSyncAll } = window
+    if (store.autoSyncReady === false) {
+      return
+    }
+    if (onSyncAll) {
+      return
+    }
+    window.onSyncAll = true
+    const types = Object.keys(syncTypes)
+    for (const type of types) {
+      const gistId = store.getSyncGistId(type)
+      if (type === syncTypes.webdav) {
+        const serverUrl = get(window.store.config, 'syncSetting.webdavServerUrl')
+        if (serverUrl) {
+          await store.downloadSetting(type)
+        }
+      } else if (gistId) {
+        await store.downloadSetting(type)
+      }
+    }
+    window.onSyncAll = false
+  }
+
   Store.prototype.uploadSetting = async function (type) {
     if (window[type + 'IsSyncing']) {
       return false
@@ -561,7 +585,7 @@ export default (Store) => {
 
   Store.prototype.handleAutoSync = function (v) {
     const { store } = window
-    store.setConfig({
+    store.updateSyncSetting({
       autoSync: v
     })
   }

package/client/store/tab.js

@@ -509,7 +509,7 @@ export default Store => {
       'autoReConnect'
     ]
     const { history } = store
-    const index = history.findIndex(d => {
+    const index = history.filter(d => d.id && d.tab).findIndex(d => {
       for (const key in tab) {
         if (tabPropertiesExcludes.includes(key)) {
           continue