Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
5c8020d5fb | ||
|
|
a2773aa1a7 | ||
|
|
9cc2fa8076 | ||
|
|
1890cad8d9 | ||
|
|
11572f132c |
@@ -163,13 +163,21 @@ jobs:
|
||||
id: release_notes
|
||||
run: |
|
||||
if [ -n "${{ inputs.release_notes }}" ]; then
|
||||
# 使用用户输入的 release notes
|
||||
echo "${{ inputs.release_notes }}" > release_notes.md
|
||||
else
|
||||
echo "Release ${{ inputs.version }}" > release_notes.md
|
||||
# 使用最近一次 commit message 作为 release notes
|
||||
echo "## Release ${{ inputs.version }}" > release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "## Assets" >> release_notes.md
|
||||
echo "### Changes" >> release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "Download the appropriate binary for your platform:" >> release_notes.md
|
||||
# 获取最近一次 commit 的完整 message
|
||||
git log -1 --pretty=format:"%B" >> release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "---" >> release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "### Assets" >> release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "- **Linux (amd64/arm64)**: \`.tar.gz\` files" >> release_notes.md
|
||||
echo "- **macOS (amd64/arm64)**: \`.tar.gz\` files" >> release_notes.md
|
||||
@@ -177,6 +185,7 @@ jobs:
|
||||
echo "" >> release_notes.md
|
||||
echo "Verify downloads with \`SHA256SUMS\`" >> release_notes.md
|
||||
fi
|
||||
echo "=== Release Notes ==="
|
||||
cat release_notes.md
|
||||
|
||||
- name: Create Release
|
||||
|
||||
@@ -13,9 +13,12 @@ import (
|
||||
|
||||
// 版本信息（通过 ldflags 注入）
|
||||
var Version string
|
||||
var BuildTime string
|
||||
var GitCommit string
|
||||
|
||||
func init() {
|
||||
version.SetVersion(Version)
|
||||
version.SetBuildInfo(GitCommit, BuildTime)
|
||||
}
|
||||
|
||||
func main() {
|
||||
|
||||
@@ -32,9 +32,12 @@ import (
|
||||
|
||||
// 版本信息（通过 ldflags 注入）
|
||||
var Version string
|
||||
var BuildTime string
|
||||
var GitCommit string
|
||||
|
||||
func init() {
|
||||
version.SetVersion(Version)
|
||||
version.SetBuildInfo(GitCommit, BuildTime)
|
||||
}
|
||||
|
||||
func main() {
|
||||
|
||||
@@ -13,6 +13,8 @@ import (
|
||||
|
||||
// 版本信息
|
||||
var Version = "1.0.0"
|
||||
var GitCommit = ""
|
||||
var BuildTime = ""
|
||||
|
||||
// SetVersion 设置版本号（由 main 包在初始化时调用）
|
||||
func SetVersion(v string) {
|
||||
@@ -21,6 +23,16 @@ func SetVersion(v string) {
|
||||
}
|
||||
}
|
||||
|
||||
// SetBuildInfo 设置构建信息（由 main 包在初始化时调用）
|
||||
func SetBuildInfo(gitCommit, buildTime string) {
|
||||
if gitCommit != "" {
|
||||
GitCommit = gitCommit
|
||||
}
|
||||
if buildTime != "" {
|
||||
BuildTime = buildTime
|
||||
}
|
||||
}
|
||||
|
||||
// 仓库信息
|
||||
const (
|
||||
RepoURL = "https://git.92coco.cn/flik/GoTunnel"
|
||||
@@ -43,8 +55,8 @@ type Info struct {
|
||||
func GetInfo() Info {
|
||||
return Info{
|
||||
Version: Version,
|
||||
GitCommit: "",
|
||||
BuildTime: "",
|
||||
GitCommit: GitCommit,
|
||||
BuildTime: BuildTime,
|
||||
GoVersion: runtime.Version(),
|
||||
OS: runtime.GOOS,
|
||||
Arch: runtime.GOARCH,
|
||||
|
||||
316
web/src/App.vue
316
web/src/App.vue
@@ -3,16 +3,20 @@ import { ref, onMounted, computed, watch } from 'vue'
|
||||
import { RouterView, useRouter, useRoute } from 'vue-router'
|
||||
import {
|
||||
HomeOutline, DesktopOutline, SettingsOutline,
|
||||
PersonCircleOutline, LogOutOutline, LogoGithub, ServerOutline, CheckmarkCircleOutline, ArrowUpCircleOutline, CloseOutline
|
||||
PersonCircleOutline, LogOutOutline, LogoGithub, ServerOutline, CheckmarkCircleOutline, ArrowUpCircleOutline, CloseOutline,
|
||||
SunnyOutline, MoonOutline, ContrastOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import { getServerStatus, getVersionInfo, checkServerUpdate, applyServerUpdate, removeToken, getToken, type UpdateInfo } from './api'
|
||||
import { useToast } from './composables/useToast'
|
||||
import { useConfirm } from './composables/useConfirm'
|
||||
import { useTheme, type ThemeMode } from './composables/useTheme'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const message = useToast()
|
||||
const dialog = useConfirm()
|
||||
const { themeMode, setTheme } = useTheme()
|
||||
const showThemeMenu = ref(false)
|
||||
const serverInfo = ref({ bind_addr: '', bind_port: 0 })
|
||||
const clientCount = ref(0)
|
||||
const version = ref('')
|
||||
@@ -91,8 +95,23 @@ const toggleUserMenu = () => {
|
||||
showUserMenu.value = !showUserMenu.value
|
||||
}
|
||||
|
||||
const toggleThemeMenu = () => {
|
||||
showThemeMenu.value = !showThemeMenu.value
|
||||
}
|
||||
|
||||
const selectTheme = (mode: ThemeMode) => {
|
||||
setTheme(mode)
|
||||
showThemeMenu.value = false
|
||||
}
|
||||
|
||||
const themeIcon = computed(() => {
|
||||
if (themeMode.value === 'light') return SunnyOutline
|
||||
if (themeMode.value === 'dark') return MoonOutline
|
||||
return ContrastOutline
|
||||
})
|
||||
|
||||
const openUpdateModal = () => {
|
||||
if (updateInfo.value) {
|
||||
if (updateInfo.value && updateInfo.value.available) {
|
||||
showUpdateModal.value = true
|
||||
}
|
||||
}
|
||||
@@ -154,6 +173,25 @@ const handleApplyServerUpdate = () => {
|
||||
</router-link>
|
||||
</nav>
|
||||
<div class="header-right">
|
||||
<!-- Theme Switcher -->
|
||||
<div class="theme-menu" @click="toggleThemeMenu">
|
||||
<component :is="themeIcon" class="theme-icon" />
|
||||
<div v-if="showThemeMenu" class="theme-dropdown" @click.stop>
|
||||
<button class="dropdown-item" :class="{ active: themeMode === 'light' }" @click="selectTheme('light')">
|
||||
<SunnyOutline class="dropdown-icon" />
|
||||
<span>浅色</span>
|
||||
</button>
|
||||
<button class="dropdown-item" :class="{ active: themeMode === 'dark' }" @click="selectTheme('dark')">
|
||||
<MoonOutline class="dropdown-icon" />
|
||||
<span>深色</span>
|
||||
</button>
|
||||
<button class="dropdown-item" :class="{ active: themeMode === 'auto' }" @click="selectTheme('auto')">
|
||||
<ContrastOutline class="dropdown-icon" />
|
||||
<span>自动</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- User Menu -->
|
||||
<div class="user-menu" @click="toggleUserMenu">
|
||||
<PersonCircleOutline class="user-icon" />
|
||||
<div v-if="showUserMenu" class="user-dropdown" @click.stop>
|
||||
@@ -177,7 +215,7 @@ const handleApplyServerUpdate = () => {
|
||||
<span class="brand">GoTunnel</span>
|
||||
<div v-if="version" class="version-info">
|
||||
<ServerOutline class="version-icon" />
|
||||
<span class="version">v{{ version }}</span>
|
||||
<span class="version">{{ version.startsWith('v') ? version : 'v' + version }}</span>
|
||||
<span v-if="updateInfo" class="update-status" :class="{ latest: !updateInfo.available, 'has-update': updateInfo.available }" @click="openUpdateModal">
|
||||
<template v-if="updateInfo.available">
|
||||
<ArrowUpCircleOutline class="status-icon" />
|
||||
@@ -252,16 +290,17 @@ const handleApplyServerUpdate = () => {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
background: var(--gradient-bg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
/* Header - 毛玻璃效果 */
|
||||
.app-header {
|
||||
height: 60px;
|
||||
background: rgba(15, 12, 41, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
height: 64px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -269,40 +308,62 @@ const handleApplyServerUpdate = () => {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 头部顶部高光线 */
|
||||
.app-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 100%);
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
background: var(--gradient-accent);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
gap: 8px;
|
||||
padding: 10px 18px;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--glass-bg-light);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
background: var(--gradient-accent);
|
||||
box-shadow: 0 4px 15px var(--color-accent-glow);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
@@ -317,14 +378,68 @@ const handleApplyServerUpdate = () => {
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: color 0.2s;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--color-text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.user-icon:hover {
|
||||
color: var(--color-text-primary);
|
||||
background: var(--glass-bg-light);
|
||||
}
|
||||
|
||||
/* Theme Menu */
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.theme-menu {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 4px;
|
||||
color: var(--color-text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.theme-icon:hover {
|
||||
color: var(--color-text-primary);
|
||||
background: var(--glass-bg-light);
|
||||
}
|
||||
|
||||
.theme-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 6px;
|
||||
min-width: 130px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.dropdown-item.active {
|
||||
background: var(--gradient-accent);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px var(--color-accent-glow);
|
||||
}
|
||||
|
||||
.dropdown-item.active:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
@@ -332,32 +447,33 @@ const handleApplyServerUpdate = () => {
|
||||
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;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 6px;
|
||||
min-width: 150px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
padding: 10px 14px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 13px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
background: var(--glass-bg-hover);
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
@@ -370,13 +486,13 @@ const handleApplyServerUpdate = () => {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
/* Footer - 毛玻璃效果 */
|
||||
.app-footer {
|
||||
height: 48px;
|
||||
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);
|
||||
height: 52px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -387,20 +503,24 @@ const handleApplyServerUpdate = () => {
|
||||
.footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: var(--gradient-accent);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.version {
|
||||
padding: 2px 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
background: var(--glass-bg-light);
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.version-info {
|
||||
@@ -412,7 +532,7 @@ const handleApplyServerUpdate = () => {
|
||||
.version-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.update-status {
|
||||
@@ -420,24 +540,33 @@ const handleApplyServerUpdate = () => {
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.update-status:hover {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.update-status.latest {
|
||||
color: #34d399;
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
color: var(--color-success);
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.update-status.has-update {
|
||||
color: #fbbf24;
|
||||
background: rgba(251, 191, 36, 0.15);
|
||||
color: var(--color-warning);
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { box-shadow: 0 0 0 0 var(--color-warning-glow); }
|
||||
50% { box-shadow: 0 0 8px 2px var(--color-warning-glow); }
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
@@ -449,13 +578,13 @@ const handleApplyServerUpdate = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
@@ -464,7 +593,7 @@ const handleApplyServerUpdate = () => {
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@@ -483,7 +612,7 @@ const handleApplyServerUpdate = () => {
|
||||
}
|
||||
}
|
||||
|
||||
/* Update Modal */
|
||||
/* Update Modal - 毛玻璃效果 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -496,9 +625,10 @@ const handleApplyServerUpdate = () => {
|
||||
}
|
||||
|
||||
.update-modal {
|
||||
background: rgba(30, 27, 75, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 16px;
|
||||
width: 90%;
|
||||
max-width: 480px;
|
||||
@@ -506,11 +636,12 @@ const handleApplyServerUpdate = () => {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -520,21 +651,21 @@ const handleApplyServerUpdate = () => {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
transition: color 0.2s;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@@ -557,18 +688,18 @@ const handleApplyServerUpdate = () => {
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value.highlight {
|
||||
color: #34d399;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.release-note {
|
||||
@@ -578,7 +709,7 @@ const handleApplyServerUpdate = () => {
|
||||
.note-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -586,8 +717,8 @@ const handleApplyServerUpdate = () => {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-bg-elevated);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
max-height: 200px;
|
||||
@@ -596,30 +727,39 @@ const handleApplyServerUpdate = () => {
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
transition: all 0.2s ease;
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.modal-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--glass-bg-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.modal-btn.primary {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
background: var(--gradient-accent);
|
||||
border: none;
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px var(--color-accent-glow);
|
||||
}
|
||||
|
||||
.modal-btn.primary:hover:not(:disabled) {
|
||||
box-shadow: 0 6px 20px var(--color-accent-glow);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.modal-btn:disabled {
|
||||
|
||||
@@ -48,12 +48,28 @@ const emit = defineEmits<{
|
||||
|
||||
.modal-container {
|
||||
width: 100%;
|
||||
background: rgba(30, 27, 75, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 顶部高光 */
|
||||
.modal-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.15) 50%,
|
||||
transparent 100%);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@@ -61,32 +77,32 @@ const emit = defineEmits<{
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--glass-bg-light);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.close-btn svg {
|
||||
@@ -100,7 +116,7 @@ const emit = defineEmits<{
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
|
||||
@@ -134,9 +134,9 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.inline-log-panel {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: var(--glass-bg);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -145,8 +145,8 @@ onUnmounted(() => {
|
||||
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);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--glass-bg-light);
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
@@ -158,7 +158,7 @@ onUnmounted(() => {
|
||||
.log-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.streaming-badge {
|
||||
@@ -166,8 +166,8 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: #34d399;
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
color: var(--color-success);
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -176,7 +176,7 @@ onUnmounted(() => {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #34d399;
|
||||
background: var(--color-success);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -192,11 +192,11 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--color-border);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
@@ -205,8 +205,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.tool-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
@@ -219,14 +219,14 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.auto-scroll-toggle input {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
accent-color: #a78bfa;
|
||||
accent-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.log-content {
|
||||
@@ -235,6 +235,7 @@ onUnmounted(() => {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.log-loading,
|
||||
@@ -243,7 +244,7 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -259,7 +260,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.log-time {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -269,12 +270,12 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.log-src {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.log-msg {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: var(--color-text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -289,11 +290,11 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--color-border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
47
web/src/composables/useTheme.ts
Normal file
47
web/src/composables/useTheme.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
|
||||
export type ThemeMode = 'light' | 'dark' | 'auto'
|
||||
|
||||
const STORAGE_KEY = 'gotunnel-theme'
|
||||
|
||||
const themeMode = ref<ThemeMode>('auto')
|
||||
|
||||
function getSystemTheme(): 'light' | 'dark' {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
function applyTheme(mode: ThemeMode) {
|
||||
const theme = mode === 'auto' ? getSystemTheme() : mode
|
||||
document.documentElement.setAttribute('data-theme', theme)
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
onMounted(() => {
|
||||
const saved = localStorage.getItem(STORAGE_KEY) as ThemeMode | null
|
||||
if (saved && ['light', 'dark', 'auto'].includes(saved)) {
|
||||
themeMode.value = saved
|
||||
}
|
||||
applyTheme(themeMode.value)
|
||||
|
||||
// 监听系统主题变化
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
if (themeMode.value === 'auto') {
|
||||
applyTheme('auto')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
watch(themeMode, (mode) => {
|
||||
localStorage.setItem(STORAGE_KEY, mode)
|
||||
applyTheme(mode)
|
||||
})
|
||||
|
||||
const setTheme = (mode: ThemeMode) => {
|
||||
themeMode.value = mode
|
||||
}
|
||||
|
||||
return {
|
||||
themeMode,
|
||||
setTheme
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,123 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ========================================
|
||||
GoTunnel 毛玻璃设计系统
|
||||
Glassmorphism Design System
|
||||
======================================== */
|
||||
|
||||
/* 深色主题（默认） - 深邃渐变背景 */
|
||||
:root,
|
||||
[data-theme="dark"] {
|
||||
/* 背景色 - 深色渐变基底 */
|
||||
--color-bg-primary: #0a0e17;
|
||||
--color-bg-secondary: #0d1220;
|
||||
--color-bg-tertiary: #111827;
|
||||
--color-bg-elevated: #1a2332;
|
||||
|
||||
/* 玻璃态背景 - 半透明 */
|
||||
--glass-bg: rgba(17, 24, 39, 0.6);
|
||||
--glass-bg-hover: rgba(26, 35, 50, 0.7);
|
||||
--glass-bg-light: rgba(255, 255, 255, 0.03);
|
||||
--glass-bg-card: rgba(17, 24, 39, 0.5);
|
||||
|
||||
/* 边框 - 高光描边 */
|
||||
--color-border: rgba(255, 255, 255, 0.08);
|
||||
--color-border-light: rgba(255, 255, 255, 0.05);
|
||||
--color-border-glow: rgba(99, 179, 237, 0.3);
|
||||
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
--glass-border-hover: 1px solid rgba(255, 255, 255, 0.15);
|
||||
|
||||
/* 文字颜色 */
|
||||
--color-text-primary: #f0f4f8;
|
||||
--color-text-secondary: rgba(240, 244, 248, 0.7);
|
||||
--color-text-muted: rgba(240, 244, 248, 0.45);
|
||||
|
||||
/* 强调色 - 霓虹高光 */
|
||||
--color-accent: #3b82f6;
|
||||
--color-accent-hover: #60a5fa;
|
||||
--color-accent-glow: rgba(59, 130, 246, 0.4);
|
||||
--color-success: #10b981;
|
||||
--color-success-glow: rgba(16, 185, 129, 0.4);
|
||||
--color-warning: #f59e0b;
|
||||
--color-warning-glow: rgba(245, 158, 11, 0.4);
|
||||
--color-error: #ef4444;
|
||||
--color-error-glow: rgba(239, 68, 68, 0.4);
|
||||
--color-info: #06b6d4;
|
||||
--color-info-glow: rgba(6, 182, 212, 0.4);
|
||||
|
||||
/* 渐变背景 */
|
||||
--gradient-bg: linear-gradient(135deg, #0a0e17 0%, #1a1f35 50%, #0d1220 100%);
|
||||
--gradient-accent: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
--gradient-card: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
|
||||
|
||||
/* 模糊效果 */
|
||||
--glass-blur: blur(20px);
|
||||
--glass-blur-light: blur(12px);
|
||||
|
||||
/* 阴影 - 悬浮感 */
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
--shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
|
||||
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* 浅色主题 - 柔和渐变背景 */
|
||||
[data-theme="light"] {
|
||||
/* 背景色 - 浅色渐变基底 */
|
||||
--color-bg-primary: #f0f4f8;
|
||||
--color-bg-secondary: #e8eef4;
|
||||
--color-bg-tertiary: #ffffff;
|
||||
--color-bg-elevated: #ffffff;
|
||||
|
||||
/* 玻璃态背景 - 半透明白 */
|
||||
--glass-bg: rgba(255, 255, 255, 0.7);
|
||||
--glass-bg-hover: rgba(255, 255, 255, 0.85);
|
||||
--glass-bg-light: rgba(255, 255, 255, 0.5);
|
||||
--glass-bg-card: rgba(255, 255, 255, 0.6);
|
||||
|
||||
/* 边框 - 柔和描边 */
|
||||
--color-border: rgba(0, 0, 0, 0.08);
|
||||
--color-border-light: rgba(0, 0, 0, 0.05);
|
||||
--color-border-glow: rgba(59, 130, 246, 0.3);
|
||||
--glass-border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
--glass-border-hover: 1px solid rgba(255, 255, 255, 0.95);
|
||||
|
||||
/* 文字颜色 */
|
||||
--color-text-primary: #1a202c;
|
||||
--color-text-secondary: rgba(26, 32, 44, 0.7);
|
||||
--color-text-muted: rgba(26, 32, 44, 0.5);
|
||||
|
||||
/* 强调色 */
|
||||
--color-accent: #3b82f6;
|
||||
--color-accent-hover: #2563eb;
|
||||
--color-accent-glow: rgba(59, 130, 246, 0.3);
|
||||
--color-success: #10b981;
|
||||
--color-success-glow: rgba(16, 185, 129, 0.3);
|
||||
--color-warning: #f59e0b;
|
||||
--color-warning-glow: rgba(245, 158, 11, 0.3);
|
||||
--color-error: #ef4444;
|
||||
--color-error-glow: rgba(239, 68, 68, 0.3);
|
||||
--color-info: #06b6d4;
|
||||
--color-info-glow: rgba(6, 182, 212, 0.3);
|
||||
|
||||
/* 渐变背景 */
|
||||
--gradient-bg: linear-gradient(135deg, #e8eef4 0%, #f0f4f8 50%, #e0e8f0 100%);
|
||||
--gradient-accent: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
--gradient-card: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
|
||||
|
||||
/* 模糊效果 */
|
||||
--glass-blur: blur(20px);
|
||||
--glass-blur-light: blur(12px);
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
--shadow-glow: 0 0 20px rgba(59, 130, 246, 0.1);
|
||||
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -10,24 +128,205 @@ body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: var(--gradient-bg);
|
||||
color: var(--color-text-primary);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Glass morphism utilities */
|
||||
/* ========================================
|
||||
玻璃态卡片组件
|
||||
======================================== */
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-card);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 卡片顶部高光 */
|
||||
.glass-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.glass-card-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.45);
|
||||
transform: translateY(-4px);
|
||||
background: var(--glass-bg-hover);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
玻璃态按钮
|
||||
======================================== */
|
||||
|
||||
.glass-btn {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur-light);
|
||||
-webkit-backdrop-filter: var(--glass-blur-light);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
padding: 10px 18px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-btn:hover {
|
||||
background: var(--glass-bg-hover);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.glass-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.glass-btn.primary {
|
||||
background: var(--gradient-accent);
|
||||
border: none;
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px var(--color-accent-glow);
|
||||
}
|
||||
|
||||
.glass-btn.primary:hover {
|
||||
box-shadow: 0 6px 20px var(--color-accent-glow);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.glass-btn.small {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
玻璃态输入框
|
||||
======================================== */
|
||||
|
||||
.glass-input {
|
||||
background: var(--glass-bg-light);
|
||||
backdrop-filter: var(--glass-blur-light);
|
||||
-webkit-backdrop-filter: var(--glass-blur-light);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.glass-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px var(--color-accent-glow);
|
||||
}
|
||||
|
||||
.glass-input::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
动画背景粒子
|
||||
======================================== */
|
||||
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.15;
|
||||
filter: blur(60px);
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.particle-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: var(--color-accent);
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.particle-2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #8b5cf6;
|
||||
bottom: -50px;
|
||||
left: -50px;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.particle-3 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: var(--color-info);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
.particle-4 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: var(--color-success);
|
||||
bottom: 20%;
|
||||
right: 20%;
|
||||
animation-delay: -15s;
|
||||
}
|
||||
|
||||
.particle-5 {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: #ec4899;
|
||||
top: 30%;
|
||||
left: 10%;
|
||||
animation-delay: -7s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: translate(30px, -30px) scale(1.05);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-20px, 20px) scale(0.95);
|
||||
}
|
||||
75% {
|
||||
transform: translate(-30px, -20px) scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {
|
||||
ArrowBackOutline, CreateOutline, TrashOutline,
|
||||
PushOutline, AddOutline, StorefrontOutline, DocumentTextOutline,
|
||||
ExtensionPuzzleOutline, SettingsOutline, CloudDownloadOutline, RefreshOutline
|
||||
ExtensionPuzzleOutline, SettingsOutline, RefreshOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import GlassModal from '../components/GlassModal.vue'
|
||||
import GlassTag from '../components/GlassTag.vue'
|
||||
@@ -15,7 +15,8 @@ import {
|
||||
getClient, updateClient, deleteClient, pushConfigToClient, disconnectClient, restartClient,
|
||||
getClientPluginConfig, updateClientPluginConfig,
|
||||
getStorePlugins, installStorePlugin, getRuleSchemas, startClientPlugin, restartClientPlugin, stopClientPlugin, deleteClientPlugin,
|
||||
checkClientUpdate, applyClientUpdate, getClientSystemStats, type UpdateInfo, type SystemStats
|
||||
checkClientUpdate, applyClientUpdate, getClientSystemStats, getVersionInfo,
|
||||
type UpdateInfo, type SystemStats
|
||||
} from '../api'
|
||||
import type { ProxyRule, ClientPlugin, ConfigField, StorePluginInfo, RuleSchemasMap } from '../types'
|
||||
import LogViewer from '../components/LogViewer.vue'
|
||||
@@ -41,8 +42,8 @@ const clientVersion = ref('')
|
||||
|
||||
// 客户端更新相关
|
||||
const clientUpdate = ref<UpdateInfo | null>(null)
|
||||
const checkingUpdate = ref(false)
|
||||
const updatingClient = ref(false)
|
||||
const serverVersion = ref('')
|
||||
|
||||
// 系统状态相关
|
||||
const systemStats = ref<SystemStats | null>(null)
|
||||
@@ -95,6 +96,61 @@ const getExtraFields = (type: string): ConfigField[] => {
|
||||
return schema?.extra_fields || []
|
||||
}
|
||||
|
||||
// 加载服务端版本
|
||||
const loadServerVersion = async () => {
|
||||
try {
|
||||
const { data } = await getVersionInfo()
|
||||
serverVersion.value = data.version || ''
|
||||
} catch (e) {
|
||||
console.error('Failed to load server version', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 版本比较函数：返回 -1 (v1 < v2), 0 (v1 == v2), 1 (v1 > v2)
|
||||
const compareVersions = (v1: string, v2: string): number => {
|
||||
const normalize = (v: string) => v.replace(/^v/, '').split('.').map(n => parseInt(n, 10) || 0)
|
||||
const parts1 = normalize(v1)
|
||||
const parts2 = normalize(v2)
|
||||
const len = Math.max(parts1.length, parts2.length)
|
||||
for (let i = 0; i < len; i++) {
|
||||
const p1 = parts1[i] || 0
|
||||
const p2 = parts2[i] || 0
|
||||
if (p1 < p2) return -1
|
||||
if (p1 > p2) return 1
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
// 判断客户端是否需要更新
|
||||
// 逻辑：如果客户端最新版>=服务端版本，则目标版本为服务端版本；否则为客户端最新版
|
||||
const needsUpdate = (): boolean => {
|
||||
if (!clientUpdate.value?.latest || !clientVersion.value) return false
|
||||
const latestClientVer = clientUpdate.value.latest
|
||||
const currentClientVer = clientVersion.value
|
||||
const serverVer = serverVersion.value
|
||||
|
||||
// 确定目标版本
|
||||
let targetVersion = latestClientVer
|
||||
if (serverVer && compareVersions(latestClientVer, serverVer) >= 0) {
|
||||
targetVersion = serverVer
|
||||
}
|
||||
|
||||
// 比较当前客户端版本和目标版本
|
||||
return compareVersions(currentClientVer, targetVersion) < 0
|
||||
}
|
||||
|
||||
// 获取目标更新版本
|
||||
const getTargetVersion = (): string => {
|
||||
if (!clientUpdate.value?.latest) return ''
|
||||
const latestClientVer = clientUpdate.value.latest
|
||||
const serverVer = serverVersion.value
|
||||
|
||||
if (serverVer && compareVersions(latestClientVer, serverVer) >= 0) {
|
||||
return serverVer
|
||||
}
|
||||
return latestClientVer
|
||||
}
|
||||
|
||||
// Actions
|
||||
const loadClient = async () => {
|
||||
loading.value = true
|
||||
@@ -157,31 +213,6 @@ const formatBytes = (bytes: number): string => {
|
||||
}
|
||||
|
||||
// 客户端更新
|
||||
const handleCheckClientUpdate = async () => {
|
||||
if (!online.value) {
|
||||
message.warning('客户端离线，无法检查更新')
|
||||
return
|
||||
}
|
||||
if (!clientOs.value || !clientArch.value) {
|
||||
message.warning('无法获取客户端平台信息')
|
||||
return
|
||||
}
|
||||
checkingUpdate.value = true
|
||||
try {
|
||||
const { data } = await checkClientUpdate(clientOs.value, clientArch.value)
|
||||
clientUpdate.value = data
|
||||
if (data.download_url) {
|
||||
message.success('找到客户端更新: ' + data.latest)
|
||||
} else {
|
||||
message.info('已是最新版本或未找到对应平台的更新包')
|
||||
}
|
||||
} catch (e: any) {
|
||||
message.error(e.response?.data || '检查更新失败')
|
||||
} finally {
|
||||
checkingUpdate.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleApplyClientUpdate = () => {
|
||||
if (!clientUpdate.value?.download_url) {
|
||||
message.error('没有可用的下载链接')
|
||||
@@ -463,9 +494,23 @@ const handleRestartClient = () => {
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
const pollTimer = ref<number | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
loadRuleSchemas()
|
||||
loadServerVersion()
|
||||
loadClient()
|
||||
// 启动自动轮询，每 5 秒刷新一次
|
||||
pollTimer.value = window.setInterval(() => {
|
||||
loadClient()
|
||||
}, 5000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollTimer.value) {
|
||||
clearInterval(pollTimer.value)
|
||||
pollTimer.value = null
|
||||
}
|
||||
})
|
||||
|
||||
// Log Viewer
|
||||
@@ -552,6 +597,10 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
<div class="glass-card">
|
||||
<div class="card-header">
|
||||
<h3>客户端状态</h3>
|
||||
<!-- Heartbeat indicator -->
|
||||
<div class="heartbeat-indicator" :class="{ online: online, offline: !online }">
|
||||
<span class="heartbeat-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="stat-item">
|
||||
@@ -566,8 +615,11 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
<span class="stat-label">客户端版本</span>
|
||||
<span class="stat-value">
|
||||
{{ clientVersion || '-' }}
|
||||
<span v-if="clientUpdate?.available" class="update-badge" @click="handleApplyClientUpdate">
|
||||
可更新
|
||||
<span v-if="needsUpdate()" class="update-badge" @click="handleApplyClientUpdate">
|
||||
可更新 → {{ getTargetVersion() }}
|
||||
</span>
|
||||
<span v-else-if="clientVersion" class="latest-badge">
|
||||
最新版本
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -644,32 +696,6 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Update Card -->
|
||||
<div class="glass-card">
|
||||
<div class="card-header">
|
||||
<h3>客户端更新</h3>
|
||||
<button class="glass-btn tiny" :disabled="!online || checkingUpdate" @click="handleCheckClientUpdate">
|
||||
<RefreshOutline class="btn-icon-sm" />
|
||||
检查
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-if="clientOs && clientArch" class="platform-info">
|
||||
平台: {{ clientOs }}/{{ clientArch }}
|
||||
</div>
|
||||
<div v-if="!clientUpdate" class="empty-hint">点击检查更新</div>
|
||||
<template v-else>
|
||||
<div v-if="clientUpdate.download_url" class="update-available">
|
||||
<p>发现新版本 {{ clientUpdate.latest }}</p>
|
||||
<button class="glass-btn primary small" :disabled="updatingClient" @click="handleApplyClientUpdate">
|
||||
<CloudDownloadOutline class="btn-icon-sm" />
|
||||
更新
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="empty-hint">已是最新版本</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
@@ -885,32 +911,15 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
<style scoped>
|
||||
.client-page {
|
||||
min-height: calc(100vh - 108px);
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
background: transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* Hide particles */
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
|
||||
animation: float-particle 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.particle-1 { width: 250px; height: 250px; top: -80px; right: -50px; }
|
||||
.particle-2 { width: 180px; height: 180px; bottom: 10%; left: 5%; animation-delay: -7s; }
|
||||
.particle-3 { width: 120px; height: 120px; top: 50%; right: 15%; animation-delay: -12s; }
|
||||
|
||||
@keyframes float-particle {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
|
||||
50% { transform: translate(-20px, -60px) scale(0.95); opacity: 0.4; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
.client-content {
|
||||
@@ -937,26 +946,26 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
}
|
||||
|
||||
.back-btn, .edit-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
background: var(--color-bg-tertiary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-btn:hover, .edit-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -965,13 +974,13 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
background: rgba(244, 33, 46, 0.15);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.status-tag.online {
|
||||
background: rgba(52, 211, 153, 0.2);
|
||||
color: #34d399;
|
||||
background: rgba(0, 186, 124, 0.15);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
@@ -981,21 +990,21 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
|
||||
/* Glass Button */
|
||||
.glass-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: var(--color-bg-tertiary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.glass-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.glass-btn:disabled {
|
||||
@@ -1004,20 +1013,24 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
}
|
||||
|
||||
.glass-btn.primary {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
background: var(--color-accent);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.glass-btn.primary:hover:not(:disabled) {
|
||||
background: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.glass-btn.danger {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: #fca5a5;
|
||||
background: rgba(244, 33, 46, 0.15);
|
||||
border-color: rgba(244, 33, 46, 0.3);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.glass-btn.warning {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
border-color: rgba(251, 191, 36, 0.3);
|
||||
color: #fcd34d;
|
||||
background: rgba(247, 147, 26, 0.15);
|
||||
border-color: rgba(247, 147, 26, 0.3);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.glass-btn.small { padding: 6px 12px; font-size: 12px; }
|
||||
@@ -1043,17 +1056,15 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
|
||||
/* Glass Card */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: var(--color-bg-tertiary);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -1063,13 +1074,47 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Heartbeat Indicator */
|
||||
.heartbeat-indicator {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.heartbeat-dot {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.heartbeat-indicator.online .heartbeat-dot {
|
||||
background: var(--color-success);
|
||||
animation: heartbeat-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.heartbeat-indicator.offline .heartbeat-dot {
|
||||
background: var(--color-error);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes heartbeat-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 186, 124, 0.5);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 6px rgba(0, 186, 124, 0);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-body { padding: 20px; }
|
||||
.card-actions {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -1079,18 +1124,18 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.stat-item:last-child { border-bottom: none; }
|
||||
|
||||
.stat-label {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -1104,15 +1149,25 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
margin-left: 8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
background: rgba(247, 147, 26, 0.15);
|
||||
color: var(--color-warning);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.update-badge:hover {
|
||||
background: rgba(251, 191, 36, 0.3);
|
||||
background: rgba(247, 147, 26, 0.25);
|
||||
}
|
||||
|
||||
.latest-badge {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
background: rgba(0, 186, 124, 0.15);
|
||||
color: var(--color-success);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Mini Stats */
|
||||
@@ -1129,23 +1184,23 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.mini-stat-label {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Update Card */
|
||||
.platform-info {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
@@ -1153,7 +1208,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
|
||||
.update-available p {
|
||||
margin: 0 0 8px 0;
|
||||
color: #34d399;
|
||||
color: var(--color-success);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -1161,7 +1216,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.rules-table {
|
||||
@@ -1177,37 +1232,37 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
}
|
||||
|
||||
.table-header {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.rule-name { font-weight: 500; color: white; }
|
||||
.rule-name { font-weight: 500; color: var(--color-text-primary); }
|
||||
.rule-mapping { font-family: monospace; font-size: 12px; }
|
||||
.rule-actions { display: flex; gap: 6px; justify-content: flex-end; }
|
||||
|
||||
/* Icon Button */
|
||||
.icon-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--color-bg-elevated);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.icon-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.icon-btn:disabled {
|
||||
@@ -1216,19 +1271,19 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
}
|
||||
|
||||
.icon-btn.danger {
|
||||
color: #fca5a5;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.icon-btn.danger:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
background: rgba(244, 33, 46, 0.15);
|
||||
}
|
||||
|
||||
.icon-btn.success {
|
||||
color: #34d399;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.icon-btn.success:hover:not(:disabled) {
|
||||
background: rgba(52, 211, 153, 0.2);
|
||||
background: rgba(0, 186, 124, 0.15);
|
||||
}
|
||||
|
||||
/* Plugins List */
|
||||
@@ -1239,8 +1294,8 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
}
|
||||
|
||||
.plugin-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
background: var(--color-bg-elevated);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1255,13 +1310,13 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
|
||||
.plugin-name {
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.plugin-version {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.plugin-meta {
|
||||
@@ -1269,7 +1324,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.plugin-actions {
|
||||
@@ -1280,10 +1335,10 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
|
||||
/* Store Plugin Card */
|
||||
.store-plugin-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
background: var(--color-bg-elevated);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.store-plugin-header {
|
||||
@@ -1295,12 +1350,12 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
|
||||
.store-plugin-name {
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.store-plugin-desc {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
margin: 0 0 12px 0;
|
||||
line-height: 1.5;
|
||||
@@ -1325,29 +1380,29 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
transition: border-color 0.15s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: rgba(167, 139, 250, 0.5);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.form-input:disabled {
|
||||
@@ -1357,26 +1412,26 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select option {
|
||||
background: #1e1b4b;
|
||||
color: white;
|
||||
background: var(--color-bg-tertiary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.form-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1384,13 +1439,13 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
.form-toggle input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: #a78bfa;
|
||||
accent-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
@@ -1403,9 +1458,8 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
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);
|
||||
background: var(--color-bg-tertiary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
min-width: 100px;
|
||||
@@ -1418,17 +1472,17 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
padding: 8px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.dropdown-menu button:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.dropdown-menu button:disabled {
|
||||
@@ -1437,11 +1491,11 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
}
|
||||
|
||||
.dropdown-menu button.danger {
|
||||
color: #fca5a5;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.dropdown-menu button.danger:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
background: rgba(244, 33, 46, 0.15);
|
||||
}
|
||||
|
||||
/* Icon styles */
|
||||
@@ -1463,7 +1517,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
.plugin-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #a78bfa;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
@@ -1482,20 +1536,20 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
.system-stat-label {
|
||||
width: 40px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--color-border);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #60a5fa, #a78bfa);
|
||||
background: var(--color-accent);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
@@ -1504,13 +1558,13 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.system-stat-detail {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
text-align: right;
|
||||
margin-bottom: 12px;
|
||||
margin-top: -4px;
|
||||
|
||||
@@ -92,6 +92,10 @@ onMounted(loadClients)
|
||||
<div class="client-tag" :class="client.online ? 'online' : 'offline'">
|
||||
{{ client.online ? '在线' : '离线' }}
|
||||
</div>
|
||||
<!-- Heartbeat indicator -->
|
||||
<div class="heartbeat-indicator" :class="{ online: client.online, offline: !client.online }">
|
||||
<span class="heartbeat-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,33 +106,60 @@ onMounted(loadClients)
|
||||
|
||||
<style scoped>
|
||||
.clients-page {
|
||||
min-height: calc(100vh - 108px);
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
min-height: calc(100vh - 116px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* 动画背景粒子 */
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
|
||||
animation: float-particle 20s ease-in-out infinite;
|
||||
opacity: 0.15;
|
||||
filter: blur(60px);
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.particle-1 { width: 250px; height: 250px; top: -80px; right: -50px; }
|
||||
.particle-2 { width: 180px; height: 180px; bottom: 10%; left: 5%; animation-delay: -7s; }
|
||||
.particle-3 { width: 120px; height: 120px; top: 50%; right: 15%; animation-delay: -12s; }
|
||||
.particle-1 {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: var(--color-accent);
|
||||
top: -80px;
|
||||
right: -80px;
|
||||
}
|
||||
|
||||
@keyframes float-particle {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
|
||||
50% { transform: translate(-20px, -60px) scale(0.95); opacity: 0.4; }
|
||||
.particle-2 {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
background: #8b5cf6;
|
||||
bottom: -40px;
|
||||
left: -40px;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.particle-3 {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
background: var(--color-success);
|
||||
top: 40%;
|
||||
left: 30%;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
25% { transform: translate(30px, -30px) scale(1.05); }
|
||||
50% { transform: translate(-20px, 20px) scale(0.95); }
|
||||
75% { transform: translate(-30px, -20px) scale(1.02); }
|
||||
}
|
||||
|
||||
.clients-content {
|
||||
@@ -142,11 +173,11 @@ onMounted(loadClients)
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
.page-subtitle {
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -160,38 +191,76 @@ onMounted(loadClients)
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255,255,255,0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 100%);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.stat-value.online { color: #34d399; }
|
||||
.stat-value.offline { color: rgba(255,255,255,0.5); }
|
||||
.stat-value.online { color: var(--color-success); }
|
||||
.stat-value.offline { color: var(--color-text-muted); }
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Glass Card */
|
||||
.glass-card {
|
||||
background: rgba(255,255,255,0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-card);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glass-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 100%);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -200,18 +269,18 @@ onMounted(loadClients)
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.card-body { padding: 20px; }
|
||||
|
||||
.loading-state, .empty-state {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.3);
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@@ -231,17 +300,18 @@ onMounted(loadClients)
|
||||
}
|
||||
|
||||
.client-card {
|
||||
background: rgba(255,255,255,0.05);
|
||||
background: var(--glass-bg-light);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
padding: 18px;
|
||||
border: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
.client-card:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: var(--glass-bg-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.client-header {
|
||||
@@ -255,23 +325,23 @@ onMounted(loadClients)
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.3);
|
||||
background: var(--color-text-muted);
|
||||
}
|
||||
.client-status.online {
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 8px rgba(52,211,153,0.6);
|
||||
background: var(--color-success);
|
||||
box-shadow: 0 0 10px var(--color-success-glow);
|
||||
}
|
||||
|
||||
.client-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.client-id {
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.4);
|
||||
color: var(--color-text-muted);
|
||||
margin: 0 0 8px 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
@@ -281,37 +351,80 @@ onMounted(loadClients)
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.client-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.client-tag.online {
|
||||
background: rgba(52,211,153,0.2);
|
||||
color: #34d399;
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: var(--color-success);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
.client-tag.offline {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: rgba(255,255,255,0.5);
|
||||
background: var(--glass-bg-light);
|
||||
color: var(--color-text-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.glass-btn {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
border-radius: 8px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur-light);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
padding: 8px 16px;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.glass-btn:hover {
|
||||
background: var(--glass-bg-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.glass-btn:hover { background: rgba(255,255,255,0.2); }
|
||||
.glass-btn.small { padding: 6px 12px; font-size: 12px; }
|
||||
|
||||
/* Heartbeat Indicator */
|
||||
.heartbeat-indicator {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.heartbeat-dot {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.heartbeat-indicator.online .heartbeat-dot {
|
||||
background: var(--color-success);
|
||||
animation: heartbeat-pulse 2s ease-in-out infinite;
|
||||
box-shadow: 0 0 8px var(--color-success-glow);
|
||||
}
|
||||
|
||||
.heartbeat-indicator.offline .heartbeat-dot {
|
||||
background: var(--color-error);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes heartbeat-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 var(--color-success-glow);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -123,83 +123,84 @@ onMounted(() => {
|
||||
<div class="dashboard-content">
|
||||
<!-- Header -->
|
||||
<div class="dashboard-header">
|
||||
<h1 class="text-3xl font-bold text-white mb-2">仪表盘</h1>
|
||||
<p class="text-white/70">监控隧道连接和流量状态</p>
|
||||
<h1 class="dashboard-title">仪表盘</h1>
|
||||
<p class="dashboard-subtitle">监控隧道连接和流量状态</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="stats-grid">
|
||||
<!-- Outbound Traffic -->
|
||||
<!-- 24H Traffic Combined -->
|
||||
<div class="stat-card glass-stat">
|
||||
<div class="stat-icon outbound">
|
||||
<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="M7 11l5-5m0 0l5 5m-5-5v12" />
|
||||
<div class="stat-icon-large traffic-24h">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-lg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">24h出站</span>
|
||||
<span class="stat-value">{{ formatted24hOutbound.value }}</span>
|
||||
<span class="stat-unit">{{ formatted24hOutbound.unit }}</span>
|
||||
<div class="stat-details">
|
||||
<div class="stat-row">
|
||||
<span class="stat-title">24H 出站</span>
|
||||
<div class="stat-data">
|
||||
<span class="stat-number">{{ formatted24hOutbound.value }}</span>
|
||||
<span class="stat-unit">{{ formatted24hOutbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-title">24H 入站</span>
|
||||
<div class="stat-data">
|
||||
<span class="stat-number">{{ formatted24hInbound.value }}</span>
|
||||
<span class="stat-unit">{{ formatted24hInbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inbound Traffic -->
|
||||
<!-- Total Traffic Combined -->
|
||||
<div class="stat-card glass-stat">
|
||||
<div class="stat-icon inbound">
|
||||
<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="M17 13l-5 5m0 0l-5-5m5 5V6" />
|
||||
<div class="stat-icon-large traffic-total">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-lg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">24h入站</span>
|
||||
<span class="stat-value">{{ formatted24hInbound.value }}</span>
|
||||
<span class="stat-unit">{{ formatted24hInbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total Outbound Traffic -->
|
||||
<div class="stat-card glass-stat">
|
||||
<div class="stat-icon total-out">
|
||||
<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="M7 11l5-5m0 0l5 5m-5-5v12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">总出站</span>
|
||||
<span class="stat-value">{{ formattedTotalOutbound.value }}</span>
|
||||
<span class="stat-unit">{{ formattedTotalOutbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total Inbound Traffic -->
|
||||
<div class="stat-card glass-stat">
|
||||
<div class="stat-icon total-in">
|
||||
<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="M17 13l-5 5m0 0l-5-5m5 5V6" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">总入站</span>
|
||||
<span class="stat-value">{{ formattedTotalInbound.value }}</span>
|
||||
<span class="stat-unit">{{ formattedTotalInbound.unit }}</span>
|
||||
<div class="stat-details">
|
||||
<div class="stat-row">
|
||||
<span class="stat-title">总出站</span>
|
||||
<div class="stat-data">
|
||||
<span class="stat-number">{{ formattedTotalOutbound.value }}</span>
|
||||
<span class="stat-unit">{{ formattedTotalOutbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-title">总入站</span>
|
||||
<div class="stat-data">
|
||||
<span class="stat-number">{{ formattedTotalInbound.value }}</span>
|
||||
<span class="stat-unit">{{ formattedTotalInbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client Count -->
|
||||
<div class="stat-card glass-stat">
|
||||
<div class="stat-icon clients">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<div class="stat-icon-large clients">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-lg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<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 class="stat-details">
|
||||
<div class="stat-row">
|
||||
<span class="stat-title">在线客户端</span>
|
||||
<div class="stat-data">
|
||||
<span class="stat-number online">{{ onlineClients }}</span>
|
||||
<span class="stat-unit">个</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-title">总客户端</span>
|
||||
<div class="stat-data">
|
||||
<span class="stat-number">{{ clients.length }}</span>
|
||||
<span class="stat-unit">个</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="stat-unit">在线 / 总数</span>
|
||||
</div>
|
||||
<div class="online-indicator" :class="{ active: onlineClients > 0 }">
|
||||
<span class="pulse"></span>
|
||||
@@ -208,15 +209,19 @@ onMounted(() => {
|
||||
|
||||
<!-- 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">
|
||||
<div class="stat-icon-large rules">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-lg" 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 class="stat-details">
|
||||
<div class="stat-row single">
|
||||
<span class="stat-title">代理规则</span>
|
||||
<div class="stat-data">
|
||||
<span class="stat-number">{{ totalRules }}</span>
|
||||
<span class="stat-unit">条</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -250,75 +255,80 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Container with gradient background */
|
||||
/* Container */
|
||||
.dashboard-container {
|
||||
min-height: calc(100vh - 108px);
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
min-height: calc(100vh - 116px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* Floating particles */
|
||||
/* 动画背景粒子 */
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
|
||||
animation: float-particle 20s ease-in-out infinite;
|
||||
opacity: 0.15;
|
||||
filter: blur(60px);
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.particle-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: var(--color-accent);
|
||||
top: -100px;
|
||||
right: -50px;
|
||||
animation-delay: 0s;
|
||||
right: -100px;
|
||||
}
|
||||
|
||||
.particle-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: 10%;
|
||||
left: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #8b5cf6;
|
||||
bottom: -50px;
|
||||
left: -50px;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.particle-3 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 40%;
|
||||
right: 20%;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: var(--color-info);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
.particle-4 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 20%;
|
||||
left: 30%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: var(--color-success);
|
||||
bottom: 20%;
|
||||
right: 20%;
|
||||
animation-delay: -15s;
|
||||
}
|
||||
|
||||
.particle-5 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
bottom: 30%;
|
||||
right: 10%;
|
||||
animation-delay: -8s;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: #ec4899;
|
||||
top: 30%;
|
||||
left: 10%;
|
||||
animation-delay: -7s;
|
||||
}
|
||||
|
||||
@keyframes float-particle {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
|
||||
25% { transform: translate(30px, -40px) scale(1.1); opacity: 0.5; }
|
||||
50% { transform: translate(-20px, -80px) scale(0.9); opacity: 0.4; }
|
||||
75% { transform: translate(-40px, -40px) scale(1.05); opacity: 0.35; }
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
25% { transform: translate(30px, -30px) scale(1.05); }
|
||||
50% { transform: translate(-20px, 20px) scale(0.95); }
|
||||
75% { transform: translate(-30px, -20px) scale(1.02); }
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
@@ -333,10 +343,23 @@ onMounted(() => {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
@@ -353,137 +376,119 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* Glass stat card */
|
||||
/* Glass stat card - 毛玻璃效果 */
|
||||
.glass-stat {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
padding: 24px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
transition: all 0.25s ease;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* 卡片顶部高光 */
|
||||
.glass-stat::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 100%);
|
||||
}
|
||||
|
||||
.glass-stat:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
|
||||
background: var(--glass-bg-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
||||
}
|
||||
|
||||
/* Stat icon */
|
||||
.stat-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
/* Large Stat icon */
|
||||
.stat-icon-large {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.stat-icon.outbound {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
|
||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
|
||||
.stat-icon-large.traffic-24h {
|
||||
background: var(--gradient-accent);
|
||||
}
|
||||
|
||||
.stat-icon.inbound {
|
||||
background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
|
||||
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
|
||||
.stat-icon-large.traffic-total {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
|
||||
}
|
||||
|
||||
.stat-icon.clients {
|
||||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||||
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
|
||||
.stat-icon-large.clients {
|
||||
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
|
||||
}
|
||||
|
||||
.stat-icon.rules {
|
||||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||||
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
|
||||
.stat-icon-large.rules {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
|
||||
}
|
||||
|
||||
.stat-icon.total-out {
|
||||
background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
|
||||
box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4);
|
||||
}
|
||||
|
||||
.stat-icon.total-in {
|
||||
background: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);
|
||||
box-shadow: 0 4px 16px rgba(147, 51, 234, 0.4);
|
||||
}
|
||||
|
||||
.stat-icon svg {
|
||||
.icon-lg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Stat content */
|
||||
.stat-content {
|
||||
/* Stat details */
|
||||
.stat-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-height: 48px;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-row.single {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Client count special styling */
|
||||
.client-count {
|
||||
.stat-data {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.client-count .stat-value.online {
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.client-count .stat-value.total {
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.stat-separator {
|
||||
.stat-number {
|
||||
font-size: 20px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Stat trend indicator */
|
||||
.stat-trend {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
.stat-number.online {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stat-trend.up {
|
||||
background: rgba(52, 211, 153, 0.2);
|
||||
color: #34d399;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Online indicator with pulse */
|
||||
@@ -495,20 +500,21 @@ onMounted(() => {
|
||||
|
||||
.online-indicator .pulse {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.online-indicator.active .pulse {
|
||||
background: #34d399;
|
||||
background: var(--color-success);
|
||||
animation: pulse-animation 2s ease-in-out infinite;
|
||||
box-shadow: 0 0 8px var(--color-success-glow);
|
||||
}
|
||||
|
||||
@keyframes pulse-animation {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
|
||||
50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
|
||||
0%, 100% { box-shadow: 0 0 0 0 var(--color-success-glow); }
|
||||
50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
|
||||
}
|
||||
|
||||
/* Chart Section */
|
||||
@@ -524,9 +530,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -540,7 +546,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
@@ -550,11 +556,11 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.legend-item.inbound .legend-dot {
|
||||
background: #a78bfa;
|
||||
background: #8b5cf6;
|
||||
}
|
||||
|
||||
.legend-item.outbound .legend-dot {
|
||||
background: #60a5fa;
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Chart Card */
|
||||
@@ -599,34 +605,49 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.bar.inbound {
|
||||
background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%);
|
||||
background: #8b5cf6;
|
||||
}
|
||||
|
||||
.bar.outbound {
|
||||
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chart-hint {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top: 1px solid var(--color-border);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Glass card base */
|
||||
/* Glass card base - 毛玻璃效果 */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-card);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glass-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -101,97 +101,116 @@ const handleLogin = async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
background: var(--gradient-bg);
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Particles */
|
||||
/* 动画背景粒子 */
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
|
||||
animation: float-particle 20s ease-in-out infinite;
|
||||
opacity: 0.2;
|
||||
filter: blur(60px);
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.particle-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: var(--color-accent);
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
animation-delay: 0s;
|
||||
right: -100px;
|
||||
}
|
||||
|
||||
.particle-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #8b5cf6;
|
||||
bottom: -50px;
|
||||
right: -50px;
|
||||
left: -50px;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.particle-3 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: var(--color-info);
|
||||
top: 50%;
|
||||
right: 10%;
|
||||
left: 20%;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
.particle-4 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: 20%;
|
||||
left: 10%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #ec4899;
|
||||
bottom: 30%;
|
||||
right: 10%;
|
||||
animation-delay: -15s;
|
||||
}
|
||||
|
||||
@keyframes float-particle {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
|
||||
25% { transform: translate(30px, -40px) scale(1.1); opacity: 0.5; }
|
||||
50% { transform: translate(-20px, -80px) scale(0.9); opacity: 0.4; }
|
||||
75% { transform: translate(-40px, -40px) scale(1.05); opacity: 0.35; }
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
25% { transform: translate(30px, -30px) scale(1.05); }
|
||||
50% { transform: translate(-20px, 20px) scale(0.95); }
|
||||
75% { transform: translate(-30px, -20px) scale(1.02); }
|
||||
}
|
||||
|
||||
/* Login card */
|
||||
/* Login card - 毛玻璃效果 */
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: 48px 36px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 卡片顶部高光 */
|
||||
.login-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.15) 50%,
|
||||
transparent 100%);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 16px;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
margin: 0 auto 20px;
|
||||
background: var(--gradient-accent);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 16px rgba(96, 165, 250, 0.4);
|
||||
box-shadow: 0 8px 24px var(--color-accent-glow);
|
||||
}
|
||||
|
||||
.logo-icon svg {
|
||||
@@ -203,12 +222,15 @@ const handleLogin = async () => {
|
||||
.logo-text {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
background: var(--gradient-accent);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -229,17 +251,17 @@ const handleLogin = async () => {
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.glass-input {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: var(--glass-bg-light);
|
||||
backdrop-filter: var(--glass-blur-light);
|
||||
-webkit-backdrop-filter: var(--glass-blur-light);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
@@ -247,13 +269,12 @@ const handleLogin = async () => {
|
||||
}
|
||||
|
||||
.glass-input:focus {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px var(--color-accent-glow);
|
||||
}
|
||||
|
||||
.glass-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.glass-input:disabled {
|
||||
@@ -266,11 +287,11 @@ const handleLogin = async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
padding: 12px 14px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 12px;
|
||||
color: #fca5a5;
|
||||
border-radius: 10px;
|
||||
color: var(--color-error);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -280,12 +301,12 @@ const handleLogin = async () => {
|
||||
|
||||
/* Button */
|
||||
.glass-button {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
background: var(--gradient-accent);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 14px 24px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@@ -293,20 +314,21 @@ const handleLogin = async () => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 16px rgba(96, 165, 250, 0.4);
|
||||
box-shadow: 0 4px 15px var(--color-accent-glow);
|
||||
}
|
||||
|
||||
.glass-button:hover:not(:disabled) {
|
||||
box-shadow: 0 6px 20px var(--color-accent-glow);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px rgba(96, 165, 250, 0.5);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.glass-button:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
.glass-button:disabled {
|
||||
opacity: 0.7;
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -327,10 +349,10 @@ const handleLogin = async () => {
|
||||
/* Footer */
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
margin-top: 28px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-top: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,762 +0,0 @@
|
||||
<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 {
|
||||
getPlugins, enablePlugin, disablePlugin, getJSPlugins,
|
||||
pushJSPluginToClient, getClients, updateJSPluginConfig, setJSPluginEnabled
|
||||
} from '../api'
|
||||
import type { PluginInfo, JSPlugin, ClientStatus } from '../types'
|
||||
|
||||
const message = useToast()
|
||||
const plugins = ref<PluginInfo[]>([])
|
||||
const jsPlugins = ref<JSPlugin[]>([])
|
||||
const clients = ref<ClientStatus[]>([])
|
||||
const loading = ref(true)
|
||||
const jsLoading = ref(false)
|
||||
const activeTab = ref('installed')
|
||||
|
||||
const loadPlugins = async () => {
|
||||
try {
|
||||
const { data } = await getPlugins()
|
||||
plugins.value = data || []
|
||||
} catch (e) {
|
||||
console.error('Failed to load plugins', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const proxyPlugins = computed(() => plugins.value.filter(p => p.type === 'proxy'))
|
||||
const appPlugins = computed(() => plugins.value.filter(p => p.type === 'app'))
|
||||
|
||||
const togglePlugin = async (plugin: PluginInfo) => {
|
||||
try {
|
||||
if (plugin.enabled) {
|
||||
await disablePlugin(plugin.name)
|
||||
message.success(`已禁用 ${plugin.name}`)
|
||||
} else {
|
||||
await enablePlugin(plugin.name)
|
||||
message.success(`已启用 ${plugin.name}`)
|
||||
}
|
||||
plugin.enabled = !plugin.enabled
|
||||
} catch (e) {
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeLabel = (type: string) => {
|
||||
const labels: Record<string, string> = { proxy: '协议', app: '应用', service: '服务', tool: '工具' }
|
||||
return labels[type] || type
|
||||
}
|
||||
|
||||
const handleTabChange = (tab: string) => {
|
||||
if (tab === 'js' && jsPlugins.value.length === 0) loadJSPlugins()
|
||||
}
|
||||
|
||||
const loadJSPlugins = async () => {
|
||||
jsLoading.value = true
|
||||
try {
|
||||
const { data } = await getJSPlugins()
|
||||
jsPlugins.value = data || []
|
||||
} catch (e) {
|
||||
console.error('Failed to load JS plugins', e)
|
||||
} finally {
|
||||
jsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadClients = async () => {
|
||||
try {
|
||||
const { data } = await getClients()
|
||||
clients.value = data || []
|
||||
} catch (e) {
|
||||
console.error('Failed to load clients', e)
|
||||
}
|
||||
}
|
||||
|
||||
// JS Plugin Push
|
||||
const showPushModal = ref(false)
|
||||
const selectedJSPlugin = ref<JSPlugin | null>(null)
|
||||
const pushClientId = ref('')
|
||||
const pushRemotePort = ref<number | null>(8080)
|
||||
const pushing = ref(false)
|
||||
|
||||
const openPushModal = (plugin: JSPlugin) => {
|
||||
selectedJSPlugin.value = plugin
|
||||
pushClientId.value = ''
|
||||
pushRemotePort.value = 8080
|
||||
showPushModal.value = true
|
||||
}
|
||||
|
||||
const handlePushJSPlugin = async () => {
|
||||
if (!selectedJSPlugin.value || !pushClientId.value) {
|
||||
message.warning('请选择要推送到的客户端')
|
||||
return
|
||||
}
|
||||
pushing.value = true
|
||||
try {
|
||||
await pushJSPluginToClient(selectedJSPlugin.value.name, pushClientId.value, pushRemotePort.value || 0)
|
||||
message.success(`已推送 ${selectedJSPlugin.value.name}`)
|
||||
showPushModal.value = false
|
||||
} catch (e: any) {
|
||||
message.error(e.response?.data || '推送失败')
|
||||
} finally {
|
||||
pushing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onlineClients = computed(() => clients.value.filter(c => c.online))
|
||||
|
||||
// JS Plugin Config
|
||||
const showJSConfigModal = ref(false)
|
||||
const currentJSPlugin = ref<JSPlugin | null>(null)
|
||||
const jsConfigItems = ref<Array<{ key: string; value: string }>>([])
|
||||
const jsConfigSaving = ref(false)
|
||||
|
||||
const openJSConfigModal = (plugin: JSPlugin) => {
|
||||
currentJSPlugin.value = plugin
|
||||
jsConfigItems.value = Object.entries(plugin.config || {}).map(([key, value]) => ({ key, value }))
|
||||
if (jsConfigItems.value.length === 0) jsConfigItems.value.push({ key: '', value: '' })
|
||||
showJSConfigModal.value = true
|
||||
}
|
||||
|
||||
const addJSConfigItem = () => jsConfigItems.value.push({ key: '', value: '' })
|
||||
const removeJSConfigItem = (index: number) => jsConfigItems.value.splice(index, 1)
|
||||
|
||||
const saveJSPluginConfig = async () => {
|
||||
if (!currentJSPlugin.value) return
|
||||
jsConfigSaving.value = true
|
||||
try {
|
||||
const config: Record<string, string> = {}
|
||||
for (const item of jsConfigItems.value) {
|
||||
if (item.key.trim()) config[item.key.trim()] = item.value
|
||||
}
|
||||
await updateJSPluginConfig(currentJSPlugin.value.name, config)
|
||||
const plugin = jsPlugins.value.find(p => p.name === currentJSPlugin.value!.name)
|
||||
if (plugin) plugin.config = config
|
||||
message.success('配置已保存')
|
||||
showJSConfigModal.value = false
|
||||
} catch (e: any) {
|
||||
message.error(e.response?.data || '保存失败')
|
||||
} finally {
|
||||
jsConfigSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const toggleJSPlugin = async (plugin: JSPlugin) => {
|
||||
try {
|
||||
await setJSPluginEnabled(plugin.name, !plugin.enabled)
|
||||
plugin.enabled = !plugin.enabled
|
||||
message.success(plugin.enabled ? `已启用 ${plugin.name}` : `已禁用 ${plugin.name}`)
|
||||
} catch (e: any) {
|
||||
message.error(e.response?.data || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadPlugins()
|
||||
loadClients()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="plugins-page">
|
||||
<!-- Particles -->
|
||||
<div class="particles">
|
||||
<div class="particle particle-1"></div>
|
||||
<div class="particle particle-2"></div>
|
||||
<div class="particle particle-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="plugins-content">
|
||||
<!-- Header -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">插件管理</h1>
|
||||
<p class="page-subtitle">管理已安装插件和 JS 插件</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ plugins.length }}</span>
|
||||
<span class="stat-label">总插件数</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ proxyPlugins.length }}</span>
|
||||
<span class="stat-label">协议插件</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ appPlugins.length }}</span>
|
||||
<span class="stat-label">应用插件</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="glass-card">
|
||||
<div class="tabs-header">
|
||||
<button class="tab-btn" :class="{ active: activeTab === 'installed' }" @click="activeTab = 'installed'">
|
||||
已安装插件
|
||||
</button>
|
||||
<button class="tab-btn" :class="{ active: activeTab === 'js' }" @click="activeTab = 'js'; handleTabChange('js')">
|
||||
JS 插件
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Installed Plugins Tab -->
|
||||
<div v-if="activeTab === 'installed'" class="tab-content">
|
||||
<div v-if="loading" class="loading-state">加载中...</div>
|
||||
<div v-else-if="plugins.length === 0" class="empty-state">暂无已安装插件</div>
|
||||
<div v-else class="plugins-grid">
|
||||
<div v-for="plugin in plugins" :key="plugin.name" class="plugin-card">
|
||||
<div class="plugin-header">
|
||||
<div class="plugin-icon">
|
||||
<ExtensionPuzzleOutline class="icon-purple" />
|
||||
</div>
|
||||
<span class="plugin-name">{{ plugin.name }}</span>
|
||||
<GlassSwitch :model-value="plugin.enabled" size="small" @update:model-value="togglePlugin(plugin)" />
|
||||
</div>
|
||||
<div class="plugin-tags">
|
||||
<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' }}
|
||||
</GlassTag>
|
||||
</div>
|
||||
<p class="plugin-desc">{{ plugin.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JS Plugins Tab -->
|
||||
<div v-if="activeTab === 'js'" class="tab-content">
|
||||
<div v-if="jsLoading" class="loading-state">加载中...</div>
|
||||
<div v-else-if="jsPlugins.length === 0" class="empty-state">暂无 JS 插件</div>
|
||||
<div v-else class="plugins-grid wide">
|
||||
<div v-for="plugin in jsPlugins" :key="plugin.name" class="plugin-card js">
|
||||
<div class="plugin-header">
|
||||
<div class="plugin-icon js">
|
||||
<CodeSlashOutline class="icon-yellow" />
|
||||
</div>
|
||||
<span class="plugin-name">{{ plugin.name }}</span>
|
||||
<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">
|
||||
<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>
|
||||
<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 }}
|
||||
</GlassTag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plugin-actions">
|
||||
<button class="glass-btn tiny" @click="openJSConfigModal(plugin)">
|
||||
<SettingsOutline class="btn-icon" />
|
||||
配置
|
||||
</button>
|
||||
<button v-if="onlineClients.length > 0" class="glass-btn primary tiny" @click="openPushModal(plugin)">
|
||||
推送到客户端
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JS Config Modal -->
|
||||
<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>
|
||||
<button class="glass-btn" @click="showJSConfigModal = false">取消</button>
|
||||
<button class="glass-btn primary" :disabled="jsConfigSaving" @click="saveJSPluginConfig">
|
||||
{{ jsConfigSaving ? '保存中...' : '保存' }}
|
||||
</button>
|
||||
</template>
|
||||
</GlassModal>
|
||||
|
||||
<!-- Push Modal -->
|
||||
<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>
|
||||
<button class="glass-btn" @click="showPushModal = false">取消</button>
|
||||
<button class="glass-btn primary" :disabled="!pushClientId || pushing" @click="handlePushJSPlugin">
|
||||
{{ pushing ? '推送中...' : '推送' }}
|
||||
</button>
|
||||
</template>
|
||||
</GlassModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.plugins-page {
|
||||
min-height: calc(100vh - 108px);
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
|
||||
animation: float-particle 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.particle-1 { width: 250px; height: 250px; top: -80px; right: -50px; }
|
||||
.particle-2 { width: 180px; height: 180px; bottom: 10%; left: 5%; animation-delay: -7s; }
|
||||
.particle-3 { width: 120px; height: 120px; top: 50%; right: 15%; animation-delay: -12s; }
|
||||
|
||||
@keyframes float-particle {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
|
||||
50% { transform: translate(-20px, -60px) scale(0.95); opacity: 0.4; }
|
||||
}
|
||||
|
||||
.plugins-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Stats Row */
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* Glass Card */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs-header {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.loading-state, .empty-state {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Plugins Grid */
|
||||
.plugins-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.plugins-grid.wide {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.plugins-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.plugins-grid.wide { grid-template-columns: 1fr; }
|
||||
.stats-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.plugins-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Plugin Card */
|
||||
.plugin-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.plugin-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.plugin-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: rgba(167, 139, 250, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plugin-icon.store {
|
||||
background: rgba(96, 165, 250, 0.2);
|
||||
}
|
||||
|
||||
.plugin-icon.js {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
}
|
||||
|
||||
.plugin-name {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.plugin-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.plugin-desc {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.plugin-author {
|
||||
margin: 8px 0 0 0;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.plugin-config-preview {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.config-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.plugin-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* Glass Button */
|
||||
.glass-btn {
|
||||
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: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.glass-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.glass-btn.primary {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.glass-btn.tiny {
|
||||
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>
|
||||
@@ -19,7 +19,6 @@ const savingConfig = ref(false)
|
||||
|
||||
// 配置表单
|
||||
const configForm = ref({
|
||||
bind_addr: '',
|
||||
heartbeat_sec: 30,
|
||||
heartbeat_timeout: 90,
|
||||
web_username: '',
|
||||
@@ -45,7 +44,6 @@ const loadServerConfig = async () => {
|
||||
serverConfig.value = data
|
||||
// 填充表单
|
||||
configForm.value = {
|
||||
bind_addr: data.server.bind_addr,
|
||||
heartbeat_sec: data.server.heartbeat_sec,
|
||||
heartbeat_timeout: data.server.heartbeat_timeout,
|
||||
web_username: data.web.username,
|
||||
@@ -64,7 +62,6 @@ const handleSaveConfig = async () => {
|
||||
try {
|
||||
const updateReq: any = {
|
||||
server: {
|
||||
bind_addr: configForm.value.bind_addr,
|
||||
heartbeat_sec: configForm.value.heartbeat_sec,
|
||||
heartbeat_timeout: configForm.value.heartbeat_timeout
|
||||
},
|
||||
@@ -158,17 +155,6 @@ onMounted(() => {
|
||||
<div class="card-body">
|
||||
<div v-if="configLoading" class="loading-state">加载中...</div>
|
||||
<div v-else-if="serverConfig" class="config-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label">服务器地址</label>
|
||||
<input
|
||||
v-model="configForm.bind_addr"
|
||||
type="text"
|
||||
class="glass-input"
|
||||
placeholder="0.0.0.0"
|
||||
/>
|
||||
<span class="form-hint">服务器监听地址，修改后需重启生效</span>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">心跳间隔 (秒)</label>
|
||||
@@ -223,9 +209,9 @@ onMounted(() => {
|
||||
v-model="configForm.plugin_store_url"
|
||||
type="text"
|
||||
class="glass-input"
|
||||
placeholder="https://example.com/plugins"
|
||||
placeholder="https://git.92coco.cn/flik/GoTunnel-Plugins/raw/branch/main/store.json"
|
||||
/>
|
||||
<span class="form-hint">插件商店的 API 地址</span>
|
||||
<span class="form-hint">插件商店的 API 地址，留空使用默认地址</span>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
@@ -249,32 +235,15 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.settings-page {
|
||||
min-height: calc(100vh - 108px);
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
background: transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* Hide particles */
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
|
||||
animation: float-particle 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.particle-1 { width: 250px; height: 250px; top: -80px; right: -50px; }
|
||||
.particle-2 { width: 180px; height: 180px; bottom: 10%; left: 5%; animation-delay: -7s; }
|
||||
.particle-3 { width: 120px; height: 120px; top: 50%; right: 15%; animation-delay: -12s; }
|
||||
|
||||
@keyframes float-particle {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
|
||||
50% { transform: translate(-20px, -60px) scale(0.95); opacity: 0.4; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
@@ -291,29 +260,27 @@ onMounted(() => {
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Glass Card */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: var(--color-bg-tertiary);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -323,7 +290,7 @@ onMounted(() => {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
@@ -349,12 +316,12 @@ onMounted(() => {
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -366,7 +333,7 @@ onMounted(() => {
|
||||
.loading-state, .empty-state {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Update Alert */
|
||||
@@ -378,20 +345,20 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.update-alert.success {
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
border: 1px solid rgba(52, 211, 153, 0.3);
|
||||
color: #34d399;
|
||||
background: rgba(0, 186, 124, 0.15);
|
||||
border: 1px solid rgba(0, 186, 124, 0.3);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.update-alert.info {
|
||||
background: rgba(96, 165, 250, 0.15);
|
||||
border: 1px solid rgba(96, 165, 250, 0.3);
|
||||
color: #60a5fa;
|
||||
background: rgba(29, 155, 240, 0.15);
|
||||
border: 1px solid rgba(29, 155, 240, 0.3);
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
/* Download Info */
|
||||
.download-info {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@@ -404,7 +371,7 @@ onMounted(() => {
|
||||
.note-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
@@ -412,8 +379,8 @@ onMounted(() => {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-bg-elevated);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
max-height: 150px;
|
||||
@@ -422,21 +389,21 @@ onMounted(() => {
|
||||
|
||||
/* Glass Button */
|
||||
.glass-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.glass-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.glass-btn:disabled {
|
||||
@@ -450,15 +417,19 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.glass-btn.primary {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
background: var(--color-accent);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.glass-btn.primary:hover:not(:disabled) {
|
||||
background: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
/* Icon styles */
|
||||
.header-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
@@ -481,13 +452,13 @@ onMounted(() => {
|
||||
|
||||
.form-label {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
@@ -504,7 +475,7 @@ onMounted(() => {
|
||||
|
||||
.form-divider {
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--color-border-light);
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
@@ -514,22 +485,21 @@ onMounted(() => {
|
||||
|
||||
/* Glass Input */
|
||||
.glass-input {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.glass-input:focus {
|
||||
border-color: rgba(96, 165, 250, 0.5);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.glass-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user