1

2026-05-28 00:30:53 +08:00
parent 8ec3b13b09
commit e834912f2c
8 changed files with 1041 additions and 1104 deletions
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import api from "@/api";
+
+const props = defineProps<{
+  skillId: string;
+  level: number;
+}>();
+
+const skillInfo = asyncComputed(async () => {
+  if (!props.skillId || props.level == null) return undefined;
+  return await api.skillDetail(props.skillId, props.level);
+});
+
+const basic = computed(() => {
+  const info = skillInfo.value;
+  if (!info) return [];
+  return [
+    { label: "技能等级", value: info.attribute.level },
+    { label: "学习等级", value: info.requiredLevel },
+    { label: "等级上限", value: info.maxLevel },
+    {
+      label: "冷却时间",
+      value: info.attribute.coolTime ? `${info.attribute.coolTime.toFixed(1)}秒` : undefined,
+    },
+    {
+      label: "施放时间",
+      value: !info.attribute.castingTime
+        ? "瞬发"
+        : `${info.attribute.castingTime.toFixed(1)}秒`,
+    },
+    { label: "魔法值", value: info.attribute.consumeMp },
+    {
+      label: "消耗无色小晶块",
+      value: info.consumeItem?.value ? `${info.consumeItem.value}个` : undefined,
+    },
+  ].filter((item) => item.value !== undefined && item.value !== null && item.value !== "");
+});
+
+const descLines = computed(() => skillInfo.value?.descDetail.split("\n") ?? []);
+
+const detailLines = computed(() => {
+  const items =
+    skillInfo.value?.attribute.optionDesc?.split("\n").filter((item) => !!item) ?? [];
+  return items.map((a) => {
+    // highlight value placeholder prefix
+    const beforeReplace = a.match(/^(.+?)\s*(\{value\d+\}.*)$/);
+    if (beforeReplace) {
+      a = `${beforeReplace[1]}<span class="detail-label-suffix">${beforeReplace[2]}</span>`;
+    }
+    const matches = a.match(/\{([^}]+)\}/g);
+    if (matches) {
+      matches.forEach((match) => {
+        const key = match.replace(/[{}]/g, "");
+        if (/^value.+/.test(key)) {
+          const value =
+            skillInfo.value?.attribute.optionValue[key as `value${string}`] ?? "-";
+          a = a.replace(
+            match,
+            `<span style="padding:0 2px;color:var(--color-skill-value,#4AA256)">${value}</span>`,
+          );
+        }
+      });
+    }
+    return a;
+  });
+});
+
+const hasEvolution = computed(() => (skillInfo.value?.evolution?.length ?? 0) > 0);
+</script>
+
+<template>
+  <div v-if="!skillInfo" class="flex items-center justify-center h-16 text-xs text-muted-foreground">
+    加载中…
+  </div>
+
+  <template v-else>
+    <!-- ── 基本信息 ── -->
+    <div>
+      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
+        基本信息
+      </div>
+      <div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
+        <div
+          v-for="item in basic"
+          :key="item.label"
+          class="flex items-center justify-between px-3 py-1.5 text-xs"
+        >
+          <span class="text-muted-foreground">{{ item.label }}</span>
+          <span class="tabular-nums font-medium">{{ item.value }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── 技能描述 ── -->
+    <div v-if="descLines.length">
+      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
+        技能描述
+      </div>
+      <div
+        class="rounded-md border border-border/40 bg-muted/10 px-3 py-2 text-xs leading-relaxed max-h-48 overflow-y-auto"
+      >
+        <div
+          v-for="(line, i) in descLines"
+          :key="i"
+          class="min-h-[1em] whitespace-pre-wrap text-muted-foreground"
+        >
+          {{ line }}
+        </div>
+      </div>
+    </div>
+
+    <!-- ── 技能属性 ── -->
+    <div v-if="detailLines.length">
+      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
+        技能属性
+      </div>
+      <div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
+        <div
+          v-for="(line, i) in detailLines"
+          :key="i"
+          class="flex items-center justify-between px-3 py-1.5 text-xs"
+          v-html="line"
+        />
+      </div>
+    </div>
+
+    <!-- ── 技能进化 (VP 描述) ── -->
+    <div v-if="hasEvolution">
+      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
+        技能进化
+      </div>
+      <div class="space-y-2">
+        <div
+          v-for="(evo, i) in skillInfo.evolution"
+          :key="i"
+          class="rounded-md border border-border/40 bg-muted/10 p-3"
+        >
+          <div class="text-xs font-semibold text-purple-400 mb-1.5">{{ evo.name }}</div>
+          <div
+            class="text-xs leading-relaxed text-muted-foreground whitespace-pre-wrap max-h-36 overflow-y-auto"
+          >{{ evo.descDetail }}</div>
+        </div>
+      </div>
+    </div>
+  </template>
+</template>