dev

Co-authored-by: Copilot <copilot@github.com>
2026-05-05 18:59:06 +08:00
parent 44c9df9b20
commit 01b648a3e7
52 changed files with 2491 additions and 89 deletions
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+
+import { GalleryVerticalEnd, Shuffle } from "lucide-vue-next";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@/components/ui/field";
+import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group";
+import { Kbd } from "@/components/ui/kbd";
+import { useDnfHelperStore } from "@/stores/dnfhelper";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const helperId = ref("");
+
+const onSubmit = async (e: Event) => {
+  e.preventDefault();
+  await useDnfHelperStore().refleshHelperInfo(helperId.value);
+};
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-6', props.class)">
+    <form @submit="onSubmit">
+      <FieldGroup>
+        <div class="flex flex-col items-center gap-2 text-center">
+          <a href="#" class="flex flex-col items-center gap-2 font-medium">
+            <div class="flex size-8 items-center justify-center rounded-md">
+              <GalleryVerticalEnd class="size-6" />
+            </div>
+            <span class="sr-only">DNF计算器</span>
+          </a>
+          <!-- <h1 class="text-xl font-bold">输入助手ID</h1> -->
+          <!-- <FieldDescription>请输入助手的社区ID </FieldDescription> -->
+        </div>
+        <Field class="flex flex-col items-center">
+          <FieldLabel for="helperId" class="sr-only"> 助手ID </FieldLabel>
+          <InputGroup>
+            <InputGroupInput
+              id="helperId"
+              type="number"
+              placeholder="助手社区ID"
+              required
+              v-model="helperId"
+            />
+            <InputGroupAddon>
+              <Shuffle />
+            </InputGroupAddon>
+            <InputGroupAddon align="inline-end">
+              <Kbd>Enter</Kbd>
+            </InputGroupAddon>
+          </InputGroup>
+          <!-- <FieldDescription class="text-center">
+            Didn't receive the code? <a href="#">Resend</a>
+          </FieldDescription> -->
+        </Field>
+        <Field>
+          <Button class="self-center w-sm!" type="submit"> 确认 </Button>
+        </Field>
+      </FieldGroup>
+    </form>
+    <FieldSeparator class="w-sm self-center">没有助手ID</FieldSeparator>
+    <FieldDescription class="px-6 text-center">
+      <Button variant="outline"> 选择职业 </Button>
+    </FieldDescription>
+  </div>
+</template>
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useDnfHelperStore } from "@/stores/dnfhelper";
+import Bind from "./bind.vue";
+import List from "./list.vue";
+
+const helperStore = useDnfHelperStore();
+
+const listInfo = computed(() => helperStore.helperInfo?.roleList ?? []);
+</script>
+
+<template>
+  <template v-if="listInfo.length == 0">
+    <Bind class="self-center justify-center w-fit !max-w-sm h-full" />
+  </template>
+  <template v-else>
+    <List :list="listInfo" />
+  </template>
+</template>
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const props = defineProps<{
+  list: {
+    roleId: string;
+    roleName: string;
+    roleJob: string;
+    avatarLink: string;
+    fame: number;
+  }[];
+}>();
+
+const { list } = toRefs(props);
+</script>
+
+<template>
+  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 p-5 box-border">
+    <template v-for="item in list" :key="item.roleId">
+      <Card class="w-full">
+        <CardHeader>
+          <CardTitle>{{ item.roleJob }}</CardTitle>
+        </CardHeader>
+        <CardContent class="flex items-center justify-center h-sm">
+          <img :src="item.avatarLink" alt="avatar" class="w-auto h-sm rounded-full object-cover" />
+        </CardContent>
+        <CardFooter class="flex justify-between">
+          <span>{{ item.roleName }}</span>
+          <span>{{ item.fame }} </span>
+        </CardFooter>
+      </Card>
+    </template>
+  </div>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import AppSidebar from "@/components/AppSidebar.vue";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+</script>
+
+<template>
+  <SidebarProvider>
+    <div class="flex w-full">
+      <AppSidebar />
+      <SidebarInset>
+        <router-view />
+        <!-- router-view -->
+      </SidebarInset>
+    </div>
+  </SidebarProvider>
+</template>