From db72047447d51cd80fdf8939fa173137f801d5c5 Mon Sep 17 00:00:00 2001
From: Mohan <jtkjcmh@126.com>
Date: Wed, 12 Aug 2026 16:35:36 +0800
Subject: [PATCH] fix(style): responsive header and admin sidebar

---
 src/App.vue                     | 27 +++++++++++++++++++++++++++
 src/views/admin/AdminLayout.vue | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index d14adad..a05b6e7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -164,6 +164,33 @@ async function handleLogout() {
   background: var(--ac-header-active-bg);
 }
 
+@media (max-width: 640px) {
+  .app-header {
+    padding: 0 12px;
+    gap: 10px;
+  }
+
+  .header-page-title {
+    display: none;
+  }
+
+  .nav-links {
+    gap: 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .nav-links::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-links a {
+    padding: 0 10px;
+    white-space: nowrap;
+  }
+}
+
 .app-main {
   margin: 24px auto;
   padding: 0 16px;
diff --git a/src/views/admin/AdminLayout.vue b/src/views/admin/AdminLayout.vue
index 581084e..aabf61a 100644
--- a/src/views/admin/AdminLayout.vue
+++ b/src/views/admin/AdminLayout.vue
@@ -65,4 +65,36 @@ const auth = useAuthStore()
   min-width: 0;
   padding: 20px;
 }
+
+@media (max-width: 640px) {
+  .admin-layout {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    padding: 8px 12px;
+  }
+
+  .sidebar-nav {
+    flex-direction: row;
+    gap: 4px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .sidebar-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .sidebar-nav a {
+    white-space: nowrap;
+    padding: 8px 12px;
+  }
+
+  .content {
+    padding: 12px;
+  }
+}
 </style>