From 26d7df66d3956ae58c61751d0386693ee39ac2fc Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Sun, 21 Dec 2025 21:40:11 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E4=BF=AE=E6=AD=A3=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=EF=BC=8C=E8=B0=83=E6=95=B4=E9=A6=96=E9=A1=B5=E7=94=9F?=
 =?UTF-8?q?=E6=97=A5=E7=BB=84=E4=BB=B6=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pageHome/ph-calendar-birth.vue | 154 +++++++++++-------
 src/types/App/Material.d.ts                   |   6 +-
 2 files changed, 95 insertions(+), 65 deletions(-)

diff --git a/src/components/pageHome/ph-calendar-birth.vue b/src/components/pageHome/ph-calendar-birth.vue
index 61c612cf..5f726988 100644
--- a/src/components/pageHome/ph-calendar-birth.vue
+++ b/src/components/pageHome/ph-calendar-birth.vue
@@ -1,38 +1,41 @@
+<!-- 首页素材日历-角色生日组件 -->
 <template>
-  <div class="tcb-container">
-    <div class="tcb-top-none" v-if="!isBirthday">
-      <img src="/source/UI/empty.webp" alt="empty" />
+  <div class="pcb-container">
+    <div v-if="!isBirthday" class="pcb-top-none">
+      <img alt="empty" class="pcb-top-empty" src="/source/UI/empty.webp" />
       <span>今天没有角色过生日哦~</span>
     </div>
-    <div class="tcb-top-active" v-else>
+    <div v-else class="pcb-top-active">
+      <img alt="empty" class="pcb-news" src="/source/UI/act_birthday.webp" @click="toNews()" />
       <span>今天是</span>
-      <div v-for="i in cur" :key="i.role_id">
-        <TMiImg
-          :src="i.head_icon"
-          :alt="i.name"
-          :title="i.name"
-          :ori="true"
-          v-if="i.head_icon.startsWith('http')"
-        />
-        <img @click="toBirth(true)" :src="i.head_icon" alt="empty" class="tcb-cur" v-else />
-      </div>
-      <span>的生日哦~</span>
-      <img @click="toBirth(true)" src="/source/UI/act_birthday.webp" alt="empty" class="active" />
-    </div>
-    <div>即将到来：{{ next[0]?.role_birthday }}</div>
-    <div v-for="i in next" :key="i.role_id" class="tcb-item">
       <TMiImg
-        v-if="i.head_icon.startsWith('http')"
-        :src="i.head_icon"
+        v-for="i in cur"
+        :key="i.role_id"
         :alt="i.name"
-        @click="toBirth(i)"
-        :title="i.name"
         :ori="true"
+        :src="i.head_icon"
+        :title="i.name"
+        class="pcb-act-icon"
+        @click="toBirth(i)"
       />
-      <img v-else :src="i.head_icon" alt="empty" @click="toBirth(i)" />
-      <div class="tcb-item-info">
-        <span>{{ i.name }} 所属：{{ i.belong === "" ? "未知" : i.belong }}</span>
-        <span>{{ parseDesc(i.introduce) }}</span>
+      <span>的生日哦~</span>
+    </div>
+    <div class="pcb-next-title">即将到来：{{ next[0]?.role_birthday }}</div>
+    <div v-for="i in next" :key="i.role_id" class="pcb-item">
+      <TMiImg
+        :alt="i.name"
+        :ori="true"
+        :src="i.head_icon"
+        :title="i.name"
+        class="pcb-i-icon"
+        @click="toBirth(i)"
+      />
+      <div class="pcb-item-info">
+        <span class="pcb-item-title">
+          <span>{{ i.name }}</span>
+          <span>所属：{{ i.belong === "" ? "未知" : i.belong }}</span>
+        </span>
+        <span class="pcb-item-desc" v-html="parseHtmlText(i.introduce)" />
       </div>
     </div>
   </div>
@@ -41,10 +44,13 @@
 import TMiImg from "@comp/app/t-mi-img.vue";
 import TSAvatarBirth from "@Sqlm/avatarBirth.js";
 import useAppStore from "@store/app.js";
