@electerm/electerm-react 5.5.15 → 5.5.25

package/README.md

@@ -16,7 +16,7 @@ This is react components pack for electerm sub projects
 
 Open-sourced terminal/ssh/sftp/telnet/serialport/RDP/VNC/Spice/ftp client(Linux, Mac, Windows, Android, HarmonyOS, iOS).
 
-Besides mainstream Windows/macOS/Linux/Android, electerm also supports HarmonyOS, iOS, and older systems — Ubuntu 18, Windows 7, macOS 10+, and special Chinese Linux distributions such as UOS, Kylin, and LoongArch (both old-world and new-world).
+Besides mainstream Windows/macOS/Linux/Android, electerm also supports HarmonyOS, iOS, and older systems — Ubuntu 18, Windows 7, macOS 10+, and special Chinese Linux distributions such as UOS, Kylin, and LoongArch (both old-world and new-world), as well as RISC-V (riscv64) and PowerPC 64-bit little-endian (ppc64le) Linux.
 
 <p>
   <a href="https://electerm.org">Homepage / Downloads</a> ·
@@ -49,6 +49,16 @@ Besides mainstream Windows/macOS/Linux/Android, electerm also supports HarmonyOS
 
 ----
 
+<div align="center">
+  <a href="https://fluxionai.world/register?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm">
+    <img src="https://github.com/electerm/electerm-resource/blob/master/static/images/fluxionai.png?raw=true" alt="FluxionAI" height="180" />
+  </a>
+</div>
+
+[Fluxion AI](https://fluxionai.world/register?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm) — One gateway to the world's leading AI models. [Sign up here to get started](https://fluxionai.world/register?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm).
+
+----
+
 <div align="center">
   <br />
   <br />
@@ -86,7 +96,7 @@ Thanks to APIMart for sponsoring electerm! APIMart is a low-cost API platform fo
 ## Features
 
 - Works as a terminal/file manager, ssh/sftp/ftp/telnet/serialport/RDP/VNC/Spice client
-- Support Window 7+(X64/ARM64), HarmonyOS，Android, iOS, Mac OS 10.15+(x64/arm64), Linux(x64/arm64/Loong64 new world & old world), even old Linux with glibc 2.17+ like UOS/Kylin/Ubuntu 18.04 etc
+- Support Window 7+(X64/ARM64), HarmonyOS，Android, iOS, Mac OS 10.15+(x64/arm64), Linux(x64/arm64/riscv64/ppc64le/Loong64 new world & old world), even old Linux with glibc 2.17+ like UOS/Kylin/Ubuntu 18.04 etc
 - Global hotkey to toggle window visibility (similar to guake, default is `ctrl + 2`)
 - 🇺🇸 🇨🇳 🇧🇷 🇷🇺 🇪🇸 🇫🇷 🇹🇷 🇭🇰 🇯🇵 🇸🇦 🇩🇪 🇰🇷 🇮🇩 🇵🇱 Multi-language support([electerm-locales](https://github.com/electerm/electerm-locales), contributions/fixes welcome)
 - Double click to directly edit (small) remote files.

package/client/common/constants.js

@@ -2,6 +2,7 @@
  * constants
  */
 import { isMacJs } from './platform.js'
+import { defaultThemeId, defaultThemeLightId } from './theme-defaults.js'
 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'
@@ -156,6 +157,7 @@ export const leftSideBarOpenKey = 'left-side-bar-open'
 export const pinnedQuickCommandBarKey = 'pinned-quick-command-bar'
 export const leftSidePanelWidthKey = 'left-sidebar-width'
 export const rightSidebarWidthKey = 'right-sidebar-width'
+export const rightPanelPinnedKey = 'right-panel-pinned'
 export const addPanelWidthLsKey = 'addPanelWidth'
 export const sftpDefaultSortSettingKey = 'sftp-default-sort'
 export const qmSortByFrequencyKey = 'qm-sort-by-frequency'
@@ -241,6 +243,18 @@ export const settingShortcutsId = 'setting-shortcuts'
 export const settingAiId = 'setting-ai'
 export const settingCommonId = 'setting-common'
 export const settingPasswordsId = 'setting-passwords'
+// Built in items the user is not allowed to delete: the two settings tabs,
+// the default bookmark group and the two built in terminal themes.
+// Keep this an explicit id list. A prefix test like `id.startsWith('default')`
+// would also cover user facing seeds (default quick commands, default local
+// terminal bookmarks) that the user must be able to remove.
+export const undeletableIds = new Set([
+  settingSyncId,
+  settingCommonId,
+  defaultBookmarkGroupId,
+  defaultThemeId,
+  defaultThemeLightId
+])
 // settings that only apply to the desktop (electron) app,
 // hidden when window.et.isWebApp is true
 export const webAppHiddenSettings = [

package/client/common/default-setting.js

@@ -78,8 +78,8 @@ export default {
   hideIP: false,
   dataSyncSelected: 'all',
   nameAI: '',
-  baseURLAI: 'https://api.atlascloud.ai/v1',
-  modelAI: 'deepseek-chat',
+  baseURLAI: 'https://fluxionai.world/v1',
+  modelAI: 'deepseek-v4-flash-0731',
   roleAI: '终端专家,提供不同系统下命令,简要解释用法,用markdown格式',
   apiPathAI: '/chat/completions',
   proxyAI: '',

package/client/common/parse-vv.js

@@ -0,0 +1,313 @@
+/**
+ * .vv connection file parser (virt-viewer / remote-viewer)
+ *
+ * A .vv file is an INI document with a mandatory [virt-viewer] group and a
+ * mandatory `type` key. Everything SPICE-related lives directly in
+ * [virt-viewer] -- there is NO [spice] group. An optional [ovirt] group
+ * carries oVirt REST integration data.
+ *
+ * Behaviour is deliberately matched against:
+ *   - src/virt-viewer-file.c  (gitlab.com/virt-viewer/virt-viewer)
+ *   - remote-viewer(1), "CONNECTION FILE" section
+ *
+ * Rejection rules copied from virt_viewer_file_new():
+ *   no [virt-viewer] group  -> invalid file
+ *   no `type` key           -> invalid file
+ *   unknown keys/groups     -> kept, never an error (the format is
+ *                              extensible; the convention is an `x-` prefix)
+ *
+ * Keep in sync with src/client/common/parse-vv.js -- the two differ only in
+ * the export statement (see sanitize-filename.js for the same pattern).
+ */
+
+const MAIN_GROUP = 'virt-viewer'
+const OVIRT_GROUP = 'ovirt'
+
+/**
+ * .vv key -> bookmark field understood by
+ * src/client/components/bookmark-form/config/spice.js
+ */
+const FIELD_MAP = {
+  host: 'host',
+  port: 'port',
+  password: 'password',
+  title: 'title',
+  proxy: 'proxy'
+}
+
+/**
+ * Keys the .vv format defines but electerm cannot honour for a spice session.
+ * Each becomes a user-visible note instead of being dropped silently.
+ */
+const UNSUPPORTED = {
+  'tls-port': 'TLS is not supported (electerm makes a plain TCP connection)',
+  'tls-ciphers': 'TLS is not supported',
+  ca: 'TLS certificate verification is not supported',
+  'host-subject': 'TLS certificate verification is not supported',
+  'unix-path': 'Unix-socket transport is not supported',
+  username: 'spice sessions authenticate with the password only',
+  'disable-channels': 'spice channel selection is not supported',
+  'secure-channels': 'spice channel selection is not supported',
+  'color-depth': 'colour depth is negotiated with the server',
+  'disable-effects': 'remote desktop-effect control is not supported',
+  'enable-smartcard': 'smartcard redirection is not supported',
+  'enable-usbredir': 'USB redirection is not supported',
+  'enable-usb-autoshare': 'USB redirection is not supported',
+  'usb-filter': 'USB redirection is not supported',
+  'usb-redirect-on-connect': 'USB redirection is not supported',
+  fullscreen: 'fullscreen is a session-time toggle',
+  version: 'client version requirements are not enforced',
+  versions: 'client version requirements are not enforced',
+  'newer-version-url': 'client version requirements are not enforced',
+  'toggle-fullscreen': 'hotkey rebinding is not supported',
+  'release-cursor': 'hotkey rebinding is not supported',
+  'secure-attention': 'hotkey rebinding is not supported',
+  'zoom-in': 'hotkey rebinding is not supported',
+  'zoom-out': 'hotkey rebinding is not supported',
+  'zoom-reset': 'hotkey rebinding is not supported',
+  'smartcard-insert': 'hotkey rebinding is not supported',
+  'smartcard-remove': 'hotkey rebinding is not supported',
+  'usb-device-reset': 'hotkey rebinding is not supported'
+}
+
+const BOOL_TRUE = new Set(['1', 'true', 'yes', 'on'])
+
+function stripBom (text) {
+  return text.charCodeAt(0) === 0xfeff ? text.slice(1) : text
+}
+
+function isComment (line) {
+  return line.startsWith('#') || line.startsWith(';')
+}
+
+/**
+ * Parse INI text into { groupName: { key: value } }.
+ *
+ * GKeyFile itself is case-sensitive; group and key names are lowercased on
+ * purpose, because hand-written .vv files are inconsistent about casing and
+ * the alternative is a confusing "host not set" for a file that clearly
+ * sets `Host=`.
+ *
+ * A trailing backslash continues the value on the next line (GKeyFile rule).
+ *
+ * @param {string} text
+ * @returns {Object} groups
+ */
+function parseIni (text) {
+  const groups = {}
+  let group = null
+  const lines = stripBom(text).split(/\r\n|\r|\n/)
+
+  for (let i = 0; i < lines.length; i++) {
+    let line = lines[i]
+
+    while (/\\[ \t]*$/.test(line) && i + 1 < lines.length) {
+      line = line.replace(/\\[ \t]*$/, '') + lines[++i]
+    }
+
+    const trimmed = line.trim()
+    if (!trimmed || isComment(trimmed)) {
+      continue
+    }
+
+    const groupMatch = trimmed.match(/^\[(.+)\]$/)
+    if (groupMatch) {
+      group = groupMatch[1].trim().toLowerCase()
+      if (!groups[group]) {
+        groups[group] = {}
+      }
+      continue
+    }
+
+    const eq = line.indexOf('=')
+    if (eq < 0 || !group) {
+      continue
+    }
+
+    const key = line.slice(0, eq).trim().toLowerCase()
+    // Only leading whitespace is stripped. A trailing space is significant
+    // for values such as passwords, so it is preserved.
+    const value = line.slice(eq + 1).replace(/^[ \t]+/, '')
+    if (key) {
+      groups[group][key] = value
+    }
+  }
+
+  return groups
+}
+
+/**
+ * Parse the contents of a .vv file.
+ *
+ * @param {string} text - raw contents of a .vv file
+ * @returns {{
+ *   ok: boolean, error: string|null, type: string|null,
+ *   fields: Object, applied: Array, ignored: Array,
+ *   unknown: Array, warnings: string[], deleteThisFile: boolean,
+ *   groups: Object
+ * }}
+ */
+function parseVv (text) {
+  const result = {
+    ok: false,
+    error: null,
+    type: null,
+    fields: {},
+    applied: [],
+    ignored: [],
+    unknown: [],
+    warnings: [],
+    deleteThisFile: false,
+    groups: {}
+  }
+
+  if (typeof text !== 'string' || !text.trim()) {
+    result.error = 'empty file'
+    return result
+  }
+
+  let groups
+  try {
+    groups = parseIni(text)
+  } catch (e) {
+    result.error = 'cannot parse file: ' + e.message
+    return result
+  }
+  result.groups = groups
+
+  const main = groups[MAIN_GROUP]
+  if (!main) {
+    result.error = 'invalid .vv file: missing [' + MAIN_GROUP + '] group'
+    return result
+  }
+
+  const type = (main.type || '').trim().toLowerCase()
+  if (!type) {
+    result.error = 'invalid .vv file: missing "type" key in [' + MAIN_GROUP + ']'
+    return result
+  }
+  result.type = type
+  if (type !== 'spice') {
+    result.error = 'unsupported session type "' + type + '": spice only'
+    return result
+  }
+
+  Object.keys(FIELD_MAP).forEach(key => {
+    if (!(key in main)) {
+      return
+    }
+    const raw = main[key]
+    const field = FIELD_MAP[key]
+
+    if (key === 'port') {
+      const port = parseInt(raw.trim(), 10)
+      if (!Number.isInteger(port) || port < 1 || port > 65535) {
+        result.warnings.push('ignoring invalid port "' + raw.trim() + '"')
+        return
+      }
+      result.fields.port = port
+    } else if (key === 'password') {
+      result.fields.password = raw
+    } else {
+      const value = raw.trim()
+      if (!value) {
+        result.warnings.push('ignoring empty "' + key + '"')
+        return
+      }
+      result.fields[field] = value
+    }
+    result.applied.push({ key, value: raw, field })
+  })
+
+  if (!result.fields.host) {
+    result.error = 'no usable host: [virt-viewer] has no "host" key'
+    return result
+  }
+
+  // A file that only offers a TLS port has nothing we can dial, because the
+  // spice transport here is plain TCP (see src/app/server/spice-proxy.js).
+  if (main['tls-port'] && !('port' in main)) {
+    result.warnings.push(
+      'this file defines only tls-port, and TLS is not supported here, ' +
+        'so there is no plain port to connect to'
+    )
+  }
+
+  // delete-this-file=1 makes remote-viewer unlink the file after loading it
+  // (unless VIRT_VIEWER_KEEP_FILE is set). We never delete the user's file;
+  // surface it instead so the caller can decide.
+  if ('delete-this-file' in main) {
+    result.deleteThisFile = BOOL_TRUE.has(
+      main['delete-this-file'].trim().toLowerCase()
+    )
+    if (result.deleteThisFile) {
+      result.warnings.push(
+        'the file is marked delete-this-file=1; it was NOT deleted'
+      )
+    }
+  }
+
+  Object.keys(main).forEach(key => {
+    if (key === 'type' || key === 'delete-this-file' || key in FIELD_MAP) {
+      return
+    }
+    const value = main[key]
+    if (key in UNSUPPORTED) {
+      result.ignored.push({ key, value, reason: UNSUPPORTED[key] })
+    } else {
+      result.unknown.push({ key, value })
+    }
+  })
+
+  if (groups[OVIRT_GROUP]) {
+    result.ignored.push({
+      key: '[' + OVIRT_GROUP + ']',
+      value: Object.keys(groups[OVIRT_GROUP]).join(', '),
+      reason: 'oVirt REST integration is not supported'
+    })
+  }
+
+  if (result.ignored.length) {
+    result.warnings.push(
+      result.ignored.length +
+        ' option(s) in this file are not supported and were skipped'
+    )
+  }
+
+  result.ok = true
+  return result
+}
+
+/**
+ * Turn a parse result into a one-line summary for a UI hint.
+ *
+ * @param {Object} parsed - result of parseVv
+ * @returns {string}
+ */
+function describeVv (parsed) {
+  if (!parsed || !parsed.ok) {
+    return (parsed && parsed.error) || 'invalid .vv file'
+  }
+  const { host, port, title, proxy } = parsed.fields
+  const bits = ['spice://' + host + (port ? ':' + port : '')]
+  if (title) {
+    bits.push('"' + title + '"')
+  }
+  if (proxy) {
+    bits.push('via ' + proxy)
+  }
+  if (parsed.ignored.length) {
+    bits.push(parsed.ignored.length + ' option(s) skipped')
+  }
+  return bits.join(' ')
+}
+
+export {
+  parseVv,
+  parseIni,
+  describeVv,
+  MAIN_GROUP,
+  OVIRT_GROUP,
+  FIELD_MAP,
+  UNSUPPORTED
+}

package/client/common/theme-defaults.js

@@ -101,9 +101,12 @@ const defaultThemeDarkTerminal = () => {
   }
 }
 
+export const defaultThemeId = 'default'
+export const defaultThemeLightId = 'defaultLight'
+
 export function defaultTheme () {
   return {
-    id: 'default',
+    id: defaultThemeId,
     name: 'default',
     themeConfig: defaultThemeDarkTerminal(),
     uiThemeConfig: defaultThemeDark()
@@ -112,7 +115,7 @@ export function defaultTheme () {
 
 export function defaultThemeLight () {
   return {
-    id: 'defaultLight',
+    id: defaultThemeLightId,
     name: 'default light',
     themeConfig: defaultThemeLightTerminal(),
     uiThemeConfig: defaultThemeLightFunc()

package/client/common/update-check.js

@@ -23,7 +23,7 @@ async function fetchData (url, options) {
 
 function getInfo (url) {
   const n = Date.now()
-  const tail = url.includes('?') ? '' : '?_=' + n
+  const tail = url.includes('?') ? '&_=' + n : '?_=' + n
   return fetchData(url + tail, {
     action: 'get-update-info',
     headers: {
@@ -87,16 +87,17 @@ export function getDownloadUrl (browserDownloadUrl, mirror) {
 }
 
 export async function getLatestReleaseInfo () {
-  let url = `${baseUpdateCheckUrls[0]}/data/electerm-github-release.json`
+  const { installSrc } = window.store
+  const src = installSrc ? '?src=' + encodeURIComponent(installSrc) : ''
+  let url = `${baseUpdateCheckUrls[0]}/data/electerm-github-release.json${src}`
   let res = await getInfo(url)
   if (!res?.release?.body) {
-    url = `${baseUpdateCheckUrls[1]}/data/electerm-github-release.json`
+    url = `${baseUpdateCheckUrls[1]}/data/electerm-github-release.json${src}`
     res = await getInfo(url)
   }
   if (!res || !res.release) {
     return undefined
   }
-  const { installSrc } = window.store
   const asset = (res.release.assets || []).find(r => r.name.includes(installSrc))
   return {
     body: res.release.body,

package/client/components/ai/ai-presets.js

@@ -1,4 +1,13 @@
 export const defaultAIPresets = [
+  {
+    id: 'fluxionai',
+    nameAI: 'FluxionAI',
+    baseURLAI: 'https://fluxionai.world/v1',
+    apiPathAI: '/chat/completions',
+    modelAI: 'deepseek-v4-flash-0731',
+    authHeaderNameAI: 'Authorization: Bearer',
+    siteUrl: 'https://fluxionai.world/register?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm'
+  },
   {
     id: 'atlascloud',
     nameAI: 'AtlasCloud',
@@ -166,8 +175,10 @@ export const defaultAIPresets = [
 
 export function getAIPresets () {
   const presets = [...defaultAIPresets]
-  if (window.et?.defaultAIPreset) {
-    presets.unshift(window.et.defaultAIPreset)
+  const customPreset = window.et?.defaultAIPreset
+  if (customPreset) {
+    // keep the first preset (sponsor) on top, insert after it
+    presets.splice(1, 0, customPreset)
   }
   return presets
 }

package/client/components/bg/css-overwrite.jsx

@@ -93,10 +93,25 @@ async function createStyleForTab (tab, props) {
         'background-image: none'
       )
     }
-  } else if (st !== 'none') {
+  } else if (st === 'none') {
+    // The [🚫] opt-out must be spelled out: this rule has a higher specificity
+    // than the global one, but an empty declaration block would still let the
+    // built-in default bg painted by createGlobalStyle show through.
+    styles.push('background-image: none')
+  } else {
     styles.push(
       `background-image: ${st}`,
       'background-position: center',
+      // createGlobalStyle's built-in default bg rule carries an auto-fit
+      // `background-size` (so the 766px wide watermark is not cropped on
+      // narrow panes), and for the active tab it targets this very same
+      // ::before. `background-size` is not reset by a rule that only sets
+      // `background-image`, so it would leak onto the user's image and scale
+      // it down to at most 766px, centred — a big image that used to fill the
+      // pane would no longer cover it. Stating the initial value keeps user
+      // images at their natural size, which is what they rendered at before
+      // the auto-fit was introduced.
+      'background-size: auto',
       `filter: ${createFilterStyle(props, tab)}`
     )
   }

package/client/components/bookmark-form/common/fields.jsx

@@ -20,6 +20,7 @@ import TriggersField from '../../triggers/triggers-field.jsx'
 import ProfileItem from './profile-item.jsx'
 import renderRunScripts from './run-scripts.jsx'
 import SerialPathSelector from './serial-path-selector.jsx'
+import VvFileField from './vv-file-field.jsx'
 import SshHostSelector from './ssh-host-selector.jsx'
 import SshAuthTypeSelector from './ssh-auth-type-selector.jsx'
 import SshAuthSelector from './ssh-auth-selector.jsx'
@@ -150,6 +151,8 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
       )
     case 'proxy':
       return <ProxyField key={name} bookmarks={ctxProps.bookmarks} />
+    case 'vvFile':
+      return <VvFileField key={name} form={form} />
     case 'x11':
       return <X11Field key={name} form={form} />
     case 'sshTunnels':

package/client/components/bookmark-form/common/vv-file-field.jsx

@@ -0,0 +1,137 @@
+/**
+ * bookmark form - load a .vv (virt-viewer) connection file
+ *
+ * Registered as field type 'vvFile' in ./fields.jsx and used by
+ * ../config/spice.js. Fills host/port/password/title/proxy from the file and
+ * reports anything it could not honour instead of dropping it silently.
+ */
+import { useState } from 'react'
+import {
+  Form,
+  Button,
+  Alert
+} from 'antd'
+import { FileAddOutlined } from '@ant-design/icons'
+import fs from '../../../common/fs'
+import { tailFormItemLayout } from '../../../common/form-layout'
+import { parseVv, describeVv } from '../../../common/parse-vv'
+
+const FormItem = Form.Item
+
+/**
+ * window.translate echoes an unknown key back capitalised, so an unmapped
+ * 'loadVvFile' would render as "LoadVvFile". The key IS in
+ * ~/dev/electerm-locales, but the app consumes the published
+ * @electerm/electerm-locales, so it stays unknown until that ships and the dep
+ * is bumped. Fall back to the literal, which is what en_us resolves to anyway
+ * (capitalizeFirstLetter('load .vv file')), so nothing changes visually when
+ * the translation does land.
+ */
+function vvLabel () {
+  const t = window.translate('loadVvFile')
+  return t === 'LoadVvFile' ? 'Load .vv file' : t
+}
+
+/**
+ * Open the native file dialog, filtered to .vv files.
+ * window.api.openDialog is dialog.showOpenDialogSync in the main process
+ * (see src/app/lib/ipc.js), so the full Electron options object is accepted.
+ * @returns {Promise<string|null>} selected path, or null when cancelled
+ */
+async function pickVvFile () {
+  const files = await window.api.openDialog({
+    title: 'Choose a .vv connection file',
+    message: 'Choose a .vv connection file',
+    properties: [
+      'openFile',
+      'showHiddenFiles',
+      'noResolveAliases',
+      'treatPackageAsDirectory',
+      'dontAddToRecent'
+    ],
+    filters: [
+      { name: 'Virt Viewer connection file', extensions: ['vv'] },
+      { name: 'All files', extensions: ['*'] }
+    ]
+  }).catch(() => false)
+  if (!files || !files.length) {
+    return null
+  }
+  return files[0]
+}
+
+export default function VvFileField ({ form }) {
+  const [hint, setHint] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const load = async () => {
+    setLoading(true)
+    setHint(null)
+    try {
+      const filePath = await pickVvFile()
+      if (!filePath) {
+        return
+      }
+      // fs.readFile resolves the file as a utf8 string (src/app/lib/fs.js)
+      const text = await fs.readFile(filePath)
+      const parsed = parseVv(text)
+
+      if (!parsed.ok) {
+        setHint({ type: 'error', text: describeVv(parsed) })
+        return
+      }
+
+      // Only push the keys the file actually defined, so loading a .vv on top
+      // of a partly filled form does not wipe the other fields.
+      form.setFieldsValue(parsed.fields)
+
+      const notes = parsed.warnings.slice()
+      if (parsed.ignored.length) {
+        notes.push(
+          'skipped: ' + parsed.ignored.map(d => d.key).join(', ')
+        )
+      }
+      if (parsed.unknown.length) {
+        notes.push(
+          'unrecognised: ' + parsed.unknown.map(d => d.key).join(', ')
+        )
+      }
+
+      const summary = describeVv(parsed)
+      setHint({
+        type: notes.length ? 'warning' : 'success',
+        text: summary + (notes.length ? ' -- ' + notes.join('; ') : '')
+      })
+    } catch (err) {
+      setHint({ type: 'error', text: 'cannot read file: ' + err.message })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <FormItem
+      {...tailFormItemLayout}
+    >
+      <Button
+        icon={<FileAddOutlined />}
+        loading={loading}
+        onClick={load}
+      >
+        {vvLabel()}
+      </Button>
+      {
+        hint && (
+          <Alert
+            className='mg1t'
+            type={hint.type}
+            title={hint.text}
+            showIcon
+            closable
+            onClose={() => setHint(null)}
+          />
+        )
+      }
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/config/spice.js

@@ -26,6 +26,7 @@ const spiceConfig = {
       fields: [
         commonFields.category,
         commonFields.colorTitle,
+        { type: 'vvFile', name: '__vv__', label: '' },
         { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
         { type: 'switch', name: 'viewOnly', label: () => e('viewOnly'), valuePropName: 'checked' },