优化字典模块

pc/src/components/CommonHeader.vue

@@ -5,9 +5,11 @@
         <i class="fa fa-bars"></i>
       </el-button>
       <el-breadcrumb separator="/" class="bread">
-        <el-breadcrumb-item :to="{ path: '/' }" style="position: relative !important; top: 1px !important;">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/' }"
+          style="position: relative !important; top: 1px !important;">首页</el-breadcrumb-item>
         <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index"
-          :to="(item.label === '首页' || index === breadcrumbs.length - 1) ? { path: item.path } : null" style="position: relative !important; top: 1px !important;">
+          :to="(item.label === '首页' || index === breadcrumbs.length - 1) ? { path: item.path } : null"
+          style="position: relative !important; top: 1px !important;">
           {{ item.label }}
         </el-breadcrumb-item>
       </el-breadcrumb>
@@ -21,6 +23,22 @@
       <el-button circle :icon="themeIcon" @click="toggleTheme" class="theme-toggle-btn"
         :title="currentTheme === 'dark' ? '切换到亮色模式' : '切换到暗色模式'" />
 
+      <!-- 消息中心 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link" style="cursor: pointer;">
+          <el-button circle class="message-btn" title="消息中心">
+            <el-icon>
+              <Bell />
+            </el-icon>
+          </el-button>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="message-menu" style="width: 260px;">
+            <el-dropdown-item disabled>暂无新消息</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+
       <el-dropdown trigger="click" @command="handleCommand">
         <span class="el-dropdown-link" style="cursor: pointer;">
           <img :src="getImageUrl('user')" class="user" />
@@ -45,6 +63,9 @@
       </el-dropdown>
     </div>
   </div>
+
+  <div class="message-center">
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -52,7 +73,7 @@ import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useAllDataStore, useMenuStore } from "@/stores";
 import { useAuthStore } from "@/stores/auth";
-import { User, SwitchButton, Sunny, Moon, Refresh } from '@element-plus/icons-vue';
+import { User, SwitchButton, Sunny, Moon, Refresh, Bell } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 
 const router = useRouter();
@@ -72,7 +93,6 @@ interface Breadcrumb {
 
 const menuStore = useMenuStore();
 const cacheLoading = ref(false);
-
 // 使用 store 中的菜单数据
 const menuList = computed(() => menuStore.menus);
 
@@ -360,7 +380,7 @@ onUnmounted(() => {
     height: 40px;
     border-radius: 50%;
     // 使用 Element Plus 的边框颜色变量
-    border: 2px solid var(--el-border-color);
+    // border: 2px solid var(--el-border-color);
     transition: border-color 0.3s ease;
 
     &:hover {
@@ -444,7 +464,11 @@ onUnmounted(() => {
   }
 }
 
-:deep(.el-tabs__nav){
+:deep(.el-tabs__nav) {
   height: 36px !important;
 }
+
+:deep(.el-button) {
+  margin-left: 0 !important;
+}
 </style>