enhance(capacitor): ui & lifecycle

capacitor.config.ts

@@ -14,6 +14,12 @@ const config: CapacitorConfig = {
     androidScheme: 'http',
   },
   plugins: {
+    StatusBar: {
+      overlaysWebView: true,
+      style: 'Light',
+      backgroundColor: '#ffffffff',
+    },
+
     SplashScreen: {
       launchShowDuration: 500,
       launchAutoHide: false,
@@ -40,13 +46,4 @@ const config: CapacitorConfig = {
   }
 }
 
-if ("http://192.168.199.216:3001") {
-  Object.assign(config, {
-    server: {
-      url: "http://192.168.199.216:3001",
-      cleartext: true
-    }
-  })
-}
-
 export = config;

src/main/capacitor/app.cljs

@@ -170,16 +170,7 @@
       )
     ))
 
-(rum/defc root <
-  rum/reactive
-  {:did-mount
-   (fn [s]
-     (js/setTimeout
-       (fn []
-         (.setStyle StatusBar #js {:style (.-Light Style)})
-         (.setBackgroundColor StatusBar #js {:color "#ffffff"}))
-       300)
-     s)}
+(rum/defc root < rum/reactive
   []
   (let [db-restoring? (fstate/sub :db/restoring?)]
     [:<>
@@ -215,8 +206,8 @@
     ;; global
     (rum/use-effect!
       (fn []
-        (some-> js/window.externalsjs
-          (.initGlobalListeners)))
+        (some-> js/window.externalsjs (.settleStatusBar))
+        (some-> js/window.externalsjs (.initGlobalListeners)))
       [])
 
     ;; navigation

src/main/capacitor/app.css

@@ -9,12 +9,21 @@
 }
 
 html.plt-capacitor.plt-android {
+  --ion-safe-area-top: 40px;
+
   ion-button, ion-tab-button {
     --ripple-color: rgba(0, 0, 0, .08); /* 设置涟漪颜色为透明 */
   }
 
   ion-app {
-    margin-top: 40px;
+    margin-top: 0;
+  }
+
+  ion-nav {
+    .header-md {
+      box-shadow: 0 2px 8px #eee;
+      border-bottom: .5px solid rgba(0, 0, 0, .15);
+    }
   }
 }
 
@@ -54,4 +63,4 @@ ion-textarea {
 [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus,
 [multiple]:focus, textarea:focus, select:focus {
   box-shadow: none;
-}
+}

src/main/capacitor/components/ui.cljs

@@ -125,6 +125,17 @@
            :buttons (bean/->js (or buttons (:buttons modal-props)))
            :inputs (bean/->js (or inputs (:inputs modal-props) []))}))
 
+      :action-sheet
+      (ionic/ion-action-sheet
+        (merge modal-props
+          {:is-open true
+           :header (or content title header)
+           :onWillDismiss (fn [^js e]
+                            (when on-action
+                              (on-action (bean/->clj (.-detail e))))
+                            (close!))
+           :buttons (bean/->js (or buttons (:buttons modal-props)))}))
+
       ;; default
       (ionic/ion-modal
         (merge modal-props

src/main/capacitor/externals.js

@@ -1,4 +1,7 @@
 import { Keyboard } from '@capacitor/keyboard'
+import { Capacitor } from '@capacitor/core'
+import { StatusBar, Style } from '@capacitor/status-bar'
+import { App } from '@capacitor/app'
 
 function initGlobalListeners () {
   console.debug('[externals] init global listeners')
@@ -29,6 +32,21 @@ function initGlobalListeners () {
   }
 }
 
+const settleStatusBar = async () => {
+  if (Capacitor.getPlatform() === 'android') {
+    try {
+      await Capacitor.Plugins.App.getInfo() // 等待平台初始化??
+      await (new Promise((r) => setTimeout(r, 500)))
+      await StatusBar.setStyle({ style: Style.Light }) // 可选：设置状态栏样式
+      await StatusBar.setBackgroundColor({ color: '#ffffff' })
+      await StatusBar.setOverlaysWebView({ overlay: true })
+    } catch (e) {
+      console.error('[initStatusBar]', e)
+    }
+  }
+}
+
 window.externalsjs = {
   initGlobalListeners,
+  settleStatusBar,
 }

src/main/capacitor/ionic.cljs

@@ -40,3 +40,4 @@
 (defonce ion-refresher-content (shui-util/react->rum (.-IonRefresherContent ionic-react) false))
 (defonce ion-menu (shui-util/react->rum (.-IonMenu ionic-react) false))
 (defonce ion-menu-button (shui-util/react->rum (.-IonMenuButton ionic-react) false))
+(defonce ion-action-sheet (shui-util/react->rum (.-IonActionSheet ionic-react) false))