diff --git a/frontendNew/src/components/dnf/Equipment/Icon/index.vue b/frontendNew/src/components/dnf/Equipment/Icon/index.vue
new file mode 100644
index 00000000..4bfe601b
--- /dev/null
+++ b/frontendNew/src/components/dnf/Equipment/Icon/index.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { IEquipment } from "@/api/info/type";
+import { getImageURL } from "@/utils";
+
+const props = defineProps<{
+  equipment?: IEquipment;
+  inactive?: boolean;
+  useDisplayUrl?: boolean;
+}>();
+
+const rarity = computed(() => {
+  switch (props.equipment?.rarity) {
+    case "稀有":
+      return "rare";
+    case "神器":
+      return "artifact";
+    case "传说":
+      return "legend";
+    case "史诗":
+      return "epic";
+    case "太初":
+      return "primeval";
+    default:
+      return "";
+  }
+});
+
+const imagePath = computed(() => {
+  if (!props.equipment) return "";
+  const path = props.useDisplayUrl ? props.equipment.displayUrl : props.equipment.imageUrl;
+  return path ? getImageURL(path) : "";
+});
+
+const getRarityFrame = (value: string) => {
+  if (!value) return "";
+  return new URL(`./rarity/${value}.png`, import.meta.url).href;
+};
+</script>
+
+<template>
+  <template v-if="equipment">
+    <div class="legacy-icon" :class="{ inactive }">
+      <div class="legacy-icon-core" :style="{ backgroundImage: `url(${imagePath})` }">
+        <img v-if="rarity" :src="getRarityFrame(rarity)" :alt="rarity" class="legacy-icon-frame" />
+      </div>
+    </div>
+  </template>
+  <template v-else>
+    <div class="legacy-icon-empty" />
+  </template>
+</template>
+
+<style scoped>
+.legacy-icon {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.legacy-icon-core {
+  width: calc(100% + 2px);
+  height: calc(100% + 2px);
+  margin-left: -1px;
+  margin-top: -1px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.legacy-icon-frame {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.legacy-icon-empty {
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(122, 122, 122, 0.5);
+}
+
+.inactive::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.56);
+}
+</style>
diff --git a/frontendNew/src/components/dnf/Equipment/Icon/rarity/artifact.png b/frontendNew/src/components/dnf/Equipment/Icon/rarity/artifact.png
new file mode 100644
index 00000000..12d0d063
Binary files /dev/null and b/frontendNew/src/components/dnf/Equipment/Icon/rarity/artifact.png differ
diff --git a/frontendNew/src/components/dnf/Equipment/Icon/rarity/epic.png b/frontendNew/src/components/dnf/Equipment/Icon/rarity/epic.png
new file mode 100644
index 00000000..9166969d
Binary files /dev/null and b/frontendNew/src/components/dnf/Equipment/Icon/rarity/epic.png differ
diff --git a/frontendNew/src/components/dnf/Equipment/Icon/rarity/legend.png b/frontendNew/src/components/dnf/Equipment/Icon/rarity/legend.png
new file mode 100644
index 00000000..8162c33b
Binary files /dev/null and b/frontendNew/src/components/dnf/Equipment/Icon/rarity/legend.png differ
diff --git a/frontendNew/src/components/dnf/Equipment/Icon/rarity/primeval.png b/frontendNew/src/components/dnf/Equipment/Icon/rarity/primeval.png
new file mode 100644
index 00000000..2efcc308
Binary files /dev/null and b/frontendNew/src/components/dnf/Equipment/Icon/rarity/primeval.png differ
diff --git a/frontendNew/src/components/dnf/Equipment/Icon/rarity/rare.png b/frontendNew/src/components/dnf/Equipment/Icon/rarity/rare.png
new file mode 100644
index 00000000..618085ed
Binary files /dev/null and b/frontendNew/src/components/dnf/Equipment/Icon/rarity/rare.png differ
diff --git a/frontendNew/src/components/dnf/Equipment/List/index.vue b/frontendNew/src/components/dnf/Equipment/List/index.vue
new file mode 100644
index 00000000..c8eef417
--- /dev/null
+++ b/frontendNew/src/components/dnf/Equipment/List/index.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts" name="EquList">
+import { computed } from "vue";
+import { useInfoStore, type IConfigEquip } from "@/stores";
+import { getImageURL } from "@/utils";
+import LegacyEquipmentIcon from "@/components/dnf/Equipment/Icon/index.vue";
+
+const baseWidth = 264;
+const baseHeight = 172;
+
+const props = withDefaults(
+  defineProps<{
+    withBg?: boolean;
+    withPet?: boolean;
+    detail?: Record<string, IConfigEquip>;
+    withSubWeapon?: boolean;
+    avatar?: string;
+  }>(),
+  {
+    withBg: true,
+    withPet: true,
+    withSubWeapon: false,
+    avatar: "",
+  },
+);
+
+const partModelValue = defineModel<string>("part", { default: "" });
+const infoStore = useInfoStore();
+
+const parts = computed(() => {
+  return infoStore.parts.filter((part) => {
+    if (part === "宠物" && !props.withPet) return false;
+    return !!props.detail?.[part];
+  });
+});
+
+const equ = (id: string) => infoStore.equips.find((item) => item.id === id);
+
+const infoStyle = (part: string) => {
+  let x = 10;
+  let y = 10;
+  let index = infoStore.parts.findIndex((current) => current === part);
+
+  if (index === 13) {
+    index -= 7;
+  } else if (index >= 5 && index <= 12) {
+    x += 179;
+    index -= 5;
+  }
+
+  x += (index % 2) * 39;
+  y += Math.floor(index / 2) * 34;
+
+  return {
+    left: `${(x / baseWidth) * 100}%`,
+    top: `${(y / baseHeight) * 100}%`,
+    zIndex: 6,
+  };
+};
+
+const choosePart = (part: string) => {
+  partModelValue.value = part;
+};
+
+const partName = (part: string) => {
+  if (part === "辅助装备") return "左槽";
+  if (part === "魔法石") return "右槽";
+  return part;
+};
+</script>
+
+<template>
+  <div
+    class="equ-list"
+    :class="{ 'equ-list--plain': !withBg }"
+    :style="{
+      backgroundImage: withBg ? `url(${getImageURL('/common/head.png')})` : 'none',
+    }"
+  >
+    <template v-for="part in parts" :key="part">
+      <button class="equ-slot" :style="infoStyle(part)" type="button" @click="choosePart(part)">
+        <template v-if="detail?.[part]?.id">
+          <LegacyEquipmentIcon :equipment="equ(detail[part].id)" />
+        </template>
+        <template v-else>
+          <span class="equ-slot-text">{{ partName(part) }}</span>
+        </template>
+      </button>
+    </template>
+
+    <button
+      v-if="withSubWeapon"
+      class="equ-slot"
+      :style="{ left: `${(150 / baseWidth) * 100}%`, top: `${(5 / baseHeight) * 100}%`, zIndex: 8 }"
+      type="button"
+      @click="choosePart('副武器')"
+    >
+      <template v-if="detail?.['副武器']?.id">
+        <LegacyEquipmentIcon :equipment="equ(detail['副武器'].id)" />
+      </template>
+      <template v-else>
+        <span class="equ-slot-text">副武</span>
+      </template>
+    </button>
+
+    <img v-if="avatar" :src="avatar" alt="Avatar" class="equ-avatar" />
+  </div>
+</template>
+
+<style scoped>
+.equ-list {
+  position: relative;
+  width: min(100%, 264px);
+  aspect-ratio: 264 / 172;
+  flex: 0 0 auto;
+  border: 1px solid rgba(85, 72, 46, 0.55);
+  box-shadow:
+    inset 0 0 0 1px rgba(24, 20, 14, 0.8),
+    0 8px 20px rgba(0, 0, 0, 0.32);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.equ-list::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 50% 8%, rgba(88, 161, 255, 0.24), transparent 35%),
+    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.28));
+}
+
+.equ-list--plain {
+  background:
+    linear-gradient(180deg, rgba(19, 21, 24, 0.96), rgba(10, 10, 12, 0.98)),
+    radial-gradient(circle at 50% 0, rgba(55, 95, 138, 0.24), transparent 45%);
+}
+
+.equ-slot {
+  position: absolute;
+  box-sizing: border-box;
+  width: 9.848%;
+  height: 15.116%;
+  border: 1px solid rgba(122, 122, 122, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(255 255 255 / 0.5);
+  background: rgba(0, 0, 0, 0.16);
+  padding: 0;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.equ-slot:hover {
+  border-color: rgba(229, 196, 113, 0.72);
+  box-shadow:
+    0 0 0 1px rgba(229, 196, 113, 0.38),
+    inset 0 0 8px rgba(255, 210, 122, 0.22);
+  background: rgba(47, 35, 14, 0.28);
+}
+
+.equ-slot:focus-visible {
+  outline: none;
+  border-color: rgba(235, 211, 141, 0.88);
+  box-shadow:
+    0 0 0 2px rgba(235, 211, 141, 0.35),
+    inset 0 0 8px rgba(255, 210, 122, 0.25);
+}
+
+.equ-slot-text {
+  font-size: 0.6rem;
+  line-height: 1;
+}
+
+.equ-avatar {
+  position: absolute;
+  width: 70%;
+  left: 50%;
+  bottom: -5.814%;
+  transform: translateX(-50%);
+}
+</style>
diff --git a/frontendNew/src/components/dnf/Equipment/Oath/index.vue b/frontendNew/src/components/dnf/Equipment/Oath/index.vue
new file mode 100644
index 00000000..91e8ea01
--- /dev/null
+++ b/frontendNew/src/components/dnf/Equipment/Oath/index.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts" name="OathList">
+import { computed } from "vue";
+import { useInfoStore, type IConfigOath } from "@/stores";
+import { getImageURL } from "@/utils";
+import LegacyEquipmentIcon from "@/components/dnf/Equipment/Icon/index.vue";
+
+const baseWidth = 264;
+const baseHeight = 172;
+
+const props = withDefaults(
+  defineProps<{
+    withBg?: boolean;
+    detail?: Record<string, IConfigOath>;
+  }>(),
+  {
+    withBg: true,
+  },
+);
+
+const partModelValue = defineModel<string>("part", { default: "0" });
+const infoStore = useInfoStore();
+
+const parts = computed(() => infoStore.oathParts);
+
+const equ = (id: string, part: string) =>
+  infoStore.oaths.find((item) => item.id === id && item.oathPos === part);
+
+const position = [
+  { x: 31, y: 13 },
+  { x: 31, y: 46 },
+  { x: 31, y: 79 },
+  { x: 31, y: 112 },
+  { x: 207, y: 13 },
+  { x: 207, y: 46 },
+  { x: 207, y: 79 },
+  { x: 207, y: 112 },
+  { x: 75, y: 128.5 },
+  { x: 119, y: 141.5 },
+  { x: 163, y: 128.5 },
+  { x: 119, y: 109 },
+];
+
+const positionSimple = [
+  { x: 30, y: 12 },
+  { x: 30, y: 46 },
+  { x: 30, y: 80.5 },
+  { x: 30, y: 114 },
+  { x: 206, y: 12 },
+  { x: 206, y: 46 },
+  { x: 206, y: 80.5 },
+  { x: 206, y: 114 },
+  { x: 74, y: 114 },
+  { x: 118, y: 114 },
+  { x: 162, y: 114 },
+  { x: 118, y: 80.5 },
+];
+
+const infoStyle = (part: string) => {
+  const index = Number.parseInt(part, 10);
+  const target = props.withBg ? position[index] : positionSimple[index];
+  return {
+    left: `${((target?.x ?? 0) / baseWidth) * 100}%`,
+    top: `${((target?.y ?? 0) / baseHeight) * 100}%`,
+    zIndex: 6,
+  };
+};
+
+const choosePart = (part: string) => {
+  partModelValue.value = part;
+};
+</script>
+
+<template>
+  <div
+    class="oath-list"
+    :class="{ 'oath-list--plain': !withBg }"
+    :style="{
+      backgroundImage: withBg ? `url(${getImageURL('/common/oath/head.png')})` : 'none',
+    }"
+  >
+    <template v-for="part in parts" :key="part">
+      <button class="oath-slot" :style="infoStyle(part)" type="button" @click="choosePart(part)">
+        <template v-if="detail?.[part]?.id">
+          <LegacyEquipmentIcon :equipment="equ(detail[part].id, part)" use-display-url />
+        </template>
+        <template v-else-if="!withBg">
+          <span class="oath-slot-text">{{ part !== "11" ? "星蕴" : "誓约" }}</span>
+        </template>
+      </button>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.oath-list {
+  position: relative;
+  width: min(100%, 264px);
+  aspect-ratio: 264 / 172;
+  flex: 0 0 auto;
+  border: 1px solid rgba(85, 72, 46, 0.55);
+  box-shadow:
+    inset 0 0 0 1px rgba(24, 20, 14, 0.8),
+    0 8px 20px rgba(0, 0, 0, 0.32);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.oath-list::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 50% 8%, rgba(88, 161, 255, 0.24), transparent 35%),
+    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.28));
+}
+
+.oath-list--plain {
+  background:
+    linear-gradient(180deg, rgba(19, 21, 24, 0.96), rgba(10, 10, 12, 0.98)),
+    radial-gradient(circle at 50% 0, rgba(55, 95, 138, 0.24), transparent 45%);
+}
+
+.oath-slot {
+  position: absolute;
+  box-sizing: border-box;
+  width: 9.848%;
+  height: 15.116%;
+  border: 1px solid rgba(122, 122, 122, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(255 255 255 / 0.5);
+  background: rgba(0, 0, 0, 0.16);
+  padding: 0;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.oath-slot:hover {
+  border-color: rgba(229, 196, 113, 0.72);
+  box-shadow:
+    0 0 0 1px rgba(229, 196, 113, 0.38),
+    inset 0 0 8px rgba(255, 210, 122, 0.22);
+  background: rgba(47, 35, 14, 0.28);
+}
+
+.oath-slot:focus-visible {
+  outline: none;
+  border-color: rgba(235, 211, 141, 0.88);
+  box-shadow:
+    0 0 0 2px rgba(235, 211, 141, 0.35),
+    inset 0 0 8px rgba(255, 210, 122, 0.25);
+}
+
+.oath-slot-text {
+  font-size: 0.6rem;
+  line-height: 1;
+}
+</style>
diff --git a/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue b/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue
index fef7d7d3..5485c140 100644
--- a/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue
+++ b/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Sparkles } from "lucide-vue-next";
+import {
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Sparkles,
+} from "lucide-vue-next";
 import { useConfigStore, useInfoStore } from "@/stores";
 import type { IEquipment, ISuit } from "@/api/info/type";
 import { Button } from "@/components/ui/button";
@@ -8,6 +15,14 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import Tabs from "@/components/ui/tabs/Tabs.vue";
 import TabsList from "@/components/ui/tabs/TabsList.vue";
 import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
+import {
+  ColorSwatchPickerItem,
+  ColorSwatchPickerItemIndicator,
+  ColorSwatchPickerItemSwatch,
+  ColorSwatchPickerRoot,
+} from "reka-ui";
+import EquList from "@/components/dnf/Equipment/List/index.vue";
+import OathList from "@/components/dnf/Equipment/Oath/index.vue";
 import EquipmentCell from "./components/EquipmentCell.vue";
 import { getImageURL } from "@/utils";
 
@@ -41,6 +56,8 @@ const oathSuitId = ref("");
 const suitRarity = ref<string>("");
 const oathSuitRarity = ref<string>("");
 const sidePanelTab = ref<SidePanelTab>("detail");
+const equippedPart = ref("");
+const equippedOathPart = ref("0");
 const previewEquipKey = ref("");
 const previewSuitLevel = ref<LevelState>({ rarity: "太初", lv: 1 });
 const previewOathLevel = ref<LevelState>({ rarity: "史诗", lv: 1 });
@@ -50,10 +67,16 @@ const previewOathSuitInfo = ref<ISuit>();
 const canUseSubWeapon = computed(() => infoStore.infos?.alter?.includes("vegabond") ?? false);
 const equips = computed(() => infoStore.equips ?? []);
 const oathEquips = computed(() => infoStore.oaths ?? []);
-const iconWrapStyle = computed(() => ({
+const panelLayoutVars = computed(() => ({
   "--equip-cell-size": "clamp(1.5rem, 2.2vw, 2rem)",
-  "--suit-switch-size": "clamp(2rem, 3.8vw, 2.25rem)",
-  width: `calc(var(--equip-cell-size) * ${rowCount} + 0.25rem * ${rowCount - 1})`,
+  "--suit-switch-size": "clamp(1.2rem, 2vw, 1.8rem)",
+  "--equip-grid-width": `calc(var(--equip-cell-size) * ${rowCount} + 0.25rem * ${rowCount - 1})`,
+  "--panel-card-width": "calc(var(--equip-grid-width) + 2rem)",
+}));
+
+const iconWrapStyle = computed(() => ({
+  ...panelLayoutVars.value,
+  width: "var(--equip-grid-width)",
 }));
 
 const isOathEquipment = (equip?: IEquipment) =>
@@ -130,28 +153,6 @@ const previewOathMeta = computed(() => {
   return infoStore.oathSkills?.[previewSuitId.value];
 });
 
-const equippedParts = computed(() => {
-  const parts = [...infoStore.parts, ...(canUseSubWeapon.value ? ["副武器"] : [])];
-  return parts.map((part) => {
-    const current = configStore.config.equips[part];
-    return {
-      part,
-      equip: current?.id ? equips.value.find((item) => item.id === current.id) : undefined,
-    };
-  });
-});
-
-const equippedOaths = computed(() => {
-  return infoStore.oathParts
-    .map((slot) => ({
-      slot,
-      equip: oathEquips.value.find(
-        (item) => item.oathPos === slot && item.id === configStore.config.oaths?.[slot]?.id,
-      ),
-    }))
-    .filter((item) => !!item.equip);
-});
-
 const padToRow = <T,>(items: (T | undefined)[]) => {
   const remainder = items.length % rowCount;
   if (remainder === 0) return items;
@@ -577,6 +578,10 @@ const chooseEquip = (
     return;
   }
   configStore.chooseEqu(equip, false, options?.subweapon ?? false);
+
+  if (isSelected(equip, options)) {
+    sidePanelTab.value = "equipped";
+  }
 };
 
 const showPreview = (equip: IEquipment | undefined) => {
@@ -584,6 +589,32 @@ const showPreview = (equip: IEquipment | undefined) => {
   previewEquipKey.value = getEquipKey(equip);
 };
 
+const showPreviewByContext = (equip: IEquipment | undefined) => {
+  if (!equip) return;
+  previewEquipKey.value = getEquipKey(equip);
+  sidePanelTab.value = "detail";
+};
+
+watch(equippedPart, (part) => {
+  if (!part) return;
+  const equipId = configStore.config.equips[part]?.id;
+  if (!equipId) return;
+  const equip = equips.value.find((item) => item.id === equipId);
+  if (!equip) return;
+  showPreview(equip);
+  sidePanelTab.value = "detail";
+});
+
+watch(equippedOathPart, (part) => {
+  if (!part) return;
+  const equipId = configStore.config.oaths[part]?.id;
+  if (!equipId) return;
+  const equip = oathEquips.value.find((item) => item.id === equipId && item.oathPos === part);
+  if (!equip) return;
+  showPreview(equip);
+  sidePanelTab.value = "detail";
+});
+
 const wearCurrentSuitByRarity = (isOath = false, targetSuitId?: string) => {
   const currentRarity = isOath ? oathSuitRarity.value : suitRarity.value;
   const currentSuitId = targetSuitId ?? (isOath ? oathSuitId.value : suitId.value);
@@ -750,586 +781,639 @@ watch(
 );
 
 const rarityChoices = [
-  { value: "稀有", label: "稀" },
-  { value: "神器", label: "神" },
-  { value: "传说", label: "传" },
-  { value: "史诗", label: "史" },
-  { value: "太初", label: "太" },
+  { value: "稀有", label: "稀", color: "#9879da" },
+  { value: "神器", label: "神", color: "#ef28c1" },
+  { value: "传说", label: "传", color: "#ff7700" },
+  { value: "史诗", label: "史", color: "#fcb600" },
+  {
+    value: "太初",
+    label: "太",
+    color: "linear-gradient(to bottom, #5aff62, #58c6ff)",
+  },
 ];
+
+const normalizeRarityValue = (value: unknown): string => {
+  const raw = Array.isArray(value) ? value[0] : value;
+  return typeof raw === "string" ? raw : "";
+};
+
+const toggleSuitRarity = (value: unknown) => {
+  const next = normalizeRarityValue(value);
+  suitRarity.value = !next || suitRarity.value === next ? "" : next;
+};
+
+const toggleOathRarity = (value: unknown) => {
+  const next = normalizeRarityValue(value);
+  oathSuitRarity.value = !next || oathSuitRarity.value === next ? "" : next;
+};
 </script>
 
 <template>
-  <div class="grid min-h-full min-w-0 gap-4 pb-6 xl:grid-cols-[minmax(0,1fr)_320px]">
-    <div class="min-w-0 space-y-4">
-      <Card>
-        <CardHeader class="pb-3">
-          <CardTitle>武器/称号/宠物/秘宝</CardTitle>
-        </CardHeader>
-        <CardContent class="space-y-4">
-          <Tabs v-model="weaponTab" class="gap-0">
-            <TabsList>
-              <TabsTrigger value="weapon">武器</TabsTrigger>
-              <TabsTrigger value="else">称号/宠物/秘宝</TabsTrigger>
-              <TabsTrigger value="subweapon" :disabled="!canUseSubWeapon">副武器</TabsTrigger>
-            </TabsList>
-          </Tabs>
-
-          <div class="overflow-x-auto">
-            <div class="flex flex-wrap content-start gap-1" :style="iconWrapStyle">
-              <template v-if="weaponTab === 'weapon'">
-                <EquipmentCell
-                  v-for="(equip, index) in weaponGrid"
-                  :key="`weapon-${index}-${equip?.id ?? 'empty'}`"
-                  :equipment="equip"
-                  :selected="equip ? isSelected(equip) : false"
-                  :inactive="equip ? !isSelected(equip) : false"
-                  @click="equip ? chooseEquip(equip) : undefined"
-                  @preview="equip ? showPreview(equip) : undefined"
-                />
-              </template>
-              <template v-else-if="weaponTab === 'else'">
-                <EquipmentCell
-                  v-for="(equip, index) in elseSource"
-                  :key="`else-${index}-${equip?.id ?? 'empty'}`"
-                  :equipment="equip"
-                  :selected="equip ? isSelected(equip) : false"
-                  :inactive="equip ? !isSelected(equip) : false"
-                  @click="equip ? chooseEquip(equip) : undefined"
-                  @preview="equip ? showPreview(equip) : undefined"
-                />
-              </template>
-              <template v-else>
-                <EquipmentCell
-                  v-for="(equip, index) in subWeaponGrid"
-                  :key="`subweapon-${index}-${equip?.id ?? 'empty'}`"
-                  :equipment="equip"
-                  :selected="equip ? isSelected(equip, { subweapon: true }) : false"
-                  :inactive="equip ? !isSelected(equip, { subweapon: true }) : false"
-                  @click="equip ? chooseEquip(equip, { subweapon: true }) : undefined"
-                  @preview="equip ? showPreview(equip) : undefined"
-                />
-              </template>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader class="pb-3">
-          <CardTitle>套装/通宝</CardTitle>
-        </CardHeader>
-        <CardContent class="space-y-4">
-          <Tabs v-model="equipTab" class="gap-0">
-            <TabsList>
-              <TabsTrigger value="suit">套装</TabsTrigger>
-              <TabsTrigger value="universal">通宝</TabsTrigger>
-            </TabsList>
-          </Tabs>
-
-          <template v-if="equipTab === 'suit'">
-            <div
-              class="flex max-w-full flex-nowrap gap-1.5 overflow-x-auto pb-1"
-              :style="iconWrapStyle"
-            >
-              <button
-                v-for="item in suitOptions"
-                :key="item.id"
-                type="button"
-                class="flex shrink-0 items-center justify-center rounded-sm transition"
-                :style="{ width: 'var(--suit-switch-size)', height: 'var(--suit-switch-size)' }"
-                :class="
-                  suitId === item.id ? 'bg-primary/10' : 'opacity-70 grayscale hover:opacity-100'
-                "
-                @click="suitId = item.id"
-                @dblclick="
-                  () => {
-                    suitId = item.id;
-                    wearCurrentSuitByRarity(false, item.id);
-                  }
-                "
-              >
-                <img
-                  :src="getImageURL(`equipment${item.imageUrl}`)"
-                  :alt="item.name"
-                  class="object-contain"
-                  :style="{
-                    width: 'calc(var(--suit-switch-size) - 1px)',
-                    height: 'calc(var(--suit-switch-size) - 1px)',
-                    filter: suitId === item.id ? '' : 'grayscale(100%)',
-                  }"
-                />
-              </button>
-            </div>
-
-            <div class="flex flex-wrap gap-2">
-              <Button
-                v-for="item in rarityChoices"
-                :key="item.value"
-                size="sm"
-                :variant="suitRarity === item.value ? 'default' : 'outline'"
-                @click="suitRarity = suitRarity === item.value ? '' : item.value"
-              >
-                {{ item.label }}
-              </Button>
-            </div>
+  <div
+    class="grid min-h-full min-w-0 gap-4 pb-6 md:h-full md:pb-0 md:grid-cols-[minmax(0,1fr)_320px]"
+  >
+    <div
+      class="min-h-0 min-w-0 grid items-stretch gap-4 md:h-full [grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))]"
+      :style="panelLayoutVars"
+    >
+      <div class="min-h-0 min-w-0 md:h-full">
+        <Card
+          class="w-full md:flex md:h-full md:flex-col md:overflow-hidden"
+          :style="panelLayoutVars"
+        >
+          <!-- <CardHeader class="pb-3">
+            <CardTitle>武器/称号/宠物/秘宝</CardTitle>
+          </CardHeader> -->
+          <CardContent class="space-y-4 md:min-h-0 md:flex-1 md:overflow-y-auto">
+            <Tabs v-model="weaponTab" class="gap-0" size="sm">
+              <TabsList>
+                <TabsTrigger value="weapon">武器</TabsTrigger>
+                <TabsTrigger value="else">称号/宠物/秘宝</TabsTrigger>
+                <TabsTrigger value="subweapon" :disabled="!canUseSubWeapon">副武器</TabsTrigger>
+              </TabsList>
+            </Tabs>
 
             <div class="overflow-x-auto">
-              <div class="flex flex-wrap content-start gap-1" :style="iconWrapStyle">
-                <EquipmentCell
-                  v-for="(equip, index) in suitGrid"
-                  :key="`suit-${index}-${equip?.id ?? 'empty'}`"
-                  :equipment="equip"
-                  :selected="equip ? isSelected(equip) : false"
-                  :inactive="equip ? !isSelected(equip) : false"
-                  @click="equip ? chooseEquip(equip) : undefined"
-                  @preview="equip ? showPreview(equip) : undefined"
-                />
-              </div>
-            </div>
-          </template>
-
-          <div v-else class="space-y-3">
-            <template
-              v-for="(section, sectionIndex) in universalSections"
-              :key="`uni-${sectionIndex}`"
-            >
-              <!-- <div
-                class="rounded-sm border-y bg-muted/20 py-1 text-center text-xs font-medium text-muted-foreground"
-              >
-                {{ section.title }}
-              </div> -->
-              <div class="overflow-x-auto">
-                <div class="flex flex-wrap content-start gap-1" :style="iconWrapStyle">
+              <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
+                <template v-if="weaponTab === 'weapon'">
                   <EquipmentCell
-                    v-for="(equip, index) in section.items"
-                    :key="`universal-${sectionIndex}-${index}-${equip?.id ?? 'empty'}`"
+                    v-for="(equip, index) in weaponGrid"
+                    :key="`weapon-${index}-${equip?.id ?? 'empty'}`"
                     :equipment="equip"
                     :selected="equip ? isSelected(equip) : false"
                     :inactive="equip ? !isSelected(equip) : false"
                     @click="equip ? chooseEquip(equip) : undefined"
-                    @preview="equip ? showPreview(equip) : undefined"
+                    @right-click="equip ? showPreviewByContext(equip) : undefined"
+                  />
+                </template>
+                <template v-else-if="weaponTab === 'else'">
+                  <EquipmentCell
+                    v-for="(equip, index) in elseSource"
+                    :key="`else-${index}-${equip?.id ?? 'empty'}`"
+                    :equipment="equip"
+                    :selected="equip ? isSelected(equip) : false"
+                    :inactive="equip ? !isSelected(equip) : false"
+                    @click="equip ? chooseEquip(equip) : undefined"
+                    @right-click="equip ? showPreviewByContext(equip) : undefined"
+                  />
+                </template>
+                <template v-else>
+                  <EquipmentCell
+                    v-for="(equip, index) in subWeaponGrid"
+                    :key="`subweapon-${index}-${equip?.id ?? 'empty'}`"
+                    :equipment="equip"
+                    :selected="equip ? isSelected(equip, { subweapon: true }) : false"
+                    :inactive="equip ? !isSelected(equip, { subweapon: true }) : false"
+                    @click="equip ? chooseEquip(equip, { subweapon: true }) : undefined"
+                    @right-click="equip ? showPreviewByContext(equip) : undefined"
+                  />
+                </template>
+              </div>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <Tabs v-model="equipTab" class="gap-0">
+                <TabsList>
+                  <TabsTrigger value="suit">装备套装</TabsTrigger>
+                  <TabsTrigger value="universal">装备通宝</TabsTrigger>
+                </TabsList>
+              </Tabs>
+
+              <ColorSwatchPickerRoot
+                v-if="equipTab === 'suit'"
+                class="ml-auto flex items-center gap-2"
+                orientation="horizontal"
+                :model-value="suitRarity || undefined"
+                @update:model-value="toggleSuitRarity"
+              >
+                <ColorSwatchPickerItem
+                  v-for="item in rarityChoices"
+                  :key="item.value"
+                  :value="item.value"
+                  class="group relative h-6 w-6 rounded-md border border-border/70 outline-none ring-offset-background transition hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring"
+                  :title="item.value"
+                >
+                  <ColorSwatchPickerItemSwatch
+                    :label="item.value"
+                    class="h-full w-full rounded-[5px]"
+                    :style="{ background: item.color }"
+                  />
+                  <ColorSwatchPickerItemIndicator
+                    class="absolute inset-0 grid place-items-center rounded-[5px] bg-black/35 text-white"
+                  >
+                    <Check class="size-3" />
+                  </ColorSwatchPickerItemIndicator>
+                </ColorSwatchPickerItem>
+              </ColorSwatchPickerRoot>
+            </div>
+
+            <template v-if="equipTab === 'suit'">
+              <div
+                class="mx-auto flex w-max max-w-full flex-nowrap overflow-x-auto pb-1"
+                :style="iconWrapStyle"
+              >
+                <button
+                  v-for="item in suitOptions"
+                  :key="item.id"
+                  type="button"
+                  class="flex shrink-0 items-center justify-center rounded-sm transition"
+                  :style="{ width: 'var(--suit-switch-size)', height: 'var(--suit-switch-size)' }"
+                  :class="
+                    suitId === item.id ? 'bg-primary/10' : 'opacity-70 grayscale hover:opacity-100'
+                  "
+                  @click="suitId = item.id"
+                  @dblclick="
+                    () => {
+                      suitId = item.id;
+                      wearCurrentSuitByRarity(false, item.id);
+                    }
+                  "
+                >
+                  <img
+                    :src="getImageURL(`equipment${item.imageUrl}`)"
+                    :alt="item.name"
+                    class="object-contain"
+                    :style="{
+                      width: 'calc(var(--suit-switch-size) - 1px)',
+                      height: 'calc(var(--suit-switch-size) - 1px)',
+                      filter: suitId === item.id ? '' : 'grayscale(100%)',
+                    }"
+                  />
+                </button>
+              </div>
+
+              <div class="overflow-x-auto">
+                <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
+                  <EquipmentCell
+                    v-for="(equip, index) in suitGrid"
+                    :key="`suit-${index}-${equip?.id ?? 'empty'}`"
+                    :equipment="equip"
+                    :selected="equip ? isSelected(equip) : false"
+                    :inactive="equip ? !isSelected(equip) : false"
+                    @click="equip ? chooseEquip(equip) : undefined"
+                    @right-click="equip ? showPreviewByContext(equip) : undefined"
                   />
                 </div>
               </div>
             </template>
-            <div
-              v-if="!universalSections.length"
-              class="py-6 text-center text-xs text-muted-foreground"
-            >
-              当前筛选下暂无通宝数据
-            </div>
-          </div>
-        </CardContent>
-      </Card>
 
-      <Card>
-        <CardHeader class="pb-3">
-          <CardTitle>誓约</CardTitle>
-        </CardHeader>
-        <CardContent class="space-y-4">
-          <Tabs v-model="oathTab" class="gap-0">
-            <TabsList>
-              <TabsTrigger value="suit">套装</TabsTrigger>
-              <TabsTrigger value="universal">通宝</TabsTrigger>
-              <TabsTrigger value="other">其他</TabsTrigger>
-            </TabsList>
-          </Tabs>
-
-          <template v-if="oathTab === 'suit'">
-            <div
-              class="flex max-w-full flex-nowrap gap-1.5 overflow-x-auto pb-1"
-              :style="iconWrapStyle"
-            >
-              <button
-                v-for="item in suitOptions"
-                :key="`oath-${item.id}`"
-                type="button"
-                class="flex shrink-0 items-center justify-center rounded-sm transition"
-                :style="{ width: 'var(--suit-switch-size)', height: 'var(--suit-switch-size)' }"
-                :class="
-                  oathSuitId === item.id
-                    ? 'bg-primary/10'
-                    : 'opacity-70 grayscale hover:opacity-100'
-                "
-                @click="oathSuitId = item.id"
-                @dblclick="
-                  () => {
-                    oathSuitId = item.id;
-                    wearCurrentSuitByRarity(true, item.id);
-                  }
-                "
-              >
-                <img
-                  :src="getImageURL(`equipment${item.imageUrl}`)"
-                  :alt="item.name"
-                  class="object-contain"
-                  :style="{
-                    width: 'calc(var(--suit-switch-size) - 1px)',
-                    height: 'calc(var(--suit-switch-size) - 1px)',
-                    filter: oathSuitId === item.id ? '' : 'grayscale(100%)',
-                  }"
-                />
-              </button>
-            </div>
-
-            <div class="flex flex-wrap gap-2">
-              <Button
-                v-for="item in rarityChoices"
-                :key="`oath-rarity-${item.value}`"
-                size="sm"
-                :variant="oathSuitRarity === item.value ? 'default' : 'outline'"
-                @click="oathSuitRarity = oathSuitRarity === item.value ? '' : item.value"
-              >
-                {{ item.label }}
-              </Button>
-            </div>
-
-            <div class="space-y-3">
+            <div v-else class="space-y-3">
               <template
-                v-for="(section, sectionIndex) in oathSuitSections"
-                :key="`oath-s-${sectionIndex}`"
+                v-for="(section, sectionIndex) in universalSections"
+                :key="`uni-${sectionIndex}`"
               >
                 <!-- <div
-                  class="rounded-sm border-y bg-muted/20 py-1 text-center text-xs font-medium text-muted-foreground"
-                >
-                  {{ section.title }}
-                </div> -->
+                class="rounded-sm border-y bg-muted/20 py-1 text-center text-xs font-medium text-muted-foreground"
+              >
+                {{ section.title }}
+              </div> -->
                 <div class="overflow-x-auto">
-                  <div class="flex flex-wrap content-start gap-1" :style="iconWrapStyle">
+                  <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
                     <EquipmentCell
                       v-for="(equip, index) in section.items"
-                      :key="`oath-suit-${sectionIndex}-${index}-${equip?.id ?? 'empty'}`"
+                      :key="`universal-${sectionIndex}-${index}-${equip?.id ?? 'empty'}`"
                       :equipment="equip"
-                      :selected="equip ? isSelected(equip, { oath: true }) : false"
-                      :inactive="equip ? !isSelected(equip, { oath: true }) : false"
-                      :use-display-url="true"
-                      @click="equip ? chooseEquip(equip, { oath: true }) : undefined"
-                      @preview="equip ? showPreview(equip) : undefined"
+                      :selected="equip ? isSelected(equip) : false"
+                      :inactive="equip ? !isSelected(equip) : false"
+                      @click="equip ? chooseEquip(equip) : undefined"
+                      @right-click="equip ? showPreviewByContext(equip) : undefined"
                     />
                   </div>
                 </div>
               </template>
               <div
-                v-if="!oathSuitSections.length"
+                v-if="!universalSections.length"
                 class="py-6 text-center text-xs text-muted-foreground"
               >
-                当前筛选下暂无誓约套装数据
+                当前筛选下暂无通宝数据
               </div>
             </div>
-          </template>
+          </CardContent>
+        </Card>
+      </div>
 
-          <template v-else-if="oathTab === 'universal'">
-            <div class="overflow-x-auto">
-              <div class="flex flex-wrap content-start gap-1" :style="iconWrapStyle">
-                <EquipmentCell
-                  v-for="(equip, index) in oathUniversalGrid"
-                  :key="`oath-universal-${index}-${equip?.id ?? 'empty'}`"
-                  :equipment="equip"
-                  :selected="equip ? isSelected(equip, { oath: true }) : false"
-                  :inactive="equip ? !isSelected(equip, { oath: true }) : false"
-                  :use-display-url="true"
-                  @click="equip ? chooseEquip(equip, { oath: true }) : undefined"
-                  @preview="equip ? showPreview(equip) : undefined"
-                />
-              </div>
-            </div>
-          </template>
+      <div class="min-h-0 min-w-0 md:h-full">
+        <Card
+          class="w-full md:flex md:h-full md:flex-col md:overflow-hidden"
+          :style="panelLayoutVars"
+        >
+          <!-- <CardHeader>
+            <CardTitle>誓约</CardTitle>
+          </CardHeader> -->
+          <CardContent class="space-y-4 md:min-h-0 md:flex-1 md:overflow-y-auto">
+            <div class="flex items-center gap-2">
+              <Tabs v-model="oathTab" class="gap-0">
+                <TabsList>
+                  <TabsTrigger value="suit">誓约</TabsTrigger>
+                  <!-- <TabsTrigger value="universal">通宝</TabsTrigger>
+                  <TabsTrigger value="other">其他</TabsTrigger> -->
+                </TabsList>
+              </Tabs>
 
-          <template v-else>
-            <div class="overflow-x-auto">
-              <div class="flex flex-wrap content-start gap-1" :style="iconWrapStyle">
-                <EquipmentCell
-                  v-for="(equip, index) in oathOtherGrid"
-                  :key="`oath-other-${index}-${equip?.id ?? 'empty'}`"
-                  :equipment="equip"
-                  :selected="equip ? isSelected(equip, { oath: true }) : false"
-                  :inactive="equip ? !isSelected(equip, { oath: true }) : false"
-                  :use-display-url="true"
-                  @click="equip ? chooseEquip(equip, { oath: true }) : undefined"
-                  @preview="equip ? showPreview(equip) : undefined"
-                />
-              </div>
+              <ColorSwatchPickerRoot
+                v-if="oathTab === 'suit'"
+                class="ml-auto flex items-center gap-2"
+                orientation="horizontal"
+                :model-value="oathSuitRarity || undefined"
+                @update:model-value="toggleOathRarity"
+              >
+                <ColorSwatchPickerItem
+                  v-for="item in rarityChoices"
+                  :key="`oath-rarity-${item.value}`"
+                  :value="item.value"
+                  class="group relative h-6 w-6 rounded-md border border-border/70 outline-none ring-offset-background transition hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring"
+                  :title="item.value"
+                >
+                  <ColorSwatchPickerItemSwatch
+                    :label="item.value"
+                    class="h-full w-full rounded-[5px]"
+                    :style="{ background: item.color }"
+                  />
+                  <ColorSwatchPickerItemIndicator
+                    class="absolute inset-0 grid place-items-center rounded-[5px] bg-black/35 text-white"
+                  >
+                    <Check class="size-3" />
+                  </ColorSwatchPickerItemIndicator>
+                </ColorSwatchPickerItem>
+              </ColorSwatchPickerRoot>
             </div>
-          </template>
-        </CardContent>
-      </Card>
+
+            <template v-if="oathTab === 'suit'">
+              <div
+                class="mx-auto flex w-max max-w-full flex-nowrap overflow-x-auto pb-1"
+                :style="iconWrapStyle"
+              >
+                <button
+                  v-for="item in suitOptions"
+                  :key="`oath-${item.id}`"
+                  type="button"
+                  class="flex shrink-0 items-center justify-center rounded-sm transition"
+                  :style="{ width: 'var(--suit-switch-size)', height: 'var(--suit-switch-size)' }"
+                  :class="
+                    oathSuitId === item.id
+                      ? 'bg-primary/10'
+                      : 'opacity-70 grayscale hover:opacity-100'
+                  "
+                  @click="oathSuitId = item.id"
+                  @dblclick="
+                    () => {
+                      oathSuitId = item.id;
+                      wearCurrentSuitByRarity(true, item.id);
+                    }
+                  "
+                >
+                  <img
+                    :src="getImageURL(`equipment${item.imageUrl}`)"
+                    :alt="item.name"
+                    class="object-contain"
+                    :style="{
+                      width: 'calc(var(--suit-switch-size) - 1px)',
+                      height: 'calc(var(--suit-switch-size) - 1px)',
+                      filter: oathSuitId === item.id ? '' : 'grayscale(100%)',
+                    }"
+                  />
+                </button>
+              </div>
+
+              <div class="space-y-3">
+                <template
+                  v-for="(section, sectionIndex) in oathSuitSections"
+                  :key="`oath-s-${sectionIndex}`"
+                >
+                  <!-- <div
+                  class="rounded-sm border-y bg-muted/20 py-1 text-center text-xs font-medium text-muted-foreground"
+                >
+                  {{ section.title }}
+                </div> -->
+                  <div class="overflow-x-auto">
+                    <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
+                      <EquipmentCell
+                        v-for="(equip, index) in section.items"
+                        :key="`oath-suit-${sectionIndex}-${index}-${equip?.id ?? 'empty'}`"
+                        :equipment="equip"
+                        :selected="equip ? isSelected(equip, { oath: true }) : false"
+                        :inactive="equip ? !isSelected(equip, { oath: true }) : false"
+                        :use-display-url="true"
+                        @click="equip ? chooseEquip(equip, { oath: true }) : undefined"
+                        @right-click="equip ? showPreviewByContext(equip) : undefined"
+                      />
+                    </div>
+                  </div>
+                </template>
+                <div
+                  v-if="!oathSuitSections.length"
+                  class="py-6 text-center text-xs text-muted-foreground"
+                >
+                  当前筛选下暂无誓约套装数据
+                </div>
+              </div>
+            </template>
+
+            <template v-else-if="oathTab === 'universal'">
+              <div class="overflow-x-auto">
+                <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
+                  <EquipmentCell
+                    v-for="(equip, index) in oathUniversalGrid"
+                    :key="`oath-universal-${index}-${equip?.id ?? 'empty'}`"
+                    :equipment="equip"
+                    :selected="equip ? isSelected(equip, { oath: true }) : false"
+                    :inactive="equip ? !isSelected(equip, { oath: true }) : false"
+                    :use-display-url="true"
+                    @click="equip ? chooseEquip(equip, { oath: true }) : undefined"
+                    @right-click="equip ? showPreviewByContext(equip) : undefined"
+                  />
+                </div>
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="overflow-x-auto">
+                <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
+                  <EquipmentCell
+                    v-for="(equip, index) in oathOtherGrid"
+                    :key="`oath-other-${index}-${equip?.id ?? 'empty'}`"
+                    :equipment="equip"
+                    :selected="equip ? isSelected(equip, { oath: true }) : false"
+                    :inactive="equip ? !isSelected(equip, { oath: true }) : false"
+                    :use-display-url="true"
+                    @click="equip ? chooseEquip(equip, { oath: true }) : undefined"
+                    @right-click="equip ? showPreviewByContext(equip) : undefined"
+                  />
+                </div>
+              </div>
+            </template>
+          </CardContent>
+        </Card>
+      </div>
     </div>
 
-    <div class="space-y-4 xl:sticky xl:top-4 xl:self-start">
-      <Card>
+    <div class="min-h-0 space-y-4 md:h-full md:self-stretch">
+      <Card class="md:flex md:h-full md:flex-col md:overflow-hidden">
         <CardHeader>
-          <CardTitle class="text-base">角色信息</CardTitle>
-          <Tabs v-model="sidePanelTab" class="gap-0">
-            <TabsList>
-              <TabsTrigger value="equipped">当前已穿戴</TabsTrigger>
-              <TabsTrigger value="detail">装备属性</TabsTrigger>
-            </TabsList>
-          </Tabs>
+          <CardTitle class="text-base">
+            <Tabs v-model="sidePanelTab" class="gap-0">
+              <TabsList>
+                <TabsTrigger value="equipped">当前已穿戴</TabsTrigger>
+                <TabsTrigger value="detail">装备属性</TabsTrigger>
+              </TabsList>
+            </Tabs></CardTitle
+          >
+
           <CardDescription v-if="sidePanelTab === 'equipped'"
             >按部位查看当前选择，点击可切到属性预览。</CardDescription
           >
           <CardDescription v-else>当前聚焦的装备会展示单件与套装属性。</CardDescription>
         </CardHeader>
-        <CardContent v-if="sidePanelTab === 'equipped'" class="space-y-3">
-          <button
-            v-for="item in equippedParts"
-            :key="item.part"
-            type="button"
-            class="flex w-full flex-col rounded-md border px-3 py-2 text-left transition hover:border-primary/40 disabled:opacity-50"
-            :disabled="!item.equip"
-            @click="
-              if (item.equip) {
-                showPreview(item.equip);
-                sidePanelTab = 'detail';
-              }
-            "
-          >
-            <span class="text-xs text-muted-foreground">{{ item.part }}</span>
-            <span class="truncate text-sm font-medium">{{ item.equip?.name ?? "未选择" }}</span>
-          </button>
+        <CardContent v-if="sidePanelTab === 'equipped'" class="min-h-0 flex-1 overflow-hidden">
+          <div class="h-full space-y-3 overflow-y-auto pr-1">
+            <div class="space-y-1">
+              <div class="text-xs text-muted-foreground">装备</div>
+              <EquList
+                v-model:part="equippedPart"
+                :detail="configStore.config.equips"
+                :with-sub-weapon="canUseSubWeapon"
+                :with-pet="true"
+              />
+            </div>
 
-          <div v-if="equippedOaths.length" class="space-y-2">
-            <div class="text-xs text-muted-foreground">誓约槽位</div>
-            <div class="grid grid-cols-2 gap-2">
-              <button
-                v-for="item in equippedOaths"
-                :key="item.slot"
-                type="button"
-                class="flex flex-col rounded-md border px-3 py-2 text-left transition hover:border-primary/40"
-                @click="
-                  if (item.equip) {
-                    showPreview(item.equip);
-                    sidePanelTab = 'detail';
-                  }
-                "
-              >
-                <span class="text-xs text-muted-foreground">槽位 {{ Number(item.slot) + 1 }}</span>
-                <span class="truncate text-sm font-medium">{{ item.equip?.name }}</span>
-              </button>
+            <div class="space-y-1">
+              <div class="text-xs text-muted-foreground">誓约</div>
+              <OathList v-model:part="equippedOathPart" :detail="configStore.config.oaths" />
             </div>
           </div>
         </CardContent>
 
-        <CardContent v-else-if="previewEquip" class="space-y-4">
-          <div class="flex items-center gap-2 text-sm font-medium">
-            <Sparkles class="size-4" /> 装备详情
-          </div>
-
-          <div class="flex items-start gap-3">
-            <img
-              :src="getEquipImageUrl(previewEquip)"
-              :alt="previewEquip.name"
-              class="size-16 rounded-md object-cover"
-            />
-            <div class="min-w-0">
-              <div class="truncate text-sm font-semibold">{{ previewEquip.name }}</div>
-              <div class="text-xs text-muted-foreground">
-                {{ previewEquip.itemDetailType }} · {{ previewEquip.rarity }}
-              </div>
-              <div class="mt-1 text-xs text-muted-foreground">{{ previewEquip.categorize }}</div>
+        <CardContent
+          v-else-if="previewEquip"
+          class="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden"
+        >
+          <div class="space-y-4">
+            <div class="flex items-center gap-2 text-sm font-medium">
+              <Sparkles class="size-4" /> 装备详情
             </div>
-          </div>
 
-          <div class="grid grid-cols-2 gap-2 text-xs text-muted-foreground">
-            <div>部位: {{ previewEquip.itemType }}</div>
-            <div>槽位: {{ previewEquip.itemDetailType }}</div>
-            <div>套装数: {{ previewEquip.suit.length }}</div>
-            <div>适应值上限: {{ previewEquip.max_adaptation }}</div>
-          </div>
-
-          <div class="space-y-2">
-            <div class="text-xs font-medium">装备词条</div>
-            <div
-              class="rounded-md border bg-muted/20 p-3 text-xs leading-6 whitespace-pre-line"
-              v-html="highlightDetail(previewEquip.detail) || '暂无词条描述'"
-            />
-          </div>
-
-          <div v-if="previewSuitInfo" class="space-y-3">
-            <div class="flex items-center justify-between gap-2">
-              <div class="text-xs font-medium">套装属性</div>
-              <div class="flex items-center gap-1">
-                <Button
-                  size="icon"
-                  variant="outline"
-                  class="size-7"
-                  :disabled="rarityOrder.findIndex((item) => item === previewSuitLevel.rarity) <= 0"
-                  @click="changePreviewSuitLevel('preRarity')"
-                >
-                  <ChevronsLeft class="size-3.5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  class="size-7"
-                  :disabled="
-                    rarityOrder.findIndex((item) => item === previewSuitLevel.rarity) <= 0 &&
-                    previewSuitLevel.lv <= 1
-                  "
-                  @click="changePreviewSuitLevel('preLv')"
-                >
-                  <ChevronLeft class="size-3.5" />
-                </Button>
-                <div class="min-w-20 text-center text-xs text-muted-foreground">
-                  {{ previewSuitLevel.rarity }}
-                  {{ formatLv(previewSuitLevel.lv, previewSuitLevel.rarity) }}
+            <div class="flex items-start gap-3">
+              <img
+                :src="getEquipImageUrl(previewEquip)"
+                :alt="previewEquip.name"
+                class="size-16 rounded-md object-cover"
+              />
+              <div class="min-w-0">
+                <div class="truncate text-sm font-semibold">{{ previewEquip.name }}</div>
+                <div class="text-xs text-muted-foreground">
+                  {{ previewEquip.itemDetailType }} · {{ previewEquip.rarity }}
                 </div>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  class="size-7"
-                  :disabled="
-                    rarityOrder.findIndex((item) => item === previewSuitLevel.rarity) >=
-                    rarityOrder.length - 1
-                  "
-                  @click="changePreviewSuitLevel('nextLv')"
-                >
-                  <ChevronRight class="size-3.5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  class="size-7"
-                  :disabled="
-                    rarityOrder.findIndex((item) => item === previewSuitLevel.rarity) >=
-                    rarityOrder.length - 1
-                  "
-                  @click="changePreviewSuitLevel('nextRarity')"
-                >
-                  <ChevronsRight class="size-3.5" />
-                </Button>
+                <div class="mt-1 text-xs text-muted-foreground">{{ previewEquip.categorize }}</div>
               </div>
             </div>
 
-            <div class="rounded-md border bg-muted/20 p-3 text-xs leading-6">
-              <div class="font-medium">
-                {{ previewSuitInfo.name }} · {{ previewSuitInfo.point }}件套 ·
-                {{ previewSuitInfo.rarity }}
-              </div>
-              <div
-                v-if="formatSuitMainAttr(previewSuitInfo)"
-                class="mt-2 text-muted-foreground"
-                v-html="formatSuitMainAttr(previewSuitInfo)"
-              />
-              <div
-                class="mt-2 text-muted-foreground whitespace-pre-line"
-                v-html="highlightDetail(previewSuitInfo.value) || '暂无套装属性说明'"
-              />
-              <div
-                v-if="previewSuitInfo.bufferValue && previewSuitInfo.bufferValue !== '-'"
-                class="mt-2 text-muted-foreground whitespace-pre-line"
-                v-html="highlightDetail(previewSuitInfo.bufferValue)"
-              />
+            <div class="grid grid-cols-2 gap-2 text-xs text-muted-foreground">
+              <div>部位: {{ previewEquip.itemType }}</div>
+              <div>槽位: {{ previewEquip.itemDetailType }}</div>
+              <div>套装数: {{ previewEquip.suit.length }}</div>
+              <div>适应值上限: {{ previewEquip.max_adaptation }}</div>
             </div>
           </div>
 
-          <div v-if="previewOathMeta && previewOathSuitInfo" class="space-y-3">
-            <div class="flex items-center justify-between gap-2">
-              <div class="text-xs font-medium">誓约信息</div>
-              <div class="flex items-center gap-1">
-                <Button
-                  size="icon"
-                  variant="outline"
-                  class="size-7"
-                  :disabled="rarityOrder.findIndex((item) => item === previewOathLevel.rarity) <= 0"
-                  @click="changePreviewOathLevel('preRarity')"
-                >
-                  <ChevronsLeft class="size-3.5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  class="size-7"
-                  :disabled="
-                    rarityOrder.findIndex((item) => item === previewOathLevel.rarity) <= 0 &&
-                    previewOathLevel.lv <= 1
-                  "
-                  @click="changePreviewOathLevel('preLv')"
-                >
-                  <ChevronLeft class="size-3.5" />
-                </Button>
-                <div class="min-w-20 text-center text-xs text-muted-foreground">
-                  {{ previewOathLevel.rarity }}
-                  {{ formatLv(previewOathLevel.lv, previewOathLevel.rarity) }}
-                </div>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  class="size-7"
-                  :disabled="
-                    rarityOrder.findIndex((item) => item === previewOathLevel.rarity) >=
-                    rarityOrder.length - 1
-                  "
-                  @click="changePreviewOathLevel('nextLv')"
-                >
-                  <ChevronRight class="size-3.5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  class="size-7"
-                  :disabled="
-                    rarityOrder.findIndex((item) => item === previewOathLevel.rarity) >=
-                    rarityOrder.length - 1
-                  "
-                  @click="changePreviewOathLevel('nextRarity')"
-                >
-                  <ChevronsRight class="size-3.5" />
-                </Button>
-              </div>
+          <div class="min-h-0 flex-1 space-y-4 overflow-y-auto pr-1">
+            <div class="space-y-2">
+              <div class="text-xs font-medium">装备词条</div>
+              <div
+                class="rounded-md border bg-muted/20 p-3 text-xs leading-6 whitespace-pre-line"
+                v-html="highlightDetail(previewEquip.detail) || '暂无词条描述'"
+              />
             </div>
 
-            <div class="grid grid-cols-3 gap-2">
-              <button
-                v-for="skill in previewOathMeta.skills"
-                :key="skill.skillId"
-                type="button"
-                class="flex flex-col items-center rounded-md border px-2 py-3 text-center transition"
-                :class="
-                  previewOathSkillId === skill.skillId
-                    ? 'border-primary bg-primary/5'
-                    : 'hover:border-primary/40 opacity-75'
-                "
-                @click="previewOathSkillId = skill.skillId"
-              >
-                <img
-                  :src="getImageURL(skill.icon)"
-                  :alt="skill.name"
-                  class="size-8 object-contain"
+            <div v-if="previewSuitInfo" class="space-y-3">
+              <div class="flex items-center justify-between gap-2">
+                <div class="text-xs font-medium">套装属性</div>
+                <div class="flex items-center gap-1">
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="size-7"
+                    :disabled="
+                      rarityOrder.findIndex((item) => item === previewSuitLevel.rarity) <= 0
+                    "
+                    @click="changePreviewSuitLevel('preRarity')"
+                  >
+                    <ChevronsLeft class="size-3.5" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="size-7"
+                    :disabled="
+                      rarityOrder.findIndex((item) => item === previewSuitLevel.rarity) <= 0 &&
+                      previewSuitLevel.lv <= 1
+                    "
+                    @click="changePreviewSuitLevel('preLv')"
+                  >
+                    <ChevronLeft class="size-3.5" />
+                  </Button>
+                  <div class="min-w-20 text-center text-xs text-muted-foreground">
+                    {{ previewSuitLevel.rarity }}
+                    {{ formatLv(previewSuitLevel.lv, previewSuitLevel.rarity) }}
+                  </div>
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="size-7"
+                    :disabled="
+                      rarityOrder.findIndex((item) => item === previewSuitLevel.rarity) >=
+                      rarityOrder.length - 1
+                    "
+                    @click="changePreviewSuitLevel('nextLv')"
+                  >
+                    <ChevronRight class="size-3.5" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="size-7"
+                    :disabled="
+                      rarityOrder.findIndex((item) => item === previewSuitLevel.rarity) >=
+                      rarityOrder.length - 1
+                    "
+                    @click="changePreviewSuitLevel('nextRarity')"
+                  >
+                    <ChevronsRight class="size-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="rounded-md border bg-muted/20 p-3 text-xs leading-6">
+                <div class="font-medium">
+                  {{ previewSuitInfo.name }} · {{ previewSuitInfo.point }}件套 ·
+                  {{ previewSuitInfo.rarity }}
+                </div>
+                <div
+                  v-if="formatSuitMainAttr(previewSuitInfo)"
+                  class="mt-2 text-muted-foreground"
+                  v-html="formatSuitMainAttr(previewSuitInfo)"
+                />
+                <div
+                  class="mt-2 text-muted-foreground whitespace-pre-line"
+                  v-html="highlightDetail(previewSuitInfo.value) || '暂无套装属性说明'"
+                />
+                <div
+                  v-if="previewSuitInfo.bufferValue && previewSuitInfo.bufferValue !== '-'"
+                  class="mt-2 text-muted-foreground whitespace-pre-line"
+                  v-html="highlightDetail(previewSuitInfo.bufferValue)"
                 />
-                <span class="mt-2 line-clamp-2 text-xs">{{ skill.name }}</span>
-              </button>
-            </div>
-
-            <div class="rounded-md border bg-muted/20 p-3 text-xs leading-6">
-              <div class="font-medium">
-                {{ previewOathSuitInfo.name }} · {{ previewOathSuitInfo.point }}点 ·
-                {{ previewOathSuitInfo.rarity }}
               </div>
+            </div>
+
+            <div v-if="previewOathMeta && previewOathSuitInfo" class="space-y-3">
+              <div class="flex items-center justify-between gap-2">
+                <div class="text-xs font-medium">誓约信息</div>
+                <div class="flex items-center gap-1">
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="size-7"
+                    :disabled="
+                      rarityOrder.findIndex((item) => item === previewOathLevel.rarity) <= 0
+                    "
+                    @click="changePreviewOathLevel('preRarity')"
+                  >
+                    <ChevronsLeft class="size-3.5" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="size-7"
+                    :disabled="
+                      rarityOrder.findIndex((item) => item === previewOathLevel.rarity) <= 0 &&
+                      previewOathLevel.lv <= 1
+                    "
+                    @click="changePreviewOathLevel('preLv')"
+                  >
+                    <ChevronLeft class="size-3.5" />
+                  </Button>
+                  <div class="min-w-20 text-center text-xs text-muted-foreground">
+                    {{ previewOathLevel.rarity }}
+                    {{ formatLv(previewOathLevel.lv, previewOathLevel.rarity) }}
+                  </div>
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="size-7"
+                    :disabled="
+                      rarityOrder.findIndex((item) => item === previewOathLevel.rarity) >=
+                      rarityOrder.length - 1
+                    "
+                    @click="changePreviewOathLevel('nextLv')"
+                  >
+                    <ChevronRight class="size-3.5" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="size-7"
+                    :disabled="
+                      rarityOrder.findIndex((item) => item === previewOathLevel.rarity) >=
+                      rarityOrder.length - 1
+                    "
+                    @click="changePreviewOathLevel('nextRarity')"
+                  >
+                    <ChevronsRight class="size-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-3 gap-2">
+                <button
+                  v-for="skill in previewOathMeta.skills"
+                  :key="skill.skillId"
+                  type="button"
+                  class="flex flex-col items-center rounded-md border px-2 py-3 text-center transition"
+                  :class="
+                    previewOathSkillId === skill.skillId
+                      ? 'border-primary bg-primary/5'
+                      : 'hover:border-primary/40 opacity-75'
+                  "
+                  @click="previewOathSkillId = skill.skillId"
+                >
+                  <img
+                    :src="getImageURL(skill.icon)"
+                    :alt="skill.name"
+                    class="size-8 object-contain"
+                  />
+                  <span class="mt-2 line-clamp-2 text-xs">{{ skill.name }}</span>
+                </button>
+              </div>
+
+              <div class="rounded-md border bg-muted/20 p-3 text-xs leading-6">
+                <div class="font-medium">
+                  {{ previewOathSuitInfo.name }} · {{ previewOathSuitInfo.point }}点 ·
+                  {{ previewOathSuitInfo.rarity }}
+                </div>
+                <div
+                  v-if="formatSuitMainAttr(previewOathSuitInfo)"
+                  class="mt-2 text-muted-foreground"
+                  v-html="formatSuitMainAttr(previewOathSuitInfo)"
+                />
+                <div
+                  class="mt-2 text-muted-foreground whitespace-pre-line"
+                  v-html="highlightDetail(previewOathSuitInfo.value) || '暂无套装属性说明'"
+                />
+                <div
+                  v-if="previewOathSuitInfo.bufferValue && previewOathSuitInfo.bufferValue !== '-'"
+                  class="mt-2 text-muted-foreground whitespace-pre-line"
+                  v-html="highlightDetail(previewOathSuitInfo.bufferValue)"
+                />
+              </div>
+            </div>
+
+            <div v-if="previewEquip.bufferDetail" class="space-y-2">
+              <div class="text-xs font-medium">辅助职业描述</div>
               <div
-                v-if="formatSuitMainAttr(previewOathSuitInfo)"
-                class="mt-2 text-muted-foreground"
-                v-html="formatSuitMainAttr(previewOathSuitInfo)"
-              />
-              <div
-                class="mt-2 text-muted-foreground whitespace-pre-line"
-                v-html="highlightDetail(previewOathSuitInfo.value) || '暂无套装属性说明'"
-              />
-              <div
-                v-if="previewOathSuitInfo.bufferValue && previewOathSuitInfo.bufferValue !== '-'"
-                class="mt-2 text-muted-foreground whitespace-pre-line"
-                v-html="highlightDetail(previewOathSuitInfo.bufferValue)"
+                class="rounded-md border bg-muted/20 p-3 text-xs leading-6 whitespace-pre-line"
+                v-html="highlightDetail(previewEquip.bufferDetail)"
               />
             </div>
           </div>
-
-          <div v-if="previewEquip.bufferDetail" class="space-y-2">
-            <div class="text-xs font-medium">辅助职业描述</div>
-            <div
-              class="rounded-md border bg-muted/20 p-3 text-xs leading-6 whitespace-pre-line"
-              v-html="highlightDetail(previewEquip.bufferDetail)"
-            />
-          </div>
         </CardContent>
         <CardContent v-else class="py-10 text-center text-sm text-muted-foreground">
           选择一件装备后可在这里查看详细数据。
diff --git a/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/components/EquipmentCell.vue b/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/components/EquipmentCell.vue
index 8933ef76..d4964374 100644
--- a/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/components/EquipmentCell.vue
+++ b/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/components/EquipmentCell.vue
@@ -14,6 +14,7 @@ const props = defineProps<{
 defineEmits<{
   click: [];
   preview: [];
+  rightClick: [];
 }>();
 
 const rarityClass = computed(() => {
@@ -35,11 +36,8 @@ const rarityClass = computed(() => {
 
 const imageUrl = computed(() => {
   if (!props.equipment) return "";
-  return getImageURL(
-    props.useDisplayUrl
-      ? props.equipment.displayUrl || props.equipment.imageUrl
-      : props.equipment.imageUrl,
-  );
+  const path = props.useDisplayUrl ? props.equipment.displayUrl : props.equipment.imageUrl;
+  return path ? getImageURL(path) : "";
 });
 
 const cellStyle = {
@@ -65,6 +63,7 @@ const cellStyle = {
     :style="cellStyle"
     @click="$emit('click')"
     @mouseenter="$emit('preview')"
+    @contextmenu.prevent="$emit('rightClick')"
   >
     <img :src="imageUrl" :alt="equipment.name" class="size-full object-contain" />
     <div v-if="inactive" class="absolute inset-0 bg-black/45" />