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
}

const mainMenu = computed<MenuItem[]>(() => [
  { name: 'Dashboard', icon: 'fa-gauge', path: '/dashboard' },
  { name: 'Agents', icon: 'fa-robot', badge: 3, path: '/agents' },
  { name: 'Script', icon: 'fa-code', path: '/script' },
  { name: 'Database', icon: 'fa-database', path: '/database', badge: databaseCount.value },
  { name: 'Knowledge', icon: 'fa-brain', path: '/knowledge', badge: knowledgeCount.value },
])

const middleMenu: MenuItem[] = [
  { name: 'Skills', icon: 'fa-wand-magic-sparkles', badge: 21, path: '/mcp' },
  { name: 'Tools', icon: 'fa-tools', badge: 13, path: '/model-apis' },
]

const bottomMenu: MenuItem[] = [
  { name: 'Settings', icon: 'fa-gear', path: '/settings' },
]

const bottomMenu2: MenuItem[] = [
  { name: 'Account', icon: 'fa-user', path: '/account' },
]

const activeMenu = computed(() => {
  const currentPath = route.path
  // Check main menu
  const menuItem = mainMenu.value.find(item => item.path === currentPath)
  if (menuItem) return menuItem.name
  // Check middle menu (Skills, Tools)
  const middleItem = middleMenu.find(item => item.path === currentPath)
  if (middleItem) return middleItem.name
  // Check bottom menu (Settings)
  const bottomItem = bottomMenu.find(item => item.path === currentPath)
  if (bottomItem) return bottomItem.name
  // Check bottomMenu2 (Account)
  const bottomItem2 = bottomMenu2.find(item => item.path === currentPath)
  if (bottomItem2) return bottomItem2.name
  return 'Dashboard'
})

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">
        <!-- Dashboard, Agents -->
        <li v-for="item in mainMenu.slice(0, 2)" :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>

        <!-- Database, Knowledge -->
        <li v-for="item in mainMenu.slice(2)" :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>

        <!-- Skills & Tools -->
        <li v-for="item in middleMenu" :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>

        <!-- Settings -->
        <li v-for="item in bottomMenu" :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>

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

        <!-- Account -->
        <li v-for="item in bottomMenu2" :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>
          </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>