拖拽上传弹窗移动端适配修复

问题描述

用户反馈：在手机端（企业微信）使用交付执行阶段的拖拽上传图片分析弹窗时，页面显示不完整：

表格内容被截断，无法看到所有列
文件信息显示不全
底部按钮被遮挡
无法横向滚动查看完整内容

截图问题：

只能看到部分文件信息
"空间"和"阶段"列被截断
底部"撤回"和"确认交付清单"按钮显示不完整

解决方案

核心思路

添加横向滚动：表格容器支持左右滑动
设置最小宽度：确保表格不会被压缩
优化字体和间距：缩小字体，减少内边距
调整底部布局：按钮区域改为垂直堆叠
优化弹窗尺寸：充分利用屏幕空间

实现细节

1. 弹窗容器优化

修改位置：drag-upload-modal.component.scss (第1681-1687行)

.drag-upload-modal-container {
  width: 95vw;
  max-width: 95vw;
  max-height: 90vh;
  margin: 0;
  border-radius: 12px;
}

优化点：

✅ 宽度占满95%视口
✅ 高度限制在90%视口
✅ 移除外边距，充分利用空间

2. 表格横向滚动

修改位置：drag-upload-modal.component.scss (第1697-1807行)

.files-analysis-table {
  overflow-x: auto;  // 🔥 关键：允许横向滚动
  -webkit-overflow-scrolling: touch;  // 🔥 iOS平滑滚动
  
  .analysis-table {
    min-width: 600px;  // 🔥 设置最小宽度，防止压缩
    font-size: 11px;
    
    thead th {
      padding: 10px 6px;
      font-size: 12px;
      white-space: nowrap;  // 🔥 防止文字换行
      
      &.col-file { width: 60px; min-width: 60px; }
      &.col-name { width: 150px; min-width: 150px; }
      &.col-upload { width: 80px; min-width: 80px; }
      &.col-space { width: 120px; min-width: 120px; }
      &.col-stage { width: 120px; min-width: 120px; }
    }
  }
}

优化点：

✅ 表格可以左右滑动查看所有列
✅ 每列设置固定宽度，不会被压缩
✅ iOS设备平滑滚动体验
✅ 表头文字不换行，保持清晰

3. 文件预览缩小

修改位置：drag-upload-modal.component.scss (第1743-1761行)

.file-preview-container {
  .file-thumbnail,
  .file-icon-placeholder {
    width: 40px;   // 从50px缩小到40px
    height: 40px;
  }

  .file-delete-btn {
    width: 20px;   // 从24px缩小到20px
    height: 20px;
    top: -6px;
    right: -6px;

    svg {
      width: 12px;
      height: 12px;
    }
  }
}

优化点：

✅ 缩略图从50px缩小到40px
✅ 删除按钮从24px缩小到20px
✅ 节省空间，显示更多内容

4. 字体和间距优化

修改位置：drag-upload-modal.component.scss (第1764-1804行)

// 文件信息
.file-info {
  .file-name {
    font-size: 11px;  // 从13px缩小
    margin-bottom: 2px;
  }

  .file-size {
    font-size: 10px;  // 从11px缩小
  }
}

// 上传状态
.upload-status {
  .status {
    font-size: 10px;  // 从12px缩小
    padding: 3px 6px;
  }
}

// AI结果
.ai-result {
  font-size: 11px;  // 从13px缩小
  padding: 4px 8px;
  white-space: nowrap;
}

.confidence-badge,
.quality-badge {
  font-size: 9px;   // 从11px缩小
  padding: 2px 4px;
}

优化点：

✅ 所有字体缩小1-2px
✅ 内边距相应减小
✅ 保持可读性的同时节省空间

5. 底部按钮区域优化

修改位置：drag-upload-modal.component.scss (第1811-1862行)

