Inicio Explorar Axuda
Rexistro Iniciar sesión
nkkj
/
yss-project
3
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Árbore: 04c1ba0c31
Ramas Etiquetas
yss-project
/
DESIGN-IMPROVEMENTS-SUMMARY.md

DESIGN-IMPROVEMENTS-SUMMARY.md 6.2 KB
Histórico Raw

设计师分配与日历视图改进总结

📅 更新日期

2025-01-18

✅ 已完成的改进

1. SCSS Linter 警告修复

  • ✅ 修复了 reference-image-manager.component.scss 中的 vendorPrefix 警告
  • ✅ 添加了标准的 line-clamp 属性以提高浏览器兼容性

2. 设计师组别配置优化

问题

  • 原有配置：仅有2个组（家装、工装），每组都有2个组长
  • 不符合实际：应该是1个组长+多个成员

解决方案

  • ✅ 增加到6个专业组别：
    1. 家装设计组 - 1组长 + 3成员
    2. 工装设计组 - 1组长 + 2成员
    3. 软装设计组 - 1组长 + 2成员（新增）
    4. 建模渲染组 - 1组长 + 2成员（新增）
    5. 后期处理组 - 1组长 + 2成员（新增）
    6. 全景图制作组 - 1组长 + 1成员（新增）

成员配置改进

  • ✅ 每组仅1人为组长（isTeamLeader: true，isLeader: true）
  • ✅ 其他成员均为普通设计师（isTeamLeader: false，isLeader: false）
  • ✅ 成员状态多样化：
    • 空闲（idle）：适合分配新订单
    • 忙碌（busy）：有订单但可继续分配
    • 对图中（reviewing）：正在审核图纸

3. 设计师日历视图全面升级

核心改进

  • ✅ 颜色编码系统 - 不再使用圆圈，改用整个日期格子的背景颜色
  • ✅ 清晰的视觉层次 - 一眼就能看出设计师的空闲情况

颜色方案

状态 颜色 描述
🟢 空闲 绿色渐变背景 + 绿色边框 可以分配新订单，hover 有放大效果
🔵 有订单（1单） 浅蓝色渐变背景 + 蓝色边框 工作负荷适中，可继续分配
🔵 有订单（≥2单） 深蓝色渐变背景 + 深蓝边框 工作负荷较高，谨慎分配
🔴 对图日期 红色渐变背景 + 红色边框 完全不能分配，cursor: not-allowed
🟠 今天 橙色边框 + 外发光 特殊标记今天的日期

视觉增强

  • ✅ 渐变背景 - 使用 linear-gradient 让颜色更有层次感
  • ✅ hover 效果 - 空闲和有订单的日期 hover 时有缩放效果
  • ✅ 底部彩条 - 工作负荷强度指示器
  • ✅ 状态标签 - 显示"空闲"、"1单"、"2单"、"对图"等文字
  • ✅ 详细 tooltip - 鼠标悬停显示详细说明

新增功能

// 获取日期状态
getDayStatus(day: CalendarDay): string {
  if (day.isReviewDay) return 'review';
  if (day.orderCount >= 2) return 'busy-high';
  if (day.orderCount > 0) return 'busy-medium';
  if (day.isIdle) return 'idle';
  return 'normal';
}

// 生成详细 tooltip
getDayTooltip(day: CalendarDay): string {
  // 包含今天、状态、订单数等信息
}

4. 图例说明优化

  • ✅ 图例颜色方块从 12px 增加到 20px，更清晰
  • ✅ 使用与日历相同的渐变色和边框
  • ✅ 更新文字说明，详细解释每种颜色的含义

5. 样式精美化

  • ✅ 使用渐变色增加视觉深度
  • ✅ hover 动画效果（scale + box-shadow）
  • ✅ 边框使用更鲜明的颜色
  • ✅ 底部工作负荷指示条使用渐变填充
  • ✅ 今天日期使用橙色边框 + 外发光效果

📂 修改的文件

TypeScript 文件

  1. src/app/pages/designer/project-detail/components/designer-assignment/designer-assignment.component.ts

    • 扩展 projectTeams 从2组到6组
    • 修正每组的组长/成员配置
    • 增加更多设计师，每组3-4人

  2. src/app/pages/designer/project-detail/components/designer-calendar/designer-calendar.component.ts

    • 新增 getDayStatus() 方法
    • 新增 getDayTooltip() 方法
    • 导出 Math 对象供模板使用

HTML 文件

  1. src/app/pages/designer/project-detail/components/designer-calendar/designer-calendar.component.html
    • 移除 <mat-icon> 圆圈显示
    • 改用 data-status 属性控制样式
    • 添加状态文字标签
    • 更新图例说明
    • 更新操作提示文字

SCSS 文件

  1. src/app/pages/designer/project-detail/components/reference-image-manager/reference-image-manager.component.scss

    • 添加 line-clamp 标准属性

  2. src/app/pages/designer/project-detail/components/designer-calendar/designer-calendar.component.scss

    • 新增 [data-status="idle"] 样式
    • 新增 [data-status="busy-medium"] 样式
    • 新增 [data-status="busy-high"] 样式
    • 新增 [data-status="review"] 样式
    • 更新 .today 样式为橙色边框
    • 更新图例颜色样式
    • 优化渐变色和边框效果

🎨 颜色配置参考

// 空闲日期
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border: 2px solid #28a745;

// 有订单（1单）
background: linear-gradient(135deg, #cfe2ff 0%, #b6d4fe 100%);
border: 2px solid #0d6efd;

// 有订单（≥2单）
background: linear-gradient(135deg, #9ec5fe 0%, #6ea8fe 100%);
border: 2px solid #0a58ca;

// 对图日期
background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
border: 2px solid #dc3545;

// 今天
border: 3px solid #ff6b35;
box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);

🚀 使用效果

设计师选择界面

  • 现在有6个专业组可选择
  • 每组清晰显示1个组长和多个成员
  • 可以看到每个设计师的空闲天数、工作量等信息

日历详细视图

  • 点击设计师查看日历
  • 绿色日期 = 完全空闲，优先分配
  • 浅蓝色 = 有1个订单，可继续分配
  • 深蓝色 = 有多个订单，工作负荷高
  • 红色 = 对图日期，不可分配
  • 橙色边框 = 今天的日期
  • 底部彩条显示工作强度

交互体验

  • hover 空闲日期会放大并显示阴影
  • 点击空闲日期可以快速分配订单
  • 所有状态一目了然，不再需要仔细查看小圆圈

📝 注意事项

  1. 所有修改都保留了向后兼容性
  2. 旧的类名样式仍然存在，确保不会破坏现有功能
  3. 建议在真实环境中测试日历视图的所有交互
  4. 如需调整颜色，可修改 SCSS 文件中的渐变色值

🎯 下一步建议

  1. 连接真实的后端数据
  2. 实现点击空闲日期后的订单分配功能
  3. 添加日期范围选择功能
  4. 考虑添加周视图/月视图切换
  5. 增加设计师工作量统计图表

更新完成！所有功能已按要求实现。✅