From 053a63a667428b1f371a3cbd2190a6d741786dc5 Mon Sep 17 00:00:00 2001
From: CakeAL <1742507190@qq.com>
Date: Fri, 15 Nov 2024 15:56:31 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(MonthlyUserLog):=20Popover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MonthlyUserLog.vue | 42 ++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/pages/MonthlyUserLog.vue b/src/pages/MonthlyUserLog.vue
index 866dae1..70750f3 100644
--- a/src/pages/MonthlyUserLog.vue
+++ b/src/pages/MonthlyUserLog.vue
@@ -191,16 +191,46 @@ const select_mb_or_gb = (value: string) => {
           class="gray"
         >
         </n-grid-item>
+
         <n-grid-item
           v-for="(item, index) in monthly_user_log"
           :key="index"
           class="day"
-          :style="{ backgroundColor: getBackgroundColor(select_to_data(item)) }"
-        >
-          <p style="margin: 3px; line-height: 1.5em; white-space: nowrap">
-            <b>{{ index + 1 }}日</b><br />
-            {{ select_mb_or_gb(select_to_data(item)) }} {{ data_type() }}
-          </p>
+          :style="{
+            backgroundColor: getBackgroundColor(select_to_data(item)),
+          }"
+          ><n-popover trigger="hover">
+            <template #trigger>
+              <p style="margin: 3px; line-height: 1.5em; white-space: nowrap">
+                <b>{{ index + 1 }}日</b><br />
+                {{ select_mb_or_gb(select_to_data(item)) }} {{ data_type() }}
+              </p>
+            </template>
+            <n-table :bordered="false" :single-line="false">
+              <thead>
+                <tr>
+                  <th>ipv4 ⬇</th>
+                  <th>ipv4 ⬆</th>
+                  <th>ipv6 ⬇</th>
+                  <th>ipv6 ⬆</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>{{ mb2gb(item.ipv4_down) }} GB</td>
+                  <td>{{ mb2gb(item.ipv4_up) }} GB</td>
+                  <td>{{ mb2gb(item.ipv6_down) }} GB</td>
+                  <td>{{ mb2gb(item.ipv6_up) }} GB</td>
+                </tr>
+                <tr>
+                  <td>花费:</td>
+                  <td>{{ item.cost.toFixed(2) }} 元</td>
+                  <td>使用时长:</td>
+                  <td>{{ (item.used_duration / 60).toFixed(2) }} h</td>
+                </tr>
+              </tbody>
+            </n-table>
+          </n-popover>
         </n-grid-item>
       </n-grid>
       <p>在使用概览上的东西选择：</p>