howard/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 15:51:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update tab system & Made a basic Loading Screen w/ transitions

Browse Source
This commit is contained in:
吳元皓 2025-05-25 09:11:10 +08:00
parent f34da9f5c1
commit 79e133c167
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/app/windows/news.vue
View File

@ -14,11 +14,18 @@ const tabs = [
}, },
]; ];
const primary = ref(tabs.find((tab) => tab.default === true).url || "domestic"); const primary = ref<string>(
tabs.find((tab) => tab.default === true).url || "domestic",
);
const contentArray = ref([]); const contentArray = ref([]);
const errorr = ref(false); const errorr = ref(false);
const switchTabs = ref(false);
const updateContent = async (url: string) => { const updateContent = async (url: string, tabAction: boolean) => {
if (tabAction === true) {
primary.value = url;
switchTabs.value = true;
}
console.log(url.trim()); console.log(url.trim());
try { try {
const req = await fetch(`/api/home/lt?query=${url.trim()}`); const req = await fetch(`/api/home/lt?query=${url.trim()}`);
@ -26,6 +33,7 @@ const updateContent = async (url: string) => {
console.log(data); console.log(data);
if (data) { if (data) {
contentArray.value = [...data.uuidData, ...(data.nuuiddata?.items || [])]; contentArray.value = [...data.uuidData, ...(data.nuuiddata?.items || [])];
switchTabs.value = false;
} }
} catch (e) { } catch (e) {
errorr.value = true; errorr.value = true;
@ -45,8 +53,13 @@ const isPrimary = (url: string, defaultAction: boolean) => {
} }
return "text-black"; return "text-black";
}; };
const openNews = (url: string) => {
console.log(url);
};
onMounted(async () => { onMounted(async () => {
await updateContent(primary.value); await updateContent(primary.value, false);
}); });
</script> </script>
<template> <template>
@ -58,7 +71,7 @@ onMounted(async () => {
<div class="gap-2 flex flex-row justify-center align-center text-center"> <div class="gap-2 flex flex-row justify-center align-center text-center">
<button <button
v-for="item in tabs" v-for="item in tabs"
@click="updateContent(item.url)" @click="updateContent(item.url, true)"
:class="isPrimary(item.url, true)" :class="isPrimary(item.url, true)"
class="" class=""
> >
@ -66,12 +79,25 @@ onMounted(async () => {
</button> </button>
</div> </div>
</div> </div>
<div v-if="switchTabs">Loading...</div>
<Transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="!switchTabs">
<div <div
v-for="item in contentArray" v-for="item in contentArray"
:key="item.id" :key="item.id"
:class="item.contentType !== 'GENERAL' && 'hidden'" :class="item.contentType !== 'GENERAL' && 'hidden'"
> >
{{ item.title }} <button @click="openNews(item.url.hash)">
<div class="p-2 bg-gray-200 rounded m-1 p-1">
<h1 class="text-2xl text-bold">{{ item.title }}</h1>
<p>{{ item.shortDescription }}</p>
</div> </div>
</button>
</div>
</div>
</Transition>
</div> </div>
</template> </template>

2
pages/desktop.vue
View File

@ -166,6 +166,8 @@ const associAppWindow = [
id: "11", id: "11",
title: t("app.newsview"), title: t("app.newsview"),
component: NewsViewWindow, component: NewsViewWindow,
width: "700px",
height: "500px",
}, },
]; ];