diff --git a/src/assets/index.css b/src/assets/index.css
index 00b630f8..821591a2 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -1,7 +1,7 @@
 /*
  * @file assets/index.css
  * @description 全局样式文件
- * @since Beta v0.3.5
+ * @since Beta v0.5.3
  */
 
 @import "fonts/index.css";
@@ -37,6 +37,14 @@
   --tgc-yellow-2: #f4d8a8; /* Genshin confirm text */
   --tgc-yellow-3: #e0c06b; /* Genshin btn border */
 
+  /* color one-dark */
+  --tgc-od-blue: #61afef; /* one-dark blue */
+  --tgc-od-green: #98c379; /* one-dark green */
+  --tgc-od-orange: #d19a66; /* one-dark orange */
+  --tgc-od-white: #abb2bf; /* one-dark white */
+  --tgc-od-red: #e06c75; /* one-dark red */
+  --tgc-od-purple: #c678dd; /* one-dark purple */
+
   /* some css same in dark and default theme */
   --tgc-btn-1: var(--tgc-dark-7); /* button bg */
 }
diff --git a/src/components/userAvatar/tua-avatar-box.vue b/src/components/userAvatar/tua-avatar-box.vue
new file mode 100644
index 00000000..b530daa6
--- /dev/null
+++ b/src/components/userAvatar/tua-avatar-box.vue
@@ -0,0 +1,414 @@
+<template>
+  <div class="tua-ab-box">
+    <!-- 左侧角色、武器、天赋、好感、衣装、名片 -->
+    <div class="tua-ab-left">
+      <div class="tua-abl-top">
+        <TItembox v-model="avatarBox" />
+        <TItembox v-model="weaponBox" />
+      </div>
+      <div class="tua-abl-mid">
+        <div class="tua-abl-fetter">
+          <img src="/icon/material/105.webp" alt="fetter" />
+          <span>{{ props.modelValue.base.fetter }}</span>
+        </div>
+        <div class="tua-abl-other">
+          <span v-if="!isFetterMax">
+            <v-icon>mdi-lock-outline</v-icon>
+          </span>
+          <span v-if="props.modelValue.costumes.length > 0">
+            <v-icon>mdi-tshirt-crew-outline</v-icon>
+          </span>
+        </div>
+      </div>
+      <div class="tua-abl-bottom">
+        <div class="tua-abl-bg">
+          <img v-if="nameCard !== false && isFetterMax" :src="nameCard" alt="nameCard" />
+        </div>
+        <div class="tua-abl-skills">
+          <div v-for="skill in skills" :key="skill.skill_id" class="tua-abl-skill">
+            <img :src="skill.icon" alt="skill" />
+            <span>Lv.{{ skill.level }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 右侧圣遗物及套装 -->
+    <div class="tua-ab-right">
+      <div v-for="(relic, index) in relicsBox" :key="index" class="tua-abr-relic">
+        <!-- 左侧icon 及等级 -->
+        <div class="tua-relic-left">
+          <div class="tua-rl-icon">
+            <img :src="`/icon/relic/${index + 1}.webp`" alt="relic" v-if="relic === false" />
+            <img :src="relic.icon" alt="relic" v-if="relic !== false" />
+          </div>
+          <div class="tua-rl-bg" v-if="relic !== false">
+            <img :src="`/icon/bg/${relic.rarity}-Star.webp`" alt="bg" />
+          </div>
+          <div :class="`tua-rl-relic rarity${relic.rarity}`" v-if="relic !== false">
+            {{ relic.level }}
+          </div>
+        </div>
+        <!-- 右侧数值及加成 -->
+        <div class="tua-relic-right">
+          <div class="tua-relic-name">
+            {{ relic === false ? getRelicName(index) : getPropName(relic) }}
+          </div>
+          <div class="tua-relic-prop">
+            {{ relic !== false ? relic.main_property.value : "" }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+
+import TGSqlite from "../../plugins/Sqlite/index.js";
+import { useUserStore } from "../../store/modules/user.js";
+import { getZhElement } from "../../utils/toolFunc.js";
+import TItembox, { TItemBoxData } from "../main/t-itembox.vue";
+
+interface TuaAvatarBoxProps {
+  modelValue: TGApp.Game.Avatar.DetailList;
+}
+
+type FixedLenArr<T, N extends number> = [T, ...T[]] & { length: N };
+type AvatarRelics = FixedLenArr<TGApp.Game.Avatar.Relic | false, 5>;
+
+const props = defineProps<TuaAvatarBoxProps>();
+const userStore = useUserStore();
+
+const avatarBox = computed<TItemBoxData>(() => {
+  const avatar = props.modelValue.base;
+  return {
+    size: "100px",
+    height: "120px",
+    ltSize: "30px",
+    bg: `/icon/bg/${avatar.rarity}-Star.webp`,
+    icon: `/WIKI/character/${avatar.id}.webp`,
+    lt: `/icon/element/${getZhElement(avatar.element)}元素.webp`,
+    rt: avatar.actived_constellation_num.toString() || "0",
+    rtSize: "20px",
+    innerText: `Lv.${avatar.level}`,
+    innerHeight: 20,
+    outerText: avatar.name,
+    outerHeight: 20,
+    display: "outer",
+    clickable: true,
+  };
+});
+const weaponBox = computed<TItemBoxData>(() => {
+  const weapon = props.modelValue.weapon;
+  return {
+    size: "100px",
+    height: "120px",
+    ltSize: "30px",
+    bg: `/icon/bg/${weapon.rarity}-Star.webp`,
+    icon: `/WIKI/weapon/${weapon.id}.webp`,
+    lt: `/icon/weapon/${weapon.type_name}.webp`,
+    rt: weapon.affix_level.toString() || "0",
+    rtSize: "20px",
+    innerText: `Lv.${weapon.level}`,
+    innerHeight: 20,
+    outerText: weapon.name,
+    outerHeight: 20,
+    display: "outer",
+    clickable: true,
+  };
+});
+const isFetterMax = computed<boolean>(() => {
+  if (props.modelValue.base.id === 10000005 || props.modelValue.base.id === 10000007) {
+    return true;
+  }
+  return props.modelValue.base.fetter === 10;
+});
+const skills = computed<TGApp.Game.Avatar.Skill[]>(() => {
+  return props.modelValue.skills.filter((skill) => skill.skill_type === 1);
+});
+const relicsBox = computed<AvatarRelics>(() => {
+  const relics = props.modelValue.relics;
+  return [
+    relics.find((relic) => relic.pos === 1) || false,
+    relics.find((relic) => relic.pos === 2) || false,
+    relics.find((relic) => relic.pos === 3) || false,
+    relics.find((relic) => relic.pos === 4) || false,
+    relics.find((relic) => relic.pos === 5) || false,
+  ];
+});
+
+const nameCard = ref<string | false>(false);
+
+onMounted(async () => {
+  if (!props.modelValue) return;
+  if (props.modelValue.base.id !== 10000005 && props.modelValue.base.id !== 10000007) {
+    const role = await TGSqlite.getAppCharacter(props.modelValue.base.id);
+    nameCard.value = `/source/nameCard/profile/${role.nameCard}.webp`;
+  } else {
+    nameCard.value = "/source/nameCard/profile/原神·印象.webp";
+  }
+});
+
+function getRelicName(pos: number): string {
+  const nameList = ["生之花", "死之羽", "时之沙", "空之杯", "理之冠"];
+  return nameList[pos];
+}
+
+function getPropName(relic: TGApp.Game.Avatar.Relic): string {
+  const prop = userStore.getProp(relic.main_property.property_type);
+  return prop === false ? "" : prop.name;
+}
+</script>
+<style lang="css" scoped>
+.tua-ab-box {
+  position: relative;
+  display: flex;
+  width: fit-content;
+  padding: 5px;
+  border: 1px inset var(--common-shadow-2);
+  border-radius: 5px;
+  background: var(--box-bg-2);
+  column-gap: 5px;
+  transition: all 0.3s;
+}
+
+.tua-ab-left {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  row-gap: 5px;
+}
+
+.tua-abl-top {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tua-abl-mid {
+  display: flex;
+  width: 100%;
+  height: 30px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  border-radius: 5px;
+  background: var(--box-bg-3);
+  font-family: var(--font-title);
+  font-size: 12px;
+}
+
+.tua-abl-fetter {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: 5px;
+
+  img {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
+}
+
+.tua-abl-other {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: var(--box-text-4);
+  column-gap: 5px;
+}
+
+.tua-abl-bottom {
+  position: relative;
+  width: 100%;
+  height: 80px;
+  align-items: center;
+  border-radius: 5px;
+}
+
+.tua-abl-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  background: var(--box-bg-3);
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    object-fit: fill;
+  }
+}
+
+.tua-abl-skills {
+  position: relative;
+  display: flex;
+  width: 210px;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+.tua-abl-skill {
+  display: flex;
+  width: 50px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  row-gap: 5px;
+
+  :first-child {
+    position: relative;
+    display: flex;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    border: 1px solid var(--box-bg-4);
+    border-radius: 50%;
+    background: var(--tgc-dark-7);
+    opacity: 0.8;
+  }
+
+  :last-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-right: 5px;
+    padding-left: 5px;
+    border-radius: 5px;
+    background: var(--box-bg-4);
+    color: var(--box-text-4);
+    font-family: var(--font-title);
+    font-size: 12px;
+  }
+}
+
+.tua-ab-right {
+  display: grid;
+  column-gap: 5px;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.tua-abr-relic {
+  display: flex;
+  width: 180px;
+  height: 60px;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 5px;
+}
+
+.tua-relic-left {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: rgb(50 56 68/50%);
+}
+
+.tua-rl-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  :nth-child(1) {
+    padding: 5px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+}
+
+.tua-rl-bg {
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+}
+
+.tua-rl-relic {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  box-shadow: 0 0 5px var(--tgc-dark-1);
+  color: var(--tgc-white-1);
+  font-family: var(--font-title);
+  font-size: 12px;
+  line-height: 1;
+  text-shadow: 0 0 5px var(--tgc-dark-1);
+}
+
+.tua-rl-relic.rarity0 {
+  background: var(--tgc-od-white);
+}
+
+.tua-rl-relic.rarity1 {
+  background: var(--tgc-od-white);
+}
+
+.tua-rl-relic.rarity2 {
+  background: var(--tgc-od-green);
+}
+
+.tua-rl-relic.rarity3 {
+  background: var(--tgc-od-blue);
+}
+
+.tua-rl-relic.rarity4 {
+  background: var(--tgc-od-purple);
+}
+
+.tua-rl-relic.rarity5 {
+  background: var(--tgc-od-orange);
+}
+
+.tua-relic-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  row-gap: 5px;
+}
+
+.tua-relic-name {
+  color: var(--box-text-4);
+  font-family: var(--font-title);
+  font-size: 16px;
+}
+
+.tua-relic-prop {
+  color: var(--box-text-4);
+  font-size: 12px;
+}
+</style>
diff --git a/src/pages/common/Test.vue b/src/pages/common/Test.vue
index 85c1c394..64798c68 100644
--- a/src/pages/common/Test.vue
+++ b/src/pages/common/Test.vue
@@ -18,15 +18,22 @@
       <v-btn class="test-btn" @click="tryGetList">获取角色列表</v-btn>
       <v-btn class="test-btn" @click="tryGetDetail">获取角色详情</v-btn>
     </div>
+    <div class="test-grid">
+      <TuaAvatarBox v-for="avatar in avatarList" :key="avatar.base.id" :model-value="avatar" />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import showSnackbar from "../../components/func/snackbar.js";
+import TuaAvatarBox from "../../components/userAvatar/tua-avatar-box.vue";
 import TSUserAvatar from "../../plugins/Sqlite/modules/userAvatar.js";
 import { useUserStore } from "../../store/modules/user.js";
 import TGRequest from "../../web/request/TGRequest.js";
 
 const userStore = useUserStore();
+const avatarList = ref<TGApp.Game.Avatar.DetailList[]>();
 
 async function tryGetList(): Promise<void> {
   const ck = userStore.cookie;
@@ -62,6 +69,7 @@ async function tryGetDetail(): Promise<void> {
   console.log(res);
   showSnackbar({ text: "获取成功！", color: "success" });
   userStore.propMap = res.property_map;
+  avatarList.value = res.list;
 }
 </script>
 <style lang="css" scoped>
@@ -119,4 +127,10 @@ async function tryGetDetail(): Promise<void> {
 .test-4 {
   background: var(--box-bg-4);
 }
+
+.test-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
 </style>
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 3a7c8bc1..e6ad2750 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -56,12 +56,18 @@ export const useUserStore = defineStore(
       return res;
     }
 
+    function getProp(prop: number): TGApp.Game.Avatar.PropMapItem | false {
+      if (!propMap.value) return false;
+      return propMap.value[prop.toString()] || false;
+    }
+
     return {
       cookie,
       briefInfo,
       account,
       propMap,
       getAllCookie,
+      getProp,
     };
   },
   {
diff --git a/src/utils/toolFunc.ts b/src/utils/toolFunc.ts
index eb6a8155..9ba12e15 100644
--- a/src/utils/toolFunc.ts
+++ b/src/utils/toolFunc.ts
@@ -224,3 +224,31 @@ export function parseHtmlText(desc: string): string {
   desc = desc.replace(/\\n/g, "<br />");
   return desc;
 }
+
+/**
+ * @description 根据英文element获取中文
+ * @since Beta v0.5.3
+ * @param {string} element - 英文element
+ * @returns {string} 中文element
+ */
+export function getZhElement(element: string): string {
+  const elementUpper = element.toUpperCase();
+  switch (elementUpper) {
+    case "ANEMO":
+      return "风";
+    case "CRYO":
+      return "冰";
+    case "DENDRO":
+      return "草";
+    case "ELECTRO":
+      return "雷";
+    case "GEO":
+      return "岩";
+    case "HYDRO":
+      return "水";
+    case "PYRO":
+      return "火";
+    default:
+      return "未知";
+  }
+}