feat: enhance DraggableWindow component with additional emit events for window control; update hotnews component to handle pending state; modify home link for improved navigation

This commit is contained in:
吳元皓 2025-05-12 21:05:14 +08:00
parent 71aac20c36
commit 57aa0aba18
4 changed files with 17 additions and 7 deletions

View File

@ -9,7 +9,9 @@ const props = defineProps<{
height?: string; height?: string;
}>(); }>();
const emit = defineEmits(["close"]); const emit = defineEmits(["close", "min", "maximize", "restore"]);
const title = computed(() => props.title || 'Draggable Window');
const isDragging = ref(false); const isDragging = ref(false);
const position = ref({ const position = ref({
@ -65,11 +67,17 @@ const stopDrag = () => {
<h3 class="font-semibold">{{ title }}</h3> <h3 class="font-semibold">{{ title }}</h3>
<div class="flex flex-row gap-1"> <div class="flex flex-row gap-1">
<button <button
@click="emit('close')" @click="emit('min')"
class="p-1 hover:bg-gray-300 dark:hover:bg-gray-600 rounded" class="p-1 hover:bg-gray-300 dark:hover:bg-gray-600 rounded"
> >
</button> </button>
<button
@click="emit('maximize')"
class="p-1 hover:bg-gray-300 dark:hover:bg-gray-600 rounded"
>
</button>
<button <button
@click="emit('close')" @click="emit('close')"
class="p-1 rounded bg-red-500 text-white hover:bg-red-600 transition duration-200" class="p-1 rounded bg-red-500 text-white hover:bg-red-600 transition duration-200"

View File

@ -3,13 +3,15 @@ import DraggableWindow from "~/components/DraggableWindow.vue";
const ffeed = ref(); const ffeed = ref();
const ass = ["健康2.0", "中天", "TVBS", "香港01", "ETtoday"]; const ass = ["健康2.0", "中天", "TVBS", "香港01", "ETtoday"];
import Button from "~/components/ui/button/Button.vue"; import Button from "~/components/ui/button/Button.vue";
const pending = ref();
try { try {
const { data } = await useFetch("/api/rss/google"); const { data, pending: isPending } = await useFetch("/api/rss/google");
ffeed.value = data.value; ffeed.value = data.value;
} catch (error) { } catch (error) {
console.error("Error:", error); console.error("Error:", error);
} }
</script> </script>
<template> <template>
<div <div

View File

@ -125,14 +125,13 @@ const toggleLangMenu = () => {
const activeWindows = ref<associAppWindowInterface>([]); const activeWindows = ref<associAppWindowInterface>([]);
// ?opemapp= component // ?opemapp= component
const openApp = ref(false); const openApp = ref();
const openAppId = ref(); const openAppId = ref();
const openAppNameQuery = ref(); const openAppNameQuery = ref();
onMounted(() => { onMounted(async () => {
openApp.value = route.query.openapp; openApp.value = route.query.openapp;
openAppId.value = route.query.id; openAppId.value = route.query.id;
openAppNameQuery.value = route.query.name;
if (openApp.value) { if (openApp.value) {
openWindow(openApp.value); openWindow(openApp.value);
} }
@ -271,6 +270,7 @@ useSeoMeta({
:key="window.id" :key="window.id"
:title="window.title" :title="window.title"
@close="closeWindow(window.id)" @close="closeWindow(window.id)"
@min="unMinWindow(window.id)"
:width="window.width" :width="window.width"
:height="window.height" :height="window.height"
@clicked="topWindow(window.id)" @clicked="topWindow(window.id)"

View File

@ -54,7 +54,7 @@ onMounted(() => {
></span ></span
></span> ></span>
<div class="flex flex-row justify-center align-center gap-0s"> <div class="flex flex-row justify-center align-center gap-0s">
<NuxtLink :to="localePath('/app/desktop/?openapp=hotnews')"> <NuxtLink :to="localePath('/app/desktop/?')">
<button <button
class="m-4 mr-1 ml-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gradient-to-l from-sky-500 to-purple-600 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg" class="m-4 mr-1 ml-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gradient-to-l from-sky-500 to-purple-600 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
> >