From e33f824cecf5b494bb1c5e7c4968250f776bbf15 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Tue, 5 Sep 2023 16:54:21 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=20overlay=20=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E4=B8=80=E4=BA=9B=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tuc-detail-constellation.vue              |  15 +-
 .../tuc-detail-desc-constellation.vue         |   5 +-
 .../userCharacter/tuc-detail-desc-relic.vue   |   6 +-
 .../userCharacter/tuc-detail-desc-weapon.vue  |   3 +-
 .../userCharacter/tuc-detail-desc.vue         |  22 +--
 .../userCharacter/tuc-detail-overlay.vue      | 180 ++++++++++--------
 .../userCharacter/tuc-detail-relic.vue        |   4 +-
 src/pages/User/Characters.vue                 |   1 -
 8 files changed, 132 insertions(+), 104 deletions(-)

diff --git a/src/components/userCharacter/tuc-detail-constellation.vue b/src/components/userCharacter/tuc-detail-constellation.vue
index c241405f..27b1800f 100644
--- a/src/components/userCharacter/tuc-detail-constellation.vue
+++ b/src/components/userCharacter/tuc-detail-constellation.vue
@@ -23,26 +23,27 @@ defineProps<TucDetailConstellationProps>();
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  cursor: pointer;
 }
 
 .tuc-dc-lock {
   position: absolute;
   display: flex;
-  width: 50px;
-  height: 50px;
+  width: 54px;
+  height: 54px;
   align-items: center;
   justify-content: center;
+  padding: 3px;
   border-radius: 50%;
   background-color: rgb(0 0 0 / 50%);
 }
 
 .tuc-dc-icon {
-  width: 50px;
-  height: 50px;
-  padding: 5px;
+  width: 54px;
+  height: 54px;
+  padding: 3px;
+  border: 1px solid rgb(0 0 0/20%);
   border-radius: 50%;
-  background: rgb(0 0 0/ 20%);
+  background: rgb(50 56 68/50%);
 }
 
 .tuc-dc-icon img {
diff --git a/src/components/userCharacter/tuc-detail-desc-constellation.vue b/src/components/userCharacter/tuc-detail-desc-constellation.vue
index 610b1ef6..baaad392 100644
--- a/src/components/userCharacter/tuc-detail-desc-constellation.vue
+++ b/src/components/userCharacter/tuc-detail-desc-constellation.vue
@@ -56,11 +56,12 @@ function parseDesc(desc: string): string {
   align-items: start;
   justify-content: space-around;
   margin-left: 5px;
+  color: var(--tgc-dark-1);
 }
 
 .tuc-ddc-top {
   height: 20px;
-  color: var(--common-color-blue-2);
+  color: var(--tgc-blue-1);
 }
 
 .tuc-ddc-bottom {
@@ -72,6 +73,6 @@ function parseDesc(desc: string): string {
 }
 
 .tuc-ddc-bottom :nth-child(3) {
-  color: var(--common-color-yellow);
+  color: var(--tgc-yellow-1);
 }
 </style>
diff --git a/src/components/userCharacter/tuc-detail-desc-relic.vue b/src/components/userCharacter/tuc-detail-desc-relic.vue
index 15d8cd73..e516df3e 100644
--- a/src/components/userCharacter/tuc-detail-desc-relic.vue
+++ b/src/components/userCharacter/tuc-detail-desc-relic.vue
@@ -4,7 +4,7 @@
       <span>圣遗物</span>
     </template>
     <template #content>
-      <TucDetailRelic :model-value="props.modelValue" pos="props.modelValue.pos" />
+      <TucDetailRelic :model-value="props.modelValue" :pos="`${props.modelValue.pos}`" />
       <div class="tuc-ddr-content">
         <div class="tuc-ddrc-top">
           <span>{{ props.modelValue.name }}</span>
@@ -48,6 +48,7 @@ const props = defineProps<TucDetailDescRelicProps>();
 
 .tuc-ddrc-top {
   height: 20px;
+  color: var(--tgc-dark-1);
 }
 
 .tuc-ddrc-top :nth-child(1) {
@@ -55,7 +56,7 @@ const props = defineProps<TucDetailDescRelicProps>();
 }
 
 .tuc-ddrc-top :nth-child(3) {
-  color: var(--common-color-yellow);
+  color: var(--tgc-yellow-1);
 }
 
 .tuc-ddrc-bottom {
@@ -69,6 +70,7 @@ const props = defineProps<TucDetailDescRelicProps>();
 }
 
 .tuc-ddrd-title {
+  color: var(--tgc-dark-1);
   font-family: var(--font-title);
   font-size: 16px;
 }
diff --git a/src/components/userCharacter/tuc-detail-desc-weapon.vue b/src/components/userCharacter/tuc-detail-desc-weapon.vue
index 43b21dbf..216c5264 100644
--- a/src/components/userCharacter/tuc-detail-desc-weapon.vue
+++ b/src/components/userCharacter/tuc-detail-desc-weapon.vue
@@ -49,6 +49,7 @@ const box = computed(() => {
   align-items: start;
   justify-content: space-around;
   margin-left: 5px;
+  color: var(--tgc-dark-1);
 }
 
 .tuc-ddwc-top {
@@ -61,7 +62,7 @@ const box = computed(() => {
 
 .tuc-ddwc-top :nth-child(2),
 .tuc-ddwc-top :nth-child(4) {
-  color: var(--common-color-yellow);
+  color: var(--tgc-yellow-1);
 }
 
 .tuc-ddwc-bottom {
diff --git a/src/components/userCharacter/tuc-detail-desc.vue b/src/components/userCharacter/tuc-detail-desc.vue
index b68a72f3..d5b3ffec 100644
--- a/src/components/userCharacter/tuc-detail-desc.vue
+++ b/src/components/userCharacter/tuc-detail-desc.vue
@@ -15,15 +15,14 @@
 <style lang="css" scoped>
 .tuc-dd-box {
   padding: 10px;
-  border: 2px solid var(--common-color-grey-2);
+  border: 1px solid rgb(0 0 0 /40%);
   border-radius: 5px;
-  backdrop-filter: blur(20px);
-  background: rgb(255 255 255 / 20%);
+  background: var(--tgc-white-1);
 }
 
 .tuc-dd-title {
   width: 100%;
-  color: var(--common-color-blue);
+  color: var(--tgc-dark-1);
   font-family: var(--font-title);
   font-size: 20px;
   text-align: left;
@@ -31,9 +30,10 @@
 
 .tuc-dd-divider {
   width: 100%;
-  height: 2px;
+  height: 1px;
   margin: 5px 0;
-  background: var(--common-color-grey-2);
+  background: var(--tgc-dark-1);
+  opacity: 0.5;
 }
 
 .tuc-dd-content {
@@ -45,19 +45,15 @@
 }
 
 .tuc-dd-desc {
-  overflow: hidden;
   width: 100%;
   max-height: 50px;
   margin-top: 5px;
-  color: var(--common-color-black);
+  color: var(--tgc-dark-1);
   font-family: var(--font-text);
   font-size: 14px;
-  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
   text-align: left;
   word-break: break-all;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 }
 </style>
diff --git a/src/components/userCharacter/tuc-detail-overlay.vue b/src/components/userCharacter/tuc-detail-overlay.vue
index 46d5a9d4..802a7845 100644
--- a/src/components/userCharacter/tuc-detail-overlay.vue
+++ b/src/components/userCharacter/tuc-detail-overlay.vue
@@ -1,14 +1,19 @@
 <template>
   <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
-    <!-- todo 优化样式 -->
     <div class="tuc-do-box">
       <div class="tuc-do-bg">
-        <img :src="data.bg" alt="role" />
+        <img
+          :src="data.bg"
+          alt="role"
+          :style="{
+            objectFit: data.bgFit,
+          }"
+        />
       </div>
       <div class="tuc-do-quote">* 所有数据以游戏内为准，此处仅供参考</div>
       <!-- 衣装 -->
       <div v-if="data.costume.length > 0" class="tuc-do-costume">
-        <v-switch v-model="showCostumeSwitch" color="#faf7e8" @click="switchBg">
+        <v-switch v-model="showCostumeSwitch" color="#fb7299" @click="switchBg">
           <template #label>
             <v-icon>mdi-tshirt-crew-outline</v-icon>
           </template>
@@ -23,7 +28,7 @@
           <div
             class="tuc-dol-item"
             :style="{
-              border: selected.pos === 0 ? '2px solid var(--common-color-yellow)' : '',
+              opacity: selected.pos === 0 ? '1' : '0.5',
             }"
             @click="showDetail(data.weapon, '武器', 0)"
           >
@@ -35,11 +40,11 @@
             class="tuc-dol-item"
             :style="{
               cursor: item ? 'pointer' : 'default',
-              border: selected.pos === index + 1 ? '2px solid var(--common-color-yellow)' : '',
+              opacity: selected.pos === index + 1 ? '1' : item ? '0.5' : '1',
             }"
             @click="showDetail(item, '圣遗物', index + 1)"
           >
-            <TucDetailRelic :model-value="item" :pos="index.toString()" />
+            <TucDetailRelic :model-value="item" :pos="index + 1" />
           </div>
         </div>
         <!-- 右侧环状排列6个命座 -->
@@ -61,10 +66,10 @@
         <div class="tuc-do-bottom">
           <TucDetailDescWeapon v-if="selected.type === '武器'" v-model="selectWeapon" />
           <TucDetailDescConstellation
-            v-else-if="selected.type === '命座'"
+            v-if="selected.type === '命座'"
             v-model="selectConstellation"
           />
-          <TucDetailDescRelic v-else-if="selected.type === '圣遗物'" v-model="selectRelic" />
+          <TucDetailDescRelic v-if="selected.type === '圣遗物'" v-model="selectRelic" />
         </div>
       </div>
     </div>
@@ -88,21 +93,20 @@ interface ToUcDetailProps {
 
 interface ToUcDetailEmits {
   (e: "update:modelValue", value: boolean): void;
+
   (e: "cancel"): void;
 }
 
+type fixedLenArray<T, N extends number> = [T, ...T[]] & { length: N };
+type relicsInfo = fixedLenArray<TGApp.Sqlite.Character.RoleReliquary | false, 5>;
+
 interface ToUcDetailData {
   weapon: TGApp.Sqlite.Character.RoleWeapon;
   constellation: TGApp.Sqlite.Character.RoleConstellation[];
-  reliquary: {
-    1: TGApp.Sqlite.Character.RoleReliquary | false;
-    2: TGApp.Sqlite.Character.RoleReliquary | false;
-    3: TGApp.Sqlite.Character.RoleReliquary | false;
-    4: TGApp.Sqlite.Character.RoleReliquary | false;
-    5: TGApp.Sqlite.Character.RoleReliquary | false;
-  };
+  reliquary: relicsInfo;
   costume: TGApp.Sqlite.Character.RoleCostume[];
   bg: string;
+  bgFit: "contain" | "cover";
 }
 
 const emits = defineEmits<ToUcDetailEmits>();
@@ -119,15 +123,10 @@ const showCostumeSwitch = ref(false);
 const data = ref<ToUcDetailData>({
   weapon: <TGApp.Sqlite.Character.RoleWeapon>{},
   constellation: [],
-  reliquary: {
-    1: false,
-    2: false,
-    3: false,
-    4: false,
-    5: false,
-  },
+  reliquary: [false, false, false, false, false],
   costume: [],
   bg: "",
+  bgFit: "contain",
 });
 const selectConstellation = ref<TGApp.Sqlite.Character.RoleConstellation>(
   <TGApp.Sqlite.Character.RoleConstellation>{},
@@ -138,49 +137,64 @@ const selectRelic = ref<TGApp.Sqlite.Character.RoleReliquary>(
 );
 const selected = ref({
   type: "武器" || "命之座" || "圣遗物",
-  pos: 0, // 用于标记选中的是哪个位置
+  pos: 0,
 });
 
-// 加载数据
-function loadData(): void {
-  if (!props.modelValue) return;
-  data.value.weapon = JSON.parse(props.dataVal.weapon);
-  data.value.constellation = JSON.parse(props.dataVal.constellation);
-  if (props.dataVal.reliquary !== "") {
-    const relics = <TGApp.Sqlite.Character.RoleReliquary[]>JSON.parse(props.dataVal.reliquary);
-    relics.map((item) => {
-      switch (item.pos) {
-        case 1:
-          data.value.reliquary["1"] = item;
-          break;
-        case 2:
-          data.value.reliquary["2"] = item;
-          break;
-        case 3:
-          data.value.reliquary["3"] = item;
-          break;
-        case 4:
-          data.value.reliquary["4"] = item;
-          break;
-        case 5:
-          data.value.reliquary["5"] = item;
-          break;
-        default:
-          break;
-      }
-      return item;
-    });
-  }
-  data.value.costume = JSON.parse(props.dataVal.costume);
-  data.value.bg = props.dataVal.img;
-  showCostumeSwitch.value = false;
-  selectWeapon.value = data.value.weapon;
+// 重置数据
+function resetData(): void {
+  data.value = {
+    weapon: <TGApp.Sqlite.Character.RoleWeapon>{},
+    constellation: [],
+    reliquary: [false, false, false, false, false],
+    costume: [],
+    bg: "",
+    bgFit: "contain",
+  };
   selected.value = {
     type: "武器",
     pos: 0,
   };
 }
 
+// 加载数据
+function loadData(): void {
+  if (!props.modelValue) return;
+  resetData();
+  data.value.weapon = JSON.parse(props.dataVal.weapon);
+  data.value.constellation = JSON.parse(props.dataVal.constellation);
+  if (props.dataVal.reliquary !== "") {
+    const relics = <TGApp.Sqlite.Character.RoleReliquary[]>JSON.parse(props.dataVal.reliquary);
+    const relicTemp: relicsInfo = [false, false, false, false, false];
+    relics.forEach((item) => {
+      switch (item.pos) {
+        case 1:
+          relicTemp[0] = item;
+          break;
+        case 2:
+          relicTemp[1] = item;
+          break;
+        case 3:
+          relicTemp[2] = item;
+          break;
+        case 4:
+          relicTemp[3] = item;
+          break;
+        case 5:
+          relicTemp[4] = item;
+          break;
+        default:
+          break;
+      }
+    });
+    data.value.reliquary = relicTemp;
+  }
+  data.value.costume = JSON.parse(props.dataVal.costume);
+  data.value.bg = props.dataVal.img;
+  data.value.bgFit = "contain";
+  showCostumeSwitch.value = false;
+  selectWeapon.value = data.value.weapon;
+}
+
 onMounted(() => {
   loadData();
 });
@@ -209,11 +223,11 @@ function showDetail(
     | TGApp.Sqlite.Character.RoleWeapon
     | TGApp.Sqlite.Character.RoleReliquary
     | false,
-  type: "命座" | "武器" | "圣遗物",
-  pos: number = 0,
+  selectType: "命座" | "武器" | "圣遗物",
+  selectPos: number,
 ): void {
   if (!item) return;
-  switch (type) {
+  switch (selectType) {
     case "命座":
       selectConstellation.value = <TGApp.Sqlite.Character.RoleConstellation>item;
       break;
@@ -227,16 +241,20 @@ function showDetail(
       break;
   }
   selected.value = {
-    type,
-    pos,
+    type: selectType,
+    pos: selectPos,
   };
 }
 
 function switchBg(): void {
-  if (data.value.bg === props.dataVal.img) {
+  if (!showCostumeSwitch.value) {
     data.value.bg = data.value.costume[0].icon;
+    data.value.bgFit = "cover";
+    showCostumeSwitch.value = true;
   } else {
     data.value.bg = props.dataVal.img;
+    data.value.bgFit = "contain";
+    showCostumeSwitch.value = false;
   }
 }
 </script>
@@ -247,7 +265,7 @@ function switchBg(): void {
   height: 620px;
   padding: 10px;
   border-radius: 5px;
-  background: rgb(255 255 255 / 30%);
+  background: var(--tgc-white-1);
 }
 
 .tuc-do-bg {
@@ -256,22 +274,27 @@ function switchBg(): void {
   left: 0;
   width: 100%;
   height: 100%;
+  border-radius: 5px;
   margin: 0 auto;
 }
 
 .tuc-do-bg img {
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  border-radius: 5px;
 }
 
 .tuc-do-quote {
   position: absolute;
-  right: 10px;
-  bottom: 5px;
-  color: var(--common-color-grey-2);
-  font-family: var(--font-text);
-  font-size: 12px;
+  right: 0;
+  bottom: 0;
+  padding: 2px 5px;
+  backdrop-filter: blur(10px);
+  background: rgb(0 0 0 /50%);
+  border-bottom-right-radius: 5px;
+  border-top-left-radius: 5px;
+  color: var(--tgc-white-1);
+  font-size: 14px;
 }
 
 .tuc-do-costume {
@@ -279,18 +302,22 @@ function switchBg(): void {
   z-index: 1;
   top: 5px;
   right: 10px;
+  color: var(--tgc-pink-1);
 }
 
 .tuc-do-costume-name {
   position: absolute;
-  top: 5px;
-  left: 0;
-  width: 100%;
-  color: var(--common-color-white);
-  font-family: var(--font-title);
+  top: 10px;
+  left: calc(50% - 80px);
+  width: 160px;
+  border-radius: 5px;
+  backdrop-filter: blur(5px);
+  background: var(--tgc-white-1);
+  color: var(--tgc-yellow-1);
+  font-family: var(--font-text);
   font-size: 16px;
+  opacity: 0.8;
   text-align: center;
-  text-shadow: 0 0 10px rgb(0 0 0 / 50%);
 }
 
 .tuc-do-show {
@@ -366,6 +393,7 @@ function switchBg(): void {
 
 .tuc-dor-item {
   position: absolute;
+  cursor: pointer;
 }
 
 /* 环状排列6个命座 */
diff --git a/src/components/userCharacter/tuc-detail-relic.vue b/src/components/userCharacter/tuc-detail-relic.vue
index 1d8d26d3..28ab14cb 100644
--- a/src/components/userCharacter/tuc-detail-relic.vue
+++ b/src/components/userCharacter/tuc-detail-relic.vue
@@ -14,7 +14,7 @@
 <script lang="ts" setup>
 interface TucDetailRelicProps {
   modelValue: TGApp.Sqlite.Character.RoleReliquary | false;
-  pos: string;
+  pos: number;
 }
 
 const props = defineProps<TucDetailRelicProps>();
@@ -25,7 +25,7 @@ const props = defineProps<TucDetailRelicProps>();
   width: 60px;
   height: 60px;
   border-radius: 5px;
-  background: rgb(0 0 0 /20%);
+  background: rgb(50 56 68/50%);
 }
 
 .tuc-dr-bg {
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index 8c1bc341..72d3da2e 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -29,7 +29,6 @@
         </v-btn>
       </div>
     </div>
-    <!-- grid 布局，参考 Snap.Hutao -->
     <div class="uc-grid">
       <TucRoleBox
         v-for="(role, index) in roleList"