YG_FT/frontend/src/components/AppSidebar.vue

<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import type { PermissionCode } from '@/types'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()

/** 当前激活菜单 key（取路由路径第一段，如 /fine-tune/create → fine-tune） */
const activeMenu = computed(() => {
  const seg = route.path.split('/')[1] || 'dashboard'
  // 训练日志归到模型调优
  if (seg === 'training-log') return 'fine-tune'
  // 维度管理归到模型评测
  if (route.path.includes('model-eval/dimension')) return 'model-eval'
  // 对比对话归到模型推理
  if (route.path.startsWith('/model-compare/chat')) return 'model-inference'
  // 合并权重归到模型管理
  if (route.path === '/model-manage/merge') return 'model-manage'
  // 模型管理编辑
  if (route.path.match(/^\/model-manage\/\d+\/edit/)) return 'model-manage'
  // 数据集编辑/预览
  if (route.path.match(/^\/dataset\/(\d+)/)) return 'dataset'
  // 工具编辑
  if (route.path.match(/^\/tools\/[^/]+\/edit/)) return 'tools'
  return seg
})

interface MenuItem {
  key: string
  label: string
  icon: string
  to: string
  permission: PermissionCode
}

interface MenuGroup {
  title?: string
  showTitle?: boolean
  items: MenuItem[]
}

const menuGroups: MenuGroup[] = [
  {
    // 服务看板：独立入口，不显示分类小标题
    showTitle: false,
    items: [{ key: 'dashboard', label: '服务看板', icon: 'fa-tachometer', to: '/dashboard', permission: 'dashboard' }],
  },
  {
    title: '模型服务',
    items: [
      { key: 'fine-tune', label: '模型训练', icon: 'fa-cogs', to: '/fine-tune', permission: 'fine-tune' },
      { key: 'model-eval', label: '模型评测', icon: 'fa-line-chart', to: '/model-eval', permission: 'model-eval' },
      { key: 'model-inference', label: '模型推理', icon: 'fa-server', to: '/model-inference', permission: 'model-inference' },
      { key: 'model-manage', label: '模型管理', icon: 'fa-cube', to: '/model-manage', permission: 'model-manage' },
    ],
  },
  {
    title: '数据治理',
    items: [
      { key: 'dataset', label: '数据集管理', icon: 'fa-file-text', to: '/dataset', permission: 'dataset' },
      { key: 'data-process', label: '数据处理', icon: 'fa-filter', to: '/data-process', permission: 'data-process' },
    ],
  },
  {
    title: '其他工具',
    items: [{ key: 'data-convert', label: '数据类型转换', icon: 'fa-exchange', to: '/data-convert', permission: 'data-convert' }],
  },
  {
    title: '算力资源',
    items: [
      { key: 'compute', label: '算力节点', icon: 'fa-microchip', to: '/compute', permission: 'compute' },
    ],
  },
  {
    title: '平台治理',
    items: [
      { key: 'tenants', label: '租户管理', icon: 'fa-building', to: '/tenants', permission: 'user-settings' },
      { key: 'projects', label: '项目空间', icon: 'fa-folder', to: '/projects', permission: 'user-settings' },
      { key: 'audit-logs', label: '审计日志', icon: 'fa-history', to: '/audit-logs', permission: 'user-settings' },
      { key: 'approval-templates', label: '审批模板', icon: 'fa-list-alt', to: '/approval-templates', permission: 'user-settings' },
      { key: 'approval-instances', label: '审批中心', icon: 'fa-check-square', to: '/approval-instances', permission: 'user-settings' },
    ],
  },
  {
    title: '系统设置',
    items: [
      { key: 'user-settings', label: '用户设置', icon: 'fa-users', to: '/user-settings', permission: 'user-settings' },
      { key: 'hardware', label: '平台性能', icon: 'fa-bar-chart', to: '/hardware', permission: 'hardware' },
      { key: 'logs', label: '查看日志', icon: 'fa-file-text', to: '/logs', permission: 'logs' },
    ],
  },
]

const visibleMenuGroups = computed(() =>
  menuGroups
    .map((group) => ({
      ...group,
      items: group.items.filter((item) => {
        if (!auth.hasPermission(item.permission)) return false
        // user-settings 权限对应的菜单仅管理员可见
        if (item.permission === 'user-settings' && !auth.isAdmin) return false
        // 算力节点仅管理员可见
        if (item.permission === 'compute' && !auth.isAdmin) return false
        return true
      }),
    }))
    .filter((group) => group.items.length > 0),
)

