保留页面布局

layouts/admin/components/AdminHeader.uvue

@@ -1,15 +1,25 @@
 <template>
   <view class="header">
     <view class="header-left">
-      <text class="crumb" v-for="(item, index) in breadcrumb" :key="item.id">
-        {{ item.title }}
-        <text v-if="index < breadcrumb.length - 1" class="separator"> / </text>
-      </text>
+      <!-- 移动端菜单切换按钮 (CSS 控制显隐) -->
+      <view class="menu-toggle mobile-only" @click="$emit('toggle-mobile-menu')">
+        <text class="menu-icon">☰</text>
+      </view>
+
+      <view class="breadcrumb-container desktop-only">
+        <text class="crumb" v-for="(item, index) in breadcrumb" :key="item.id">
+          {{ item.title }}
+          <text v-if="index < breadcrumb.length - 1" class="separator"> / </text>
+        </text>
+      </view>
+      
+      <!-- 移动端简单标题 (CSS 控制显隐) -->
+      <text class="mobile-title mobile-only">{{ currentTitle }}</text>
     </view>
 
     <view class="header-right">
       <view class="hbtn" @click="$emit('search')"><text>🔍</text></view>
-      <view class="hbtn" @click="$emit('refresh')"><text>⟳</text></view>
+      <view v-if="!isMobile" class="hbtn" @click="$emit('refresh')"><text>⟳</text></view>
       <view class="hbtn" @click="$emit('notify')">
         <text>🔔</text>
         <view class="dot" v-if="hasNotification"></view>
@@ -19,16 +29,27 @@
 </template>
 
 <script setup lang="uts">
-defineProps<{
+import { computed } from 'vue'
+
+const props = defineProps<{
   breadcrumb: Array<{id: string, title: string}>
   hasNotification: boolean
+  isMobile: boolean
 }>()
 
 defineEmits<{
   (e:'search'): void
   (e:'refresh'): void
   (e:'notify'): void
+  (e:'toggle-mobile-menu'): void
 }>()
+
+const currentTitle = computed((): string => {
+  if (props.breadcrumb.length > 0) {
+    return props.breadcrumb[props.breadcrumb.length - 1].title
+  }
+  return '管理后台'
+})
 </script>
 
 <style>
@@ -49,11 +70,54 @@ defineEmits<{
   align-items: center;
 }
 
+.menu-toggle {
+  margin-right: 12px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-icon {
+  font-size: 20px;
+  color: #333;
+}
+
+.mobile-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.breadcrumb-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .crumb { 
   color: #374151; 
   font-size: 14px; 
 }
 
+/* 响应式控制 */
+.mobile-only {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+  .mobile-only {
+    display: flex !important;
+  }
+  .header-right {
+    gap: 5px;
+  }
+}
+
 .separator {
   color: #d1d5db;
   margin: 0 8px;