web/frpc: redesign frpc dashboard with sidebar nav, proxy/visitor list and detail views

.gitignore

@@ -31,3 +31,4 @@ client.key
 # AI
 .claude/
 .sisyphus/
+.superpowers/

client/api_router.go

@@ -38,6 +38,8 @@ func (svr *Service) registerRouteHandlers(helper *httppkg.RouterRegisterHelper)
 	subRouter.HandleFunc("/api/status", httppkg.MakeHTTPHandlerFunc(apiController.Status)).Methods(http.MethodGet)
 	subRouter.HandleFunc("/api/config", httppkg.MakeHTTPHandlerFunc(apiController.GetConfig)).Methods(http.MethodGet)
 	subRouter.HandleFunc("/api/config", httppkg.MakeHTTPHandlerFunc(apiController.PutConfig)).Methods(http.MethodPut)
+	subRouter.HandleFunc("/api/proxy/{name}/config", httppkg.MakeHTTPHandlerFunc(apiController.GetProxyConfig)).Methods(http.MethodGet)
+	subRouter.HandleFunc("/api/visitor/{name}/config", httppkg.MakeHTTPHandlerFunc(apiController.GetVisitorConfig)).Methods(http.MethodGet)
 
 	if svr.storeSource != nil {
 		subRouter.HandleFunc("/api/store/proxies", httppkg.MakeHTTPHandlerFunc(apiController.ListStoreProxies)).Methods(http.MethodGet)

client/config_manager.go

@@ -80,6 +80,48 @@ func (m *serviceConfigManager) GetProxyStatus() []*proxy.WorkingStatus {
 	return m.svr.getAllProxyStatus()
 }
 
+func (m *serviceConfigManager) GetProxyConfig(name string) (v1.ProxyConfigurer, bool) {
+	// Try running proxy manager first
+	ws, ok := m.svr.getProxyStatus(name)
+	if ok {
+		return ws.Cfg, true
+	}
+
+	// Fallback to store
+	m.svr.reloadMu.Lock()
+	storeSource := m.svr.storeSource
+	m.svr.reloadMu.Unlock()
+
+	if storeSource != nil {
+		cfg := storeSource.GetProxy(name)
+		if cfg != nil {
+			return cfg, true
+		}
+	}
+	return nil, false
+}
+
+func (m *serviceConfigManager) GetVisitorConfig(name string) (v1.VisitorConfigurer, bool) {
+	// Try running visitor manager first
+	cfg, ok := m.svr.getVisitorCfg(name)
+	if ok {
+		return cfg, true
+	}
+
+	// Fallback to store
+	m.svr.reloadMu.Lock()
+	storeSource := m.svr.storeSource
+	m.svr.reloadMu.Unlock()
+
+	if storeSource != nil {
+		vcfg := storeSource.GetVisitor(name)
+		if vcfg != nil {
+			return vcfg, true
+		}
+	}
+	return nil, false
+}
+
 func (m *serviceConfigManager) IsStoreProxyEnabled(name string) bool {
 	if name == "" {
 		return false

client/configmgmt/types.go

@@ -26,6 +26,9 @@ type ConfigManager interface {
 	IsStoreProxyEnabled(name string) bool
 	StoreEnabled() bool
 
+	GetProxyConfig(name string) (v1.ProxyConfigurer, bool)
+	GetVisitorConfig(name string) (v1.VisitorConfigurer, bool)
+
 	ListStoreProxies() ([]v1.ProxyConfigurer, error)
 	GetStoreProxy(name string) (v1.ProxyConfigurer, error)
 	CreateStoreProxy(cfg v1.ProxyConfigurer) (v1.ProxyConfigurer, error)

client/http/controller.go

@@ -162,6 +162,44 @@ func (c *Controller) buildProxyStatusResp(status *proxy.WorkingStatus) model.Pro
 	return psr
 }
 
+// GetProxyConfig handles GET /api/proxy/{name}/config
+func (c *Controller) GetProxyConfig(ctx *httppkg.Context) (any, error) {
+	name := ctx.Param("name")
+	if name == "" {
+		return nil, httppkg.NewError(http.StatusBadRequest, "proxy name is required")
+	}
+
+	cfg, ok := c.manager.GetProxyConfig(name)
+	if !ok {
+		return nil, httppkg.NewError(http.StatusNotFound, fmt.Sprintf("proxy %q not found", name))
+	}
+
+	payload, err := model.ProxyDefinitionFromConfigurer(cfg)
+	if err != nil {
+		return nil, httppkg.NewError(http.StatusInternalServerError, err.Error())
+	}
+	return payload, nil
+}
+
+// GetVisitorConfig handles GET /api/visitor/{name}/config
+func (c *Controller) GetVisitorConfig(ctx *httppkg.Context) (any, error) {
+	name := ctx.Param("name")
+	if name == "" {
+		return nil, httppkg.NewError(http.StatusBadRequest, "visitor name is required")
+	}
+
+	cfg, ok := c.manager.GetVisitorConfig(name)
+	if !ok {
+		return nil, httppkg.NewError(http.StatusNotFound, fmt.Sprintf("visitor %q not found", name))
+	}
+
+	payload, err := model.VisitorDefinitionFromConfigurer(cfg)
+	if err != nil {
+		return nil, httppkg.NewError(http.StatusInternalServerError, err.Error())
+	}
+	return payload, nil
+}
+
 func (c *Controller) ListStoreProxies(ctx *httppkg.Context) (any, error) {
 	proxies, err := c.manager.ListStoreProxies()
 	if err != nil {

client/http/controller_test.go

@@ -26,6 +26,8 @@ type fakeConfigManager struct {
 	getProxyStatusFn      func() []*proxy.WorkingStatus
 	isStoreProxyEnabledFn func(name string) bool
 	storeEnabledFn        func() bool
+	getProxyConfigFn      func(name string) (v1.ProxyConfigurer, bool)
+	getVisitorConfigFn    func(name string) (v1.VisitorConfigurer, bool)
 
 	listStoreProxiesFn  func() ([]v1.ProxyConfigurer, error)
 	getStoreProxyFn     func(name string) (v1.ProxyConfigurer, error)
@@ -82,6 +84,20 @@ func (m *fakeConfigManager) StoreEnabled() bool {
 	return false
 }
 
+func (m *fakeConfigManager) GetProxyConfig(name string) (v1.ProxyConfigurer, bool) {
+	if m.getProxyConfigFn != nil {
+		return m.getProxyConfigFn(name)
+	}
+	return nil, false
+}
+
+func (m *fakeConfigManager) GetVisitorConfig(name string) (v1.VisitorConfigurer, bool) {
+	if m.getVisitorConfigFn != nil {
+		return m.getVisitorConfigFn(name)
+	}
+	return nil, false
+}
+
 func (m *fakeConfigManager) ListStoreProxies() ([]v1.ProxyConfigurer, error) {
 	if m.listStoreProxiesFn != nil {
 		return m.listStoreProxiesFn()
@@ -529,3 +545,118 @@ func TestUpdateStoreProxyReturnsTypedPayload(t *testing.T) {
 		t.Fatalf("unexpected response payload: %#v", payload)
 	}
 }
+
+func TestGetProxyConfigFromManager(t *testing.T) {
+	controller := &Controller{
+		manager: &fakeConfigManager{
+			getProxyConfigFn: func(name string) (v1.ProxyConfigurer, bool) {
+				if name == "ssh" {
+					cfg := &v1.TCPProxyConfig{
+						ProxyBaseConfig: v1.ProxyBaseConfig{
+							Name: "ssh",
+							Type: "tcp",
+							ProxyBackend: v1.ProxyBackend{
+								LocalPort: 22,
+							},
+						},
+					}
+					return cfg, true
+				}
+				return nil, false
+			},
+		},
+	}
+
+	req := httptest.NewRequest(http.MethodGet, "/api/proxy/ssh/config", nil)
+	req = mux.SetURLVars(req, map[string]string{"name": "ssh"})
+	ctx := httppkg.NewContext(httptest.NewRecorder(), req)
+
+	resp, err := controller.GetProxyConfig(ctx)
+	if err != nil {
+		t.Fatalf("get proxy config: %v", err)
+	}
+	payload, ok := resp.(model.ProxyDefinition)
+	if !ok {
+		t.Fatalf("unexpected response type: %T", resp)
+	}
+	if payload.Name != "ssh" || payload.Type != "tcp" || payload.TCP == nil {
+		t.Fatalf("unexpected payload: %#v", payload)
+	}
+}
+
+func TestGetProxyConfigNotFound(t *testing.T) {
+	controller := &Controller{
+		manager: &fakeConfigManager{
+			getProxyConfigFn: func(name string) (v1.ProxyConfigurer, bool) {
+				return nil, false
+			},
+		},
+	}
+
+	req := httptest.NewRequest(http.MethodGet, "/api/proxy/missing/config", nil)
+	req = mux.SetURLVars(req, map[string]string{"name": "missing"})
+	ctx := httppkg.NewContext(httptest.NewRecorder(), req)
+
+	_, err := controller.GetProxyConfig(ctx)
+	if err == nil {
+		t.Fatal("expected error")
+	}
+	assertHTTPCode(t, err, http.StatusNotFound)
+}
+
+func TestGetVisitorConfigFromManager(t *testing.T) {
+	controller := &Controller{
+		manager: &fakeConfigManager{
+			getVisitorConfigFn: func(name string) (v1.VisitorConfigurer, bool) {
+				if name == "my-stcp" {
+					cfg := &v1.STCPVisitorConfig{
+						VisitorBaseConfig: v1.VisitorBaseConfig{
+							Name:       "my-stcp",
+							Type:       "stcp",
+							ServerName: "server1",
+							BindPort:   9000,
+						},
+					}
+					return cfg, true
+				}
+				return nil, false
+			},
+		},
+	}
+
+	req := httptest.NewRequest(http.MethodGet, "/api/visitor/my-stcp/config", nil)
+	req = mux.SetURLVars(req, map[string]string{"name": "my-stcp"})
+	ctx := httppkg.NewContext(httptest.NewRecorder(), req)
+
+	resp, err := controller.GetVisitorConfig(ctx)
+	if err != nil {
+		t.Fatalf("get visitor config: %v", err)
+	}
+	payload, ok := resp.(model.VisitorDefinition)
+	if !ok {
+		t.Fatalf("unexpected response type: %T", resp)
+	}
+	if payload.Name != "my-stcp" || payload.Type != "stcp" || payload.STCP == nil {
+		t.Fatalf("unexpected payload: %#v", payload)
+	}
+}
+
+func TestGetVisitorConfigNotFound(t *testing.T) {
+	controller := &Controller{
+		manager: &fakeConfigManager{
+			getVisitorConfigFn: func(name string) (v1.VisitorConfigurer, bool) {
+				return nil, false
+			},
+		},
+	}
+
+	req := httptest.NewRequest(http.MethodGet, "/api/visitor/missing/config", nil)
+	req = mux.SetURLVars(req, map[string]string{"name": "missing"})
+	ctx := httppkg.NewContext(httptest.NewRecorder(), req)
+
+	_, err := controller.GetVisitorConfig(ctx)
+	if err == nil {
+		t.Fatal("expected error")
+	}
+	assertHTTPCode(t, err, http.StatusNotFound)
+}

client/service.go

@@ -521,6 +521,17 @@ func (svr *Service) getProxyStatus(name string) (*proxy.WorkingStatus, bool) {
 	return ctl.pm.GetProxyStatus(name)
 }
 
+func (svr *Service) getVisitorCfg(name string) (v1.VisitorConfigurer, bool) {
+	svr.ctlMu.RLock()
+	ctl := svr.ctl
+	svr.ctlMu.RUnlock()
+
+	if ctl == nil {
+		return nil, false
+	}
+	return ctl.vm.GetVisitorCfg(name)
+}
+
 func (svr *Service) StatusExporter() StatusExporter {
 	return &statusExporterImpl{
 		getProxyStatusFunc: svr.getProxyStatus,

client/visitor/visitor_manager.go

@@ -191,6 +191,13 @@ func (vm *Manager) TransferConn(name string, conn net.Conn) error {
 	return v.AcceptConn(conn)
 }
 
+func (vm *Manager) GetVisitorCfg(name string) (v1.VisitorConfigurer, bool) {
+	vm.mu.RLock()
+	defer vm.mu.RUnlock()
+	cfg, ok := vm.cfgs[name]
+	return cfg, ok
+}
+
 type visitorHelperImpl struct {
 	connectServerFn func() (net.Conn, error)
 	msgTransporter  transport.MessageTransporter

web/frpc/components.d.ts

@@ -7,28 +7,45 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ElButton: typeof import('element-plus/es')['ElButton']
+    ActionButton: typeof import('./src/components/ActionButton.vue')['default']
-    ElCard: typeof import('element-plus/es')['ElCard']
+    BaseDialog: typeof import('./src/components/BaseDialog.vue')['default']
-    ElCol: typeof import('element-plus/es')['ElCol']
+    ConfigField: typeof import('./src/components/ConfigField.vue')['default']
-    ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
+    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']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElOption: typeof import('element-plus/es')['ElOption']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    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']
+    FilterDropdown: typeof import('./src/components/FilterDropdown.vue')['default']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     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']
     ProxyCard: typeof import('./src/components/ProxyCard.vue')['default']
+    ProxyFormLayout: typeof import('./src/components/proxy-form/ProxyFormLayout.vue')['default']
+    ProxyHealthSection: typeof import('./src/components/proxy-form/ProxyHealthSection.vue')['default']
+    ProxyHttpSection: typeof import('./src/components/proxy-form/ProxyHttpSection.vue')['default']
+    ProxyLoadBalanceSection: typeof import('./src/components/proxy-form/ProxyLoadBalanceSection.vue')['default']
+    ProxyMetadataSection: typeof import('./src/components/proxy-form/ProxyMetadataSection.vue')['default']
+    ProxyNatSection: typeof import('./src/components/proxy-form/ProxyNatSection.vue')['default']
+    ProxyRemoteSection: typeof import('./src/components/proxy-form/ProxyRemoteSection.vue')['default']
+    ProxyTransportSection: typeof import('./src/components/proxy-form/ProxyTransportSection.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    StatCard: typeof import('./src/components/StatCard.vue')['default']
+    StatusPills: typeof import('./src/components/StatusPills.vue')['default']
+    StringListEditor: typeof import('./src/components/StringListEditor.vue')['default']
+    VisitorBaseSection: typeof import('./src/components/visitor-form/VisitorBaseSection.vue')['default']
+    VisitorConnectionSection: typeof import('./src/components/visitor-form/VisitorConnectionSection.vue')['default']
+    VisitorFormLayout: typeof import('./src/components/visitor-form/VisitorFormLayout.vue')['default']
+    VisitorTransportSection: typeof import('./src/components/visitor-form/VisitorTransportSection.vue')['default']
+    VisitorXtcpSection: typeof import('./src/components/visitor-form/VisitorXtcpSection.vue')['default']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']

web/frpc/index.html

@@ -3,6 +3,7 @@
 
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>frp client</title>
 </head>
 

web/frpc/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "element-plus": "^2.13.0",
+        "pinia": "^3.0.4",
         "vue": "^3.5.26",
         "vue-router": "^4.6.4"
       },
@@ -2072,6 +2073,36 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-kit/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-10.2.0.tgz",
@@ -2430,6 +2461,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -2713,6 +2753,21 @@
         "node": "^14.18.0 || >=16.10.0"
       }
     },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4223,6 +4278,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -4701,6 +4762,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
@@ -4974,6 +5047,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/mlly": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
@@ -5582,6 +5661,36 @@
         "node": ">=4"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
@@ -5859,6 +5968,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
     "node_modules/rolldown-string": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/rolldown-string/-/rolldown-string-0.2.1.tgz",
@@ -6267,6 +6382,15 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -6395,6 +6519,18 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

web/frpc/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "element-plus": "^2.13.0",
+    "pinia": "^3.0.4",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4"
   },

web/frpc/src/App.vue

@@ -2,17 +2,16 @@
   <div id="app">
     <header class="header">
       <div class="header-content">
-        <div class="header-top">
         <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 client-badge">Client</span>
+          <span class="badge">Client</span>
-            <span class="badge" v-if="currentRouteName">{{
-              currentRouteName
-            }}</span>
         </div>
 
         <div class="header-controls">
@@ -33,109 +32,130 @@
           />
         </div>
       </div>
-
-        <nav class="nav-bar">
-          <router-link to="/" class="nav-link" active-class="active"
-            >Overview</router-link
-          >
-          <router-link to="/configure" class="nav-link" active-class="active"
-            >Configure</router-link
-          >
-        </nav>
-      </div>
     </header>
 
+    <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="/proxies"
+            class="sidebar-link"
+            :class="{ active: route.path.startsWith('/proxies') }"
+            @click="closeSidebar"
+          >
+            Proxies
+          </router-link>
+          <router-link
+            to="/visitors"
+            class="sidebar-link"
+            :class="{ active: route.path.startsWith('/visitors') }"
+            @click="closeSidebar"
+          >
+            Visitors
+          </router-link>
+          <router-link
+            to="/config"
+            class="sidebar-link"
+            :class="{ active: route.path === '/config' }"
+            @click="closeSidebar"
+          >
+            Config
+          </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 === '/configure') return 'Configure'
+const toggleSidebar = () => {
-  if (route.path === '/proxies/create') return 'Create Proxy'
+  sidebarOpen.value = !sidebarOpen.value
-  if (route.path.startsWith('/proxies/') && route.path.endsWith('/edit'))
+}
-    return 'Edit Proxy'
+
-  if (route.path === '/visitors/create') return 'Create Visitor'
+const closeSidebar = () => {
-  if (route.path.startsWith('/visitors/') && route.path.endsWith('/edit'))
+  sidebarOpen.value = false
-    return 'Edit Visitor'
+}
-  return ''
+
+// Auto-close sidebar on route change
+watch(() => route.path, () => {
+  if (isMobile.value) {
+    closeSidebar()
+  }
 })
 </script>
 
-<style>
+<style lang="scss">
-: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;
-}
-
-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;
-}
-
 body {
   margin: 0;
-  font-family:
+  font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
 }
 
-#app {
+*,
-  min-height: 100vh;
+:after,
-  display: flex;
+:before {
-  flex-direction: column;
+  box-sizing: border-box;
-  background-color: var(--el-bg-color-page);
+  -webkit-tap-highlight-color: transparent;
 }
 
+html, body {
+  height: 100%;
+  overflow: hidden;
+}
+
+#app {
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  background-color: $color-bg-secondary;
+}
+
+// Header
 .header {
-  position: sticky;
+  flex-shrink: 0;
-  top: 0;
+  background: $color-bg-primary;
-  z-index: 100;
+  border-bottom: 1px solid $color-border-light;
-  background: var(--header-bg);
+  height: $header-height;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--header-border);
 }
 
 .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 $spacing-xl;
 }
 
 .brand-section {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: $spacing-md;
 }
 
 .logo-wrapper {
@@ -144,41 +164,30 @@ body {
 }
 
 .logo-icon {
-  width: 32px;
+  width: 28px;
-  height: 32px;
+  height: 28px;
 }
 
 .divider {
-  color: var(--header-border);
+  color: $color-border;
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 200;
 }
 
 .brand-name {
-  font-weight: 600;
+  font-weight: $font-weight-semibold;
-  font-size: 18px;
+  font-size: $font-size-xl;
-  color: var(--text-primary);
+  color: $color-text-primary;
   letter-spacing: -0.5px;
 }
 
 .badge {
-  font-size: 12px;
+  font-size: $font-size-xs;
-  color: var(--text-secondary);
+  font-weight: $font-weight-medium;
-  background: var(--hover-bg);
+  color: $color-text-muted;
+  background: $color-bg-muted;
   padding: 2px 8px;
-  border-radius: 99px;
+  border-radius: 4px;
-  border: 1px solid var(--header-border);
-}
-
-.badge.client-badge {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  font-weight: 500;
-}
-
-html.dark .badge.client-badge {
-  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
 }
 
 .header-controls {
@@ -188,17 +197,17 @@ html.dark .badge.client-badge {
 }
 
 .github-link {
-  width: 26px;
+  @include flex-center;
-  height: 26px;
+  width: 28px;
-  display: flex;
+  height: 28px;
-  align-items: center;
+  border-radius: $radius-sm;
-  justify-content: center;
+  color: $color-text-secondary;
-  border-radius: 50%;
+  transition: all $transition-fast;
-  color: var(--text-primary);
+
-  transition: background 0.2s;
+  &:hover {
-  background: transparent;
+    background: $color-bg-hover;
-  border: 1px solid transparent;
+    color: $color-text-primary;
-  cursor: pointer;
+  }
 }
 
 .github-icon {
@@ -206,15 +215,10 @@ html.dark .badge.client-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;
-  --el-switch-border-color: var(--header-border);
+  --el-switch-border-color: var(--color-border-light);
 }
 
 html.dark .theme-switch {
@@ -225,47 +229,300 @@ html.dark .theme-switch {
   color: #909399 !important;
 }
 
-.nav-bar {
+// Layout
-  height: 48px;
+.layout {
+  flex: 1;
   display: flex;
-  align-items: center;
+  overflow: hidden;
-  gap: 24px;
 }
 
-.nav-link {
+.sidebar {
+  width: $sidebar-width;
+  flex-shrink: 0;
+  border-right: 1px solid $color-border-light;
+  padding: $spacing-lg $spacing-md;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-nav {
+  @include flex-column;
+  gap: 2px;
+}
+
+.sidebar-link {
+  display: block;
   text-decoration: none;
-  font-size: 14px;
+  font-size: $font-size-lg;
-  color: var(--text-secondary);
+  color: $color-text-secondary;
-  padding: 8px 0;
+  padding: 10px $spacing-md;
-  border-bottom: 2px solid transparent;
+  border-radius: $radius-sm;
-  transition: all 0.2s;
+  transition: all $transition-fast;
+
+  &:hover {
+    color: $color-text-primary;
+    background: $color-bg-hover;
+  }
+
+  &.active {
+    color: $color-text-primary;
+    background: $color-bg-hover;
+    font-weight: $font-weight-medium;
+  }
 }
 
-.nav-link:hover {
+// Hamburger button (mobile only)
-  color: var(--text-primary);
+.hamburger-btn {
+  @include flex-center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: $radius-sm;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  transition: background $transition-fast;
+
+  &:hover {
+    background: $color-bg-hover;
+  }
 }
 
-.nav-link.active {
+.hamburger-icon {
-  color: var(--active-link);
+  font-size: 20px;
-  border-bottom-color: var(--active-link);
+  line-height: 1;
+  color: $color-text-primary;
+}
+
+// Mobile overlay
+.sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
 }
 
 #content {
   flex: 1;
-  width: 100%;
+  min-width: 0;
-  padding: 40px;
+  overflow: hidden;
-  max-width: 1200px;
+  background: $color-bg-primary;
-  margin: 0 auto;
-  box-sizing: border-box;
 }
 
-@media (max-width: 768px) {
+// Common page styles
+.page-title {
+  font-size: $font-size-xl + 2px;
+  font-weight: $font-weight-semibold;
+  color: $color-text-primary;
+  margin: 0;
+}
+
+.page-subtitle {
+  font-size: $font-size-md;
+  color: $color-text-muted;
+  margin: $spacing-sm 0 0;
+}
+
+.icon-btn {
+  @include flex-center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: $radius-sm;
+  background: transparent;
+  color: $color-text-muted;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    background: $color-bg-hover;
+    color: $color-text-primary;
+  }
+}
+
+.search-input {
+  width: 200px;
+
+  .el-input__wrapper {
+    border-radius: 10px;
+    background: $color-bg-tertiary;
+    box-shadow: 0 0 0 1px $color-border inset;
+
+    &.is-focus {
+      box-shadow: 0 0 0 1px $color-text-light inset;
+    }
+  }
+
+  .el-input__inner {
+    color: $color-text-primary;
+  }
+
+  .el-input__prefix {
+    color: $color-text-muted;
+  }
+
+  @include mobile {
+    flex: 1;
+    width: auto;
+  }
+}
+
+// Element Plus global overrides
+.el-button {
+  font-weight: $font-weight-medium;
+}
+
+.el-tag {
+  font-weight: $font-weight-medium;
+}
+
+.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: #404040;
+}
+
+.el-radio {
+  --el-radio-text-color: var(--color-text-primary) !important;
+  --el-radio-input-border-color-hover: #606266 !important;
+  --el-color-primary: #606266 !important;
+}
+
+.el-form-item {
+  margin-bottom: 16px;
+}
+
+.el-loading-mask {
+  border-radius: $radius-md;
+}
+
+// Select overrides
+.el-select__wrapper {
+  border-radius: $radius-md !important;
+  box-shadow: 0 0 0 1px $color-border-light inset !important;
+  transition: all $transition-fast;
+
+  &:hover {
+    box-shadow: 0 0 0 1px $color-border inset !important;
+  }
+
+  &.is-focused {
+    box-shadow: 0 0 0 1px $color-border inset !important;
+  }
+}
+
+.el-select-dropdown {
+  border-radius: 12px !important;
+  border: 1px solid $color-border-light !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: $radius-sm;
+  margin: 2px 0;
+  transition: background $transition-fast;
+
+  &.is-selected {
+    color: $color-text-primary;
+    font-weight: $font-weight-medium;
+  }
+}
+
+// Input overrides
+.el-input__wrapper {
+  border-radius: $radius-md !important;
+  box-shadow: 0 0 0 1px $color-border-light inset !important;
+  transition: all $transition-fast;
+
+  &:hover {
+    box-shadow: 0 0 0 1px $color-border inset !important;
+  }
+
+  &.is-focus {
+    box-shadow: 0 0 0 1px $color-border inset !important;
+  }
+}
+
+// Status pill (shared)
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  padding: 3px 10px;
+  border-radius: 10px;
+  text-transform: capitalize;
+
+  &.running {
+    background: rgba(103, 194, 58, 0.1);
+    color: #67c23a;
+  }
+
+  &.error {
+    background: rgba(245, 108, 108, 0.1);
+    color: #f56c6c;
+  }
+
+  &.waiting {
+    background: rgba(230, 162, 60, 0.1);
+    color: #e6a23c;
+  }
+
+  &.disabled {
+    background: $color-bg-muted;
+    color: $color-text-light;
+  }
+
+  .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+}
+
+// Mobile
+@include mobile {
   .header-content {
-    padding: 0 20px;
+    padding: 0 $spacing-lg;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: $header-height;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    background: $color-bg-primary;
+    transform: translateX(-100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    border-right: 1px solid $color-border-light;
+
+    &.mobile-open {
+      transform: translateX(0);
+    }
+  }
+
+  .sidebar-nav {
+    flex-direction: column;
+    gap: 2px;
   }
 
   #content {
-    padding: 20px;
+    width: 100%;
+  }
+
+  // Select dropdown overflow prevention
+  .el-select-dropdown {
+    max-width: calc(100vw - 32px);
   }
 }
 </style>

web/frpc/src/api/frpc.ts

@@ -5,7 +5,7 @@ import type {
   ProxyDefinition,
   VisitorListResp,
   VisitorDefinition,
-} from '../types/proxy'
+} from '../types'
 
 export const getStatus = () => {
   return http.get<StatusResponse>('/api/status')
@@ -23,6 +23,19 @@ export const reloadConfig = () => {
   return http.get<void>('/api/reload')
 }
 
+// Config lookup API (any source)
+export const getProxyConfig = (name: string) => {
+  return http.get<ProxyDefinition>(
+    `/api/proxy/${encodeURIComponent(name)}/config`,
+  )
+}
+
+export const getVisitorConfig = (name: string) => {
+  return http.get<VisitorDefinition>(
+    `/api/visitor/${encodeURIComponent(name)}/config`,
+  )
+}
+
 // Store API - Proxies
 export const listStoreProxies = () => {
   return http.get<ProxyListResp>('/api/store/proxies')

web/frpc/src/assets/css/_form-layout.scss

@@ -0,0 +1,33 @@
+@use './mixins' as *;
+
+/* Shared form layout styles for proxy/visitor form sections */
+.field-row {
+  display: grid;
+  gap: 16px;
+  align-items: start;
+}
+
+.field-row.two-col {
+  grid-template-columns: 1fr 1fr;
+}
+
+.field-row.three-col {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.field-grow {
+  min-width: 0;
+}
+
+.switch-field :deep(.el-form-item__content) {
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+@include mobile {
+  .field-row.two-col,
+  .field-row.three-col {
+    grid-template-columns: 1fr;
+  }
+}

web/frpc/src/assets/css/_index.scss

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

web/frpc/src/assets/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/frpc/src/assets/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/frpc/src/assets/css/custom.css

@@ -1,105 +0,0 @@
-/* Modern Base Styles */
-* {
-  box-sizing: border-box;
-}
-
-/* Smooth transitions for Element Plus components */
-.el-button,
-.el-card,
-.el-input,
-.el-select,
-.el-tag {
-  transition: all 0.3s ease;
-}
-
-/* Card hover effects */
-.el-card:hover {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
-}
-
-/* Better scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-
-/* Better form layouts */
-.el-form-item {
-  margin-bottom: 18px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .el-row {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-
-  .el-col {
-    padding-left: 10px !important;
-    padding-right: 10px !important;
-  }
-}
-
-/* Input enhancements */
-.el-input__wrapper {
-  transition: all 0.2s ease;
-}
-
-.el-input__wrapper:hover {
-  box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
-}
-
-/* Button enhancements */
-.el-button {
-  font-weight: 500;
-}
-
-/* Tag enhancements */
-.el-tag {
-  font-weight: 500;
-}
-
-/* Card enhancements */
-.el-card__header {
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.el-card__body {
-  padding: 20px;
-}
-
-/* Table enhancements */
-.el-table {
-  font-size: 14px;
-}
-
-.el-table th {
-  font-weight: 600;
-}
-
-/* Empty state */
-.el-empty__description {
-  margin-top: 16px;
-  font-size: 14px;
-}
-
-/* Loading state */
-.el-loading-mask {
-  border-radius: 12px;
-}

web/frpc/src/assets/css/dark.css

@@ -1,48 +1,51 @@
-/* Dark Mode Theme */
+/* Dark mode styles */
 html.dark {
-  --el-bg-color: #1e1e2e;
+  --el-bg-color: #212121;
-  --el-bg-color-page: #1a1a2e;
+  --el-bg-color-page: #181818;
-  --el-bg-color-overlay: #27293d;
+  --el-bg-color-overlay: #303030;
-  --el-fill-color-blank: #1e1e2e;
+  --el-fill-color-blank: #212121;
-  background-color: #1a1a2e;
+  --el-border-color: #404040;
+  --el-border-color-light: #353535;
+  --el-border-color-lighter: #2a2a2a;
+  --el-text-color-primary: #e5e7eb;
+  --el-text-color-secondary: #888888;
+  --el-text-color-placeholder: #afafaf;
+  background-color: #212121;
+  color-scheme: dark;
 }
 
-html.dark body {
+/* Scrollbar */
-  background-color: #1a1a2e;
+html.dark ::-webkit-scrollbar {
-  color: #e5e7eb;
+  width: 6px;
+  height: 6px;
 }
 
-/* Dark mode scrollbar */
 html.dark ::-webkit-scrollbar-track {
-  background: #27293d;
+  background: #303030;
 }
 
 html.dark ::-webkit-scrollbar-thumb {
-  background: #3a3d5c;
+  background: #404040;
+  border-radius: 3px;
 }
 
 html.dark ::-webkit-scrollbar-thumb:hover {
-  background: #4a4d6c;
+  background: #505050;
 }
 
-/* Dark mode cards */
+/* Form */
-html.dark .el-card {
+html.dark .el-form-item__label {
-  background-color: #27293d;
+  color: #e5e7eb;
-  border-color: #3a3d5c;
 }
 
-html.dark .el-card__header {
+/* Input */
-  border-bottom-color: #3a3d5c;
-}
-
-/* Dark mode inputs */
 html.dark .el-input__wrapper {
-  background-color: #27293d;
+  background: var(--color-bg-input);
-  box-shadow: 0 0 0 1px #3a3d5c inset;
+  box-shadow: 0 0 0 1px #404040 inset;
 }
 
 html.dark .el-input__wrapper:hover {
-  box-shadow: 0 0 0 1px #4a4d6c inset;
+  box-shadow: 0 0 0 1px #505050 inset;
 }
 
 html.dark .el-input__wrapper.is-focus {
@@ -54,71 +57,44 @@ html.dark .el-input__inner {
 }
 
 html.dark .el-input__inner::placeholder {
-  color: #6b7280;
+  color: #afafaf;
 }
 
-/* Dark mode textarea */
 html.dark .el-textarea__inner {
-  background-color: #1e1e2d;
+  background: var(--color-bg-input);
-  border-color: #3a3d5c;
+  box-shadow: 0 0 0 1px #404040 inset;
   color: #e5e7eb;
 }
 
-html.dark .el-textarea__inner::placeholder {
+html.dark .el-textarea__inner:hover {
-  color: #6b7280;
+  box-shadow: 0 0 0 1px #505050 inset;
 }
 
-/* Dark mode table */
+html.dark .el-textarea__inner:focus {
-html.dark .el-table {
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
-  background-color: #27293d;
+}
+
+/* Select */
+html.dark .el-select__wrapper {
+  background: var(--color-bg-input);
+  box-shadow: 0 0 0 1px #404040 inset;
+}
+
+html.dark .el-select__wrapper:hover {
+  box-shadow: 0 0 0 1px #505050 inset;
+}
+
+html.dark .el-select__selected-item {
   color: #e5e7eb;
 }
 
-html.dark .el-table th.el-table__cell {
+html.dark .el-select__placeholder {
-  background-color: #1e1e2e;
+  color: #afafaf;
-  color: #e5e7eb;
-}
-
-html.dark .el-table tr {
-  background-color: #27293d;
-}
-
-html.dark .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
-  background-color: #1e1e2e;
-}
-
-html.dark .el-table__row:hover > td.el-table__cell {
-  background-color: #2a2a3c !important;
-}
-
-/* Dark mode tags */
-html.dark .el-tag--info {
-  background-color: #3a3d5c;
-  border-color: #3a3d5c;
-  color: #e5e7eb;
-}
-
-/* Dark mode buttons */
-html.dark .el-button--default {
-  background-color: #27293d;
-  border-color: #3a3d5c;
-  color: #e5e7eb;
-}
-
-html.dark .el-button--default:hover {
-  background-color: #2a2a3c;
-  border-color: #4a4d6c;
-  color: #fff;
-}
-
-/* Dark mode select */
-html.dark .el-select .el-input__wrapper {
-  background-color: #27293d;
 }
 
 html.dark .el-select-dropdown {
-  background-color: #27293d;
+  background: #303030;
-  border-color: #3a3d5c;
+  border-color: #404040;
 }
 
 html.dark .el-select-dropdown__item {
@@ -126,55 +102,92 @@ html.dark .el-select-dropdown__item {
 }
 
 html.dark .el-select-dropdown__item:hover {
-  background-color: #2a2a3c;
+  background: #3a3a3a;
 }
 
-/* Dark mode dialog */
+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: #303030;
+  border-color: #404040;
+  color: #b0b0b0;
+}
+
+/* Button */
+html.dark .el-button--default {
+  background: #303030;
+  border-color: #404040;
+  color: #e5e7eb;
+}
+
+html.dark .el-button--default:hover {
+  background: #3a3a3a;
+  border-color: #505050;
+  color: #e5e7eb;
+}
+
+/* Card */
+html.dark .el-card {
+  background: #212121;
+  border-color: #353535;
+  color: #b0b0b0;
+}
+
+html.dark .el-card__header {
+  border-bottom-color: #353535;
+  color: #e5e7eb;
+}
+
+/* Dialog */
 html.dark .el-dialog {
-  background-color: #27293d;
+  background: #212121;
-}
-
-html.dark .el-dialog__header {
-  border-bottom-color: #3a3d5c;
 }
 
 html.dark .el-dialog__title {
   color: #e5e7eb;
 }
 
-html.dark .el-dialog__body {
+/* Message */
-  color: #e5e7eb;
+html.dark .el-message {
+  background: #303030;
+  border-color: #404040;
 }
 
-/* Dark mode message box */
+html.dark .el-message--success {
-html.dark .el-message-box {
+  background: #1e3d2e;
-  background-color: #27293d;
+  border-color: #3d6b4f;
-  border-color: #3a3d5c;
 }
 
-html.dark .el-message-box__title {
+html.dark .el-message--warning {
-  color: #e5e7eb;
+  background: #3d3020;
+  border-color: #6b5020;
 }
 
-html.dark .el-message-box__message {
+html.dark .el-message--error {
-  color: #e5e7eb;
+  background: #3d2027;
+  border-color: #5c2d2d;
 }
 
-/* Dark mode empty */
+/* Loading */
-html.dark .el-empty__description {
-  color: #9ca3af;
-}
-
-/* Dark mode loading */
 html.dark .el-loading-mask {
-  background-color: rgba(30, 30, 46, 0.9);
+  background-color: rgba(33, 33, 33, 0.9);
 }
 
-html.dark .el-loading-text {
+/* Overlay */
-  color: #e5e7eb;
+html.dark .el-overlay {
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
-/* Dark mode tooltip */
+/* Tooltip */
-html.dark .el-tooltip__trigger {
+html.dark .el-tooltip__popper {
-  color: #e5e7eb;
+  background: #303030 !important;
+  border-color: #404040 !important;
+  color: #e5e7eb !important;
 }

web/frpc/src/assets/css/var.css

@@ -0,0 +1,117 @@
+: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;
+
+  /* Button colors */
+  --color-btn-primary: #303133;
+  --color-btn-primary-hover: #4a4d5c;
+
+  /* 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: #212121;
+  --color-bg-secondary: #181818;
+  --color-bg-tertiary: #303030;
+  --color-bg-surface: #303030;
+  --color-bg-muted: #303030;
+  --color-bg-input: #2f2f2f;
+  --color-bg-hover: #3a3a3a;
+  --color-bg-active: #454545;
+
+  /* Border colors */
+  --color-border: #404040;
+  --color-border-light: #353535;
+  --color-border-lighter: #2a2a2a;
+  --color-border-extra-light: #222222;
+
+  /* Status colors */
+  --color-primary: #409eff;
+  --color-danger: #f87171;
+  --color-danger-dark: #f87171;
+  --color-danger-light: #3d2027;
+  --color-info: #888888;
+
+  /* Button colors */
+  --color-btn-primary: #404040;
+  --color-btn-primary-hover: #505050;
+
+  /* Dark overrides */
+  --el-text-color-regular: var(--color-text-primary);
+  --el-overlay-color: rgba(0, 0, 0, 0.7);
+
+  background-color: #181818;
+  color-scheme: dark;
+}

web/frpc/src/components/ActionButton.vue

@@ -0,0 +1,144 @@
+<template>
+  <button
+    type="button"
+    class="action-button"
+    :class="[variant, size, { 'is-loading': loading, 'is-danger': danger }]"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <div v-if="loading" class="spinner"></div>
+    <span v-if="loading && loadingText">{{ loadingText }}</span>
+    <slot v-else />
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  variant?: 'primary' | 'secondary' | 'outline'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+  loading?: boolean
+  loadingText?: string
+  danger?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'medium',
+  disabled: false,
+  loading: false,
+  loadingText: '',
+  danger: false,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  border-radius: $radius-md;
+  font-weight: $font-weight-medium;
+  cursor: pointer;
+  transition: all $transition-fast;
+  border: 1px solid transparent;
+  white-space: nowrap;
+
+  .spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.75s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  &.small {
+    padding: 5px $spacing-md;
+    font-size: $font-size-sm;
+  }
+
+  &.medium {
+    padding: $spacing-sm $spacing-lg;
+    font-size: $font-size-md;
+  }
+
+  &.large {
+    padding: 10px $spacing-xl;
+    font-size: $font-size-lg;
+  }
+
+  &.primary {
+    background: $color-btn-primary;
+    border-color: $color-btn-primary;
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background: $color-btn-primary-hover;
+      border-color: $color-btn-primary-hover;
+    }
+  }
+
+  &.secondary {
+    background: $color-bg-hover;
+    border-color: $color-border-light;
+    color: $color-text-primary;
+
+    &:hover:not(:disabled) {
+      border-color: $color-border;
+    }
+  }
+
+  &.outline {
+    background: transparent;
+    border-color: $color-border;
+    color: $color-text-primary;
+
+    &:hover:not(:disabled) {
+      background: $color-bg-hover;
+    }
+  }
+
+  &.is-danger {
+    &.primary {
+      background: $color-danger;
+      border-color: $color-danger;
+
+      &:hover:not(:disabled) {
+        background: $color-danger-dark;
+        border-color: $color-danger-dark;
+      }
+    }
+
+    &.outline, &.secondary {
+      color: $color-danger;
+
+      &:hover:not(:disabled) {
+        border-color: $color-danger;
+        background: rgba(239, 68, 68, 0.08);
+      }
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+</style>

web/frpc/src/components/BaseDialog.vue

@@ -0,0 +1,142 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    :width="dialogWidth"
+    :destroy-on-close="destroyOnClose"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    :append-to-body="appendToBody"
+    :top="dialogTop"
+    :fullscreen="isMobile"
+    class="base-dialog"
+    :class="{ 'mobile-dialog': isMobile }"
+  >
+    <slot />
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useResponsive } from '../composables/useResponsive'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title: string
+    width?: string
+    destroyOnClose?: boolean
+    closeOnClickModal?: boolean
+    closeOnPressEscape?: boolean
+    appendToBody?: boolean
+    top?: string
+  }>(),
+  {
+    width: '480px',
+    destroyOnClose: true,
+    closeOnClickModal: true,
+    closeOnPressEscape: true,
+    appendToBody: false,
+    top: '15vh',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+
+const { isMobile } = useResponsive()
+
+const dialogWidth = computed(() => {
+  if (isMobile.value) return '100%'
+  return props.width
+})
+
+const dialogTop = computed(() => {
+  if (isMobile.value) return '0'
+  return props.top
+})
+</script>
+
+<style lang="scss">
+.base-dialog.el-dialog {
+  border-radius: 16px;
+
+  .el-dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px;
+    min-height: 42px;
+    margin: 0;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 8px;
+      right: 8px;
+      height: 1px;
+      background: $color-border-lighter;
+    }
+  }
+
+  .el-dialog__title {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+  }
+
+  .el-dialog__body {
+    padding: 16px 8px;
+  }
+
+  .el-dialog__headerbtn {
+    position: static;
+    width: 32px;
+    height: 32px;
+    @include flex-center;
+    border-radius: $radius-sm;
+    transition: background $transition-fast;
+
+    &:hover {
+      background: $color-bg-hover;
+    }
+  }
+
+  .el-dialog__footer {
+    padding: 8px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  &.mobile-dialog {
+    border-radius: 0;
+    margin: 0;
+    height: 100%;
+    max-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+
+    .el-dialog__body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 12px;
+    }
+
+    .el-dialog__footer {
+      padding: 8px 12px;
+      padding-bottom: calc(8px + env(safe-area-inset-bottom));
+    }
+  }
+}
+</style>

web/frpc/src/components/ConfigField.vue

@@ -0,0 +1,249 @@
+<template>
+  <!-- Edit mode: use el-form-item for validation -->
+  <el-form-item v-if="!readonly" :label="label" :prop="prop" :class="($attrs.class as string)">
+    <!-- text -->
+    <el-input
+      v-if="type === 'text'"
+      :model-value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+    <!-- number -->
+    <el-input
+      v-else-if="type === 'number'"
+      :model-value="modelValue != null ? String(modelValue) : ''"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @update:model-value="handleNumberInput($event)"
+    />
+    <!-- switch -->
+    <div v-else-if="type === 'switch'" class="config-field-switch-wrap">
+      <el-switch
+        :model-value="modelValue"
+        :disabled="disabled"
+        size="small"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+      <span v-if="tip" class="config-field-switch-tip">{{ tip }}</span>
+    </div>
+    <!-- select -->
+    <PopoverMenu
+      v-else-if="type === 'select'"
+      :model-value="modelValue"
+      :display-value="selectDisplayValue"
+      :disabled="disabled"
+      :width="selectWidth"
+      selectable
+      full-width
+      filterable
+      :filter-placeholder="placeholder || 'Select...'"
+      @update:model-value="$emit('update:modelValue', $event)"
+    >
+      <template #default="{ filterText }">
+        <PopoverMenuItem
+          v-for="opt in filteredOptions(filterText)"
+          :key="opt.value"
+          :value="opt.value"
+        >
+          {{ opt.label }}
+        </PopoverMenuItem>
+      </template>
+    </PopoverMenu>
+    <!-- password -->
+    <el-input
+      v-else-if="type === 'password'"
+      :model-value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      type="password"
+      show-password
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+    <!-- kv -->
+    <KeyValueEditor
+      v-else-if="type === 'kv'"
+      :model-value="modelValue"
+      :key-placeholder="keyPlaceholder"
+      :value-placeholder="valuePlaceholder"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+    <!-- tags (string array) -->
+    <StringListEditor
+      v-else-if="type === 'tags'"
+      :model-value="modelValue || []"
+      :placeholder="placeholder"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+    <div v-if="tip && type !== 'switch'" class="config-field-tip">{{ tip }}</div>
+  </el-form-item>
+
+  <!-- Readonly mode: plain display -->
+  <div v-else class="config-field-readonly" :class="($attrs.class as string)">
+    <div class="config-field-label">{{ label }}</div>
+    <!-- switch readonly -->
+    <el-switch
+      v-if="type === 'switch'"
+      :model-value="modelValue"
+      disabled
+      size="small"
+    />
+    <!-- kv readonly -->
+    <KeyValueEditor
+      v-else-if="type === 'kv'"
+      :model-value="modelValue || []"
+      :key-placeholder="keyPlaceholder"
+      :value-placeholder="valuePlaceholder"
+      readonly
+    />
+    <!-- tags readonly -->
+    <StringListEditor
+      v-else-if="type === 'tags'"
+      :model-value="modelValue || []"
+      readonly
+    />
+    <!-- text/number/select/password readonly -->
+    <el-input
+      v-else
+      :model-value="displayValue"
+      disabled
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import KeyValueEditor from './KeyValueEditor.vue'
+import StringListEditor from './StringListEditor.vue'
+import PopoverMenu from './PopoverMenu.vue'
+import PopoverMenuItem from './PopoverMenuItem.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    type?: 'text' | 'number' | 'switch' | 'select' | 'password' | 'kv' | 'tags'
+    readonly?: boolean
+    modelValue?: any
+    placeholder?: string
+    disabled?: boolean
+    tip?: string
+    prop?: string
+    options?: Array<{ label: string; value: string | number }>
+    min?: number
+    max?: number
+    keyPlaceholder?: string
+    valuePlaceholder?: string
+  }>(),
+  {
+    type: 'text',
+    readonly: false,
+    modelValue: undefined,
+    placeholder: '',
+    disabled: false,
+    tip: '',
+    prop: '',
+    options: () => [],
+    min: undefined,
+    max: undefined,
+    keyPlaceholder: 'Key',
+    valuePlaceholder: 'Value',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+const handleNumberInput = (val: string) => {
+  if (val === '') {
+    emit('update:modelValue', undefined)
+    return
+  }
+  const num = Number(val)
+  if (!isNaN(num)) {
+    let clamped = num
+    if (props.min != null && clamped < props.min) clamped = props.min
+    if (props.max != null && clamped > props.max) clamped = props.max
+    emit('update:modelValue', clamped)
+  }
+}
+
+const selectDisplayValue = computed(() => {
+  const opt = props.options.find((o) => o.value === props.modelValue)
+  return opt ? opt.label : ''
+})
+
+const selectWidth = computed(() => {
+  return Math.max(160, ...props.options.map((o) => o.label.length * 10 + 60))
+})
+
+const filteredOptions = (filterText: string) => {
+  if (!filterText) return props.options
+  const lower = filterText.toLowerCase()
+  return props.options.filter((o) => o.label.toLowerCase().includes(lower))
+}
+
+const displayValue = computed(() => {
+  if (props.modelValue == null || props.modelValue === '') return '—'
+  if (props.type === 'select') {
+    const opt = props.options.find((o) => o.value === props.modelValue)
+    return opt ? opt.label : String(props.modelValue)
+  }
+  if (props.type === 'password') {
+    return props.modelValue ? '••••••' : '—'
+  }
+  return String(props.modelValue)
+})
+</script>
+
+<style scoped>
+.config-field-switch-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  width: 100%;
+}
+
+.config-field-switch-tip {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.config-field-tip {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  margin-top: 4px;
+}
+
+.config-field-readonly {
+  margin-bottom: 16px;
+}
+
+.config-field-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  margin-bottom: 6px;
+  line-height: 1;
+}
+
+.config-field-readonly :deep(*) {
+  cursor: default !important;
+}
+
+.config-field-readonly :deep(.el-input.is-disabled .el-input__wrapper) {
+  background: var(--color-bg-tertiary);
+  box-shadow: 0 0 0 1px var(--color-border-lighter) inset;
+}
+
+.config-field-readonly :deep(.el-input.is-disabled .el-input__inner) {
+  color: var(--color-text-primary);
+  -webkit-text-fill-color: var(--color-text-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.config-field-readonly :deep(.el-switch.is-disabled) {
+  opacity: 1;
+}
+</style>

web/frpc/src/components/ConfigSection.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="config-section-card">
+    <!-- Collapsible: header is a separate clickable area -->
+    <template v-if="collapsible">
+      <div
+        v-if="title"
+        class="section-header clickable"
+        @click="handleToggle"
+      >
+        <h3 class="section-title">{{ title }}</h3>
+        <div class="section-header-right">
+          <span v-if="readonly && !hasValue" class="not-configured-badge">
+            Not configured
+          </span>
+          <el-icon v-if="canToggle" class="collapse-arrow" :class="{ expanded }">
+            <ArrowDown />
+          </el-icon>
+        </div>
+      </div>
+      <div class="collapse-wrapper" :class="{ expanded }">
+        <div class="collapse-inner">
+          <div class="section-body">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Non-collapsible: title and content in one area -->
+    <template v-else>
+      <div class="section-body">
+        <h3 v-if="title" class="section-title section-title-inline">{{ title }}</h3>
+        <slot />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { ArrowDown } from '@element-plus/icons-vue'
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    collapsible?: boolean
+    readonly?: boolean
+    hasValue?: boolean
+  }>(),
+  {
+    title: '',
+    collapsible: false,
+    readonly: false,
+    hasValue: true,
+  },
+)
+
+const computeInitial = () => {
+  if (!props.collapsible) return true
+  return props.hasValue
+}
+
+const expanded = ref(computeInitial())
+
+// Only auto-expand when hasValue goes from false to true (async data loaded)
+// Never auto-collapse — don't override user interaction
+watch(
+  () => props.hasValue,
+  (newVal, oldVal) => {
+    if (newVal && !oldVal && props.collapsible) {
+      expanded.value = true
+    }
+  },
+)
+
+const canToggle = computed(() => {
+  if (!props.collapsible) return false
+  if (props.readonly && !props.hasValue) return false
+  return true
+})
+
+const handleToggle = () => {
+  if (canToggle.value) {
+    expanded.value = !expanded.value
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.config-section-card {
+  background: var(--el-bg-color);
+  border: 1px solid var(--color-border-lighter);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+/* Collapsible header */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+}
+
+.section-header.clickable {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.section-header.clickable:hover {
+  background: var(--color-bg-hover);
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+/* Inline title for non-collapsible sections */
+.section-title-inline {
+  margin-bottom: 16px;
+}
+
+.section-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.not-configured-badge {
+  font-size: 11px;
+  color: var(--color-text-light);
+  background: var(--color-bg-muted);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.collapse-arrow {
+  transition: transform 0.3s;
+  color: var(--color-text-muted);
+}
+
+.collapse-arrow.expanded {
+  transform: rotate(-180deg);
+}
+
+/* Grid-based collapse animation */
+.collapse-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+.collapse-wrapper.expanded {
+  grid-template-rows: 1fr;
+}
+
+.collapse-inner {
+  overflow: hidden;
+}
+
+.section-body {
+  padding: 20px 20px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-body :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.section-body :deep(.config-field-readonly) {
+  margin-bottom: 0;
+}
+
+@include mobile {
+  .section-body {
+    padding: 16px;
+  }
+}
+</style>

web/frpc/src/components/ConfirmDialog.vue

@@ -0,0 +1,84 @@
+<template>
+  <BaseDialog
+    v-model="visible"
+    :title="title"
+    width="400px"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+  >
+    <p class="confirm-message">{{ message }}</p>
+    <template #footer>
+      <div class="dialog-footer">
+        <ActionButton variant="outline" @click="handleCancel">
+          {{ cancelText }}
+        </ActionButton>
+        <ActionButton
+          :danger="danger"
+          :loading="loading"
+          @click="handleConfirm"
+        >
+          {{ confirmText }}
+        </ActionButton>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import BaseDialog from './BaseDialog.vue'
+import ActionButton from './ActionButton.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title: string
+    message: string
+    confirmText?: string
+    cancelText?: string
+    danger?: boolean
+    loading?: boolean
+  }>(),
+  {
+    confirmText: 'Confirm',
+    cancelText: 'Cancel',
+    danger: false,
+    loading: false,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+
+const handleConfirm = () => {
+  emit('confirm')
+}
+
+const handleCancel = () => {
+  visible.value = false
+  emit('cancel')
+}
+</script>
+
+<style scoped lang="scss">
+.confirm-message {
+  margin: 0;
+  font-size: $font-size-md;
+  color: $color-text-secondary;
+  line-height: 1.6;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-md;
+}
+</style>

web/frpc/src/components/FilterDropdown.vue

@@ -0,0 +1,102 @@
+<template>
+  <PopoverMenu
+    :model-value="modelValue"
+    :width="width"
+    placement="bottom-start"
+    selectable
+    :display-value="displayLabel"
+    @update:model-value="$emit('update:modelValue', $event as string)"
+  >
+    <template #trigger>
+      <button class="filter-trigger" :class="{ 'has-value': modelValue }" :style="minWidth && !isMobile ? { minWidth: minWidth + 'px' } : undefined">
+        <span class="filter-label">{{ label }}:</span>
+        <span class="filter-value">{{ displayLabel }}</span>
+        <el-icon class="filter-arrow"><ArrowDown /></el-icon>
+      </button>
+    </template>
+    <PopoverMenuItem value="">{{ allLabel }}</PopoverMenuItem>
+    <PopoverMenuItem
+      v-for="opt in options"
+      :key="opt.value"
+      :value="opt.value"
+    >
+      {{ opt.label }}
+    </PopoverMenuItem>
+  </PopoverMenu>
+</template>
+
+<script setup lang="ts">
+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
+  label: string
+  options: Array<{ label: string; value: string }>
+  allLabel?: string
+  width?: number
+  minWidth?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allLabel: 'All',
+  width: 150,
+})
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const displayLabel = computed(() => {
+  if (!props.modelValue) return props.allLabel
+  const found = props.options.find((o) => o.value === props.modelValue)
+  return found ? found.label : props.modelValue
+})
+</script>
+
+<style scoped lang="scss">
+.filter-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: 7px 12px;
+  background: $color-bg-primary;
+  border: none;
+  border-radius: $radius-md;
+  box-shadow: 0 0 0 1px $color-border-light inset;
+  font-size: $font-size-sm;
+  color: $color-text-secondary;
+  cursor: pointer;
+  transition: box-shadow $transition-fast;
+  white-space: nowrap;
+
+  &:hover {
+    box-shadow: 0 0 0 1px $color-border inset;
+  }
+
+  &.has-value .filter-value {
+    color: $color-text-primary;
+  }
+}
+
+.filter-label {
+  color: $color-text-muted;
+  flex-shrink: 0;
+}
+
+.filter-value {
+  color: $color-text-secondary;
+  margin-left: auto;
+}
+
+.filter-arrow {
+  font-size: 12px;
+  color: $color-text-light;
+  flex-shrink: 0;
+}
+</style>

web/frpc/src/components/KeyValueEditor.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="kv-editor">
+    <template v-if="readonly">
+      <div v-if="modelValue.length === 0" class="kv-empty">—</div>
+      <div v-for="(entry, index) in modelValue" :key="index" class="kv-readonly-row">
+        <span class="kv-readonly-key">{{ entry.key }}</span>
+        <span class="kv-readonly-value">{{ entry.value }}</span>
+      </div>
+    </template>
+    <template v-else>
       <div v-for="(entry, index) in modelValue" :key="index" class="kv-row">
         <el-input
           :model-value="entry.key"
@@ -37,6 +45,7 @@
         </svg>
         Add
       </button>
+    </template>
   </div>
 </template>
 
@@ -50,11 +59,13 @@ interface Props {
   modelValue: KVEntry[]
   keyPlaceholder?: string
   valuePlaceholder?: string
+  readonly?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   keyPlaceholder: 'Key',
   valuePlaceholder: 'Value',
+  readonly: false,
 })
 
 const emit = defineEmits<{
@@ -129,25 +140,45 @@ html.dark .kv-remove-btn:hover {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 14px;
+  padding: 5px 12px;
-  border: 1px dashed var(--el-border-color);
+  border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: 6px;
   background: transparent;
-  color: var(--el-text-color-secondary);
+  color: var(--color-text-secondary);
   font-size: 13px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.15s;
   align-self: flex-start;
 }
 
 .kv-add-btn svg {
-  width: 14px;
+  width: 13px;
-  height: 14px;
+  height: 13px;
 }
 
 .kv-add-btn:hover {
-  color: var(--el-color-primary);
+  background: var(--color-bg-hover);
-  border-color: var(--el-color-primary);
+}
-  background: var(--el-color-primary-light-9);
+
+.kv-empty {
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.kv-readonly-row {
+  display: flex;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 13px;
+}
+
+.kv-readonly-key {
+  color: var(--el-text-color-secondary);
+  min-width: 100px;
+}
+
+.kv-readonly-value {
+  color: var(--el-text-color-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 </style>

web/frpc/src/components/PopoverMenu.vue

@@ -0,0 +1,303 @@
+<template>
+  <div
+    class="popover-menu-wrapper"
+    :class="{ 'is-full-width': fullWidth }"
+    ref="wrapperRef"
+  >
+    <el-popover
+      :visible="isOpen"
+      :placement="placement"
+      trigger="click"
+      :width="popoverWidth"
+      popper-class="popover-menu-popper"
+      :persistent="false"
+      :hide-after="0"
+      :offset="8"
+      :show-arrow="false"
+    >
+      <template #reference>
+        <div
+          v-if="filterable"
+          class="popover-trigger filterable-trigger"
+          :class="{ 'show-clear': showClearIcon }"
+          @click.stop
+          @mouseenter="isHovering = true"
+          @mouseleave="isHovering = false"
+        >
+          <el-input
+            ref="filterInputRef"
+            :model-value="inputValue"
+            :placeholder="inputPlaceholder"
+            :disabled="disabled"
+            :readonly="!isOpen"
+            @click="handleInputClick"
+            @update:model-value="handleFilterInput"
+          >
+            <template #suffix>
+              <el-icon
+                v-if="showClearIcon"
+                class="clear-icon"
+                @click.stop="handleClear"
+              >
+                <CircleClose />
+              </el-icon>
+              <el-icon v-else class="arrow-icon"><ArrowDown /></el-icon>
+            </template>
+          </el-input>
+        </div>
+        <div v-else class="popover-trigger" @click.stop="toggle">
+          <slot name="trigger" />
+        </div>
+      </template>
+      <div class="popover-menu-content">
+        <slot :close="close" :filter-text="filterText" />
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script lang="ts">
+// Module-level singleton for coordinating popover menus
+const popoverEventTarget = new EventTarget()
+const CLOSE_ALL_EVENT = 'close-all-popovers'
+</script>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  provide,
+  inject,
+  watch,
+  onMounted,
+  onUnmounted,
+} from 'vue'
+import { formItemContextKey, ElInput } from 'element-plus'
+import { ArrowDown, CircleClose } from '@element-plus/icons-vue'
+
+interface Props {
+  width?: number
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+  modelValue?: string | number | null
+  selectable?: boolean
+  disabled?: boolean
+  fullWidth?: boolean
+  filterable?: boolean
+  filterPlaceholder?: string
+  displayValue?: string
+  clearable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 160,
+  placement: 'bottom-end',
+  modelValue: null,
+  selectable: false,
+  disabled: false,
+  fullWidth: false,
+  filterable: false,
+  filterPlaceholder: 'Search...',
+  displayValue: '',
+  clearable: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | null): void
+  (e: 'filter-change', text: string): void
+}>()
+
+const elFormItem = inject(formItemContextKey, undefined)
+
+const isOpen = ref(false)
+const wrapperRef = ref<HTMLElement | null>(null)
+const instanceId = Symbol()
+const filterText = ref('')
+const filterInputRef = ref<InstanceType<typeof ElInput> | null>(null)
+const isHovering = ref(false)
+const triggerWidth = ref(0)
+
+const popoverWidth = computed(() => {
+  if (props.filterable && triggerWidth.value > 0) {
+    return Math.max(triggerWidth.value, props.width)
+  }
+  return props.width
+})
+
+const updateTriggerWidth = () => {
+  if (wrapperRef.value) {
+    triggerWidth.value = wrapperRef.value.offsetWidth
+  }
+}
+
+const inputValue = computed(() => {
+  if (isOpen.value) return filterText.value
+  if (props.modelValue) return props.displayValue || ''
+  return ''
+})
+
+const inputPlaceholder = computed(() => {
+  if (isOpen.value) return props.filterPlaceholder
+  if (!props.modelValue) return props.displayValue || props.filterPlaceholder
+  return props.filterPlaceholder
+})
+
+const showClearIcon = computed(() => {
+  return (
+    props.clearable && props.modelValue && isHovering.value && !props.disabled
+  )
+})
+
+watch(isOpen, (open) => {
+  if (!open && props.filterable) {
+    filterText.value = ''
+    emit('filter-change', '')
+  }
+})
+
+const handleInputClick = () => {
+  if (props.disabled) return
+  if (!isOpen.value) {
+    updateTriggerWidth()
+    popoverEventTarget.dispatchEvent(
+      new CustomEvent(CLOSE_ALL_EVENT, { detail: instanceId }),
+    )
+    isOpen.value = true
+  }
+}
+
+const handleFilterInput = (value: string) => {
+  filterText.value = value
+  emit('filter-change', value)
+}
+
+const handleClear = () => {
+  emit('update:modelValue', '')
+  filterText.value = ''
+  emit('filter-change', '')
+  elFormItem?.validate?.('change')
+}
+
+const toggle = () => {
+  if (props.disabled) return
+  if (!isOpen.value) {
+    popoverEventTarget.dispatchEvent(
+      new CustomEvent(CLOSE_ALL_EVENT, { detail: instanceId }),
+    )
+  }
+  isOpen.value = !isOpen.value
+}
+
+const handleCloseAll = (e: Event) => {
+  const customEvent = e as CustomEvent
+  if (customEvent.detail !== instanceId) {
+    isOpen.value = false
+  }
+}
+
+const close = () => {
+  isOpen.value = false
+}
+
+const select = (value: string | number) => {
+  emit('update:modelValue', value)
+  if (props.filterable) {
+    filterText.value = ''
+    emit('filter-change', '')
+    filterInputRef.value?.blur()
+  }
+  close()
+  elFormItem?.validate?.('change')
+}
+
+const handleClickOutside = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+  if (wrapperRef.value && !wrapperRef.value.contains(target)) {
+    close()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  popoverEventTarget.addEventListener(CLOSE_ALL_EVENT, handleCloseAll)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  popoverEventTarget.removeEventListener(CLOSE_ALL_EVENT, handleCloseAll)
+})
+
+provide('popoverMenu', {
+  close,
+  select,
+  selectable: props.selectable,
+  modelValue: () => props.modelValue,
+})
+</script>
+
+<style scoped lang="scss">
+.popover-menu-wrapper {
+  display: inline-block;
+
+  &.is-full-width {
+    display: block;
+    width: 100%;
+
+    .popover-trigger {
+      display: block;
+      width: 100%;
+    }
+  }
+}
+
+.popover-trigger {
+  display: inline-flex;
+
+  &.filterable-trigger {
+    display: block;
+    width: 100%;
+
+    :deep(.el-input__wrapper) {
+      cursor: pointer;
+    }
+
+    :deep(.el-input__suffix) {
+      cursor: pointer;
+    }
+
+    .arrow-icon {
+      color: var(--el-text-color-placeholder);
+      transition: transform 0.2s;
+    }
+
+    .clear-icon {
+      color: var(--el-text-color-placeholder);
+      transition: color 0.2s;
+
+      &:hover {
+        color: var(--el-text-color-regular);
+      }
+    }
+  }
+}
+
+.popover-menu-content {
+  padding: 4px;
+}
+</style>
+
+<style lang="scss">
+.popover-menu-popper {
+  padding: 0 !important;
+  border-radius: 12px !important;
+  border: 1px solid $color-border-light !important;
+  box-shadow:
+    0 10px 25px -5px rgba(0, 0, 0, 0.1),
+    0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
+}
+</style>

web/frpc/src/components/PopoverMenuItem.vue

@@ -0,0 +1,125 @@
+<template>
+  <button
+    class="popover-menu-item"
+    :class="{
+      'is-danger': danger,
+      'is-selected': isSelected,
+      'is-disabled': disabled,
+    }"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <span class="item-content">
+      <slot />
+    </span>
+    <el-icon v-if="isSelected" class="check-icon">
+      <Check />
+    </el-icon>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { Check } from '@element-plus/icons-vue'
+
+interface Props {
+  danger?: boolean
+  disabled?: boolean
+  value?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  danger: false,
+  disabled: false,
+  value: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const popoverMenu = inject<{
+  close: () => void
+  select: (value: string | number) => void
+  selectable: boolean
+  modelValue: () => string | number | null
+}>('popoverMenu')
+
+const isSelected = computed(() => {
+  if (!popoverMenu?.selectable || props.value === undefined) return false
+  return popoverMenu.modelValue() === props.value
+})
+
+const handleClick = () => {
+  if (props.disabled) return
+
+  if (popoverMenu?.selectable && props.value !== undefined) {
+    popoverMenu.select(props.value)
+  } else {
+    emit('click')
+    popoverMenu?.close()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.popover-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: $color-text-secondary;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  text-align: left;
+  white-space: nowrap;
+
+  &:hover:not(.is-disabled) {
+    background: $color-bg-hover;
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.is-danger {
+    color: $color-danger;
+
+    .item-content :deep(.el-icon) {
+      color: $color-danger;
+    }
+
+    &:hover:not(.is-disabled) {
+      background: $color-danger-light;
+    }
+  }
+
+  &.is-selected {
+    background: $color-bg-hover;
+  }
+
+  .item-content {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: inherit;
+
+    :deep(.el-icon) {
+      font-size: 16px;
+      color: $color-text-light;
+    }
+  }
+
+  .check-icon {
+    font-size: 16px;
+    color: $color-primary;
+    flex-shrink: 0;
+  }
+}
+</style>

web/frpc/src/components/ProxyCard.vue

@@ -1,104 +1,49 @@
 <template>
-  <div
+  <div class="proxy-card" :class="{ 'has-error': proxy.err }" @click="$emit('click', proxy)">
-    class="proxy-card"
-    :class="{ 'has-error': proxy.err, 'is-store': isStore }"
-  >
     <div class="card-main">
       <div class="card-left">
         <div class="card-header">
           <span class="proxy-name">{{ proxy.name }}</span>
-          <span class="type-tag" :class="`type-${proxy.type}`">{{
+          <span class="type-tag">{{ proxy.type.toUpperCase() }}</span>
-            proxy.type.toUpperCase()
+          <span class="status-pill" :class="statusClass">
-          }}</span>
-          <span v-if="isStore" class="source-tag">
-            <svg
-              class="store-icon"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M2 4.5A1.5 1.5 0 013.5 3h9A1.5 1.5 0 0114 4.5v1a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-1z"
-                fill="currentColor"
-              />
-              <path
-                d="M3 7v5.5A1.5 1.5 0 004.5 14h7a1.5 1.5 0 001.5-1.5V7H3zm4 2h2a.5.5 0 010 1H7a.5.5 0 010-1z"
-                fill="currentColor"
-              />
-            </svg>
-            Store
-          </span>
-        </div>
-
-        <div class="card-meta">
-          <span v-if="proxy.local_addr" class="meta-item">
-            <span class="meta-label">Local</span>
-            <span class="meta-value code">{{ proxy.local_addr }}</span>
-          </span>
-          <span v-if="proxy.plugin" class="meta-item">
-            <span class="meta-label">Plugin</span>
-            <span class="meta-value code">{{ proxy.plugin }}</span>
-          </span>
-          <span v-if="proxy.remote_addr" class="meta-item">
-            <span class="meta-label">Remote</span>
-            <span class="meta-value code">{{ proxy.remote_addr }}</span>
-          </span>
-        </div>
-      </div>
-
-      <div class="card-right">
-        <div v-if="proxy.err" class="error-info">
-          <el-tooltip :content="proxy.err" placement="top" :show-after="300">
-            <div class="error-badge">
-              <el-icon class="error-icon"><Warning /></el-icon>
-              <span class="error-text">Error</span>
-            </div>
-          </el-tooltip>
-        </div>
-
-        <div class="status-badge" :class="statusClass">
             <span class="status-dot"></span>
             {{ proxy.status }}
+          </span>
         </div>
-
+        <div class="card-address">
-        <!-- Store actions -->
+          <template v-if="proxy.remote_addr && localDisplay">
-        <div v-if="isStore" class="card-actions">
+            {{ proxy.remote_addr }} → {{ localDisplay }}
-          <button
+          </template>
-            class="action-btn edit-btn"
+          <template v-else-if="proxy.remote_addr">{{ proxy.remote_addr }}</template>
-            @click.stop="$emit('edit', proxy)"
+          <template v-else-if="localDisplay">{{ localDisplay }}</template>
-          >
+        </div>
-            <svg
+      </div>
-              viewBox="0 0 16 16"
+      <div class="card-right">
-              fill="none"
+        <span v-if="showSource" class="source-label">{{ displaySource }}</span>
-              xmlns="http://www.w3.org/2000/svg"
+        <div v-if="showActions" @click.stop>
-            >
+          <PopoverMenu :width="120" placement="bottom-end">
-              <path
+            <template #trigger>
-                d="M11.293 1.293a1 1 0 011.414 0l2 2a1 1 0 010 1.414l-9 9A1 1 0 015 14H3a1 1 0 01-1-1v-2a1 1 0 01.293-.707l9-9z"
+              <ActionButton variant="outline" size="small">
-                fill="currentColor"
+                <el-icon><MoreFilled /></el-icon>
-              />
+              </ActionButton>
-            </svg>
+            </template>
-          </button>
+            <PopoverMenuItem v-if="proxy.status === 'disabled'" @click="$emit('toggle', proxy, true)">
-          <button
+              <el-icon><Open /></el-icon>
-            class="action-btn delete-btn"
+              Enable
-            @click.stop="$emit('delete', proxy)"
+            </PopoverMenuItem>
-          >
+            <PopoverMenuItem v-else @click="$emit('toggle', proxy, false)">
-            <svg
+              <el-icon><TurnOff /></el-icon>
-              viewBox="0 0 16 16"
+              Disable
-              fill="none"
+            </PopoverMenuItem>
-              xmlns="http://www.w3.org/2000/svg"
+            <PopoverMenuItem @click="$emit('edit', proxy)">
-            >
+              <el-icon><Edit /></el-icon>
-              <path
+              Edit
-                d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z"
+            </PopoverMenuItem>
-                fill="currentColor"
+            <PopoverMenuItem danger @click="$emit('delete', proxy)">
-              />
+              <el-icon><Delete /></el-icon>
-              <path
+              Delete
-                fill-rule="evenodd"
+            </PopoverMenuItem>
-                clip-rule="evenodd"
+          </PopoverMenu>
-                d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 010-2H6a1 1 0 011-1h2a1 1 0 011 1h3.5a1 1 0 011 1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM6 2h4v1H6V2z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
         </div>
       </div>
     </div>
@@ -107,21 +52,40 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Warning } from '@element-plus/icons-vue'
+import { MoreFilled, Edit, Delete, Open, TurnOff } from '@element-plus/icons-vue'
-import type { ProxyStatus } from '../types/proxy'
+import ActionButton from './ActionButton.vue'
+import PopoverMenu from './PopoverMenu.vue'
+import PopoverMenuItem from './PopoverMenuItem.vue'
+import type { ProxyStatus } from '../types'
 
 interface Props {
   proxy: ProxyStatus
+  showSource?: boolean
+  showActions?: boolean
+  deleting?: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  showSource: false,
+  showActions: false,
+  deleting: false,
+})
 
 defineEmits<{
+  click: [proxy: ProxyStatus]
   edit: [proxy: ProxyStatus]
   delete: [proxy: ProxyStatus]
+  toggle: [proxy: ProxyStatus, enabled: boolean]
 }>()
 
-const isStore = computed(() => props.proxy.source === 'store')
+const displaySource = computed(() => {
+  return props.proxy.source === 'store' ? 'store' : 'config'
+})
+
+const localDisplay = computed(() => {
+  if (props.proxy.plugin) return `plugin:${props.proxy.plugin}`
+  return props.proxy.local_addr || ''
+})
 
 const statusClass = computed(() => {
   switch (props.proxy.status) {
@@ -129,53 +93,43 @@ const statusClass = computed(() => {
       return 'running'
     case 'error':
       return 'error'
+    case 'disabled':
+      return 'disabled'
     default:
       return 'waiting'
   }
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .proxy-card {
-  position: relative;
+  background: $color-bg-primary;
-  display: block;
+  border: 1px solid $color-border-lighter;
-  background: var(--el-bg-color);
+  border-radius: $radius-md;
-  border: 1px solid var(--el-border-color-lighter);
+  padding: 14px 20px;
-  border-radius: 12px;
+  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all $transition-medium;
-  overflow: hidden;
-}
 
-.proxy-card:hover {
+  &:hover {
-  border-color: var(--el-border-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  box-shadow:
+    border-color: $color-border;
-    0 4px 16px rgba(0, 0, 0, 0.06),
+  }
-    0 1px 4px rgba(0, 0, 0, 0.04);
-}
 
-.proxy-card.has-error {
+  &.has-error {
-  border-color: var(--el-color-danger-light-5);
+    border-color: rgba(245, 108, 108, 0.3);
-}
+  }
-
-html.dark .proxy-card.has-error {
-  border-color: var(--el-color-danger-dark-2);
 }
 
 .card-main {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 18px 20px;
+  gap: $spacing-lg;
-  gap: 20px;
-  min-height: 76px;
 }
 
-/* Left Section */
 .card-left {
-  display: flex;
+  @include flex-column;
-  flex-direction: column;
+  gap: $spacing-sm;
-  justify-content: center;
-  gap: 10px;
   flex: 1;
   min-width: 0;
 }
@@ -183,311 +137,68 @@ html.dark .proxy-card.has-error {
 .card-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: $spacing-sm;
-  flex-wrap: wrap;
 }
 
 .proxy-name {
-  font-size: 15px;
+  font-size: $font-size-lg;
-  font-weight: 600;
+  font-weight: $font-weight-semibold;
-  color: var(--el-text-color-primary);
+  color: $color-text-primary;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
 }
 
 .type-tag {
-  font-size: 10px;
+  font-size: $font-size-xs;
-  font-weight: 600;
+  font-weight: $font-weight-medium;
-  padding: 2px 6px;
+  padding: 2px 8px;
   border-radius: 4px;
-  background: var(--el-fill-color);
+  background: $color-bg-muted;
-  color: var(--el-text-color-secondary);
+  color: $color-text-secondary;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
 }
 
-.type-tag.type-tcp {
+.card-address {
-  background: rgba(59, 130, 246, 0.1);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  color: #3b82f6;
+  font-size: $font-size-sm;
-}
+  color: $color-text-muted;
-.type-tag.type-udp {
-  background: rgba(245, 158, 11, 0.1);
-  color: #f59e0b;
-}
-.type-tag.type-http {
-  background: rgba(16, 185, 129, 0.1);
-  color: #10b981;
-}
-.type-tag.type-https {
-  background: rgba(16, 185, 129, 0.15);
-  color: #059669;
-}
-.type-tag.type-stcp,
-.type-tag.type-sudp,
-.type-tag.type-xtcp {
-  background: rgba(139, 92, 246, 0.1);
-  color: #8b5cf6;
-}
-.type-tag.type-tcpmux {
-  background: rgba(236, 72, 153, 0.1);
-  color: #ec4899;
-}
-
-html.dark .type-tag.type-tcp {
-  background: rgba(96, 165, 250, 0.15);
-  color: #60a5fa;
-}
-html.dark .type-tag.type-udp {
-  background: rgba(251, 191, 36, 0.15);
-  color: #fbbf24;
-}
-html.dark .type-tag.type-http {
-  background: rgba(52, 211, 153, 0.15);
-  color: #34d399;
-}
-html.dark .type-tag.type-https {
-  background: rgba(52, 211, 153, 0.2);
-  color: #34d399;
-}
-html.dark .type-tag.type-stcp,
-html.dark .type-tag.type-sudp,
-html.dark .type-tag.type-xtcp {
-  background: rgba(167, 139, 250, 0.15);
-  color: #a78bfa;
-}
-html.dark .type-tag.type-tcpmux {
-  background: rgba(244, 114, 182, 0.15);
-  color: #f472b6;
-}
-
-.source-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 10px;
-  font-weight: 500;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: linear-gradient(
-    135deg,
-    rgba(102, 126, 234, 0.1) 0%,
-    rgba(118, 75, 162, 0.1) 100%
-  );
-  color: #764ba2;
-}
-
-html.dark .source-tag {
-  background: linear-gradient(
-    135deg,
-    rgba(129, 140, 248, 0.15) 0%,
-    rgba(167, 139, 250, 0.15) 100%
-  );
-  color: #a78bfa;
-}
-
-.store-icon {
-  width: 12px;
-  height: 12px;
-}
-
-.card-meta {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: $spacing-sm;
-  flex-wrap: wrap;
 }
 
-.meta-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  line-height: 1;
-}
 
-.meta-label {
-  color: var(--el-text-color-placeholder);
-  font-size: 12px;
-  font-weight: 500;
-}
 
-.meta-value {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-regular);
-}
-
-.meta-value.code {
-  font-family:
-    'SF Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  background: var(--el-fill-color-light);
-  padding: 3px 7px;
-  border-radius: 5px;
-  font-size: 11px;
-  letter-spacing: -0.02em;
-}
-
-/* Right Section */
 .card-right {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: $spacing-md;
   flex-shrink: 0;
 }
 
-.error-badge {
+.source-label {
-  display: flex;
+  font-size: $font-size-xs;
-  align-items: center;
+  color: $color-text-light;
-  gap: 4px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  background: var(--el-color-danger-light-9);
-  cursor: help;
 }
 
-.error-icon {
-  color: var(--el-color-danger);
-  font-size: 14px;
-}
-
-.error-text {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--el-color-danger);
-}
-
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 12px;
-  border-radius: 20px;
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: capitalize;
-}
 
 .status-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  flex-shrink: 0;
+  background: currentColor;
 }
 
-.status-badge.running {
-  background: var(--el-color-success-light-9);
-  color: var(--el-color-success);
-}
-.status-badge.running .status-dot {
-  background: var(--el-color-success);
-  box-shadow: 0 0 0 2px var(--el-color-success-light-7);
-  animation: pulse 2s infinite;
-}
 
-.status-badge.error {
-  background: var(--el-color-danger-light-9);
-  color: var(--el-color-danger);
-}
-.status-badge.error .status-dot {
-  background: var(--el-color-danger);
-}
 
-.status-badge.waiting {
+@include mobile {
-  background: var(--el-color-warning-light-9);
-  color: var(--el-color-warning);
-}
-.status-badge.waiting .status-dot {
-  background: var(--el-color-warning);
-  animation: pulse 1.5s infinite;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* Action buttons */
-.card-actions {
-  display: flex;
-  gap: 4px;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .card-actions {
-    display: none;
-  }
-
-  .proxy-card.is-store:hover .status-badge {
-    display: none;
-  }
-
-  .proxy-card:hover .card-actions {
-    display: flex;
-  }
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 8px;
-  background: var(--el-fill-color);
-  color: var(--el-text-color-secondary);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.action-btn svg {
-  width: 14px;
-  height: 14px;
-}
-
-.action-btn:hover {
-  transform: scale(1.05);
-}
-
-.edit-btn:hover {
-  background: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-}
-
-.delete-btn:hover {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
-}
-
-html.dark .edit-btn:hover {
-  background: rgba(96, 165, 250, 0.15);
-  color: #60a5fa;
-}
-
-html.dark .delete-btn:hover {
-  background: rgba(248, 113, 113, 0.15);
-  color: #f87171;
-}
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
   .card-main {
     flex-direction: column;
     align-items: stretch;
-    gap: 14px;
+    gap: $spacing-sm;
-    padding: 14px 16px;
   }
-
   .card-right {
-    flex-direction: row;
-    align-items: center;
     justify-content: space-between;
-    border-top: 1px solid var(--el-border-color-lighter);
+  }
-    padding-top: 14px;
+  .card-address {
+    word-break: break-all;
   }
 }
 </style>

web/frpc/src/components/StatCard.vue

@@ -1,202 +0,0 @@
-<template>
-  <el-card
-    class="stat-card"
-    :class="{ clickable: !!to }"
-    :body-style="{ padding: '20px' }"
-    shadow="hover"
-    @click="handleClick"
-  >
-    <div class="stat-card-content">
-      <div class="stat-icon" :class="`icon-${type}`">
-        <component :is="iconComponent" class="icon" />
-      </div>
-      <div class="stat-info">
-        <div class="stat-value">{{ value }}</div>
-        <div class="stat-label">{{ label }}</div>
-      </div>
-      <el-icon v-if="to" class="arrow-icon"><ArrowRight /></el-icon>
-    </div>
-    <div v-if="subtitle" class="stat-subtitle">{{ subtitle }}</div>
-  </el-card>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  Connection,
-  CircleCheck,
-  Warning,
-  Setting,
-  ArrowRight,
-} from '@element-plus/icons-vue'
-
-interface Props {
-  label: string
-  value: string | number
-  type?: 'proxies' | 'running' | 'error' | 'config'
-  subtitle?: string
-  to?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'proxies',
-})
-
-const router = useRouter()
-
-const iconComponent = computed(() => {
-  switch (props.type) {
-    case 'proxies':
-      return Connection
-    case 'running':
-      return CircleCheck
-    case 'error':
-      return Warning
-    case 'config':
-      return Setting
-    default:
-      return Connection
-  }
-})
-
-const handleClick = () => {
-  if (props.to) {
-    router.push(props.to)
-  }
-}
-</script>
-
-<style scoped>
-.stat-card {
-  border-radius: 12px;
-  transition: all 0.3s ease;
-  border: 1px solid #e4e7ed;
-}
-
-.stat-card.clickable {
-  cursor: pointer;
-}
-
-.stat-card.clickable:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
-}
-
-.stat-card.clickable:hover .arrow-icon {
-  transform: translateX(4px);
-}
-
-html.dark .stat-card {
-  border-color: #3a3d5c;
-  background: #27293d;
-}
-
-.stat-card-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.arrow-icon {
-  color: #909399;
-  font-size: 18px;
-  transition: transform 0.2s ease;
-  flex-shrink: 0;
-}
-
-html.dark .arrow-icon {
-  color: #9ca3af;
-}
-
-.stat-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.stat-icon .icon {
-  width: 28px;
-  height: 28px;
-}
-
-.icon-proxies {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-}
-
-.icon-running {
-  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-  color: white;
-}
-
-.icon-error {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-  color: white;
-}
-
-.icon-config {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  color: white;
-}
-
-html.dark .icon-proxies {
-  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
-}
-
-html.dark .icon-running {
-  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
-}
-
-html.dark .icon-error {
-  background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
-}
-
-html.dark .icon-config {
-  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
-}
-
-.stat-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.stat-value {
-  font-size: 28px;
-  font-weight: 500;
-  line-height: 1.2;
-  color: #303133;
-  margin-bottom: 4px;
-}
-
-html.dark .stat-value {
-  color: #e5e7eb;
-}
-
-.stat-label {
-  font-size: 14px;
-  color: #909399;
-  font-weight: 500;
-}
-
-html.dark .stat-label {
-  color: #9ca3af;
-}
-
-.stat-subtitle {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #e4e7ed;
-  font-size: 12px;
-  color: #909399;
-}
-
-html.dark .stat-subtitle {
-  border-top-color: #3a3d5c;
-  color: #9ca3af;
-}
-</style>

web/frpc/src/components/StatusPills.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="status-pills">
+    <button
+      v-for="pill in pills"
+      :key="pill.status"
+      class="pill"
+      :class="{ active: modelValue === pill.status, [pill.status || 'all']: true }"
+      @click="emit('update:modelValue', pill.status)"
+    >
+      {{ pill.label }} {{ pill.count }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  items: Array<{ status: string }>
+  modelValue: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const pills = computed(() => {
+  const counts = { running: 0, error: 0, waiting: 0 }
+  for (const item of props.items) {
+    const s = item.status as keyof typeof counts
+    if (s in counts) {
+      counts[s]++
+    }
+  }
+  return [
+    { status: '', label: 'All', count: props.items.length },
+    { status: 'running', label: 'Running', count: counts.running },
+    { status: 'error', label: 'Error', count: counts.error },
+    { status: 'waiting', label: 'Waiting', count: counts.waiting },
+  ]
+})
+</script>
+
+<style scoped lang="scss">
+.status-pills {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.pill {
+  border: none;
+  border-radius: 12px;
+  padding: $spacing-xs $spacing-md;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+  cursor: pointer;
+  background: $color-bg-muted;
+  color: $color-text-secondary;
+  transition: all $transition-fast;
+  white-space: nowrap;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &.active {
+    &.all {
+      background: $color-bg-muted;
+      color: $color-text-secondary;
+    }
+
+    &.running {
+      background: rgba(103, 194, 58, 0.1);
+      color: #67c23a;
+    }
+
+    &.error {
+      background: rgba(245, 108, 108, 0.1);
+      color: #f56c6c;
+    }
+
+    &.waiting {
+      background: rgba(230, 162, 60, 0.1);
+      color: #e6a23c;
+    }
+  }
+}
+
+@include mobile {
+  .status-pills {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+</style>

web/frpc/src/components/StringListEditor.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="string-list-editor">
+    <template v-if="readonly">
+      <div v-if="!modelValue || modelValue.length === 0" class="list-empty">—</div>
+      <div v-for="(item, index) in modelValue" :key="index" class="list-readonly-item">
+        {{ item }}
+      </div>
+    </template>
+    <template v-else>
+      <div v-for="(item, index) in modelValue" :key="index" class="item-row">
+        <el-input
+          :model-value="item"
+          :placeholder="placeholder"
+          @update:model-value="updateItem(index, $event)"
+        />
+        <button class="item-remove" @click="removeItem(index)">
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" fill="currentColor"/>
+          </svg>
+        </button>
+      </div>
+      <button class="list-add-btn" @click="addItem">
+        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 2a.5.5 0 01.5.5v5h5a.5.5 0 010 1h-5v5a.5.5 0 01-1 0v-5h-5a.5.5 0 010-1h5v-5A.5.5 0 018 2z" fill="currentColor"/>
+        </svg>
+        Add
+      </button>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[]
+    placeholder?: string
+    readonly?: boolean
+  }>(),
+  {
+    placeholder: 'Enter value',
+    readonly: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+}>()
+
+const addItem = () => {
+  emit('update:modelValue', [...(props.modelValue || []), ''])
+}
+
+const removeItem = (index: number) => {
+  const newValue = [...props.modelValue]
+  newValue.splice(index, 1)
+  emit('update:modelValue', newValue)
+}
+
+const updateItem = (index: number, value: string) => {
+  const newValue = [...props.modelValue]
+  newValue[index] = value
+  emit('update:modelValue', newValue)
+}
+</script>
+
+<style scoped>
+.string-list-editor {
+  width: 100%;
+}
+
+.item-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.item-row .el-input {
+  flex: 1;
+}
+
+.item-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+.item-remove svg {
+  width: 14px;
+  height: 14px;
+}
+
+.item-remove:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.list-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.list-add-btn svg {
+  width: 13px;
+  height: 13px;
+}
+
+.list-add-btn:hover {
+  background: var(--color-bg-hover);
+}
+
+.list-empty {
+  color: var(--color-text-muted);
+  font-size: 13px;
+}
+
+.list-readonly-item {
+  font-size: 13px;
+  color: var(--color-text-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  padding: 2px 0;
+}
+</style>

web/frpc/src/components/proxy-form/ProxyAuthSection.vue

@@ -0,0 +1,40 @@
+<template>
+  <ConfigSection title="Authentication" :readonly="readonly">
+    <template v-if="['http', 'tcpmux'].includes(form.type)">
+      <div class="field-row three-col">
+        <ConfigField label="HTTP User" type="text" v-model="form.httpUser" :readonly="readonly" />
+        <ConfigField label="HTTP Password" type="password" v-model="form.httpPassword" :readonly="readonly" />
+        <ConfigField label="Route By HTTP User" type="text" v-model="form.routeByHTTPUser" :readonly="readonly" />
+      </div>
+    </template>
+    <template v-if="['stcp', 'sudp', 'xtcp'].includes(form.type)">
+      <div class="field-row two-col">
+        <ConfigField label="Secret Key" type="password" v-model="form.secretKey" prop="secretKey" :readonly="readonly" />
+        <ConfigField label="Allow Users" type="tags" v-model="form.allowUsers" placeholder="username" :readonly="readonly" />
+      </div>
+    </template>
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/proxy-form/ProxyBackendSection.vue

@@ -0,0 +1,149 @@
+<template>
+  <!-- Backend Mode -->
+  <template v-if="!readonly">
+    <el-form-item label="Backend Mode">
+      <el-radio-group v-model="backendMode">
+        <el-radio value="direct">Direct</el-radio>
+        <el-radio value="plugin">Plugin</el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </template>
+
+  <!-- Direct mode -->
+  <template v-if="backendMode === 'direct'">
+    <div class="field-row two-col">
+      <ConfigField label="Local IP" type="text" v-model="form.localIP" placeholder="127.0.0.1" :readonly="readonly" />
+      <ConfigField label="Local Port" type="number" v-model="form.localPort" :min="0" :max="65535" prop="localPort" :readonly="readonly" />
+    </div>
+  </template>
+
+  <!-- Plugin mode -->
+  <template v-else>
+    <div class="field-row two-col">
+      <ConfigField label="Plugin Type" type="select" v-model="form.pluginType"
+        :options="PLUGIN_LIST.map((p) => ({ label: p, value: p }))" :readonly="readonly" />
+      <div></div>
+    </div>
+
+    <template v-if="['http2https', 'https2http', 'https2https', 'http2http', 'tls2raw'].includes(form.pluginType)">
+      <div class="field-row two-col">
+        <ConfigField label="Local Address" type="text" v-model="form.pluginConfig.localAddr" placeholder="127.0.0.1:8080" :readonly="readonly" />
+        <ConfigField v-if="['http2https', 'https2http', 'https2https', 'http2http'].includes(form.pluginType)"
+          label="Host Header Rewrite" type="text" v-model="form.pluginConfig.hostHeaderRewrite" :readonly="readonly" />
+        <div v-else></div>
+      </div>
+    </template>
+    <template v-if="['http2https', 'https2http', 'https2https', 'http2http'].includes(form.pluginType)">
+      <ConfigField label="Request Headers" type="kv" v-model="pluginRequestHeaders"
+        key-placeholder="Header" value-placeholder="Value" :readonly="readonly" />
+    </template>
+    <template v-if="['https2http', 'https2https', 'tls2raw'].includes(form.pluginType)">
+      <div class="field-row two-col">
+        <ConfigField label="Certificate Path" type="text" v-model="form.pluginConfig.crtPath" placeholder="/path/to/cert.pem" :readonly="readonly" />
+        <ConfigField label="Key Path" type="text" v-model="form.pluginConfig.keyPath" placeholder="/path/to/key.pem" :readonly="readonly" />
+      </div>
+    </template>
+    <template v-if="['https2http', 'https2https'].includes(form.pluginType)">
+      <ConfigField label="Enable HTTP/2" type="switch" v-model="form.pluginConfig.enableHTTP2" :readonly="readonly" />
+    </template>
+    <template v-if="form.pluginType === 'http_proxy'">
+      <div class="field-row two-col">
+        <ConfigField label="HTTP User" type="text" v-model="form.pluginConfig.httpUser" :readonly="readonly" />
+        <ConfigField label="HTTP Password" type="password" v-model="form.pluginConfig.httpPassword" :readonly="readonly" />
+      </div>
+    </template>
+    <template v-if="form.pluginType === 'socks5'">
+      <div class="field-row two-col">
+        <ConfigField label="Username" type="text" v-model="form.pluginConfig.username" :readonly="readonly" />
+        <ConfigField label="Password" type="password" v-model="form.pluginConfig.password" :readonly="readonly" />
+      </div>
+    </template>
+    <template v-if="form.pluginType === 'static_file'">
+      <div class="field-row two-col">
+        <ConfigField label="Local Path" type="text" v-model="form.pluginConfig.localPath" placeholder="/path/to/files" :readonly="readonly" />
+        <ConfigField label="Strip Prefix" type="text" v-model="form.pluginConfig.stripPrefix" :readonly="readonly" />
+      </div>
+      <div class="field-row two-col">
+        <ConfigField label="HTTP User" type="text" v-model="form.pluginConfig.httpUser" :readonly="readonly" />
+        <ConfigField label="HTTP Password" type="password" v-model="form.pluginConfig.httpPassword" :readonly="readonly" />
+      </div>
+    </template>
+    <template v-if="form.pluginType === 'unix_domain_socket'">
+      <ConfigField label="Unix Socket Path" type="text" v-model="form.pluginConfig.unixPath" placeholder="/tmp/socket.sock" :readonly="readonly" />
+    </template>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigField from '../ConfigField.vue'
+
+const PLUGIN_LIST = [
+  'http2https', 'http_proxy', 'https2http', 'https2https', 'http2http',
+  'socks5', 'static_file', 'unix_domain_socket', 'tls2raw', 'virtual_net',
+]
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const backendMode = ref<'direct' | 'plugin'>(form.value.pluginType ? 'plugin' : 'direct')
+const isHydrating = ref(false)
+
+const pluginRequestHeaders = computed({
+  get() {
+    const set = form.value.pluginConfig?.requestHeaders?.set
+    if (!set || typeof set !== 'object') return []
+    return Object.entries(set).map(([key, value]) => ({ key, value: String(value) }))
+  },
+  set(val: Array<{ key: string; value: string }>) {
+    if (!form.value.pluginConfig) form.value.pluginConfig = {}
+    if (val.length === 0) {
+      delete form.value.pluginConfig.requestHeaders
+    } else {
+      form.value.pluginConfig.requestHeaders = {
+        set: Object.fromEntries(val.map((e) => [e.key, e.value])),
+      }
+    }
+  },
+})
+
+watch(() => form.value.pluginType, (newType, oldType) => {
+  if (isHydrating.value) return
+  if (!oldType || !newType || newType === oldType) return
+  if (form.value.pluginConfig && Object.keys(form.value.pluginConfig).length > 0) {
+    form.value.pluginConfig = {}
+  }
+})
+
+watch(backendMode, (mode) => {
+  if (mode === 'direct') {
+    form.value.pluginType = ''
+    form.value.pluginConfig = {}
+  } else if (!form.value.pluginType) {
+    form.value.pluginType = 'http2https'
+  }
+})
+
+const hydrate = () => {
+  isHydrating.value = true
+  backendMode.value = form.value.pluginType ? 'plugin' : 'direct'
+  nextTick(() => { isHydrating.value = false })
+}
+
+watch(() => props.modelValue, () => { hydrate() })
+onMounted(() => { hydrate() })
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/proxy-form/ProxyBaseSection.vue

@@ -0,0 +1,51 @@
+<template>
+  <!-- Name / Type / Enabled -->
+  <div v-if="!readonly" class="field-row three-col">
+    <el-form-item label="Name" prop="name" class="field-grow">
+      <el-input
+        v-model="form.name"
+        :disabled="editing || readonly"
+        placeholder="my-proxy"
+      />
+    </el-form-item>
+    <ConfigField
+      label="Type"
+      type="select"
+      v-model="form.type"
+      :disabled="editing"
+      :options="PROXY_TYPES.map((t) => ({ label: t.toUpperCase(), value: t }))"
+      prop="type"
+    />
+    <el-form-item label="Enabled" class="switch-field">
+      <el-switch v-model="form.enabled" size="small" />
+    </el-form-item>
+  </div>
+  <div v-else class="field-row three-col">
+    <ConfigField label="Name" type="text" :model-value="form.name" readonly class="field-grow" />
+    <ConfigField label="Type" type="text" :model-value="form.type.toUpperCase()" readonly />
+    <ConfigField label="Enabled" type="switch" :model-value="form.enabled" readonly />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { PROXY_TYPES, type ProxyFormData } from '../../types'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+  editing?: boolean
+}>(), { readonly: false, editing: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/proxy-form/ProxyFormLayout.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="proxy-form-layout">
+    <ConfigSection :readonly="readonly">
+      <ProxyBaseSection v-model="form" :readonly="readonly" :editing="editing" />
+      <ProxyRemoteSection
+        v-if="['tcp', 'udp', 'http', 'https', 'tcpmux'].includes(form.type)"
+        v-model="form" :readonly="readonly" />
+      <ProxyBackendSection v-model="form" :readonly="readonly" />
+    </ConfigSection>
+
+    <ProxyAuthSection
+      v-if="['http', 'tcpmux', 'stcp', 'sudp', 'xtcp'].includes(form.type)"
+      v-model="form" :readonly="readonly" />
+    <ProxyHttpSection v-if="form.type === 'http'" v-model="form" :readonly="readonly" />
+    <ProxyTransportSection v-model="form" :readonly="readonly" />
+    <ProxyHealthSection v-model="form" :readonly="readonly" />
+    <ProxyLoadBalanceSection v-model="form" :readonly="readonly" />
+    <ProxyNatSection v-if="form.type === 'xtcp'" v-model="form" :readonly="readonly" />
+    <ProxyMetadataSection v-model="form" :readonly="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ProxyBaseSection from './ProxyBaseSection.vue'
+import ProxyRemoteSection from './ProxyRemoteSection.vue'
+import ProxyBackendSection from './ProxyBackendSection.vue'
+import ProxyAuthSection from './ProxyAuthSection.vue'
+import ProxyHttpSection from './ProxyHttpSection.vue'
+import ProxyTransportSection from './ProxyTransportSection.vue'
+import ProxyHealthSection from './ProxyHealthSection.vue'
+import ProxyLoadBalanceSection from './ProxyLoadBalanceSection.vue'
+import ProxyNatSection from './ProxyNatSection.vue'
+import ProxyMetadataSection from './ProxyMetadataSection.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+  editing?: boolean
+}>(), { readonly: false, editing: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>

web/frpc/src/components/proxy-form/ProxyHealthSection.vue

@@ -0,0 +1,52 @@
+<template>
+  <ConfigSection title="Health Check" collapsible :readonly="readonly" :has-value="!!form.healthCheckType">
+    <div class="field-row two-col">
+      <ConfigField label="Type" type="select" v-model="form.healthCheckType"
+        :options="[{ label: 'Disabled', value: '' }, { label: 'TCP', value: 'tcp' }, { label: 'HTTP', value: 'http' }]" :readonly="readonly" />
+      <div></div>
+    </div>
+    <template v-if="form.healthCheckType">
+      <div class="field-row three-col">
+        <ConfigField label="Timeout (s)" type="number" v-model="form.healthCheckTimeoutSeconds" :min="1" :readonly="readonly" />
+        <ConfigField label="Max Failed" type="number" v-model="form.healthCheckMaxFailed" :min="1" :readonly="readonly" />
+        <ConfigField label="Interval (s)" type="number" v-model="form.healthCheckIntervalSeconds" :min="1" :readonly="readonly" />
+      </div>
+      <template v-if="form.healthCheckType === 'http'">
+        <ConfigField label="Path" type="text" v-model="form.healthCheckPath" prop="healthCheckPath" placeholder="/health" :readonly="readonly" />
+        <ConfigField label="HTTP Headers" type="kv" v-model="healthCheckHeaders" key-placeholder="Header" value-placeholder="Value" :readonly="readonly" />
+      </template>
+    </template>
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const healthCheckHeaders = computed({
+  get() {
+    return form.value.healthCheckHTTPHeaders.map((h) => ({ key: h.name, value: h.value }))
+  },
+  set(val: Array<{ key: string; value: string }>) {
+    form.value.healthCheckHTTPHeaders = val.map((h) => ({ name: h.key, value: h.value }))
+  },
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/proxy-form/ProxyHttpSection.vue

@@ -0,0 +1,32 @@
+<template>
+  <ConfigSection title="HTTP Options" collapsible :readonly="readonly"
+    :has-value="form.locations.length > 0 || !!form.hostHeaderRewrite || form.requestHeaders.length > 0 || form.responseHeaders.length > 0">
+    <ConfigField label="Locations" type="tags" v-model="form.locations" placeholder="/path" :readonly="readonly" />
+    <ConfigField label="Host Header Rewrite" type="text" v-model="form.hostHeaderRewrite" :readonly="readonly" />
+    <ConfigField label="Request Headers" type="kv" v-model="form.requestHeaders" key-placeholder="Header" value-placeholder="Value" :readonly="readonly" />
+    <ConfigField label="Response Headers" type="kv" v-model="form.responseHeaders" key-placeholder="Header" value-placeholder="Value" :readonly="readonly" />
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/proxy-form/ProxyLoadBalanceSection.vue

@@ -0,0 +1,31 @@
+<template>
+  <ConfigSection title="Load Balancer" collapsible :readonly="readonly" :has-value="!!form.loadBalancerGroup">
+    <div class="field-row two-col">
+      <ConfigField label="Group" type="text" v-model="form.loadBalancerGroup" placeholder="Group name" :readonly="readonly" />
+      <ConfigField label="Group Key" type="text" v-model="form.loadBalancerGroupKey" :readonly="readonly" />
+    </div>
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/proxy-form/ProxyMetadataSection.vue

@@ -0,0 +1,29 @@
+<template>
+  <ConfigSection title="Metadata" collapsible :readonly="readonly" :has-value="form.metadatas.length > 0 || form.annotations.length > 0">
+    <ConfigField label="Metadatas" type="kv" v-model="form.metadatas" :readonly="readonly" />
+    <ConfigField label="Annotations" type="kv" v-model="form.annotations" :readonly="readonly" />
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/proxy-form/ProxyNatSection.vue

@@ -0,0 +1,29 @@
+<template>
+  <ConfigSection title="NAT Traversal" collapsible :readonly="readonly" :has-value="form.natTraversalDisableAssistedAddrs">
+    <ConfigField label="Disable Assisted Addresses" type="switch" v-model="form.natTraversalDisableAssistedAddrs"
+      tip="Only use STUN-discovered public addresses" :readonly="readonly" />
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/proxy-form/ProxyRemoteSection.vue

@@ -0,0 +1,41 @@
+<template>
+  <template v-if="['tcp', 'udp'].includes(form.type)">
+    <div class="field-row two-col">
+      <ConfigField label="Remote Port" type="number" v-model="form.remotePort"
+        :min="0" :max="65535" prop="remotePort" tip="Use 0 for random port assignment" :readonly="readonly" />
+      <div></div>
+    </div>
+  </template>
+  <template v-if="['http', 'https', 'tcpmux'].includes(form.type)">
+    <div class="field-row two-col">
+      <ConfigField label="Custom Domains" type="tags" v-model="form.customDomains"
+        prop="customDomains" placeholder="example.com" :readonly="readonly" />
+      <ConfigField v-if="form.type !== 'tcpmux'" label="Subdomain" type="text"
+        v-model="form.subdomain" placeholder="test" :readonly="readonly" />
+      <ConfigField v-if="form.type === 'tcpmux'" label="Multiplexer" type="select"
+        v-model="form.multiplexer" :options="[{ label: 'HTTP CONNECT', value: 'httpconnect' }]" :readonly="readonly" />
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/proxy-form/ProxyTransportSection.vue

@@ -0,0 +1,39 @@
+<template>
+  <ConfigSection title="Transport" collapsible :readonly="readonly"
+    :has-value="form.useEncryption || form.useCompression || !!form.bandwidthLimit || (!!form.bandwidthLimitMode && form.bandwidthLimitMode !== 'client') || !!form.proxyProtocolVersion">
+    <div class="field-row two-col">
+      <ConfigField label="Use Encryption" type="switch" v-model="form.useEncryption" :readonly="readonly" />
+      <ConfigField label="Use Compression" type="switch" v-model="form.useCompression" :readonly="readonly" />
+    </div>
+    <div class="field-row three-col">
+      <ConfigField label="Bandwidth Limit" type="text" v-model="form.bandwidthLimit" placeholder="1MB" tip="e.g., 1MB, 500KB" :readonly="readonly" />
+      <ConfigField label="Bandwidth Limit Mode" type="select" v-model="form.bandwidthLimitMode"
+        :options="[{ label: 'Client', value: 'client' }, { label: 'Server', value: 'server' }]" :readonly="readonly" />
+      <ConfigField label="Proxy Protocol Version" type="select" v-model="form.proxyProtocolVersion"
+        :options="[{ label: 'None', value: '' }, { label: 'v1', value: 'v1' }, { label: 'v2', value: 'v2' }]" :readonly="readonly" />
+    </div>
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProxyFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: ProxyFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: ProxyFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/visitor-form/VisitorBaseSection.vue

@@ -0,0 +1,40 @@
+<template>
+  <div v-if="!readonly" class="field-row three-col">
+    <el-form-item label="Name" prop="name" class="field-grow">
+      <el-input v-model="form.name" :disabled="editing || readonly" placeholder="my-visitor" />
+    </el-form-item>
+    <ConfigField label="Type" type="select" v-model="form.type" :disabled="editing"
+      :options="[{ label: 'STCP', value: 'stcp' }, { label: 'SUDP', value: 'sudp' }, { label: 'XTCP', value: 'xtcp' }]" prop="type" />
+    <el-form-item label="Enabled" class="switch-field">
+      <el-switch v-model="form.enabled" size="small" />
+    </el-form-item>
+  </div>
+  <div v-else class="field-row three-col">
+    <ConfigField label="Name" type="text" :model-value="form.name" readonly class="field-grow" />
+    <ConfigField label="Type" type="text" :model-value="form.type.toUpperCase()" readonly />
+    <ConfigField label="Enabled" type="switch" :model-value="form.enabled" readonly />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { VisitorFormData } from '../../types'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: VisitorFormData
+  readonly?: boolean
+  editing?: boolean
+}>(), { readonly: false, editing: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: VisitorFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/visitor-form/VisitorConnectionSection.vue

@@ -0,0 +1,43 @@
+<template>
+  <ConfigSection title="Connection" :readonly="readonly">
+    <div class="field-row two-col">
+      <ConfigField label="Server Name" type="text" v-model="form.serverName" prop="serverName"
+        placeholder="Name of the proxy to visit" :readonly="readonly" />
+      <ConfigField label="Server User" type="text" v-model="form.serverUser"
+        placeholder="Leave empty for same user" :readonly="readonly" />
+    </div>
+    <ConfigField label="Secret Key" type="password" v-model="form.secretKey"
+      placeholder="Shared secret" :readonly="readonly" />
+    <div class="field-row two-col">
+      <ConfigField label="Bind Address" type="text" v-model="form.bindAddr"
+        placeholder="127.0.0.1" :readonly="readonly" />
+      <ConfigField label="Bind Port" type="number" v-model="form.bindPort"
+        :min="bindPortMin" :max="65535" prop="bindPort" :readonly="readonly" />
+    </div>
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { VisitorFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: VisitorFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: VisitorFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const bindPortMin = computed(() => (form.value.type === 'sudp' ? 1 : undefined))
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/visitor-form/VisitorFormLayout.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="visitor-form-layout">
+    <ConfigSection :readonly="readonly">
+      <VisitorBaseSection v-model="form" :readonly="readonly" :editing="editing" />
+    </ConfigSection>
+    <VisitorConnectionSection v-model="form" :readonly="readonly" />
+    <VisitorTransportSection v-model="form" :readonly="readonly" />
+    <VisitorXtcpSection v-if="form.type === 'xtcp'" v-model="form" :readonly="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { VisitorFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import VisitorBaseSection from './VisitorBaseSection.vue'
+import VisitorConnectionSection from './VisitorConnectionSection.vue'
+import VisitorTransportSection from './VisitorTransportSection.vue'
+import VisitorXtcpSection from './VisitorXtcpSection.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: VisitorFormData
+  readonly?: boolean
+  editing?: boolean
+}>(), { readonly: false, editing: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: VisitorFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>

web/frpc/src/components/visitor-form/VisitorTransportSection.vue

@@ -0,0 +1,32 @@
+<template>
+  <ConfigSection title="Transport Options" collapsible :readonly="readonly"
+    :has-value="form.useEncryption || form.useCompression">
+    <div class="field-row two-col">
+      <ConfigField label="Use Encryption" type="switch" v-model="form.useEncryption" :readonly="readonly" />
+      <ConfigField label="Use Compression" type="switch" v-model="form.useCompression" :readonly="readonly" />
+    </div>
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { VisitorFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: VisitorFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: VisitorFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/components/visitor-form/VisitorXtcpSection.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- XTCP Options -->
+  <ConfigSection title="XTCP Options" collapsible :readonly="readonly"
+    :has-value="form.protocol !== 'quic' || form.keepTunnelOpen || form.maxRetriesAnHour != null || form.minRetryInterval != null || !!form.fallbackTo || form.fallbackTimeoutMs != null">
+    <ConfigField label="Protocol" type="select" v-model="form.protocol"
+      :options="[{ label: 'QUIC', value: 'quic' }, { label: 'KCP', value: 'kcp' }]" :readonly="readonly" />
+    <ConfigField label="Keep Tunnel Open" type="switch" v-model="form.keepTunnelOpen" :readonly="readonly" />
+    <div class="field-row two-col">
+      <ConfigField label="Max Retries per Hour" type="number" v-model="form.maxRetriesAnHour" :min="0" :readonly="readonly" />
+      <ConfigField label="Min Retry Interval (s)" type="number" v-model="form.minRetryInterval" :min="0" :readonly="readonly" />
+    </div>
+    <div class="field-row two-col">
+      <ConfigField label="Fallback To" type="text" v-model="form.fallbackTo" placeholder="Fallback visitor name" :readonly="readonly" />
+      <ConfigField label="Fallback Timeout (ms)" type="number" v-model="form.fallbackTimeoutMs" :min="0" :readonly="readonly" />
+    </div>
+  </ConfigSection>
+
+  <!-- NAT Traversal -->
+  <ConfigSection title="NAT Traversal" collapsible :readonly="readonly"
+    :has-value="form.natTraversalDisableAssistedAddrs">
+    <ConfigField label="Disable Assisted Addresses" type="switch" v-model="form.natTraversalDisableAssistedAddrs"
+      tip="Only use STUN-discovered public addresses" :readonly="readonly" />
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { VisitorFormData } from '../../types'
+import ConfigSection from '../ConfigSection.vue'
+import ConfigField from '../ConfigField.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: VisitorFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: VisitorFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/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/frpc/src/main.ts

@@ -1,13 +1,15 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 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)
 
+app.use(createPinia())
 app.use(router)
 
 app.mount('#app')

web/frpc/src/router/index.ts

@@ -1,23 +1,26 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import Overview from '../views/Overview.vue'
 import ClientConfigure from '../views/ClientConfigure.vue'
 import ProxyEdit from '../views/ProxyEdit.vue'
 import VisitorEdit from '../views/VisitorEdit.vue'
-import { listStoreProxies } from '../api/frpc'
+import { useProxyStore } from '../stores/proxy'
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
       path: '/',
-      name: 'Overview',
+      redirect: '/proxies',
-      component: Overview,
     },
     {
-      path: '/configure',
+      path: '/proxies',
-      name: 'ClientConfigure',
+      name: 'ProxyList',
-      component: ClientConfigure,
+      component: () => import('../views/ProxyList.vue'),
+    },
+    {
+      path: '/proxies/detail/:name',
+      name: 'ProxyDetail',
+      component: () => import('../views/ProxyDetail.vue'),
     },
     {
       path: '/proxies/create',
@@ -31,6 +34,16 @@ const router = createRouter({
       component: ProxyEdit,
       meta: { requiresStore: true },
     },
+    {
+      path: '/visitors',
+      name: 'VisitorList',
+      component: () => import('../views/VisitorList.vue'),
+    },
+    {
+      path: '/visitors/detail/:name',
+      name: 'VisitorDetail',
+      component: () => import('../views/VisitorDetail.vue'),
+    },
     {
       path: '/visitors/create',
       name: 'VisitorCreate',
@@ -43,27 +56,21 @@ const router = createRouter({
       component: VisitorEdit,
       meta: { requiresStore: true },
     },
+    {
+      path: '/config',
+      name: 'ClientConfigure',
+      component: ClientConfigure,
+    },
   ],
 })
 
-const isStoreEnabled = async () => {
-  try {
-    await listStoreProxies()
-    return true
-  } catch (err: any) {
-    if (err?.status === 404) {
-      return false
-    }
-    return true
-  }
-}
-
 router.beforeEach(async (to) => {
   if (!to.matched.some((record) => record.meta.requiresStore)) {
     return true
   }
 
-  const enabled = await isStoreEnabled()
+  const proxyStore = useProxyStore()
+  const enabled = await proxyStore.checkStoreEnabled()
   if (enabled) {
     return true
   }
@@ -71,7 +78,7 @@ router.beforeEach(async (to) => {
   ElMessage.warning(
     'Store is disabled. Enable Store in frpc config to create or edit store entries.',
   )
-  return { name: 'Overview' }
+  return { name: 'ProxyList' }
 })
 
 export default router

web/frpc/src/stores/client.ts

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { getConfig, putConfig, reloadConfig } from '../api/frpc'
+
+export const useClientStore = defineStore('client', () => {
+  const config = ref('')
+  const loading = ref(false)
+
+  const fetchConfig = async () => {
+    loading.value = true
+    try {
+      config.value = await getConfig()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const saveConfig = async (text: string) => {
+    await putConfig(text)
+    config.value = text
+  }
+
+  const reload = async () => {
+    await reloadConfig()
+  }
+
+  return { config, loading, fetchConfig, saveConfig, reload }
+})

web/frpc/src/stores/proxy.ts

@@ -0,0 +1,132 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { ProxyStatus, ProxyDefinition } from '../types'
+import {
+  getStatus,
+  listStoreProxies,
+  getStoreProxy,
+  createStoreProxy,
+  updateStoreProxy,
+  deleteStoreProxy,
+} from '../api/frpc'
+
+export const useProxyStore = defineStore('proxy', () => {
+  const proxies = ref<ProxyStatus[]>([])
+  const storeProxies = ref<ProxyDefinition[]>([])
+  const storeEnabled = ref(false)
+  const storeChecked = ref(false)
+  const loading = ref(false)
+  const storeLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  const fetchStatus = async () => {
+    loading.value = true
+    error.value = null
+    try {
+      const json = await getStatus()
+      const list: ProxyStatus[] = []
+      for (const key in json) {
+        for (const ps of json[key]) {
+          list.push(ps)
+        }
+      }
+      proxies.value = list
+    } catch (err: any) {
+      error.value = err.message
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const fetchStoreProxies = async () => {
+    storeLoading.value = true
+    try {
+      const res = await listStoreProxies()
+      storeProxies.value = res.proxies || []
+      storeEnabled.value = true
+      storeChecked.value = true
+    } catch (err: any) {
+      if (err?.status === 404) {
+        storeEnabled.value = false
+      }
+      storeChecked.value = true
+    } finally {
+      storeLoading.value = false
+    }
+  }
+
+  const checkStoreEnabled = async () => {
+    if (storeChecked.value) return storeEnabled.value
+    await fetchStoreProxies()
+    return storeEnabled.value
+  }
+
+  const createProxy = async (data: ProxyDefinition) => {
+    await createStoreProxy(data)
+    await fetchStoreProxies()
+  }
+
+  const updateProxy = async (name: string, data: ProxyDefinition) => {
+    await updateStoreProxy(name, data)
+    await fetchStoreProxies()
+  }
+
+  const deleteProxy = async (name: string) => {
+    await deleteStoreProxy(name)
+    await fetchStoreProxies()
+  }
+
+  const toggleProxy = async (name: string, enabled: boolean) => {
+    const def = await getStoreProxy(name)
+    const block = (def as any)[def.type]
+    if (block) {
+      block.enabled = enabled
+    }
+    await updateStoreProxy(name, def)
+    await fetchStatus()
+    await fetchStoreProxies()
+  }
+
+  const storeProxyWithStatus = (def: ProxyDefinition): ProxyStatus => {
+    const block = (def as any)[def.type]
+    const enabled = block?.enabled !== false
+
+    const localIP = block?.localIP || '127.0.0.1'
+    const localPort = block?.localPort
+    const local_addr = localPort != null ? `${localIP}:${localPort}` : ''
+    const remotePort = block?.remotePort
+    const remote_addr = remotePort != null ? `:${remotePort}` : ''
+    const plugin = block?.plugin?.type || ''
+
+    const status = proxies.value.find((p) => p.name === def.name)
+    return {
+      name: def.name,
+      type: def.type,
+      status: !enabled ? 'disabled' : (status?.status || 'waiting'),
+      err: status?.err || '',
+      local_addr: status?.local_addr || local_addr,
+      remote_addr: status?.remote_addr || remote_addr,
+      plugin: status?.plugin || plugin,
+      source: 'store',
+    }
+  }
+
+  return {
+    proxies,
+    storeProxies,
+    storeEnabled,
+    storeChecked,
+    loading,
+    storeLoading,
+    error,
+    fetchStatus,
+    fetchStoreProxies,
+    checkStoreEnabled,
+    createProxy,
+    updateProxy,
+    deleteProxy,
+    toggleProxy,
+    storeProxyWithStatus,
+  }
+})

web/frpc/src/stores/visitor.ts

@@ -0,0 +1,68 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { VisitorDefinition } from '../types'
+import {
+  listStoreVisitors,
+  createStoreVisitor,
+  updateStoreVisitor,
+  deleteStoreVisitor,
+} from '../api/frpc'
+
+export const useVisitorStore = defineStore('visitor', () => {
+  const storeVisitors = ref<VisitorDefinition[]>([])
+  const storeEnabled = ref(false)
+  const storeChecked = ref(false)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const fetchStoreVisitors = async () => {
+    loading.value = true
+    try {
+      const res = await listStoreVisitors()
+      storeVisitors.value = res.visitors || []
+      storeEnabled.value = true
+      storeChecked.value = true
+    } catch (err: any) {
+      if (err?.status === 404) {
+        storeEnabled.value = false
+      }
+      storeChecked.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const checkStoreEnabled = async () => {
+    if (storeChecked.value) return storeEnabled.value
+    await fetchStoreVisitors()
+    return storeEnabled.value
+  }
+
+  const createVisitor = async (data: VisitorDefinition) => {
+    await createStoreVisitor(data)
+    await fetchStoreVisitors()
+  }
+
+  const updateVisitor = async (name: string, data: VisitorDefinition) => {
+    await updateStoreVisitor(name, data)
+    await fetchStoreVisitors()
+  }
+
+  const deleteVisitor = async (name: string) => {
+    await deleteStoreVisitor(name)
+    await fetchStoreVisitors()
+  }
+
+  return {
+    storeVisitors,
+    storeEnabled,
+    storeChecked,
+    loading,
+    error,
+    fetchStoreVisitors,
+    checkStoreEnabled,
+    createVisitor,
+    updateVisitor,
+    deleteVisitor,
+  }
+})

web/frpc/src/types/constants.ts

@@ -0,0 +1,32 @@
+export const PROXY_TYPES = [
+  'tcp',
+  'udp',
+  'http',
+  'https',
+  'tcpmux',
+  'stcp',
+  'sudp',
+  'xtcp',
+] as const
+
+export type ProxyType = (typeof PROXY_TYPES)[number]
+
+export const VISITOR_TYPES = ['stcp', 'sudp', 'xtcp'] as const
+
+export type VisitorType = (typeof VISITOR_TYPES)[number]
+
+export const PLUGIN_TYPES = [
+  '',
+  'http2https',
+  'http_proxy',
+  'https2http',
+  'https2https',
+  'http2http',
+  'socks5',
+  'static_file',
+  'unix_domain_socket',
+  'tls2raw',
+  'virtual_net',
+] as const
+
+export type PluginType = (typeof PLUGIN_TYPES)[number]

web/frpc/src/types/index.ts

@@ -0,0 +1,5 @@
+export * from './constants'
+export * from './proxy-status'
+export * from './proxy-store'
+export * from './proxy-form'
+export * from './proxy-converters'

web/frpc/src/types/proxy-converters.ts

@@ -1,264 +1,7 @@
-// ========================================
+import type { ProxyType, VisitorType } from './constants'
-// RUNTIME STATUS TYPES (from /api/status)
+import type { ProxyFormData, VisitorFormData } from './proxy-form'
-// ========================================
+import { createDefaultProxyForm, createDefaultVisitorForm } from './proxy-form'
-
+import type { ProxyDefinition, VisitorDefinition } from './proxy-store'
-export interface ProxyStatus {
-  name: string
-  type: string
-  status: string
-  err: string
-  local_addr: string
-  plugin: string
-  remote_addr: string
-  source?: 'store' | 'config'
-  [key: string]: any
-}
-
-export type StatusResponse = Record<string, ProxyStatus[]>
-
-// ========================================
-// STORE API TYPES
-// ========================================
-
-export interface ProxyDefinition {
-  name: string
-  type: ProxyType
-  tcp?: Record<string, any>
-  udp?: Record<string, any>
-  http?: Record<string, any>
-  https?: Record<string, any>
-  tcpmux?: Record<string, any>
-  stcp?: Record<string, any>
-  sudp?: Record<string, any>
-  xtcp?: Record<string, any>
-}
-
-export interface VisitorDefinition {
-  name: string
-  type: VisitorType
-  stcp?: Record<string, any>
-  sudp?: Record<string, any>
-  xtcp?: Record<string, any>
-}
-
-export interface ProxyListResp {
-  proxies: ProxyDefinition[]
-}
-
-export interface VisitorListResp {
-  visitors: VisitorDefinition[]
-}
-
-// ========================================
-// CONSTANTS
-// ========================================
-
-export const PROXY_TYPES = [
-  'tcp',
-  'udp',
-  'http',
-  'https',
-  'stcp',
-  'sudp',
-  'xtcp',
-  'tcpmux',
-] as const
-
-export type ProxyType = (typeof PROXY_TYPES)[number]
-
-export const VISITOR_TYPES = ['stcp', 'sudp', 'xtcp'] as const
-
-export type VisitorType = (typeof VISITOR_TYPES)[number]
-
-export const PLUGIN_TYPES = [
-  '',
-  'http2https',
-  'http_proxy',
-  'https2http',
-  'https2https',
-  'http2http',
-  'socks5',
-  'static_file',
-  'unix_domain_socket',
-  'tls2raw',
-  'virtual_net',
-] as const
-
-export type PluginType = (typeof PLUGIN_TYPES)[number]
-
-// ========================================
-// FORM DATA INTERFACES
-// ========================================
-
-export interface ProxyFormData {
-  // Base fields (ProxyBaseConfig)
-  name: string
-  type: ProxyType
-  enabled: boolean
-
-  // Backend (ProxyBackend)
-  localIP: string
-  localPort: number | undefined
-  pluginType: string
-  pluginConfig: Record<string, any>
-
-  // Transport (ProxyTransport)
-  useEncryption: boolean
-  useCompression: boolean
-  bandwidthLimit: string
-  bandwidthLimitMode: string
-  proxyProtocolVersion: string
-
-  // Load Balancer (LoadBalancerConfig)
-  loadBalancerGroup: string
-  loadBalancerGroupKey: string
-
-  // Health Check (HealthCheckConfig)
-  healthCheckType: string
-  healthCheckTimeoutSeconds: number | undefined
-  healthCheckMaxFailed: number | undefined
-  healthCheckIntervalSeconds: number | undefined
-  healthCheckPath: string
-  healthCheckHTTPHeaders: Array<{ name: string; value: string }>
-
-  // Metadata & Annotations
-  metadatas: Array<{ key: string; value: string }>
-  annotations: Array<{ key: string; value: string }>
-
-  // TCP/UDP specific
-  remotePort: number | undefined
-
-  // Domain (HTTP/HTTPS/TCPMux) - DomainConfig
-  customDomains: string
-  subdomain: string
-
-  // HTTP specific (HTTPProxyConfig)
-  locations: string
-  httpUser: string
-  httpPassword: string
-  hostHeaderRewrite: string
-  requestHeaders: Array<{ key: string; value: string }>
-  responseHeaders: Array<{ key: string; value: string }>
-  routeByHTTPUser: string
-
-  // TCPMux specific
-  multiplexer: string
-
-  // STCP/SUDP/XTCP specific
-  secretKey: string
-  allowUsers: string
-
-  // XTCP specific (NatTraversalConfig)
-  natTraversalDisableAssistedAddrs: boolean
-}
-
-export interface VisitorFormData {
-  // Base fields (VisitorBaseConfig)
-  name: string
-  type: VisitorType
-  enabled: boolean
-
-  // Transport (VisitorTransport)
-  useEncryption: boolean
-  useCompression: boolean
-
-  // Connection
-  secretKey: string
-  serverUser: string
-  serverName: string
-  bindAddr: string
-  bindPort: number | undefined
-
-  // XTCP specific (XTCPVisitorConfig)
-  protocol: string
-  keepTunnelOpen: boolean
-  maxRetriesAnHour: number | undefined
-  minRetryInterval: number | undefined
-  fallbackTo: string
-  fallbackTimeoutMs: number | undefined
-  natTraversalDisableAssistedAddrs: boolean
-}
-
-// ========================================
-// DEFAULT FORM CREATORS
-// ========================================
-
-export function createDefaultProxyForm(): ProxyFormData {
-  return {
-    name: '',
-    type: 'tcp',
-    enabled: true,
-
-    localIP: '127.0.0.1',
-    localPort: undefined,
-    pluginType: '',
-    pluginConfig: {},
-
-    useEncryption: false,
-    useCompression: false,
-    bandwidthLimit: '',
-    bandwidthLimitMode: 'client',
-    proxyProtocolVersion: '',
-
-    loadBalancerGroup: '',
-    loadBalancerGroupKey: '',
-
-    healthCheckType: '',
-    healthCheckTimeoutSeconds: undefined,
-    healthCheckMaxFailed: undefined,
-    healthCheckIntervalSeconds: undefined,
-    healthCheckPath: '',
-    healthCheckHTTPHeaders: [],
-
-    metadatas: [],
-    annotations: [],
-
-    remotePort: undefined,
-
-    customDomains: '',
-    subdomain: '',
-
-    locations: '',
-    httpUser: '',
-    httpPassword: '',
-    hostHeaderRewrite: '',
-    requestHeaders: [],
-    responseHeaders: [],
-    routeByHTTPUser: '',
-
-    multiplexer: 'httpconnect',
-
-    secretKey: '',
-    allowUsers: '',
-
-    natTraversalDisableAssistedAddrs: false,
-  }
-}
-
-export function createDefaultVisitorForm(): VisitorFormData {
-  return {
-    name: '',
-    type: 'stcp',
-    enabled: true,
-
-    useEncryption: false,
-    useCompression: false,
-
-    secretKey: '',
-    serverUser: '',
-    serverName: '',
-    bindAddr: '127.0.0.1',
-    bindPort: undefined,
-
-    protocol: 'quic',
-    keepTunnelOpen: false,
-    maxRetriesAnHour: undefined,
-    minRetryInterval: undefined,
-    fallbackTo: '',
-    fallbackTimeoutMs: undefined,
-    natTraversalDisableAssistedAddrs: false,
-  }
-}
 
 // ========================================
 // CONVERTERS: Form -> Store API
@@ -359,11 +102,8 @@ export function formToStoreProxy(form: ProxyFormData): ProxyDefinition {
   }
 
   if (form.type === 'http' || form.type === 'https' || form.type === 'tcpmux') {
-    if (form.customDomains) {
+    if (form.customDomains.length > 0) {
-      block.customDomains = form.customDomains
+      block.customDomains = form.customDomains.filter(Boolean)
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean)
     }
     if (form.subdomain) {
       block.subdomain = form.subdomain
@@ -371,11 +111,8 @@ export function formToStoreProxy(form: ProxyFormData): ProxyDefinition {
   }
 
   if (form.type === 'http') {
-    if (form.locations) {
+    if (form.locations.length > 0) {
-      block.locations = form.locations
+      block.locations = form.locations.filter(Boolean)
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean)
     }
     if (form.httpUser) block.httpUser = form.httpUser
     if (form.httpPassword) block.httpPassword = form.httpPassword
@@ -409,11 +146,8 @@ export function formToStoreProxy(form: ProxyFormData): ProxyDefinition {
 
   if (form.type === 'stcp' || form.type === 'sudp' || form.type === 'xtcp') {
     if (form.secretKey) block.secretKey = form.secretKey
-    if (form.allowUsers) {
+    if (form.allowUsers.length > 0) {
-      block.allowUsers = form.allowUsers
+      block.allowUsers = form.allowUsers.filter(Boolean)
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean)
     }
   }
 
@@ -644,17 +378,17 @@ export function storeProxyToForm(config: ProxyDefinition): ProxyFormData {
 
   // Domain config
   if (Array.isArray(c.customDomains)) {
-    form.customDomains = c.customDomains.join(', ')
-  } else if (c.customDomains) {
     form.customDomains = c.customDomains
+  } else if (c.customDomains) {
+    form.customDomains = [c.customDomains]
   }
   form.subdomain = c.subdomain || ''
 
   // HTTP specific
   if (Array.isArray(c.locations)) {
-    form.locations = c.locations.join(', ')
-  } else if (c.locations) {
     form.locations = c.locations
+  } else if (c.locations) {
+    form.locations = [c.locations]
   }
   form.httpUser = c.httpUser || ''
   form.httpPassword = c.httpPassword || ''
@@ -679,9 +413,9 @@ export function storeProxyToForm(config: ProxyDefinition): ProxyFormData {
   // Secure types
   form.secretKey = c.secretKey || ''
   if (Array.isArray(c.allowUsers)) {
-    form.allowUsers = c.allowUsers.join(', ')
-  } else if (c.allowUsers) {
     form.allowUsers = c.allowUsers
+  } else if (c.allowUsers) {
+    form.allowUsers = [c.allowUsers]
   }
 
   // XTCP NAT traversal

web/frpc/src/types/proxy-form.ts

@@ -0,0 +1,167 @@
+import type { ProxyType, VisitorType } from './constants'
+
+export interface ProxyFormData {
+  // Base fields (ProxyBaseConfig)
+  name: string
+  type: ProxyType
+  enabled: boolean
+
+  // Backend (ProxyBackend)
+  localIP: string
+  localPort: number | undefined
+  pluginType: string
+  pluginConfig: Record<string, any>
+
+  // Transport (ProxyTransport)
+  useEncryption: boolean
+  useCompression: boolean
+  bandwidthLimit: string
+  bandwidthLimitMode: string
+  proxyProtocolVersion: string
+
+  // Load Balancer (LoadBalancerConfig)
+  loadBalancerGroup: string
+  loadBalancerGroupKey: string
+
+  // Health Check (HealthCheckConfig)
+  healthCheckType: string
+  healthCheckTimeoutSeconds: number | undefined
+  healthCheckMaxFailed: number | undefined
+  healthCheckIntervalSeconds: number | undefined
+  healthCheckPath: string
+  healthCheckHTTPHeaders: Array<{ name: string; value: string }>
+
+  // Metadata & Annotations
+  metadatas: Array<{ key: string; value: string }>
+  annotations: Array<{ key: string; value: string }>
+
+  // TCP/UDP specific
+  remotePort: number | undefined
+
+  // Domain (HTTP/HTTPS/TCPMux) - DomainConfig
+  customDomains: string[]
+  subdomain: string
+
+  // HTTP specific (HTTPProxyConfig)
+  locations: string[]
+  httpUser: string
+  httpPassword: string
+  hostHeaderRewrite: string
+  requestHeaders: Array<{ key: string; value: string }>
+  responseHeaders: Array<{ key: string; value: string }>
+  routeByHTTPUser: string
+
+  // TCPMux specific
+  multiplexer: string
+
+  // STCP/SUDP/XTCP specific
+  secretKey: string
+  allowUsers: string[]
+
+  // XTCP specific (NatTraversalConfig)
+  natTraversalDisableAssistedAddrs: boolean
+}
+
+export interface VisitorFormData {
+  // Base fields (VisitorBaseConfig)
+  name: string
+  type: VisitorType
+  enabled: boolean
+
+  // Transport (VisitorTransport)
+  useEncryption: boolean
+  useCompression: boolean
+
+  // Connection
+  secretKey: string
+  serverUser: string
+  serverName: string
+  bindAddr: string
+  bindPort: number | undefined
+
+  // XTCP specific (XTCPVisitorConfig)
+  protocol: string
+  keepTunnelOpen: boolean
+  maxRetriesAnHour: number | undefined
+  minRetryInterval: number | undefined
+  fallbackTo: string
+  fallbackTimeoutMs: number | undefined
+  natTraversalDisableAssistedAddrs: boolean
+}
+
+export function createDefaultProxyForm(): ProxyFormData {
+  return {
+    name: '',
+    type: 'tcp',
+    enabled: true,
+
+    localIP: '127.0.0.1',
+    localPort: undefined,
+    pluginType: '',
+    pluginConfig: {},
+
+    useEncryption: false,
+    useCompression: false,
+    bandwidthLimit: '',
+    bandwidthLimitMode: 'client',
+    proxyProtocolVersion: '',
+
+    loadBalancerGroup: '',
+    loadBalancerGroupKey: '',
+
+    healthCheckType: '',
+    healthCheckTimeoutSeconds: undefined,
+    healthCheckMaxFailed: undefined,
+    healthCheckIntervalSeconds: undefined,
+    healthCheckPath: '',
+    healthCheckHTTPHeaders: [],
+
+    metadatas: [],
+    annotations: [],
+
+    remotePort: undefined,
+
+    customDomains: [],
+    subdomain: '',
+
+    locations: [],
+    httpUser: '',
+    httpPassword: '',
+    hostHeaderRewrite: '',
+    requestHeaders: [],
+    responseHeaders: [],
+    routeByHTTPUser: '',
+
+    multiplexer: 'httpconnect',
+
+    secretKey: '',
+    allowUsers: [],
+
+    natTraversalDisableAssistedAddrs: false,
+  }
+}
+
+export function createDefaultVisitorForm(): VisitorFormData {
+  return {
+    name: '',
+    type: 'stcp',
+    enabled: true,
+
+    useEncryption: false,
+    useCompression: false,
+
+    secretKey: '',
+    serverUser: '',
+    serverName: '',
+    bindAddr: '127.0.0.1',
+    bindPort: undefined,
+
+    protocol: 'quic',
+    keepTunnelOpen: false,
+    maxRetriesAnHour: undefined,
+    minRetryInterval: undefined,
+    fallbackTo: '',
+    fallbackTimeoutMs: undefined,
+    natTraversalDisableAssistedAddrs: false,
+  }
+}

web/frpc/src/types/proxy-status.ts

@@ -0,0 +1,13 @@
+export interface ProxyStatus {
+  name: string
+  type: string
+  status: string
+  err: string
+  local_addr: string
+  plugin: string
+  remote_addr: string
+  source?: 'store' | 'config'
+  [key: string]: any
+}
+
+export type StatusResponse = Record<string, ProxyStatus[]>

web/frpc/src/types/proxy-store.ts

@@ -0,0 +1,30 @@
+import type { ProxyType, VisitorType } from './constants'
+
+export interface ProxyDefinition {
+  name: string
+  type: ProxyType
+  tcp?: Record<string, any>
+  udp?: Record<string, any>
+  http?: Record<string, any>
+  https?: Record<string, any>
+  tcpmux?: Record<string, any>
+  stcp?: Record<string, any>
+  sudp?: Record<string, any>
+  xtcp?: Record<string, any>
+}
+
+export interface VisitorDefinition {
+  name: string
+  type: VisitorType
+  stcp?: Record<string, any>
+  sudp?: Record<string, any>
+  xtcp?: Record<string, any>
+}
+
+export interface ProxyListResp {
+  proxies: ProxyDefinition[]
+}
+
+export interface VisitorListResp {
+  visitors: VisitorDefinition[]
+}

web/frpc/src/views/ClientConfigure.vue

@@ -2,127 +2,65 @@
   <div class="configure-page">
     <div class="page-header">
       <div class="title-section">
-        <h1 class="page-title">Configuration</h1>
+        <h1 class="page-title">Config</h1>
-        <p class="page-subtitle">
-          Edit and manage your frpc configuration file
-        </p>
       </div>
     </div>
 
-    <el-row :gutter="20">
+    <div class="editor-header">
-      <el-col :xs="24" :lg="16">
-        <el-card class="editor-card" shadow="hover">
-          <template #header>
-            <div class="card-header">
       <div class="header-left">
-                <span class="card-title">Configuration Editor</span>
-                <el-tag size="small" type="success">TOML</el-tag>
-              </div>
-              <div class="header-actions">
-                <el-tooltip content="Refresh" placement="top">
-                  <el-button :icon="Refresh" circle @click="fetchData" />
-                </el-tooltip>
-                <el-button type="primary" :icon="Upload" @click="handleUpload">
-                  Update & Reload
-                </el-button>
-              </div>
-            </div>
-          </template>
-
-          <div class="editor-wrapper">
-            <el-input
-              type="textarea"
-              :autosize="{ minRows: 20, maxRows: 40 }"
-              v-model="configContent"
-              placeholder="# frpc configuration file content...
-
-[common]
-server_addr = 127.0.0.1
-server_port = 7000"
-              class="code-editor"
-            ></el-input>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :xs="24" :lg="8">
-        <el-card class="help-card" shadow="hover">
-          <template #header>
-            <div class="card-header">
-              <span class="card-title">Quick Reference</span>
-            </div>
-          </template>
-          <div class="help-content">
-            <div class="help-section">
-              <h4 class="help-section-title">Common Settings</h4>
-              <div class="help-items">
-                <div class="help-item">
-                  <code>serverAddr</code>
-                  <span>Server address</span>
-                </div>
-                <div class="help-item">
-                  <code>serverPort</code>
-                  <span>Server port (default: 7000)</span>
-                </div>
-                <div class="help-item">
-                  <code>auth.token</code>
-                  <span>Authentication token</span>
-                </div>
-              </div>
-            </div>
-
-            <div class="help-section">
-              <h4 class="help-section-title">Proxy Types</h4>
-              <div class="proxy-type-tags">
-                <el-tag type="primary" effect="plain">TCP</el-tag>
-                <el-tag type="success" effect="plain">UDP</el-tag>
-                <el-tag type="warning" effect="plain">HTTP</el-tag>
-                <el-tag type="danger" effect="plain">HTTPS</el-tag>
-                <el-tag type="info" effect="plain">STCP</el-tag>
-                <el-tag effect="plain">XTCP</el-tag>
-              </div>
-            </div>
-
-            <div class="help-section">
-              <h4 class="help-section-title">Example Proxy</h4>
-              <pre class="code-example">
-[[proxies]]
-name = "web"
-type = "http"
-localPort = 80
-customDomains = ["example.com"]</pre
-              >
-            </div>
-
-            <div class="help-section">
         <a
           href="https://github.com/fatedier/frp#configuration-files"
           target="_blank"
           class="docs-link"
         >
           <el-icon><Link /></el-icon>
-                View Full Documentation
+          Documentation
         </a>
       </div>
+      <div class="header-actions">
+        <ActionButton @click="handleUpload">Update & Reload</ActionButton>
       </div>
-        </el-card>
+    </div>
-      </el-col>
+
-    </el-row>
+    <div class="editor-wrapper">
+      <el-input
+        type="textarea"
+        :autosize="false"
+        v-model="configContent"
+        placeholder="# frpc configuration file content...
+
+serverAddr = &quot;127.0.0.1&quot;
+serverPort = 7000"
+        class="code-editor"
+      ></el-input>
+    </div>
+
+    <ConfirmDialog
+      v-model="confirmVisible"
+      title="Confirm Update"
+      message="This operation will update your frpc configuration and reload it. Do you want to continue?"
+      confirm-text="Update"
+      :loading="uploading"
+      @confirm="doUpload"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
-import { Refresh, Upload, Link } from '@element-plus/icons-vue'
+import { Link } from '@element-plus/icons-vue'
-import { getConfig, putConfig, reloadConfig } from '../api/frpc'
+import { useClientStore } from '../stores/client'
+import ActionButton from '../components/ActionButton.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
 
+const clientStore = useClientStore()
 const configContent = ref('')
 
 const fetchData = async () => {
   try {
-    const text = await getConfig()
+    await clientStore.fetchConfig()
-    configContent.value = text
+    configContent.value = clientStore.config
   } catch (err: any) {
     ElMessage({
       showClose: true,
@@ -132,256 +70,116 @@ const fetchData = async () => {
   }
 }
 
+const confirmVisible = ref(false)
+const uploading = ref(false)
+
 const handleUpload = () => {
-  ElMessageBox.confirm(
+  confirmVisible.value = true
-    'This operation will update your frpc configuration and reload it. Do you want to continue?',
+}
-    'Confirm Update',
+
-    {
+const doUpload = async () => {
-      confirmButtonText: 'Update',
-      cancelButtonText: 'Cancel',
-      type: 'warning',
-    },
-  )
-    .then(async () => {
   if (!configContent.value.trim()) {
-        ElMessage({
+    ElMessage.warning('Configuration content cannot be empty!')
-          message: 'Configuration content cannot be empty!',
-          type: 'warning',
-        })
     return
   }
 
+  uploading.value = true
   try {
-        await putConfig(configContent.value)
+    await clientStore.saveConfig(configContent.value)
-        await reloadConfig()
+    await clientStore.reload()
-        ElMessage({
+    ElMessage.success('Configuration updated and reloaded successfully')
-          type: 'success',
+    confirmVisible.value = false
-          message: 'Configuration updated and reloaded successfully',
-        })
   } catch (err: any) {
-        ElMessage({
+    ElMessage.error('Update failed: ' + err.message)
-          showClose: true,
+  } finally {
-          message: 'Update failed: ' + err.message,
+    uploading.value = false
-          type: 'error',
-        })
   }
-    })
-    .catch(() => {
-      // cancelled
-    })
 }
 
 fetchData()
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .configure-page {
-  display: flex;
+  height: 100%;
-  flex-direction: column;
+  overflow: hidden;
-  gap: 24px;
+  padding: $spacing-xl 40px;
+  max-width: 960px;
+  margin: 0 auto;
+  @include flex-column;
+  gap: $spacing-sm;
 }
 
+.editor-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+
 .page-header {
-  display: flex;
+  @include flex-column;
-  flex-direction: column;
+  gap: $spacing-sm;
-  gap: 8px;
+  margin-bottom: $spacing-sm;
 }
 
-.title-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
 
-.page-title {
+.editor-header {
-  font-size: 28px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  margin: 0;
-  line-height: 1.2;
-}
-
-.page-subtitle {
-  font-size: 14px;
-  color: var(--el-text-color-secondary);
-  margin: 0;
-}
-
-.editor-card,
-.help-card {
-  border-radius: 12px;
-  border: 1px solid #e4e7ed;
-}
-
-html.dark .editor-card,
-html.dark .help-card {
-  border-color: #3a3d5c;
-  background: #27293d;
-}
-
-.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
 }
 
 .header-left {
   display: flex;
   align-items: center;
-  gap: 12px;
 }
 
 .header-actions {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: $spacing-sm;
-}
-
-.card-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: #303133;
-}
-
-html.dark .card-title {
-  color: #e5e7eb;
-}
-
-.editor-wrapper {
-  position: relative;
-}
-
-.code-editor :deep(.el-textarea__inner) {
-  font-family:
-    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  padding: 16px;
-  border-radius: 8px;
-  background: #f8f9fa;
-  border: 1px solid #e4e7ed;
-  resize: none;
-}
-
-html.dark .code-editor :deep(.el-textarea__inner) {
-  background: #1e1e2d;
-  border-color: #3a3d5c;
-  color: #e5e7eb;
-}
-
-.code-editor :deep(.el-textarea__inner:focus) {
-  border-color: var(--el-color-primary);
-  box-shadow: 0 0 0 1px var(--el-color-primary-light-5);
-}
-
-/* Help Card */
-.help-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.help-section {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.help-section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  margin: 0;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.help-items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.help-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  background: #f8f9fa;
-  border-radius: 6px;
-  font-size: 13px;
-}
-
-html.dark .help-item {
-  background: #1e1e2d;
-}
-
-.help-item code {
-  font-family:
-    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-weight: 500;
-}
-
-.help-item span {
-  color: var(--el-text-color-secondary);
-  flex: 1;
-}
-
-.proxy-type-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.code-example {
-  font-family:
-    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.6;
-  padding: 12px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e4e7ed;
-  margin: 0;
-  overflow-x: auto;
-  white-space: pre;
-}
-
-html.dark .code-example {
-  background: #1e1e2d;
-  border-color: #3a3d5c;
-  color: #e5e7eb;
 }
 
 .docs-link {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: $spacing-xs;
-  color: var(--el-color-primary);
+  color: $color-text-muted;
   text-decoration: none;
-  font-size: 14px;
+  font-size: $font-size-sm;
-  font-weight: 500;
+  transition: color $transition-fast;
-  padding: 12px 16px;
+
-  background: var(--el-color-primary-light-9);
+  &:hover {
-  border-radius: 8px;
+    color: $color-text-primary;
-  transition: all 0.2s;
+  }
 }
 
-.docs-link:hover {
+.code-editor {
-  background: var(--el-color-primary-light-8);
+  height: 100%;
+
+  :deep(.el-textarea__inner) {
+    height: 100% !important;
+    overflow-y: auto;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    padding: $spacing-lg;
+    border-radius: $radius-md;
+    background: $color-bg-tertiary;
+    border: 1px solid $color-border-light;
+    resize: none;
+
+    &:focus {
+      border-color: $color-text-light;
+      box-shadow: none;
+    }
+  }
 }
 
-@media (max-width: 768px) {
+@include mobile {
-  .card-header {
+  .configure-page {
-    flex-direction: column;
+    padding: $spacing-xl $spacing-lg;
-    align-items: stretch;
   }
 
   .header-left {
@@ -392,10 +190,4 @@ html.dark .code-example {
     justify-content: flex-end;
   }
 }
-
-@media (max-width: 992px) {
-  .help-card {
-    margin-top: 20px;
-  }
-}
 </style>

web/frpc/src/views/ProxyDetail.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="proxy-detail-page">
+    <!-- Fixed Header -->
+    <div class="detail-top">
+      <nav class="breadcrumb">
+        <router-link :to="isStore ? '/proxies?tab=store' : '/proxies'" class="breadcrumb-link">Proxies</router-link>
+        <span class="breadcrumb-sep">&rsaquo;</span>
+        <span class="breadcrumb-current">{{ proxyName }}</span>
+      </nav>
+
+      <template v-if="proxy">
+        <div class="detail-header">
+          <div>
+            <div class="header-title-row">
+              <h2 class="detail-title">{{ proxy.name }}</h2>
+              <span class="status-pill" :class="statusClass">
+                <span class="status-dot"></span>
+                {{ proxy.status }}
+              </span>
+            </div>
+            <p class="header-subtitle">
+              Source: {{ displaySource }} &middot; Type:
+              {{ proxy.type.toUpperCase() }}
+            </p>
+          </div>
+          <div v-if="isStore" class="header-actions">
+            <ActionButton variant="outline" size="small" @click="handleEdit">
+              Edit
+            </ActionButton>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Scrollable Content -->
+    <div v-if="notFound" class="not-found">
+      <p class="empty-text">Proxy not found</p>
+      <p class="empty-hint">The proxy "{{ proxyName }}" does not exist.</p>
+      <ActionButton variant="outline" @click="router.push('/proxies')">
+        Back to Proxies
+      </ActionButton>
+    </div>
+
+    <div v-else-if="proxy" v-loading="loading" class="detail-content">
+      <!-- Error Banner -->
+      <div v-if="proxy.err" class="error-banner">
+        <el-icon class="error-icon"><Warning /></el-icon>
+        <div>
+          <div class="error-title">Connection Error</div>
+          <div class="error-message">{{ proxy.err }}</div>
+        </div>
+      </div>
+
+      <!-- Config Sections -->
+      <ProxyFormLayout
+        v-if="formData"
+        :model-value="formData"
+        readonly
+      />
+    </div>
+
+    <div v-else v-loading="loading" class="loading-area"></div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+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 ProxyFormLayout from '../components/proxy-form/ProxyFormLayout.vue'
+import { getProxyConfig, getStoreProxy } from '../api/frpc'
+import { useProxyStore } from '../stores/proxy'
+import { storeProxyToForm } from '../types'
+import type { ProxyStatus, ProxyDefinition, ProxyFormData } from '../types'
+
+const route = useRoute()
+const router = useRouter()
+const proxyStore = useProxyStore()
+
+const proxyName = route.params.name as string
+const proxy = ref<ProxyStatus | null>(null)
+const proxyConfig = ref<ProxyDefinition | null>(null)
+const loading = ref(true)
+const notFound = ref(false)
+const isStore = ref(false)
+
+onMounted(async () => {
+  try {
+    // Try status API first
+    await proxyStore.fetchStatus()
+    const found = proxyStore.proxies.find((p) => p.name === proxyName)
+
+    // Try config API (works for any source)
+    let configDef: ProxyDefinition | null = null
+    try {
+      configDef = await getProxyConfig(proxyName)
+      proxyConfig.value = configDef
+    } catch {
+      // Config not available
+    }
+
+    // Check if proxy is from the store (for Edit/Delete buttons)
+    try {
+      await getStoreProxy(proxyName)
+      isStore.value = true
+    } catch {
+      // Not a store proxy
+    }
+
+    if (found) {
+      proxy.value = found
+    } else if (configDef) {
+      // Proxy not in status (e.g. disabled), build from config definition
+      const block = (configDef as any)[configDef.type]
+      const localIP = block?.localIP || '127.0.0.1'
+      const localPort = block?.localPort
+      const enabled = block?.enabled !== false
+      proxy.value = {
+        name: configDef.name,
+        type: configDef.type,
+        status: enabled ? 'waiting' : 'disabled',
+        err: '',
+        local_addr: localPort != null ? `${localIP}:${localPort}` : '',
+        remote_addr: block?.remotePort != null ? `:${block.remotePort}` : '',
+        plugin: block?.plugin?.type || '',
+      }
+    } else {
+      notFound.value = true
+    }
+  } catch (err: any) {
+    ElMessage.error('Failed to load proxy: ' + err.message)
+  } finally {
+    loading.value = false
+  }
+})
+
+const displaySource = computed(() =>
+  isStore.value ? 'store' : 'config',
+)
+
+const statusClass = computed(() => {
+  const s = proxy.value?.status
+  if (s === 'running') return 'running'
+  if (s === 'error') return 'error'
+  if (s === 'disabled') return 'disabled'
+  return 'waiting'
+})
+
+const formData = computed((): ProxyFormData | null => {
+  if (!proxyConfig.value) return null
+  return storeProxyToForm(proxyConfig.value)
+})
+
+const handleEdit = () => {
+  router.push('/proxies/' + encodeURIComponent(proxyName) + '/edit')
+}
+
+</script>
+
+<style scoped lang="scss">
+.proxy-detail-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.detail-top {
+  flex-shrink: 0;
+  padding: $spacing-xl 24px 0;
+}
+
+.detail-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 24px 160px;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  font-size: $font-size-md;
+  margin-bottom: $spacing-lg;
+}
+
+.breadcrumb-link {
+  color: $color-text-secondary;
+  text-decoration: none;
+
+  &:hover {
+    color: $color-text-primary;
+  }
+}
+
+.breadcrumb-sep {
+  color: $color-text-light;
+}
+
+.breadcrumb-current {
+  color: $color-text-primary;
+  font-weight: $font-weight-medium;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: $spacing-xl;
+}
+
+.header-title-row {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  margin-bottom: $spacing-sm;
+}
+
+.detail-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: $font-weight-semibold;
+  color: $color-text-primary;
+}
+
+.header-subtitle {
+  font-size: $font-size-sm;
+  color: $color-text-muted;
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.error-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-sm;
+  padding: 12px 16px;
+  background: var(--color-danger-light);
+  border: 1px solid rgba(245, 108, 108, 0.2);
+  border-radius: $radius-md;
+  margin-bottom: $spacing-xl;
+
+  .error-icon {
+    color: $color-danger;
+    font-size: 18px;
+    margin-top: 2px;
+  }
+
+  .error-title {
+    font-size: $font-size-md;
+    font-weight: $font-weight-medium;
+    color: $color-danger;
+    margin-bottom: 2px;
+  }
+
+  .error-message {
+    font-size: $font-size-sm;
+    color: $color-text-muted;
+  }
+}
+
+.not-found,
+.loading-area {
+  text-align: center;
+  padding: 60px $spacing-xl;
+}
+
+.empty-text {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-medium;
+  color: $color-text-secondary;
+  margin: 0 0 $spacing-xs;
+}
+
+.empty-hint {
+  font-size: $font-size-sm;
+  color: $color-text-muted;
+  margin: 0 0 $spacing-lg;
+}
+
+@include mobile {
+  .detail-top {
+    padding: $spacing-xl $spacing-lg 0;
+  }
+
+  .detail-content {
+    padding: 0 $spacing-lg $spacing-xl;
+  }
+
+  .detail-header {
+    flex-direction: column;
+    gap: $spacing-md;
+  }
+}
+</style>

web/frpc/src/views/ProxyList.vue

@@ -0,0 +1,439 @@
+<template>
+  <div class="proxies-page">
+    <!-- Fixed top area -->
+    <div class="page-top">
+      <!-- Header -->
+      <div class="page-header">
+        <h2 class="page-title">Proxies</h2>
+      </div>
+
+      <!-- Tabs -->
+      <div class="tab-bar">
+        <div class="tab-buttons">
+          <button class="tab-btn" :class="{ active: activeTab === 'status' }" @click="switchTab('status')">Status</button>
+          <button class="tab-btn" :class="{ active: activeTab === 'store' }" @click="switchTab('store')">Store</button>
+        </div>
+        <div class="tab-actions">
+          <ActionButton variant="outline" size="small" @click="refreshData">
+            <el-icon><Refresh /></el-icon>
+          </ActionButton>
+          <ActionButton v-if="activeTab === 'store' && proxyStore.storeEnabled" size="small" @click="handleCreate">
+            + New Proxy
+          </ActionButton>
+        </div>
+      </div>
+
+      <!-- Status Tab Filters -->
+      <template v-if="activeTab === 'status'">
+        <StatusPills v-if="!isMobile" :items="proxyStore.proxies" v-model="statusFilter" />
+        <div class="filter-bar">
+          <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" />
+        </div>
+      </template>
+
+      <!-- Store Tab Filters -->
+      <template v-if="activeTab === 'store' && proxyStore.storeEnabled">
+        <div class="filter-bar">
+          <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" />
+        </div>
+      </template>
+    </div>
+
+    <!-- Scrollable list area -->
+    <div class="page-content">
+      <!-- Status Tab List -->
+      <div v-if="activeTab === 'status'" v-loading="proxyStore.loading">
+        <div v-if="filteredStatus.length > 0" class="proxy-list">
+          <ProxyCard
+            v-for="p in filteredStatus"
+            :key="p.name"
+            :proxy="p"
+            showSource
+            @click="goToDetail(p.name)"
+          />
+        </div>
+        <div v-else-if="!proxyStore.loading" class="empty-state">
+          <p class="empty-text">No proxies found</p>
+          <p class="empty-hint">Proxies will appear here once configured and connected.</p>
+        </div>
+      </div>
+
+      <!-- Store Tab List -->
+      <div v-if="activeTab === 'store'" v-loading="proxyStore.storeLoading">
+        <div v-if="!proxyStore.storeEnabled" class="store-disabled">
+          <p>Store is not enabled. Add the following to your frpc configuration:</p>
+          <pre class="config-hint">[store]
+path = "./frpc_store.json"</pre>
+        </div>
+        <template v-else>
+          <div v-if="filteredStoreProxies.length > 0" class="proxy-list">
+            <ProxyCard
+              v-for="p in filteredStoreProxies"
+              :key="p.name"
+              :proxy="proxyStore.storeProxyWithStatus(p)"
+              showActions
+              @click="goToDetail(p.name)"
+              @edit="handleEdit"
+              @toggle="handleToggleProxy"
+              @delete="handleDeleteProxy(p.name)"
+            />
+          </div>
+          <div v-else class="empty-state">
+            <p class="empty-text">No store proxies</p>
+            <p class="empty-hint">Click "New Proxy" to create one.</p>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <ConfirmDialog
+      v-model="deleteDialog.visible"
+      title="Delete Proxy"
+      :message="deleteDialog.message"
+      confirm-text="Delete"
+      danger
+      :loading="deleteDialog.loading"
+      @confirm="doDelete"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+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 StatusPills from '../components/StatusPills.vue'
+import FilterDropdown from '../components/FilterDropdown.vue'
+import ProxyCard from '../components/ProxyCard.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
+import { useProxyStore } from '../stores/proxy'
+import { useResponsive } from '../composables/useResponsive'
+import type { ProxyStatus } from '../types'
+
+const { isMobile } = useResponsive()
+
+const route = useRoute()
+const router = useRouter()
+const proxyStore = useProxyStore()
+
+// Tab
+const activeTab = computed(() => {
+  const tab = route.query.tab as string
+  return tab === 'store' ? 'store' : 'status'
+})
+
+const switchTab = (tab: string) => {
+  router.replace({ query: tab === 'status' ? {} : { tab } })
+}
+
+// Filters (local UI state)
+const statusFilter = ref('')
+const typeFilter = ref('')
+const sourceFilter = ref('')
+const searchText = ref('')
+const storeSearch = ref('')
+const storeTypeFilter = ref('')
+
+// Delete dialog
+const deleteDialog = reactive({
+  visible: false,
+  title: 'Delete Proxy',
+  message: '',
+  loading: false,
+  name: '',
+})
+
+// Source handling
+const displaySource = (proxy: ProxyStatus): string => {
+  return proxy.source === 'store' ? 'store' : 'config'
+}
+
+// Filter options
+const sourceOptions = computed(() => {
+  const sources = new Set<string>()
+  sources.add('config')
+  sources.add('store')
+  proxyStore.proxies.forEach((p) => {
+    sources.add(displaySource(p))
+  })
+  return Array.from(sources)
+    .sort()
+    .map((s) => ({ label: s, value: s }))
+})
+
+const PROXY_TYPE_ORDER = ['tcp', 'udp', 'http', 'https', 'tcpmux', 'stcp', 'sudp', 'xtcp']
+
+const sortByTypeOrder = (types: string[]) => {
+  return types.sort((a, b) => {
+    const ia = PROXY_TYPE_ORDER.indexOf(a)
+    const ib = PROXY_TYPE_ORDER.indexOf(b)
+    return (ia === -1 ? 999 : ia) - (ib === -1 ? 999 : ib)
+  })
+}
+
+const typeOptions = computed(() => {
+  const types = new Set<string>()
+  proxyStore.proxies.forEach((p) => types.add(p.type))
+  return sortByTypeOrder(Array.from(types))
+    .map((t) => ({ label: t.toUpperCase(), value: t }))
+})
+
+const storeTypeOptions = computed(() => {
+  const types = new Set<string>()
+  proxyStore.storeProxies.forEach((p) => types.add(p.type))
+  return sortByTypeOrder(Array.from(types))
+    .map((t) => ({ label: t.toUpperCase(), value: t }))
+})
+
+// Filtered computeds — Status tab uses proxyStore.proxies (runtime only)
+const filteredStatus = computed(() => {
+  let result = proxyStore.proxies as ProxyStatus[]
+
+  if (statusFilter.value) {
+    result = result.filter((p) => p.status === statusFilter.value)
+  }
+
+  if (typeFilter.value) {
+    result = result.filter((p) => p.type === typeFilter.value)
+  }
+
+  if (sourceFilter.value) {
+    result = result.filter((p) => displaySource(p) === sourceFilter.value)
+  }
+
+  if (searchText.value) {
+    const search = searchText.value.toLowerCase()
+    result = result.filter(
+      (p) =>
+        p.name.toLowerCase().includes(search) ||
+        p.type.toLowerCase().includes(search) ||
+        p.local_addr.toLowerCase().includes(search) ||
+        p.remote_addr.toLowerCase().includes(search),
+    )
+  }
+
+  return result
+})
+
+const filteredStoreProxies = computed(() => {
+  let list = proxyStore.storeProxies
+
+  if (storeTypeFilter.value) {
+    list = list.filter((p) => p.type === storeTypeFilter.value)
+  }
+
+  if (storeSearch.value) {
+    const q = storeSearch.value.toLowerCase()
+    list = list.filter((p) => p.name.toLowerCase().includes(q))
+  }
+
+  return list
+})
+
+// Data fetching
+const refreshData = () => {
+  proxyStore.fetchStatus().catch((err: any) => {
+    ElMessage.error('Failed to get status: ' + err.message)
+  })
+  proxyStore.fetchStoreProxies()
+}
+
+// Navigation
+const goToDetail = (name: string) => {
+  router.push('/proxies/detail/' + encodeURIComponent(name))
+}
+
+const handleCreate = () => {
+  router.push('/proxies/create')
+}
+
+const handleEdit = (proxy: ProxyStatus) => {
+  router.push('/proxies/' + encodeURIComponent(proxy.name) + '/edit')
+}
+
+const handleToggleProxy = async (proxy: ProxyStatus, enabled: boolean) => {
+  try {
+    await proxyStore.toggleProxy(proxy.name, enabled)
+    ElMessage.success(enabled ? 'Proxy enabled' : 'Proxy disabled')
+  } catch (err: any) {
+    ElMessage.error('Operation failed: ' + (err.message || 'Unknown error'))
+  }
+}
+
+const handleDeleteProxy = (name: string) => {
+  deleteDialog.name = name
+  deleteDialog.message = `Are you sure you want to delete "${name}"? This action cannot be undone.`
+  deleteDialog.visible = true
+}
+
+const doDelete = async () => {
+  deleteDialog.loading = true
+  try {
+    await proxyStore.deleteProxy(deleteDialog.name)
+    ElMessage.success('Proxy deleted')
+    deleteDialog.visible = false
+    proxyStore.fetchStatus()
+  } catch (err: any) {
+    ElMessage.error('Delete failed: ' + (err.message || 'Unknown error'))
+  } finally {
+    deleteDialog.loading = false
+  }
+}
+
+onMounted(() => {
+  refreshData()
+})
+</script>
+
+<style scoped lang="scss">
+.proxies-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.page-top {
+  flex-shrink: 0;
+  padding: $spacing-xl 40px 0;
+}
+
+.page-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 40px $spacing-xl;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $spacing-xl;
+}
+
+.tab-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid $color-border-lighter;
+  margin-bottom: $spacing-xl;
+}
+
+.tab-buttons {
+  display: flex;
+}
+
+.tab-actions {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.tab-btn {
+  background: none;
+  border: none;
+  padding: $spacing-sm $spacing-xl;
+  font-size: $font-size-md;
+  color: $color-text-muted;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all $transition-fast;
+
+  &:hover { color: $color-text-primary; }
+  &.active {
+    color: $color-text-primary;
+    border-bottom-color: $color-text-primary;
+    font-weight: $font-weight-medium;
+  }
+}
+
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-top: $spacing-lg;
+  padding-bottom: $spacing-lg;
+
+  :deep(.search-input) {
+    flex: 1;
+    min-width: 150px;
+  }
+}
+
+.proxy-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 60px $spacing-xl;
+}
+
+.empty-text {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-medium;
+  color: $color-text-secondary;
+  margin: 0 0 $spacing-xs;
+}
+
+.empty-hint {
+  font-size: $font-size-sm;
+  color: $color-text-muted;
+  margin: 0;
+}
+
+.store-disabled {
+  padding: 32px;
+  text-align: center;
+  color: $color-text-muted;
+}
+
+.config-hint {
+  display: inline-block;
+  text-align: left;
+  background: $color-bg-hover;
+  padding: 12px 20px;
+  border-radius: $radius-sm;
+  font-size: $font-size-sm;
+  margin-top: $spacing-md;
+}
+
+@include mobile {
+  .page-top {
+    padding: $spacing-lg $spacing-lg 0;
+  }
+
+  .page-content {
+    padding: 0 $spacing-lg $spacing-lg;
+  }
+
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $spacing-md;
+  }
+
+  .header-actions {
+    justify-content: flex-end;
+  }
+
+  .filter-bar {
+    :deep(.search-input) {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+</style>

web/frpc/src/views/VisitorDetail.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="visitor-detail-page">
+    <!-- Fixed Header -->
+    <div class="detail-top">
+      <nav class="breadcrumb">
+        <router-link to="/visitors" class="breadcrumb-link">Visitors</router-link>
+        <span class="breadcrumb-sep">&rsaquo;</span>
+        <span class="breadcrumb-current">{{ visitorName }}</span>
+      </nav>
+
+      <template v-if="visitor">
+        <div class="detail-header">
+          <div>
+            <h2 class="detail-title">{{ visitor.name }}</h2>
+            <p class="header-subtitle">Type: {{ visitor.type.toUpperCase() }}</p>
+          </div>
+          <div v-if="isStore" class="header-actions">
+            <ActionButton variant="outline" size="small" @click="handleEdit">
+              Edit
+            </ActionButton>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <div v-if="notFound" class="not-found">
+      <p class="empty-text">Visitor not found</p>
+      <p class="empty-hint">The visitor "{{ visitorName }}" does not exist.</p>
+      <ActionButton variant="outline" @click="router.push('/visitors')">
+        Back to Visitors
+      </ActionButton>
+    </div>
+
+    <div v-else-if="visitor" v-loading="loading" class="detail-content">
+      <VisitorFormLayout
+        v-if="formData"
+        :model-value="formData"
+        readonly
+      />
+    </div>
+
+    <div v-else v-loading="loading" class="loading-area"></div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import ActionButton from '../components/ActionButton.vue'
+import VisitorFormLayout from '../components/visitor-form/VisitorFormLayout.vue'
+import { getVisitorConfig, getStoreVisitor } from '../api/frpc'
+import type { VisitorDefinition, VisitorFormData } from '../types'
+import { storeVisitorToForm } from '../types'
+
+const route = useRoute()
+const router = useRouter()
+
+const visitorName = route.params.name as string
+const visitor = ref<VisitorDefinition | null>(null)
+const loading = ref(true)
+const notFound = ref(false)
+const isStore = ref(false)
+
+onMounted(async () => {
+  try {
+    const config = await getVisitorConfig(visitorName)
+    visitor.value = config
+
+    // Check if visitor is from the store (for Edit/Delete buttons)
+    try {
+      await getStoreVisitor(visitorName)
+      isStore.value = true
+    } catch {
+      // Not a store visitor — Edit/Delete not available
+    }
+  } catch (err: any) {
+    if (err?.status === 404 || err?.response?.status === 404) {
+      notFound.value = true
+    } else {
+      notFound.value = true
+      ElMessage.error('Failed to load visitor: ' + err.message)
+    }
+  } finally {
+    loading.value = false
+  }
+})
+
+const formData = computed<VisitorFormData | null>(() => {
+  if (!visitor.value) return null
+  return storeVisitorToForm(visitor.value)
+})
+
+const handleEdit = () => {
+  router.push('/visitors/' + encodeURIComponent(visitorName) + '/edit')
+}
+
+</script>
+
+<style scoped lang="scss">
+.visitor-detail-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.detail-top {
+  flex-shrink: 0;
+  padding: $spacing-xl 24px 0;
+}
+
+.detail-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 24px 160px;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  font-size: $font-size-md;
+  margin-bottom: $spacing-lg;
+}
+
+.breadcrumb-link {
+  color: $color-text-secondary;
+  text-decoration: none;
+
+  &:hover {
+    color: $color-text-primary;
+  }
+}
+
+.breadcrumb-sep {
+  color: $color-text-light;
+}
+
+.breadcrumb-current {
+  color: $color-text-primary;
+  font-weight: $font-weight-medium;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: $spacing-xl;
+}
+
+.detail-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: $font-weight-semibold;
+  color: $color-text-primary;
+  margin-bottom: $spacing-sm;
+}
+
+.header-subtitle {
+  font-size: $font-size-sm;
+  color: $color-text-muted;
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.not-found,
+.loading-area {
+  text-align: center;
+  padding: 60px $spacing-xl;
+}
+
+.empty-text {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-medium;
+  color: $color-text-secondary;
+  margin: 0 0 $spacing-xs;
+}
+
+.empty-hint {
+  font-size: $font-size-sm;
+  color: $color-text-muted;
+  margin: 0 0 $spacing-lg;
+}
+
+@include mobile {
+  .detail-top {
+    padding: $spacing-xl $spacing-lg 0;
+  }
+
+  .detail-content {
+    padding: 0 $spacing-lg $spacing-xl;
+  }
+
+  .detail-header {
+    flex-direction: column;
+    gap: $spacing-md;
+  }
+}
+</style>

web/frpc/src/views/VisitorEdit.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="visitor-edit-page">
-    <!-- Breadcrumb -->
+    <div class="edit-header">
       <nav class="breadcrumb">
-      <a class="breadcrumb-link" @click="goBack">
+        <router-link to="/visitors" class="breadcrumb-item">Visitors</router-link>
-        <el-icon><ArrowLeft /></el-icon>
+        <span class="breadcrumb-separator">›</span>
-      </a>
+        <span class="breadcrumb-current">{{ isEditing ? 'Edit Visitor' : 'New Visitor' }}</span>
-      <router-link to="/" class="breadcrumb-item">Overview</router-link>
-      <span class="breadcrumb-separator">/</span>
-      <span class="breadcrumb-current">{{
-        isEditing ? 'Edit Visitor' : 'Create Visitor'
-      }}</span>
       </nav>
+      <div class="header-actions">
+        <ActionButton variant="outline" size="small" @click="goBack">Cancel</ActionButton>
+        <ActionButton size="small" :loading="saving" @click="handleSave">
+          {{ isEditing ? 'Update' : 'Create' }}
+        </ActionButton>
+      </div>
+    </div>
 
     <div v-loading="pageLoading" class="edit-content">
       <el-form
@@ -20,254 +22,49 @@
         label-position="top"
         @submit.prevent
       >
-        <!-- Header Card -->
+        <VisitorFormLayout v-model="form" :editing="isEditing" />
-        <div class="form-card header-card">
-          <div class="card-body">
-            <div class="field-row three-col">
-              <el-form-item label="Name" prop="name" class="field-grow">
-                <el-input
-                  v-model="form.name"
-                  :disabled="isEditing"
-                  placeholder="my-visitor"
-                />
-              </el-form-item>
-              <el-form-item label="Type" prop="type">
-                <el-select
-                  v-model="form.type"
-                  :disabled="isEditing"
-                  :fit-input-width="false"
-                  popper-class="visitor-type-dropdown"
-                  class="type-select"
-                >
-                  <el-option value="stcp" label="STCP">
-                    <div class="type-option">
-                      <span class="type-tag-inline type-stcp">STCP</span>
-                      <span class="type-desc">Secure TCP Visitor</span>
-                    </div>
-                  </el-option>
-                  <el-option value="sudp" label="SUDP">
-                    <div class="type-option">
-                      <span class="type-tag-inline type-sudp">SUDP</span>
-                      <span class="type-desc">Secure UDP Visitor</span>
-                    </div>
-                  </el-option>
-                  <el-option value="xtcp" label="XTCP">
-                    <div class="type-option">
-                      <span class="type-tag-inline type-xtcp">XTCP</span>
-                      <span class="type-desc">P2P (NAT traversal)</span>
-                    </div>
-                  </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="Enabled">
-                <el-switch v-model="form.enabled" />
-              </el-form-item>
-            </div>
-          </div>
-        </div>
-
-        <!-- Connection -->
-        <div class="form-card">
-          <div class="card-header">
-            <h3 class="card-title">Connection</h3>
-          </div>
-          <div class="card-body">
-            <div class="field-row two-col">
-              <el-form-item label="Server Name" prop="serverName">
-                <el-input
-                  v-model="form.serverName"
-                  placeholder="Name of the proxy to visit"
-                />
-              </el-form-item>
-              <el-form-item label="Server User">
-                <el-input
-                  v-model="form.serverUser"
-                  placeholder="Leave empty for same user"
-                />
-              </el-form-item>
-            </div>
-            <el-form-item label="Secret Key">
-              <el-input
-                v-model="form.secretKey"
-                type="password"
-                show-password
-                placeholder="Shared secret"
-              />
-            </el-form-item>
-            <div class="field-row two-col">
-              <el-form-item label="Bind Address">
-                <el-input v-model="form.bindAddr" placeholder="127.0.0.1" />
-              </el-form-item>
-              <el-form-item label="Bind Port" prop="bindPort">
-                <el-input-number
-                  v-model="form.bindPort"
-                  :min="bindPortMin"
-                  :max="65535"
-                  controls-position="right"
-                  class="full-width"
-                />
-              </el-form-item>
-            </div>
-          </div>
-        </div>
-
-        <!-- Transport Options (collapsible) -->
-        <div class="form-card collapsible-card">
-          <div
-            class="card-header clickable"
-            @click="transportExpanded = !transportExpanded"
-          >
-            <h3 class="card-title">Transport Options</h3>
-            <el-icon
-              class="collapse-icon"
-              :class="{ expanded: transportExpanded }"
-              ><ArrowDown
-            /></el-icon>
-          </div>
-          <el-collapse-transition>
-            <div v-show="transportExpanded" class="card-body">
-              <div class="field-row two-col">
-                <el-form-item label="Use Encryption">
-                  <el-switch v-model="form.useEncryption" />
-                </el-form-item>
-                <el-form-item label="Use Compression">
-                  <el-switch v-model="form.useCompression" />
-                </el-form-item>
-              </div>
-            </div>
-          </el-collapse-transition>
-        </div>
-
-        <!-- XTCP Options (collapsible, xtcp only) -->
-        <template v-if="form.type === 'xtcp'">
-          <div class="form-card collapsible-card">
-            <div
-              class="card-header clickable"
-              @click="xtcpExpanded = !xtcpExpanded"
-            >
-              <h3 class="card-title">XTCP Options</h3>
-              <el-icon class="collapse-icon" :class="{ expanded: xtcpExpanded }"
-                ><ArrowDown
-              /></el-icon>
-            </div>
-            <el-collapse-transition>
-              <div v-show="xtcpExpanded" class="card-body">
-                <el-form-item label="Protocol">
-                  <el-select v-model="form.protocol" class="full-width">
-                    <el-option value="quic" label="QUIC" />
-                    <el-option value="kcp" label="KCP" />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="Keep Tunnel Open">
-                  <el-switch v-model="form.keepTunnelOpen" />
-                </el-form-item>
-                <div class="field-row two-col">
-                  <el-form-item label="Max Retries per Hour">
-                    <el-input-number
-                      v-model="form.maxRetriesAnHour"
-                      :min="0"
-                      controls-position="right"
-                      class="full-width"
-                    />
-                  </el-form-item>
-                  <el-form-item label="Min Retry Interval (s)">
-                    <el-input-number
-                      v-model="form.minRetryInterval"
-                      :min="0"
-                      controls-position="right"
-                      class="full-width"
-                    />
-                  </el-form-item>
-                </div>
-                <div class="field-row two-col">
-                  <el-form-item label="Fallback To">
-                    <el-input
-                      v-model="form.fallbackTo"
-                      placeholder="Fallback visitor name"
-                    />
-                  </el-form-item>
-                  <el-form-item label="Fallback Timeout (ms)">
-                    <el-input-number
-                      v-model="form.fallbackTimeoutMs"
-                      :min="0"
-                      controls-position="right"
-                      class="full-width"
-                    />
-                  </el-form-item>
-                </div>
-              </div>
-            </el-collapse-transition>
-          </div>
-
-          <!-- NAT Traversal (collapsible, xtcp only) -->
-          <div class="form-card collapsible-card">
-            <div
-              class="card-header clickable"
-              @click="natExpanded = !natExpanded"
-            >
-              <h3 class="card-title">NAT Traversal</h3>
-              <el-icon class="collapse-icon" :class="{ expanded: natExpanded }"
-                ><ArrowDown
-              /></el-icon>
-            </div>
-            <el-collapse-transition>
-              <div v-show="natExpanded" class="card-body">
-                <el-form-item label="Disable Assisted Addresses">
-                  <el-switch v-model="form.natTraversalDisableAssistedAddrs" />
-                  <div class="form-tip">
-                    Only use STUN-discovered public addresses
-                  </div>
-                </el-form-item>
-              </div>
-            </el-collapse-transition>
-          </div>
-        </template>
       </el-form>
     </div>
 
-    <!-- Sticky Footer -->
+    <ConfirmDialog
-    <div class="sticky-footer">
+      v-model="leaveDialogVisible"
-      <div class="footer-content">
+      title="Unsaved Changes"
-        <el-button @click="goBack">Cancel</el-button>
+      message="You have unsaved changes. Are you sure you want to leave?"
-        <el-button type="primary" :loading="saving" @click="handleSave">
+      @confirm="handleLeaveConfirm"
-          {{ isEditing ? 'Update' : 'Create' }}
+      @cancel="handleLeaveCancel"
-        </el-button>
+    />
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { ArrowLeft, ArrowDown } from '@element-plus/icons-vue'
+import ActionButton from '../components/ActionButton.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
+import VisitorFormLayout from '../components/visitor-form/VisitorFormLayout.vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import {
   type VisitorFormData,
   createDefaultVisitorForm,
   formToStoreVisitor,
   storeVisitorToForm,
-} from '../types/proxy'
+} from '../types'
-import {
+import { getStoreVisitor } from '../api/frpc'
-  getStoreVisitor,
+import { useVisitorStore } from '../stores/visitor'
-  createStoreVisitor,
-  updateStoreVisitor,
-} from '../api/frpc'
 
 const route = useRoute()
 const router = useRouter()
+const visitorStore = useVisitorStore()
 
 const isEditing = computed(() => !!route.params.name)
 const pageLoading = ref(false)
 const saving = ref(false)
 const formRef = ref<FormInstance>()
 const form = ref<VisitorFormData>(createDefaultVisitorForm())
-
+const dirty = ref(false)
-const transportExpanded = ref(false)
+const formSaved = ref(false)
-const xtcpExpanded = ref(false)
+const trackChanges = ref(false)
-const natExpanded = ref(false)
-const bindPortMin = computed(() => (form.value.type === 'sudp' ? 1 : undefined))
 
 const formRules: FormRules = {
   name: [
@@ -310,22 +107,60 @@ const formRules: FormRules = {
 }
 
 const goBack = () => {
-  router.push('/')
+  router.back()
+}
+
+watch(
+  () => form.value,
+  () => {
+    if (trackChanges.value) {
+      dirty.value = true
+    }
+  },
+  { deep: true },
+)
+
+const leaveDialogVisible = ref(false)
+const leaveResolve = ref<((value: boolean) => void) | null>(null)
+
+onBeforeRouteLeave(async () => {
+  if (dirty.value && !formSaved.value) {
+    leaveDialogVisible.value = true
+    return new Promise<boolean>((resolve) => {
+      leaveResolve.value = resolve
+    })
+  }
+})
+
+const handleLeaveConfirm = () => {
+  leaveDialogVisible.value = false
+  leaveResolve.value?.(true)
+}
+
+const handleLeaveCancel = () => {
+  leaveDialogVisible.value = false
+  leaveResolve.value?.(false)
 }
 
 const loadVisitor = async () => {
   const name = route.params.name as string
   if (!name) return
 
+  trackChanges.value = false
+  dirty.value = false
   pageLoading.value = true
   try {
     const res = await getStoreVisitor(name)
     form.value = storeVisitorToForm(res)
+    await nextTick()
   } catch (err: any) {
     ElMessage.error('Failed to load visitor: ' + err.message)
-    router.push('/')
+    router.push('/visitors')
   } finally {
     pageLoading.value = false
+    nextTick(() => {
+      trackChanges.value = true
+    })
   }
 }
 
@@ -343,13 +178,14 @@ const handleSave = async () => {
   try {
     const data = formToStoreVisitor(form.value)
     if (isEditing.value) {
-      await updateStoreVisitor(form.value.name, data)
+      await visitorStore.updateVisitor(form.value.name, data)
       ElMessage.success('Visitor updated')
     } else {
-      await createStoreVisitor(data)
+      await visitorStore.createVisitor(data)
       ElMessage.success('Visitor created')
     }
-    router.push('/')
+    formSaved.value = true
+    router.push('/visitors')
   } catch (err: any) {
     ElMessage.error('Operation failed: ' + (err.message || 'Unknown error'))
   } finally {
@@ -360,6 +196,8 @@ const handleSave = async () => {
 onMounted(() => {
   if (isEditing.value) {
     loadVisitor()
+  } else {
+    trackChanges.value = true
   }
 })
 
@@ -371,14 +209,48 @@ watch(
       loadVisitor()
       return
     }
+    trackChanges.value = false
     form.value = createDefaultVisitorForm()
+    dirty.value = false
+    nextTick(() => {
+      trackChanges.value = true
+    })
   },
 )
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .visitor-edit-page {
-  padding-bottom: 80px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+/* Header */
+.edit-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: 20px 24px;
+}
+
+.edit-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 24px 160px;
+
+  > * {
+    max-width: 960px;
+    margin: 0 auto;
+  }
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
 }
 
 /* Breadcrumb */
@@ -387,20 +259,6 @@ watch(
   align-items: center;
   gap: 8px;
   font-size: 14px;
-  margin-bottom: 24px;
-}
-
-.breadcrumb-link {
-  display: flex;
-  align-items: center;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: color 0.2s;
-  margin-right: 4px;
-}
-
-.breadcrumb-link:hover {
-  color: var(--text-primary);
 }
 
 .breadcrumb-item {
@@ -422,185 +280,13 @@ watch(
   font-weight: 500;
 }
 
-/* Form Cards */
+@include mobile {
-.form-card {
+  .edit-header {
-  background: var(--el-bg-color);
+    padding: 20px 16px;
-  border: 1px solid var(--header-border);
-  border-radius: 12px;
-  margin-bottom: 16px;
-  overflow: hidden;
-}
-
-html.dark .form-card {
-  border-color: #3a3d5c;
-  background: #27293d;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 24px;
-  border-bottom: 1px solid var(--header-border);
-}
-
-html.dark .card-header {
-  border-bottom-color: #3a3d5c;
-}
-
-.card-header.clickable {
-  cursor: pointer;
-  user-select: none;
-  transition: background 0.15s;
-}
-
-.card-header.clickable:hover {
-  background: var(--hover-bg);
-}
-
-.collapsible-card .card-header {
-  border-bottom: none;
-}
-
-.collapsible-card .card-body {
-  border-top: 1px solid var(--header-border);
-}
-
-html.dark .collapsible-card .card-body {
-  border-top-color: #3a3d5c;
-}
-
-.card-title {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.collapse-icon {
-  transition: transform 0.3s;
-  color: var(--text-secondary);
-}
-
-.collapse-icon.expanded {
-  transform: rotate(-180deg);
-}
-
-.card-body {
-  padding: 20px 24px;
-}
-
-/* Field Rows */
-.field-row {
-  display: grid;
-  gap: 16px;
-}
-
-.field-row.two-col {
-  grid-template-columns: 1fr 1fr;
-}
-
-.field-row.three-col {
-  grid-template-columns: 1fr auto auto;
-  align-items: start;
-}
-
-.field-grow {
-  min-width: 0;
-}
-
-.full-width {
-  width: 100%;
-}
-
-.type-select {
-  width: 180px;
-}
-
-.type-option {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 4px 0;
-}
-
-.type-tag-inline {
-  font-size: 10px;
-  font-weight: 600;
-  padding: 2px 6px;
-  border-radius: 4px;
-  letter-spacing: 0.5px;
-}
-
-.type-tag-inline.type-stcp,
-.type-tag-inline.type-sudp,
-.type-tag-inline.type-xtcp {
-  background: rgba(139, 92, 246, 0.1);
-  color: #8b5cf6;
-}
-
-.type-desc {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.form-tip {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  margin-top: 4px;
-}
-
-/* Sticky Footer */
-.sticky-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 99;
-  background: var(--header-bg);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-top: 1px solid var(--header-border);
-}
-
-.footer-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 16px 40px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .field-row.two-col,
-  .field-row.three-col {
-    grid-template-columns: 1fr;
   }
 
-  .type-select {
+  .edit-content {
-    width: 100%;
+    padding: 0 16px 160px;
-  }
-
-  .card-body {
-    padding: 16px;
-  }
-
-  .footer-content {
-    padding: 12px 20px;
   }
 }
 </style>
-
-<style>
-.visitor-type-dropdown {
-  min-width: 300px !important;
-}
-
-.visitor-type-dropdown .el-select-dropdown__item {
-  height: auto;
-  padding: 8px 16px;
-  line-height: 1.4;
-}
-</style>

web/frpc/src/views/VisitorList.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="visitors-page">
+    <!-- Header -->
+    <div class="page-header">
+      <h2 class="page-title">Visitors</h2>
+    </div>
+
+    <!-- Tab bar -->
+    <div class="tab-bar">
+      <div class="tab-buttons">
+        <button class="tab-btn active">Store</button>
+      </div>
+      <div class="tab-actions">
+        <ActionButton variant="outline" size="small" @click="fetchData">
+          <el-icon><Refresh /></el-icon>
+        </ActionButton>
+        <ActionButton v-if="visitorStore.storeEnabled" size="small" @click="handleCreate">
+          + New Visitor
+        </ActionButton>
+      </div>
+    </div>
+
+    <div v-loading="visitorStore.loading">
+      <div v-if="!visitorStore.storeEnabled" class="store-disabled">
+        <p>Store is not enabled. Add the following to your frpc configuration:</p>
+        <pre class="config-hint">[store]
+path = "./frpc_store.json"</pre>
+      </div>
+
+      <template v-else>
+        <div class="filter-bar">
+          <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" />
+        </div>
+
+        <div v-if="filteredVisitors.length > 0" class="visitor-list">
+          <div v-for="v in filteredVisitors" :key="v.name" class="visitor-card" @click="goToDetail(v.name)">
+            <div class="card-left">
+              <div class="card-header">
+                <span class="visitor-name">{{ v.name }}</span>
+                <span class="type-tag">{{ v.type.toUpperCase() }}</span>
+              </div>
+              <div v-if="getServerName(v)" class="card-meta">{{ getServerName(v) }}</div>
+            </div>
+            <div class="card-right">
+              <div @click.stop>
+                <PopoverMenu :width="120" placement="bottom-end">
+                  <template #trigger>
+                    <ActionButton variant="outline" size="small">
+                      <el-icon><MoreFilled /></el-icon>
+                    </ActionButton>
+                  </template>
+                  <PopoverMenuItem @click="handleEdit(v)">
+                    <el-icon><Edit /></el-icon>
+                    Edit
+                  </PopoverMenuItem>
+                  <PopoverMenuItem danger @click="handleDelete(v.name)">
+                    <el-icon><Delete /></el-icon>
+                    Delete
+                  </PopoverMenuItem>
+                </PopoverMenu>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="empty-state">
+          <p class="empty-text">No visitors found</p>
+          <p class="empty-hint">Click "New Visitor" to create one.</p>
+        </div>
+      </template>
+    </div>
+
+    <ConfirmDialog v-model="deleteDialog.visible" title="Delete Visitor"
+      :message="deleteDialog.message" confirm-text="Delete" danger
+      :loading="deleteDialog.loading" @confirm="doDelete" />
+  </div>
+</template>
+
+<script setup lang="ts">
+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 { useVisitorStore } from '../stores/visitor'
+import type { VisitorDefinition } from '../types'
+
+const router = useRouter()
+const visitorStore = useVisitorStore()
+
+const searchText = ref('')
+const typeFilter = ref('')
+
+const deleteDialog = reactive({
+  visible: false,
+  message: '',
+  loading: false,
+  name: '',
+})
+
+const typeOptions = computed(() => {
+  return [
+    { label: 'STCP', value: 'stcp' },
+    { label: 'SUDP', value: 'sudp' },
+    { label: 'XTCP', value: 'xtcp' },
+  ]
+})
+
+const filteredVisitors = computed(() => {
+  let list = visitorStore.storeVisitors
+
+  if (typeFilter.value) {
+    list = list.filter((v) => v.type === typeFilter.value)
+  }
+
+  if (searchText.value) {
+    const q = searchText.value.toLowerCase()
+    list = list.filter((v) => v.name.toLowerCase().includes(q))
+  }
+
+  return list
+})
+
+const getServerName = (v: VisitorDefinition): string => {
+  const block = (v as any)[v.type]
+  return block?.serverName || ''
+}
+
+const fetchData = () => {
+  visitorStore.fetchStoreVisitors()
+}
+
+const handleCreate = () => {
+  router.push('/visitors/create')
+}
+
+const handleEdit = (v: VisitorDefinition) => {
+  router.push('/visitors/' + encodeURIComponent(v.name) + '/edit')
+}
+
+const goToDetail = (name: string) => {
+  router.push('/visitors/detail/' + encodeURIComponent(name))
+}
+
+const handleDelete = (name: string) => {
+  deleteDialog.name = name
+  deleteDialog.message = `Are you sure you want to delete visitor "${name}"? This action cannot be undone.`
+  deleteDialog.visible = true
+}
+
+const doDelete = async () => {
+  deleteDialog.loading = true
+  try {
+    await visitorStore.deleteVisitor(deleteDialog.name)
+    ElMessage.success('Visitor deleted')
+    deleteDialog.visible = false
+    fetchData()
+  } catch (err: any) {
+    ElMessage.error('Delete failed: ' + (err.message || 'Unknown error'))
+  } finally {
+    deleteDialog.loading = false
+  }
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped lang="scss">
+.visitors-page {
+  height: 100%;
+  overflow-y: auto;
+  padding: $spacing-xl 40px;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $spacing-xl;
+}
+
+.tab-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid $color-border-lighter;
+  margin-bottom: $spacing-xl;
+}
+
+.tab-buttons {
+  display: flex;
+}
+
+.tab-btn {
+  background: none;
+  border: none;
+  padding: $spacing-sm $spacing-xl;
+  font-size: $font-size-md;
+  color: $color-text-muted;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all $transition-fast;
+
+  &:hover {
+    color: $color-text-primary;
+  }
+
+  &.active {
+    color: $color-text-primary;
+    border-bottom-color: $color-text-primary;
+    font-weight: $font-weight-medium;
+  }
+}
+
+.tab-actions {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-bottom: $spacing-xl;
+
+  :deep(.search-input) {
+    flex: 1;
+    min-width: 150px;
+  }
+}
+
+.visitor-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.visitor-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: $color-bg-primary;
+  border: 1px solid $color-border-lighter;
+  border-radius: $radius-md;
+  padding: 14px 20px;
+  cursor: pointer;
+  transition: all $transition-medium;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    border-color: $color-border;
+  }
+}
+
+.card-left {
+  @include flex-column;
+  gap: $spacing-sm;
+  flex: 1;
+  min-width: 0;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.visitor-name {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-semibold;
+  color: $color-text-primary;
+}
+
+.type-tag {
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: $color-bg-muted;
+  color: $color-text-secondary;
+}
+
+.card-meta {
+  font-size: $font-size-sm;
+  color: $color-text-muted;
+}
+
+.card-right {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  flex-shrink: 0;
+}
+
+
+
+.store-disabled {
+  padding: 32px;
+  text-align: center;
+  color: $color-text-muted;
+}
+
+.config-hint {
+  display: inline-block;
+  text-align: left;
+  background: $color-bg-hover;
+  padding: 12px 20px;
+  border-radius: $radius-sm;
+  font-size: $font-size-sm;
+  margin-top: $spacing-md;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 60px $spacing-xl;
+}
+
+.empty-text {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-medium;
+  color: $color-text-secondary;
+  margin: 0 0 $spacing-xs;
+}
+
+.empty-hint {
+  font-size: $font-size-sm;
+  color: $color-text-muted;
+  margin: 0;
+}
+
+@include mobile {
+  .visitors-page {
+    padding: $spacing-lg;
+  }
+
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $spacing-md;
+  }
+
+  .filter-bar {
+    flex-wrap: wrap;
+
+    :deep(.search-input) {
+      flex: 1 1 100%;
+    }
+  }
+
+  .visitor-card {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $spacing-sm;
+  }
+
+  .card-right {
+    justify-content: flex-end;
+  }
+}
+</style>

web/frpc/vite.config.mts

@@ -27,6 +27,14 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern',
+        additionalData: `@use "@/assets/css/_index.scss" as *;`,
+      },
+    },
+  },
   build: {
     assetsDir: '',
     chunkSizeWarningLimit: 1000,