@electerm/electerm-react 2.10.26 → 2.11.6

package/client/components/bookmark-form/bookmark-from-history-modal.jsx

@@ -0,0 +1,141 @@
+/**
+ * Bookmark from history modal - used to create bookmark from history item
+ */
+
+import React from 'react'
+import { Button, message } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import Modal from '../common/modal'
+import { refsStatic } from '../common/ref'
+import AICategorySelect from './common/ai-category-select.jsx'
+import generate from '../../common/uid'
+import copy from 'json-deep-copy'
+
+const e = window.translate
+
+export default class BookmarkFromHistoryModal extends React.PureComponent {
+  state = {
+    visible: false,
+    tab: null,
+    selectedCategory: 'default'
+  }
+
+  componentDidMount () {
+    refsStatic.add('bookmark-from-history-modal', this)
+  }
+
+  show (tab) {
+    this.setState({
+      visible: true,
+      tab: copy(tab),
+      selectedCategory: 'default'
+    })
+  }
+
+  handleClose = () => {
+    this.setState({
+      visible: false,
+      tab: null,
+      selectedCategory: 'default'
+    })
+  }
+
+  buildBookmark = () => {
+    const { tab } = this.state
+    if (!tab) return null
+
+    const r = {
+      ...tab,
+      id: generate()
+    }
+    console.log(r)
+    delete r.parentId
+    delete r.category
+    return r
+  }
+
+  handleConfirm = () => {
+    const { tab, selectedCategory } = this.state
+    if (!tab) {
+      return
+    }
+
+    const { store } = window
+    const { addItem } = store
+
+    // Create bookmark from tab data
+    const bookmark = this.buildBookmark()
+
+    // Add bookmark
+    addItem(bookmark, 'bookmarks')
+
+    // Ensure the bookmark id is registered in its group
+    try {
+      const groupId = selectedCategory || 'default'
+      const group = window.store.bookmarkGroups.find(g => g.id === groupId)
+      if (group) {
+        group.bookmarkIds = [
+          ...new Set([...(group.bookmarkIds || []), bookmark.id])
+        ]
+        bookmark.color = group.color
+      }
+    } catch (err) {
+      console.error('Failed to update bookmark group:', err)
+    }
+
+    message.success(e('Done'))
+    this.handleClose()
+  }
+
+  render () {
+    const { visible, selectedCategory } = this.state
+
+    if (!visible) {
+      return null
+    }
+
+    const bookmark = this.buildBookmark()
+    const bookmarkJson = JSON.stringify(bookmark, null, 2)
+
+    const modalProps = {
+      open: visible,
+      title: (
+        <span>
+          <PlusOutlined className='mg1r' />
+          {e('bookmarks')}
+        </span>
+      ),
+      width: 600,
+      onCancel: this.handleClose,
+      footer: (
+        <div className='custom-modal-footer-buttons'>
+          <Button onClick={this.handleClose}>
+            {e('cancel')}
+          </Button>
+          <Button type='primary' onClick={this.handleConfirm}>
+            {e('confirm')}
+          </Button>
+        </div>
+      )
+    }
+
+    return (
+      <Modal {...modalProps}>
+        <div className='bookmark-from-history-modal pd2'>
+          <div className='pd1b'>
+            <AICategorySelect
+              bookmarkGroups={window.store.bookmarkGroups}
+              value={selectedCategory}
+              onChange={(val) => this.setState({ selectedCategory: val })}
+            />
+          </div>
+          <div className='pd1b'>
+            <pre className='bookmark-json-preview'>
+              {bookmarkJson}
+            </pre>
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}

package/client/components/bookmark-form/tree-select.jsx

@@ -1,15 +1,18 @@
 import {
   Tree,
   Button,
-  Space
+  Space,
+  Input
 } from 'antd'
+import { useState, useMemo } from 'react'
 import { defaultBookmarkGroupId, settingMap } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
-import { createTitleWithTag } from '../../common/create-title'
+import createTitle, { createTitleWithTag } from '../../common/create-title'
 
 const e = window.translate
 
-function buildData (bookmarks, bookmarkGroups) {
+function buildData (bookmarks, bookmarkGroups, searchText = '') {
+  const searchLower = searchText.toLowerCase()
   const cats = bookmarkGroups
   const tree = bookmarks
     .reduce((p, k) => {
@@ -25,6 +28,14 @@ function buildData (bookmarks, bookmarkGroups) {
         [k.id]: k
       }
     }, {})
+
+  // Helper to check if a node matches the search
+  function matchesSearch (text) {
+    if (!searchText) return true
+    const str = String(text || '')
+    return str.toLowerCase().includes(searchLower)
+  }
+
   function buildSubCats (id) {
     const x = btree[id]
     if (!x) {
@@ -42,6 +53,14 @@ function buildData (bookmarks, bookmarkGroups) {
     if (y.children && !y.children.length) {
       delete y.children
     }
+    // Filter: include node if it matches or has matching children
+    if (searchText) {
+      const titleMatches = matchesSearch(x.title || '')
+      const hasMatchingChildren = y.children && y.children.length > 0
+      if (!titleMatches && !hasMatchingChildren) {
+        return ''
+      }
+    }
     return y
   }
   function buildLeaf (id) {
@@ -49,6 +68,11 @@ function buildData (bookmarks, bookmarkGroups) {
     if (!x) {
       return ''
     }
+    const titleText = createTitle(x)
+    // Filter: only include leaf if it matches search
+    if (searchText && !matchesSearch(titleText)) {
+      return ''
+    }
     return {
       value: x.id,
       key: x.id,
@@ -57,14 +81,26 @@ function buildData (bookmarks, bookmarkGroups) {
   }
   const level1 = cats.filter(d => d.level !== 2)
     .map(d => {
+      const children = [
+        ...(d.bookmarkGroupIds || []).map(buildSubCats),
+        ...(d.bookmarkIds || []).map(buildLeaf)
+      ].filter(d => d)
+      // Filter: include group if it matches or has matching children
+      if (searchText) {
+        const titleMatches = matchesSearch(d.title || '')
+        const hasMatchingChildren = children.length > 0
+        if (!titleMatches && !hasMatchingChildren) {
+          return null
+        }
+      }
       const r = {
         title: d.title,
         value: d.id,
         key: d.id,
-        children: [
-          ...(d.bookmarkGroupIds || []).map(buildSubCats),
-          ...(d.bookmarkIds || []).map(buildLeaf)
-        ].filter(d => d)
+        children
+      }
+      if (r.children && !r.children.length) {
+        delete r.children
       }
       return r
     }).filter(d => d)
@@ -72,18 +108,13 @@ function buildData (bookmarks, bookmarkGroups) {
 }
 
 export default function BookmarkTreeSelect (props) {
-  const { expandedKeys: propExpandedKeys, checkedKeys: propCheckedKeys, bookmarks, bookmarkGroups, type = 'delete', onCheck: propOnCheck, onExpand: propOnExpand } = props
-
-  const expandedKeys = propExpandedKeys !== undefined ? propExpandedKeys : window.store.expandedKeys
-  const checkedKeys = propCheckedKeys !== undefined ? propCheckedKeys : window.store.checkedKeys
+  const { bookmarks, bookmarkGroups, type = 'delete', expandedKeys: propExpandedKeys, checkedKeys: propCheckedKeys } = props
 
-  const onExpand = propOnExpand || ((expandedKeys) => {
-    window.store.expandedKeys = deepCopy(expandedKeys)
-  })
+  const [expandedKeys, setExpandedKeys] = useState(() => deepCopy(propExpandedKeys || []))
+  const [checkedKeys, setCheckedKeys] = useState(() => deepCopy(propCheckedKeys || []))
+  const [searchText, setSearchText] = useState('')
 
-  const onCheck = propOnCheck || ((checkedKeys) => {
-    window.store.checkedKeys = deepCopy(checkedKeys)
-  })
+  const onCheck = setCheckedKeys
 
   const handleOperation = () => {
     const { store } = window
@@ -97,7 +128,7 @@ export default function BookmarkTreeSelect (props) {
         props.onClose()
       }
     }
-    store.checkedKeys = []
+    setCheckedKeys([])
   }
 
   const handleCancel = () => {
@@ -107,7 +138,14 @@ export default function BookmarkTreeSelect (props) {
     } else {
       store.bookmarkSelectMode = false
     }
-    store.checkedKeys = []
+    setCheckedKeys([])
+  }
+
+  const treeData = useMemo(() => buildData(bookmarks, bookmarkGroups, searchText), [bookmarks, bookmarkGroups, searchText])
+
+  // Auto expand parent nodes when searching
+  const handleExpand = (keys) => {
+    setExpandedKeys(keys)
   }
 
   const rProps = {
@@ -116,13 +154,22 @@ export default function BookmarkTreeSelect (props) {
     onCheck,
     expandedKeys,
     checkedKeys,
-    onExpand,
-    treeData: buildData(bookmarks, bookmarkGroups)
+    onExpand: handleExpand,
+    treeData
   }
   const len = checkedKeys.length
   return (
-    <div>
-      <div className='pd2'>
+    <div className='tree-select-wrapper pd2'>
+      <div className='tree-select-header'>
+        <Space.Compact className='mg2b'>
+          <Input.Search
+            placeholder={e('search') || 'Search...'}
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            allowClear
+            style={{ flex: 1 }}
+          />
+        </Space.Compact>
         <Space.Compact className='mg2b'>
           <Button
             type='primary'
@@ -137,6 +184,8 @@ export default function BookmarkTreeSelect (props) {
             {e('cancel')}
           </Button>
         </Space.Compact>
+      </div>
+      <div className='tree-select-content'>
         <Tree {...rProps} />
       </div>
     </div>

package/client/components/common/input-context-menu.jsx

@@ -63,7 +63,6 @@ function handleCopy (element) {
  */
 async function handlePaste (element) {
   if (!isInputElement(element) || element.readOnly || element.disabled) return
-
   element.focus()
   const clipboardText = await readClipboardAsync()
 
@@ -89,7 +88,7 @@ function insertTextAtCursor (element, text) {
         triggerInputEvents(element)
       }
     } catch (error) {
-      console.log('execCommand insertText failed:', error)
+      console.error('execCommand insertText failed:', error)
     }
   }
 }
@@ -135,7 +134,7 @@ function handleCut (element) {
           triggerInputEvents(element)
         }
       } catch (error) {
-        console.log('execCommand cut failed:', error)
+        console.error('execCommand cut failed:', error)
       }
     }
   }
@@ -197,12 +196,15 @@ const InputContextMenu = () => {
   const [targetElement, setTargetElement] = useState(null)
   const menuRef = useRef(null)
 
-  const handleMenuClick = async ({ key }) => {
+  const handleMenuClick = async ({ key, domEvent }) => {
+    domEvent.preventDefault()
+    domEvent.stopPropagation()
     // Keep reference to current element before closing menu
     const currentElement = targetElement
     // Close menu first
     setVisible(false)
     setTargetElement(null)
+
     // Execute action with preserved element reference
     if (currentElement) {
       setTimeout(async () => {
@@ -246,7 +248,12 @@ const InputContextMenu = () => {
     }
 
     const handleClick = (event) => {
-      if (visible && menuRef.current && !menuRef.current.contains(event.target)) {
+      const isInDropdown = event.target.closest('.ant-dropdown')
+      if (
+        visible &&
+        menuRef.current &&
+        !isInDropdown
+      ) {
         setVisible(false)
         setTargetElement(null)
       }
@@ -284,6 +291,7 @@ const InputContextMenu = () => {
         }}
         open={visible}
         placement='bottomLeft'
+        className='input-context-menu'
       >
         <div style={{ width: 1, height: 1 }} />
       </Dropdown>

package/client/components/main/main.jsx

@@ -32,6 +32,7 @@ import Opacity from '../common/opacity'
 import MoveItemModal from '../tree-list/move-item-modal'
 import InputContextMenu from '../common/input-context-menu'
 import WorkspaceSaveModal from '../tabs/workspace-save-modal'
+import BookmarkFromHistoryModal from '../bookmark-form/bookmark-from-history-modal'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -47,6 +48,7 @@ export default auto(function Index (props) {
     ipcOnEvent('open-about', store.openAbout)
     ipcOnEvent('new-ssh', store.onNewSsh)
     ipcOnEvent('add-tab-from-command-line', store.addTabFromCommandLine)
+    ipcOnEvent('open-tab', store.addTab)
     ipcOnEvent('openSettings', store.openSetting)
     ipcOnEvent('selectall', store.selectall)
     ipcOnEvent('focused', store.focus)
@@ -293,6 +295,7 @@ export default auto(function Index (props) {
         <TerminalCmdSuggestions {...cmdSuggestionsProps} />
         <TransferQueue />
         <WorkspaceSaveModal store={store} />
+        <BookmarkFromHistoryModal />
         <NotificationContainer />
       </div>
     </ConfigProvider>

package/client/components/rdp/rdp-session.jsx

@@ -20,6 +20,7 @@ import scanCode from './code-scan'
 import resolutions from './resolutions'
 import { readClipboardAsync } from '../../common/clipboard'
 import RemoteFloatControl from '../common/remote-float-control'
+import './rdp.styl'
 
 const { Option } = Select
 
@@ -538,7 +539,7 @@ export default class RdpSession extends PureComponent {
     }
     return (
       <div
-        className='pd1 fix session-v-info'
+        className='pd1 fix session-v-info block'
       >
         <div className='fleft'>
           <ReloadOutlined
@@ -613,14 +614,9 @@ export default class RdpSession extends PureComponent {
       tabIndex: 0
     }
     if (scaleViewport) {
-      Object.assign(canvasProps, {
-        style: {
-          width: '100%',
-          objectFit: 'contain'
-        }
-      })
+      canvasProps.className = 'scale-viewport'
     }
-    const cls = 'rdp-session-wrap session-v-wrap'
+    const cls = `rdp-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
     const controlProps = this.getControlProps()
     return (
       <Spin spinning={loading}>

package/client/components/rdp/rdp.styl

@@ -0,0 +1,15 @@
+.rdp-session-wrap
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  .session-v-info
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+  &.scale-viewport
+    canvas
+      width: 100% !important
+      object-fit: contain
+

package/client/components/setting-panel/bookmark-tree-list.jsx

@@ -6,6 +6,7 @@ export default function BookmarkTreeList (props) {
     ? (
       <BookmarkTreeSelect
         {...props}
+        type='delete'
       />
       )
     : (

package/client/components/setting-panel/list.styl

@@ -6,6 +6,7 @@
 .list-item-edit
 .list-item-apply
 .list-item-remove
+.list-item-bookmark
   display none
   width 24px
   line-height 35px
@@ -13,6 +14,7 @@
   position absolute
   right 0
   top 0
+
 .list-item-title
   flex-grow: 1
 .item-list-unit
@@ -32,8 +34,12 @@
     .list-item-apply
     .list-item-edit
     .list-item-remove
+    .list-item-bookmark
       display block
-.item-list
-  .list-item-edit
-  .list-item-apply
-    right 20px
+// .item-list
+//   .list-item-edit
+//   .list-item-apply
+//     right 20px
+.item-list-unit
+  .list-item-bookmark
+    right 18px

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

@@ -117,9 +117,9 @@ export default class SettingTerminal extends Component {
     return this.saveConfig(data)
   }
 
-  renderToggle = (name, cls = 'pd2b') => {
+  renderToggle = (name, cls = 'pd2b', label) => {
     const checked = !!this.props.config[name]
-    const txt = e(name)
+    const txt = label || e(name)
     return (
       <div className={cls} key={'rt' + name}>
         <Switch
@@ -580,6 +580,7 @@ export default class SettingTerminal extends Component {
           this.renderToggle('saveTerminalLogToFile')
         }
         {this.renderToggle('addTimeStampToTermLog')}
+        {this.renderToggle('enableSixel', 'pd2b', 'SIXEL')}
         {
           [
             'cursorBlink',

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

@@ -3,7 +3,7 @@
  */
 
 import { Component } from 'react'
-import { Dropdown } from 'antd'
+import { Dropdown, Pagination } from 'antd'
 import classnames from 'classnames'
 import FileSection from './file-item'
 import PagedList from './paged-list'
@@ -37,7 +37,8 @@ export default class FileListTable extends Component {
     })
     return {
       pageSize: 100,
-      properties
+      properties,
+      page: 1
     }
   }
 
@@ -181,6 +182,29 @@ export default class FileListTable extends Component {
     return len > pageSize
   }
 
+  onPageChange = (page) => {
+    this.setState({ page })
+  }
+
+  renderPager () {
+    const { page, pageSize } = this.state
+    const { fileList } = this.props
+    const props = {
+      current: page,
+      pageSize,
+      total: fileList.length,
+      showLessItems: true,
+      showSizeChanger: false,
+      simple: false,
+      onChange: this.onPageChange
+    }
+    return (
+      <div className='pd1b pager-wrap'>
+        <Pagination {...props} />
+      </div>
+    )
+  }
+
   // reset
   resetWidth = () => {
     this.setState(this.initFromProps())
@@ -315,9 +339,12 @@ export default class FileListTable extends Component {
               list={fileList}
               renderItem={this.renderItem}
               hasPager={hasPager}
+              page={this.state.page}
+              pageSize={this.state.pageSize}
             />
           </div>
         </Dropdown>
+        {hasPager && this.renderPager()}
       </div>
     )
   }

package/client/components/sftp/paged-list.jsx

@@ -18,9 +18,8 @@ export default class ScrollFiles extends Component {
   }
 
   renderList () {
-    const {
-      page, pageSize
-    } = this.state
+    const page = this.props.page ?? this.state.page
+    const pageSize = this.props.pageSize ?? this.state.pageSize
     const start = (page - 1) * pageSize
     const end = start + pageSize
     const {
@@ -52,10 +51,6 @@ export default class ScrollFiles extends Component {
   }
 
   render () {
-    const arr = this.renderList()
-    if (this.props.hasPager) {
-      arr.push(this.renderPager())
-    }
-    return arr
+    return this.renderList()
   }
 }

package/client/components/sidebar/history-item.jsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef } from 'react'
 import createTitle, { createTitleWithTag } from '../../common/create-title'
-import { DeleteOutlined } from '@ant-design/icons'
+import { DeleteOutlined, BookFilled } from '@ant-design/icons'
+import { refsStatic } from '../common/ref'
 
 export default function HistoryItem (props) {
   const { store } = window
@@ -31,6 +32,12 @@ export default function HistoryItem (props) {
     e.stopPropagation()
     store.history.splice(index, 1)
   }
+
+  function handleBookmark (e) {
+    e.stopPropagation()
+    refsStatic.get('bookmark-from-history-modal')?.show(item.tab)
+  }
+
   const title = createTitleWithTag(item.tab)
   const tt = createTitle(item.tab)
   return (
@@ -42,6 +49,11 @@ export default function HistoryItem (props) {
       <div className='elli pd1y pd2x'>
         {title}
       </div>
+      <BookFilled
+        className='list-item-bookmark'
+        title={window.translate('bookmark')}
+        onClick={handleBookmark}
+      />
       <DeleteOutlined
         className='list-item-edit'
         onClick={handleDelete}

package/client/components/sidebar/index.jsx

@@ -8,12 +8,13 @@ import {
   UpCircleOutlined,
   BarsOutlined,
   AppstoreOutlined,
-  RobotOutlined
+  ThunderboltOutlined
 } from '@ant-design/icons'
-import { Tooltip } from 'antd'
+import { Tooltip, Popover } from 'antd'
 import SideBarPanel from './sidebar-panel'
 import TransferList from './transfer-list'
 import MenuBtn from '../sys-menu/menu-btn'
+import QuickConnect from '../tabs/quick-connect'
 import {
   sidebarWidth,
   settingMap,
@@ -87,7 +88,6 @@ export default function Sidebar (props) {
 
   const {
     onNewSsh,
-    onNewSshAI,
     openSetting,
     openAbout,
     openSettingSync,
@@ -144,14 +144,17 @@ export default function Sidebar (props) {
             onClick={onNewSsh}
           />
         </SideIcon>
-        <SideIcon
-          title={e('createBookmarkByAI')}
+        <Popover
+          content={<QuickConnect inputOnly />}
+          trigger='click'
+          placement='right'
         >
-          <RobotOutlined
-            className='font20 iblock control-icon'
-            onClick={onNewSshAI}
-          />
-        </SideIcon>
+          <div className='control-icon-wrap' title={e('quickConnect')}>
+            <ThunderboltOutlined
+              className='font20 iblock control-icon'
+            />
+          </div>
+        </Popover>
         <SideIcon
           title={e(settingMap.bookmarks)}
           active={bookmarksActive}