devperf/frontend/src/components/layout/AppSidebar.vue

<script setup lang="ts">
/**
 * B-17 fix: Added "Projects" and "Members" navigation items to sidebar.
 * Projects shows a collapsible sub-menu listing projects from the API.
 * Members links to the member list page (admin/manager only).
 */
import { computed, ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NTag, NTooltip } from 'naive-ui';
import { useAuthStore } from '@/stores/auth';
import { useDashboardStore } from '@/stores/dashboard';
import { getAdminProjectsApi } from '@/api/admin';

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
const dashStore = useDashboardStore();

// B-17: Track whether the Projects sub-menu is expanded
const projectsExpanded = ref(false);
const projectList = ref<Array<{ projectId: string; name: string; identifier: string }>>([]);

async function loadProjectList() {
  try {
    const res = await getAdminProjectsApi();
    const list = res.data.data || [];
    projectList.value = list.map((p: any) => ({ projectId: p.id, name: p.name, identifier: p.identifier || '' }));
  } catch {
    // Silently fail
  }
}

onMounted(loadProjectList);

// 路由变化时刷新项目列表（如从项目列表页返回时）
watch(() => route.path, (newPath) => {
  if (newPath === '/projects') loadProjectList();
});

interface NavItem {
  label: string;
  key: string;
  icon: string;
  /** If true, this item has a sub-menu (projects) */
  hasSubmenu?: boolean;
}

const menuOptions = computed(() => {
  const role = authStore.user?.role;
  const items: NavItem[] = [
    { label: '团队总览', key: '/', icon: 'grid' },
    // B-17: Projects nav item
    { label: '项目', key: '/projects', icon: 'folder', hasSubmenu: true },
    { label: 'OKR', key: '/okr', icon: 'target' },
  ];

  if (role === 'admin' || role === 'manager' || role === 'developer') {
    items.push({ label: 'Git 活动', key: '/git', icon: 'git-branch' });
  }

  // B-17: Members nav item (admin/manager only)
  if (role === 'admin' || role === 'manager') {
    items.push({ label: '成员', key: '/members', icon: 'users' });
  }

  if (role === 'admin') {
    items.push({ label: '管理后台', key: '/admin', icon: 'settings' });
  }

  return items;
});

const activeKey = computed(() => {
  if (route.path === '/') return '/';
  if (route.path === '/projects') return '/projects';
  if (route.path.startsWith('/projects/')) return '/projects';
  if (route.path === '/members') return '/members';
  if (route.path.startsWith('/members/')) return '/members';
  if (route.path.startsWith('/okr')) return '/okr';
  if (route.path.startsWith('/git')) return '/git';
  if (route.path.startsWith('/admin')) return '/admin';
  return '/';
});

function handleMenuSelect(item: NavItem) {
  if (item.hasSubmenu) {
    // Toggle sub-menu expansion; also navigate to the projects list
    projectsExpanded.value = !projectsExpanded.value;
    router.push(item.key);
  } else {
    router.push(item.key);
  }

  // On mobile, close sidebar after navigation (unless expanding sub-menu)
  if (dashStore.isMobile && !item.hasSubmenu) {
    dashStore.closeMobileSidebar();
  }
}

function handleProjectSelect(projectId: string) {
  router.push(`/projects/${projectId}`);
  if (dashStore.isMobile) {
    dashStore.closeMobileSidebar();
  }
}

const roleTagType = computed(() => {
  const role = authStore.user?.role;
  if (role === 'admin') return 'info';
  if (role === 'manager') return 'success';
  if (role === 'viewer') return 'warning';
  return 'default';
});
</script>

