cavin/smart-crop-ui

Fork 0

Files

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

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

6.4 KiB

Raw Blame History

农事活动时间轴 Dark 模式适配修复

🐛 问题描述

农事操作管理系统 - 计划制定中的农事活动时间轴没有适配 dark 模式，在暗黑模式下显示异常。

包含两个部分：

✅ 计划编辑页面的甘特图（已修复）
✅ 计划列表中的活动时间轴（本次修复重点）

✅ 修复内容

修改文件

/components/operation/OperationPlanning.tsx

修复点（共10处）

📍 第一部分：计划编辑页面甘特图（6处）

1. 甘特图容器背景

// ❌ 修复前
<Card className="p-6 bg-gray-50">

// ✅ 修复后
<Card className="p-6 bg-muted">

2. 月份选择器背景

// ❌ 修复前
<div className="px-4 py-1 bg-white rounded border min-w-[120px] text-center">

// ✅ 修复后
<div className="px-4 py-1 bg-background rounded border min-w-[120px] text-center">

3. 日期刻度容器背景

// ❌ 修复前
<div className="mb-2 relative h-8 bg-white rounded border overflow-hidden">

// ✅ 修复后
<div className="mb-2 relative h-8 bg-background rounded border overflow-hidden">

4. 日期格子背景（周末高亮）

// ❌ 修复前（使用内联样式）
<div
  className={`flex-1 ... ${isToday ? 'bg-blue-100' : ''}`}
  style={{
    backgroundColor: isToday ? '#dbeafe' : 
      (date.getDay() === 0 || date.getDay() === 6 ? '#f9fafb' : '#fff'),
  }}
>

// ✅ 修复后（使用主题变量）
<div
  className={`flex-1 ... ${
    isToday ? 'bg-blue-100' : (date.getDay() === 0 || date.getDay() === 6 ? 'bg-muted' : '')
  }`}
>

5. 活动条轨道背景

// ❌ 修复前
<div className="relative h-10 bg-white rounded border">

// ✅ 修复后
<div className="relative h-10 bg-background rounded border">

6. 甘特图活动条容器背景（⭐ 关键修复）

// ❌ 修复前
<div
  ref={ganttRef}
  className="space-y-3 select-none relative"
>

// ✅ 修复后
<div
  ref={ganttRef}
  className="space-y-3 select-none relative p-4 rounded-lg bg-card"
>

📍 第二部分：计划列表活动时间轴（4处）⭐ 重点

7. 列表时间轴容器背景（⭐ 主要问题）

// ❌ 修复前（截图中显示的白色背景区域）
<div className="p-4 bg-gray-50 rounded-lg">

// ✅ 修复后
<div className="p-4 bg-muted rounded-lg">

8. 列表时间轴活动条轨道背景

// ❌ 修复前
<div className="relative h-8 bg-white rounded border">

// ✅ 修复后
<div className="relative h-8 bg-background rounded border">

9. 计划模板活动列表背景

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

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

10. 工单详情/计划详情信息卡片背景

// ❌ 修复前（创建人、创建时间等信息卡片）
<div className="p-4 bg-gray-50 rounded-lg">

// ✅ 修复后
<div className="p-4 bg-muted rounded-lg">

🎨 视觉效果

明亮模式

甘特图容器：浅灰色背景（#ececf0）
月份选择器：白色背景
日期刻度：白色背景
周末日期：浅灰色背景
活动条轨道：白色背景
活动条容器：白色卡片背景（#ffffff）

暗黑模式

甘特图容器：深灰色背景（#374151）✅ 自动适配
月份选择器：深色背景（#0f1419）✅ 自动适配
日期刻度：深色背景（#0f1419）✅ 自动适配
周末日期：灰色背景（#374151）✅ 自动适配
活动条轨道：深色背景（#0f1419）✅ 自动适配
活动条容器：卡片背景（#1a1f26）✅ 自动适配

🧪 测试清单

测试场景1：计划列表时间轴（⭐ 重点）

打开农事操作管理系统
进入"计划制定"页面（默认标签页）
查看计划列表中的"农事活动时间轴"区域
切换到 dark 模式
验证以下元素：
- 时间轴容器背景正确显示深灰色（不再是白色）✅
- 活动条轨道背景正确显示深色
- 活动条本身的颜色保持正常（绿/黄/蓝/紫/红/橙）
- 文字清晰可读
切换回明亮模式
验证明亮模式下时间轴显示正常

测试场景2：计划编辑页面甘特图

点击"新建计划"或"编辑计划"
添加多个农事活动
查看甘特图可视化区域
切换到 dark 模式
验证以下元素：
- 甘特图容器背景正确显示
- 月份选择器背景正确显示
- 日期刻度背景正确显示
- 周末日期高亮正确显示
- 活动条轨道背景正确显示
- 活动条容器背景正确显示
- "今天"标记正确高亮（蓝色背景保留）
- 操作提示卡片蓝色背景保留（状态色）
切换回明亮模式
验证明亮模式下所有元素正常

📝 备注

保留的状态色

以下元素使用状态色，保持不变：

✅ "今天"日期标记：bg-blue-100（蓝色高亮）
✅ 操作提示卡片：bg-blue-50 border-blue-200（蓝色信息框）
✅ 活动类型 Badge：各种颜色（绿/黄/蓝/紫/红/橙）

遵循的原则

容器背景使用 bg-muted（自动适配明暗模式）
主背景使用 bg-background（自动适配明暗模式）
状态色保持不变（蓝色表示"今天"和"信息提示"）
移除所有内联 style 中的硬编码颜色值
使用 Tailwind 主题变量代替固定颜色

🔍 相关文档

THEME_REFACTOR_COMPLETE.md - 主题重构完成总结
THEME_QUICK_REFERENCE.md - 主题变量快速参考
QUICK_REFACTOR_PATTERNS.md - 快速重构模式指南

📊 修复对比

修复前（Dark模式）

❌ 计划列表时间轴：白色背景（与截图一致）
❌ 活动条轨道：白色背景
❌ 信息卡片：浅灰色背景（#f9fafb）
❌ 整体对比度差，视觉不协调

修复后（Dark模式）

✅ 计划列表时间轴：深灰色背景（#374151）
✅ 活动条轨道：深色背景（#0f1419）
✅ 信息卡片：深灰色背景（#374151）
✅ 整体协调统一，视觉舒适

修复时间： 2024年（本次会话）
修复类型： Dark 模式适配
影响范围： 农事操作管理 - 计划制定 - 计划列表时间轴 + 甘特图编辑器
修复文件： /components/operation/OperationPlanning.tsx
修复行数： 10处
测试状态： ⏳ 待测试

6.4 KiB Raw Blame History Unescape Escape