@electerm/electerm-react 3.2.0 → 3.5.6

package/client/common/constants.js

@@ -229,11 +229,6 @@ export const rendererTypes = {
   canvas: 'canvas',
   webGL: 'webGL'
 }
-export const mirrors = {
-  'download-electerm': 'download-electerm',
-  github: 'github',
-  sourceforge: 'sourceforge'
-}
 export const downloadUpgradeTimeout = 20000
 export const expandedKeysLsKey = 'expanded-keys'
 export const resolutionsLsKey = 'custom-resolution-key'
@@ -242,15 +237,13 @@ export const quickCommandLabelsLsKey = 'quick-command-label'
 export const localAddrBookmarkLsKey = 'local-addr-bookmark-keys'
 export const dismissDelKeyTipLsKey = 'dismiss-del-key-tip'
 export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-to-use-ssh-tunnel'
-export const batchOpHelpLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
 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'
 export const connectionHoppingWikiLink = 'https://github.com/electerm/electerm/wiki/Connection-Hopping-Behavior-Change-in-electerm-since-v1.50.65'
 export const aiConfigWikiLink = 'https://github.com/electerm/electerm/wiki/AI-model-config-guide'
 export const modals = {
   hide: 0,
-  setting: 1,
-  batchOps: 2
+  setting: 1
 }
 export const instSftpKeys = [
   'connect',

package/client/common/fs.js

@@ -16,6 +16,90 @@ const fs = fsFunctions.reduce((prev, func) => {
   return prev
 }, {})
 
+// Encoding function
+fs.encodeUint8Array = (uint8Array) => {
+  let str = ''
+  const len = uint8Array.byteLength
+
+  for (let i = 0; i < len; i++) {
+    str += String.fromCharCode(uint8Array[i])
+  }
+
+  return btoa(str)
+}
+
+// Decoding function
+fs.decodeBase64String = (base64String) => {
+  const str = atob(base64String)
+  const len = str.length
+
+  const uint8Array = new Uint8Array(len)
+
+  for (let i = 0; i < len; i++) {
+    uint8Array[i] = str.charCodeAt(i)
+  }
+
+  return uint8Array
+}
+
+Object.assign(fs, {
+  stat: (path, cb) => {
+    window.fs.statCustom(path)
+      .catch(err => cb(err))
+      .then(obj => {
+        obj.isDirectory = () => obj.isD
+        obj.isFile = () => obj.isF
+        cb(undefined, obj)
+      })
+  },
+  access: (...args) => {
+    const cb = args.pop()
+    window.fs.access(...args)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  open: (...args) => {
+    const cb = args.pop()
+    window.fs.openCustom(...args)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  read: (p1, arr, ...args) => {
+    const cb = args.pop()
+    window.fs.readCustom(
+      p1,
+      arr.length,
+      ...args
+    )
+      .then((data) => {
+        const { n, newArr } = data
+        const newArr1 = window.fs.decodeBase64String(newArr)
+        cb(undefined, n, newArr1)
+      })
+      .catch(err => cb(err))
+  },
+  close: (fd, cb) => {
+    window.fs.closeCustom(fd)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  readdir: (p, cb) => {
+    window.fs.readdir(p)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  write: (p1, buf, cb) => {
+    window.fs.writeCustom(p1, window.fs.encodeUint8Array(buf))
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  realpath: (p, cb) => {
+    window.fs.realpath(p)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  }
+})
+
 window.fs = fs
 
 export default fs

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Alert } from 'antd'
+import ExternalLink from '../common/external-link'
+
+const batchOpWikiLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
+
+export default function BatchOpAlert () {
+  const description = (
+    <>
+      <p>Actions: <code>connect, command, sftp_upload, sftp_download</code></p>
+      <div><ExternalLink to={batchOpWikiLink}>{batchOpWikiLink}</ExternalLink></div>
+    </>
+  )
+
+  return (
+    <Alert
+      description={description}
+      type='info'
+      showIcon
+      className='mg1b'
+    />
+  )
+}

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

@@ -0,0 +1,206 @@
+/**
+ * Batch Operation Editor Component
+ * Self-contained workflow editor: handles execute, external editors, and progress logs
+ */
+import React, { useCallback, useState, useEffect } from 'react'
+import { Button, Flex } from 'antd'
+import {
+  PlayCircleOutlined
+} from '@ant-design/icons'
+import SimpleEditor from '../text-editor/simple-editor'
+import EditWithCustomEditor from '../text-editor/edit-with-custom-editor'
+import BatchOpAlert from './batch-op-alert'
+import BatchOpLogs from './batch-op-logs'
+import message from '../common/message'
+import { refsStatic } from '../common/ref'
+import generate from '../../common/uid'
+import fs from '../../common/fs'
+import { safeGetItem, safeSetItem } from '../../common/safe-local-storage'
+
+const batchOpEditorKey = 'batch-op-editor-content'
+const workflowExample = `[
+  {
+    "name": "Connect SSH",
+    "action": "connect",
+    "params": {
+      "host": "192.168.1.100",
+      "port": 22,
+      "username": "root",
+      "authType": "password",
+      "password": "your_password"
+    }
+  },
+  {
+    "name": "Create 5M Test File",
+    "action": "command",
+    "afterDelay": 500,
+    "prevDelay": 500,
+    "command": "fallocate -l 5M /tmp/test_5m_file.bin && rm -f /tmp/test_log.log && echo '[LOG] Created 5M test file at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Log creation",
+    "action": "command",
+    "command": "ls -la /tmp/test_5m_file.bin >> /tmp/test_log.log 2>&1 && echo '[LOG] File size logged at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Download 5M File",
+    "action": "sftp_download",
+    "afterDelay": 200,
+    "remotePath": "/tmp/test_5m_file.bin",
+    "localPath": "/tmp/test_5m_file.bin"
+  },
+  {
+    "name": "Log after download",
+    "action": "command",
+    "afterDelay": 200,
+    "command": "echo '[LOG] Download complete at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Delete Remote 5M File",
+    "action": "command",
+    "afterDelay": 200,
+    "command": "rm /tmp/test_5m_file.bin && echo '[LOG] Deleted remote 5M file at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Upload Downloaded File to Remote",
+    "action": "sftp_upload",
+    "afterDelay": 200,
+    "localPath": "/tmp/test_5m_file.bin",
+    "remotePath": "/tmp/test_5m_file_uploaded.bin"
+  },
+  {
+    "name": "Log after upload",
+    "action": "command",
+    "afterDelay": 200,
+    "command": "echo '[LOG] Upload complete at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Verify and clean up",
+    "action": "command",
+    "command": "ls -la /tmp/test_5m_file_uploaded.bin >> /tmp/test_log.log 2>&1 && rm -f /tmp/test_5m_file*.bin && echo '[LOG] Cleaned up at $(date)' >> /tmp/test_log.log"
+  }
+]`
+
+function getDefaultValue (widget) {
+  const saved = safeGetItem(batchOpEditorKey)
+  if (saved) return saved
+  return workflowExample
+}
+
+export default function BatchOpEditor ({ widget }) {
+  const [value, setValue] = useState(() => getDefaultValue(widget))
+  const [executing, setExecuting] = useState(false)
+
+  useEffect(() => {
+    const v = getDefaultValue(widget)
+    if (v) setValue(v)
+  }, [widget?.id])
+
+  useEffect(() => {
+    safeSetItem(batchOpEditorKey, value)
+  }, [value])
+
+  const handleExecute = async () => {
+    if (!value || executing) return
+    setExecuting(true)
+    const runner = refsStatic.get('batch-op-runner')
+    runner?.reset()
+    refsStatic.get('batch-op-logs')?.setLogs({ steps: [], currentIndex: 0, status: 'running' })
+    try {
+      let workflows
+      try {
+        workflows = JSON.parse(value)
+        if (!Array.isArray(workflows)) throw new Error('Workflow must be an array')
+      } catch (e) {
+        message.error('Invalid workflow JSON: ' + e.message)
+        refsStatic.get('batch-op-logs')?.reset()
+        return
+      }
+      await runner.executeWorkflow(workflows)
+      message.success('Workflow execution completed')
+    } catch (err) {
+      if (err.message !== 'Workflow aborted') {
+        message.error('Workflow execution failed: ' + err.message)
+      }
+    } finally {
+      setExecuting(false)
+    }
+  }
+
+  const handleTemplate = useCallback(() => {
+    setValue(workflowExample)
+  }, [])
+
+  const handleEditWithSystemEditor = useCallback(async () => {
+    const id = generate()
+    const tempPath = window.pre.resolve(window.pre.tempDir, `electerm-batch-op-${id}.json`)
+    await fs.writeFile(tempPath, value)
+    window.pre.runGlobalAsync('watchFile', tempPath)
+    fs.openFile(tempPath).catch(window.store.onError)
+    window.pre.showItemInFolder(tempPath)
+    const onFileChange = (e, text) => {
+      setValue(text)
+      window.pre.ipcOffEvent('file-change', onFileChange)
+      fs.unlink(tempPath).catch(console.log)
+    }
+    window.pre.ipcOnEvent('file-change', onFileChange)
+  }, [value])
+
+  const handleEditWithCustom = useCallback(async (editorCommand) => {
+    const id = generate()
+    const tempPath = window.pre.resolve(window.pre.tempDir, `electerm-batch-op-${id}.json`)
+    await fs.writeFile(tempPath, value)
+    window.pre.runGlobalAsync('watchFile', tempPath)
+    await window.pre.runGlobalAsync('openFileWithEditor', tempPath, editorCommand)
+    const onFileChange = (e, text) => {
+      setValue(text)
+      window.pre.ipcOffEvent('file-change', onFileChange)
+      fs.unlink(tempPath).catch(console.log)
+    }
+    window.pre.ipcOnEvent('file-change', onFileChange)
+  }, [value])
+
+  function handleChange (e) {
+    setValue(e.target.value)
+  }
+
+  return (
+    <div className='batch-op-editor'>
+      <BatchOpAlert />
+      <Flex className='mg2y' gap='small'>
+        <Button onClick={handleTemplate} type='dashed'>
+          Load Template
+        </Button>
+        <Button
+          onClick={handleExecute}
+          type='primary'
+          loading={executing}
+          disabled={executing}
+          icon={<PlayCircleOutlined />}
+        >
+          Execute Workflow
+        </Button>
+      </Flex>
+      <SimpleEditor
+        value={value}
+        onChange={handleChange}
+      />
+      {!window.et.isWebApp && (
+        <div className='pd1t pd2b'>
+          <Button
+            type='primary'
+            className='mg1r mg1b'
+            onClick={handleEditWithSystemEditor}
+          >
+            {window.translate('editWithSystemEditor')}
+          </Button>
+          <EditWithCustomEditor
+            loading={executing}
+            editWithCustom={handleEditWithCustom}
+          />
+        </div>
+      )}
+      <BatchOpLogs />
+    </div>
+  )
+}

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

@@ -0,0 +1,53 @@
+import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react'
+import { refsStatic } from '../common/ref'
+
+const STATIC_KEY = 'batch-op-logs'
+
+const BatchOpLogs = forwardRef(function BatchOpLogs (_, ref) {
+  const [logs, setLogsState] = useState(null)
+
+  useImperativeHandle(ref, () => ({
+    setLogs: (progress) => setLogsState(progress),
+    reset: () => setLogsState(null)
+  }))
+
+  useEffect(() => {
+    refsStatic.add(STATIC_KEY, {
+      setLogs: (progress) => setLogsState(progress),
+      reset: () => setLogsState(null)
+    })
+    return () => refsStatic.remove(STATIC_KEY)
+  }, [])
+
+  if (!logs || (!logs.steps.length && !logs.currentStep)) {
+    return null
+  }
+
+  const statusIcon = { success: '✓', error: '✗' }
+
+  return (
+    <div className='batch-op-logs mg1t pd1 font13'>
+      <div className='bold mg1b'>Execution Log</div>
+      {logs.steps.map((step, i) => (
+        <div key={i} className={`batch-op-log-entry ${step.status}`}>
+          <span className='log-icon mg1r'>{statusIcon[step.status] || '○'}</span>
+          <span className='log-name'>{step.name}</span>
+          {step.error && <span className='log-error mg1l color-red'>{step.error}</span>}
+        </div>
+      ))}
+      {logs.status === 'running' && logs.currentStep && (
+        <div className='batch-op-log-entry running'>
+          <span className='log-icon mg1r'>→</span>
+          <span className='log-name'>{logs.currentStep}</span>
+        </div>
+      )}
+      {logs.status === 'completed' && (
+        <div className='batch-op-log-entry completed color-green mg1t'>
+          ✓ Workflow completed
+        </div>
+      )}
+    </div>
+  )
+})
+
+export default BatchOpLogs