@electerm/electerm-react 1.72.18 → 1.72.36

package/client/components/ai/ai-chat.jsx

@@ -97,7 +97,7 @@ export default function AIChat (props) {
     return (
       <SendOutlined
         onClick={handleSubmit}
-        className='mg1l pointer icon-hover'
+        className='mg1l pointer icon-hover send-to-ai-icon'
         title='Ctrl+Enter'
       />
     )

package/client/components/bookmark-form/form-tabs.jsx

@@ -34,7 +34,7 @@ export default function renderTabs (props) {
           {props.renderEnableSftp()}
           {props.uis}
           {props.renderProxy(props)}
-          {props.renderX11()}
+          {props.renderX11(props.form)}
         </>
       )
     },

package/client/components/bookmark-form/local-form-ui.jsx

@@ -147,7 +147,7 @@ export default function LocalFormUi (props) {
       initialValues={initialValues}
       name='local-form'
     >
-      {renderTabs()}
+      {renderTabs({ form })}
       {submitUi}
     </Form>
   )

package/client/components/bookmark-form/ssh-form-ui.jsx

@@ -69,7 +69,9 @@ export default function BookmarkFormUI (props) {
     sshTunnels: [],
     runScripts: [{}],
     category: initBookmarkGroupId,
-    connectionHoppings: []
+    connectionHoppings: [],
+    serverHostKey: [],
+    cipher: []
   }
   initialValues = defaultsDeep(initialValues, defaultValues)
   function onChangeAuthType (e) {

package/client/components/bookmark-form/x11.jsx

@@ -4,6 +4,7 @@
 import {
   Switch,
   Form,
+  Button,
   Select
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
@@ -46,7 +47,48 @@ const serverHostKeyOptions = [
   'rsa-sha2-256'
 ]
 
-export default function renderX11 () {
+const defaultCipherOptions = [
+  'aes128-ctr',
+  'aes192-ctr',
+  'aes256-ctr',
+  'aes128-gcm',
+  'aes128-gcm@openssh.com',
+  'aes256-gcm',
+  'aes256-gcm@openssh.com',
+  'aes256-cbc',
+  'aes192-cbc',
+  'aes128-cbc',
+  'blowfish-cbc',
+  '3des-cbc',
+  'arcfour256',
+  'arcfour128',
+  'cast128-cbc',
+  'arcfour'
+]
+
+const defaultServerHostKeyOptions = [
+  'ssh-rsa',
+  'ssh-ed25519',
+  'ecdsa-sha2-nistp256',
+  'ecdsa-sha2-nistp384',
+  'ecdsa-sha2-nistp521',
+  'ssh-dss',
+  'rsa-sha2-512',
+  'rsa-sha2-256'
+]
+
+export default function renderX11 (form) {
+  function setDefaults () {
+    // form.setFieldsValue({
+    //   cipher: defaultCipherOptions
+    // })
+
+    // form.setFieldsValue({
+    //   serverHostKey: defaultServerHostKeyOptions
+    // })
+    form.setFieldValue('cipher', defaultCipherOptions)
+    form.setFieldValue('serverHostKey', defaultServerHostKeyOptions)
+  }
   return (
     <>
       <FormItem
@@ -67,17 +109,31 @@ export default function renderX11 () {
       <FormItem
         {...formItemLayout}
         label='serverHostKey'
-        name='serverHostKey'
       >
-        <Select
-          mode='multiple'
+        <FormItem
+          {...formItemLayout}
+          noStyle
+          name='serverHostKey'
         >
-          {serverHostKeyOptions.map(key => (
-            <Option key={key} value={key}>
-              {key}
-            </Option>
-          ))}
-        </Select>
+          <Select
+            mode='multiple'
+          >
+            {serverHostKeyOptions.map(key => (
+              <Option key={key} value={key}>
+                {key}
+              </Option>
+            ))}
+          </Select>
+        </FormItem>
+        <div className='mg1t'>
+          <Button
+            type='dashed'
+            onClick={setDefaults}
+            size='small'
+          >
+            Set default cipher and serverHostKey
+          </Button>
+        </div>
       </FormItem>
       <FormItem
         {...formItemLayout}

package/client/components/common/input-auto-focus.jsx

@@ -4,14 +4,22 @@ import {
 } from 'antd'
 
 export default function InputAutoFocus (props) {
-  const { type, ...rest } = props
+  const { type, selectall = false, ...rest } = props
   const inputRef = useRef(null)
+  const isFirstRender = useRef(true)
 
   useEffect(() => {
     if (inputRef.current) {
-      inputRef.current.focus()
+      const { value } = props
+      if (value && selectall && isFirstRender.current) {
+        inputRef.current.focus()
+        inputRef.current.setSelectionRange(0, value.length)
+        isFirstRender.current = false
+      } else {
+        inputRef.current.focus()
+      }
     }
-  }, [props.value])
+  }, [props.value, props.selectall])
 
   let InputComponent
   switch (type) {

package/client/components/session/session.jsx

@@ -30,8 +30,7 @@ import {
   terminalRdpType,
   terminalVncType,
   terminalWebType,
-  terminalTelnetType,
-  splitMap
+  terminalTelnetType
 } from '../../common/constants'
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
@@ -521,7 +520,6 @@ export default class SessionWrapper extends Component {
 
   renderBroadcastIcon = () => {
     if (
-      this.props.layout === splitMap.c1 ||
       this.isSshDisabled()
     ) {
       return null

package/client/components/setting-panel/number-config.jsx

@@ -0,0 +1,48 @@
+import {
+  InputNumber
+} from 'antd'
+import { isNumber, isNaN } from 'lodash-es'
+
+export default function NumberConfig ({
+  min,
+  max,
+  cls,
+  title = '',
+  value,
+  defaultValue,
+  onChange,
+  step,
+  extraDesc,
+  width = 136
+}) {
+  const opts = {
+    step,
+    value,
+    min,
+    max,
+    onChange,
+    placeholder: defaultValue
+  }
+  if (title) {
+    opts.formatter = v => `${title}${extraDesc || ''}: ${v}`
+    opts.parser = (v) => {
+      let vv = isNumber(v)
+        ? v
+        : Number(v.split(': ')[1], 10)
+      if (isNaN(vv)) {
+        vv = defaultValue
+      }
+      return vv
+    }
+    opts.style = {
+      width: width + 'px'
+    }
+  }
+  return (
+    <div className={`pd2b ${cls || ''}`}>
+      <InputNumber
+        {...opts}
+      />
+    </div>
+  )
+}

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

@@ -9,7 +9,6 @@ import {
   Switch,
   Input,
   Upload,
-  InputNumber,
   Button,
   AutoComplete,
   Tooltip,
@@ -26,7 +25,6 @@ import defaultSettings from '../../common/default-setting'
 import ShowItem from '../common/show-item'
 import { osResolve } from '../../common/resolve'
 import { chooseSaveDirectory } from '../../common/choose-save-folder'
-import { isNumber, isNaN } from 'lodash-es'
 import mapper from '../../common/auto-complete-data-mapper'
 import KeywordForm from './keywords-form'
 import Link from '../common/external-link'
@@ -35,6 +33,8 @@ import KeywordsTransport from './keywords-transport'
 import fs from '../../common/fs'
 import uid from '../../common/uid'
 import createDefaultSessionLogPath from '../../common/default-log-path'
+import TerminalBackgroundConfig from './terminal-bg-config'
+import NumberConfig from './number-config'
 import './setting.styl'
 
 const { Option } = Select
@@ -211,40 +211,23 @@ export default class SettingTerminal extends Component {
       step = 1,
       min,
       max,
-      cls,
-      onChange = (v) => {
-        this.onChangeValue(v, name)
-      }
+      cls
     } = options
     const opts = {
-      step,
       value,
       min,
       max,
-      onChange,
-      placeholder: defaultValue
-    }
-    if (title) {
-      opts.formatter = v => `${title}${options.extraDesc || ''}: ${v}`
-      opts.parser = (v) => {
-        let vv = isNumber(v)
-          ? v
-          : Number(v.split(': ')[1], 10)
-        if (isNaN(vv)) {
-          vv = defaultValue
-        }
-        return vv
-      }
-      opts.style = {
-        width: width + 'px'
-      }
+      onChange: (v) => {
+        this.onChangeValue(v, name)
+      },
+      defaultValue,
+      title,
+      width,
+      step,
+      cls
     }
     return (
-      <div className={`pd2b ${cls || ''}`}>
-        <InputNumber
-          {...opts}
-        />
-      </div>
+      <NumberConfig {...opts} />
     )
   }
 
@@ -499,6 +482,11 @@ export default class SettingTerminal extends Component {
       submit: this.handleSubmitKeywords,
       themeConfig: getThemeConfig()
     }
+    const bgProps = {
+      onChangeValue: this.onChangeValue,
+      name: 'terminalBackgroundImagePath',
+      config: this.props.config
+    }
     const tip = (
       <div>
         <span className='mg1r'>{e('supportRegexp')}</span>
@@ -569,9 +557,7 @@ export default class SettingTerminal extends Component {
           }
         </div>
         <div className='pd1b'>{e('terminalBackgroundImage')}</div>
-        {
-          this.renderTerminalBgSelect('terminalBackgroundImagePath')
-        }
+        <TerminalBackgroundConfig {...bgProps} />
         <div className='pd1b'>{e('terminalWordSeparator')}</div>
         {
           this.renderText('terminalWordSeparator', e('terminalWordSeparator'))

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

@@ -0,0 +1,152 @@
+import React from 'react'
+import {
+  AutoComplete,
+  Upload,
+  Tooltip,
+  Input
+} from 'antd'
+import {
+  noTerminalBgValue
+} from '../../common/constants'
+import defaultSettings from '../../common/default-setting'
+import NumberConfig from './number-config'
+
+const e = window.translate
+
+export default function TerminalBackgroundConfig ({
+  onChangeValue,
+  name,
+  config
+}) {
+  const value = config[name]
+  const defaultValue = defaultSettings[name]
+  const onChange = (v) => onChangeValue(v, name)
+  const after = (
+    <Upload
+      beforeUpload={(file) => {
+        onChangeValue(file.path, name)
+        return false
+      }}
+      showUploadList={false}
+    >
+      <span>{e('chooseFile')}</span>
+    </Upload>
+  )
+  const dataSource = [
+    {
+      value: '',
+      desc: e('default')
+    },
+    {
+      value: noTerminalBgValue,
+      desc: e('noTerminalBg')
+    }
+  ]
+  const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
+
+  function renderNumber (name, options, title = '', width = 136) {
+    let value = config[name]
+    if (options.valueParser) {
+      value = options.valueParser(value)
+    }
+    const defaultValue = defaultSettings[name]
+    const {
+      step = 1,
+      min,
+      max,
+      cls
+    } = options
+    const opts = {
+      value,
+      min,
+      max,
+      onChange: (v) => {
+        onChangeValue(v, name)
+      },
+      defaultValue,
+      title,
+      width,
+      step,
+      cls
+    }
+    return (
+      <NumberConfig {...opts} />
+    )
+  }
+
+  const renderFilter = () => {
+    if (config[name] === noTerminalBgValue) return
+
+    return (
+      <div>
+        {
+          renderNumber(
+            'terminalBackgroundFilterOpacity',
+            numberOpts,
+            e('Opacity')
+          )
+        }
+        {
+          renderNumber(
+            'terminalBackgroundFilterBlur',
+            { ...numberOpts, min: 0, max: 50, step: 0.5 },
+            e('Blur')
+          )
+        }
+        {
+          renderNumber(
+            'terminalBackgroundFilterBrightness',
+            { ...numberOpts, min: 0, max: 10, step: 0.1 },
+            e('Brightness')
+          )
+        }
+        {
+          renderNumber(
+            'terminalBackgroundFilterGrayscale',
+            numberOpts,
+            e('Grayscale')
+          )
+        }
+        {
+          renderNumber(
+            'terminalBackgroundFilterContrast',
+            { ...numberOpts, min: 0, max: 10, step: 0.1 },
+            e('Contrast')
+          )
+        }
+      </div>
+    )
+  }
+
+  const renderBgOption = item => {
+    return {
+      value: item.value,
+      label: item.desc
+    }
+  }
+  return (
+    <div className='pd2b'>
+      <div className='pd1b'>
+        <Tooltip
+          title='eg: https://xx.com/xx.png or /path/to/xx.png'
+        >
+          <AutoComplete
+            value={value}
+            onChange={onChange}
+            placeholder={defaultValue}
+            className='width-100'
+            options={dataSource.map(renderBgOption)}
+          >
+            <Input
+              addonAfter={after}
+            />
+          </AutoComplete>
+        </Tooltip>
+      </div>
+
+      {
+        renderFilter()
+      }
+    </div>
+  )
+}

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

@@ -614,6 +614,7 @@ export default class FileSection extends React.Component {
     if (this.watchingFile) {
       window.pre.ipcOffEvent('file-change', this.onFileChange)
       window.pre.runGlobalAsync('unwatchFile', this.watchingFile)
+      fs.unlink(this.watchingFile).catch(console.log)
       delete this.watchingFile
     }
   }

package/client/components/sftp/sftp.styl

@@ -1,7 +1,10 @@
 @require '../../css/includes/theme-default'
 
+.sftp-wrap
+  display flex
+  flex-direction row
 .sftp-section
-  position absolute
+  flex 1
 .sftp-title-wrap
   position relative
 .sftp-item

package/client/components/terminal/term-search.jsx

@@ -60,15 +60,14 @@ export default class TermSearch extends PureComponent {
     setTimeout(window.store.focus, 200)
   }
 
-  prev = () => {
+  prev = (v = this.props.termSearch) => {
     const {
       activeTabId,
-      termSearch,
       termSearchOptions
     } = this.props
     refs.get('term-' + activeTabId)
       ?.searchPrev(
-        termSearch,
+        v,
         copy(termSearchOptions)
       )
   }
@@ -82,13 +81,18 @@ export default class TermSearch extends PureComponent {
   }
 
   handleChange = e => {
-    window.store.termSearch = e.target.value
-    this.prev()
+    const v = e.target.value
+    window.store.termSearch = v
+    this.prev(v)
   }
 
   clearSearch = () => {
-    refs.get('term-' + this.props.activeTabId)
-      ?.searchAddon.clearDecorations()
+    const term = refs.get('term-' + this.props.activeTabId)
+    term?.searchAddon.clearDecorations()
+    term.setState({
+      searchResults: [],
+      matchIndex: -1
+    })
   }
 
   close = () => {
@@ -201,7 +205,8 @@ export default class TermSearch extends PureComponent {
       onChange: this.handleChange,
       suffix: this.renderSuffix(),
       onPressEnter: this.next,
-      addonAfter: this.renderAfter()
+      addonAfter: this.renderAfter(),
+      selectall: true
     }
     return (
       <div className='term-search-wrap'>

package/client/components/terminal/terminal-search-bar.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef } from 'react'
+
+export default function SearchResultBar ({
+  matches,
+  totalLines,
+  matchIndex,
+  height
+}) {
+  const canvasRef = useRef(null)
+  const drawSearchResults = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const container = canvas.parentElement
+    const containerHeight = container.clientHeight
+    const dpr = window.devicePixelRatio || 1
+
+    // Set both canvas dimensions and style
+    canvas.height = containerHeight * dpr
+    canvas.width = 16 * dpr
+
+    const ctx = canvas.getContext('2d')
+    // Scale the context to account for the pixel ratio
+    ctx.scale(dpr, dpr)
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    matches.forEach((match, index) => {
+      const y = (match / totalLines) * containerHeight
+      ctx.fillStyle = index === matchIndex ? 'rgba(243, 67, 9, 0.5)' : 'rgba(243, 196, 9, 0.5)'
+      ctx.fillRect(0, y, 16, 2)
+    })
+  }
+
+  useEffect(() => {
+    drawSearchResults()
+  }, [matches, totalLines, matchIndex])
+
+  if (!matches.length) {
+    return null
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className='term-search-bar'
+    />
+  )
+}

package/client/components/terminal/terminal.jsx

@@ -52,6 +52,7 @@ import * as fs from './fs.js'
 import iconsMap from '../sys-menu/icons-map.jsx'
 import { refs, refsStatic } from '../common/ref.js'
 import createDefaultLogPath from '../../common/default-log-path.js'
+import SearchResultBar from './terminal-search-bar'
 
 const e = window.translate
 
@@ -64,7 +65,10 @@ class Term extends Component {
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
       addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
       passType: 'password',
-      lines: []
+      lines: [],
+      searchResults: [],
+      matchIndex: -1,
+      totalLines: 0
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
@@ -703,6 +707,20 @@ clear\r`
       termSearchMatchCount: resultCount,
       termSearchMatchIndex: resultIndex
     })
+
+    this.updateSearchResults(resultIndex)
+  }
+
+  updateSearchResults = (resultIndex) => {
+    const matches = this.searchAddon._highlightDecorations.map((highlight, i) => {
+      return highlight.match.row
+    })
+
+    this.setState({
+      searchResults: matches,
+      matchIndex: resultIndex,
+      totalLines: this.term.buffer.active.length
+    })
   }
 
   searchPrev = (searchInput, options) => {
@@ -1161,10 +1179,7 @@ clear\r`
   }
 
   canReceiveBroadcast = (termRef) => {
-    const tabId = termRef.props?.tab?.id
-    const isActiveInBatch = termRef.props.currentBatchTabId === tabId
     return (
-      isActiveInBatch &&
       termRef.socket &&
       termRef.props?.tab.pane === paneMap.terminal
     )
@@ -1349,6 +1364,12 @@ clear\r`
       },
       trigger: this.props.config.pasteWhenContextMenu ? [] : ['contextMenu']
     }
+    const barProps = {
+      matchIndex: this.state.matchIndex,
+      matches: this.state.searchResults,
+      totalLines: this.state.totalLines,
+      height
+    }
     return (
       <Dropdown {...dropdownProps}>
         <div
@@ -1361,6 +1382,7 @@ clear\r`
             lines={this.state.lines}
             close={this.closeNormalBuffer}
           />
+          <SearchResultBar {...barProps} />
           <Spin className='loading-wrapper' spinning={loading} />
         </div>
       </Dropdown>

package/client/components/terminal/terminal.styl

@@ -135,3 +135,11 @@
 .suggestion-delete
   margin-left 5px
   visibility hidden
+
+.term-search-bar
+  position absolute
+  right 0
+  top 0
+  bottom 0
+  background transparent
+  width 16px

package/package.json

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