开始后台页面的导航栏调整, 主要是为了适配移动端

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="app">
     <!--导航栏-->
-    <nav-bar />
+    <nav-bar v-if="type===1" />
+    <post-bar v-else-if="type===2" />
     <!--下面的部分通过路由动态决定渲染与否-->
     <!--exclude,其值为正则，匹配到的组件的名称会被排除在keep-alive之外-->
     <keep-alive exclude="Collection,History">
@@ -16,13 +17,20 @@
 
 <script>
 import NavBar from 'components/layout/NavBar'
+import PostBar from 'components/layout/PostBar'
 import FooterBar from 'components/layout/FooterBar'
 
 export default {
   name: 'App',
   components: {
     FooterBar,
-    NavBar
+    NavBar,
+    PostBar
+  },
+  data() {
+    return {
+      type: 2
+    }
   },
   created() {
     /**

src/components/layout/PostBar.vue

@@ -0,0 +1,330 @@
+<template>
+  <el-row class="el-menu-demo">
+    <el-col :md="2">
+      <ul role="menubar" class="el-menu--horizontal el-menu">
+        <li role="menuitem" class="el-menu-item">
+          <a href="/" style="color: #007bff;text-decoration-line: none">
+            <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
+            tnb
+          </a>
+        </li>
+      </ul>
+    </el-col>
+    <el-col :md="8">
+      <el-menu
+        mode="horizontal"
+      >
+        <el-submenu index="1">
+          <template slot="title">稿件发布</template>
+          <el-menu-item index="1-1">
+            <a href="/my/post/publish/video" style="text-decoration-line: none">
+              <span style="color: #007bff">视频</span>
+            </a>
+          </el-menu-item>
+        </el-submenu>
+        <el-submenu index="2">
+          <template slot="title">稿件列表</template>
+          <el-menu-item index="2-1">
+            <a href="/my/post/list/video" style="text-decoration-line: none">
+              <span style="color: #007bff">视频</span>
+            </a>
+          </el-menu-item>
+        </el-submenu>
+        <el-submenu index="3">
+          <template slot="title">收藏夹</template>
+          <el-menu-item index="3-1">
+            <a href="/my/post/list/video" style="text-decoration-line: none">
+              <span style="color: #007bff">视频</span>
+            </a>
+          </el-menu-item>
+        </el-submenu>
+        <el-menu-item index="4">
+          <a href="//my/visit" style="text-decoration-line: none">
+            <span style="color: #007bff">历史记录</span>
+          </a>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :md="8">
+      <ul class="el-menu--horizontal el-menu">
+        <li class="el-menu-item">
+        </li>
+      </ul>
+    </el-col>
+    <el-col :md="6">
+      <ul class="el-menu--horizontal el-menu">
+        <li class="el-menu-item">
+          <el-dropdown v-if="user">
+            <img
+              :src="user.avatarUrl"
+              class="el-avatar--circle el-avatar--medium"
+              alt=""
+            >
+            <el-dropdown-menu v-if="user" slot="dropdown" class="iconsize">
+              <el-dropdown-item
+                icon="el-icon-files"
+                class="size"
+                @click.native="goToDisk"
+              >我的网盘</el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-user-solid"
+                class="size"
+                @click.native="goToProfile"
+              >我的帐号</el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-s-home"
+                class="size"
+                @click.native="goToHome"
+              >我的主页</el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-s-data"
+                class="size"
+                @click.native="goToPost"
+              >我的稿件
+              </el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-star-on"
+                class="size"
+                @click.native="goToFavlist"
+              >收藏夹
+              </el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-video-camera-solid"
+                class="size"
+                @click.native="goToHistory"
+              >历史记录
+              </el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-error"
+                class="size"
+                @click.native="goToLogout"
+              >退出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <span
+            v-else
+            style="color: #007bff"
+            @click="login"
+          >登录</span>
+        </li>
+        <li class="el-menu-item" @click="goToTimeline">
+          <el-badge v-if="statusCount > 0" class="item" :value="statusCount" :max="99">
+            <span class="el-icon-view" style="color: #007bff">状态</span>
+          </el-badge>
+          <span v-else class="el-icon-view" style="color: #007bff">状态</span>
+        </li>
+        <li class="el-menu-item" @click="goToMessage">
+          <el-badge v-if="msgCount > 0" class="item" :value="msgCount" :max="99">
+            <span class="el-icon-bell" style="color: #007bff">消息</span>
+          </el-badge>
+          <span v-else class="el-icon-bell" style="color: #007bff">消息</span>
+        </li>
+        <li class="el-menu-item">
+          <el-button size="mini" type="upload" icon="el-icon-upload" @click="goToPublish">投稿</el-button>
+        </li>
+      </ul>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { userMixin } from 'assets/js/mixin'
+import { keywordSuggest } from '@/api/search'
+import { getAuthedUser } from '@/utils/auth'
+
+export default {
+  name: 'PostBar',
+  mixins: [userMixin],
+  data() {
+    return {
+      user: null,
+      activeIndex: '1',
+      restaurants: [],
+      placeholder: '想要搜点神马呢',
+      keyword: '',
+      statusCount: 0,
+      msgCount: 0
+    }
+  },
+  created() {
+    /* const userdata = Vue.$cookies.get('USERDATA')
+    const userId = userdata.split(':')[0]*/
+    const userInfo = getAuthedUser()
+    if (userInfo !== null) {
+      this.user = userInfo
+    }
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    // ****************************************************************************************************************
+    // 重点：当框中的改变时触发该方法，elementui自动设置了防抖，参见debounce属性
+    // queryString 为输入框中的值。cb为返回显示列表的回调函数
+    querySearchAsync(queryString, cb) {
+      if (queryString === '') {
+        return
+      }
+
+      setTimeout(() => {
+        keywordSuggest(queryString).then(res => {
+          if (res.code === 0) {
+            this.restaurants = res.data.map((item) => {
+              return {
+                value: item.keyword,
+                rank: 1
+              }
+            })
+
+            // 如果 cb 返回一个空数组, 那么模糊搜索输入建议的下拉选项会因为 length 为 0 而消失
+            // cb([])
+            cb(this.restaurants)
+            // eslint-disable-next-line no-empty
+          } else {
+          }
+        })
+      }, 500)
+    },
+    // select 事件或 enter 键事件
+    onSearch() {
+      console.log('回车事件')
+      // 正则去空格
+      if (this.keyword.replace(/\s*/g, '')) {
+        this.toSearchPage()
+      } else {
+        this.$message({
+          showClose: true,
+          message: '不能为空！',
+          type: 'warning'
+        })
+      }
+    },
+    // 跳转搜索页面，传递搜索框的参数
+    toSearchPage() {
+      const currentPath = this.$route.path
+      if (currentPath === '/search') {
+        this.$router.push({
+          path: '/search',
+          query: {
+            keyword: this.keyword,
+            pageNumber: 1
+          }
+        })
+        this.$router.go(0)
+      } else {
+        const routeUrl = this.$router.resolve({
+          path: '/search',
+          query: {
+            keyword: this.keyword,
+            pageNumber: 1
+          }
+        })
+        window.open(routeUrl.href, '_blank')
+      }
+    },
+    // ****************************************************************************************************************
+    login1() {
+      this.fetchPubkey()
+      this.dialogVisible = true
+    },
+    login() {
+      const path = '/login'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    register() {
+      window.open('//account.reghao.cn/login', '_blank')
+    },
+    // ****************************************************************************************************************
+    goToDisk() {
+      const path = '/disk'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToProfile() {
+      const path = '/my'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToTimeline() {
+      const path = '/timeline'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToHome() {
+      const path = '/user/' + this.user.userId
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToPost() {
+      if (this.$route.path === '/my/post/list/video') {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push('/my/post/list/video')
+    },
+    goToFavlist() {
+      if (this.$route.path === '/my/favlist/video') {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push('/my/favlist/video')
+    },
+    goToHistory() {
+      if (this.$route.path === '/my/visit') {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push('/my/visit')
+    },
+    goToMessage() {
+      if (this.$route.path === '/my/message/receive') {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push('/my/message/receive')
+    },
+    goToPublish() {
+      if (this.$route.path === '/my/post/publish/video') {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push('/my/post/publish/video')
+    }
+  }
+}
+</script>
+
+<style scoped>
+@media screen and (max-width: 768px) {
+}
+
+.logo {
+  width: 30px;
+  position: relative;
+}
+
+.size {
+  font-size: 16px;
+}
+
+.item {
+  margin-top: 10px;
+  margin-right: 10px;
+}
+</style>

src/router/index.js

@@ -37,14 +37,16 @@ const UserRelation = () => import('views/user/UserRelation')
 // 用户后台主页
 const My = () => import('views/my/My')
 const MyProfile = () => import('views/my/MyProfile')
+// 消息
+const MessageIndex = () => import('views/my/Message')
 const MyVip = () => import('views/my/MyVip')
+
+const MyPost = () => import('views/my/MyPost')
 // 收藏夹
 const FavlistVideo = () => import('views/my/FavlistVideo')
 const FavlistImage = () => import('views/my/FavlistImage')
 // 浏览记录
 const HistoryIndex = () => import('views/my/History')
-// 消息
-const MessageIndex = () => import('views/my/Message')
 
 const CamList = () => import('views/post/CamList')
 
@@ -107,6 +109,44 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/my/post',
+    name: 'MyPost',
+    /* component: MyPost,*/
+    meta: { needAuth: true },
+    children: [
+      {
+        path: '/my/post/publish/video',
+        name: '发布视频',
+        component: PostPublishVideo,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/my/post/publish/audio',
+        name: '发布音频',
+        component: PostPublishAudio,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/my/post/publish/image',
+        name: '发布相册',
+        component: PostPublishAlbum,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/my/post/publish/article',
+        name: '发布文章',
+        component: PostPublishArticle,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/my/post/publish/file',
+        name: '发布文件',
+        component: PostPublishFile,
+        meta: { needAuth: true }
+      }
+    ]
+  },
   {
     path: '/my/post/publish',
     name: 'MyPostPublish',
@@ -148,7 +188,7 @@ const routes = [
   {
     path: '/my/post/list',
     name: 'MyPostList',
-    component: My,
+    component: MyPost,
     meta: { needAuth: true },
     children: [
       {

src/views/my/MyPost.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-container>
+    <el-main>
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  /*  watch: {
+    // 地址栏 url 发生变化时重新加载本页面
+    $route() {
+      this.$router.go()
+    }
+  },*/
+  created() {
+    document.title = '我的稿件'
+  },
+  methods: {
+  }
+}
+</script>
+
+<style>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 800px;
+}
+
+#aside-style {
+  min-width: 120px;
+  max-width: 240px;
+  width: 30%;
+}
+</style>