Clean the code via prettier.

components/DraggableWindow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useThrottleFn } from '@vueuse/core'
+import { useThrottleFn } from "@vueuse/core";
 
 const props = defineProps<{
   title: string;
@@ -10,44 +10,52 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits(["close", "min", "maximize", "restore"]);
-const title = computed(() => props.title || 'Draggable Window');
-
+const title = computed(() => props.title || "Draggable Window");
 
 const isDragging = ref(false);
 const position = ref({
-  x: props.initialX || Math.floor(window.innerWidth / 2 - (parseInt(props.width || '400') / 2)),
-  y: props.initialY || Math.floor(window.innerHeight / 2 - (parseInt(props.height || '300') / 2)),
+  x:
+    props.initialX ||
+    Math.floor(window.innerWidth / 2 - parseInt(props.width || "400") / 2),
+  y:
+    props.initialY ||
+    Math.floor(window.innerHeight / 2 - parseInt(props.height || "300") / 2),
 });
 
 const offset = ref({ x: 0, y: 0 });
 
 const doDrag = useThrottleFn((e: MouseEvent) => {
-  if (!isDragging.value) return
+  if (!isDragging.value) return;
 
   requestAnimationFrame(() => {
     position.value = {
-      x: Math.max(0, Math.min(window.innerWidth - 400, e.clientX - offset.value.x)),
-      y: Math.max(0, Math.min(window.innerHeight - 300, e.clientY - offset.value.y))
-    }
-  })
+      x: Math.max(
+        0,
+        Math.min(window.innerWidth - 400, e.clientX - offset.value.x),
+      ),
+      y: Math.max(
+        0,
+        Math.min(window.innerHeight - 300, e.clientY - offset.value.y),
+      ),
+    };
+  });
 }, 16);
 
-
 const startDrag = (e: MouseEvent) => {
-  isDragging.value = true
+  isDragging.value = true;
   offset.value = {
     x: e.clientX - position.value.x,
-    y: e.clientY - position.value.y
-  }
-  document.addEventListener('mousemove', doDrag)
-  document.addEventListener('mouseup', stopDrag)
-}
+    y: e.clientY - position.value.y,
+  };
+  document.addEventListener("mousemove", doDrag);
+  document.addEventListener("mouseup", stopDrag);
+};
 
 const stopDrag = () => {
-  isDragging.value = false
-  document.removeEventListener('mousemove', doDrag)
-  document.removeEventListener('mouseup', stopDrag)
-}
+  isDragging.value = false;
+  document.removeEventListener("mousemove", doDrag);
+  document.removeEventListener("mouseup", stopDrag);
+};
 </script>
 
 <template>

components/app/windows/hotnews.vue

@@ -11,7 +11,6 @@ try {
 } catch (error) {
   console.error("Error:", error);
 }
-
 </script>
 <template>
   <div

components/app/windows/login.vue

@@ -16,7 +16,7 @@ const submitUserPassword = async () => {
       username: userAccount.value,
       password: password,
     }),
-    })
+  });
   const res = await sendData.json();
 
   if (res.status === "ok") {
@@ -32,7 +32,7 @@ const submitUserPassword = async () => {
   // Clear the input fields
   userAccount.value = "";
   userPassword.value = "";
-}
+};
 </script>
 <template>
   <div class="flex flex-col items-center justify-center h-full">

components/app/windows/sources.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 const { t, locale } = useI18n();
 
