重构

apps/admin/src/components/AdminSubNav.vue

@@ -53,18 +53,18 @@ defineProps<{
   line-height: 1.4;
 }
 .admin-subnav__link {
-  color: #737373;
+  color: var(--text-muted);
   font-weight: 500;
   transition: color 0.15s;
 }
 .admin-subnav__link:hover {
-  color: #f5f5f5;
+  color: var(--text);
 }
 .admin-subnav__current {
-  color: #737373;
+  color: var(--text-muted);
 }
 .admin-subnav__sep {
-  color: #444;
+  color: #b6afa3;
   user-select: none;
 }
 .admin-subnav__main {
@@ -83,14 +83,14 @@ defineProps<{
 }
 .admin-subnav__title {
   margin: 0;
-  font-size: 18px;
-  font-weight: 500;
-  color: #f5f5f5;
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--text);
   letter-spacing: 0;
 }
 .admin-subnav__subtitle {
   font-size: 13px;
-  color: #777;
+  color: var(--text-muted);
 }
 .admin-subnav__extra {
   display: flex;
@@ -98,4 +98,21 @@ defineProps<{
   gap: 8px;
   flex-shrink: 0;
 }
+
+@media (max-width: 640px) {
+  .admin-subnav {
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .admin-subnav__main,
+  .admin-subnav__extra {
+    width: 100%;
+  }
+
+  .admin-subnav__extra {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}
 </style>