feat: 改善登录表单的可访问性和自动填充支持

- 为所有表单字段添加 id 和 name 属性
- 添加 autocomplete 属性支持浏览器自动填充
- 使用 for 属性正确关联 label 和 input
- 优化代码格式符合 Prettier 规范

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jft0m
2025-10-12 14:50:07 +00:00
parent 44c6be129b
commit ad64bd3c51
2 changed files with 14 additions and 2 deletions

View File

@@ -39,12 +39,17 @@
<form class="space-y-4 sm:space-y-6" @submit.prevent="handleLogin"> <form class="space-y-4 sm:space-y-6" @submit.prevent="handleLogin">
<div> <div>
<label class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3" <label
class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
for="username"
>用户名</label >用户名</label
> >
<input <input
id="username"
v-model="loginForm.username" v-model="loginForm.username"
autocomplete="username"
class="form-input w-full" class="form-input w-full"
name="username"
placeholder="请输入用户名" placeholder="请输入用户名"
required required
type="text" type="text"
@@ -52,12 +57,17 @@
</div> </div>
<div> <div>
<label class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3" <label
class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
for="password"
>密码</label >密码</label
> >
<input <input
id="password"
v-model="loginForm.password" v-model="loginForm.password"
autocomplete="current-password"
class="form-input w-full" class="form-input w-full"
name="password"
placeholder="请输入密码" placeholder="请输入密码"
required required
type="password" type="password"

View File

@@ -46,6 +46,7 @@
<input <input
id="username" id="username"
v-model="form.username" v-model="form.username"
autocomplete="username"
class="relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-blue-500 focus:outline-none focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-400 dark:focus:ring-blue-400 sm:text-sm" class="relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-blue-500 focus:outline-none focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-400 dark:focus:ring-blue-400 sm:text-sm"
:disabled="loading" :disabled="loading"
name="username" name="username"
@@ -67,6 +68,7 @@
<input <input
id="password" id="password"
v-model="form.password" v-model="form.password"
autocomplete="current-password"
class="relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-blue-500 focus:outline-none focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-400 dark:focus:ring-blue-400 sm:text-sm" class="relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-blue-500 focus:outline-none focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-400 dark:focus:ring-blue-400 sm:text-sm"
:disabled="loading" :disabled="loading"
name="password" name="password"