medical-mall/layouts/admin/components/AdminAside.uvue

<template>
  <view class="admin-aside" :class="{ collapsed: collapsed }" :style="{ width: asideWidth + 'px' }">
    <view class="aside-logo" @click="onLogoClick">
      <text class="logo-text">{{ collapsed ? 'M' : 'MALL' }}</text>
    </view>

    <view class="aside-menu">
      <view 
        v-for="menu in topMenus" 
        :key="menu.id"
        class="menu-item"
        :class="{ active: menu.id === activeTopMenuId }"
        @click="onMenuClick(menu)"
      >
        <view class="menu-icon">
          <text class="icon-text">{{ getIconText(menu.icon) }}</text>
        </view>
        <view v-if="!collapsed" class="menu-title">
          <text>{{ menu.title }}</text>
        </view>
      </view>
    </view>

    <!-- 1:1 复刻 CRMEB: 一级侧边栏通常不单独折叠，由顶部汉堡菜单控制整体 -->
    <!-- <view class="aside-footer" @click="onToggle">
      <view class="toggle-btn">
        <text class="toggle-icon">{{ collapsed ? '>' : '<' }}</text>
      </view>
    </view> -->
  </view>
</template>

<script setup lang="uts">
import type { TopMenu } from '@/layouts/admin/router/adminRoutes.uts'
import { isMobile } from '@/layouts/admin/store/adminNavStore.uts'

const props = defineProps<{
  collapsed: boolean
  topMenus: TopMenu[]
  activeTopMenuId: string
  asideWidth: number
}>()

const emit = defineEmits<{
  (e: 'toggle'): void
  (e: 'menu-click', menu: TopMenu): void
}>()

function getIconText(icon: string): string {
  const iconMap: Record<string, string> = {
    'home': '🏠',
    'user': '👥',
    'product': '📦',
    'order': '📜',
    'marketing': '📉',
    'share': '✈️',
    'customer-service': '💬',
    'finance': '💰',
    'content': '📝',
    'decoration': '🎨',
    'app': '📱',
    'setting': '⚙️',
    'tool': '🛠️',
    'statistic': '📊'
  }
  return iconMap[icon] || icon.charAt(0).toUpperCase()
}

function onMenuClick(menu: TopMenu): void {
  emit('menu-click', menu)
}

function onToggle(): void {
  emit('toggle')
}

function onLogoClick(): void {
  const homeMenu = props.topMenus.find(m => m.id === 'home')
  if (homeMenu) {
    emit('menu-click', homeMenu)
  }
}
</script>

<style scoped lang="scss">
.admin-aside {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: #001529;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  z-index: 1002; /* 确保在遮罩层之上 */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.aside-logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  .logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
  }
}

.aside-menu {
  flex: 1;
  padding: 0; /* CRMEB typically no padding here */
  overflow-y: scroll;
}

.menu-item {
  height: 50px; /* 1:1 CRMEB columnsAside height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s;
  position: relative;
  
  &:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  &.active {
    background: #1890ff; /* CRMEB 主色蓝 */
    color: #fff;
  }
}

.menu-icon {
  font-size: 18px; /* CRMEB icons are smaller than 24px usually */
  margin-bottom: 2px;
  
  .icon-text {
    display: block;
  }
}

.menu-title {
  font-size: 12px;
  transform: scale(0.9); /* CRMEB text is tiny */
  text-align: center;
  
  text {
    display: block;
  }
}

.aside-footer {
  height: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  &:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}

.toggle-btn {
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px;
  
  .toggle-icon {
    display: block;
  }
}

.admin-aside.collapsed {
  .menu-item {
    height: 50px;
  }
  
  .menu-icon {
    margin-bottom: 0;
  }
}
</style>