🚦 fix: support ios viewport height (#9)

pdsuwwz · web-flow · commit d7663a175bcd · 2024-07-31T15:33:55.000+08:00
diff --git a/index.html b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
     <title>MVP Vue3 大模型单轮 AI 对话</title>
   </head>
   <body>
diff --git a/src/components/Layout/SlotFrame.vue b/src/components/Layout/SlotFrame.vue
@@ -28,7 +28,8 @@ defineOptions({
 
 <style lang="scss" scoped>
 .slot-frame-layout-container {
-  --at-apply: flex flex-col h-100vh;
+  --at-apply: h-100dvh;
+  --at-apply: flex flex-col;
   --at-apply: overflow-hidden;
 
   .top,
diff --git a/src/components/MarkdownPreview/index.vue b/src/components/MarkdownPreview/index.vue
@@ -284,7 +284,7 @@ const handlePassClip = () => {
 }
 
 const emptyPlaceholder = isMockDevelopment
-  ? '当前为模拟环境，随便问一个问题，我才会消失 ~'
+  ? '当前为模拟环境\n随便问一个问题，我才会消失 ~'
   : '问一个问题，我才会消失 ~'
 </script>
 
@@ -346,8 +346,12 @@ const emptyPlaceholder = isMockDevelopment
           v-if="!displayText"
           size="large"
           class="font-bold"
-          :description="emptyPlaceholder"
         >
+          <div
+            whitespace-break-spaces
+            text-center
+            v-html="emptyPlaceholder"
+          ></div>
           <template #icon>
             <n-icon>
               <div class="i-hugeicons:ai-chat-02"></div>
