增加状态栏

frontend/src/App.vue

@@ -26,18 +26,18 @@ export default {
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 7px;
+  height: 7px;
 }
 
 ::-webkit-scrollbar-track {
-  border-radius: 5px;
+  border-radius: 3px;
   background: rgba(255, 255, 255, 0.08);
   box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 5px;
+  border-radius: 3px;
   background: rgba(255, 255, 255, 0.09);
   box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1);
 }

frontend/src/components/Editor.vue

@@ -57,8 +57,12 @@ export default {
         wrappingIndent: 'same'
       })
 
-      this.editor.onDidChangeModelContent((e) => {
-        this.$emit('input', this.editor.getModel().getValue(window.monaco.editor.DefaultEndOfLine.LF))
+      this.editor.onDidChangeCursorSelection(e => {
+        this.$bus.emit('change-document', this.getDucumentInfo())
+      })
+
+      this.editor.onDidChangeModelContent(e => {
+        this.$emit('input', this.getValue())
       })
 
       this.editor.onDidScrollChange(e => {
@@ -177,8 +181,22 @@ export default {
         this.replaceLine(line, value)
       }
     },
+    getValue () {
+      return this.editor.getModel().getValue(window.monaco.editor.DefaultEndOfLine.LF)
+    },
     setValue (val) {
       this.editor.getModel().setValue(val)
+    },
+    getDucumentInfo () {
+      const selection = this.editor.getSelection()
+
+      return {
+        line: selection.positionLineNumber,
+        column: selection.positionColumn,
+        lineCount: this.editor.getModel().getLineCount(),
+        textLength: this.getValue().length,
+        selectedLength: this.editor.getModel().getValueInRange(selection).length
+      }
     }
   }
 }

frontend/src/components/StatusBar.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="status-bar">
+    <div class="document-info right">
+      <span>行：{{documentInfo.line}}</span>
+      <span>列：{{documentInfo.column}}</span>
+      <span>总行数：{{documentInfo.lineCount}}</span>
+      <span>字符数：{{documentInfo.textLength}}</span>
+      <span v-if="documentInfo.selectedLength > 0">已选中：{{documentInfo.selectedLength}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'status-bar',
+  components: {},
+  props: {
+  },
+  data () {
+    return {
+      documentInfo: {
+        textLength: 0,
+        selectedLength: 0,
+        lineCount: 0,
+        line: 0,
+        column: 0
+      }
+    }
+  },
+  created () {
+    this.$bus.on('change-document', this.handleChangeDocument)
+  },
+  mounted () {
+  },
+  beforeDestroy () {
+    this.$bus.off('change-document', this.handleChangeDocument)
+  },
+  methods: {
+    handleChangeDocument (data) {
+      this.documentInfo = data
+    }
+  },
+  watch: {
+  },
+  computed: {
+  }
+}
+</script>
+
+<style scoped>
+.right {
+  float: right;
+}
+
+.status-bar {
+  box-sizing: border-box;
+  padding: 0 1em;
+  color: #eee;
+  background: #4e4e4e;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.document-info > span {
+  display: inline-block;
+  padding: 0 .2em;
+}
+</style>

frontend/src/pages/Home.vue

@@ -32,6 +32,9 @@
         @sync-scroll="syncScrollEditor"
         @switch-todo="switchTodoEditor"></XView>
     </div>
+    <div class="status-bar">
+      <StatusBar></StatusBar>
+    </div>
   </div>
 </template>
 
@@ -40,12 +43,13 @@ import dayjs from 'dayjs'
 import Editor from '../components/Editor'
 import XView from '../components/View'
 import Tree from '../components/Tree'
+import StatusBar from '../components/StatusBar'
 import RunPlugin from '../components/RunPlugin'
 import File from '../file'
 
 export default {
   name: 'home',
-  components: { XView, Editor, Tree },
+  components: { XView, Editor, Tree, StatusBar },
   data () {
     return {
       status: '请选择文件',
@@ -174,6 +178,8 @@ export default {
 .tree {
   height: 95vh;
   width: 17vw;
+  padding-bottom: 20px;
+  box-sizing: border-box;
   overflow: auto;
 }
 
@@ -192,6 +198,8 @@ export default {
   width: 43vw;
   height: 95vh;
   overflow: auto;
+  padding-bottom: 20px;
+  box-sizing: border-box;
 }
 
 @media (max-width: 767px) {
@@ -213,8 +221,15 @@ export default {
   margin: 0 auto;
 }
 
+.status-bar {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+}
+
 @media print {
-  .editor, .header, .tree {
+  .editor, .header, .tree, .status-bar {
     display: none;
   }