新建文档界面

src/api/markdown-api.js

@@ -2,6 +2,7 @@ import request from '@/utils/request'
 // const qs = require('qs')
 
 export default {
+  // 获取markdown内容
   getMarkdown: function(params) {
     return request({
       url: 'public/p',
@@ -9,4 +10,12 @@ export default {
       params
     })
   },
+  // 获取markdown内容 /markdown/add
+  addMarkdown: function(data) {
+    return request({
+      url: '/markdown/add',
+      method: 'post',
+      data
+    })
+  },
 }

src/icons/svg/md-list.svg

@@ -0,0 +1 @@
+<svg t="1583414796558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6512" width="200" height="200"><path d="M160 560h512v96H160z m0-192h640v96H160z m0-192h704v96H160zM160 752h576v96H160z" fill="" p-id="6513"></path></svg>

src/icons/svg/md.svg

@@ -0,0 +1 @@
+<svg t="1583414863314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7354" width="200" height="200"><path d="M354.40128 0c-87.04 0-157.44 70.55872-157.44 157.59872v275.68128H78.72c-21.6576 0-39.36256 17.69984-39.36256 39.36256v236.31872c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.24128v118.08256c0 87.04 70.4 157.59872 157.44 157.59872h472.63744c87.04 0 157.59872-70.55872 157.59872-157.59872V315.0336c0-41.74848-38.9888-81.93024-107.52-149.27872l-29.11744-29.12256L818.87744 107.52C751.5392 38.9888 711.39328 0 669.59872 0H354.4064z m0 78.72h287.20128c28.35456 7.0912 27.99616 42.1376 27.99616 76.8v120.16128c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.07744c39.38816 0 78.87872-0.0256 78.87872 39.36256v512c0 43.32032-35.55328 78.87872-78.87872 78.87872H354.4064c-43.32544 0-78.72-35.5584-78.72-78.87872v-118.08256h393.91744c21.66272 0 39.36256-17.69472 39.36256-39.35744V472.64256c0-21.66272-17.69984-39.36256-39.36256-39.36256H275.68128V157.59872c0-43.32032 35.39456-78.87872 78.72-78.87872zM195.9936 507.36128h32.64l49.92 143.03744h0.96256l48.95744-143.03744h33.60256v175.67744h-22.08256v-106.55744c0-10.88 0.32256-26.56256 0.96256-47.04256h-0.96256l-52.79744 153.6h-19.2l-52.80256-153.6h-0.95744c1.28 22.4 1.92 38.72256 1.92 48.96256v104.63744H195.9936V507.36128z m214.08256 0h48.95744c24.96 0 44.48256 7.68 58.56256 23.04 14.72 14.72 22.07744 35.84 22.07744 63.36 0 28.8-7.68 50.87744-23.04 66.23744-14.72 15.36-35.51744 23.04-62.39744 23.04h-44.16V507.36128z m22.07744 19.2v137.27744h19.2c21.76 0 37.76-5.76 48-17.28 10.88-11.52 16.32256-28.8 16.32256-51.84s-5.12-39.99744-15.36-50.87744c-9.6-11.52-24.32-17.28-44.16-17.28h-24.00256z" p-id="7355"></path></svg>

src/router/index.js

@@ -120,7 +120,7 @@ export const constantRoutes = [
         path: 'index',
         name: 'markdown',
         component: () => import('@/views/markdown/index'),
-        meta: { title: '创建文档', icon: 'folder' }
+        meta: { title: '创建文档', icon: 'md' }
       }
     ]
   },
@@ -133,6 +133,7 @@ export const constantRoutes = [
         path: '',
         name: 'p',
         component: () => import('@/views/public/p/index'),
+        meta: { title: '文档列表', icon: 'md-list' }
       }
     ]
   },

src/views/home/index.vue

