forked from Mxmilu666/frp
web/frps: redesign frps dashboard with sidebar nav, responsive layout, and shared component workspace (#5246)
This commit is contained in:
fatedier
GitHub
@@ -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