feat: 快捷键设置.

orion-ops-ui/package.json

@@ -36,6 +36,8 @@
     "axios": "^0.24.0",
     "dayjs": "^1.11.5",
     "echarts": "^5.4.0",
+    "file-saver": "^2.0.5",
+    "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "monaco-editor": "^0.44.0",
@@ -60,6 +62,7 @@
     "@arco-plugins/vite-vue": "^1.4.5",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
+    "@types/file-saver": "^2.0.7",
     "@types/lodash": "^4.14.186",
     "@types/mockjs": "^1.0.7",
     "@types/nprogress": "^0.2.0",

orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-action-block.vue

@@ -9,7 +9,7 @@
     <!-- 内容区域 -->
     <div class="terminal-setting-body setting-body">
       <!-- 提示 -->
-      <a-alert class="mb16">点击保存按钮后需要刷新页面生效 (设置时需要避免浏览器内置快捷键)</a-alert>
+      <a-alert class="mb16">点击保存按钮后需要刷新页面生效 (恢复默认配置后也需要点击保存按钮) (设置时需要避免使用浏览器内置快捷键)</a-alert>
       <a-space class="action-container" size="mini">
         <!-- 是否启用 -->
         <a-switch v-model="value"

orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-setting.vue

@@ -54,6 +54,7 @@
   import useLoading from '@/hooks/loading';
   import { useDebounceFn } from '@vueuse/core';
   import { addEventListen, removeEventListen } from '@/utils/event';
+  import { Message } from '@arco-design/web-vue';
   import TerminalShortcutKeysBlock from './terminal-shortcut-keys-block.vue';
   import TerminalShortcutActionBlock from './terminal-shortcut-action-block.vue';
 
@@ -166,6 +167,7 @@
         enabled: enabled.value,
         keys: shortcutKeys.value
       } as TerminalShortcutSetting);
+      Message.success('保存成功');
     } catch (e) {
     } finally {
       setLoading(false);

orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue

@@ -93,7 +93,6 @@
   const session = ref<ITerminalSession>();
 
   // TODO
-  // 截屏
   // sftp
   // 代码片段
 

orion-ops-ui/src/views/host/terminal/index.vue

@@ -11,7 +11,7 @@
         <terminal-left-sidebar />
       </div>
       <!-- 内容区域 -->
-      <div class="host-layout-content">
+      <div class="host-layout-content" ref="content">
         <!-- 主机加载中骨架 -->
         <loading-skeleton v-if="contentLoading" />
         <!-- 终端内容区域 -->
@@ -19,7 +19,7 @@
       </div>
       <!-- 右侧操作栏 -->
       <div class="host-layout-right">
-        <terminal-right-sidebar />
+        <terminal-right-sidebar @screenshot="screenshotTerminal" />
       </div>
     </main>
   </div>
@@ -41,8 +41,11 @@
   import TerminalRightSidebar from './components/layout/terminal-right-sidebar.vue';
   import TerminalContent from './components/layout/terminal-content.vue';
   import LoadingSkeleton from './components/layout/loading-skeleton.vue';
+  import html2canvas from 'html2canvas';
+  import { saveAs } from 'file-saver';
   import './assets/styles/layout.less';
   import 'xterm/css/xterm.css';
+  import { Message } from '@arco-design/web-vue';
 
   const terminalStore = useTerminalStore();
   const dictStore = useDictStore();
@@ -51,6 +54,7 @@
 
   const originTitle = document.title;
   const render = ref(false);
+  const content = ref();
 
   // 关闭视口处理
   const handleBeforeUnload = (event: any) => {
@@ -58,6 +62,30 @@
     event.returnValue = confirm('系统可能不会保存您所做的更改');
   };
 
+  // 终端截图
+  // FIXME test 水印
+  const screenshotTerminal = async () => {
+    try {
+      console.log(content.value);
+      const canvas = await html2canvas(content.value, {
+        useCORS: true,
+        backgroundColor: 'transparent',
+      });
+      console.log(canvas);
+      const blob = await new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+          if (!blob) {
+            reject(new Error('截屏失败'));
+          }
+          resolve(blob);
+        }, 'image/png');
+      });
+      saveAs(blob, `screenshot-${Date.now()}.png`);
+    } catch (e) {
+      Message.error('保存失败');
+    }
+  };
+
   // 加载用户终端偏好
   onBeforeMount(async () => {
     await terminalStore.fetchPreference();