storlead-sasa-platform/ui/smarttrade-platform/src/components/layout/Sidebar.vue

<template>
  <aside class="sidebar">
    <!-- Logo -->
    <div class="sidebar-header">
      <div class="logo">
        <div class="logo-icon">🧠</div>
        <div>
          <div class="logo-text">领存智贸</div>
          <div class="logo-subtitle">AI原生外贸CRM</div>
        </div>
      </div>
    </div>

    <!-- Navigation -->
    <nav class="nav-menu">
      <!-- AI核心 -->
      <div class="nav-section">
        <div class="nav-section-title">AI 核心</div>
        <!-- <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">
          <i class="fas fa-brain nav-icon"></i>
          <span class="nav-text">企业大脑</span>
        </router-link> -->
        <router-link to="/prospect" class="nav-item" :class="{ active: $route.path === '/prospect' }">
          <i class="fas fa-crosshairs nav-icon"></i>
          <span class="nav-text">自动寻客</span>
          <span class="nav-badge">新</span>
        </router-link>
        <router-link to="/marketing" class="nav-item" :class="{ active: $route.path === '/marketing' }">
          <i class="fas fa-paper-plane nav-icon"></i>
          <span class="nav-text">自动营销</span>
        </router-link>
        <router-link to="/strategy" class="nav-item" :class="{ active: $route.path === '/strategy' }">
          <i class="fas fa-lightbulb nav-icon"></i>
          <span class="nav-text">AI策略中心</span>
        </router-link>
      </div>

      <!-- 客户管理 -->
      <div class="nav-section">
        <div class="nav-section-title">客户管理</div>
        <router-link to="/customers" class="nav-item" :class="{ active: $route.path === '/customers' }">
          <i class="fas fa-users nav-icon"></i>
          <span class="nav-text">客户池</span>
          <span class="nav-badge">847</span>
        </router-link>
        <!-- <router-link to="/opportunities" class="nav-item" :class="{ active: $route.path === '/opportunities' }">
          <i class="fas fa-briefcase nav-icon"></i>
          <span class="nav-text">商机管理</span>
        </router-link>
        <router-link to="/orders" class="nav-item" :class="{ active: $route.path === '/orders' }">
          <i class="fas fa-box nav-icon"></i>
          <span class="nav-text">订单跟进</span>
        </router-link> -->
      </div>

      <!-- 数据洞察 -->
      <!-- <div class="nav-section">
        <div class="nav-section-title">数据洞察</div>
        <router-link to="/analysis" class="nav-item" :class="{ active: $route.path === '/analysis' }">
          <i class="fas fa-chart-line nav-icon"></i>
          <span class="nav-text">经营分析</span>
        </router-link>
        <router-link to="/market" class="nav-item" :class="{ active: $route.path === '/market' }">
          <i class="fas fa-globe nav-icon"></i>
          <span class="nav-text">市场情报</span>
        </router-link>
        <router-link to="/risk" class="nav-item" :class="{ active: $route.path === '/risk' }">
          <i class="fas fa-shield-alt nav-icon"></i>
          <span class="nav-text">风险风控</span>
          <span class="nav-badge" style="background: var(--warning);">3</span>
        </router-link>
      </div> -->

      <!-- 系统设置 -->
      <div class="nav-section">
        <div class="nav-section-title">系统</div>
        <router-link to="/knowledge" class="nav-item" :class="{ active: $route.path === '/knowledge' }">
          <i class="fas fa-book nav-icon"></i>
          <span class="nav-text">知识库</span>
        </router-link>
        <router-link to="/settings" class="nav-item" :class="{ active: $route.path === '/settings' }">
          <i class="fas fa-cog nav-icon"></i>
          <span class="nav-text">设置</span>
        </router-link>
      </div>
    </nav>

    <!-- User Profile -->
    <div class="sidebar-footer">
      <div class="user-card" @click="toggleUserMenu">
        <div class="user-avatar-wrapper">
          <div class="user-avatar">张</div>
          <div class="online-indicator"></div>
        </div>
        <div class="user-info">
          <div class="user-name">张经理</div>
          <div class="user-status">
            <span class="status-dot"></span>
            在线
          </div>
        </div>
        <i class="fas fa-chevron-up user-arrow" :class="{ rotated: showUserMenu }"></i>
      </div>

      <!-- User Dropdown Menu -->
      <transition name="dropdown">
        <div v-if="showUserMenu" class="user-menu">
          <div class="menu-header">
            <div class="menu-avatar">张</div>
            <div class="menu-user-info">
              <div class="menu-user-name">张经理</div>
              <div class="menu-user-email">zhang@company.com</div>
            </div>
          </div>
          
          <div class="menu-divider"></div>
          
          <div class="menu-items">
            <router-link to="/settings" class="menu-item" @click="showUserMenu = false">
              <div class="menu-item-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-user"></i>
              </div>
              <div class="menu-item-content">
                <span class="menu-item-title">个人资料</span>
                <span class="menu-item-desc">编辑头像、姓名等信息</span>
              </div>
            </router-link>
          </div>
          
          <div class="menu-divider"></div>
          
          <div class="menu-items">
            <div class="menu-item" @click="toggleTheme">
              <div class="menu-item-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
                <i :class="isDarkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
              </div>
              <div class="menu-item-content">
                <span class="menu-item-title">修改密码</span>
              </div>
            </div>
            
            <div class="menu-item" @click="showHelpModal = true">
              <div class="menu-item-icon" style="background: rgba(6, 182, 212, 0.2); color: var(--info);">
                <i class="fas fa-question-circle"></i>
              </div>
              <div class="menu-item-content">
                <span class="menu-item-title">登录历史</span>
              </div>
            </div>
          </div>
          
          <div class="menu-divider"></div>
          
          <div class="menu-footer">
            <div class="menu-item danger" @click="handleLogout">
              <div class="menu-item-icon" style="background: rgba(239, 68, 68, 0.2); color: var(--danger);">
                <i class="fas fa-sign-out-alt"></i>
              </div>
              <div class="menu-item-content">
                <span class="menu-item-title">退出登录</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>

    <!-- Help Modal -->
    <div v-if="showHelpModal" class="modal-overlay" @click.self="showHelpModal = false">
      <div class="modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-question-circle"></i> 帮助中心</div>
          <button class="modal-close" @click="showHelpModal = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="help-section">
            <h4>🚀 快速入门</h4>
            <div class="help-list">
              <div class="help-item">
                <i class="fas fa-brain"></i>
                <span>企业大脑 - 与AI对话，快速执行任务</span>
              </div>
              <div class="help-item">
                <i class="fas fa-crosshairs"></i>
                <span>自动寻客 - AI全网挖掘高匹配潜客</span>
              </div>
              <div class="help-item">
                <i class="fas fa-paper-plane"></i>
                <span>自动营销 - 多渠道自动化客户触达</span>
              </div>
            </div>
          </div>
          
          <div class="help-section">
            <h4>📞 联系支持</h4>
            <div class="contact-cards">
              <div class="contact-card">
                <i class="fas fa-envelope"></i>
                <div>
                  <div class="contact-label">邮箱</div>
                  <div class="contact-value">support@lingcunai.com</div>
                </div>
              </div>
              <div class="contact-card">
                <i class="fab fa-weixin"></i>
                <div>
                  <div class="contact-label">微信</div>
                  <div class="contact-value">领存智贸</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showHelpModal = false">关闭</button>
          <button class="btn btn-primary">
            <i class="fas fa-book"></i> 查看完整文档
          </button>
        </div>
      </div>
    </div>

    <!-- Click outside to close menu -->
    <div v-if="showUserMenu" class="menu-backdrop" @click="showUserMenu = false"></div>
  </aside>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

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

