77 lines
2.5 KiB
Vue
77 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { HTMLAttributes } from "vue";
|
|
|
|
import { GalleryVerticalEnd, Shuffle, Grip } 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 size="sm" variant="outline"> <Grip /> 选择职业 </Button>
|
|
</FieldDescription>
|
|
</div>
|
|
</template>
|