♻️ 优化代码，减少 dom

src/components/userCharacter/tuc-detail-overlay.vue

@@ -1,5 +1,5 @@
 <template>
-  <TOverlay v-model="visible" hide :to-click="onCancel">
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
     <div class="tuc-do-box">
       <div class="tuc-do-bg">
         <img :src="props.dataVal.img" alt="role">
@@ -20,54 +20,15 @@
             <TucDetailItemBox v-model="weaponBox" />
           </div>
           <div
+            v-for="(item, index) in data.reliquary"
             class="tuc-dol-item"
             :style="{
-              cursor: data.reliquary[1] ? 'pointer' : 'default',
-              border: selected.pos === 1 ? '2px solid var(--common-color-yellow)' : '',
+              cursor: item ? 'pointer' : 'default',
+              border: selected.pos === index + 1 ? '2px solid var(--common-color-yellow)' : '',
             }"
-            @click="showDetail(data.reliquary[1],'圣遗物',1)"
+            @click="showDetail(item,'圣遗物',index + 1)"
           >
-            <TucDetailRelic v-model="data.reliquary[1]" pos="1" />
-          </div>
-          <div
-            class="tuc-dol-item"
-            :style="{
-              cursor: data.reliquary[2] ? 'pointer' : 'default',
-              border: selected.pos === 2 ? '2px solid var(--common-color-yellow)' : '',
-            }"
-            @click="showDetail(data.reliquary[2],'圣遗物',2)"
-          >
-            <TucDetailRelic v-model="data.reliquary[2]" pos="2" />
-          </div>
-          <div
-            class="tuc-dol-item"
-            :style="{
-              cursor: data.reliquary[3] ? 'pointer' : 'default',
-              border: selected.pos === 3 ? '2px solid var(--common-color-yellow)' : '',
-            }"
-            @click="showDetail(data.reliquary[3],'圣遗物',3)"
-          >
-            <TucDetailRelic v-model="data.reliquary[3]" pos="3" />
-          </div>
-          <div
-            class="tuc-dol-item"
-            :style="{
-              cursor: data.reliquary[4] ? 'pointer' : 'default',
-              border: selected.pos === 4 ? '2px solid var(--common-color-yellow)' : '',
-            }"
-            @click="showDetail(data.reliquary[4],'圣遗物',4)"
-          >
-            <TucDetailRelic v-model="data.reliquary[4]" pos="4" />
-          </div>
-          <div
-            class="tuc-dol-item"
-            :style="{
-              cursor: data.reliquary[5] ? 'pointer' : 'default',
-              border: selected.pos === 5 ? '2px solid var(--common-color-yellow)' : '',
-            }"
-            @click="showDetail(data.reliquary[5],'圣遗物',5)"
-          >
-            <TucDetailRelic v-model="data.reliquary[5]" pos="5" />
+            <TucDetailRelic :model-value="item" :pos="index.toString()" />
           </div>
         </div>
         <!-- 右侧环状排列6个命座 -->
@@ -86,9 +47,18 @@
         </div>
         <!-- 底部说明 -->
         <div class="tuc-do-bottom">
-          <TucDetailDescWeapon v-if="selected.type === '武器'" v-model="selected.data" />
-          <TucDetailDescConstellation v-else-if="selected.type === '命座'" v-model="selected.data" />
-          <TucDetailDescRelic v-else-if="selected.type === '圣遗物'" v-model="selected.data" />
+          <TucDetailDescWeapon
+            v-if="selected.type === '武器'"
+            v-model="selected.data as TGApp.Sqlite.Character.RoleWeapon"
+          />
+          <TucDetailDescConstellation
+            v-else-if="selected.type === '命座'"
+            v-model="selected.data as TGApp.Sqlite.Character.RoleConstellation"
+          />
+          <TucDetailDescRelic
+            v-else-if="selected.type === '圣遗物'"
+            v-model="selected.data as TGApp.Sqlite.Character.RoleReliquary"
+          />
         </div>
       </div>
     </div>
@@ -96,7 +66,7 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, onUpdated, ref } from "vue";
 import TOverlay from "../main/t-overlay.vue";
 import TucDetailDescWeapon from "./tuc-detail-desc-weapon.vue";
 import TucDetailDescConstellation from "./tuc-detail-desc-constellation.vue";
