11

android/app/capacitor.build.gradle

@@ -13,6 +13,8 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-browser')
     implementation project(':capacitor-clipboard')
+    implementation project(':capacitor-device')
+    implementation project(':capacitor-status-bar')
     implementation project(':capacitor-toast')
 
 }

android/capacitor.settings.gradle

@@ -14,5 +14,11 @@ project(':capacitor-browser').projectDir = new File('../node_modules/.pnpm/@capa
 include ':capacitor-clipboard'
 project(':capacitor-clipboard').projectDir = new File('../node_modules/.pnpm/@capacitor+clipboard@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/clipboard/android')
 
+include ':capacitor-device'
+project(':capacitor-device').projectDir = new File('../node_modules/.pnpm/@capacitor+device@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/device/android')
+
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../node_modules/.pnpm/@capacitor+status-bar@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/status-bar/android')
+
 include ':capacitor-toast'
 project(':capacitor-toast').projectDir = new File('../node_modules/.pnpm/@capacitor+toast@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/toast/android')

ios/App/Podfile

@@ -15,6 +15,8 @@ def capacitor_pods
   pod 'CapacitorApp', :path => '../../node_modules/.pnpm/@capacitor+app@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/app'
   pod 'CapacitorBrowser', :path => '../../node_modules/.pnpm/@capacitor+browser@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/browser'
   pod 'CapacitorClipboard', :path => '../../node_modules/.pnpm/@capacitor+clipboard@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/clipboard'
+  pod 'CapacitorDevice', :path => '../../node_modules/.pnpm/@capacitor+device@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/device'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/.pnpm/@capacitor+status-bar@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/status-bar'
   pod 'CapacitorToast', :path => '../../node_modules/.pnpm/@capacitor+toast@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/toast'
   pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
 end

package.json

@@ -5,8 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "s":"npx cap sync",
-    "a": "npx cap run android --live-reload --host=192.168.0.59 --port=5173",
+    "s": "npx cap sync",
+    "a": "npx cap run android --live-reload --host=192.168.0.12 --port=5173",
     "ios": "npx cap run ios --live-reload --host=192.168.0.59 --port=5173",
     "android": "npx cap add android && npx cap sync",
     "build": "vite build && npx cap copy",
@@ -21,7 +21,9 @@
     "@capacitor/cli": "^7.2.0",
     "@capacitor/clipboard": "^7.0.1",
     "@capacitor/core": "^7.2.0",
+    "@capacitor/device": "^7.0.1",
     "@capacitor/ios": "^7.2.0",
+    "@capacitor/status-bar": "^7.0.1",
     "@capacitor/toast": "^7.0.1",
     "@ionic-native/fingerprint-aio": "^5.36.0",
     "axios": "^1.10.0",

pnpm-lock.yaml

@@ -29,9 +29,15 @@ importers:
       '@capacitor/core':
         specifier: ^7.2.0
         version: 7.2.0
+      '@capacitor/device':
+        specifier: ^7.0.1
+        version: 7.0.1(@capacitor/core@7.2.0)
       '@capacitor/ios':
         specifier: ^7.2.0
         version: 7.2.0(@capacitor/core@7.2.0)
+      '@capacitor/status-bar':
+        specifier: ^7.0.1
+        version: 7.0.1(@capacitor/core@7.2.0)
       '@capacitor/toast':
         specifier: ^7.0.1
         version: 7.0.1(@capacitor/core@7.2.0)
@@ -276,11 +282,21 @@ packages:
   '@capacitor/core@7.2.0':
     resolution: {integrity: sha512-2zCnA6RJeZ9ec4470o8QMZEQTWpekw9FNoqm5TLc10jeCrhvHVI8MPgxdZVc3mOdFlyieYu4AS1fNxSqbS57Pw==}
 
+  '@capacitor/device@7.0.1':
+    resolution: {integrity: sha512-ImjR2LmCEhbckYtOHXTfi5v6B7d4HPX9uKIAQs7wzzmE+yRRXuUTEzARBQ00dZDInAInkbuyQRdjwPTSHZUpnw==}
+    peerDependencies:
+      '@capacitor/core': '>=7.0.0'
+
   '@capacitor/ios@7.2.0':
     resolution: {integrity: sha512-MQgRZcXZpbpjN83bjkGrzQd7s3XeHBZplmWf38/msF/siMGJKLrXNmNzmmPIWA5Xpi/aH6UoJFk1wXuU2U+zMg==}
     peerDependencies:
       '@capacitor/core': ^7.2.0
 
+  '@capacitor/status-bar@7.0.1':
+    resolution: {integrity: sha512-iDv3mXYo9CdxYRVwt3/pRyuk25p7Sn4GfaS/zMZyVIqTzsvKLCIIH3GdKK+ta+nsNcAVpCw/t5jFEBt1D18ctA==}
+    peerDependencies:
+      '@capacitor/core': '>=7.0.0'
+
   '@capacitor/toast@7.0.1':
     resolution: {integrity: sha512-3GFhejVwKqUjosYnpQVfq5eml7X6B97jcVpncY75lBDiTlCYJeRanj63OChZPuw1KWudkBTYZMcXdRYWguJdKw==}
     peerDependencies:
@@ -3004,10 +3020,18 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@capacitor/device@7.0.1(@capacitor/core@7.2.0)':
+    dependencies:
+      '@capacitor/core': 7.2.0
+
   '@capacitor/ios@7.2.0(@capacitor/core@7.2.0)':
     dependencies:
       '@capacitor/core': 7.2.0
 
+  '@capacitor/status-bar@7.0.1(@capacitor/core@7.2.0)':
+    dependencies:
+      '@capacitor/core': 7.2.0
+
   '@capacitor/toast@7.0.1(@capacitor/core@7.2.0)':
     dependencies:
       '@capacitor/core': 7.2.0

src/App.vue

@@ -1,7 +1,9 @@
-<script setup>
+<script setup> 
 import { RouterView } from 'vue-router' 
+ 
 </script>
 
+
 <template>
   <RouterView />
 </template>

src/layout/app/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <router-view v-slot="{ Component }" >
+ 
+  <van-nav-bar title="社交"  class="app-bar-header" :style="notchStyle"/>
+
+  <router-view v-slot="{ Component }"  >
     <keep-alive v-if="route.meta.keepAlive">
       <component :is="Component" key="Layout" />
     </keep-alive>
@@ -16,8 +19,30 @@
 </template>
 
 <script setup>
+import { ref, onBeforeMount } from "vue"
 import { useRoute } from "vue-router";
+import { getNotchHeight } from "@/utils/statusBar"
+
 const route = useRoute();
+const notchStyle = ref({})
 
-// console.log("route-=",route)
+onBeforeMount(async ()=> {
+    const height  = await getNotchHeight()
+    notchStyle.value = {
+      height:  `calc(46px + ${height}px)`,
+    } 
+})
 </script>
+
+<style scoped lang="less">
+.app-bar-header{  
+  :deep(.van-nav-bar__content){
+    height: 100%;
+  }
+  :deep(.van-nav-bar__title){
+    height: 72%;
+    display: flex;
+    align-items:flex-end;
+  }
+}
+</style>

src/plugins/index.js

@@ -42,5 +42,4 @@ export function setupPlugin(app) {
   setupStorage(); 
   // 挂载前初始化
   initCapacitor(app)
-
 }

src/utils/statusBar.js

@@ -0,0 +1,33 @@
+ import { Device } from '@capacitor/device';
+
+// 获取刘海高度（改进版）
+export const  getNotchHeight = async () => {
+  // 方法1：通过CSS变量获取
+  const rootStyles = getComputedStyle(document.documentElement);
+  const cssHeight = rootStyles.getPropertyValue('--status-bar-height');
+  
+  if (cssHeight && cssHeight !== '0px') {
+    return parseInt(cssHeight);
+  }
+  
+  // 方法2：创建测试元素检测
+  const testEl = document.createElement('div');
+  testEl.style.position = 'fixed';
+  testEl.style.top = '0';
+  testEl.style.height = '0';
+  testEl.style.paddingTop = 'env(safe-area-inset-top)';
+  testEl.style.visibility = 'hidden';
+  document.body.appendChild(testEl);
+  
+  const computedHeight = window.getComputedStyle(testEl).paddingTop;
+  document.body.removeChild(testEl);
+  
+  if (computedHeight && computedHeight !== '0px') {
+    return parseInt(computedHeight);
+  }
+  
+  // 方法3：根据平台返回默认值
+  const info = await Device.getInfo();
+  return info.platform === 'ios' ? 44 : info.platform === 'android' ? 24 : 0;
+};
+ 

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Header title="社交"></Header>
+    
       123
   </div>
 </template>

vite.config.js

@@ -15,7 +15,7 @@ export default defineConfig({
   base: "./",
   plugins: [
     vue(), 
-    vueDevTools(),
+    // vueDevTools(),
     createSvgIconsPlugin({
       // 指定需要缓存的图标文件夹
       iconDirs: [resolve(process.cwd(), "src/assets/svg")],