@electerm/electerm-react 3.15.152 → 3.15.155

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/bookmark-form/bookmark-form.styl

@@ -16,6 +16,15 @@
 .number-input
   min-width 210px
 
+// On mobile, stack loginScriptDelay and loginScript vertically instead of
+// horizontally (the antd Space renders them side by side by default).
+.is-mobile
+  .run-scripts-space.ant-space
+    flex-direction column
+    align-items stretch
+    .ant-space-item
+      width 100%
+
 .tree-select-wrapper
   display flex
   flex-direction column

package/client/components/bookmark-form/common/run-scripts.jsx

@@ -18,7 +18,7 @@ export default function renderRunScripts () {
       <>
         <Space
           align='baseline'
-          className='width-100'
+          className='width-100 run-scripts-space'
           key={field.key}
         >
           <FormItem

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/qm.styl

@@ -78,4 +78,27 @@
     max-width none
     width 100%
   .qm-label-select
-    width 100%
+    width 100%
+
+// On mobile, stack the quick-command row (name / delay / command / remove)
+// vertically instead of side by side — the horizontal Space.Compact layout
+// is too cramped on narrow screens.
+.is-mobile
+  .qm-cmd-row.ant-space-compact
+    display flex
+    flex-direction column
+    align-items stretch
+    gap 8px
+    .ant-space-compact-item
+      width 100%
+    // reset the constrained widths so inputs fill the row when stacked
+    .qm-name-input
+      max-width none
+      width 100%
+    .ant-input-number
+      width 100% !important
+    // keep the drag handle + remove button on a tidy line of their own
+    > .drag
+      align-self flex-start
+    > button:last-child
+      align-self flex-end

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/quick-commands/quick-commands-list-form.jsx

@@ -67,7 +67,7 @@ export default function renderQm (form) {
     return (
       <Space.Compact
         align='center'
-        className='width-100 mg2b'
+        className='width-100 mg2b qm-cmd-row'
         key={field.key}
         draggable
         onDragStart={(e) => handleDragStart(e, i)}

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
     }
@@ -653,7 +656,8 @@ export default class SessionWrapper extends Component {
     const simpleMapper = {
       [paneMap.terminal]: 'T',
       [paneMap.fileManager]: 'F',
-      [paneMap.ssh]: 'T'
+      [paneMap.ssh]: 'T',
+      [paneMap.sftp]: 'S'
     }
     return (
       <div className='term-sftp-tabs fleft'>
@@ -673,8 +677,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/deep-link-control.jsx

@@ -110,7 +110,7 @@ export default function DeepLinkControl () {
       <Tooltip
         title={renderTooltipContent()}
       >
-        <Space>
+        <div className='deep-link-btns'>
           {
             !isAllRegistered && (
               <Button
@@ -134,7 +134,7 @@ export default function DeepLinkControl () {
               </Button>
             )
           }
-        </Space>
+        </div>
       </Tooltip>
     </div>
   )

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-passwords.jsx

@@ -11,9 +11,9 @@ import {
 } from '@ant-design/icons'
 import {
   Button,
+  Pagination,
   Modal,
   Space,
-  Table,
   Tag,
   Tooltip,
   Typography,
@@ -126,8 +126,10 @@ export default class SettingPasswords extends Component {
     })
   }
 
-  handleTableChange = (pagination) => {
-    this.setState({ pagination })
+  handlePageChange = (page, pageSize) => {
+    this.setState({
+      pagination: { current: page, pageSize }
+    })
   }
 
   getFilteredData = () => {
@@ -143,88 +145,48 @@ export default class SettingPasswords extends Component {
     })
   }
 
-  getColumns = () => {
-    const columns = [
-      {
-        title: e('password'),
-        dataIndex: 'password',
-        key: 'password',
-        render: () => {
-          const props0 = {
-            children: [
-              <KeyOutlined key='icon' />,
-              <TextAnt keyboard key='text'>********</TextAnt>
-            ]
-          }
-          return <Space>{props0.children}</Space>
-        }
-      },
-      {
-        title: e('count'),
-        dataIndex: 'count',
-        key: 'count',
-        width: 80,
-        render: (count) => {
-          const props0 = {
-            color: 'blue',
-            children: count
-          }
-          return <Tag {...props0} />
-        }
-      },
-      {
-        title: e('host'),
-        dataIndex: 'titles',
-        key: 'host',
-        render: (titles) => {
-          const display = titles.length > 2
-            ? `${titles.slice(0, 2).join(', ')}... (+${titles.length - 2})`
-            : titles.join(', ')
-          const props0 = {
-            title: titles.join('\n'),
-            children: <span>{display}</span>
-          }
-          return <Tooltip {...props0} />
-        }
-      },
-      {
-        title: e('actions'),
-        key: 'actions',
-        width: 80,
-        render: (_, record) => {
-          const copyProps0 = {
-            type: 'text',
-            icon: <CopyOutlined />,
-            onClick: () => this.handleCopyPassword(record.password)
-          }
-          const editProps0 = {
-            type: 'text',
-            icon: <EditOutlined />,
-            onClick: () => this.showEditModal(record)
-          }
-          const copyTooltipProps = {
-            title: e('copy'),
-            children: <Button {...copyProps0} />
-          }
-          const editTooltipProps = {
-            title: e('changePassword'),
-            children: <Button {...editProps0} />
-          }
-          const spaceProps0 = {
-            children: [
-              <Tooltip key='copy' {...copyTooltipProps} />,
-              <Tooltip key='edit' {...editTooltipProps} />
-            ]
-          }
-          return <Space>{spaceProps0.children}</Space>
-        }
-      }
-    ]
-    return columns
+  renderItem = (record) => {
+    const { password, count, titles } = record
+    const display = titles.length > 2
+      ? `${titles.slice(0, 2).join(', ')}... (+${titles.length - 2})`
+      : titles.join(', ')
+    const copyProps = {
+      type: 'text',
+      icon: <CopyOutlined />,
+      onClick: () => this.handleCopyPassword(password)
+    }
+    const editProps = {
+      type: 'text',
+      icon: <EditOutlined />,
+      onClick: () => this.showEditModal(record)
+    }
+    return (
+      <div className='setting-passwords-item' key={password}>
+        <div className='setting-passwords-item-inner'>
+          <Space className='setting-passwords-pwd-cell'>
+            <KeyOutlined />
+            <TextAnt keyboard>********</TextAnt>
+          </Space>
+          <Tag color='blue' className='setting-passwords-count-cell'>{count}</Tag>
+          <Tooltip title={titles.join('\n')}>
+            <span className='setting-passwords-host-cell'>{display}</span>
+          </Tooltip>
+          <Space className='setting-passwords-actions-cell'>
+            <Tooltip title={e('copy')}>
+              <Button {...copyProps} />
+            </Tooltip>
+            <Tooltip title={e('changePassword')}>
+              <Button {...editProps} />
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+    )
   }
 
   renderContent () {
     const { search, pagination } = this.state
+    const { current, pageSize } = pagination
     const data = this.getFilteredData()
 
     if (data.length === 0) {
@@ -241,19 +203,29 @@ export default class SettingPasswords extends Component {
       onChange: this.handleSearchChange,
       placeholder: e('search')
     }
-    const tableProps0 = {
-      dataSource: data,
-      columns: this.getColumns(),
-      rowKey: 'password',
-      pagination: { ...pagination, showSizeChanger: true },
-      onChange: this.handleTableChange,
+
+    // clamp current page when filtering shrinks the data set
+    const pageCount = Math.ceil(data.length / pageSize)
+    const safePage = Math.min(current, Math.max(pageCount, 1))
+    const pagedData = data.slice((safePage - 1) * pageSize, safePage * pageSize)
+
+    const paginationProps0 = {
+      total: data.length,
+      current: safePage,
+      pageSize,
+      showSizeChanger: true,
+      onChange: this.handlePageChange,
+      onShowSizeChange: this.handlePageChange,
       size: 'small'
     }
 
     return (
       <div>
         <Search {...searchProps0} />
-        <Table {...tableProps0} />
+        <div className='setting-passwords-list'>
+          {pagedData.map(item => this.renderItem(item))}
+        </div>
+        <Pagination {...paginationProps0} />
       </div>
     )
   }

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/setting-panel/setting.styl

@@ -10,4 +10,40 @@
   left 43px
   height 60px
   right 0
-  z-index 888
+  z-index 888
+.deep-link-btns
+  display flex
+  flex-wrap wrap
+  gap 8px
+
+// passwords list — replaces the old table so content wraps
+// instead of forcing horizontal scroll on narrow/mobile screens
+.setting-passwords-list
+  border 1px solid var(--main-light)
+  border-radius 6px
+  overflow hidden
+  margin 8px 0
+  .setting-passwords-item
+    padding 8px 12px
+    &:not(:last-child)
+      border-bottom 1px solid var(--main-light)
+.setting-passwords-item
+  .setting-passwords-item-inner
+    display flex
+    flex-wrap wrap
+    align-items center
+    gap 8px
+    width 100%
+  .setting-passwords-pwd-cell
+    flex-shrink 0
+  .setting-passwords-count-cell
+    flex-shrink 0
+    margin 0
+  .setting-passwords-host-cell
+    flex 1 1 120px
+    min-width 120px
+    word-break break-all
+    line-height 1.5
+  .setting-passwords-actions-cell
+    flex-shrink 0
+    margin-left auto

package/client/components/setting-sync/data-import.jsx

@@ -65,7 +65,7 @@ export default function DataTransport (props) {
   }
 
   return (
-    <div className='pd2 fix'>
+    <div className='pd2 fix sync-data-transport'>
       <div className='fleft'>
         <Button
           icon={<ExportOutlined />}

package/client/components/sidebar/sidebar-panel.jsx

@@ -9,6 +9,7 @@ import { Tabs, Tooltip } from 'antd'
 import MultiSelectModal from '../common/multi-select-modal'
 import {
   ArrowsAltOutlined,
+  CloseOutlined,
   EditOutlined,
   PlusCircleOutlined,
   ShrinkOutlined,
@@ -105,6 +106,10 @@ export default memo(function SidebarPanel (props) {
               onClick={store.handlePin}
             />
           </Tooltip>
+          <CloseOutlined
+            {...prps}
+            onClick={store.handleCloseSidebar}
+          />
         </div>
         <div className='pd1y pd2x'>
           <Tabs {...tabsProps} />

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,134 @@
-.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
+
+  // ---- 5. Sync panel data transport: stack export/import and auto-sync
+  //        vertically with a gap. On narrow screens the right-floated
+  //        auto-sync block wraps under the import button with no vertical
+  //        gap — left-align it and add breathing room.
+  .sync-data-transport
+    .fleft,
+    .fright
+      float none
+    .fright
+      margin-top 8px
+      // the switch carries mg3l (32px left margin) to separate it from the
+      // import button on desktop — reset it when stacked so it left-aligns
+      .ant-switch
+        margin-left 0
+
+  // ---- 6. Solid Radio.Button groups (e.g. SSH auth type selector, session
+  //        type selector): on narrow screens the connected button row wraps,
+  //        but antd styles it as a single horizontal strip — adjacent buttons
+  //        share borders via -1px margin and border-radius is only applied to
+  //        the first/last child. When the row wraps, radius/borders break and
+  //        the UI looks messed up. Convert each button to a standalone pill so
+  //        wrapping stays tidy.
+  .ant-radio-group.ant-radio-group-solid
+    display flex
+    flex-wrap wrap
+    gap 6px
+    .ant-radio-button-wrapper
+      border-radius 3px
+      margin-inline-end 0
+      &::before
+        display none

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/client/store/sidebar.js

@@ -29,6 +29,15 @@ export default Store => {
     }
   }
 
+  Store.prototype.handleCloseSidebar = function () {
+    const { store } = window
+    if (store.pinned) {
+      ls.setItem(sidebarPinnedKey, 'false')
+      store.pinned = false
+    }
+    store.setOpenedSideBar('')
+  }
+
   Store.prototype.handleSidebarPanelTab = function (tab) {
     window.store.sidebarPanelTab = tab
   }

package/package.json

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