✨ 保留旧版，默认新版，旧版增加左右切换

close #20

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

@@ -1,76 +1,87 @@
 <template>
   <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
-    <div class="tuc-do-box">
-      <div class="tuc-do-bg">
-        <img
-          :src="data.bg"
-          alt="role"
-          :style="{
-            objectFit: data.bgFit,
-          }"
-        />
+    <div class="tuc-do-div">
+      <!-- 左侧箭头 -->
+      <div class="tuc-arrow-left" @click="handleClick('left')">
+        <img src="../../assets/icons/arrow-right.svg" alt="left" />
       </div>
-      <div class="tuc-do-quote">* 所有数据以游戏内为准，此处仅供参考</div>
-      <!-- 衣装 -->
-      <div v-if="data.costume.length > 0" class="tuc-do-costume">
-        <v-switch v-model="showCostumeSwitch" color="#fb7299" @click="switchBg">
-          <template #label>
-            <v-icon>mdi-tshirt-crew-outline</v-icon>
-          </template>
-        </v-switch>
-      </div>
-      <div v-if="showCostumeSwitch" class="tuc-do-costume-name">
-        {{ data.costume[0].name }}
-      </div>
-      <div v-if="data" class="tuc-do-show">
-        <!-- 左侧武器跟圣遗物 -->
-        <div class="tuc-do-left">
-          <div
-            class="tuc-dol-item"
+      <!-- 中间内容 -->
+      <div class="tuc-do-box">
+        <div class="tuc-do-bg">
+          <img
+            :src="data.bg"
+            alt="role"
             :style="{
-              opacity: selected.pos === 0 ? '1' : '0.5',
+              objectFit: data.bgFit,
             }"
-            @click="showDetail(data.weapon, '武器', 0)"
-          >
-            <TucDetailItemBox v-model="weaponBox" />
-          </div>
-          <div
-            v-for="(item, index) in data.reliquary"
-            :key="index"
-            class="tuc-dol-item"
-            :style="{
-              cursor: item ? 'pointer' : 'default',
-              opacity: selected.pos === index + 1 ? '1' : item ? '0.5' : '1',
-            }"
-            @click="showDetail(item, '圣遗物', index + 1)"
-          >
-            <TucDetailRelic :model-value="item" :pos="index + 1" />
-          </div>
-        </div>
-        <!-- 右侧环状排列6个命座 -->
-        <div class="tuc-do-right">
-          <div class="tuc-dor-box">
-            <TucDetailConstellation
-              v-for="item in data.constellation"
-              :key="item.pos"
-              class="tuc-dor-item"
-              :model-value="item"
-              :style="{
-                border: selected.pos === item.pos + 5 ? '2px solid var(--tgc-yellow-1)' : '',
-              }"
-              @click="showDetail(item, '命座', item.pos + 5)"
-            />
-          </div>
-        </div>
-        <!-- 底部说明 -->
-        <div class="tuc-do-bottom">
-          <TucDetailDescWeapon v-if="selected.type === '武器'" v-model="selectWeapon" />
-          <TucDetailDescConstellation
-            v-if="selected.type === '命座'"
-            v-model="selectConstellation"
           />
-          <TucDetailDescRelic v-if="selected.type === '圣遗物'" v-model="selectRelic" />
         </div>
+        <div class="tuc-do-quote">* 所有数据以游戏内为准，此处仅供参考</div>
+        <!-- 衣装 -->
+        <div v-if="data.costume.length > 0" class="tuc-do-costume">
+          <v-switch v-model="showCostumeSwitch" color="#fb7299" @click="switchBg">
+            <template #label>
+              <v-icon>mdi-tshirt-crew-outline</v-icon>
+            </template>
+          </v-switch>
+        </div>
+        <div v-if="showCostumeSwitch" class="tuc-do-costume-name">
+          {{ data.costume[0].name }}
+        </div>
+        <div v-if="data" class="tuc-do-show">
+          <!-- 左侧武器跟圣遗物 -->
+          <div class="tuc-do-left">
+            <div
+              class="tuc-dol-item"
+              :style="{
+                opacity: selected.pos === 0 ? '1' : '0.5',
+              }"
+              @click="showDetail(data.weapon, '武器', 0)"
+            >
+              <TucDetailItemBox v-model="weaponBox" />
+            </div>
+            <div
+              v-for="(item, index) in data.reliquary"
+              :key="index"
+              class="tuc-dol-item"
+              :style="{
+                cursor: item ? 'pointer' : 'default',
+                opacity: selected.pos === index + 1 ? '1' : item ? '0.5' : '1',
+              }"
+              @click="showDetail(item, '圣遗物', index + 1)"
+            >
+              <TucDetailRelic :model-value="item" :pos="index + 1" />
+            </div>
+          </div>
+          <!-- 右侧环状排列6个命座 -->
+          <div class="tuc-do-right">
+            <div class="tuc-dor-box">
+              <TucDetailConstellation
+                v-for="item in data.constellation"
+                :key="item.pos"
+                class="tuc-dor-item"
+                :model-value="item"
+                :style="{
+                  border: selected.pos === item.pos + 5 ? '2px solid var(--tgc-yellow-1)' : '',
+                }"
+                @click="showDetail(item, '命座', item.pos + 5)"
+              />
+            </div>
+          </div>
+          <!-- 底部说明 -->
+          <div class="tuc-do-bottom">
+            <TucDetailDescWeapon v-if="selected.type === '武器'" v-model="selectWeapon" />
+            <TucDetailDescConstellation
+              v-if="selected.type === '命座'"
+              v-model="selectConstellation"
+            />
+            <TucDetailDescRelic v-if="selected.type === '圣遗物'" v-model="selectRelic" />
+          </div>
+        </div>
+      </div>
+      <!-- 右侧箭头 -->
+      <div class="tuc-arrow-right" @click="handleClick('right')">
+        <img src="../../assets/icons/arrow-right.svg" alt="right" />
       </div>
     </div>
   </TOverlay>
