simon/wecom_it_smart_desk
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

chore: initial baseline with P0-safety .gitignore

Browse Source
This commit is contained in:
Simon
2026-06-14 16:49:18 +08:00
commit 63262292d7
510 changed files with 146008 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-admin/src/components/Sidebar.vue
+216
View File
@@ -0,0 +1,216 @@
<!--
=============================================================================
企微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>
<!-- 🔗 系统集成 -->
<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>
<!-- 🔒 开发中（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 } 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>