@electerm/electerm-react 1.35.6 → 1.36.1

package/client/common/constants.js

@@ -216,6 +216,7 @@ export const syncTokenCreateUrls = {
   custom: 'https://github.com/electerm/electerm/wiki/Custom-sync-server'
 }
 export const settingSyncId = 'setting-sync'
+export const settingTerminalId = 'setting-terminal'
 export const settingShortcutsId = 'setting-shortcuts'
 export const settingCommonId = 'setting-common'
 export const defaultEnvLang = 'en_US.UTF-8'

package/client/components/bookmark-form/color-picker.jsx

@@ -3,6 +3,7 @@ import { Popover } from 'antd'
 import { HexColorPicker } from 'react-colorful'
 import { defaultColors, getRandomHexColor } from '../../common/rand-hex-color.js'
 import { HexInput } from './hex-input.jsx'
+import './color-picker.styl'
 
 // Your Custom Color Picker component
 export const ColorPicker = React.forwardRef((props, ref) => {

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

@@ -22,6 +22,8 @@ import useQm from './use-quick-commands'
 import copy from 'json-deep-copy'
 import { defaults } from 'lodash-es'
 import renderRunScripts from './render-delayed-scripts.jsx'
+import { ColorPickerItem } from './color-picker-item.jsx'
+import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 
 const FormItem = Form.Item
 const { prefix } = window
@@ -60,6 +62,7 @@ export default function LocalFormUi (props) {
     term: props.store.config.terminalType,
     displayRaw: false,
     type: terminalLocalType,
+    color: getRandomDefaultColor(),
     runScripts: [{}],
     enableSsh: true
   }
@@ -75,10 +78,11 @@ export default function LocalFormUi (props) {
         <FormItem
           {...formItemLayout}
           label={e('title')}
-          name='title'
           hasFeedback
         >
-          <Input />
+          <FormItem noStyle name='title'>
+            <Input addonBefore={<ColorPickerItem />} />
+          </FormItem>
         </FormItem>
         <FormItem
           {...formItemLayout}

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

@@ -19,6 +19,7 @@ import useSubmit from './use-submit'
 import useUI from './use-ui'
 import useQm from './use-quick-commands'
 import renderCommon from './form-ssh-common'
+import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 import copy from 'json-deep-copy'
 import { defaultsDeep, uniqBy } from 'lodash-es'
 import './bookmark-form.styl'
@@ -59,6 +60,7 @@ export default function TelnetFormUI (props) {
     id: '',
     username: 'root',
     password: 'guest',
+    color: getRandomDefaultColor(),
     runScripts: [{}],
     term: defaultSettings.terminalType,
     displayRaw: false,

package/client/components/main/custom-css.jsx

@@ -23,6 +23,6 @@ export default function CustomCss (props) {
   }, [])
   useConditionalEffect(() => {
     applyTheme()
-  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+  }, delta && !eq(delta.prev, delta.curr))
   return null
 }

package/client/components/setting-panel/keywords-form.jsx

@@ -0,0 +1,124 @@
+import {
+  Form,
+  Input,
+  Select,
+  Space,
+  Button
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import {
+  MinusCircleOutlined,
+  PlusOutlined
+} from '@ant-design/icons'
+
+const FormItem = Form.Item
+const FormList = Form.List
+const OptionSel = Select.Option
+const { prefix } = window
+const f = prefix('form')
+
+export default function KeywordForm (props) {
+  const {
+    formData
+  } = props
+  console.log('formData', formData)
+  const [formChild] = Form.useForm()
+  function handleTrigger () {
+    formChild.submit()
+  }
+
+  function handleFinish (data) {
+    props.submit(data)
+  }
+
+  function renderItem (field, i, add, remove) {
+    return (
+      <Space
+        align='center'
+        key={field.key}
+      >
+        <FormItem
+          hasFeedback
+        >
+          <FormItem noStyle required name={[field.name, 'keyword']}>
+            <Input
+              addonBefore={renderBefore(field.name)}
+            />
+          </FormItem>
+        </FormItem>
+        <Button
+          icon={<MinusCircleOutlined />}
+          onClick={() => remove(field.name)}
+          className='mg24b'
+        />
+      </Space>
+    )
+  }
+
+  function renderBefore (name) {
+    const colors = ['red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white']
+    return (
+      <FormItem name={[name, 'color']} noStyle>
+        <Select>
+          {
+            colors.map(color => {
+              const ps = {
+                className: 'color-picker-choose iblock',
+                style: {
+                  backgroundColor: color
+                }
+              }
+              return (
+                <OptionSel key={color} value={color}>
+                  <span
+                    {...ps}
+                  />
+                </OptionSel>
+              )
+            })
+          }
+        </Select>
+      </FormItem>
+    )
+  }
+
+  return (
+    <div>
+      <Form
+        form={formChild}
+        onValuesChange={handleTrigger}
+        initialValues={formData}
+        onFinish={handleFinish}
+      >
+        <FormItem {...formItemLayout}>
+          <FormList
+            name='keywords'
+          >
+            {
+              (fields, { add, remove }, { errors }) => {
+                return (
+                  <div>
+                    {
+                      fields.map((field, i) => {
+                        return renderItem(field, i, add, remove)
+                      })
+                    }
+                    <FormItem>
+                      <Button
+                        type='dashed'
+                        onClick={() => add()}
+                        icon={<PlusOutlined />}
+                      >
+                        {f('keyword')}
+                      </Button>
+                    </FormItem>
+                  </div>
+                )
+              }
+            }
+          </FormList>
+        </FormItem>
+      </Form>
+    </div>
+  )
+}

package/client/components/setting-panel/{setting.jsx → setting-common.jsx}

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import {
-  CodeOutlined,
   ArrowRightOutlined,
   LoadingOutlined
 } from '@ant-design/icons'
@@ -9,29 +8,21 @@ import {
   Select,
   Switch,
   Input,
-  Upload,
   InputNumber,
   Alert,
   Button,
-  AutoComplete,
-  Tooltip,
   Table,
   Space
 } from 'antd'
 import deepCopy from 'json-deep-copy'
 import {
-  noTerminalBgValue,
   settingMap,
-  rendererTypes,
   proxyHelpLink
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
-import ShowItem from '../common/show-item'
-import { osResolve } from '../../common/resolve'
 import Link from '../common/external-link'
 import { isNumber, isNaN } from 'lodash-es'
 import createEditLangLink from '../../common/create-lang-edit-link'
-import mapper from '../../common/auto-complete-data-mapper'
 import StartSession from './start-session-select'
 import HelpIcon from '../common/help-icon'
 import delay from '../../common/wait.js'
@@ -41,7 +32,6 @@ const { Option } = Select
 const { prefix } = window
 const e = prefix('setting')
 const f = prefix('form')
-const s = prefix('ssh')
 const p = prefix('sftp')
 const t = prefix('terminalThemes')
 
@@ -58,7 +48,7 @@ const keys = [
   })
 ]
 
-export default class Setting extends Component {
+export default class SettingCommon extends Component {
   state = {
     ready: false,
     languageChanged: false,
@@ -202,20 +192,6 @@ export default class Setting extends Component {
     this.onChangeValue(value, 'onStartSessions')
   }
 
-  handleChangeFont = (values) => {
-    this.onChangeValue(
-      values.join(', '),
-      'fontFamily'
-    )
-  }
-
-  handleChangeCursorStyle = (cursorStyle) => {
-    this.onChangeValue(
-      cursorStyle,
-      'cursorStyle'
-    )
-  }
-
   saveConfig = async (ext) => {
     const { config } = this.props
     if (ext.hotkey && ext.hotkey !== config.hotkey) {
@@ -386,111 +362,6 @@ export default class Setting extends Component {
     )
   }
 
-  renderBgOption = item => {
-    return {
-      value: item.value,
-      label: item.desc
-    }
-  }
-
-  renderTerminalBgSelect = (name) => {
-    const value = this.props.config[name]
-    const defaultValue = defaultSettings[name]
-    const onChange = (v) => this.onChangeValue(v, name)
-    const after = (
-      <Upload
-        beforeUpload={(file) => {
-          this.onChangeValue(file.path, name)
-          return false
-        }}
-        showUploadList={false}
-      >
-        <span>{e('chooseFile')}</span>
-      </Upload>
-    )
-    const dataSource = [
-      {
-        value: '',
-        desc: t('default')
-      },
-      {
-        value: noTerminalBgValue,
-        desc: e('noTerminalBg')
-      }
-    ]
-    const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
-
-    const renderFilter = () => {
-      if (this.props.config[name] === noTerminalBgValue) return
-
-      return (
-        <div>
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterOpacity',
-              numberOpts,
-              e('Opacity')
-            )
-          }
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterBlur',
-              { ...numberOpts, min: 0, max: 50, step: 0.5 },
-              e('Blur')
-            )
-          }
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterBrightness',
-              { ...numberOpts, min: 0, max: 10, step: 0.1 },
-              e('Brightness')
-            )
-          }
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterGrayscale',
-              numberOpts,
-              e('Grayscale')
-            )
-          }
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterContrast',
-              { ...numberOpts, min: 0, max: 10, step: 0.1 },
-              e('Contrast')
-            )
-          }
-        </div>
-      )
-    }
-
-    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(this.renderBgOption)}
-            >
-              <Input
-                addonAfter={after}
-              />
-            </AutoComplete>
-          </Tooltip>
-        </div>
-
-        {
-          renderFilter()
-        }
-      </div>
-    )
-  }
-
   renderReset = () => {
     return (
       <div className='pd1b pd1t'>
@@ -503,20 +374,6 @@ export default class Setting extends Component {
     )
   }
 
-  renderDefaultTerminalType = () => {
-    const opts = this.props.config.terminalTypes.map(mapper)
-    return (
-      <AutoComplete
-        options={opts}
-        style={{
-          width: '200px'
-        }}
-        value={this.props.config.terminalType}
-        onChange={(v) => this.onChangeValue(v, 'terminalType')}
-      />
-    )
-  }
-
   renderProxy () {
     const {
       enableGlobalProxy
@@ -587,82 +444,6 @@ export default class Setting extends Component {
     )
   }
 
-  renderCursorStyleSelect = () => {
-    const {
-      cursorStyle = 'block'
-    } = this.props.config
-    const sets = [
-      {
-        id: 'block',
-        title: '▊'
-      },
-      {
-        id: 'underline',
-        title: '_'
-      },
-      {
-        id: 'bar',
-        title: '|'
-      }
-    ]
-    const props = {
-      onChange: this.handleChangeCursorStyle,
-      value: cursorStyle,
-      style: {
-        width: '100px'
-      }
-    }
-    return (
-      <div className='pd1b'>
-        <span className='inline-title mg1r'>{e('cursorStyle')}</span>
-        <Select
-          {...props}
-          showSearch
-        >
-          {
-            sets.map(f => {
-              return (
-                <Option value={f.id} key={f.id}>
-                  <b>{f.title}</b>
-                </Option>
-              )
-            })
-          }
-        </Select>
-      </div>
-    )
-  }
-
-  renderFontFamily = () => {
-    const { fonts } = this.props.store
-    const { fontFamily } = this.props.config
-    const props = {
-      mode: 'multiple',
-      onChange: this.handleChangeFont,
-      value: fontFamily.split(/, */g)
-    }
-    return (
-      <Select
-        {...props}
-        showSearch
-      >
-        {
-          fonts.map(f => {
-            return (
-              <Option value={f} key={f}>
-                <span style={{
-                  fontFamily: f
-                }}
-                >{f}
-                </span>
-              </Option>
-            )
-          })
-        }
-      </Select>
-    )
-  }
-
   renderLoginPassAfter () {
     const {
       loginPass,
@@ -726,15 +507,12 @@ export default class Setting extends Component {
     const {
       hotkey,
       language,
-      rendererType,
       theme,
       customCss
     } = this.props.config
     const {
-      appPath,
       langs
     } = this.props.store
-    const terminalLogPath = appPath ? osResolve(appPath, 'electerm', 'session_logs') : window.et.sessionLogPath
     const terminalThemes = this.props.store.getSidebarList(settingMap.terminalThemes)
     const [modifier, key] = hotkey.split('+')
     const pops = {
@@ -778,12 +556,6 @@ export default class Setting extends Component {
           />
         </div>
         {this.renderProxy()}
-        {
-          this.renderNumber('scrollback', {
-            step: 200,
-            min: 1000
-          }, e('scrollBackDesc'), 400)
-        }
         {
           this.renderNumber('sshReadyTimeout', {
             step: 200,
@@ -810,7 +582,7 @@ export default class Setting extends Component {
         }
 
         <div className='pd2b'>
-          <span className='inline-title mg1r'>{e('terminalTheme')}</span>
+          <span className='inline-title mg1r'>{t('uiThemes')}</span>
           <Select
             onChange={this.handleChangeTerminalTheme}
             popupMatchSelectWidth={false}
@@ -855,52 +627,6 @@ export default class Setting extends Component {
           <Link className='mg1l' to={createEditLangLink(language)}>{p('edit')}</Link>
         </div>
         {this.renderRestart('languageChanged')}
-        <div className='pd1y font16 bold'>
-          <CodeOutlined className='mg1r' />
-          {s('terminal')} {e('settings')}
-        </div>
-        <div className='pd2b'>
-          <span className='inline-title mg1r'>{e('rendererType')}</span>
-          <Select
-            onChange={v => this.onChangeValue(v, 'rendererType')}
-            value={rendererType}
-            popupMatchSelectWidth={false}
-          >
-            {
-              Object.keys(rendererTypes).map(id => {
-                return (
-                  <Option key={id} value={id}>{id}</Option>
-                )
-              })
-            }
-          </Select>
-        </div>
-        {
-          this.renderNumber('fontSize', {
-            step: 1,
-            min: 9
-          }, `${t('default')} ${e('fontSize')}`, 400)
-        }
-        <div className='pd2b'>
-          <span className='inline-title mg1r'>{t('default')} {e('fontFamily')}</span>
-          {
-            this.renderFontFamily()
-          }
-        </div>
-        <div className='pd2b'>
-          <span className='inline-title mg1r'>{e('defaultTerminalType')}</span>
-          {
-            this.renderDefaultTerminalType()
-          }
-        </div>
-        <div className='pd1b'>{e('terminalBackgroundImage')}</div>
-        {
-          this.renderTerminalBgSelect('terminalBackgroundImagePath')
-        }
-        <div className='pd1b'>{e('terminalWordSeparator')}</div>
-        {
-          this.renderText('terminalWordSeparator', e('terminalWordSeparator'))
-        }
         <div className='pd1b'>{t('default')} {e('execWindows')}</div>
         {
           this.renderTextExec('execWindows')
@@ -913,31 +639,19 @@ export default class Setting extends Component {
         {
           this.renderTextExec('execLinux')
         }
-        {
-          this.renderCursorStyleSelect()
-        }
         {
           [
             'autoRefreshWhenSwitchToSftp',
             'screenReaderMode',
             'initDefaultTabOnStart',
-            'cursorBlink',
-            'rightClickSelectsWord',
-            'pasteWhenContextMenu',
-            'copyWhenSelect',
             'disableSshHistory',
             'disableTransferHistory',
-            'ctrlOrMetaOpenTerminalLink',
             'checkUpdateOnStart',
             'useSystemTitleBar',
             'confirmBeforeExit',
             'debug'
           ].map(this.renderToggle)
         }
-        {this.renderToggle('saveTerminalLogToFile', (
-          <ShowItem to={terminalLogPath} className='mg1l'>{p('open')}</ShowItem>
-        ))}
-
         {this.renderLoginPass()}
         {this.renderReset()}
       </div>

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

@@ -0,0 +1,494 @@
+import React, { Component } from 'react'
+import {
+  CodeOutlined,
+  LoadingOutlined
+} from '@ant-design/icons'
+import {
+  message,
+  Select,
+  Switch,
+  Input,
+  Upload,
+  InputNumber,
+  Button,
+  AutoComplete,
+  Tooltip
+} from 'antd'
+import deepCopy from 'json-deep-copy'
+import {
+  noTerminalBgValue,
+  rendererTypes
+} from '../../common/constants'
+import defaultSettings from '../../common/default-setting'
+import ShowItem from '../common/show-item'
+import { osResolve } from '../../common/resolve'
+import { isNumber, isNaN } from 'lodash-es'
+import mapper from '../../common/auto-complete-data-mapper'
+import KeywordForm from './keywords-form'
+import HelpIcon from '../common/help-icon'
+import './setting.styl'
+
+const { Option } = Select
+const { prefix } = window
+const e = prefix('setting')
+const s = prefix('ssh')
+const p = prefix('sftp')
+const t = prefix('terminalThemes')
+const f = prefix('form')
+
+export default class SettingTerminal extends Component {
+  state = {
+    ready: false
+  }
+
+  componentDidMount () {
+    this.timer = setTimeout(() => {
+      this.setState({
+        ready: true
+      })
+    }, 200)
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  handleResetAll = () => {
+    this.saveConfig(
+      deepCopy(defaultSettings)
+    )
+  }
+
+  onChangeValue = (value, name) => {
+    if (name === 'useSystemTitleBar') {
+      message.info(e('useSystemTitleBarTip'), 5)
+    }
+    this.saveConfig({
+      [name]: value
+    })
+  }
+
+  handleChangeFont = (values) => {
+    this.onChangeValue(
+      values.join(', '),
+      'fontFamily'
+    )
+  }
+
+  handleChangeCursorStyle = (cursorStyle) => {
+    this.onChangeValue(
+      cursorStyle,
+      'cursorStyle'
+    )
+  }
+
+  saveConfig = async (ext) => {
+    const { config } = this.props
+    if (ext.hotkey && ext.hotkey !== config.hotkey) {
+      const res = await window.pre.runGlobalAsync('changeHotkey', ext.hotkey)
+      if (!res) {
+        message.warning(e('hotkeyNotOk'))
+        delete ext.hotkey
+      } else {
+        message.success(e('saved'))
+      }
+    }
+    this.props.store.setConfig(ext)
+  }
+
+  handleSubmitKeywords = (data) => {
+    return this.saveConfig(data)
+  }
+
+  renderToggle = (name, extra = null) => {
+    const checked = !!this.props.config[name]
+    return (
+      <div className='pd2b' key={'rt' + name}>
+        <Switch
+          checked={checked}
+          checkedChildren={e(name)}
+          unCheckedChildren={e(name)}
+          onChange={v => this.onChangeValue(v, name)}
+        />
+        {isNumber(extra) ? null : extra}
+      </div>
+    )
+  }
+
+  renderNumber = (name, options, title = '', width = 136) => {
+    let value = this.props.config[name]
+    if (options.valueParser) {
+      value = options.valueParser(value)
+    }
+    const defaultValue = defaultSettings[name]
+    const {
+      step = 1,
+      min,
+      max,
+      cls,
+      onChange = (v) => {
+        this.onChangeValue(v, name)
+      }
+    } = 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'
+      }
+    }
+    return (
+      <div className={`pd2b ${cls || ''}`}>
+        <InputNumber
+          {...opts}
+        />
+      </div>
+    )
+  }
+
+  renderText = (name, placeholder) => {
+    const value = this.props.config[name]
+    const defaultValue = defaultSettings[name]
+    const onChange = (e) => this.onChangeValue(e.target.value, name)
+    return (
+      <div className='pd2b'>
+        <Input
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder || defaultValue}
+        />
+      </div>
+    )
+  }
+
+  renderBgOption = item => {
+    return {
+      value: item.value,
+      label: item.desc
+    }
+  }
+
+  renderTerminalBgSelect = (name) => {
+    const value = this.props.config[name]
+    const defaultValue = defaultSettings[name]
+    const onChange = (v) => this.onChangeValue(v, name)
+    const after = (
+      <Upload
+        beforeUpload={(file) => {
+          this.onChangeValue(file.path, name)
+          return false
+        }}
+        showUploadList={false}
+      >
+        <span>{e('chooseFile')}</span>
+      </Upload>
+    )
+    const dataSource = [
+      {
+        value: '',
+        desc: t('default')
+      },
+      {
+        value: noTerminalBgValue,
+        desc: e('noTerminalBg')
+      }
+    ]
+    const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
+
+    const renderFilter = () => {
+      if (this.props.config[name] === noTerminalBgValue) return
+
+      return (
+        <div>
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterOpacity',
+              numberOpts,
+              e('Opacity')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterBlur',
+              { ...numberOpts, min: 0, max: 50, step: 0.5 },
+              e('Blur')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterBrightness',
+              { ...numberOpts, min: 0, max: 10, step: 0.1 },
+              e('Brightness')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterGrayscale',
+              numberOpts,
+              e('Grayscale')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterContrast',
+              { ...numberOpts, min: 0, max: 10, step: 0.1 },
+              e('Contrast')
+            )
+          }
+        </div>
+      )
+    }
+
+    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(this.renderBgOption)}
+            >
+              <Input
+                addonAfter={after}
+              />
+            </AutoComplete>
+          </Tooltip>
+        </div>
+
+        {
+          renderFilter()
+        }
+      </div>
+    )
+  }
+
+  renderReset = () => {
+    return (
+      <div className='pd1b pd1t'>
+        <Button
+          onClick={this.handleResetAll}
+        >
+          {e('resetAllToDefault')}
+        </Button>
+      </div>
+    )
+  }
+
+  renderDefaultTerminalType = () => {
+    const opts = this.props.config.terminalTypes.map(mapper)
+    return (
+      <AutoComplete
+        options={opts}
+        style={{
+          width: '200px'
+        }}
+        value={this.props.config.terminalType}
+        onChange={(v) => this.onChangeValue(v, 'terminalType')}
+      />
+    )
+  }
+
+  renderCursorStyleSelect = () => {
+    const {
+      cursorStyle = 'block'
+    } = this.props.config
+    const sets = [
+      {
+        id: 'block',
+        title: '▊'
+      },
+      {
+        id: 'underline',
+        title: '_'
+      },
+      {
+        id: 'bar',
+        title: '|'
+      }
+    ]
+    const props = {
+      onChange: this.handleChangeCursorStyle,
+      value: cursorStyle,
+      style: {
+        width: '100px'
+      }
+    }
+    return (
+      <div className='pd1b'>
+        <span className='inline-title mg1r'>{e('cursorStyle')}</span>
+        <Select
+          {...props}
+          showSearch
+        >
+          {
+            sets.map(f => {
+              return (
+                <Option value={f.id} key={f.id}>
+                  <b>{f.title}</b>
+                </Option>
+              )
+            })
+          }
+        </Select>
+      </div>
+    )
+  }
+
+  renderFontFamily = () => {
+    const { fonts } = this.props.store
+    const { fontFamily } = this.props.config
+    const props = {
+      mode: 'multiple',
+      onChange: this.handleChangeFont,
+      value: fontFamily.split(/, */g)
+    }
+    return (
+      <Select
+        {...props}
+        showSearch
+      >
+        {
+          fonts.map(f => {
+            return (
+              <Option value={f} key={f}>
+                <span style={{
+                  fontFamily: f
+                }}
+                >{f}
+                </span>
+              </Option>
+            )
+          })
+        }
+      </Select>
+    )
+  }
+
+  render () {
+    const { ready } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </div>
+      )
+    }
+    const {
+      rendererType,
+      keywords = [{ color: 'red' }]
+    } = this.props.config
+    const {
+      appPath
+    } = this.props.store
+    const ps = {
+      formData: {
+        keywords
+      },
+      submit: this.handleSubmitKeywords
+    }
+    const terminalLogPath = appPath ? osResolve(appPath, 'electerm', 'session_logs') : window.et.sessionLogPath
+    return (
+      <div className='form-wrap pd1y pd2x'>
+        <div className='pd1y font16 bold'>
+          <CodeOutlined className='mg1r' />
+          {s('terminal')} {e('settings')}
+        </div>
+        {
+          this.renderNumber('scrollback', {
+            step: 200,
+            min: 1000
+          }, e('scrollBackDesc'), 400)
+        }
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{e('rendererType')}</span>
+          <Select
+            onChange={v => this.onChangeValue(v, 'rendererType')}
+            value={rendererType}
+            popupMatchSelectWidth={false}
+          >
+            {
+              Object.keys(rendererTypes).map(id => {
+                return (
+                  <Option key={id} value={id}>{id}</Option>
+                )
+              })
+            }
+          </Select>
+        </div>
+        {
+          this.renderNumber('fontSize', {
+            step: 1,
+            min: 9
+          }, `${t('default')} ${e('fontSize')}`, 400)
+        }
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{t('default')} {e('fontFamily')}</span>
+          {
+            this.renderFontFamily()
+          }
+        </div>
+        <div className='pd2b'>
+          <div className='pd1b'>
+            <span className='inline-title mg1r'>{f('keywordsHighlight')}</span>
+            <HelpIcon
+              title={f('supportRegexp')}
+            />
+          </div>
+          <KeywordForm
+            {...ps}
+          />
+        </div>
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{e('defaultTerminalType')}</span>
+          {
+            this.renderDefaultTerminalType()
+          }
+        </div>
+        <div className='pd1b'>{e('terminalBackgroundImage')}</div>
+        {
+          this.renderTerminalBgSelect('terminalBackgroundImagePath')
+        }
+        <div className='pd1b'>{e('terminalWordSeparator')}</div>
+        {
+          this.renderText('terminalWordSeparator', e('terminalWordSeparator'))
+        }
+        {
+          this.renderCursorStyleSelect()
+        }
+        {
+          [
+            'cursorBlink',
+            'rightClickSelectsWord',
+            'pasteWhenContextMenu',
+            'copyWhenSelect',
+            'ctrlOrMetaOpenTerminalLink'
+          ].map(this.renderToggle)
+        }
+        {this.renderToggle('saveTerminalLogToFile', (
+          <ShowItem to={terminalLogPath} className='mg1l'>{p('open')}</ShowItem>
+        ))}
+        {this.renderReset()}
+      </div>
+    )
+  }
+}

package/client/components/setting-panel/tab-settings.jsx

@@ -1,4 +1,5 @@
-import Setting from './setting'
+import SettingCommon from './setting-common'
+import SettingTerminal from './setting-terminal'
 import SettingCol from './col'
 import SyncSetting from '../setting-sync/setting-sync'
 import Shortcuts from '../shortcuts/shortcuts'
@@ -6,6 +7,7 @@ import List from './list'
 import {
   settingMap,
   settingSyncId,
+  settingTerminalId,
   settingShortcutsId
 } from '../../common/constants'
 
@@ -25,10 +27,12 @@ export default function TabSettings (props) {
   const sid = settingItem.id
   if (sid === settingSyncId) {
     elem = <SyncSetting store={store} />
+  } else if (sid === settingTerminalId) {
+    elem = <SettingTerminal {...listProps} config={store.config} />
   } else if (sid === settingShortcutsId) {
     elem = <Shortcuts store={store} />
   } else {
-    elem = <Setting {...listProps} config={store.config} />
+    elem = <SettingCommon {...listProps} config={store.config} />
   }
   return (
     <div

package/client/components/sftp/list-table-ui.jsx

@@ -94,7 +94,7 @@ export default class FileListTable extends React.Component {
         style: {
           width: w + 'px',
           left: (w * i) + 'px',
-          zIndex: 3 + i
+          zIndex: 3 + i * 2
         }
       }
     })
@@ -110,7 +110,8 @@ export default class FileListTable extends React.Component {
           nextProp: properties[i + 1].name,
           style: {
             left: (w * (i + 1) - (splitDraggerWidth / 2)) + 'px',
-            width: splitDraggerWidth + 'px'
+            width: splitDraggerWidth + 'px',
+            zIndex: 4 + i * 2
           }
         }
       ]

package/client/components/terminal/highlight-addon.js

@@ -0,0 +1,63 @@
+export class KeywordHighlighterAddon {
+  constructor (keywords) {
+    this.keywords = keywords
+  }
+
+  escape = str => {
+    return str.replace(/\\x1B/g, '\\x1B')
+      .replace(/\033/g, '\\033')
+  }
+
+  colorize = (color) => {
+    // Use a switch statement to map color names to ANSI codes
+    switch (color) {
+      case 'green':
+        return '\u001b[32m$&\u001b[0m'
+      case 'yellow':
+        return '\u001b[33m$&\u001b[0m'
+      case 'blue':
+        return '\u001b[34m$&\u001b[0m'
+      case 'magenta':
+        return '\u001b[35m$&\u001b[0m'
+      case 'cyan':
+        return '\u001b[36m$&\u001b[0m'
+      case 'white':
+        return '\u001b[37m$&\u001b[0m'
+      default:
+        return '\u001b[31m$&\u001b[0m'
+    }
+  }
+
+  highlightKeywords = (text) => {
+    console.log('this.keywords', this.keywords)
+    for (const obj of this.keywords) {
+      const {
+        keyword,
+        color = 'red'
+      } = obj || {}
+      if (keyword) {
+        const regex = new RegExp(`(${keyword})`, 'gi')
+        text = text.replace(regex, this.colorize(color))
+      }
+    }
+    return text
+  }
+
+  activate (terminal) {
+    this.terminal = terminal
+    // Override the write method to automatically highlight keywords
+    const originalWrite = terminal.write
+    terminal.write = (data) => {
+      originalWrite.call(
+        terminal,
+        terminal.displayRaw ? this.escape(data) : this.highlightKeywords(data)
+      )
+    }
+    this.originalWrite = originalWrite
+  }
+
+  dispose () {
+    // Restore the original write method when disposing the addon
+    this.terminal.write = this.originalWrite
+  }
+}

package/client/components/terminal/index.jsx

@@ -51,6 +51,7 @@ import NormalBuffer from './normal-buffer'
 import { createTerm, resizeTerm } from './terminal-apis'
 import createLsId from './build-ls-term-id'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
+import { KeywordHighlighterAddon } from './highlight-addon.js'
 
 const { prefix } = window
 const e = prefix('ssh')
@@ -820,10 +821,6 @@ class Term extends Component {
     term.onData(this.onData)
     this.term = term
     term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
-    term.onKey(this.onKey)
-    // if (host && !password && !privateKey) {
-    //   return this.promote()
-    // }
     await this.remoteInit(term)
   }
 
@@ -905,7 +902,13 @@ class Term extends Component {
     })
     const { cols, rows } = term
     const { config } = this.props
-    const { host, port, tokenElecterm, server = '' } = config
+    const {
+      host,
+      port,
+      tokenElecterm,
+      keywords = [],
+      server = ''
+    } = config
     const { sessionId, terminalIndex, id, logName } = this.props
     const tab = deepCopy(this.props.tab || {})
     const {
@@ -1025,46 +1028,14 @@ class Term extends Component {
         noTerminalWriteOutsideSession: true
       }, this)
     }
-
-    // this.decoder = new TextDecoder(encode)
-    if (displayRaw) {
-      const oldWrite = term.write
-      const th = this
-      term.write = function (data) {
-        // let str = ''
-        // if (typeof data === 'object') {
-        //   if (data instanceof ArrayBuffer) {
-        //     str = th.decoder.decode(data)
-        //     oldWrite.call(term, th.escape(str))
-        //   } else {
-        //     const fileReader = new FileReader()
-        //     fileReader.addEventListener('load', () => {
-        //       str = th.decoder.decode(fileReader.result)
-        //       oldWrite.call(term, th.escape(str))
-        //     })
-        //     fileReader.readAsArrayBuffer(new window.Blob([data]))
-        //   }
-        // } else if (typeof data === 'string') {
-        //   oldWrite.call(term, th.escape(data))
-        // } else {
-        //   throw Error(`Cannot handle ${typeof data} websocket message.`)
-        // }
-        oldWrite.call(term, th.escape(data))
-      }
-    }
+    term.displayRaw = displayRaw
+    term.loadAddon(
+      new KeywordHighlighterAddon(keywords)
+    )
     this.term = term
     window.store.triggerResize()
   }
 
-  escape = str => {
-    return str.replace(/\\x1B/g, '\\x1B')
-      .replace(/\033/g, '\\033')
-  }
-
-  onKey = (key, e) => {
-    // log.log('onKey', key, e)
-  }
-
   onResize = throttle(() => {
     const cid = this.props.currentTabId
     const tid = this.props.tab?.id

package/client/store/index.js

@@ -35,7 +35,8 @@ import {
   sidebarPanelWidth,
   paneMap,
   settingSyncId,
-  settingShortcutsId
+  settingShortcutsId,
+  settingTerminalId
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
 import {
@@ -45,6 +46,7 @@ import {
 const { prefix } = window
 const ss = prefix('settingSync')
 const s = prefix('setting')
+const sss = prefix('ssh')
 
 function getReverseColor (hex) {
   // Check if the input is a valid hex color code
@@ -248,12 +250,16 @@ class Store {
   get setting () {
     return [
       {
-        id: settingSyncId,
-        title: ss('settingSync')
+        id: settingTerminalId,
+        title: sss('terminal')
       },
       {
         id: settingShortcutsId,
         title: s('settingShortcuts')
+      },
+      {
+        id: settingSyncId,
+        title: ss('settingSync')
       }
     ]
   }

package/client/store/setting.js

@@ -11,6 +11,7 @@ import copy from 'json-deep-copy'
 import {
   settingMap,
   settingCommonId,
+  settingSyncId,
   modals
 } from '../common/constants'
 import { buildNewTheme } from '../common/terminal-theme'
@@ -150,7 +151,7 @@ export default Store => {
     store.storeAssign({
       settingTab: settingMap.setting
     })
-    store.setSettingItem(copy(store.setting[0]))
+    store.setSettingItem(copy(store.setting.find(d => d.id === settingSyncId)))
     store.openSettingModal()
   }
 

package/package.json

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