LabelingSystem/ERROR_MESSAGE_STYLE_FIX.md

错误消息样式优化文档

概述

将项目中所有红底红字（或红底白字）的错误消息样式统一优化为白底红字，提高可读性和视觉舒适度。

问题

之前的错误消息使用红色背景 + 白色/红色文字，存在以下问题：

1. 对比度过高：红底白字过于刺眼
2. 可读性差：红底红字几乎无法阅读
3. 视觉疲劳：长时间查看容易造成眼睛疲劳
4. 不够现代：现代设计趋向于使用浅色背景 + 彩色边框

解决方案

新的错误消息样式

• 背景：白色（--color-neutral-background）
• 标题/图标：红色（--color-negative-content）
• 消息文字：深灰色（--color-neutral-content）
• 边框：红色（--color-negative-border）
• 左侧粗边框：深红色（--color-negative-border-bold，4px）

样式代码模板

.errorMessage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-neutral-background);
  color: var(--color-negative-content);
  border: 1px solid var(--color-negative-border);
  border-left: 4px solid var(--color-negative-border-bold);
  border-radius: 8px;
  font-size: 14px;

  svg {
    flex-shrink: 0;
    color: var(--color-negative-content);
  }

  span {
    color: var(--color-neutral-content);
  }
}

修改的文件

1. Toast 组件

文件: web/apps/lq_label/src/components/toast/toast.module.scss

修改内容:

• 错误类型 Toast：白底红字
• 成功类型 Toast：白底绿字
• 警告类型 Toast：白底橙字
• 信息类型 Toast：保持深色背景

2. 任务列表视图

文件: web/apps/lq_label/src/views/task-list-view/task-list-view.module.scss

修改内容:

• .errorMessage 样式：从红底白字改为白底红字
• 添加左侧粗边框（4px）
• 图标和文字颜色分离

3. 项目列表视图

文件: web/apps/lq_label/src/views/project-list-view/project-list-view.module.scss

修改内容:

• .errorMessage 样式：从红底白字改为白底红字
• 添加左侧粗边框（4px）
• 图标和文字颜色分离

4. 项目标注视图

文件: web/apps/lq_label/src/views/project-annotation-view/project-annotation-view.module.scss

修改内容:

• .errorBanner 样式：从红底白字改为白底红字
• 添加左侧粗边框（4px）

设计原则

1. 视觉层次

• 主要信息（标题/图标）：使用主题色（红色/绿色/橙色）
• 次要信息（消息内容）：使用中性色（深灰色）
• 背景：使用浅色（白色）

2. 状态区分

• 左侧粗边框：4px 宽，使用深色主题色
• 整体边框：1px 宽，使用主题色
• 背景：统一使用白色

3. 可读性优化

• 对比度：确保文字与背景有足够对比度
• 颜色搭配：避免同色系背景和文字
• 视觉舒适：使用柔和的颜色组合

颜色变量说明

错误/负面状态

• --color-negative-content: 红色文字（用于标题和图标）
• --color-negative-border: 红色边框
• --color-negative-border-bold: 深红色粗边框

成功/正面状态

• --color-positive-content: 绿色文字
• --color-positive-border: 绿色边框
• --color-positive-border-bold: 深绿色粗边框

警告状态

• --color-warning-content: 橙色文字
• --color-warning-border: 橙色边框
• --color-warning-border-bold: 深橙色粗边框

中性状态

• --color-neutral-background: 白色背景
• --color-neutral-content: 深灰色文字

优势

1. 可读性提升

✅ 白色背景 + 深色文字，对比度适中 ✅ 标题和内容颜色分离，层次清晰 ✅ 避免了红底红字的可读性问题

2. 视觉舒适

✅ 减少视觉疲劳 ✅ 颜色搭配更加和谐 ✅ 符合现代设计趋势

3. 一致性

✅ 所有错误消息样式统一 ✅ 使用项目设计令牌 ✅ 与 Toast 组件样式保持一致

4. 可维护性

✅ 使用 CSS 变量，易于主题切换 ✅ 样式代码清晰，易于理解 ✅ 遵循项目规范

测试建议

重启前端服务器后，测试以下场景：

1. 任务列表：触发加载错误，查看错误消息样式
2. 项目列表：触发加载错误，查看错误消息样式
3. 项目标注：触发标注错误，查看错误横幅样式
4. Toast 通知：触发各种类型的 Toast（成功、错误、警告、信息）

相关文件

• web/apps/lq_label/src/components/toast/toast.module.scss
• web/apps/lq_label/src/views/task-list-view/task-list-view.module.scss
• web/apps/lq_label/src/views/project-list-view/project-list-view.module.scss
• web/apps/lq_label/src/views/project-annotation-view/project-annotation-view.module.scss

更新日期

2025-01-23

注意事项

1. 不要修改按钮样式：删除按钮等危险操作按钮仍然使用红色背景
2. 不要修改表单错误：表单字段的错误提示保持红色文字即可
3. 使用设计令牌：确保使用项目中实际存在的 CSS 变量
4. 保持一致性：新增错误消息时，使用相同的样式模板