[PR #5247] [MERGED] web/frps: redesign dashboard with sidebar nav and shared component workspace #5201

New issue

Closed

opened 2026-05-05 14:56:36 -06:00 by gitea-mirror · 0 comments

gitea-mirror commented

2026-05-05 14:56:36 -06:00

Owner

📋 Pull Request Information

Original PR: https://github.com/fatedier/frp/pull/5247
Author: @fatedier
Created: 3/20/2026
Status: ✅ Merged
Merged: 3/20/2026
Merged by: @fatedier

Base: dev ← Head: new

📝 Commits (1)

1a828a3 web: remove redundant SCSS and CSS files superseded by shared

📊 Changes

5 files changed (+1 additions, -202 deletions)

View changed files

📝 web/frpc/src/assets/css/_form-layout.scss (+1 -1)
➖ web/frpc/src/assets/css/_index.scss (+0 -2)
➖ web/frpc/src/assets/css/_mixins.scss (+0 -49)
➖ web/frpc/src/assets/css/_variables.scss (+0 -61)
➖ web/frps/src/assets/css/custom.css (+0 -89)

📄 Description

Summary

Redesign frps dashboard from top-nav to sidebar navigation layout, matching frpc's design
Introduce web/shared/ directory with reusable components (PopoverMenu, PopoverMenuItem, FilterDropdown, ActionButton, BaseDialog, ConfirmDialog) and shared SCSS infrastructure
Set up npm workspaces at web/ level for unified dependency management
Replace frps Proxies page controls with shared components (PopoverMenu for client filter, ActionButton for actions, ConfirmDialog for clear offline confirmation)
Compact proxy detail page: stats bar layout, inline timeline metadata, unified Traffic column
Add CSS variable system (var.css, dark.css) and Element Plus global style overrides for frps
Remove redundant local SCSS/CSS files superseded by shared

Test plan

make web builds both frps and frpc successfully
golangci-lint run passes
frps dashboard: sidebar nav, Overview/Clients/Proxies pages render correctly
frps proxy detail page: stats bar, configuration, traffic chart display correctly
frpc dashboard: all pages still work with shared component imports
Mobile responsive: hamburger menu and sidebar overlay work on both dashboards

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/fatedier/frp/pull/5247 **Author:** [@fatedier](https://github.com/fatedier) **Created:** 3/20/2026 **Status:** ✅ Merged **Merged:** 3/20/2026 **Merged by:** [@fatedier](https://github.com/fatedier) **Base:** `dev` ← **Head:** `new` --- ### 📝 Commits (1) - [`1a828a3`](https://github.com/fatedier/frp/commit/1a828a309876a0a7991dc493143f4e3ccbb34804) web: remove redundant SCSS and CSS files superseded by shared ### 📊 Changes **5 files changed** (+1 additions, -202 deletions) <details> <summary>View changed files</summary> 📝 `web/frpc/src/assets/css/_form-layout.scss` (+1 -1) ➖ `web/frpc/src/assets/css/_index.scss` (+0 -2) ➖ `web/frpc/src/assets/css/_mixins.scss` (+0 -49) ➖ `web/frpc/src/assets/css/_variables.scss` (+0 -61) ➖ `web/frps/src/assets/css/custom.css` (+0 -89) </details> ### 📄 Description ## Summary - Redesign frps dashboard from top-nav to sidebar navigation layout, matching frpc's design - Introduce `web/shared/` directory with reusable components (PopoverMenu, PopoverMenuItem, FilterDropdown, ActionButton, BaseDialog, ConfirmDialog) and shared SCSS infrastructure - Set up npm workspaces at `web/` level for unified dependency management - Replace frps Proxies page controls with shared components (PopoverMenu for client filter, ActionButton for actions, ConfirmDialog for clear offline confirmation) - Compact proxy detail page: stats bar layout, inline timeline metadata, unified Traffic column - Add CSS variable system (`var.css`, `dark.css`) and Element Plus global style overrides for frps - Remove redundant local SCSS/CSS files superseded by shared ## Test plan - [ ] `make web` builds both frps and frpc successfully - [ ] `golangci-lint run` passes - [ ] frps dashboard: sidebar nav, Overview/Clients/Proxies pages render correctly - [ ] frps proxy detail page: stats bar, configuration, traffic chart display correctly - [ ] frpc dashboard: all pages still work with shared component imports - [ ] Mobile responsive: hamburger menu and sidebar overlay work on both dashboards --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>