图片分析优化 + 移动端弹窗修复

📋 任务概述

本次修复包含两个主要任务：

图片分析维度优化：根据像素和内容精细程度进行更精细的分析
移动端弹窗显示修复：修复企业微信端表格结构不显示的问题

🔍 问题一：图片分析维度需要更精细

问题描述

现有的图片分析维度较为基础，需要根据：

像素质量：更精细的分辨率分级
内容精细程度：纹理、材质、光影等细节评估

解决方案

1. 新增质量评估维度

文件：image-analysis.service.ts (第19-29行)

quality: {
  score: number; // 0-100分
  level: 'low' | 'medium' | 'high' | 'ultra'; // 低、中、高、超高
  sharpness: number; // 清晰度 0-100
  brightness: number; // 亮度 0-100
  contrast: number; // 对比度 0-100
  detailLevel: 'minimal' | 'basic' | 'detailed' | 'ultra_detailed'; // 🔥 内容精细程度
  pixelDensity: 'low' | 'medium' | 'high' | 'ultra_high'; // 🔥 像素密度等级
  textureQuality: number; // 🔥 纹理质量 0-100
  colorDepth: number; // 🔥 色彩深度 0-100
}

新增维度说明：

detailLevel：内容精细程度
- minimal：极简图，只有基本轮廓
- basic：基础图，有简单纹理和色彩
- detailed：详细图，有丰富纹理、材质细节、光影效果
- ultra_detailed：超精细图，有极致纹理、真实材质、复杂光影
pixelDensity：像素密度等级
- low：低于720p
- medium：720p及以上
- high：1080p及以上
- ultra_high：4K及以上
textureQuality：纹理质量（0-100分）
- 评估木纹、布纹、石材纹理等细节是否清晰
colorDepth：色彩深度（0-100分）
- 评估色彩过渡是否自然，是否有色带

2. 更精细的像素分级

文件：image-analysis.service.ts (第428-446行)

private calculateResolutionScore(dimensions: { width: number; height: number }): number {
  const totalPixels = dimensions.width * dimensions.height;
  const megapixels = totalPixels / 1000000;
  
  // 更精细的像素分级
  if (megapixels >= 33) return 98;  // 8K (7680×4320)
  if (megapixels >= 24) return 96;  // 6K (6144×3160)
  if (megapixels >= 16) return 94;  // 5K (5120×2880)
  if (megapixels >= 8) return 92;   // 4K (3840×2160)
  if (megapixels >= 6) return 88;   // 2.5K+ (2560×2304)
  if (megapixels >= 4) return 84;   // QHD+ (2560×1600)
  if (megapixels >= 2) return 78;   // 1080p (1920×1080)
  if (megapixels >= 1) return 68;   // 720p+ (1280×720)
  if (megapixels >= 0.5) return 55; // 中等分辨率
  if (megapixels >= 0.3) return 40; // 低分辨率
  return 25; // 极低分辨率
}

优化点：

✅ 从5个分级增加到11个分级
✅ 支持8K、6K、5K等高分辨率
✅ 更精确的评分算法

3. 内容精细程度评估

文件：image-analysis.service.ts (第461-519行)

private async evaluateDetailLevel(
  imageUrl: string,
  dimensions: { width: number; height: number }
): Promise<'minimal' | 'basic' | 'detailed' | 'ultra_detailed'> {
  const prompt = `请评估这张室内设计图片的内容精细程度，并返回JSON:

{
  "detailLevel": "精细程度(minimal/basic/detailed/ultra_detailed)",
  "textureQuality": "纹理质量评分(0-100)",
  "colorDepth": "色彩深度评分(0-100)",
  "reasoning": "评估理由"
}

评估标准:
- minimal: 极简图，只有基本轮廓，无细节纹理
- basic: 基础图，有简单纹理和色彩，细节较少
- detailed: 详细图，有丰富纹理、材质细节、光影效果
- ultra_detailed: 超精细图，有极致纹理、真实材质、复杂光影、细微细节

重点关注:
1. 纹理细节（木纹、布纹、石材纹理等）
2. 材质表现（金属反射、玻璃透明度、布料质感等）
3. 光影效果（阴影、高光、环境光等）
4. 细微元素（装饰品细节、边角处理等）`;
  
  // ... AI调用逻辑
}

评估维度：

🔍 纹理细节：木纹、布纹、石材纹理等
🔍 材质表现：金属反射、玻璃透明度、布料质感等
🔍 光影效果：阴影、高光、环境光等
🔍 细微元素：装饰品细节、边角处理等

4. 综合评分算法优化

文件：image-analysis.service.ts (第370-376行)

// 🔥 综合评分：AI评分(40%) + 分辨率(30%) + 纹理质量(20%) + 色彩深度(10%)
const adjustedScore = Math.round(
  result.score * 0.4 + 
  resolutionScore * 0.3 + 
  (result.textureQuality || 50) * 0.2 + 
  (result.colorDepth || 50) * 0.1
);

权重分配：

AI评分：40%（基于视觉内容的综合评估）
分辨率：30%（像素质量）
纹理质量：20%（材质细节）
色彩深度：10%（色彩表现）

5. 详细的调试日志

文件：image-analysis.service.ts (第378-386行)

