重构

apps/admin/src/components/DashboardSubNav.vue

@@ -49,10 +49,10 @@ function isActive(path: string) {
   align-items: center;
   gap: 2px;
   margin-bottom: 16px;
-  padding: 3px;
+  padding: 4px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: #ffffff;
+  border: 1px solid var(--border);
   flex-shrink: 0;
   min-height: 40px;
   box-sizing: border-box;
@@ -61,7 +61,7 @@ function isActive(path: string) {
   margin-bottom: 0;
   padding: 0 14px 0 0;
   border: none;
-  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  border-right: 1px solid var(--border);
   background: transparent;
   flex-shrink: 0;
   height: 44px;
@@ -76,16 +76,27 @@ function isActive(path: string) {
   box-sizing: border-box;
   border-radius: 6px;
   font-size: 13px;
-  font-weight: 500;
-  color: #737373;
+  font-weight: 700;
+  color: var(--text-muted);
   transition: color 0.15s, background 0.15s;
 }
 .dashboard-subnav__item:hover {
-  color: #d4d4d4;
-  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+  background: var(--accent-hover);
 }
 .dashboard-subnav__item--active {
-  color: #f5f5f5;
-  background: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+  background: var(--primary);
+}
+
+@media (max-width: 640px) {
+  .dashboard-subnav {
+    overflow-x: auto;
+    justify-content: flex-start;
+  }
+
+  .dashboard-subnav__item {
+    flex: 0 0 auto;
+  }
 }
 </style>