feat(theme): 添加主题切换功能并优化UI样式
Some checks failed
Build Multi-Platform Binaries / build-frontend (push) Failing after 16s
Build Multi-Platform Binaries / build-binaries (amd64, darwin, server, false) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (amd64, linux, client, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (amd64, linux, server, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (amd64, windows, client, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (amd64, windows, server, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, client, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, server, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm64, darwin, server, false) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm64, linux, client, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm64, linux, server, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm64, windows, server, false) (push) Has been skipped
Some checks failed
Build Multi-Platform Binaries / build-frontend (push) Failing after 16s
Build Multi-Platform Binaries / build-binaries (amd64, darwin, server, false) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (amd64, linux, client, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (amd64, linux, server, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (amd64, windows, client, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (amd64, windows, server, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, client, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, server, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm64, darwin, server, false) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm64, linux, client, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm64, linux, server, true) (push) Has been skipped
Build Multi-Platform Binaries / build-binaries (arm64, windows, server, false) (push) Has been skipped
- 集成主题切换功能，支持浅色、深色和自动模式 - 添加SunnyOutline、MoonOutline、ContrastOutline图标用于主题选择 - 创建主题下拉菜单组件，允许用户切换不同主题模式 - 重构CSS样式使用CSS变量替代硬编码颜色值 - 优化导航栏、用户菜单、客户端卡片等组件的视觉效果 - 调整头部高度从60px到56px，修改品牌文字样式 - 更新按钮、下拉菜单、模态框等交互元素的样式 - 在客户端视图中添加心跳指示器显示连接状态 - 实现客户端页面数据自动轮询刷新功能 - 优化版本号显示逻辑，确保始终以v开头显示 - 修复更新检查按钮只在有可用更新时才显示的问题
This commit is contained in:
Flik
@@ -1,5 +1,5 @@
|
||||
<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,
|
||||
@@ -463,9 +463,22 @@ const handleRestartClient = () => {
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
const pollTimer = ref<number | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
loadRuleSchemas()
|
||||
loadClient()
|
||||
// 启动自动轮询，每 5 秒刷新一次
|
||||
pollTimer.value = window.setInterval(() => {
|
||||
loadClient()
|
||||
}, 5000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollTimer.value) {
|
||||
clearInterval(pollTimer.value)
|
||||
pollTimer.value = null
|
||||
}
|
||||
})
|
||||
|
||||
// Log Viewer
|
||||
@@ -552,6 +565,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">
|
||||
@@ -569,6 +586,9 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
<span v-if="clientUpdate?.available" class="update-badge" @click="handleApplyClientUpdate">
|
||||
可更新
|
||||
</span>
|
||||
<span v-else-if="clientUpdate && !clientUpdate.available" class="latest-badge">
|
||||
最新版本
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
@@ -644,32 +664,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 +879,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: var(--color-bg-primary);
|
||||
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 +914,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 +942,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 +958,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 +981,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 +1024,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 +1042,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 +1092,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 +1117,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 +1152,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 +1176,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
|
||||
.update-available p {
|
||||
margin: 0 0 8px 0;
|
||||
color: #34d399;
|
||||
color: var(--color-success);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -1161,7 +1184,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 +1200,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 +1239,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 +1262,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 +1278,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 +1292,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 +1303,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 +1318,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 +1348,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 +1380,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 +1407,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 +1426,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 +1440,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 +1459,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 +1485,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
|
||||
.plugin-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #a78bfa;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
@@ -1482,20 +1504,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-bg-elevated);
|
||||
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 +1526,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>
|
||||
@@ -103,32 +107,15 @@ onMounted(loadClients)
|
||||
<style scoped>
|
||||
.clients-page {
|
||||
min-height: calc(100vh - 108px);
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #581c87 100%);
|
||||
background: var(--color-bg-primary);
|
||||
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;
|
||||
}
|
||||
|
||||
.clients-content {
|
||||
@@ -142,11 +129,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,10 +147,9 @@ onMounted(loadClients)
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255,255,255,0.08);
|
||||
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);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -172,26 +158,25 @@ onMounted(loadClients)
|
||||
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);
|
||||
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);
|
||||
}
|
||||
|
||||
.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 +185,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 +216,16 @@ onMounted(loadClients)
|
||||
}
|
||||
|
||||
.client-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);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
.client-card:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
transform: translateY(-2px);
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.client-header {
|
||||
@@ -255,23 +239,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 8px rgba(0, 186, 124, 0.6);
|
||||
}
|
||||
|
||||
.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,7 +265,7 @@ 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;
|
||||
}
|
||||
|
||||
@@ -293,25 +277,61 @@ onMounted(loadClients)
|
||||
font-weight: 500;
|
||||
}
|
||||
.client-tag.online {
|
||||
background: rgba(52,211,153,0.2);
|
||||
color: #34d399;
|
||||
background: rgba(0, 186, 124, 0.15);
|
||||
color: var(--color-success);
|
||||
}
|
||||
.client-tag.offline {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: rgba(255,255,255,0.5);
|
||||
background: var(--color-bg-tertiary);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.glass-btn:hover { background: rgba(255,255,255,0.2); }
|
||||
.glass-btn:hover { background: var(--color-border); }
|
||||
.glass-btn.small { padding: 6px 12px; font-size: 12px; }
|
||||
|
||||
/* Heartbeat Indicator */
|
||||
.heartbeat-indicator {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -138,8 +138,10 @@ onMounted(() => {
|
||||
</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-value-row">
|
||||
<span class="stat-value">{{ formatted24hOutbound.value }}</span>
|
||||
<span class="stat-unit-inline">{{ formatted24hOutbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -152,8 +154,10 @@ onMounted(() => {
|
||||
</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 class="stat-value-row">
|
||||
<span class="stat-value">{{ formatted24hInbound.value }}</span>
|
||||
<span class="stat-unit-inline">{{ formatted24hInbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -166,8 +170,10 @@ onMounted(() => {
|
||||
</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 class="stat-value-row">
|
||||
<span class="stat-value">{{ formattedTotalOutbound.value }}</span>
|
||||
<span class="stat-unit-inline">{{ formattedTotalOutbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -180,8 +186,10 @@ onMounted(() => {
|
||||
</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-value-row">
|
||||
<span class="stat-value">{{ formattedTotalInbound.value }}</span>
|
||||
<span class="stat-unit-inline">{{ formattedTotalInbound.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -250,75 +258,18 @@ 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%);
|
||||
background: var(--color-bg-primary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* Floating particles */
|
||||
/* Hide particles */
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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: 300px;
|
||||
height: 300px;
|
||||
top: -100px;
|
||||
right: -50px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.particle-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: 10%;
|
||||
left: 5%;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.particle-3 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 40%;
|
||||
right: 20%;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
.particle-4 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 20%;
|
||||
left: 30%;
|
||||
animation-delay: -15s;
|
||||
}
|
||||
|
||||
.particle-5 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
bottom: 30%;
|
||||
right: 10%;
|
||||
animation-delay: -8s;
|
||||
}
|
||||
|
||||
@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; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
@@ -355,31 +306,26 @@ onMounted(() => {
|
||||
|
||||
/* 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(--color-bg-tertiary);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
transition: all 0.25s ease;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.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(--color-bg-elevated);
|
||||
}
|
||||
|
||||
/* Stat icon */
|
||||
.stat-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -387,33 +333,27 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.stat-icon.outbound {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
|
||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.stat-icon.inbound {
|
||||
background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
|
||||
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
|
||||
background: #8b5cf6;
|
||||
}
|
||||
|
||||
.stat-icon.clients {
|
||||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||||
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.stat-icon.rules {
|
||||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||||
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
|
||||
background: var(--color-warning);
|
||||
}
|
||||
|
||||
.stat-icon.total-out {
|
||||
background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
|
||||
box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4);
|
||||
background: #0284c7;
|
||||
}
|
||||
|
||||
.stat-icon.total-in {
|
||||
background: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);
|
||||
box-shadow: 0 4px 16px rgba(147, 51, 234, 0.4);
|
||||
background: #9333ea;
|
||||
}
|
||||
|
||||
.stat-icon svg {
|
||||
@@ -426,30 +366,42 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-height: 48px;
|
||||
min-height: 44px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
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-size: 26px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-value-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-unit-inline {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Client count special styling */
|
||||
.client-count {
|
||||
display: flex;
|
||||
@@ -458,17 +410,17 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.client-count .stat-value.online {
|
||||
color: #34d399;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.client-count .stat-value.total {
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.stat-separator {
|
||||
font-size: 20px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Stat trend indicator */
|
||||
@@ -482,8 +434,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.stat-trend.up {
|
||||
background: rgba(52, 211, 153, 0.2);
|
||||
color: #34d399;
|
||||
background: rgba(0, 186, 124, 0.15);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
/* Online indicator with pulse */
|
||||
@@ -495,20 +447,20 @@ 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;
|
||||
}
|
||||
|
||||
@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 rgba(0, 186, 124, 0.5); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(0, 186, 124, 0); }
|
||||
}
|
||||
|
||||
/* Chart Section */
|
||||
@@ -524,9 +476,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -540,7 +492,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 +502,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 +551,32 @@ 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 {
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -101,77 +101,26 @@ 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(--color-bg-primary);
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Particles */
|
||||
/* 移除浮动粒子动画 */
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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: 300px;
|
||||
height: 300px;
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.particle-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: -50px;
|
||||
right: -50px;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.particle-3 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 50%;
|
||||
right: 10%;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
.particle-4 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: 20%;
|
||||
left: 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; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
max-width: 380px;
|
||||
background: var(--color-bg-tertiary);
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
||||
padding: 40px 32px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -183,32 +132,31 @@ const handleLogin = async () => {
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto 16px;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
border-radius: 16px;
|
||||
background: var(--color-accent);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 16px rgba(96, 165, 250, 0.4);
|
||||
}
|
||||
|
||||
.logo-icon svg {
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -229,31 +177,27 @@ 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);
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
color: white;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.glass-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.glass-input:disabled {
|
||||
@@ -266,11 +210,11 @@ const handleLogin = async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 12px;
|
||||
color: #fca5a5;
|
||||
padding: 12px 14px;
|
||||
background: rgba(244, 33, 46, 0.1);
|
||||
border: 1px solid rgba(244, 33, 46, 0.3);
|
||||
border-radius: 8px;
|
||||
color: var(--color-error);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -280,33 +224,27 @@ const handleLogin = async () => {
|
||||
|
||||
/* Button */
|
||||
.glass-button {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
background: var(--color-accent);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 14px 24px;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 16px rgba(96, 165, 250, 0.4);
|
||||
}
|
||||
|
||||
.glass-button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px rgba(96, 165, 250, 0.5);
|
||||
}
|
||||
|
||||
.glass-button:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
background: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.glass-button:disabled {
|
||||
opacity: 0.7;
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -329,8 +267,8 @@ const handleLogin = async () => {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
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: var(--color-bg-primary);
|
||||
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