console.log('📊 质量分析结果:', {
  AI评分: result.score,
  分辨率评分: resolutionScore,
  纹理质量: result.textureQuality,
  色彩深度: result.colorDepth,
  综合评分: adjustedScore,
  像素密度: pixelDensity,
  精细程度: detailLevel
});

📱 问题二：移动端弹窗显示异常

问题描述

图片二显示的问题：

❌ 表格结构完全不显示
❌ 只显示文件名和大小
❌ 缺少缩略图、状态标签、空间/阶段信息
❌ 底部按钮显示不完整

期望效果（图片一）：

✅ 完整的表格结构
✅ 5列：文件、名称、上传、空间、阶段
✅ 缩略图、状态标签、AI识别结果
✅ 底部统计信息和按钮

解决方案

1. 确保表格结构正确显示

文件：drag-upload-modal.component.scss (第1712-1717行)

.analysis-table {
  width: 100%;
  min-width: 100%; // 🔥 移除最小宽度限制，让表格自适应
  font-size: 11px;
  display: table; // 🔥 确保表格显示
  border-collapse: collapse;
}

关键修复：

✅ 添加 display: table 确保表格显示
✅ 移除 min-width: 600px 限制
✅ 让表格自适应屏幕宽度

2. 确保表头和表体显示

文件：drag-upload-modal.component.scss (第1719-1757行)

thead {
  display: table-header-group; // 🔥 确保表头显示
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  
  tr {
    display: table-row;
  }

  th {
    display: table-cell; // 🔥 确保单元格显示
    padding: 8px 4px;
    font-size: 11px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    border-bottom: 2px solid #e6f7ff;
  }
}

tbody {
  display: table-row-group; // 🔥 确保表体显示

  .file-row {
    display: table-row; // 🔥 确保行显示

    td {
      display: table-cell; // 🔥 确保单元格显示
      padding: 6px 4px;
      vertical-align: middle;
    }
  }
}

关键修复：

✅ 显式设置 display: table-header-group
✅ 显式设置 display: table-row-group
✅ 显式设置 display: table-row
✅ 显式设置 display: table-cell

3. 全屏显示弹窗

文件：drag-upload-modal.component.scss (第1681-1694行)

.drag-upload-modal-overlay {
  align-items: flex-start;
  padding: 0;
}

.drag-upload-modal-container {
  width: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  position: relative;
}

优化点：

✅ 弹窗占满整个屏幕
✅ 移除圆角和外边距
✅ 充分利用移动端空间

4. 优化列宽和字体

文件：drag-upload-modal.component.scss (第1736-1755行)

th {
  &.col-file { 
    width: 50px;  // 文件缩略图
  }

  &.col-name { 
    width: auto;  // 文件名（自适应）
    min-width: 100px;
  }

  &.col-upload { 
    width: 50px;  // 上传状态
  }

  &.col-space { 
    width: 70px;  // 空间识别
  }

  &.col-stage { 
    width: 70px;  // 阶段识别
  }
}

列宽分配：

文件：50px（缩略图）
名称：自适应（最小100px）
上传：50px（状态标签）
空间：70px（AI识别结果）
阶段：70px（AI识别结果）

5. 缩小元素尺寸

文件：drag-upload-modal.component.scss (第1773-1861行)

// 文件预览：36px × 36px
.file-thumbnail,
.file-icon-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 4px;
}

// 删除按钮：18px × 18px
.file-delete-btn {
  width: 18px;
  height: 18px;
  top: -6px;
  right: -6px;
}

// 文件名：10px
.file-name {
  font-size: 10px;
  margin-bottom: 2px;
  line-height: 1.2;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 状态标签：9px
.status {
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-block;
}

// AI结果：9px
.ai-result {
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

尺寸优化：

✅ 缩略图从50px缩小到36px
✅ 字体从11-13px缩小到9-10px
✅ 内边距从4-8px缩小到2-4px
✅ 保持可读性和可点击性

6. 底部按钮优化

文件：drag-upload-modal.component.scss (第1868-1924行)

.modal-footer {
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 10px 12px;
  min-height: auto;
  background: white;
  border-top: 1px solid #e8e8e8;

  .action-buttons {
    width: 100%;
    gap: 8px;
    display: flex;
    
    .cancel-btn,
    .confirm-btn {
      flex: 1;
      padding: 12px 16px;
      font-size: 14px;
      border-radius: 8px;
    }
  }
}

优化点：

✅ 垂直堆叠布局
✅ 按钮等宽并排
✅ 充分利用屏幕宽度
✅ 合适的点击区域（12px padding）

📊 修复效果对比

图片分析

修复前：

质量评分：基于5个分辨率档位
内容分析：基础的清晰度、亮度、对比度

修复后：

质量评分：基于11个分辨率档位
内容分析：
  - 像素密度等级（4档）
  - 内容精细程度（4档）
  - 纹理质量评分（0-100）
  - 色彩深度评分（0-100）
  - 综合评分算法（4维度加权）

移动端显示

修复前（图片二）：

❌ 表格结构不显示
❌ 只有文件名和大小
❌ 缺少缩略图和状态
❌ 无法看到AI识别结果

修复后（参考图片一）：

✅ 完整的表格结构
✅ 5列信息完整显示
✅ 缩略图、状态标签清晰
✅ AI识别结果可见
✅ 底部按钮完整可点击

🎯 技术要点