<script setup lang="ts"> const errore = ref(false); const textinput = ref(""); const route = useRoute(); const router = useRouter(); const localePath = useLocalePath(); const article = route.query.article; const buildUrl = "/api/news/get/lt/" + article; if (!article) { errore.value = true; } const { data, error, pending } = await useFetch(buildUrl); const submitTextInput = () => { const regexFilterOutUrl = /https:\/\/today\.line\.me\/tw\/v2\/article\/([^/\s]*)/; const matches = textinput.value.match(regexFilterOutUrl); const articleId = matches ? matches[1] : null; if (articleId) { window.location.href = localePath( `/tools/freelinetoday?article=${articleId}`, ); } }; </script> <template> <div v-if="errore"> <div class="absolute inset-0 flex flex-col justify-center align-center text-center w-full h-screen" > <h1 class="text-4xl mb-4">無法找到該文章</h1> <span>複製你的LINE Today 網址:</span> <div class="flex flex-row gap-2 w-full justify-center align-center text-center" > <input type="text" v-model="textinput" class="rounded-xl text-black" /><button @click="submitTextInput" class="p-2 bg-sky-600 rounded-xl"> 送出 </button> </div> </div> <div class="h-screen"></div> </div> <div class="justify-center align-center text-center flex flex-col p-3"> <h2 class="text-3xl text-bold">{{ data.title }}</h2> <span class="text-lg text-bold" >origin: {{ data.origin }} • author: {{ data.author }}</span > <div class="test-center" v-for="item in data.paragraph">{{ item }}</div> </div> <div class="min-h-10 sticky h-full"></div> </template>