@electerm/electerm-react 3.15.160 → 3.15.163

package/client/common/constants.js

@@ -251,6 +251,7 @@ export const checkedKeysLsKey = 'checked-keys'
 export const quickCommandLabelsLsKey = 'quick-command-label'
 export const localAddrBookmarkLsKey = 'local-addr-bookmark-keys'
 export const dismissDelKeyTipLsKey = 'dismiss-del-key-tip'
+export const treeSortLsKey = 'tree-sort'
 export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-to-use-ssh-tunnel'
 export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-format'
 export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal-keywords-highlight-regular-expression-exmaples'

package/client/common/update-check.js

@@ -69,6 +69,23 @@ export async function getLatestReleaseVersion (n) {
   }
 }
 
+export function getDownloadUrl (browserDownloadUrl, mirror) {
+  if (!browserDownloadUrl) {
+    return ''
+  }
+  if (mirror === 'gh-proxy') {
+    return `https://electerm-mirror.html5beta.com/${browserDownloadUrl}`
+  } if (mirror === 'sourceforge') {
+    const arr = browserDownloadUrl.split('/')
+    const len = arr.length
+    return `https://master.dl.sourceforge.net/project/electerm.mirror/${arr[len - 2]}/${arr[len - 1]}?viasf=1`
+  } else if (mirror === 'r2') {
+    return `https://electerm-store.html5beta.com/r/${browserDownloadUrl.split('/').pop()}`
+  } else {
+    return browserDownloadUrl
+  }
+}
+
 export async function getLatestReleaseInfo () {
   let url = `${baseUpdateCheckUrls[0]}/data/electerm-github-release.json`
   let res = await getInfo(url)
@@ -76,10 +93,14 @@ export async function getLatestReleaseInfo () {
     url = `${baseUpdateCheckUrls[1]}/data/electerm-github-release.json`
     res = await getInfo(url)
   }
-  return res && res.release
-    ? {
-        body: res.release.body,
-        date: dayjs(res.release.published_at).format('YYYY-MM-DD')
-      }
-    : undefined
+  if (!res || !res.release) {
+    return undefined
+  }
+  const { installSrc } = window.store
+  const asset = (res.release.assets || []).find(r => r.name.includes(installSrc))
+  return {
+    body: res.release.body,
+    date: dayjs(res.release.published_at).format('YYYY-MM-DD'),
+    browserDownloadUrl: asset ? asset.browser_download_url : ''
+  }
 }

package/client/components/main/upgrade.jsx

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react'
 import { CloseOutlined, MinusSquareOutlined, UpCircleOutlined } from '@ant-design/icons'
 import { Button, Select, Space } from 'antd'
-import { getLatestReleaseInfo, getLatestReleaseVersion } from '../../common/update-check'
+import { getLatestReleaseInfo, getLatestReleaseVersion, getDownloadUrl } from '../../common/update-check'
 import upgrade from '../../common/upgrade'
 import compare from '../../common/version-compare'
 import Link from '../common/external-link'
@@ -136,6 +136,14 @@ export default class Upgrade extends PureComponent {
         }
       )
     }
+    if (window.et.downloadUpgradeFromBrowser) {
+      const { releaseInfo } = this.props.upgradeInfo
+      const downloadUrl = getDownloadUrl(releaseInfo?.browserDownloadUrl, this.state.mirror)
+      if (downloadUrl) {
+        window.openLink(downloadUrl)
+      }
+      return
+    }
     this.changeProps({
       upgrading: true
     })

