From 35851532a5926ee6d6b494073e7f643b4acdbece Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Mon, 22 Dec 2025 15:38:22 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E9=87=8D=E6=9E=84xml?=
 =?UTF-8?q?=E8=A7=A3=E6=9E=90&=E5=A4=84=E7=90=86=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81scene=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   2 +-
 src/components/pageArchive/pao-birth-card.vue | 179 +++++++-----------
 src/types/Archive/Birth.d.ts                  |   4 +-
 src/utils/birthParser.ts                      |  47 +++--
 4 files changed, 107 insertions(+), 125 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60a73b5b..f6aac623 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,4 +35,4 @@ Update: 2025-12-20
 - 💄 多页面顶部样式调整，更为统一
 - 💄 首页近期活动组件奖励支持查看角色/武器奖励
 - 💄 首页近期活动组件奖励材料奖励支持查看已有数量
-- 💄 材料图鉴 UI 改版
\ No newline at end of file
+- 💄 材料图鉴 UI 改版
diff --git a/src/components/pageArchive/pao-birth-card.vue b/src/components/pageArchive/pao-birth-card.vue
index 8481b4a5..327b85f5 100644
--- a/src/components/pageArchive/pao-birth-card.vue
+++ b/src/components/pageArchive/pao-birth-card.vue
@@ -1,37 +1,53 @@
-<!-- 留影叙佳期浮窗 TODO 左右SLOT -->
+<!-- 留影叙佳期浮窗 -->
 <template>
   <TOverlay v-model="visible" blur-val="5px">
     <div class="pao-bc-container">
       <slot name="left"></slot>
-      <div class="pao-bc-main">
-        <div v-if="props.data" class="pao-bc-cover">
+      <div v-if="props.data" class="pao-bc-main">
+        <div class="pao-bc-cover">
+          <TMiImg v-if="showText" :ori="true" :src="curScene.bg" alt="顶部图像" />
           <TMiImg
-            v-if="props.choice"
+            v-else-if="props.choice"
             :ori="true"
             :src="props.data.take_picture[1]"
             alt="顶部图像"
           />
           <TMiImg v-else :ori="true" :src="props.data.take_picture[0]" alt="顶部图像" />
         </div>
-        <div v-show="showText" class="pao-bc-comments">
-          <div v-for="(item, index) in textParse" :key="index" class="pao-bc-comment">
-            <div v-if="item.icon" :title="item.name" class="pao-bcc-icon">
-              <TMiImg :ori="true" :src="item.icon" alt="对白头像" />
+        <div v-if="showText" class="pao-bc-comments">
+          <!--          <div v-for="(scene, idx) in birthScenes" :key="idx" class="pao-bc-scene">-->
+          <div v-for="(item, index) in curScene.comments" :key="index" class="pao-bc-comment">
+            <div v-if="item.img" :title="item.role" class="pao-bcc-icon">
+              <template v-if="item.role === 'player'">
+                <TMiImg
+                  :ori="true"
+                  :src="props.choice ? item.img : (item.img2 ?? '')"
+                  alt="对白头像"
+                />
+              </template>
+              <TMiImg v-else :ori="true" :src="item.img" alt="对白头像" />
             </div>
-            <div v-else-if="item.name !== '未知'" class="pao-bcc-name">
-              {{ item.name }}
+            <div v-else class="pao-bcc-name">
+              {{ item.role }}
             </div>
-            <div :class="item.icon ? 'pao-bcc-text' : 'pao-bcc-quote'">
+            <div :class="item.img ? 'pao-bcc-text' : 'pao-bcc-quote'">
               {{ item.text }}
             </div>
           </div>
+          <!--          </div>-->
         </div>
         <div class="pao-bc-top-tools">
           <v-icon title="复制到剪贴板" @click="onCopy">mdi-content-copy</v-icon>
           <v-icon title="下载到本地" @click="onDownload">mdi-download</v-icon>
+          <template v-if="showText && birthScenes && birthScenes.length > 0">
+            <v-icon title="上一幕" @click="switchScene(false)">mdi-arrow-left</v-icon>
+          </template>
           <v-icon :title="showText ? '隐藏对白' : '显示对白'" @click="showComments()">
             {{ showText ? "mdi-eye-off" : "mdi-eye" }}
           </v-icon>
+          <template v-if="showText && birthScenes && birthScenes.length > 0">
+            <v-icon title="下一幕" @click="switchScene(true)">mdi-arrow-right</v-icon>
+          </template>
         </div>
       </div>
       <slot name="right"></slot>
