@electerm/electerm-react 3.1.26 → 3.3.8

package/client/components/main/main.jsx

@@ -6,7 +6,6 @@ import UpdateCheck from './upgrade'
 import SettingModal from '../setting-panel/setting-modal'
 import TextEditor from '../text-editor/text-editor'
 import Sidebar from '../sidebar'
-import BatchOp from '../batch-op/batch-op'
 import CssOverwrite from '../bg/css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from '../bg/custom-css.jsx'
@@ -34,6 +33,9 @@ import MoveItemModal from '../tree-list/move-item-modal'
 import InputContextMenu from '../common/input-context-menu'
 import WorkspaceSaveModal from '../tabs/workspace-save-modal'
 import BookmarkFromHistoryModal from '../bookmark-form/bookmark-from-history-modal'
+import AutoSync from '../setting-sync/auto-sync'
+import AutoCheckUpdate from '../common/auto-check-update'
+import BatchOpRunner from '../batch-op/batch-op-runner'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -184,11 +186,6 @@ export default auto(function Index (props) {
     fileTransferChanged: JSON.stringify(copiedTransfer),
     fileTransfers: copiedTransfer
   }
-  const batchOpProps = {
-    transferHistory,
-    showModal: store.showModal,
-    innerWidth: store.innerWidth
-  }
   const resProps = {
     resolutions: deepCopy(store.resolutions),
     openResolutionEdit
@@ -263,7 +260,6 @@ export default auto(function Index (props) {
         />
         <FileInfoModal />
         <SettingModal store={store} />
-        <BatchOp {...batchOpProps} />
         <MoveItemModal store={store} />
         <div
           id='outside-context'
@@ -295,9 +291,12 @@ export default auto(function Index (props) {
         <ConnectionHoppingWarning {...warningProps} />
         <TerminalCmdSuggestions {...cmdSuggestionsProps} />
         <TransferQueue />
+        <AutoSync config={config} />
+        <AutoCheckUpdate config={config} />
         <WorkspaceSaveModal store={store} />
         <BookmarkFromHistoryModal />
         <NotificationContainer />
+        <BatchOpRunner />
       </div>
     </ConfigProvider>
   )

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

@@ -27,8 +27,6 @@
   border: 1px dashed var(--primary)
 .qm-item-dragover
   border-left 2px solid var(--primary)
-.qm-drag-handle
-  cursor grab
 .qm-field-dragging
   opacity 0.4
 .qm-field-dragover

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

@@ -76,7 +76,7 @@ export default function renderQm (form) {
         onDrop={(e) => handleDrop(e, i, form)}
         onDragEnd={handleDragEnd}
       >
-        <HolderOutlined className='mg1r qm-drag-handle' />
+        <HolderOutlined className='mg1r drag' />
 
         <Space.Addon>{e('delay')}</Space.Addon>
         <FormItem

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

@@ -51,6 +51,12 @@ export default class HotkeySetting extends Component {
     })
   }
 
+  handleClear = () => {
+    return this.props.onSaveConfig({
+      hotkey: ''
+    })
+  }
+
   convertToElectronAccelerator = (shortcut) => {
     if (!shortcut) return shortcut
 
@@ -117,7 +123,9 @@ export default class HotkeySetting extends Component {
         index: 0
       },
       updateConfig: this.onChangeHotkey,
-      keysTaken: this.getKeysTaken(hotkey)
+      keysTaken: this.getKeysTaken(hotkey),
+      handleClear: this.handleClear,
+      renderClear: true
     }
 
     return (

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

@@ -11,7 +11,6 @@ import { noop } from 'lodash-es'
 import highlight from '../common/highlight'
 import { settingSyncId, settingCommonId, staticNewItemTabs } from '../../common/constants'
 import getInitItem from '../../common/init-setting-item'
-import './list.styl'
 
 const e = window.translate
 

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

@@ -8,6 +8,7 @@
 .list-item-remove
 .list-item-bookmark
 .list-item-duplicate
+.list-item-autorun
   display none
   width 24px
   line-height 35px
@@ -15,6 +16,8 @@
   position absolute
   right 0
   top 0
+.list-item-autorun
+  right 24px
 
 .list-item-title
   flex-grow: 1
@@ -37,6 +40,7 @@
     .list-item-remove
     .list-item-bookmark
     .list-item-duplicate
+    .list-item-autorun
       display block
 .theme-item:hover
     .list-item-remove

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

@@ -4,18 +4,22 @@
 
 import { auto } from 'manate/react'
 import { pick } from 'lodash-es'
-import { Tabs } from 'antd'
+import { Tabs, Spin } from 'antd'
+import { lazy, Suspense } from 'react'
 import SettingModal from './setting-wrap'
 import {
   settingMap,
   modals
 } from '../../common/constants'
-import TabBookmarks from './tab-bookmarks'
-import TabQuickCommands from './tab-quick-commands'
-import TabSettings from './tab-settings'
-import TabThemes from './tab-themes'
-import TabProfiles from './tab-profiles'
-import TabWidgets from './tab-widgets'
+
+const TabBookmarks = lazy(() => import('./tab-bookmarks'))
+const TabQuickCommands = lazy(() => import('./tab-quick-commands'))
+const TabSettings = lazy(() => import('./tab-settings'))
+const TabThemes = lazy(() => import('./tab-themes'))
+const TabProfiles = lazy(() => import('./tab-profiles'))
+const TabWidgets = lazy(() => import('./tab-widgets'))
+
+const Loading = () => <div style={{ padding: 20, textAlign: 'center' }}><Spin /></div>
 
 const e = window.translate
 
@@ -115,46 +119,48 @@ export default auto(function SettingModalWrap (props) {
         <Tabs
           {...tabsProps}
         />
-        <TabQuickCommands
-          listProps={props0}
-          settingItem={settingItem}
-          formProps={formProps}
-          store={store}
-          settingTab={settingTab}
-        />
-        <TabBookmarks
-          treeProps={treeProps}
-          settingItem={settingItem}
-          formProps={formProps}
-          settingTab={settingTab}
-        />
-        <TabSettings
-          listProps={props0}
-          settingItem={settingItem}
-          settingTab={settingTab}
-          store={store}
-        />
-        <TabThemes
-          listProps={props0}
-          settingItem={settingItem}
-          formProps={formProps}
-          store={store}
-          settingTab={settingTab}
-        />
-        <TabProfiles
-          listProps={props0}
-          settingItem={settingItem}
-          formProps={formProps}
-          store={store}
-          settingTab={settingTab}
-        />
-        <TabWidgets
-          listProps={props0}
-          settingItem={settingItem}
-          formProps={formProps}
-          store={store}
-          settingTab={settingTab}
-        />
+        <Suspense fallback={<Loading />}>
+          <TabQuickCommands
+            listProps={props0}
+            settingItem={settingItem}
+            formProps={formProps}
+            store={store}
+            settingTab={settingTab}
+          />
+          <TabBookmarks
+            treeProps={treeProps}
+            settingItem={settingItem}
+            formProps={formProps}
+            settingTab={settingTab}
+          />
+          <TabSettings
+            listProps={props0}
+            settingItem={settingItem}
+            settingTab={settingTab}
+            store={store}
+          />
+          <TabThemes
+            listProps={props0}
+            settingItem={settingItem}
+            formProps={formProps}
+            store={store}
+            settingTab={settingTab}
+          />
+          <TabProfiles
+            listProps={props0}
+            settingItem={settingItem}
+            formProps={formProps}
+            store={store}
+            settingTab={settingTab}
+          />
+          <TabWidgets
+            listProps={props0}
+            settingItem={settingItem}
+            formProps={formProps}
+            store={store}
+            settingTab={settingTab}
+          />
+        </Suspense>
       </>
     )
   }

package/client/components/setting-sync/auto-sync.jsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from 'react'
+
+export default function AutoSync ({ config }) {
+  const lastSyncTimeRef = useRef(0)
+  const intervalIdRef = useRef(null)
+
+  useEffect(() => {
+    if (
+      !config.syncSetting?.autoSync || config.syncSetting?.autoSyncInterval <= 0
+    ) {
+      clearInterval(intervalIdRef.current)
+      return
+    }
+    const checkAndSync = async () => {
+      const syncSetting = config.syncSetting || {}
+      const { autoSync, autoSyncInterval = 0, autoSyncDirection = 'upload' } = syncSetting
+
+      if (!autoSync) {
+        return
+      }
+
+      if (autoSyncInterval <= 0) {
+        return
+      }
+
+      const now = Date.now()
+      const intervalMs = autoSyncInterval * 60 * 1000
+      if (now - lastSyncTimeRef.current >= intervalMs) {
+        const { store } = window
+        if (autoSyncDirection === 'download') {
+          await store.downloadSettingAll()
+        } else {
+          await store.uploadSettingAll()
+        }
+        lastSyncTimeRef.current = now
+      }
+    }
+
+    intervalIdRef.current = setInterval(checkAndSync, 10000)
+
+    return () => {
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current)
+      }
+    }
+  }, [
+    config.syncSetting?.autoSync,
+    config.syncSetting?.autoSyncInterval,
+    config.syncSetting?.autoSyncDirection
+  ])
+
+  return null
+}

package/client/components/setting-sync/data-import.jsx

@@ -5,22 +5,65 @@
 import {
   Button,
   Switch,
-  Tooltip
+  Select,
+  Space
 } from 'antd'
 import {
   ImportOutlined,
-  ExportOutlined,
-  InfoCircleOutlined
+  ExportOutlined
 } from '@ant-design/icons'
 import Upload from '../common/upload'
+import HelpIcon from '../common/help-icon'
 
 const e = window.translate
 
+const intervalOptions = [
+  { value: 0, label: e('autoSyncOnChange') },
+  { value: 5, label: '5 ' + e('minutes') },
+  { value: 10, label: '10 ' + e('minutes') },
+  { value: 15, label: '15 ' + e('minutes') },
+  { value: 30, label: '30 ' + e('minutes') },
+  { value: 60, label: '1 ' + e('hours') },
+  { value: 120, label: '2 ' + e('hours') },
+  { value: 360, label: '6 ' + e('hours') },
+  { value: 720, label: '12 ' + e('hours') },
+  { value: 1440, label: '24 ' + e('hours') }
+]
+
+const directionOptions = [
+  { value: 'upload', label: e('uploadSettings') },
+  { value: 'download', label: e('downloadSettings') }
+]
+
 export default function DataTransport (props) {
   const txt = e('autoSync')
   const {
     store
   } = window
+
+  const syncSetting = props.config.syncSetting || {}
+  const autoSyncEnabled = syncSetting.autoSync || false
+  const autoSyncInterval = syncSetting.autoSyncInterval || 0
+  const autoSyncDirection = syncSetting.autoSyncDirection || 'upload'
+
+  function handleAutoSync (checked) {
+    store.updateSyncSetting({
+      autoSync: checked
+    })
+  }
+
+  function handleIntervalChange (value) {
+    store.updateSyncSetting({
+      autoSyncInterval: value
+    })
+  }
+
+  function handleDirectionChange (value) {
+    store.updateSyncSetting({
+      autoSyncDirection: value
+    })
+  }
+
   return (
     <div className='pd2 fix'>
       <div className='fleft'>
@@ -45,15 +88,33 @@ export default function DataTransport (props) {
       </div>
       <div className='fright'>
         <Switch
-          checked={props.config.autoSync || false}
+          checked={autoSyncEnabled}
           checkedChildren={txt}
-          onChange={store.handleAutoSync}
+          onChange={handleAutoSync}
           unCheckedChildren={txt}
           className='mg3l mg1r'
         />
-        <Tooltip title={e('autoSyncTip')}>
-          <InfoCircleOutlined />
-        </Tooltip>
+        {autoSyncEnabled && (
+          <Space className='mg1l' size='small'>
+            <Select
+              value={autoSyncInterval}
+              onChange={handleIntervalChange}
+              options={intervalOptions}
+              style={{ width: 120 }}
+              popupMatchSelectWidth={false}
+            />
+            <Select
+              value={autoSyncDirection}
+              onChange={handleDirectionChange}
+              options={directionOptions}
+              style={{ width: 100 }}
+              popupMatchSelectWidth={false}
+            />
+          </Space>
+        )}
+        <HelpIcon
+          link='https://github.com/electerm/electerm/wiki/Auto-data-Sync'
+        />
       </div>
     </div>
   )

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

@@ -74,9 +74,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}
     />
   )
 }

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

@@ -135,11 +135,13 @@ export default class ShortcutEdit extends PureComponent {
   }
 
   renderClear () {
-    if (this.props.renderClear && this.props.data.shortcut) {
+    const { renderClear, handleClear, data } = this.props
+    const hasShortcut = data && data.shortcut
+    if (renderClear && hasShortcut && handleClear) {
       return (
         <CloseOutlined
           className='pointer mg1l'
-          onClick={this.props.handleClear}
+          onClick={handleClear}
         />
       )
     }

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

@@ -8,6 +8,7 @@ import { Switch } from 'antd'
 import { UnorderedListOutlined } from '@ant-design/icons'
 import HistoryItem from './history-item'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage.js'
+import '../setting-panel/list.styl'
 
 const SORT_BY_FREQ_KEY = 'electerm-history-sort-by-frequency'
 

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/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}
         />