RIZO/zhuangpeiworkkanban
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
zhuangpeiworkkanban/.trae/documents/plan_20260122_013212.md
git_rabbit 3780340ab7 feat: 添加echarts依赖并实现折线图示例 
refactor: 优化产线追溯页面样式和交互体验

fix: 修复画面超出屏幕问题和尺寸适配逻辑

docs: 添加相关功能实现计划和文档
2026-01-22 10:32:56 +08:00

1.5 KiB
Raw Blame History

修复画面超出屏幕问题

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调整
  • 响应式设计
  • 不同屏幕比例适配