@electerm/electerm-react 3.0.6 → 3.1.6

package/client/common/constants.js

@@ -190,13 +190,15 @@ export const syncTypes = buildConst([
   'github',
   'gitee',
   'custom',
-  'cloud'
+  'cloud',
+  'webdav'
 ])
 export const syncTokenCreateUrls = {
   gitee: 'https://gitee.com/github-zxdong262/electerm/wikis/Create%20personal%20access%20token?sort_id=3028409',
   github: 'https://github.com/electerm/electerm/wiki/Create-personal-access-token',
   custom: 'https://github.com/electerm/electerm/wiki/Custom-sync-server',
-  cloud: 'https://electerm-cloud.html5beta.com'
+  cloud: 'https://electerm-cloud.html5beta.com',
+  webdav: 'https://github.com/electerm/electerm/wiki/WebDAV-sync'
 }
 export const settingSyncId = 'setting-sync'
 export const settingTerminalId = 'setting-terminal'

package/client/common/default-setting.js

@@ -72,6 +72,7 @@ export default {
   sessionLogPath: '',
   sshSftpSplitView: false,
   showCmdSuggestions: false,
+  autoReconnectTerminal: false,
   startDirectoryLocal: '',
   allowMultiInstance: false,
   disableDeveloperTool: false

package/client/components/bookmark-form/config/ftp.js

@@ -34,6 +34,7 @@ const ftpConfig = {
         { type: 'password', name: 'password', label: () => e('password') },
         { type: 'switch', name: 'secure', label: () => e('secure'), valuePropName: 'checked' },
         commonFields.encode,
+        commonFields.proxy,
         commonFields.type
       ]
     }

package/client/components/file-transfer/conflict-resolve.jsx

@@ -31,25 +31,42 @@ export default class ConfirmModalStore extends Component {
       transferToConfirm: null
     }
     this.queue = []
