✨ 终端支持快捷设置

2024-10-17 23:53:04 +08:00 · 2024-10-17 23:53:04 +08:00 · 53cc1628c2
commit 53cc1628c2
parent 70e867410f
6 changed files with 155 additions and 74 deletions
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@ -2,7 +2,7 @@ import { io } from 'socket.io-client'
 import { defineStore, acceptHMRUpdate } from 'pinia'
 import $api from '@/api'
 import config from '@/config'
-// import ping from '@/utils/ping'
+import { isHttps } from '@/utils'

 const { defaultClientPort } = config

@ -34,9 +34,12 @@ const useStore = defineStore({
    ],
    terminalConfig: {
      ...{
-        fontSize: 14,
-        themeName: localStorage.getItem('themeName') || 'Afterglow',
-        background: localStorage.getItem('terminalBackground') || ''
+        fontSize: 16,
+        themeName: 'Afterglow',
+        background: '',
+        quickCopy: isHttps(),
+        quickPaste: isHttps(),
+        autoExecuteScript: false
      },
      ...(localStorage.getItem('terminalConfig') ? JSON.parse(localStorage.getItem('terminalConfig')) : {})
    }
--- a/web/src/utils/index.js
+++ b/web/src/utils/index.js
@ -56,10 +56,10 @@ export const sortString = (arr = []) => {
    let c1 = ''
    let c2 = ''
    let temp = a.length > b.length ? b : a
-    for(let i = 0; i < temp.length; i++) {
+    for (let i = 0; i < temp.length; i++) {
      c1 = a[i].toLowerCase()
      c2 = b[i].toLowerCase()
-      if(c1 !== c2) break
+      if (c1 !== c2) break
    }
    return c1.charCodeAt() - c2.charCodeAt()
  })
@ -83,10 +83,10 @@ export const sortDirTree = (tree = []) => {
      let c1 = ''
      let c2 = ''
      let temp = aName.length > bName.length ? bName : aName
-      for(let i = 0; i < temp.length; i++) {
+      for (let i = 0; i < temp.length; i++) {
        c1 = aName[i].toLowerCase()
        c2 = bName[i].toLowerCase()
-        if(c1 !== c2) break
+        if (c1 !== c2) break
      }
      return c1.charCodeAt() - c2.charCodeAt()
    })
@ -128,3 +128,7 @@ export const exportFile = (data, filename, mimeType = 'application/json') =>{
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
 }
+
+export const isHttps = () => {
+  return window.location.protocol === 'https:'
+}
--- a/web/src/views/setting/index.vue
+++ b/web/src/views/setting/index.vue
@ -4,20 +4,13 @@
      <el-tab-pane label="修改密码" lazy>
        <User />
      </el-tab-pane>
-      <!-- <el-tab-pane label="分组管理">
-        <Group />
-      </el-tab-pane> -->
      <el-tab-pane label="登录日志">
        <Record />
      </el-tab-pane>
-      <!-- <el-tab-pane label="实例排序" lazy>
-        <Sort @update-list="emitUpdateList" />
-      </el-tab-pane> -->
      <el-tab-pane label="全局通知" lazy>
        <GlobalNotify />
      </el-tab-pane>
      <el-tab-pane label="通知配置" lazy>
-        <!-- <EmailList /> -->
        <NotifyConfig />
      </el-tab-pane>
    </el-tabs>
--- a/web/src/views/terminal/components/terminal-setting.vue
+++ b/web/src/views/terminal/components/terminal-setting.vue
@ -3,59 +3,120 @@
    v-model="visible"
    width="600px"
    top="120px"
-    title="终端设置"
+    title="本地设置"
    :append-to-body="false"
    :close-on-click-modal="false"
  >
-    <el-form
-      ref="formRef"
-      label-suffix="："
-      label-width="60px"
-      :show-message="false"
-    >
-      <el-form-item label="主题" prop="theme">
-        <el-select v-model="theme" placeholder="" style="width: 100%;">
-          <el-option
-            v-for="(value, key) in themeList"
-            :key="key"
-            :label="key"
-            :value="key"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="背景" prop="backgroundImage">
-        <ul class="background_list">
-          <li :class="background ? '' : 'active'" @click="changeBackground('')">
-            <el-image class="image">
-              <template #error>
-                <div class="theme_background_text">
-                  主题背景
-                </div>
-              </template>
-            </el-image>
-          </li>
-          <li
-            v-for="url in defaultBackgroundImages"
-            :key="url"
-            :class="background === url ? 'active' : ''"
-            @click="changeBackground(url)"
-          >
-            <el-image class="image" :src="url" />
-          </li>
-        </ul>
-        <div class="custom_background">
-          <el-input
-            v-model="backgroundUrl"
-            clearable
-            placeholder="自定义背景图片url"
-            autocomplete="on"
-          />
-        </div>
-      </el-form-item>
-      <el-form-item label="字体" prop="fontSize">
-        <el-input-number v-model="fontSize" :min="12" :max="30" />
-      </el-form-item>
-    </el-form>
+    <el-tabs tab-position="top">
+      <el-tab-pane label="终端设置" lazy>
+        <el-form
+          ref="formRef"
+          label-suffix="："
+          label-width="100px"
+          :show-message="false"
+        >
+          <el-form-item label="终端主题" prop="theme">
+            <el-select v-model="theme" placeholder="" style="width: 100%;">
+              <el-option
+                v-for="(value, key) in themeList"
+                :key="key"
+                :label="key"
+                :value="key"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="终端字体" prop="fontSize">
+            <el-input-number v-model="fontSize" :min="12" :max="30" />
+          </el-form-item>
+          <el-form-item label="终端背景" prop="backgroundImage">
+            <ul class="background_list">
+              <li :class="background ? '' : 'active'" @click="changeBackground('')">
+                <el-image class="image">
+                  <template #error>
+                    <div class="theme_background_text">
+                      主题背景
+                    </div>
+                  </template>
+                </el-image>
+              </li>
+              <li
+                v-for="url in defaultBackgroundImages"
+                :key="url"
+                :class="background === url ? 'active' : ''"
+                @click="changeBackground(url)"
+              >
+                <el-image class="image" :src="url" />
+              </li>
+            </ul>
+            <div class="custom_background">
+              <el-input
+                v-model="background"
+                clearable
+                placeholder="自定义背景图片url"
+                autocomplete="on"
+              />
+            </div>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="快捷操作">
+        <el-form
+          ref="formRef"
+          label-suffix="："
+          label-width="100px"
+          :show-message="false"
+        >
+          <el-form-item label="选中复制" prop="quickCopy">
+            <el-tooltip
+              effect="dark"
+              content="启用后选中文本自动复制到剪贴板(需https支持)"
+              placement="right"
+            >
+              <el-switch
+                v-model="quickCopy"
+                class="swtich"
+                inline-prompt
+                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+                active-text="开启"
+                inactive-text="关闭"
+              />
+            </el-tooltip>
+          </el-form-item>
+          <el-form-item label="快捷粘贴" prop="quickPaste">
+            <el-tooltip
+              effect="dark"
+              content="启用后右键粘贴剪贴板内容(需https支持)"
+              placement="right"
+            >
+              <el-switch
+                v-model="quickPaste"
+                class="swtich"
+                inline-prompt
+                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+                active-text="开启"
+                inactive-text="关闭"
+              />
+            </el-tooltip>
+          </el-form-item>
+          <el-form-item label="脚本执行" prop="autoExecuteScript">
+            <el-tooltip
+              effect="dark"
+              content="启用后从脚本库选中脚本后自动执行(回车操作)"
+              placement="right"
+            >
+              <el-switch
+                v-model="autoExecuteScript"
+                class="swtich"
+                inline-prompt
+                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+                active-text="自动"
+                inactive-text="手动"
+              />
+            </el-tooltip>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
    <template #footer>
      <span class="dialog_footer">
        <el-button @click="visible = false">关闭</el-button>
@ -95,6 +156,18 @@ const fontSize = computed({
  get: () => $store.terminalConfig.fontSize,
  set: (newVal) => $store.setTerminalSetting({ fontSize: newVal })
 })
+const quickCopy = computed({
+  get: () => $store.terminalConfig.quickCopy,
+  set: (newVal) => $store.setTerminalSetting({ quickCopy: newVal })
+})
+const quickPaste = computed({
+  get: () => $store.terminalConfig.quickPaste,
+  set: (newVal) => $store.setTerminalSetting({ quickPaste: newVal })
+})
+const autoExecuteScript = computed({
+  get: () => $store.terminalConfig.autoExecuteScript,
+  set: (newVal) => $store.setTerminalSetting({ autoExecuteScript: newVal })
+})

 const changeBackground = (url) => {
  background.value = url || ''
--- a/web/src/views/terminal/components/terminal-tab.vue
+++ b/web/src/views/terminal/components/terminal-tab.vue
@ -3,7 +3,7 @@
    <div
      ref="terminalRef"
      class="terminal_container"
-      @contextmenu.prevent="handleRightClick"
+      @contextmenu="handleRightClick"
    />
    <!-- <div class="terminal_command_history">
      <CommandHistory :list="commandHistoryList" />
@ -60,7 +60,10 @@ const background = computed(() => $store.terminalConfig.background)
 const hostObj = computed(() => props.hostObj)
 const hostId = computed(() => hostObj.value.id)
 const host = computed(() => hostObj.value.host)
-let menuCollapse = computed(() => $store.menuCollapse)
+const menuCollapse = computed(() => $store.menuCollapse)
+const quickCopy = computed(() => $store.terminalConfig.quickCopy)
+const quickPaste = computed(() => $store.terminalConfig.quickPaste)
+const autoExecuteScript = computed(() => $store.terminalConfig.autoExecuteScript)

 watch(menuCollapse, () => {
  nextTick(() => {
@ -272,6 +275,7 @@ const onFindText = () => {

 const onSelectionChange = () => {
  term.value.onSelectionChange(() => {
+    if (!quickCopy.value) return
    let str = term.value.getSelection()
    if (!str) return
    const text = new Blob([str,], { type: 'text/plain' })
@ -323,8 +327,9 @@ const onData = () => {
  term.value.onData((key) => {
    if (socketConnected.value === false) return
    let acsiiCode = key.codePointAt()
-    if (acsiiCode === 22) return handlePaste()
-    if (acsiiCode === 6) return searchBar.value.show()
+    // console.log(acsiiCode)
+    if (acsiiCode === 22) return handlePaste() // Ctrl + V
+    // if (acsiiCode === 6) return searchBar.value.show() // Ctrl + F
    enterTimer.value = setTimeout(() => {
      if (enterTimer.value) clearTimeout(enterTimer.value)
      if (key === '\r') { // Enter
@ -363,7 +368,9 @@ const onData = () => {
  })
 }

-const handleRightClick = async () => {
+const handleRightClick = async (e) => {
+  if (!quickPaste.value) return
+  e.preventDefault()
  try {
    const clipboardText = await navigator.clipboard.readText()
    if (!clipboardText) return
@ -384,6 +391,7 @@ const handleClear = () => {
 }

 const handlePaste = async () => {
+  if (!quickPaste.value) return
  let key = await navigator.clipboard.readText()
  emit('inputCommand', key)
  socket.value.emit('input', key)
@ -398,6 +406,7 @@ const focusTab = () => {
 }

 const inputCommand = (command) => {
+  command = command + (autoExecuteScript.value ? '\n' : '')
  socket.value.emit('input', command)
 }

--- a/web/src/views/terminal/components/terminal.vue
+++ b/web/src/views/terminal/components/terminal.vue
@ -47,14 +47,14 @@
          </template>
        </el-dropdown> -->
        <el-dropdown trigger="click">
-          <span class="link_text">设置<el-icon><arrow-down /></el-icon></span>
+          <span class="link_text">首选项<el-icon><arrow-down /></el-icon></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleFullScreen">
                <span>启用全屏</span>
              </el-dropdown-item>
              <el-dropdown-item @click="showSetting = true">
-                <span>终端设置</span>
+                <span>本地设置</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
@ -247,7 +247,6 @@ const handleCloseAllTab = () => {

 const handleExecScript = (scriptObj) => {
  let { command } = scriptObj
-  command += '\n'
  if (!isSyncAllSession.value) return handleInputCommand(command)
  terminalRefs.value.forEach(terminalRef => {
    terminalRef.inputCommand(command)
@ -355,7 +354,7 @@ const handleInputCommand = async (command) => {
  const curTerminalRef = terminalRefs.value[activeTabIndex.value]
  await $nextTick()
  curTerminalRef?.focusTab()
-  curTerminalRef.inputCommand(`${ command }`) // \n
+  curTerminalRef.inputCommand(`${ command }`)
  showInputCommand.value = false
 }
 </script>