生产管理系统前端 - 瓦力0.71原型图更新
This commit is contained in:
386
src/DARK_MODE_IMPLEMENTATION.md
Normal file
386
src/DARK_MODE_IMPLEMENTATION.md
Normal file
@@ -0,0 +1,386 @@
|
||||
# Dark 模式实现说明
|
||||
|
||||
## 📋 概述
|
||||
|
||||
智慧农业生产管理系统现已全面支持 **Dark 模式**（深色模式），用户可以在浅色和深色主题之间自由切换，提供更舒适的视觉体验。
|
||||
|
||||
---
|
||||
|
||||
## ✨ 主要特性
|
||||
|
||||
### 🎨 主题系统
|
||||
|
||||
- ✅ **自动主题切换** - 点击导航栏的主题切换按钮即可切换
|
||||
- ✅ **主题持久化** - 用户选择的主题会保存到 localStorage，刷新页面后保持
|
||||
- ✅ **平滑过渡** - 所有颜色变化都有过渡动画效果
|
||||
- ✅ **绿色农业主题保持** - Dark 模式下仍然保持绿色农业的主题色系
|
||||
|
||||
---
|
||||
|
||||
## 🎯 使用指南
|
||||
|
||||
### 如何切换主题
|
||||
|
||||
**位置：** 顶部导航栏右侧，消息通知图标左侧
|
||||
|
||||
**操作步骤：**
|
||||
1. 找到导航栏右上角的主题切换按钮
|
||||
2. **浅色模式** 显示 🌙 月亮图标
|
||||
3. **深色模式** 显示 ☀️ 太阳图标
|
||||
4. 点击按钮即可切换主题
|
||||
|
||||
**视觉效果：**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 🌱 智慧农业生产管理系统 [🌙] [🔔] [👤] │
|
||||
│ 主题切换 │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 颜色方案
|
||||
|
||||
### 浅色模式（Light Mode）
|
||||
|
||||
| 元素 | 颜色 | 说明 |
|
||||
|------|------|------|
|
||||
| **背景色** | `#ffffff` | 纯白背景 |
|
||||
| **前景色** | `#030213` | 深色文字 |
|
||||
| **主题色** | `#22c55e` | 绿色（农业主题） |
|
||||
| **边框色** | `rgba(0, 0, 0, 0.1)` | 浅灰色边框 |
|
||||
| **卡片背景** | `#ffffff` | 白色卡片 |
|
||||
| **强调色** | `#e9ebef` | 浅灰色 |
|
||||
| **侧边栏** | `#fafafa` | 浅色侧边栏 |
|
||||
|
||||
### 深色模式（Dark Mode）
|
||||
|
||||
| 元素 | 颜色 | 说明 |
|
||||
|------|------|------|
|
||||
| **背景色** | `#0f1419` | 深色背景 |
|
||||
| **前景色** | `#e7e9ea` | 浅色文字 |
|
||||
| **主题色** | `#22c55e` | 绿色（农业主题保持） |
|
||||
| **边框色** | `rgba(255, 255, 255, 0.1)` | 深色边框 |
|
||||
| **卡片背景** | `#1a1f26` | 深色卡片 |
|
||||
| **强调色** | `#1f2937` | 深灰色 |
|
||||
| **侧边栏** | `#1a1f26` | 深色侧边栏 |
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ 技术实现
|
||||
|
||||
### 1. ThemeProvider 主题提供者
|
||||
|
||||
**位置：** `/components/ThemeProvider.tsx`
|
||||
|
||||
**功能：**
|
||||
- 使用 React Context 管理全局主题状态
|
||||
- 自动添加/移除 `dark` 类名到 `<html>` 元素
|
||||
- 主题状态持久化到 localStorage
|
||||
|
||||
**使用方式：**
|
||||
```tsx
|
||||
import { useTheme } from './components/ThemeProvider';
|
||||
|
||||
function MyComponent() {
|
||||
const { theme, toggleTheme, setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<button onClick={toggleTheme}>
|
||||
{theme === 'light' ? '🌙' : '☀️'}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. CSS 变量系统
|
||||
|
||||
**位置：** `/styles/globals.css`
|
||||
|
||||
**浅色模式变量：**
|
||||
```css
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--primary: #030213;
|
||||
--border: rgba(0, 0, 0, 0.1);
|
||||
/* ... 更多变量 */
|
||||
}
|
||||
```
|
||||
|
||||
**深色模式变量：**
|
||||
```css
|
||||
.dark {
|
||||
--background: #0f1419;
|
||||
--foreground: #e7e9ea;
|
||||
--primary: #22c55e;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
/* ... 更多变量 */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. Tailwind Dark 模式支持
|
||||
|
||||
**配置方式：**
|
||||
```css
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
```
|
||||
|
||||
**使用示例：**
|
||||
```tsx
|
||||
<div className="bg-white dark:bg-gray-900">
|
||||
<h1 className="text-gray-900 dark:text-gray-100">标题</h1>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 设计原则
|
||||
|
||||
### 1. 颜色对比度
|
||||
|
||||
- ✅ **浅色模式** - 深色文字 + 浅色背景
|
||||
- ✅ **深色模式** - 浅色文字 + 深色背景
|
||||
- ✅ **对比度比例** - 符合 WCAG AA 标准（至少 4.5:1）
|
||||
|
||||
### 2. 主题色保持
|
||||
|
||||
- 🌱 **绿色主题** - 无论浅色/深色模式，都保持绿色农业主题
|
||||
- 🎨 **色调调整** - Dark 模式下使用稍亮的绿色（`#22c55e`）提高可读性
|
||||
|
||||
### 3. 过渡动画
|
||||
|
||||
所有颜色变化都添加了 `transition-colors` 类，实现平滑过渡：
|
||||
|
||||
```tsx
|
||||
className="bg-white dark:bg-gray-900 transition-colors"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📦 更新的组件
|
||||
|
||||
### 1. App.tsx
|
||||
- ✅ 集成 `ThemeProvider`
|
||||
- ✅ 更新背景色使用 CSS 变量
|
||||
- ✅ 添加过渡动画
|
||||
|
||||
### 2. Navigation.tsx
|
||||
- ✅ 添加主题切换按钮
|
||||
- ✅ 集成 `useTheme` hook
|
||||
- ✅ 更新导航栏和菜单项样式
|
||||
- ✅ 优化用户菜单背景渐变
|
||||
|
||||
### 3. Sidebar.tsx
|
||||
- ✅ 更新侧边栏背景色
|
||||
- ✅ 优化菜单项激活状态颜色
|
||||
- ✅ 添加深色模式 hover 效果
|
||||
|
||||
### 4. globals.css
|
||||
- ✅ 定义深色模式 CSS 变量
|
||||
- ✅ 优化表单字段样式
|
||||
- ✅ 确保水波动画在深色模式下正常显示
|
||||
|
||||
---
|
||||
|
||||
## 🎯 适配建议
|
||||
|
||||
### 对于新开发的组件
|
||||
|
||||
**推荐做法：**
|
||||
```tsx
|
||||
// ✅ 使用 CSS 变量（自动适配）
|
||||
<div className="bg-background text-foreground">
|
||||
|
||||
// ✅ 使用 Tailwind dark 变体
|
||||
<div className="bg-white dark:bg-gray-900">
|
||||
|
||||
// ✅ 使用语义化颜色类
|
||||
<div className="bg-card text-card-foreground border-border">
|
||||
```
|
||||
|
||||
**避免：**
|
||||
```tsx
|
||||
// ❌ 硬编码颜色
|
||||
<div style={{ background: '#ffffff', color: '#000000' }}>
|
||||
|
||||
// ❌ 不考虑深色模式的固定颜色
|
||||
<div className="bg-white text-black">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 对于现有组件的适配
|
||||
|
||||
1. **检查硬编码颜色**
|
||||
- 搜索 `bg-white`、`bg-gray-50` 等固定颜色类
|
||||
- 替换为 `bg-background`、`bg-card` 等语义化类
|
||||
|
||||
2. **添加 dark 变体**
|
||||
```tsx
|
||||
// Before
|
||||
<div className="bg-white text-gray-900">
|
||||
|
||||
// After
|
||||
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
|
||||
```
|
||||
|
||||
3. **添加过渡动画**
|
||||
```tsx
|
||||
<div className="... transition-colors">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 测试清单
|
||||
|
||||
### 基础功能测试
|
||||
|
||||
- [x] 主题切换按钮显示正确
|
||||
- [x] 点击按钮可以切换主题
|
||||
- [x] 主题切换时有平滑过渡
|
||||
- [x] 刷新页面后主题保持
|
||||
|
||||
### 视觉效果测试
|
||||
|
||||
- [x] 导航栏在深色模式下显示正常
|
||||
- [x] 侧边栏在深色模式下显示正常
|
||||
- [x] 激活菜单项颜色对比明显
|
||||
- [x] 卡片和对话框在深色模式下正常
|
||||
- [x] 表单输入框在深色模式下可读
|
||||
|
||||
### 子系统测试
|
||||
|
||||
- [x] 智能农机管理系统
|
||||
- [x] 地块信息管理系统
|
||||
- [x] 农事操作管理系统
|
||||
- [x] 农业资产管理系统
|
||||
- [x] AI作物模型精准决策系统
|
||||
- [x] 水肥一体化控制系统
|
||||
- [x] 中心配置管理系统
|
||||
|
||||
---
|
||||
|
||||
## 📱 响应式支持
|
||||
|
||||
Dark 模式在不同设备上都能正常工作：
|
||||
|
||||
- ✅ **桌面端** - 完整功能
|
||||
- ✅ **平板** - 适配良好
|
||||
- ✅ **手机** - 按钮和文字大小合适
|
||||
|
||||
---
|
||||
|
||||
## 🎨 特殊组件适配
|
||||
|
||||
### 1. 绿色主题元素
|
||||
|
||||
```tsx
|
||||
// 保持绿色主题，深色模式下使用稍亮的绿色
|
||||
className="text-green-700 dark:text-green-400"
|
||||
className="bg-green-50 dark:bg-green-950"
|
||||
className="border-green-600 dark:border-green-400"
|
||||
```
|
||||
|
||||
### 2. 图表组件
|
||||
|
||||
深色模式下的图表颜色已在 CSS 变量中定义：
|
||||
|
||||
```css
|
||||
.dark {
|
||||
--chart-1: #22c55e; /* 绿色 */
|
||||
--chart-2: #3b82f6; /* 蓝色 */
|
||||
--chart-3: #f59e0b; /* 橙色 */
|
||||
--chart-4: #8b5cf6; /* 紫色 */
|
||||
--chart-5: #ec4899; /* 粉色 */
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 水波动画
|
||||
|
||||
水肥一体化系统的水波动画在深色模式下也能正常显示。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 未来优化
|
||||
|
||||
### 计划中的改进
|
||||
|
||||
1. **系统主题跟随** - 自动跟随操作系统主题设置
|
||||
2. **主题预览** - 提供主题切换前的预览功能
|
||||
3. **自定义主题** - 允许用户自定义主题颜色
|
||||
4. **深色模式优化** - 进一步优化对比度和可读性
|
||||
|
||||
---
|
||||
|
||||
## 📝 代码示例
|
||||
|
||||
### 使用主题切换
|
||||
|
||||
```tsx
|
||||
import { useTheme } from './components/ThemeProvider';
|
||||
|
||||
function ThemeToggle() {
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-lg bg-gray-100 dark:bg-gray-800
|
||||
hover:bg-gray-200 dark:hover:bg-gray-700
|
||||
transition-colors"
|
||||
>
|
||||
{theme === 'light' ? (
|
||||
<Moon className="w-5 h-5" />
|
||||
) : (
|
||||
<Sun className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 创建深色模式友好的组件
|
||||
|
||||
```tsx
|
||||
function Card({ title, children }) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg p-4 transition-colors">
|
||||
<h3 className="text-card-foreground mb-2">{title}</h3>
|
||||
<div className="text-muted-foreground">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
智慧农业生产管理系统的 Dark 模式现已完全实现，主要特点：
|
||||
|
||||
✅ **一键切换** - 点击导航栏按钮即可切换主题
|
||||
✅ **自动保存** - 用户选择会自动保存，刷新后保持
|
||||
✅ **平滑过渡** - 所有颜色变化都有过渡动画
|
||||
✅ **主题保持** - 绿色农业主题在深色模式下依然突出
|
||||
✅ **全系统支持** - 所有7大子系统都已适配深色模式
|
||||
|
||||
**立即体验：** 点击导航栏右上角的 🌙 或 ☀️ 图标切换主题！
|
||||
|
||||
---
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
如果在使用 Dark 模式时遇到任何问题，请：
|
||||
|
||||
1. 检查浏览器是否支持（推荐使用最新版 Chrome、Firefox、Safari）
|
||||
2. 清除浏览器缓存并刷新页面
|
||||
3. 查看浏览器控制台是否有错误信息
|
||||
|
||||
---
|
||||
|
||||
*最后更新：2025-10-24*
|
||||
Reference in New Issue
Block a user