+import { parseHtmlText } from "@utils/toolFunc.js";
 import { storeToRefs } from "pinia";
 import { onBeforeMount, ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
+import { ArcBirCalendar } from "@/data/index.js";
+
 const router = useRouter();
 const { recentNewsType } = storeToRefs(useAppStore());
 const isBirthday = ref<boolean>(false);
@@ -62,35 +68,35 @@ onBeforeMount(async () => {
   console.log(next.value);
 });
 
-async function toBirth(type: TGApp.Archive.Birth.RoleItem | true): Promise<void> {
+function hasBirthRaw(raw: TGApp.Archive.Birth.CalendarItem): boolean {
+  const monthList = ArcBirCalendar[raw.role_birthday[0]];
+  if (!monthList) return false;
+  const find = monthList.find((i) => i.role_id === raw.role_id);
+  return !!find;
+}
+
+async function toBirth(data: TGApp.Archive.Birth.CalendarItem): Promise<void> {
   let dateStr;
-  if (type === true) {
+  const hasRaw = hasBirthRaw(data);
+  if (hasRaw) {
     const date = new Date();
     const month = date.getMonth() + 1;
     const day = date.getDate();
     dateStr = `${month}/${day}`;
-  } else {
-    dateStr = type.role_birthday;
-  }
-  if (type !== true) {
     await router.push({ name: "留影叙佳期", params: { date: dateStr } });
     return;
   }
-  if (cur.value.length > 0 && !cur.value[0].is_subscribe) {
-    recentNewsType.value = "news";
-    await router.push("/news/2/news");
-    return;
-  }
-  await router.push({ name: "留影叙佳期", params: { date: dateStr } });
+  await router.push({ name: "角色图鉴", params: { id: data.role_id } });
 }
 
-function parseDesc(intro: string): string {
-  const dom = new DOMParser().parseFromString(intro, "text/html");
-  return dom.body.textContent || "";
+async function toNews(): Promise<void> {
+  recentNewsType.value = "news";
+  await router.push({ name: "资讯", params: { gid: 2, type: "news" } });
 }
 </script>
-<style lang="css" scoped>
-.tcb-container {
+<style lang="scss" scoped>
+.pcb-container {
+  position: relative;
   display: flex;
   width: 100%;
   height: 100%;
@@ -105,32 +111,44 @@ function parseDesc(intro: string): string {
   row-gap: 4px;
 }
 
-.tcb-top-none,
-.tcb-top-active {
+.pcb-top-active,
+.pcb-top-none {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  column-gap: 8px;
 }
 
-.tcb-top-none img,
-.tcb-top-active img {
-  width: 40px;
-  height: 40px;
+.pcb-top-empty {
+  position: relative;
+  width: 32px;
+  flex-shrink: 0;
+  aspect-ratio: 1;
 }
 
-.tcb-top-active img.active {
-  margin-left: auto;
+.pcb-news {
+  position: relative;
+  width: 32px;
+  flex-shrink: 0;
+  aspect-ratio: 1;
   cursor: pointer;
 }
 
-.tcb-top-active img.tcb-cur {
-  width: 40px;
-  height: 40px;
+.pcb-act-icon {
+  width: 32px;
+  flex-shrink: 0;
   border-radius: 50%;
-  background: var(--common-shadow-1);
+  aspect-ratio: 1;
+  background: var(--box-bg-2);
+  cursor: pointer;
 }
 
-.tcb-item {
+.pcb-next-title {
+  font-family: var(--font-title);
+}
+
+.pcb-item {
   position: relative;
   display: flex;
   width: 100%;
@@ -140,28 +158,40 @@ function parseDesc(intro: string): string {
   border: 1px solid var(--common-shadow-1);
   border-radius: 4px;
   background: var(--box-bg-2);
+  column-gap: 8px;
 }
 
-.tcb-item img {
+.pcb-i-icon {
+  position: relative;
   height: 80px;
+  flex-shrink: 0;
   border-radius: 50%;
   aspect-ratio: 1;
   background: var(--box-bg-3);
   cursor: pointer;
 }
 
-.tcb-item-info {
+.pcb-item-info {
+  position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  align-items: flex-start;
+  justify-content: flex-start;
+  row-gap: 4px;
 }
 
-.tcb-item-info :first-child {
+.pcb-item-title {
+  position: relative;
+  display: flex;
+  column-gap: 8px;
   font-family: var(--font-title);
   font-size: 20px;
+  line-height: 24px;
 }
 
-.tcb-item-info :last-child {
+.pcb-item-desc {
+  font-size: 14px;
+  line-height: 14px;
   word-break: break-all;
 }
 </style>
diff --git a/src/types/App/Material.d.ts b/src/types/App/Material.d.ts
index a9dd9bd1..908a5440 100644
--- a/src/types/App/Material.d.ts
+++ b/src/types/App/Material.d.ts
@@ -1,6 +1,6 @@
 /**
  * 应用素材日历相关类型定义文件
- * @since Beta v0.9.0
+ * @since Beta v0.9.1
  */
 
 declare namespace TGApp.App.Material {
@@ -51,11 +51,11 @@ declare namespace TGApp.App.Material {
 
   /**
    * 转换来源
-   * @since Beta v0.9.0
+   * @since Beta v0.9.1
    */
   type ConvertSrc = {
     /** 材料ID */
-    id: number;
+    id: string;
     /** 材料名称 */
     name: string;
     /** 材料类型 */