@electerm/electerm-react 2.5.9 → 2.5.16

package/client/common/constants.js

@@ -233,7 +233,7 @@ export const downloadUpgradeTimeout = 20000
 export const expandedKeysLsKey = 'expanded-keys'
 export const resolutionsLsKey = 'custom-resolution-key'
 export const checkedKeysLsKey = 'checked-keys'
-export const quickCommandLabelsLsKey = 'quick-command-labels'
+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'

package/client/components/bookmark-form/bookmark-form.styl

@@ -13,3 +13,5 @@
 .ip-item:hover
     .item-item-use
       display inline-block
+.number-input
+  min-width 210px

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

@@ -17,42 +17,44 @@ export default function renderRunScripts () {
     return (
       <>
         <Space
-          align='center'
+          align='baseline'
+          block
           key={field.key}
         >
           <FormItem
             label=''
             name={[field.name, 'delay']}
             required
+            noStyle
           >
-            <Space.Compact>
-              <Space.Addon>{e('loginScriptDelay')}</Space.Addon>
-              <InputNumber
-                min={1}
-                step={1}
-                max={65535}
-                rules={[{ required: true, message: e('loginScriptDelay') + ' required' }]}
-                className='compact-input'
-              />
-            </Space.Compact>
-          </FormItem>
-          <FormItem
-            label=''
-            name={[field.name, 'script']}
-            required
-            className='mg2x'
-          >
-            <Input.TextArea
-              autoSize={{ minRows: 1 }}
-              placeholder={e('loginScript')}
-              className='compact-input'
+            <InputNumber
+              min={1}
+              step={1}
+              prefix={e('loginScriptDelay')}
+              suffix='ms'
+              max={65535}
+              className='number-input'
+              rules={[{ required: true, message: e('loginScriptDelay') + ' required' }]}
             />
           </FormItem>
-          <Button
-            icon={<MinusCircleOutlined />}
-            onClick={() => remove(field.name)}
-            className='mg24b'
-          />
+          <Space.Compact>
+            <FormItem
+              label=''
+              name={[field.name, 'script']}
+              required
+              noStyle
+            >
+              <Input.TextArea
+                autoSize={{ minRows: 1 }}
+                placeholder={e('loginScript')}
+              />
+            </FormItem>
+            <Button
+              icon={<MinusCircleOutlined />}
+              onClick={() => remove(field.name)}
+              className='mg24b'
+            />
+          </Space.Compact>
         </Space>
       </>
     )

package/client/components/bookmark-form/{tree-delete.jsx → tree-select.jsx}

@@ -71,28 +71,42 @@ function buildData (bookmarks, bookmarkGroups) {
   return level1
 }
 
-export default function BookmarkTreeDelete (props) {
-  const { expandedKeys, checkedKeys, bookmarks, bookmarkGroups } = props
+export default function BookmarkTreeSelect (props) {
+  const { expandedKeys: propExpandedKeys, checkedKeys: propCheckedKeys, bookmarks, bookmarkGroups, type = 'delete', onCheck: propOnCheck, onExpand: propOnExpand } = props
 
-  const onExpand = (expandedKeys) => {
+  const expandedKeys = propExpandedKeys !== undefined ? propExpandedKeys : window.store.expandedKeys
+  const checkedKeys = propCheckedKeys !== undefined ? propCheckedKeys : window.store.checkedKeys
+
+  const onExpand = propOnExpand || ((expandedKeys) => {
     window.store.expandedKeys = deepCopy(expandedKeys)
-  }
+  })
 
-  const onCheck = (checkedKeys) => {
+  const onCheck = propOnCheck || ((checkedKeys) => {
     window.store.checkedKeys = deepCopy(checkedKeys)
-  }
+  })
 
-  const handleDel = () => {
+  const handleOperation = () => {
     const { store } = window
     const arr = checkedKeys.filter(d => d !== defaultBookmarkGroupId)
-    store.delItems(arr, settingMap.bookmarks)
-    store.delItems(arr, settingMap.bookmarkGroups)
+    if (type === 'delete') {
+      store.delItems(arr, settingMap.bookmarks)
+      store.delItems(arr, settingMap.bookmarkGroups)
+    } else {
+      store.openBookmarks(arr)
+      if (props.onClose) {
+        props.onClose()
+      }
+    }
     store.checkedKeys = []
   }
 
   const handleCancel = () => {
     const { store } = window
-    store.bookmarkSelectMode = false
+    if (props.onClose) {
+      props.onClose()
+    } else {
+      store.bookmarkSelectMode = false
+    }
     store.checkedKeys = []
   }
 
@@ -109,13 +123,13 @@ export default function BookmarkTreeDelete (props) {
   return (
     <div>
       <div className='pd2'>
-        <Space.Compact>
+        <Space.Compact className='mg2b'>
           <Button
             type='primary'
             disabled={!len}
-            onClick={handleDel}
+            onClick={handleOperation}
           >
-            {e('delSelected')} ({len})
+            {type === 'delete' ? e('delSelected') : e('open')} ({len})
           </Button>
           <Button
             onClick={handleCancel}

package/client/components/common/input-confirm-common.jsx

@@ -34,6 +34,12 @@ export default function InputConfirmCommon ({
     setIsEditing(false)
   }
 
+  function handleBlur () {
+    if (isEditing) {
+      handleConfirm()
+    }
+  }
+
   const icons = isEditing
     ? (
       <>
@@ -63,18 +69,17 @@ export default function InputConfirmCommon ({
   const childProps = {
     ...restProps,
     value: localValue,
-    onChange: handleChange
+    onChange: handleChange,
+    onBlur: handleBlur
   }
 
   const inputElement = <InputComponent {...childProps} />
 
   return (
-    <div>
-      <Space.Compact className={cls}>
-        {beforeAddon}
-        {inputElement}
-        {afterAddon}
-      </Space.Compact>
-    </div>
+    <Space.Compact className={cls}>
+      {beforeAddon}
+      {inputElement}
+      {afterAddon}
+    </Space.Compact>
   )
 }

package/client/components/common/modal.styl

@@ -22,6 +22,7 @@
   justify-content center
   min-height 100%
   padding 24px
+  word-break break-word
 
 .custom-modal-content
   position relative

package/client/components/common/multi-select-modal.jsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import Modal from './modal'
+import BookmarkTreeSelect from '../bookmark-form/tree-select'
+
+const e = window.translate
+
+const MultiSelectModal = ({ onClose, open }) => {
+  const [checkedKeys, setCheckedKeys] = useState([])
+  const [expandedKeys, setExpandedKeys] = useState([])
+  if (!open) {
+    return null
+  }
+  const { store } = window
+  return (
+    <Modal
+      title={e('open') + ' ' + e('bookmarks')}
+      open={open}
+      onCancel={onClose}
+      footer={null}
+    >
+      <BookmarkTreeSelect
+        type='open'
+        onClose={onClose}
+        bookmarks={store.bookmarks}
+        bookmarkGroups={store.bookmarkGroups}
+        expandedKeys={expandedKeys}
+        checkedKeys={checkedKeys}
+        onExpand={setExpandedKeys}
+        onCheck={setCheckedKeys}
+      />
+    </Modal>
+  )
+}
+
+export default MultiSelectModal

package/client/components/common/notification.styl

@@ -19,7 +19,7 @@
 
 .notification-message
   font-weight bold
-  margin-bottom 10px
+
 .notification-title
   overflow hidden
   text-overflow ellipsis

package/client/components/quick-commands/quick-commands-box.jsx

@@ -23,7 +23,7 @@ const { Option } = Select
 
 export default function QuickCommandsFooterBox (props) {
   const [keyword, setKeyword] = useState('')
-  const [labels, setLabels] = useState(ls.getItemJSON(quickCommandLabelsLsKey, []))
+  const [label, setLabel] = useState(ls.getItem(quickCommandLabelsLsKey, ''))
   const timer = useRef(null)
 
   function handleMouseLeave () {
@@ -68,8 +68,8 @@ export default function QuickCommandsFooterBox (props) {
   }
 
   function handleChangeLabels (v) {
-    ls.setItemJSON(quickCommandLabelsLsKey, v)
-    setLabels(v)
+    ls.setItem(quickCommandLabelsLsKey, v || '')
+    setLabel(v)
   }
 
   // function filterFunc (v, opt) {
@@ -132,10 +132,10 @@ export default function QuickCommandsFooterBox (props) {
     )
   }
 
-  function filterArray (array, keyword, labels) {
+  function filterArray (array, keyword, label) {
     return array.filter(obj => {
       const nameMatches = !keyword || obj.name.toLowerCase().includes(keyword)
-      const labelMatches = !labels.length || labels.some((label) => (obj.labels || []).includes(label))
+      const labelMatches = !label || (obj.labels || []).includes(label)
       return nameMatches && labelMatches
     })
   }
@@ -156,16 +156,16 @@ export default function QuickCommandsFooterBox (props) {
     return renderNoCmd()
   }
   const keyword0 = keyword.toLowerCase()
-  const filtered = filterArray(all, keyword0, labels)
+  const filtered = filterArray(all, keyword0, label)
   const sorted = qmSortByFrequency
     ? sortBy(filtered, (obj) => -(obj.clickCount || 0))
     : filtered
   const sprops = {
-    value: labels,
-    mode: 'multiple',
+    value: label,
     onChange: handleChangeLabels,
     placeholder: e('labels'),
-    className: 'qm-label-select'
+    className: 'qm-label-select',
+    allowClear: true
   }
   const tp = pinnedQuickCommandBar
     ? 'primary'

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -3,11 +3,9 @@ import {
   InputNumber,
   Space,
   Button,
-  Input,
-  Tag
+  Input
 } from 'antd'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
-import { formItemLayout } from '../../common/form-layout'
 import HelpIcon from '../common/help-icon'
 import { copy } from '../../common/clipboard'
 import { useRef } from 'react'
@@ -20,48 +18,49 @@ export default function renderQm () {
   const focused = useRef(0)
   function renderItem (field, i, add, remove) {
     return (
-      <Space
+      <Space.Compact
         align='center'
+        block
         key={field.key}
+        className='mg2b'
       >
+        <Space.Addon>{e('delay')}</Space.Addon>
         <FormItem
           label=''
           name={[field.name, 'delay']}
           required
+          noStyle
         >
-          <Space.Compact>
-            <Space.Addon>{e('delay')}</Space.Addon>
-            <InputNumber
-              min={1}
-              step={1}
-              max={65535}
-              placeholder={100}
-              className='compact-input'
-            />
-          </Space.Compact>
+          <InputNumber
+            min={1}
+            step={1}
+            max={65535}
+            placeholder={100}
+            className='compact-input'
+            suffix='ms'
+          />
         </FormItem>
         <FormItem
           label=''
           name={[field.name, 'command']}
           required
           className='mg2x'
+          noStyle
         >
-          <Space.Compact>
-            <Input.TextArea
-              autoSize={{ minRows: 1 }}
-              placeholder={e('quickCommand')}
-              className='compact-input qm-input'
-              onFocus={() => {
-                focused.current = i
-              }}
-            />
-            <Button
-              icon={<MinusCircleOutlined />}
-              onClick={() => remove(field.name)}
-            />
-          </Space.Compact>
+          <Input.TextArea
+            autoSize={{ minRows: 1 }}
+            placeholder={e('quickCommand')}
+            className='compact-input qm-input'
+            onFocus={() => {
+              focused.current = i
+            }}
+          />
         </FormItem>
-      </Space>
+        <Button
+          icon={<MinusCircleOutlined />}
+          onClick={() => remove(field.name)}
+        />
+      </Space.Compact>
     )
   }
   const commonCmds = [
@@ -89,28 +88,29 @@ export default function renderQm () {
 
   const cmds = commonCmds.map(c => {
     return (
-      <Tag
+      <Button
         title={c.desc}
-        variant='solid'
+        type='text'
         key={c.cmd}
+        size='small'
         onClick={() => {
           copy(c.cmd)
         }}
       >
         <b className='pointer'>{c.cmd}</b>
-      </Tag>
+      </Button>
     )
   })
   const label = (
     <div>
-      {e('commonCommands')}
+      {e('quickCommands')}
       <HelpIcon
         title={cmds}
       />
     </div>
   )
   return (
-    <FormItem {...formItemLayout} label={label}>
+    <FormItem label={label}>
       <FormList
         name='commands'
       >
@@ -127,7 +127,6 @@ export default function renderQm () {
                   <Button
                     type='dashed'
                     onClick={() => add()}
-                    block
                     icon={<PlusOutlined />}
                   >
                     {e('quickCommand')}

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

@@ -1,10 +1,10 @@
 import TreeList from '../tree-list/tree-list'
-import BookmarkTreeDelete from '../bookmark-form/tree-delete'
+import BookmarkTreeSelect from '../bookmark-form/tree-select'
 
 export default function BookmarkTreeList (props) {
   return props.bookmarkSelectMode
     ? (
-      <BookmarkTreeDelete
+      <BookmarkTreeSelect
         {...props}
       />
       )

package/client/components/setting-panel/keywords-form.jsx

@@ -41,32 +41,26 @@ export default function KeywordForm (props) {
 
   function renderItem (field, i, add, remove) {
     return (
-      <Space
+      <Space.Compact
         align='center'
         key={field.key}
-        className='mg3r'
+        className='mg3r mg2b'
       >
         <FormItem
-          hasFeedback
+          noStyle
+          required
+          name={[field.name, 'keyword']}
+          rules={[{ validator: checker }]}
         >
-          <FormItem
-            noStyle
-            required
-            name={[field.name, 'keyword']}
-            rules={[{ validator: checker }]}
-          >
-            <Space.Compact>
-              <InputConfirm
-                addonBefore={renderBefore(field.name)}
-              />
-              <Button
-                icon={<MinusCircleOutlined />}
-                onClick={() => remove(field.name)}
-              />
-            </Space.Compact>
-          </FormItem>
+          <InputConfirm
+            addonBefore={renderBefore(field.name)}
+          />
         </FormItem>
-      </Space>
+        <Button
+          icon={<MinusCircleOutlined />}
+          onClick={() => remove(field.name)}
+        />
+      </Space.Compact>
     )
   }
 

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

@@ -6,10 +6,10 @@ import {
   MoonOutlined
 } from '@ant-design/icons'
 import message from '../common/message'
+import { notification } from '../common/notification'
 import {
   Select,
   Switch,
-  Alert,
   Button,
   Table,
   Space,
@@ -42,8 +42,6 @@ const e = window.translate
 export default class SettingCommon extends Component {
   state = {
     ready: false,
-    languageChanged: false,
-    passwordChanged: false,
     submittingPass: false,
     passInputFocused: false,
     placeholderLogin: window.pre.requireAuth ? '********' : e('notSet'),
@@ -82,7 +80,6 @@ export default class SettingCommon extends Component {
       this.setState({
         loginPass: pass ? '********' : '',
         submittingPass: false,
-        passwordChanged: true,
         placeholderLogin: pass ? '********' : e('notSet')
       }, () => {
         this.submitting = false
@@ -121,10 +118,6 @@ export default class SettingCommon extends Component {
     })
   }
 
-  handleRestart = () => {
-    window.location.reload()
-  }
-
   handleResetAll = () => {
     this.saveConfig(
       deepCopy(defaultSettings)
@@ -137,13 +130,24 @@ export default class SettingCommon extends Component {
     })
   }
 
-  handleChangeLang = language => {
-    this.setState({
-      languageChanged: true
-    })
-    return this.saveConfig({
+  handleChangeLang = async language => {
+    await this.saveConfig({
       language
     })
+    notification.info({
+      message: (
+        <div>
+          {e('saveLang')}
+          <Button
+            onClick={() => window.location.reload()}
+            className='mg1l'
+            size='small'
+          >
+            {e('restartNow')}
+          </Button>
+        </div>
+      )
+    })
   }
 
   handleChangeTerminalTheme = id => {
@@ -199,30 +203,6 @@ export default class SettingCommon extends Component {
     )
   }
 
-  renderRestart = (name) => {
-    if (!this.state[name]) {
-      return null
-    }
-    return (
-      <div className='pd1t'>
-        <Alert
-          message={
-            <div>
-              {e('saveLang')}
-              <Button
-                onClick={this.handleRestart}
-                className='mg1l'
-              >
-                {e('restartNow')}
-              </Button>
-            </div>
-          }
-          type='success'
-        />
-      </div>
-    )
-  }
-
   renderNumber = (name, options, title = '') => {
     let value = this.props.config[name]
     if (options.valueParser) {
@@ -296,7 +276,7 @@ export default class SettingCommon extends Component {
     }
     return (
       <div className='pd2b'>
-        <Space.Compact block>
+        <Space.Compact className='width-100'>
           <InputConfirm
             value={value}
             onChange={onChange}
@@ -592,7 +572,6 @@ export default class SettingCommon extends Component {
           </Select>
           <Link className='mg1l' to={createEditLangLink(language)}>{e('edit')}</Link>
         </div>
-        {this.renderRestart('languageChanged')}
         <div className='pd1b'>{e('default')} {e('execWindows')}</div>
         {
           this.renderTextExec('execWindows')

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

@@ -540,7 +540,7 @@ export default class SettingTerminal extends Component {
             <Flex flex='auto'>{this.renderFontFamily()}</Flex>
           </Flex>
         </div>
-        <div className='pd2b'>
+        <div>
           <div className='pd1b'>
             <span className='inline-title mg1r'>{e('keywordsHighlight')}</span>
             <HelpIcon

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

@@ -24,8 +24,14 @@
   width 340px
   bottom 0
   padding 20px 0 20px 20px
-  .ant-tree
-    background none
+  display flex
+  flex-direction column
+  .model-bookmark-tree-wrap
+    flex 1
+    display flex
+    flex-direction column
+    overflow hidden
+    min-height 0
 .setting-row-right
   left 340px
   right 0

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

@@ -2,17 +2,19 @@
  * bookmark select
  */
 
-import { memo } from 'react'
+import { memo, useState } from 'react'
 import BookmarkWrap from './bookmark'
 import History from './history'
 import { Tabs, Tooltip } from 'antd'
+import MultiSelectModal from '../common/multi-select-modal'
 import {
   ArrowsAltOutlined,
   EditOutlined,
   PlusCircleOutlined,
   ShrinkOutlined,
   PushpinOutlined,
-  UnorderedListOutlined
+  UnorderedListOutlined,
+  SelectOutlined
 } from '@ant-design/icons'
 
 const e = window.translate
@@ -20,6 +22,7 @@ const e = window.translate
 export default memo(function SidebarPanel (props) {
   const { sidebarPanelTab, pinned } = props
   const { store } = window
+  const [openSelectModal, setOpenSelectModal] = useState(false)
   const prps = {
     className: 'font16 mg1x mg2l pointer iblock control-icon'
   }
@@ -81,6 +84,12 @@ export default memo(function SidebarPanel (props) {
         <ShrinkOutlined
           {...pop3}
         />
+      </Tooltip>,
+      <Tooltip title={e('open') + ' ' + e('bookmarks')} key='multi'>
+        <SelectOutlined
+          {...prps}
+          onClick={() => setOpenSelectModal(true)}
+        />
       </Tooltip>
     ]
   }
@@ -119,6 +128,10 @@ export default memo(function SidebarPanel (props) {
           ? <BookmarkWrap {...props} />
           : <History store={store} />
       }
+      <MultiSelectModal
+        open={openSelectModal}
+        onClose={() => setOpenSelectModal(false)}
+      />
     </div>
   )
 })

package/client/components/sidebar/sidebar.styl

@@ -39,9 +39,15 @@
   right 0
   top 112px
   bottom 0
-  overflow-y scroll
-  .item-list-wrap
-    overflow-y hidden
+  overflow hidden
+  display flex
+  flex-direction column
+  .sidebar-inner
+    flex 1
+    display flex
+    flex-direction column
+    overflow hidden
+    min-height 0
 .not-system-ui.is-mac
   .sidebar-bar
     margin-top 20px

package/client/components/tabs/add-btn-menu.jsx

@@ -72,16 +72,20 @@ export default function AddBtnMenu ({
       <DragHandle
         {...dragProps}
       />
-      <div
-        className={cls}
-        onClick={onNewSsh}
-      >
-        <CodeFilled /> {e('newBookmark')}
+      <div className='add-menu-header'>
+        <div
+          className={cls}
+          onClick={onNewSsh}
+        >
+          <CodeFilled /> {e('newBookmark')}
+        </div>
+        {addTabBtn}
+      </div>
+      <div className='add-menu-list'>
+        <BookmarksList
+          store={window.store}
+        />
       </div>
-      {addTabBtn}
-      <BookmarksList
-        store={window.store}
-      />
     </div>
   )
 }

package/client/components/tabs/add-btn.styl

@@ -8,10 +8,20 @@
   box-shadow 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--main-darker)
   min-width 300px
   max-width 600px
-  overflow-y auto
+  overflow hidden
   margin-top 4px
   padding 4px 15px
+  display flex
+  flex-direction column
   .drag-handle
     right 3px
     display block
+  .add-menu-header
+    flex-shrink 0
+  .add-menu-list
+    flex 1
+    overflow hidden
+    display flex
+    flex-direction column
+    min-height 0
 

package/client/components/tabs/tab.jsx

@@ -399,7 +399,11 @@ class Tab extends Component {
   }
 
   render () {
-    const { isLast, tab, currentBatchTabId } = this.props
+    const {
+      isLast,
+      tab,
+      currentBatchTabId
+    } = this.props
     const {
       id,
       isEditting,
@@ -411,10 +415,12 @@ class Tab extends Component {
       terminalOnData
     } = this.state
     const active = id === currentBatchTabId
+    const activeAll = id === window.store.activeTabId
     const cls = classnames(
       `tab-${id}`,
       'tab',
       { active },
+      { 'active-all': activeAll },
       {
         'tab-last': isLast
       },

package/client/components/tabs/tabs.styl

@@ -52,8 +52,11 @@
   &.active
     color var(--text)
     background var(--main)
+  &.active-all
+    font-weight bold
     .tab-count
-      opacity 1
+      border-radius 15px
+      font-weight bold
   &:hover
     .tab-close
       display block

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

@@ -849,14 +849,16 @@ export default class ItemListTree extends Component {
       : []
     return (
       <div className={`tree-list item-type-${type}`}>
-        {
-          staticList
-            ? null
-            : this.renderNewButtons()
-        }
-        {
-          this.renderSearch()
-        }
+        <div className='tree-list-header'>
+          {
+            staticList
+              ? null
+              : this.renderNewButtons()
+          }
+          {
+            this.renderSearch()
+          }
+        </div>
         <div className='item-list-wrap' style={listStyle}>
           {this.renderNewCat({ id: '' })}
           {level1Bookgroups.map(this.renderGroup)}

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

@@ -85,3 +85,17 @@
   max-height 300px
   overflow-y auto
   padding 8px
+
+.tree-list
+  display flex
+  flex-direction column
+  height 100%
+  overflow hidden
+
+.tree-list-header
+  flex-shrink 0
+
+.item-list-wrap
+  flex 1
+  overflow-y auto
+  min-height 0

package/client/store/bookmark.js

@@ -19,6 +19,13 @@ export default Store => {
     return window.store.setItems('bookmarks', items)
   }
 
+  Store.prototype.openBookmarks = function (ids) {
+    const { store } = window
+    ids.forEach(id => {
+      store.onSelectBookmark(id)
+    })
+  }
+
   Store.prototype.addSshConfigs = function (items) {
     const { store } = window
 

package/package.json

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