From dbab8e23e80db39e43d9454f81a65f932ea502ed Mon Sep 17 00:00:00 2001
From: Aicirou <2643053021@qq.com>
Date: Tue, 30 Jun 2020 01:49:13 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Markdown=20displays=20rendered=20html?=
 =?UTF-8?q?=20by=20default.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/markdown/index.vue | 15 +++++-
 src/views/common/BreadCrumb.vue   |  2 +-
 src/views/page/GoText.vue         | 76 +++++++++++++++++++++++--------
 3 files changed, 71 insertions(+), 22 deletions(-)

diff --git a/src/components/markdown/index.vue b/src/components/markdown/index.vue
index 48d815e..873170c 100644
--- a/src/components/markdown/index.vue
+++ b/src/components/markdown/index.vue
@@ -52,10 +52,23 @@ export default {
       console.log("not mounted init");
     }
   },
+  watch: {
+    source(val) {
+      if (val) {
+        this.initWithMd();
+      }
+    },
+  },
   methods: {
+    handler(source) {
+      if (source) {
+        source = source.replace(/---\n([\s\S]*)---\n/, "");
+      }
+      return source;
+    },
     // 使用 md 初始化
     initWithMd() {
-      this.markedHTML = this.marked(this.source);
+      this.markedHTML = this.marked(this.handler(this.source));
     },
     // 使用 url 初始化
     async initWithUrl() {
diff --git a/src/views/common/BreadCrumb.vue b/src/views/common/BreadCrumb.vue
index 81d4b56..61a3eae 100644
--- a/src/views/common/BreadCrumb.vue
+++ b/src/views/common/BreadCrumb.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <nav
-      class="breadcrumb level g2-breadcrumb is-hidden-mobile is-hidden-touch"
+      class="breadcrumb level g2-breadcrumb is-hidden-mobile"
       aria-label="breadcrumbs"
     >
       <div class="level-left">
diff --git a/src/views/page/GoText.vue b/src/views/page/GoText.vue
index 46bb2e6..77cdcc9 100644
--- a/src/views/page/GoText.vue
+++ b/src/views/page/GoText.vue
@@ -1,60 +1,96 @@
 <template>
   <div class="content g2-content">
-    <codemirror v-model="content" :options="cmOptions" />
+    <codemirror
+      v-if="!ismd || isEdit || loaded"
+      v-show="!ismd || isEdit"
+      v-model="content"
+      :options="options"
+    />
+    <markdown
+      v-if="ismd"
+      v-show="!isEdit"
+      :source="content"
+    />
+    <a
+      v-if="ismd"
+      class="g2-content-edit is-hidden-mobile"
+      @click="edit"
+    >
+      <i
+        :class="'fa' + (isEdit ? ' fa-eye' : ' fa-pencil-square-o')"
+        aria-hidden="true"
+      ></i>
+    </a>
   </div>
 </template>
 
 <script>
 import { get_file, decode64 } from "@utils/AcrouUtil";
-import { codemirror } from 'vue-codemirror'
+import { codemirror } from "vue-codemirror";
 
 // import base style
-import 'codemirror/lib/codemirror.css'
+import "codemirror/lib/codemirror.css";
 // import language js
-import 'codemirror/mode/javascript/javascript.js'
+import "codemirror/mode/javascript/javascript.js";
 // import theme style
-import 'codemirror/theme/base16-dark.css'
+import "codemirror/theme/base16-dark.css";
 export default {
-  data: function () {
+  data: function() {
     return {
       path: "",
       content: "",
-      cmOptions: {
+      options: {
         tabSize: 4,
-        mode: 'text/javascript',
+        mode: "text/javascript",
         // theme: 'base16-dark',
         lineNumbers: true,
-        line: true
-      }
+        line: true,
+      },
+      isEdit: false,
+      loaded: false,
     };
   },
-  activated () {
+  activated() {
     this.render();
   },
   computed: {
-    url () {
+    url() {
       if (this.$route.params.path) {
         return decode64(this.$route.params.path);
       }
-      return ''
-    }
+      return "";
+    },
+    ismd() {
+      return this.url.match(".*\\.(md|MD)$");
+    },
   },
   components: {
-    codemirror
+    codemirror,
   },
   methods: {
-    render () {
+    render() {
       let path = this.url;
       this.content = this.$t("page.text.loading");
-      get_file({ path: path, file: {} }, data => {
+      get_file({ path: path, file: {} }, (data) => {
         this.content = data;
       });
-    }
-  }
+    },
+    edit() {
+      this.loaded = true;
+      this.isEdit = !this.isEdit;
+    },
+  },
 };
 </script>
 <style lang="scss">
 .CodeMirror {
   height: 650px;
 }
-</style>
\ No newline at end of file
+</style>
+<style lang="scss" scoped>
+.g2-content-edit {
+  position: absolute;
+  top: 10px;
+  right: 0;
+}
+</style>