From 163f613058179452b7017d1cb839155c9c637271 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Mon, 12 May 2025 06:41:43 +0800
Subject: [PATCH] Intergr

---
 components/DraggableWindow.vue                | 30 +++++++++----------
 .../{hot/index.vue => windows/hotnews.vue}    | 16 +++++-----
 components/app/windows/login.vue              | 18 +++++++++++
 layouts/macui.vue                             |  4 +--
 pages/app/desktop/index.vue                   | 10 +++++--
 5 files changed, 52 insertions(+), 26 deletions(-)
 rename components/app/{hot/index.vue => windows/hotnews.vue} (82%)

diff --git a/components/DraggableWindow.vue b/components/DraggableWindow.vue
index 8a0b396..ba0eedd 100644
--- a/components/DraggableWindow.vue
+++ b/components/DraggableWindow.vue
@@ -58,29 +58,29 @@ onUnmounted(() => {
       width: props.width || '400px',
       height: props.height || '300px'
     }"
-    class="fixed bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
+    class="fixed bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden flex flex-col"
   >
     <div
       @mousedown="startDrag"
-      class="bg-gray-700 p-2 cursor-move flex justify-between items-center"
+      class="bg-gray-700 p-2 cursor-move flex justify-between items-center flex-shrink-0"
     >
       <h3 class="font-semibold">{{ title }}</h3>
       <div class="flex flex-row gap-1">
-              <button
-        @click="emit('close')"
-        class="p-1 hover:bg-gray-300 dark:hover:bg-gray-600 rounded"
-      >
-        ━
-      </button>
-            <button
-        @click="emit('close')"
-        class="p-1 rounded bg-red-500 text-white hover:bg-red-600 transition duration-200"
-      >
-        ✕
-      </button>
+        <button
+          @click="emit('close')"
+          class="p-1 hover:bg-gray-300 dark:hover:bg-gray-600 rounded"
+        >
+          ━
+        </button>
+        <button
+          @click="emit('close')"
+          class="p-1 rounded bg-red-500 text-white hover:bg-red-600 transition duration-200"
+        >
+          ✕
+        </button>
       </div>
     </div>
-    <div class="p-4 text-black">
+    <div class="p-4 text-black overflow-y-auto flex-grow">
       <slot></slot>
     </div>
   </div>
diff --git a/components/app/hot/index.vue b/components/app/windows/hotnews.vue
similarity index 82%
rename from components/app/hot/index.vue
rename to components/app/windows/hotnews.vue
index 8b53289..12f38d8 100644
--- a/components/app/hot/index.vue
+++ b/components/app/windows/hotnews.vue
@@ -1,4 +1,5 @@
-<script lang="ts" setup>
+<script setup lang="ts">
+import DraggableWindow from "~/components/DraggableWindow.vue";
 const ffeed = ref();
 const ass = ["健康2.0", "中天", "TVBS", "香港01", "ETtoday"];
 import Button from "~/components/ui/button/Button.vue";
@@ -9,14 +10,15 @@ try {
 } catch (error) {
   console.error("Error:", error);
 }
+const title = ref("Hot News");
 </script>
-
 <template>
+    <DraggableWindow :title="title" width="600px" height="400px">
   <div
     v-for="item in ffeed"
-    class="justify-center align-center text-center p-4 border border-white rounded-lg m-4"
+    class="justify-center align-center text-center p-4 border border-black rounded-lg m-4"
   >
-    <span class="text-xl text-bold text-gray-100"
+    <span class="text-xl text-bold text-gray-900"
       >{{ item.title }}
       <span
         v-if="ass.some((app) => item.title.includes(app))"
@@ -29,7 +31,7 @@ try {
       {{ new Date(item.date).toLocaleString() }}
     </h4>
     <div class="flex justify-center gap-2 mt-1">
-      <NuxtLink :to="item.link">
+      <NuxtLink :to="item.link" target="_blank">
         <Button>文章</Button>
       </NuxtLink>
       <NuxtLink>
@@ -60,5 +62,5 @@ try {
         </li>
       </ul>
     </div>
-  </div>
-</template>
+  </div>    </DraggableWindow> 
+</template>
\ No newline at end of file
diff --git a/components/app/windows/login.vue b/components/app/windows/login.vue
index ba53413..6853a4f 100644
--- a/components/app/windows/login.vue
+++ b/components/app/windows/login.vue
@@ -1,2 +1,20 @@
+<script setup lang="ts">
+import DraggableWindow from "~/components/DraggableWindow.vue";
+
+const title = ref("Login");
+</script>
 <template>
+    <DraggableWindow :title="title">
+        <div class="flex flex-col items-center justify-center h-full">
+            <form class="flex flex-col items-center justify-center h-full">
+                            <div class="text-xl mb-4 text-bold">Login / Register</div>
+
+                            <input type="text" placeholder="Username" class="mb-2 p-2 border rounded" />
+            <input type="password" placeholder="Password" class="p-2 border rounded mb-2" />
+            <button class="bg-black text-white p-2 rounded transition duration-200">
+                Log In
+            </button>
+            </form>
+        </div>
+    </DraggableWindow> 
 </template>
\ No newline at end of file
diff --git a/layouts/macui.vue b/layouts/macui.vue
index 208ba18..0cbd549 100644
--- a/layouts/macui.vue
+++ b/layouts/macui.vue
@@ -108,7 +108,7 @@ const toggleLangMenu = () => {
     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-->
-    <div class="flex flex-row g-2 text-gray-400 text-white z-999">
+    <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>
@@ -133,7 +133,7 @@ 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-998" v-if="menuOpen">
+    <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>
diff --git a/pages/app/desktop/index.vue b/pages/app/desktop/index.vue
index f989ce2..89859ef 100644
--- a/pages/app/desktop/index.vue
+++ b/pages/app/desktop/index.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import DraggableWindow from "~/components/DraggableWindow.vue";
+// Imports
+import LoginWindow from "~/components/app/windows/login.vue";
+import HotNewsWindow from "~/components/app/windows/hotnews.vue";
+
 definePageMeta({
   layout: "macui",
 });
@@ -23,5 +26,8 @@ watch(() => route.query.openapp, (newVal) => {
 });
 </script>
 <template>
-  <DraggableWindow title="Title">Hi This is a window</DraggableWindow> 
+  <div>
+    <LoginWindow data-app-id="login" />
+    <HotNewsWindow data-app-id="hotnews" />
+  </div>
 </template>
\ No newline at end of file