@electerm/electerm-react 1.90.6 → 1.91.1

package/client/common/resolve.js

@@ -5,23 +5,25 @@
  * @return {String}
  */
 
-export default (basePath, nameOrDot) => {
+export default function resolve (basePath, nameOrDot) {
   const hasWinDrive = (path) => /^[a-zA-Z]:/.test(path)
   const isWin = basePath.includes('\\') || nameOrDot.includes('\\') || hasWinDrive(basePath) || hasWinDrive(nameOrDot)
   const sep = isWin ? '\\' : '/'
-  // Handle Windows drive letters (with or without initial slash)
   if (/^[a-zA-Z]:/.test(nameOrDot)) {
     return nameOrDot.replace(/^\//, '').replace(/\//g, sep)
   }
-  // Handle absolute paths
   if (nameOrDot.startsWith('/')) {
     return nameOrDot.replace(/\\/g, sep)
   }
   if (nameOrDot === '..') {
+    const baseEndsWithSep = basePath.endsWith(sep)
     const parts = basePath.split(sep)
     if (parts.length > 1) {
       parts.pop()
-      return isWin && parts.length === 1 ? '/' : parts.join(sep) || '/'
+      if (isWin && parts.length === 1) {
+        return baseEndsWithSep ? '/' : parts.join(sep)
+      }
+      return parts.join(sep) || '/'
     }
     return '/'
   }

package/client/components/file-transfer/transfer.jsx

@@ -12,6 +12,13 @@ import {
 } from '../sftp/file-read'
 import resolve from '../../common/resolve'
 import { refsTransfers, refsStatic, refs } from '../common/ref'
+import {
+  zipCmd,
+  unzipCmd,
+  rmCmd,
+  mvCmd,
+  mkdirCmd
+} from './zip'
 import './transfer.styl'
 
 const { assign } = Object
@@ -24,13 +31,15 @@ export default class TransportAction extends Component {
       transferBatch = '',
       tabId
     } = props.transfer
+    const sftp = refs.get('sftp-' + tabId)
     this.id = `tr-${transferBatch}-${id}`
     this.tabId = tabId
     refsTransfers.add(this.id, this)
     this.total = 0
     this.transferred = 0
     this.currentProgress = 1
-    this.isFtp = refs.get('sftp-' + tabId)?.type === 'ftp'
+    this.isFtp = sftp?.type === 'ftp'
+    this.terminalId = sftp?.terminalId
   }
 
   componentDidMount () {
@@ -233,7 +242,7 @@ export default class TransportAction extends Component {
 
     // Check if it's a copy operation to the same path
     if (fromPath === toPath && operation === fileOperationsMap.cp) {
-      finalToPath = this.handleRename(toPath, typeFrom === typeMap.remote)
+      finalToPath = this.handleRename(toPath, typeFrom === typeMap.remote).newPath
       transfer.toPath = finalToPath
       this.update({
         toPath: finalToPath
@@ -256,13 +265,15 @@ export default class TransportAction extends Component {
       })
   }
 
-  transferFile = async (transfer = this.props.transfer) => {
+  transferFile = async (transfer = this.props.transfer, onEnd = this.onEnd) => {
     const {
       fromPath,
       typeFrom,
       toFile = {}
     } = transfer
-    const toPath = this.newPath || transfer.toPath
+    const toPath = transfer.zip
+      ? transfer.toPath
+      : this.newPath || transfer.toPath
     const fromFile = transfer.fromFile || this.fromFile
     const fromMode = fromFile.mode
     const transferType = typeFrom === typeMap.local ? transferTypeMap.upload : transferTypeMap.download
@@ -281,7 +292,7 @@ export default class TransportAction extends Component {
       options: { mode },
       onData: this.onData,
       onError: this.onError,
-      onEnd: this.onEnd
+      onEnd
     })
   }
 
@@ -384,23 +395,132 @@ export default class TransportAction extends Component {
         typeTo,
         toPath
       } = this.props.transfer
-      const newPath = this.handleRename(toPath, typeTo === typeMap.remote)
+      this.oldPath = toPath
+      const { newPath, newName } = this.handleRename(toPath, typeTo === typeMap.remote)
       this.update({
         toPath: newPath
       })
       this.newPath = newPath
+      this.newName = newName
     }
 
     this.startTransfer()
   }
 
+  zipTransferFolder = async () => {
+    const {
+      transfer
+    } = this.props
+    const {
+      fromPath,
+      typeFrom
+    } = transfer
+    const toPath = this.oldPath || transfer.toPath
+    let p
+    let isFromRemote
+    if (typeFrom === typeMap.local) {
+      isFromRemote = false
+      p = await fs.zipFolder(fromPath)
+    } else {
+      isFromRemote = true
+      const terminalId = refs.get('sftp-' + this.tabId)?.terminalId
+      p = await zipCmd(terminalId, fromPath)
+    }
+    this.zipSrc = p
+    const { name } = getFolderFromFilePath(p, isFromRemote)
+    const { path } = getFolderFromFilePath(toPath, !isFromRemote)
+    const nTo = resolve(path, name)
+    this.zipPath = nTo
+    const newTrans1 = {
+      ...copy(transfer),
+      toPath: nTo,
+      fromPath: p
+    }
+    this.transferFile(newTrans1, this.unzipFile)
+  }
+
+  unzipFile = async () => {
+    const { transfer } = this.props
+    const {
+      typeTo
+    } = transfer
+    const toPath = this.zipPath
+    const fromPath = this.zipSrc
+    const isToRemote = typeTo === typeMap.remote
+    const {
+      path,
+      name,
+      targetPath
+    } = this.buildUnzipPath(transfer)
+    const {
+      newName,
+      terminalId
+    } = this
+    if (isToRemote) {
+      if (newName) {
+        await mkdirCmd(terminalId, path)
+      }
+      await unzipCmd(terminalId, toPath, path)
+      if (newName) {
+        const mvFrom = resolve(path, name)
+        const mvTo = resolve(targetPath, newName)
+        await mvCmd(terminalId, mvFrom, mvTo)
+      }
+    } else {
+      if (newName) {
+        await fs.mkdir(path)
+      }
+      await fs.unzipFile(toPath, path)
+      if (newName) {
+        const mvFrom = resolve(path, name)
+        const mvTo = resolve(targetPath, newName)
+        await fs.mv(mvFrom, mvTo)
+      }
+    }
+    await rmCmd(terminalId, !isToRemote ? fromPath : toPath)
+    await fs.rmrf(!isToRemote ? toPath : fromPath)
+    if (newName) {
+      if (isToRemote) {
+        await rmCmd(terminalId, path)
+      } else {
+        await fs.rmrf(path)
+      }
+    }
+    this.onEnd()
+  }
+
+  buildUnzipPath = (transfer) => {
+    const {
+      typeTo
+    } = transfer
+    const isToRemote = typeTo === typeMap.remote
+    const toPath = this.oldPath || transfer.toPath
+    const {
+      newName
+    } = this
+    const { path } = getFolderFromFilePath(toPath, isToRemote)
+    const oldName = getFolderFromFilePath(toPath, isToRemote).name
+    const np = newName
+      ? resolve(path, 'temp-' + newName)
+      : path
+    return {
+      targetPath: path,
+      path: np,
+      name: oldName
+    }
+  }
+
   startTransfer = async () => {
-    const { fromFile = this.fromFile } = this.props.transfer
+    const { fromFile = this.fromFile, zip } = this.props.transfer
 
     if (!fromFile.isDirectory) {
       return this.transferFile()
     }
-    await this.transferFolderRecursive()
+    if (zip) {
+      return this.zipTransferFolder()
+    } else {
+      await this.transferFolderRecursive()
+    }
     this.onEnd({
       transferred: this.transferred,
       size: this.total
@@ -415,7 +535,10 @@ export default class TransportAction extends Component {
   handleRename = (fromPath, isRemote) => {
     const { path, base, ext } = getFolderFromFilePath(fromPath, isRemote)
     const newName = `${base}(rename-${generate()})${ext ? '.' + ext : ''}`
-    return resolve(path, newName)
+    return {
+      newPath: resolve(path, newName),
+      newName
+    }
   }
 
   onFolderData = (transferred) => {

package/client/components/file-transfer/zip.js

@@ -0,0 +1,42 @@
+/**
+ * zip/unzip remote files
+ * should only support linux server
+ */
+
+import { runCmd } from '../terminal/terminal-apis'
+import { getFolderFromFilePath } from '../sftp/file-read'
+import resolve from '../../common/resolve'
+import generate from '../../common/uid'
+
+const isRemote = true
+const temp = '/tmp'
+
+export async function zipCmd (pid, filePath) {
+  // tar -czf bin.tar bin
+  const id = generate()
+  const { path, name } = getFolderFromFilePath(filePath, isRemote)
+  const np = resolve(temp, `electerm-${id}.tar`)
+  const cmd = `tar -C "${path}" -cf "${np}" "${name}"`
+  await runCmd(pid, cmd)
+  return np
+}
+
+export function unzipCmd (pid, from, to) {
+  const cmd = `tar -xf "${from}" -C "${to}"`
+  return runCmd(pid, cmd)
+}
+
+export async function rmCmd (pid, path) {
+  const cmd = `rm -rf "${path}"`
+  return runCmd(pid, cmd)
+}
+
+export async function mvCmd (pid, from, to) {
+  const cmd = `mv "${from}" "${to}"`
+  return runCmd(pid, cmd)
+}
+
+export async function mkdirCmd (pid, p) {
+  const cmd = `mkdir "${p}"`
+  return runCmd(pid, cmd)
+}

package/client/components/sftp/file-item.jsx

@@ -795,9 +795,12 @@ export default class FileSection extends React.Component {
     this.props.addTransferList(all)
   }
 
-  transfer = async () => {
+  transfer = async (mapper) => {
     const { file } = this.state
     const arr = await this.getTransferList(file)
+    if (mapper) {
+      arr.forEach(mapper)
+    }
     this.props.addTransferList(arr)
   }
 
@@ -835,6 +838,12 @@ export default class FileSection extends React.Component {
     this.transfer()
   }
 
+  zipAndTransfer = async () => {
+    this.transfer(transfer => {
+      transfer.zip = true
+    })
+  }
+
   newFile = () => {
     return this.newItem(false)
   }
@@ -1000,6 +1009,13 @@ export default class FileSection extends React.Component {
         icon: iconType,
         text: transferText
       })
+      if (isDirectory && !this.props.isFtp) {
+        res.push({
+          func: 'zipAndTransfer',
+          icon: 'FileZipOutlined',
+          text: e('compressAndTransfer')
+        })
+      }
     }
     if (!isDirectory && isRealFile && isLocal) {
       res.push({

package/client/components/sys-menu/icons-map.jsx

@@ -22,7 +22,9 @@ import {
   FolderAddOutlined,
   InfoCircleOutlined,
   LockOutlined,
-  ReloadOutlined
+  ReloadOutlined,
+  FileZipOutlined,
+  AppstoreOutlined
 } from '@ant-design/icons'
 import IconHolder from './icon-holder'
 
@@ -48,5 +50,7 @@ export default {
   FolderAddOutlined,
   InfoCircleOutlined,
   LockOutlined,
-  ReloadOutlined
+  ReloadOutlined,
+  FileZipOutlined,
+  AppstoreOutlined
 }

package/client/components/sys-menu/layoout-changer.jsx

@@ -0,0 +1,57 @@
+import {
+  SingleIcon,
+  TwoColumnsIcon,
+  ThreeColumnsIcon,
+  TwoRowsIcon,
+  ThreeRowsIcon,
+  Grid2x2Icon,
+  TwoRowsRightIcon,
+  TwoColumnsBottomIcon
+} from '../icons/split-icons'
+import {
+  splitMapDesc
+} from '../../common/constants'
+
+const e = window.translate
+
+export default function LayoutChanger (props) {
+  const getLayoutIcon = (layout) => {
+    const iconMaps = {
+      single: SingleIcon,
+      twoColumns: TwoColumnsIcon,
+      threeColumns: ThreeColumnsIcon,
+      twoRows: TwoRowsIcon,
+      threeRows: ThreeRowsIcon,
+      grid2x2: Grid2x2Icon,
+      twoRowsRight: TwoRowsRightIcon,
+      twoColumnsBottom: TwoColumnsBottomIcon
+    }
+    return iconMaps[layout]
+  }
+
+  const handleChangeLayout = ({ key }) => {
+    window.store.setLayout(key)
+  }
+
+  const items = Object.keys(splitMapDesc).map((t) => {
+    const v = splitMapDesc[t]
+    const Icon = getLayoutIcon(v)
+    return (
+      <div
+        key={t}
+        className='sub-context-menu-item'
+        onClick={() => handleChangeLayout({ key: t })}
+      >
+        <span>
+          <Icon /> {e(v)}
+        </span>
+      </div>
+    )
+  })
+
+  return (
+    <div className='sub-context-menu bookmarks-sub-context-menu'>
+      {items}
+    </div>
+  )
+}

package/client/components/sys-menu/menu-btn.jsx

@@ -106,6 +106,11 @@ class MenuBtn extends PureComponent {
         text: e('sessions'),
         submenu: 'Tabs'
       },
+      {
+        icon: 'AppstoreOutlined',
+        text: e('layout'),
+        submenu: 'Layout'
+      },
       // {
       //   type: 'hr'
       // },

package/client/components/sys-menu/sys-menu.jsx

@@ -10,6 +10,7 @@ import {
 import { noop } from 'lodash-es'
 import History from './history'
 import Bookmark from './boomarks'
+import Layout from './layoout-changer'
 import Tabs from './tabs'
 import Zoom from './zoom'
 import icons from './icons-map'
@@ -22,7 +23,8 @@ export default class ContextMenu extends PureComponent {
     History,
     Bookmark,
     Tabs,
-    Zoom
+    Zoom,
+    Layout
   }
 
   onClick = (e, item) => {

package/client/components/terminal/terminal.jsx

@@ -12,7 +12,8 @@ import {
   Spin,
   Button,
   Dropdown,
-  message
+  message,
+  Modal
 } from 'antd'
 import classnames from 'classnames'
 import './terminal.styl'
@@ -28,7 +29,7 @@ import {
   zmodemTransferPackSize
 } from '../../common/constants.js'
 import deepCopy from 'json-deep-copy'
-import { readClipboardAsync, copy } from '../../common/clipboard.js'
+import { readClipboardAsync, readClipboard, copy } from '../../common/clipboard.js'
 import { FitAddon } from '@xterm/addon-fit'
 import AttachAddon from './attach-addon-custom.js'
 import { SearchAddon } from '@xterm/addon-search'
@@ -289,7 +290,39 @@ clear\r`
     this.tryInsertSelected()
   }
 
+  pasteTextTooLong = () => {
+    if (window.et.isWebApp) {
+      return false
+    }
+    const text = readClipboard()
+    return text.length > 500
+  }
+
+  askUserConfirm = () => {
+    Modal.confirm({
+      title: e('paste'),
+      content: (
+        <div>
+          <p>{e('paste')}:</p>
+          <div className='paste-text'>
+            {readClipboard()}
+          </div>
+        </div>
+      ),
+      okText: e('ok'),
+      cancelText: e('cancel'),
+      onOk: () => this.onPaste(true),
+      onCancel: Modal.destroyAll
+    })
+  }
+
   pasteShortcut = (e) => {
+    if (this.pasteTextTooLong()) {
+      this.askUserConfirm()
+      e.preventDefault()
+      e.stopPropagation()
+      return false
+    }
     if (isMac) {
       return true
     }
@@ -706,8 +739,11 @@ clear\r`
     return this.props.tab?.host
   }
 
-  onPaste = async () => {
+  onPaste = async (skipTextLengthCheck) => {
     let selected = await readClipboardAsync()
+    if (!skipTextLengthCheck && selected.length > 500) {
+      return this.askUserConfirm()
+    }
     if (isWin && this.isRemote()) {
       selected = selected.replace(/\r\n/g, '\n')
     }

package/client/components/terminal/terminal.styl

@@ -143,3 +143,6 @@
   bottom 0
   background transparent
   width 16px
+.paste-text
+  max-height 200px
+  overflow-y scroll

package/client/components/theme/theme-list-item.jsx

@@ -26,11 +26,11 @@ export default function ThemeListItem (props) {
   const { store } = window
 
   function handleClickApply () {
+    delete window.originalTheme
     store.setTheme(item.id)
   }
 
   function handleMouseEnter () {
-    if (!item.id) return
     // Store current theme ID before changing
     const currentTheme = window.store.config.theme
     window.originalTheme = currentTheme

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

@@ -3,12 +3,15 @@
  */
 
 import List from '../setting-panel/list'
-import { LoadingOutlined } from '@ant-design/icons'
+import { LoadingOutlined, CheckCircleOutlined } from '@ant-design/icons'
 import { pick } from 'lodash-es'
 import { Pagination } from 'antd'
 import ThemeListItem from './theme-list-item'
+import { defaultTheme } from '../../common/constants'
 import './terminal-theme-list.styl'
 
+const e = window.translate
+
 export default class ThemeList extends List {
   handlePager = page => {
     this.setState({ page })
@@ -37,6 +40,24 @@ export default class ThemeList extends List {
     )
   }
 
+  renderCurrentTheme () {
+    const { theme, list } = this.props
+    const item = list.find(d => d.id === theme)
+    if (!item) {
+      return null
+    }
+    const { name, id } = item
+    const title = id === defaultTheme.id
+      ? e(id)
+      : name
+    return (
+      <div className='pd2'>
+        <CheckCircleOutlined className='mg1r' />
+        {title}
+      </div>
+    )
+  }
+
   filter = list => {
     const { keyword, ready } = this.state
     return keyword
@@ -69,6 +90,7 @@ export default class ThemeList extends List {
         {this.renderTransport ? this.renderTransport() : null}
         {this.renderLabels ? this.renderLabels() : null}
         {this.renderSearch()}
+        {this.renderCurrentTheme()}
         <div className='item-list-wrap' style={listStyle}>
           {
             list.map(this.renderItem)

package/client/store/item.js

@@ -66,7 +66,7 @@ export default Store => {
       return deepCopy([
         ...store.getTerminalThemes(),
         ...store.itermThemes
-      ]).sort(window.store.sortTheme)
+      ])
     }
     return deepCopy(store.getItems(type))
   }

package/client/store/ui-theme.js

@@ -37,12 +37,12 @@ export default Store => {
     return window.pre.runGlobalAsync('toCss', stylus)
   }
 
-  Store.prototype.sortTheme = function (a, b) {
-    const theme = window.originalTheme || window.store.config.theme
-    const ax = a.id === theme ? -1 : 1
-    const bx = b.id === theme ? -1 : 1
-    return ax - bx
-  }
+  // Store.prototype.sortTheme = function (a, b) {
+  //   const theme = window.originalTheme || window.store.config.theme
+  //   const ax = a.id === theme ? -1 : 1
+  //   const bx = b.id === theme ? -1 : 1
+  //   return ax > bx ? 1 : -1
+  // }
 
   Store.prototype.getUiThemeConfig = function () {
     const { store } = window

package/package.json

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