Add Vue frontend application
This commit is contained in:
378
frontend/src/components/SidebarNav.vue
Normal file
378
frontend/src/components/SidebarNav.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { MessageCircle, BookOpen, Network, LayoutGrid, MessageSquare, LogOut, Cpu, Bot, Activity, CheckSquare, Settings } from 'lucide-vue-next'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const navItems = [
|
||||
{ name: '沟通系统', path: '/chat', icon: MessageCircle },
|
||||
{ name: '智能链路', path: '/agents', icon: Bot },
|
||||
{ name: '资料中枢', path: '/knowledge', icon: BookOpen },
|
||||
{ name: '关系图谱', path: '/graph', icon: Network },
|
||||
{ name: '任务矩阵', path: '/kanban', icon: LayoutGrid },
|
||||
{ name: '事务栈', path: '/todo', icon: CheckSquare },
|
||||
{ name: '交互广场', path: '/forum', icon: MessageSquare },
|
||||
{ name: '数据舱', path: '/stats', icon: Activity },
|
||||
{ name: '系统设置', path: '/settings', icon: Settings },
|
||||
]
|
||||
|
||||
function isActive(path: string) {
|
||||
return route.path === path
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
auth.logout()
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="sidebar-nav">
|
||||
<!-- Grid lines decoration -->
|
||||
<div class="corner-deco top-left"></div>
|
||||
<div class="corner-deco top-right"></div>
|
||||
<div class="corner-deco bottom-left"></div>
|
||||
<div class="corner-deco bottom-right"></div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="logo-section">
|
||||
<div class="logo-icon">
|
||||
<Cpu :size="22" />
|
||||
<div class="logo-pulse"></div>
|
||||
</div>
|
||||
<div class="logo-text-group">
|
||||
<span class="logo-name">JARVIS</span>
|
||||
<span class="logo-sub">AI ASSISTANT v2.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-dot"></div>
|
||||
<span>SYSTEM ONLINE</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<ul class="nav-items">
|
||||
<li v-for="item in navItems" :key="item.path">
|
||||
<router-link
|
||||
:to="item.path"
|
||||
class="nav-link"
|
||||
:class="{ active: isActive(item.path) }"
|
||||
>
|
||||
<span class="nav-indicator"></span>
|
||||
<component :is="item.icon" :size="18" class="nav-icon" />
|
||||
<span class="nav-label">{{ item.name }}</span>
|
||||
<span class="nav-line"></span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="nav-footer">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar">
|
||||
<span>{{ auth.user?.email?.[0]?.toUpperCase() || 'U' }}</span>
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<span class="user-name">{{ auth.user?.email?.split('@')[0] || 'Operator' }}</span>
|
||||
<span class="user-level">LEVEL 1</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="logout-btn" @click="handleLogout">
|
||||
<LogOut :size="16" />
|
||||
<span>LOGOUT</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-nav {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
height: 100%;
|
||||
background: var(--bg-panel);
|
||||
border-right: 1px solid var(--border-dim);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Corner decorations */
|
||||
.corner-deco {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: 2;
|
||||
}
|
||||
.corner-deco::before,
|
||||
.corner-deco::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: var(--accent-cyan);
|
||||
}
|
||||
.corner-deco::before { width: 100%; height: 1px; }
|
||||
.corner-deco::after { width: 1px; height: 100%; }
|
||||
.top-left { top: 8px; left: 8px; }
|
||||
.top-right { top: 8px; right: 8px; transform: scaleX(-1); }
|
||||
.bottom-left { bottom: 8px; left: 8px; transform: scaleY(-1); }
|
||||
.bottom-right { bottom: 8px; right: 8px; transform: scale(-1); }
|
||||
|
||||
/* Logo */
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px 20px 16px;
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
position: relative;
|
||||
color: var(--accent-cyan);
|
||||
filter: drop-shadow(0 0 8px var(--accent-cyan));
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logo-pulse {
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(0,245,212,0.15) 0%, transparent 70%);
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logo-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--accent-cyan);
|
||||
text-shadow: var(--glow-cyan);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.logo-sub {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--text-dim);
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* Status bar */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 20px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--accent-green);
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-green);
|
||||
box-shadow: 0 0 6px var(--accent-green);
|
||||
animation: pulse-glow 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Nav items */
|
||||
.nav-items {
|
||||
list-style: none;
|
||||
padding: 16px 12px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-items li { margin-bottom: 2px; }
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.06em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all var(--transition-mid);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--accent-cyan);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
box-shadow: 0 0 8px var(--accent-cyan);
|
||||
}
|
||||
|
||||
.nav-indicator {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--text-dim);
|
||||
flex-shrink: 0;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
flex-shrink: 0;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--border-dim), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--text-secondary);
|
||||
background: rgba(0, 245, 212, 0.04);
|
||||
border-color: var(--border-dim);
|
||||
}
|
||||
|
||||
.nav-link:hover .nav-indicator {
|
||||
border-color: var(--accent-cyan);
|
||||
background: rgba(0,245,212,0.2);
|
||||
}
|
||||
|
||||
.nav-link:hover .nav-line { opacity: 1; }
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--accent-cyan);
|
||||
background: var(--accent-cyan-dim);
|
||||
border-color: rgba(0, 245, 212, 0.2);
|
||||
}
|
||||
|
||||
.nav-link.active::before { opacity: 1; }
|
||||
|
||||
.nav-link.active .nav-indicator {
|
||||
border-color: var(--accent-cyan);
|
||||
background: var(--accent-cyan);
|
||||
box-shadow: 0 0 8px var(--accent-cyan);
|
||||
}
|
||||
|
||||
.nav-link.active .nav-icon {
|
||||
filter: drop-shadow(0 0 4px var(--accent-cyan));
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.nav-link.active .nav-label {
|
||||
font-weight: 600;
|
||||
text-shadow: 0 0 10px var(--accent-cyan-glow);
|
||||
}
|
||||
|
||||
.nav-link.active .nav-line { opacity: 1; }
|
||||
|
||||
/* Footer */
|
||||
.nav-footer {
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--border-dim);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--accent-cyan-dim), var(--accent-purple-dim));
|
||||
border: 1px solid var(--border-mid);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-cyan);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-level {
|
||||
font-family: var(--font-display);
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--accent-amber);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-dim);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: rgba(255, 71, 87, 0.08);
|
||||
border-color: rgba(255, 71, 87, 0.3);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user