refactor(web): 重构前端界面组件和导航结构
All checks were successful
Build Multi-Platform Binaries / build-frontend (push) Successful in 40s
Build Multi-Platform Binaries / build-binaries (amd64, linux, client, true) (push) Successful in 1m24s
Build Multi-Platform Binaries / build-binaries (amd64, darwin, server, false) (push) Successful in 1m27s
Build Multi-Platform Binaries / build-binaries (amd64, windows, client, true) (push) Successful in 1m27s
Build Multi-Platform Binaries / build-binaries (amd64, linux, server, true) (push) Successful in 1m49s
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, client, true) (push) Successful in 1m15s
Build Multi-Platform Binaries / build-binaries (amd64, windows, server, true) (push) Successful in 1m39s
Build Multi-Platform Binaries / build-binaries (arm64, darwin, server, false) (push) Successful in 1m45s
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, server, true) (push) Successful in 2m2s
Build Multi-Platform Binaries / build-binaries (arm64, linux, client, true) (push) Successful in 1m13s
Build Multi-Platform Binaries / build-binaries (arm64, linux, server, true) (push) Successful in 1m46s
Build Multi-Platform Binaries / build-binaries (arm64, windows, server, false) (push) Successful in 1m20s
All checks were successful
Build Multi-Platform Binaries / build-frontend (push) Successful in 40s
Build Multi-Platform Binaries / build-binaries (amd64, linux, client, true) (push) Successful in 1m24s
Build Multi-Platform Binaries / build-binaries (amd64, darwin, server, false) (push) Successful in 1m27s
Build Multi-Platform Binaries / build-binaries (amd64, windows, client, true) (push) Successful in 1m27s
Build Multi-Platform Binaries / build-binaries (amd64, linux, server, true) (push) Successful in 1m49s
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, client, true) (push) Successful in 1m15s
Build Multi-Platform Binaries / build-binaries (amd64, windows, server, true) (push) Successful in 1m39s
Build Multi-Platform Binaries / build-binaries (arm64, darwin, server, false) (push) Successful in 1m45s
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, server, true) (push) Successful in 2m2s
Build Multi-Platform Binaries / build-binaries (arm64, linux, client, true) (push) Successful in 1m13s
Build Multi-Platform Binaries / build-binaries (arm64, linux, server, true) (push) Successful in 1m46s
Build Multi-Platform Binaries / build-binaries (arm64, windows, server, false) (push) Successful in 1m20s
- 替换 naive-ui 导航组件为自定义玻璃态设计组件 - 引入 GlassModal、GlassSwitch、GlassTag 等自定义组件 - 更新 App.vue 中的布局结构和样式设计 - 重构客户端视图中的表单验证逻辑 - 移除 tabs 组件改用侧边栏导航菜单 - 添加内联日志面板组件 - 优化响应式布局和移动端适配 - 更新图标组件引用方式 - 简化表单验证实现方式 - 添加插件下拉菜单功能 - 优化客户端管理界面UI - 更新依赖注入声明文件 - 重构用户菜单交互逻辑 - 移除路由跳转相关代码优化性能
This commit is contained in:
Flik
6
web/components.d.ts
vendored
6
web/components.d.ts
vendored
@@ -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']
|
||||
}
|
||||
|
||||
293
web/src/App.vue
293
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 = {
|
||||
<n-global-style />
|
||||
<n-dialog-provider>
|
||||
<n-message-provider>
|
||||
<n-layout v-if="!isLoginPage" class="main-layout" position="absolute">
|
||||
<!-- 顶部导航栏 -->
|
||||
<n-layout-header bordered class="header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<span class="logo-text">GoTunnel</span>
|
||||
<div v-if="!isLoginPage" class="app-layout">
|
||||
<!-- Header -->
|
||||
<header class="app-header">
|
||||
<div class="header-left">
|
||||
<span class="logo">GoTunnel</span>
|
||||
</div>
|
||||
<nav class="header-nav">
|
||||
<router-link
|
||||
v-for="item in navItems"
|
||||
:key="item.key"
|
||||
:to="item.path"
|
||||
class="nav-item"
|
||||
:class="{ active: activeNav === item.key }"
|
||||
>
|
||||
<component :is="item.icon" class="nav-icon" />
|
||||
<span>{{ item.label }}</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
<div class="header-right">
|
||||
<div class="user-menu" @click="toggleUserMenu">
|
||||
<PersonCircleOutline class="user-icon" />
|
||||
<div v-if="showUserMenu" class="user-dropdown" @click.stop>
|
||||
<button class="dropdown-item" @click="logout">
|
||||
<LogOutOutline class="dropdown-icon" />
|
||||
<span>退出登录</span>
|
||||
</button>
|
||||
</div>
|
||||
<n-tabs
|
||||
type="line"
|
||||
:value="activeTab"
|
||||
@update:value="handleTabChange"
|
||||
class="nav-tabs"
|
||||
>
|
||||
<n-tab-pane name="home" tab="首页" />
|
||||
<n-tab-pane name="clients" tab="客户端管理" />
|
||||
<n-tab-pane name="plugins" tab="插件商店" />
|
||||
<n-tab-pane name="settings" tab="系统设置" />
|
||||
</n-tabs>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<n-dropdown
|
||||
:options="[{ label: '退出登录', key: 'logout' }]"
|
||||
@select="handleUserAction"
|
||||
>
|
||||
<n-button quaternary circle size="large">
|
||||
<template #icon>
|
||||
<n-icon size="24"><PersonCircleOutline /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</n-layout-header>
|
||||
</header>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<n-layout-content class="main-content">
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<RouterView />
|
||||
</n-layout-content>
|
||||
</main>
|
||||
|
||||
<!-- 底部页脚 -->
|
||||
<n-layout-footer bordered class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<span class="brand">GoTunnel</span>
|
||||
<span class="version" v-if="version">v{{ version }}</span>
|
||||
</div>
|
||||
<div class="footer-center">
|
||||
<a href="https://github.com/user/gotunnel" target="_blank" class="footer-link">
|
||||
<n-icon size="16"><LogoGithub /></n-icon>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<span>© 2024 Flik. MIT License</span>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<footer class="app-footer">
|
||||
<div class="footer-left">
|
||||
<span class="brand">GoTunnel</span>
|
||||
<span v-if="version" class="version">v{{ version }}</span>
|
||||
</div>
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
<a href="https://github.com/user/gotunnel" target="_blank" class="footer-link">
|
||||
<LogoGithub class="footer-icon" />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<span class="copyright">© 2024 Flik. MIT License</span>
|
||||
</footer>
|
||||
</div>
|
||||
<RouterView v-else />
|
||||
</n-message-provider>
|
||||
</n-dialog-provider>
|
||||
@@ -167,87 +155,140 @@ const themeOverrides: GlobalThemeOverrides = {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.main-layout {
|
||||
height: 100vh;
|
||||
.app-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
}
|
||||
|
||||
.header {
|
||||
/* Header */
|
||||
.app-header {
|
||||
height: 60px;
|
||||
background: rgba(30, 27, 75, 0.95);
|
||||
background: rgba(15, 12, 41, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
padding: 0 24px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-tabs :deep(.n-tabs-tab) {
|
||||
/* Navigation */
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* User Menu */
|
||||
.user-menu {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.nav-tabs :deep(.n-tabs-tab--active) {
|
||||
color: #ffffff !important;
|
||||
.user-icon:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-tabs :deep(.n-tabs-bar) {
|
||||
background-color: #ffffff !important;
|
||||
.user-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
background: rgba(30, 27, 75, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.header-right :deep(.n-button) {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
/* Footer */
|
||||
.app-footer {
|
||||
height: 48px;
|
||||
background: rgba(30, 27, 75, 0.9);
|
||||
background: rgba(15, 12, 41, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
@@ -269,41 +310,41 @@ const themeOverrides: GlobalThemeOverrides = {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer-center {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
.footer-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
.app-header {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.header-left {
|
||||
gap: 16px;
|
||||
.header-nav {
|
||||
display: none;
|
||||
}
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
.footer-content {
|
||||
.app-footer {
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.copyright {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
112
web/src/components/GlassModal.vue
Normal file
112
web/src/components/GlassModal.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<script setup lang="ts">
|
||||
import { CloseOutline } from '@vicons/ionicons5'
|
||||
|
||||
defineProps<{
|
||||
show: boolean
|
||||
title: string
|
||||
width?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="show" class="modal-overlay" @click.self="emit('close')">
|
||||
<div class="modal-container" :style="{ maxWidth: width || '500px' }">
|
||||
<div class="modal-header">
|
||||
<h3>{{ title }}</h3>
|
||||
<button class="close-btn" @click="emit('close')">
|
||||
<CloseOutline />
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 100%;
|
||||
background: rgba(30, 27, 75, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.close-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-footer:empty {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
85
web/src/components/GlassSwitch.vue
Normal file
85
web/src/components/GlassSwitch.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
modelValue?: boolean
|
||||
size?: 'small' | 'medium'
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const toggle = () => {
|
||||
if (!props.disabled) {
|
||||
emit('update:modelValue', !props.modelValue)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="glass-switch"
|
||||
:class="[size || 'small', { active: modelValue, disabled }]"
|
||||
@click="toggle"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<span class="switch-thumb"></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.glass-switch {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.glass-switch.small {
|
||||
width: 32px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.glass-switch:hover:not(.disabled) {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.glass-switch.active {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
}
|
||||
|
||||
.glass-switch.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.switch-thumb {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.glass-switch.small .switch-thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.glass-switch.active .switch-thumb {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.glass-switch.small.active .switch-thumb {
|
||||
transform: translateX(14px);
|
||||
}
|
||||
</style>
|
||||
60
web/src/components/GlassTag.vue
Normal file
60
web/src/components/GlassTag.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
type?: 'default' | 'success' | 'warning' | 'error' | 'info'
|
||||
size?: 'small' | 'medium'
|
||||
round?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="glass-tag" :class="[type || 'default', size || 'small', { round }]">
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.glass-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass-tag.round {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.glass-tag.medium {
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.glass-tag.success {
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
border-color: rgba(52, 211, 153, 0.3);
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.glass-tag.warning {
|
||||
background: rgba(251, 191, 36, 0.15);
|
||||
border-color: rgba(251, 191, 36, 0.3);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.glass-tag.error {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.glass-tag.info {
|
||||
background: rgba(96, 165, 250, 0.15);
|
||||
border-color: rgba(96, 165, 250, 0.3);
|
||||
color: #60a5fa;
|
||||
}
|
||||
</style>
|
||||
299
web/src/components/InlineLogPanel.vue
Normal file
299
web/src/components/InlineLogPanel.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { PlayOutline, StopOutline, TrashOutline } from '@vicons/ionicons5'
|
||||
import { createLogStream } from '../api'
|
||||
import type { LogEntry } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
clientId: string
|
||||
}>()
|
||||
|
||||
const logs = ref<LogEntry[]>([])
|
||||
const isStreaming = ref(false)
|
||||
const autoScroll = ref(true)
|
||||
const loading = ref(false)
|
||||
|
||||
let eventSource: EventSource | null = null
|
||||
const logContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
const startStream = () => {
|
||||
if (eventSource) {
|
||||
eventSource.close()
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
isStreaming.value = true
|
||||
|
||||
eventSource = createLogStream(
|
||||
props.clientId,
|
||||
{ lines: 100, follow: true, level: '' },
|
||||
(entry) => {
|
||||
logs.value.push(entry)
|
||||
if (logs.value.length > 500) {
|
||||
logs.value = logs.value.slice(-300)
|
||||
}
|
||||
if (autoScroll.value) {
|
||||
nextTick(() => scrollToBottom())
|
||||
}
|
||||
loading.value = false
|
||||
},
|
||||
() => {
|
||||
isStreaming.value = false
|
||||
loading.value = false
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const stopStream = () => {
|
||||
if (eventSource) {
|
||||
eventSource.close()
|
||||
eventSource = null
|
||||
}
|
||||
isStreaming.value = false
|
||||
}
|
||||
|
||||
const clearLogs = () => {
|
||||
logs.value = []
|
||||
}
|
||||
|
||||
const scrollToBottom = () => {
|
||||
if (logContainer.value) {
|
||||
logContainer.value.scrollTop = logContainer.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
const getLevelColor = (level: string): string => {
|
||||
switch (level) {
|
||||
case 'error': return '#fca5a5'
|
||||
case 'warn': return '#fcd34d'
|
||||
case 'info': return '#60a5fa'
|
||||
case 'debug': return '#9ca3af'
|
||||
default: return 'rgba(255,255,255,0.7)'
|
||||
}
|
||||
}
|
||||
|
||||
const formatTime = (ts: number): string => {
|
||||
return new Date(ts).toLocaleTimeString('en-US', { hour12: false })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
startStream()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopStream()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="inline-log-panel">
|
||||
<div class="log-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<span class="log-title">实时日志</span>
|
||||
<span v-if="isStreaming" class="streaming-badge">
|
||||
<span class="streaming-dot"></span>
|
||||
实时
|
||||
</span>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<button v-if="!isStreaming" class="tool-btn" @click="startStream" title="开始">
|
||||
<PlayOutline class="tool-icon" />
|
||||
</button>
|
||||
<button v-else class="tool-btn" @click="stopStream" title="停止">
|
||||
<StopOutline class="tool-icon" />
|
||||
</button>
|
||||
<button class="tool-btn" @click="clearLogs" title="清空">
|
||||
<TrashOutline class="tool-icon" />
|
||||
</button>
|
||||
<label class="auto-scroll-toggle">
|
||||
<input type="checkbox" v-model="autoScroll" />
|
||||
<span>自动滚动</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="logContainer" class="log-content">
|
||||
<div v-if="loading && logs.length === 0" class="log-loading">
|
||||
连接中...
|
||||
</div>
|
||||
<div v-else-if="logs.length === 0" class="log-empty">
|
||||
暂无日志
|
||||
</div>
|
||||
<div v-else class="log-lines">
|
||||
<div v-for="(log, index) in logs" :key="index" class="log-line">
|
||||
<span class="log-time">{{ formatTime(log.ts) }}</span>
|
||||
<span class="log-level" :style="{ color: getLevelColor(log.level) }">
|
||||
[{{ log.level.toUpperCase() }}]
|
||||
</span>
|
||||
<span class="log-src">[{{ log.src }}]</span>
|
||||
<span class="log-msg">{{ log.msg }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.inline-log-panel {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.log-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.log-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.streaming-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: #34d399;
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.streaming-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #34d399;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tool-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.auto-scroll-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.auto-scroll-toggle input {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
accent-color: #a78bfa;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-loading,
|
||||
.log-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.log-lines {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.log-line {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.log-level {
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.log-src {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.log-msg {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.log-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||
import { NCard, NSpace, NButton, NSelect, NSwitch, NInput, NIcon, NEmpty, NSpin } from 'naive-ui'
|
||||
import { PlayOutline, StopOutline, TrashOutline, DownloadOutline } from '@vicons/ionicons5'
|
||||
import {
|
||||
PlayOutline, StopOutline, TrashOutline, DownloadOutline, CloseOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import { createLogStream } from '../api'
|
||||
import type { LogEntry } from '../types'
|
||||
|
||||
@@ -24,14 +25,6 @@ const loading = ref(false)
|
||||
let eventSource: EventSource | null = null
|
||||
const logContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
const levelOptions = [
|
||||
{ label: '所有级别', value: '' },
|
||||
{ label: 'Info', value: 'info' },
|
||||
{ label: 'Warning', value: 'warn' },
|
||||
{ label: 'Error', value: 'error' },
|
||||
{ label: 'Debug', value: 'debug' }
|
||||
]
|
||||
|
||||
const startStream = () => {
|
||||
if (eventSource) {
|
||||
eventSource.close()
|
||||
@@ -133,100 +126,354 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-card title="客户端日志" :closable="true" @close="emit('close')">
|
||||
<template #header-extra>
|
||||
<n-space :size="8">
|
||||
<n-select
|
||||
v-model:value="levelFilter"
|
||||
:options="levelOptions"
|
||||
size="small"
|
||||
style="width: 110px;"
|
||||
@update:value="() => { stopStream(); logs = []; startStream(); }"
|
||||
/>
|
||||
<n-input
|
||||
v-model:value="searchText"
|
||||
placeholder="搜索..."
|
||||
size="small"
|
||||
style="width: 120px;"
|
||||
clearable
|
||||
/>
|
||||
<n-switch v-model:value="autoScroll" size="small">
|
||||
<template #checked>自动滚动</template>
|
||||
<template #unchecked>手动</template>
|
||||
</n-switch>
|
||||
<n-button size="small" quaternary @click="clearLogs">
|
||||
<template #icon><n-icon><TrashOutline /></n-icon></template>
|
||||
</n-button>
|
||||
<n-button size="small" quaternary @click="downloadLogs">
|
||||
<template #icon><n-icon><DownloadOutline /></n-icon></template>
|
||||
</n-button>
|
||||
<n-button
|
||||
size="small"
|
||||
:type="isStreaming ? 'error' : 'success'"
|
||||
@click="isStreaming ? stopStream() : startStream()"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon><StopOutline v-if="isStreaming" /><PlayOutline v-else /></n-icon>
|
||||
</template>
|
||||
{{ isStreaming ? '停止' : '开始' }}
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
<div v-if="visible" class="log-overlay" @click.self="emit('close')">
|
||||
<div class="log-modal">
|
||||
<!-- Header -->
|
||||
<div class="log-header">
|
||||
<h3>客户端日志</h3>
|
||||
<div class="log-controls">
|
||||
<select v-model="levelFilter" class="log-select" @change="() => { stopStream(); logs = []; startStream(); }">
|
||||
<option value="">所有级别</option>
|
||||
<option value="info">Info</option>
|
||||
<option value="warn">Warning</option>
|
||||
<option value="error">Error</option>
|
||||
<option value="debug">Debug</option>
|
||||
</select>
|
||||
<input v-model="searchText" type="text" class="log-input" placeholder="搜索..." />
|
||||
<label class="log-toggle">
|
||||
<input type="checkbox" v-model="autoScroll" />
|
||||
<span>自动滚动</span>
|
||||
</label>
|
||||
<button class="icon-btn" @click="clearLogs" title="清空">
|
||||
<TrashOutline />
|
||||
</button>
|
||||
<button class="icon-btn" @click="downloadLogs" title="下载">
|
||||
<DownloadOutline />
|
||||
</button>
|
||||
<button class="action-btn" :class="isStreaming ? 'danger' : 'success'" @click="isStreaming ? stopStream() : startStream()">
|
||||
<StopOutline v-if="isStreaming" />
|
||||
<PlayOutline v-else />
|
||||
<span>{{ isStreaming ? '停止' : '开始' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="close-btn" @click="emit('close')">
|
||||
<CloseOutline />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<n-spin :show="loading && logs.length === 0">
|
||||
<div
|
||||
ref="logContainer"
|
||||
class="log-container"
|
||||
>
|
||||
<n-empty v-if="filteredLogs.length === 0" description="暂无日志" />
|
||||
<div
|
||||
v-for="(log, i) in filteredLogs"
|
||||
:key="i"
|
||||
class="log-line"
|
||||
>
|
||||
<span class="log-time">{{ formatTime(log.ts) }}</span>
|
||||
<span class="log-level" :style="{ color: getLevelColor(log.level) }">[{{ log.level.toUpperCase() }}]</span>
|
||||
<span class="log-src">[{{ log.src }}]</span>
|
||||
<span class="log-msg">{{ log.msg }}</span>
|
||||
<!-- Content -->
|
||||
<div class="log-body">
|
||||
<div v-if="loading && logs.length === 0" class="log-loading">加载中...</div>
|
||||
<div ref="logContainer" class="log-container">
|
||||
<div v-if="filteredLogs.length === 0" class="log-empty">暂无日志</div>
|
||||
<div v-for="(log, i) in filteredLogs" :key="i" class="log-line">
|
||||
<span class="log-time">{{ formatTime(log.ts) }}</span>
|
||||
<span class="log-level" :style="{ color: getLevelColor(log.level) }">[{{ log.level.toUpperCase() }}]</span>
|
||||
<span class="log-src">[{{ log.src }}]</span>
|
||||
<span class="log-msg">{{ log.msg }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-spin>
|
||||
</n-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.log-container {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
background: #1e1e1e;
|
||||
padding: 8px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
/* Overlay */
|
||||
.log-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.log-modal {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
max-height: 80vh;
|
||||
background: rgba(30, 27, 75, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.log-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.log-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Select */
|
||||
.log-select {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.log-select option {
|
||||
background: #1e1b4b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.log-input {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
width: 150px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.log-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.log-input:focus {
|
||||
border-color: rgba(167, 139, 250, 0.5);
|
||||
}
|
||||
|
||||
/* Toggle */
|
||||
.log-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-toggle input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: #a78bfa;
|
||||
}
|
||||
|
||||
/* Icon Button */
|
||||
.icon-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* Action Button */
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.action-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.action-btn.success {
|
||||
background: rgba(52, 211, 153, 0.2);
|
||||
border-color: rgba(52, 211, 153, 0.3);
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
/* Close Button */
|
||||
.close-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.close-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.log-body {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.log-loading {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.log-container {
|
||||
flex: 1;
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 12px;
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.log-empty {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Log Line */
|
||||
.log-line {
|
||||
line-height: 1.6;
|
||||
line-height: 1.8;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
color: #d4d4d4;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
color: #808080;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.log-level {
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.log-src {
|
||||
color: #a0a0a0;
|
||||
color: rgba(167, 139, 250, 0.8);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.log-msg {
|
||||
color: #d4d4d4;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.log-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.log-container::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.log-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.log-container::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.log-overlay {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.log-modal {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.log-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
129
web/src/composables/useConfirm.ts
Normal file
129
web/src/composables/useConfirm.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
import { ref, createApp, h } from 'vue'
|
||||
|
||||
interface DialogOptions {
|
||||
title: string
|
||||
content: string
|
||||
positiveText?: string
|
||||
negativeText?: string
|
||||
onPositiveClick?: () => void | Promise<void>
|
||||
onNegativeClick?: () => void
|
||||
}
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogOptions = ref<DialogOptions | null>(null)
|
||||
|
||||
const DialogComponent = {
|
||||
setup() {
|
||||
const handlePositive = async () => {
|
||||
if (dialogOptions.value?.onPositiveClick) {
|
||||
await dialogOptions.value.onPositiveClick()
|
||||
}
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const handleNegative = () => {
|
||||
dialogOptions.value?.onNegativeClick?.()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (!dialogVisible.value || !dialogOptions.value) return null
|
||||
|
||||
return h('div', { class: 'dialog-overlay', onClick: handleNegative },
|
||||
h('div', { class: 'dialog-container', onClick: (e: Event) => e.stopPropagation() }, [
|
||||
h('h3', { class: 'dialog-title' }, dialogOptions.value.title),
|
||||
h('p', { class: 'dialog-content' }, dialogOptions.value.content),
|
||||
h('div', { class: 'dialog-footer' }, [
|
||||
h('button', { class: 'dialog-btn', onClick: handleNegative },
|
||||
dialogOptions.value.negativeText || '取消'),
|
||||
h('button', { class: 'dialog-btn primary', onClick: handlePositive },
|
||||
dialogOptions.value.positiveText || '确定')
|
||||
])
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let containerMounted = false
|
||||
|
||||
function ensureContainer() {
|
||||
if (containerMounted) return
|
||||
|
||||
const container = document.createElement('div')
|
||||
container.id = 'dialog-root'
|
||||
document.body.appendChild(container)
|
||||
|
||||
const app = createApp(DialogComponent)
|
||||
app.mount(container)
|
||||
containerMounted = true
|
||||
|
||||
// Add styles
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9998;
|
||||
}
|
||||
.dialog-container {
|
||||
background: rgba(30, 27, 75, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
padding: 24px;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
}
|
||||
.dialog-title {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
.dialog-content {
|
||||
margin: 0 0 20px 0;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.dialog-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.dialog-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.dialog-btn.primary {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
border: none;
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
|
||||
export function useConfirm() {
|
||||
return {
|
||||
warning: (options: DialogOptions) => {
|
||||
ensureContainer()
|
||||
dialogOptions.value = options
|
||||
dialogVisible.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
101
web/src/composables/useToast.ts
Normal file
101
web/src/composables/useToast.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
import { ref, createApp, h } from 'vue'
|
||||
|
||||
interface ToastOptions {
|
||||
message: string
|
||||
type: 'success' | 'error' | 'warning' | 'info'
|
||||
duration?: number
|
||||
}
|
||||
|
||||
const toasts = ref<Array<ToastOptions & { id: number }>>([])
|
||||
let toastId = 0
|
||||
|
||||
const ToastContainer = {
|
||||
setup() {
|
||||
return () => h('div', { class: 'toast-container' },
|
||||
toasts.value.map(toast =>
|
||||
h('div', {
|
||||
key: toast.id,
|
||||
class: ['toast-item', toast.type]
|
||||
}, toast.message)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
let containerMounted = false
|
||||
|
||||
function ensureContainer() {
|
||||
if (containerMounted) return
|
||||
|
||||
const container = document.createElement('div')
|
||||
container.id = 'toast-root'
|
||||
document.body.appendChild(container)
|
||||
|
||||
const app = createApp(ToastContainer)
|
||||
app.mount(container)
|
||||
containerMounted = true
|
||||
|
||||
// Add styles
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.toast-item {
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
backdrop-filter: blur(20px);
|
||||
animation: toast-in 0.3s ease;
|
||||
max-width: 350px;
|
||||
}
|
||||
.toast-item.success {
|
||||
background: rgba(52, 211, 153, 0.9);
|
||||
}
|
||||
.toast-item.error {
|
||||
background: rgba(239, 68, 68, 0.9);
|
||||
}
|
||||
.toast-item.warning {
|
||||
background: rgba(251, 191, 36, 0.9);
|
||||
color: #1e1b4b;
|
||||
}
|
||||
.toast-item.info {
|
||||
background: rgba(96, 165, 250, 0.9);
|
||||
}
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translateX(20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
|
||||
function showToast(options: ToastOptions) {
|
||||
ensureContainer()
|
||||
|
||||
const id = ++toastId
|
||||
toasts.value.push({ ...options, id })
|
||||
|
||||
setTimeout(() => {
|
||||
const index = toasts.value.findIndex(t => t.id === id)
|
||||
if (index > -1) {
|
||||
toasts.value.splice(index, 1)
|
||||
}
|
||||
}, options.duration || 3000)
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
return {
|
||||
success: (message: string) => showToast({ message, type: 'success' }),
|
||||
error: (message: string) => showToast({ message, type: 'error' }),
|
||||
warning: (message: string) => showToast({ message, type: 'warning' }),
|
||||
info: (message: string) => showToast({ message, type: 'info' })
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {
|
||||
NButton, NSpace, NTag, NEmpty,
|
||||
NForm, NFormItem, NInput, NInputNumber, NSelect, NModal, NSwitch,
|
||||
NIcon, useMessage, useDialog, NSpin, NGrid, NGridItem,
|
||||
NTooltip, NDropdown, type FormInst, type FormRules
|
||||
} from 'naive-ui'
|
||||
import {
|
||||
ArrowBackOutline, CreateOutline, TrashOutline,
|
||||
PushOutline, AddOutline, StorefrontOutline, DocumentTextOutline,
|
||||
ExtensionPuzzleOutline, SettingsOutline, CloudDownloadOutline, RefreshOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import GlassModal from '../components/GlassModal.vue'
|
||||
import GlassTag from '../components/GlassTag.vue'
|
||||
import GlassSwitch from '../components/GlassSwitch.vue'
|
||||
import { useToast } from '../composables/useToast'
|
||||
import { useConfirm } from '../composables/useConfirm'
|
||||
import {
|
||||
getClient, updateClient, deleteClient, pushConfigToClient, disconnectClient, restartClient,
|
||||
getClientPluginConfig, updateClientPluginConfig,
|
||||
@@ -20,11 +19,12 @@ import {
|
||||
} from '../api'
|
||||
import type { ProxyRule, ClientPlugin, ConfigField, StorePluginInfo, RuleSchemasMap } from '../types'
|
||||
import LogViewer from '../components/LogViewer.vue'
|
||||
import InlineLogPanel from '../components/InlineLogPanel.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
const message = useToast()
|
||||
const dialog = useConfirm()
|
||||
const clientId = route.params.id as string
|
||||
|
||||
// Data
|
||||
@@ -67,7 +67,6 @@ const builtinTypes = [
|
||||
// Modal Control for Rules
|
||||
const showRuleModal = ref(false)
|
||||
const ruleModalType = ref<'create' | 'edit'>('create')
|
||||
const ruleFormRef = ref<FormInst | null>(null)
|
||||
// Default Rule Model
|
||||
const defaultRule = {
|
||||
name: '',
|
||||
@@ -91,37 +90,6 @@ const getExtraFields = (type: string): ConfigField[] => {
|
||||
return schema?.extra_fields || []
|
||||
}
|
||||
|
||||
// Validation Rules
|
||||
const ruleValidationRules: FormRules = {
|
||||
name: { required: true, message: '请输入规则名称', trigger: 'blur' },
|
||||
type: { required: true, message: '请选择类型', trigger: ['blur', 'change'] },
|
||||
remote_port: [
|
||||
{ required: true, type: 'number', message: '请输入远程端口', trigger: ['blur', 'change'] },
|
||||
{ type: 'number', min: 1, max: 65535, message: '端口范围 1-65535', trigger: ['blur', 'change'] }
|
||||
],
|
||||
local_ip: {
|
||||
required: true,
|
||||
validator(_rule, value) {
|
||||
if (needsLocalAddr(ruleForm.value.type || 'tcp')) {
|
||||
if (!value) return new Error('请输入本地IP')
|
||||
}
|
||||
return true
|
||||
},
|
||||
trigger: 'blur'
|
||||
},
|
||||
local_port: {
|
||||
required: true,
|
||||
validator(_rule, value) {
|
||||
if (needsLocalAddr(ruleForm.value.type || 'tcp')) {
|
||||
if (!value && value !== 0) return new Error('请输入本地端口')
|
||||
if (typeof value === 'number' && (value < 1 || value > 65535)) return new Error('端口范围 1-65535')
|
||||
}
|
||||
return true
|
||||
},
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
const loadClient = async () => {
|
||||
loading.value = true
|
||||
@@ -262,29 +230,42 @@ const saveRules = async (newRules: ProxyRule[]) => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleRuleSubmit = (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
ruleFormRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
let newRules = [...rules.value]
|
||||
if (ruleModalType.value === 'create') {
|
||||
if (newRules.some(r => r.name === ruleForm.value.name)) {
|
||||
message.error('规则名称已存在')
|
||||
return
|
||||
}
|
||||
newRules.push({ ...ruleForm.value })
|
||||
} else {
|
||||
const index = newRules.findIndex(r => r.name === ruleForm.value.name)
|
||||
if (index > -1) {
|
||||
newRules[index] = { ...ruleForm.value }
|
||||
}
|
||||
}
|
||||
await saveRules(newRules)
|
||||
showRuleModal.value = false
|
||||
} else {
|
||||
message.error('请检查表单填写')
|
||||
const handleRuleSubmit = async () => {
|
||||
// Simple validation
|
||||
if (!ruleForm.value.name) {
|
||||
message.error('请输入规则名称')
|
||||
return
|
||||
}
|
||||
if (!ruleForm.value.remote_port || ruleForm.value.remote_port < 1 || ruleForm.value.remote_port > 65535) {
|
||||
message.error('请输入有效的远程端口 (1-65535)')
|
||||
return
|
||||
}
|
||||
if (needsLocalAddr(ruleForm.value.type || 'tcp')) {
|
||||
if (!ruleForm.value.local_ip) {
|
||||
message.error('请输入本地IP')
|
||||
return
|
||||
}
|
||||
})
|
||||
if (!ruleForm.value.local_port || ruleForm.value.local_port < 1 || ruleForm.value.local_port > 65535) {
|
||||
message.error('请输入有效的本地端口 (1-65535)')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
let newRules = [...rules.value]
|
||||
if (ruleModalType.value === 'create') {
|
||||
if (newRules.some(r => r.name === ruleForm.value.name)) {
|
||||
message.error('规则名称已存在')
|
||||
return
|
||||
}
|
||||
newRules.push({ ...ruleForm.value })
|
||||
} else {
|
||||
const index = newRules.findIndex(r => r.name === ruleForm.value.name)
|
||||
if (index > -1) {
|
||||
newRules[index] = { ...ruleForm.value }
|
||||
}
|
||||
}
|
||||
await saveRules(newRules)
|
||||
showRuleModal.value = false
|
||||
}
|
||||
|
||||
// Store & Plugin Logic
|
||||
@@ -445,6 +426,12 @@ onMounted(() => {
|
||||
// Log Viewer
|
||||
const showLogViewer = ref(false)
|
||||
|
||||
// Plugin Menu
|
||||
const activePluginMenu = ref('')
|
||||
const togglePluginMenu = (pluginId: string) => {
|
||||
activePluginMenu.value = activePluginMenu.value === pluginId ? '' : pluginId
|
||||
}
|
||||
|
||||
// Plugin Status Actions
|
||||
const handleStartPlugin = async (plugin: ClientPlugin) => {
|
||||
const rule = rules.value.find(r => r.type === plugin.name)
|
||||
@@ -611,22 +598,17 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
</div>
|
||||
<div v-for="rule in rules" :key="rule.name" class="table-row">
|
||||
<span class="rule-name">{{ rule.name }}</span>
|
||||
<span><n-tag size="small" :type="rule.type==='websocket'?'info':'default'">{{ (rule.type || 'tcp').toUpperCase() }}</n-tag></span>
|
||||
<span><GlassTag :type="rule.type==='websocket'?'info':'default'">{{ (rule.type || 'tcp').toUpperCase() }}</GlassTag></span>
|
||||
<span class="rule-mapping">
|
||||
{{ needsLocalAddr(rule.type||'tcp') ? `${rule.local_ip}:${rule.local_port}` : '-' }}
|
||||
→
|
||||
:{{ rule.remote_port }}
|
||||
</span>
|
||||
<span>
|
||||
<n-switch :value="rule.enabled !== false" @update:value="(v: boolean) => { rule.enabled = v; saveRules(rules) }" size="small" />
|
||||
<GlassSwitch :model-value="rule.enabled !== false" @update:model-value="(v: boolean) => { rule.enabled = v; saveRules(rules) }" size="small" />
|
||||
</span>
|
||||
<span class="rule-actions">
|
||||
<n-tooltip v-if="rule.plugin_managed">
|
||||
<template #trigger>
|
||||
<n-tag type="info" size="small">插件托管</n-tag>
|
||||
</template>
|
||||
此规则由插件管理
|
||||
</n-tooltip>
|
||||
<GlassTag v-if="rule.plugin_managed" type="info" title="此规则由插件管理">插件托管</GlassTag>
|
||||
<template v-else>
|
||||
<button class="icon-btn" @click="openEditRule(rule)">编辑</button>
|
||||
<button class="icon-btn danger" @click="handleDeleteRule(rule)">删除</button>
|
||||
@@ -642,7 +624,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
<div class="card-header">
|
||||
<h3>已安装扩展</h3>
|
||||
<button class="glass-btn small" @click="openStoreModal">
|
||||
<n-icon size="14"><StorefrontOutline /></n-icon>
|
||||
<StorefrontOutline class="btn-icon" />
|
||||
插件商店
|
||||
</button>
|
||||
</div>
|
||||
@@ -653,142 +635,149 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
<div v-else class="plugins-list">
|
||||
<div v-for="plugin in clientPlugins" :key="plugin.id" class="plugin-item">
|
||||
<div class="plugin-info">
|
||||
<n-icon size="18" color="#a78bfa"><ExtensionPuzzleOutline /></n-icon>
|
||||
<ExtensionPuzzleOutline class="plugin-icon" />
|
||||
<span class="plugin-name">{{ plugin.name }}</span>
|
||||
<span class="plugin-version">v{{ plugin.version }}</span>
|
||||
</div>
|
||||
<div class="plugin-meta">
|
||||
<span>端口: {{ plugin.remote_port || '-' }}</span>
|
||||
<n-tag :type="plugin.running ? 'success' : 'default'" size="small" round>
|
||||
<GlassTag :type="plugin.running ? 'success' : 'default'" round>
|
||||
{{ plugin.running ? '运行中' : '已停止' }}
|
||||
</n-tag>
|
||||
<n-switch :value="plugin.enabled" size="small" @update:value="toggleClientPlugin(plugin)" />
|
||||
</GlassTag>
|
||||
<GlassSwitch :model-value="plugin.enabled" size="small" @update:model-value="toggleClientPlugin(plugin)" />
|
||||
</div>
|
||||
<div class="plugin-actions">
|
||||
<button v-if="plugin.running && plugin.remote_port" class="icon-btn success" @click="handleOpenPlugin(plugin)">打开</button>
|
||||
<button v-if="!plugin.running" class="icon-btn" @click="handleStartPlugin(plugin)" :disabled="!online || !plugin.enabled">启动</button>
|
||||
<n-dropdown :options="[
|
||||
{ label: '重启', key: 'restart', disabled: !plugin.running },
|
||||
{ label: '配置', key: 'config' },
|
||||
{ label: '停止', key: 'stop', disabled: !plugin.running },
|
||||
{ label: '删除', key: 'delete' }
|
||||
]" @select="(k: string) => {
|
||||
if(k==='restart') handleRestartPlugin(plugin);
|
||||
if(k==='config') openConfigModal(plugin);
|
||||
if(k==='delete') handleDeletePlugin(plugin);
|
||||
if(k==='stop') handleStopPlugin(plugin);
|
||||
}">
|
||||
<button class="icon-btn"><n-icon size="16"><SettingsOutline /></n-icon></button>
|
||||
</n-dropdown>
|
||||
<div class="dropdown-wrapper">
|
||||
<button class="icon-btn" @click="togglePluginMenu(plugin.id)">
|
||||
<SettingsOutline class="settings-icon" />
|
||||
</button>
|
||||
<div v-if="activePluginMenu === plugin.id" class="dropdown-menu">
|
||||
<button @click="handleRestartPlugin(plugin); activePluginMenu = ''" :disabled="!plugin.running">重启</button>
|
||||
<button @click="openConfigModal(plugin); activePluginMenu = ''">配置</button>
|
||||
<button @click="handleStopPlugin(plugin); activePluginMenu = ''" :disabled="!plugin.running">停止</button>
|
||||
<button class="danger" @click="handleDeletePlugin(plugin); activePluginMenu = ''">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inline Log Panel -->
|
||||
<div class="glass-card">
|
||||
<InlineLogPanel :client-id="clientId" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rule Modal -->
|
||||
<n-modal v-model:show="showRuleModal" preset="card" :title="ruleModalType==='create'?'添加规则':'编辑规则'" style="width: 500px">
|
||||
<n-form ref="ruleFormRef" :model="ruleForm" :rules="ruleValidationRules" label-placement="left" label-width="80">
|
||||
<n-form-item label="名称" path="name">
|
||||
<n-input v-model:value="ruleForm.name" placeholder="请输入规则名称" :disabled="ruleModalType==='edit'" />
|
||||
</n-form-item>
|
||||
<n-form-item label="类型" path="type">
|
||||
<n-select v-model:value="ruleForm.type" :options="builtinTypes" />
|
||||
</n-form-item>
|
||||
<template v-if="needsLocalAddr(ruleForm.type || 'tcp')">
|
||||
<n-form-item label="本地IP" path="local_ip">
|
||||
<n-input v-model:value="ruleForm.local_ip" placeholder="127.0.0.1" />
|
||||
</n-form-item>
|
||||
<n-form-item label="本地端口" path="local_port">
|
||||
<n-input-number v-model:value="ruleForm.local_port" :min="1" :max="65535" style="width: 100%" />
|
||||
</n-form-item>
|
||||
</template>
|
||||
<n-form-item label="远程端口" path="remote_port">
|
||||
<n-input-number v-model:value="ruleForm.remote_port" :min="1" :max="65535" style="width: 100%" />
|
||||
</n-form-item>
|
||||
<template v-for="field in getExtraFields(ruleForm.type || '')" :key="field.key">
|
||||
<n-form-item :label="field.label">
|
||||
<n-input v-if="field.type==='string'" v-model:value="ruleForm.plugin_config![field.key]" />
|
||||
<n-input v-if="field.type==='password'" type="password" v-model:value="ruleForm.plugin_config![field.key]" show-password-on="click" />
|
||||
<n-switch v-if="field.type==='bool'" :value="ruleForm.plugin_config![field.key]==='true'" @update:value="(v) => ruleForm.plugin_config![field.key] = String(v)" />
|
||||
</n-form-item>
|
||||
</template>
|
||||
</n-form>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showRuleModal = false">取消</n-button>
|
||||
<n-button type="primary" @click="handleRuleSubmit">保存</n-button>
|
||||
</n-space>
|
||||
<GlassModal :show="showRuleModal" :title="ruleModalType==='create'?'添加规则':'编辑规则'" @close="showRuleModal = false">
|
||||
<div class="form-group">
|
||||
<label class="form-label">名称</label>
|
||||
<input v-model="ruleForm.name" class="form-input" placeholder="请输入规则名称" :disabled="ruleModalType==='edit'" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">类型</label>
|
||||
<select v-model="ruleForm.type" class="form-select">
|
||||
<option v-for="t in builtinTypes" :key="t.value" :value="t.value">{{ t.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<template v-if="needsLocalAddr(ruleForm.type || 'tcp')">
|
||||
<div class="form-group">
|
||||
<label class="form-label">本地IP</label>
|
||||
<input v-model="ruleForm.local_ip" class="form-input" placeholder="127.0.0.1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">本地端口</label>
|
||||
<input v-model.number="ruleForm.local_port" type="number" class="form-input" min="1" max="65535" />
|
||||
</div>
|
||||
</template>
|
||||
</n-modal>
|
||||
<div class="form-group">
|
||||
<label class="form-label">远程端口</label>
|
||||
<input v-model.number="ruleForm.remote_port" type="number" class="form-input" min="1" max="65535" />
|
||||
</div>
|
||||
<template v-for="field in getExtraFields(ruleForm.type || '')" :key="field.key">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ field.label }}</label>
|
||||
<input v-if="field.type==='string'" v-model="ruleForm.plugin_config![field.key]" class="form-input" />
|
||||
<input v-if="field.type==='password'" type="password" v-model="ruleForm.plugin_config![field.key]" class="form-input" />
|
||||
<label v-if="field.type==='bool'" class="form-toggle">
|
||||
<input type="checkbox" :checked="ruleForm.plugin_config![field.key]==='true'" @change="(e: Event) => ruleForm.plugin_config![field.key] = String((e.target as HTMLInputElement).checked)" />
|
||||
<span>启用</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button class="glass-btn" @click="showRuleModal = false">取消</button>
|
||||
<button class="glass-btn primary" @click="handleRuleSubmit">保存</button>
|
||||
</template>
|
||||
</GlassModal>
|
||||
|
||||
<!-- Config Modal -->
|
||||
<n-modal v-model:show="showConfigModal" preset="card" :title="`${configPluginName} 配置`" style="width: 500px;">
|
||||
<n-empty v-if="configLoading" description="加载中..." />
|
||||
<n-form v-else label-placement="left" label-width="100">
|
||||
<n-form-item v-for="field in configSchema" :key="field.key" :label="field.label">
|
||||
<n-input v-if="field.type==='string'" v-model:value="configValues[field.key]" />
|
||||
<n-input v-if="field.type==='password'" type="password" v-model:value="configValues[field.key]" />
|
||||
<n-input-number v-if="field.type==='number'" :value="Number(configValues[field.key])" @update:value="(v) => configValues[field.key] = String(v)" />
|
||||
<n-switch v-if="field.type==='bool'" :value="configValues[field.key]==='true'" @update:value="(v) => configValues[field.key] = String(v)" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showConfigModal = false">取消</n-button>
|
||||
<n-button type="primary" @click="savePluginConfig">保存</n-button>
|
||||
</n-space>
|
||||
<GlassModal :show="showConfigModal" :title="`${configPluginName} 配置`" @close="showConfigModal = false">
|
||||
<div v-if="configLoading" class="loading-state">加载中...</div>
|
||||
<template v-else>
|
||||
<div v-for="field in configSchema" :key="field.key" class="form-group">
|
||||
<label class="form-label">{{ field.label }}</label>
|
||||
<input v-if="field.type==='string'" v-model="configValues[field.key]" class="form-input" />
|
||||
<input v-if="field.type==='password'" type="password" v-model="configValues[field.key]" class="form-input" />
|
||||
<input v-if="field.type==='number'" type="number" :value="Number(configValues[field.key])" @input="(e: Event) => configValues[field.key] = (e.target as HTMLInputElement).value" class="form-input" />
|
||||
<label v-if="field.type==='bool'" class="form-toggle">
|
||||
<input type="checkbox" :checked="configValues[field.key]==='true'" @change="(e: Event) => configValues[field.key] = String((e.target as HTMLInputElement).checked)" />
|
||||
<span>启用</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</n-modal>
|
||||
<template #footer>
|
||||
<button class="glass-btn" @click="showConfigModal = false">取消</button>
|
||||
<button class="glass-btn primary" @click="savePluginConfig">保存</button>
|
||||
</template>
|
||||
</GlassModal>
|
||||
|
||||
<!-- Rename Modal -->
|
||||
<n-modal v-model:show="showRenameModal" preset="card" title="重命名客户端" style="width: 400px;">
|
||||
<n-input v-model:value="renameValue" placeholder="请输入新名称" />
|
||||
<GlassModal :show="showRenameModal" title="重命名客户端" width="400px" @close="showRenameModal = false">
|
||||
<div class="form-group">
|
||||
<label class="form-label">新名称</label>
|
||||
<input v-model="renameValue" class="form-input" placeholder="请输入新名称" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showRenameModal = false">取消</n-button>
|
||||
<n-button type="primary" @click="saveRename">保存</n-button>
|
||||
</n-space>
|
||||
<button class="glass-btn" @click="showRenameModal = false">取消</button>
|
||||
<button class="glass-btn primary" @click="saveRename">保存</button>
|
||||
</template>
|
||||
</n-modal>
|
||||
</GlassModal>
|
||||
|
||||
<!-- Store Modal -->
|
||||
<n-modal v-model:show="showStoreModal" preset="card" title="插件商店" style="width: 600px;">
|
||||
<n-spin :show="storeLoading">
|
||||
<n-grid :x-gap="12" :y-gap="12" cols="1 600:2">
|
||||
<n-grid-item v-for="plugin in storePlugins" :key="plugin.name">
|
||||
<div class="store-plugin-card">
|
||||
<div class="store-plugin-header">
|
||||
<span class="store-plugin-name">{{ plugin.name }}</span>
|
||||
<n-tag size="small">v{{ plugin.version }}</n-tag>
|
||||
</div>
|
||||
<p class="store-plugin-desc">{{ plugin.description }}</p>
|
||||
<button class="glass-btn primary small full" @click="handleInstallStorePlugin(plugin)">
|
||||
安装
|
||||
</button>
|
||||
</div>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-spin>
|
||||
</n-modal>
|
||||
<GlassModal :show="showStoreModal" title="插件商店" width="600px" @close="showStoreModal = false">
|
||||
<div v-if="storeLoading" class="loading-state">加载中...</div>
|
||||
<div v-else class="store-grid">
|
||||
<div v-for="plugin in storePlugins" :key="plugin.name" class="store-plugin-card">
|
||||
<div class="store-plugin-header">
|
||||
<span class="store-plugin-name">{{ plugin.name }}</span>
|
||||
<n-tag size="small">v{{ plugin.version }}</n-tag>
|
||||
</div>
|
||||
<p class="store-plugin-desc">{{ plugin.description }}</p>
|
||||
<button class="glass-btn primary small full" @click="handleInstallStorePlugin(plugin)">
|
||||
安装
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</GlassModal>
|
||||
|
||||
<!-- Install Config Modal -->
|
||||
<n-modal v-model:show="showInstallConfigModal" preset="card" title="安装配置" style="width: 400px;">
|
||||
<n-form label-placement="left">
|
||||
<n-form-item label="远程端口">
|
||||
<n-input-number v-model:value="installRemotePort" :min="1" :max="65535" style="width: 100%" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<GlassModal :show="showInstallConfigModal" title="安装配置" width="400px" @close="showInstallConfigModal = false">
|
||||
<div class="form-group">
|
||||
<label class="form-label">远程端口</label>
|
||||
<input v-model.number="installRemotePort" type="number" class="form-input" min="1" max="65535" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showInstallConfigModal = false">取消</n-button>
|
||||
<n-button type="primary" @click="confirmInstallPlugin">确认安装</n-button>
|
||||
</n-space>
|
||||
<button class="glass-btn" @click="showInstallConfigModal = false">取消</button>
|
||||
<button class="glass-btn primary" @click="confirmInstallPlugin">确认安装</button>
|
||||
</template>
|
||||
</n-modal>
|
||||
</GlassModal>
|
||||
|
||||
<LogViewer :visible="showLogViewer" @close="showLogViewer = false" :client-id="clientId" />
|
||||
</div>
|
||||
@@ -1201,4 +1190,159 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
margin: 0 0 12px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Store Grid */
|
||||
.store-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.store-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: rgba(167, 139, 250, 0.5);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.form-input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select option {
|
||||
background: #1e1b4b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-toggle input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: #a78bfa;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
background: rgba(30, 27, 75, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
min-width: 100px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.dropdown-menu button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-menu button:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dropdown-menu button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.dropdown-menu button.danger {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.dropdown-menu button.danger:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
/* Icon styles */
|
||||
.btn-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.plugin-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getClients } from '../api'
|
||||
import type { ClientStatus } from '../types'
|
||||
|
||||
const router = useRouter()
|
||||
const clients = ref<ClientStatus[]>([])
|
||||
|
||||
// Mock data for traffic (API not implemented yet)
|
||||
@@ -15,6 +13,23 @@ const trafficStats = ref({
|
||||
outboundUnit: 'GB'
|
||||
})
|
||||
|
||||
// Mock 24h traffic data for chart
|
||||
const trafficHistory = ref<Array<{ hour: string; inbound: number; outbound: number }>>([])
|
||||
|
||||
const generateMockTrafficData = () => {
|
||||
const data = []
|
||||
const now = new Date()
|
||||
for (let i = 23; i >= 0; i--) {
|
||||
const hour = new Date(now.getTime() - i * 60 * 60 * 1000)
|
||||
data.push({
|
||||
hour: hour.getHours().toString().padStart(2, '0') + ':00',
|
||||
inbound: Math.random() * 100,
|
||||
outbound: Math.random() * 80
|
||||
})
|
||||
}
|
||||
trafficHistory.value = data
|
||||
}
|
||||
|
||||
const loadClients = async () => {
|
||||
try {
|
||||
const { data } = await getClients()
|
||||
@@ -28,11 +43,26 @@ const onlineClients = computed(() => {
|
||||
return clients.value.filter(client => client.online).length
|
||||
})
|
||||
|
||||
onMounted(loadClients)
|
||||
const totalRules = computed(() => {
|
||||
return clients.value.reduce((sum, c) => sum + (c.rule_count || 0), 0)
|
||||
})
|
||||
|
||||
const viewClient = (id: string) => {
|
||||
router.push(`/client/${id}`)
|
||||
// Chart helpers
|
||||
const maxTraffic = computed(() => {
|
||||
const max = Math.max(
|
||||
...trafficHistory.value.map(d => Math.max(d.inbound, d.outbound))
|
||||
)
|
||||
return max || 100
|
||||
})
|
||||
|
||||
const getBarHeight = (value: number) => {
|
||||
return (value / maxTraffic.value) * 100
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadClients()
|
||||
generateMockTrafficData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -64,15 +94,10 @@ const viewClient = (id: string) => {
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">Outbound Traffic</span>
|
||||
<span class="stat-label">出站流量</span>
|
||||
<span class="stat-value">{{ trafficStats.outbound.toFixed(2) }}</span>
|
||||
<span class="stat-unit">{{ trafficStats.outboundUnit }}</span>
|
||||
</div>
|
||||
<div class="stat-trend up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inbound Traffic -->
|
||||
@@ -83,15 +108,10 @@ const viewClient = (id: string) => {
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">Inbound Traffic</span>
|
||||
<span class="stat-label">入站流量</span>
|
||||
<span class="stat-value">{{ trafficStats.inbound.toFixed(2) }}</span>
|
||||
<span class="stat-unit">{{ trafficStats.inboundUnit }}</span>
|
||||
</div>
|
||||
<div class="stat-trend up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client Count -->
|
||||
@@ -102,79 +122,58 @@ const viewClient = (id: string) => {
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">Clients</span>
|
||||
<span class="stat-label">客户端</span>
|
||||
<div class="client-count">
|
||||
<span class="stat-value online">{{ onlineClients }}</span>
|
||||
<span class="stat-separator">/</span>
|
||||
<span class="stat-value total">{{ clients.length }}</span>
|
||||
</div>
|
||||
<span class="stat-unit">online / total</span>
|
||||
<span class="stat-unit">在线 / 总数</span>
|
||||
</div>
|
||||
<div class="online-indicator" :class="{ active: onlineClients > 0 }">
|
||||
<span class="pulse"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rules Count -->
|
||||
<div class="stat-card glass-stat">
|
||||
<div class="stat-icon rules">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">代理规则</span>
|
||||
<span class="stat-value">{{ totalRules }}</span>
|
||||
<span class="stat-unit">条规则</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client List Section -->
|
||||
<div class="clients-section">
|
||||
<!-- Traffic Chart Section -->
|
||||
<div class="chart-section">
|
||||
<div class="section-header">
|
||||
<h2 class="text-xl font-semibold text-white">Connected Clients</h2>
|
||||
<span class="client-badge">{{ clients.length }} clients</span>
|
||||
<h2 class="section-title">24小时流量趋势</h2>
|
||||
<div class="chart-legend">
|
||||
<span class="legend-item inbound"><span class="legend-dot"></span>入站</span>
|
||||
<span class="legend-item outbound"><span class="legend-dot"></span>出站</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="clients.length === 0" class="empty-state glass-card">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-white/30 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-white/50 text-lg">No clients connected</p>
|
||||
<p class="text-white/30 text-sm mt-2">Waiting for tunnel connections...</p>
|
||||
</div>
|
||||
|
||||
<!-- Client Cards Grid -->
|
||||
<div v-else class="clients-grid">
|
||||
<div
|
||||
v-for="client in clients"
|
||||
:key="client.id"
|
||||
class="client-card glass-card"
|
||||
@click="viewClient(client.id)"
|
||||
>
|
||||
<div class="client-header">
|
||||
<div class="client-status" :class="{ online: client.online }">
|
||||
<span class="status-dot"></span>
|
||||
</div>
|
||||
<h3 class="client-name">{{ client.nickname || client.id }}</h3>
|
||||
</div>
|
||||
|
||||
<p v-if="client.nickname" class="client-id">{{ client.id }}</p>
|
||||
|
||||
<div class="client-info">
|
||||
<div v-if="client.remote_addr && client.online" class="info-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
<span>{{ client.remote_addr }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
<span>{{ client.rule_count }} rules</span>
|
||||
<div class="chart-card glass-card">
|
||||
<div class="chart-container">
|
||||
<div class="chart-bars">
|
||||
<div v-for="(data, index) in trafficHistory" :key="index" class="bar-group">
|
||||
<div class="bar-wrapper">
|
||||
<div class="bar inbound" :style="{ height: getBarHeight(data.inbound) + '%' }"></div>
|
||||
<div class="bar outbound" :style="{ height: getBarHeight(data.outbound) + '%' }"></div>
|
||||
</div>
|
||||
<span class="bar-label">{{ data.hour }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="client-tags">
|
||||
<span class="tag" :class="client.online ? 'tag-online' : 'tag-offline'">
|
||||
{{ client.online ? 'Online' : 'Offline' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card-arrow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-hint">
|
||||
<span>流量统计功能开发中，当前显示模拟数据</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -269,12 +268,18 @@ const viewClient = (id: string) => {
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 40px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 1024px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -328,6 +333,11 @@ const viewClient = (id: string) => {
|
||||
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
.stat-icon.rules {
|
||||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||||
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
|
||||
.stat-icon svg {
|
||||
color: white;
|
||||
}
|
||||
@@ -419,8 +429,8 @@ const viewClient = (id: string) => {
|
||||
50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
|
||||
}
|
||||
|
||||
/* Clients Section */
|
||||
.clients-section {
|
||||
/* Chart Section */
|
||||
.chart-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@@ -431,157 +441,102 @@ const viewClient = (id: string) => {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.client-badge {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 64px 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Clients grid */
|
||||
.clients-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.clients-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.clients-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Client card */
|
||||
.client-card {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.client-card:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.client-card:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
/* Client header */
|
||||
.client-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.client-status {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.client-status.online {
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
|
||||
}
|
||||
|
||||
.client-name {
|
||||
font-size: 16px;
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.client-id {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
/* Client info */
|
||||
.client-info {
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.info-item svg {
|
||||
flex-shrink: 0;
|
||||
opacity: 0.6;
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Client tags */
|
||||
.client-tags {
|
||||
.legend-item.inbound .legend-dot {
|
||||
background: #a78bfa;
|
||||
}
|
||||
|
||||
.legend-item.outbound .legend-dot {
|
||||
background: #60a5fa;
|
||||
}
|
||||
|
||||
/* Chart Card */
|
||||
.chart-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 200px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
min-width: 600px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bar-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
.bar-wrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bar {
|
||||
flex: 1;
|
||||
border-radius: 3px 3px 0 0;
|
||||
min-height: 2px;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.bar.inbound {
|
||||
background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%);
|
||||
}
|
||||
|
||||
.bar.outbound {
|
||||
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chart-hint {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tag-online {
|
||||
background: rgba(52, 211, 153, 0.2);
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.tag-offline {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Card arrow */
|
||||
.card-arrow {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.client-card:hover .card-arrow {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
transform: translateY(-50%) translateX(4px);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Glass card base */
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ExtensionPuzzleOutline, CodeSlashOutline, SettingsOutline } from '@vicons/ionicons5'
|
||||
import GlassModal from '../components/GlassModal.vue'
|
||||
import GlassTag from '../components/GlassTag.vue'
|
||||
import GlassSwitch from '../components/GlassSwitch.vue'
|
||||
import { useToast } from '../composables/useToast'
|
||||
import {
|
||||
NButton, NSpace, NTag, NIcon, NSwitch, NModal, NInput, NInputNumber, NSelect,
|
||||
useMessage
|
||||
} from 'naive-ui'
|
||||
import { ExtensionPuzzleOutline, StorefrontOutline, CodeSlashOutline, SettingsOutline } from '@vicons/ionicons5'
|
||||
import {
|
||||
getPlugins, enablePlugin, disablePlugin, getStorePlugins, getJSPlugins,
|
||||
pushJSPluginToClient, getClients, installStorePlugin, updateJSPluginConfig, setJSPluginEnabled
|
||||
getPlugins, enablePlugin, disablePlugin, getJSPlugins,
|
||||
pushJSPluginToClient, getClients, updateJSPluginConfig, setJSPluginEnabled
|
||||
} from '../api'
|
||||
import type { PluginInfo, StorePluginInfo, JSPlugin, ClientStatus } from '../types'
|
||||
import type { PluginInfo, JSPlugin, ClientStatus } from '../types'
|
||||
|
||||
const message = useMessage()
|
||||
const message = useToast()
|
||||
const plugins = ref<PluginInfo[]>([])
|
||||
const storePlugins = ref<StorePluginInfo[]>([])
|
||||
const jsPlugins = ref<JSPlugin[]>([])
|
||||
const clients = ref<ClientStatus[]>([])
|
||||
const loading = ref(true)
|
||||
const storeLoading = ref(false)
|
||||
const jsLoading = ref(false)
|
||||
const activeTab = ref('installed')
|
||||
|
||||
@@ -32,18 +30,6 @@ const loadPlugins = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const loadStorePlugins = async () => {
|
||||
storeLoading.value = true
|
||||
try {
|
||||
const { data } = await getStorePlugins()
|
||||
storePlugins.value = data.plugins || []
|
||||
} catch (e) {
|
||||
console.error('Failed to load store plugins', e)
|
||||
} finally {
|
||||
storeLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const proxyPlugins = computed(() => plugins.value.filter(p => p.type === 'proxy'))
|
||||
const appPlugins = computed(() => plugins.value.filter(p => p.type === 'app'))
|
||||
|
||||
@@ -68,7 +54,6 @@ const getTypeLabel = (type: string) => {
|
||||
}
|
||||
|
||||
const handleTabChange = (tab: string) => {
|
||||
if (tab === 'store' && storePlugins.value.length === 0) loadStorePlugins()
|
||||
if (tab === 'js' && jsPlugins.value.length === 0) loadJSPlugins()
|
||||
}
|
||||
|
||||
@@ -172,58 +157,6 @@ const toggleJSPlugin = async (plugin: JSPlugin) => {
|
||||
}
|
||||
}
|
||||
|
||||
// Store Plugin Install
|
||||
const showInstallModal = ref(false)
|
||||
const selectedStorePlugin = ref<StorePluginInfo | null>(null)
|
||||
const selectedClientId = ref('')
|
||||
const installing = ref(false)
|
||||
const installRemotePort = ref<number | null>(8080)
|
||||
const installAuthEnabled = ref(false)
|
||||
const installAuthUsername = ref('')
|
||||
const installAuthPassword = ref('')
|
||||
|
||||
const openInstallModal = (plugin: StorePluginInfo) => {
|
||||
selectedStorePlugin.value = plugin
|
||||
selectedClientId.value = ''
|
||||
installRemotePort.value = 8080
|
||||
installAuthEnabled.value = false
|
||||
installAuthUsername.value = ''
|
||||
installAuthPassword.value = ''
|
||||
showInstallModal.value = true
|
||||
}
|
||||
|
||||
const handleInstallStorePlugin = async () => {
|
||||
if (!selectedStorePlugin.value || !selectedClientId.value) {
|
||||
message.warning('请选择要安装到的客户端')
|
||||
return
|
||||
}
|
||||
if (!selectedStorePlugin.value.download_url || !selectedStorePlugin.value.signature_url) {
|
||||
message.error('该插件缺少下载地址或签名')
|
||||
return
|
||||
}
|
||||
installing.value = true
|
||||
try {
|
||||
await installStorePlugin(
|
||||
selectedStorePlugin.value.name,
|
||||
selectedStorePlugin.value.download_url,
|
||||
selectedStorePlugin.value.signature_url,
|
||||
selectedClientId.value,
|
||||
installRemotePort.value || 8080,
|
||||
selectedStorePlugin.value.version,
|
||||
selectedStorePlugin.value.config_schema,
|
||||
installAuthEnabled.value,
|
||||
installAuthUsername.value,
|
||||
installAuthPassword.value
|
||||
)
|
||||
message.success(`已安装 ${selectedStorePlugin.value.name}`)
|
||||
showInstallModal.value = false
|
||||
} catch (e: any) {
|
||||
message.error(e.response?.data || '安装失败')
|
||||
} finally {
|
||||
installing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadPlugins()
|
||||
loadClients()
|
||||
@@ -243,7 +176,7 @@ onMounted(() => {
|
||||
<!-- Header -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">插件管理</h1>
|
||||
<p class="page-subtitle">管理已安装插件和浏览插件商店</p>
|
||||
<p class="page-subtitle">管理已安装插件和 JS 插件</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
@@ -268,9 +201,6 @@ onMounted(() => {
|
||||
<button class="tab-btn" :class="{ active: activeTab === 'installed' }" @click="activeTab = 'installed'">
|
||||
已安装插件
|
||||
</button>
|
||||
<button class="tab-btn" :class="{ active: activeTab === 'store' }" @click="activeTab = 'store'; handleTabChange('store')">
|
||||
插件商店
|
||||
</button>
|
||||
<button class="tab-btn" :class="{ active: activeTab === 'js' }" @click="activeTab = 'js'; handleTabChange('js')">
|
||||
JS 插件
|
||||
</button>
|
||||
@@ -284,50 +214,23 @@ onMounted(() => {
|
||||
<div v-for="plugin in plugins" :key="plugin.name" class="plugin-card">
|
||||
<div class="plugin-header">
|
||||
<div class="plugin-icon">
|
||||
<n-icon size="20" color="#a78bfa"><ExtensionPuzzleOutline /></n-icon>
|
||||
<ExtensionPuzzleOutline class="icon-purple" />
|
||||
</div>
|
||||
<span class="plugin-name">{{ plugin.name }}</span>
|
||||
<n-switch :value="plugin.enabled" size="small" @update:value="togglePlugin(plugin)" />
|
||||
<GlassSwitch :model-value="plugin.enabled" size="small" @update:model-value="togglePlugin(plugin)" />
|
||||
</div>
|
||||
<div class="plugin-tags">
|
||||
<n-tag size="small">v{{ plugin.version }}</n-tag>
|
||||
<n-tag size="small" :type="plugin.type === 'proxy' ? 'info' : 'success'">{{ getTypeLabel(plugin.type) }}</n-tag>
|
||||
<n-tag size="small" :type="plugin.source === 'builtin' ? 'default' : 'warning'">
|
||||
<GlassTag>v{{ plugin.version }}</GlassTag>
|
||||
<GlassTag :type="plugin.type === 'proxy' ? 'info' : 'success'">{{ getTypeLabel(plugin.type) }}</GlassTag>
|
||||
<GlassTag :type="plugin.source === 'builtin' ? 'default' : 'warning'">
|
||||
{{ plugin.source === 'builtin' ? '内置' : 'JS' }}
|
||||
</n-tag>
|
||||
</GlassTag>
|
||||
</div>
|
||||
<p class="plugin-desc">{{ plugin.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Store Tab -->
|
||||
<div v-if="activeTab === 'store'" class="tab-content">
|
||||
<div v-if="storeLoading" class="loading-state">加载中...</div>
|
||||
<div v-else-if="storePlugins.length === 0" class="empty-state">插件商店暂无可用插件</div>
|
||||
<div v-else class="plugins-grid">
|
||||
<div v-for="plugin in storePlugins" :key="plugin.name" class="plugin-card">
|
||||
<div class="plugin-header">
|
||||
<div class="plugin-icon store">
|
||||
<n-icon size="20" color="#60a5fa"><StorefrontOutline /></n-icon>
|
||||
</div>
|
||||
<span class="plugin-name">{{ plugin.name }}</span>
|
||||
<button
|
||||
v-if="plugin.download_url && plugin.signature_url && onlineClients.length > 0"
|
||||
class="glass-btn primary tiny"
|
||||
@click="openInstallModal(plugin)"
|
||||
>安装</button>
|
||||
</div>
|
||||
<div class="plugin-tags">
|
||||
<n-tag size="small">v{{ plugin.version }}</n-tag>
|
||||
<n-tag size="small" :type="plugin.type === 'proxy' ? 'info' : 'success'">{{ getTypeLabel(plugin.type) }}</n-tag>
|
||||
</div>
|
||||
<p class="plugin-desc">{{ plugin.description }}</p>
|
||||
<p class="plugin-author">作者: {{ plugin.author }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JS Plugins Tab -->
|
||||
<div v-if="activeTab === 'js'" class="tab-content">
|
||||
<div v-if="jsLoading" class="loading-state">加载中...</div>
|
||||
@@ -336,30 +239,30 @@ onMounted(() => {
|
||||
<div v-for="plugin in jsPlugins" :key="plugin.name" class="plugin-card js">
|
||||
<div class="plugin-header">
|
||||
<div class="plugin-icon js">
|
||||
<n-icon size="20" color="#fbbf24"><CodeSlashOutline /></n-icon>
|
||||
<CodeSlashOutline class="icon-yellow" />
|
||||
</div>
|
||||
<span class="plugin-name">{{ plugin.name }}</span>
|
||||
<n-tag v-if="plugin.version" size="small">v{{ plugin.version }}</n-tag>
|
||||
<n-switch :value="plugin.enabled" size="small" @update:value="toggleJSPlugin(plugin)" />
|
||||
<GlassTag v-if="plugin.version">v{{ plugin.version }}</GlassTag>
|
||||
<GlassSwitch :model-value="plugin.enabled" size="small" @update:model-value="toggleJSPlugin(plugin)" />
|
||||
</div>
|
||||
<div class="plugin-tags">
|
||||
<n-tag size="small" type="warning">JS</n-tag>
|
||||
<n-tag v-if="plugin.auto_start" size="small" type="success">自动启动</n-tag>
|
||||
<n-tag v-if="plugin.signature" size="small" type="info">已签名</n-tag>
|
||||
<GlassTag type="warning">JS</GlassTag>
|
||||
<GlassTag v-if="plugin.auto_start" type="success">自动启动</GlassTag>
|
||||
<GlassTag v-if="plugin.signature" type="info">已签名</GlassTag>
|
||||
</div>
|
||||
<p class="plugin-desc">{{ plugin.description || '无描述' }}</p>
|
||||
<p v-if="plugin.author" class="plugin-author">作者: {{ plugin.author }}</p>
|
||||
<div v-if="Object.keys(plugin.config || {}).length > 0" class="plugin-config-preview">
|
||||
<span class="config-label">配置:</span>
|
||||
<n-space :size="4" wrap>
|
||||
<n-tag v-for="(value, key) in plugin.config" :key="key" size="small">
|
||||
<div class="config-tags">
|
||||
<GlassTag v-for="(value, key) in plugin.config" :key="key">
|
||||
{{ key }}: {{ String(value).length > 10 ? String(value).slice(0, 10) + '...' : value }}
|
||||
</n-tag>
|
||||
</n-space>
|
||||
</GlassTag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plugin-actions">
|
||||
<button class="glass-btn tiny" @click="openJSConfigModal(plugin)">
|
||||
<n-icon size="14"><SettingsOutline /></n-icon>
|
||||
<SettingsOutline class="btn-icon" />
|
||||
配置
|
||||
</button>
|
||||
<button v-if="onlineClients.length > 0" class="glass-btn primary tiny" @click="openPushModal(plugin)">
|
||||
@@ -372,78 +275,47 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Install Modal -->
|
||||
<n-modal v-model:show="showInstallModal" preset="card" title="安装插件" style="width: 450px;">
|
||||
<n-space vertical :size="16">
|
||||
<div v-if="selectedStorePlugin">
|
||||
<p style="margin: 0 0 8px 0;"><strong>插件:</strong> {{ selectedStorePlugin.name }}</p>
|
||||
<p style="margin: 0; color: #666;">{{ selectedStorePlugin.description }}</p>
|
||||
</div>
|
||||
<n-select v-model:value="selectedClientId" placeholder="选择客户端"
|
||||
:options="onlineClients.map(c => ({ label: c.nickname || c.id, value: c.id }))" />
|
||||
<div>
|
||||
<p style="margin: 0 0 8px 0; color: #666; font-size: 13px;">远程端口:</p>
|
||||
<n-input-number v-model:value="installRemotePort" :min="1" :max="65535" style="width: 100%;" />
|
||||
</div>
|
||||
<n-space align="center" :size="8">
|
||||
<n-switch v-model:value="installAuthEnabled" />
|
||||
<span style="color: #666;">启用 HTTP Basic Auth</span>
|
||||
</n-space>
|
||||
<template v-if="installAuthEnabled">
|
||||
<n-input v-model:value="installAuthUsername" placeholder="用户名" />
|
||||
<n-input v-model:value="installAuthPassword" type="password" placeholder="密码" show-password-on="click" />
|
||||
</template>
|
||||
</n-space>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showInstallModal = false">取消</n-button>
|
||||
<n-button type="primary" :loading="installing" :disabled="!selectedClientId" @click="handleInstallStorePlugin">安装</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
||||
<!-- JS Config Modal -->
|
||||
<n-modal v-model:show="showJSConfigModal" preset="card" :title="`${currentJSPlugin?.name || ''} 配置`" style="width: 500px;">
|
||||
<n-space vertical :size="12">
|
||||
<p style="margin: 0; color: #666; font-size: 13px;">编辑插件配置参数</p>
|
||||
<div v-for="(item, index) in jsConfigItems" :key="index">
|
||||
<n-space :size="8" align="center">
|
||||
<n-input v-model:value="item.key" placeholder="参数名" style="width: 150px;" />
|
||||
<n-input v-model:value="item.value" placeholder="参数值" style="width: 200px;" />
|
||||
<n-button v-if="jsConfigItems.length > 1" quaternary type="error" size="small" @click="removeJSConfigItem(index)">删除</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
<n-button dashed size="small" @click="addJSConfigItem">添加配置项</n-button>
|
||||
</n-space>
|
||||
<GlassModal :show="showJSConfigModal" :title="`${currentJSPlugin?.name || ''} 配置`" @close="showJSConfigModal = false">
|
||||
<p class="config-hint">编辑插件配置参数</p>
|
||||
<div v-for="(item, index) in jsConfigItems" :key="index" class="config-row">
|
||||
<input v-model="item.key" class="form-input config-key" placeholder="参数名" />
|
||||
<input v-model="item.value" class="form-input config-value" placeholder="参数值" />
|
||||
<button v-if="jsConfigItems.length > 1" class="icon-btn danger" @click="removeJSConfigItem(index)">删除</button>
|
||||
</div>
|
||||
<button class="glass-btn small dashed" @click="addJSConfigItem">添加配置项</button>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showJSConfigModal = false">取消</n-button>
|
||||
<n-button type="primary" :loading="jsConfigSaving" @click="saveJSPluginConfig">保存</n-button>
|
||||
</n-space>
|
||||
<button class="glass-btn" @click="showJSConfigModal = false">取消</button>
|
||||
<button class="glass-btn primary" :disabled="jsConfigSaving" @click="saveJSPluginConfig">
|
||||
{{ jsConfigSaving ? '保存中...' : '保存' }}
|
||||
</button>
|
||||
</template>
|
||||
</n-modal>
|
||||
</GlassModal>
|
||||
|
||||
<!-- Push Modal -->
|
||||
<n-modal v-model:show="showPushModal" preset="card" title="推送插件到客户端" style="width: 400px;">
|
||||
<n-space vertical :size="16">
|
||||
<div v-if="selectedJSPlugin">
|
||||
<p style="margin: 0 0 8px 0;"><strong>插件:</strong> {{ selectedJSPlugin.name }}</p>
|
||||
<p style="margin: 0; color: #666;">{{ selectedJSPlugin.description || '无描述' }}</p>
|
||||
</div>
|
||||
<n-select v-model:value="pushClientId" placeholder="选择客户端"
|
||||
:options="onlineClients.map(c => ({ label: c.nickname || c.id, value: c.id }))" />
|
||||
<div>
|
||||
<p style="margin: 0 0 8px 0; color: #666; font-size: 13px;">远程端口:</p>
|
||||
<n-input-number v-model:value="pushRemotePort" :min="1" :max="65535" style="width: 100%;" />
|
||||
</div>
|
||||
</n-space>
|
||||
<GlassModal :show="showPushModal" title="推送插件到客户端" width="400px" @close="showPushModal = false">
|
||||
<div v-if="selectedJSPlugin" class="plugin-info-box">
|
||||
<p class="plugin-info-name">插件: {{ selectedJSPlugin.name }}</p>
|
||||
<p class="plugin-info-desc">{{ selectedJSPlugin.description || '无描述' }}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">选择客户端</label>
|
||||
<select v-model="pushClientId" class="form-select">
|
||||
<option value="" disabled>选择客户端</option>
|
||||
<option v-for="c in onlineClients" :key="c.id" :value="c.id">{{ c.nickname || c.id }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">远程端口</label>
|
||||
<input v-model.number="pushRemotePort" type="number" class="form-input" min="1" max="65535" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showPushModal = false">取消</n-button>
|
||||
<n-button type="primary" :loading="pushing" :disabled="!pushClientId" @click="handlePushJSPlugin">推送</n-button>
|
||||
</n-space>
|
||||
<button class="glass-btn" @click="showPushModal = false">取消</button>
|
||||
<button class="glass-btn primary" :disabled="!pushClientId || pushing" @click="handlePushJSPlugin">
|
||||
{{ pushing ? '推送中...' : '推送' }}
|
||||
</button>
|
||||
</template>
|
||||
</n-modal>
|
||||
</GlassModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -711,4 +583,180 @@ onMounted(() => {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.glass-btn.small {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.glass-btn.dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.glass-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: rgba(167, 139, 250, 0.5);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select option {
|
||||
background: #1e1b4b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-toggle input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: #a78bfa;
|
||||
}
|
||||
|
||||
/* Plugin Info Box */
|
||||
.plugin-info-box {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.plugin-info-name {
|
||||
margin: 0 0 4px 0;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.plugin-info-desc {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Config Row */
|
||||
.config-hint {
|
||||
margin: 0 0 12px 0;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.config-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.config-key {
|
||||
width: 150px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.config-value {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon-btn.danger {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.icon-btn.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
/* Icon styles */
|
||||
.icon-purple {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
.icon-blue {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.icon-yellow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.config-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import {
|
||||
NTag, NIcon, useMessage, useDialog
|
||||
} from 'naive-ui'
|
||||
import { CloudDownloadOutline, RefreshOutline, ServerOutline } from '@vicons/ionicons5'
|
||||
import GlassTag from '../components/GlassTag.vue'
|
||||
import { useToast } from '../composables/useToast'
|
||||
import { useConfirm } from '../composables/useConfirm'
|
||||
import {
|
||||
getVersionInfo, checkServerUpdate, applyServerUpdate,
|
||||
type UpdateInfo, type VersionInfo
|
||||
} from '../api'
|
||||
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
const message = useToast()
|
||||
const dialog = useConfirm()
|
||||
|
||||
const versionInfo = ref<VersionInfo | null>(null)
|
||||
const serverUpdate = ref<UpdateInfo | null>(null)
|
||||
@@ -106,7 +106,7 @@ onMounted(() => {
|
||||
<div class="glass-card">
|
||||
<div class="card-header">
|
||||
<h3>版本信息</h3>
|
||||
<n-icon size="20" color="#a78bfa"><ServerOutline /></n-icon>
|
||||
<ServerOutline class="header-icon" />
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-if="loading" class="loading-state">加载中...</div>
|
||||
@@ -145,7 +145,7 @@ onMounted(() => {
|
||||
<div class="card-header">
|
||||
<h3>服务端更新</h3>
|
||||
<button class="glass-btn small" :disabled="checkingServer" @click="handleCheckServerUpdate">
|
||||
<n-icon size="14"><RefreshOutline /></n-icon>
|
||||
<RefreshOutline class="btn-icon" />
|
||||
检查更新
|
||||
</button>
|
||||
</div>
|
||||
@@ -163,7 +163,7 @@ onMounted(() => {
|
||||
|
||||
<div v-if="serverUpdate.download_url" class="download-info">
|
||||
下载文件: {{ serverUpdate.asset_name }}
|
||||
<n-tag size="small" style="margin-left: 8px;">{{ formatBytes(serverUpdate.asset_size) }}</n-tag>
|
||||
<GlassTag style="margin-left: 8px;">{{ formatBytes(serverUpdate.asset_size) }}</GlassTag>
|
||||
</div>
|
||||
|
||||
<div v-if="serverUpdate.release_note" class="release-note">
|
||||
@@ -177,7 +177,7 @@ onMounted(() => {
|
||||
:disabled="updatingServer"
|
||||
@click="handleApplyServerUpdate"
|
||||
>
|
||||
<n-icon size="16"><CloudDownloadOutline /></n-icon>
|
||||
<CloudDownloadOutline class="btn-icon" />
|
||||
下载并更新服务端
|
||||
</button>
|
||||
</template>
|
||||
@@ -394,4 +394,16 @@ onMounted(() => {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Icon styles */
|
||||
.header-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user