.modal-footer {
  flex-direction: column;  // 🔥 改为垂直布局
  gap: 12px;
  align-items: stretch;
  padding: 12px 16px;
  min-height: auto;

  .analysis-summary {
    margin-right: 0;
    margin-bottom: 0;

    .analysis-stats {
      justify-content: center;
      gap: 8px;

      .stats-item {
        font-size: 11px;
      }
    }
  }

  .action-buttons {
    width: 100%;
    gap: 8px;
    
    .cancel-btn,
    .confirm-btn {
      flex: 1;  // 🔥 按钮等宽
      padding: 10px 16px;
      font-size: 13px;
    }
  }
}

优化点：

✅ 底部区域改为垂直堆叠
✅ 统计信息居中显示
✅ 两个按钮等宽并排
✅ 充分利用屏幕宽度

6. AI分析进度覆盖层优化

修改位置：drag-upload-modal.component.scss (第1865-1889行)

.analysis-progress-overlay {
  .progress-content {
    padding: 20px;

    .ai-brain-icon {
      width: 48px;   // 从64px缩小
      height: 48px;
      margin-bottom: 16px;

      svg {
        width: 24px;  // 从32px缩小
        height: 24px;
      }
    }

    .progress-text {
      font-size: 14px;  // 从18px缩小
      margin-bottom: 12px;
    }

    .progress-bar {
      height: 4px;  // 从6px缩小
    }
  }
}

优化点：

✅ 图标和文字缩小
✅ 进度条变细
✅ 减少内边距

移动端布局对比

修复前

