@electerm/electerm-react 2.13.6 → 2.16.6

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

@@ -3,15 +3,13 @@ import {
   Input,
   InputNumber,
   Space,
-  Typography,
   Select,
-  Button
+  Button,
+  Modal
 } from 'antd'
-import Modal from '../common/modal'
 import { ColorPicker } from '../bookmark-form/common/color-picker.jsx'
 
 const { TextArea } = Input
-const { Title } = Typography
 const e = window.translate
 
 export default function TextBgModal ({
@@ -68,9 +66,9 @@ export default function TextBgModal ({
       footer={footer}
     >
       <div className='pd1'>
-        <Space direction='vertical' size='large' style={{ width: '100%' }}>
+        <Space orientation='vertical' size='large' className='width-100'>
           <div>
-            <Title level={5}>{e('text')}</Title>
+            <b>{e('text')}</b>
             <TextArea
               value={text}
               onChange={(e) => setText(e.target.value)}
@@ -81,7 +79,7 @@ export default function TextBgModal ({
           </div>
 
           <div>
-            <Title level={5}>{e('fontSize')}</Title>
+            <b>{e('fontSize')}</b>
             <InputNumber
               value={fontSize}
               onChange={setFontSize}
@@ -93,7 +91,7 @@ export default function TextBgModal ({
           </div>
 
           <div>
-            <Title level={5}>{e('textColor')}</Title>
+            <b>{e('textColor')}</b>
             <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
               <ColorPicker
                 value={color}
@@ -109,7 +107,7 @@ export default function TextBgModal ({
           </div>
 
           <div>
-            <Title level={5}>{e('fontFamily')}</Title>
+            <b>{e('fontFamily')}</b>
             <Select
               value={fontFamily}
               onChange={setFontFamily}
@@ -140,3 +138,5 @@ export default function TextBgModal ({
     </Modal>
   )
 }
+
+TextBgModal.displayName = 'TextBgModal'

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

@@ -5,7 +5,7 @@
 /**
  * bookmark form
  */
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
 import { Button, Input, Form, Alert } from 'antd'
 import { notification } from '../common/notification'
@@ -27,10 +27,15 @@ function trim (str) {
 
 export default function SyncForm (props) {
   const [form] = Form.useForm()
-  const delta = useDelta(props.formData)
-  useConditionalEffect(() => {
-    form.resetFields()
-  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+  const prevRef = useRef(null)
+
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, props.formData)) {
+      form.resetFields()
+    }
+    prevRef.current = props.formData
+  }, [props.formData])
+
   const { syncType } = props
   function disabled () {
     if (syncType === syncTypes.cloud) {

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

@@ -651,6 +651,28 @@ export default class FileSection extends React.Component {
     this.watchFile(tempPath)
   }
 
+  editWithCustomEditor = async (text, editorCommand) => {
+    const {
+      path,
+      name,
+      type
+    } = this.state.file
+    let tempPath = ''
+    if (type === typeMap.local) {
+      tempPath = window.pre.resolve(path, name)
+    } else {
+      const id = generate()
+      tempPath = window.pre.resolve(
+        window.pre.tempDir, `electerm-temp-${id}-${name}`
+      )
+      await fs.writeFile(tempPath, text)
+    }
+    this.watchingFile = tempPath
+    window.pre.runGlobalAsync('watchFile', tempPath)
+    await window.pre.runGlobalAsync('openFileWithEditor', tempPath, editorCommand)
+    window.pre.ipcOnEvent('file-change', this.onFileChange)
+  }
+
   onFileChange = (e, text) => {
     this.editor.editWithSystemEditorDone({
       id: this.id,

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

@@ -6,8 +6,7 @@ import { refsStatic } from '../common/ref'
 export default function HistoryItem (props) {
   const { store } = window
   const {
-    item,
-    index
+    item
   } = props
   const timeoutRef = useRef(null)
 
@@ -30,7 +29,11 @@ export default function HistoryItem (props) {
 
   function handleDelete (e) {
     e.stopPropagation()
-    store.history.splice(index, 1)
+    const { id } = item
+    const i = store.history.findIndex((i) => i.id === id)
+    if (i !== -1) {
+      store.history.splice(i, 1)
+    }
   }
 
   function handleBookmark (e) {

package/client/components/sidebar/history.jsx

@@ -2,31 +2,74 @@
  * history select
  */
 
+import React, { useState, useEffect } from 'react'
 import { auto } from 'manate/react'
+import { Switch } from 'antd'
+import { UnorderedListOutlined } from '@ant-design/icons'
 import HistoryItem from './history-item'
+import { getItemJSON, setItemJSON } from '../../common/safe-local-storage.js'
+
+const SORT_BY_FREQ_KEY = 'electerm-history-sort-by-frequency'
 
 export default auto(function HistoryPanel (props) {
   const { store } = window
   if (store.config.disableConnectionHistory) {
     return null
   }
+  const [sortByFrequency, setSortByFrequency] = useState(() => {
+    return getItemJSON(SORT_BY_FREQ_KEY, false)
+  })
+
+  useEffect(() => {
+    setItemJSON(SORT_BY_FREQ_KEY, sortByFrequency)
+  }, [sortByFrequency])
+
   const {
     history
   } = store
-  const arr = props.sort
-    ? [...history].sort((a, b) => { return b.count - a.count })
-    : history
+  let arr = [...history]
+  if (sortByFrequency) {
+    arr = arr.sort((a, b) => { return b.count - a.count })
+  }
+
+  const handleSortByFrequencyChange = (checked) => {
+    setSortByFrequency(checked)
+  }
+
+  const handleClearHistory = () => {
+    store.clearHistory()
+  }
+  const e = window.translate
+  const switchProps = {
+    checkedChildren: e('sortByFrequency'),
+    unCheckedChildren: e('sortByFrequency'),
+    checked: sortByFrequency,
+    onChange: handleSortByFrequencyChange,
+    size: 'small'
+  }
+  const clearIconProps = {
+    className: 'history-clear-icon pointer clear-ai-icon icon-hover',
+    title: window.translate('clear'),
+    onClick: handleClearHistory
+  }
   return (
     <div
       className='sidebar-panel-history'
     >
-      <div className='pd2x'>
+      <div className='history-header pd2x pd2b'>
+        <Switch
+          {...switchProps}
+        />
+        <UnorderedListOutlined
+          {...clearIconProps}
+        />
+      </div>
+      <div className='history-body'>
         {
           arr.map((item, i) => {
             return (
               <HistoryItem
                 key={item.id}
-                index={i}
                 item={item}
               />
             )

package/client/components/sidebar/sidebar-panel.jsx

@@ -13,7 +13,6 @@ import {
   PlusCircleOutlined,
   ShrinkOutlined,
   PushpinOutlined,
-  UnorderedListOutlined,
   SelectOutlined
 } from '@ant-design/icons'
 
@@ -29,21 +28,9 @@ export default memo(function SidebarPanel (props) {
   const prps1 = {
     className: prps.className + (pinned ? ' pinned' : '')
   }
-  const props2 = {
-    onClick: store.clearHistory,
-    className: 'mg2x pointer clear-ai-icon icon-hover'
-  }
-  const tabBarExtraContent = sidebarPanelTab === 'history'
-    ? (
-      <UnorderedListOutlined
-        {...props2}
-      />
-      )
-    : null
   const tabsProps = {
     activeKey: sidebarPanelTab,
     onChange: store.handleSidebarPanelTab,
-    tabBarExtraContent,
     items: [
       {
         key: 'bookmarks',

package/client/components/sidebar/sidebar.styl

@@ -48,6 +48,25 @@
     flex-direction column
     overflow hidden
     min-height 0
+  .history-header
+    flex-shrink 0
+    display flex
+    align-items center
+    border-bottom 1px solid var(--border)
+    position sticky
+    top 0
+    z-index 10
+    background var(--main)
+    .history-clear-icon
+      margin-left auto
+      margin-right 0
+      color var(--text-dark)
+      &:hover
+        color var(--error)
+  .history-body
+    flex 1
+    overflow-y auto
+    overflow-x hidden
 .not-system-ui.is-mac
   .sidebar-bar
     margin-top 20px

package/client/components/ssh-config/load-ssh-configs-item.jsx

@@ -0,0 +1,99 @@
+import { useState } from 'react'
+import {
+  Input
+} from 'antd'
+import {
+  EditOutlined,
+  DeleteOutlined,
+  CheckOutlined,
+  CloseOutlined
+} from '@ant-design/icons'
+
+const { TextArea } = Input
+
+export default function LoadSshConfigsItem (props) {
+  const { item, index, onDelete, onUpdate } = props
+  const [isEditing, setIsEditing] = useState(false)
+  const [editValue, setEditValue] = useState(JSON.stringify(item, null, 2))
+
+  const handleToggleEdit = function () {
+    if (isEditing) {
+      try {
+        const parsed = JSON.parse(editValue)
+        onUpdate(index, parsed)
+      } catch (err) {
+        console.error('Invalid JSON:', err)
+        setEditValue(JSON.stringify(item, null, 2))
+      }
+    } else {
+      setEditValue(JSON.stringify(item, null, 2))
+    }
+    setIsEditing(!isEditing)
+  }
+
+  const handleDelete = function () {
+    onDelete(index)
+  }
+
+  const handleCancelEdit = function () {
+    setEditValue(JSON.stringify(item, null, 2))
+    setIsEditing(false)
+  }
+
+  function renderActions () {
+    if (isEditing) {
+      return [
+        <CheckOutlined
+          className='mg1r pointer icon-success'
+          onClick={handleToggleEdit}
+          key='confirm-ssh-config-item'
+        />,
+        <CloseOutlined
+          className='mg1r pointer icon-warning'
+          onClick={handleCancelEdit}
+          key='cancel-ssh-config-item'
+        />
+      ]
+    }
+    return [
+      <EditOutlined
+        className='mg1r pointer ssh-config-item-edit-icon'
+        onClick={handleToggleEdit}
+        key='edit-ssh-config-item'
+      />,
+      <DeleteOutlined
+        className='pointer icon-danger ssh-config-item-delete-icon'
+        onClick={handleDelete}
+        key='del-ssh-config-item'
+      />
+    ]
+  }
+
+  function renderContent () {
+    if (isEditing) {
+      return (
+        <TextArea
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          rows={10}
+          className='mg1t'
+        />
+      )
+    }
+    return (
+      <pre className='ssh-config-item-content'>
+        {JSON.stringify(item, null, 2)}
+      </pre>
+    )
+  }
+
+  return (
+    <div className='ssh-config-item pd1'>
+      <div className='pd1b ssh-config-item-header'>
+        <b className='mg1r'>[{index + 1}]</b>
+        {renderActions()}
+      </div>
+      {renderContent()}
+    </div>
+  )
+}

package/client/components/ssh-config/load-ssh-configs.jsx

@@ -5,18 +5,20 @@ import {
   Empty
 } from 'antd'
 import { useState, useEffect } from 'react'
-import SshConfigItem from './ssh-config-item'
 import * as ls from '../../common/safe-local-storage'
 import {
   sshConfigLoadKey
 } from '../../common/constants'
 import { ReloadOutlined } from '@ant-design/icons'
+import LoadSshConfigsItem from './load-ssh-configs-item'
+import './ssh-config.styl'
 
 const e = window.translate
 
 export default function LoadSshConfigs (props) {
   const [loading, setLoading] = useState(false)
   const { sshConfigs } = props
+  const [localConfigs, setLocalConfigs] = useState([])
 
   const {
     store
@@ -24,6 +26,11 @@ export default function LoadSshConfigs (props) {
   const {
     showSshConfigModal
   } = props
+
+  useEffect(() => {
+    setLocalConfigs(sshConfigs)
+  }, [sshConfigs])
+
   const handleCancel = function () {
     store.showSshConfigModal = false
   }
@@ -35,21 +42,43 @@ export default function LoadSshConfigs (props) {
 
   const handleLoadSshConfig = function () {
     store.showSshConfigModal = false
-    store.addSshConfigs(sshConfigs)
+    store.addSshConfigs(localConfigs)
     ls.setItem(sshConfigLoadKey, 'yes')
   }
 
+  const handleDeleteItem = function (index) {
+    const newConfigs = [...localConfigs]
+    newConfigs.splice(index, 1)
+    setLocalConfigs(newConfigs)
+  }
+
+  const handleUpdateItem = function (index, newItem) {
+    const newConfigs = [...localConfigs]
+    newConfigs[index] = newItem
+    setLocalConfigs(newConfigs)
+  }
+
   const renderList = function () {
-    if (!sshConfigs.length) {
+    if (!localConfigs.length) {
       return (
         <Empty />
       )
     }
-    return sshConfigs.map((d, i) => {
-      return (
-        <SshConfigItem item={d} key={d.title} />
-      )
-    })
+    return (
+      <div className='pd1b ssh-config-list'>
+        {
+          localConfigs.map((item, index) => (
+            <LoadSshConfigsItem
+              key={index}
+              item={item}
+              index={index}
+              onDelete={handleDeleteItem}
+              onUpdate={handleUpdateItem}
+            />
+          ))
+        }
+      </div>
+    )
   }
 
   useEffect(() => {
@@ -89,7 +118,7 @@ export default function LoadSshConfigs (props) {
             type='primary'
             className='mg1r mg1b'
             onClick={handleLoadSshConfig}
-            disabled={!sshConfigs.length || loading}
+            disabled={!localConfigs.length || loading}
           >
             {e('import')}
           </Button>

package/client/components/ssh-config/ssh-config.styl

@@ -0,0 +1,3 @@
+.ssh-config-list
+  max-height 60vh
+  overflow auto

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

@@ -2,13 +2,15 @@
  * Add button menu component
  */
 
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
+import { Tabs } from 'antd'
 import {
   CodeFilled,
   RightSquareFilled,
   RobotOutlined
 } from '@ant-design/icons'
 import BookmarksList from '../sidebar/bookmark-select'
+import History from '../sidebar/history'
 import DragHandle from '../common/drag-handle'
 import QuickConnect from './quick-connect'
 
@@ -26,6 +28,7 @@ export default function AddBtnMenu ({
   setAddPanelWidth
 }) {
   const { onNewSsh, onNewSshAI } = window.store
+  const [activeTab, setActiveTab] = useState('bookmarks')
   const cls = 'pd2x pd1y context-item pointer'
   const addTabBtn = window.store.hasNodePty
     ? (
@@ -59,6 +62,24 @@ export default function AddBtnMenu ({
     left: menuPosition === 'right'
   }
 
+  const tabItems = [
+    {
+      key: 'bookmarks',
+      label: e('bookmarks')
+    },
+    {
+      key: 'history',
+      label: e('history')
+    }
+  ]
+
+  let listContent
+  if (activeTab === 'bookmarks') {
+    listContent = <BookmarksList store={window.store} />
+  } else {
+    listContent = <History store={window.store} />
+  }
+
   return (
     <div
       ref={menuRef}
@@ -89,11 +110,14 @@ export default function AddBtnMenu ({
           <RobotOutlined /> {e('createBookmarkByAI')}
         </div>
         <QuickConnect batch={batch} inputOnly />
+        <Tabs
+          activeKey={activeTab}
+          onChange={setActiveTab}
+          items={tabItems}
+        />
       </div>
       <div className='add-menu-list'>
-        <BookmarksList
-          store={window.store}
-        />
+        {listContent}
       </div>
     </div>
   )

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

@@ -118,7 +118,7 @@ export default class AddBtn extends Component {
   focusSearchInput = () => {
     // Focus the search input after the menu renders
     this.focusTimeout = setTimeout(() => {
-      const searchInput = this.menuRef.current?.querySelector('.ant-input')
+      const searchInput = this.menuRef.current?.querySelector('.add-menu-list .ant-input')
       if (searchInput) {
         searchInput.focus()
         searchInput.select()

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

@@ -24,4 +24,12 @@
     display flex
     flex-direction column
     min-height 0
+    .sidebar-panel-history
+      position relative
+      top auto
+      left auto
+      right auto
+      bottom auto
+      flex 1
+      min-height 0
 

package/client/components/terminal/terminal.jsx

@@ -82,7 +82,6 @@ class Term extends Component {
     this.currentInput = ''
     this.shellInjected = false
     this.shellType = null
-    this.manualCommandHistory = new Set()
   }
 
   domRef = createRef()
@@ -737,7 +736,6 @@ class Term extends Component {
     if (d === '\r' || d === '\n') {
       const currentCmd = this.getCurrentInput()
       if (currentCmd && currentCmd.trim() && this.shouldUseManualHistory()) {
-        this.manualCommandHistory.add(currentCmd.trim())
         window.store.addCmdHistory(currentCmd.trim())
       }
       this.closeSuggestions()
@@ -903,9 +901,7 @@ class Term extends Component {
   }
 
   shouldUseManualHistory = () => {
-    const useManual = this.props.config.showCmdSuggestions &&
-      (this.shellType === 'sh' || (isWin && this.isLocal()))
-    return useManual
+    return !this.cmdAddon || !this.cmdAddon.hasShellIntegration()
   }
 
   canInjectShellIntegration = () => {
@@ -1078,6 +1074,32 @@ class Term extends Component {
     const { savePassword } = this.state
     const termType = type
     const extra = this.props.sessionOptions
+    // Determine if this is a local terminal (no host)
+    const isLocalType = !tab.host
+    // Build exec settings: only for local type, prefer tab settings over config
+    let execOpts = {}
+    let execPropName = 'execLinux'
+    if (isWin) {
+      execPropName = 'execWindows'
+    } else if (isMac) {
+      execPropName = 'execMac'
+    }
+    if (isLocalType) {
+      // Check flat properties on tab first (bookmark data), then fall back to config
+      if (tab[execPropName]) {
+        // Use bookmark's exec setting directly
+        execOpts = {
+          [execPropName]: tab[execPropName],
+          [`${execPropName}Args`]: tab[`${execPropName}Args`] || []
+        }
+      } else if (config[execPropName]) {
+        // Use global config exec settings
+        execOpts = {
+          [execPropName]: config[execPropName],
+          [`${execPropName}Args`]: config[`${execPropName}Args`] || []
+        }
+      }
+    }
     const opts = clone({
       cols,
       rows,
@@ -1085,18 +1107,13 @@ class Term extends Component {
       saveTerminalLogToFile: config.saveTerminalLogToFile,
       ...tab,
       ...extra,
+      ...execOpts,
       logName,
       sessionLogPath: config.sessionLogPath || createDefaultLogPath(),
       ...pick(config, [
         'addTimeStampToTermLog',
         'keepaliveInterval',
         'keepaliveCountMax',
-        'execWindows',
-        'execMac',
-        'execLinux',
-        'execWindowsArgs',
-        'execMacArgs',
-        'execLinuxArgs',
         'keyword2FA',
         'debug'
       ]),