waruneeauy
354f528651
All checks were successful
Build & Deploy on Dev / build (push) Successful in 2m9s
150 lines
3.3 KiB
Vue
150 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useSocketStore } from '@/stores/socket'
|
|
import {
|
|
getExternalBrowserUrl,
|
|
shouldShowIOSLineFallback,
|
|
} from '@/utils/forceExternalBrowser'
|
|
|
|
const showExternalBrowserFallback = computed(() => shouldShowIOSLineFallback())
|
|
const fallbackUrl = computed(() => getExternalBrowserUrl())
|
|
const copied = ref(false)
|
|
|
|
const tryOpenAgain = () => {
|
|
window.location.href = fallbackUrl.value
|
|
}
|
|
|
|
const copyLink = async () => {
|
|
copied.value = false
|
|
|
|
if (!navigator.clipboard?.writeText) {
|
|
return
|
|
}
|
|
|
|
await navigator.clipboard.writeText(fallbackUrl.value)
|
|
copied.value = true
|
|
}
|
|
|
|
onMounted(() => {
|
|
useSocketStore()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<router-view />
|
|
|
|
<div v-if="showExternalBrowserFallback" class="external-browser-overlay">
|
|
<div class="external-browser-card">
|
|
<h2>แนะนำให้เปิดด้วย Safari</h2>
|
|
<p>
|
|
LINE Browser อาจทำให้กล้องหรือตำแหน่งทำงานไม่ครบ กรุณาเปิดหน้านี้ใน
|
|
Safari เพื่อใช้งานระบบลงเวลาได้เสถียรกว่าเดิม
|
|
</p>
|
|
<ol>
|
|
<li>แตะปุ่ม เมนู ใน LINE Browser</li>
|
|
<li>เลือก เปิดใน Safari</li>
|
|
</ol>
|
|
|
|
<div class="external-browser-actions">
|
|
<button type="button" class="primary" @click="tryOpenAgain">
|
|
ลองเปิดอีกครั้ง
|
|
</button>
|
|
<button type="button" class="secondary" @click="copyLink">
|
|
คัดลอกลิงก์
|
|
</button>
|
|
</div>
|
|
|
|
<p v-if="copied" class="copy-success">
|
|
คัดลอกลิงก์แล้ว สามารถวางใน Safari ได้ทันที
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
nav {
|
|
padding: 30px;
|
|
}
|
|
|
|
nav a {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
nav a.router-link-exact-active {
|
|
color: #42b983;
|
|
}
|
|
|
|
.external-browser-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
.external-browser-card {
|
|
width: min(520px, 100%);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
background: #ffffff;
|
|
text-align: left;
|
|
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.external-browser-card h2 {
|
|
margin: 0 0 10px;
|
|
font-size: 24px;
|
|
color: #0d3b66;
|
|
}
|
|
|
|
.external-browser-card p {
|
|
margin: 0 0 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.external-browser-card ol {
|
|
margin: 0 0 16px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.external-browser-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.external-browser-actions button {
|
|
border: 0;
|
|
border-radius: 10px;
|
|
padding: 10px 14px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.external-browser-actions .primary {
|
|
background: #1976d2;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.external-browser-actions .secondary {
|
|
background: #edf2f7;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.copy-success {
|
|
margin-top: 12px;
|
|
color: #0b7a3f;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|