mirror of
https://github.com/fatedier/frp.git
synced 2026-03-28 12:49:15 +08:00
web/frps: redesign frps dashboard with sidebar nav, responsive layout, and shared component workspace (#5246)
This commit is contained in:
fatedier
GitHub
@@ -2,135 +2,195 @@
|
||||
<div id="app">
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<div class="header-top">
|
||||
<div class="brand-section">
|
||||
<div class="logo-wrapper">
|
||||
<LogoIcon class="logo-icon" />
|
||||
</div>
|
||||
<span class="divider">/</span>
|
||||
<span class="brand-name">frp</span>
|
||||
<span class="badge server-badge">Server</span>
|
||||
<span class="badge" v-if="currentRouteName">{{
|
||||
currentRouteName
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="header-controls">
|
||||
<a
|
||||
class="github-link"
|
||||
href="https://github.com/fatedier/frp"
|
||||
target="_blank"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<GitHubIcon class="github-icon" />
|
||||
</a>
|
||||
<el-switch
|
||||
v-model="isDark"
|
||||
inline-prompt
|
||||
:active-icon="Moon"
|
||||
:inactive-icon="Sunny"
|
||||
class="theme-switch"
|
||||
/>
|
||||
<div class="brand-section">
|
||||
<button
|
||||
v-if="isMobile"
|
||||
class="hamburger-btn"
|
||||
@click="toggleSidebar"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span class="hamburger-icon">☰</span>
|
||||
</button>
|
||||
<div class="logo-wrapper">
|
||||
<LogoIcon class="logo-icon" />
|
||||
</div>
|
||||
<span class="divider">/</span>
|
||||
<span class="brand-name">frp</span>
|
||||
<span class="badge server-badge">Server</span>
|
||||
</div>
|
||||
|
||||
<nav class="nav-bar">
|
||||
<router-link to="/" class="nav-link" active-class="active"
|
||||
>Overview</router-link
|
||||
<div class="header-controls">
|
||||
<a
|
||||
class="github-link"
|
||||
href="https://github.com/fatedier/frp"
|
||||
target="_blank"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<router-link to="/clients" class="nav-link" active-class="active"
|
||||
>Clients</router-link
|
||||
>
|
||||
<router-link
|
||||
to="/proxies"
|
||||
class="nav-link"
|
||||
:class="{ active: route.path.startsWith('/proxies') }"
|
||||
>Proxies</router-link
|
||||
>
|
||||
</nav>
|
||||
<GitHubIcon class="github-icon" />
|
||||
</a>
|
||||
<el-switch
|
||||
v-model="isDark"
|
||||
inline-prompt
|
||||
:active-icon="Moon"
|
||||
:inactive-icon="Sunny"
|
||||
class="theme-switch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="content">
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
<div class="layout">
|
||||
<!-- Mobile overlay -->
|
||||
<div
|
||||
v-if="isMobile && sidebarOpen"
|
||||
class="sidebar-overlay"
|
||||
@click="closeSidebar"
|
||||
/>
|
||||
|
||||
<aside
|
||||
class="sidebar"
|
||||
:class="{ 'mobile-open': isMobile && sidebarOpen }"
|
||||
>
|
||||
<nav class="sidebar-nav">
|
||||
<router-link
|
||||
to="/"
|
||||
class="sidebar-link"
|
||||
:class="{ active: route.path === '/' }"
|
||||
@click="closeSidebar"
|
||||
>
|
||||
Overview
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/clients"
|
||||
class="sidebar-link"
|
||||
:class="{ active: route.path.startsWith('/clients') }"
|
||||
@click="closeSidebar"
|
||||
>
|
||||
Clients
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/proxies"
|
||||
class="sidebar-link"
|
||||
:class="{
|
||||
active:
|
||||
route.path.startsWith('/proxies') ||
|
||||
route.path.startsWith('/proxy'),
|
||||
}"
|
||||
@click="closeSidebar"
|
||||
>
|
||||
Proxies
|
||||
</router-link>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main id="content">
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useDark } from '@vueuse/core'
|
||||
import { Moon, Sunny } from '@element-plus/icons-vue'
|
||||
import GitHubIcon from './assets/icons/github.svg?component'
|
||||
import LogoIcon from './assets/icons/logo.svg?component'
|
||||
import { useResponsive } from './composables/useResponsive'
|
||||
|
||||
const route = useRoute()
|
||||
const isDark = useDark()
|
||||
const { isMobile } = useResponsive()
|
||||
|
||||
const currentRouteName = computed(() => {
|
||||
if (route.path === '/') return 'Overview'
|
||||
if (route.path.startsWith('/clients')) return 'Clients'
|
||||
if (route.path.startsWith('/proxies')) return 'Proxies'
|
||||
return ''
|
||||
})
|
||||
const sidebarOpen = ref(false)
|
||||
|
||||
const toggleSidebar = () => {
|
||||
sidebarOpen.value = !sidebarOpen.value
|
||||
}
|
||||
|
||||
const closeSidebar = () => {
|
||||
sidebarOpen.value = false
|
||||
}
|
||||
|
||||
// Auto-close sidebar on route change
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
if (isMobile.value) {
|
||||
closeSidebar()
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--header-height: 112px;
|
||||
--header-bg: rgba(255, 255, 255, 0.8);
|
||||
--header-border: #eaeaea;
|
||||
--text-primary: #000;
|
||||
--text-secondary: #666;
|
||||
--hover-bg: #f5f5f5;
|
||||
--active-link: #000;
|
||||
--header-height: 50px;
|
||||
--sidebar-width: 200px;
|
||||
--header-bg: #ffffff;
|
||||
--header-border: #e4e7ed;
|
||||
--sidebar-bg: #ffffff;
|
||||
--text-primary: #303133;
|
||||
--text-secondary: #606266;
|
||||
--text-muted: #909399;
|
||||
--hover-bg: #efefef;
|
||||
--content-bg: #f9f9f9;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--header-bg: rgba(0, 0, 0, 0.8);
|
||||
--header-border: #333;
|
||||
--text-primary: #fff;
|
||||
--text-secondary: #888;
|
||||
--hover-bg: #1a1a1a;
|
||||
--active-link: #fff;
|
||||
--header-bg: #1e1e2e;
|
||||
--header-border: #3a3d5c;
|
||||
--sidebar-bg: #1e1e2e;
|
||||
--text-primary: #e5e7eb;
|
||||
--text-secondary: #b0b0b0;
|
||||
--text-muted: #888888;
|
||||
--hover-bg: #2a2a3e;
|
||||
--content-bg: #181825;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, sans-serif;
|
||||
ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--el-bg-color-page);
|
||||
background-color: var(--content-bg);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
flex-shrink: 0;
|
||||
background: var(--header-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
height: var(--header-height);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.brand-section {
|
||||
@@ -145,13 +205,13 @@ body {
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
color: var(--header-border);
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
@@ -163,12 +223,12 @@ body {
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
background: var(--hover-bg);
|
||||
padding: 2px 8px;
|
||||
border-radius: 99px;
|
||||
border: 1px solid var(--header-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.badge.server-badge {
|
||||
@@ -189,17 +249,20 @@ html.dark .badge.server-badge {
|
||||
}
|
||||
|
||||
.github-link {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.15s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-primary);
|
||||
transition: background 0.2s;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.github-icon {
|
||||
@@ -207,11 +270,6 @@ html.dark .badge.server-badge {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
background: var(--hover-bg);
|
||||
border-color: var(--header-border);
|
||||
}
|
||||
|
||||
.theme-switch {
|
||||
--el-switch-on-color: #2c2c3a;
|
||||
--el-switch-off-color: #f2f2f2;
|
||||
@@ -226,46 +284,235 @@ html.dark .theme-switch {
|
||||
color: #909399 !important;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
height: 48px;
|
||||
/* Layout */
|
||||
.layout {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
flex-shrink: 0;
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--header-border);
|
||||
padding: 16px 12px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
color: var(--text-secondary);
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.sidebar-link:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.sidebar-link.active {
|
||||
color: var(--text-primary);
|
||||
background: var(--hover-bg);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Hamburger button (mobile only) */
|
||||
.hamburger-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
padding: 8px 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
.hamburger-btn:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
.hamburger-icon {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--active-link);
|
||||
border-bottom-color: var(--active-link);
|
||||
/* Mobile overlay */
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
#content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
padding: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#content > * {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Common page styles */
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary, var(--text-primary));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-muted, var(--text-muted));
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
/* Element Plus global overrides */
|
||||
.el-button {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
--el-switch-on-color: #606266;
|
||||
--el-switch-off-color: #dcdfe6;
|
||||
}
|
||||
|
||||
html.dark .el-switch {
|
||||
--el-switch-on-color: #b0b0b0;
|
||||
--el-switch-off-color: #3a3d5c;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Select overrides */
|
||||
.el-select__wrapper {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 0 0 1px var(--color-border-light, #e4e7ed) inset !important;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.el-select__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px var(--color-border, #dcdfe6) inset !important;
|
||||
}
|
||||
|
||||
.el-select__wrapper.is-focused {
|
||||
box-shadow: 0 0 0 1px var(--color-border, #dcdfe6) inset !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
border-radius: 12px !important;
|
||||
border: 1px solid var(--color-border-light, #e4e7ed) !important;
|
||||
box-shadow:
|
||||
0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
|
||||
padding: 4px !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
border-radius: 6px;
|
||||
margin: 2px 0;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-selected {
|
||||
color: var(--color-text-primary, var(--text-primary));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Input overrides */
|
||||
.el-input__wrapper {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 0 0 1px var(--color-border-light, #e4e7ed) inset !important;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px var(--color-border, #dcdfe6) inset !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px var(--color-border, #dcdfe6) inset !important;
|
||||
}
|
||||
|
||||
/* Card overrides */
|
||||
.el-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-border-light, #e4e7ed);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d1d1d1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 767px) {
|
||||
.header-content {
|
||||
padding: 0 20px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
background: var(--sidebar-bg);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-right: 1px solid var(--header-border);
|
||||
}
|
||||
|
||||
.sidebar.mobile-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +1,153 @@
|
||||
/* Dark mode styles */
|
||||
html.dark {
|
||||
--el-bg-color: #1e1e2e;
|
||||
--el-bg-color-page: #181825;
|
||||
--el-bg-color-overlay: #27293d;
|
||||
--el-fill-color-blank: #1e1e2e;
|
||||
--el-border-color: #3a3d5c;
|
||||
--el-border-color-light: #313348;
|
||||
--el-border-color-lighter: #2a2a3e;
|
||||
--el-text-color-primary: #e5e7eb;
|
||||
--el-text-color-secondary: #888888;
|
||||
--el-text-color-placeholder: #afafaf;
|
||||
background-color: #1e1e2e;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html.dark body {
|
||||
background-color: #1e1e2e;
|
||||
color: #e5e7eb;
|
||||
/* Scrollbar */
|
||||
html.dark ::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
/* Dark mode scrollbar */
|
||||
html.dark ::-webkit-scrollbar-track {
|
||||
background: #27293d;
|
||||
}
|
||||
|
||||
html.dark ::-webkit-scrollbar-thumb {
|
||||
background: #3a3d5c;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
html.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: #4a4d6c;
|
||||
}
|
||||
|
||||
/* Dark mode cards */
|
||||
html.dark .el-card {
|
||||
background-color: #27293d;
|
||||
border-color: #3a3d5c;
|
||||
/* Form */
|
||||
html.dark .el-form-item__label {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* Dark mode inputs */
|
||||
/* Input */
|
||||
html.dark .el-input__wrapper {
|
||||
background-color: #27293d;
|
||||
border-color: #3a3d5c;
|
||||
background: var(--color-bg-input);
|
||||
box-shadow: 0 0 0 1px #3a3d5c inset;
|
||||
}
|
||||
|
||||
html.dark .el-input__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #4a4d6c inset;
|
||||
}
|
||||
|
||||
html.dark .el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px var(--el-color-primary) inset;
|
||||
}
|
||||
|
||||
html.dark .el-input__inner {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* Dark mode table */
|
||||
html.dark .el-input__inner::placeholder {
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
html.dark .el-textarea__inner {
|
||||
background: var(--color-bg-input);
|
||||
box-shadow: 0 0 0 1px #3a3d5c inset;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
html.dark .el-textarea__inner:hover {
|
||||
box-shadow: 0 0 0 1px #4a4d6c inset;
|
||||
}
|
||||
|
||||
html.dark .el-textarea__inner:focus {
|
||||
box-shadow: 0 0 0 1px var(--el-color-primary) inset;
|
||||
}
|
||||
|
||||
/* Select */
|
||||
html.dark .el-select__wrapper {
|
||||
background: var(--color-bg-input);
|
||||
box-shadow: 0 0 0 1px #3a3d5c inset;
|
||||
}
|
||||
|
||||
html.dark .el-select__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #4a4d6c inset;
|
||||
}
|
||||
|
||||
html.dark .el-select__selected-item {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
html.dark .el-select__placeholder {
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
html.dark .el-select-dropdown {
|
||||
background: #27293d;
|
||||
border-color: #3a3d5c;
|
||||
}
|
||||
|
||||
html.dark .el-select-dropdown__item {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
html.dark .el-select-dropdown__item:hover {
|
||||
background: #2a2a3e;
|
||||
}
|
||||
|
||||
html.dark .el-select-dropdown__item.is-selected {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
html.dark .el-select-dropdown__item.is-disabled {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* Tag */
|
||||
html.dark .el-tag--info {
|
||||
background: #27293d;
|
||||
border-color: #3a3d5c;
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
html.dark .el-button--default {
|
||||
background: #27293d;
|
||||
border-color: #3a3d5c;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
html.dark .el-button--default:hover {
|
||||
background: #2a2a3e;
|
||||
border-color: #4a4d6c;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
html.dark .el-card {
|
||||
background: #1e1e2e;
|
||||
border-color: #3a3d5c;
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
html.dark .el-card__header {
|
||||
border-bottom-color: #3a3d5c;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
html.dark .el-table {
|
||||
background-color: #27293d;
|
||||
background-color: #1e1e2e;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
@@ -50,9 +157,56 @@ html.dark .el-table th {
|
||||
}
|
||||
|
||||
html.dark .el-table tr {
|
||||
background-color: #27293d;
|
||||
background-color: #1e1e2e;
|
||||
}
|
||||
|
||||
html.dark .el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #1e1e2e;
|
||||
background-color: #181825;
|
||||
}
|
||||
|
||||
/* Dialog */
|
||||
html.dark .el-dialog {
|
||||
background: #1e1e2e;
|
||||
}
|
||||
|
||||
html.dark .el-dialog__title {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* Message */
|
||||
html.dark .el-message {
|
||||
background: #27293d;
|
||||
border-color: #3a3d5c;
|
||||
}
|
||||
|
||||
html.dark .el-message--success {
|
||||
background: #1e3d2e;
|
||||
border-color: #3d6b4f;
|
||||
}
|
||||
|
||||
html.dark .el-message--warning {
|
||||
background: #3d3020;
|
||||
border-color: #6b5020;
|
||||
}
|
||||
|
||||
html.dark .el-message--error {
|
||||
background: #3d2027;
|
||||
border-color: #5c2d2d;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
html.dark .el-loading-mask {
|
||||
background-color: rgba(30, 30, 46, 0.9);
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
html.dark .el-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
html.dark .el-tooltip__popper {
|
||||
background: #27293d !important;
|
||||
border-color: #3a3d5c !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
109
web/frps/src/assets/css/var.css
Normal file
109
web/frps/src/assets/css/var.css
Normal file
@@ -0,0 +1,109 @@
|
||||
:root {
|
||||
/* Text colors */
|
||||
--color-text-primary: #303133;
|
||||
--color-text-secondary: #606266;
|
||||
--color-text-muted: #909399;
|
||||
--color-text-light: #c0c4cc;
|
||||
--color-text-placeholder: #a8abb2;
|
||||
|
||||
/* Background colors */
|
||||
--color-bg-primary: #ffffff;
|
||||
--color-bg-secondary: #f9f9f9;
|
||||
--color-bg-tertiary: #fafafa;
|
||||
--color-bg-surface: #ffffff;
|
||||
--color-bg-muted: #f4f4f5;
|
||||
--color-bg-input: #ffffff;
|
||||
--color-bg-hover: #efefef;
|
||||
--color-bg-active: #eaeaea;
|
||||
|
||||
/* Border colors */
|
||||
--color-border: #dcdfe6;
|
||||
--color-border-light: #e4e7ed;
|
||||
--color-border-lighter: #ebeef5;
|
||||
--color-border-extra-light: #f2f6fc;
|
||||
|
||||
/* Status colors */
|
||||
--color-primary: #409eff;
|
||||
--color-primary-light: #ecf5ff;
|
||||
--color-success: #67c23a;
|
||||
--color-warning: #e6a23c;
|
||||
--color-danger: #f56c6c;
|
||||
--color-danger-dark: #c45656;
|
||||
--color-danger-light: #fef0f0;
|
||||
--color-info: #909399;
|
||||
|
||||
/* Element Plus mapping */
|
||||
--el-color-primary: var(--color-primary);
|
||||
--el-color-success: var(--color-success);
|
||||
--el-color-warning: var(--color-warning);
|
||||
--el-color-danger: var(--color-danger);
|
||||
--el-color-info: var(--color-info);
|
||||
|
||||
--el-text-color-primary: var(--color-text-primary);
|
||||
--el-text-color-regular: var(--color-text-secondary);
|
||||
--el-text-color-secondary: var(--color-text-muted);
|
||||
--el-text-color-placeholder: var(--color-text-placeholder);
|
||||
|
||||
--el-bg-color: var(--color-bg-primary);
|
||||
--el-bg-color-page: var(--color-bg-secondary);
|
||||
--el-bg-color-overlay: var(--color-bg-primary);
|
||||
|
||||
--el-border-color: var(--color-border);
|
||||
--el-border-color-light: var(--color-border-light);
|
||||
--el-border-color-lighter: var(--color-border-lighter);
|
||||
--el-border-color-extra-light: var(--color-border-extra-light);
|
||||
|
||||
--el-fill-color-blank: var(--color-bg-primary);
|
||||
--el-fill-color-light: var(--color-bg-tertiary);
|
||||
--el-fill-color: var(--color-bg-tertiary);
|
||||
--el-fill-color-dark: var(--color-bg-hover);
|
||||
--el-fill-color-darker: var(--color-bg-active);
|
||||
|
||||
/* Input */
|
||||
--el-input-bg-color: var(--color-bg-input);
|
||||
--el-input-border-color: var(--color-border);
|
||||
--el-input-hover-border-color: var(--color-border-light);
|
||||
|
||||
/* Dialog */
|
||||
--el-dialog-bg-color: var(--color-bg-primary);
|
||||
--el-overlay-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
/* Text colors */
|
||||
--color-text-primary: #e5e7eb;
|
||||
--color-text-secondary: #b0b0b0;
|
||||
--color-text-muted: #888888;
|
||||
--color-text-light: #666666;
|
||||
--color-text-placeholder: #afafaf;
|
||||
|
||||
/* Background colors */
|
||||
--color-bg-primary: #1e1e2e;
|
||||
--color-bg-secondary: #181825;
|
||||
--color-bg-tertiary: #27293d;
|
||||
--color-bg-surface: #27293d;
|
||||
--color-bg-muted: #27293d;
|
||||
--color-bg-input: #27293d;
|
||||
--color-bg-hover: #2a2a3e;
|
||||
--color-bg-active: #353550;
|
||||
|
||||
/* Border colors */
|
||||
--color-border: #3a3d5c;
|
||||
--color-border-light: #313348;
|
||||
--color-border-lighter: #2a2a3e;
|
||||
--color-border-extra-light: #222233;
|
||||
|
||||
/* Status colors */
|
||||
--color-primary: #409eff;
|
||||
--color-danger: #f87171;
|
||||
--color-danger-dark: #f87171;
|
||||
--color-danger-light: #3d2027;
|
||||
--color-info: #888888;
|
||||
|
||||
/* Dark overrides */
|
||||
--el-text-color-regular: var(--color-text-primary);
|
||||
--el-overlay-color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
background-color: #181825;
|
||||
color-scheme: dark;
|
||||
}
|
||||
8
web/frps/src/composables/useResponsive.ts
Normal file
8
web/frps/src/composables/useResponsive.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { useBreakpoints } from '@vueuse/core'
|
||||
|
||||
const breakpoints = useBreakpoints({ mobile: 0, desktop: 768 })
|
||||
|
||||
export function useResponsive() {
|
||||
const isMobile = breakpoints.smaller('desktop') // < 768px
|
||||
return { isMobile }
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import './assets/css/custom.css'
|
||||
import './assets/css/var.css'
|
||||
import './assets/css/dark.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
@@ -8,23 +8,13 @@
|
||||
</div>
|
||||
|
||||
<div class="actions-section">
|
||||
<el-button :icon="Refresh" class="action-btn" @click="fetchData"
|
||||
>Refresh</el-button
|
||||
>
|
||||
<ActionButton variant="outline" size="small" @click="fetchData">
|
||||
Refresh
|
||||
</ActionButton>
|
||||
|
||||
<el-popconfirm
|
||||
title="Clear all offline proxies?"
|
||||
width="220"
|
||||
confirm-button-text="Clear"
|
||||
cancel-button-text="Cancel"
|
||||
@confirm="clearOfflineProxies"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button :icon="Delete" class="action-btn" type="danger" plain
|
||||
>Clear Offline</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<ActionButton variant="outline" size="small" danger @click="showClearDialog = true">
|
||||
Clear Offline
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,28 +28,35 @@
|
||||
class="main-search"
|
||||
/>
|
||||
|
||||
<el-select
|
||||
<PopoverMenu
|
||||
:model-value="selectedClientKey"
|
||||
placeholder="All Clients"
|
||||
clearable
|
||||
:width="220"
|
||||
placement="bottom-end"
|
||||
selectable
|
||||
filterable
|
||||
class="client-select"
|
||||
@change="onClientFilterChange"
|
||||
filter-placeholder="Search clients..."
|
||||
:display-value="selectedClientLabel"
|
||||
clearable
|
||||
class="client-filter"
|
||||
@update:model-value="onClientFilterChange($event as string)"
|
||||
>
|
||||
<el-option label="All Clients" value="" />
|
||||
<el-option
|
||||
v-if="clientIDFilter && !selectedClientInList"
|
||||
:label="`${userFilter ? userFilter + '.' : ''}${clientIDFilter} (not found)`"
|
||||
:value="selectedClientKey"
|
||||
style="color: var(--el-color-warning); font-style: italic"
|
||||
/>
|
||||
<el-option
|
||||
v-for="client in clientOptions"
|
||||
:key="client.key"
|
||||
:label="client.label"
|
||||
:value="client.key"
|
||||
/>
|
||||
</el-select>
|
||||
<template #default="{ filterText }">
|
||||
<PopoverMenuItem value="">All Clients</PopoverMenuItem>
|
||||
<PopoverMenuItem
|
||||
v-if="clientIDFilter && !selectedClientInList"
|
||||
:value="selectedClientKey"
|
||||
>
|
||||
{{ userFilter ? userFilter + '.' : '' }}{{ clientIDFilter }} (not found)
|
||||
</PopoverMenuItem>
|
||||
<PopoverMenuItem
|
||||
v-for="client in filteredClientOptions(filterText)"
|
||||
:key="client.key"
|
||||
:value="client.key"
|
||||
>
|
||||
{{ client.label }}
|
||||
</PopoverMenuItem>
|
||||
</template>
|
||||
</PopoverMenu>
|
||||
</div>
|
||||
|
||||
<div class="type-tabs">
|
||||
@@ -88,6 +85,15 @@
|
||||
<el-empty description="No proxies found" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
v-model="showClearDialog"
|
||||
title="Clear Offline"
|
||||
message="Are you sure you want to clear all offline proxies?"
|
||||
confirm-text="Clear"
|
||||
danger
|
||||
@confirm="handleClearConfirm"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -95,7 +101,9 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Search, Refresh, Delete } from '@element-plus/icons-vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import ActionButton from '@shared/components/ActionButton.vue'
|
||||
import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
|
||||
import {
|
||||
BaseProxy,
|
||||
TCPProxy,
|
||||
@@ -107,6 +115,8 @@ import {
|
||||
SUDPProxy,
|
||||
} from '../utils/proxy'
|
||||
import ProxyCard from '../components/ProxyCard.vue'
|
||||
import PopoverMenu from '@shared/components/PopoverMenu.vue'
|
||||
import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'
|
||||
import {
|
||||
getProxiesByType,
|
||||
clearOfflineProxies as apiClearOfflineProxies,
|
||||
@@ -133,6 +143,7 @@ const proxies = ref<BaseProxy[]>([])
|
||||
const clients = ref<Client[]>([])
|
||||
const loading = ref(false)
|
||||
const searchText = ref('')
|
||||
const showClearDialog = ref(false)
|
||||
const clientIDFilter = ref((route.query.clientID as string) || '')
|
||||
const userFilter = ref((route.query.user as string) || '')
|
||||
|
||||
@@ -157,6 +168,20 @@ const selectedClientKey = computed(() => {
|
||||
return client?.key || `${userFilter.value}:${clientIDFilter.value}`
|
||||
})
|
||||
|
||||
const selectedClientLabel = computed(() => {
|
||||
if (!clientIDFilter.value) return 'All Clients'
|
||||
const client = clientOptions.value.find(
|
||||
(c) => c.clientID === clientIDFilter.value && c.user === userFilter.value,
|
||||
)
|
||||
return client?.label || `${userFilter.value ? userFilter.value + '.' : ''}${clientIDFilter.value}`
|
||||
})
|
||||
|
||||
const filteredClientOptions = (filterText: string) => {
|
||||
if (!filterText) return clientOptions.value
|
||||
const search = filterText.toLowerCase()
|
||||
return clientOptions.value.filter((c) => c.label.toLowerCase().includes(search))
|
||||
}
|
||||
|
||||
// Check if the filtered client exists in the client list
|
||||
const selectedClientInList = computed(() => {
|
||||
if (!clientIDFilter.value) return true
|
||||
@@ -275,6 +300,11 @@ const fetchData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleClearConfirm = async () => {
|
||||
showClearDialog.value = false
|
||||
await clearOfflineProxies()
|
||||
}
|
||||
|
||||
const clearOfflineProxies = async () => {
|
||||
try {
|
||||
await apiClearOfflineProxies()
|
||||
@@ -357,12 +387,6 @@ fetchClients()
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
height: 36px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
display: flex;
|
||||
@@ -382,37 +406,16 @@ fetchClients()
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.main-search,
|
||||
.client-select {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.main-search :deep(.el-input__wrapper),
|
||||
.client-select :deep(.el-input__wrapper) {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
border: 1px solid var(--el-border-color);
|
||||
.client-filter :deep(.el-input__wrapper) {
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.main-search :deep(.el-input__wrapper) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.client-select {
|
||||
.client-filter {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.client-select :deep(.el-select__wrapper) {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
padding: 0 12px;
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.type-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@@ -462,7 +465,7 @@ fetchClients()
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.client-select {
|
||||
.client-filter {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,98 +51,41 @@
|
||||
<router-link
|
||||
v-if="proxy.clientID"
|
||||
:to="clientLink"
|
||||
class="client-link"
|
||||
class="meta-link"
|
||||
>
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<span
|
||||
>Client:
|
||||
{{
|
||||
proxy.user
|
||||
? `${proxy.user}.${proxy.clientID}`
|
||||
: proxy.clientID
|
||||
}}</span
|
||||
>
|
||||
<span>{{
|
||||
proxy.user
|
||||
? `${proxy.user}.${proxy.clientID}`
|
||||
: proxy.clientID
|
||||
}}</span>
|
||||
</router-link>
|
||||
<span v-if="proxy.lastStartTime" class="meta-text">
|
||||
<span class="meta-sep">·</span>
|
||||
Last Started {{ proxy.lastStartTime }}
|
||||
</span>
|
||||
<span v-if="proxy.lastCloseTime" class="meta-text">
|
||||
<span class="meta-sep">·</span>
|
||||
Last Closed {{ proxy.lastCloseTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="stats-grid">
|
||||
<div v-if="proxy.port" class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">Port</span>
|
||||
<div class="stat-icon port">
|
||||
<el-icon><Connection /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-value">{{ proxy.port }}</div>
|
||||
<!-- Stats Bar -->
|
||||
<div class="stats-bar">
|
||||
<div v-if="proxy.port" class="stats-item">
|
||||
<span class="stats-label">Port</span>
|
||||
<span class="stats-value">{{ proxy.port }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">Connections</span>
|
||||
<div class="stat-icon connections">
|
||||
<el-icon><DataLine /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-value">{{ proxy.conns }}</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">Connections</span>
|
||||
<span class="stats-value">{{ proxy.conns }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">Traffic In</span>
|
||||
<div class="stat-icon traffic-in">
|
||||
<el-icon><Bottom /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
<span class="value-number">{{
|
||||
formatTrafficValue(proxy.trafficIn)
|
||||
}}</span>
|
||||
<span class="value-unit">{{
|
||||
formatTrafficUnit(proxy.trafficIn)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">Traffic Out</span>
|
||||
<div class="stat-icon traffic-out">
|
||||
<el-icon><Top /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
<span class="value-number">{{
|
||||
formatTrafficValue(proxy.trafficOut)
|
||||
}}</span>
|
||||
<span class="value-unit">{{
|
||||
formatTrafficUnit(proxy.trafficOut)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Timeline -->
|
||||
<div class="timeline-card">
|
||||
<div class="timeline-header">
|
||||
<el-icon><DataLine /></el-icon>
|
||||
<h2>Status Timeline</h2>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<div class="timeline-grid">
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-label">Last Start Time</span>
|
||||
<span class="timeline-value">{{
|
||||
proxy.lastStartTime || '-'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-label">Last Close Time</span>
|
||||
<span class="timeline-value">{{
|
||||
proxy.lastCloseTime || '-'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">Traffic</span>
|
||||
<span class="stats-value">↓ {{ formatTrafficValue(proxy.trafficIn) }} <small>{{ formatTrafficUnit(proxy.trafficIn) }}</small> / ↑ {{ formatTrafficValue(proxy.trafficOut) }} <small>{{ formatTrafficUnit(proxy.trafficOut) }}</small></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -288,9 +231,6 @@ import {
|
||||
ArrowLeft,
|
||||
Monitor,
|
||||
Connection,
|
||||
DataLine,
|
||||
Bottom,
|
||||
Top,
|
||||
Link,
|
||||
Lock,
|
||||
Promotion,
|
||||
@@ -593,177 +533,72 @@ html.dark .status-badge.online {
|
||||
.header-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.client-link {
|
||||
.meta-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
gap: 4px;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.client-link:hover {
|
||||
.meta-link:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
.meta-text {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
.meta-sep {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* Stats Bar */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--header-border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-icon.port {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.stat-icon.connections {
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
.stat-icon.traffic-in {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.stat-icon.traffic-out {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
html.dark .stat-icon.port {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
}
|
||||
|
||||
html.dark .stat-icon.connections {
|
||||
background: rgba(168, 85, 247, 0.15);
|
||||
}
|
||||
|
||||
html.dark .stat-icon.traffic-in {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
html.dark .stat-icon.traffic-out {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-value:not(:has(.value-number)) {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.value-unit {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Timeline Card */
|
||||
.timeline-card {
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--header-border);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.timeline-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.timeline-header h2 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.timeline-body {
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.timeline-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 10px;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
.stats-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 4px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.timeline-label {
|
||||
font-size: 13px;
|
||||
.stats-item + .stats-item {
|
||||
border-left: 1px solid var(--header-border);
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.timeline-value {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
.stats-value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stats-value small {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
|
||||
/* Card Base */
|
||||
.traffic-card {
|
||||
background: var(--el-bg-color);
|
||||
@@ -956,16 +791,22 @@ html.dark .config-item-icon.route {
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.config-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
flex: 1 1 40%;
|
||||
}
|
||||
|
||||
.stats-item:nth-child(n+3) {
|
||||
border-top: 1px solid var(--header-border);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@@ -974,12 +815,5 @@ html.dark .config-item-icon.route {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.timeline-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user