优化登录页面

app/src/pages/login/LoginBox.vue

@@ -16,7 +16,7 @@
           <a-input v-model:value="form.username" autocomplete="new-username" placeholder="请输入用户名" class="login-input h-[45px] rounded-md bg-gray-50 border-gray-200 text-gray-800 placeholder:text-gray-400 focus:border-primary text-base transition-all focus:ring-1 focus:ring-primary" />
         </a-form-item>
 
-        <a-form-item :required="true" name="password" class="mb-6">
+        <a-form-item :required="true" name="password" class="mb-2">
           <a-input v-model:value="form.password" autocomplete="new-password" placeholder="请输入密码" class="login-input h-[45px] rounded-md bg-gray-50 border-gray-200 text-gray-800 placeholder:text-gray-400 focus:border-primary text-base transition-all focus:ring-1 focus:ring-primary" :type="showPassword ? 'text' : 'password'">
             <!-- 密码显示/隐藏图标 -->
             <template #suffix>
@@ -26,6 +26,13 @@
           </a-input>
         </a-form-item>
 
+        <!-- 记住密码选项 -->
+        <a-form-item class="mb-6 pl-2">
+          <a-checkbox v-model:checked="rememberPassword" class="text-gray-600 hover:text-primary transition-colors">
+            记住密码
+          </a-checkbox>
+        </a-form-item>
+
         <a-button htmlType="submit" class="h-[48px] w-full rounded-md transition-colors hover:bg-primary/90 bg-primary border-primary text-white text-base shadow-sm hover:shadow" type="primary" :loading="loading">
           登录
         </a-button>
@@ -35,22 +42,25 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted } from 'vue';
 import { useAccountStore } from '@/store';
 import { ThemeProvider } from 'stepin';
 import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
 
 // 控制密码显示/隐藏的状态
 const showPassword = ref(false);
+// 记住密码状态
+const rememberPassword = ref(false);
+
 export interface LoginFormProps {
   username: string;
   password: string;
 }
 const loading = ref(false);
 
-const form = reactive({
+const form = reactive<LoginFormProps>({
-  username: undefined,
+  username: '',
-  password: undefined,
+  password: '',
 });
 
 const emit = defineEmits<{
@@ -59,8 +69,39 @@ const emit = defineEmits<{
 }>();
 
 const accountStore = useAccountStore();
+
+// 页面加载时读取本地存储的记住密码信息
+onMounted(() => {
+  const savedUser = localStorage.getItem('rememberedUser');
+  if (savedUser) {
+    try {
+      const { username, password } = JSON.parse(savedUser);
+      form.username = username;
+      form.password = password;
+      rememberPassword.value = true;
+    } catch (e) {
+      console.error('读取保存的用户信息失败', e);
+      localStorage.removeItem('rememberedUser');
+    }
+  }
+});
+
 function login(params: LoginFormProps) {
   loading.value = true;
+
+  // 根据记住密码状态保存/清除用户信息
+  if (rememberPassword.value) {
+    localStorage.setItem(
+      'rememberedUser',
+      JSON.stringify({
+        username: params.username,
+        password: params.password,
+      })
+    );
+  } else {
+    localStorage.removeItem('rememberedUser');
+  }
+
   accountStore
     .login(params.username, params.password)
     .then((res) => {