# 错误消息样式优化文档

## 概述

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

## 问题

之前的错误消息使用红色背景 + 白色/红色文字，存在以下问题：
1. **对比度过高**：红底白字过于刺眼
2. **可读性差**：红底红字几乎无法阅读
3. **视觉疲劳**：长时间查看容易造成眼睛疲劳
4. **不够现代**：现代设计趋向于使用浅色背景 + 彩色边框

## 解决方案

### 新的错误消息样式
- **背景**：白色（`--color-neutral-background`）
- **标题/图标**：红色（`--color-negative-content`）
- **消息文字**：深灰色（`--color-neutral-content`）
- **边框**：红色（`--color-negative-border`）
- **左侧粗边框**：深红色（`--color-negative-border-bold`，4px）

### 样式代码模板

```scss
.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. **保持一致性**：新增错误消息时，使用相同的样式模板