接入ssh

electron/main.js

@@ -58,7 +58,7 @@ class MainSerivce {
       webPreferences: {
         contextIsolation: true,
         nodeIntegration: true,
-        webSecurity: false, // 去掉跨越
+        webSecurity: true,
         nodeIntegrationInWorker: true,
         preload: join(__dirname, './preload.js')
       },

electron/preload.js

@@ -1,7 +1,16 @@
 const { contextBridge, ipcRenderer } = require('electron');
+const { Client } = require('ssh2')
+const Conn = new Client()
 
 contextBridge.exposeInMainWorld('$electron', {
   send: (event, args) => ipcRenderer.send('signal', event, args),
   once: (event, callBack) => ipcRenderer.once(event, (_, args) => callBack(args)),
   on: (event, callBack) => ipcRenderer.on(event, (_, args) => callBack(args))
+})
+
+contextBridge.exposeInMainWorld('$ssh', {
+  connect: (args) => Conn.connect(args),
+  on: (event, callBack) => Conn.on(event, callBack),
+  shell: (callBack) => Conn.shell((err, stream) => callBack(err, { on: (event, back) => stream.on(event, args => back(args.toString())), end: (args) => stream.end(args) })),
+  end: () => Conn.end()
 })

env.d.ts

@@ -7,5 +7,6 @@ declare module '*.vue' {
 }
 
 declare interface Window {
-  $electron: Any
+  $electron: Any,
+  $ssh: Any
 }

package.json

@@ -16,10 +16,12 @@
     "naive-ui": "^2.40.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
+    "ssh2": "^1.16.0",
     "vue": "^3.3.2"
   },
   "devDependencies": {
     "@types/node": "^20.10.4",
+    "@types/ssh2": "^1.15.1",
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "electron": "^25.3.0",

src/App.vue

@@ -10,6 +10,9 @@
         :select-tab="selectKey"
         @on-change="onChange"
       />
+      <div class="box-content">
+        <SSH />
+      </div>
     </div>
     <!-- 弹窗 -->
     <n-modal v-model:show="showAdd">
@@ -22,6 +25,7 @@ import { onMounted, ref } from 'vue'
 import Head from '@/components/head.vue'
 import Add from '@/components/add.vue'
 import { FormData } from '@/components/edit.vue'
+import SSH from '@/components/ssh.vue'
 
 const showAdd = ref(false)
 const tabs = ref([
@@ -51,5 +55,11 @@ onMounted(() => {
 .box {
   width: 100vw;
   height: 100vh;
+
+  &-content {
+    height: calc(100% - 38px);
+    width: 100%;
+    border-top: solid 3px white;
+  }
 }
 </style>

src/components/ssh.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="ssh">
+    <!-- <div
+      v-for="(item, index) in data"
+      :key="index"
+      v-html="item"
+    /> -->
+    <textarea
+      v-model="data"
+      style="width: 100%;height: 100%;"
+    />
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { onMounted, ref } from 'vue'
+
+const data = ref('')
+const conn = ref()
+
+function newClient(option: { host: string, port: number, username: string, password: string }) {
+  const conn = window.$ssh
+  conn.on('ready', () => {
+    console.log('Client :: ready')
+    conn.shell((err: string, stream: any) => {
+      if (err) throw err
+
+      stream.on('close', () => {
+        console.log('Stream :: close')
+        conn.end()
+      })
+
+      stream.on('data', (db: string) => {
+        console.log(`OUTPUT: ${db}`)
+        const a = JSON.stringify(db)
+        data.value += db
+      })
+
+      stream.end('ls -l\nexit\n')
+    })
+  })
+  conn.connect({ ...option })
+  return conn
+}
+
+onMounted(() => {
+  conn.value = newClient({
+    host: 'caner.top', port: 49657, username: 'root', password: 'dongdong0707'
+  })
+})
+
+</script>
+<style lang="scss" scoped>
+.ssh {
+    width: 100%;
+    height: 100%;
+    background: black;
+    color: white;
+    font-size: 12px;
+}
+</style>

vite.config.ts

@@ -52,7 +52,7 @@ export default () => defineConfig({
         }
       }
     },
-    outDir:'dist/electron/'
+    outDir: 'dist/electron/'
   },
   define: {
     __VUE_OPTIONS_API__: false