xto-fronted 0.9.3 → 0.9.4

package/src/components/Layout/SidebarMenuItem.vue

@@ -29,10 +29,70 @@ const knownIcons = new Set([
   'moon', 'sun', 'theme', 'skin'
 ])
 
+// Element UI（el-icon-*）图标名到组件库图标名的映射：
+// sys_menu.icon 大量使用 el-icon-* 命名，不映射时只能退化为首字徽标
+const elIconMap: Record<string, string> = {
+  'el-icon-s-platform': 'system',
+  'el-icon-platform': 'system',
+  'el-icon-s-data': 'database',
+  'el-icon-data-analysis': 'chart',
+  'el-icon-files': 'folder',
+  'el-icon-folder': 'folder',
+  'el-icon-folder-opened': 'folder-open',
+  'el-icon-s-custom': 'user',
+  'el-icon-user': 'user',
+  'el-icon-s-grid': 'grid',
+  'el-icon-menu': 'list',
+  'el-icon-setting': 'setting',
+  'el-icon-s-tools': 'setting',
+  'el-icon-s-operation': 'setting',
+  'el-icon-s-home': 'home',
+  'el-icon-house': 'home',
+  'el-icon-document': 'document',
+  'el-icon-document-copy': 'copy',
+  'el-icon-monitor': 'dashboard',
+  'el-icon-odometer': 'dashboard',
+  'el-icon-s-order': 'list',
+  'el-icon-s-check': 'check',
+  'el-icon-s-claim': 'file',
+  'el-icon-s-comment': 'message',
+  'el-icon-s-promotion': 'share',
+  'el-icon-s-marketing': 'chart',
+  'el-icon-s-finance': 'chart',
+  'el-icon-s-management': 'list',
+  'el-icon-s-cooperation': 'user-group',
+  'el-icon-s-shop': 'gift',
+  'el-icon-picture': 'image',
+  'el-icon-location': 'location',
+  'el-icon-map-location': 'map',
+  'el-icon-lock': 'lock',
+  'el-icon-unlock': 'unlock',
+  'el-icon-key': 'key',
+  'el-icon-bell': 'bell',
+  'el-icon-edit': 'edit',
+  'el-icon-delete': 'delete',
+  'el-icon-link': 'link',
+  'el-icon-connection': 'link',
+  'el-icon-upload': 'upload',
+  'el-icon-upload2': 'upload',
+  'el-icon-download': 'download',
+  'el-icon-search': 'search',
+  'el-icon-timer': 'clock',
+  'el-icon-time': 'clock',
+  'el-icon-calendar': 'calendar',
+  'el-icon-view': 'eye',
+  'el-icon-message': 'mail',
+  'el-icon-chat-dot-round': 'chat',
+  'el-icon-cpu': 'server',
+  'el-icon-cloudy': 'cloud'
+}
+
 // 获取菜单图标名称
 const getMenuIcon = (icon?: string): string => {
   if (!icon || icon === '') return ''
 
+  if (elIconMap[icon]) return elIconMap[icon]
+
   if (icon.startsWith('tineco-icon-')) {
     const iconName = icon.replace('tineco-icon-', '')
     const tinecoIconMap: Record<string, string> = {
@@ -74,7 +134,7 @@ const getMenuIcon = (icon?: string): string => {
   return iconMap[icon] || icon
 }
 
-// 获取菜单名称第一个字
+// 获取菜单名称第一个字（无匹配图标时的兜底）
 const getFirstChar = (name?: string): string => {
   if (!name) return ''
   return name.charAt(0)
@@ -99,15 +159,11 @@ const hasChildren = computed(() => {
 <template>
   <!-- 有子菜单 -->
   <SubMenu v-if="hasChildren" :index="menuIndex">
-    <template #title>
-      <span class="menu-item__content">
-        <span class="menu-item__icon">
-          <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
-          <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
-        </span>
-        <span class="menu-item__text">{{ menu.menuName }}</span>
-      </span>
+    <template #icon>
+      <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+      <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
     </template>
+    <template #title>{{ menu.menuName }}</template>
     <!-- 递归渲染子菜单 -->
     <template v-for="child in menu.children" :key="child.menuId || child.menuCode || child.menuUrl">
       <SidebarMenuItem :menu="child" />
@@ -116,38 +172,15 @@ const hasChildren = computed(() => {
 
   <!-- 无子菜单 -->
   <MenuItem v-else :index="menu.menuUrl || menuIndex">
-    <span class="menu-item__content">
-      <span v-if="menu.menuName !== '首页'" class="menu-item__icon">
-        <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
-        <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
-      </span>
-      <span class="menu-item__text">{{ menu.menuName }}</span>
-    </span>
+    <template #icon>
+      <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+      <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
+    </template>
+    {{ menu.menuName }}
   </MenuItem>
 </template>
 
 <style lang="scss" scoped>
-.menu-item__content {
-  display: inline-flex;
-  align-items: center;
-  line-height: 1;
-}
-
-.menu-item__text {
-  flex: 1;
-  line-height: 1;
-}
-
-.menu-item__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-
 .menu-item__char {
   display: inline-flex;
   align-items: center;

package/src/components/Layout/index.vue

@@ -53,7 +53,11 @@ const showMixSidebar = computed(() => {
 <template>
   <!-- sidebar模式：左侧菜单 + 顶部Header + 主内容 -->
   <div v-if="layoutMode === 'sidebar'" class="layout layout--sidebar">
-    <aside class="layout__aside" :style="{ width: sidebarWidth }">
+    <aside
+      class="layout__aside"
+      :class="{ 'layout__aside--collapsed': appStore.isCollapsed }"
+      :style="{ width: sidebarWidth }"
+    >
       <Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" :logo-src="resolvedLogoSrc" />
     </aside>
     <div class="layout__main">
@@ -86,7 +90,12 @@ const showMixSidebar = computed(() => {
     </div>
     <!-- 下方：左侧子菜单 + 主内容 -->
     <div class="layout__mix-body">
-      <aside v-if="showMixSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
+      <aside
+        v-if="showMixSidebar"
+        class="layout__aside"
+        :class="{ 'layout__aside--collapsed': appStore.isCollapsed }"
+        :style="{ width: sidebarWidth }"
+      >
         <Sidebar :menu-list="sidebarMenuList" :show-logo="false" :show-user="false" />
       </aside>
       <main class="layout__content">
@@ -159,6 +168,11 @@ const showMixSidebar = computed(() => {
     overflow: hidden;
     flex-shrink: 0;
     height: 100%;
+
+    // 折叠态：弹出子菜单浮层需要溢出侧栏显示
+    &--collapsed {
+      overflow: visible;
+    }
   }
 
   &__top-menu {