const showUserMenu = ref(false)
const showHelpModal = ref(false)
const isDarkMode = ref(true)

const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value
}

const goToSettings = (section) => {
  showUserMenu.value = false
  router.push('/settings')
}

const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value
  showUserMenu.value = false
}

const handleLogout = () => {
  showUserMenu.value = false
  // Handle logout
  console.log('Logout')
}
</script>

<style scoped>
.sidebar {
  width: 260px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient-1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.logo-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Navigation Menu */
.nav-menu {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
}

.nav-section {
  margin-bottom: 20px;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 12px;
  margin-bottom: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
  color: var(--text-secondary);
  text-decoration: none;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
}

.nav-icon {
  width: 20px;
  font-size: 16px;
}

.nav-text {
  flex: 1;
  font-size: 13px;
}

.nav-badge {
  background: var(--danger);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}

/* User Card */
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  position: relative;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.user-card:hover {
  background: var(--border);
}

.user-avatar-wrapper {
  position: relative;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: var(--gradient-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--success);
  border: 2px solid var(--bg-card);
  border-radius: 50%;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
}

.user-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.status-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
}

.user-arrow {
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.2s;
}

.user-arrow.rotated {
  transform: rotate(180deg);
}

/* User Menu Dropdown */
.menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
}

.user-menu {
  position: absolute;
  bottom: 100%;
  left: 12px;
  right: 12px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  z-index: 99;
  overflow: hidden;
}

.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.2s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-hover);
}

.menu-avatar {
  width: 44px;
  height: 44px;
  background: var(--gradient-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.menu-user-info {
  flex: 1;
}

.menu-user-name {
  font-size: 14px;
  font-weight: 600;
}

.menu-user-email {
  font-size: 12px;
  color: var(--text-secondary);
}

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.menu-items {
  padding: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}

.menu-item:hover {
  background: var(--bg-hover);
}

.menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.menu-item.danger .menu-item-title {
  color: var(--danger);
}

.menu-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.menu-item-content {
  flex: 1;
}

.menu-item-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
}

.menu-item-desc {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.menu-footer {
  padding: 8px;
  padding-top: 0;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-title i {
  color: var(--primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  background: var(--bg-hover);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid var(--border);
}

/* Help Section */
.help-section {
  margin-bottom: 20px;
}

.help-section:last-child {
  margin-bottom: 0;
}

.help-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.help-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 8px;
  font-size: 13px;
}

.help-item i {
  color: var(--primary);
  width: 20px;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-hover);
  border-radius: 10px;
}

.contact-card i {
  font-size: 20px;
  color: var(--primary);
}

.contact-label {
  font-size: 11px;
  color: var(--text-muted);
}

.contact-value {
  font-size: 13px;
  font-weight: 500;
}
</style>