视图修改、接口修改

schoolNewsWeb/src/components/base/MenuItem.vue

@@ -8,7 +8,12 @@
         @click="toggleExpanded"
       >
         <div class="menu-item-inner">
-          <i class="menu-icon" :class="menu.icon || 'icon-folder'"></i>
+          <img 
+            v-if="menu.icon" 
+            :src="String(PUBLIC_IMG_PATH + '/' + menu.icon)" 
+            class="tab-icon"
+            :alt="String(menu.name || '')"
+          />
           <span class="menu-title">{{ menu.name }}</span>
           <img 
             src="@/assets/imgs/arrow-down.svg"
@@ -44,7 +49,12 @@
         @click="handleClick"
       >
         <div class="menu-item-inner">
-          <i class="menu-icon" :class="menu.icon || 'icon-file'"></i>
+          <img 
+            v-if="menu.icon" 
+            :src="String(PUBLIC_IMG_PATH + '/' + menu.icon)" 
+            class="tab-icon"
+            :alt="String(menu.name || '')"
+          />
           <span class="menu-title">{{ menu.name }}</span>
         </div>
       </div>
@@ -57,7 +67,7 @@ import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import type { SysMenu } from '@/types';
 import { MenuType } from '@/types/enums';
-
+import { PUBLIC_IMG_PATH} from '@/config'
 // 递归组件需要声明名称（Vue 3.5+）
 defineOptions({
   name: 'MenuItem'
@@ -153,15 +163,12 @@ function handleClick() {
   line-height: 1.43;
 }
 
-.menu-icon {
-  font-size: 16px;
+.tab-icon {
   width: 16px;
-  text-align: center;
+  height: 16px;
   margin-right: 12px;
-  
-  .collapsed & {
-    margin-right: 0;
-  }
+  flex-shrink: 0;
+  object-fit: contain;
 }
 
 .menu-title {
@@ -211,12 +218,4 @@ function handleClick() {
   opacity: 0;
   transform: translateY(-10px);
 }
-
-/* 图标字体类（简单实现，实际项目中使用图标库） */
-.icon-folder::before { content: "📁"; }
-.icon-file::before { content: "📄"; }
-.icon-dashboard::before { content: "📊"; }
-.icon-user::before { content: "👤"; }
-.icon-news::before { content: "📰"; }
-.icon-settings::before { content: "⚙️"; }
 </style>