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

close #20

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

@@ -1,5 +1,11 @@
 <template>
   <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+    <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-box">
         <div class="tuc-do-bg">
           <img
@@ -73,6 +79,11 @@
           </div>
         </div>
       </div>
+      <!-- 右侧箭头 -->
+      <div class="tuc-arrow-right" @click="handleClick('right')">
+        <img src="../../assets/icons/arrow-right.svg" alt="right" />
+      </div>
+    </div>
   </TOverlay>
 </template>
 <script lang="ts" setup>
@@ -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;
 }