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,54 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { Search } from "lucide-vue-next";
+import { useInfoStore } from "@/stores";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+const infoStore = useInfoStore();
+const keyword = ref("");
+
+const skills = computed(() => {
+  const source = infoStore.skills ?? [];
+  const text = keyword.value.trim().toLowerCase();
+  if (!text) return source;
+  return source.filter((skill) => {
+    return skill.name.toLowerCase().includes(text) || skill.type.toLowerCase().includes(text);
+  });
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>技能面板</CardTitle>
+      <CardDescription>与旧版技能页等价的基础浏览能力，后续补齐 VP/符文配置。</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <div class="relative">
+        <Search class="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
+        <Input v-model="keyword" class="pl-8" placeholder="搜索技能名 / 类型" />
+      </div>
+
+      <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+        <Card v-for="skill in skills" :key="skill.id" size="sm">
+          <CardHeader>
+            <CardTitle class="text-sm">{{ skill.name }}</CardTitle>
+            <CardDescription>{{ skill.type }} · 最高等级 {{ skill.maxLv }}</CardDescription>
+          </CardHeader>
+          <CardContent class="flex items-center gap-3 pt-0">
+            <img :src="skill.icon" :alt="skill.name" class="size-11 rounded-md object-cover" />
+            <div class="text-xs text-muted-foreground">
+              <div>可学等级: {{ skill.maxLearnLv }}</div>
+              <div>学习等级: {{ skill.learnLv }}</div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div v-if="skills.length === 0" class="py-10 text-center text-sm text-muted-foreground">
+        当前筛选条件没有匹配技能。
+      </div>
+    </CardContent>
+  </Card>
+</template>