+    this.queuedTransferIds = new Set()
+    this.activeTransferId = null
     this.id = 'transfer-conflict'
     refsStatic.add(this.id, this)
   }
 
   addConflict = (transfer) => {
+    const transferId = transfer?.id
+    if (!transferId) {
+      return
+    }
+    if (this.activeTransferId === transferId || this.queuedTransferIds.has(transferId)) {
+      return
+    }
     this.queue.push(transfer)
-    if (!this.state.transferToConfirm) {
+    this.queuedTransferIds.add(transferId)
+    if (!this.activeTransferId) {
       this.showNext()
     }
   }
 
   showNext = () => {
     const next = this.queue.shift()
+    if (next?.id) {
+      this.queuedTransferIds.delete(next.id)
+    }
+    this.activeTransferId = next?.id || null
     this.setState({
       transferToConfirm: next
     })
   }
 
   act = (action) => {
+    if (!this.state.transferToConfirm) {
+      return
+    }
     const { id, transferBatch } = this.state.transferToConfirm
     const toAll = action.includes('All')
     const policy = toAll ? action.replace('All', '') : action
@@ -60,10 +77,17 @@ export default class ConfirmModalStore extends Component {
     if (doFilter) {
       // Update all existing transfers with same batch ID in DOM
       const prefix = `tr-${transferBatch}-`
+      const pendingConflictIds = new Set([
+        id,
+        ...this.queue
+          .filter(d => d.transferBatch === transferBatch)
+          .map(d => d.id)
+      ])
       for (const [key, r] of window.refsTransfers.entries()) {
         if (key.startsWith(prefix)) {
-          if (key !== trid) {
-            r.resolvePolicy = policy
+          r.resolvePolicy = policy
+          const transferId = r.props.transfer?.id
+          if (key !== trid && pendingConflictIds.has(transferId)) {
             r.onDecision(policy)
           }
         }
@@ -72,9 +96,11 @@ export default class ConfirmModalStore extends Component {
     }
 
     // Resolve current conflict
-    refsTransfers.get(trid)?.onDecision(policy)
+    const currentTransfer = refsTransfers.get(trid)
+    currentTransfer?.onDecision(policy)
 
     // Move to the next item
+    this.activeTransferId = null
     this.setState({
       transferToConfirm: null
     }, this.showNext)

package/client/components/file-transfer/transfer-queue.jsx

@@ -41,7 +41,12 @@ export default class Queue extends Component {
     return new Promise((resolve, reject) => {
       const { fileTransfers } = window.store
       const [id, updateObj] = args
+      let completed = false
       const end = () => {
+        if (completed) {
+          return
+        }
+        completed = true
         this.currentRun && this.currentRun.stop()
         resolve()
       }
@@ -99,10 +104,11 @@ export default class Queue extends Component {
           })()
         }
 
-        // For non-transfer operations, check immediately
-        // if (!isTransferInit) {
-        //   checkCompletion()
-        // }
+        // Progress and delete updates are synchronous store mutations.
+        // Resolve them here so the queue cannot stall waiting for another reaction.
+        if (!isTransferInit) {
+          checkCompletion()
+        }
       }
 
       function checkCompletion () {

package/client/components/file-transfer/transfer.jsx

@@ -77,11 +77,11 @@ export default class TransportAction extends Component {
   }
 
   localCheckExist = (path) => {
-    return getLocalFileInfo(path).catch(console.log)
+    return getLocalFileInfo(path)
+      .catch(() => null)
   }
 
   remoteCheckExist = (path, tabId) => {
-    // return true
     const sftp = refs.get('sftp-' + tabId)?.sftp
     if (!sftp) {
       console.log('remoteCheckExist error', 'sftp not exist')
@@ -373,10 +373,12 @@ export default class TransportAction extends Component {
         toFile
       })
       if (transfer.resolvePolicy) {
-        return this.onDecision(transfer.resolvePolicy)
+        this.onDecision(transfer.resolvePolicy)
+        return true
       }
       if (this.resolvePolicy) {
-        return this.onDecision(this.resolvePolicy)
+        this.onDecision(this.resolvePolicy)
+        return true
       }
       const transferWithToFile = {
         ...copy(transfer),
@@ -386,6 +388,7 @@ export default class TransportAction extends Component {
       refsStatic.get('transfer-conflict')?.addConflict(transferWithToFile)
       return true
     }
+    return false
   }
 
   onDecision = (policy) => {

package/client/components/file-transfer/transports-action-store.jsx

@@ -12,6 +12,11 @@ import { refsStatic } from '../common/ref'
 window.initingFtpTabIds = new Set()
 
 export default class TransportsActionStore extends Component {
+  constructor (props) {
+    super(props)
+    this.pendingInitIds = new Set()
+  }
+
   componentDidMount () {
     this.control()
   }
@@ -29,6 +34,12 @@ export default class TransportsActionStore extends Component {
     const {
       fileTransfers
     } = store
+    this.pendingInitIds = new Set(
+      Array.from(this.pendingInitIds).filter(id => {
+        const transfer = fileTransfers.find(t => t.id === id)
+        return transfer && transfer.inited !== true
+      })
+    )
 
     // First loop: Handle same type transfers
     for (const t of fileTransfers) {
@@ -57,7 +68,7 @@ export default class TransportsActionStore extends Component {
         inited,
         pausing
       } = t
-      return typeTo !== typeFrom && inited && pausing !== true
+      return typeTo !== typeFrom && (inited || this.pendingInitIds.has(t.id)) && pausing !== true
     }).length
 
     if (count >= maxTransport) {
@@ -80,7 +91,7 @@ export default class TransportsActionStore extends Component {
 
       const isTransfer = typeTo !== typeFrom
 
-      if (inited || !isTransfer) {
+      if (inited || this.pendingInitIds.has(id) || !isTransfer) {
         continue
       }
 
@@ -95,6 +106,7 @@ export default class TransportsActionStore extends Component {
 
       if (count < maxTransport) {
         count++
+        this.pendingInitIds.add(id)
         refsStatic.get('transfer-queue')?.addToQueue(
           'update',
           id,

package/client/components/session/sessions.jsx

@@ -11,6 +11,7 @@ import pixed from '../layout/pixed'
 export default class Sessions extends Component {
   // Function to reload a tab using store.reloadTab
   reloadTab = (tab) => {
+    window.store.updateTab(tab.id, tab)
     window.store.reloadTab(tab.id)
   }
 

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

@@ -589,7 +589,8 @@ export default class SettingTerminal extends Component {
             'ctrlOrMetaOpenTerminalLink',
             'sftpPathFollowSsh',
             'sshSftpSplitView',
-            'showCmdSuggestions'
+            'showCmdSuggestions',
+            'autoReconnectTerminal'
           ].map(d => this.renderToggle(d))
         }
         <div className='pd1b'>{e('terminalBackSpaceMode')}</div>

package/client/components/setting-sync/server-data-status.jsx

@@ -1,3 +1,4 @@
+import { syncTypes } from '../../common/constants'
 import { useState } from 'react'
 import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
 import dayjs from 'dayjs'
@@ -10,7 +11,7 @@ export default function ServerDataStatus (props) {
   const [loading, setLoading] = useState(false)
   const token = store.getSyncToken(type)
   const gistId = store.getSyncGistId(type)
-  const canSync = token && (gistId || type === 'custom' || type === 'cloud')
+  const canSync = token && (gistId || type === 'custom' || type === 'cloud' || type === syncTypes.webdav)
 
   async function handleReload () {
     setLoading(true)

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

@@ -41,6 +41,10 @@ export default function SyncForm (props) {
     if (syncType === syncTypes.cloud) {
       return !props.formData.token
     }
+    if (syncType === syncTypes.webdav) {
+      const { serverUrl, username, password } = props.formData
+      return !serverUrl || !username || !password
+    }
     const {
       token,
       gistId
@@ -70,6 +74,14 @@ export default function SyncForm (props) {
     } else {
       up[syncType + 'Proxy'] = ''
     }
+
+    // Handle WebDAV specific fields
+    if (syncType === syncTypes.webdav) {
+      up[syncType + 'ServerUrl'] = res.serverUrl || ''
+      up[syncType + 'Username'] = res.username || ''
+      up[syncType + 'Password'] = res.password || ''
+    }
+
     window.store.updateSyncSetting(up)
     const test = await window.store.testSyncToken(syncType, res.gistId)
     if (isError(test)) {
@@ -180,6 +192,9 @@ export default function SyncForm (props) {
         </p>
       )
     }
+    if (syncType === syncTypes.webdav) {
+      return createWebdavItems()
+    }
     if (syncType !== syncTypes.custom) {
       return null
     }
@@ -199,18 +214,73 @@ export default function SyncForm (props) {
       </FormItem>
     )
   }
+  function createWebdavItems () {
+    return (
+      <div>
+        <FormItem
+          label={createLabel('URL')}
+          name='serverUrl'
+          normalize={trim}
+          rules={[{
+            max: 500, message: '500 chars max'
+          }, {
+            required: true, message: 'Server URL is required'
+          }]}
+        >
+          <Input
+            placeholder='https://your-webdav-server.com/remote.php/dav/files/username'
+            id='sync-input-webdav-server-url'
+          />
+        </FormItem>
+        <FormItem
+          label={createLabel(e('username'))}
+          name='username'
+          normalize={trim}
+          rules={[{
+            max: 200, message: '200 chars max'
+          }, {
+            required: true, message: 'Username is required'
+          }]}
+        >
+          <Input
+            placeholder='WebDAV username'
+            id='sync-input-webdav-username'
+          />
+        </FormItem>
+        <FormItem
+          label={createLabel(e('password'))}
+          name='password'
+          normalize={trim}
+          rules={[{
+            max: 200, message: '200 chars max'
+          }, {
+            required: true, message: 'Password is required'
+          }]}
+        >
+          <Password
+            placeholder='WebDAV password'
+            id='sync-input-webdav-password'
+          />
+        </FormItem>
+      </div>
+    )
+  }
   const desc = syncType === syncTypes.custom
     ? 'jwt secret'
-    : 'personal access token'
+    : syncType === syncTypes.webdav
+      ? 'WebDAV credentials'
+      : 'personal access token'
   const idDesc = syncType === syncTypes.custom
     ? 'user id'
-    : 'gist ID'
+    : syncType === syncTypes.webdav
+      ? 'WebDAV server'
+      : 'gist ID'
   const tokenLabel = createLabel('token', desc)
   const gistLabel = createLabel('gist', idDesc)
   const syncPasswordName = e('encrypt') + ' ' + e('password')
   const syncPasswordLabel = createLabel(syncPasswordName, '')
   function createIdItem () {
-    if (syncType === syncTypes.cloud) {
+    if (syncType === syncTypes.cloud || syncType === syncTypes.webdav) {
       return null
     }
     return (
@@ -231,7 +301,7 @@ export default function SyncForm (props) {
     )
   }
   function createPasswordItem () {
-    if (syncType === syncTypes.cloud) {
+    if (syncType === syncTypes.cloud || syncType === syncTypes.webdav) {
       return null
     }
     return (
@@ -271,17 +341,11 @@ export default function SyncForm (props) {
     type: syncType,
     status: props.serverStatus
   }
-  return (
-    <Form
-      onFinish={save}
-      form={form}
-      className='form-wrap pd1x'
-      name={'setting-sync-form' + syncType}
-      layout='vertical'
-      initialValues={props.formData}
-    >
-      {renderWarning()}
-      {createUrlItem()}
+  function createTokenItem () {
+    if (syncType === syncTypes.webdav) {
+      return null
+    }
+    return (
       <FormItem
         label={tokenLabel}
         hasFeedback
@@ -298,6 +362,20 @@ export default function SyncForm (props) {
           id={createId('token')}
         />
       </FormItem>
+    )
+  }
+  return (
+    <Form
+      onFinish={save}
+      form={form}
+      className='form-wrap pd1x'
+      name={'setting-sync-form' + syncType}
+      layout='vertical'
+      initialValues={props.formData}
+    >
+      {renderWarning()}
+      {createUrlItem()}
+      {createTokenItem()}
       {
         createIdItem()
       }

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

@@ -44,7 +44,11 @@ export default auto(function SyncSettingEntry (props) {
       apiUrl: syncSetting[type + 'ApiUrl'],
       lastSyncTime: syncSetting[type + 'LastSyncTime'],
       syncPassword: syncSetting[type + 'SyncPassword'],
-      proxy: syncSetting[type + 'Proxy']
+      proxy: syncSetting[type + 'Proxy'],
+      // WebDAV specific fields
+      serverUrl: syncSetting[type + 'ServerUrl'],
+      username: syncSetting[type + 'Username'],
+      password: syncSetting[type + 'Password']
     }
     return (
       <SyncForm

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

@@ -68,7 +68,7 @@ export default class AddrBookmarkItem extends Component {
         onDrop={this.handleDrop}
       >
         {globTag}
-        <b>{item.addr}</b>
+        <b className='mg1l'>{item.addr}</b>
         <CloseCircleOutlined
           className='del-addr-bookmark'
           onClick={this.handleDel}

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

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { auto } from 'manate/react'
 import {
   StarOutlined,
@@ -13,6 +14,8 @@ import uid from '../../common/uid'
 import './address-bookmark.styl'
 
 export default auto(function AddrBookmark (props) {
+  const [open, setOpen] = useState(false)
+
   function onDel (item) {
     window.store.delAddressBookmark(item)
   }
@@ -39,6 +42,11 @@ export default auto(function AddrBookmark (props) {
     handleAddAddrAct(true)
   }
 
+  function handleClick (type, addr) {
+    setOpen(false)
+    onClickHistory(type, addr)
+  }
+
   const { type, onClickHistory, host } = props
   const { store } = window
   // const cls = classnames(
@@ -58,7 +66,7 @@ export default auto(function AddrBookmark (props) {
     ? addrs.map(o => {
       return (
         <AddrBookmarkItem
-          handleClick={onClickHistory}
+          handleClick={handleClick}
           type={type}
           key={o.id}
           handleDel={onDel}
@@ -100,6 +108,8 @@ export default auto(function AddrBookmark (props) {
       title={title}
       placement='bottom'
       trigger='click'
+      open={open}
+      onOpenChange={setOpen}
     >
       <StarOutlined className={props.className || ''} />
     </Popover>

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

@@ -998,7 +998,7 @@ export default class FileSection extends React.Component {
     const shouldShowSelectedMenu = id &&
       len > 1 &&
       selectedFiles.has(id)
-    const delTxt = shouldShowSelectedMenu ? `${e('deleteAll')}(${len})` : e('del')
+    const delTxt = shouldShowSelectedMenu ? `${e('del')}:${e('selected')}(${len})` : e('del')
     const canPaste = hasFileInClipboardText()
     const showEdit = !isDirectory && id &&
       size < maxEditFileSize

package/client/components/sidebar/transfer-history-modal.jsx

@@ -98,8 +98,8 @@ export default memo(function TransferHistoryModal (props) {
       pageSize,
       showSizeChanger: true,
       pageSizeOptions: [5, 10, 20, 50, 100],
-      onChange: handlePageSizeChange,
-      position: ['topRight']
+      placement: 'topEnd',
+      onChange: handlePageSizeChange
     },
     size: 'small',
     rowKey: 'id'

package/client/components/tabs/tabs.styl

@@ -167,7 +167,8 @@
   z-index 900
   border-radius 0 0 3px 3px
   padding 0
-  background var(--main-lighter)
+  background var(--main)
+  -webkit-app-region no-drag
 
 .window-control-box
   display inline-block

package/client/components/tabs/window-control.jsx

@@ -23,9 +23,11 @@ export default auto(function WindowControl (props) {
   }
   const maximize = () => {
     window.pre.runGlobalAsync('maximize')
+    window.store.isMaximized = true
   }
   const unmaximize = () => {
     window.pre.runGlobalAsync('unmaximize')
+    window.store.isMaximized = false
   }
   const closeApp = () => {
     window.store.exit()

package/client/components/terminal/reconnect-overlay.jsx

@@ -0,0 +1,27 @@
+import { memo } from 'react'
+import { Button } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default memo(function ReconnectOverlay ({ countdown, onCancel }) {
+  if (countdown === null || countdown === undefined) {
+    return null
+  }
+  return (
+    <div className='terminal-reconnect-overlay'>
+      <div className='terminal-reconnect-box'>
+        <LoadingOutlined className='terminal-reconnect-icon' />
+        <div className='terminal-reconnect-msg'>
+          {e('autoReconnectTerminal')}: {countdown}s
+        </div>
+        <Button
+          size='small'
+          onClick={onCancel}
+        >
+          {e('cancel')}
+        </Button>
+      </div>
+    </div>
+  )
+})

package/client/components/terminal/socket-close-warning.jsx

@@ -0,0 +1,94 @@
+import { useState, useEffect, useRef } from 'react'
+import { Button } from 'antd'
+import { ReloadOutlined } from '@ant-design/icons'
+import { notification } from '../common/notification'
+
+const e = window.translate
+const COUNTDOWN_SECONDS = 3
+
+export function showSocketCloseWarning ({
+  tabId,
+  tab,
+  autoReconnect,
+  delTab,
+  reloadTab
+}) {
+  const key = `open${Date.now()}`
+
+  function closeNotification () {
+    notification.destroy(key)
+  }
+
+  const descriptionNode = (
+    <SocketCloseDescription
+      autoReconnect={autoReconnect}
+      onClose={() => {
+        closeNotification()
+        delTab(tabId)
+      }}
+      onReload={() => {
+        closeNotification()
+        reloadTab({ ...tab, autoReConnect: (tab.autoReConnect || 0) + 1 })
+      }}
+    />
+  )
+
+  notification.warning({
+    key,
+    message: e('socketCloseTip'),
+    duration: autoReconnect ? COUNTDOWN_SECONDS + 2 : 30,
+    description: descriptionNode
+  })
+
+  return { key }
+}
+
+function SocketCloseDescription ({ autoReconnect, onClose, onReload }) {
+  const [countdown, setCountdown] = useState(COUNTDOWN_SECONDS)
+  const timerRef = useRef(null)
+
+  useEffect(() => {
+    if (!autoReconnect) {
+      return
+    }
+    timerRef.current = setInterval(() => {
+      setCountdown(prev => {
+        if (prev <= 1) {
+          clearInterval(timerRef.current)
+          onReload()
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current)
+      }
+    }
+  }, [autoReconnect])
+
+  return (
+    <div className='pd2y'>
+      {autoReconnect && (
+        <div className='pd1b'>
+          {e('autoReconnectTerminal')}: {countdown}s
+        </div>
+      )}
+      <Button
+        className='mg1r'
+        type='primary'
+        onClick={onClose}
+      >
+        {e('close')}
+      </Button>
+      <Button
+        icon={<ReloadOutlined />}
+        onClick={onReload}
+      >
+        {e('reload')}
+      </Button>
+    </div>
+  )
+}

package/client/components/terminal/terminal.jsx

@@ -3,12 +3,8 @@ import { handleErr } from '../../common/fetch.jsx'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
 import clone from '../../common/to-simple-obj.js'
 import resolve from '../../common/resolve.js'
-import {
-  ReloadOutlined
-} from '@ant-design/icons'
 import {
   Spin,
-  Button,
   Dropdown
 } from 'antd'
 import { notification } from '../common/notification'
@@ -50,6 +46,8 @@ import ExternalLink from '../common/external-link.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
 import RemoteFloatControl from '../common/remote-float-control'
+import { showSocketCloseWarning } from './socket-close-warning.jsx'
+import ReconnectOverlay from './reconnect-overlay.jsx'
 import {
   loadTerminal,
   loadFitAddon,
@@ -76,7 +74,8 @@ class Term extends Component {
       lines: [],
       searchResults: [],
       matchIndex: -1,
-      totalLines: 0
+      totalLines: 0,
+      reconnectCountdown: null
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
@@ -1139,10 +1138,13 @@ class Term extends Component {
         ? typeMap.remote
         : typeMap.local
     })
+    const isAutoReconnect = !!(tab.autoReConnect && this.props.config.autoReconnectTerminal)
     const r = await createTerm(opts)
       .catch(err => {
-        const text = err.message
-        handleErr({ message: text })
+        if (!isAutoReconnect) {
+          const text = err.message
+          handleErr({ message: text })
+        }
       })
     if (typeof r === 'string' && r.includes('fail')) {
       return this.promote()
@@ -1154,6 +1156,10 @@ class Term extends Component {
       loading: false
     })
     if (!r) {
+      if (isAutoReconnect) {
+        this.scheduleAutoReconnect(3000)
+        return
+      }
       this.setStatus(statusMap.error)
       return
     }
@@ -1254,46 +1260,70 @@ class Term extends Component {
     this.setStatus(
       statusMap.error
     )
-    if (!this.isActiveTerminal() || !window.focused) {
-      return false
-    }
     if (this.userTypeExit) {
       return this.props.delTab(this.props.tab.id)
     }
-    const key = `open${Date.now()}`
-    function closeMsg () {
-      notification.destroy(key)
-    }
-    this.socketCloseWarning = notification.warning({
-      key,
-      message: e('socketCloseTip'),
-      duration: 30,
-      description: (
-        <div className='pd2y'>
-          <Button
-            className='mg1r'
-            type='primary'
-            onClick={() => {
-              closeMsg()
-              this.props.delTab(this.props.tab.id)
-            }}
-          >
-            {e('close')}
-          </Button>
-          <Button
-            icon={<ReloadOutlined />}
-            onClick={() => {
-              closeMsg()
-              this.props.reloadTab(
-                this.props.tab
-              )
-            }}
-          >
-            {e('reload')}
-          </Button>
-        </div>
-      )
-    })
+    const { autoReconnectTerminal } = this.props.config
+    const isActive = this.isActiveTerminal()
+    const isFocused = window.focused
+    if (autoReconnectTerminal) {
+      if (isActive && isFocused) {
+        this.socketCloseWarning = showSocketCloseWarning({
+          tabId: this.props.tab.id,
+          tab: this.props.tab,
+          autoReconnect: true,
+          delTab: this.props.delTab,
+          reloadTab: this.props.reloadTab
+        })
+      } else {
+        this.scheduleAutoReconnect(3000)
+      }
+    } else {
+      if (!isActive || !isFocused) {
+        return false
+      }
+      this.socketCloseWarning = showSocketCloseWarning({
+        tabId: this.props.tab.id,
+        tab: this.props.tab,
+        autoReconnect: false,
+        delTab: this.props.delTab,
+        reloadTab: this.props.reloadTab
+      })
+    }
+  }
+
+  scheduleAutoReconnect = (delay = 3000) => {
+    clearTimeout(this.timers.reconnectTimer)
+    clearInterval(this.timers.reconnectCountdown)
+    const seconds = Math.round(delay / 1000)
+    this.setState({ reconnectCountdown: seconds })
+    let remaining = seconds
+    this.timers.reconnectCountdown = setInterval(() => {
+      remaining -= 1
+      if (remaining <= 0) {
+        clearInterval(this.timers.reconnectCountdown)
+        this.timers.reconnectCountdown = null
+      }
+      this.setState({ reconnectCountdown: remaining <= 0 ? null : remaining })
+    }, 1000)
+    this.timers.reconnectTimer = setTimeout(() => {
+      clearInterval(this.timers.reconnectCountdown)
+      this.timers.reconnectCountdown = null
+      this.setState({ reconnectCountdown: null })
+      if (this.onClose || !this.props.config.autoReconnectTerminal) {
+        return
+      }
+      const reconnectCount = (this.props.tab.autoReConnect || 0) + 1
+      this.props.reloadTab({ ...this.props.tab, autoReConnect: reconnectCount })
+    }, delay)
+  }
+
+  handleCancelAutoReconnect = () => {
+    clearTimeout(this.timers.reconnectTimer)
+    clearInterval(this.timers.reconnectCountdown)
+    this.timers.reconnectTimer = null
+    this.timers.reconnectCountdown = null
+    this.setState({ reconnectCountdown: null })
   }
 
   batchInput = (cmd) => {
@@ -1395,7 +1425,7 @@ class Term extends Component {
       totalLines: this.state.totalLines,
       height
     }
-    const spinCls = loading ? 'loading-wrapper' : 'hide'
+    const spin = loading ? <Spin className='loading-wrapper' spinning={loading} /> : null
     return (
       <Dropdown {...dropdownProps}>
         <div
@@ -1412,7 +1442,11 @@ class Term extends Component {
           <RemoteFloatControl
             isFullScreen={fullscreen}
           />
-          <Spin className={spinCls} spinning={loading} />
+          <ReconnectOverlay
+            countdown={this.state.reconnectCountdown}
+            onCancel={this.handleCancelAutoReconnect}
+          />
+          {spin}
         </div>
       </Dropdown>
     )

package/client/components/terminal/terminal.styl

@@ -141,3 +141,15 @@
 .paste-text
   max-height 200px
   overflow-y scroll
+
+.terminal-reconnect-overlay
+  position absolute
+  left 0
+  top 0
+  width 100%
+  height 100%
+  display flex
+  align-items center
+  justify-content center
+  z-index 110
+

package/client/components/terminal/transfer-client-base.js

@@ -4,7 +4,7 @@
  */
 
 // import { transferTypeMap } from '../../common/constants.js'
-import { safeGetItem, safeSetItem } from '../../common/safe-local-storage.js'
+import { getItem, setItem } from '../../common/safe-local-storage.js'
 import { getLocalFileInfo } from '../sftp/file-read.js'
 
 /**
@@ -176,6 +176,8 @@ export class TransferClientBase {
 
   /**
    * Open file select dialog
+   * Supports window._apiControlSelectFile for e2e testing
+   * Set window._apiControlSelectFile = ['/path/to/file1', '/path/to/file2'] to bypass native dialog
    * @param {Object} options - Options for file selection
    * @returns {Promise<Array>} - Selected files
    */
@@ -186,20 +188,28 @@ export class TransferClientBase {
       message = 'Choose some files to send'
     } = options
 
-    const properties = [
-      directory ? 'openDirectory' : 'openFile',
-      'multiSelections',
-      'showHiddenFiles',
-      'noResolveAliases',
-      'treatPackageAsDirectory',
-      'dontAddToRecent'
-    ]
-
-    const files = await window.api.openDialog({
-      title,
-      message,
-      properties
-    }).catch(() => false)
+    let files
+    if (window._apiControlSelectFile) {
+      files = Array.isArray(window._apiControlSelectFile)
+        ? window._apiControlSelectFile
+        : [window._apiControlSelectFile]
+      delete window._apiControlSelectFile
+    } else {
+      const properties = [
+        directory ? 'openDirectory' : 'openFile',
+        'multiSelections',
+        'showHiddenFiles',
+        'noResolveAliases',
+        'treatPackageAsDirectory',
+        'dontAddToRecent'
+      ]
+
+      files = await window.api.openDialog({
+        title,
+        message,
+        properties
+      }).catch(() => false)
+    }
 
     if (!files || !files.length) {
       return null
@@ -215,11 +225,22 @@ export class TransferClientBase {
 
   /**
    * Open save folder select dialog
+   * Supports window._apiControlSelectFolder for e2e testing
+   * Set window._apiControlSelectFolder = '/path/to/folder' to bypass native dialog
    * @returns {Promise<string>} - Selected folder path
    */
   openSaveFolderSelect = async () => {
+    if (window._apiControlSelectFolder) {
+      const folder = window._apiControlSelectFolder
+      delete window._apiControlSelectFolder
+      if (this.storageKey) {
+        setItem(this.storageKey, folder)
+      }
+      return folder
+    }
+
     // Try to use last saved path
-    const lastPath = this.storageKey ? safeGetItem(this.storageKey) : null
+    const lastPath = this.storageKey ? getItem(this.storageKey) : null
 
     const savePaths = await window.api.openDialog({
       title: 'Choose a folder to save file(s)',
@@ -240,7 +261,7 @@ export class TransferClientBase {
     }
 
     if (this.storageKey) {
-      safeSetItem(this.storageKey, savePaths[0])
+      setItem(this.storageKey, savePaths[0])
     }
     return savePaths[0]
   }

package/client/components/terminal-info/network.jsx

@@ -92,7 +92,6 @@ export default function TerminalInfoDisk (props) {
       },
       render: (v) => {
         if (k === 'up' || k === 'down') {
-          console.log('render traffic', k, v)
           return filesize(v || 0)
         }
         return v

package/client/store/sync.js

@@ -67,6 +67,13 @@ export default (Store) => {
         }
       ).join('####')
     }
+    if (type === syncTypes.webdav) {
+      // WebDAV token format: serverUrl####username####password
+      const serverUrl = get(window.store.config, 'syncSetting.webdavServerUrl')
+      const username = get(window.store.config, 'syncSetting.webdavUsername')
+      const password = get(window.store.config, 'syncSetting.webdavPassword')
+      return [serverUrl, username, password].join('####')
+    }
     return get(window.store.config, 'syncSetting.' + type + 'AccessToken')
   }
 
@@ -158,7 +165,13 @@ export default (Store) => {
     const types = Object.keys(syncTypes)
     for (const type of types) {
       const gistId = store.getSyncGistId(type)
-      if (gistId) {
+      // For WebDAV, check if server URL is configured
+      if (type === syncTypes.webdav) {
+        const serverUrl = get(window.store.config, 'syncSetting.webdavServerUrl')
+        if (serverUrl) {
+          await store.uploadSetting(type)
+        }
+      } else if (gistId) {
         await store.uploadSetting(type)
       }
     }
@@ -183,6 +196,24 @@ export default (Store) => {
     const { store } = window
     const token = store.getSyncToken(type)
     const gistId = store.getSyncGistId(type)
+
+    // Handle WebDAV preview differently
+    if (type === syncTypes.webdav) {
+      const gist = await fetchData(
+        type,
+        'download',
+        [],
+        token,
+        store.getSyncProxy(type)
+      )
+      if (gist && gist.files) {
+        const statusContent = get(gist, 'files["electerm-status.json"].content')
+        const status = statusContent ? parseJsonSafe(statusContent) : undefined
+        store.syncServerStatus[type] = status
+      }
+      return
+    }
+
     const gist = await fetchData(
       type,
       'getOne',
@@ -201,7 +232,7 @@ export default (Store) => {
     //   await store.createGist(type)
     //   gistId = store.getSyncGistId(type)
     // }
-    if (!gistId && type !== syncTypes.custom && type !== syncTypes.cloud) {
+    if (!gistId && type !== syncTypes.custom && type !== syncTypes.cloud && type !== syncTypes.webdav) {
       return
     }
     const pass = store.getSyncPassword(type)
@@ -244,6 +275,31 @@ export default (Store) => {
       electermVersion: packVer,
       deviceName: window.pre.osInfo().find(r => r.k === 'hostname')?.v || 'unknown'
     }
+
+    // Handle WebDAV upload differently
+    if (type === syncTypes.webdav) {
+      const uploadData = {}
+      for (const [key, value] of Object.entries(objs)) {
+        uploadData[key] = value.content
+      }
+      uploadData['electerm-status.json'] = JSON.stringify(status)
+
+      const res = await fetchData(
+        type,
+        'upload',
+        [uploadData],
+        token,
+        store.getSyncProxy(type)
+      )
+      if (res && !res.error) {
+        store.updateSyncSetting({
+          [type + 'LastSyncTime']: now
+        })
+        store.syncServerStatus[type] = status
+      }
+      return
+    }
+
     const gistData = {
       description: 'sync electerm data',
       files: {
@@ -285,10 +341,80 @@ export default (Store) => {
     //   await store.createGist(type)
     //   gistId = store.getSyncGistId(type)
     // }
-    if (!gistId && type !== syncTypes.custom && type !== syncTypes.cloud) {
+    if (!gistId && type !== syncTypes.custom && type !== syncTypes.cloud && type !== syncTypes.webdav) {
       return
     }
     const pass = store.getSyncPassword(type)
+
+    // Handle WebDAV download differently
+    if (type === syncTypes.webdav) {
+      const gist = await fetchData(
+        type,
+        'download',
+        [],
+        token,
+        store.getSyncProxy(type)
+      )
+      if (gist && gist.files) {
+        const statusContent = get(gist, 'files["electerm-status.json"].content')
+        const status = statusContent ? parseJsonSafe(statusContent) : undefined
+        store.syncServerStatus[type] = status
+
+        const { names, syncConfig } = store.getDataSyncNames()
+        for (const n of names) {
+          let str = get(gist, `files["${n}.json"].content`)
+          if (!str) {
+            if (n === settingMap.bookmarks) {
+              throw new Error(('Seems you have a empty WebDAV folder, you can try upload first'))
+            } else {
+              continue
+            }
+          }
+          if (!isJSON(str)) {
+            str = await window.pre.runGlobalAsync('decryptAsync', str, pass)
+          }
+          let arr = JSON.parse(str)
+          if (n === settingMap.terminalThemes) {
+            arr = store.fixThemes(arr)
+          } else if (n === settingMap.bookmarks) {
+            arr = fixBookmarks(arr)
+          }
+          let strOrder = get(gist, `files["${n}.order.json"].content`)
+          if (isJSON(strOrder)) {
+            strOrder = JSON.parse(strOrder)
+            arr.sort((a, b) => {
+              const ai = strOrder.findIndex(r => r === a.id)
+              const bi = strOrder.findIndex(r => r === b.id)
+              return ai - bi
+            })
+          }
+          store.setItems(n, arr)
+        }
+        if (syncConfig) {
+          const userConfig = parseJsonSafe(
+            get(gist, 'files["userConfig.json"].content')
+          )
+          if (userConfig) {
+            store.setConfig(userConfig)
+          }
+          if (userConfig && userConfig.theme) {
+            store.setTheme(userConfig.theme)
+          }
+        }
+
+        const up = {
+          [type + 'LastSyncTime']: Date.now()
+        }
+        if (pass) {
+          up[type + 'SyncPassword'] = pass
+        }
+        store.updateSyncSetting(up)
+      }
+      store.isSyncingSetting = false
+      store.isSyncDownload = false
+      return
+    }
+
     const gist = await fetchData(
       type,
       'getOne',

package/client/store/tab.js

@@ -505,7 +505,8 @@ export default Store => {
       'sftpCreated',
       'sshSftpSplitView',
       'sshTunnelResults',
-      'displayRaw'
+      'displayRaw',
+      'autoReConnect'
     ]
     const { history } = store
     const index = history.findIndex(d => {

package/client/store/transfer-list.js

@@ -21,13 +21,13 @@ export default Store => {
   }
 
   Store.prototype.addTransferList = function (items) {
-    // console.log('addTransferList', JSON.stringify(items, null, 2))
     const { fileTransfers } = window.store
     const transferBatch = uid()
-    fileTransfers.push(...items.map(t => {
+    const nextItems = items.map(t => {
       t.transferBatch = transferBatch
       return t
-    }))
+    })
+    fileTransfers.push(...nextItems)
   }
 
   Store.prototype.pauseAll = function () {

package/package.json

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