From 05086935a61771f7b3e98441a4fc98fe72e12cb5 Mon Sep 17 00:00:00 2001
From: "ex_zhangwenlei@exiot.cmcc" <15196725410@139.com>
Date: Sat, 13 Jan 2024 09:26:35 +0800
Subject: [PATCH] chore: dialog browser

dialog if not edge or chrome
---
 .github/workflows/node.js.yml |  2 +-
 README.md                     |  4 ++++
 src/App.vue                   | 24 ++++++++++++++++++------
 src/store/system.ts           |  9 ++++++++-
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index c8e1850..a50522b 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -25,7 +25,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node-version }}
-                  cache: 'npm'
+                  cache: 'pnpm'
             - run: pnpm install
             - run: npnpm builld
             - name: Deploy to gh-pages
diff --git a/README.md b/README.md
index d72741b..20c082f 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,10 @@
 
 log-lottery是一个可配置可定制化的抽奖应用，炫酷3D球体，可用于年会抽奖等活动，支持奖品、人员、界面、图片音乐配置。
 
+## 要求
+
+使用PC端最新版Chrome或Edge浏览器。
+
 ## 功能描述
 
 - 🕍 炫酷3D球体，年会抽奖必备，开箱即用
diff --git a/src/App.vue b/src/App.vue
index 25b12ad..7523bee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,15 +40,26 @@ const judgeMobile=()=>{
     const isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1
     const isIOS =!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
     
-    if(isAndroid||isIOS){
-        tipDialog.value.showModal()
-    }
     system.setIsMobile(isAndroid||isIOS)
+    
+return isAndroid||isIOS
+}
+// 判断是否chrome或者edge访问
+const judgeChromeOrEdge=()=>{
+    const ua = navigator.userAgent
+    const isChrome = ua.indexOf('Chrome') > -1
+    const isEdge = ua.indexOf('Edg') > -1
+
+    system.setIsChrome(isChrome)
+
+return isChrome||isEdge
 }
 onMounted(() => {
     setLocalTheme(localTheme.value)
     setCurrentPrize()
-    judgeMobile()
+    if(judgeMobile()||!judgeChromeOrEdge()){
+        tipDialog.value.showModal()
+    }
 })
 </script>
 
@@ -56,9 +67,10 @@ onMounted(() => {
      <dialog id="my_modal_1" ref="tipDialog" class="border-none modal">
         <div class="modal-box">
             <h3 class="text-lg font-bold">提示!</h3>
-            <p class="py-4">请使用PC进行访问以获得最佳显示效果</p>
+            <p class="py-4" v-if="judgeMobile()">请使用PC进行访问以获得最佳显示效果</p>
+            <p class="py-4" v-if=" !judgeChromeOrEdge()">请使用最新版Chrome或者Edge浏览器</p>
             <div class="modal-action">
-                <form method="dialog" class="flex gap-3 justify-start w-full">
+                <form method="dialog" class="flex justify-start w-full gap-3">
                     <!-- if there is a button in form, it will close the modal -->
                     <button class="btn">确定</button>
                 </form>
diff --git a/src/store/system.ts b/src/store/system.ts
index 6bfacf5..d13ba88 100644
--- a/src/store/system.ts
+++ b/src/store/system.ts
@@ -3,18 +3,25 @@ import { defineStore } from 'pinia';
 export const useSystem = defineStore('system', {
     state() {
         return {
-            isMobile:false
+            isMobile:false,
+            isChrome:true
         };
     },
     getters: {
         getIsMobile(state) {
             return state.isMobile;
         },
+        getIsChrome(state) {
+            return state.isChrome;
+        },
     },
     actions: {
         setIsMobile(isMobile: boolean) {
             this.isMobile = isMobile;
         },
+        setIsChrome(isChrome: boolean) {
+            this.isChrome = isChrome;
+        },
     },
     persist: {
         enabled: true,