@electerm/electerm-react 3.1.26 → 3.3.8

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/vnc/vnc-session.jsx

@@ -186,6 +186,7 @@ export default class VncSession extends PureComponent {
       qualityLevel = 3, // 0-9, lower = faster performance
       compressionLevel = 1, // 0-9, lower = faster performance
       shared = true,
+      showDotCursor = true, // show dot cursor when server sends no cursor image (common on Windows)
       username,
       password
     } = tab
@@ -376,6 +377,7 @@ export default class VncSession extends PureComponent {
     rfb.qualityLevel = qualityLevel
     rfb.compressionLevel = compressionLevel
     rfb.viewOnly = viewOnly
+    rfb.showDotCursor = showDotCursor
     this.rfb = rfb
   }
 

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

@@ -49,6 +49,9 @@ export default function WidgetControl ({ formData, widgetInstancesLength }) {
         config
       }
       window.store.widgetInstances.push(instance)
+      if (config.autoRun) {
+        window.store.toggleAutoRunWidget(instance)
+      }
       showMsg(msg, 'success', result.serverInfo, 10)
     } catch (err) {
       console.error('Failed to run widget:', err)

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/components/widgets/widget-instance.jsx

@@ -1,12 +1,21 @@
-import { Popconfirm, Popover } from 'antd'
-import { CloseOutlined, CopyOutlined } from '@ant-design/icons'
+import {
+  Popconfirm,
+  Popover,
+  Tooltip,
+  Tag
+} from 'antd'
+import { CloseOutlined, CopyOutlined, ThunderboltOutlined } from '@ant-design/icons'
 import { copy } from '../../common/clipboard'
+import classnames from 'classnames'
+import { auto } from 'manate/react'
 
 const e = window.translate
 
-export default function WidgetInstance ({ item }) {
-  const { id, title, serverInfo } = item
-  const cls = 'item-list-unit'
+export default auto(function WidgetInstance ({ item }) {
+  const { id, title, serverInfo, autoRun } = item
+  const cls = classnames('item-list-unit', {
+    'autorun-active': autoRun
+  })
   const delProps = {
     title: e('del'),
     className: 'pointer list-item-remove'
@@ -31,6 +40,9 @@ export default function WidgetInstance ({ item }) {
       copy(serverInfo.url)
     }
   }
+  const handleToggleAutoRun = () => {
+    window.store.toggleAutoRunWidget(item)
+  }
   const popoverContent = serverInfo
     ? (
       <div>
@@ -45,12 +57,13 @@ export default function WidgetInstance ({ item }) {
       </div>
       )
     : null
+  const tag = autoRun ? <Tag color='green'>{e('autoRun')}</Tag> : null
   const titleDiv = (
     <div
       title={title}
       className='elli pd1y pd2x list-item-title'
     >
-      {title}
+      {tag} {title}
     </div>
   )
   return (
@@ -71,6 +84,12 @@ export default function WidgetInstance ({ item }) {
             )
           : titleDiv
       }
+      <Tooltip title='Toggle auto-run'>
+        <ThunderboltOutlined
+          className='pointer list-item-autorun'
+          onClick={handleToggleAutoRun}
+        />
+      </Tooltip>
       <Popconfirm
         {...popProps}
       >
@@ -78,4 +97,4 @@ export default function WidgetInstance ({ item }) {
       </Popconfirm>
     </div>
   )
-}
+})

package/client/css/includes/box.styl

@@ -106,6 +106,9 @@ for $i, $index in 5 16 32
   position absolute
 .pointer
   cursor pointer
+.drag
+  cursor move
+  user-select none
 .width-100
   width 100%
 .width-40

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/init-state.js

@@ -156,7 +156,7 @@ export default () => {
     qmSortByFrequency: ls.getItem(qmSortByFrequencyKey) === 'yes',
 
     // sidebar
-    openedSideBar: ls.getItem(openedSidebarKey),
+    openedSideBar: ls.getItem(openedSidebarKey) || '',
     leftSidebarWidth: parseInt(ls.getItem(leftSidebarWidthKey), 10) || 300,
     addPanelWidth: parseInt(ls.getItem(addPanelWidthLsKey), 10) || 300,
     menuOpened: false,
@@ -201,6 +201,7 @@ export default () => {
     // widgets
     widgets: [],
     widgetInstances: [],
+    autoRunWidgets: [],
     // move item
     openMoveModal: false,
     moveItem: null,

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)
   }
 }
 
@@ -208,7 +208,6 @@ export default (Store) => {
     )
     setTimeout(
       () => {
-        console.log('Auto sync is ready')
         store.autoSyncReady = true
       },
       2000
@@ -216,6 +215,9 @@ export default (Store) => {
     if (store.config.checkUpdateOnStart) {
       store.onCheckUpdate(false)
     }
+    store.startAutoRunWidgets().catch(err => {
+      console.error('Failed to start autorun widgets:', err)
+    })
   }
   Store.prototype.initCommandLine = async function () {
     const opts = await window.pre.runGlobalAsync('initCommandLine')

package/client/store/mcp-handler.js

@@ -130,6 +130,14 @@ export default Store => {
           result = await store.mcpSftpDownload(args)
           break
 
+        // Transfer list/history operations
+        case 'sftp_transfer_list':
+          result = store.mcpSftpTransferList()
+          break
+        case 'sftp_transfer_history':
+          result = store.mcpSftpTransferHistory()
+          break
+
         // Zmodem (trzsz/rzsz) operations
         case 'zmodem_upload':
           result = store.mcpZmodemUpload(args)
@@ -617,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 = {
@@ -662,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 = {
@@ -692,6 +700,16 @@ export default Store => {
     }
   }
 
+  // ==================== Transfer List/History APIs ====================
+
+  Store.prototype.mcpSftpTransferList = function () {
+    return deepCopy(window.store.fileTransfers)
+  }
+
+  Store.prototype.mcpSftpTransferHistory = function () {
+    return deepCopy(window.store.transferHistory)
+  }
+
   // ==================== Zmodem (trzsz/rzsz) APIs ====================
 
   Store.prototype.mcpZmodemUpload = function (args) {

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

package/client/store/watch.js

@@ -20,22 +20,6 @@ import { refsStatic } from '../components/common/ref'
 import dataCompare from '../common/data-compare'
 
 export default store => {
-  // autoRun(() => {
-  //   store.focus()
-  //   // store.termSearchOpen = false
-  //   store.termSearchMatchCount = 0
-  //   return store.activeTabId
-  // }).start()
-
-  // autoRun(() => {
-  //   if (store.menuOpened) {
-  //     store.initMenuEvent()
-  //   } else {
-  //     store.onCloseMenu()
-  //   }
-  //   return store.menuOpened
-  // })
-
   for (const name of dbNamesForWatch) {
     window[`watch${name}`] = autoRun(async () => {
       if (window.migrating) {
@@ -68,8 +52,16 @@ export default store => {
         )
       }
       await store.updateLastDataUpdateTime()
-      if (store.config.autoSync && dbNamesForSync.includes(name)) {
-        await store.uploadSettingAll()
+      if (dbNamesForSync.includes(name)) {
+        const syncSetting = store.config.syncSetting || {}
+        const { autoSync, autoSyncInterval, autoSyncDirection } = syncSetting
+        if (autoSync && autoSyncInterval === 0) {
+          if (autoSyncDirection === 'download') {
+            await store.downloadSettingAll()
+          } else {
+            await store.uploadSettingAll()
+          }
+        }
       }
       return store[name]
     })

package/client/store/widgets.js

@@ -7,6 +7,8 @@ import {
   settingMap
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
+import deepCopy from 'json-deep-copy'
+import generate from '../common/uid'
 
 export default Store => {
   Store.prototype.listWidgets = async () => {
@@ -58,4 +60,56 @@ export default Store => {
     store.settingTab = settingMap.widgets
     store.openSettingModal()
   }
+
+  Store.prototype.toggleAutoRunWidget = (instance) => {
+    const { store } = window
+    const { widgetId, config } = instance
+    if (instance.autoRun) {
+      const index = store.autoRunWidgets.findIndex(
+        w => w.id === instance.autoRunId
+      )
+      if (index > -1) {
+        store.autoRunWidgets.splice(index, 1)
+      }
+      instance.autoRun = false
+      instance.autoRunId = undefined
+    } else {
+      const id = generate()
+      const item = {
+        id,
+        widgetId,
+        config
+      }
+      store.autoRunWidgets.push(item)
+      instance.autoRun = true
+      instance.autoRunId = id
+    }
+  }
+
+  Store.prototype.startAutoRunWidgets = async function () {
+    const { store } = window
+    const items = store.autoRunWidgets
+    if (!items || !items.length) {
+      return
+    }
+    for (const item of items) {
+      try {
+        const result = await store.runWidget(item.widgetId, deepCopy(item.config))
+        if (result && result.instanceId) {
+          const instance = {
+            id: result.instanceId,
+            title: `${result.widgetId} (${result.instanceId})`,
+            widgetId: result.widgetId,
+            serverInfo: result.serverInfo,
+            config: item.config,
+            autoRun: true,
+            autoRunId: item.id
+          }
+          store.widgetInstances.push(instance)
+        }
+      } catch (err) {
+        console.error(`Failed to autorun widget ${item.widgetId}:`, err)
+      }
+    }
+  }
 }

package/client/views/index.pug

@@ -33,8 +33,7 @@ html
       }
 
     - if (!isDev)
-      link(rel='stylesheet', href='css/' + version + '-basic.css')
-      link(rel='stylesheet', href='css/' + version + '-electerm.css')
+      link(rel='stylesheet', href='css/style-' + version + '.css')
       style(id='theme-css').
       style(id='custom-css').
   body

package/package.json

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