@@ -94,7 +105,9 @@ interface ToUcDetailProps {
 interface ToUcDetailEmits {
   (e: "update:modelValue", value: boolean): void;
 
-  (e: "cancel"): void;
+  (e: "clickL"): void;
+
+  (e: "clickR"): void;
 }
 
 type fixedLenArray<T, N extends number> = [T, ...T[]] & { length: N };
@@ -214,9 +227,13 @@ const weaponBox = computed(() => {
 
 const onCancel = (): void => {
   visible.value = false;
-  emits("cancel");
+  emits("update:modelValue", false);
 };
 
+function handleClick(pos: "left" | "right") {
+  pos === "left" ? emits("clickL") : emits("clickR");
+}
+
 function showDetail(
   item:
     | TGApp.Sqlite.Character.RoleConstellation
@@ -259,6 +276,40 @@ function switchBg(): void {
 }
 </script>
 <style lang="css" scoped>
+.tuc-do-div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 10px;
+}
+
+.tuc-arrow-left,
+.tuc-arrow-right {
+  position: relative;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.dark .tuc-arrow-left,
+.dark .tuc-arrow-right {
+  filter: invert(11%) sepia(73%) saturate(11%) hue-rotate(139deg) brightness(97%) contrast(81%);
+}
+
+.tuc-arrow-left img {
+  width: 100%;
+  height: 100%;
+  transform: rotate(180deg);
+}
+
+.tuc-arrow-right img {
+  width: 100%;
+  height: 100%;
+}
+
 .tuc-do-box {
   position: relative;
   width: 500px;

src/pages/User/Characters.vue

@@ -2,7 +2,7 @@
   <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
   <div class="uc-box">
     <div class="uc-top">
-      <div class="uc-top-title">
+      <div class="uc-top-title" @click="switchOld">
         <span v-if="user">
           {{ user.nickname }} UID：{{ user.gameUid }} 更新于 {{ getUpdateTime() }}
         </span>
@@ -38,8 +38,15 @@
       />
     </div>
   </div>
-  <!--  <ToUcDetail v-model="visible" :data-val="dataVal" />-->
+  <TucDetailOverlay
+    v-if="!detailDev"
+    v-model="visible"
+    @clickL="clickOverlay('left')"
+    @clickR="clickOverlay('right')"
+    :data-val="dataVal"
+  />
   <DucDetailOverlay
+    v-if="detailDev"
     v-model="visible"
     @clickL="clickOverlay('left')"
     @clickR="clickOverlay('right')"
@@ -52,6 +59,7 @@ import { computed, onMounted, ref } from "vue";
 import DucDetailOverlay from "../../components/devCharacter/duc-detail-overlay.vue";
 import showSnackbar from "../../components/func/snackbar";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import TucDetailOverlay from "../../components/userCharacter/tuc-detail-overlay.vue";
 import TucRoleBox from "../../components/userCharacter/tuc-role-box.vue";
 import TGSqlite from "../../plugins/Sqlite";
 import { useUserStore } from "../../store/modules/user";
@@ -76,6 +84,7 @@ const roleCookie = computed(() => userStore.getCookieGroup4());
 const visible = ref(false);
 const dataVal = ref<TGApp.Sqlite.Character.UserRole>(<TGApp.Sqlite.Character.UserRole>{});
 const selectIndex = ref(0);
+const detailDev = ref(true);
 
 function clickOverlay(pos: "left" | "right") {
   if (pos === "left") {
@@ -101,6 +110,13 @@ onMounted(async () => {
   loading.value = false;
 });
 
+function switchOld(): void {
+  detailDev.value = !detailDev.value;
+  showSnackbar({
+    text: `已切换到${detailDev.value ? "新" : "旧"}版角色详情页面`,
+  });
+}
+
 async function loadRole(): Promise<void> {
   const roleData = await TGSqlite.getUserCharacter(user.gameUid);
   if (roleData !== false) {
@@ -233,6 +249,7 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole): void {
 
 .uc-top-btns {
   display: flex;
+  align-items: center;
   gap: 15px;
 }