X-Agents/web/src/components/Sidebar.vue

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { fetchKnowledgeBases } from '@/views/knowledge/useKnowledge'
import { useDatabase } from '@/views/database/useDatabase'

// 下拉菜单展开状态
const userDropdownVisible = ref(false)

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

// 获取 Knowledge 数量
const knowledgeCount = ref(0)
const fetchKnowledgeCount = async () => {
  try {
    const data = await fetchKnowledgeBases()
    knowledgeCount.value = data?.length || 0
  } catch (e) {
    console.error('Failed to fetch knowledge count:', e)
  }
}

// 获取 Database 数量
const { databases, fetchDatabases } = useDatabase()
const databaseCount = computed(() => databases.value?.length || 0)

onMounted(() => {
  fetchKnowledgeCount()
  fetchDatabases()
})

interface MenuItem {
  name: string
  icon: string
  badge?: string | number
  children?: MenuItem[]
  path?: string
}

// 第1组: Chat, Agents
const group1 = computed(() => [
  { name: 'Chat', icon: 'fa-robot', path: '/agents' },
  { name: 'Agents', icon: 'fa-users', badge: 3, path: '/agents' },
])

// 第2组: Database, Knowledge
const group2 = computed(() => [
  { name: 'Database', icon: 'fa-database', path: '/database', badge: databaseCount.value },
  { name: 'Knowledge', icon: 'fa-brain', path: '/knowledge', badge: knowledgeCount.value },
])

// 第3组: Skills, Tools, Script
const group3 = computed(() => [
  { name: 'Skills', icon: 'fa-wand-magic-sparkles', badge: 21, path: '/mcp' },
  { name: 'Tools', icon: 'fa-tools', badge: 13, path: '/model-apis' },
  { name: 'Script', icon: 'fa-code', path: '/script' },
])

// 第4组: Dashboard, Account, Settings
const group4 = computed(() => [
  { name: 'Dashboard', icon: 'fa-gauge', path: '/dashboard' },
  { name: 'Account', icon: 'fa-user', path: '/account' },
  { name: 'Settings', icon: 'fa-gear', path: '/settings' },
])

const activeMenu = computed(() => {
  const currentPath = route.path

  // Special case for /agents - prioritize Chat over Agents
  if (currentPath === '/agents') {
    return 'Chat'
  }

  // Check all groups
  const allGroups = [...group1.value, ...group2.value, ...group3.value, ...group4.value]
  const item = allGroups.find(item => item.path === currentPath)
  if (item) return item.name
  return 'Chat'
})

const navigateTo = (item: MenuItem) => {
  if (item.path) {
    router.push(item.path)
  }
}

// 用户菜单操作
const handleUserCommand = (command: string) => {
  switch (command) {
    case 'settings':
      // 全局设置
      router.push('/settings')
      break
    case 'userManagement':
      // 用户管理
      router.push('/user-management')
      break
    case 'logout':
      // 退出登录
      ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 清除登录状态
        localStorage.removeItem('token')
        router.push('/login')
      }).catch(() => {})
      break
  }
}
</script>

