✨ 嵌入祈愿详情

src/components/userGacha/gro-data-line.vue

@@ -20,7 +20,7 @@ import { computed } from "vue";
 
 import { AppGachaData } from "@/data/index.js";
 
-export type GroDataLineProps = { data: TGApp.Sqlite.GachaRecords.SingleTable; count: number };
+export type GroDataLineProps = { data: TGApp.Sqlite.GachaRecords.TableGacha; count: number };
 
 const props = defineProps<GroDataLineProps>();
 const hint = getEndHint();

src/components/userGacha/gro-data-view.vue

@@ -64,7 +64,7 @@ import GroDataLine, { type GroDataLineProps } from "./gro-data-line.vue";
 
 type GachaDataViewProps = {
   dataType: "new" | "avatar" | "weapon" | "normal" | "mix";
-  dataVal: Array<TGApp.Sqlite.GachaRecords.SingleTable>;
+  dataVal: Array<TGApp.Sqlite.GachaRecords.TableGacha>;
 };
 
 const props = defineProps<GachaDataViewProps>();

src/components/userGacha/gro-iframe.vue

@@ -0,0 +1,128 @@
+<!-- 嵌入游戏内容的iframe组件 -->
+<template>
+  <div class="gro-iframe-container">
+    <v-tabs class="gro-ic-tabs" v-model="poolTab" align-tabs="start" direction="vertical">
+      <v-tab v-for="(item, index) in tabList" :key="index" :value="item.value">
+        <template v-if="item.beyond">
+          <img src="/icon/nation/千星奇域.webp" title="千星奇域" alt="beyond" />
+        </template>
+        {{ item.label }}
+      </v-tab>
+    </v-tabs>
+    <iframe class="gro-iframe" :src="link" style="width: 100%; height: 100%; border: none" />
+  </div>
+</template>
+<script lang="ts" setup>
+import showSnackbar from "@comp/func/snackbar.js";
+import takumiReq from "@req/takumiReq.js";
+import useUserStore from "@store/user.js";
+import { storeToRefs } from "pinia";
+import { onMounted, ref, shallowRef, watch } from "vue";
+
+/**
+ * 卡池类型-ID映射
+ * @remarks
+ * 目前缺失集录&新手池
+ * TODO: 动态获取当前卡池类型&ID映射
+ */
+const GachaIdMap: Record<string, string> = {
+  "200": "34ff1a235049182fd199d285110e3e7d292c50cd", // 常驻
+  "301": "182e725d99b742b14839117650d3e79628cc6221", //角色活动
+  "302": "8ff7a7d42bea79b0d54e92fdb58a20f971490372", // 武器活动
+  "400": "bb0486115a7e7c4bd2994135f7d212014b17173b", // 角色活动-2
+  "1000": "f3f5090a8ec0b28f15805c9969aa6c4ec357", // 千星奇域常驻
+  "20011": "a8d0a985efb4ed61eb2e73a86a57237bd116", // 千星奇域角色活动-男
+  "20021": "57016dec6b768231ba1342c01935417a799b", // 千星奇域角色活动-女
+};
+
+type GroTabKey = keyof typeof GachaIdMap;
+type GroTab = { label: string; value: string; beyond?: boolean };
+
+const { cookie, account } = storeToRefs(useUserStore());
+const authkey = ref<string>("");
+const link = ref<string>("");
+const poolTab = ref<GroTabKey>("200");
+const tabList = shallowRef<ReadonlyArray<GroTab>>([
+  { label: "常驻祈愿", value: "200" },
+  { label: "角色活动祈愿", value: "301" },
+  { label: "武器活动祈愿", value: "302" },
+  { label: "角色活动祈愿-2", value: "400" },
+  { label: "常驻颂愿", value: "1000", beyond: true },
+  { label: "活动颂愿-男", value: "20011", beyond: true },
+  { label: "活动颂愿-女", value: "20021", beyond: true },
+]);
+
+onMounted(async () => {
+  link.value = await getUrl();
+});
+
+watch(
+  () => poolTab.value,
+  async () => {
+    link.value = await getUrl();
+  },
+);
+
+async function getUrl(): Promise<string> {
+  const path = "https://webstatic.mihoyo.com/hk4e/event/e20190909gacha-v3/index.html";
+  const pathB = "https://webstatic.mihoyo.com/hk4e/event/e20250716gacha/index.html";
+  const pathF = poolTab.value.length < 4 ? path : pathB;
+  if (authkey.value === "") await refreshAuthkey();
+  const param: Record<string, string> = {
+    win_mode: "fullscreen",
+    no_joypad_close: "1",
+    authkey_ver: "1",
+    sign_type: "2",
+    auth_appid: "webview_gacha",
+    gacha_id: GachaIdMap[poolTab.value],
+    timestamp: Math.floor(Date.now() / 1000).toString(),
+    lang: "zh-cn",
+    device_type: "pc",
+    region: account.value.region,
+    authkey: authkey.value,
+    game_biz: account.value.gameBiz,
+  };
+  const targetLink = new URL(pathF);
+  for (const key in param) {
+    targetLink.searchParams.append(key, param[key]);
+  }
+  return targetLink.toString();
+}
+
+async function refreshAuthkey(): Promise<void> {
+  if (!cookie.value || !account.value) {
+    return;
+  }
+  const authkeyRes = await takumiReq.bind.authKey(cookie.value, account.value);
+  if (typeof authkeyRes === "string") {
+    authkey.value = authkeyRes;
+  } else {
+    showSnackbar.error("获取authkey失败");
+    return;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.gro-iframe-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gro-ic-tabs {
+  height: 100%;
+
+  img {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+  }
+}
+
+.gro-ic-window {
+  height: 100%;
+  flex: 1;
+}
+</style>

src/components/userGacha/gro-overview.vue

@@ -12,22 +12,22 @@ import { computed, ref, watch } from "vue";
 
 import GroDataView from "./gro-data-view.vue";
 
-type GachaOverviewProps = { modelValue: Array<TGApp.Sqlite.GachaRecords.SingleTable> };
+type GachaOverviewProps = { modelValue: Array<TGApp.Sqlite.GachaRecords.TableGacha> };
 
 const props = defineProps<GachaOverviewProps>();
-const newData = computed<Array<TGApp.Sqlite.GachaRecords.SingleTable>>(() =>
+const newData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() =>
   props.modelValue.filter((item) => item.uigfType === "100"),
 );
-const normalData = computed<Array<TGApp.Sqlite.GachaRecords.SingleTable>>(() =>
+const normalData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() =>
   props.modelValue.filter((item) => item.uigfType === "200"),
 );
-const avatarData = computed<Array<TGApp.Sqlite.GachaRecords.SingleTable>>(() =>
+const avatarData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() =>
   props.modelValue.filter((item) => item.uigfType === "301"),
 );
-const weaponData = computed<Array<TGApp.Sqlite.GachaRecords.SingleTable>>(() =>
+const weaponData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() =>
   props.modelValue.filter((item) => item.uigfType === "302"),
 );
-const mixData = computed<Array<TGApp.Sqlite.GachaRecords.SingleTable>>(() =>
+const mixData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() =>
   props.modelValue.filter((item) => item.uigfType === "500"),
 );
 
@@ -56,7 +56,7 @@ watch(
 .gro-o-container {
   display: grid;
   height: 100%;
-  grid-column-gap: 8px;
+  column-gap: 8px;
   grid-template-columns: v-bind(cnCols); /* stylelint-disable-line value-keyword-case */
 }
 </style>

src/components/userGacha/gro-table.vue

@@ -19,7 +19,7 @@
   </v-data-table>
 </template>
 <script lang="ts" setup>
-type GroTableProps = { modelValue: Array<TGApp.Sqlite.GachaRecords.SingleTable> };
+type GroTableProps = { modelValue: Array<TGApp.Sqlite.GachaRecords.TableGacha> };
 
 const props = defineProps<GroTableProps>();
 

src/components/userGacha/ugo-uid.vue

@@ -161,7 +161,7 @@ async function handleExportData(): Promise<void> {
   data.value = tmpData;
 }
 
-function parseDataRaw(data: TGApp.Sqlite.GachaRecords.SingleTable[]): UgoUidItem {
+function parseDataRaw(data: TGApp.Sqlite.GachaRecords.TableGacha[]): UgoUidItem {
   const timeList = data.map((item) => new Date(item.time).getTime());
   return {
     uid: data[0].uid,

src/pages/User/Gacha.vue

@@ -40,10 +40,7 @@
       <v-tab value="echarts">图表概览</v-tab>
       <v-tab value="table">数据表格</v-tab>
       <v-tab value="history">过往祈愿</v-tab>
-      <v-tab value="beyond" v-if="isLogin">
-        <img src="/icon/nation/千星奇域.webp" alt="beyond" />
-        千星奇域
-      </v-tab>
+      <v-tab value="iframe" v-if="isLogin">祈愿详情</v-tab>
     </v-tabs>
     <v-window v-model="tab" class="gacha-window">
       <v-window-item value="overview" class="gacha-window-item">
@@ -58,8 +55,8 @@
       <v-window-item value="history" class="gacha-window-item">
         <gro-history />
       </v-window-item>
-      <v-window-item value="beyond" class="gacha-window-item">
-        <gacha-b />
+      <v-window-item value="iframe" class="gacha-window-item">
+        <gro-iframe />
       </v-window-item>
     </v-window>
   </div>
@@ -71,6 +68,7 @@ import showLoading from "@comp/func/loading.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import GroEcharts from "@comp/userGacha/gro-echarts.vue";
 import GroHistory from "@comp/userGacha/gro-history.vue";
+import GroIframe from "@comp/userGacha/gro-iframe.vue";
 import GroOverview from "@comp/userGacha/gro-overview.vue";
 import GroTable from "@comp/userGacha/gro-table.vue";
 import UgoUid from "@comp/userGacha/ugo-uid.vue";
@@ -87,7 +85,6 @@ import { storeToRefs } from "pinia";
 import { onMounted, ref, shallowRef, watch } from "vue";
 
 import { AppCharacterData, AppWeaponData } from "@/data/index.js";
-import GachaB from "@/pages/User/GachaB.vue";
 
 const { isLogin } = storeToRefs(useAppStore());
 const { account, cookie } = storeToRefs(useUserStore());
@@ -98,7 +95,7 @@ const tab = ref<string>("overview");
 const ovShow = ref<boolean>(false);
 const ovMode = ref<"export" | "import">("import");
 const selectItem = shallowRef<Array<string>>([]);
-const gachaListCur = shallowRef<Array<TGApp.Sqlite.GachaRecords.SingleTable>>([]);
+const gachaListCur = shallowRef<Array<TGApp.Sqlite.GachaRecords.TableGacha>>([]);
 
 onMounted(async () => {
   await showLoading.start("正在加载祈愿数据", "正在获取祈愿 UID 列表");

src/pages/User/GachaB.vue

@@ -10,6 +10,13 @@ import { storeToRefs } from "pinia";
 import { onMounted, ref } from "vue";
 
 const { cookie, account } = storeToRefs(useUserStore());
+
+const gachaIdMap: Record<string, string> = {
+  "1000": "f3f5090a8ec0b28f15805c9969aa6c4ec357", // 常驻
+  "20011": "a8d0a985efb4ed61eb2e73a86a57237bd116", // 角色活动-男
+  "20021": "57016dec6b768231ba1342c01935417a799b", // 角色活动-女
+};
+
 const authkey = ref<string>("");
 const link = ref<string>("");
 
@@ -39,7 +46,7 @@ async function getUrl(): Promise<string> {
     authkey_ver: "1",
     sign_type: "2",
     auth_appid: "webview_gacha",
-    gacha_id: "57016dec6b768231ba1342c01935417a799b",
+    gacha_id: gachaIdMap["20011"],
     timestamp: Math.floor(Date.now() / 1000).toString(),
     lang: "zh-cn",
     device_type: "pc",

src/plugins/Sqlite/modules/userGacha.ts

@@ -115,9 +115,9 @@ async function getGachaCheck(uid: string, type: string): Promise<string | undefi
  * @description 获取用户祈愿记录
  * @since Beta v0.4.7
  * @param {string} uid - UID
- * @return {Promise<TGApp.Sqlite.GachaRecords.SingleTable[]>}
+ * @return {Promise<TGApp.Sqlite.GachaRecords.TableGacha[]>}
  */
-async function getGachaRecords(uid: string): Promise<TGApp.Sqlite.GachaRecords.SingleTable[]> {
+async function getGachaRecords(uid: string): Promise<TGApp.Sqlite.GachaRecords.TableGacha[]> {
   const db = await TGSqlite.getDB();
   return await db.select("SELECT * FROM GachaRecords WHERE uid = ?;", [uid]);
 }
@@ -132,9 +132,9 @@ async function getGachaRecords(uid: string): Promise<TGApp.Sqlite.GachaRecords.S
 async function getGachaRecordsGroupByDate(
   uid: string,
   type?: string,
-): Promise<Record<string, TGApp.Sqlite.GachaRecords.SingleTable[]>> {
+): Promise<Record<string, TGApp.Sqlite.GachaRecords.TableGacha[]>> {
   const db = await TGSqlite.getDB();
-  type resType = Array<TGApp.Sqlite.GachaRecords.SingleTable>;
+  type resType = Array<TGApp.Sqlite.GachaRecords.TableGacha>;
   let res: resType;
   if (type) {
     res = await db.select<resType>(
@@ -146,7 +146,7 @@ async function getGachaRecordsGroupByDate(
       uid,
     ]);
   }
-  const map: Record<string, TGApp.Sqlite.GachaRecords.SingleTable[]> = {};
+  const map: Record<string, TGApp.Sqlite.GachaRecords.TableGacha[]> = {};
   for (const item of res) {
     // key 是 yyyy-MM-dd hh:mm:ss，按照日期分组
     const key = item.time.split(" ")[0];

src/types/Sqlite/GachaRecords.d.ts

@@ -1,39 +1,97 @@
 /**
- * @file types Sqlite GachaRecords.d.ts
- * @description 数据库抽卡记录相关类型定义文件
- * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.3
+ * 数据库抽卡记录相关类型定义文件
+ * @since Beta v0.8.4
  */
 
 declare namespace TGApp.Sqlite.GachaRecords {
   /**
-   * @description 数据库-抽卡记录表
+   * 原神抽卡记录表类型定义
    * @since Alpha v0.2.3
-   * @interface SingleTable
-   * @property {string} id - 抽卡记录 ID
-   * @property {string} uid - UID
-   * @property {string} gachaType - 抽卡类型
-   * @property {string} uigfType - UIGF 类型
-   * @property {string} time - 抽卡时间
-   * @property {string} itemId - 抽卡物品 ID
-   * @property {string} name - 抽卡物品名称
-   * @property {string} type - 抽卡物品类型
-   * @property {string} rank - 抽卡物品星级
-   * @property {string} count - 抽卡物品数量
-   * @property {string} updated - 数据库更新时间
-   * @return SingleTable
    */
-  interface SingleTable {
+  type TableGacha = {
+    /** 抽卡记录 ID */
     id: string;
+    /** UID */
     uid: string;
+    /** 抽卡类型 */
     gachaType: string;
+    /** UIGF 类型 */
     uigfType: string;
+    /**
+     * 抽卡时间
+     * @remarks
+     * 从接口获取的数据均为 UTC+8 时间
+     * 从外部导入数据也转换为 UTC+8 时间
+     */
     time: string;
+    /** 抽卡物品 ID */
     itemId: string;
+    /**
+     * 抽卡物品名称
+     * @remarks
+     * 从接口获取的数据均为中文名称
+     * 从外部导入数据从本地字典中获取中文名称
+     */
     name: string;
+    /** 抽卡物品类型 */
     type: string;
+    /** 抽卡物品星级 */
     rank: string;
+    /**
+     * 抽卡物品数量
+     * @remarks 恒为 "1"
+     */
     count: string;
+    /** 数据库更新时间 */
     updated: string;
-  }
+  };
+
+  /**
+   * 千星奇域抽卡记录表类型定义
+   * @since Beta v0.8.4
+   */
+  type TableGachaB = {
+    /** 抽卡记录 ID */
+    id: string;
+    /** UID */
+    uid: string;
+    /** 服务器区域 */
+    region: string;
+    /** 排期 ID */
+    scheduleId: string;
+    /**
+     * 抽卡类型
+     * @remarks
+     * 1000-常驻池
+     * 2000-活动池
+     */
+    gachaType: string;
+    /** 抽卡时间 */
+    time: string;
+    /** 抽卡物品 ID */
+    itemId: string;
+    /**
+     * 抽卡物品名称
+     * @remarks
+     * 从接口获取到的为中文名称
+     * 从外部导入数据需要转换为中文名称
+     */
+    name: string;
+    /**
+     * 抽卡物品类型
+     * @remarks
+     * 从接口获取到的为中文名称
+     * 从外部导入数据需要转换为中文名称
+     */
+    type: string;
+    /** 抽卡物品星级 */
+    rank: string;
+    /**
+     * 是否是 UP 物品
+     * @remarks 0-否，1-是
+     */
+    isUp: string;
+    /** 数据库更新时间 */
+    updated: string;
+  };
 }

src/utils/UIGF.ts

@@ -82,12 +82,12 @@ export async function getUigf4Header(): Promise<TGApp.Plugins.UIGF.Info4> {
 /**
  * @description 数据转换-数据库到 UIGF
  * @since Beta v0.7.5
- * @param {TGApp.Sqlite.GachaRecords.SingleTable[]} data - 数据库数据
+ * @param {TGApp.Sqlite.GachaRecords.TableGacha[]} data - 数据库数据
  * @param {number} timezone - 时区
  * @returns {TGApp.Plugins.UIGF.GachaItem[]} UIGF 数据
  */
 function convertDataToUigf(
-  data: TGApp.Sqlite.GachaRecords.SingleTable[],
+  data: TGApp.Sqlite.GachaRecords.TableGacha[],
   timezone: number,
 ): TGApp.Plugins.UIGF.GachaItem[] {
   return data.map((gacha) => {
@@ -191,13 +191,13 @@ export async function readUigf4Data(userPath: string): Promise<TGApp.Plugins.UIG
  * @description 导出 UIGF 数据
  * @since Beta v0.7.5
  * @param {string} uid - UID
- * @param {TGApp.Sqlite.GachaRecords.SingleTable[]} gachaList - 祈愿列表
+ * @param {TGApp.Sqlite.GachaRecords.TableGacha[]} gachaList - 祈愿列表
  * @param {string} savePath - 保存路径
  * @returns {Promise<void>}
  */
 export async function exportUigfData(
   uid: string,
-  gachaList: TGApp.Sqlite.GachaRecords.SingleTable[],
+  gachaList: TGApp.Sqlite.GachaRecords.TableGacha[],
   savePath?: string,
 ): Promise<void> {
   const timezone = getUigfTimeZone(uid);