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

2026-03-20 15:24:14 +08:00 · 2026-03-20 03:33:44 +08:00
parent 6cdef90113
commit 38a71a6803
38 changed files with 1484 additions and 8548 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,8 @@ dist/
 client.crt
 client.key

+node_modules/
+
 # Cache
 *.swp

--- a/web/frpc/Makefile
+++ b/web/frpc/Makefile
@@ -1,7 +1,7 @@
 .PHONY: dist install build preview lint

 install:
-	@npm install
+	@cd .. && npm install

 build: install
 	@npm run build
--- a/web/frpc/components.d.ts
+++ b/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']
--- a/web/frpc/src/components/ConfigField.vue
+++ b/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 PopoverMenuItem from './PopoverMenuItem.vue'
+import PopoverMenu from '@shared/components/PopoverMenu.vue'
+import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'

 const props = withDefaults(
  defineProps<{
--- a/web/frpc/src/components/ProxyCard.vue
+++ b/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 PopoverMenu from './PopoverMenu.vue'
-import PopoverMenuItem from './PopoverMenuItem.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
+import PopoverMenu from '@shared/components/PopoverMenu.vue'
+import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'
 import type { ProxyStatus } from '../types'

 interface Props {
--- a/web/frpc/src/views/ClientConfigure.vue
+++ b/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 ConfirmDialog from '../components/ConfirmDialog.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
+import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
+import { useResponsive } from '../composables/useResponsive'

+const { isMobile } = useResponsive()
 const clientStore = useClientStore()
 const configContent = ref('')

--- a/web/frpc/src/views/ProxyDetail.vue
+++ b/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'
--- a/web/frpc/src/views/ProxyEdit.vue
+++ b/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 ConfirmDialog from '../components/ConfirmDialog.vue'
+import ActionButton from '@shared/components/ActionButton.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()
--- a/web/frpc/src/views/ProxyList.vue
+++ b/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="typeFilter" label="Type" :options="typeOptions" :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" :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'
--- a/web/frpc/src/views/VisitorDetail.vue
+++ b/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'
--- a/web/frpc/src/views/VisitorEdit.vue
+++ b/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 ConfirmDialog from '../components/ConfirmDialog.vue'
+import ActionButton from '@shared/components/ActionButton.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()
--- a/web/frpc/src/views/VisitorList.vue
+++ b/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 FilterDropdown from '../components/FilterDropdown.vue'
-import PopoverMenu from '../components/PopoverMenu.vue'
-import PopoverMenuItem from '../components/PopoverMenuItem.vue'
-import ConfirmDialog from '../components/ConfirmDialog.vue'
+import ActionButton from '@shared/components/ActionButton.vue'
+import FilterDropdown from '@shared/components/FilterDropdown.vue'
+import PopoverMenu from '@shared/components/PopoverMenu.vue'
+import PopoverMenuItem from '@shared/components/PopoverMenuItem.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()

--- a/web/frpc/tsconfig.json
+++ b/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" }]
 }
--- a/web/frpc/vite.config.mts
+++ b/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 *;`,
      },
    },
  },
--- a/web/frps/Makefile
+++ b/web/frps/Makefile
@@ -1,7 +1,7 @@
 .PHONY: dist install build preview lint

 install:
-	@npm install
+	@cd .. && npm install

 build: install
 	@npm run build
--- a/web/frps/components.d.ts
+++ b/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']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
    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']
--- a/web/frps/package-lock.json
+++ b/web/frps/package-lock.json
--- a/web/frps/src/App.vue
+++ b/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="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">&#9776;</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;
  }
 }
--- a/web/frps/src/assets/css/dark.css
+++ b/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 {
-  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;
 }
--- a/web/frps/src/assets/css/var.css
+++ b/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;
+}
--- a/web/frps/src/composables/useResponsive.ts
+++ b/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 }
+}
--- a/web/frps/src/main.ts
+++ b/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)
--- a/web/frps/src/views/Proxies.vue
+++ b/web/frps/src/views/Proxies.vue
@@ -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%;
  }
 }
--- a/web/frps/src/views/ProxyDetail.vue
+++ b/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
-                    >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>
--- a/web/frps/tsconfig.json
+++ b/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" }]
 }
--- a/web/frps/vite.config.mts
+++ b/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: {
--- a/web/frpc/package-lock.json
+++ b/web/frpc/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "frp-web",
+  "private": true,
+  "workspaces": ["shared", "frpc", "frps"]
+}
--- a/web/frpc/src/components/ActionButton.vue
+++ b/web/frpc/src/components/ActionButton.vue
--- a/web/frpc/src/components/BaseDialog.vue
+++ b/web/frpc/src/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>
--- a/web/frpc/src/components/ConfirmDialog.vue
+++ b/web/frpc/src/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,
  },
 )

--- a/web/frpc/src/components/FilterDropdown.vue
+++ b/web/frpc/src/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>(), {
--- a/web/frpc/src/components/PopoverMenu.vue
+++ b/web/frpc/src/components/PopoverMenu.vue
--- a/web/frpc/src/components/PopoverMenuItem.vue
+++ b/web/frpc/src/components/PopoverMenuItem.vue
--- a/web/shared/css/_index.scss
+++ b/web/shared/css/_index.scss
@@ -0,0 +1,2 @@
+@forward './variables';
+@forward './mixins';
--- a/web/shared/css/_mixins.scss
+++ b/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;
+  }
+}
--- a/web/shared/css/_variables.scss
+++ b/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;
--- a/web/shared/package.json
+++ b/web/shared/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "frp-shared",
+  "private": true
+}