修改：文章管理页面

src/styles/articles.scss

@@ -1851,6 +1851,7 @@ footer .copyright {
 .l_body {
   position: relative;
   margin: 16px 16px 0 16px;
+  min-height: calc(100vh - 70vh);
 }
 
 .l_body.nocover {

src/styles/markdown.scss

@@ -567,7 +567,7 @@
   box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
 }
 
-/deep/ .markdown-body {
+/deep/ .article-body {
   border-radius: 0.5rem;
   blockquote {
     padding: 0.8em 1em;
@@ -623,48 +623,15 @@
           }
         }
       }
-      i.code-copy{
-        position: absolute;
-        top:0;
-        right: 0;
-        background-color: #464d5e;
-        padding: 3px;
-        margin: 3px 3px 0 0;
-        font-size: 11px;
-        border-radius: inherit;
-        color: #f1f1f1;
-        cursor: pointer;
-        display: none;
-      }
-      &:hover i.code-copy{
-        display: block;
-      }
     }
   }
   code {
+    background-size: unset!important;
     background: linear-gradient(to right, #5d9eea, #afcafd);
-    color: #000;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    padding: 0.1rem 0.3rem 0.2rem;
-    border-radius: 8px;
-    opacity: 0.9;
   }
   pre code {
     background: unset;
-    color: unset;
-    opacity: unset;
-    padding: unset;
   }
-  .hljs code {
-    background: unset;
-    color: unset;
-    opacity: unset;
-    padding: unset;
-  }
-}
-
-.pre-numbering {
 }
 
 #toggle-nav {

src/utils/file-config.js

@@ -4,6 +4,9 @@ export default {
   previewUrl: function(username, file) {
     return `${this.baseUrl}/file/${username}${file.path}${file.name}`
   },
+  mardownPreviewUrl: function (path){
+    return `${this.baseUrl}${path}`
+  },
   publicPreviewUrl: function(fileIds) {
     return `${this.baseUrl}/public/preview/${fileIds}`
   },

src/views/markdown/index.vue

@@ -24,7 +24,7 @@
       </div>
       <div class="editor-right">
         <div class="operation">
-          <el-button class="release-button" type="warning" size="small" @click="add" :loading="updating">保存草稿</el-button>
+          <el-button class="release-button" type="warning" size="small" @click="update" :loading="updating">保存草稿</el-button>
           <el-button class="release-button" type="primary" size="small" @click="update" :loading="updating">{{ editStatus?'发布文章':'更新文章' }}</el-button>
         </div>
         <div class="more-setting">
@@ -238,45 +238,45 @@
           },
           input: (val) => {
             this.valueHasChanged()
-          }
+          },
+          upload: this.markdownImageUplaod()
         })
       },
-      $imgAdd(pos, $file) {
-        const maxSize = 1024 * 1024 * 5
-        if($file.size > maxSize){
-          this.$message({
-            message: '请选择小于5M的图片！ 大于5M的图片将无法上传',
-            type: 'warning',
-            duration: 3000,
-          });
-          return
-        }
-        // 第一步.将图片上传到服务器.
-        let data = new FormData();
-        data.append('filename', this.filename)
-        data.append('username', this.$store.state.user.name)
-        data.append('userId', this.$store.state.user.userId);
-        data.append('file', $file);
-        uploadApi.uploadImage(data).then((res) => {
-          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
-          /**
-           * $vm 指为mavonEditor实例，可以通过如下两种方式获取
-           * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
-           * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
-           */
-          // const url = process.env.VUE_APP_BASE_FILE_API + '/public/image/' + res.data
-          const url = fileConfig.publicPreviewUrl(res.data);
-          console.log(url)
-          this.$refs.md.$img2Url(pos, url);
-        })
-      },
-      $imgDel(pos, $file) {
-      },
       // 所有操作都会被解析重新渲染
       change(value, render){
         // render 为 markdown 解析后的结果[html]
         this.html = render;
       },
