feat(头部组件): 设置左右有一方空白时的占位元素

src/components/MobileHeader.vue

@@ -16,6 +16,7 @@
           />
         </svg>
       </button>
+      <div v-if="!showBack && showHelp" class="placeholder"></div>
       <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">
@@ -36,7 +37,7 @@
           />
         </svg>
       </button>
-      <div v-else class="placeholder"></div>
+      <div v-if="showBack && !showHelp" class="placeholder"></div>
 
       <slot name="extraFunction"></slot>
     </div>
@@ -44,9 +45,9 @@
 </template>
 
 <script setup>
-import { useRouter, useRoute } from "vue-router";
-import { computed, ref, onMounted } from "vue";
-import { closePage, isInApp } from "../utils/appBridge.js";
+import { useRouter, useRoute } from 'vue-router'
+import { computed, ref, onMounted } from 'vue'
+import { closePage, isInApp } from '../utils/appBridge.js'
 
 // 定义props
 const props = defineProps({
@@ -66,47 +67,47 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
 // 定义emits
-defineEmits(["help"]);
+defineEmits(['help'])
 
-const router = useRouter();
-const route = useRoute();
+const router = useRouter()
+const route = useRoute()
 
 // 检测是否在APP环境中
-const isInAppEnvironment = ref(false);
+const isInAppEnvironment = ref(false)
 
 // 定义首页路由列表
-const homeRoutes = ["/host-center", "/agency-center", "/coin-seller", "/"];
+const homeRoutes = ['/host-center', '/agency-center', '/coin-seller', '/']
 
 // 计算是否为首页
 const isCurrentlyHomePage = computed(() => {
   // 1. 首先检查 props
-  const propsHomePage = props.isHomePage === true || props.isHomePage === "true";
+  const propsHomePage = props.isHomePage === true || props.isHomePage === 'true'
 
   // 2. 然后检查路由
-  const routeHomePage = homeRoutes.includes(route.path);
+  const routeHomePage = homeRoutes.includes(route.path)
 
   // 3. 两者任一为true即为首页
-  return propsHomePage || routeHomePage;
-});
+  return propsHomePage || routeHomePage
+})
 
 const handleBack = () => {
   if (isCurrentlyHomePage.value && isInApp()) {
     // 首页且在APP中：关闭页面
-    console.log("home back");
-    closePage();
+    console.log('home back')
+    closePage()
   } else {
     // 非首页或浏览器环境：正常返回
-    router.go(-1);
+    router.go(-1)
   }
-};
+}
 
 // 组件挂载时检测环境
 onMounted(() => {
-  isInAppEnvironment.value = isInApp();
-});
+  isInAppEnvironment.value = isInApp()
+})
 </script>
 
 <style scoped>