From aca7e491dcf0d24f493e7a665efad1c76ddc4342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Sun, 25 Aug 2024 21:49:30 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B1=20weaponDetail&relicDetail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/userAvatar/tua-dc-relic.vue    | 242 ++++++++++++++++++
 src/components/userAvatar/tua-dc-weapon.vue   | 163 ++++++++++++
 src/components/userAvatar/tua-detail-card.vue | 124 +++++++++
 .../userAvatar/tua-detail-overlay.vue         |  88 +++----
 src/pages/User/Characters.vue                 |   2 +-
 5 files changed, 561 insertions(+), 58 deletions(-)
 create mode 100644 src/components/userAvatar/tua-dc-relic.vue
 create mode 100644 src/components/userAvatar/tua-dc-weapon.vue
 create mode 100644 src/components/userAvatar/tua-detail-card.vue

diff --git a/src/components/userAvatar/tua-dc-relic.vue b/src/components/userAvatar/tua-dc-relic.vue
new file mode 100644
index 00000000..8292d0d5
--- /dev/null
+++ b/src/components/userAvatar/tua-dc-relic.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="tua-dcr-box">
+    <div class="tua-dcr-main">
+      <div class="tua-dcr-left">
+        <div class="tua-dcr-bg">
+          <img
+            :src="`/icon/bg/${props.modelValue.rarity}-Star.webp`"
+            v-if="props.modelValue !== false"
+            :alt="`relic${props.pos}`"
+          />
+        </div>
+        <div class="tua-dcr-icon">
+          <img
+            :src="`/icon/relic/${props.pos}.webp`"
+            :alt="`relic${props.pos}`"
+            v-if="props.modelValue === false"
+            class="empty"
+          />
+          <img :src="props.modelValue.icon" :alt="props.modelValue.name" v-else />
+        </div>
+      </div>
+      <div class="tua-dcr-right">
+        <span class="tua-dcr-title">{{ getRelicTitle() }}</span>
+        <span v-if="props.modelValue !== false" class="tua-dcr-sub">
+          <span>Lv.{{ props.modelValue.level }}</span>
+          <span>{{ getRelicPos() }}</span>
+        </span>
+      </div>
+    </div>
+    <div class="tua-dcr-props" v-if="props.modelValue !== false">
+      <div class="tua-dcr-prop-main">
+        <span>
+          <img
+            v-if="propMain !== false && propMain.icon !== ''"
+            :src="propMain.icon"
+            alt="propMain"
+          />
+          <span>{{ propMain !== false ? propMain.name : "未知属性" }}</span>
+        </span>
+        <span>{{ props.modelValue.main_property.value }}</span>
+      </div>
+      <div v-for="(prop, index) in propSubs" :key="index" class="tua-dcr-prop">
+        <span class="tua-prop-sub">
+          <img v-if="prop !== false && prop.icon !== ''" :src="prop.icon" alt="propSub" />
+          <span>{{ prop !== false ? prop.name : "未知属性" }}</span>
+          <span class="tua-prop-time" v-if="props.modelValue.sub_property_list[index].times !== 0">
+            {{ props.modelValue.sub_property_list[index].times }}
+          </span>
+        </span>
+        <span>{{ props.modelValue.sub_property_list[index].value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import { useUserStore } from "../../store/modules/user.js";
+
+interface TuaDcRelicProps {
+  modelValue: TGApp.Game.Avatar.Relic | false;
+  pos: "1" | "2" | "3" | "4" | "5";
+}
+
+const props = defineProps<TuaDcRelicProps>();
+const userStore = useUserStore();
+
+const propMain = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
+  if (props.modelValue === false) return false;
+  return userStore.getProp(props.modelValue.main_property.property_type);
+});
+const propSubs = computed<Array<TGApp.Game.Avatar.PropMapItem | false>>(() => {
+  if (props.modelValue === false) return [];
+  return props.modelValue.sub_property_list.map((item) => {
+    return userStore.getProp(item.property_type);
+  });
+});
+
+function getRelicPos(): string {
+  const relicPos = ["生之花", "死之羽", "时之沙", "空之杯", "理之冠"];
+  return relicPos[parseInt(props.pos) - 1];
+}
+
+function getRelicTitle(): string {
+  if (props.modelValue === false) return getRelicPos();
+  return props.modelValue.name;
+}
+</script>
+<style lang="css" scoped>
+.tua-dcr-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px;
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 5px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background: rgb(0 0 0 / 20%);
+  color: var(--tgc-white-1);
+  font-size: 12px;
+  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
+}
+
+.tua-dcr-main {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: 5px;
+}
+
+.tua-dcr-left {
+  position: relative;
+  display: flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+}
+
+.tua-dcr-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  background: var(--box-bg-3);
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    object-fit: cover;
+  }
+}
+
+.tua-dcr-icon {
+  position: relative;
+  width: 36px;
+  height: 36px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .empty {
+    padding: 5px;
+  }
+}
+
+.tua-dcr-right {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.tua-dcr-title {
+  width: 100%;
+  font-family: var(--font-title);
+}
+
+.tua-dcr-sub {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 5px;
+}
+
+.tua-dcr-props {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  column-gap: 5px;
+}
+
+.tua-dcr-prop-main {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 5px;
+  font-family: var(--font-title);
+
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  img {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.tua-dcr-prop {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 5px;
+}
+
+.tua-prop-sub {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 5px;
+
+  img {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.tua-prop-time {
+  width: 14px;
+  height: 14px;
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 4px;
+  font-size: 10px;
+  line-height: 14px;
+  text-align: center;
+  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
+}
+</style>
diff --git a/src/components/userAvatar/tua-dc-weapon.vue b/src/components/userAvatar/tua-dc-weapon.vue
new file mode 100644
index 00000000..b62f39e0
--- /dev/null
+++ b/src/components/userAvatar/tua-dc-weapon.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="tua-dcw-box">
+    <div class="tua-dcw-main">
+      <div class="tua-dcw-left">
+        <img :src="`/icon/bg/${props.modelValue.rarity}-Star.webp`" alt="star" />
+        <img :src="`/WIKI/weapon/${props.modelValue.id}.webp`" alt="weapon" />
+      </div>
+      <div class="tua-dcw-right">
+        <span class="tua-dcw-title">{{ props.modelValue.name }}</span>
+        <span class="tua-dcw-sub">
+          <span>Lv.{{ props.modelValue.level }}</span>
+          <span>精炼{{ props.modelValue.affix_level }}</span>
+        </span>
+      </div>
+    </div>
+    <div class="tua-dcw-props">
+      <div class="tua-prop-main">
+        <span>
+          <img
+            v-if="propMain !== false && propMain.icon !== ''"
+            :src="propMain.icon"
+            alt="propMain"
+          />
+          <span>{{ propMain !== false ? propMain.name : "未知属性" }}</span>
+        </span>
+        <span>{{ props.modelValue.main_property.final }}</span>
+      </div>
+      <div class="tua-prop-sub">
+        <span>
+          <img v-if="propSub !== false && propSub.icon !== ''" :src="propSub.icon" alt="propSub" />
+          <span>{{ propSub !== false ? propSub.name : "未知属性" }}</span>
+        </span>
+        <span>{{ props.modelValue.sub_property.final }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import { useUserStore } from "../../store/modules/user.js";
+
+interface TuaDcWeaponProps {
+  modelValue: TGApp.Game.Avatar.WeaponDetail;
+}
+
+const props = defineProps<TuaDcWeaponProps>();
+const userStore = useUserStore();
+
+const propMain = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
+  return userStore.getProp(props.modelValue.main_property.property_type);
+});
+const propSub = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
+  return userStore.getProp(props.modelValue.sub_property.property_type);
+});
+</script>
+<style lang="css" scoped>
+.tua-dcw-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px;
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 5px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background: rgb(0 0 0 / 20%);
+  color: var(--tgc-white-1);
+  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
+}
+
+.tua-dcw-main {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: 5px;
+}
+
+.tua-dcw-right {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.tua-dcw-title {
+  font-family: var(--font-title);
+  font-size: 16px;
+}
+
+.tua-dcw-sub {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.tua-dcw-props {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.tua-prop-main {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  border-bottom: 1px solid rgb(255 255 255 / 40%);
+  font-family: var(--font-title);
+}
+
+.tua-prop-sub {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  font-size: 14px;
+
+  img {
+    width: 14px;
+    height: 14px;
+  }
+
+  span:first-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.tua-dcw-left {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 48px;
+    height: 48px;
+    border-radius: 5px;
+  }
+
+  img:last-child {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/components/userAvatar/tua-detail-card.vue b/src/components/userAvatar/tua-detail-card.vue
new file mode 100644
index 00000000..317253ed
--- /dev/null
+++ b/src/components/userAvatar/tua-detail-card.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="tua-dc-container">
+    <!-- 右上分享 -->
+    <v-btn
+      class="tua-dc-share"
+      icon="mdi-share-variant"
+      @click="share"
+      variant="outlined"
+      :loading="loading"
+      data-html2canvas-ignore
+    />
+    <!-- 左侧角色剪影 -->
+    <img :src="props.modelValue.avatar.image" class="tua-dc-avatar" alt="avatar" />
+    <!-- 右侧武器跟圣遗物具体属性 -->
+    <div class="tua-dc-detail">
+      <TuaDcWeapon :model-value="props.modelValue.weapon" />
+      <TuaDcRelic :model-value="relicList[0]" pos="1" />
+      <TuaDcRelic :model-value="relicList[1]" pos="2" />
+      <TuaDcRelic :model-value="relicList[2]" pos="3" />
+      <TuaDcRelic :model-value="relicList[3]" pos="4" />
+      <TuaDcRelic :model-value="relicList[4]" pos="5" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from "vue";
+
+import TSUserAvatar from "../../plugins/Sqlite/modules/userAvatar.js";
+import { generateShareImg } from "../../utils/TGShare.js";
+
+import TuaDcRelic from "./tua-dc-relic.vue";
+import TuaDcWeapon from "./tua-dc-weapon.vue";
+
+interface TuaDetailCardProps {
+  modelValue: TGApp.Sqlite.Character.UserRole;
+}
+
+const props = defineProps<TuaDetailCardProps>();
+
+type fixedLenArr<T, N extends number> = [T, ...T[]] & { length: N };
+type RelicList = fixedLenArr<TGApp.Game.Avatar.Relic | false, 5>;
+
+const relicList = computed<RelicList>(() => {
+  return [
+    props.modelValue.relics.find((item) => item.pos === 1) || false,
+    props.modelValue.relics.find((item) => item.pos === 2) || false,
+    props.modelValue.relics.find((item) => item.pos === 3) || false,
+    props.modelValue.relics.find((item) => item.pos === 4) || false,
+    props.modelValue.relics.find((item) => item.pos === 5) || false,
+  ];
+});
+
+const bg = ref<string>("/source/nameCard/profile/原神·印象.webp");
+const loading = ref<boolean>(false);
+
+onMounted(async () => {
+  await loadData();
+});
+
+watch(
+  () => props.modelValue,
+  async () => {
+    await loadData();
+  },
+);
+
+async function loadData(): Promise<void> {
+  if (props.modelValue.cid === 10000005 || props.modelValue.cid === 10000007) {
+    bg.value = "url('/source/nameCard/profile/原神·印象.webp')";
+  } else {
+    const card = await TSUserAvatar.getAvatarCard(props.modelValue.cid);
+    if (card !== false) {
+      bg.value = `url("/source/nameCard/profile/${card}.webp")`;
+    } else {
+      bg.value = "url('/source/nameCard/profile/原神·印象.webp')";
+    }
+  }
+}
+
+async function share(): Promise<void> {
+  const shareBox = <HTMLElement>document.querySelector(".tua-dc-container");
+  const fileName = `【角色详情】${props.modelValue.avatar.name}`;
+  loading.value = true;
+  await generateShareImg(fileName, shareBox);
+  loading.value = false;
+}
+</script>
+<style lang="css" scoped>
+.tua-dc-container {
+  position: relative;
+  overflow: hidden;
+  width: 800px;
+  border-radius: 5px;
+  aspect-ratio: 21 / 10;
+  background: v-bind(bg);
+  background-size: cover;
+}
+
+.tua-dc-share {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: var(--tgc-white-1);
+}
+
+.tua-dc-avatar {
+  position: absolute;
+  top: 0;
+  left: -80px;
+  height: 100%;
+  object-fit: contain;
+}
+
+.tua-dc-detail {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  padding: 5px;
+  gap: 5px;
+  grid-template-columns: repeat(3, 170px);
+  grid-template-rows: repeat(2, 140px);
+}
+</style>
diff --git a/src/components/userAvatar/tua-detail-overlay.vue b/src/components/userAvatar/tua-detail-overlay.vue
index 5055243f..da8b5249 100644
--- a/src/components/userAvatar/tua-detail-overlay.vue
+++ b/src/components/userAvatar/tua-detail-overlay.vue
@@ -1,44 +1,36 @@
 <template>
-  <TOverlay v-model="visible" hide blur-val="20px">
+  <TOverlay v-model="visible" hide blur-val="20px" :to-click="onCancel">
     <div class="tdo-box">
-      <div class="tdo-tabs-container">
-        <v-tabs v-model="modeTab" class="tdo-tabs">
-          <v-tab value="classic">经典视图</v-tab>
-          <v-tab value="card">卡片视图（简略）</v-tab>
-          <v-tab value="dev">卡片视图（详细）</v-tab>
+      <div class="tdo-avatars-container">
+        <v-tabs v-model="avatarTab" density="compact" center-active>
+          <v-tab
+            v-for="avatar in avatars"
+            :key="avatar.avatar.id"
+            :value="avatar.avatar.id"
+            @click="onAvatarClick(avatar)"
+            :title="avatar.avatar.name"
+          >
+            <v-avatar :image="avatar.avatar.side_icon" class="tdo-avatar" />
+          </v-tab>
         </v-tabs>
-        <v-btn @click="onCancel" icon="mdi-close" size="28" variant="outlined" />
       </div>
-      <div class="tdo-container">
-        <div class="tdo-avatars-container">
-          <v-tabs v-model="avatarTab" density="compact" center-active>
-            <v-tab
-              v-for="avatar in avatars"
-              :key="avatar.avatar.id"
-              :value="avatar.avatar.id"
-              @click="onAvatarClick(avatar)"
-              :title="avatar.avatar.name"
-            >
-              <v-avatar :image="avatar.avatar.side_icon" class="tdo-avatar" />
-            </v-tab>
-          </v-tabs>
+      <div class="tdo-card-container">
+        <div class="tdo-box-arrow left" @click="handleClick('left')">
+          <img alt="left" src="../../assets/icons/arrow-right.svg" />
         </div>
-        <div class="tdo-card-container">
-          <div class="tdo-box-arrow left" @click="handleClick('left')">
-            <img alt="left" src="../../assets/icons/arrow-right.svg" />
-          </div>
-          <v-window class="tdo-box-container" v-model="modeTab">
-            <v-window-item value="classic">
-              <TucDetailOld :model-value="avatar" />
-            </v-window-item>
-            <v-window-item value="card">
-              <TucDetailCard :model-value="avatar" />
-            </v-window-item>
-            <v-window-item value="dev"></v-window-item>
-          </v-window>
-          <div class="tdo-box-arrow right" @click="handleClick('right')">
-            <img alt="right" src="../../assets/icons/arrow-right.svg" />
-          </div>
+        <v-window class="tdo-box-container" v-model="modeTab">
+          <v-window-item value="classic">
+            <TucDetailOld :model-value="avatar" />
+          </v-window-item>
+          <v-window-item value="card">
+            <TucDetailCard :model-value="avatar" />
+          </v-window-item>
+          <v-window-item value="dev">
+            <TuaDetailCard :model-value="avatar" />
+          </v-window-item>
+        </v-window>
+        <div class="tdo-box-arrow right" @click="handleClick('right')">
+          <img alt="right" src="../../assets/icons/arrow-right.svg" />
         </div>
       </div>
     </div>
@@ -51,6 +43,8 @@ import TOverlay from "../main/t-overlay.vue";
 import TucDetailCard from "../userAvatarCard/tuc-detail-card.vue";
 import TucDetailOld from "../userAvatarOld/tuc-detail-old.vue";
 
+import TuaDetailCard from "./tua-detail-card.vue";
+
 interface TuaDetailOverlayProps {
   modelValue: boolean;
   avatar: TGApp.Sqlite.Character.UserRole;
@@ -87,7 +81,7 @@ const avatarsWidth = computed<string>(() => {
     case "card":
       return "800px";
     case "dev":
-      return "300px";
+      return "800px";
     default:
       return "100px";
   }
@@ -133,26 +127,6 @@ function onAvatarClick(avatar: TGApp.Sqlite.Character.UserRole): void {
   transform: translateY(-10px);
 }
 
-.tdo-tabs-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  border-radius: 10px;
-  background: var(--box-bg-1);
-  box-shadow: 0 0 5px var(--common-shadow-2);
-  color: var(--box-text-1);
-  column-gap: 10px;
-}
-
-.tdo-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  row-gap: 10px;
-}
-
 .tdo-card-container {
   display: flex;
   align-items: center;
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index 8fb41691..05b45d23 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -115,7 +115,7 @@ const showOverlay = ref<boolean>(false);
 const selectIndex = ref<number>(0);
 
 const showSelect = ref<boolean>(false);
-const showMode = ref<"classic" | "card" | "dev">("card");
+const showMode = ref<"classic" | "card" | "dev">("dev");
 const resetSelect = ref<boolean>(false);
 const modeList = [
   { label: "经典视图", value: "classic" },