package/client/components/sftp/address-bar.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import {
   ArrowUpOutlined,
   EyeInvisibleFilled,
@@ -7,11 +7,13 @@ import {
   ArrowRightOutlined,
   LoadingOutlined,
   HomeOutlined,
-  PlusOutlined
+  PlusOutlined,
+  MenuOutlined
 } from '@ant-design/icons'
 import {
   Input,
-  Tooltip
+  Tooltip,
+  Popover
 } from 'antd'
 import {
   typeMap
@@ -22,10 +24,11 @@ import KeywordFilter from './keyword-filter'
 
 const e = window.translate
 
-function renderAddonBefore (props, realPath) {
+function AddressPrefixIcons (props) {
   const {
     type,
-    host
+    host,
+    realPath
   } = props
   const isShow = props[`${type}ShowHiddenFile`]
   const title = `${isShow ? e('hide') : e('show')} ${e('hfd')}`
@@ -75,6 +78,37 @@ function renderAddonBefore (props, realPath) {
   )
 }
 
+function MobileAddressPrefix (props) {
+  const [open, setOpen] = useState(false)
+  const content = (
+    <div className='sftp-addr-menu-content'>
+      <AddressPrefixIcons {...props} />
+    </div>
+  )
+  return (
+    <Popover
+      content={content}
+      trigger='click'
+      placement='bottomLeft'
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <MenuOutlined className='sftp-addr-menu-icon' />
+    </Popover>
+  )
+}
+
+function renderAddonBefore (props, realPath) {
+  if (window.store.isMobile) {
+    return (
+      <MobileAddressPrefix {...props} realPath={realPath} />
+    )
+  }
+  return (
+    <AddressPrefixIcons {...props} realPath={realPath} />
+  )
+}
+
 function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type, handleUploadFromBrowser) {
   const handleClick = (e) => {
     e.stopPropagation()

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

@@ -137,6 +137,23 @@ export default class FileListTable extends Component {
     ]
   }
 
+  /**
+   * In mobile mode, only show the file name to save horizontal space.
+   * Returns the effective properties used for rendering both the
+   * table header and individual file items.
+   */
+  getRenderProperties = () => {
+    if (window.store.isMobile) {
+      return [{
+        id: 'name',
+        max: 98,
+        min: 2,
+        size: 100
+      }]
+    }
+    return this.state.properties
+  }
+
   getPropsAll = () => {
     return [
       'name',
@@ -179,7 +196,7 @@ export default class FileListTable extends Component {
       onContextMenu: this.onContextMenu,
       onClickName: this.onClickName,
       onResize: this.onResize,
-      properties: this.state.properties,
+      properties: this.getRenderProperties(),
       sortDirection: this.props.sortDirection,
       sortProp: this.props.sortProp,
       maxWidth: this.props.width
@@ -274,7 +291,7 @@ export default class FileListTable extends Component {
     const fileProps = {
       ...this.props.getFileProps(item, type),
       cls,
-      properties: this.state.properties,
+      properties: this.getRenderProperties(),
       setClickFileId: this.setClickFileId
     }
     return (

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

@@ -1211,7 +1211,7 @@ export default class Sftp extends Component {
   renderSftpPanelTitle (type, username, host) {
     if (type === typeMap.remote) {
       return (
-        <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
+        <div className='sftp-panel-title pd1t pd1b pd1x alignright elli'>
           <ReloadOutlined
             className='mg1r pointer'
             onClick={this.handleReloadRemoteSftp}

package/client/components/sftp/sftp.styl

@@ -185,3 +185,17 @@
   &:hover
   &.active
     color var(--success)
+
+.sftp-addr-menu-icon
+  cursor pointer
+  font-size 14px
+  color var(--text)
+  &:hover
+    color var(--text-light)
+
+.sftp-addr-menu-content
+  display flex
+  align-items center
+  padding 4px 0
+  flex-wrap wrap
+  gap 4px

package/client/components/tree-list/tree-list.jsx

@@ -9,8 +9,10 @@ import { uniq, filter, pick } from 'lodash-es'
 import {
   maxBookmarkGroupTitleLength,
   defaultBookmarkGroupId,
-  settingMap
+  settingMap,
+  treeSortLsKey
 } from '../../common/constants'
+import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
 import findParentBySel from '../../common/find-parent'
 import copy from 'json-deep-copy'
 import NewButtonsGroup from './bookmark-toolbar'
@@ -45,7 +47,7 @@ export default class ItemListTree extends Component {
       categoryColor: '',
       categoryId: '',
       searchSelectedRowKey: '',
-      sort: null
+      sort: getItemJSON(treeSortLsKey, null)
     }
     this.listRef = React.createRef()
   }
@@ -111,6 +113,7 @@ export default class ItemListTree extends Component {
   }
 
   handleSortChange = sort => {
+    setItemJSON(treeSortLsKey, sort)
     this.setState({ sort })
   }
 

package/client/css/mobile.styl

@@ -132,3 +132,22 @@
       margin-inline-end 0
       &::before
         display none
+
+  // ---- 7. Terminal info panel button group: on narrow screens the connected
+  //        button row in terminal info panel wraps, but antd styles it as a
+  //        single horizontal strip. When the row wraps, the UI looks broken.
+  //        Convert each button to a standalone pill so wrapping stays tidy.
+  .terminal-info-base
+    .ant-space-compact
+      display flex
+      flex-wrap wrap
+      gap 6px
+      .ant-btn
+        border-radius 3px
+        margin-right 0
+
+  // ---- 8. Upgrade panel: fixed 440px width overflows narrow mobile screens.
+  //        Constrain it to the viewport minus the right offset (10px) and a
+  //        matching left gap so it never extends past the screen edge.
+  .upgrade-panel
+    max-width calc(100vw - 20px)

package/package.json

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