yuanhau/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 13:04:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

feat: update README and various components for improved formatting and error handling; enhance login functionality with password encryption

Browse source
This commit is contained in:
yuanhau 2025-05-12 10:17:21 +08:00
parent ee13960f0b
commit fd2ba525f9
12 changed files with 304 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

119
layouts/macui.vue
View file

@ -1,4 +1,3 @@
<script setup lang="ts">
// No layout
@ -28,7 +27,12 @@ import ProgressComponent from "~/components/ui/progress/Progress.vue";
import HoverCardComponent from "~/components/ui/hover-card/HoverCard.vue";
// Icons
import { ComputerDesktopIcon, UserIcon, LanguageIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
import {
ComputerDesktopIcon,
UserIcon,
LanguageIcon,
ChevronRightIcon,
} from "@heroicons/vue/24/outline";
// i18n
const { t, locale, locales } = useI18n();
@ -79,53 +83,68 @@ const openWindow = (windowName?: string) => {
router.push(localePath("/home"));
}
console.log(windowName);
menuOpen.value = false;
}
menuOpen.value = false;
};
const unMinWindow = (windowName?: string) => {
console.log(windowName);
}
};
// menus
const menuItems = [
{ name: "Hot News", windowName: "hotnews"} ,
{ name: "News", windowName: "news"},
{ name: "Sources", windowName: "sources"},
{ name: 'About This Website', windowName: "about"},
{ name: 'Settings', windowName: "settings"},
{ name: 'Leave', windowName: "leave"},
]
{ name: "Hot News", windowName: "hotnews" },
{ name: "News", windowName: "news" },
{ name: "Sources", windowName: "sources" },
{ name: "About This Website", windowName: "about" },
{ name: "Settings", windowName: "settings" },
{ name: "Leave", windowName: "leave" },
];
const toggleMenu = () => {
menuOpen.value = !menuOpen.value
}
menuOpen.value = !menuOpen.value;
};
// Lang Menu
const toggleLangMenu = () => {
langMenuOpen.value = !langMenuOpen.value
}
langMenuOpen.value = !langMenuOpen.value;
};
</script>
<template>
<div
class="absolute inset-x-0 flex flex-row px-2 py-1 bg-[#7D7C7C]/70 text-white justify-between align-center text-center z-50"
>
<!--Menu container-->
<!--Menu container-->
<div class="flex flex-row g-2 text-gray-400 text-white z-9999">
<button @click="toggleMenu" class="w-8 h-8 text-white hover:text-blue-500 transition-all duration-100 flex flex-row">
<ComputerDesktopIcon/>
<button
@click="toggleMenu"
class="w-8 h-8 text-white hover:text-blue-500 transition-all duration-100 flex flex-row"
>
<ComputerDesktopIcon />
</button>
<span class="ml-1 mr-2 text-[20px]">|</span>
<!--navbar icons for min and max application window-->
<button class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100">
</button>
<div v-for="item in currentNavBar" :key="item.name" class="flex flex-row items-center gap-x-2 hover:bg-gray-100 transition-all duration-100 px-4 py-2 cursor-pointer">
<button @click="unMinWindow(item.windowAssociated)" class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100">
<button
class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100"
></button>
<div
v-for="item in currentNavBar"
:key="item.name"
class="flex flex-row items-center gap-x-2 hover:bg-gray-100 transition-all duration-100 px-4 py-2 cursor-pointer"
>
<button
@click="unMinWindow(item.windowAssociated)"
class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100"
>
<span>{{ item.name }}</span>
<span v-if="item.flash" class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
<span v-if="item.icon" :class="item.icon">
</span>
<span
v-if="item.flash"
class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"
></span>
<span v-if="item.icon" :class="item.icon"> </span>
</button>
</div>
</div>
<div class="text-center align-middle justify-center text-white">{{ currentDate }}</div>
<div class="text-center align-middle justify-center text-white">
{{ currentDate }}
</div>
</div>
<div class="w-full h-[2.5em]"></div>
<!--Menu-->
@ -133,31 +152,40 @@ const toggleLangMenu = () => {
enter-active-class="animate__animated animate__fadeInDown animate_fast03"
leave-active-class="animate__animated animate__fadeOutUp animate_fast03"
>
<div class="m-2 p-2 bg-gray-800 shadow-lg w-fit rounded-[10px] v-9998" v-if="menuOpen">
<div v-for="item in menuItems" :key="item.name" class="">
<button @click="openWindow(item.windowName)" class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100">
<span>{{ item.name }}</span>
<ChevronRightIcon class="w-4 h-4 justify-center align-center" />
</button>
<div
class="m-2 p-2 bg-gray-800 shadow-lg w-fit rounded-[10px] v-9998"
v-if="menuOpen"
>
<div v-for="item in menuItems" :key="item.name" class="">
<button
@click="openWindow(item.windowName)"
class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100"
>
<span>{{ item.name }}</span>
<ChevronRightIcon class="w-4 h-4 justify-center align-center" />
</button>
</div>
</div>
</div>
</Transition>
<!--Main desktop contents-->
<div
class="flex flex-col justify-center align-center text-center absolute w-full h-screen inset-x-0 inset-y-0 z-[-1]"
id="desktop"
>
</div>
<slot/>
<!--Footer-->
></div>
<slot />
<!--Footer-->
<div
class="absolute w-[calc(100% - 5px)] inset-x-0 bottom-0 mx-[1.5px] p-3 justify-between align-center flex flex-row"
>
<div class="">
<!--Lang-->
<span>Lang: </span>
<span class="text-lg">{{ t("localeflag") }}</span>&nbsp;
<button class="w-4 h-4 hover:text-blue-200 transition-all duration-100" @click="toggleLangMenu">
<span class="text-lg">{{ t("localeflag") }}</span
>&nbsp;
<button
class="w-4 h-4 hover:text-blue-200 transition-all duration-100"
@click="toggleLangMenu"
>
<LanguageIcon />
</button>
</div>
@ -170,9 +198,14 @@ const toggleLangMenu = () => {
<span class="text-sm">{{ new Date().getFullYear() }} &copy yh</span>
</div>
<div class="">
<button @click="openWindow('login')" class="w-8 h-8 text-gray-400 flex flex-row">
<UserIcon class="w-8 h-8 text-gray-400 hover:text-blue-500 transition-all duration-100" />
</button>
<button
@click="openWindow('login')"
class="w-8 h-8 text-gray-400 flex flex-row"
>
<UserIcon
class="w-8 h-8 text-gray-400 hover:text-blue-500 transition-all duration-100"
/>
</button>
</div>
</div>
</template>