dev

2026-05-11 00:32:03 +08:00
parent 2535bec2ed
commit 10022ae048
32 changed files with 2450 additions and 203 deletions
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { IEquipment } from "@/api/info/type";
+import { getImageURL } from "@/utils";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  equipment?: IEquipment;
+  inactive?: boolean;
+  selected?: boolean;
+  useDisplayUrl?: boolean;
+}>();
+
+defineEmits<{
+  click: [];
+  preview: [];
+}>();
+
+const rarityClass = computed(() => {
+  switch (props.equipment?.rarity) {
+    case "稀有":
+      return "border-violet-400";
+    case "神器":
+      return "border-fuchsia-500";
+    case "传说":
+      return "border-orange-500";
+    case "史诗":
+      return "border-amber-400";
+    case "太初":
+      return "border-emerald-400";
+    default:
+      return "border-muted";
+  }
+});
+
+const imageUrl = computed(() => {
+  if (!props.equipment) return "";
+  return getImageURL(
+    props.useDisplayUrl
+      ? props.equipment.displayUrl || props.equipment.imageUrl
+      : props.equipment.imageUrl,
+  );
+});
+
+const cellStyle = {
+  width: "var(--equip-cell-size, 1.75rem)",
+  height: "var(--equip-cell-size, 1.75rem)",
+};
+</script>
+
+<template>
+  <button
+    v-if="equipment"
+    type="button"
+    :class="
+      cn(
+        'relative shrink-0 overflow-hidden rounded-sm border bg-background p-0 leading-none transition-colors',
+        rarityClass,
+        selected
+          ? 'after:pointer-events-none after:absolute after:inset-0 after:rounded-[3px] after:shadow-[inset_0_0_0_2px_hsl(var(--primary)),0_0_0_1px_hsl(var(--background))]'
+          : 'hover:border-primary/60',
+        inactive ? 'opacity-60' : '',
+      )
+    "
+    :style="cellStyle"
+    @click="$emit('click')"
+    @mouseenter="$emit('preview')"
+  >
+    <img :src="imageUrl" :alt="equipment.name" class="size-full object-contain" />
+    <div v-if="inactive" class="absolute inset-0 bg-black/45" />
+  </button>
+  <div
+    v-else
+    class="shrink-0 rounded-sm border border-dashed border-muted-foreground/30 bg-muted/15"
+    :style="cellStyle"
+  />
+</template>