dev

2026-05-11 01:46:20 +08:00
parent b05276d9c7
commit 5344e6660e
10 changed files with 1069 additions and 546 deletions
@@ -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>