-const { data: source, pending, error } = await useFetch("/api/getData/fetchSources", {
+const {
+  data: source,
+  pending,
+  error,
+} = await useFetch("/api/getData/fetchSources", {
   method: "POST",
   headers: {
     "Content-Type": "application/json",
@@ -12,7 +16,7 @@ const { data: source, pending, error } = await useFetch("/api/getData/fetchSourc
 });
 </script>
 <template>
-    <div >
+  <div>
     <div v-for="item in source?.data" :key="item.id">
       <h1>{{ item.title }}</h1>
       <span>{{ item.description }}</span>

i18n/locales/zh-tw.json

@@ -18,7 +18,7 @@
     "startusing": "開始使用!",
     "learnmore": "了解更多",
     "whydes": "台灣的新聞是要痲是來自中國控制的媒體，或是來自只想獲得點閱的記者。",
-    "howdes":" 我們使用使用 Python 寫的網頁爬蟲來搜尋最新的新聞，並將其存入Postgres資料庫中。"
+    "howdes": " 我們使用使用 Python 寫的網頁爬蟲來搜尋最新的新聞，並將其存入Postgres資料庫中。"
   },
   "dailybriefing": "今日報導",
   "Welcome": "歡迎",

pages/app/desktop/index.vue

@@ -135,7 +135,7 @@ onMounted(async () => {
   if (openApp.value) {
     openWindow(openApp.value);
   }
-})
+});
 
 const associAppWindow = [
   {
@@ -146,24 +146,31 @@ const associAppWindow = [
     width: "700px",
     height: "500px",
   },
-  { name: "login", id: "2", title: t("app.login") , component: LoginWindow },
-  { name: "sources", id: "3", title: t("app.sources"), component: SourcesWindow }
+  { name: "login", id: "2", title: t("app.login"), component: LoginWindow },
+  {
+    name: "sources",
+    id: "3",
+    title: t("app.sources"),
+    component: SourcesWindow,
+  },
 ];
 
 const currentOpenAppId = ref(0);
 
 const findAndOpenWindow = (windowName: string) => {
-  const app = associAppWindow.find((app) => app.name === windowName)
+  const app = associAppWindow.find((app) => app.name === windowName);
 
   // Prevent dual logins
-  if (windowName === "login" && 
-      activeWindows.value.some((window) => window.name === "login")) {
-    return
+  if (
+    windowName === "login" &&
+    activeWindows.value.some((window) => window.name === "login")
+  ) {
+    return;
   }
 
   if (app) {
     // Use shallowRef for better performance with components
-    const windowComponent = shallowRef(app.component)
+    const windowComponent = shallowRef(app.component);
 
     activeWindows.value.push({
       id: currentOpenAppId.value,
@@ -172,10 +179,10 @@ const findAndOpenWindow = (windowName: string) => {
       title: app.title,
       width: app.width || "400px",
       height: app.height || "300px",
-    })
+    });
     currentOpenAppId.value++;
   }
-}
+};
 
 const closeWindow = (windowId: string) => {
   activeWindows.value = activeWindows.value.filter(
@@ -196,7 +203,7 @@ const topWindow = (windowId: string) => {
 
 useSeoMeta({
   title: "hi" + " - Desktop",
-})
+});
 </script>
 <template>
   <div

pages/home.vue

@@ -78,18 +78,14 @@ onMounted(() => {
       >
         <h1 class="text-8xl mt-0">🤔</h1>
         <h2 class="text-xl font-bold">Why?</h2>
-        <span class="text-sm"
-          >{{ t("home.whydes")}}</span
-        >
+        <span class="text-sm">{{ t("home.whydes") }}</span>
       </div>
       <div
         class="flex flex-col justify-center items-center align-middle bg-[#C9C9C9]/60 rounded-xl shadow-lg p-5 m-5 w-[300px] h-[200px]"
       >
         <h1 class="text-8xl mt-0">🧐</h1>
         <h2 class="text-xl font-bold">How?</h2>
-        <span class="text-sm"
-          >{{ t("home.howdes")}}</span
-        >
+        <span class="text-sm">{{ t("home.howdes") }}</span>
       </div>
     </div>
     <br />

server/api/getData/fetchSources.ts

@@ -19,7 +19,7 @@ export default defineEventHandler(async (event) => {
         title: "Source 2",
         url: "https://source2.com",
         description: "Description for Source 2",
-            }
-        ]
-    }
-})
+      },
+    ],
+  };
+});

server/api/user/login.ts

@@ -5,7 +5,7 @@ export default defineEventHandler(async (event) => {
   if (!salt) {
     throw createError({
       statusCode: 500,
-            message: 'Internal server error'
+      message: "Internal server error",
     });
   }
   const body = await readBody(event);
@@ -13,14 +13,14 @@ export default defineEventHandler(async (event) => {
   if (!username || !password) {
     throw createError({
       statusCode: 400,
-            message: 'Username and password are required'
+      message: "Username and password are required",
     });
   }
   const USERNAME_PATTERN = /^[a-zA-Z0-9_]{3,20}$/;
   if (!USERNAME_PATTERN.test(username)) {
     throw createError({
       statusCode: 400,
-            message: 'Invalid username.'
+      message: "Invalid username.",
     });
   }
   // Server side hashing
@@ -30,7 +30,5 @@ export default defineEventHandler(async (event) => {
   try {
     console.log(username);
     console.log(hashedPassword);
-    } catch (e) {
-
-    }
-})
+  } catch (e) {}
+});