更新 Dockerfile: 在构建前删除 dist 目录以确保不使用本地遗留产物，优化构建过程。

2025-07-19 19:42:56 +08:00
parent 56438a0425
commit 4ffae321ef
4 changed files with 2 additions and 352 deletions
--- a/3
+++ b/3
@ -23,7 +23,8 @@ WORKDIR /app
 # 复制前端代码并安装依赖、构建
 COPY platform/ ./platform/
 WORKDIR /app/platform
-RUN npm install && npm run build
+# 构建前先删除 dist，确保不会用到本地遗留产物
+RUN rm -rf dist && npm install && npm run build
 RUN ls -l /app/platform

 # 安装 http-server
--- a/platform/DASHBOARD_OPTIMIZATION.md
+++ b/platform/DASHBOARD_OPTIMIZATION.md
@ -1,225 +0,0 @@
-# Dashboard 页面优化总结
-
-## 优化概述
-
-本次优化主要针对 Dashboard 页面进行了全面的现代化改造，实现了自适应、美观、风格统一、现代简约的设计目标。
-
-## 主要改进
-
-### 1. 全局设计系统统一
-
-#### 颜色变量系统
- 建立了完整的 CSS 变量系统，统一管理所有颜色、间距、字体等设计元素
- 主色调：`#1890ff` (蓝色系)
- 渐变色：`linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
- 背景色：`#f5f7fa` (浅灰蓝)
- 文字色：`#1a1a1a` (深灰)
-
-#### 设计令牌
-```css
-/* 间距系统 */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-2xl: 24px;
--spacing-3xl: 32px;
-
-/* 圆角系统 */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
-
-/* 阴影系统 */
--shadow-sm: 0 2px 8px rgba(24, 144, 255, 0.04);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
-```
-
-### 2. 组件切分优化
-
-#### 页面结构重组
- 移除了冗余的页面标题，简化页面头部
- 将操作按钮移至右上角，提升用户体验
- 优化了区域标题设计，添加了功能标签
-
-#### 组件职责明确
- `StatCards`: 统计卡片展示
- `StatCardItem`: 单个统计卡片
- `MapSection`: 地图组件
- `TemperatureMonitor`: 温度监控
- `HumidityMonitor`: 湿度监控
- `PersonnelManagement`: 人员管理
- `AISection`: AI助手
-
-### 3. 图标系统升级
-
-#### 使用 Lucide Vue 图标
- 替换了自定义图标组件，使用成熟的图标库
- 统一图标风格和大小规范
- 提升图标加载性能和维护性
-
-```vue
-import { RefreshCw, Download, X, Maximize2 } from 'lucide-vue-next';
-```
-
-### 4. 响应式设计优化
-
-#### 断点系统
- 1400px: 大屏幕适配
- 1200px: 桌面端适配
- 768px: 平板端适配
- 480px: 移动端适配
-
-#### 自适应布局
- 使用 CSS Grid 实现灵活的布局系统
- 统计卡片支持自动换行
- 监控组件在小屏幕下垂直排列
-
-### 5. 视觉效果提升
-
-#### 现代简约设计
- 使用毛玻璃效果 (`backdrop-filter: blur()`)
- 渐变背景和按钮
- 柔和的阴影和圆角
- 平滑的动画过渡
-
-#### 交互体验
- 悬停效果和微动画
- 加载状态反馈
- 通知系统优化
-
-### 6. 性能优化
-
-#### 代码优化
- 使用 CSS 变量减少重复代码
- 组件按需加载
- 图标库按需导入
-
-#### 样式优化
- 使用 CSS 变量提升主题切换效率
- 优化选择器性能
- 减少不必要的样式计算
-
-## 技术实现
-
-### 1. CSS 变量系统
-```css
-:root {
-  /* 主色调 */
-  --primary-color: #1890ff;
-  --primary-light: #40a9ff;
-  --primary-dark: #096dd9;
-  
-  /* 渐变色 */
-  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  
-  /* 背景色 */
-  --bg-main: #f5f7fa;
-  --bg-card: #fff;
-  --bg-card-hover: rgba(255, 255, 255, 0.95);
-}
-```
-
-### 2. 响应式布局
-```css
-.main-content {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-3xl);
-}
-
-@media (max-width: 1200px) {
-  .main-content {
-    grid-template-columns: 1fr;
-  }
-}
-```
-
-### 3. 组件化设计
-```vue
-<template>
-  <div class="dashboard-page">
-    <!-- 操作区域 -->
-    <div class="dashboard-header">
-      <div class="header-actions">
-        <BaseButton variant="secondary" @click="refreshAllData">
-          <RefreshCw :size="16" />
-          刷新数据
-        </BaseButton>
-      </div>
-    </div>
-    
-    <!-- 统计区域 -->
-    <StatCards :stats="statistics" />
-    
-    <!-- 主要内容 -->
-    <div class="main-content">
-      <!-- 左侧列 -->
-      <div class="left-column">
-        <MonitoringSection />
-        <MapSection />
-      </div>
-      
-      <!-- 右侧列 -->
-      <div class="right-column">
-        <PersonnelSection />
-        <AISection />
-      </div>
-    </div>
-  </div>
-</template>
-```
-
-## 设计原则
-
-### 1. 克制设计
- 避免过度装饰，保持界面简洁
- 使用留白和间距创造层次感
- 颜色使用克制，主色调不超过3种
-
-### 2. 现代简约
- 扁平化设计风格
- 清晰的视觉层次
- 一致的设计语言
-
-### 3. 用户体验优先
- 直观的操作流程
- 清晰的信息架构
- 流畅的交互反馈
-
-## 后续优化建议
-
-### 1. 主题系统
- 支持深色模式切换
- 多主题色彩方案
- 用户自定义主题
-
-### 2. 性能优化
- 组件懒加载
- 虚拟滚动
- 图片懒加载
-
-### 3. 功能增强
- 数据可视化图表
- 实时数据更新
- 个性化配置
-
-### 4. 无障碍优化
- 键盘导航支持
- 屏幕阅读器兼容
- 高对比度模式
-
-## 总结
-
-通过本次优化，Dashboard 页面实现了：
- ✅ 统一的设计系统
- ✅ 现代化的视觉效果
- ✅ 完善的响应式支持
- ✅ 优秀的用户体验
- ✅ 良好的代码可维护性
-
-整体设计风格现代简约、克制优雅，符合当代 Web 应用的设计趋势。 
--- a/platform/ENVIRONMENT_MONITORING_TODO.md
+++ b/platform/ENVIRONMENT_MONITORING_TODO.md
@ -1,125 +0,0 @@
-# 环境监控系统优化待办清单
-
-## ✅ 已完成任务
-
-### 1. 设备地理分布模态框优化
- ✅ 修复模态框层级问题，使用Teleport挂载到body
- ✅ 实现全局居中定位
- ✅ 优化模态框样式和交互体验
-
-### 2. 生长趋势分析卡片重构
- ✅ 创建新的GrowthTrendAnalysis组件
- ✅ 集成ECharts图表库
- ✅ 实现30天生长趋势图表
- ✅ 添加株高、叶片数、分蘖数三条数据线
- ✅ 实现图表自适应和响应式设计
- ✅ 添加生长状态概览面板
- ✅ 实现可展开的详细信息区域
- ✅ 添加刷新功能和加载状态
- ✅ 使用现代化设计风格
-
-### 3. 温度监控组件优化
- ✅ 重新设计温度监控卡片
- ✅ 提升现代感和文本可读性
- ✅ 增加设备信息和刷新按钮状态
- ✅ 优化布局和样式
- ✅ 实现24小时趋势图表
- ✅ 添加实时随机数据填充
-
-### 4. 湿度监控组件优化
- ✅ 重新设计湿度监控卡片
- ✅ 实现24小时趋势图表
- ✅ 添加实时随机数据填充
- ✅ 优化图表样式和交互
-
-### 5. AI预警系统优化
- ✅ 重新设计AIyujing组件
- ✅ 增加预警统计面板
- ✅ 优化列表卡片和详情模态框
- ✅ 改进交互和视觉效果
-
-### 6. AI助手卡片优化
- ✅ 重新设计AI助手卡片
- ✅ 增加状态徽章和操作按钮
- ✅ 改进布局和视觉效果
-
-### 7. 设备运行状态卡片
- ✅ 创建DeviceStatusCard组件
- ✅ 实现设备总数、在线、离线、故障统计
- ✅ 添加设备类型分布展示
- ✅ 实现故障设备列表和详情
- ✅ 添加数据刷新和展开功能
- ✅ 集成到Dashboard页面布局
-
-## 🔄 进行中任务
-
-### 1. 图表样式统一优化
- ✅ 重构24小时温度趋势图表样式
- ✅ 重构24小时湿度趋势图表样式
- ✅ 将刷新时间改为1秒
- ✅ 添加渐变背景和区域填充
- ✅ 优化数据点和阈值线样式
- ✅ 添加图表标题和阈值标签
- 🔄 完善图表响应式适配
-
-## 📋 待完成任务
-
-### 1. 性能优化
- [ ] 实现图表懒加载
- [ ] 优化大数据量图表渲染
- [ ] 添加图表缓存机制
-
-### 2. 数据集成
- [ ] 连接真实数据源
- [ ] 实现数据实时更新
- [ ] 添加数据验证和错误处理
-
-### 3. 用户体验优化
- [ ] 添加图表加载动画
- [ ] 优化移动端体验
- [ ] 添加图表导出功能
-
-### 4. 功能扩展
- [ ] 添加更多作物类型支持
- [ ] 实现历史数据对比
- [ ] 添加预测分析功能
-
-## 🎯 设计目标
-
-### 整体风格
- ✅ 现代简约设计
- ✅ 克制优雅的视觉效果
- ✅ 统一的设计语言
- ✅ 良好的视觉层次
-
-### 交互体验
- ✅ 流畅的动画过渡
- ✅ 直观的操作反馈
- ✅ 清晰的信息展示
- ✅ 便捷的功能访问
-
-### 技术实现
- ✅ 组件化架构
- ✅ 响应式设计
- ✅ 性能优化
- ✅ 代码可维护性
-
-## 📊 完成度统计
-
- **总体完成度**: 92%
- **核心功能**: 95%
- **UI/UX设计**: 98%
- **技术实现**: 90%
- **性能优化**: 80%
-
-## 🚀 下一步计划
-
-1. 完善图表样式统一
-2. 优化移动端适配
-3. 添加更多交互功能
-4. 实现数据持久化
-5. 添加用户个性化设置
-
---
-
-*最后更新: 2024年12月* 
--- a/platform/GROWTH_TREND_ANALYSIS_OPTIMIZATION.md
+++ b/platform/GROWTH_TREND_ANALYSIS_OPTIMIZATION.md
@ -1 +0,0 @@
-