Merge pull request #40 from jumpserver/dev

v0.1.7

Author: baijiangjie

src/renderer/components/mainPage.vue

@@ -1,27 +1,57 @@
 <template>
-  <div id="main" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="解压中">
+  <div
+    id="main"
+    v-loading.fullscreen.lock="fullscreenLoading"
+    element-loading-text="解压中"
+  >
     <el-row>
-      <el-col :lg="{span:8,offset:8}" :md="{span:8,offset:6}">
-        <img id="logo" src="@/assets/jumpserver-menu-logo.png" alt="electron-vue" />
+      <el-col
+        class="main-col"
+        :lg="{span:8,offset:8}"
+        :md="{span:8,offset:6}"
+      >
+        <img
+          id="logo"
+          src="@/assets/jumpserver-menu-logo.png"
+          alt="electron-vue"
+        />
       </el-col>
-      <el-col :lg="{span:8,offset:9}" :md="{span:8,offset:7}">
+      <el-col
+        class="main-col"
+        :lg="{span:8,offset:9}"
+        :md="{span:8,offset:7}"
+      >
         <el-upload
           class="upload-demo"
           drag
           action=""
           :show-file-list='false'
-          :http-request="checkfiletype"
+          :http-request="checkFileType"
           >
-          <i class="el-icon-upload"></i>
-          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-          <div class="el-upload__tip" slot="tip">只能上传录像文件，且不超过500mb</div>
+          <i class="el-icon-upload" />
+          <div class="el-upload__text">
+            将文件拖到此处，或<em>点击上传</em>
+          </div>
+          <div class="el-upload__tip" slot="tip">
+            只能上传录像文件，且不超过500mb
+          </div>
         </el-upload>
       </el-col>
-      <el-col  v-if="version === 1" :lg="{span:8,offset:10}" :md="{span:8,offset:9}" style="margin-top:20px;">
+      <el-col
+        v-if="version === 1"
+        :lg="{span:8,offset:10}"
+        :md="{span:8,offset:9}"
+        style="margin-top:20px;"
+      >
         <el-radio v-model="type" label="1">Linux录像</el-radio>
         <el-radio v-model="type" label="2">Windows录像</el-radio>
       </el-col>
-      <el-col  v-if="version === 1" :lg="{span:4,offset:12}" :md="{span:4,offset:11}" style="margin-top:20px;">
+      <el-col
+        v-if="version === 1"
+        :lg="{span:4,offset:12}"
+        :md="{span:4,offset:11}"
+        style="margin-top:20px;"
+      >
         <el-button round @click="play" type="primary">播放</el-button>
       </el-col>
     </el-row>
