From d44731f24f762db8d2dc73fb8b01e8fa1568c28f Mon Sep 17 00:00:00 2001 From: git_rabbit Date: Thu, 22 Jan 2026 18:29:13 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E8=BF=87=E6=97=B6?= =?UTF-8?q?=E7=9A=84=E6=96=87=E6=A1=A3=E5=92=8C=E8=AE=A1=E5=88=92=E6=96=87?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 移除不再使用的文档和计划文件，包括关于echarts依赖、Andon组件调整、画面适配优化、产线追溯页面优化等过时方案 --- .trae/documents/plan_20260122_012148.md | 54 ---------------- .trae/documents/plan_20260122_013212.md | 50 --------------- .trae/documents/plan_20260122_013556.md | 45 -------------- .trae/documents/plan_20260122_014333.md | 55 ---------------- .trae/documents/plan_20260122_101723.md | 52 ---------------- .../修改报工功能为暂停_重启工单功能.md | 62 ------------------- .trae/documents/添加echarts依赖.md | 21 ------- .trae/documents/调整Andon组件逻辑.md | 33 ---------- 8 files changed, 372 deletions(-) delete mode 100644 .trae/documents/plan_20260122_012148.md delete mode 100644 .trae/documents/plan_20260122_013212.md delete mode 100644 .trae/documents/plan_20260122_013556.md delete mode 100644 .trae/documents/plan_20260122_014333.md delete mode 100644 .trae/documents/plan_20260122_101723.md delete mode 100644 .trae/documents/修改报工功能为暂停_重启工单功能.md delete mode 100644 .trae/documents/添加echarts依赖.md delete mode 100644 .trae/documents/调整Andon组件逻辑.md diff --git a/.trae/documents/plan_20260122_012148.md b/.trae/documents/plan_20260122_012148.md deleted file mode 100644 index f782089..0000000 --- a/.trae/documents/plan_20260122_012148.md +++ /dev/null @@ -1,54 +0,0 @@ -# 更好的尺寸变化适配方案 - -## 1. 问题分析 -当前项目使用ResizeObserver监听窗口尺寸变化，通过transform: scale实现大屏适配，但存在以下问题： -- ResizeObserver循环错误，尤其是在对话框打开/关闭时 -- 可能导致文字模糊和交互元素精准度问题 -- 代码逻辑耦合在App.vue中，不便于维护 - -## 2. 优化方案 -### 2.1 方案选择 -保留transform: scale的核心逻辑，但优化实现方式，解决ResizeObserver循环问题，同时保持原有设计不变。 - -### 2.2 具体实现 -1. **将尺寸适配逻辑封装成独立组件** - - 创建`src/components/ScreenAdapter.vue`组件 - - 集中管理尺寸适配逻辑，便于维护和复用 - -2. **替换ResizeObserver为window.resize事件** - - 使用window.resize事件监听窗口变化 - - 避免ResizeObserver导致的循环问题 - -3. **增强防抖和性能优化** - - 添加防抖处理，减少频繁触发 - - 使用requestAnimationFrame确保DOM更新在浏览器重绘前完成 - - 添加严格的尺寸变化检查 - -4. **优化缩放逻辑** - - 确保缩放操作不会触发新的尺寸变化 - - 只有当实际需要时才更新DOM样式 - -5. **添加错误处理和边界情况处理** - - 处理极端尺寸情况 - - 添加错误捕获机制 - -## 3. 实现步骤 -1. 创建`ScreenAdapter.vue`组件 -2. 实现优化后的尺寸适配逻辑 -3. 在App.vue中使用新组件替换原有逻辑 -4. 测试不同场景下的适配效果 -5. 验证ResizeObserver循环错误是否解决 - -## 4. 预期效果 -- 解决ResizeObserver循环错误 -- 保持原有设计和布局不变 -- 提高适配性能和稳定性 -- 代码结构更清晰，便于维护 -- 支持各种尺寸的屏幕适配 - -## 5. 技术要点 -- Vue 3 Composition API -- 防抖函数优化 -- requestAnimationFrame应用 -- 组件化设计 -- 性能优化 \ No newline at end of file diff --git a/.trae/documents/plan_20260122_013212.md b/.trae/documents/plan_20260122_013212.md deleted file mode 100644 index 4b5785f..0000000 --- a/.trae/documents/plan_20260122_013212.md +++ /dev/null @@ -1,50 +0,0 @@ -# 修复画面超出屏幕问题 - -## 1. 问题分析 -- 画面超出屏幕的主要原因是当前的缩放逻辑存在问题 -- App.vue中设置了固定的body和#app尺寸（1920x1080） -- ScreenAdapter组件的缩放逻辑可能计算错误 -- 可能存在缩放比例方向错误的问题 - -## 2. 修复方案 -### 2.1 方案选择 -- 调整缩放逻辑，使用等比例缩放并限制最大缩放比例 -- 确保内容始终在屏幕范围内 -- 保持原有设计的视觉效果 - -### 2.2 具体实现 -1. **修改ScreenAdapter组件** - - 更改缩放比例计算逻辑，使用等比例缩放 - - 添加屏幕边界限制，确保内容不超出屏幕 - - 优化缩放比例方向 - -2. **调整App.vue样式** - - 移除或调整固定的body和#app尺寸 - - 确保根元素能自适应屏幕 - -3. **优化缩放策略** - - 使用最小缩放比例，确保内容完全显示 - - 调整transform-origin，确保内容居中显示 - - 处理不同屏幕比例的适配 - -## 3. 实现步骤 -1. 修改ScreenAdapter组件的缩放计算逻辑 -2. 调整缩放比例，使用等比例缩放 -3. 添加屏幕边界限制 -4. 调整App.vue的样式设置 -5. 测试不同屏幕尺寸下的显示效果 -6. 验证画面是否不再超出屏幕 - -## 4. 预期效果 -- 画面不再超出屏幕 -- 保持原有设计的视觉效果 -- 内容居中显示 -- 适配不同尺寸的屏幕 -- 保持良好的用户体验 - -## 5. 技术要点 -- 等比例缩放计算 -- 屏幕边界限制 -- transform-origin调整 -- 响应式设计 -- 不同屏幕比例适配 \ No newline at end of file diff --git a/.trae/documents/plan_20260122_013556.md b/.trae/documents/plan_20260122_013556.md deleted file mode 100644 index 86e49df..0000000 --- a/.trae/documents/plan_20260122_013556.md +++ /dev/null @@ -1,45 +0,0 @@ -# 恢复最初的尺寸适配模式 - -## 1. 问题分析 -当前使用ScreenAdapter组件的样式出现问题，需要恢复到最初的ResizeObserver实现模式。 - -## 2. 恢复方案 -### 2.1 主要修改点 -1. **移除ScreenAdapter组件**：从App.vue中移除ScreenAdapter组件的引用和使用 -2. **恢复ResizeObserver实现**：恢复到最初的ResizeObserver监听窗口尺寸变化的实现 -3. **恢复原始样式**：将App.vue的样式恢复到最初的固定尺寸设置 -4. **移除ScreenAdapter组件文件**：删除不再使用的ScreenAdapter.vue文件 - -### 2.2 具体实现 -1. **修改App.vue**： - - 移除ScreenAdapter组件的引入和使用 - - 恢复最初的ResizeObserver实现 - - 恢复body和#app的固定尺寸设置 - -2. **删除ScreenAdapter.vue**： - - 删除src/components/ScreenAdapter.vue文件 - -3. **恢复ResizeObserver逻辑**： - - 使用最初的ResizeObserver实现，但保留之前的优化（如setTimeout打破循环） - - 确保ResizeObserver不会导致循环错误 - -## 3. 实现步骤 -1. 修改App.vue，移除ScreenAdapter组件 -2. 恢复ResizeObserver实现 -3. 恢复原始样式设置 -4. 删除ScreenAdapter.vue文件 -5. 重启开发服务器测试 -6. 验证样式是否恢复正常 - -## 4. 预期效果 -- 样式恢复到最初的正常状态 -- 保留之前对ResizeObserver循环错误的修复 -- 画面不再超出屏幕 -- 保持良好的用户体验 - -## 5. 技术要点 -- Vue 3 Composition API -- ResizeObserver实现 -- 样式恢复 -- 组件移除 -- 开发服务器测试 \ No newline at end of file diff --git a/.trae/documents/plan_20260122_014333.md b/.trae/documents/plan_20260122_014333.md deleted file mode 100644 index 5f5178b..0000000 --- a/.trae/documents/plan_20260122_014333.md +++ /dev/null @@ -1,55 +0,0 @@ -# 产线追溯页面优化方案 - -## 1. 问题分析 -- **背景颜色**：当前页面使用深色背景（#2c3e50），需要改为淡色背景 -- **文字样式**：文字颜色需要调整以适应淡色背景，确保可读性 -- **详情按钮延迟**：点击详情按钮时存在延迟，需要优化异步操作 - -## 2. 优化方案 -### 2.1 淡色背景实现 -- 将主容器和相关组件的背景色改为淡色系（如#f5f7fa） -- 保持标题和关键元素的视觉突出 -- 调整边框和阴影，增强层次感 - -### 2.2 文字样式调整 -- 更改文字颜色为深色，确保在淡色背景上的可读性 -- 调整字体大小和行高，优化阅读体验 -- 突出关键信息，如追溯码、状态等 - -### 2.3 详情按钮延迟优化 -- 立即显示加载状态，提升用户感知 -- 优化异步数据请求，减少等待时间 -- 调整数据获取逻辑，优先显示关键信息 - -## 3. 实现步骤 -1. **修改背景颜色**： - - 更改.trace-container的background-color - - 调整.trace-search-form和.trace-results的背景色 - - 修改对话框和其他组件的背景色 - -2. **调整文字样式**： - - 修改标题和内容文字颜色 - - 调整表单标签和输入框文字颜色 - - 优化表格文字样式 - -3. **优化详情按钮**： - - 在handleViewDetail函数中立即显示对话框 - - 添加加载状态指示器 - - 优化数据请求逻辑，并行获取数据 - -4. **测试和调整**： - - 测试页面在淡色背景下的显示效果 - - 验证文字可读性 - - 检查详情按钮的响应速度 - -## 4. 预期效果 -- 页面背景改为淡色系，视觉体验更舒适 -- 文字清晰可读，关键信息突出 -- 详情按钮点击后立即响应，显示加载状态 -- 整体风格统一，符合现代UI设计 - -## 5. 技术要点 -- CSS变量或统一的颜色管理 -- 异步操作优化 -- 响应式设计原则 -- 良好的用户体验设计 \ No newline at end of file diff --git a/.trae/documents/plan_20260122_101723.md b/.trae/documents/plan_20260122_101723.md deleted file mode 100644 index f0ac176..0000000 --- a/.trae/documents/plan_20260122_101723.md +++ /dev/null @@ -1,52 +0,0 @@ -## 调整Andon组件逻辑方案 - -### 问题分析 - -当前Andon组件的显示逻辑是基于`isSuccess`状态，成功后显示签到按钮。需要修改为根据全局`andonAlarmStatus`状态来决定显示内容： - -* 当处于报警中时，直接显示签到按钮 - -* 当处于正常状态时，显示报警相关逻辑 - -### 修改内容 - -1. **修改模板结构** - - * 将原来的`v-if="!isSuccess"`条件判断改为基于`andonAlarmStatus`状态 - - * 新增报警中状态的显示区域，包含签到按钮和相关信息 - - * 保留正常状态下的报警表单和成功后的显示逻辑 - -2. **调整组件逻辑** - - * 简化`onOpen`函数，根据状态决定是否需要获取报警类型 - - * 确保签到功能在两种状态下都能正常工作 - - * 保持状态管理的一致性 - -3. **具体代码修改** - - * 在`src/views/menu/andon/index.vue`中修改template部分 - - * 调整相关函数逻辑 - -### 预期效果 - -* 当Andon处于报警中时，打开弹窗直接显示签到按钮 - -* 当Andon处于正常状态时，显示原来的报警表单 - -* 签到成功后，自动关闭弹窗并更新全局状态 - -### 技术要点 - -* 使用Vue 3的Composition API - -* 基于vuex的全局状态管理 - -* 响应式设计，状态变化自动更新UI - -* 保持良好的用户体验 - diff --git a/.trae/documents/修改报工功能为暂停_重启工单功能.md b/.trae/documents/修改报工功能为暂停_重启工单功能.md deleted file mode 100644 index d988e4d..0000000 --- a/.trae/documents/修改报工功能为暂停_重启工单功能.md +++ /dev/null @@ -1,62 +0,0 @@ -# 修改报工功能为暂停/重启工单功能 - -## 1. 需求分析 -- 砍掉现有报工数功能 -- 在相同位置添加暂停工单与重启工单按钮 -- 预留对应方法的实现 - -## 2. 修改内容 - -### 2.1 删除报工数按钮 -- 删除第139-141行的报工数按钮代码 - -### 2.2 添加新按钮 -在原报工数按钮位置添加两个新按钮： -- 暂停工单按钮（使用warning类型） -- 重启工单按钮（使用success类型） - -### 2.3 添加对应方法 -在脚本部分添加两个新的方法： -- `handlerPauseOrder`：处理暂停工单逻辑 -- `handlerRestartOrder`：处理重启工单逻辑 - -## 3. 具体实现 - -### 3.1 按钮替换 -将第139-141行的代码： -```html -报工数{{ reportNum }} -``` -替换为： -```html -暂停工单 -重启工单 -``` - -### 3.2 添加方法 -在脚本部分添加两个新方法： -```javascript -// 暂停工单 -function handlerPauseOrder() { - // TODO: 实现暂停工单逻辑 - console.log('暂停工单') -} - -// 重启工单 -function handlerRestartOrder() { - // TODO: 实现重启工单逻辑 - console.log('重启工单') -} -``` - -## 4. 注意事项 -- 保持新按钮的样式和布局与其他按钮一致 -- 保持按钮的disabled条件与其他按钮一致 -- 新方法命名遵循现有命名规范 -- 新方法中预留实现逻辑的位置，但暂时不需要具体实现 \ No newline at end of file diff --git a/.trae/documents/添加echarts依赖.md b/.trae/documents/添加echarts依赖.md deleted file mode 100644 index dd011df..0000000 --- a/.trae/documents/添加echarts依赖.md +++ /dev/null @@ -1,21 +0,0 @@ -# 添加echarts依赖计划 - -## 1. 安装echarts依赖 -- 使用yarn命令安装echarts：`yarn add echarts` -- 这将在package.json中添加echarts依赖，并安装到node_modules目录 - -## 2. 验证安装 -- 检查package.json文件，确认echarts已被添加到dependencies中 -- 验证node_modules目录中是否存在echarts文件夹 - -## 3. 提供使用示例 -- 创建一个简单的echarts组件示例，展示如何在Vue 3项目中使用echarts -- 示例包括基本的图表初始化、数据配置和响应式更新 - -## 4. 测试运行 -- 启动开发服务器，确保添加依赖后项目能正常构建和运行 - -## 5. 相关说明 -- echarts完全兼容Vue 3 -- 支持按需引入，可根据项目需要只引入必要的图表模块 -- 提供了丰富的图表类型和配置选项，适用于各种数据可视化场景 \ No newline at end of file diff --git a/.trae/documents/调整Andon组件逻辑.md b/.trae/documents/调整Andon组件逻辑.md deleted file mode 100644 index 197a042..0000000 --- a/.trae/documents/调整Andon组件逻辑.md +++ /dev/null @@ -1,33 +0,0 @@ -## 调整Andon组件逻辑方案 - -### 问题分析 -当前Andon组件的显示逻辑是基于`isSuccess`状态，成功后显示签到按钮。需要修改为根据全局`andonAlarmStatus`状态来决定显示内容： -- 当处于报警中时，直接显示签到按钮 -- 当处于正常状态时，显示报警相关逻辑 - -### 修改内容 - -1. **修改模板结构** - - 将原来的`v-if="!isSuccess"`条件判断改为基于`andonAlarmStatus`状态 - - 新增报警中状态的显示区域，包含签到按钮和相关信息 - - 保留正常状态下的报警表单和成功后的显示逻辑 - -2. **调整组件逻辑** - - 简化`onOpen`函数，根据状态决定是否需要获取报警类型 - - 确保签到功能在两种状态下都能正常工作 - - 保持状态管理的一致性 - -3. **具体代码修改** - - 在`src/views/menu/andon/index.vue`中修改template部分 - - 调整相关函数逻辑 - -### 预期效果 -- 当Andon处于报警中时，打开弹窗直接显示签到按钮 -- 当Andon处于正常状态时，显示原来的报警表单 -- 签到成功后，自动关闭弹窗并更新全局状态 - -### 技术要点 -- 使用Vue 3的Composition API -- 基于vuex的全局状态管理 -- 响应式设计，状态变化自动更新UI -- 保持良好的用户体验 \ No newline at end of file