Intergr

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>

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>
+  </div>    </DraggableWindow> 
 </template>

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>

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>

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>