add persistent proxy/visitor store with CRUD API and web UI (#5188)

web/frps/src/components/ClientCard.vue

@@ -13,6 +13,9 @@
         <span v-if="client.hostname" class="hostname-badge">{{
           client.hostname
         }}</span>
+        <el-tag v-if="client.version" size="small" type="success"
+          >v{{ client.version }}</el-tag
+        >
       </div>
 
       <div class="card-meta">

web/frps/src/components/Traffic.vue

@@ -86,7 +86,7 @@ const processData = (trafficIn: number[], trafficOut: number[]) => {
 
   // Calculate dates (last 7 days ending today)
   const dates: string[] = []
-  let d = new Date()
+  const d = new Date()
   d.setDate(d.getDate() - 6)
 
   for (let i = 0; i < 7; i++) {

web/frps/src/types/client.ts

@@ -3,6 +3,7 @@ export interface ClientInfoData {
   user: string
   clientID: string
   runID: string
+  version?: string
   hostname: string
   clientIP?: string
   metas?: Record<string, string>

web/frps/src/types/proxy.ts

@@ -3,7 +3,6 @@ export interface ProxyStatsInfo {
   conf: any
   user: string
   clientID: string
-  clientVersion: string
   todayTrafficIn: number
   todayTrafficOut: number
   curConns: number

web/frps/src/utils/client.ts

@@ -6,6 +6,7 @@ export class Client {
   user: string
   clientID: string
   runID: string
+  version: string
   hostname: string
   ip: string
   metas: Map<string, string>
@@ -19,6 +20,7 @@ export class Client {
     this.user = data.user
     this.clientID = data.clientID
     this.runID = data.runID
+    this.version = data.version || ''
     this.hostname = data.hostname
     this.ip = data.clientIP || ''
     this.metas = new Map<string, string>()

web/frps/src/utils/proxy.ts

@@ -12,7 +12,6 @@ class BaseProxy {
   status: string
   user: string
   clientID: string
-  clientVersion: string
   addr: string
   port: number
 
@@ -49,7 +48,6 @@ class BaseProxy {
     this.status = proxyStats.status
     this.user = proxyStats.user || ''
     this.clientID = proxyStats.clientID || ''
-    this.clientVersion = proxyStats.clientVersion
 
     this.addr = ''
     this.port = 0

web/frps/src/views/ClientDetail.vue

@@ -22,7 +22,12 @@
                 {{ client.displayName.charAt(0).toUpperCase() }}
               </div>
               <div class="client-info">
-                <h1 class="client-name">{{ client.displayName }}</h1>
+                <div class="client-name-row">
+                  <h1 class="client-name">{{ client.displayName }}</h1>
+                  <el-tag v-if="client.version" size="small" type="success"
+                    >v{{ client.version }}</el-tag
+                  >
+                </div>
                 <div class="client-meta">
                   <span v-if="client.ip" class="meta-item">{{
                     client.ip
@@ -354,11 +359,18 @@ onMounted(() => {
   min-width: 0;
 }
 
+.client-name-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
 .client-name {
   font-size: 20px;
   font-weight: 500;
   color: var(--text-primary);
-  margin: 0 0 4px 0;
+  margin: 0;
   line-height: 1.3;
 }
 

web/frps/src/views/ServerOverview.vue

@@ -230,7 +230,7 @@ const fetchData = async () => {
         data.value.proxyCounts += count || 0
       })
     }
-  } catch (err) {
+  } catch {
     ElMessage({
       showClose: true,
       message: 'Get server info from frps failed!',