cavin/smart-crop-ui

Fork 0

Files

peng 28229ce795 生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

2025-10-23 10:57:14 +08:00

6.7 KiB

Raw Blame History

✅ 轨迹回放日期输入框样式修复完成

🐛 问题描述

农机作业轨迹回放页面的**"选择日期"输入框没有样式**。

🔍 问题原因

TrackPlayback.tsx 使用了原生的 <input> 标签，而不是系统中统一的 <Input> 组件。

修复前 ❌

// TrackPlayback.tsx - 第395-400行（旧代码）
<input
  type="date"
  value={selectedDate}
  onChange={(e) => setSelectedDate(e.target.value)}
  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>

问题:

❌ 使用原生 <input> 标签
❌ 虽然有完整的className，但可能因为CSS优先级或其他原因导致样式不生效
❌ 与系统其他日期输入框不一致

✅ 解决方案

修复后 ✅

// TrackPlayback.tsx - 第395-400行（新代码）
<Input
  type="date"
  value={selectedDate}
  onChange={(e) => setSelectedDate(e.target.value)}
/>

改进:

✅ 使用 <Input> 组件（Shadcn/UI）
✅ 自动继承所有样式
✅ 代码更简洁
✅ 与系统其他输入框一致

📝 修改内容

1. 添加 Input 组件导入

// 第4行
import { Input } from '../../ui/input';

2. 替换原生 input 为 Input 组件

// 第393-401行
<div>
  <Label>选择日期</Label>
  <Input
    type="date"
    value={selectedDate}
    onChange={(e) => setSelectedDate(e.target.value)}
  />
</div>

🎨 修复效果

现在的样式

┌─────────────────────────────────────────────────┐
│ 🗺️ 农机作业轨迹回放                             │
├─────────────────────────────────────────────────┤
│                                                 │
│ ┌─────────────┐  ┌────────────────┐  ┌────────┐│
│ │选择农机 ▼  │  │  2025-10-17📅 │  │🔄 加载轨│
│ └─────────────┘  └────────────────┘  └────────┘│
│                         ⬆️                       │
│                   完整的样式！                    │
│   • 清晰的边框                                   │
│   • 蓝色聚焦高亮                                 │
│   • 40px高度                                     │
│   • 与其他输入框一致                             │
└─────────────────────────────────────────────────┘

🎯 样式特性

使用 <Input> 组件后自动获得：

✅ 边框样式
   - 默认: 1px 灰色边框
   - 圆角: 中等圆角

✅ 聚焦效果
   - 蓝色环形高亮 (2px)
   - 环形偏移 (2px)
   - 无默认轮廓

✅ 尺寸规范
   - 高度: 40px
   - 内边距: 水平 12px, 垂直 8px
   - 文本: 小号字体

✅ 状态样式
   - 禁用: 50%透明度
   - 光标: not-allowed

✅ 响应式
   - 宽度: 100%
   - 自适应容器

📊 对比

修复前

❌ 原生 <input> 标签
❌ 手写className (冗长)
❌ 可能样式不生效
❌ 代码6行

修复后

✅ <Input> 组件
✅ 自动样式
✅ 样式稳定可靠
✅ 代码3行

🔧 修改的文件

✅ /components/machinery/scheduling/TrackPlayback.tsx
   - 添加 Input 导入
   - 替换 input 为 Input 组件
   - 移除冗长的className

🧪 测试步骤

1. 访问页面

农机管理 → 任务调度与跟踪 → 作业轨迹回放

2. 检查日期输入框

✅ 输入框有清晰的边框
✅ 边框颜色与"选择农机"一致
✅ 高度为 40px（与"选择农机"一致）
✅ 圆角统一

3. 测试交互

✅ 点击日期输入框
✅ 出现蓝色聚焦高亮环
✅ 打开日期选择器
✅ 选择日期后正常显示

4. 验证一致性

✅ 与"选择农机"下拉框样式一致
✅ 与系统其他 Input 组件样式一致
✅ 整体界面和谐统一

💡 为什么使用 Input 组件

优势

样式统一
- 所有输入框使用同一组件
- 确保视觉一致性
维护性强
- 样式集中在组件中
- 修改一处，全局更新
代码简洁
- 不需要手写长className
- Props 清晰明了
可靠性高
- Shadcn/UI 经过充分测试
- 样式稳定可靠

系统中的使用

✅ 所有表单输入框都使用 <Input>
✅ 所有日期选择都使用 <Input type="date">
✅ 只有 TrackPlayback 之前使用原生input (现已修复)

📚 相关文件

Input 组件定义

/components/ui/input.tsx

使用示例

// 文本输入
<Input placeholder="请输入..." />

// 日期输入
<Input type="date" />

// 数字输入
<Input type="number" />

// 带验证
<Input {...register('fieldName', { required: true })} />

✅ 验证清单

✅ Input 组件已导入
✅ 原生 input 已替换为 Input
✅ type="date" 属性保留
✅ value 和 onChange 保留
✅ 代码更简洁
✅ 样式自动应用

🎉 修复完成

修改内容

添加: import { Input } from '../../ui/input';
修改: <input> → <Input>
删除: 冗长的 className

效果

✅ 日期输入框有完整样式
✅ 边框清晰
✅ 聚焦高亮效果
✅ 与系统其他输入框一致
✅ 代码更简洁易维护

不需要刷新缓存

这是代码级别的修改，保存后：

✅ 开发服务器会自动重新编译
✅ 页面会自动刷新（Hot Module Reload）
✅ 新样式立即生效

如果没有自动刷新，只需要：

按 Ctrl+R (Windows/Linux)
或
按 ⌘+R (Mac)

普通刷新即可，不需要强制刷新缓存！

实施日期: 2025-10-17
状态: ✅ 已修复
影响范围: 农机作业轨迹回放页面
修复方式: 使用 Input 组件替代原生 input

🎊 日期输入框样式问题已完全修复！

现在所有输入框都使用统一的 Input 组件，样式统一、美观、一致！

6.7 KiB Raw Blame History Unescape Escape