页面样式，svg

schoolNewsWeb/src/components/base/ChangeHome.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="change-home" v-if="isAdmin">
-        <el-button type="primary" @click="changeHome">
+        <div class="change-home-item" @click="changeHome">
             <span v-if="home">前往用户页</span>
             <span v-else>前往管理页</span>
-        </el-button>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -32,4 +32,5 @@ onMounted(() => {
     home.value = router.currentRoute.value.path.startsWith('/admin');
 });
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+</style>

schoolNewsWeb/src/components/base/TopNavigation.vue

@@ -48,7 +48,6 @@
       <div class="nav-right">
               <!-- 搜索框 -->
         <Search @search="handleSearch" />
-        <ChangeHome />
         <Notice />
         <UserDropdown :user="userInfo" @logout="handleLogout" />
       </div>
@@ -63,7 +62,7 @@ import { useStore } from 'vuex';
 import type { SysMenu } from '@/types';
 import { MenuType } from '@/types/enums';
 // @ts-ignore - Vue 3.5 组件导入兼容性
-import {UserDropdown, Search, Notice, ChangeHome} from '@/components/base';
+import {UserDropdown, Search, Notice} from '@/components/base';
 const router = useRouter();
 const route = useRoute();
 const store = useStore();

schoolNewsWeb/src/components/base/UserDropdown.vue

@@ -60,13 +60,20 @@
             class="dropdown-item" 
             @click="goToMenu(menu)"
           >
-            <i class="item-icon">{{ getMenuIcon(menu) }}</i>
+            <img class="item-icon" :src="getMenuIcon(menu)" alt="菜单图标">
             <span>{{ menu.name }}</span>
           </div>
           <div class="dropdown-divider" v-if="userMenus.length > 0"></div>
-          <div class="dropdown-item danger" @click="handleLogout">
-            <i class="item-icon icon-logout"></i>
-            <span>退出登录</span>
+          <div class="dropdown-footer">
+            <div class="dropdown-item info">
+              <img class="item-icon icon-logout" src="@/assets/imgs/admin-home.svg" alt="切换页面">
+
+              <ChangeHome />
+            </div>
+            <div class="dropdown-item danger" @click="handleLogout">
+              <img class="item-icon icon-logout" src="@/assets/imgs/logout.svg" alt="退出登录">
+              <span>退出登录</span>
+            </div>
           </div>
         </template>
       </div>
@@ -79,7 +86,9 @@ import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import type { UserVO, SysMenu } from '@/types';
-
+import { ChangeHome } from '@/components/base';
+import userIcon from '@/assets/imgs/user.svg';
+import settingsIcon from '@/assets/imgs/settings.svg';
 // Props
 interface Props {
   user?: UserVO | null;
@@ -213,11 +222,10 @@ function goToMenu(menu: SysMenu) {
 function getMenuIcon(menu: SysMenu) {
   // 根据菜单ID返回对应图标
   if (menu.menuID === 'menu_user_center') {
-    return '👤';
+    return userIcon;
   } else if (menu.menuID === 'menu_profile') {
-    return '⚙️';
+    return settingsIcon;
   }
-  return '📋';
 }
 
 function handleLogout() {
@@ -367,6 +375,14 @@ const vClickOutside = {
   &:hover {
     background-color: #f5f5f5;
   }
+
+  &.info {
+    color: #1890ff;
+    
+    &:hover {
+      background-color: #e6f7ff;
+    }
+  }
   
   &.danger {
     color: #ff4d4f;
@@ -379,9 +395,12 @@ const vClickOutside = {
 
 .item-icon {
   width: 16px;
+  height: 16px;
   margin-right: 12px;
   text-align: center;
   font-size: 14px;
+  flex-shrink: 0;
+  object-fit: contain;
 }
 
 .dropdown-divider {
@@ -390,6 +409,13 @@ const vClickOutside = {
   margin: 4px 0;
 }
 
+.dropdown-footer {
+  display: flex;
+  flex-direction: column;
+  // padding: 12px 16px;
+  text-align: center;
+}
+
 /* 图标字体类 */
 .icon-login::before { content: "🔑"; }
 .icon-register::before { content: "📝"; }