refactor: update row density to compact in various components for improved layout

src/views/Home.vue

@@ -1,7 +1,10 @@
 <template>
   <v-container class="pa-0" fluid>
     <div class="d-flex flex-column ga-5 py-4 pr-2 pl-0">
-      <v-sheet class="d-flex flex-column flex-sm-row align-start align-sm-center ga-4 pa-5 elevation-1" color="surface">
+      <v-sheet
+        class="d-flex flex-column flex-sm-row align-start align-sm-center ga-4 pa-5 elevation-1"
+        color="surface"
+      >
         <v-avatar color="primary" size="52" variant="tonal">
           <span class="text-h5">👋</span>
         </v-avatar>
@@ -25,11 +28,13 @@
             這裡透過 resolveNewsItem 抽出原始資料，再沿用原本的卡片排版。
           -->
           <template #default="{ items }">
-            <v-row dense>
+            <v-row density="compact">
               <v-col v-for="wrapped in items" :key="resolveNewsItem(wrapped).id" cols="12">
                 <v-card
-class="news-item d-flex flex-column flex-sm-row ga-4 pa-4 bg-surface" variant="outlined"
-                  @click="handleNews(resolveNewsItem(wrapped))">
+                  class="news-item d-flex flex-column flex-sm-row ga-4 pa-4 bg-surface"
+                  variant="outlined"
+                  @click="handleNews(resolveNewsItem(wrapped))"
+                >
                   <v-sheet class="news-badge">
                     <div class="news-badge-date">{{ resolveNewsItem(wrapped).date }}</div>
                     <div class="news-badge-month">{{ resolveNewsItem(wrapped).month }}</div>
@@ -38,8 +43,12 @@ class="news-item d-flex flex-column flex-sm-row ga-4 pa-4 bg-surface" variant="o
                     <div class="d-flex flex-wrap align-center font-weight-bold">
                       {{ resolveNewsItem(wrapped).title }}
                       <v-chip
-v-if="resolveNewsItem(wrapped).isNew" class="ml-2" color="primary" size="x-small"
-                        variant="flat">
+                        v-if="resolveNewsItem(wrapped).isNew"
+                        class="ml-2"
+                        color="primary"
+                        size="x-small"
+                        variant="flat"
+                      >
                         NEW
                       </v-chip>
                     </div>
@@ -65,8 +74,12 @@ v-if="resolveNewsItem(wrapped).isNew" class="ml-2" color="primary" size="x-small
       </section>
 
       <v-card
-class="d-flex align-center justify-space-between ga-3 px-5 py-4" color="secondary" rounded="xl"
-        variant="tonal" @click="handleMessageCenter">
+        class="d-flex align-center justify-space-between ga-3 px-5 py-4"
+        color="secondary"
+        rounded="xl"
+        variant="tonal"
+        @click="handleMessageCenter"
+      >
         <div class="d-flex align-center ga-4">
           <v-avatar color="secondary" size="44" variant="flat">
             <span class="text-h6">✉️</span>
@@ -81,11 +94,13 @@ class="d-flex align-center justify-space-between ga-3 px-5 py-4" color="secondar
 
       <section class="d-flex flex-column pb-4">
         <div class="d-flex align-center ga-2 text-h6 font-weight-bold">🚀 快速存取</div>
-        <v-row class="mt-2" dense>
+        <v-row class="mt-2" density="compact">
           <v-col v-for="item in quickItems" :key="item.title" cols="6" md="2" sm="4">
             <v-card
-class="d-flex flex-column align-center ga-2 text-center py-4 px-2 quick-item" variant="outlined"
-              @click="handleQuick(item)">
+              class="d-flex flex-column align-center ga-2 text-center py-4 px-2 quick-item"
+              variant="outlined"
+              @click="handleQuick(item)"
+            >
               <div class="text-h5">{{ item.icon }}</div>
               <div class="text-body-2 font-weight-medium">{{ item.title }}</div>
             </v-card>
@@ -175,7 +190,7 @@ const selectedNews = ref<NewsItem | null>(null)
 const isNewsDialogOpen = ref(false)
 
 // v-data-iterator 會包裝 items，這個方法用來安全地取回原始資料結構。
-function resolveNewsItem (wrapped: unknown): NewsItem {
+function resolveNewsItem(wrapped: unknown): NewsItem {
   if (wrapped && typeof wrapped === 'object' && 'raw' in wrapped) {
     return (wrapped as { raw: NewsItem }).raw
   }
@@ -183,17 +198,17 @@ function resolveNewsItem (wrapped: unknown): NewsItem {
   return wrapped as NewsItem
 }
 
-function handleNews (item: NewsItem) {
+function handleNews(item: NewsItem) {
   selectedNews.value = item
   isNewsDialogOpen.value = true
 }
 
 // 點擊首頁「訊息中心」卡片，開啟共用的訊息清單 dialog
-function handleMessageCenter () {
+function handleMessageCenter() {
   messageStore.open()
 }
 
-function handleQuick (item: (typeof quickItems)[number]) {
+function handleQuick(item: (typeof quickItems)[number]) {
   snackbar.show({ message: `前往：${item.title}`, color: 'info' })
 }
 </script>
@@ -201,7 +216,9 @@ function handleQuick (item: (typeof quickItems)[number]) {
 <style scoped>
 .news-item {
   cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .news-item:hover {
@@ -236,7 +253,9 @@ function handleQuick (item: (typeof quickItems)[number]) {
 .quick-item {
   display: flex;
   cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .quick-item:hover {