fix: safe-area for top/bottom

2025-11-06 04:20:50 +08:00 · 2025-10-06 23:16:00 +08:00
parent 0549ef8115
commit 4ae9cffe41
10 changed files with 65 additions and 16 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -2,7 +2,7 @@
 // import { installPrompt } from './utils/pwa'
 import { isClient } from '@vueuse/core'
 import { useIndexedDB } from '~/composables/db'
-import { appName, ionDarkClass } from '~/constants'
+import { appName } from '~/constants'

 // https://nuxt.com/docs/api/composables/use-head
 useHead({
@@ -16,16 +16,16 @@ useHead({
 })

 const indexedDB = useIndexedDB()
-const { isDark } = useDarkMode()
+const { isDark, setDarkMode, setLightMode } = useDarkMode()

 onMounted(() => {
  // init dark mode
  if (isClient) {
    if (isDark.value) {
-      document.documentElement.classList.add(ionDarkClass)
+      setDarkMode()
    }
    else {
-      document.documentElement.classList.remove(ionDarkClass)
+      setLightMode()
    }

    indexedDB.init()
--- a/app/composables/dark.ts
+++ b/app/composables/dark.ts
@@ -1,15 +1,40 @@
+import { StatusBar, Style } from '@capacitor/status-bar'
 import { ionDarkClass } from '~/constants'

 export const useDarkMode = createSharedComposable(() => {
  const color = useColorMode()
  const isDark = computed(() => color.value === 'dark')

+  async function setLightMode() {
+    document.documentElement.classList.remove(ionDarkClass)
+
+    await StatusBar.setStyle({ style: Style.Light })
+    await StatusBar.setBackgroundColor({ color: '#f2f2f6ff' })
+  }
+
+  async function setDarkMode() {
+    document.documentElement.classList.add(ionDarkClass)
+
+    await StatusBar.setStyle({ style: Style.Dark })
+    await StatusBar.setBackgroundColor({ color: '#ff000000' })
+  }
+
  return {
    color,
    isDark,
-    toggleDark() {
-      color.preference = color.value === 'dark' ? 'light' : 'dark'
-      document.documentElement.classList.toggle(ionDarkClass, !isDark.value)
+    setLightMode,
+    setDarkMode,
+
+    async toggleDark() {
+      const targetMode = color.value === 'dark' ? 'light' : 'dark'
+      color.preference = targetMode
+
+      if (targetMode === 'dark') {
+        setDarkMode()
+      }
+      else {
+        setLightMode()
+      }
    },
  }
 })
--- a/app/pages/recipes/history.vue
+++ b/app/pages/recipes/history.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { RecipeItem } from '~/types'
 import { Dialog } from '@capacitor/dialog'
 import dayjs from 'dayjs'
 import { recipeHistories } from '~/composables/store/history'
@@ -26,6 +27,11 @@ async function clearAllHistory() {
 function clearOneHistory(history: typeof recipeHistories.value[0]) {
  recipeHistories.value = recipeHistories.value.filter(h => h !== history)
 }
+
+function openDishLink(dish: RecipeItem) {
+  const href = dish.link || `https://www.bilibili.com/video/${dish.bv}`
+  window.open(href, '_blank')
+}
 </script>

 <template>
@@ -49,7 +55,7 @@ function clearOneHistory(history: typeof recipeHistories.value[0]) {
      <ion-list>
        <template v-for="history in recipeHistories" :key="history.recipe.name">
          <ion-item-sliding>
-            <ion-item>
+            <ion-item @click="openDishLink(history.recipe)">
              <ion-label class="truncate">
                <DishLabel class="text-sm" :dish="history.recipe" />
              </ion-label>
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -10,7 +10,7 @@ definePageMeta({

 <template>
  <ion-page>
-    <ion-header class="ion-no-border">
+    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button default-href="/my" />
--- a/app/styles/ionic.css
+++ b/app/styles/ionic.css
@@ -33,3 +33,8 @@
 .ion-palette-dark.md {
  --ion-item-background: #1c1c1d;
 }
+
+/* custom */
+html {
+  /* --ion-safe-area-top: 0px; */
+}
--- a/capacitor.config.ts
+++ b/capacitor.config.ts
@@ -1,9 +1,19 @@
+/// <reference types="@capacitor/status-bar" />
+
 import type { CapacitorConfig } from '@capacitor/cli'

 const config: CapacitorConfig = {
  appId: 'cn.yunyoujun.cook',
  appName: 'cook',
  webDir: 'dist',
+
+  plugins: {
+    StatusBar: {
+      overlaysWebView: false,
+      style: 'DARK',
+      backgroundColor: '#ffffffff',
+    },
+  },
 }

 export default config
--- a/ios/App/App.xcodeproj/project.pbxproj
+++ b/ios/App/App.xcodeproj/project.pbxproj
@@ -349,12 +349,13 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = N3885VFNCL;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.starter;
+				PRODUCT_BUNDLE_IDENTIFIER = cn.yunyoujun.cook;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
 				SWIFT_VERSION = 5.0;
@@ -369,11 +370,12 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = N3885VFNCL;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
-				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.starter;
+				PRODUCT_BUNDLE_IDENTIFIER = cn.yunyoujun.cook;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
 				SWIFT_VERSION = 5.0;
--- a/ios/App/App/Info.plist
+++ b/ios/App/App/Info.plist
@@ -5,7 +5,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-        <string>cook</string>
+	<string>cook</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -51,7 +51,7 @@ export default defineNuxtConfig({
        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
      ],
      meta: [
-        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, viewport-fit=cover' },
        { name: 'description', content: appDescription },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
        { name: 'color-scheme', content: 'light dark' },
--- a/package.json
+++ b/package.json
@@ -8,13 +8,14 @@
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
-    "build": "npm run convert && nuxt build",
-    "build:static": "npm run convert && nuxt generate",
+    "build": "npm run convert && npm run generate",
+    "build:nuxt": "nuxt build",
    "convert": "pnpm -C scripts run convert",
    "dev": "nuxt dev --host",
    "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
    "dev:android": "bash ./scripts/android.sh",
-    "dev:ios": "bash ./scripts/ios.sh",
+    "bash:ios": "bash ./scripts/ios.sh",
+    "dev:ios": "cap run ios -l",
    "ios": "cap run ios",
    "android": "cap run android",
    "open:ios": "cap open ios",