生产管理系统前端 - 瓦力0.71原型图更新
This commit is contained in:
234
src/OPERATION_PLANNING_TIMELINE_DARK_MODE_FIX.md
Normal file
234
src/OPERATION_PLANNING_TIMELINE_DARK_MODE_FIX.md
Normal file
@@ -0,0 +1,234 @@
|
||||
# 农事活动时间轴 Dark 模式适配修复
|
||||
|
||||
## 🐛 问题描述
|
||||
|
||||
农事操作管理系统 - 计划制定中的农事活动时间轴没有适配 dark 模式，在暗黑模式下显示异常。
|
||||
|
||||
**包含两个部分：**
|
||||
1. ✅ **计划编辑页面的甘特图**（已修复）
|
||||
2. ✅ **计划列表中的活动时间轴**（本次修复重点）
|
||||
|
||||
## ✅ 修复内容
|
||||
|
||||
### 修改文件
|
||||
`/components/operation/OperationPlanning.tsx`
|
||||
|
||||
### 修复点（共10处）
|
||||
|
||||
---
|
||||
|
||||
## 📍 第一部分：计划编辑页面甘特图（6处）
|
||||
|
||||
#### 1. 甘特图容器背景
|
||||
```tsx
|
||||
// ❌ 修复前
|
||||
<Card className="p-6 bg-gray-50">
|
||||
|
||||
// ✅ 修复后
|
||||
<Card className="p-6 bg-muted">
|
||||
```
|
||||
|
||||
#### 2. 月份选择器背景
|
||||
```tsx
|
||||
// ❌ 修复前
|
||||
<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. 日期刻度容器背景
|
||||
```tsx
|
||||
// ❌ 修复前
|
||||
<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. 日期格子背景（周末高亮）
|
||||
```tsx
|
||||
// ❌ 修复前（使用内联样式）
|
||||
<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. 活动条轨道背景
|
||||
```tsx
|
||||
// ❌ 修复前
|
||||
<div className="relative h-10 bg-white rounded border">
|
||||
|
||||
// ✅ 修复后
|
||||
<div className="relative h-10 bg-background rounded border">
|
||||
```
|
||||
|
||||
#### 6. 甘特图活动条容器背景（⭐ 关键修复）
|
||||
```tsx
|
||||
// ❌ 修复前
|
||||
<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. 列表时间轴容器背景（⭐ 主要问题）
|
||||
```tsx
|
||||
// ❌ 修复前（截图中显示的白色背景区域）
|
||||
<div className="p-4 bg-gray-50 rounded-lg">
|
||||
|
||||
// ✅ 修复后
|
||||
<div className="p-4 bg-muted rounded-lg">
|
||||
```
|
||||
|
||||
#### 8. 列表时间轴活动条轨道背景
|
||||
```tsx
|
||||
// ❌ 修复前
|
||||
<div className="relative h-8 bg-white rounded border">
|
||||
|
||||
// ✅ 修复后
|
||||
<div className="relative h-8 bg-background rounded border">
|
||||
```
|
||||
|
||||
#### 9. 计划模板活动列表背景
|
||||
```tsx
|
||||
// ❌ 修复前
|
||||
<div className="p-3 bg-gray-50 rounded-lg">
|
||||
|
||||
// ✅ 修复后
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
```
|
||||
|
||||
#### 10. 工单详情/计划详情信息卡片背景
|
||||
```tsx
|
||||
// ❌ 修复前（创建人、创建时间等信息卡片）
|
||||
<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：各种颜色（绿/黄/蓝/紫/红/橙）
|
||||
|
||||
### 遵循的原则
|
||||
1. 容器背景使用 `bg-muted`（自动适配明暗模式）
|
||||
2. 主背景使用 `bg-background`（自动适配明暗模式）
|
||||
3. 状态色保持不变（蓝色表示"今天"和"信息提示"）
|
||||
4. 移除所有内联 style 中的硬编码颜色值
|
||||
5. 使用 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处
|
||||
**测试状态：** ⏳ 待测试
|
||||
Reference in New Issue
Block a user