mirror of
https://github.com/fawney19/Aether.git
synced 2026-10-08 18:37:46 +08:00
fawney19
41b51f10a9
- gateway: usage detail / provider summary / pool overview / users list 改为 tokio join 并行拉取依赖数据 - usage: interval timeline 支持自动刷新并按查询区间动态展示，取消服务端 120 分钟过滤并在 ScatterChart 统一封顶 - frontend: 新增管理端导航预取工具及 SidebarNav/MainLayout 触发，admin 读接口统一走 cachedRequest 的短期缓存 - dashboard: request detail 支持短 TTL 缓存并在 UsageRecordsTable mousedown 时预取 - data: migrate 测试在 wait_for_postgres 失败时清理子进程，避免遗留
103 lines
2.9 KiB
Vue
103 lines
2.9 KiB
Vue
<template>
|
|
<nav class="sidebar-nav w-full px-3">
|
|
<div
|
|
v-for="(group, index) in items"
|
|
:key="index"
|
|
class="space-y-1 mb-5"
|
|
>
|
|
<!-- Section Header -->
|
|
<div
|
|
v-if="group.title"
|
|
class="px-2.5 pb-1 flex items-center gap-2"
|
|
:class="index > 0 ? 'pt-1' : ''"
|
|
>
|
|
<span class="text-[10px] font-medium text-muted-foreground/50 font-mono tabular-nums">{{ String(index + 1).padStart(2, '0') }}</span>
|
|
<span class="text-[10px] font-semibold text-muted-foreground/70 uppercase tracking-[0.1em]">{{ group.title }}</span>
|
|
</div>
|
|
|
|
<!-- Links -->
|
|
<div class="space-y-0.5">
|
|
<template
|
|
v-for="item in group.items"
|
|
:key="item.href"
|
|
>
|
|
<RouterLink
|
|
:to="item.href"
|
|
class="group relative flex items-center justify-between px-2.5 py-2 rounded-lg transition-all duration-200"
|
|
:class="[
|
|
isItemActive(item.href)
|
|
? 'bg-primary/10 text-primary font-medium'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
|
|
]"
|
|
@mouseenter="emit('prefetch', item.href)"
|
|
@focus="emit('prefetch', item.href)"
|
|
@pointerdown="emit('prefetch', item.href)"
|
|
@click="handleNavigate(item.href)"
|
|
>
|
|
<div class="flex items-center gap-2.5">
|
|
<component
|
|
:is="item.icon"
|
|
class="h-4 w-4 transition-colors duration-200"
|
|
:class="isItemActive(item.href) ? 'text-primary' : 'text-muted-foreground/70 group-hover:text-foreground'"
|
|
:stroke-width="isItemActive(item.href) ? 2 : 1.75"
|
|
/>
|
|
<span class="text-[13px] tracking-tight">{{ item.name }}</span>
|
|
</div>
|
|
|
|
<!-- Active Indicator -->
|
|
<div
|
|
v-if="isItemActive(item.href)"
|
|
class="w-1 h-1 rounded-full bg-primary"
|
|
/>
|
|
</RouterLink>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Component } from 'vue'
|
|
|
|
export interface NavigationItem {
|
|
name: string
|
|
href: string
|
|
icon: Component
|
|
description?: string
|
|
}
|
|
|
|
export interface NavigationGroup {
|
|
title?: string
|
|
items: NavigationItem[]
|
|
}
|
|
|
|
const props = defineProps<{
|
|
items: NavigationGroup[]
|
|
activePath?: string
|
|
isActive?: (href: string) => boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'navigate', href: string): void
|
|
(e: 'prefetch', href: string): void
|
|
}>()
|
|
|
|
function isItemActive(href: string) {
|
|
if (props.isActive) {
|
|
return props.isActive(href)
|
|
}
|
|
if (props.activePath) {
|
|
return props.activePath === href || props.activePath.startsWith(`${href}/`)
|
|
}
|
|
return false
|
|
}
|
|
|
|
function handleNavigate(href: string) {
|
|
emit('navigate', href)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Navigation styles handled by Tailwind */
|
|
</style>
|