# 工作日志：搜索结果页颜色标识方案 (v1.0)

**日期:** 2025-07-25
**制作者:** Roo (AI Assistant)
**范围:** `shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页.vue`

---

## 1. 概述

为统一“食话食说”应用内不同分类的安全评级视觉语言，并记录迭代过程中的设计决策，特此归档最终确定的颜色标识方案。

该方案包含两套独立的颜色系统：一套专用于**食品添加剂**的六级安全评级，另一套用于**预包装食品**的高风险等级警示。

## 2. 食品添加剂安全评级颜色方案

此方案基于六级分类体系，旨在为用户提供清晰、直观的安全等级指引。

| **分类** | **安全等级定位** | **推荐颜色** | **颜色代码 (十六进制)** | **CSS 类名** |
| :--- | :--- | :--- | :--- | :--- |
| A1 类 | 最高安全等级 | 微信绿 | `#07C160` | `.safety-level-1` |
| A2 类 | 较安全 | 浅绿色 | `#90ee90` | `.safety-level-2` |
| B1 类 | 需警惕 | 蓝色 | `#1E90FF` | `.safety-level-3` |
| B2 类 | 风险未知 | 黄色 (优化后) | `#ffe600` | `.safety-level-4` |
| C2 类 | 严格限制 | 橙色 | `#FF7F50` | `.safety-level-5` |
| C1 类 | 禁止使用 | 红色 | `#ff0000` | `.safety-level-6` |

## 3. 预包装食品安全评级颜色方案

此方案用于预包装食品的五级安全评级。其中 1-3 级与添加剂评级共用基础颜色，4-5 级为专属高风险警示色。

| **等级** | **安全等级定位** | **推荐颜色** | **颜色代码 (十六进制)** | **CSS 类名** |
| :--- | :--- | :--- | :--- | :--- |
| 1 级 | 最安全 | 微信绿 | `#07C160` | `.safety-level-1` |
| 2 级 | 较安全 | 浅绿色 | `#90ee90` | `.safety-level-2` |
| 3 级 | 一般安全 | 蓝色 | `#1E90FF` | `.safety-level-3` |
| 4 级 | 需警惕 | 橙色 | `#FF7F50` | `.prepackaged-safety-4` |
| 5 级 | 风险较高 | 红色 | `#ff0000` | `.prepackaged-safety-5` |