提高编译目标, 新增浏览器检查

src/components/App.jsx

@@ -13,11 +13,14 @@ import useDialog from '../libs/useDialog.jsx'
 // 其他
 import getStaredImages from '../libs/getStaredImages.js'
 import clearDB from '../libs/clearDB.js'
+import checkBrowser from '../libs/checkBrowser.js'
 
 // 获取已收藏图片列表
 const staredImages = await getStaredImages()
 // 如果存在非目标版本数据，确认后清空 IndexedDB
 const versionInfo = await clearDB(2024041517)
+// 检测浏览器版本是否符合编译目标
+checkBrowser()
 
 // 主组件
 function App() {

src/libs/checkBrowser.js

@@ -0,0 +1,18 @@
+export default function checkBrowser() {
+  const ua = navigator.userAgent
+  const chrome = ua.match(/Chrome\/(\d+)/)
+  const firefox = ua.match(/Firefox\/(\d+)/)
+  const edge = ua.match(/Edge\/(\d+)/)
+  const safari = ua.match(/Safari\/(\d+)/)
+  if (
+    (chrome && Number(chrome[1]) < 108) ||
+    (firefox && Number(firefox[1]) < 101) ||
+    (edge && Number(edge[1]) < 108) ||
+    (safari && Number(safari[1]) < 15.4)
+  ) {
+    alert(`
+      您的浏览器版本过低，可能无法正常使用本应用
+      建议使用最新版本的 Chrome / Edge / Firefox / Safari 浏览器
+    `)
+  }
+}

src/styles/App.css

@@ -13,12 +13,8 @@
   --prompt-btn-width: 100%;
   --prompt-btn-gap: 0;
 
-  /* 如果不支持 dvw 则使用 vw */
-  --images-height: calc(100vh - var(--prompt-height));
   --images-height: calc(100dvh - var(--prompt-height));
-  --image-margin: calc( (var(--images-height) - var(--image-size)) / 2 ) calc( (100vw - var(--image-size)) / 2 );
   --image-margin: calc( (var(--images-height) - var(--image-size)) / 2 ) calc( (100dvw - var(--image-size)) / 2 );
-  --image-size: min((100vh - var(--prompt-height))*0.9, 100vw*0.9);
   --image-size: min((100dvh - var(--prompt-height))*0.9, 100dvw*0.9);
 
   --text: #ff7171;

vite.config.js

@@ -5,7 +5,8 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   plugins: [react()],
   build: {
-    target: ['chrome89', 'firefox89', 'safari15', 'edge89'],
+    // 如果改了编译目标记得同步修改 src/libs/checkBroswer.js
+    target: ['chrome108', 'edge108', 'firefox101', 'safari15.4'],
     rollupOptions: {
       output: {
         manualChunks: {