样式修改

EdgeUser/web/views/@default/@layout.css

@@ -383,6 +383,12 @@ body.expanded .main {
 .top-nav .item.red {
   color: red !important;
 }
+.top-nav .item .hover-span span {
+  display: none;
+}
+.top-nav .item:hover .hover-span span {
+  display: inline;
+}
 /** 顶部菜单 **/
 .top-secondary-menu {
   position: fixed;

EdgeUser/web/views/@default/@layout.html

@@ -73,21 +73,27 @@
             </a>
 
             <div class="right menu">
-                <a href="/messages" class="item" :class="{active:teaMenu == 'message'}"><span
-                        :class="{'blink':globalMessageBadge > 0}"><i class="icon bell"></i>消息({{globalMessageBadge}})
-                    </span></a>
+                <a href="/messages" class="item" :class="{active:teaMenu == 'message'}">
+                    <span v-if="globalMessageBadge > 0" class="blink hover-span"><i
+                            class="icon bell"></i><span>消息({{globalMessageBadge}})</span></span>
+                    <span v-if="globalMessageBadge == 0" class="hover-span"><i class="icon bell disabled"></i><span
+                            class="disabled">消息(0)</span></span>
+                </a>
                 <a href="/settings/profile" class="item">
                     <i class="icon user" v-if="teaUserAvatar.length == 0"></i>
                     <img class="avatar" alt="" :src="teaUserAvatar" v-if="teaUserAvatar.length > 0" />
-                    {{teaUsername}}
+                    <span class="hover-span"><span class="disabled">{{teaUsername}}</span></span>
                 </a>
-                <a href="/docs" class="item" :class="{active: teaMenu == 'docs'}"><i class="icon file"></i>文档</a>
+                <a href="/docs" class="item" :class="{active: teaMenu == 'docs'}"><i class="icon file"></i><span
+                        class="hover-span"><span>文档</span></span></a>
                 <!-- 自定义主题颜色 -->
                 <theme-color-picker></theme-color-picker>
                 <a href="/" class="item" v-show="teaShowIndexPage">
-                    <i class="icon home"></i>首页
+                    <i class="icon home"></i><span class="hover-span"><span>首页</span></span>
+                </a>
+                <a :href="Tea.url('logout')" class="item" title="安全退出登录"><i class="icon sign out"></i>
+                    <span class="hover-span"><span class="disabled">退出</span></span>
                 </a>
-                <a :href="Tea.url('logout')" class="item" title="安全退出登录"><i class="icon sign out"></i>退出</a>
             </div>
         </div>