L.star
aa2a7ae542
Decomposed the main SearchResultView into smaller, reusable components under 'src/components/SearchResult/' to improve maintainability and scalability. - Added specific components for different result types like SummaryCard, AdditiveList, MaterialCard, and PrepackagedList. - Updated 'router/index.ts' to reflect the new structure. - Included project planning and proposal documents in 'project_document/'.
1.9 KiB
1.9 KiB
工作日志：搜索结果页颜色标识方案 (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 |