feat(ProviderNav): enhance indicator functionality and improve mobile navigation experience

src/components/providers/ProviderNav/ProviderNav.module.scss

@@ -10,6 +10,7 @@
 }
 
 .navList {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -22,7 +23,33 @@
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
 }
 
+.indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: 10px;
+  background: rgba(59, 130, 246, 0.15);
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    height 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 120ms ease;
+  will-change: transform, width, height;
+}
+
+.indicatorVisible {
+  opacity: 1;
+}
+
+.indicatorNoTransition {
+  transition: none;
+}
+
 .navItem {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -45,6 +72,13 @@
   }
 }
 
+.navItem.active {
+  &:hover {
+    background: transparent;
+    transform: none;
+  }
+}
+
 .icon {
   width: 28px;
   height: 28px;
@@ -52,8 +86,9 @@
 }
 
 .active {
-  background: rgba(59, 130, 246, 0.15);
-  box-shadow: inset 0 0 0 2px var(--primary-color);
+  // Active highlight is rendered by the sliding indicator.
+  background: transparent;
+  box-shadow: none;
 }
 
 // 暗色主题适配
@@ -70,7 +105,7 @@
     }
   }
 
-  .active {
+  .indicator {
     background: rgba(59, 130, 246, 0.25);
   }
 }
@@ -83,22 +118,29 @@
     left: 50%;
     bottom: calc(12px + env(safe-area-inset-bottom));
     transform: translateX(-50%);
-    width: min(520px, calc(100vw - 24px));
+    width: fit-content;
+    max-width: calc(100vw - 24px);
   }
 
   .navList {
+    display: inline-flex;
     flex-direction: row;
     gap: 6px;
     padding: 8px 10px;
     border-radius: 999px;
     overflow-x: auto;
     scrollbar-width: none;
+    max-width: inherit;
 
     &::-webkit-scrollbar {
       display: none;
     }
   }
 
+  .indicator {
+    border-radius: 999px;
+  }
+
   .navItem {
     width: 36px;
     height: 36px;
@@ -111,3 +153,13 @@
     height: 22px;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .indicator {
+    transition: none;
+  }
+
+  .navItem {
+    transition: background-color 0.2s ease;
+  }
+}