@@ -137,6 +107,7 @@ const data = ref({
     4: false as TGApp.Sqlite.Character.RoleReliquary | false,
     5: false as TGApp.Sqlite.Character.RoleReliquary | false,
   },
+  costume: [] as TGApp.Sqlite.Character.RoleCostume[],
 });
 const selected = ref({
   data: {} as TGApp.Sqlite.Character.RoleConstellation
@@ -146,7 +117,9 @@ const selected = ref({
   pos: 0, // 用于标记选中的是哪个位置
 });
 
-onMounted(() => {
+// 加载数据
+function loadData () {
+  if (!props.modelValue) return;
   data.value.weapon = JSON.parse(props.dataVal.weapon) as TGApp.Sqlite.Character.RoleWeapon;
   data.value.constellation = JSON.parse(props.dataVal.constellation) as TGApp.Sqlite.Character.RoleConstellation[];
   if (props.dataVal.reliquary !== "") {
@@ -155,11 +128,21 @@ onMounted(() => {
       data.value.reliquary[item.pos] = item;
     });
   }
+  data.value.costume = JSON.parse(props.dataVal.costume) as TGApp.Sqlite.Character.RoleCostume[];
   selected.value = {
     data: data.value.weapon,
     type: "武器",
     pos: 0,
   };
+}
+
+onMounted(() => {
+  loadData();
+});
+
+// 监听外部数据变化
+onUpdated(() => {
+  loadData();
 });
 
 const weaponBox = computed(() => {

src/components/userCharacter/tuc-role-box.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tuc-rb-box" @click="showOverlay">
+  <div class="tuc-rb-box">
     <div class="tuc-rb-top">
       <TItemBox v-model="avatarBox" />
       <TItemBox v-model="weaponBox" />
@@ -22,13 +22,11 @@
       </div>
     </div>
   </div>
-  <ToUcDetail v-model="visible" :data-val="props.modelValue" />
 </template>
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
 import TItemBox from "../main/t-itembox.vue";
-import ToUcDetail from "./tuc-detail-overlay.vue";
 // utils
 import TGSqlite from "../../plugins/Sqlite";
 
@@ -36,7 +34,6 @@ interface TucRoleBoxProps {
   modelValue: TGApp.Sqlite.Character.UserRole;
 }
 
-const visible = ref(false);
 const props = defineProps<TucRoleBoxProps>();
 
 const avatarBox = computed(() => {
@@ -91,10 +88,6 @@ function getAvatarName () {
         : props.modelValue.name
   );
 }
-
-function showOverlay () {
-  visible.value = true;
-}
 </script>
 <style lang="css" scoped>
 .tuc-rb-box {

src/pages/User/Characters.vue

@@ -20,21 +20,23 @@
     </div>
     <!-- grid 布局，参考 Snap.Hutao -->
     <div class="uc-grid">
-      <TucRoleBox v-for="role in roleList" :model-value="role" />
+      <TucRoleBox v-for="role in roleList" :model-value="role" @click="selectRole(role)" />
     </div>
   </div>
+  <ToUcDetail v-model="visible" :data-val="dataVal" />
 </template>
 <script lang="ts" setup>
 // vue
-import { computed, onMounted, onUpdated, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import TucRoleBox from "../../components/userCharacter/tuc-role-box.vue";
+import ToUcDetail from "../../components/userCharacter/tuc-detail-overlay.vue";
 // store
 import { useUserStore } from "../../store/modules/user";
 // utils
 import TGSqlite from "../../plugins/Sqlite";
 import TGRequest from "../../web/request/TGRequest";
 import { generateShareImg } from "../../utils/TGShare";
-import TucRoleBox from "../../components/userCharacter/tuc-role-box.vue";
 
 // store
 const userStore = useUserStore();
@@ -49,6 +51,10 @@ const roleList = ref([] as TGApp.Sqlite.Character.UserRole[]);
 const roleCookie = computed(() => userStore.getCookieGroup4());
 const user = computed(() => userStore.getCurAccount());
 
+// overlay
+const visible = ref(false);
+const dataVal = ref({} as TGApp.Sqlite.Character.UserRole);
+
 // grid
 const gridGap = ref("10px");
 
@@ -107,6 +113,11 @@ function getUpdateTime () {
   });
   return new Date(lastUpdateTime).toLocaleString().replace(/\//g, "-");
 }
+
+function selectRole (role: TGApp.Sqlite.Character.UserRole) {
+  dataVal.value = role;
+  visible.value = true;
+}
 </script>
 <style lang="css" scoped>
 .uc-box {