🌱 幽境危战页面

#157

src/components/app/t-sidebar.vue

@@ -50,12 +50,33 @@
           <img src="/source/UI/userAvatar.webp" alt="characters" class="side-icon" />
         </template>
       </v-list-item>
-      <v-list-item :title.attr="'深渊记录'" :link="true" href="/user/abyss">
-        <template #title>深渊记录</template>
-        <template #prepend>
-          <img src="/source/UI/userAbyss.webp" alt="abyss" class="side-icon" />
+      <v-menu :open-on-click="true" location="end" :offset="[8, 0]">
+        <template #activator="{ props }">
+          <v-list-item :title.attr="'高难挑战'" v-bind="props">
+            <template #title>高难挑战</template>
+            <template #prepend>
+              <img src="/source/UI/userAbyssLab.webp" alt="abyssLab" class="side-icon" />
+            </template>
+          </v-list-item>
         </template>
-      </v-list-item>
+        <v-list class="side-list-menu sub" density="compact" :nav="true">
+          <v-list-item class="side-item-menu" title="深境螺旋" :link="true" href="/user/abyss">
+            <template #prepend>
+              <img src="/source/UI/userAbyss.webp" alt="abyss" class="side-icon-menu" />
+            </template>
+          </v-list-item>
+          <v-list-item class="side-item-menu" title="真境剧诗" :link="true" href="/user/weapons/my">
+            <template #prepend>
+              <img src="/source/UI/userCombat.webp" alt="combat" class="side-icon-menu" />
+            </template>
+          </v-list-item>
+          <v-list-item class="side-item-menu" title="幽境危战" :link="true" href="/user/challenge">
+            <template #prepend>
+              <img src="/source/UI/userChallenge.webp" alt="challenge" class="side-icon-menu" />
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-menu>
       <v-list-item :title.attr="'祈愿记录'" :link="true" href="/user/gacha">
         <template #title>祈愿记录</template>
         <template #prepend>

src/components/userChallenge/tuc-pop-item.vue

@@ -0,0 +1,77 @@
+<!-- 幽境危战赋光之人 -->
+<template>
+  <div class="tuc-pop-item-comp" :title="props.avatar.name">
+    <div class="bg">
+      <img :src="bg" alt="Avatar" />
+    </div>
+    <div class="icon">
+      <TMiImg :src="icon" :alt="props.avatar.name" :ori="true" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import TMiImg from "@comp/app/t-mi-img.vue";
+import { computed } from "vue";
+
+import { AppCharacterData } from "@/data/index.js";
+
+type TucPopItemProps = { avatar: TGApp.Game.Challenge.PopularityItem };
+
+const props = defineProps<TucPopItemProps>();
+const avatarR = computed<TGApp.App.Character.WikiBriefInfo | undefined>(() => {
+  const find = AppCharacterData.find((i) => i.id === props.avatar.avatar_id);
+  if (find) return find;
+  return undefined;
+});
+const bg = computed<string>(() => {
+  if (avatarR.value) return `/icon/bg/${avatarR.value.star}-BGC.webp`;
+  return `/icon/bg/${props.avatar.rarity > 5 ? 5 : props.avatar.rarity}-BGC.webp`;
+});
+const icon = computed<string>(() => {
+  if (avatarR.value) return `/WIKI/character/${avatarR.value.id}.webp`;
+  return props.avatar.image;
+});
+</script>
+<style lang="scss" scoped>
+.tuc-pop-item-comp {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  align-items: flex-end;
+  justify-content: center;
+  border-radius: 50%;
+
+  &:hover {
+    filter: brightness(0.9);
+  }
+}
+
+.bg {
+  position: absolute;
+  z-index: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.icon {
+  position: relative;
+  z-index: 1;
+  width: 36px;
+  height: 36px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>