fix: modal height issue in ios devices (#4106)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.7.x

#### What this PR does / why we need it:

优化 VModal 组件在 iOS 设备上底部和顶部被遮挡的问题，解决方案来自于：https://github.com/Faisal-Manzer/postcss-viewport-height-correction

| before                                                       | After                                                        |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| ![IMG_0319](https://github.com/halo-dev/halo/assets/21301288/71d15e51-5cf9-402e-b6ce-fff4e1014f72) | ![IMG_0315](https://github.com/halo-dev/halo/assets/21301288/6c3b4b75-2029-4b32-8dcc-eead3e479ab1) |
| ![IMG_0318](https://github.com/halo-dev/halo/assets/21301288/b4f586b4-34e1-48ea-97ed-7f1f70184346) | ![IMG_0316](https://github.com/halo-dev/halo/assets/21301288/7dee64bb-2328-44ef-a9f6-534ea4c005fe) |

<!--fuck apple, fuck safari-->

#### Which issue(s) this PR fixes:

Ref https://github.com/halo-dev/halo/issues/2699


#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端弹框组件（VModal）在 iOS 设备的高度问题。
```

console/package.json

@@ -43,7 +43,6 @@
     "@codemirror/legacy-modes": "^6.3.0",
     "@codemirror/state": "^6.1.4",
     "@codemirror/view": "^6.5.1",
-    "codemirror": "^6.0.1",
     "@emoji-mart/data": "^1.0.8",
     "@formkit/core": "^0.17.3",
     "@formkit/i18n": "^0.17.3",
@@ -72,6 +71,7 @@
     "@vueuse/router": "^9.6.0",
     "@vueuse/shared": "^9.6.0",
     "axios": "^0.27.2",
+    "codemirror": "^6.0.1",
     "colorjs.io": "^0.4.3",
     "dayjs": "^1.11.7",
     "emoji-mart": "^5.3.3",
@@ -132,6 +132,7 @@
     "jsdom": "^20.0.3",
     "lint-staged": "^13.2.2",
     "postcss": "^8.4.21",
+    "postcss-viewport-height-correction": "^1.1.1",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "randomstring": "^1.2.3",

console/pnpm-lock.yaml

@@ -293,6 +293,9 @@ importers:
       postcss:
         specifier: ^8.4.21
         version: 8.4.21
+      postcss-viewport-height-correction:
+        specifier: ^1.1.1
+        version: 1.1.1
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
@@ -9092,6 +9095,10 @@ packages:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
     dev: true
 
+  /picocolors@0.2.1:
+    resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
+    dev: true
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -9206,6 +9213,21 @@ packages:
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
+  /postcss-viewport-height-correction@1.1.1:
+    resolution: {integrity: sha512-kphLY4Au76uD2t4lZZ6mAExx6uMiWsxbFiBckfSJJZAbBZZGPNbLSztaDRSI4JUdKpK4JBbscfyKJf03Y2ae0g==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      postcss: 7.0.39
+    dev: true
+
+  /postcss@7.0.39:
+    resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      picocolors: 0.2.1
+      source-map: 0.6.1
+    dev: true
+
   /postcss@8.4.21:
     resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
     engines: {node: ^10 || ^12 || >=14}

console/postcss.config.js

@@ -2,5 +2,6 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    "postcss-viewport-height-correction": {},
   },
 };

console/src/App.vue

@@ -94,6 +94,26 @@ const formkitLocales = {
 };
 const formkitConfig = inject(Symbol.for("FormKitConfig")) as FormKitConfig;
 formkitConfig.locale = formkitLocales[i18n.global.locale.value] || "zh";
+
+// Fix 100vh issue in ios devices
+function setViewportProperty(doc: HTMLElement) {
+  let prevClientHeight: number;
+  const customVar = "--vh";
+  function handleResize() {
+    const clientHeight = doc.clientHeight;
+    if (clientHeight === prevClientHeight) return;
+    requestAnimationFrame(function updateViewportHeight() {
+      doc.style.setProperty(customVar, clientHeight * 0.01 + "px");
+      prevClientHeight = clientHeight;
+    });
+  }
+  handleResize();
+  return handleResize;
+}
+window.addEventListener(
+  "resize",
+  setViewportProperty(document.documentElement)
+);
 </script>
 
 <template>