[UI] 考虑使用 InputGroup 组件替换验证码等输入框与按钮组合组件

[ukeSJTU]

界面差异概述

清楚简洁地描述当前实现的界面与目标界面之间的主要差异。

页面/组件信息

• 页面路径: [例如 /auth/signup, /dashboard]
• 组件名称: [例如 LoginForm, UserCard]
• 组件路径: [例如 src/components/auth/LoginForm.tsx]

目标界面

设计稿/参考图

请附上目标界面的设计稿或参考图片。

设计说明

描述目标界面的设计要点：

• 布局结构
• 颜色方案
• 字体样式
• 间距要求
• 交互效果

当前实现

当前界面截图

请附上当前实现的界面截图。

当前实现说明

描述当前界面的实现情况。

具体差异点

请列出所有差异点，按优先级排序：

1. [差异点标题]

• 类型: [布局/颜色/字体/间距/动画/其他]
• 优先级: [高/中/低]
• 当前实现: 描述当前的样式/行为
• 目标效果: 描述期望的样式/行为
• 差异说明: 详细说明两者之间的区别

2. [差异点标题]

• 类型: [布局/颜色/字体/间距/动画/其他]
• 优先级: [高/中/低]
• 当前实现: 描述当前的样式/行为
• 目标效果: 描述期望的样式/行为
• 差异说明: 详细说明两者之间的区别

响应式设计

如果涉及响应式设计，请说明不同断点下的差异：

• 桌面端 (≥1024px):
• 平板端 (768px - 1023px):
• 移动端 (< 768px):

浏览器兼容性

是否在特定浏览器下存在差异？

• Chrome
• Safari
• Firefox
• Edge
• 其他(请补充)

验收标准

• 界面布局与设计稿一致
• 颜色、字体符合设计规范
• 间距、尺寸符合设计要求
• 响应式效果正常
• 浏览器兼容性测试通过
• 动画/交互效果符合预期

附加信息

Shadcn的 InputGroup 组件说明：https://ui.shadcn.com/docs/components/input-group

相关Issue

• 链接到任何相关的问题