更新 /admin 路由下页面的导航栏

src/components/layout/AdminBar.vue

@@ -0,0 +1,236 @@
+<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="/my" style="color: #007bff;text-decoration-line: none">
+            <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
+            my
+          </a>
+        </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-error"
+                class="size"
+                @click.native="goToLogout"
+              >退出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </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: 'AdminBar',
+  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/views/admin/Admin.vue

@@ -1,5 +1,6 @@
 <template>
   <el-container>
+    <admin-bar/>
     <el-aside id="aside-style">
       <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
         <el-radio-button :label="false">展开</el-radio-button>
@@ -42,7 +43,13 @@
 </template>
 
 <script>
+import AdminBar from 'components/layout/AdminBar'
+
 export default {
+  name: 'Admin',
+  components: {
+    AdminBar
+  },
   data() {
     return {
       isCollapse: false,