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

<template>
  <div class="tuc-rb-box">
    <div class="tuc-rb-top">
      <TItemBox v-model="avatarBox" />
      <TItemBox v-model="weaponBox" />
    </div>
    <div class="tuc-rb-bottom">
      <!-- bg 好感名片 -->
      <div v-if="nameCard !== false" class="tuc-rbb-bg">
        <img :src="nameCard" alt="nameCard" />
      </div>
      <!-- 表面 lock -->
      <div v-if="props.modelValue.fetter !== 10" class="tuc-rbb-lock">
        <v-icon size="20" color="var(--page-bg)"> mdi-lock </v-icon>
      </div>
      <!-- 左上角好感等级 -->
      <div class="tuc-rbb-fetter">
        <img src="/icon/material/105.webp" alt="fetter" />
        <span>{{ props.modelValue.fetter }}</span>
        <!-- 衣装 icon -->
        <span v-if="props.modelValue.costume !== '[]'">
          <v-icon>mdi-tshirt-crew-outline</v-icon>
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// vue
import { computed, onMounted, ref } from "vue";
import TItemBox from "../main/t-itembox.vue";
// utils
import TGSqlite from "../../plugins/Sqlite";

interface TucRoleBoxProps {
  modelValue: TGApp.Sqlite.Character.UserRole;
}

const props = defineProps<TucRoleBoxProps>();

const avatarBox = computed(() => {
  return {
    size: "80px",
    height: "100px",
    ltSize: "30px",
    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
    icon: `/WIKI/character/icon/${props.modelValue.cid}.webp`,
    lt: `/icon/element/${props.modelValue.element}.webp`,
    rt: props.modelValue.activeConstellation.toString() || "0",
    rtSize: "20px",
    innerText: `Lv.${props.modelValue.level}`,
    innerHeight: 20,
    outerText: getAvatarName(),
    outerHeight: 20,
    display: "outer" as "outer",
  };
});
const weaponBox = computed(() => {
  const weapon = JSON.parse(props.modelValue.weapon) as TGApp.Sqlite.Character.RoleWeapon;
  return {
    size: "80px",
    height: "100px",
    ltSize: "30px",
    bg: `/icon/bg/${weapon.star}-Star.webp`,
    icon: `/WIKI/weapon/icon/${weapon.id}.webp`,
    lt: `/icon/weapon/${weapon.type}.webp`,
    rt: weapon.affix.toString() || "0",
    rtSize: "20px",
    innerText: `Lv.${weapon.level}`,
    innerHeight: 20,
    outerText: weapon.name,
    outerHeight: 20,
    display: "outer" as "outer",
  };
});
const nameCard = ref(false as string | false);

onMounted(async () => {
  if (props.modelValue.cid === 10000005 || props.modelValue.cid === 10000007) return;
  const role = await TGSqlite.getAppCharacter(props.modelValue.cid);
  nameCard.value = `/source/nameCard/profile/${role.nameCard}.webp`;
});

function getAvatarName() {
  return props.modelValue.cid === 10000005
    ? "旅行者-空"
    : props.modelValue.cid === 10000007
    ? "旅行者-荧"
    : props.modelValue.name;
}
</script>
<style lang="css" scoped>
.tuc-rb-box {
  position: relative;
  padding: 5px;
  border: 1px inset var(--common-shadow-4);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.tuc-rb-box:hover {
  box-shadow: 0 0 10px var(--common-color-yellow);
}

.tuc-rb-top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.tuc-rb-bottom {
  position: relative;
  width: 100%;
  height: 80px;
  align-items: center;
  border-radius: 5px;
  margin-top: 5px;
}

.tuc-rbb-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.tuc-rbb-bg img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: contain;
}

.tuc-rbb-lock {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  backdrop-filter: blur(5px);
  background: var(--common-shadow-4);
}

.tuc-rbb-fetter {
  position: absolute;
  top: 5px;
  left: 5px;
  display: flex;
  width: calc(100% - 10px);
  height: 20px;
  align-items: center;
  justify-content: start;
  border-radius: 5px;
  background: rgb(0 0 0 / 50%);
  color: var(--common-color-yellow);
}

.tuc-rbb-fetter :nth-child(1) {
  margin: 0 5px;
}

.tuc-rbb-fetter :nth-child(3) {
  margin-left: auto;
  font-size: 12px;
}

.tuc-rbb-fetter img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
</style>