@electerm/electerm-react 2.3.36 → 2.3.58

package/client/common/constants.js

@@ -1,12 +1,9 @@
 /**
  * constants
  */
-import { getUiThemeConfig } from './ui-theme'
 import logoPath1Ref from '@electerm/electerm-resource/res/imgs/electerm-round-128x128.png'
 import logoPath2Ref from '@electerm/electerm-resource/res/imgs/electerm.png'
 import logoPath3Ref from '@electerm/electerm-resource/res/imgs/electerm-watermark.png'
-import dbDefaults from './db-defaults'
-import { get as _get } from 'lodash-es'
 export const packInfo = typeof window.et.packInfo === 'undefined' ? window.pre.packInfo : window.et.packInfo
 const buildConst = (props) => {
   return props.reduce((prev, key) => {
@@ -150,35 +147,6 @@ export const leftSidebarWidthKey = 'left-sidebar-width'
 export const rightSidebarWidthKey = 'right-sidebar-width'
 export const sftpDefaultSortSettingKey = 'sftp-default-sort'
 export const qmSortByFrequencyKey = 'qm-sort-by-frequency'
-// https://github.com/tinkertrain/panda-syntax-vscode/blob/master/themes/workbench.yaml
-export const defaultTheme = {
-  id: 'default',
-  name: 'default',
-  themeConfig: {
-    foreground: '#bbbbbb',
-    background: '#141314',
-    cursor: '#b5bd68',
-    cursorAccent: '#1d1f21',
-    selectionBackground: 'rgba(255, 255, 255, 0.3)',
-    black: '#575757',
-    red: '#FF2C6D',
-    green: '#19f9d8',
-    yellow: '#FFB86C',
-    blue: '#45A9F9',
-    magenta: '#FF75B5',
-    cyan: '#B084EB',
-    white: '#CDCDCD',
-    brightBlack: '#757575',
-    brightRed: '#FF2C6D',
-    brightGreen: '#19f9d8',
-    brightYellow: '#FFCC95',
-    brightBlue: '#6FC1FF',
-    brightMagenta: '#FF9AC1',
-    brightCyan: '#BCAAFE',
-    brightWhite: '#E6E6E6'
-  },
-  uiThemeConfig: getUiThemeConfig()
-}
 
 export const commonBaudRates = [
   110,
@@ -230,11 +198,6 @@ export const settingShortcutsId = 'setting-shortcuts'
 export const settingAiId = 'setting-ai'
 export const settingCommonId = 'setting-common'
 export const defaultEnvLang = 'en_US.UTF-8'
-const defaultThemeLightConf = _get(
-  dbDefaults, '[0].data[1]'
-)
-defaultThemeLightConf.id = defaultThemeLightConf._id
-export const defaultThemeLight = defaultThemeLightConf
 export const fileActions = {
   cancel: 'cancel',
   skip: 'skip',

package/client/common/terminal-theme.js

@@ -2,9 +2,12 @@
  * theme control
  */
 
-import { defaultTheme, settingMap } from '../common/constants'
+import { settingMap } from '../common/constants'
 import download from '../common/download'
-import copy from 'json-deep-copy'
+import {
+  defaultTheme
+} from './theme-defaults'
+
 const e = window.translate
 const terminalPrefix = 'terminal:'
 export const requiredThemeProps = [
@@ -46,21 +49,13 @@ export const validThemeProps = [
   ...requiredThemeProps,
   'name'
 ]
-/**
- * build default themes
- */
-export const buildDefaultThemes = () => {
-  return {
-    [defaultTheme.id]: defaultTheme
-  }
-}
 
 /**
  * build new theme
  */
-export const buildNewTheme = (theme = defaultTheme) => {
+export const buildNewTheme = (theme = defaultTheme()) => {
   return Object.assign(
-    copy(theme),
+    theme,
     {
       id: '',
       name: e('newTheme')
@@ -132,7 +127,7 @@ export const convertTheme = (themeTxt) => {
  * @return {array} extra keys
  */
 export const verifyTheme = (themeConfig) => {
-  const keysRight = Object.keys(defaultTheme.themeConfig)
+  const keysRight = Object.keys(defaultTheme().themeConfig)
   const keys = Object.keys(themeConfig)
   const extraKeys = keys.filter(k => !keysRight.includes(k))
   return extraKeys

package/client/common/theme-defaults.js

@@ -0,0 +1,120 @@
+/**
+ * database default should init
+ */
+
+function parsor (themeTxt) {
+  return themeTxt.split('\n').reduce((prev, line) => {
+    let [key = '', value = ''] = line.split('=')
+    key = key.trim()
+    value = value.trim()
+    if (!key || !value) {
+      return prev
+    }
+    prev[key] = value
+    return prev
+  }, {})
+}
+
+const defaultThemeDark = () => {
+  return parsor(`
+main-dark=#000
+main-light=#2E3338
+text=#ddd
+text-light=#fff
+text-dark=#888
+text-disabled=#777
+primary=#08c
+info=#FFD166
+success=#06D6A0
+error=#EF476F
+warn=#E55934
+main=#121214
+  `)
+}
+const defaultThemeLightFunc = () => {
+  return parsor(`
+      main=#ededed
+      main-dark=#cccccc
+      main-light=#fefefe
+      text=#555
+      text-light=#777
+      text-dark=#444
+      text-disabled=#888
+      primary=#08c
+      info=#FFD166
+      success=#06D6A0
+      error=#EF476F
+      warn=#E55934
+    `)
+}
+
+const defaultThemeLightTerminal = () => {
+  return parsor(`
+background=#121214
+foreground=#af9a91
+cursor=#af9a91
+selectionBackground=#575256
+cursorAccent=#121214
+black=#572100
+red=#ba3934
+green=#91773f
+yellow=#b55600
+blue=#5f63b4
+magenta=#a17c7b
+cyan=#8faea9
+white=#af9a91
+brightBlack=#4e4b61
+brightRed=#d9443f
+brightGreen=#d6b04e
+brightYellow=#f66813
+brightBlue=#8086ef
+brightMagenta=#e2c2bb
+brightCyan=#a4dce7
+brightWhite=#d2c7a9
+    `
+  )
+}
+
+const defaultThemeDarkTerminal = () => {
+  return {
+    foreground: '#bbbbbb',
+    background: '#20111b',
+    cursor: '#b5bd68',
+    cursorAccent: '#1d1f21',
+    selectionBackground: 'rgba(255, 255, 255, 0.3)',
+    black: '#575757',
+    red: '#FF2C6D',
+    green: '#19f9d8',
+    yellow: '#FFB86C',
+    blue: '#45A9F9',
+    magenta: '#FF75B5',
+    cyan: '#B084EB',
+    white: '#CDCDCD',
+    brightBlack: '#757575',
+    brightRed: '#FF2C6D',
+    brightGreen: '#19f9d8',
+    brightYellow: '#FFCC95',
+    brightBlue: '#6FC1FF',
+    brightMagenta: '#FF9AC1',
+    brightCyan: '#BCAAFE',
+    brightWhite: '#E6E6E6'
+  }
+}
+
+export function defaultTheme () {
+  return {
+    id: 'default',
+    name: 'default',
+    themeConfig: defaultThemeDarkTerminal(),
+    uiThemeConfig: defaultThemeDark()
+  }
+}
+
+export function defaultThemeLight () {
+  return {
+    id: 'defaultLight',
+    name: 'default light',
+    themeConfig: defaultThemeLightTerminal(),
+    uiThemeConfig: defaultThemeLightFunc()
+  }
+}

package/client/components/common/ref.js

@@ -2,6 +2,7 @@
 window.refs = new Map()
 window.refsStatic = new Map()
 window.refsTransfers = new Map()
+window.refsTabs = new Map()
 
 class Ref {
   constructor (key) {
@@ -21,6 +22,40 @@ class Ref {
   }
 }
 
+class TabsRef extends Ref {
+  constructor (key) {
+    super(key)
+    // Map to track add count for each key: key -> number
+    this.addCounts = new Map()
+  }
+
+  add (key, inst) {
+    // Increment add count
+    const currentCount = this.addCounts.get(key) || 0
+    this.addCounts.set(key, currentCount + 1)
+
+    // Add/update the ref
+    window[this.key].set(key, inst)
+  }
+
+  remove (key) {
+    const currentCount = this.addCounts.get(key) || 0
+
+    if (currentCount <= 0) {
+      return
+    }
+
+    const newCount = currentCount - 1
+    if (newCount === 0) {
+      window[this.key].delete(key)
+      this.addCounts.delete(key)
+    } else {
+      this.addCounts.set(key, newCount)
+    }
+  }
+}
+
 export const refs = new Ref('refs')
 export const refsTransfers = new Ref('refsTransfers')
 export const refsStatic = new Ref('refsStatic')
+export const refsTabs = new TabsRef('refsTabs')

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

@@ -33,10 +33,15 @@
   display flex
   padding 8px 5px
   &:hover
-    background var(--primary)
-    color var(--primary-contrast)
-.sftp-transport .transfer-control-icon:hover
-  color var(--primary)
+    font-weight bold
+  .transfer-control-icon
+    padding-right 5px
+    padding-left 5px
+    margin-top -2px
+    &:hover
+      color var(--primary-contrast)
+      background var(--primary)
+      border-radius 20px
 
 .flex-child + .flex-child
   margin-left 5px

package/client/components/sidebar/index.jsx

@@ -8,7 +8,6 @@ import {
   UpCircleOutlined,
   BarsOutlined
 } from '@ant-design/icons'
-import { useRef, memo } from 'react'
 import { Tooltip } from 'antd'
 import SideBarPanel from './sidebar-panel'
 import TransferList from './transfer-list'
@@ -25,9 +24,7 @@ import './sidebar.styl'
 
 const e = window.translate
 
-export default memo(function Sidebar (props) {
-  const handler = useRef(null)
-
+export default function Sidebar (props) {
   const {
     height,
     upgradeInfo,
@@ -47,27 +44,35 @@ export default memo(function Sidebar (props) {
 
   const { store } = window
 
-  const handleMouseLeave = () => {
-    if (pinned) {
-      return false
+  const handleClickOutside = (event) => {
+    // Don't close if pinned or has active input
+    if (store.pinned || hasActiveInput()) {
+      return
     }
 
-    if (hasActiveInput()) {
-      return false
+    // Check if click is outside the sidebar panel
+    const sidebarPanel = document.querySelector('.sidebar-panel')
+    if (sidebarPanel && !sidebarPanel.contains(event.target)) {
+      store.setOpenedSideBar('')
+      document.removeEventListener('click', handleClickOutside)
     }
-
-    handler.current = setTimeout(
-      () => store.setOpenedSideBar(''),
-      400
-    )
   }
 
-  const handleMouseEnterBookmark = () => {
+  const handleClickBookmark = () => {
     if (pinned) {
-      return false
+      return
+    }
+    if (openedSideBar === 'bookmarks') {
+      // Remove listener when closing
+      document.removeEventListener('click', handleClickOutside)
+      store.setOpenedSideBar('')
+    } else {
+      // Add listener when opening, with slight delay to avoid conflict with this click
+      setTimeout(() => {
+        document.addEventListener('click', handleClickOutside)
+      }, 0)
+      store.setOpenedSideBar('bookmarks')
     }
-    clearTimeout(handler.current)
-    store.setOpenedSideBar('bookmarks')
   }
 
   const handleShowUpgrade = () => {
@@ -80,7 +85,6 @@ export default memo(function Sidebar (props) {
     openAbout,
     openSettingSync,
     openTerminalThemes,
-    onClickBookmark,
     toggleBatchOp,
     setLeftSidePanelWidth
   } = store
@@ -137,9 +141,7 @@ export default memo(function Sidebar (props) {
           active={bookmarksActive}
         >
           <BookOutlined
-            onMouseEnter={handleMouseEnterBookmark}
-            onMouseLeave={handleMouseLeave}
-            onClick={onClickBookmark}
+            onClick={handleClickBookmark}
             className='font20 iblock control-icon'
           />
         </SideIcon>
@@ -212,10 +214,8 @@ export default memo(function Sidebar (props) {
         <SideBarPanel
           pinned={pinned}
           sidebarPanelTab={sidebarPanelTab}
-          onMouseEnter={handleMouseEnterBookmark}
-          onMouseLeave={handleMouseLeave}
         />
       </SidePanel>
     </div>
   )
-})
+}

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

@@ -5,9 +5,15 @@
 import { memo } from 'react'
 import BookmarkWrap from './bookmark'
 import History from './history'
-import { pick } from 'lodash-es'
 import { Tabs, Tooltip } from 'antd'
-import { ArrowsAltOutlined, EditOutlined, PlusCircleOutlined, ShrinkOutlined, PushpinOutlined } from '@ant-design/icons'
+import {
+  ArrowsAltOutlined,
+  EditOutlined,
+  PlusCircleOutlined,
+  ShrinkOutlined,
+  PushpinOutlined,
+  UnorderedListOutlined
+} from '@ant-design/icons'
 
 const e = window.translate
 
@@ -20,9 +26,21 @@ export default memo(function SidebarPanel (props) {
   const prps1 = {
     className: prps.className + (pinned ? ' pinned' : '')
   }
+  const props2 = {
+    onClick: store.clearHistory,
+    className: 'mg2x pointer clear-ai-icon icon-hover'
+  }
+  const tabBarExtraContent = sidebarPanelTab === 'history'
+    ? (
+      <UnorderedListOutlined
+        {...props2}
+      />
+      )
+    : null
   const tabsProps = {
     activeKey: sidebarPanelTab,
     onChange: store.handleSidebarPanelTab,
+    tabBarExtraContent,
     items: [
       {
         key: 'bookmarks',
@@ -69,7 +87,6 @@ export default memo(function SidebarPanel (props) {
   return (
     <div
       className='sidebar-panel bookmarks-panel animate-fast'
-      {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
     >
       <div className='sidebar-pin-top'>
         <div className='pd1y pd2t pd2x sidebar-panel-control alignright'>

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

@@ -27,7 +27,6 @@ export default class AddBtn extends Component {
     }
     this.addBtnRef = React.createRef()
     this.menuRef = React.createRef()
-    this.hideTimeout = null
     this.portalContainer = null
   }
 
@@ -40,19 +39,9 @@ export default class AddBtn extends Component {
     return this.portalContainer
   }
 
-  componentDidMount () {
-    document.addEventListener('click', this.handleDocumentClick)
-    // Listen for dropdown events to prevent menu closing
-    document.addEventListener('ant-dropdown-show', this.handleDropdownShow)
-    document.addEventListener('ant-dropdown-hide', this.handleDropdownHide)
-  }
-
   componentWillUnmount () {
-    document.removeEventListener('click', this.handleDocumentClick)
-    document.removeEventListener('ant-dropdown-show', this.handleDropdownShow)
-    document.removeEventListener('ant-dropdown-hide', this.handleDropdownHide)
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout)
+    if (this.state.open) {
+      document.removeEventListener('click', this.handleDocumentClick)
     }
     // Clean up portal container
     if (this.portalContainer) {
@@ -61,19 +50,15 @@ export default class AddBtn extends Component {
     }
   }
 
-  handleDropdownShow = () => {
-    // Cancel any pending hide timeout when dropdown shows
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout)
-      this.hideTimeout = null
+  componentDidUpdate (prevProps, prevState) {
+    // Attach or detach document click listener only when menu open state changes
+    if (this.state.open && !prevState.open) {
+      document.addEventListener('click', this.handleDocumentClick)
+    } else if (!this.state.open && prevState.open) {
+      document.removeEventListener('click', this.handleDocumentClick)
     }
   }
 
-  handleDropdownHide = () => {
-    // Small delay after dropdown hides before allowing menu to close
-    // This prevents flicker when dropdown closes
-  }
-
   handleDocumentClick = (e) => {
     // Don't close menu when clicking inside menu or add button
     if (this.menuRef.current && this.menuRef.current.contains(e.target)) {
@@ -91,86 +76,6 @@ export default class AddBtn extends Component {
     this.setState({ open: false })
   }
 
-  handleMouseEnter = () => {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout)
-      this.hideTimeout = null
-    }
-
-    // Calculate menu position
-    if (this.addBtnRef.current) {
-      const rect = this.addBtnRef.current.getBoundingClientRect()
-      const windowWidth = window.innerWidth
-      const windowHeight = window.innerHeight
-
-      // Estimate menu width and height
-      const estimatedMenuWidth = Math.min(300, windowWidth - 40) // Responsive width
-      const estimatedMenuHeight = 400 // Rough estimate
-
-      // Calculate fixed position coordinates
-      let menuTop = rect.bottom + 4 // 4px margin
-      let menuLeft = rect.left
-      let menuPosition = 'right'
-
-      // Check if menu would overflow bottom of screen
-      if (menuTop + estimatedMenuHeight > windowHeight - 20) {
-        menuTop = rect.top - estimatedMenuHeight - 4 // Show above button
-      }
-
-      // If aligning right would cause overflow, align left instead
-      if (rect.left + estimatedMenuWidth > windowWidth - 20) {
-        menuPosition = 'left'
-        menuLeft = rect.right - estimatedMenuWidth
-      }
-
-      // If aligning left would cause overflow (negative position), force right
-      if (menuLeft < 20) {
-        menuPosition = 'right'
-        menuLeft = Math.max(20, rect.left) // Ensure at least 20px from edge
-      }
-
-      // Final check to ensure menu doesn't go off screen
-      if (menuLeft + estimatedMenuWidth > windowWidth - 20) {
-        menuLeft = windowWidth - estimatedMenuWidth - 20
-      }
-
-      this.setState({
-        open: true,
-        menuPosition,
-        menuTop,
-        menuLeft
-      })
-
-      if (!this.state.open) {
-        window.openTabBatch = this.props.batch
-      }
-    }
-  }
-
-  handleMouseLeave = () => {
-    this.hideTimeout = setTimeout(() => {
-      this.setState({ open: false })
-    }, 200)
-  }
-
-  handleMenuMouseEnter = () => {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout)
-      this.hideTimeout = null
-    }
-  }
-
-  handleMenuMouseLeave = () => {
-    // Don't close if there's an active input or dropdown
-    if (hasActiveInput()) {
-      return
-    }
-
-    this.hideTimeout = setTimeout(() => {
-      this.setState({ open: false })
-    }, 200)
-  }
-
   handleMenuScroll = (e) => {
     // Prevent scroll events from bubbling up
     e.stopPropagation()
@@ -212,8 +117,6 @@ export default class AddBtn extends Component {
           top: menuTop,
           left: menuLeft
         }}
-        onMouseEnter={this.handleMenuMouseEnter}
-        onMouseLeave={this.handleMenuMouseLeave}
         onScroll={this.handleMenuScroll}
       >
         <div
@@ -230,6 +133,59 @@ export default class AddBtn extends Component {
     )
   }
 
+  handleAddBtnClick = () => {
+    if (this.state.open) {
+      this.setState({ open: false })
+    } else {
+      // Calculate menu position and open the menu
+      if (this.addBtnRef.current) {
+        const rect = this.addBtnRef.current.getBoundingClientRect()
+        const windowWidth = window.innerWidth
+        const windowHeight = window.innerHeight
+
+        // Estimate menu width and height
+        const estimatedMenuWidth = Math.min(300, windowWidth - 40) // Responsive width
+        const estimatedMenuHeight = 400 // Rough estimate
+
+        // Calculate fixed position coordinates
+        let menuTop = rect.bottom + 4 // 4px margin
+        let menuLeft = rect.left
+        let menuPosition = 'right'
+
+        // Check if menu would overflow bottom of screen
+        if (menuTop + estimatedMenuHeight > windowHeight - 20) {
+          menuTop = rect.top - estimatedMenuHeight - 4 // Show above button
+        }
+
+        // If aligning right would cause overflow, align left instead
+        if (rect.left + estimatedMenuWidth > windowWidth - 20) {
+          menuPosition = 'left'
+          menuLeft = rect.right - estimatedMenuWidth
+        }
+
+        // If aligning left would cause overflow (negative position), force right
+        if (menuLeft < 20) {
+          menuPosition = 'right'
+          menuLeft = Math.max(20, rect.left) // Ensure at least 20px from edge
+        }
+
+        // Final check to ensure menu doesn't go off screen
+        if (menuLeft + estimatedMenuWidth > windowWidth - 20) {
+          menuLeft = windowWidth - estimatedMenuWidth - 20
+        }
+
+        this.setState({
+          open: true,
+          menuPosition,
+          menuTop,
+          menuLeft
+        })
+
+        window.openTabBatch = this.props.batch
+      }
+    }
+  }
+
   render () {
     const { empty, className } = this.props
     const { open } = this.state
@@ -246,9 +202,7 @@ export default class AddBtn extends Component {
         <PlusOutlined
           title={e('openNewTerm')}
           className={cls}
-          onClick={this.handleTabAdd}
-          onMouseEnter={this.handleMouseEnter}
-          onMouseLeave={this.handleMouseLeave}
+          onClick={this.handleAddBtnClick}
           ref={this.addBtnRef}
         />
         {open && createPortal(this.renderMenus(), this.getPortalContainer())}

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

@@ -3,8 +3,9 @@
   position fixed
   z-index 1000
   background var(--main)
-  border 1px solid var(--main-darker)
+  border 1px solid var(--main-lighter)
   border-radius 6px
+  box-shadow 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--main-darker)
   min-width 160px
   max-width 300px
   overflow-y auto

package/client/components/tabs/tab.jsx

@@ -4,7 +4,7 @@
 
 import { createRef } from 'react'
 import { Component } from 'manate/react/class-components'
-import { refs } from '../common/ref'
+import { refsTabs } from '../common/ref'
 import {
   CloseOutlined,
   Loading3QuartersOutlined,
@@ -36,22 +36,13 @@ class Tab extends Component {
       terminalOnData: false
     }
     this.id = 'tab-' + this.props.tab.id
-    refs.add(this.id, this)
+    refsTabs.add(this.id, this)
   }
 
   tabRef = createRef()
 
-  componentDidUpdate (prevProps) {
-    if (this.props.openContextMenu && !prevProps.openContextMenu) {
-      this.handleContextMenu()
-    }
-    if (this.props.contextFunc && !prevProps.contextFunc) {
-      this[this.props.contextFunc](...this.props.contextArgs)
-    }
-  }
-
   componentWillUnmount () {
-    refs.remove(this.id)
+    refsTabs.remove(this.id)
     clearTimeout(this.timer)
     this.timer = null
   }

package/client/components/tabs/tabs.styl

@@ -106,16 +106,17 @@
 .is-terminal-active .tab-terminal-feed
   display block
   animation blink 2s infinite
+  background-color transparent !important
   /* Remove opacity animation, use background-color */
 .tab-terminal-feed
   display none
   left 20px
   border-radius 0
   color var(--success)
-  background none
   font-size 8px
   left 2px
   top 24px
+  background none
 .tab-close
   position absolute
   right 5px
@@ -131,8 +132,7 @@
   line-height 16px
   font-size 10px
   &:hover
-    background var(--primary)
-    color var(--primary-contast)
+    background var(--error)
 
 .tabs-add-btn
   display inline-block

package/client/components/text-editor/simple-editor.jsx

@@ -84,6 +84,13 @@ export default function SimpleEditor (props) {
       e.preventDefault()
     }
     findMatches()
+    goToNextMatch()
+  }
+
+  function handleChange (e) {
+    setSearchKeyword(e.target.value)
+    findMatches()
+    goToNextMatch()
   }
 
   // Navigate to next match
@@ -144,7 +151,7 @@ export default function SimpleEditor (props) {
       <Flex className='mg1b' justify='space-between'>
         <Input.Search
           value={searchKeyword}
-          onChange={e => setSearchKeyword(e.target.value)}
+          onChange={handleChange}
           placeholder='Search in text...'
           allowClear
           enterButton={<SearchOutlined />}

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

@@ -1,7 +1,13 @@
 import { useRef, useState } from 'react'
 import { Button, Input, message, Upload, Form, Space } from 'antd'
-import { convertTheme, convertThemeToText, exportTheme, validThemeProps, requiredThemeProps } from '../../common/terminal-theme'
-import { defaultTheme, defaultThemeLight } from '../../common/constants'
+import {
+  convertTheme,
+  convertThemeToText,
+  exportTheme,
+  validThemeProps,
+  requiredThemeProps
+} from '../../common/terminal-theme'
+import { defaultTheme, defaultThemeLight } from '../../common/theme-defaults'
 import generate from '../../common/uid'
 import Link from '../common/external-link'
 import InputAutoFocus from '../common/input-auto-focus'
@@ -229,7 +235,7 @@ export default function ThemeForm (props) {
     themeName,
     themeText: convertThemeToText(props.formData)
   }
-  const isDefaultTheme = id === defaultTheme.id || id === defaultThemeLight.id
+  const isDefaultTheme = id === defaultTheme().id || id === defaultThemeLight().id
   const disabled = readonly || isDefaultTheme
   const switchTxt = editor === 'theme-editor-txt' ? e('editWithColorPicker') : e('editWithTextEditor')
   const pickerProps = {

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

@@ -12,7 +12,7 @@ import {
 } from '@ant-design/icons'
 import { Tag, Tooltip, Button, Space } from 'antd'
 import classnames from 'classnames'
-import { defaultTheme } from '../../common/constants'
+import { defaultTheme } from '../../common/theme-defaults'
 import highlight from '../common/highlight'
 import isColorDark from '../../common/is-color-dark'
 
@@ -138,7 +138,7 @@ export default function ThemeListItem (props) {
       active: activeItemId === id
     }
   )
-  let title = id === defaultTheme.id
+  let title = id === defaultTheme().id
     ? e(id)
     : name
   title = highlight(
@@ -160,7 +160,7 @@ export default function ThemeListItem (props) {
         {renderTag()}{title}
       </div>
       {
-        id === defaultTheme.id || type === 'iterm'
+        id === defaultTheme().id || type === 'iterm'
           ? null
           : props.renderDelBtn(item)
       }

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

@@ -7,7 +7,8 @@ import { LoadingOutlined, CheckCircleOutlined } from '@ant-design/icons'
 import { pick } from 'lodash-es'
 import { Pagination } from 'antd'
 import ThemeListItem from './theme-list-item'
-import { defaultTheme, settingMap } from '../../common/constants'
+import { settingMap } from '../../common/constants'
+import { defaultTheme } from '../../common/theme-defaults'
 import getInitItem from '../../common/init-setting-item'
 import './terminal-theme-list.styl'
 
@@ -48,7 +49,7 @@ export default class ThemeList extends List {
       return null
     }
     const { name, id } = item
-    const title = id === defaultTheme.id
+    const title = id === defaultTheme().id
       ? e(id)
       : name
     return (

package/client/store/common.js

@@ -326,6 +326,10 @@ export default Store => {
     return aiConfigsArr.slice(0, -1).some(k => !window.store.config[k])
   }
 
+  Store.prototype.clearHistory = function () {
+    window.store.history = []
+  }
+
   Store.prototype.addCmdHistory = action(function (cmd) {
     const { terminalCommandHistory } = window.store
     terminalCommandHistory.add(cmd)

package/client/store/init-state.js

@@ -24,7 +24,6 @@ import {
   splitMap,
   cmdHistoryKey
 } from '../common/constants'
-import { buildDefaultThemes } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
 import { exclude } from 'manate'
 import initSettingItem from '../common/init-setting-item'
@@ -61,9 +60,7 @@ export default () => {
     profiles: [],
     bookmarkGroups: getDefaultBookmarkGroups([]),
     _config: {},
-    terminalThemes: [
-      buildDefaultThemes()
-    ],
+    terminalThemes: [],
     itermThemes: exclude([]),
     currentBookmarkGroupId: defaultBookmarkGroupId,
     expandedKeys: ls.getItemJSON(expandedKeysLsKey, [

package/client/store/load-data.js

@@ -181,7 +181,6 @@ export default (Store) => {
       })
     ext.lastDataUpdateTime = await getData('lastDataUpdateTime') || 0
     Object.assign(store, ext)
-    store.checkDefaultTheme()
     store.loadFontList()
     store.fetchItermThemes()
     store.openInitSessions()

package/client/store/sidebar.js

@@ -26,10 +26,6 @@ export default Store => {
     store.pinned = current
   }
 
-  Store.prototype.onClickBookmark = function () {
-    window.store.onNewSsh()
-  }
-
   Store.prototype.handleSidebarPanelTab = function (tab) {
     window.store.sidebarPanelTab = tab
   }

package/client/store/store.js

@@ -40,7 +40,7 @@ import createTitle from '../common/create-title'
 import {
   theme
 } from 'antd'
-import { refs } from '../components/common/ref'
+import { refsTabs } from '../components/common/ref'
 
 class Store {
   constructor () {
@@ -79,7 +79,7 @@ class Store {
     const {
       activeTabId
     } = this
-    const tab = refs.get('tab-' + activeTabId)
+    const tab = refsTabs.get('tab-' + activeTabId)
     if (!tab) {
       return null
     }

package/client/store/tab.js

@@ -9,7 +9,7 @@ import {
   paneMap,
   maxHistory
 } from '../common/constants'
-import { refs } from '../components/common/ref'
+import { refs, refsTabs } from '../components/common/ref'
 import { message } from 'antd'
 import * as ls from '../common/safe-local-storage'
 import deepCopy from 'json-deep-copy'
@@ -571,7 +571,7 @@ export default Store => {
   })
 
   Store.prototype.notifyTabOnData = function (tabId) {
-    const tab = refs.get('tab-' + tabId)
+    const tab = refsTabs.get('tab-' + tabId)
     if (tab) {
       tab.notifyOnData()
     }

package/client/store/terminal-theme.js

@@ -2,21 +2,26 @@
  * theme related functions
  */
 
-import { message } from 'antd'
-import { isEqual } from 'lodash-es'
 import {
-  defaultTheme,
-  settingMap,
-  defaultThemeLight
+  settingMap
 } from '../common/constants'
-import copy from 'json-deep-copy'
 import { convertTheme } from '../common/terminal-theme'
-
-const e = window.translate
+import {
+  defaultTheme,
+  defaultThemeLight
+} from '../common/theme-defaults'
 
 export default Store => {
   Store.prototype.getTerminalThemes = function () {
-    return window.store.getItems(settingMap.terminalThemes)
+    const t1 = defaultTheme()
+    const t2 = defaultThemeLight()
+    return [
+      t1,
+      t2,
+      ...window.store.getItems(settingMap.terminalThemes).filter(d => {
+        return d && d.id !== t1.id && d.id !== t2.id
+      })
+    ]
   }
 
   Store.prototype.setTheme = function (id) {
@@ -47,14 +52,16 @@ export default Store => {
 
   Store.prototype.fixThemes = function (themes) {
     return themes.map(t => {
-      const isDefaultTheme = t.id === defaultTheme.id
-      const isDefaultThemeLight = t.id === defaultThemeLight.id
+      const d1 = defaultTheme()
+      const d2 = defaultThemeLight()
+      const isDefaultTheme = t.id === d1.id
+      const isDefaultThemeLight = t.id === d2.id
       if (isDefaultTheme) {
-        Object.assign(t, defaultTheme)
+        Object.assign(t, d1)
       } else if (isDefaultThemeLight) {
-        Object.assign(t, defaultThemeLight)
+        Object.assign(t, d2)
       } else if (!t.uiThemeConfig) {
-        t.uiThemeConfig = copy(defaultTheme.uiThemeConfig)
+        t.uiThemeConfig = d1.uiThemeConfig
       }
       return t
     })
@@ -78,33 +85,4 @@ export default Store => {
       })
     )
   }
-
-  Store.prototype.checkDefaultTheme = async function (terminalThemes) {
-    const { store } = window
-    const themeId = defaultTheme.id
-    const currentDefaultTheme = store.terminalThemes.find(d => d.id === themeId)
-    if (
-      currentDefaultTheme &&
-      (
-        !isEqual(currentDefaultTheme.themeConfig, defaultTheme.themeConfig) || !isEqual(currentDefaultTheme.uiThemeConfig, defaultTheme.uiThemeConfig) ||
-        currentDefaultTheme.name !== defaultTheme.name
-      )
-    ) {
-      store.editTheme(
-        themeId,
-        {
-          name: defaultTheme.name,
-          themeConfig: defaultTheme.themeConfig,
-          uiThemeConfig: defaultTheme.uiThemeConfig
-        }
-      )
-      message.info(
-        `${e('default')} ${e('themeConfig')} ${e('updated')}`
-      )
-    }
-    const hasLightTheme = store.getTerminalThemes().find(d => d.id === defaultThemeLight.id)
-    if (!hasLightTheme) {
-      store.addTheme(defaultThemeLight)
-    }
-  }
 }

package/client/store/ui-theme.js

@@ -3,9 +3,12 @@
  */
 
 import {
-  defaultTheme,
   settingMap
 } from '../common/constants'
+import {
+  defaultTheme
+} from '../common/theme-defaults'
+
 import copy from 'json-deep-copy'
 
 export default Store => {
@@ -15,6 +18,6 @@ export default Store => {
       .find(d => d.id === store.config.theme)
     return theme && theme.uiThemeConfig
       ? copy(theme.uiThemeConfig)
-      : defaultTheme.uiThemeConfig
+      : defaultTheme().uiThemeConfig
   }
 }

package/package.json

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

package/client/common/db-defaults.js

@@ -1,123 +0,0 @@
-/**
- * database default should init
- */
-
-function parsor (themeTxt) {
-  return themeTxt.split('\n').reduce((prev, line) => {
-    let [key = '', value = ''] = line.split('=')
-    key = key.trim()
-    value = value.trim()
-    if (!key || !value) {
-      return prev
-    }
-    prev[key] = value
-    return prev
-  }, {})
-}
-
-const defaultTheme = parsor(`
-  main = #141314
-  main-dark = #000
-  main-light = #2E3338
-  text = #ddd
-  text-light = #fff
-  text-dark = #888
-  text-disabled = #777
-  primary = #08c
-  info = #FFD166
-  success = #06D6A0
-  error = #EF476F
-  warn = #E55934
-`)
-const defaultThemeLight = parsor(`
-  main=#ededed
-  main-dark=#cccccc
-  main-light=#fefefe
-  text=#555
-  text-light=#777
-  text-dark=#444
-  text-disabled=#888
-  primary=#08c
-  info=#FFD166
-  success=#06D6A0
-  error=#EF476F
-  warn=#E55934
-`)
-const defaultThemeLightTerminal = parsor(`
-foreground=#333333
-background=#ededed
-cursor=#b5bd68
-cursorAccent=#1d1f21
-selectionBackground=rgba(0, 0, 0, 0.3)
-black=#575757
-red=#FF2C6D
-green=#19f9d8
-yellow=#FFB86C
-blue=#45A9F9
-magenta=#FF75B5
-cyan=#B084EB
-white=#CDCDCD
-brightBlack=#757575
-brightRed=#FF2C6D
-brightGreen=#19f9d8
-brightYellow=#FFCC95
-brightBlue=#6FC1FF
-brightMagenta=#FF9AC1
-brightCyan=#BCAAFE
-brightWhite=#E6E6E6
-`)
-
-const defaultThemeTerminal = {
-  foreground: '#bbbbbb',
-  background: '#141314',
-  cursor: '#b5bd68',
-  cursorAccent: '#1d1f21',
-  selectionBackground: 'rgba(255, 255, 255, 0.3)',
-  black: '#575757',
-  red: '#FF2C6D',
-  green: '#19f9d8',
-  yellow: '#FFB86C',
-  blue: '#45A9F9',
-  magenta: '#FF75B5',
-  cyan: '#B084EB',
-  white: '#CDCDCD',
-  brightBlack: '#757575',
-  brightRed: '#FF2C6D',
-  brightGreen: '#19f9d8',
-  brightYellow: '#FFCC95',
-  brightBlue: '#6FC1FF',
-  brightMagenta: '#FF9AC1',
-  brightCyan: '#BCAAFE',
-  brightWhite: '#E6E6E6'
-}
-
-export default [
-  {
-    db: 'terminalThemes',
-    data: [
-      {
-        _id: 'default',
-        name: 'default',
-        themeConfig: defaultThemeTerminal,
-        uiThemeConfig: defaultTheme
-      },
-      {
-        _id: 'defaultLight',
-        name: 'default light',
-        themeConfig: defaultThemeLightTerminal,
-        uiThemeConfig: defaultThemeLight
-      }
-    ]
-  },
-  {
-    db: 'bookmarkGroups',
-    data: [
-      {
-        _id: 'default',
-        title: 'default',
-        bookmarkIds: [],
-        bookmarkGroupIds: []
-      }
-    ]
-  }
-]