@electerm/electerm-react 1.39.18 → 1.39.31

package/client/components/quick-commands/quick-command-transport-mod.jsx

@@ -4,13 +4,14 @@ import time from '../../common/time'
 import copy from 'json-deep-copy'
 
 export default class QmTransport extends BookmarkTransport {
+  name = 'quickCommands'
   beforeUpload = async (file) => {
     const { store } = this.props
     const txt = await window.fs.readFile(file.path)
     try {
-      const quickCommands = JSON.parse(txt)
-      const quickCommandsOld = copy(store.quickCommands)
-      const bmTreeOld = quickCommandsOld.reduce((p, v) => {
+      const arr = JSON.parse(txt)
+      const arrOld = copy(store[this.name])
+      const bmTreeOld = arrOld.reduce((p, v) => {
         return {
           ...p,
           [v.id]: v
@@ -18,19 +19,19 @@ export default class QmTransport extends BookmarkTransport {
       }, {})
       const add = []
       const dbAdd = []
-      quickCommands.forEach(bg => {
+      arr.forEach(bg => {
         if (!bmTreeOld[bg.id]) {
-          quickCommandsOld.push(bg)
+          arrOld.push(bg)
           add.push(bg)
           dbAdd.push({
-            db: 'quickCommands',
+            db: this.name,
             obj: bg
           })
         }
       })
-      store.storeAssign({
-        quickCommands: quickCommandsOld
-      })
+      store.setState(
+        this.name, arrOld
+      )
       store.batchDbAdd(dbAdd)
     } catch (e) {
       store.onError(e)
@@ -44,11 +45,9 @@ export default class QmTransport extends BookmarkTransport {
 
   handleDownload = () => {
     const { store } = this.props
-    const {
-      quickCommands
-    } = store
-    const txt = JSON.stringify(quickCommands, null, 2)
+    const arr = store[this.name]
+    const txt = JSON.stringify(arr, null, 2)
     const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
-    download('quickCommands-' + stamp + '.json', txt)
+    download('electerm-' + this.name + '-' + stamp + '.json', txt)
   }
 }

package/client/components/rdp/rdp-session.jsx

@@ -70,7 +70,7 @@ export default class RdpSession extends Component {
       openedSideBar
     } = this.props
     return {
-      width: width - (pinned && openedSideBar ? leftSidebarWidth : 0),
+      width: width - (pinned && openedSideBar ? leftSidebarWidth : 0) - 42,
       height: height - tabsHeight
     }
   }
@@ -235,7 +235,7 @@ export default class RdpSession extends Component {
       const isHorizontal = false
       const delta = isHorizontal ? e.deltaX : e.deltaY
       const step = Math.round(Math.abs(delta) * 15 / 8)
-      console.log(x, y, step, delta, isHorizontal)
+      // console.log(x, y, step, delta, isHorizontal)
       params = [x, y, step, delta > 0, isHorizontal]
     } else if (type === 'keydown' || type === 'keyup') {
       params = [keyCode, pressed]
@@ -349,6 +349,14 @@ export default class RdpSession extends Component {
     this.setState(res, this.handleReInit)
   }
 
+  renderHelp = () => {
+    return (
+      <HelpIcon
+        link={rdpHelpLink}
+      />
+    )
+  }
+
   renderControl = () => {
     const {
       id
@@ -358,45 +366,54 @@ export default class RdpSession extends Component {
       onChange: this.handleResChange,
       popupMatchSelectWidth: false
     }
+    return (
+      <div className='pd1 fix session-v-info'>
+        <div className='fleft'>
+          <ReloadOutlined
+            onClick={this.handleReInit}
+            className='mg2r mg1l pointer'
+          />
+          <Select
+            {...sleProps}
+          >
+            {
+              this.getAllRes().map(d => {
+                const v = d.id
+                return (
+                  <Option
+                    key={v}
+                    value={v}
+                  >
+                    {d.width}x{d.height}
+                  </Option>
+                )
+              })
+            }
+          </Select>
+          <EditOutlined
+            onClick={this.handleEditResolutions}
+            className='mg2r mg1l pointer'
+          />
+          {this.renderInfo()}
+          {this.renderHelp()}
+        </div>
+        <div className='fright'>
+          {this.props.fullscreenIcon()}
+        </div>
+      </div>
+    )
+  }
+
+  renderInfo () {
     const {
       host,
       port,
       username
     } = this.props.tab
     return (
-      <div className='pd1 fix'>
-        <ReloadOutlined
-          onClick={this.handleReInit}
-          className='mg2r mg1l pointer'
-        />
-        <Select
-          {...sleProps}
-        >
-          {
-            this.getAllRes().map(d => {
-              const v = d.id
-              return (
-                <Option
-                  key={v}
-                  value={v}
-                >
-                  {d.width}x{d.height}
-                </Option>
-              )
-            })
-          }
-        </Select>
-        <EditOutlined
-          onClick={this.handleEditResolutions}
-          className='mg2r mg1l pointer'
-        />
-        <span className='mg2l mg2r'>
-          {username}@{host}:{port}
-        </span>
-        <HelpIcon
-          link={rdpHelpLink}
-        />
-      </div>
+      <span className='mg2l mg2r'>
+        {username}@{host}:{port}
+      </span>
     )
   }
 
@@ -425,7 +442,7 @@ export default class RdpSession extends Component {
       <Spin spinning={loading}>
         <div
           {...rdpProps}
-          className='rdp-session-wrap pd1'
+          className='rdp-session-wrap session-v-wrap'
         >
           {this.renderControl()}
           <canvas

package/client/components/session/session.jsx

@@ -5,6 +5,7 @@ import { Component } from 'react'
 import Term from '../terminal'
 import Sftp from '../sftp/sftp-entry'
 import RdpSession from '../rdp/rdp-session'
+import VncSession from '../vnc/vnc-session'
 import {
   BorderVerticleOutlined,
   BorderHorizontalOutlined,
@@ -29,7 +30,8 @@ import {
   footerHeight,
   terminalActions,
   connectionMap,
-  terminalRdpType
+  terminalRdpType,
+  terminalVncType
 } from '../../common/constants'
 import ResizeWrap from '../common/resize-wrap'
 import safeName from '../../common/safe-name'
@@ -325,7 +327,7 @@ export default class SessionWrapper extends Component {
     const {
       pane, type
     } = this.props.tab
-    if (type === terminalRdpType) {
+    if (type === terminalRdpType || type === terminalVncType) {
       const rdpProps = {
         tab: this.props.tab,
         sessionId,
@@ -339,14 +341,23 @@ export default class SessionWrapper extends Component {
           'openedSideBar',
           'delTab',
           'config',
+          'reloadTab',
           'editTab'
         ]),
         ...pick(
           this,
           [
+            'fullscreenIcon',
             'setSessionState'
           ])
       }
+      if (type === terminalVncType) {
+        return (
+          <VncSession
+            {...rdpProps}
+          />
+        )
+      }
       return (
         <RdpSession
           {...rdpProps}
@@ -506,7 +517,7 @@ export default class SessionWrapper extends Component {
     const { splitDirection, terminals, sftpPathFollowSsh } = this.state
     const { props } = this
     const { pane, enableSsh, type } = props.tab
-    if (type === terminalRdpType) {
+    if (type === terminalRdpType || type === terminalVncType) {
       return null
     }
     const termType = props.tab?.type

package/client/components/session/session.styl

@@ -59,6 +59,11 @@
 .web-session-wrap
   height 100vh
   background main
-.rdp-session-wrap
+.session-v-wrap
   background main
-  overflow scroll
+  overflow scroll
+  z-index 99
+.vnc-session-wrap > div
+  display block !important
+  width auto !important
+  height auto !important

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

@@ -15,11 +15,13 @@ import TabHistory from './tab-history'
 import TabQuickCommands from './tab-quick-commands'
 import TabSettings from './tab-settings'
 import TabThemes from './tab-themes'
+import TabProfiles from './tab-profiles'
 
 const { prefix } = window
 const m = prefix('common')
 const t = prefix('terminalThemes')
 const q = prefix('quickCommands')
+const f = prefix('profiles')
 
 export default class SettingModalWrap extends Component {
   selectItem = (item) => {
@@ -92,6 +94,11 @@ export default class SettingModalWrap extends Component {
         key: settingMap.quickCommands,
         label: q(settingMap.quickCommands),
         children: null
+      },
+      {
+        key: settingMap.profiles,
+        label: f(settingMap.profiles),
+        children: null
       }
     ]
     const tabsProps = {
@@ -139,6 +146,13 @@ export default class SettingModalWrap extends Component {
           store={store}
           settingTab={settingTab}
         />
+        <TabProfiles
+          listProps={props0}
+          settingItem={settingItem}
+          formProps={formProps}
+          store={store}
+          settingTab={settingTab}
+        />
       </div>
     )
   }

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

@@ -71,7 +71,7 @@ export default class SettingTerminal extends Component {
   }
 
   handleChangeDelMode = v => this.onChangeValue(v, 'backspaceMode')
-  handleChangeRenderType = v => this.onChangeValue(v, 'renderType')
+  handleChangeRenderType = v => this.onChangeValue(v, 'rendererType')
 
   handleChangeFont = (values) => {
     this.onChangeValue(

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

@@ -0,0 +1,38 @@
+import SettingCol from './col'
+import ProfileForm from '../profile/profile-form'
+import ProfileList from '../profile/profile-list'
+import {
+  settingMap
+} from '../../common/constants'
+
+export default function TabProfiles (props) {
+  const {
+    settingTab
+  } = props
+  if (settingTab !== settingMap.profiles) {
+    return null
+  }
+  const {
+    settingItem,
+    listProps,
+    formProps,
+    store
+  } = props
+  return (
+    <div
+      className='setting-tabs-profile'
+    >
+      <SettingCol>
+        <ProfileList
+          {...listProps}
+          quickCommandId={store.quickCommandId}
+        />
+        <ProfileForm
+          {...formProps}
+          quickCommandTags={store.quickCommandTags}
+          key={settingItem.id}
+        />
+      </SettingCol>
+    </div>
+  )
+}

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

@@ -6,7 +6,7 @@
  * - click header to sort
  */
 
-import React from 'react'
+import { Component } from '../common/react-subx'
 import classnames from 'classnames'
 import { isEqual, pick, find, isNull, isArray, isUndefined } from 'lodash-es'
 import generate from '../../common/uid'
@@ -17,24 +17,32 @@ import {
   maxDragMove,
   sftpControlHeight,
   eventTypes,
-  paneMap,
-  commonActions
+  paneMap
 } from '../../common/constants'
 import copy from 'json-deep-copy'
 import FileSection from './file-item'
 import PagedList from './paged-list'
 import {
   DownOutlined,
-  UpOutlined
+  UpOutlined,
+  CheckOutlined
 } from '@ant-design/icons'
+import IconHolder from '../context-menu/icon-holder'
 
 const { prefix } = window
 const e = prefix('sftp')
 
-export default class FileListTable extends React.Component {
+export default class FileListTable extends Component {
   constructor (props) {
     super(props)
-    this.state = this.initFromProps()
+    this.state = {
+      ...this.initFromProps(),
+      showContextMenu: false,
+      contextMenuPos: {
+        left: 0,
+        top: 0
+      }
+    }
   }
 
   componentDidMount () {
@@ -61,10 +69,37 @@ export default class FileListTable extends React.Component {
   }
 
   componentWillUnmount () {
-    window.removeEventListener('message', this.onContextAction)
     window.removeEventListener('message', this.onMsg)
   }
 
+  setOnCloseEvent = () => {
+    const dom = document
+      .querySelector('.ant-drawer')
+    if (dom) {
+      dom.addEventListener('click', this.onTriggerClose)
+    }
+    document
+      .getElementById('outside-context')
+      .addEventListener('click', this.onTriggerClose)
+  }
+
+  onTriggerClose = (e) => {
+    if (e.target.closest('.context-menu')) {
+      return null
+    }
+    this.setState({
+      showContextMenu: false
+    })
+    const dom = document
+      .querySelector('.ant-drawer')
+    if (dom) {
+      dom.removeEventListener('click', this.onTriggerClose)
+    }
+    document
+      .getElementById('outside-context')
+      .removeEventListener('click', this.onTriggerClose)
+  }
+
   toVisible = (prevProps, props) => {
     return (
       prevProps.pane === paneMap.ssh ||
@@ -128,7 +163,7 @@ export default class FileListTable extends React.Component {
   }
 
   getPropsDefault = () => {
-    return [
+    return this.props.store.config.filePropsEnabled || [
       'name',
       'size',
       'modifyTime'
@@ -229,10 +264,7 @@ export default class FileListTable extends React.Component {
   }
 
   computePos = (e, height) => {
-    return {
-      left: e.clientX,
-      top: e.clientY
-    }
+    return e.target.getBoundingClientRect()
   }
 
   onToggleProp = name => {
@@ -244,41 +276,22 @@ export default class FileListTable extends React.Component {
       : [...names, name]
     const props = all.filter(g => newProps.includes(g))
     const update = this.initFromProps(props)
+    this.props.store.setConfig({
+      filePropsEnabled: props
+    })
     this.setState(update)
   }
 
-  onContextAction = e => {
-    const {
-      action,
-      id,
-      args = [],
-      func
-    } = e.data || {}
-    if (
-      action !== commonActions.clickContextMenu ||
-      id !== this.uid ||
-      !this[func]
-    ) {
-      return false
-    }
-    window.removeEventListener('message', this.onContextAction)
-    this[func](...args)
-  }
-
   handleContextMenu = e => {
     e && e.preventDefault()
-    const items = this.renderContext()
     const pos = e
       ? this.computePos(e)
       : this.pos
-    this.pos = pos
-    this.uid = generate()
-    window.store.openContextMenu({
-      id: this.uid,
-      items,
-      pos
+    this.setState({
+      contextMenuPos: pos,
+      showContextMenu: true
     })
-    window.addEventListener('message', this.onContextAction)
+    this.setOnCloseEvent()
   }
 
   onClickName = (e) => {
@@ -318,18 +331,23 @@ export default class FileListTable extends React.Component {
       const selected = selectedNames.includes(p)
       const disabled = !i
       const cls = classnames(
+        'context-item',
         { selected },
         { unselected: !selected }
       )
-      return {
-        func: 'onToggleProp',
-        icon: disabled || selected ? 'CheckOutlined' : 'IconHolder',
-        text: e(p),
-        disabled,
-        args: [p],
-        noCloseMenu: true,
-        className: cls
+      const icon = disabled || selected ? <CheckOutlined /> : <IconHolder />
+      const obj = {
+        className: cls,
+        onClick: () => this.onToggleProp(p)
       }
+      return (
+        <div
+          {...obj}
+          key={p}
+        >
+          {icon} {e(p)}
+        </div>
+      )
     })
   }
 
@@ -519,6 +537,40 @@ export default class FileListTable extends React.Component {
     )
   }
 
+  renderContextMenu = () => {
+    const {
+      showContextMenu
+    } = this.state
+    if (!showContextMenu) {
+      return null
+    }
+    const {
+      left,
+      top
+    } = this.state.contextMenuPos
+    const outerProps = {
+      className: 'context-menu file-header-context-menu',
+      style: {
+        left: left + 'px',
+        top: top + 'px'
+      }
+    }
+    const innerProps = {
+      className: 'context-menu-inner'
+    }
+    return (
+      <div
+        {...outerProps}
+      >
+        <div
+          {...innerProps}
+        >
+          {this.renderContext()}
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const { fileList, height, type } = this.props
     const tableHeaderHeight = 30
@@ -539,6 +591,7 @@ export default class FileListTable extends React.Component {
     return (
       <div className={cls}>
         {this.renderTableHeader()}
+        {this.renderContextMenu()}
         <div
           {...props}
         >

package/client/components/sftp/sftp-entry.jsx

@@ -990,6 +990,7 @@ export default class Sftp extends Component {
     const loading = this.state[`${type}Loading`]
     const { host, username } = this.props.tab
     const listProps = {
+      store: window.store,
       id,
       type,
       ...this.props,

package/client/components/sftp/sftp.styl

@@ -188,4 +188,7 @@
 
 .pager-wrap
   z-index 4
-  position relative
+  position relative
+.file-header-context-menu
+  position fixed
+  z-index 999

package/client/components/sftp/transfer-common.js

@@ -2,7 +2,7 @@ import createTitle from '../../common/create-title'
 
 export function createTransferProps (props) {
   return {
-    title: createTitle(props.tab),
+    title: createTitle(props.tab, false),
     tabId: props.tab.id,
     sessionId: props.sessionId
   }

package/client/components/terminal/index.jsx

@@ -1027,7 +1027,7 @@ class Term extends Component {
     }
     const startFolder = startDirectory || window.initFolder
     if (startFolder) {
-      const cmd = `cd ${startFolder}\r`
+      const cmd = `cd "${startFolder}"\r`
       this.attachAddon._sendData(cmd)
     }
     if (runScripts && runScripts.length) {
@@ -1049,8 +1049,6 @@ class Term extends Component {
     }
   }
 
-  count = 0
-
   setStatus = status => {
     const id = this.props.tab?.id
     this.props.editTab(id, {
@@ -1094,7 +1092,7 @@ class Term extends Component {
       server = ''
     } = config
     const { sessionId, terminalIndex, id, logName } = this.props
-    const tab = deepCopy(this.props.tab || {})
+    const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
     const {
       srcId, from = 'bookmarks',
       type,