@@ -1398,7 +1398,7 @@ export default {
           this.getFileList()
         }
       } else {
-        if(row.contentType === 'text/markdown'){
+        if(row.contentType.includes('text')){
           this.$router.push(`/public/p?mark=${row.id}`)
         }else{
           // 打开文件

src/views/markdown/index.vue

@@ -1,24 +1,75 @@
 <template>
   <div>
-    <mavon-editor
+    <el-header>
-      v-model="content"
+      <div class="header-item">
-      ref="md"
+        <el-input placeholder="请输入文档名称" v-model="filename">
-      @change="change"
+          <template slot="append">.md</template>
-      style="min-height: 600px;max-height: 600px"
+        </el-input>
-    />
+        <el-button class="release-button" type="primary" @click="submit">发布文章</el-button>
-
+      </div>
-    <button @click="submit">提交</button>
+    </el-header>
+    <el-main>
+      <mavon-editor
+        v-model="content"
+        ref="md"
+        @change="change"
+        :style="{'height': clientHeight+'px'}"
+      />
+    </el-main>
   </div>
 </template>
 
-
-
 <script>
+  import markdownApi from '@/api/markdown-api'
   export default {
     data() {
       return {
-        content:'', // 输入的markdown
+        content:"# 一级标题\n" +
+          "```java\n" +
+          "import markdownApi from '@/api/markdown-api'\n" +
+          "  export default {\n" +
+          "    data() {\n" +
+          "      return {\n" +
+          "        content:'', // 输入的markdown\n" +
+          "        html:'',    // 及时转的html\n" +
+          "      }\n" +
+          "    },\n" +
+          "    methods: {\n" +
+          "      // 所有操作都会被解析重新渲染\n" +
+          "      change(value, render){\n" +
+          "        console.log(value)\n" +
+          "        // render 为 markdown 解析后的结果[html]\n" +
+          "        this.html = render;\n" +
+          "      },\n" +
+          "      // 提交\n" +
+          "      submit(){\n" +
+          "        console.log(this.content);\n" +
+          "        console.log(this.html);\n" +
+          "        markdownApi.addMarkdown({\n" +
+          "          userId: this.$store.state.user.userId,\n" +
+          "          username: this.$store.state.user.name,\n" +
+          "          filename: this.filename+\".md\"\n" +
+          "        }).then((res) => {\n" +
+          "\n" +
+          "          console.log(res.data)\n" +
+          "        })\n" +
+          "      }\n" +
+          "    },\n" +
+          "    mounted() {\n" +
+          "\n" +
+          "    }\n" +
+          "  }\n" +
+          "```\n" +
+          "## 二级标题", // 输入的markdown
         html:'',    // 及时转的html
+        filename: '新建文档',
+        clientHeight: document.documentElement.clientHeight - 155
+      }
+    },
+    mounted() {
+      const that = this
+      window.onresize = function temp() {
+        that.clientHeight = document.documentElement.clientHeight - 155
       }
     },
     methods: {
@@ -32,10 +83,36 @@
       submit(){
         console.log(this.content);
         console.log(this.html);
+        if(this.filename){
+          const filename = this.filename + ".md"
+          markdownApi.addMarkdown({
+            userId: this.$store.state.user.userId,
+            username: this.$store.state.user.name,
+            filename: filename,
+            contentText: this.content
+          }).then((res) => {
+            console.log(res.data)
+          })
+        }
       }
-    },
-    mounted() {
-
     }
   }
 </script>
+<style lang="scss" scoped>
+  /deep/ .el-main {
+    padding: 5px 20px 20px 20px;
+  }
+  /deep/ .el-header {
+    padding: 12.5px 10px 20px 20px;
+  }
+  /deep/ .el-input-group {
+    width: unset;
+  }
+  .header-item {
+    float: right;
+    .release-button {
+      margin-left: 10px;
+    }
+  }
+
+</style>

src/views/public/p/index.vue

@@ -1,35 +1,59 @@
 <template>
+  <div>
     <mavon-editor
+      v-if="!showList"
       v-model="content"
       :subfield="false"
       :boxShadow="false"
       defaultOpen="preview"
-      :navigation="true"
+      :navigation="toolbarsFlag"
       :toolbarsFlag="toolbarsFlag"
       :toolbars="toolbars"
       @navigationToggle="navigationToggle"
     />
+
+    Scroll down to see the bottom-right button.
+    <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
+      <div
+        style="{
+        height: 100%;
+        width: 100%;
+        background-color: #f2f5f6;
+        box-shadow: 0 0 6px rgba(0,0,0, .12);
+        text-align: center;
+        line-height: 40px;
+        color: #1989fa;
+      }"
+      >
+        UP
+      </div>
+    </el-backtop>
+  </div>
 </template>
 
 <script>
-  import api from '@/api/markdown-api'
+  import markdownApi from '@/api/markdown-api'
   export default {
     data() {
       return {
+        showList: true,
         toolbars:{
           navigation: true,
         },
-        toolbarsFlag: true,
+        toolbarsFlag: false,
         content:'',
         html:'',
       }
     },
     mounted() {
+      if(this.$route.query.mark){
+        this.showList = false
+      }
       this.getMarkDown()
     },
     methods: {
       getMarkDown() {
-        api.getMarkdown({
+        markdownApi.getMarkdown({
           mark: this.$route.query.mark
         }).then((res) => {
           this.content = res.data.contentText