@electerm/electerm-react 1.60.56 → 1.70.1

package/client/common/constants.js

@@ -372,3 +372,4 @@ export const sshConfigLoadKey = 'ssh-config-loaded'
 export const sshConfigKey = 'ignore-ssh-config'
 export const connectionHoppingWarnKey = 'connectionHoppingWarnned'
 export const aiChatHistoryKey = 'ai-chat-history'
+export const syncServerDataKey = 'sync-server-data'

package/client/common/default-log-path.js

@@ -0,0 +1,5 @@
+import { osResolve } from './resolve'
+
+export default function () {
+  return osResolve(window.et.appPath || window.store.appPath, 'electerm', 'session_logs')
+}

package/client/common/default-setting.js

@@ -62,5 +62,7 @@ export default {
   baseURLAI: 'https://api.deepseek.com',
   modelAI: 'deepseek-chat',
   roleAI: '终端专家,提供不同系统下命令,简要解释用法,用markdown格式',
-  apiPathAI: '/chat/completions'
+  apiPathAI: '/chat/completions',
+  sessionLogPath: '',
+  sshSftpSplitView: false
 }

package/client/common/find-bookmark-group-id.js

@@ -5,10 +5,9 @@
 import {
   defaultBookmarkGroupId
 } from './constants'
-import { find } from 'lodash-es'
 
 export default (bookmarkGroups, id) => {
-  const obj = find(bookmarkGroups, bg => {
+  const obj = bookmarkGroups.find(bg => {
     return bg.bookmarkIds.includes(id)
   })
   return obj ? obj.id : defaultBookmarkGroupId

package/client/components/batch-op/batch-op-entry.jsx

@@ -0,0 +1,13 @@
+import { lazy, Suspense } from 'react'
+
+// Lazy load BatchOp
+export const BatchOp = lazy(() => import('./batch-op'))
+
+// Wrap BatchOp with Suspense
+export default function BatchOpEntry (props) {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <BatchOp {...props} />
+    </Suspense>
+  )
+}

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

@@ -58,7 +58,7 @@ export default class BookmarkIndex extends PureComponent {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 50)
   }
 
   componentWillUnmount () {

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

@@ -4,7 +4,7 @@ import {
 } from 'antd'
 import { InfoCircleOutlined } from '@ant-design/icons'
 import './footer.styl'
-import { paneMap, statusMap } from '../../common/constants'
+import { statusMap } from '../../common/constants'
 import BatchInput from './batch-input'
 import encodes from '../bookmark-form/encodes'
 import { refs } from '../common/ref'
@@ -131,21 +131,7 @@ export default auto(function FooterEntry (props) {
     )
   }
 
-  const { tabs, leftSidebarWidth, openedSideBar, currentTab } = props.store
-  const pane = currentTab?.pane
-  const type = currentTab?.type
-  if (
-    type === 'rdp' ||
-    type === 'web' ||
-    type === 'vnc' ||
-    pane === paneMap.fileManager ||
-    pane === paneMap.sftp ||
-    !tabs.length
-  ) {
-    return (
-      <div className='main-footer' />
-    )
-  }
+  const { leftSidebarWidth, openedSideBar, inActiveTerminal } = props.store
   const w = 43 + leftSidebarWidth
   const sideProps = openedSideBar
     ? {
@@ -157,6 +143,13 @@ export default auto(function FooterEntry (props) {
     : {
         className: 'main-footer'
       }
+  if (
+    !inActiveTerminal
+  ) {
+    return (
+      <div className='main-footer' {...sideProps} />
+    )
+  }
   return (
     <div {...sideProps}>
       <div className='terminal-footer-flex'>

package/client/components/icons/split-view.jsx

@@ -0,0 +1,14 @@
+import Icon from '@ant-design/icons'
+
+// from https://icon-sets.iconify.design/codicon/case-sensitive/
+const splitViewSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 16 16'>
+    <rect x='1' y='1' width='14' height='14' stroke='currentColor' strokeWidth='1' fill='none' />
+    <line x1='8' y1='1' x2='8' y2='15' stroke='currentColor' strokeWidth='1' />
+    <polyline points='3,5 5,7 3,9' stroke='currentColor' strokeWidth='1' fill='none' />
+    <path d='M9 4H14V12H9V4Z' stroke='currentColor' strokeWidth='1' fill='none' />
+    <path d='M9 6H14' stroke='currentColor' strokeWidth='1' />
+  </svg>
+)
+
+export const SplitViewIcon = props => (<Icon component={splitViewSvg} {...props} />)

package/client/components/main/main.jsx

@@ -6,7 +6,7 @@ import UpdateCheck from './upgrade'
 import SettingModal from '../setting-panel/setting-modal'
 import TextEditor from '../text-editor/text-editor'
 import Sidebar from '../sidebar'
-import BatchOp from '../batch-op/batch-op'
+import BatchOp from '../batch-op/batch-op-entry'
 import CssOverwrite from './css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from './custom-css.jsx'
@@ -20,7 +20,6 @@ import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
 import TerminalInfo from '../terminal-info/terminal-info'
-import { LoadingUI } from './loading'
 import { ConfigProvider, notification, message } from 'antd'
 import InfoModal from '../sidebar/info-modal.jsx'
 import RightSidePanel from '../side-panel-r/side-panel-r'
@@ -193,11 +192,14 @@ export default auto(function Index (props) {
     ...deepCopy(store.terminalInfoProps),
     ...pick(
       config,
-      ['host', 'port', 'saveTerminalLogToFile', 'terminalInfos']
-    ),
-    ...pick(store, [
-      'appPath'
-    ])
+      [
+        'host',
+        'port',
+        'saveTerminalLogToFile',
+        'terminalInfos',
+        'sessionLogPath'
+      ]
+    )
   }
   const sshConfigProps = {
     ...pick(store, [
@@ -225,9 +227,6 @@ export default auto(function Index (props) {
     >
       <div {...ext1}>
         <ShortcutControl config={config} />
-        <LoadingUI
-          wsInited={wsInited}
-        />
         <TermFullscreenControl
           terminalFullScreen={terminalFullScreen}
         />

package/client/components/session/session.jsx

@@ -16,7 +16,8 @@ import {
 } from '@ant-design/icons'
 import {
   Tooltip,
-  message
+  message,
+  Splitter
 } from 'antd'
 import { pick } from 'lodash-es'
 import generate from '../../common/uid'
@@ -27,30 +28,36 @@ import {
   connectionMap,
   terminalRdpType,
   terminalVncType,
-  terminalWebType
+  terminalWebType,
+  terminalTelnetType
 } from '../../common/constants'
+import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
 import safeName from '../../common/safe-name'
 import './session.styl'
 
 const e = window.translate
+const SplitterPane = Splitter.Panel
 
 export default class SessionWrapper extends Component {
   constructor (props) {
     super(props)
-    // Add ref
     this.domRef = createRef()
     this.state = {
-      enableSftp: false,
       cwd: '',
       sftpPathFollowSsh: !!props.config.sftpPathFollowSsh,
       key: Math.random(),
+      splitSize: [50, 50],
       sessionOptions: null,
       sessionId: generate(),
       delKeyPressed: false
     }
+    props.tab.sshSftpSplitView = !!props.config.sshSftpSplitView
   }
 
+  minWithForSplit = 640
+  minHeightForSplit = 400
+
   componentDidMount () {
     this.updateTab()
     // this.initEvent()
@@ -64,6 +71,43 @@ export default class SessionWrapper extends Component {
     return this.domRef.current
   }
 
+  handleSshSftpSplitView = () => {
+    const nv = !this.props.tab.sshSftpSplitView
+    this.editTab({
+      sshSftpSplitView: nv
+    })
+  }
+
+  canSplitView = () => {
+    const {
+      width,
+      height,
+      tab
+    } = this.props
+    if (tab.enableSsh === false) {
+      return false
+    }
+    return width > this.minWithForSplit ||
+      height > this.minHeightForSplit
+  }
+
+  getSplitDirection = () => {
+    const {
+      sshSftpSplitView
+    } = this.props.tab
+    if (!sshSftpSplitView || !this.canSplitView()) {
+      return 'tabed'
+    }
+    const {
+      width,
+      height
+    } = this.props
+    const ratio = width / height
+    const baseRatio = this.minWithForSplit / this.minHeightForSplit
+    const wider = ratio > baseRatio
+    return wider ? 'leftRight' : 'topDown'
+  }
+
   handleClick = () => {
     window.store.activeTabId = this.props.tab.id
   }
@@ -177,7 +221,7 @@ export default class SessionWrapper extends Component {
     const update = {
       pane
     }
-    if (pane === paneMap.fileManager) {
+    if (pane === paneMap.fileManager || pane === paneMap.sftp) {
       this.setState({
         enableSftp: true
       })
@@ -204,10 +248,6 @@ export default class SessionWrapper extends Component {
     return this.props.width
   }
 
-  getWidthSftp = () => {
-    return this.props.width
-  }
-
   renderTerminals = () => {
     const {
       sessionOptions,
@@ -218,7 +258,7 @@ export default class SessionWrapper extends Component {
       tab
     } = this.props
     const {
-      pane, type
+      pane, type, sshSftpSplitView
     } = tab
     if (type === terminalWebType) {
       const webProps = {
@@ -269,13 +309,16 @@ export default class SessionWrapper extends Component {
         />
       )
     }
-    const cls = pane === paneMap.terminal
+
+    const cls = pane === paneMap.terminal ||
+      pane === paneMap.ssh ||
+      (sshSftpSplitView && this.canSplitView())
       ? 'terms-box'
       : 'terms-box hide'
-    const width = this.getWidth()
-    const height = this.props.computeHeight(
-      this.props.height
-    )
+    const {
+      width,
+      height
+    } = this.calcTermWidthHeight()
     const themeConfig = copy(window.store.getThemeConfig())
     const logName = safeName(`${tab.title ? tab.title + '_' : ''}${tab.host ? tab.host + '_' : ''}${tab.id}`)
     const pops = {
@@ -312,6 +355,56 @@ export default class SessionWrapper extends Component {
     )
   }
 
+  isNotTerminalType = () => {
+    const { type } = this.props.tab
+    return type === terminalRdpType ||
+      type === terminalVncType ||
+      type === terminalWebType ||
+      type === terminalTelnetType
+  }
+
+  calcSftpWidthHeight = () => {
+    const {
+      width,
+      height
+    } = this.props
+    if (!this.canSplitView() || !this.props.tab.sshSftpSplitView) {
+      return {
+        width,
+        height
+      }
+    }
+    const direction = this.getSplitDirection()
+    const [, size2] = this.state.splitSize
+    const w = direction === 'leftRight' ? size2 * width / 100 : width
+    const h = direction === 'leftRight' ? height : size2 * height / 100
+    return {
+      width: w,
+      height: h
+    }
+  }
+
+  calcTermWidthHeight = () => {
+    const width = this.getWidth()
+    const height = this.props.computeHeight(
+      this.props.height
+    )
+    if (!this.canSplitView() || !this.props.tab.sshSftpSplitView) {
+      return {
+        width,
+        height
+      }
+    }
+    const direction = this.getSplitDirection()
+    const [size1] = this.state.splitSize
+    const w = direction === 'leftRight' ? size1 * width / 100 : width
+    const h = direction === 'leftRight' ? height : size1 * height / 100
+    return {
+      width: w,
+      height: h
+    }
+  }
+
   renderSftp = () => {
     const {
       sessionOptions,
@@ -320,23 +413,23 @@ export default class SessionWrapper extends Component {
       sftpPathFollowSsh,
       cwd
     } = this.state
-    const { pane, type, id } = this.props.tab
+    const { pane, id, sshSftpSplitView } = this.props.tab
     if (
-      type === terminalRdpType ||
-      type === terminalVncType ||
-      type === terminalWebType
+      this.isNotTerminalType()
     ) {
       return null
     }
     const height = this.props.computeHeight(
       this.props.height
     )
-    const cls = pane === paneMap.terminal
-      ? 'hide'
-      : ''
+    const cls = pane === paneMap.fileManager || paneMap.sftp === pane ||
+    (sshSftpSplitView && this.canSplitView())
+      ? ''
+      : 'hide'
     const exts = {
       ...this.props,
       sftpPathFollowSsh,
+      sshSftpSplitView,
       cwd,
       pid: id,
       enableSftp,
@@ -344,7 +437,7 @@ export default class SessionWrapper extends Component {
       height,
       sessionId,
       pane,
-      width: this.getWidthSftp()
+      ...this.calcSftpWidthHeight()
     }
     return (
       <div className={cls}>
@@ -416,18 +509,38 @@ export default class SessionWrapper extends Component {
     )
   }
 
-  renderControl = () => {
-    const { sftpPathFollowSsh } = this.state
-    const { props } = this
-    const { tab } = props
-    const { pane, enableSsh, type } = tab
-    if (
-      type === terminalRdpType ||
-      type === terminalVncType ||
-      type === terminalWebType
-    ) {
+  renderSplitToggle = () => {
+    if (!this.canSplitView() || this.isNotTerminalType()) {
+      return null
+    }
+    const title = e('sshSftpSplitView')
+    return (
+      <Tooltip title={title} placement='bottomLeft'>
+        <span
+          className='pointer mg1r split-view-toggle'
+          onClick={this.handleSshSftpSplitView}
+        >
+          <SplitViewIcon />
+        </span>
+      </Tooltip>
+    )
+  }
+
+  isSsh = () => {
+    const { tab } = this.props
+    return tab.authType
+  }
+
+  renderPaneControl = () => {
+    const {
+      sshSftpSplitView
+    } = this.props.tab
+    if (sshSftpSplitView && this.canSplitView()) {
       return null
     }
+    const { props } = this
+    const { tab } = props
+    const { pane } = tab
     const termType = tab?.type
     const isSsh = tab.authType
     const isLocal = !isSsh && (termType === connectionMap.local || !termType)
@@ -441,6 +554,51 @@ export default class SessionWrapper extends Component {
     if (isSsh || isLocal) {
       controls.push(isSsh ? paneMap.sftp : paneMap.fileManager)
     }
+    const simpleMapper = {
+      [paneMap.terminal]: 'T',
+      [paneMap.fileManager]: 'F',
+      [paneMap.ssh]: 'T'
+    }
+    return (
+      <div className='term-sftp-tabs fleft'>
+        {
+          controls.map((type, i) => {
+            const cls = classnames(
+              'type-tab',
+              type,
+              {
+                active: types[i] === pane
+              }
+            )
+            return (
+              <span
+                className={cls}
+                key={type + '_' + i}
+                onClick={() => this.onChangePane(types[i])}
+              >
+                <span className='type-tab-txt'>
+                  <span className='w500'>{e(type)}</span>
+                  <span className='l500'>{simpleMapper[type]}</span>
+                  <span className='type-tab-line' />
+                </span>
+              </span>
+            )
+          })
+        }
+      </div>
+    )
+  }
+
+  renderSftpPathFollowControl = () => {
+    const {
+      sftpPathFollowSsh
+    } = this.state
+    const { props } = this
+    const { tab } = props
+    const { pane, enableSsh, sshSftpSplitView } = tab
+    const termType = tab?.type
+    const isSsh = tab.authType
+    const isLocal = !isSsh && (termType === connectionMap.local || !termType)
     const checkTxt = e('sftpPathFollowSsh') + ' [Beta]'
     const checkProps = {
       onClick: this.toggleCheckSftpPathFollowSsh,
@@ -451,41 +609,11 @@ export default class SessionWrapper extends Component {
         }
       )
     }
-    const simpleMapper = {
-      [paneMap.terminal]: 'T',
-      [paneMap.fileManager]: 'F',
-      [paneMap.ssh]: 'T'
-    }
+    const isS = pane === paneMap.terminal ||
+      pane === paneMap.ssh ||
+      sshSftpSplitView
     return (
-      <div
-        className='terminal-control fix'
-      >
-        <div className='term-sftp-tabs fleft'>
-          {
-            controls.map((type, i) => {
-              const cls = classnames(
-                'type-tab',
-                type,
-                {
-                  active: types[i] === pane
-                }
-              )
-              return (
-                <span
-                  className={cls}
-                  key={type + '_' + i}
-                  onClick={() => this.onChangePane(types[i])}
-                >
-                  <span className='type-tab-txt'>
-                    <span className='w500'>{e(type)}</span>
-                    <span className='l500'>{simpleMapper[type]}</span>
-                    <span className='type-tab-line' />
-                  </span>
-                </span>
-              )
-            })
-          }
-        </div>
+      <>
         {
           (isSsh && enableSsh) || isLocal
             ? (
@@ -498,13 +626,101 @@ export default class SessionWrapper extends Component {
             : null
         }
         {
-          this.renderDelTip(pane === paneMap.terminal)
+          this.renderDelTip(isS)
         }
+      </>
+    )
+  }
+
+  renderControl = () => {
+    if (
+      this.isNotTerminalType()
+    ) {
+      return null
+    }
+    return (
+      <div
+        className='terminal-control fix'
+      >
+        {this.renderPaneControl()}
+        {this.renderSftpPathFollowControl()}
+        {this.renderSplitToggle()}
         {this.renderTermControls()}
       </div>
     )
   }
 
+  onSplitResize = (sizes) => {
+    const direction = this.getSplitDirection()
+    const {
+      width,
+      height
+    } = this.props
+    const all = direction === 'leftRight' ? width : height
+    const size = sizes.map(d => d * 100 / all)
+    this.setState({
+      splitSize: size
+    })
+  }
+
+  renderViews = () => {
+    if (this.isNotTerminalType()) {
+      return this.renderTerminals()
+    }
+    const notSplitVew = !this.canSplitView() || !this.props.tab.sshSftpSplitView
+    const { pane } = this.props.tab
+    const show1 = notSplitVew && (pane === paneMap.terminal || pane === paneMap.ssh)
+    const show2 = notSplitVew && (pane === paneMap.fileManager || pane === paneMap.sftp)
+    const direction = this.getSplitDirection()
+    const layout = direction === 'leftRight' ? 'horizontal' : 'vertical'
+    const [size1, size2] = this.state.splitSize
+    const splitterProps = {
+      layout,
+      onResize: this.onSplitResize,
+      onResizeEnd: this.onSplitResize,
+      className: notSplitVew ? 'not-split-view' : '',
+      style: {
+        width: this.props.width + 'px',
+        height: this.props.height + 'px'
+      }
+    }
+    const paneProps = {
+      min: '20%',
+      max: '80%',
+      style: {
+        overflow: 'hidden'
+      }
+    }
+    const s1 = show1
+      ? '100%'
+      : show2
+        ? '0%'
+        : size1 + '%'
+    const s2 = show2
+      ? '100%'
+      : show1
+        ? '0%'
+        : size2 + '%'
+    const paneProps1 = {
+      ...paneProps,
+      size: s1
+    }
+    const paneProps2 = {
+      ...paneProps,
+      size: s2
+    }
+    return (
+      <Splitter {...splitterProps}>
+        <SplitterPane {...paneProps1}>
+          {this.renderTerminals()}
+        </SplitterPane>
+        <SplitterPane {...paneProps2}>
+          {this.renderSftp()}
+        </SplitterPane>
+      </Splitter>
+    )
+  }
+
   render () {
     const { pane } = this.props.tab
     const cls = classnames(
@@ -531,8 +747,7 @@ export default class SessionWrapper extends Component {
         {...divProps}
       >
         {this.renderControl()}
-        {this.renderTerminals()}
-        {this.renderSftp()}
+        {this.renderViews()}
       </div>
     )
   }

package/client/components/session/session.styl

@@ -72,3 +72,5 @@
   display block !important
   width auto !important
   height auto !important
+.not-split-view .ant-splitter-bar-dragger
+  display none