From b40db32697e65cd0dbc8dcb65573c21c3b671bf0 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Thu, 18 Sep 2025 23:38:50 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/viewPost/tp-vod.vue | 37 +++++++++++++-----------------
 src/utils/gachaCharts.ts           |  3 ++-
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/components/viewPost/tp-vod.vue b/src/components/viewPost/tp-vod.vue
index 4e8ec46c..cd74ad37 100644
--- a/src/components/viewPost/tp-vod.vue
+++ b/src/components/viewPost/tp-vod.vue
@@ -25,8 +25,7 @@ import useAppStore from "@store/app.js";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { getImageBuffer, saveCanvasImg, saveImgLocal } from "@utils/TGShare.js";
 import { getVideoDuration } from "@utils/toolFunc.js";
-import Artplayer from "artplayer";
-import type { Option } from "artplayer/types/option.js";
+import Artplayer, { type Option } from "artplayer";
 import { onMounted, onUnmounted, ref, shallowRef, toRaw } from "vue";
 
 type TpVod = {
@@ -126,26 +125,22 @@ onMounted(async () => {
 
 onUnmounted(() => {
   container.value?.destroy();
-  if (coverBuffer.value) {
-    coverBuffer.value = null;
-  }
-  if (coverUrl.value) {
-    URL.revokeObjectURL(coverUrl.value);
-  }
+  if (coverBuffer.value) coverBuffer.value = null;
+  if (coverUrl.value) URL.revokeObjectURL(coverUrl.value);
 });
 </script>
 <style lang="css" scoped>
 .tp-vod-box {
   position: relative;
   max-width: 100%;
-  margin: 10px auto;
+  margin: 8px auto;
   aspect-ratio: v-bind(vodAspectRatio); /* stylelint-disable-line value-keyword-case */
 }
 
 .tp-vod-container {
   overflow: hidden;
   max-width: 100%;
-  border-radius: 10px;
+  border-radius: 8px;
   aspect-ratio: v-bind(vodAspectRatio); /* stylelint-disable-line value-keyword-case */
 }
 
@@ -159,7 +154,7 @@ onUnmounted(() => {
   width: 100%;
   align-items: center;
   justify-content: center;
-  border-radius: 10px;
+  border-radius: 8px;
   aspect-ratio: v-bind(vodAspectRatio); /* stylelint-disable-line value-keyword-case */
 }
 
@@ -181,31 +176,31 @@ onUnmounted(() => {
 
 .tp-vod-time {
   position: absolute;
-  bottom: 10px;
-  left: 10px;
+  bottom: 8px;
+  left: 8px;
   display: flex;
   align-items: center;
-  padding: 2px 5px;
-  border-radius: 5px;
+  padding: 2px 4px;
+  border-radius: 4px;
   background: #00000080;
   color: var(--tgc-white-4);
   font-family: var(--font-title);
   font-size: 12px;
-  gap: 5px;
+  gap: 4px;
 }
 
 .tp-vod-view {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 8px;
+  right: 8px;
   display: flex;
   align-items: center;
-  padding: 2px 5px;
-  border-radius: 5px;
+  padding: 2px 4px;
+  border-radius: 4px;
   background: #00000080;
   color: var(--tgc-white-4);
   font-family: var(--font-title);
   font-size: 12px;
-  gap: 5px;
+  gap: 4px;
 }
 </style>
diff --git a/src/utils/gachaCharts.ts b/src/utils/gachaCharts.ts
index 9cbf89fe..00b435b6 100644
--- a/src/utils/gachaCharts.ts
+++ b/src/utils/gachaCharts.ts
@@ -1,7 +1,7 @@
 /**
  * @file utils/gachaCharts.ts
  * @description 祈愿图表配置
- * @since Beta v0.6.8
+ * @since Beta v0.8.2
  */
 
 import TSUserGacha from "@Sqlm/userGacha.js";
@@ -236,6 +236,7 @@ async function getStackBarOptions(uid: string, gachaType?: string): Promise<ECha
     xAxis,
     yAxis: { type: "value" },
     series,
+    grid: { left: "3%", right: "3%", bottom: "3%", top: "5%" },
   };
 }