aslan-h5/src/components/MobileHeader.vue

<template>
  <div class="mobile-header" :class="{ 'in-app': isInAppEnvironment }">
    <!-- 状态栏占位区域（仅在APP中显示） -->
    <div v-if="isInAppEnvironment" class="status-bar-spacer"></div>

    <!-- header内容 -->
    <div class="header-content">
      <button v-if="showBack" class="back-btn" @click="handleBack">
        <svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M15 18L9 12L15 6"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <h1 class="title">{{ title }}</h1>
      <button v-if="showHelp" class="help-btn" @click="$emit('help')">
        <svg class="help-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
          <path
            d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M12 17h.01"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <div v-else class="placeholder"></div>

      <slot name="extraFunction"></slot>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { computed, ref, onMounted } from "vue";
import { closePage, isInApp } from "../utils/appBridge.js";

// 定义props
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  showBack: {
    type: Boolean,
    default: true,
  },
  showHelp: {
    type: Boolean,
    default: false,
  },
  isHomePage: {
    type: Boolean,
    default: false,
  },
});

// 定义emits
defineEmits(["help"]);

const router = useRouter();
const route = useRoute();

// 检测是否在APP环境中
const isInAppEnvironment = ref(false);

// 定义首页路由列表
const homeRoutes = ["/host-center", "/agency-center", "/coin-seller", "/"];

// 计算是否为首页
const isCurrentlyHomePage = computed(() => {
  // 1. 首先检查 props
  const propsHomePage = props.isHomePage === true || props.isHomePage === "true";

  // 2. 然后检查路由
  const routeHomePage = homeRoutes.includes(route.path);

  // 3. 两者任一为true即为首页
  return propsHomePage || routeHomePage;
});

const handleBack = () => {
  if (isCurrentlyHomePage.value && isInApp()) {
    // 首页且在APP中：关闭页面
    console.log("home back");
    closePage();
  } else {
    // 非首页或浏览器环境：正常返回
    router.go(-1);
  }
};

// 组件挂载时检测环境
onMounted(() => {
  isInAppEnvironment.value = isInApp();
});
</script>

<style scoped>
.mobile-header {
  background: white !important;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 状态栏占位区域 - 固定30px */
.status-bar-spacer {
  height: 30px;
  background: white !important;
}

/* header内容区域 - 固定60px */
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  height: 60px;
  background: white !important;
}

.back-btn,
.help-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #f8f9fa !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #495057 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e9ecef;
}

.back-btn:hover,
.help-btn:hover {
  background: #e9ecef !important;
  color: #343a40 !important;
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-btn:active,
.help-btn:active {
  transform: scale(0.95);
  background: #dee2e6 !important;
}

.back-icon,
.help-icon {
  width: 20px;
  height: 20px;
  color: inherit;
  stroke-width: 2.5;
}

.title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #212529 !important;
  text-align: center;
  flex: 1;
  letter-spacing: 0.3px;
}

.placeholder {
  width: 36px;
  height: 36px;
}

/* 强制覆盖任何暗黑模式样式 */
@media (prefers-color-scheme: dark) {
  .mobile-header {
    background: white !important;
    border-bottom-color: #f0f0f0 !important;
  }

  .status-bar-spacer {
    background: white !important;
  }

  .header-content {
    background: white !important;
  }

  .back-btn,
  .help-btn {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #495057 !important;
  }

  .back-btn:hover,
  .help-btn:hover {
    background: #e9ecef !important;
    color: #343a40 !important;
  }

  .title {
    color: #212529 !important;
  }
}

/* 强制针对移动设备的样式 */
@media screen and (max-width: 768px) {
  .mobile-header {
    background: white !important;
    color: #212529 !important;
  }

  .mobile-header * {
    color: inherit !important;
  }

  .title {
    color: #212529 !important;
  }

  .back-btn,
  .help-btn {
    background: #f8f9fa !important;
    color: #495057 !important;
    border-color: #e9ecef !important;
  }
}

/* 针对特定手机浏览器的修复 */
@supports (-webkit-touch-callout: none) {
  .mobile-header {
    background: white !important;
  }

  .title {
    color: #212529 !important;
  }

  .back-btn,
  .help-btn {
    background: #f8f9fa !important;
    color: #495057 !important;
  }
}
</style>