web/frps: redesign frps dashboard with sidebar nav, responsive layout, and shared component workspace (#5246)

.gitignore

@@ -25,6 +25,8 @@ dist/
 client.crt
 client.key
 
+node_modules/
+
 # Cache
 *.swp
 

web/frpc/Makefile

@@ -1,7 +1,7 @@
 .PHONY: dist install build preview lint
 
 install:
-	@npm install
+	@cd .. && npm install
 
 build: install
 	@npm run build

web/frpc/components.d.ts

@@ -7,11 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ActionButton: typeof import('./src/components/ActionButton.vue')['default']
-    BaseDialog: typeof import('./src/components/BaseDialog.vue')['default']
     ConfigField: typeof import('./src/components/ConfigField.vue')['default']
     ConfigSection: typeof import('./src/components/ConfigSection.vue')['default']
-    ConfirmDialog: typeof import('./src/components/ConfirmDialog.vue')['default']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
@@ -21,10 +18,7 @@ declare module 'vue' {
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    FilterDropdown: typeof import('./src/components/FilterDropdown.vue')['default']
     KeyValueEditor: typeof import('./src/components/KeyValueEditor.vue')['default']
-    PopoverMenu: typeof import('./src/components/PopoverMenu.vue')['default']
-    PopoverMenuItem: typeof import('./src/components/PopoverMenuItem.vue')['default']
     ProxyAuthSection: typeof import('./src/components/proxy-form/ProxyAuthSection.vue')['default']
     ProxyBackendSection: typeof import('./src/components/proxy-form/ProxyBackendSection.vue')['default']
     ProxyBaseSection: typeof import('./src/components/proxy-form/ProxyBaseSection.vue')['default']

web/frpc/src/components/ConfigField.vue

@@ -115,8 +115,8 @@
 import { computed } from 'vue'
 import KeyValueEditor from './KeyValueEditor.vue'
 import StringListEditor from './StringListEditor.vue'
-import PopoverMenu from './PopoverMenu.vue'
+import PopoverMenu from '@shared/components/PopoverMenu.vue'
-import PopoverMenuItem from './PopoverMenuItem.vue'
+import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'
 
 const props = withDefaults(
   defineProps<{

web/frpc/src/components/ProxyCard.vue

@@ -53,9 +53,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { MoreFilled, Edit, Delete, Open, TurnOff } from '@element-plus/icons-vue'
-import ActionButton from './ActionButton.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
-import PopoverMenu from './PopoverMenu.vue'
+import PopoverMenu from '@shared/components/PopoverMenu.vue'
-import PopoverMenuItem from './PopoverMenuItem.vue'
+import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'
 import type { ProxyStatus } from '../types'
 
 interface Props {

web/frpc/src/views/ClientConfigure.vue

@@ -41,6 +41,7 @@ serverPort = 7000"
       message="This operation will update your frpc configuration and reload it. Do you want to continue?"
       confirm-text="Update"
       :loading="uploading"
+      :is-mobile="isMobile"
       @confirm="doUpload"
     />
   </div>
@@ -51,9 +52,11 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Link } from '@element-plus/icons-vue'
 import { useClientStore } from '../stores/client'
-import ActionButton from '../components/ActionButton.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
-import ConfirmDialog from '../components/ConfirmDialog.vue'
+import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
+import { useResponsive } from '../composables/useResponsive'
 
+const { isMobile } = useResponsive()
 const clientStore = useClientStore()
 const configContent = ref('')
 

web/frpc/src/views/ProxyDetail.vue

@@ -69,7 +69,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Warning } from '@element-plus/icons-vue'
-import ActionButton from '../components/ActionButton.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
 import ProxyFormLayout from '../components/proxy-form/ProxyFormLayout.vue'
 import { getProxyConfig, getStoreProxy } from '../api/frpc'
 import { useProxyStore } from '../stores/proxy'

web/frpc/src/views/ProxyEdit.vue

@@ -31,6 +31,7 @@
       v-model="leaveDialogVisible"
       title="Unsaved Changes"
       message="You have unsaved changes. Are you sure you want to leave?"
+      :is-mobile="isMobile"
       @confirm="handleLeaveConfirm"
       @cancel="handleLeaveCancel"
     />
@@ -50,10 +51,12 @@ import {
 } from '../types'
 import { getStoreProxy } from '../api/frpc'
 import { useProxyStore } from '../stores/proxy'
-import ActionButton from '../components/ActionButton.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
-import ConfirmDialog from '../components/ConfirmDialog.vue'
+import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
 import ProxyFormLayout from '../components/proxy-form/ProxyFormLayout.vue'
+import { useResponsive } from '../composables/useResponsive'
 
+const { isMobile } = useResponsive()
 const route = useRoute()
 const router = useRouter()
 const proxyStore = useProxyStore()

web/frpc/src/views/ProxyList.vue

@@ -30,8 +30,8 @@
           <el-input v-model="searchText" placeholder="Search..." clearable class="search-input">
             <template #prefix><el-icon><Search /></el-icon></template>
           </el-input>
-          <FilterDropdown v-model="sourceFilter" label="Source" :options="sourceOptions" :min-width="140" />
+          <FilterDropdown v-model="sourceFilter" label="Source" :options="sourceOptions" :min-width="140" :is-mobile="isMobile" />
-          <FilterDropdown v-model="typeFilter" label="Type" :options="typeOptions" :min-width="140" />
+          <FilterDropdown v-model="typeFilter" label="Type" :options="typeOptions" :min-width="140" :is-mobile="isMobile" />
         </div>
       </template>
 
@@ -41,7 +41,7 @@
           <el-input v-model="storeSearch" placeholder="Search..." clearable class="search-input">
             <template #prefix><el-icon><Search /></el-icon></template>
           </el-input>
-          <FilterDropdown v-model="storeTypeFilter" label="Type" :options="storeTypeOptions" :min-width="140" />
+          <FilterDropdown v-model="storeTypeFilter" label="Type" :options="storeTypeOptions" :min-width="140" :is-mobile="isMobile" />
         </div>
       </template>
     </div>
@@ -100,6 +100,7 @@ path = "./frpc_store.json"</pre>
       confirm-text="Delete"
       danger
       :loading="deleteDialog.loading"
+      :is-mobile="isMobile"
       @confirm="doDelete"
     />
   </div>
@@ -110,11 +111,11 @@ import { ref, computed, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Search, Refresh } from '@element-plus/icons-vue'
-import ActionButton from '../components/ActionButton.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
 import StatusPills from '../components/StatusPills.vue'
-import FilterDropdown from '../components/FilterDropdown.vue'
+import FilterDropdown from '@shared/components/FilterDropdown.vue'
 import ProxyCard from '../components/ProxyCard.vue'
-import ConfirmDialog from '../components/ConfirmDialog.vue'
+import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
 import { useProxyStore } from '../stores/proxy'
 import { useResponsive } from '../composables/useResponsive'
 import type { ProxyStatus } from '../types'

web/frpc/src/views/VisitorDetail.vue

@@ -48,7 +48,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import ActionButton from '../components/ActionButton.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
 import VisitorFormLayout from '../components/visitor-form/VisitorFormLayout.vue'
 import { getVisitorConfig, getStoreVisitor } from '../api/frpc'
 import type { VisitorDefinition, VisitorFormData } from '../types'

web/frpc/src/views/VisitorEdit.vue

@@ -30,6 +30,7 @@
       v-model="leaveDialogVisible"
       title="Unsaved Changes"
       message="You have unsaved changes. Are you sure you want to leave?"
+      :is-mobile="isMobile"
       @confirm="handleLeaveConfirm"
       @cancel="handleLeaveCancel"
     />
@@ -40,9 +41,10 @@
 import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import ActionButton from '../components/ActionButton.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
-import ConfirmDialog from '../components/ConfirmDialog.vue'
+import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
 import VisitorFormLayout from '../components/visitor-form/VisitorFormLayout.vue'
+import { useResponsive } from '../composables/useResponsive'
 import type { FormInstance, FormRules } from 'element-plus'
 import {
   type VisitorFormData,
@@ -53,6 +55,7 @@ import {
 import { getStoreVisitor } from '../api/frpc'
 import { useVisitorStore } from '../stores/visitor'
 
+const { isMobile } = useResponsive()
 const route = useRoute()
 const router = useRouter()
 const visitorStore = useVisitorStore()

web/frpc/src/views/VisitorList.vue

@@ -32,7 +32,7 @@ path = "./frpc_store.json"</pre>
           <el-input v-model="searchText" placeholder="Search..." clearable class="search-input">
             <template #prefix><el-icon><Search /></el-icon></template>
           </el-input>
-          <FilterDropdown v-model="typeFilter" label="Type" :options="typeOptions" :min-width="140" />
+          <FilterDropdown v-model="typeFilter" label="Type" :options="typeOptions" :min-width="140" :is-mobile="isMobile" />
         </div>
 
         <div v-if="filteredVisitors.length > 0" class="visitor-list">
@@ -74,7 +74,7 @@ path = "./frpc_store.json"</pre>
 
     <ConfirmDialog v-model="deleteDialog.visible" title="Delete Visitor"
       :message="deleteDialog.message" confirm-text="Delete" danger
-      :loading="deleteDialog.loading" @confirm="doDelete" />
+      :loading="deleteDialog.loading" :is-mobile="isMobile" @confirm="doDelete" />
   </div>
 </template>
 
@@ -83,14 +83,16 @@ import { ref, computed, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Search, Refresh, MoreFilled, Edit, Delete } from '@element-plus/icons-vue'
-import ActionButton from '../components/ActionButton.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
-import FilterDropdown from '../components/FilterDropdown.vue'
+import FilterDropdown from '@shared/components/FilterDropdown.vue'
-import PopoverMenu from '../components/PopoverMenu.vue'
+import PopoverMenu from '@shared/components/PopoverMenu.vue'
-import PopoverMenuItem from '../components/PopoverMenuItem.vue'
+import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'
-import ConfirmDialog from '../components/ConfirmDialog.vue'
+import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
 import { useVisitorStore } from '../stores/visitor'
+import { useResponsive } from '../composables/useResponsive'
 import type { VisitorDefinition } from '../types'
 
+const { isMobile } = useResponsive()
 const router = useRouter()
 const visitorStore = useVisitorStore()
 

web/frpc/tsconfig.json

@@ -18,8 +18,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["../shared/*"]
+    }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "../shared/**/*.ts", "../shared/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

web/frpc/vite.config.mts

@@ -25,13 +25,19 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@shared': fileURLToPath(new URL('../shared', import.meta.url)),
     },
+    dedupe: ['vue', 'element-plus', '@element-plus/icons-vue'],
+    modules: [
+      fileURLToPath(new URL('../node_modules', import.meta.url)),
+      'node_modules',
+    ],
   },
   css: {
     preprocessorOptions: {
       scss: {
         api: 'modern',
-        additionalData: `@use "@/assets/css/_index.scss" as *;`,
+        additionalData: `@use "@shared/css/_index.scss" as *;`,
       },
     },
   },

web/frps/Makefile

@@ -1,7 +1,7 @@
 .PHONY: dist install build preview lint
 
 install:
-	@npm install
+	@cd .. && npm install
 
 build: install
 	@npm run build

web/frps/components.d.ts

@@ -11,13 +11,12 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElRow: typeof import('element-plus/es')['ElRow']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']

web/frps/src/App.vue

@@ -2,135 +2,195 @@
   <div id="app">
     <header class="header">
       <div class="header-content">
-        <div class="header-top">
+        <div class="brand-section">
-          <div class="brand-section">
+          <button
-            <div class="logo-wrapper">
+            v-if="isMobile"
-              <LogoIcon class="logo-icon" />
+            class="hamburger-btn"
-            </div>
+            @click="toggleSidebar"
-            <span class="divider">/</span>
+            aria-label="Toggle menu"
-            <span class="brand-name">frp</span>
+          >
-            <span class="badge server-badge">Server</span>
+            <span class="hamburger-icon">&#9776;</span>
-            <span class="badge" v-if="currentRouteName">{{
+          </button>
-              currentRouteName
+          <div class="logo-wrapper">
-            }}</span>
+            <LogoIcon class="logo-icon" />
-          </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>
+          <span class="divider">/</span>
+          <span class="brand-name">frp</span>
+          <span class="badge server-badge">Server</span>
         </div>
 
-        <nav class="nav-bar">
+        <div class="header-controls">
-          <router-link to="/" class="nav-link" active-class="active"
+          <a
-            >Overview</router-link
+            class="github-link"
+            href="https://github.com/fatedier/frp"
+            target="_blank"
+            aria-label="GitHub"
           >
-          <router-link to="/clients" class="nav-link" active-class="active"
+            <GitHubIcon class="github-icon" />
-            >Clients</router-link
+          </a>
-          >
+          <el-switch
-          <router-link
+            v-model="isDark"
-            to="/proxies"
+            inline-prompt
-            class="nav-link"
+            :active-icon="Moon"
-            :class="{ active: route.path.startsWith('/proxies') }"
+            :inactive-icon="Sunny"
-            >Proxies</router-link
+            class="theme-switch"
-          >
+          />
-        </nav>
+        </div>
       </div>
     </header>
 
-    <main id="content">
+    <div class="layout">
-      <router-view></router-view>
+      <!-- Mobile overlay -->
-    </main>
+      <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(() => {
+const sidebarOpen = ref(false)
-  if (route.path === '/') return 'Overview'
+
-  if (route.path.startsWith('/clients')) return 'Clients'
+const toggleSidebar = () => {
-  if (route.path.startsWith('/proxies')) return 'Proxies'
+  sidebarOpen.value = !sidebarOpen.value
-  return ''
+}
-})
+
+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-height: 50px;
-  --header-bg: rgba(255, 255, 255, 0.8);
+  --sidebar-width: 200px;
-  --header-border: #eaeaea;
+  --header-bg: #ffffff;
-  --text-primary: #000;
+  --header-border: #e4e7ed;
-  --text-secondary: #666;
+  --sidebar-bg: #ffffff;
-  --hover-bg: #f5f5f5;
+  --text-primary: #303133;
-  --active-link: #000;
+  --text-secondary: #606266;
+  --text-muted: #909399;
+  --hover-bg: #efefef;
+  --content-bg: #f9f9f9;
 }
 
 html.dark {
-  --header-bg: rgba(0, 0, 0, 0.8);
+  --header-bg: #1e1e2e;
-  --header-border: #333;
+  --header-border: #3a3d5c;
-  --text-primary: #fff;
+  --sidebar-bg: #1e1e2e;
-  --text-secondary: #888;
+  --text-primary: #e5e7eb;
-  --hover-bg: #1a1a1a;
+  --text-secondary: #b0b0b0;
-  --active-link: #fff;
+  --text-muted: #888888;
+  --hover-bg: #2a2a3e;
+  --content-bg: #181825;
 }
 
 body {
   margin: 0;
   font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Arial,
-    Arial, sans-serif;
+    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;
+  flex-shrink: 0;
-  top: 0;
-  z-index: 100;
   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;
+  width: 28px;
-  height: 32px;
+  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;
+  font-size: 11px;
-  color: var(--text-secondary);
+  font-weight: 500;
+  color: var(--text-muted);
   background: var(--hover-bg);
   padding: 2px 8px;
-  border-radius: 99px;
+  border-radius: 4px;
-  border: 1px solid var(--header-border);
 }
 
 .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 {
+/* Layout */
-  height: 48px;
+.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 {
+.hamburger-btn:hover {
-  text-decoration: none;
+  background: var(--hover-bg);
-  font-size: 14px;
-  color: var(--text-secondary);
-  padding: 8px 0;
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s;
 }
 
-.nav-link:hover {
+.hamburger-icon {
+  font-size: 20px;
+  line-height: 1;
   color: var(--text-primary);
 }
 
-.nav-link.active {
+/* Mobile overlay */
-  color: var(--active-link);
+.sidebar-overlay {
-  border-bottom-color: var(--active-link);
+  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;
   }
 }

web/frps/src/assets/css/dark.css

@@ -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 {
+/* Scrollbar */
-  background-color: #1e1e2e;
+html.dark ::-webkit-scrollbar {
-  color: #e5e7eb;
+  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 */
+/* Form */
-html.dark .el-card {
+html.dark .el-form-item__label {
-  background-color: #27293d;
+  color: #e5e7eb;
-  border-color: #3a3d5c;
 }
 
-/* Dark mode inputs */
+/* Input */
 html.dark .el-input__wrapper {
-  background-color: #27293d;
+  background: var(--color-bg-input);
-  border-color: #3a3d5c;
+  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;
 }

web/frps/src/assets/css/var.css

@@ -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;
+}

web/frps/src/composables/useResponsive.ts

@@ -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 }
+}

web/frps/src/main.ts

@@ -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)

web/frps/src/views/Proxies.vue

@@ -8,23 +8,13 @@
         </div>
 
         <div class="actions-section">
-          <el-button :icon="Refresh" class="action-btn" @click="fetchData"
+          <ActionButton variant="outline" size="small" @click="fetchData">
-            >Refresh</el-button
+            Refresh
-          >
+          </ActionButton>
 
-          <el-popconfirm
+          <ActionButton variant="outline" size="small" danger @click="showClearDialog = true">
-            title="Clear all offline proxies?"
+            Clear Offline
-            width="220"
+          </ActionButton>
-            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>
         </div>
       </div>
 
@@ -38,28 +28,35 @@
             class="main-search"
           />
 
-          <el-select
+          <PopoverMenu
             :model-value="selectedClientKey"
-            placeholder="All Clients"
+            :width="220"
-            clearable
+            placement="bottom-end"
+            selectable
             filterable
-            class="client-select"
+            filter-placeholder="Search clients..."
-            @change="onClientFilterChange"
+            :display-value="selectedClientLabel"
+            clearable
+            class="client-filter"
+            @update:model-value="onClientFilterChange($event as string)"
           >
-            <el-option label="All Clients" value="" />
+            <template #default="{ filterText }">
-            <el-option
+              <PopoverMenuItem value="">All Clients</PopoverMenuItem>
-              v-if="clientIDFilter && !selectedClientInList"
+              <PopoverMenuItem
-              :label="`${userFilter ? userFilter + '.' : ''}${clientIDFilter} (not found)`"
+                v-if="clientIDFilter && !selectedClientInList"
-              :value="selectedClientKey"
+                :value="selectedClientKey"
-              style="color: var(--el-color-warning); font-style: italic"
+              >
-            />
+                {{ userFilter ? userFilter + '.' : '' }}{{ clientIDFilter }} (not found)
-            <el-option
+              </PopoverMenuItem>
-              v-for="client in clientOptions"
+              <PopoverMenuItem
-              :key="client.key"
+                v-for="client in filteredClientOptions(filterText)"
-              :label="client.label"
+                :key="client.key"
-              :value="client.key"
+                :value="client.key"
-            />
+              >
-          </el-select>
+                {{ 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) {
+.client-filter :deep(.el-input__wrapper) {
-  border-radius: 12px;
+  height: 32px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
-  padding: 0 16px;
-  height: 100%;
-  border: 1px solid var(--el-border-color);
 }
 
-.main-search :deep(.el-input__wrapper) {
+.client-filter {
-  font-size: 15px;
-}
-
-.client-select {
   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%;
   }
 }

web/frps/src/views/ProxyDetail.vue

@@ -51,98 +51,41 @@
                 <router-link
                   v-if="proxy.clientID"
                   :to="clientLink"
-                  class="client-link"
+                  class="meta-link"
                 >
                   <el-icon><Monitor /></el-icon>
-                  <span
+                  <span>{{
-                    >Client:
+                    proxy.user
-                    {{
+                      ? `${proxy.user}.${proxy.clientID}`
-                      proxy.user
+                      : proxy.clientID
-                        ? `${proxy.user}.${proxy.clientID}`
+                  }}</span>
-                        : 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 -->
+        <!-- Stats Bar -->
-        <div class="stats-grid">
+        <div class="stats-bar">
-          <div v-if="proxy.port" class="stat-card">
+          <div v-if="proxy.port" class="stats-item">
-            <div class="stat-header">
+            <span class="stats-label">Port</span>
-              <span class="stat-label">Port</span>
+            <span class="stats-value">{{ proxy.port }}</span>
-              <div class="stat-icon port">
-                <el-icon><Connection /></el-icon>
-              </div>
-            </div>
-            <div class="stat-value">{{ proxy.port }}</div>
           </div>
-          <div class="stat-card">
+          <div class="stats-item">
-            <div class="stat-header">
+            <span class="stats-label">Connections</span>
-              <span class="stat-label">Connections</span>
+            <span class="stats-value">{{ proxy.conns }}</span>
-              <div class="stat-icon connections">
-                <el-icon><DataLine /></el-icon>
-              </div>
-            </div>
-            <div class="stat-value">{{ proxy.conns }}</div>
           </div>
-          <div class="stat-card">
+          <div class="stats-item">
-            <div class="stat-header">
+            <span class="stats-label">Traffic</span>
-              <span class="stat-label">Traffic In</span>
+            <span class="stats-value">↓ {{ formatTrafficValue(proxy.trafficIn) }} <small>{{ formatTrafficUnit(proxy.trafficIn) }}</small> / ↑ {{ formatTrafficValue(proxy.trafficOut) }} <small>{{ formatTrafficUnit(proxy.trafficOut) }}</small></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>
         </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;
+  gap: 4px;
-  font-size: 14px;
   color: var(--text-secondary);
   text-decoration: none;
   transition: color 0.2s;
 }
 
-.client-link:hover {
+.meta-link:hover {
   color: var(--el-color-primary);
 }
 
-/* Stats Grid */
+.meta-text {
-.stats-grid {
+  color: var(--text-muted);
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  margin-bottom: 24px;
 }
 
-.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;
+  margin-bottom: 20px;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
 }
 
-.stat-icon.port {
+.stats-item {
-  background: rgba(139, 92, 246, 0.1);
+  flex: 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 {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
+  padding: 16px 20px;
 }
 
-.timeline-label {
+.stats-item + .stats-item {
-  font-size: 13px;
+  border-left: 1px solid var(--header-border);
+}
+
+.stats-label {
+  font-size: 12px;
   color: var(--text-secondary);
-  font-weight: 500;
 }
 
-.timeline-value {
+.stats-value {
-  font-size: 15px;
+  font-size: 18px;
-  font-weight: 500;
+  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>

web/frps/tsconfig.json

@@ -18,8 +18,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["../shared/*"]
+    }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "../shared/**/*.ts", "../shared/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

web/frps/vite.config.mts

@@ -25,6 +25,20 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@shared': fileURLToPath(new URL('../shared', import.meta.url)),
+    },
+    dedupe: ['vue', 'element-plus', '@element-plus/icons-vue'],
+    modules: [
+      fileURLToPath(new URL('../node_modules', import.meta.url)),
+      'node_modules',
+    ],
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern',
+        additionalData: `@use "@shared/css/_index.scss" as *;`,
+      },
     },
   },
   build: {

web/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "frp-web",
+  "private": true,
+  "workspaces": ["shared", "frpc", "frps"]
+}

web/shared/components/BaseDialog.vue

@@ -21,7 +21,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useResponsive } from '../composables/useResponsive'
 
 const props = withDefaults(
   defineProps<{
@@ -33,6 +32,7 @@ const props = withDefaults(
     closeOnPressEscape?: boolean
     appendToBody?: boolean
     top?: string
+    isMobile?: boolean
   }>(),
   {
     width: '480px',
@@ -41,6 +41,7 @@ const props = withDefaults(
     closeOnPressEscape: true,
     appendToBody: false,
     top: '15vh',
+    isMobile: false,
   },
 )
 
@@ -53,15 +54,13 @@ const visible = computed({
   set: (value) => emit('update:modelValue', value),
 })
 
-const { isMobile } = useResponsive()
-
 const dialogWidth = computed(() => {
-  if (isMobile.value) return '100%'
+  if (props.isMobile) return '100%'
   return props.width
 })
 
 const dialogTop = computed(() => {
-  if (isMobile.value) return '0'
+  if (props.isMobile) return '0'
   return props.top
 })
 </script>

web/shared/components/ConfirmDialog.vue

@@ -5,6 +5,7 @@
     width="400px"
     :close-on-click-modal="false"
     :append-to-body="true"
+    :is-mobile="isMobile"
   >
     <p class="confirm-message">{{ message }}</p>
     <template #footer>
@@ -27,7 +28,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import BaseDialog from './BaseDialog.vue'
-import ActionButton from './ActionButton.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -38,12 +39,14 @@ const props = withDefaults(
     cancelText?: string
     danger?: boolean
     loading?: boolean
+    isMobile?: boolean
   }>(),
   {
     confirmText: 'Confirm',
     cancelText: 'Cancel',
     danger: false,
     loading: false,
+    isMobile: false,
   },
 )
 

web/shared/components/FilterDropdown.vue

@@ -30,9 +30,6 @@ import { computed } from 'vue'
 import { ArrowDown } from '@element-plus/icons-vue'
 import PopoverMenu from './PopoverMenu.vue'
 import PopoverMenuItem from './PopoverMenuItem.vue'
-import { useResponsive } from '../composables/useResponsive'
-
-const { isMobile } = useResponsive()
 
 interface Props {
   modelValue: string
@@ -41,6 +38,7 @@ interface Props {
   allLabel?: string
   width?: number
   minWidth?: number
+  isMobile?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {

web/shared/css/_index.scss

@@ -0,0 +1,2 @@
+@forward './variables';
+@forward './mixins';

web/shared/css/_mixins.scss

@@ -0,0 +1,49 @@
+@use './variables' as vars;
+
+@mixin mobile {
+  @media (max-width: #{vars.$breakpoint-mobile - 1px}) {
+    @content;
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin page-scroll {
+  height: 100%;
+  overflow-y: auto;
+  padding: vars.$spacing-xl 40px;
+
+  > * {
+    max-width: 960px;
+    margin: 0 auto;
+  }
+
+  @include mobile {
+    padding: vars.$spacing-xl;
+  }
+}
+
+@mixin custom-scrollbar {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #d1d1d1;
+    border-radius: 3px;
+  }
+}

web/shared/css/_variables.scss

@@ -0,0 +1,61 @@
+// Typography
+$font-size-xs: 11px;
+$font-size-sm: 13px;
+$font-size-md: 14px;
+$font-size-lg: 15px;
+$font-size-xl: 18px;
+
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+// Colors - Text
+$color-text-primary: var(--color-text-primary);
+$color-text-secondary: var(--color-text-secondary);
+$color-text-muted: var(--color-text-muted);
+$color-text-light: var(--color-text-light);
+
+// Colors - Background
+$color-bg-primary: var(--color-bg-primary);
+$color-bg-secondary: var(--color-bg-secondary);
+$color-bg-tertiary: var(--color-bg-tertiary);
+$color-bg-muted: var(--color-bg-muted);
+$color-bg-hover: var(--color-bg-hover);
+$color-bg-active: var(--color-bg-active);
+
+// Colors - Border
+$color-border: var(--color-border);
+$color-border-light: var(--color-border-light);
+$color-border-lighter: var(--color-border-lighter);
+
+// Colors - Status
+$color-primary: var(--color-primary);
+$color-danger: var(--color-danger);
+$color-danger-dark: var(--color-danger-dark);
+$color-danger-light: var(--color-danger-light);
+
+// Colors - Button
+$color-btn-primary: var(--color-btn-primary);
+$color-btn-primary-hover: var(--color-btn-primary-hover);
+
+// Spacing
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 12px;
+$spacing-lg: 16px;
+$spacing-xl: 20px;
+
+// Border Radius
+$radius-sm: 6px;
+$radius-md: 8px;
+
+// Transitions
+$transition-fast: 0.15s ease;
+$transition-medium: 0.2s ease;
+
+// Layout
+$header-height: 50px;
+$sidebar-width: 200px;
+
+// Breakpoints
+$breakpoint-mobile: 768px;

web/shared/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "frp-shared",
+  "private": true
+}