AppNav.vue
2.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<template>
<nav class="app-nav">
<div class="nav-brand" @click="$router.push('/')">
<span class="nav-logo">🧬</span>
<span class="nav-title">LemonBoss</span>
</div>
<div class="nav-links">
<router-link to="/agent/agent-creator" class="nav-link" :class="{ active: $route.path.startsWith('/agent') }">
<span>🏢</span> Agent Hub
</router-link>
<router-link to="/okr" class="nav-link" active-class="active">
<span>🎯</span> OKR 看板
</router-link>
</div>
<div class="nav-right">
<button class="theme-btn" @click="cycleTheme" :title="`主题: ${themeLabel}`">
{{ themeIcon }}
</button>
<span class="nav-version">v5.0</span>
</div>
</nav>
</template>
<script setup>
import { computed } from 'vue'
import { useTheme } from '@/composables/useTheme'
const { themeMode, cycleTheme } = useTheme()
const themeIcon = computed(() => {
if (themeMode.value === 'light') return '☀️'
if (themeMode.value === 'dark') return '🌙'
return '🌗'
})
const themeLabel = computed(() => {
if (themeMode.value === 'light') return '浅色'
if (themeMode.value === 'dark') return '深色'
return '跟随系统'
})
</script>
<style scoped>
.app-nav {
display: flex; align-items: center; height: 40px; padding: 0 14px;
background: var(--bg-secondary); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-primary);
position: sticky; top: 0; z-index: 100; gap: 16px;
transition: background 0.3s;
}
.nav-brand { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.nav-logo { font-size: 16px; }
.nav-title {
font-size: 13px; font-weight: 700;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-link {
display: flex; align-items: center; gap: 4px; padding: 4px 10px;
border-radius: 6px; text-decoration: none; color: var(--text-tertiary);
font-size: 11px; font-weight: 500; transition: all 0.2s;
}
.nav-link:hover { background: var(--bg-surface-hover); color: var(--text-secondary); }
.nav-link.active { background: var(--accent-bg); color: var(--accent-light); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.theme-btn {
width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-primary);
background: var(--bg-surface); cursor: pointer; font-size: 14px;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
}
.theme-btn:hover { background: var(--bg-surface-hover); transform: scale(1.1); }
.nav-version {
font-size: 9px; color: var(--text-faint);
padding: 2px 6px; border: 1px solid var(--border-primary); border-radius: 4px;
}
</style>