<template>
  <!-- Mobile hamburger button: visible only on mobile -->
  <button
    v-if="dashStore.isMobile"
    class="hamburger-btn"
    aria-label="打开侧边栏菜单"
    @click="dashStore.toggleSidebar"
  >
    <span class="hamburger-icon">&#9776;</span>
  </button>

  <aside
    class="sidebar"
    :class="{
      collapsed: !dashStore.isMobile && dashStore.sidebarCollapsed,
      'mobile-hidden': dashStore.isMobile && !dashStore.mobileSidebarOpen,
      'mobile-open': dashStore.isMobile && dashStore.mobileSidebarOpen,
    }"
  >
    <div class="sidebar-header">
      <div class="logo">
        <span class="logo-icon">DP</span>
        <span class="logo-text" v-if="!dashStore.sidebarCollapsed || dashStore.isMobile">DevPerf</span>
      </div>
      <button v-if="dashStore.isMobile" class="close-btn" @click="dashStore.closeMobileSidebar">&times;</button>
      <span v-else class="collapse-toggle" @click="dashStore.toggleSidebar" :title="dashStore.sidebarCollapsed ? '展开' : '收起'">
        {{ dashStore.sidebarCollapsed ? '»' : '«' }}
      </span>
    </div>

    <nav class="sidebar-nav">
      <template v-for="item in menuOptions" :key="item.key">
        <div
          class="nav-item"
          :class="{ active: activeKey === item.key }"
          @click="handleMenuSelect(item)"
        >
          <span class="nav-label" v-if="!dashStore.sidebarCollapsed || dashStore.isMobile">
            {{ item.label }}
            <!-- B-17: Show expand/collapse indicator for Projects -->
            <span v-if="item.hasSubmenu && (!dashStore.sidebarCollapsed || dashStore.isMobile)" class="submenu-arrow">
              {{ projectsExpanded ? '&#9660;' : '&#9654;' }}
            </span>
          </span>
          <NTooltip v-else placement="right">
            <template #trigger>
              <span class="nav-icon-only">{{ item.label[0] }}</span>
            </template>
            {{ item.label }}
          </NTooltip>
        </div>

        <!-- B-17: Projects sub-menu -->
        <div
          v-if="item.hasSubmenu && projectsExpanded && (!dashStore.sidebarCollapsed || dashStore.isMobile)"
          class="submenu"
        >
          <div
            v-for="proj in projectList"
            :key="proj.projectId"
            class="submenu-item"
            :class="{ active: route.path === `/projects/${proj.projectId}` }"
            @click="handleProjectSelect(proj.projectId)"
          >
            <span class="submenu-label">{{ proj.name }}</span>
          </div>
          <div v-if="!projectList.length" class="submenu-item submenu-empty">
            暂无项目
          </div>
        </div>
      </template>
    </nav>

    <div class="sidebar-footer">
      <div class="user-row" v-if="!dashStore.sidebarCollapsed || dashStore.isMobile">
        <div class="user-info">
          <span class="user-name">{{ authStore.user?.displayName }}</span>
          <span class="user-role">{{ authStore.user?.role }}</span>
        </div>
        <span class="logout-link" @click="authStore.logout" title="退出登录">退出</span>
      </div>
      <div v-else class="user-row-mini">
        <NTooltip placement="right">
          <template #trigger>
            <span class="user-initial">{{ authStore.user?.displayName?.[0] || '?' }}</span>
          </template>
          {{ authStore.user?.displayName }} · {{ authStore.user?.role }}
        </NTooltip>
      </div>
    </div>
  </aside>
</template>

<style scoped>
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-bg-sidebar);
  color: #E5E7EB;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  transition: width var(--duration-collapse) var(--ease-default),
              transform 0.3s ease;
  z-index: var(--z-sticky);
  overflow: hidden;
  overflow-y: auto;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* Mobile: sidebar is off-screen by default */
.sidebar.mobile-hidden {
  transform: translateX(-100%);
  width: var(--sidebar-width);
}

/* Mobile: sidebar slides in from the left */
.sidebar.mobile-open {
  transform: translateX(0);
  width: var(--sidebar-width);
  z-index: calc(var(--z-sticky) + 2);
}

.sidebar-header {
  padding: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collapse-toggle {
  font-size: 14px;
  color: #6B7280;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  user-select: none;
}
.collapse-toggle:hover { color: #E5E7EB; background: rgba(255,255,255,0.08); }

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--color-primary-hex);
  border-radius: var(--radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: white;
  flex-shrink: 0;
}

.logo-text {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) var(--space-2);
  overflow-y: auto;
}

.nav-item {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background var(--duration-hover) var(--ease-default);
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-item:hover {
  background: rgba(255,255,255,0.08);
}

.nav-item.active {
  background: rgba(59,89,152,0.3);
  border-left: 3px solid var(--color-primary-hex);
}

.nav-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

/* B-17: Sub-menu arrow indicator */
.submenu-arrow {
  font-size: 10px;
  margin-left: auto;
  opacity: 0.6;
}

/* B-17: Projects sub-menu */
.submenu {
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}

.submenu-item {
  padding: var(--space-2) var(--space-4);
  font-size: 12px;
  color: #9CA3AF;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--duration-hover) var(--ease-default), color var(--duration-hover);
}

.submenu-item:hover {
  background: rgba(255,255,255,0.06);
  color: #E5E7EB;
}

.submenu-item.active {
  color: #E5E7EB;
  background: rgba(59,89,152,0.2);
}

.submenu-empty {
  cursor: default;
  font-style: italic;
  opacity: 0.5;
}

.submenu-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 24px;
  font-weight: 600;
}

.sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 500;
  color: #E5E7EB;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: #6B7280;
}

.logout-link {
  font-size: 12px;
  color: #6B7280;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.logout-link:hover {
  color: #DC2626;
  background: rgba(220,38,38,0.1);
}

.user-row-mini {
  display: flex;
  justify-content: center;
}

.user-initial {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(59,89,152,0.3); border-radius: 50%;
  font-size: 12px; font-weight: 600; color: #E5E7EB; cursor: pointer;
}

/* Hamburger button - positioned fixed on mobile */
.hamburger-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-sticky);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-bg-card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-icon {
  font-size: 20px;
  color: var(--color-text-primary);
  line-height: 1;
}

/* Close button inside mobile sidebar header */
.close-btn {
  background: none;
  border: none;
  color: #9CA3AF;
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.close-btn:hover {
  color: #E5E7EB;
}
</style>