✨ 剧诗统计浮窗

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

@@ -33,7 +33,7 @@ import { onMounted, ref } from "vue";
 
 import { AppCharacterData } from "../../data/index.js";
 import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
-import TItemBox, { TItemBoxData } from "../app/t-item-box.vue";
+import TItemBox, { type TItemBoxData } from "../app/t-item-box.vue";
 
 interface HtaTabHoldProps {
   data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarHold[]>;

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

@@ -35,7 +35,7 @@ interface HtaTabUpProps {
 
 interface HtaTabUpData {
   Floor: number;
-  Ranks: Array<AbyssDataItem<{ Item: number; Rate: number }>>;
+  Ranks: Array<AbyssDataItem<TGApp.Plugins.Hutao.Base.Rate>>;
 }
 
 const props = defineProps<HtaTabUpProps>();
@@ -49,7 +49,7 @@ onMounted(async () => {
     const floorLast = props.data.last.find((f) => f.Floor === floor.Floor);
     const floorRank = {
       Floor: floor.Floor,
-      Ranks: <Array<AbyssDataItem<{ Item: number; Rate: number }>>>[],
+      Ranks: <Array<AbyssDataItem<TGApp.Plugins.Hutao.Base.Rate>>>[],
     };
     floor.Ranks.sort((a, b) => b.Rate - a.Rate);
     for (const rank of floor.Ranks) {

src/components/hutaoAbyss/tib-wiki-abyss.vue

@@ -9,14 +9,14 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 import { AppCharacterData } from "../../data/index.js";
 import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
 import TItemBox, { type TItemBoxData } from "../app/t-item-box.vue";
 
-interface TibWikiAbyssProps {
-  modelValue: AbyssDataItem<{ Item: number; Rate: number }>;
+export interface TibWikiAbyssProps {
+  modelValue: AbyssDataItem<TGApp.Plugins.Hutao.Base.Rate>;
 }
 
 const props = defineProps<TibWikiAbyssProps>();

src/components/pageHome/ph-comp-calendar.vue

@@ -40,7 +40,7 @@
       <div class="tc-content">
         <TCalendarBirth />
         <div class="calendar-grid">
-          <TItemBoxData
+          <TItemBox
             v-for="item in renderItems"
             :key="item.id"
             @click="selectItem(item)"
@@ -57,7 +57,7 @@ import { onMounted, ref, watch } from "vue";
 
 import { AppCalendarData } from "../../data/index.js";
 import { timestampToDate } from "../../utils/toolFunc.js";
-import type { TItemBoxData } from "../app/t-item-box.vue";
+import TItemBox, { type TItemBoxData } from "../app/t-item-box.vue";
 
 import TCalendarBirth from "./ph-calendar-birth.vue";
 import ToCalendar from "./ph-calendar-overlay.vue";

src/components/userCombat/tuc-overlay.vue

@@ -0,0 +1,126 @@
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+    <div class="tuc-overlay-box" v-if="data">
+      <div class="tuc-overlay-top">
+        <span class="tuc-overlay-title" @click="share()">
+          真境剧诗统计-第{{ data.ScheduleId }}期
+        </span>
+        <span class="tuc-overlay-sub">
+          <span>共{{ data.RecordTotal }}条数据 | </span>
+          <span>更新于{{ timestampToDate(data.Timestamp) }}</span>
+        </span>
+      </div>
+      <div class="tuc-overlay-content">
+        <TItemBox v-for="(item, index) in raw" :key="index" :model-value="getBoxData(item)" />
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import { AppCharacterData } from "../../data/index.js";
+import { generateShareImg } from "../../utils/TGShare.js";
+import { timestampToDate } from "../../utils/toolFunc.js";
+import TItemBox, { TItemBoxData } from "../app/t-item-box.vue";
+import TOverlay from "../app/t-overlay.vue";
+import showLoading from "../func/loading.js";
+
+interface TucOverlayProps {
+  modelValue: boolean;
+  data: TGApp.Plugins.Hutao.Combat.Data | undefined;
+}
+
+type TucOverlayEmits = (e: "update:modelValue", v: boolean) => void;
+const props = defineProps<TucOverlayProps>();
+const emits = defineEmits<TucOverlayEmits>();
+
+const visible = computed<boolean>({
+  get: () => props.modelValue,
+  set: (v) => emits("update:modelValue", v),
+});
+const raw = computed<TGApp.Plugins.Hutao.Base.Rate[]>(() => {
+  const res: TGApp.Plugins.Hutao.Base.Rate[] = props.data.BackupAvatarRates;
+  return res.sort((a, b) => b.Rate - a.Rate);
+});
+
+function onCancel(): void {
+  visible.value = false;
+}
+
+function getBoxData(item: TGApp.Plugins.Hutao.Base.Rate): TItemBoxData {
+  const avatar = AppCharacterData.find((i) => i.id === item.Item);
+  return {
+    bg: `/icon/bg/${avatar?.star}-Star.webp`,
+    clickable: false,
+    display: "outer",
+    icon: `/WIKI/character/${item.Item}.webp`,
+    innerHeight: 20,
+    innerText: avatar?.name ?? "旅行者",
+    outerText: `${(item.Rate * 100).toFixed(3)}%`,
+    outerHeight: 25,
+    lt:
+      avatar === undefined
+        ? ""
+        : avatar.element !== ""
+          ? `/icon/element/${avatar.element}元素.webp`
+          : `/icon/weapon/${avatar.weapon}.webp`,
+    ltSize: "15px",
+    size: "75px",
+    height: "100px",
+  };
+}
+
+async function share(): Promise<void> {
+  showLoading.start("正在生成分享图");
+  const element = <HTMLElement>document.querySelector(".tuc-overlay-box");
+  const fileName = `真境剧诗_${new Date().getTime()}.png`;
+  await generateShareImg(fileName, element, 1.2, true);
+  showLoading.end();
+}
+</script>
+<style lang="css" scoped>
+.tuc-overlay-box {
+  display: flex;
+  width: 800px;
+  height: 600px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 10px;
+  background: var(--app-page-bg);
+  gap: 10px;
+}
+
+.tuc-overlay-top {
+  display: flex;
+  width: 100%;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.tuc-overlay-title {
+  cursor: pointer;
+  font-family: var(--font-title);
+  font-size: 20px;
+}
+
+.tuc-overlay-sub {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  opacity: 0.8;
+  white-space: pre;
+}
+
+.tuc-overlay-content {
+  display: grid;
+  width: 100%;
+  padding-right: 10px;
+  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
+}
+</style>