Refactor code structure for improved readability and maintainability

README.md

@@ -2,7 +2,7 @@
 
 ![](https://hackatime-badge.hackclub.com/U087ATD163V/news-analyize)
 
-App Design: [Freeform](https://www.icloud.com/freeform/026AxB798cViZ9jJ2DkNsXUCQ#Untitled_5)
+App Design: [PDF Document](/design.pdf)
 
 ## Why?
 

components/DraggableWindow.vue

@@ -66,7 +66,7 @@ const stopDrag = () => {
       width: props.width || '400px',
       height: props.height || '300px',
     }"
-    class="fixed bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden flex flex-col shadow-lg shadow-xl/30"
+    class="fixed bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden flex flex-col shadow-lg shadow-xl/30"
   >
     <div
       @mousedown="startDrag"

components/app/windows/about.vue

@@ -1,3 +1,6 @@
+<script setup lang="ts">
+import copyrightInfo from "~/components/app/info/copyright.vue";
+</script>
 <template>
   <div class="justify-center align-center text-center flex flex-col">
     <div class="flex flex-col">
@@ -21,5 +24,10 @@
         ></span
       >
     </div>
+    <hr/>
+    <div class="flex flex-col">
+        <span class="text-xl">版權資訊</span>
+        <copyrightInfo />
+    </div>
   </div>
 </template>

components/app/windows/aboutNewsOrg.vue

@@ -44,9 +44,9 @@ onMounted(() => {
       <div
         class="flex flex-row bg-[#AAACAAFF] rounded-3xl p-3 gap-3 m-3 scale-5"
       >
-        <NuxtImg
+        <img
           :src="fetchNewsOrgInfo?.logoUrl"
-          class="w-48 h-48 rounded-[10px]"
+          class="w-48 h-48 rounded-l-3xl object-cover p-0 m-0"
         />
         <div class="flex flex-col gap-3 text-left">
           <h1 class="text-4xl font-bold m-3 text-left">

i18n/locales/en.json

@@ -60,6 +60,7 @@
     "search": "Search",
     "chatbot": "Chatbot",
     "starred": "Starred",
-    "terminal": "Terminal"
+    "terminal": "Terminal",
+    "aboutNewsOrg": "About this news organization",
   }
 }

i18n/locales/zh-tw.json

@@ -60,6 +60,7 @@
     "search": "搜尋",
     "chatbot": "聊天機器人",
     "starred": "收藏",
-    "terminal": "終端機"
+    "terminal": "終端機",
+    "aboutNewsOrg": "關於這個新聞來源"
   }
 }

pages/app/desktop/index.vue

@@ -149,6 +149,8 @@ const associAppWindow = [
     id: "10",
     title: t("app.aboutNewsOrg"),
     component: AboutNewsOrgWindow,
+    width: "600px",
+    height: "400px",
   },
   {
     name: "tty",