diff --git a/app/components/ZzzCharacterAvatar.vue b/app/components/ZzzCharacterAvatar.vue
new file mode 100644
index 0000000..05f17b5
--- /dev/null
+++ b/app/components/ZzzCharacterAvatar.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { ZzzPanelAvatar } from "~/types/entities";
+
+const props = defineProps<{
+  avatar: ZzzPanelAvatar;
+  selected?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "click"): void;
+}>();
+
+const fallbackOrder = computed(() => {
+  const { select, portrait, square, circle } = props.avatar.iconUrls;
+  return [select, portrait, square, circle].filter(Boolean);
+});
+
+const imgIndex = ref(0);
+const imgSrc = computed(() => fallbackOrder.value[imgIndex.value] || "/images/default-avatar.webp");
+
+const onError = () => {
+  if (imgIndex.value < fallbackOrder.value.length - 1) {
+    imgIndex.value += 1;
+  }
+};
+
+const onClick = () => {
+  emit("click");
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    class="ik-zzz-avatar"
+    :class="{ 'is-selected': props.selected }"
+    @click="onClick"
+  >
+    <svg
+      class="ik-zzz-avatar__bg"
+      viewBox="0 0 1588 1340"
+      aria-hidden="true"
+    >
+      <path
+        class="ik-zzz-avatar__bg-fill"
+        d="m0 0h1119l29 9 17 8 15 10 10 8 11 10 9 11 9 13 9 17 7 20 43 150 19 66 26 91 17 59 26 91 20 69 32 112 19 66 41 143 16 56 15 52 33 115 16 56 15 52 13 45 2 4v7h-1117l-25-7-19-8-18-11-15-12v-2l-4-2-11-12-11-16-9-17-11-33-15-53-32-112-19-66-20-70-21-73-50-175-23-80-16-56-31-108-64-224-15-52-34-119-8-27z"
+      />
+    </svg>
+
+    <img
+      :src="imgSrc"
+      alt=""
+      class="ik-zzz-avatar__img"
+      draggable="false"
+      loading="lazy"
+      @error="onError"
+    />
+
+    <span class="ik-zzz-avatar__level">Lv.{{ avatar.level }}</span>
+  </button>
+</template>
+
+<style scoped>
+.ik-zzz-avatar {
+  position: relative;
+  flex: none;
+  width: 94px;
+  height: 80px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ik-primary);
+  cursor: pointer;
+  z-index: 1;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: pan-y;
+}
+
+.ik-zzz-avatar__bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.ik-zzz-avatar__bg-fill {
+  fill: #000;
+  transition: fill 0.15s ease;
+}
+
+.ik-zzz-avatar.is-selected .ik-zzz-avatar__bg-fill {
+  fill: var(--ik-primary);
+}
+
+.ik-zzz-avatar.is-selected:active .ik-zzz-avatar__bg-fill {
+  animation: ik-zzz-avatar-pulse 1.34s infinite;
+}
+
+@keyframes ik-zzz-avatar-pulse {
+  0%,
+  100% {
+    fill: var(--ik-primary);
+  }
+  50% {
+    fill: #9ccc00;
+  }
+}
+
+.ik-zzz-avatar__img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  padding: 4px;
+  z-index: 2;
+  pointer-events: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.ik-zzz-avatar__level {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  z-index: 3;
+  font-size: 10px;
+  font-weight: 800;
+  color: #fff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+  pointer-events: none;
+}
+
+@media (min-width: 1024px) {
+  .ik-zzz-avatar {
+    width: 172px;
+    height: 146px;
+  }
+
+  .ik-zzz-avatar__img {
+    padding: 6px;
+  }
+
+  .ik-zzz-avatar__level {
+    right: 10px;
+    bottom: 10px;
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/app/components/ZzzPanelDamage.vue b/app/components/ZzzPanelDamage.vue
new file mode 100644
index 0000000..4ceebbc
--- /dev/null
+++ b/app/components/ZzzPanelDamage.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import type { ZzzPanelDamage as ZzzDamage } from "~/types/entities";
+
+const props = defineProps<{
+  damage: ZzzDamage;
+}>();
+
+const areas = computed(() => {
+  const list = Object.entries(props.damage.details?.areas || {})
+    .sort((a, b) => b[1] - a[1]);
+  return list;
+});
+
+const formatNumber = (n: number) => {
+  if (!Number.isFinite(n)) return "0";
+  if (n >= 10000) return `${(n / 10000).toFixed(1)}万`;
+  return Math.round(n).toLocaleString("zh-CN");
+};
+</script>
+
+<template>
+  <div class="ik-zzz-damage">
+    <div class="ik-zzz-damage__summary">
+      <div class="ik-zzz-damage__card">
+        <span class="ik-zzz-damage__label">伤害指数</span>
+        <span class="ik-zzz-damage__big">{{ formatNumber(damage.damageIndex) }}</span>
+      </div>
+      <div v-if="damage.details?.selectedSkill" class="ik-zzz-damage__card">
+        <span class="ik-zzz-damage__label">参考技能</span>
+        <span class="ik-zzz-damage__skill">{{ damage.details.selectedSkill.name }}</span>
+        <span class="ik-zzz-damage__skill-type">{{ damage.details.selectedSkill.type }}</span>
+      </div>
+    </div>
+
+    <h3 class="ik-zzz-damage__title">技能期望伤害</h3>
+    <div class="ik-zzz-damage__skills">
+      <div
+        v-for="(skill, index) in damage.details?.skills || []"
+        :key="`${skill.type}-${index}`"
+        class="ik-zzz-damage__skill-row"
+      >
+        <span class="ik-zzz-damage__skill-name">{{ skill.name }}</span>
+        <span class="ik-zzz-damage__skill-crit">暴击 {{ formatNumber(skill.critDMG) }}</span>
+        <span class="ik-zzz-damage__skill-expect">期望 {{ formatNumber(skill.expectDMG) }}</span>
+      </div>
+    </div>
+
+    <h3 class="ik-zzz-damage__title">乘区分布</h3>
+    <div class="ik-zzz-damage__areas">
+      <div
+        v-for="([name, value], index) in areas"
+        :key="`${name}-${index}`"
+        class="ik-zzz-damage__area"
+      >
+        <span class="ik-zzz-damage__area-name">{{ name }}</span>
+        <div class="ik-zzz-damage__area-bar">
+          <div
+            class="ik-zzz-damage__area-fill"
+            :style="{ width: `${Math.min(Math.max(value * 100, 0), 100)}%` }"
+          ></div>
+        </div>
+        <span class="ik-zzz-damage__area-value">{{ value.toFixed(2) }}</span>
+      </div>
+    </div>
+
+    <h3 class="ik-zzz-damage__title">生效增益</h3>
+    <div class="ik-zzz-damage__buffs">
+      <div
+        v-for="(buff, index) in damage.details?.buffs || []"
+        :key="`buff-${index}`"
+        class="ik-zzz-damage__buff"
+      >
+        <span class="ik-zzz-damage__buff-name">{{ buff.name }}</span>
+        <span class="ik-zzz-damage__buff-source">{{ buff.source || buff.type }}</span>
+        <span class="ik-zzz-damage__buff-value">+{{ buff.value }}</span>
+      </div>
+    </div>
+
+    <h3 class="ik-zzz-damage__title">面板增益</h3>
+    <div class="ik-zzz-damage__buffs">
+      <div
+        v-for="(buff, index) in damage.details?.panelBuffs || []"
+        :key="`panel-${index}`"
+        class="ik-zzz-damage__buff"
+      >
+        <span class="ik-zzz-damage__buff-name">{{ buff.name }}</span>
+        <span class="ik-zzz-damage__buff-value">{{ buff.value }}<template v-if="buff.max"> / {{ buff.max }}</template></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ik-zzz-damage {
+  padding: 12px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.ik-zzz-damage__summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.ik-zzz-damage__card {
+  flex: 1;
+  min-width: 140px;
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.25);
+  gap: 4px;
+}
+
+.ik-zzz-damage__label {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.ik-zzz-damage__big {
+  font-size: 32px;
+  font-weight: 800;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+}
+
+.ik-zzz-damage__skill {
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.ik-zzz-damage__skill-type {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ik-zzz-damage__title {
+  margin: 4px 0 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.ik-zzz-damage__skills {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ik-zzz-damage__skill-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  font-size: 13px;
+}
+
+.ik-zzz-damage__skill-name {
+  color: #fff;
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ik-zzz-damage__skill-crit {
+  color: #ff9e80;
+  font-weight: 700;
+  margin-left: 8px;
+  font-variant-numeric: tabular-nums;
+}
+
+.ik-zzz-damage__skill-expect {
+  color: #10bff0;
+  font-weight: 700;
+  margin-left: 8px;
+  font-variant-numeric: tabular-nums;
+}
+
+.ik-zzz-damage__areas {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ik-zzz-damage__area {
+  display: grid;
+  grid-template-columns: 100px 1fr 64px;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+}
+
+.ik-zzz-damage__area-name {
+  color: rgba(255, 255, 255, 0.65);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ik-zzz-damage__area-bar {
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+}
+
+.ik-zzz-damage__area-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #4661fd, #10bff0);
+  transition: width 0.4s ease;
+}
+
+.ik-zzz-damage__area-value {
+  color: #fff;
+  font-weight: 700;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.ik-zzz-damage__buffs {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 8px;
+}
+
+.ik-zzz-damage__buff {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  font-size: 12px;
+}
+
+.ik-zzz-damage__buff-name {
+  color: #fff;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ik-zzz-damage__buff-source {
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 11px;
+}
+
+.ik-zzz-damage__buff-value {
+  color: #c2ff80;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/app/components/ZzzPanelDetail.vue b/app/components/ZzzPanelDetail.vue
new file mode 100644
index 0000000..2f81925
--- /dev/null
+++ b/app/components/ZzzPanelDetail.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import type { ZzzPanelAvatar } from "~/types/entities";
+
+defineProps<{
+  uid: string;
+  region: string;
+  avatar: ZzzPanelAvatar;
+}>();
+
+const activeTab = ref("properties");
+
+const elementLabel: Record<string, string> = {
+  physical: "物理",
+  fire: "火",
+  ice: "冰",
+  electric: "电",
+  ether: "以太",
+};
+
+const professionLabel: Record<string, string> = {
+  attack: "强攻",
+  stun: "击破",
+  anomaly: "异常",
+  support: "支援",
+  defense: "防护",
+  rupture: "命破",
+};
+
+const skillLevelSum = (avatar: ZzzPanelAvatar) =>
+  avatar.skills.reduce((sum, s) => sum + s.level, 0);
+</script>
+
+<template>
+  <div class="ik-zzz-detail">
+    <div class="ik-zzz-detail__header">
+      <img
+        :src="avatar.iconUrls.portrait || avatar.iconUrls.square || '/images/default-avatar.webp'"
+        alt=""
+        class="ik-zzz-detail__portrait"
+        @error="($event.target as HTMLImageElement).src = '/images/default-avatar.webp'"
+      />
+      <div class="ik-zzz-detail__info">
+        <div class="ik-zzz-detail__title-row">
+          <h1 class="ik-zzz-detail__name">{{ avatar.name }}</h1>
+          <span class="ik-zzz-detail__rarity">{{ avatar.rarityName }}</span>
+        </div>
+        <div class="ik-zzz-detail__badges">
+          <span class="ik-zzz-detail__badge" :class="`is-${avatar.element}`">{{ elementLabel[avatar.element] || avatar.element }}</span>
+          <span class="ik-zzz-detail__badge is-profession">{{ professionLabel[avatar.profession] || avatar.profession }}</span>
+          <span class="ik-zzz-detail__badge">Lv.{{ avatar.level }}</span>
+          <span class="ik-zzz-detail__badge">影画 {{ avatar.mindscape }}</span>
+          <span class="ik-zzz-detail__badge">核心技 {{ avatar.coreSkill }}</span>
+        </div>
+        <div class="ik-zzz-detail__meta">
+          <span v-if="avatar.weapon">{{ avatar.weapon.name }} Lv.{{ avatar.weapon.level }} · {{ avatar.weapon.rarityName }}</span>
+          <span>技能等级和 {{ skillLevelSum(avatar) }}</span>
+        </div>
+        <div class="ik-zzz-detail__scores">
+          <div class="ik-zzz-detail__score">
+            <span class="ik-zzz-detail__score-label">驱动盘评分</span>
+            <span class="ik-zzz-detail__score-value">{{ avatar.score.total }}<span class="ik-zzz-detail__score-max">/{{ avatar.score.max }}</span></span>
+            <span class="ik-zzz-detail__score-comment">{{ avatar.score.comment }}</span>
+          </div>
+          <div class="ik-zzz-detail__score">
+            <span class="ik-zzz-detail__score-label">练度评分</span>
+            <span class="ik-zzz-detail__score-value">{{ avatar.score.proficiencyScore }}</span>
+          </div>
+          <div class="ik-zzz-detail__score">
+            <span class="ik-zzz-detail__score-label">伤害指数</span>
+            <span class="ik-zzz-detail__score-value">{{ Math.round(avatar.damage.damageIndex || 0) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <z-tabs v-model="activeTab" class="ik-zzz-detail__tabs">
+      <z-tab-panel label="属性" name="properties">
+        <ZzzPanelProperties :properties="avatar.properties" />
+      </z-tab-panel>
+      <z-tab-panel label="装备" name="equip">
+        <ZzzPanelWeapon :weapon="avatar.weapon" />
+        <ZzzPanelDriveDiscs :discs="avatar.discs" />
+      </z-tab-panel>
+      <z-tab-panel label="伤害" name="damage">
+        <ZzzPanelDamage :damage="avatar.damage" />
+      </z-tab-panel>
+    </z-tabs>
+  </div>
+</template>
+
+<style scoped>
+.ik-zzz-detail {
+  background: rgba(18, 18, 20, 0.82);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.ik-zzz-detail__header {
+  display: flex;
+  gap: 16px;
+  padding: 20px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
+}
+
+.ik-zzz-detail__portrait {
+  width: 120px;
+  height: 140px;
+  object-fit: cover;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.3);
+  flex-shrink: 0;
+}
+
+.ik-zzz-detail__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.ik-zzz-detail__title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ik-zzz-detail__name {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 800;
+  color: #fff;
+}
+
+.ik-zzz-detail__rarity {
+  font-size: 12px;
+  font-weight: 800;
+  color: #fbfe00;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(251, 254, 0, 0.12);
+}
+
+.ik-zzz-detail__badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ik-zzz-detail__badge {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.ik-zzz-detail__badge.is-physical { background: rgba(209, 179, 255, 0.15); color: #d1b3ff; }
+.ik-zzz-detail__badge.is-fire { background: rgba(255, 158, 128, 0.15); color: #ff9e80; }
+.ik-zzz-detail__badge.is-ice { background: rgba(128, 223, 255, 0.15); color: #80dfff; }
+.ik-zzz-detail__badge.is-electric { background: rgba(194, 255, 128, 0.15); color: #c2ff80; }
+.ik-zzz-detail__badge.is-ether { background: rgba(255, 128, 212, 0.15); color: #ff80d4; }
+.ik-zzz-detail__badge.is-profession { background: rgba(255, 255, 255, 0.12); color: #fff; }
+
+.ik-zzz-detail__meta {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.ik-zzz-detail__scores {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: auto;
+  padding-top: 8px;
+}
+
+.ik-zzz-detail__score {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 90px;
+  padding: 10px 14px;
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0.25);
+}
+
+.ik-zzz-detail__score-label {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.ik-zzz-detail__score-value {
+  font-size: 22px;
+  font-weight: 800;
+  color: #fff;
+  line-height: 1.1;
+}
+
+.ik-zzz-detail__score-max {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+.ik-zzz-detail__score-comment {
+  font-size: 12px;
+  font-weight: 700;
+  color: #fbfe00;
+}
+
+.ik-zzz-detail__tabs {
+  padding: 0 16px 20px;
+}
+
+@media (max-width: 640px) {
+  .ik-zzz-detail__header {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  .ik-zzz-detail__portrait {
+    width: 100%;
+    max-width: 160px;
+    height: 180px;
+  }
+  .ik-zzz-detail__scores {
+    justify-content: center;
+  }
+}
+</style>
diff --git a/app/components/ZzzPanelDriveDiscs.vue b/app/components/ZzzPanelDriveDiscs.vue
new file mode 100644
index 0000000..c9ccb4a
--- /dev/null
+++ b/app/components/ZzzPanelDriveDiscs.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { ZzzPanelDisc } from "~/types/entities";
+
+defineProps<{
+  discs: ZzzPanelDisc[];
+}>();
+
+const slotLabel = (slot: number) => `${slot} 号位`;
+</script>
+
+<template>
+  <div class="ik-zzz-discs">
+    <div
+      v-for="disc in discs"
+      :key="disc.slot"
+      class="ik-zzz-discs__item"
+    >
+      <div class="ik-zzz-discs__header">
+        <div class="ik-zzz-discs__suit">
+          <img
+            v-if="disc.suitIconUrl"
+            :src="disc.suitIconUrl"
+            alt=""
+            class="ik-zzz-discs__suit-icon"
+            loading="lazy"
+            @error="($event.target as HTMLImageElement).style.display = 'none'"
+          />
+          <span class="ik-zzz-discs__suit-name">{{ disc.suitName || '未知套装' }}</span>
+        </div>
+        <div class="ik-zzz-discs__score">
+          <span class="ik-zzz-discs__slot">{{ slotLabel(disc.slot) }}</span>
+          <span class="ik-zzz-discs__score-value">{{ Math.round(disc.score) }}</span>
+          <span class="ik-zzz-discs__comment">{{ disc.comment }}</span>
+        </div>
+      </div>
+      <div class="ik-zzz-discs__level">+{{ disc.level }}</div>
+      <div class="ik-zzz-discs__stats">
+        <div
+          v-for="stat in disc.mainStats"
+          :key="`main-${stat.propertyId}`"
+          class="ik-zzz-discs__stat is-main"
+        >
+          <span>{{ stat.name }}</span>
+          <span>{{ stat.displayValue }}</span>
+        </div>
+        <div
+          v-for="stat in disc.subStats"
+          :key="`sub-${stat.propertyId}`"
+          class="ik-zzz-discs__stat"
+        >
+          <span>{{ stat.name }}</span>
+          <span>{{ stat.displayValue }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ik-zzz-discs {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 14px;
+  padding: 12px 0;
+}
+
+.ik-zzz-discs__item {
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 16px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.ik-zzz-discs__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.ik-zzz-discs__suit {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ik-zzz-discs__suit-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  object-fit: cover;
+  background: rgba(255, 255, 255, 0.06);
+  flex-shrink: 0;
+}
+
+.ik-zzz-discs__suit-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ik-zzz-discs__score {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.ik-zzz-discs__slot {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.ik-zzz-discs__score-value {
+  font-size: 20px;
+  font-weight: 800;
+  color: #fbfe00;
+  line-height: 1;
+}
+
+.ik-zzz-discs__comment {
+  font-size: 11px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ik-zzz-discs__level {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ik-zzz-discs__stats {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ik-zzz-discs__stat {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.ik-zzz-discs__stat.is-main {
+  color: #10bff0;
+  font-weight: 700;
+}
+
+.ik-zzz-discs__stat span:first-child {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.ik-zzz-discs__stat span:last-child {
+  font-weight: 700;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/app/components/ZzzPanelProperties.vue b/app/components/ZzzPanelProperties.vue
new file mode 100644
index 0000000..5989b54
--- /dev/null
+++ b/app/components/ZzzPanelProperties.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { ZzzPanelProperty } from "~/types/entities";
+
+defineProps<{
+  properties: ZzzPanelProperty[];
+}>();
+
+const weightClassLabel: Record<string, string> = {
+  great: "核心",
+  good: "有效",
+  useful: "可用",
+  useless: "无效",
+};
+</script>
+
+<template>
+  <div class="ik-zzz-properties">
+    <div
+      v-for="prop in properties"
+      :key="prop.propertyId"
+      class="ik-zzz-properties__row"
+      :class="`is-${prop.weightClass}`"
+    >
+      <div class="ik-zzz-properties__name">
+        {{ prop.name }}
+        <span v-if="prop.weightClass !== 'useless'" class="ik-zzz-properties__weight">{{ weightClassLabel[prop.weightClass] }}</span>
+      </div>
+      <div class="ik-zzz-properties__values">
+        <span class="ik-zzz-properties__base">{{ prop.baseDisplay }}</span>
+        <span class="ik-zzz-properties__add">{{ prop.addDisplay }}</span>
+        <span class="ik-zzz-properties__final">{{ prop.finalDisplay }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ik-zzz-properties {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 0;
+}
+
+.ik-zzz-properties__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.ik-zzz-properties__row.is-great { border-left: 3px solid #fbfe00; }
+.ik-zzz-properties__row.is-good { border-left: 3px solid #4661fd; }
+.ik-zzz-properties__row.is-useful { border-left: 3px solid rgba(255,255,255,0.25); }
+.ik-zzz-properties__row.is-useless { border-left: 3px solid rgba(255,255,255,0.08); opacity: 0.6; }
+
+.ik-zzz-properties__name {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.85);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ik-zzz-properties__weight {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.ik-zzz-properties__values {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.ik-zzz-properties__base {
+  color: rgba(255, 255, 255, 0.45);
+  min-width: 64px;
+  text-align: right;
+}
+
+.ik-zzz-properties__add {
+  color: #10bff0;
+  min-width: 64px;
+  text-align: right;
+}
+
+.ik-zzz-properties__final {
+  color: #fff;
+  min-width: 64px;
+  text-align: right;
+}
+</style>
diff --git a/app/components/ZzzPanelSwiper.vue b/app/components/ZzzPanelSwiper.vue
new file mode 100644
index 0000000..24c4384
--- /dev/null
+++ b/app/components/ZzzPanelSwiper.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import EmblaCarousel from "embla-carousel";
+import type { EmblaCarouselType } from "embla-carousel";
+import type { ZzzPanelAvatar } from "~/types/entities";
+
+const props = defineProps<{
+  avatars: ZzzPanelAvatar[];
+  modelValue: number;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", index: number): void;
+}>();
+
+const emblaRef = shallowRef<HTMLElement | null>(null);
+const emblaApi = shallowRef<EmblaCarouselType | undefined>();
+
+const destroy = () => {
+  if (emblaApi.value) {
+    emblaApi.value.destroy();
+    emblaApi.value = undefined;
+  }
+};
+
+const init = (el: HTMLElement) => {
+  destroy();
+  emblaApi.value = EmblaCarousel(el, {
+    loop: false,
+    align: "start",
+    dragFree: true,
+    dragThreshold: 6,
+  });
+};
+
+watch(
+  () => props.avatars,
+  () => {
+    nextTick(() => {
+      if (emblaRef.value) init(emblaRef.value);
+    });
+  },
+  { immediate: true, deep: false },
+);
+
+onBeforeUnmount(() => destroy());
+</script>
+
+<template>
+  <div class="ik-zzz-swiper">
+    <div ref="emblaRef" class="ik-zzz-swiper__viewport">
+      <div class="ik-zzz-swiper__track">
+        <div
+          v-for="(avatar, index) in avatars"
+          :key="avatar.id"
+          class="ik-zzz-swiper__slide"
+          :class="{ 'is-active': index === modelValue }"
+        >
+          <ZzzCharacterAvatar
+            :avatar="avatar"
+            :selected="index === modelValue"
+            @click="emit('update:modelValue', index)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ik-zzz-swiper {
+  position: relative;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.ik-zzz-swiper__viewport {
+  overflow: hidden;
+}
+
+.ik-zzz-swiper__track {
+  display: flex;
+}
+
+.ik-zzz-swiper__slide {
+  flex: 0 0 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  position: relative;
+  z-index: 1;
+}
+
+.ik-zzz-swiper__slide:last-child {
+  margin-right: 26px;
+}
+
+.ik-zzz-swiper__slide.is-active {
+  z-index: 10;
+}
+
+@media (min-width: 1024px) {
+  .ik-zzz-swiper__slide {
+    flex-basis: 134px;
+  }
+
+  .ik-zzz-swiper__slide:last-child {
+    margin-right: 40px;
+  }
+}
+</style>
diff --git a/app/components/ZzzPanelWeapon.vue b/app/components/ZzzPanelWeapon.vue
new file mode 100644
index 0000000..9e44db1
--- /dev/null
+++ b/app/components/ZzzPanelWeapon.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { ZzzPanelWeapon as ZzzWeapon } from "~/types/entities";
+
+defineProps<{
+  weapon: ZzzWeapon | null;
+}>();
+</script>
+
+<template>
+  <div class="ik-zzz-weapon">
+    <div v-if="!weapon" class="ik-zzz-weapon__empty">未装备音擎</div>
+    <template v-else>
+      <div class="ik-zzz-weapon__main">
+        <img
+          :src="weapon.iconUrl || '/images/default-avatar.webp'"
+          alt=""
+          class="ik-zzz-weapon__icon"
+          loading="lazy"
+          @error="($event.target as HTMLImageElement).src = '/images/default-avatar.webp'"
+        />
+        <div class="ik-zzz-weapon__info">
+          <div class="ik-zzz-weapon__name">{{ weapon.name }}</div>
+          <div class="ik-zzz-weapon__meta">
+            <span class="ik-zzz-weapon__rarity">{{ weapon.rarityName }}</span>
+            <span>Lv.{{ weapon.level }}</span>
+            <span>{{ weapon.star }} 星</span>
+          </div>
+        </div>
+      </div>
+      <div class="ik-zzz-weapon__stats">
+        <div v-for="stat in weapon.mainStat" :key="stat.propertyId" class="ik-zzz-weapon__stat">
+          <span class="ik-zzz-weapon__stat-name">{{ stat.name }}</span>
+          <span class="ik-zzz-weapon__stat-value">{{ stat.displayValue }}</span>
+        </div>
+        <div v-for="stat in weapon.subStat" :key="`sub-${stat.propertyId}`" class="ik-zzz-weapon__stat">
+          <span class="ik-zzz-weapon__stat-name">{{ stat.name }}</span>
+          <span class="ik-zzz-weapon__stat-value">{{ stat.displayValue }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.ik-zzz-weapon {
+  padding: 12px 0;
+}
+
+.ik-zzz-weapon__empty {
+  padding: 24px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.45);
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 14px;
+}
+
+.ik-zzz-weapon__main {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  padding: 14px;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.25);
+  margin-bottom: 12px;
+}
+
+.ik-zzz-weapon__icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  object-fit: cover;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.ik-zzz-weapon__info {
+  flex: 1;
+  min-width: 0;
+}
+
+.ik-zzz-weapon__name {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 6px;
+}
+
+.ik-zzz-weapon__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.ik-zzz-weapon__rarity {
+  color: #fbfe00;
+  font-weight: 700;
+}
+
+.ik-zzz-weapon__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.ik-zzz-weapon__stat {
+  flex: 1 1 45%;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  font-size: 13px;
+}
+
+.ik-zzz-weapon__stat-name {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.ik-zzz-weapon__stat-value {
+  font-weight: 700;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/app/composables/useApi.ts b/app/composables/useApi.ts
index 6ba333e..deef9a0 100644
--- a/app/composables/useApi.ts
+++ b/app/composables/useApi.ts
@@ -21,6 +21,7 @@ import type {
   ExamSubmitResult,
   MihoyoBinding,
   NsfwStatus,
+  ZzzPanelsResult,
   Post,
   PostCategory,
   ArticleFeed,
@@ -788,6 +789,24 @@ export function useApi() {
     return { success: data.success === true };
   };
 
+  // ── 绝区零角色面板 ────────────────────────────────
+  const getZzzPanels = async (uid: string): Promise<ZzzPanelsResult> => {
+    const response = await cachedRead(
+      ["zzz-panels", uid],
+      async () =>
+        $api("/api/zzz/panels", {
+          method: "GET",
+          query: { uid },
+        }) as Promise<ZzzPanelsResult>,
+      STALE_LIST,
+    );
+    return response as ZzzPanelsResult;
+  };
+
+  const getMyZzzPanels = async (): Promise<ZzzPanelsResult> => {
+    const response = await $api("/api/zzz/panels/me", { method: "GET" });
+    return response as ZzzPanelsResult;
+  };
   const getSelfUser = async (): Promise<Author> => {
     return cachedRead(
       qk.me.self,
@@ -2342,6 +2361,9 @@ export function useApi() {
     pollMihoyoQr,
     getMihoyoBinding,
     unbindMihoyo,
+    // 绝区零角色面板
+    getZzzPanels,
+    getMyZzzPanels,
   };
 }
 
diff --git a/app/pages/profile/[id].vue b/app/pages/profile/[id].vue
index 4a53e76..09955b9 100644
--- a/app/pages/profile/[id].vue
+++ b/app/pages/profile/[id].vue
@@ -532,9 +532,14 @@ onBeforeUnmount(() => {
 
             <div class="ik-banner__info">
               <h1 class="ik-banner__name">{{ profile.name || profile.login || "匿名用户" }}</h1>
-              <span v-if="profile.zzz?.nickname" class="ik-banner__zzz-badge" :title="`绝区零 UID ${profile.zzz.uid}`">
+              <NuxtLink
+                v-if="profile.zzz?.nickname"
+                :to="profile.isSelf ? '/zzz-panel' : `/zzz-panel/${profile.zzz.uid}`"
+                class="ik-banner__zzz-badge"
+                :title="`绝区零 UID ${profile.zzz.uid}`"
+              >
                 {{ profile.zzz.regionName || "绝区零" }}<template v-if="profile.zzz.level != null"> · Lv.{{ profile.zzz.level }}</template>
-              </span>
+              </NuxtLink>
             </div>
           </div>
 
@@ -971,12 +976,17 @@ onBeforeUnmount(() => {
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.5px;
+  text-decoration: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
 }
 
+.ik-banner__zzz-badge:hover {
+  background: rgba(191, 255, 9, 0.15);
+}
+
 /* Hidden profile badge */
 .ik-banner__hidden-badge {
   position: relative;
diff --git a/app/pages/zzz-panel/[[uid]].vue b/app/pages/zzz-panel/[[uid]].vue
new file mode 100644
index 0000000..eab2c51
--- /dev/null
+++ b/app/pages/zzz-panel/[[uid]].vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { useMessage } from "zenless-ui";
+import type { ZzzPanelAvatar, ZzzPanelsResult } from "~/types/entities";
+import { resolveErrorMessage, isNotFoundError } from "~/utils/api-error";
+
+const route = useRoute();
+const router = useRouter();
+const api = useApi();
+const message = useMessage();
+const auth = useAuthStore();
+const pageDataLoading = usePageDataLoading();
+
+const rawUid = computed(() => (route.params.uid as string | undefined) || "");
+const isSelf = computed(() => !rawUid.value);
+
+const loading = ref(false);
+const loadError = ref(false);
+const panels = ref<ZzzPanelsResult | null>(null);
+const selectedIndex = ref(0);
+
+const selectedAvatar = computed<ZzzPanelAvatar | null>(() =>
+  panels.value?.avatars[selectedIndex.value] ?? null,
+);
+
+const loadPanels = async () => {
+  loading.value = true;
+  loadError.value = false;
+  pageDataLoading.claim();
+  try {
+    const data = isSelf.value
+      ? await api.getMyZzzPanels()
+      : await api.getZzzPanels(rawUid.value);
+    panels.value = data;
+    selectedIndex.value = 0;
+  } catch (err) {
+    if (isNotFoundError(err)) {
+      showError({ statusCode: 404, message: "未找到该展柜" });
+      return;
+    }
+    loadError.value = true;
+    message.error(resolveErrorMessage(err, "获取绝区零展柜失败"));
+  } finally {
+    loading.value = false;
+    pageDataLoading.finish();
+  }
+};
+
+const onSelect = (index: number) => {
+  selectedIndex.value = index;
+};
+
+const refresh = () => {
+  if (rawUid.value) {
+    api.invalidateQueries(["zzz-panels", rawUid.value]);
+  } else {
+    api.invalidateQueries(["zzz-panels"]);
+  }
+  void loadPanels();
+};
+
+onMounted(() => {
+  if (!isSelf.value || auth.isLogin) {
+    void loadPanels();
+  } else {
+    loadError.value = true;
+  }
+});
+
+watch(isSelf, () => {
+  void loadPanels();
+});
+
+useSeoMeta({
+  title: () => (selectedAvatar.value?.name ? `${selectedAvatar.value.name} - 绝区零展柜` : "绝区零展柜"),
+  description: "在绳网查看绝区零角色展柜、属性、装备与伤害计算。",
+});
+</script>
+
+<template>
+  <div class="ik-zzz-panel">
+    <div class="ik-zzz-panel__container">
+      <div v-if="loading && !panels" class="ik-zzz-panel__skeleton">
+        <div v-for="n in 8" :key="n" class="ik-skel" style="width:72px;height:96px;border-radius:12px"></div>
+      </div>
+
+      <div v-else-if="loadError && !panels" class="ik-zzz-panel__empty">
+        <p>加载失败，请刷新重试</p>
+        <z-button size="small" @click="refresh">刷新</z-button>
+      </div>
+
+      <div v-else-if="!loading && panels?.avatars.length === 0" class="ik-zzz-panel__empty">
+        该展柜为空或已关闭
+      </div>
+
+      <template v-else-if="panels?.avatars.length">
+        <ZzzPanelSwiper
+          :avatars="panels.avatars"
+          :model-value="selectedIndex"
+          @update:model-value="onSelect"
+        />
+
+        <ZzzPanelDetail
+          v-if="selectedAvatar"
+          :uid="panels.uid"
+          :region="panels.region"
+          :avatar="selectedAvatar"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ik-zzz-panel {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  padding: 20px 0 calc(80px + env(safe-area-inset-bottom, 0px));
+}
+
+.ik-zzz-panel__container {
+  max-width: 920px;
+  margin: 0 auto;
+  padding: 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ik-zzz-panel__skeleton {
+  display: flex;
+  gap: 12px;
+  overflow: hidden;
+  padding: 8px 0;
+}
+
+.ik-zzz-panel__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 80px 20px;
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 15px;
+}
+</style>
diff --git a/app/types/entities.ts b/app/types/entities.ts
index 1d922a0..e4141a6 100644
--- a/app/types/entities.ts
+++ b/app/types/entities.ts
@@ -331,6 +331,167 @@ export interface ZzzRoleBadge {
   regionName?: string;
 }
 
+export interface ZzzPanelProperty {
+  propertyId: number;
+  name: string;
+  statKey: string;
+  isPercentage: boolean;
+  base: number;
+  add: number;
+  final: number;
+  baseDisplay: string;
+  addDisplay: string;
+  finalDisplay: string;
+  weightClass: string;
+}
+
+export interface ZzzPanelSkill {
+  index: number;
+  name: string;
+  level: number;
+}
+
+export interface ZzzPanelWeaponStat {
+  propertyId: number;
+  name: string;
+  isPercentage: boolean;
+  value: number;
+  displayValue: string;
+}
+
+export interface ZzzPanelWeapon {
+  id: number;
+  name: string;
+  level: number;
+  rarity: number;
+  rarityName: string;
+  star: number;
+  iconUrl: string;
+  mainStat: ZzzPanelWeaponStat[];
+  subStat: ZzzPanelWeaponStat[];
+}
+
+export interface ZzzPanelDiscMainStat {
+  propertyId: number;
+  name: string;
+  isPercentage: boolean;
+  level: number;
+  value: number;
+  displayValue: string;
+}
+
+export interface ZzzPanelDiscSubStat {
+  propertyId: number;
+  name: string;
+  isPercentage: boolean;
+  level: number;
+  value: number;
+  displayValue: string;
+}
+
+export interface ZzzPanelDisc {
+  slot: number;
+  id: number;
+  level: number;
+  rarity: number;
+  suitId: number;
+  suitName: string;
+  suitIconUrl: string;
+  score: number;
+  comment: string;
+  mainStats: ZzzPanelDiscMainStat[];
+  subStats: ZzzPanelDiscSubStat[];
+}
+
+export interface ZzzPanelScore {
+  total: number;
+  max: number;
+  comment: string;
+  weightRule: string;
+  propertyStats: Array<{
+    propertyId: number;
+    name: string;
+    weight: number;
+    count: number;
+    value: string;
+  }>;
+  proficiencyScore: number;
+  discScores: Array<{
+    slot: number;
+    score: number;
+    maxScore: number;
+    comment?: string;
+    mainStat?: { propertyId: number; statKey: string; weight: number };
+    subStats: Array<{
+      propertyId: number;
+      statKey: string;
+      level: number;
+      weight: number;
+      contribution: number;
+    }>;
+  }>;
+}
+
+export interface ZzzPanelDamageDetails {
+  damageIndex: number;
+  selectedSkill?: { name: string; type: string };
+  skills: Array<{ name: string; type: string; critDMG: number; expectDMG: number }>;
+  areas: Record<string, number>;
+  buffs: Array<{ name: string; source?: string; type: string; value: number }>;
+  panelBuffs: Array<{ name: string; source?: string; type: string; value: number; max: number }>;
+}
+
+export interface ZzzPanelDamage {
+  damageIndex: number;
+  finalAtk: number;
+  finalHp: number;
+  finalDef: number;
+  critRate: number;
+  critDmg: number;
+  damageBonus: number;
+  anomalyProficiency: number;
+  anomalyControl: number;
+  impact: number;
+  energyRegen: number;
+  details?: ZzzPanelDamageDetails;
+}
+
+export interface ZzzPanelAvatar {
+  id: number;
+  name: string;
+  level: number;
+  promotionLevel: number;
+  mindscape: number;
+  coreSkill: number;
+  rank: number;
+  profession: string;
+  element: string;
+  rarity: number;
+  rarityName: string;
+  iconUrls: { portrait: string; circle: string; square: string; select: string };
+  skills: ZzzPanelSkill[];
+  properties: ZzzPanelProperty[];
+  weapon: ZzzPanelWeapon | null;
+  discs: ZzzPanelDisc[];
+  baseStats: unknown;
+  buildStats: unknown;
+  score: ZzzPanelScore;
+  damage: ZzzPanelDamage;
+}
+
+export interface ZzzPanel {
+  uid: string;
+  region: string;
+  avatar: ZzzPanelAvatar;
+}
+
+export interface ZzzPanelsResult {
+  uid: string;
+  region: string;
+  count: number;
+  avatars: ZzzPanelAvatar[];
+}
+
 /** 当前用户的米游社绑定信息 */
 export interface MihoyoBinding {
   aid: string;