修改：文章管理界面

src/components/Icon/Icon.vue

@@ -5,7 +5,7 @@
 
 import { Icon } from 'ant-design-vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2024484_7y6nutfxwm5.js'
+  scriptUrl: '//at.alicdn.com/t/font_2024484_50pffzulki7.js'
 })
 
 export default {

src/components/ShowFile/ShowFile.vue

@@ -804,7 +804,7 @@ export default {
         this.$refs.fileListTable.clearSelection()
       }
     })
-
+    // 监听返回
     if (window.history && window.history.pushState) {
       history.pushState(null, null, document.URL);
       window.addEventListener('popstate', this.goBack, false);
@@ -1472,7 +1472,7 @@ export default {
     },
     // 新建文档
     newDocument() {
-      this.$router.push(`/markdown/editor`)
+      window.open(`/setting/website/manager-articles?operation=new`, "_blank");
     },
     newFolder() {
       this.newFolderName = this.getNewFileName(this.fileList, '新建文件夹')
@@ -2300,7 +2300,7 @@ export default {
           break
         case 'edit':
           // 编辑
-          this.$router.push(`/markdown/editor?id=${this.rowContextData.id}`)
+          this.$router.push(`/setting/website/manager-articles?operation=editor&id=${this.rowContextData.id}`)
           break
         case 'open':
           // 打开

src/layout/components/Navbar.vue

@@ -4,7 +4,10 @@
     <breadcrumb class="breadcrumb-container" />
 
     <div class="right-content">
-
+      <div class="right-content-button">
+        <router-link target="_blank" to="/articles">
+          <svg-icon icon-class="WEBSITE"></svg-icon>网站
+      </router-link></div>
       <div class="right-username">{{username}}</div>
       <div class="right-menu">
         <el-dropdown class="avatar-container" trigger="click">
@@ -190,7 +193,22 @@ export default {
     line-height: 50px;
   }
 }
-.el-dropdown-menu__item svg {
+
-  margin-right: 5px;
+.right-content-button {
+  line-height: 50px;
+  margin-right: 10px;
+  padding: 0 10px;
+  &:hover {
+    background-color: #00000006;
+  }
+  svg {
+    margin-right: 5px;
+  }
+}
+
+.el-dropdown-menu__item {
+  svg {
+    margin-right: 5px;
+  }
 }
 </style>

src/router/index.js

@@ -194,6 +194,7 @@ export const constantRoutes = [
   {
     path: 'articles',
     component: Layout,
+    hidden: true,
     children: [
       {
         path: `${document.location.protocol}//${window.location.host}/articles`,
@@ -229,7 +230,7 @@ export const constantRoutes = [
     path: '/setting/website',
     component: Layout,
     name: 'website',
-    meta: { title: '网站管理', icon: 'wangzhan'},
+    meta: { title: '网站管理', icon: 'wangzhanguanli'},
     children: [
       {
         path: 'manager-articles',

src/views/markdown/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-wechat-title="'编辑:'+filename">
+  <div>
     <dir-tree ref="dirTree" :append-to-body='true'>
         <el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
     </dir-tree>
@@ -24,8 +24,8 @@
       </div>
       <div class="editor-right">
         <div class="operation">
-          <el-button class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>
+          <el-button class="release-button" type="warning" size="small" @click="add" :loading="updating">保存草稿</el-button>
-          <el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>
+          <el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="updating">发布文章</el-button>
           <el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>
         </div>
         <div class="more-setting">
@@ -40,11 +40,13 @@
 
           <p class="mark-setting-label">分类：</p>
           <el-cascader
+            v-model="categoryIds"
             class="mark-setting-input"
             placeholder="不选择"
+            :collapse-tags="false"
             :options="categories"
             :show-all-levels="false"
-            :props="{ checkStrictly: true }"
+            :props="{ multiple: true, checkStrictly: true }"
             clearable></el-cascader>
 
         </div>
@@ -128,6 +130,12 @@
     components: {
       DirTree, Vditor
     },
+    props: {
+      hasChange: {
+        type: Boolean,
+        defalut: false
+      }
+    },
     data() {
       return {
         file: {},
@@ -136,16 +144,20 @@
         filename: '',
         clientHeight: document.documentElement.clientHeight - 210,
         updating: false,
-        adding: false,
         isFullScreen: false,
         storageLocation: '/',
         selectLocationVisible: false,
         moreSetting: false,
         contentEditor: '',
+        categoryIds: [],
         categories: []
       }
     },
+    created() {
+      console.log('created')
+    },
     mounted() {
+      console.log('mounted')
       this.getMarkdown()
       this.categoryTree()
       const that = this
@@ -154,9 +166,31 @@
       }
     },
     destroyed() {
-      this.contentEditor.destroy()
+      console.log('destroyed')
+    },
+    watch: {
+      file(){
+        console.log('filename is changed')
+        this.valueHasChanged()
+      },
+      filename(val){
+        console.log('filename is changed')
+        this.valueHasChanged()
+        this.$emit('onTitle', val)
+      },
+      categoryIds(){
+        console.log('categoryIds is changed')
+        this.valueHasChanged()
+      },
+      storageLocation(){
+        console.log('storageLocation is changed')
+        this.valueHasChanged()
+      }
     },
     methods: {
+      valueHasChanged(){
+        this.$emit('update:hasChange', true)
+      },
       getMarkdown(){
         if(this.$route.query.id){
           this.editStatus = true
@@ -167,6 +201,11 @@
             this.content = this.file.contentText
             this.filename = this.file.name.split('.md')[0]
             this.storageLocation = res.data.path
+            if(this.file.categoryIds){
+              this.file.categoryIds.forEach(categoryId => {
+                this.categoryIds.push(new Array(categoryId))
+              })
+            }
             // 初始化编辑器
             this.vditorInit(res.data.contentText)
           })
@@ -257,31 +296,56 @@
       imageFilter() {
         return true
       },
+      checkParam(){
+        if(!this.filename){
+          this.$message.warning("请输入文章标题")
+          return false
+        }
+        if(this.contentEditor.getValue().length < 2){
+          this.$message.warning("请输入文章内容")
+          return false
+        }
+        return true
+      },
       // add
       add(){
-        this.adding = true
+        this.update()
-        if(this.filename){
+        // if(!this.checkParam()){
-          const filename = this.filename + ".md"
+        //   return
-          markdownApi.addMarkdown({
+        // }
-            userId: this.$store.state.user.userId,
+        // this.updating = true
-            username: this.$store.state.user.name,
+        // const filename = this.filename + ".md"
-            filename: filename,
+        // markdownApi.addMarkdown({
-            cover: this.markdownCover,
+        //   userId: this.$store.state.user.userId,
-            currentDirectory: this.storageLocation,
+        //   username: this.$store.state.user.name,
-            contentText: this.contentEditor.getValue()
+        //   filename: filename,
-          }).then((res) => {
+        //   cover: this.file.cover,
-            this.adding = false
+        //   categoryIds: this.getCategoryList(),
-            this.$message({
+        //   currentDirectory: this.storageLocation,
-              message: "发布成功",
+        //   contentText: this.contentEditor.getValue()
-              type: 'success',
+        // }).then(() => {
-              duration : 1000
+        //   this.updating = false
-            });
+        //   this.$message({
-            this.$router.push(`/`)
+        //     message: "发布成功",
-          })
+        //     type: 'success',
-        }
+        //     duration : 1000
+        //   });
+        // }).catch(()=> {
+        //   this.updating = false
+        // })
+      },
+      getCategoryList(){
+        let categoryIdList = []
+        this.categoryIds.forEach(categoryIds => {
+          categoryIdList.push(categoryIds[0])
+        })
+        return categoryIdList
       },
       // update
       update(){
+        if(!this.checkParam()){
+          return
+        }
         this.updating = true
         if(this.filename){
           const filename = this.filename + ".md"
@@ -290,16 +354,19 @@
             userId: this.$store.state.user.userId,
             username: this.$store.state.user.name,
             filename: filename,
-            cover: this.markdownCover,
+            cover: this.file.cover,
+            categoryIds: this.getCategoryList(),
             currentDirectory: this.storageLocation,
             contentText: this.contentEditor.getValue()
           }).then(() => {
             this.updating = false
             this.$message({
-              message: "更新成功",
+              message: "发布成功",
               type: 'success',
               duration : 1000
             });
+          }).catch(()=> {
+            this.updating = false
           })
         }
       },

src/views/setting/articles/articleManager.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="container" v-wechat-title="title">
+  <div class="container" v-wechat-title="pageTitle">
     <el-dialog
-      title="新增文章"
+      :title="pageTitle"
       :fullscreen="true"
       :visible.sync="newArticleDialogVisible"
+      :before-close="handleClose"
+      :destroy-on-close="true"
+      @open="openDialog"
       @close="closeDialog"
     >
-      <markdown-editor></markdown-editor>
+      <markdown-editor ref="editor" :has-change.sync="hasChange" @onTitle="onTitle"></markdown-editor>
     </el-dialog>
     <el-card class="box-card">
       <div class="box-card-header">
@@ -30,23 +33,87 @@ export default {
   },
   data() {
     return {
-      title: "文章管理",
       newArticleDialogVisible: false,
+      pageTitle: '文章管理',
+      hasChange: false
     }
   },
   computed: {},
   mounted() {
-    if(this.$route.query.operation){
+    this.newArticleDialogVisible = !!this.$route.query.operation;
-      this.newArticleDialogVisible = true
+    // 监听返回
+    if (window.history && window.history.pushState) {
+      history.pushState(null, null, document.URL);
+      window.addEventListener('popstate', this.goBack, false);
+    }
+    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
+  },
+  watch: {
+    hasChange(val){
+      if(val){
+        window.onbeforeunload = function() {
+          return "还有文件正在上传, 确定退出吗?";
+        }
+      }
     }
   },
   methods: {
+    beforeunloadFn(){
+      console.log('beforeunloadFn')
+      return '是的发生'
+    },
+    goBack() {
+      const operation = this.$route.query.operation
+      console.log(operation)
+      if(operation){
+        this.newArticleDialogVisible = true
+        if(operation === 'new') {
+          this.pageTitle = '撰写新文章'
+        }
+        if(operation === 'editor') {
+          this.pageTitle = '编辑文章'
+        }
+      } else {
+        this.newArticleDialogVisible = false
+      }
+    },
     newArticle() {
       this.newArticleDialogVisible = true
       this.$router.push({path: this.$route.path, query: {operation: 'new'}})
     },
+    handleClose(done) {
+      console.log(this.hasChange)
+      if(this.hasChange){
+        this.$confirm('还有未保存的内容，确定要离开吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          done()
+        })
+        return
+      }
+      done()
+    },
+    onTitle(val){
+      const operation = this.$route.query.operation
+      if(operation === 'new'){
+        this.pageTitle = '撰写新文章 ' + val
+      }
+      if(operation === 'editor'){
+        this.pageTitle = '编辑：' + val
+      }
+    },
+    openDialog() {
+      this.pageTitle = '撰写新文章'
+      console.log('pageTitle')
+    },
     closeDialog(){
+      console.log('closeDialog')
       this.$router.replace({path: this.$route.path})
+      window.onbeforeunload = null
+      this.pageTitle = '文章管理'
+      this.hasChange = false
     }
   }
 }