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

src/components/layout/PostBar.vue → src/components/layout/MyBar.vue

@@ -3,9 +3,9 @@
     <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">
+          <a href="/my" style="color: #007bff;text-decoration-line: none">
             <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
-            tnb
+            my
           </a>
         </li>
       </ul>
@@ -61,39 +61,6 @@
               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"
@@ -101,11 +68,6 @@
               >退出</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">
@@ -113,15 +75,6 @@
           </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>
@@ -133,7 +86,7 @@ import { keywordSuggest } from '@/api/search'
 import { getAuthedUser } from '@/utils/auth'
 
 export default {
-  name: 'PostBar',
+  name: 'MyBar',
   mixins: [userMixin],
   data() {
     return {

src/views/my/My.vue

@@ -1,158 +1,164 @@
 <template>
   <el-container>
-    <el-aside id="aside-style">
-      <!--    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
-      <el-radio-button :label="false">展开</el-radio-button>
-      <el-radio-button :label="true">收起</el-radio-button>
-    </el-radio-group>-->
-      <el-menu
-        :default-active="this.$route.path"
-        router
-        class="el-menu-vertical-demo"
-        :collapse="isCollapse"
-        @open="handleOpen"
-        @close="handleClose"
-      >
-        <el-submenu index="/my/account">
-          <template slot="title">
-            <i class="el-icon-user" />
-            <span slot="title">帐号管理</span>
-          </template>
-          <el-menu-item-group>
-            <el-menu-item index="/my/account/profile">
-              <i class="el-icon-film" />
-              <span slot="title">个人资料</span>
-            </el-menu-item>
-            <el-menu-item index="/my/account/vip">
-              <i class="el-icon-film" />
-              <span slot="title">小会员</span>
-            </el-menu-item>
-          </el-menu-item-group>
-        </el-submenu>
-        <el-submenu index="/my/post">
-          <template slot="title">
-            <i class="el-icon-postcard" />
-            <span slot="title">稿件管理</span>
-          </template>
-          <el-submenu index="/my/post/publish">
+    <el-main>
+      <my-bar />
+      <el-aside id="aside-style">
+        <!--    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+        <el-radio-button :label="false">展开</el-radio-button>
+        <el-radio-button :label="true">收起</el-radio-button>
+      </el-radio-group>-->
+        <el-menu
+          :default-active="this.$route.path"
+          router
+          class="el-menu-vertical-demo"
+          :collapse="isCollapse"
+          @open="handleOpen"
+          @close="handleClose"
+        >
+          <el-submenu index="/my/account">
             <template slot="title">
-              <i class="el-icon-plus" />
-              <span slot="title">发布</span>
+              <i class="el-icon-user" />
+              <span slot="title">帐号管理</span>
             </template>
             <el-menu-item-group>
-              <el-menu-item index="/my/post/publish/video">
+              <el-menu-item index="/my/account/profile">
                 <i class="el-icon-film" />
-                <span slot="title">视频</span>
-              </el-menu-item>
-              <el-menu-item index="/my/post/publish/audio">
-                <i class="el-icon-headset" />
-                <span slot="title">音频</span>
-              </el-menu-item>
-              <el-menu-item index="/my/post/publish/image">
-                <i class="el-icon-picture" />
-                <span slot="title">相册</span>
-              </el-menu-item>
-              <el-menu-item index="/my/post/publish/article">
-                <i class="el-icon-document" />
-                <span slot="title">文章</span>
+                <span slot="title">个人资料</span>
               </el-menu-item>
-              <el-menu-item index="/my/post/publish/file">
-                <i class="el-icon-files" />
-                <span slot="title">文件</span>
+              <el-menu-item index="/my/account/vip">
+                <i class="el-icon-film" />
+                <span slot="title">小会员</span>
               </el-menu-item>
             </el-menu-item-group>
           </el-submenu>
-          <el-submenu index="/my/post/list">
+          <el-submenu index="/my/post">
+            <template slot="title">
+              <i class="el-icon-postcard" />
+              <span slot="title">稿件管理</span>
+            </template>
+            <el-submenu index="/my/post/publish">
+              <template slot="title">
+                <i class="el-icon-plus" />
+                <span slot="title">发布</span>
+              </template>
+              <el-menu-item-group>
+                <el-menu-item index="/my/post/publish/video">
+                  <i class="el-icon-film" />
+                  <span slot="title">视频</span>
+                </el-menu-item>
+                <el-menu-item index="/my/post/publish/audio">
+                  <i class="el-icon-headset" />
+                  <span slot="title">音频</span>
+                </el-menu-item>
+                <el-menu-item index="/my/post/publish/image">
+                  <i class="el-icon-picture" />
+                  <span slot="title">相册</span>
+                </el-menu-item>
+                <el-menu-item index="/my/post/publish/article">
+                  <i class="el-icon-document" />
+                  <span slot="title">文章</span>
+                </el-menu-item>
+                <el-menu-item index="/my/post/publish/file">
+                  <i class="el-icon-files" />
+                  <span slot="title">文件</span>
+                </el-menu-item>
+              </el-menu-item-group>
+            </el-submenu>
+            <el-submenu index="/my/post/list">
+              <template slot="title">
+                <i class="el-icon-s-data" />
+                <span slot="title">稿件</span>
+              </template>
+              <el-menu-item-group>
+                <el-menu-item index="/my/post/list/video">
+                  <i class="el-icon-film" />
+                  <span slot="title">视频</span>
+                </el-menu-item>
+                <el-menu-item index="/my/post/list/audio">
+                  <i class="el-icon-headset" />
+                  <span slot="title">音频</span>
+                </el-menu-item>
+                <el-menu-item index="/my/post/list/image">
+                  <i class="el-icon-picture" />
+                  <span slot="title">相册</span>
+                </el-menu-item>
+                <el-menu-item index="/my/post/list/article">
+                  <i class="el-icon-document" />
+                  <span slot="title">文章</span>
+                </el-menu-item>
+              </el-menu-item-group>
+            </el-submenu>
+          </el-submenu>
+          <el-submenu index="/my/favlist">
             <template slot="title">
-              <i class="el-icon-s-data" />
-              <span slot="title">稿件</span>
+              <i class="el-icon-collection" />
+              <span slot="title">收藏夹</span>
             </template>
             <el-menu-item-group>
-              <el-menu-item index="/my/post/list/video">
+              <el-menu-item index="/my/favlist/video">
                 <i class="el-icon-film" />
                 <span slot="title">视频</span>
               </el-menu-item>
-              <el-menu-item index="/my/post/list/audio">
-                <i class="el-icon-headset" />
-                <span slot="title">音频</span>
-              </el-menu-item>
-              <el-menu-item index="/my/post/list/image">
+              <el-menu-item index="/my/favlist/image">
                 <i class="el-icon-picture" />
                 <span slot="title">相册</span>
               </el-menu-item>
-              <el-menu-item index="/my/post/list/article">
-                <i class="el-icon-document" />
-                <span slot="title">文章</span>
+            </el-menu-item-group>
+          </el-submenu>
+          <el-menu-item index="/my/visit">
+            <i class="el-icon-document" />
+            <span slot="title">历史记录</span>
+          </el-menu-item>
+          <el-submenu index="/my/message">
+            <template slot="title">
+              <i class="el-icon-message" />
+              <span slot="title">我的消息</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/my/message/send">
+                <i class="el-icon-right" />
+                <span slot="title">发出的消息</span>
+              </el-menu-item>
+              <el-menu-item index="/my/message/receive">
+                <i class="el-icon-back" />
+                <span slot="title">收到的消息</span>
+              </el-menu-item>
+              <el-menu-item index="/my/message/private">
+                <i class="el-icon-bell" />
+                <span slot="title">私信</span>
               </el-menu-item>
             </el-menu-item-group>
           </el-submenu>
-        </el-submenu>
-        <el-submenu index="/my/favlist">
-          <template slot="title">
-            <i class="el-icon-collection" />
-            <span slot="title">收藏夹</span>
-          </template>
-          <el-menu-item-group>
-            <el-menu-item index="/my/favlist/video">
-              <i class="el-icon-film" />
-              <span slot="title">视频</span>
-            </el-menu-item>
-            <el-menu-item index="/my/favlist/image">
-              <i class="el-icon-picture" />
-              <span slot="title">相册</span>
-            </el-menu-item>
-          </el-menu-item-group>
-        </el-submenu>
-        <el-menu-item index="/my/visit">
-          <i class="el-icon-document" />
-          <span slot="title">历史记录</span>
-        </el-menu-item>
-        <el-submenu index="/my/message">
-          <template slot="title">
-            <i class="el-icon-message" />
-            <span slot="title">我的消息</span>
-          </template>
-          <el-menu-item-group>
-            <el-menu-item index="/my/message/send">
-              <i class="el-icon-right" />
-              <span slot="title">发出的消息</span>
-            </el-menu-item>
-            <el-menu-item index="/my/message/receive">
-              <i class="el-icon-back" />
-              <span slot="title">收到的消息</span>
-            </el-menu-item>
-            <el-menu-item index="/my/message/private">
-              <i class="el-icon-bell" />
-              <span slot="title">私信</span>
-            </el-menu-item>
-          </el-menu-item-group>
-        </el-submenu>
-        <el-submenu index="/my/cam">
-          <template slot="title">
-            <i class="el-icon-camera" />
-            <span slot="title">我的监控</span>
-          </template>
-          <el-menu-item-group>
-            <el-menu-item index="/my/cam/list">
+          <el-submenu index="/my/cam">
+            <template slot="title">
               <i class="el-icon-camera" />
-              <span slot="title">摄像头列表</span>
-            </el-menu-item>
-          </el-menu-item-group>
-        </el-submenu>
-      </el-menu>
-    </el-aside>
-    <el-main>
-      <!--      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
-      </el-breadcrumb>-->
+              <span slot="title">我的监控</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/my/cam/list">
+                <i class="el-icon-camera" />
+                <span slot="title">摄像头列表</span>
+              </el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+        </el-menu>
+      </el-aside>
+      <div>
+        <h3>我的后台</h3>
+      </div>
       <router-view />
     </el-main>
   </el-container>
 </template>
 
 <script>
+import MyBar from 'components/layout/MyBar'
+
 export default {
+  name: 'My',
+  components: {
+    MyBar
+  },
   data() {
     return {
       isCollapse: false,