视图路径修改

schoolNewsWeb/src/components/base/MenuItem.vue

@@ -4,20 +4,18 @@
     <template v-if="hasChildren">
       <div 
         class="menu-item-content" 
-        :class="{ 
-          'active': isActive,
-          'collapsed': collapsed 
-        }"
+        :class="{ 'active': isActive }"
         @click="toggleExpanded"
       >
         <div class="menu-item-inner">
           <i class="menu-icon" :class="menu.icon || 'icon-folder'"></i>
-          <span class="menu-title" v-if="!collapsed">{{ menu.name }}</span>
-          <i 
+          <span class="menu-title">{{ menu.name }}</span>
+          <img 
+            src="@/assets/imgs/arrow-down.svg"
+            alt="arrow"
             class="expand-icon" 
             :class="{ 'expanded': expanded }"
-            v-if="!collapsed"
-          ></i>
+          />
         </div>
       </div>
       
@@ -25,13 +23,12 @@
       <transition name="submenu">
         <div 
           class="submenu" 
-          v-if="expanded && !collapsed"
+          v-if="expanded"
         >
           <MenuItem 
             v-for="child in filteredChildren"
             :key="child.menuID"
             :menu="child" 
-            :collapsed="false"
             :level="level + 1"
             @menu-click="$emit('menu-click', $event)"
           />
@@ -43,15 +40,12 @@
     <template v-else>
       <div 
         class="menu-item-content" 
-        :class="{ 
-          'active': isActive,
-          'collapsed': collapsed 
-        }"
+        :class="{ 'active': isActive }"
         @click="handleClick"
       >
         <div class="menu-item-inner">
           <i class="menu-icon" :class="menu.icon || 'icon-file'"></i>
-          <span class="menu-title" v-if="!collapsed">{{ menu.name }}</span>
+          <span class="menu-title">{{ menu.name }}</span>
         </div>
       </div>
     </template>
@@ -72,7 +66,6 @@ defineOptions({
 // Props
 interface Props {
   menu: SysMenu;
-  collapsed?: boolean;
   level?: number;
 }
 
@@ -126,45 +119,38 @@ function handleClick() {
 
 <style lang="scss" scoped>
 .menu-item {
-  margin: 2px 8px;
+  margin-bottom: 4px;
 }
 
 .menu-item-content {
   position: relative;
-  border-radius: 4px;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
+  height: 36px;
   
   &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(231, 0, 11, 0.05);
   }
   
   &.active {
-    background-color: #1890ff;
+    background-color: #E7000B;
     
     .menu-item-inner {
-      color: white;
+      color: #FFFFFF;
     }
   }
-  
-  &.collapsed {
-    margin: 4px 0;
-    text-align: center;
-  }
 }
 
 .menu-item-inner {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
-  color: rgba(255, 255, 255, 0.85);
+  height: 100%;
+  padding: 0 12px;
+  color: #0A0A0A;
   font-size: 14px;
-  line-height: 1;
-  
-  .collapsed & {
-    justify-content: center;
-    padding: 12px 8px;
-  }
+  font-weight: 500;
+  line-height: 1.43;
 }
 
 .menu-icon {
@@ -186,31 +172,30 @@ function handleClick() {
 }
 
 .expand-icon {
-  font-size: 12px;
-  transition: transform 0.2s ease;
+  width: 12px;
+  height: 12px;
+  transition: transform 0.3s ease;
   margin-left: auto;
-  
-  &::before {
-    content: "▶";
-  }
+  flex-shrink: 0;
   
   &.expanded {
-    transform: rotate(90deg);
+    transform: rotate(180deg);
   }
 }
 
 .submenu {
-  background-color: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
   margin: 4px 0;
   overflow: hidden;
   
+  .menu-item {
+    margin-bottom: 2px;
+  }
+  
   .menu-item-content {
-    margin: 0 4px;
-    
     .menu-item-inner {
-      padding-left: 48px;
-      font-size: 13px;
+      padding-left: 40px;
+      font-size: 14px;
+      font-weight: 400;
     }
   }
 }