⚡️ 样式重构，移除分享

src/components/hutaoAbyss/hta-overlay-overview.vue

@@ -40,6 +40,7 @@ interface HtaOverlayOverviewProps {
 
 interface HtaOverlayOverviewEmits {
   (e: "update:modelValue", value: boolean): void;
+
   (e: "cancel"): void;
 }
 
@@ -87,16 +88,12 @@ function onCancel(): void {
 }
 
 .hta-oob-item :nth-child(2n-1) {
-  color: var(--box-text-4);
-  font-family: var(--font-title);
-  font-size: 16px;
+  color: var(--box-text-2);
   text-align: left;
 }
 
 .hta-oob-item :nth-child(2n) {
-  color: var(--tgc-yellow-1);
-  font-size: 14px;
+  color: var(--box-text-3);
   text-align: right;
-  text-shadow: 0 0 5px var(--tgc-dark-7);
 }
 </style>

src/components/hutaoAbyss/hta-tab-hold.vue

@@ -1,29 +1,18 @@
 <template>
   <div class="hta-th-box">
-    <table class="hta-th-table">
-      <!-- 表头 -->
-      <tr>
-        <th>角色</th>
-        <th>持有</th>
-        <th>0命</th>
-        <th>1命</th>
-        <th>2命</th>
-        <th>3命</th>
-        <th>4命</th>
-        <th>5命</th>
-        <th>6命</th>
-      </tr>
-      <!-- 表格 -->
-      <tr v-for="item in props.modelValue" :key="item.HoldingRate" class="hta-th-tr">
-        <td class="hta-th-td">
-          <TibWikiAbyss2 v-model="item.AvatarId" />
-        </td>
-        <td>{{ (item.HoldingRate * 100).toFixed(3) }}%</td>
-        <td v-for="rate in item.Constellations" :key="rate.Item">
-          {{ (rate.Rate * 100).toFixed(3) }}%
-        </td>
-      </tr>
-    </table>
+    <v-data-table :headers="headers" :items="props.modelValue">
+      <template v-slot:item="{ item }">
+        <tr class="hta-th-tr">
+          <td class="hta-th-icon">
+            <TibWikiAbyss2 v-model="item.AvatarId" />
+          </td>
+          <td>{{ (item.HoldingRate * 100).toFixed(3) }}%</td>
+          <td v-for="rate in item.Constellations" :key="rate.Item">
+            {{ (rate.Rate * 100).toFixed(3) }}%
+          </td>
+        </tr>
+      </template>
+    </v-data-table>
   </div>
 </template>
 <script lang="ts" setup>
@@ -34,6 +23,18 @@ interface HtaTabHoldProps {
 }
 
 const props = defineProps<HtaTabHoldProps>();
+
+const headers = [
+  { title: "角色", align: "center", key: "AvatarId" },
+  { title: "持有", align: "center", key: "HoldingRate" },
+  { title: "0命", align: "center", key: "Constellations[0].Rate" },
+  { title: "1命", align: "center", key: "Constellations[1].Rate" },
+  { title: "2命", align: "center", key: "Constellations[2].Rate" },
+  { title: "3命", align: "center", key: "Constellations[3].Rate" },
+  { title: "4命", align: "center", key: "Constellations[4].Rate" },
+  { title: "5命", align: "center", key: "Constellations[5].Rate" },
+  { title: "6命", align: "center", key: "Constellations[6].Rate" },
+];
 </script>
 <style lang="css" scoped>
 .hta-th-box {
@@ -44,25 +45,12 @@ const props = defineProps<HtaTabHoldProps>();
   overflow-y: auto;
 }
 
-.hta-th-table {
-  width: 100%;
-  border-radius: 5px;
-  background: var(--box-bg-1);
+.hta-th-tr {
+  height: 100px;
   text-align: center;
 }
 
-.hta-th-tr {
-  border-radius: 5px;
-  background: var(--box-bg-2);
-  border-collapse: collapse;
-}
-
-.hta-th-td {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
+.hta-th-icon {
+  width: 100px;
 }
 </style>

src/pages/WIKI/Abyss.vue

@@ -8,10 +8,6 @@
         <v-tab value="team">队伍出场</v-tab>
         <v-tab value="hold">角色持有</v-tab>
       </v-tabs>
-      <v-btn variant="outlined" class="hta-btn" @click="shareWiki">
-        <v-icon>mdi-share-variant</v-icon>
-        <span>分享</span>
-      </v-btn>
       <div class="hta-title">
         <span>胡桃数据库</span>
         <span @click="showDialog = true">更新于 {{ getUpdated() }}</span>
@@ -44,9 +40,7 @@ import HtaTabTeam from "../../components/hutaoAbyss/hta-tab-team.vue";
 import HtaTabUp from "../../components/hutaoAbyss/hta-tab-up.vue";
 import HtaTabUse from "../../components/hutaoAbyss/hta-tab-use.vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
-// plugins
 import Hutao from "../../plugins/Hutao";
-import { generateShareImg } from "../../utils/TGShare";
 
 // loading
 const loading = ref<boolean>(false);
@@ -87,31 +81,6 @@ function getUpdated(): string {
     .toLocaleString("zh-CN", { hour12: false })
     .replace(/\//g, "-");
 }
-
-function getShareTitle(): string {
-  switch (tab.value) {
-    case "use":
-      return `【胡桃】${overview.value.ScheduleId}-角色使用`;
-    case "up":
-      return `【胡桃】${overview.value.ScheduleId}-角色出场`;
-    case "team":
-      return `【胡桃】${overview.value.ScheduleId}-队伍出场`;
-    case "hold":
-      return `【胡桃】${overview.value.ScheduleId}-角色持有`;
-  }
-  return `【胡桃】${overview.value.ScheduleId}-深渊数据`;
-}
-
-async function shareWiki(): Promise<void> {
-  const div = <HTMLDivElement>document.querySelector(".hta-tab-item");
-  const title = getShareTitle();
-  loadingTitle.value = "正在生成分享图";
-  loadingSub.value = `${title}.png`;
-  loading.value = true;
-  await generateShareImg(title, div);
-  loadingSub.value = "";
-  loading.value = false;
-}
 </script>
 <style lang="css" scoped>
 .hta-box {
@@ -143,15 +112,16 @@ async function shareWiki(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-left: auto;
   column-gap: 10px;
   font-size: 20px;
 }
 
-.hta-title :nth-child(2) {
+.hta-title :last-child {
   font-family: var(--font-text);
 }
 
-.hta-title :nth-child(2):hover {
+.hta-title :last-child:hover {
   cursor: pointer;
   text-decoration: underline;
 }