duorameng
221 lines
8.2 KiB
Vue
221 lines
8.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { RouterLink, RouterView, useRoute } from 'vue-router'
|
|
import { resetAuthCache } from '@/router'
|
|
import { LayoutDashboard, ListTodo, FileCode, Settings, LogOut, ScrollText, Terminal, Variable, KeyRound, Menu, X, Server, Globe, Bell, Activity } from 'lucide-vue-next'
|
|
import { Button } from '@/components/ui/button'
|
|
import ThemeToggle from '@/components/ThemeToggle.vue'
|
|
import SystemNotice from '@/components/SystemNotice.vue'
|
|
import { api } from '@/api'
|
|
import { useSiteSettings } from '@/composables/useSiteSettings'
|
|
|
|
const SENTENCE_CACHE_KEY = 'sentence_cache'
|
|
const SENTENCE_CACHE_TIME_KEY = 'sentence_cache_time'
|
|
const CACHE_DURATION = 24 * 60 * 60 * 1000 // 24小时
|
|
|
|
// 从 localStorage 加载缓存的诗句
|
|
function loadSentenceFromCache(): string | null {
|
|
try {
|
|
const cached = localStorage.getItem(SENTENCE_CACHE_KEY)
|
|
const cacheTime = localStorage.getItem(SENTENCE_CACHE_TIME_KEY)
|
|
|
|
if (cached && cacheTime) {
|
|
const age = Date.now() - parseInt(cacheTime)
|
|
// 如果缓存未过期，使用缓存
|
|
if (age < CACHE_DURATION) {
|
|
return cached
|
|
}
|
|
}
|
|
} catch {
|
|
// 忽略错误
|
|
}
|
|
return null
|
|
}
|
|
|
|
// 保存诗句到 localStorage
|
|
function saveSentenceToCache(sentence: string) {
|
|
try {
|
|
localStorage.setItem(SENTENCE_CACHE_KEY, sentence)
|
|
localStorage.setItem(SENTENCE_CACHE_TIME_KEY, Date.now().toString())
|
|
} catch {
|
|
// 忽略存储错误
|
|
}
|
|
}
|
|
|
|
const route = useRoute()
|
|
const cachedSentence = loadSentenceFromCache()
|
|
const sentence = ref(cachedSentence || '欢迎使用白虎面板')
|
|
const { siteSettings, loadSettings } = useSiteSettings()
|
|
const mobileMenuOpen = ref(false)
|
|
const sentenceContent = computed(() => {
|
|
const match = sentence.value.match(/^"(.+)"—— /)
|
|
return match ? match[1] : sentence.value
|
|
})
|
|
|
|
const navItems = [
|
|
{ to: '/', icon: LayoutDashboard, label: '数据仪表', exact: true },
|
|
{ to: '/tasks', icon: ListTodo, label: '定时任务', exact: true },
|
|
{ to: '/agents', icon: Server, label: '远程执行', exact: true },
|
|
{ to: '/editor', icon: FileCode, label: '脚本编辑', exact: false },
|
|
{ to: '/history', icon: ScrollText, label: '执行历史', exact: true },
|
|
{ to: '/environments', icon: Variable, label: '变量机密', exact: true },
|
|
{ to: '/languages', icon: Globe, label: '语言依赖', exact: true },
|
|
{ to: '/terminal', icon: Terminal, label: '终端命令', exact: true },
|
|
{ to: '/notify', icon: Bell, label: '消息推送', exact: true },
|
|
{ to: '/logs', icon: KeyRound, label: '运行日志', exact: true },
|
|
{ to: '/monitor', icon: Activity, label: '系统监控', exact: true },
|
|
{ to: '/settings', icon: Settings, label: '系统设置', exact: true },
|
|
]
|
|
|
|
function isItemActive(item: (typeof navItems)[0]) {
|
|
if (item.exact) {
|
|
return route.path === item.to
|
|
}
|
|
return route.path.startsWith(item.to)
|
|
}
|
|
|
|
function handleNavClick(navigate: () => void) {
|
|
navigate()
|
|
mobileMenuOpen.value = false
|
|
}
|
|
|
|
async function logout() {
|
|
try {
|
|
await api.auth.logout()
|
|
} catch {
|
|
// 忽略错误
|
|
}
|
|
resetAuthCache()
|
|
window.location.href = '/login'
|
|
}
|
|
|
|
async function loadSentence() {
|
|
try {
|
|
const res = await api.dashboard.sentence()
|
|
sentence.value = res.sentence
|
|
saveSentenceToCache(res.sentence) // 保存到缓存
|
|
} catch {
|
|
// 加载失败保持默认或缓存值
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadSettings()
|
|
loadSentence() // 后台更新诗句
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Root Container: Handles the background and centering on 2K+ screens -->
|
|
<div class="h-screen w-full bg-slate-50/50 dark:bg-zinc-950 flex items-center justify-center 3xl:p-8 transition-all duration-500 overflow-hidden">
|
|
|
|
<!-- Application Card: The main floating surface -->
|
|
<div
|
|
class="flex h-full w-full bg-background relative transition-all duration-500 overflow-hidden
|
|
3xl:max-w-[2000px] 3xl:max-h-[92vh] 3xl:rounded-[2.5rem]
|
|
3xl:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.25),0_0_0_1px_rgba(255,255,255,0.05)]
|
|
3xl:ring-1 3xl:ring-slate-900/5 dark:3xl:ring-white/10
|
|
3xl:border 3xl:border-slate-200/60 dark:3xl:border-white/5">
|
|
|
|
<!-- Mobile Menu Overlay -->
|
|
<div v-if="mobileMenuOpen" class="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-40 lg:hidden" @click="mobileMenuOpen = false" />
|
|
|
|
<!-- Sidebar -->
|
|
<aside :class="[
|
|
'fixed lg:static inset-y-0 z-50 w-44 border-r bg-background flex flex-col transition-all duration-300 ease-in-out',
|
|
mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
|
|
]">
|
|
<div class="h-14 flex items-center justify-center px-4 font-semibold text-lg border-b border-slate-200/60 dark:border-white/10 relative">
|
|
<span>{{ siteSettings.title }}</span>
|
|
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden absolute right-2" @click="mobileMenuOpen = false">
|
|
<X class="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto">
|
|
<RouterLink v-for="item in navItems" :key="item.to" :to="item.to" custom v-slot="{ navigate }">
|
|
<Button variant="ghost"
|
|
:class="[
|
|
'justify-center gap-3 h-10 px-3 w-full max-w-[140px] transition-all duration-200',
|
|
isItemActive(item)
|
|
? 'bg-secondary text-foreground font-bold'
|
|
: 'text-foreground hover:bg-secondary/50'
|
|
]"
|
|
@click="handleNavClick(navigate)">
|
|
<component :is="item.icon" class="h-4 w-4" />
|
|
{{ item.label }}
|
|
</Button>
|
|
</RouterLink>
|
|
</nav>
|
|
<div class="px-3 py-4 3xl:pb-12 border-t border-slate-200/60 dark:border-white/10 flex justify-center">
|
|
<Button variant="ghost"
|
|
class="justify-start 3xl:justify-center gap-3 h-9 px-3 w-content 3xl:w-full 3xl:max-w-[140px] text-muted-foreground hover:text-foreground transition-all whitespace-nowrap"
|
|
@click="logout">
|
|
<LogOut class="h-4 w-4 shrink-0" />
|
|
<span class="truncate">退出登录</span>
|
|
</Button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex flex-col min-w-0 relative">
|
|
<!-- Top Navigation Bar -->
|
|
<header class="h-14 border-b border-slate-200/60 dark:border-white/10 bg-background flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30">
|
|
<div class="flex items-center gap-2 sm:gap-3 flex-1 min-w-0 mr-4">
|
|
<Button variant="ghost" size="icon" class="h-9 w-9 lg:hidden shrink-0" @click="mobileMenuOpen = true">
|
|
<Menu class="h-5 w-5 text-muted-foreground" />
|
|
</Button>
|
|
<div class="flex flex-col sm:flex-row sm:items-baseline sm:gap-2 truncate">
|
|
<span class="text-sm text-muted-foreground truncate font-normal poem-sentence" :title="sentence">
|
|
<span class="hidden sm:inline">{{ sentence }}</span>
|
|
<span class="sm:hidden">{{ sentenceContent }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1 sm:gap-2.5 shrink-0">
|
|
<SystemNotice />
|
|
<ThemeToggle />
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page View Container -->
|
|
<div class="flex-1 relative bg-background/50 flex flex-col overflow-hidden">
|
|
<div class="flex-1 p-4 lg:p-6 mx-auto w-full overflow-y-auto custom-scrollbar flex flex-col">
|
|
<RouterView />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-radius: 10px;
|
|
}
|
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.poem-sentence {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.poem-sentence {
|
|
/* 与卡片标题保持一致，使用标准 font-medium 并取消淡化 */
|
|
letter-spacing: 0.01em;
|
|
}
|
|
}
|
|
</style>
|