@@ -43,42 +59,40 @@ import TMiImg from "@comp/app/t-mi-img.vue";
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import { fetch } from "@tauri-apps/plugin-http";
-import TGLogger from "@utils/TGLogger.js";
+import { parseBirthGal, parseBirthSrc } from "@utils/birthParser.js";
 import { copyToClipboard, getImageBuffer, saveCanvasImg } from "@utils/TGShare.js";
 import { bytesToSize } from "@utils/toolFunc.js";
-import { onMounted, ref, shallowRef, watch } from "vue";
-import { xml2json } from "xml-js";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
 
 type ToArcBirthProps = { data?: TGApp.Archive.Birth.DrawItem; choice: boolean };
-type XmlKeyMap = { id: string; rel: string; group?: string; icon: string };
-type XmlTextList = { chara: string; img: string; text: string };
-type XmlTextParse = { name: string; icon?: string; text: string };
 
 const props = defineProps<ToArcBirthProps>();
 const visible = defineModel<boolean>();
 const showText = ref<boolean>(false);
+const isLoad = ref<boolean>(false);
+const sceneIdx = ref<number>(0);
 const buffer = shallowRef<ArrayBuffer | null>(null);
-const textParse = shallowRef<Array<XmlTextParse>>([]);
+const birthSrc = shallowRef<TGApp.Archive.Birth.GalSrcFull | null>(null);
+const birthScenes = shallowRef<TGApp.Archive.Birth.GalScenes>([]);
+const curScene = computed<TGApp.Archive.Birth.GalScriptScene>(
+  () => birthScenes.value![sceneIdx.value],
+);
 
 onMounted(async () => await clearData());
 watch(
-  () => [props.data, props.choice],
+  () => props.data,
   async () => await clearData(),
 );
 watch(
   () => showText.value,
   async () => {
-    if (showText.value) await loadText();
-    else textParse.value = [];
+    if (showText.value && !isLoad.value) await loadText();
   },
 );
 
 async function clearData(): Promise<void> {
   buffer.value = null;
-  if (showText.value) {
-    textParse.value = [];
-    await loadText();
-  }
+  if (showText.value) await loadText();
 }
 
 async function onCopy(): Promise<void> {
@@ -103,91 +117,40 @@ function showComments(): void {
   showText.value = !showText.value;
 }
 
+function switchScene(isNext: boolean): void {
+  if (sceneIdx.value < birthScenes.value.length - 1 && isNext) {
+    sceneIdx.value++;
+  } else if (sceneIdx.value > 0 && !isNext) {
+    sceneIdx.value--;
+  }
+}
+
 async function loadText(): Promise<void> {
   if (!props.data) return;
-  if (textParse.value.length > 0) {
-    showText.value = !showText.value;
-    return;
-  }
-  const resSource: unknown = await parseXml(props.data.gal_resource);
-  if (resSource === false) {
-    showSnackbar.warn("对白数据加载失败");
-    return;
-  }
-  const keyMap = getKeyMap(resSource);
-  const resXml: unknown = await parseXml(props.data.gal_xml);
-  console.log(resXml);
-  const textList = getTextList(resXml);
-  console.log(textList);
-  textParse.value = textList.map((item) => {
-    const key = keyMap.find((keyItem) => keyItem.id === item.img);
-    if (!key) return { name: "未知", text: item.text };
-    return { name: key.group ?? key.id, text: item.text, icon: key.icon };
+  birthSrc.value = null;
+  birthScenes.value = [];
+  birthSrc.value = await loadXmlSrc(props.data.gal_resource);
+  birthScenes.value = await loadXmlGal(props.data.gal_xml);
+}
+
+async function loadXmlSrc(link: string): Promise<TGApp.Archive.Birth.GalSrcFull> {
+  console.log("srcLink", link);
+  const srcResp = await fetch(link, {
+    method: "GET",
+    headers: { "Content-Type": "text/xml" },
   });
+  const srcRes = await srcResp.text();
+  return parseBirthSrc(new DOMParser().parseFromString(srcRes, "text/xml"));
 }
 
-function getKeyMap(resSource: unknown): Array<XmlKeyMap> {
-  const res: Array<XmlKeyMap> = [];
-  if (!resSource || typeof resSource !== "object") return res;
-  if (!("elements" in resSource) || !Array.isArray(resSource["elements"])) return res;
-  const arr1 = resSource.elements;
-  if (arr1.length === 0 || !("elements" in arr1[0]) || !Array.isArray(arr1[0].elements)) return res;
-  const arr2 = arr1[0].elements;
-  if (arr2.length === 0 || !("elements" in arr2[0]) || !Array.isArray(arr2[0].elements)) return res;
-  const arr3 = arr2[0].elements;
-  for (const item of arr3) {
-    if (!("name" in item)) continue;
-    if (!("attributes" in item)) continue;
-    const attr = item.attributes;
-    if (!("id" in attr) || !("rel" in attr) || !("group" in attr) || !("src" in attr)) continue;
-    if (item.name !== "chara") continue;
-    res.push({ id: attr.id, rel: attr.rel, group: attr.group, icon: attr.src });
-  }
-  return res;
-}
-
-// TODO: 重构文本解析||调整渲染方式
-function getTextList(resXml: unknown): Array<XmlTextList> {
-  const res: Array<XmlTextList> = [];
-  if (!resXml || typeof resXml !== "object") return res;
-  if (!("elements" in resXml) || !Array.isArray(resXml["elements"])) return res;
-  const arr1 = resXml.elements;
-  if (arr1.length === 0 || !("elements" in arr1[0]) || !Array.isArray(arr1[0].elements)) return res;
-  const arr2 = arr1[0].elements;
-  if (arr2.length === 0 || !("elements" in arr2[0]) || !Array.isArray(arr2[0].elements)) return res;
-  const arr3 = arr2[0].elements;
-  if (arr3.length === 0 || !("elements" in arr3[0]) || !Array.isArray(arr3[0].elements)) return res;
-  const arr4 = arr3[0].elements;
-  for (const item of arr4) {
-    if (!("name" in item)) continue;
-    if (!("attributes" in item)) continue;
-    if (!("elements" in item) || !Array.isArray(item.elements)) continue;
-    const attr = item.attributes;
-    if (!("chara" in attr) || !("img" in attr)) continue;
-    if (item.name !== "simple_dialog") continue;
-    const img = props.choice ? attr.img : attr.img.replace("aether", "lumine");
-    let findText = "";
-    const arr5 = item.elements[0].elements;
-    if (arr5 && arr5.length > 0 && arr5[0].text !== "") findText = arr5[0].text;
-    else findText = item.elements[0].text;
-    res.push({ chara: attr.chara, img: img, text: findText });
-  }
-  return res;
-}
-
-async function parseXml(link: string): Promise<false | unknown> {
-  try {
-    const response = await fetch(link, { method: "GET" });
-    const data = await response.arrayBuffer();
-    return JSON.parse(xml2json(new TextDecoder("utf-8").decode(data)));
-  } catch (error) {
-    if (error instanceof Error) {
-      await TGLogger.Error(`[to-arcBirth] parseXml: ${error.message}`);
-    } else {
-      await TGLogger.Error(`[to-arcBirth] parseXml: 未知错误-${error}`);
-    }
-    return false;
-  }
+async function loadXmlGal(link: string): Promise<TGApp.Archive.Birth.GalScenes> {
+  console.log("sceneLink", link);
+  const galResp = await fetch(link, {
+    method: "GET",
+    headers: { "Content-Type": "text/xml" },
+  });
+  const galRes = await galResp.text();
+  return parseBirthGal(new DOMParser().parseFromString(galRes, "text/xml"), birthSrc.value!);
 }
 </script>
 <style lang="css" scoped>
@@ -293,11 +256,11 @@ async function parseXml(link: string): Promise<false | unknown> {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 5px;
+  padding: 4px;
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   background-color: var(--common-shadow-t-2);
-  border-bottom-right-radius: 5px;
-  border-top-left-radius: 5px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 4px;
 }
 </style>
diff --git a/src/types/Archive/Birth.d.ts b/src/types/Archive/Birth.d.ts
index 6340a275..1b5d2b77 100644
--- a/src/types/Archive/Birth.d.ts
+++ b/src/types/Archive/Birth.d.ts
@@ -156,7 +156,7 @@ declare namespace TGApp.Archive.Birth {
     /** 前一个场景ID */
     prev?: string;
     /** 场景脚本 */
-    scripts: Array<GalDialog>;
+    comments: Array<GalDialog>;
   };
 
   /**
@@ -170,6 +170,8 @@ declare namespace TGApp.Archive.Birth {
     role?: string;
     /** 图片名称 */
     img?: string;
+    /** 图片2 */
+    img2?: string;
     /** 位置 */
     pos?: string;
     /** 对话内容 */
diff --git a/src/utils/birthParser.ts b/src/utils/birthParser.ts
index fea9cd1d..90abcb7c 100644
--- a/src/utils/birthParser.ts
+++ b/src/utils/birthParser.ts
@@ -18,15 +18,13 @@ export function parseBirthSrc(data: Document): TGApp.Archive.Birth.GalSrcFull {
       const child = resElements.children.item(ci);
       if (child === null) continue;
       const tmpResItem: TGApp.Archive.Birth.GalSrcRes = {
-        id: child.getAttribute("id") ?? "",
+        id: child.id ?? "",
         group: child.getAttribute("group") ?? "",
         type: child.tagName,
         rel: child.getAttribute("rel") ?? "",
         src: child.getAttribute("src") ?? "",
       };
-      // 检测是否都是空
-      const isNotEmpty = Object.values(tmpResItem).every((v) => v !== "");
-      if (isNotEmpty) tmpRes.push(tmpResItem);
+      tmpRes.push(tmpResItem);
     }
     res.resource = tmpRes;
   }
@@ -39,9 +37,7 @@ export function parseBirthSrc(data: Document): TGApp.Archive.Birth.GalSrcFull {
         name: child.getAttribute("name") ?? "",
         key: child.getAttribute("key") ?? undefined,
       };
-      // 检测是否都是空
-      const isNotEmpty = Object.values(tmpRoleItem).every((v) => v !== "");
-      if (isNotEmpty) tmpRoles.push(tmpRoleItem);
+      tmpRoles.push(tmpRoleItem);
     }
     res.roles = tmpRoles;
   }
@@ -51,14 +47,19 @@ export function parseBirthSrc(data: Document): TGApp.Archive.Birth.GalSrcFull {
 /**
  * 解析Gal数据
  * @since Beta v0.9.1
- * @todo 结合资源数据，补全图片路径
+ * @param {Document} data - XML数据
+ * @param {TGApp.Archive.Birth.GalSrcFull} src - 解析的资源数据
+ * @return {TGApp.Archive.Birth.GalScenes}
  */
-export function parseBirthGal(data: Document): TGApp.Archive.Birth.GalScenes {
+export function parseBirthGal(
+  data: Document,
+  src: TGApp.Archive.Birth.GalSrcFull,
+): TGApp.Archive.Birth.GalScenes {
   const scenes: TGApp.Archive.Birth.GalScenes = [];
   const sceneElements = data.querySelectorAll("scene");
   if (sceneElements.length > 1) console.log(sceneElements);
   for (let si = 0; si < sceneElements.length; si++) {
-    const sceneData = parseBirthScenes(sceneElements.item(si));
+    const sceneData = parseBirthScenes(sceneElements.item(si), src);
     scenes.push(sceneData);
   }
   return scenes;
@@ -67,30 +68,46 @@ export function parseBirthGal(data: Document): TGApp.Archive.Birth.GalScenes {
 /**
  * 解析场景数据
  * @since Beta v0.9.1
+ * @param {Document} data - XML数据
+ * @param {TGApp.Archive.Birth.GalSrcFull} src - 解析的资源数据
+ * @return {TGApp.Archive.Birth.GalScriptScene}
  */
-function parseBirthScenes(data: Element): TGApp.Archive.Birth.GalScriptScene {
+function parseBirthScenes(
+  data: Element,
+  src: TGApp.Archive.Birth.GalSrcFull,
+): TGApp.Archive.Birth.GalScriptScene {
   const res: TGApp.Archive.Birth.GalScriptScene = {
     id: data.getAttribute("id") ?? "",
     title: data.getAttribute("title") ?? "",
     prev: data.getAttribute("prev") ?? undefined,
     bg: "",
-    scripts: [],
+    comments: [],
   };
   const bgElement = data.querySelector("bg");
-  if (bgElement !== null) res.bg = bgElement.getAttribute("img") ?? "";
+  if (bgElement !== null) {
+    const bgKey = bgElement.getAttribute("img") ?? "";
+    res.bg = src.resource.find((i) => i.id === bgKey)?.src ?? "";
+  }
   const dialogElements = data.querySelectorAll("simple_dialog");
   const tmpScripts: TGApp.Archive.Birth.GalDialog[] = [];
   for (let di = 0; di < dialogElements.length; di++) {
     const dialogEl = dialogElements.item(di);
+    const imgKey = dialogEl.getAttribute("img") ?? "";
+    let img2Src = "";
+    const imgSrc = src.resource.find((i) => i.id === imgKey)?.src ?? "";
+    if (imgKey.startsWith("aether")) {
+      img2Src = src.resource.find((i) => i.id === imgKey.replace("aether", "lumine"))?.src ?? "";
+    }
     const scriptItem: TGApp.Archive.Birth.GalDialog = {
       key: dialogEl.getAttribute("key") ?? "",
       role: dialogEl.getAttribute("chara") ?? undefined,
-      img: dialogEl.getAttribute("img") ?? undefined,
+      img: imgSrc,
+      img2: img2Src,
       pos: dialogEl.getAttribute("pos") ?? undefined,
       text: dialogEl.textContent ?? "",
     };
     tmpScripts.push(scriptItem);
   }
-  res.scripts = tmpScripts;
+  res.comments = tmpScripts;
   return res;
 }