wecom_it_smart_desk/frontend-admin/src/components/Sidebar.vue

<!--
=============================================================================
企微IT智能服务台 — 侧边栏导航组件
=============================================================================
说明：管理后台侧边栏导航，深色背景，菜单分组展示
  - 📋 运营管理：运营总览、功能开关、坐席管理
  - 🔗 系统集成：系统集成
  - ⚙️ 运营配置：快速回复、分配模式、排查流程图
  - 📊 监控与数据：会话监控
  - 🔒 开发中（P2占位，灰化+锁图标）：主题模板、数据看板、知识库管理
-->
<template>
  <div class="sidebar">
    <!-- Logo 区域 -->
    <div class="sidebar-logo">
      <div class="sidebar-logo-icon">
        <el-icon :size="16"><Headset /></el-icon>
      </div>
      <div>
        <div class="sidebar-logo-text">IT智能服务台</div>
        <div class="sidebar-logo-sub">管理后台 v1.0</div>
      </div>
    </div>

    <!-- 导航菜单 -->
    <el-menu
      :default-active="activeMenu"
      :router="true"
      :collapse="false"
      class="sidebar-menu"
      background-color="var(--bg-secondary)"
      text-color="var(--text-secondary)"
      active-text-color="var(--accent)"
    >
      <!-- 📋 运营管理 -->
      <div class="menu-section-title">📋 运营管理</div>
      <el-menu-item index="/dashboard">
        <el-icon><PieChart /></el-icon>
        <span>运营总览</span>
      </el-menu-item>
      <el-menu-item index="/configs">
        <el-icon><Switch /></el-icon>
        <span>功能开关</span>
      </el-menu-item>
      <el-menu-item index="/agents">
        <el-icon><UserFilled /></el-icon>
        <span>坐席管理</span>
      </el-menu-item>
      <el-menu-item index="/roles">
        <el-icon><Key /></el-icon>
        <span>角色管理</span>
      </el-menu-item>
      <el-menu-item index="/mfa-manage">
        <el-icon><Key /></el-icon>
        <span>OTP 管理</span>
      </el-menu-item>

      <!-- 🔗 系统集成 -->
      <div class="menu-section-title">🔗 系统集成</div>
      <el-menu-item index="/integrations">
        <el-icon><Connection /></el-icon>
        <span>系统集成</span>
      </el-menu-item>
      <el-menu-item index="/terminal-security">
        <el-icon><Warning /></el-icon>
        <span>终端安全</span>
      </el-menu-item>

      <!-- ⚙️ 运营配置 -->
      <div class="menu-section-title">⚙️ 运营配置</div>
      <el-menu-item index="/quick-replies">
        <el-icon><ChatLineSquare /></el-icon>
        <span>快速回复</span>
      </el-menu-item>
      <el-menu-item index="/assignment-mode">
        <el-icon><Sort /></el-icon>
        <span>分配模式</span>
      </el-menu-item>
      <el-menu-item index="/flowcharts">
        <el-icon><Share /></el-icon>
        <span>排查流程图</span>
      </el-menu-item>

      <!-- 📊 监控与数据 -->
      <div class="menu-section-title">📊 监控与数据</div>
      <el-menu-item index="/monitor">
        <el-icon><Monitor /></el-icon>
        <span>会话监控</span>
      </el-menu-item>
      <el-menu-item index="/session-audit">
        <el-icon><Document /></el-icon>
        <span>会话审计</span>
      </el-menu-item>
      <el-menu-item index="/agent-performance">
        <el-icon><TrendCharts /></el-icon>
        <span>坐席绩效</span>
      </el-menu-item>
      <el-menu-item index="/system-logs">
        <el-icon><Notebook /></el-icon>
        <span>配置变更历史</span>
      </el-menu-item>
      <el-menu-item index="/audit-logs">
        <el-icon><Document /></el-icon>
        <span>安全审计日志</span>
      </el-menu-item>
      <el-menu-item index="/runtime-logs">
        <el-icon><Warning /></el-icon>
        <span>运行期日志</span>
      </el-menu-item>
      <el-menu-item index="/evaluation-stats">
        <el-icon><Star /></el-icon>
        <span>满意度评价</span>
      </el-menu-item>
      <el-menu-item index="/knowledge-suggestions">
        <el-icon><Document /></el-icon>
        <span>知识库建议</span>
      </el-menu-item>

      <!-- 🤖 自动化闭环（阶段5） -->
      <div class="menu-section-title">🤖 自动化闭环</div>
      <el-menu-item index="/automation-scenarios">
        <el-icon><MagicStick /></el-icon>
        <span>自动化场景</span>
      </el-menu-item>
      <el-menu-item index="/automation-versions">
        <el-icon><Files /></el-icon>
        <span>规则版本</span>
      </el-menu-item>
      <el-menu-item index="/automation-metrics">
        <el-icon><TrendCharts /></el-icon>
        <span>自动化指标</span>
      </el-menu-item>

      <!-- 🔒 开发中（P2占位） -->
      <div class="menu-section-title">🔒 开发中</div>
      <el-menu-item index="/themes" class="locked-menu-item">
        <el-icon><Brush /></el-icon>
        <span>主题模板</span>
        <el-icon class="lock-icon"><Lock /></el-icon>
      </el-menu-item>
      <el-menu-item index="/reports" class="locked-menu-item">
        <el-icon><DataAnalysis /></el-icon>
        <span>数据看板</span>
        <el-icon class="lock-icon"><Lock /></el-icon>
      </el-menu-item>
      <el-menu-item index="/knowledge" class="locked-menu-item">
        <el-icon><Reading /></el-icon>
        <span>知识库管理</span>
        <el-icon class="lock-icon"><Lock /></el-icon>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { Headset, PieChart, Switch, UserFilled, Connection, Warning, ChatLineSquare, Sort, Share, Monitor, Brush, DataAnalysis, Reading, Lock, Key, Document, TrendCharts, Notebook, Star, MagicStick, Files } from '@element-plus/icons-vue'

// ==========================================================================
// 当前激活菜单
// ==========================================================================
const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
/* 侧边栏容器 */
.sidebar {
  width: 220px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

/* Logo 区域 */
.sidebar-logo {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.sidebar-logo-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.sidebar-logo-sub {
  font-size: 10px;
  color: var(--text-muted);
}

/* 菜单容器 */
.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  border-right: none;
}

/* 菜单分组标题 */
.menu-section-title {
  padding: 12px 20px 6px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  user-select: none;
}

/* 菜单项 */
.sidebar-menu .el-menu-item {
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  border-left: 3px solid transparent;
  margin: 0;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: var(--accent-light);
  border-left-color: var(--accent);
}

/* 锁定的菜单项（灰化） */
.locked-menu-item {
  opacity: 0.5;
  pointer-events: auto !important;
}

.lock-icon {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}
</style>