<template>
  <aside class="w-64 bg-dark-950 h-screen flex flex-col fixed left-0 top-0 overflow-y-auto scrollbar-hide z-10">
    <!-- 顶部Logo与组织信息 -->
    <div class="p-5 flex items-center gap-3">
      <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-orange to-red-500 flex items-center justify-center">
        <i class="fa-solid fa-basketball text-white"></i>
      </div>
      <div>
        <div class="font-semibold text-base flex items-center gap-1 cursor-pointer">
          Organization
          <i class="fa-solid fa-chevron-down text-xs text-gray-500"></i>
        </div>
        <div class="text-sm text-gray-500">Saasfactor</div>
      </div>
    </div>

    <!-- 导航菜单 -->
    <nav class="flex-1 px-3 py-2">
      <ul class="space-y-1">
        <!-- 第1组: Chat, Agents -->
        <li v-for="item in group1" :key="item.name">
          <a
            href="#"
            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
            :class="activeMenu === item.name ? 'bg-dark-600 text-white' : 'text-gray-400 hover:bg-dark-600 hover:text-white'"
            @click="navigateTo(item)"
          >
            <div class="flex items-center gap-3">
              <i :class="['fa-solid', item.icon, 'w-5', 'text-center']"></i>
              <span>{{ item.name }}</span>
            </div>
            <span v-if="item.badge" class="bg-dark-500 text-xs px-2 py-0.5 rounded-full">{{ item.badge }}</span>
          </a>
        </li>

        <!-- 分隔线1 -->
        <li class="my-4 border-t border-dark-500"></li>

        <!-- 第2组: Database, Knowledge -->
        <li v-for="item in group2" :key="item.name">
          <a
            href="#"
            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
            :class="activeMenu === item.name ? 'bg-dark-600 text-white' : 'text-gray-400 hover:bg-dark-600 hover:text-white'"
            @click="navigateTo(item)"
          >
            <div class="flex items-center gap-3">
              <i :class="['fa-solid', item.icon, 'w-5', 'text-center']"></i>
              <span>{{ item.name }}</span>
            </div>
            <span v-if="item.badge" class="bg-dark-500 text-xs px-2 py-0.5 rounded-full">{{ item.badge }}</span>
          </a>
        </li>

        <!-- 分隔线2 -->
        <li class="my-4 border-t border-dark-500"></li>

        <!-- 第3组: Skills, Tools, Script -->
        <li v-for="item in group3" :key="item.name">
          <a
            href="#"
            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
            :class="activeMenu === item.name ? 'bg-dark-600 text-white' : 'text-gray-400 hover:bg-dark-600 hover:text-white'"
            @click="navigateTo(item)"
          >
            <div class="flex items-center gap-3">
              <i :class="['fa-solid', item.icon, 'w-5', 'text-center']"></i>
              <span>{{ item.name }}</span>
            </div>
            <span v-if="item.badge" class="bg-dark-500 text-xs px-2 py-0.5 rounded-full">{{ item.badge }}</span>
          </a>
        </li>

        <!-- 分隔线3 -->
        <li class="my-4 border-t border-dark-500"></li>

        <!-- 第4组: Dashboard, Account, Settings -->
        <li v-for="item in group4" :key="item.name">
          <a
            href="#"
            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
            :class="activeMenu === item.name ? 'bg-dark-600 text-white' : 'text-gray-400 hover:bg-dark-600 hover:text-white'"
            @click="navigateTo(item)"
          >
            <div class="flex items-center gap-3">
              <i :class="['fa-solid', item.icon, 'w-5', 'text-center']"></i>
              <span>{{ item.name }}</span>
            </div>
            <div v-if="item.name === 'Settings'" class="flex gap-1">
              <span class="w-2 h-2 rounded-full bg-primary-orange"></span>
              <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
              <span class="w-2 h-2 rounded-full bg-gray-500"></span>
            </div>
          </a>
        </li>
      </ul>
    </nav>

    <!-- 底部用户信息 -->
    <div class="border-t border-dark-500">
      <el-dropdown trigger="click" @command="handleUserCommand" class="user-dropdown" @visible-change="(v: boolean) => userDropdownVisible = v">
        <div class="w-full flex items-center justify-between cursor-pointer hover:bg-dark-600 px-4 py-3 transition-colors">
          <div class="flex items-center gap-3">
            <img src="https://picsum.photos/id/64/40/40" alt="User Avatar" class="w-8 h-8 rounded-full object-cover">
            <div class="min-w-0">
              <div class="font-medium text-sm text-gray-300 truncate">Alex Smith</div>
              <div class="text-xs text-gray-500 truncate">alex@gmail.com</div>
            </div>
          </div>
          <i :class="['fa-solid', userDropdownVisible ? 'fa-chevron-up' : 'fa-chevron-down', 'text-xs', 'text-gray-500']"></i>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="settings">
              <i class="fa-solid fa-gear w-4 text-center"></i>
              Settings
            </el-dropdown-item>
            <el-dropdown-item command="userManagement">
              <i class="fa-solid fa-user w-4 text-center"></i>
              Users
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <i class="fa-solid fa-arrow-right-from-bracket w-4 text-center"></i>
              Sign Out
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </aside>
</template>

<style>
.user-dropdown {
  width: 100%;
}
.user-dropdown .el-dropdown-menu {
  background-color: #262626;
  border: none;
  padding: 6px;
  border-radius: 10px;
  min-width: 200px;
}
.user-dropdown .el-dropdown-menu__item {
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-dropdown .el-dropdown-menu__item:hover {
  background-color: #F97316;
  color: white;
}
.user-dropdown .el-dropdown-menu__item--divided {
  border-top: 1px solid #404040;
  margin-top: 4px;
  padding-top: 8px;
}
</style>