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

web/shared/css/_index.scss

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

web/shared/css/_mixins.scss

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

web/shared/css/_variables.scss

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