┌─────────────────────────────┐
│ 文件 | 名称 | 上传 | 空... │  ← 被截断
│                             │
│ [图] 378e68...  完成  客... │  ← 看不到完整信息
│                             │
│ [图] 401aa8...  完成       │  ← 空间和阶段列不可见
│                             │
│ 32个文件 32个已分析 总大...  │  ← 被截断
│                             │
│ [撤回] [确认交付...         │  ← 按钮被截断
└─────────────────────────────┘

修复后

┌─────────────────────────────┐
│ 文件 | 名称 | 上传 | 空间 | 阶段 │  ← 可横向滑动 →
│                             │
│ [图] 378e... 完成 客厅 75% 白模 中等 │
│                             │
│ [图] 401aa... 完成 客厅 75% 白模 中等 │
│                             │
│ 32个文件 | 32个已分析 | 88.8MB │
│                             │
│ [  撤回  ] [确认交付清单]   │  ← 按钮完整显示
└─────────────────────────────┘

响应式断点

生效条件：@media (max-width: 768px)

适用设备：

📱 iPhone (所有型号)
📱 Android 手机
📱 企业微信内置浏览器
📱 iPad (竖屏模式)

用户操作指南

查看完整表格

横向滑动：
- 用手指在表格上左右滑动
- 可以查看所有列（文件、名称、上传、空间、阶段）
纵向滚动：
- 如果文件很多，可以上下滚动查看所有文件
查看详情：
- 点击文件缩略图可以查看大图
- 点击删除按钮可以移除文件

确认上传

查看统计：
- 底部显示文件数量和总大小
- 显示已分析的文件数量
点击按钮：
- "撤回"：取消上传，返回上一页
- "确认交付清单"：确认上传所有文件

技术特性

✅ 横向滚动

表格可以左右滑动
iOS平滑滚动支持
不会压缩表格内容

✅ 固定列宽

每列设置最小宽度
防止内容被压缩
保持可读性

✅ 响应式字体

自动缩小字体大小
保持清晰可读
节省屏幕空间

✅ 垂直布局

底部区域垂直堆叠
按钮等宽显示
充分利用宽度

✅ 触摸优化

iOS平滑滚动
触摸友好的按钮大小
合适的点击区域

测试清单

移动端测试

iPhone (Safari)
Android (Chrome)
企业微信内置浏览器
iPad (竖屏)
iPad (横屏)

功能测试

表格可以横向滑动
所有列都可见
文件信息显示完整
底部按钮可点击
AI分析进度正常显示
删除按钮可点击
统计信息显示正确

兼容性测试

iOS 12+
Android 8+
企业微信最新版
不同屏幕尺寸

调试技巧

Chrome DevTools

打开开发者工具：F12
切换设备模式：Ctrl+Shift+M
选择设备：iPhone 12 Pro
刷新页面：测试移动端样式

真机调试

企业微信：
- 打开项目详情页
- 进入交付执行阶段
- 拖拽上传图片
- 查看弹窗显示
检查项：
- 表格是否可以滑动
- 所有列是否可见
- 按钮是否完整显示
- 字体是否清晰

常见问题

Q: 表格还是显示不完整？

检查：

确认浏览器宽度 < 768px
尝试左右滑动表格
清除浏览器缓存
刷新页面

Q: 字体太小看不清？

调整：

可以在SCSS中调整字体大小
建议最小字体不低于10px
可以根据设备调整

Q: 按钮点击区域太小？

优化：

已设置 padding: 10px 16px
按钮高度约40px
符合移动端点击标准

文件修改

文件：src/modules/project/components/drag-upload-modal/drag-upload-modal.component.scss

修改位置：第1679-1890行

修改内容：

添加横向滚动支持
设置表格最小宽度
优化字体和间距
调整底部布局
优化AI进度覆盖层

部署步骤

1. 构建项目

ng build yss-project --base-href=/dev/yss/

2. 上传到OBS

obsutil chattri obs://nova-cloud/dev/yss -r -f \
  -i=XSUWJSVMZNHLWFAINRZ1 \
  -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 \
  -e="obs.cn-south-1.myhuaweicloud.com" \
  -acl=public-read

3. 刷新CDN缓存

hcloud CDN CreateRefreshTasks/v2 \
  --cli-region="cn-north-1" \
  --refresh_task.urls.1="https://app.fmode.cn/dev/yss/" \
  --refresh_task.type="directory" \
  --cli-access-key=2BFF7JWXAIJ0UGNJ0OSB \
  --cli-secret-key=NaPCiJCGmD3nklCzX65s8mSK1Py13ueyhgepa0s1

4. 验证

在手机端打开企业微信
访问项目详情页
进入交付执行阶段
拖拽上传图片
验证弹窗显示正常

总结

✅ 已解决的问题

✅ 表格内容被截断 → 添加横向滚动
✅ 文件信息显示不全 → 优化字体和间距
✅ 底部按钮被遮挡 → 改为垂直布局
✅ 无法查看所有列 → 设置最小宽度

🎯 优化效果

📱 移动端完美适配
👆 支持触摸滑动
📊 所有信息可见
🎨 保持视觉美观
⚡ 性能流畅

创建时间：2025-11-28 最后更新：2025-11-28

drag-upload-modal-mobile-fix.md 10 KB History Raw

拖拽上传弹窗移动端适配修复

问题描述

解决方案

核心思路

实现细节

1. 弹窗容器优化

2. 表格横向滚动

3. 文件预览缩小

4. 字体和间距优化

5. 底部按钮区域优化

6. AI分析进度覆盖层优化

移动端布局对比

修复前

修复后

响应式断点

用户操作指南

查看完整表格

确认上传

技术特性

✅ 横向滚动

✅ 固定列宽

✅ 响应式字体

✅ 垂直布局

✅ 触摸优化

测试清单

移动端测试

功能测试

兼容性测试

调试技巧

Chrome DevTools

真机调试

常见问题

Q: 表格还是显示不完整？

Q: 字体太小看不清？

Q: 按钮点击区域太小？

文件修改

部署步骤

1. 构建项目

2. 上传到OBS

3. 刷新CDN缓存

4. 验证

总结

✅ 已解决的问题

🎯 优化效果

drag-upload-modal-mobile-fix.md 10 KB

History Raw