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,105 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { LoaderCircle, RefreshCcw } from "lucide-vue-next";
+import { Button } from "../../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../../components/ui/card";
+import { useInfoStore } from "../../../../stores";
+const props = defineProps<{
+  alter: string;
+}>();
+
+const route = useRoute();
+const router = useRouter();
+const infoStore = useInfoStore();
+const loading = ref(false);
+const loadError = ref("");
+
+const tabs = [
+  { label: "装备", key: "equipment" },
+  { label: "技能", key: "skill" },
+  { label: "打造", key: "forge" },
+] as const;
+
+const activeTab = computed(() => {
+  const path = route.path;
+  if (path.endsWith("/skill")) return "skill";
+  if (path.endsWith("/forge")) return "forge";
+  return "equipment";
+});
+
+const loadCharacter = async () => {
+  loading.value = true;
+  loadError.value = "";
+  try {
+    await infoStore.createCharacter(props.alter);
+  } catch (error) {
+    loadError.value = error instanceof Error ? error.message : "角色数据加载失败";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const switchTab = (tab: (typeof tabs)[number]["key"]) => {
+  router.push(`/dcalc/character/${props.alter}/${tab}`);
+};
+
+onMounted(() => {
+  loadCharacter();
+});
+
+watch(
+  () => props.alter,
+  () => {
+    loadCharacter();
+  },
+);
+</script>
+
+<template>
+  <section class="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-6 md:px-8">
+    <Card>
+      <CardHeader>
+        <CardTitle class="flex items-center justify-between">
+          <span>角色配置 · {{ alter }}</span>
+          <Button variant="outline" size="sm" :disabled="loading" @click="loadCharacter">
+            <RefreshCcw :class="{ 'animate-spin': loading }" />
+            刷新
+          </Button>
+        </CardTitle>
+        <CardDescription
+          >此页面承接旧版 character 模块，逐步迁移装备/技能/打造功能。</CardDescription
+        >
+      </CardHeader>
+      <CardContent class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div class="inline-flex gap-2">
+          <Button
+            v-for="tab in tabs"
+            :key="tab.key"
+            :variant="activeTab === tab.key ? 'default' : 'outline'"
+            size="sm"
+            @click="switchTab(tab.key)"
+          >
+            {{ tab.label }}
+          </Button>
+        </div>
+        <div class="text-sm text-muted-foreground">
+          <span v-if="loading" class="inline-flex items-center gap-2">
+            <LoaderCircle class="size-4 animate-spin" />
+            正在同步角色数据...
+          </span>
+          <span v-else-if="loadError">{{ loadError }}</span>
+          <span v-else>数据源已就绪，可继续编辑配置。</span>
+        </div>
+      </CardContent>
+    </Card>
+
+    <router-view />
+  </section>
+</template>