cavin/smart-crop-ui

Fork 0

Files

peng b907cc4299 生产管理系统前端 - 瓦力0.71原型图更新

2025-10-28 15:26:08 +08:00

7.5 KiB

Raw Blame History

农事日历-可视化视图 Dark 模式适配修复 ✅

🐛 问题描述

农事操作管理系统 - 农事日历 - 可视化视图没有适配 dark 模式，在暗黑模式下显示异常。

影响范围：

✅ 可视化视图（日历视图）
✅ 甘特图视图
✅ 进度状态可视化视图

🔧 修复内容

修复文件

/components/operation/OperationCalendar.tsx

修复点（共9处）

1. 日历星期标题背景

位置： 行 850

// ❌ 修复前
<div className="grid grid-cols-7 bg-gray-100">

// ✅ 修复后
<div className="grid grid-cols-7 bg-muted">

2. 日历日期格子背景（⭐ 主要问题）

位置： 行 872

// ❌ 修复前
className={`min-h-[120px] p-2 border-r border-b last:border-r-0 ${
  !isCurrentMonth ? 'bg-gray-50' : 'bg-white'
} ${isToday ? 'ring-2 ring-green-500' : ''}`}

// ✅ 修复后
className={`min-h-[120px] p-2 border-r border-b last:border-r-0 ${
  !isCurrentMonth ? 'bg-muted' : 'bg-card'
} ${isToday ? 'ring-2 ring-green-500' : ''}`}

3. 可视化视图说明卡片

位置： 行 910-913

// ❌ 修复前
<Card className="p-4 bg-blue-50 border-blue-200">
  <div className="flex items-start gap-2">
    <Zap className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
    <div className="text-sm text-blue-900">

// ✅ 修复后
<Card className="p-4">
  <div className="flex items-start gap-2">
    <Zap className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
    <div className="text-sm">

4. 甘特图说明卡片

位置： 行 1025-1028

// ❌ 修复前
<Card className="p-4 bg-green-50 border-green-200">
  <div className="flex items-start gap-2">
    <BarChart3 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
    <div className="text-sm text-green-900">

// ✅ 修复后
<Card className="p-4">
  <div className="flex items-start gap-2">
    <BarChart3 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
    <div className="text-sm">

5. 地块图标背景

位置： 行 1058

// ❌ 修复前
<div className="p-3 bg-green-100 rounded-lg">

// ✅ 修复后
<div className="p-3 bg-green-50 rounded-lg">

说明： 使用状态色 bg-green-50，在globals.css中已定义dark模式适配

6. 地块整体进度条背景

位置： 行 1091

// ❌ 修复前
<div className="h-3 bg-gray-200 rounded-full overflow-hidden flex">

// ✅ 修复后
<div className="h-3 bg-muted rounded-full overflow-hidden flex">

7. 任务完成度进度条背景

位置： 行 1144

// ❌ 修复前
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">

// ✅ 修复后
<div className="h-2 bg-muted rounded-full overflow-hidden">

8. 进度状态说明卡片

位置： 行 1169-1172

// ❌ 修复前
<Card className="p-4 bg-purple-50 border-purple-200">
  <div className="flex items-start gap-2">
    <TrendingUp className="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" />
    <div className="text-sm text-purple-900">

// ✅ 修复后
<Card className="p-4">
  <div className="flex items-start gap-2">
    <TrendingUp className="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" />
    <div className="text-sm">

9. 筛选结果提示Badge

位置： 行 773

// ❌ 修复前
<Badge variant="outline" className="bg-green-50">
  当前筛选: {filteredTasks.length} 个任务
</Badge>

// ✅ 修复后
<Badge variant="outline">
  当前筛选: {filteredTasks.length} 个任务
</Badge>

🎨 修复效果对比

明亮模式

日历背景：白色（#ffffff）
星期标题：浅灰色（#ececf0）
非当月日期：浅灰色（#ececf0）
进度条背景：浅灰色（#ececf0）
说明卡片：白色卡片背景

暗黑模式（✅ 已修复）

日历背景：深色卡片背景（#1a1f26）
星期标题：深灰色（#374151）
非当月日期：深灰色（#374151）
进度条背景：深灰色（#374151）
说明卡片：深色卡片背景（#1a1f26）

🧪 测试清单

测试场景1：可视化视图（日历）

打开农事操作管理系统
进入"农事日历" - "可视化视图"标签页
切换到 dark 模式
验证以下元素：
- ✅ 星期标题背景适配dark模式
- ✅ 日历日期格子背景适配dark模式
- ✅ 非当月日期显示为深灰色
- ✅ 当月日期显示为深色卡片背景
- ✅ 今日日期有绿色边框高亮
- ✅ 任务卡片颜色正常显示（绿/黄/蓝/紫/红/橙）
- ✅ 说明卡片背景适配dark模式
- ✅ 筛选结果Badge背景适配dark模式

测试场景2：甘特图视图

切换到"甘特图"标签页
在 dark 模式下验证：
- ✅ 甘特图说明卡片背景适配
- ✅ 任务条颜色清晰可见
- ✅ 文字清晰可读

测试场景3：进度状态可视化

切换到"进度状态可视化"标签页
在 dark 模式下验证：
- ✅ 地块卡片背景适配
- ✅ 地块图标背景使用状态色
- ✅ 整体进度条背景适配
- ✅ 任务完成度进度条背景适配
- ✅ 任务卡片边框颜色正常
- ✅ 进度说明卡片背景适配

测试场景4：交互功能

拖拽任务调整日期
切换月份（上一月/下一月/今天）
筛选任务（地块/作物/负责人/类型/状态）
验证所有交互在dark模式下正常工作

📊 保留的状态色

以下状态色已在 globals.css 中定义dark模式适配，无需修改：

任务类型颜色（保留）

🟢 播种：#22c55e（绿色）
🟡 施肥：#eab308（黄色）
🔵 灌溉：#3b82f6（蓝色）
🟣 除草：#a855f7（紫色）
🔴 病虫害防治：#ef4444（红色）
🟠 采收：#f97316（橙色）

任务状态颜色（保留）

🔵 待开始：bg-blue-500（蓝色进度条）
🟢 进行中：bg-green-500（绿色进度条）
⚫ 已完成：bg-gray-400（灰色进度条）

状态Badge颜色（已适配）

bg-blue-100 text-blue-800（待开始）→ dark模式自动转换
bg-green-100 text-green-800（进行中）→ dark模式自动转换
bg-gray-100 text-gray-800（已完成）→ dark模式自动转换

这些颜色在dark模式下会通过 globals.css 中的 .dark 规则自动调整透明度和亮度，无需手动修改。

💡 技术说明

主题变量使用

本次修复统一使用标准主题变量：

bg-muted - 次要背景色（明亮模式：#ececf0，暗黑模式：#374151）
bg-card - 卡片背景色（明亮模式：#ffffff，暗黑模式：#1a1f26）
text-foreground - 前景文字色（自动适配）

状态色处理

对于表示状态的颜色（绿/蓝/红/黄/橙/紫），保留使用 bg-*-50, bg-*-100 等类，因为：

在 globals.css 中已定义了 .dark 模式下的自动转换
这些颜色有明确的语义含义（成功/信息/警告/错误等）
用户已经熟悉这套视觉语言

📝 相关文档

修复时间： 2024年
修复类型： Dark 模式适配
影响范围： 农事操作管理 - 农事日历 - 全部3个标签页
修复文件： /components/operation/OperationCalendar.tsx
修复行数： 9处
状态： ✅ 已完成

7.5 KiB Raw Blame History Unescape Escape