✨ 添加角色列表数据

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="tuc-rb-box">
+    <div class="tuc-rb-top">
+      <TItemBox v-model="avatarBox" @click="showAvatarData" />
+      <TItemBox v-model="weaponBox" @click="showWeaponData" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import TItemBox from "../main/t-itembox.vue";
+
+interface TucRoleBoxProps {
+  modelValue: TGApp.Sqlite.Character.UserRole;
+}
+
+const props = defineProps<TucRoleBoxProps>();
+const avatarBox = computed(() => {
+  return {
+    size: "80px",
+    height: "80px",
+    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: `${getAvatarName()}`,
+    innerHeight: 20,
+    display: "inner",
+  };
+});
+const weaponBox = computed(() => {
+  const weapon = JSON.parse(props.modelValue.weapon) as TGApp.Sqlite.Character.RoleWeapon;
+  return {
+    size: "80px",
+    height: "80px",
+    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: `${weapon.name}`,
+    innerHeight: 20,
+    display: "inner",
+  };
+});
+
+function getAvatarName () {
+  return (
+    props.modelValue.cid === 10000005
+      ? "旅行者-空"
+      : props.modelValue.cid === 10000007
+        ? "旅行者-荧"
+        : props.modelValue.name
+  );
+}
+
+function showAvatarData () {
+  console.log(avatarBox.value);
+}
+
+function showWeaponData () {
+  const weapon = JSON.parse(props.modelValue.weapon) as TGApp.Sqlite.Character.RoleWeapon;
+  console.log(weapon);
+}
+</script>
+<style lang="css" scoped>
+.tuc-rb-box {
+  padding: 5px;
+  box-shadow: 0 0 10px var(--common-bg-4);
+  border: 1px inset var(--common-bg-4);
+  border-radius: 5px;
+  position: relative;
+}
+
+.tuc-rb-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+</style>