/**
 * 传给 el-menu 的激活值。
 *
 * el-menu 在点击菜单项时会立即把内部高亮移到被点击项，再触发 @select。
 * 若随后 router.push 被路由守卫拦截（如未保存草稿确认），route.path 不变，
 * activeMenu 也不会变化，导致 el-menu 无法把高亮校正回当前路由对应的项。
 * 这里用一个可写 ref 包裹，导航失败时主动触发一次「置空 → 还原」，
 * 强制 el-menu 重新对齐到真实激活项。
 */
const menuActive = ref(activeMenu.value)

watch(activeMenu, (value) => {
  menuActive.value = value
})

async function handleSelect(key: string) {
  const all = visibleMenuGroups.value.flatMap((g) => g.items)
  const target = all.find((i) => i.key === key)
  if (!target) return

  const failure = await router.push(target.to)
  // 导航被守卫取消（如未保存修改确认）时，把高亮校正回当前路由
  if (failure) {
    menuActive.value = ''
    await nextTick()
    menuActive.value = activeMenu.value
  }
}

async function handleLogout() {
  await auth.logout()
  router.push('/login')
}
</script>

<template>
  <aside class="app-sidebar">
    <!-- 平台 LOGO -->
    <div class="sidebar-logo">
      <img src="/logo.png" alt="Logo" class="sidebar-logo-img" />
      <span class="logo-text">远光软件微调平台</span>
    </div>

    <!-- 导航 -->
    <el-scrollbar class="sidebar-nav" wrap-class="nav-scrollbar-wrap">
      <el-menu
        :default-active="menuActive"
        class="sidebar-menu"
        background-color="transparent"
        text-color="var(--sidebar-text)"
        active-text-color="var(--sidebar-active-text)"
        @select="handleSelect"
      >
        <template v-for="group in visibleMenuGroups" :key="group.title || group.items[0].key">
          <div v-if="group.title" class="sidebar-section-title">{{ group.title }}</div>
          <el-menu-item
            v-for="item in group.items"
            :key="item.key"
            :index="item.key"
          >
            <i class="fa" :class="item.icon" />
            <span>{{ item.label }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>

    <!-- 底部信息 -->
    <div class="sidebar-footer">
      <div class="footer-user" v-if="auth.username">
        <el-avatar :size="36" class="user-avatar">{{ auth.displayName?.slice(0, 1) || '?' }}</el-avatar>
        <div class="user-info">
          <span class="user-name">{{ auth.displayName }}</span>
          <span class="user-role">{{ auth.roleLabel }}</span>
        </div>
        <el-tooltip content="退出登录" placement="top">
          <div class="logout-btn" @click="handleLogout">
            <i class="fa fa-sign-out" />
          </div>
        </el-tooltip>
      </div>
    </div>
  </aside>
</template>

<style scoped lang="scss">
.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  height: 100vh;
  background-color: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  color: var(--sidebar-text);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02);
  z-index: 100;
  border-right: 1px solid #e2e8f0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 24px 20px;
  margin-bottom: 8px;

  .sidebar-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-right: 12px;
  }

  .logo-text {
    color: #334155;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 0 12px;
}

:deep(.nav-scrollbar-wrap) {
  overflow-x: hidden;
}

.sidebar-menu {
  border-right: none;
  background: transparent;

  :deep(.el-menu-item) {
    height: 46px;
    line-height: 46px;
    margin-bottom: 4px;
    border-radius: 8px;
    padding: 0 16px !important;
    transition: all 0.3s ease;

    .fa {
      width: 20px;
      text-align: center;
      margin-right: 10px;
      font-size: 16px;
      transition: transform 0.2s;
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.03) !important;
      color: var(--sidebar-active-text) !important;
      
      .fa {
        transform: scale(1.1);
      }
    }

    &.is-active {
      background-color: var(--sidebar-active-bg) !important;
      color: var(--sidebar-active-text) !important;
      font-weight: 600;

      .fa {
        color: inherit;
      }
    }
  }
}

.sidebar-section-title {
  padding: 16px 16px 8px;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-footer {
  padding: 20px;
  background: transparent;
  border-top: 1px solid #e2e8f0;

  .footer-user {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;

    .user-avatar {
      border: 2px solid #e2e8f0;
    }

    .user-info {
      flex: 1;
      margin-left: 12px;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .user-name {
        color: #334155;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      
      .user-role {
        color: #64748b;
        font-size: 11px;
        margin-top: 2px;
      }
    }

    .logout-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: #94a3b8;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        background: rgba(239, 68, 68, 0.1);
        color: var(--danger-color);
      }
    }
  }
}
</style>