diff --git a/web/components.d.ts b/web/components.d.ts
index 3a12423..016a2e4 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -11,8 +11,14 @@ export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
+ GlassModal: typeof import('./src/components/GlassModal.vue')['default']
+ GlassSwitch: typeof import('./src/components/GlassSwitch.vue')['default']
+ GlassTag: typeof import('./src/components/GlassTag.vue')['default']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+ InlineLogPanel: typeof import('./src/components/InlineLogPanel.vue')['default']
LogViewer: typeof import('./src/components/LogViewer.vue')['default']
+ NIcon: typeof import('naive-ui')['NIcon']
+ NTag: typeof import('naive-ui')['NTag']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
diff --git a/web/src/App.vue b/web/src/App.vue
index 8720347..132c9bc 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -2,13 +2,12 @@
import { ref, onMounted, computed, watch } from 'vue'
import { RouterView, useRouter, useRoute } from 'vue-router'
import {
- NLayout, NLayoutHeader, NLayoutContent, NLayoutFooter,
- NButton, NIcon, NConfigProvider, NMessageProvider,
- NDialogProvider, NGlobalStyle, NDropdown, NTabs, NTabPane,
+ NConfigProvider, NMessageProvider, NDialogProvider, NGlobalStyle,
type GlobalThemeOverrides
} from 'naive-ui'
import {
- PersonCircleOutline, LogoGithub
+ HomeOutline, ExtensionPuzzleOutline, SettingsOutline,
+ PersonCircleOutline, LogOutOutline, LogoGithub
} from '@vicons/ionicons5'
import { getServerStatus, getVersionInfo, removeToken, getToken } from './api'
@@ -17,26 +16,25 @@ const route = useRoute()
const serverInfo = ref({ bind_addr: '', bind_port: 0 })
const clientCount = ref(0)
const version = ref('')
+const showUserMenu = ref(false)
const isLoginPage = computed(() => route.path === '/login')
-// 当前激活的 Tab
-const activeTab = computed(() => {
+const navItems = [
+ { key: 'home', label: '首页', icon: HomeOutline, path: '/' },
+ { key: 'plugins', label: '插件', icon: ExtensionPuzzleOutline, path: '/plugins' },
+ { key: 'settings', label: '设置', icon: SettingsOutline, path: '/settings' }
+]
+
+const activeNav = computed(() => {
const path = route.path
if (path === '/' || path === '/home') return 'home'
- if (path.startsWith('/client')) return 'clients'
+ if (path.startsWith('/client')) return 'home'
if (path === '/plugins') return 'plugins'
if (path === '/settings') return 'settings'
return 'home'
})
-const handleTabChange = (tab: string) => {
- if (tab === 'home') router.push('/')
- else if (tab === 'clients') router.push('/')
- else if (tab === 'plugins') router.push('/plugins')
- else if (tab === 'settings') router.push('/settings')
-}
-
const fetchServerStatus = async () => {
if (isLoginPage.value || !getToken()) return
try {
@@ -75,8 +73,8 @@ const logout = () => {
router.push('/login')
}
-const handleUserAction = (key: string) => {
- if (key === 'logout') logout()
+const toggleUserMenu = () => {
+ showUserMenu.value = !showUserMenu.value
}
// 紫色渐变主题
@@ -101,65 +99,55 @@ const themeOverrides: GlobalThemeOverrides = {
-
-
-