+      markdownImageUplaod(){
+        return {
+          accept: 'image/*,.mp3, .wav, .rar',
+          headers: {
+            'jmal-token': this.$store.state.user.token
+          },
+          url: '/api/upload-markdown-image',
+          extraData: {
+            'filename': this.filename,
+            'username': this.$store.state.user.name,
+            'userId': this.$store.state.user.userId
+          },
+          fieldName: 'files',
+          filename (name) {
+            return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
+            replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
+            replace('/\\s/g', '')
+          },
+          format(files, responseText) {
+            let response = JSON.parse(responseText)
+            let succMap = {}
+            response.data.forEach(map => {
+              succMap[map.filename] = fileConfig.mardownPreviewUrl(map.filepath)
+            })
+            response.data = {}
+            response.data['succMap'] = succMap
+            return JSON.stringify(response)
+          }
+        }
+      },
       fullScreen(status) {
         this.isFullScreen = status
         this.reHeight()
@@ -334,6 +334,7 @@
             currentDirectory: this.storageLocation,
             contentText: this.contentEditor.getValue()
           }).then(() => {
+            this.$emit('update:hasChange', false)
             this.updating = false
             this.$message({
               message: "发布成功",

src/views/setting/articles/articleManager.vue

@@ -57,19 +57,15 @@
           <el-table-column
             prop="name"
             :show-overflow-tooltip="true"
-            min-width="250"
+            min-width="200"
             label="标题">
             <template slot-scope="scope">
-              <el-tooltip :content="'编辑 '+scope.row.name" placement="top">
+                <router-link :title="'编辑 '+scope.row.name" :to="'/setting/website/manager-articles?operation=editor&id='+scope.row.id" target="_blank">{{scope.row.name}}<svg-icon icon-class="bianji-"></svg-icon></router-link>
-                <router-link :to="'/setting/website/manager-articles?operation=editor&id='+scope.row.id" target="_blank">{{scope.row.name}}<svg-icon icon-class="bianji-"></svg-icon></router-link>
+                <router-link :title="'浏览 '+scope.row.name" :to="'/articles/article?mark='+scope.row.id" target="_blank"><svg-icon class="wailian" icon-class="wailian"></svg-icon></router-link>
-              </el-tooltip>
-              <el-tooltip :content="'浏览 '+scope.row.name" placement="top">
-                <router-link :to="'/articles/article?mark='+scope.row.id" target="_blank"><svg-icon class="wailian" icon-class="wailian"></svg-icon></router-link>
-              </el-tooltip>
             </template>
           </el-table-column>
           <el-table-column
-            width="100"
+            width="150"
             label="状态">
             <template slot-scope="scope">
               <el-tag size="medium" type="success">{{ scope.row.release?'已发布':'未发布' }}</el-tag>
@@ -88,8 +84,8 @@
             label="分类">
             <template slot-scope="scope">
             <span v-for="(category,i) in scope.row.categories">
+              {{i>0?' ,':''}}
               <router-link to="#">{{category.name}}</router-link>
-              {{i===0?' ,':''}}
             </span>
             </template>
           </el-table-column>
@@ -133,8 +129,8 @@ export default {
       hasChange: false,
       articleList: [],
       pagination: {
-        pageIndex: 1,
+        pageIndex: this.$route.query.page ? parseInt(decodeURI(this.$route.query.page)) : 1,
-        pageSize: 15,
+        pageSize: 12,
         total: 0,
       },
       categories: [],
@@ -163,6 +159,8 @@ export default {
         window.onbeforeunload = function() {
           return "还有文件正在上传, 确定退出吗?"
         }
+      }else {
+        window.onbeforeunload = null
       }
     }
   },
@@ -173,7 +171,6 @@ export default {
     },
     goBack() {
       const operation = this.$route.query.operation
-      console.log(operation)
       if(operation){
         this.newArticleDialogVisible = true
         if(operation === 'new') {
@@ -192,16 +189,16 @@ export default {
         this.pagination.total = res.count
         this.$nextTick(() => {
           this.isLoading = false
-          this.pagination.pageIndex = parseInt(decodeURI(this.$route.query.page))
         })
       })
     },
     currentChange() {
-      this.getMarkDown()
+      this.$router.push({query: {page : this.pagination.pageIndex}})
+      this.getArticleList()
     },
     newArticle() {
       this.newArticleDialogVisible = true
-      this.$router.push({path: this.$route.path, query: {operation: 'new'}})
+      this.$router.push({query: {operation: 'new'}})
     },
     categoryTree() {
       categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
@@ -209,7 +206,6 @@ export default {
       })
     },
     handleClose(done) {
-      console.log(this.hasChange)
       if(this.hasChange){
         this.$confirm('还有未保存的内容，确定要离开吗？', '提示', {
           confirmButtonText: '确定',
@@ -233,10 +229,8 @@ export default {
     },
     openDialog() {
       this.pageTitle = '撰写新文章'
-      console.log('pageTitle')
     },
     closeDialog(){
-      console.log('closeDialog')
       this.$router.replace({path: this.$route.path})
       window.onbeforeunload = null
       this.pageTitle = '文章管理'
@@ -253,4 +247,7 @@ export default {
 .wailian {
   margin-left: 8px;
 }
+/deep/.el-card__body {
+  min-width: 1080px;
+}
 </style>