@@ -39,13 +69,11 @@ export default {
   data () {
     return {
       type: '0',
-      ispushed: false,
+      isPushed: false,
       filename: '',
       fullscreenLoading: false,
       version: Number,
       jsonData: ''
-      // version 1 旧版本
-      // version 2 新版本
     }
   },
   methods: {
@@ -57,66 +85,68 @@ export default {
     // 解压文件
     // 1. 解压tar.gz
     // 2. 解压gz
-    checkfiletype: function (data) {
+    checkFileType: function (data) {
       const configDir = (electron.app || electron.remote.app).getPath('userData')
-      if (data.file.name.substring(data.file.name.length - 3, data.file.name.length) === 'tar') {
-        this.filename = data.file.name.substring(0, data.file.name.length - 4)
+      const fileName = data.file.name
+      const fileNameLength = fileName.length
+      if (fileName.substring(fileNameLength - 3, fileNameLength) === 'tar') {
+        this.filename = fileName.substring(0, fileNameLength - 4)
         compressing.tar.uncompress(data.file.path, configDir).then((files) => {
           this.version = 2
-          const exists = fs.existsSync((configDir + '/' + this.filename + '.replay.gz'))
+          let condensedFilePath = (configDir + '/' + this.filename + '.replay.gz')
+          const exists = fs.existsSync(condensedFilePath)
           if (exists) {
             this.type = '1'
-            this.uploadfile(this.filename, (configDir + '/' + this.filename + '.replay.gz'))
           } else {
             this.type = '0'
-            this.uploadfile(this.filename, (configDir + '/' + this.filename + '.cast.gz'))
+            condensedFilePath = configDir + '/' + this.filename + '.cast.gz'
           }
+          this.uploadFile(this.filename, condensedFilePath)
         })
-      } else if (data.file.name.substring(data.file.name.length - 2, data.file.name.length) === 'gz') {
-        this.filename = data.file.name.substring(0, data.file.name.length - 6)
+      } else if (fileName.substring(fileNameLength - 2, fileNameLength) === 'gz') {
+        this.filename = fileName.substring(0, fileNameLength - 6)
         this.version = 1
-        this.uploadfile(this.filename, data.file.path)
+        this.uploadFile(this.filename, data.file.path)
       } else {
         this.$message.error('录像文件错误')
       }
     },
-    unzipfile: function () {
+    unzipFile: function () {
 
     },
-    uploadfile: function (filename, filepath) {
+    uploadFile: function (filename, filepath) {
       const configDir = (electron.app || electron.remote.app).getPath('userData')
       compressing.gzip.uncompress(filepath, (configDir + '/' + filename))
         .then(files => {
           this.fullscreenLoading = true
           if (this.version === 2) {
-            console.log('uploadfile')
-            let jsonpeth = (configDir + '/' + this.filename + '.json')
-            fs.readFile(jsonpeth, 'utf-8', (_, basicdata) => {
+            console.log('uploadFile')
+            let jsonPath = (configDir + '/' + this.filename + '.json')
+            fs.readFile(jsonPath, 'utf-8', (_, basicData) => {
               try {
-                this.jsonData = JSON.parse(basicdata)
+                this.jsonData = JSON.parse(basicData)
               } catch (e) {
                 this.$message.error('Json解析错误')
               }
-              if (this.jsonData.protocol === 'rdp') {
+              if (this.jsonData.protocol === 'rdp' || this.jsonData.protocol === 'vnc') {
                 this.type = '2'
               }
             })
           }
           return this.delay(5000).then(() => {
             this.fullscreenLoading = false
-            this.ispushed = true
+            this.isPushed = true
             if (this.version === 1) {
               this.$message.warning('1.5.6以前版本的录像，请选择录像类型')
             } else { this.play() }
           }
           )
-        })
-        .catch(() => {
+        }).catch(() => {
           this.$message.error('压缩和录像文件不符, 请重试')
         })
     },
     play: function () {
-      if (!this.ispushed) {
+      if (!this.isPushed) {
         this.$message.error('请先上传文件')
         return
       }
@@ -145,18 +175,24 @@ body {
 }
 
 #main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
   background: radial-gradient(
     ellipse at top left,
     rgb(47, 64, 80) 40%,
     rgb(103, 106, 108) 100%
   );
-  height: 100vh;
-  padding: 60px 80px;
-  width: 100vw;
 }
 #logo {
   height: auto;
-  margin-bottom: 20px;
   width: 420px;
+  margin-top: -20px;
+  margin-bottom: 20px;
+}
+.main-col {
+  text-align: center;
 }
 </style>

src/renderer/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import axios from 'axios'
-
 import App from './App'
+import './styles/index.scss'
 import router from './router'
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'

src/renderer/styles/index.scss

@@ -0,0 +1,24 @@
+::-webkit-scrollbar {
+  width:14px;
+}
+::-webkit-scrollbar-track {
+  border-radius:10px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  box-shadow: 8px 10px 20px #C6C6C6 inset;
+  border: 3px solid rgba(0, 0, 0, 0);
+}
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: 8px 10px 20px #878787 inset;
+}
+
+#terminal {
+  .asciinema-player, pre {
+    height: 100%!important;
+    width: 99%!important;
+  }
+  pre {
+    overflow-y: scroll;
+  }
+}