[UI/UX]: 登录界面缺乏响应式对齐且不符合现代网页设计标准

[atoncooper]

📌 概述 / 问题描述

该登录页面的用户界面设计不符合现代网页设计标准（如 Material Design 或 Tailwind 规范）。界面在移动端视口下缺乏响应式缩放支持，表单元素对齐不规范，且在用户交互过程中（如点击登录后）缺乏足够的视觉反馈（例如加载状态、清晰的校验错误提示）。

🔁 复现步骤

1. 访问 https://106.53.220.71。
2. 调整浏览器窗口大小至移动端视口（例如模拟 iPhone 12 的屏幕宽度）。
3. 尝试输入空值或格式不正确的账号密码并提交。

🎯 预期结果

1. 页面布局应具备完全的响应式能力（在桌面端和移动端都能流式缩放）。
2. 输入框、标签和提交按钮应遵循清晰、居中的网格/弹性盒 (Flexbox) 设计，并带有合理的内边距 (Padding) 和外边距 (Margin)。
3. 提供直观的微交互反馈，例如：在验证期间按钮显示加载动画 (Spinner)，在输入框下方显示清晰的红色文本错误提示。

❌ 实际结果

1. 在较小屏幕上，表单字段会发生错位、变形或被裁剪。
2. 视觉风格较为过时（生硬的边框、非标准的配色、偏向原生 HTML 的粗糙样式）。
3. 当网络请求较慢时，界面没有任何加载提示（Loading），用户容易产生“未点击成功”的错觉从而频繁重复点击，导致重复提交请求。

⚠️ 严重程度 / 影响

• P2 - 中 (UI/UX 优化，影响新用户的使用体验)

💻 环境与上下文

• URL: https://106.53.220.71
• 受影响组件: 前端 UI / CSS 样式表