update

src/api/video.js

@@ -18,7 +18,6 @@ const videoApi = {
   videoInfoApi: '/api/content/video/detail',
   videoUrlApi: '/api/content/video/url',
 
-  videoErrorReportApi: '/api/content/video/report',
   videoDownloadApi: '/api/content/video/download',
   cacheBiliApi: '/api/content/video/cache/bili',
   shortUrlApi: '/api/content/video/share',
@@ -126,16 +125,6 @@ export function videoUrl(videoId) {
 }
 
 // *********************************************************************************************************************
-// 报告视频错误
-export function videoErrorReport(data) {
-  return post(videoApi.videoErrorReportApi, data)
-}
-
-// 报告视频错误
-export function videoErrorDelete(data) {
-  return post(videoApi.videoErrorReportApi, data)
-}
-
 // 下载视频
 export function downloadVideo(videoId) {
   return get(videoApi.videoDownloadApi + '/' + videoId)

src/api/video_edit.js

@@ -0,0 +1,31 @@
+import { get, post } from '@/utils/request'
+
+const editVideoApi = {
+  videoErrorReportApi: '/api/content/video/edit/report',
+  getVipTags: '/api/content/video/edit/vip_tags',
+  updateVideoUserApi: '/api/content/video/edit/update_owner'
+}
+
+// 报告视频错误
+export function videoErrorReport(data) {
+  return post(editVideoApi.videoErrorReportApi, data)
+}
+
+// 报告视频错误
+export function videoErrorDelete(data) {
+  return post(editVideoApi.videoErrorReportApi, data)
+}
+
+// 用户视频时间线
+export function getVipTags() {
+  return get(editVideoApi.getVipTags)
+}
+
+export function updateVipTags(payload) {
+  return post(editVideoApi.getVipTags, payload)
+}
+
+// 编辑视频所有者
+export function updateVideoOwner(payload) {
+  return post(editVideoApi.updateVideoUserApi, payload)
+}

src/components/card/EditVideoCard.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <el-dialog
+      append-to-body
+      :visible.sync="createDialog"
+      :before-close="handleClose"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>视频标签编辑</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="submitEditVideo">提交编辑结果</el-button>
+        </div>
+        <div class="text item">
+          <div v-for="(vipTag, index) in candidateList" :key="index">
+            <el-row>
+              <el-checkbox v-model="vipTag.checkAll" :indeterminate="vipTag.isIndeterminate" @change="handleCheckAllChange4">
+                全选<span style="color: red">({{ vipTag.title }})</span>
+              </el-checkbox>
+              <div style="margin: 15px 0;" />
+              <el-checkbox-group v-model="vipTag.checked" @change="handleCheckedCitiesChange4">
+                <el-checkbox v-for="name in vipTag.candidates" :key="name" :label="name">{{ name }}</el-checkbox>
+              </el-checkbox-group>
+            </el-row>
+            <el-divider />
+          </div>
+        </div>
+      </el-card>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getVipTags, updateVipTags } from '@/api/video_edit'
+
+export default {
+  name: 'EditVideoCard',
+  props: {
+    video: {
+      type: Object,
+      default: null
+    },
+    createDialog: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      item: {
+        title: '',
+        checkAll: false,
+        checked: [],
+        candidates: [],
+        isIndeterminate: true
+      },
+      candidateList: [],
+      vipTags: []
+    }
+  },
+  mounted() {
+    this.getVipTagsWrapper()
+  },
+  created() {
+  },
+  methods: {
+    getVipTagsWrapper() {
+      getVipTags().then(resp => {
+        this.vipTags = resp.data
+        for (const item of this.vipTags) {
+          var candidates = []
+          for (const i of item.children) {
+            candidates.push(i.name)
+          }
+
+          this.candidateList.push({
+            title: item.name,
+            checkAll: false,
+            checked: [],
+            candidates: candidates,
+            isIndeterminate: true
+          })
+        }
+      })
+    },
+    handleClose() {
+      // 取消和 x 按钮的事件，防止重复操作createDialog变量
+      this.$emit('closeDialog')
+    },
+    // ****************************************************************************************************************
+    handleCheckAllChange4(val) {
+      // this.$message.info('handleCheckAllChange4')
+      // this.checkedCities4 = val ? this.cities4 : []
+      // this.isIndeterminate4 = false
+    },
+    handleCheckedCitiesChange4(value) {
+      // this.$message.info('handleCheckAllChange4')
+      // const checkedCount = value.length
+      // this.checkAll4 = checkedCount === this.cities4.length
+      // this.isIndeterminate4 = checkedCount > 0 && checkedCount < this.cities4.length
+    },
+    // ****************************************************************************************************************
+    submitEditVideo() {
+      var tags = []
+      for (const item of this.candidateList) {
+        for (const i of item.checked) {
+          tags.push(i)
+        }
+      }
+
+      var jsonData = {}
+      jsonData.videoId = this.video.videoId
+      jsonData.tags = tags
+      updateVipTags(jsonData).then(resp => {
+        if (resp.code !== 0) {
+          this.$message.info('submit edit video failed')
+        }
+      }).finally(() => {
+        this.$emit('closeDialog')
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/card/VideoCard.vue

@@ -28,8 +28,8 @@
         </router-link>
         <div style="padding: 14px">
           <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${video.videoId}`">
-            <span style="left: 0;margin-bottom: 0px;color: black;">
-              {{ video.title | ellipsis }}
+            <span style="left: 0;margin-bottom: 0px;color: black;" v-html="video.title">
+<!--              {{ video.title | ellipsis }}-->
             </span>
           </router-link>
         </div>

src/components/upload/PublishRichText.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>发布文章</span>
+          <el-button style="float: right; padding: 10px" type="text" @click="submitQuestion">提交数据</el-button>
+          <el-button style="float: right; padding: 10px" type="text" @click="clear">清空数据</el-button>
+        </div>
+        <div class="text item">
+          <editor id="tinymce" v-model="textContent" :init="init" />
+        </div>
+      </el-card>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import tinymce from 'tinymce/tinymce'
+import 'tinymce/themes/silver/theme'
+import 'tinymce/plugins/image'
+import 'tinymce/plugins/code'
+import 'tinymce/skins/content/default/content.css'
+import 'tinymce/themes/silver/theme.min.js'
+import 'tinymce/icons/default/icons'
+
+import Editor from '@tinymce/tinymce-vue'
+
+import { uploadFile } from '@/api/file'
+import {submitArticle} from "@/api/article";
+
+export default {
+  name: 'PublishRichText',
+  components: { Editor },
+  data() {
+    return {
+      tinymceHtml: '请输入内容',
+      init: {
+        language_url: '/tinymce/zh_CN.js',
+        language: 'zh_CN',
+        skin_url: '/tinymce/skins/ui/oxide',
+        height: 600,
+        external_plugins: {
+          'mathjax': '/tinymce/mathjax/plugin.min.js'
+        },
+        mathjax: {
+          lib: '/tinymce/mathjax/tex-mml-chtml.js'
+        },
+        plugins: 'image code',
+        toolbar: 'mathjax bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | image code | removeformat',
+        branding: false,
+        images_upload_handler: function(blobInfo, success, failure) {
+          // base64转本地上传
+          // 这个函数主要处理word中的图片，并自动完成上传；
+          // 自己定义的一个函数；在回调中，记得调用success函数，传入上传好的图片地址；
+          // blobInfo.blob() 得到图片的file对象；
+          const file = blobInfo.blob()
+          const formData = new FormData()
+          formData.append('file', file)
+          uploadFile(formData).then(resp => {
+            if (resp.code === 0) {
+              success(resp.data.url)
+            } else {
+              failure(resp.msg)
+            }
+          }).catch(err => {
+            failure(err)
+          }).finally(() => {
+          })
+        }
+      },
+      textContent: ''
+    }
+  },
+  created() {
+    document.title = '发布文章'
+  },
+  methods: {
+    submitQuestion() {
+      this.$message.info('submit article')
+      console.log(this.textContent)
+
+      const jsonData = {}
+      jsonData.title = '全人類的胸部大概只有這七種形狀？'
+      jsonData.content = this.textContent
+      submitArticle(jsonData).then(resp => {
+        if (resp.code !== 0) {
+          this.$message.error(resp.msg)
+        } else {
+          this.$message.info('文章已发布')
+          this.textContent = ''
+        }
+      })
+    },
+    clear() {
+      this.textContent = ''
+      this.$notify({
+        title: 'Tips',
+        message: '已清空',
+        type: 'success',
+        duration: 500
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/router/index.js

@@ -19,6 +19,7 @@ const ShareVideo = () => import('views/home/ShareVideo')
 const Home = () => import('views/home/Home')
 const TimelineIndex = () => import('views/home/Timeline')
 const VideoIndex = () => import('views/home/Video')
+const VideoList = () => import('views/home/VideoList')
 const VideoTag = () => import('views/home/VideoTag')
 const ShortVideoIndex = () => import('views/home/ShortVideo')
 const VideoPage = () => import('views/home/VideoPage')
@@ -115,6 +116,12 @@ const routes = [
         component: VideoIndex,
         meta: { needAuth: false }
       },
+      {
+        path: '/edit/videolist/:userId',
+        name: 'VideoList',
+        component: VideoList,
+        meta: { needAuth: false }
+      },
       {
         path: '/video/:id',
         name: 'VideoPage',

src/router/vod.js

@@ -13,7 +13,8 @@ const PostEditAudio = () => import('components/upload/EditAudio')
 const PostPublishAlbum = () => import('components/upload/PublishImage')
 const UserPostImage = () => import('views/post/ImagePost')
 const ImagePostEdit = () => import('views/post/ImagePostEdit')
-const PostPublishArticle = () => import('components/upload/PublishArticle')
+// const PostPublishArticle = () => import('components/upload/PublishArticle')
+const PostPublishArticle = () => import('components/upload/PublishRichText')
 const UserPostArticle = () => import('views/post/ArticlePost')
 const PostEditArticle = () => import('components/upload/EditArticle')
 
@@ -31,27 +32,27 @@ export default {
     },
     // ********************************************************************************************************************
     {
-      path: '/post/publish/audio',
-      name: '发布音频',
-      component: PostPublishAudio,
+      path: '/post/article/list',
+      name: '文章稿件',
+      component: UserPostArticle,
       meta: { needAuth: true }
     },
     {
-      path: '/post/publish/article',
+      path: '/post/article/publish',
       name: '发布文章',
       component: PostPublishArticle,
       meta: { needAuth: true }
     },
     {
-      path: '/post/list/audio',
-      name: '音频稿件',
-      component: UserPostAudio,
+      path: '/post/publish/audio',
+      name: '发布音频',
+      component: PostPublishAudio,
       meta: { needAuth: true }
     },
     {
-      path: '/post/list/article',
-      name: '文章稿件',
-      component: UserPostArticle,
+      path: '/post/list/audio',
+      name: '音频稿件',
+      component: UserPostAudio,
       meta: { needAuth: true }
     },
     {

src/views/exam/ExamQuestionAdd.vue

@@ -292,14 +292,13 @@
 </template>
 
 <script>
-import tinymce from 'tinymce/tinymce'
 import 'tinymce/themes/silver/theme'
 import 'tinymce/plugins/image'
 import 'tinymce/plugins/code'
 import Editor from '@tinymce/tinymce-vue'
 
 import { getSubjectKV, addQuestion } from '@/api/exam'
-import {uploadFile} from "@/api/file";
+import { uploadFile } from '@/api/file'
 
 export default {
   name: 'ExamQuestionAdd',

src/views/home/ArticlePage.vue

@@ -132,16 +132,16 @@ export default {
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px) {
   .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
+    padding-top: 5px;
+    padding-left: 3px;
+    padding-right: 3px;
   }
 }
 
 .movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
+  padding-top: 5px;
+  padding-left: 3px;
+  padding-right: 3px;
 }
 
 .clearfix:before,

src/views/home/PlaylistView.vue

@@ -140,7 +140,8 @@ import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
 import flvjs from 'flv.js'
 import DPlayer from 'dplayer'
 
-import { videoUrl, videoInfo, videoErrorDelete } from '@/api/video'
+import { videoUrl, videoInfo } from '@/api/video'
+import { videoErrorDelete } from '@/api/video_edit'
 import { getPlaylistItems } from '@/api/collect'
 import { getUserInfo } from '@/api/user'
 

src/views/home/Search.vue

@@ -10,31 +10,34 @@
       </el-breadcrumb-item>
     </el-breadcrumb>
 
-    <el-row class="movie-list">
-      <el-col :md="6">
+    <el-row>
+      <el-col :md="6" class="movie-list">
         <hot-search :card-prop="cardProp" />
       </el-col>
       <el-col v-loading="loading" :md="18">
-        <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
-          <video-card :video="video" />
-        </el-col>
-        <!--
-					分页按钮：
-						page-size：每页显示条数
-						total：总条数
-						hide-on-single-page： 页数为一时隐藏
-				-->
-        <el-col :span="24" class="pagination">
-          <el-pagination
-            background
-            hide-on-single-page
-            layout="prev, pager, next"
-            :current-page="currentPage"
-            :page-size="pageSize"
-            :total="total"
-            @current-change="handleCurrentChange"
-          />
-        </el-col>
+        <el-row class="movie-list">
+          <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
+            <video-card :video="video" />
+          </el-col>
+          <!--
+            分页按钮：
+              page-size：每页显示条数
+              total：总条数
+              hide-on-single-page： 页数为一时隐藏
+          -->
+          <el-col :span="24" class="pagination">
+            <el-pagination
+              background
+              :small="screenWidth <= 768"
+              hide-on-single-page
+              layout="prev, pager, next"
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :total="total"
+              @current-change="handleCurrentChange"
+            />
+          </el-col>
+        </el-row>
       </el-col>
     </el-row>
     <el-row v-if="showEmpty" class="not-result">
@@ -132,9 +135,9 @@ export default {
 
 <style scoped>
 	#search-list {
-		padding-left: 6%;
-		padding-right: 6%;
-		padding-top: 30px;
+		padding-left: 3px;
+		padding-right: 3px;
+		padding-top: 3px;
 	}
 
 	.bread {

src/views/home/VideoList.vue

@@ -0,0 +1,214 @@
+<template>
+  <div>
+    <el-row class="movie-list">
+      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
+      <el-button style="float: right; padding: 3px 0" type="text" @click="onSubmit">发布</el-button>
+    </el-row>
+    <!--电影列表，与推荐列表-->
+    <el-row class="movie-list">
+      <!--电影列表-->
+      <el-col>
+        <el-checkbox-group v-model="checkedVideos" @change="handleCheckedChange">
+          <el-checkbox v-for="video in dataList" :key="video.videoId" :label="video.videoId">
+            <div style="cursor: pointer" :title="video.title">
+              <el-image
+                lazy
+                fit="cover"
+                class="coverImg"
+                :src="video.coverUrl"
+              />
+              <span style="position: absolute; top: 0; left: 60%; color:red"> {{ video.duration }} </span>
+              <div style="padding: 14px">
+                <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${video.videoId}`">
+                  <span style="left: 0;margin-bottom: 0px;color: black;">
+                    {{ video.title | ellipsis }}
+                  </span>
+                </router-link>
+              </div>
+            </div>
+          </el-checkbox>
+        </el-checkbox-group>
+        <el-col :span="24" class="pagination">
+          <el-pagination
+            :small="screenWidth <= 768"
+            layout="prev, pager, next"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :total="totalSize"
+            @current-change="handleCurrentChange"
+          />
+        </el-col>
+      </el-col>
+    </el-row>
+
+    <el-dialog :visible.sync="showDialog" width="30%" center>
+      <el-card class="box-card" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <div slot="header" class="clearfix">
+          <span>修改视频所有者</span>
+          <el-button style="float: right; padding: 10px" type="text" @click="onUpdate">保存修改</el-button>
+        </div>
+        <div class="text item">
+          <el-input
+            v-model="jsonData.newUserId"
+            placeholder="新用户 ID"
+            style="margin-left: 5px;width: 220px"
+            prefix-icon="el-icon-search"
+          />
+        </div>
+      </el-card>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getUserVideos } from '@/api/video'
+import { updateVideoOwner } from '@/api/video_edit'
+import { getUserInfo } from '@/api/user'
+
+export default {
+  name: 'VideoList',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 20
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 120,
+      totalSize: 0,
+      dataList: [],
+      checkAll: false,
+      checkedVideos: [],
+      cityOptions: [],
+      isIndeterminate: true,
+      showDialog: false,
+      jsonData: {
+        oldUserId: null,
+        newUserId: null,
+        videoIds: null
+      }
+    }
+  },
+  created() {
+    document.title = 'VideoList'
+    this.userId = this.$route.params.userId
+    var pnStr = this.$route.query.pn
+    if (pnStr === null || pnStr === undefined) {
+      pnStr = 1
+    }
+
+    getUserInfo(this.userId).then(resp => {
+      if (resp.code === 0) {
+        this.user = resp.data
+        document.title = this.user.screenName + '的视频'
+      }
+    })
+
+    this.currentPage = parseInt(pnStr)
+    this.userVideoListWrapper(this.currentPage, this.userId)
+  },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
+  methods: {
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.$router.push({
+        path: '/edit/videolist/' + this.userId,
+        query: {
+          pn: this.currentPage
+        }
+      })
+      this.$router.go(0)
+    },
+    userVideoListWrapper(pageNumber, userId) {
+      this.dataList = []
+      this.totalSize = 0
+      getUserVideos(userId, pageNumber).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalSize = respData.totalSize
+          this.showEmpty = this.dataList.length === 0
+
+          for (const item of this.dataList) {
+            // 使用 videoId 作为 checked 的值
+            this.cityOptions.push(item.videoId)
+          }
+        }
+      })
+    },
+    handleCheckAllChange(val) {
+      this.checkedVideos = val ? this.cityOptions : []
+      this.isIndeterminate = false
+    },
+    handleCheckedChange(value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.cityOptions.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityOptions.length
+      // console.log(value)
+    },
+    onSubmit() {
+      this.jsonData.oldUserIdStr = this.userId
+      // this.jsonData.newUserId = 10196
+      this.jsonData.videoIds = this.checkedVideos
+
+      this.showDialog = true
+    },
+    onUpdate() {
+      updateVideoOwner(this.jsonData).then(resp => {
+        if (resp.code !== 0) {
+          this.$message.error(resp.msg)
+        } else {
+          this.checkedVideos = []
+          this.checkAll = false
+          this.$router.go(0)
+        }
+      }).finally(e => {
+        this.showDialog = false
+
+        this.jsonData.oldUserIdStr = this.userId
+        this.jsonData.newUserId = null
+        this.jsonData.videoIds = []
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.movie-list {
+  padding-top: 5px;
+  padding-left: 1%;
+  padding-right: 1%;
+}
+
+.pagination {
+  text-align: center;
+  padding: 10px;
+}
+
+.imgs {
+  position: relative;
+}
+
+.coverImg {
+  width: 100%;
+  height: 175px;
+  display: block;
+}
+</style>

src/views/home/VideoPage.vue

@@ -77,15 +77,6 @@
                 >
                   <span>下载</span>
                 </el-button>
-                <el-button
-                  type="danger"
-                  size="mini"
-                  icon="el-icon-delete"
-                  class="tag"
-                  @click="deleteVideo(video)"
-                >
-                  <span>删除</span>
-                </el-button>
                 <el-button
                   type="warning"
                   size="mini"
@@ -95,6 +86,26 @@
                 >
                   <span>报错</span>
                 </el-button>
+                <div v-if="showEdit">
+                  <el-button
+                    type="danger"
+                    size="mini"
+                    icon="el-icon-delete"
+                    class="tag"
+                    @click="deleteVideo(video)"
+                  >
+                    <span>删除</span>
+                  </el-button>
+                  <el-button
+                    type="danger"
+                    size="mini"
+                    icon="el-icon-edit"
+                    class="tag"
+                    @click="displayEditDialog"
+                  >
+                    <span>编辑</span>
+                  </el-button>
+                </div>
               </div>
             </div>
             <div class="text item">
@@ -260,7 +271,7 @@
                   lazy
                   fit="cover"
                   class="coverImg"
-                  :src="this.video.coverUrl"
+                  :src="video.coverUrl"
                 />
               </div>
             </el-row>
@@ -272,6 +283,8 @@
         </el-row>
         <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px" />
       </el-dialog>
+      <!-- 视频编辑对话框 -->
+      <edit-video-card :video="video" :create-dialog="showEditDialog" @closeDialog="closeHandle" />
     </el-row>
   </el-row>
   <el-row v-else>
@@ -284,9 +297,11 @@ import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
 import VideoPlayer from 'components/VideoPlayer'
 import SideVideoCard from 'components/card/SideVideoCard'
 import UserAvatarCard from '@/components/card/UserAvatarCard'
+import EditVideoCard from '@/components/card/EditVideoCard'
 import comment from '@/components/comment'
 
-import { similarVideo, videoInfo, videoErrorReport, downloadVideo, getShortUrl, videoErrorDelete } from '@/api/video'
+import { similarVideo, videoInfo, downloadVideo, getShortUrl } from '@/api/video'
+import { videoErrorReport, videoErrorDelete } from '@/api/video_edit'
 import { collectItem, createAlbum, getUserPlaylist } from '@/api/collect'
 import { getUserInfo } from '@/api/user'
 import { publishComment, getComment } from '@/api/comment'
@@ -295,7 +310,7 @@ import { dislikeVideo } from '@/api/content'
 
 export default {
   name: 'VideoPage',
-  components: { SideVideoCard, VideoPlayer, UserAvatarCard, PermissionDeniedCard, comment },
+  components: { EditVideoCard, SideVideoCard, VideoPlayer, UserAvatarCard, PermissionDeniedCard, comment },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -365,7 +380,9 @@ export default {
         albumName: null
       },
       multipleSelection: [],
-      showShareVideoDialog: false
+      showShareVideoDialog: false,
+      showEditDialog: false,
+      showEdit: true
     }
   },
   watch: {
@@ -693,6 +710,13 @@ export default {
     displayShareVideoDialog() {
       this.showShareVideoDialog = true
     },
+    displayEditDialog() {
+      this.showEditDialog = true
+    },
+    closeHandle() {
+      // 控制取消和X按钮，关闭弹窗
+      this.showEditDialog = false
+    },
     submitShareVideo() {
       this.showShareVideoDialog = false
       getShortUrl(this.video.videoId).then(resp => {

src/views/post/ArticlePost.vue

@@ -1,6 +1,11 @@
 <template>
-  <el-row>
-    <el-row :md="6" :sm="12" :xs="12">
+  <el-container>
+    <el-header height="220">
+      <el-row style="margin-top: 10px">
+        <el-button type="plain" icon="el-icon-plus" @click="goToArticlePublish">发布文章</el-button>
+      </el-row>
+    </el-header>
+    <el-main :md="6" :sm="12" :xs="12">
       <el-table
         :data="dataList"
         style="width: 100%"
@@ -90,7 +95,7 @@
           </div>
         </el-card>
       </el-dialog>
-    </el-row>
+    </el-main>
     <el-row>
       <el-pagination
         background
@@ -104,7 +109,7 @@
         @next-click="handleCurrentChange"
       />
     </el-row>
-  </el-row>
+  </el-container>
 </template>
 
 <script>
@@ -206,6 +211,10 @@ export default {
           duration: 3000
         })
       })
+    },
+    goToArticlePublish() {
+      this.$message.info('publish article')
+      this.$router.push('/post/article/publish')
     }
   }
 }

src/views/post/Post.vue

@@ -54,6 +54,10 @@
                 <i class="el-icon-picture" />
                 <span slot="title">图片稿件</span>
               </el-menu-item>
+              <el-menu-item index="/post/article/list">
+                <i class="el-icon-picture" />
+                <span slot="title">文章稿件</span>
+              </el-menu-item>
             </el-menu-item-group>
           </el-submenu>
           <el-menu-item index="/post/album">