@electerm/electerm-react 3.15.152 → 3.15.153

package/client/common/constants.js

@@ -197,6 +197,7 @@ export const commonLineEndings = commonTxLineEndings
 
 export const maxBatchInput = 30
 export const windowControlWidth = 94
+export const mobileBreakpoint = 800
 export const baseUpdateCheckUrls = [
   packInfo.homepage,
   'https://gitee.com/github-zxdong262/electerm/raw/gh-pages'

package/client/components/footer/batch-input.jsx

@@ -1,14 +1,23 @@
 /**
  * batch input module
+ *
+ * Unified click-to-open behavior for mobile and desktop:
+ *   - click the compact trigger -> expand the textarea + tab-select panel
+ *   - click outside the panel    -> collapse it
+ *   - press Enter in the textarea -> send `cmd` to all selected tabs
+ *
+ * On desktop the compact trigger is rendered as a read-only Input that only
+ * serves as a clickable affordance — it is never a real input. On mobile it
+ * is a small "B" button to save horizontal space. The open/close logic is
+ * identical for both.
  */
 
-import { Component } from 'react'
+import { Component, createRef } from 'react'
 import {
-  AutoComplete,
+  Button,
   Input
 } from 'antd'
 import {
-  batchInputLsKey,
   terminalWebType,
   terminalRdpType,
   terminalVncType
@@ -24,97 +33,71 @@ export default class BatchInput extends Component {
     super(props)
     this.state = {
       cmd: '',
-      open: false,
-      enter: false
+      open: false
     }
+    this.outerRef = createRef()
+    this.textAreaRef = createRef()
+  }
+
+  componentDidMount () {
+    document.addEventListener('mousedown', this.handleDocClick)
   }
 
   componentWillUnmount () {
-    clearTimeout(this.timer)
+    document.removeEventListener('mousedown', this.handleDocClick)
   }
 
-  handleEnter = (e) => {
-    const { batchInputSelectedTabIds } = window.store
-    const { cmd } = this.state
-    if (!cmd.trim()) {
+  // Collapse the panel when the user clicks anywhere outside of it.
+  // Clicks inside an antd Popover (e.g. the tab-select popover, which renders
+  // in a portal outside this node) are treated as "inside" so interacting with
+  // tab selection does not collapse the panel.
+  handleDocClick = (ev) => {
+    if (!this.state.open) {
       return
     }
-    window.store.addBatchInput(cmd)
-    this.props.input(cmd, Array.from(batchInputSelectedTabIds))
-    this.setState({
-      cmd: '',
-      open: false
-    })
-    e.stopPropagation()
-  }
-
-  handleChange = (v = '') => {
-    let vv = v.replace(/^\d+:/, '').replace(/\n$/, '')
-    if (vv === batchInputLsKey) {
-      window.store.clearBatchInput()
-      vv = ''
+    const node = this.outerRef.current
+    if (node && node.contains(ev.target)) {
+      return
     }
-    this.setState({
-      cmd: vv,
-      open: false
-    })
-  }
-
-  handleClick = () => {
-    this.setState({
-      open: true
-    })
-    window.store.filterBatchInputSelectedTabIds()
-  }
-
-  handleBlur = () => {
-    this.setState({
-      open: false
-    })
-  }
-
-  mapper = (v, i) => {
-    return {
-      value: `${i}:${v}`,
-      label: v
+    if (ev.target && ev.target.closest && ev.target.closest('.ant-popover')) {
+      return
     }
+    this.setState({ open: false })
   }
 
-  renderClear = () => {
-    return {
-      value: batchInputLsKey,
-      label: e('clear')
+  handleToggle = () => {
+    const willOpen = !this.state.open
+    if (willOpen) {
+      window.store.filterBatchInputSelectedTabIds()
     }
+    this.setState({ open: willOpen }, () => {
+      if (willOpen && this.textAreaRef.current) {
+        this.textAreaRef.current.focus()
+      }
+    })
   }
 
-  buildOptions = () => {
-    const arr = this.props.batchInputs.map(this.mapper)
-    if (arr.length) {
-      return [
-        ...arr,
-        this.renderClear()
-      ]
+  handleSubmit = (ev) => {
+    const { batchInputSelectedTabIds } = this.props
+    const { cmd } = this.state
+    if (!cmd.trim()) {
+      return
     }
-    return []
-  }
-
-  handleMouseEnter = () => {
-    clearTimeout(this.timer)
+    window.store.addBatchInput(cmd)
+    this.props.input(cmd, Array.from(batchInputSelectedTabIds))
     this.setState({
-      enter: true
+      cmd: '',
+      open: false
     })
+    ev?.stopPropagation()
   }
 
-  leave = () => {
+  handleChange = (ev) => {
     this.setState({
-      enter: false
+      cmd: ev.target.value
     })
   }
 
-  handleMouseLeave = () => {
-    this.timer = setTimeout(this.leave, 5000)
-  }
-
   getTabs = () => {
     const { activeTabId } = this.props
     return deepCopy(this.props.tabs.filter(tab => {
@@ -122,43 +105,54 @@ export default class BatchInput extends Component {
         tab.type !== terminalRdpType &&
         tab.type !== terminalVncType
     })).sort((a, b) => {
-      // Current tab goes first
+      // current tab goes first
       if (a.id === activeTabId) return -1
       if (b.id === activeTabId) return 1
       return 0
     })
   }
 
-  render () {
-    const { cmd, open, enter } = this.state
-    const {
-      batchInputSelectedTabIds
-    } = this.props
-    const opts = {
-      options: this.buildOptions(),
-      value: cmd,
-      onChange: this.handleChange,
-      defaultOpen: false,
-      open,
-      className: 'batch-input-wrap'
+  renderTrigger () {
+    const { isMobile } = this.props
+    if (isMobile) {
+      return (
+        <Button
+          size='small'
+          type='text'
+          onClick={this.handleToggle}
+        >
+          B
+        </Button>
+      )
     }
+    // Desktop: an input-shaped, read-only affordance. It is NOT a real input —
+    // clicking it expands the panel where the user actually types.
+    return (
+      <Input
+        size='small'
+        readOnly
+        placeholder={e('batchInput')}
+        className='batch-input-holder'
+        style={{ cursor: 'pointer' }}
+        onClick={this.handleToggle}
+      />
+    )
+  }
+
+  render () {
+    const { open } = this.state
+    const { batchInputSelectedTabIds } = this.props
     const cls = classNames(
       'batch-input-outer',
-      {
-        'bi-show': open || enter
-      }
+      { 'bi-show': open }
     )
-    const inputProps = {
-      size: 'small',
-      placeholder: e('batchInput'),
-      className: 'batch-input-holder'
-    }
     const textAreaProps = {
-      onPressEnter: this.handleEnter,
-      onClick: this.handleClick,
-      onBlur: this.handleBlur,
+      ref: this.textAreaRef,
+      onPressEnter: this.handleSubmit,
+      onChange: this.handleChange,
+      value: this.state.cmd,
       size: 'small',
-      autoSize: { minRows: 1 },
+      autoSize: { minRows: 2, maxRows: 6 },
       placeholder: e('batchInput'),
       allowClear: true
     }
@@ -173,22 +167,15 @@ export default class BatchInput extends Component {
     return (
       <span
         className={cls}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
+        ref={this.outerRef}
       >
         <span className='bi-compact'>
-          <Input
-            {...inputProps}
-          />
+          {this.renderTrigger()}
         </span>
         <span className='bi-full'>
-          <AutoComplete
-            {...opts}
-          >
-            <Input.TextArea
-              {...textAreaProps}
-            />
-          </AutoComplete>
+          <Input.TextArea
+            {...textAreaProps}
+          />
           <TabSelect {...tabSelectProps} />
         </span>
       </span>

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

@@ -1,8 +1,9 @@
 import { auto } from 'manate/react'
 import {
-  Select
+  Select,
+  Dropdown
 } from 'antd'
-import { InfoCircleOutlined } from '@ant-design/icons'
+import { InfoCircleOutlined, TranslationOutlined } from '@ant-design/icons'
 import './footer.styl'
 import { statusMap } from '../../common/constants'
 import BatchInput from './batch-input'
@@ -54,9 +55,9 @@ export default auto(function FooterEntry (props) {
     const batchProps = {
       input: batchInput,
       tabs: store.tabs,
-      batchInputs: store.batchInputs,
       batchInputSelectedTabIds: store.batchInputSelectedTabIds,
-      activeTabId: store.activeTabId
+      activeTabId: store.activeTabId,
+      isMobile: store.isMobile
     }
     return (
       <div className='terminal-footer-unit terminal-footer-center'>
@@ -96,6 +97,28 @@ export default auto(function FooterEntry (props) {
       size: 'small',
       popupMatchSelectWidth: false
     }
+    if (props.store.isMobile) {
+      const items = encodes.map(k => {
+        return {
+          key: k,
+          label: k.toUpperCase(),
+          onClick: () => handleSwitchEncoding(k)
+        }
+      })
+      return (
+        <div className='terminal-footer-unit terminal-footer-info'>
+          <Dropdown
+            menu={{ items }}
+            placement='topRight'
+            trigger={['click']}
+          >
+            <TranslationOutlined
+              className='pointer font18 mobile-encode-trigger'
+            />
+          </Dropdown>
+        </div>
+      )
+    }
     return (
       <div className='terminal-footer-unit terminal-footer-info'>
         <div className='fleft relative'>

package/client/components/footer/footer.styl

@@ -39,22 +39,26 @@
   // margin so the history icon stays roughly equidistant from AI and Q
   margin-left 3px
 .batch-input-outer
+  position relative
   .bi-full
     display none
   &.bi-show
-    line-height 20px
-    .bi-full
-      display inline
+    // hide the trigger while the popup is open so we don't show two
+    // "batch input" fields at once (desktop trigger is an input-shaped affordance)
     .bi-compact
       display none
+    .bi-full
+      display flex
+      flex-direction column
+      gap 6px
+      position absolute
+      bottom 100%
+      left 0
+      z-index 1000
+      background var(--main)
+      padding 8px 10px
+      box-shadow 0 -2px 8px rgba(0, 0, 0, 0.2)
+      border-radius 4px 4px 0 0
+      min-width 360px
 .batch-input-holder
-  width 100px
-@media (max-width: 500px)
-  .batch-input-outer
-    &.bi-show
-      position fixed
-      left 100px
-      right 0
-      bottom 0
-      z-index 100
-      background var(--main)
+  width 100px

package/client/components/layout/layout.jsx

@@ -118,7 +118,8 @@ export default auto(function Layout (props) {
           'leftSidebarWidth',
           'addPanelWidth',
           'pinned',
-          'openedSideBar'
+          'openedSideBar',
+          'isMobile'
         ])
       }
       return (

package/client/components/main/main.jsx

@@ -113,7 +113,9 @@ export default auto(function Index (props) {
     'not-win': !isWin,
     'qm-pinned': pinnedQuickCommandBar,
     fullscreen,
-    'is-main': !isSecondInstance
+    'is-main': !isSecondInstance,
+    'is-mobile': store.isMobile,
+    'is-desktop': !store.isMobile
   })
   const ext1 = {
     className: cls

package/client/components/quick-commands/quick-command-item.jsx

@@ -111,7 +111,7 @@ export default class QuickCommandsItem extends PureComponent {
         title={this.renderTooltip()}
         placement='top'
         mouseEnterDelay={0.5}
-        overlayClassName='qm-tooltip-overlay'
+        classNames={{ root: 'qm-tooltip-overlay' }}
       >
         <Button
           key={id}

package/client/components/session/session.jsx

@@ -594,6 +594,9 @@ export default class SessionWrapper extends Component {
   }
 
   renderSplitToggle = () => {
+    if (window.store.isMobile) {
+      return null
+    }
     if (!this.canSplitView() || this.isNotTerminalType()) {
       return null
     }
@@ -673,8 +676,8 @@ export default class SessionWrapper extends Component {
                 onClick={() => this.onChangePane(types[i])}
               >
                 <span className='type-tab-txt'>
-                  <span className='w500'>{e(type)}</span>
-                  <span className='l500'>{simpleMapper[type]}</span>
+                  <span className='w800'>{e(type)}</span>
+                  <span className='l800'>{simpleMapper[type]}</span>
                   <span className='type-tab-line' />
                 </span>
               </span>

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

@@ -182,6 +182,7 @@ export default auto(function SettingModalWrap (props) {
       visible={show}
       useSystemTitleBar={useSystemTitleBar}
       innerWidth={innerWidth}
+      isMobile={props.store.isMobile}
     >
       {renderTabs()}
     </SettingModal>

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

@@ -16,6 +16,18 @@ export default class SettingWrap extends Component {
     )
   }
 
+  renderRightClose () {
+    if (this.props.isMobile) {
+      return null
+    }
+    return (
+      <CloseCircleOutlined
+        className='close-setting-wrap-icon close-setting-wrap'
+        onClick={this.props.onCancel}
+      />
+    )
+  }
+
   render () {
     const pops = {
       open: this.props.visible,
@@ -29,10 +41,7 @@ export default class SettingWrap extends Component {
       <Drawer
         {...pops}
       >
-        <CloseCircleOutlined
-          className='close-setting-wrap-icon close-setting-wrap'
-          onClick={this.props.onCancel}
-        />
+        {this.renderRightClose()}
         <CloseCircleOutlined
           className='close-setting-wrap alt-close-setting-wrap'
           onClick={this.props.onCancel}

package/client/components/sidebar/transfer-list.jsx

@@ -37,7 +37,7 @@ export default memo(function TransferList (props) {
   const popProps = {
     placement: 'right',
     destroyOnHidden: true,
-    overlayClassName: 'transfer-list-card',
+    classNames: { root: 'transfer-list-card' },
     content: <TransferModal {...transferModalProps} />
   }
   return (

package/client/components/tabs/index.jsx

@@ -83,6 +83,9 @@ export default class Tabs extends Component {
   }
 
   isOverflow = () => {
+    if (this.props.isMobile || !this.domRef.current) {
+      return false
+    }
     const { tabs = [] } = this.props
     const len = tabs.length
     const addBtnWidth = 22
@@ -120,6 +123,9 @@ export default class Tabs extends Component {
   }
 
   adjustScroll = () => {
+    if (this.props.isMobile || !this.domRef.current) {
+      return
+    }
     const { tabs, currentBatchTabId, batch } = this.props
     const index = tabs.findIndex(t => t.id === currentBatchTabId)
     const tabsDomWith = Array.from(
@@ -139,6 +145,9 @@ export default class Tabs extends Component {
   }
 
   handleScrollLeft = () => {
+    if (!this.domRef.current) {
+      return
+    }
     let { scrollLeft } = this.domRef.current
     scrollLeft = scrollLeft - tabMargin - tabWidth
     if (scrollLeft < 0) {
@@ -148,6 +157,9 @@ export default class Tabs extends Component {
   }
 
   handleScrollRight = () => {
+    if (!this.domRef.current) {
+      return
+    }
     let { scrollLeft } = this.domRef.current
     scrollLeft = scrollLeft + tabMargin + tabWidth
     if (scrollLeft < 0) {
@@ -349,8 +361,69 @@ export default class Tabs extends Component {
     return null
   }
 
+  renderMobileTabsDropdown (items) {
+    return (
+      <Dropdown
+        menu={{ items }}
+        placement='bottomRight'
+        trigger={['click']}
+      >
+        <DownOutlined className='tabs-dd-icon' />
+      </Dropdown>
+    )
+  }
+
+  renderMobileTabsExtra (items) {
+    return (
+      <div className='mobile-tabs-extra'>
+        {this.renderAddBtn()}
+        {
+          items && items.length
+            ? this.renderMobileTabsDropdown(items)
+            : null
+        }
+      </div>
+    )
+  }
+
+  renderMobileTabs () {
+    const { tabs = [], currentBatchTabId } = this.props
+    const currentTab = tabs.find(t => t.id === currentBatchTabId)
+    const items = tabs.map((t, i) => {
+      return {
+        key: i + '##' + t.id,
+        label: (
+          <span><TabTitle tab={t} /></span>
+        ),
+        onClick: () => this.handleClickMenu({ key: i + '##' + t.id })
+      }
+    })
+    const tabProps = {
+      ...this.props,
+      tab: currentTab,
+      isLast: true,
+      addTab: this.handleTabAdd,
+      tabIndex: 0
+    }
+    const currentTabEl = currentTab
+      ? <Tab {...tabProps} key={currentTab.id} />
+      : null
+    return (
+      <div className='tabs mobile-tabs' ref={this.tabsRef}>
+        <div className='tabs-inner mobile-tabs-inner'>
+          {currentTabEl}
+        </div>
+        {this.renderMobileTabsExtra(items)}
+        {this.renderWindowControl()}
+      </div>
+    )
+  }
+
   renderTabs () {
     const { overflow } = this.state
+    if (this.props.isMobile) {
+      return this.renderMobileTabs()
+    }
     return (
       <div className='tabs' ref={this.tabsRef}>
         {this.renderContent()}

package/client/css/mobile.styl

@@ -1,8 +1,102 @@
-.l500
+.l800
   display none !important
 
-@media (max-width: 500px)
-  .w500
+@media (max-width: 800px)
+  .w800
     display none !important
-  .l500
-    display inline !important
+  .l800
+    display inline !important
+
+// ---------------------------------------------------------------------------
+// Mobile UI driven by store.isMobile (is-mobile class on root)
+// Breakpoint: 800px (see mobileBreakpoint in constants.js)
+// ---------------------------------------------------------------------------
+.is-mobile
+  // ---- 1. Tabs: show only current tab + dropdown, close icon always visible
+  .tabs.mobile-tabs
+    display flex
+    align-items center
+    overflow hidden
+  // leave room for window controls on desktop platforms resized narrow
+  &.not-system-ui.not-mac.not-webapp
+    .tabs.mobile-tabs
+      padding-right 94px
+  .mobile-tabs-inner
+    flex 1
+    min-width 0
+    overflow hidden
+    display flex
+    align-items center
+    margin-left 0 !important
+    width auto !important
+    .tab
+      flex 1
+      max-width none
+      min-width 0
+      width auto
+      text-align left
+      // close icon always visible on mobile
+      .tab-close
+        display block
+  .mobile-tabs-extra
+    flex-shrink 0
+    display flex
+    align-items center
+    padding 0 10px
+    line-height 36px
+    z-index 20
+    .tabs-add-btn
+      margin 0
+      &.empty
+        font-size 20px
+        margin 0
+    .tabs-dd-icon
+      margin-left 8px
+      font-size 14px
+      color var(--text)
+      &:hover
+        color var(--text-light)
+  // tabs-extra must not render on mobile (defensive css too)
+  .tabs-extra
+    display none !important
+
+  // ---- 2. Footer batch input: show "B" button, click to expand
+  // match the quick-commands "Q" button: no flex-grow, same small margin
+  .terminal-footer-center
+    flex-grow 0
+    margin-left 3px
+  .batch-input-outer
+    &.bi-show
+      .bi-full
+        // full-width fixed popup above the footer (mobile is narrow)
+        position fixed
+        left 0
+        right 0
+        bottom 36px
+        z-index 200
+        background var(--main)
+        padding 8px 10px
+        box-shadow 0 -2px 8px rgba(0, 0, 0, 0.2)
+        width auto
+        min-width 0
+        border-radius 0
+
+  // ---- 3. Footer encode select: show icon, click to open dropdown
+  //        match antd Button small icon size (~14px) used by sibling icons
+  .mobile-encode-trigger,
+  .terminal-info-icon
+    font-size 14px !important
+    line-height 36px
+    padding 0 4px
+    &:hover
+      color var(--text-light)
+
+  // ---- 4. Modal: full width / full bleed on mobile
+  .custom-modal-container
+    padding 0
+  .custom-modal-content
+    width 100% !important
+    max-width 100vw
+    margin-top 0
+    min-height 100vh
+    border-radius 0

package/client/store/common.js

@@ -11,7 +11,9 @@ import {
   addPanelWidthLsKey,
   dismissDelKeyTipLsKey,
   connectionMap,
-  lastAiChatSessionIdKey
+  lastAiChatSessionIdKey,
+  mobileBreakpoint,
+  splitMap
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 import { refs, refsStatic } from '../components/common/ref'
@@ -58,14 +60,21 @@ export default Store => {
   Store.prototype.onResize = debounce(async function () {
     const { width, height } = await window.pre.runGlobalAsync('getScreenSize')
     const isMaximized = window.pre.runSync('isMaximized')
+    const w = window.innerWidth
+    const isMobile = w <= mobileBreakpoint
     const update = {
       height: window.innerHeight,
-      innerWidth: window.innerWidth,
+      innerWidth: w,
       screenWidth: width,
       screenHeight: height,
-      isMaximized
+      isMaximized,
+      isMobile
     }
     window.store.storeAssign(update)
+    // Force single-column layout on mobile
+    if (isMobile && window.store.layout !== splitMap.c1) {
+      window.store.setLayout(splitMap.c1)
+    }
     window.pre.runGlobalAsync('setWindowSize', {
       ...update,
       height: window.outerHeight

package/client/store/init-state.js

@@ -23,7 +23,8 @@ import {
   resolutionsLsKey,
   syncServerDataKey,
   splitMap,
-  lastAiChatSessionIdKey
+  lastAiChatSessionIdKey,
+  mobileBreakpoint
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 import { exclude } from 'manate'
@@ -200,6 +201,7 @@ export default () => {
     height: 500,
     isMaximized: window.pre.runSync('isMaximized'),
     hasNodePty: window.pre.runSync('nodePtyCheck'),
+    isMobile: window.innerWidth <= mobileBreakpoint,
     fullscreen: false,
     hideDelKeyTip: ls.getItem(dismissDelKeyTipLsKey) === 'y',
     tabsHeight: 36,

package/package.json

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