有点黑框

src/layout/modules/MenuBar.vue

@@ -1,14 +1,14 @@
 <template>
-    <el-menu class="hc-aside-menu" :default-active="curKey" :collapse="isCollapse" unique-opened>
+    <el-menu :collapse="isCollapse" :default-active="curKey" class="hc-aside-menu" unique-opened>
         <el-menu-item index="home-index" @click="MenuClick({code: 'home-index'})">
             <div class="hc-aside-menu-item">
                 <div class="menu---item">
-                    <HcIcon name="home-3" :fill="curKey === 'home-index'" class="hc-menu-icon"/>
+                    <HcIcon :fill="curKey === 'home-index'" class="hc-menu-icon" name="home-3"/>
                     <div class="name">首页</div>
                 </div>
             </div>
         </el-menu-item>
-        <MenuItem :datas="datas" :cur="curKey" :collapse="isCollapse" :msgCount="msgCount" @change="MenuClick"/>
+        <MenuItem :collapse="isCollapse" :cur="curKey" :datas="datas" :msgCount="msgCount" @change="MenuClick"/>
     </el-menu>
 </template>
 
@@ -16,6 +16,7 @@
 import {ref, watch} from "vue";
 import MenuItem from "./MenuItem.vue"
 import {getToken} from "~src/api/util/auth";
+
 const props = defineProps({
     datas: {
         type: Array,
@@ -55,7 +56,7 @@ const MenuClick = (item) => {
     if (item?.code === 'to-archives-url') {
         const token = getToken()
         //refreshToken, accessToken
-        window.open(item?.path + '/#/auth?token=' + token,'_blank')
+        window.open(item?.path + '/#/auth?token=' + token, '_blank')
     } else {
         curKey.value = item?.code || '';
         emit('change', item)
@@ -239,7 +240,7 @@ const MenuClick = (item) => {
     .el-menu-item.is-active, .el-sub-menu.is-active {
         .hc-aside-menu-item {
             color: #ffffff !important;
-            background: linear-gradient(90deg,var(--el-color-primary-light-5), var(--el-color-primary) 100%);
+            background: linear-gradient(90deg, var(--el-color-primary-light-5), var(--el-color-primary) 100%);
             box-shadow: 0 2px 8px 0 var(--hc-shadow-color-5);
             &::before, &::after {
                 content: '';
@@ -251,6 +252,7 @@ const MenuClick = (item) => {
 .aside-menu-popper.el-popper.is-light {
     background: initial !important;
     border: 0 !important;
+    outline: none;
 }
 .aside-menu-popper.el-popper .el-menu--vertical .el-menu {
     --el-menu-bg-color: #f1f5f8;

src/layout/modules/UserInfoBar.vue

@@ -1,8 +1,8 @@
 <template>
     <el-dropdown size="large">
         <div class="header-bar user-info-bar">
-            <img class="user-avatar" :src="userInfo['avatar'] || avatarPng" :alt="userInfo['account']">
-            <span class="user-name">{{userInfo['real_name']}}</span>
+            <img :alt="userInfo['account']" :src="userInfo['avatar'] || avatarPng" class="user-avatar">
+            <span class="user-name">{{ userInfo['real_name'] }}</span>
             <HcIcon name="arrow-down-s" ui="arrow-icon"/>
         </div>
         <template #dropdown>
@@ -10,7 +10,7 @@
                 <el-dropdown-item v-for="item in options">
                     <div class="hc-dropdown-item" @click="handleSelect(item.key)">
                         <HcIcon :name="item.icon" class="icon"/>
-                        <span class="label">{{item.label}}</span>
+                        <span class="label">{{ item.label }}</span>
                     </div>
                 </el-dropdown-item>
             </el-dropdown-menu>
@@ -24,9 +24,9 @@ import {useRouter} from 'vue-router'
 import {useAppStore} from "~src/store";
 import website from "~src/config/index";
 import avatarPng from '~src/assets/images/avatar.png';
-import {RefreshToken,LogOut} from "~sto/user";
+import {RefreshToken, LogOut} from "~sto/user";
 import {getStoreData} from '~src/utils/storage'
-import {calcDate,isValueNull} from "vue-utils-plus"
+import {calcDate, isValueNull} from "vue-utils-plus"
 
 //变量
 const router = useRouter()
@@ -48,7 +48,7 @@ onMounted(() => {
 //刷新token
 const getRefreshToken = () => {
     setInterval(() => {
-        const token = getStoreData("token",true) || {};
+        const token = getStoreData("token", true) || {};
         const date = calcDate(token.datetime, new Date().getTime());
         if (isValueNull(date)) return;
         if (date.seconds >= website.tokenTime && !refreshLock.value) {
@@ -81,11 +81,11 @@ const options = [
 const emit = defineEmits(['change'])
 const handleSelect = async (key) => {
     if (key === 'my') {
-        router.push({name:'user-index'});
+        router.push({name: 'user-index'});
     } else if (key === 'logout') {
         await LogOut();
         window.$message?.info('退出成功');
-        router.push({name:'login'});
+        router.push({name: 'login'});
     }
 }
 </script>
@@ -98,6 +98,7 @@ const handleSelect = async (key) => {
     height: 100%;
     cursor: pointer;
     padding-left: 24px;
+    outline: none;
     .user-avatar {
         width: 40px;
         height: 40px;
@@ -137,7 +138,6 @@ const handleSelect = async (key) => {
     }
 }
 
-
 .hc-dropdown-item {
     display: flex;
     align-items: center;