feat: 完成化工订单班图片处理和项目记忆重组

详细说明:
- 化工订单班图片已标准化处理（8个图片，文件名与alt text完全一致）
- 完成环保、财经商贸订单班的图片重命名工作
- 重组项目记忆文件，按照功能模块编号（00-09）
- 删除旧的分散记忆文件，统一到新的编号体系
- 添加终端模拟文件：chemical.ts, environmental.ts, finance.ts
- 清理web_result冗余文件（food react-app等）
- 新增playwright截图记录和记忆文档
- 影响模块：订单班文档资料、项目记忆系统、终端模拟系统

doc/归档/web_result设计规范/食品订单班.md

@@ -0,0 +1,221 @@
+网页设计规范文档
+1. 视觉设计规范
+1.1 色彩系统
+
+主色调：
+
+深绿色与柔和的灰绿色，用作背景色、按钮和主要文本区域，传递自然、清新、舒适的感觉。
+
+浅绿色用于高亮和强调元素（如按钮和标题），为设计增添活力。
+
+金色/黄色作为强调色，突出重要的按钮、导航链接和提示内容。
+
+背景颜色：
+
+主要使用深色背景（如深绿色、深灰色），创造高对比度的视觉效果，增强层次感。
+
+大面积的背景图片（如自然景观、办公室绿植）展示网站的主题，并增强用户体验。
+
+文本颜色：
+
+主体文本颜色使用浅灰色或白色，确保在深色背景上的可读性。
+
+金色和黄色用于强调文本和按钮，增加吸引力。
+
+1.2 字体排版
+
+主字体：
+
+无衬线字体（如“Montserrat”或“Arial”）用于标题和副标题，确保视觉的简洁和现代感。
+
+衬线字体（如“Georgia”或“Times New Roman”）用于正文内容，提升阅读流畅性和传统感。
+
+字体大小：
+
+标题字体较大，突出重点内容（如“30px-50px”）。
+
+正文字体保持在14px-16px之间，易于阅读并保证页面的整洁。
+
+行距和字间距：
+
+行距大约为1.5倍，确保文字的清晰可读。
+
+字间距适中，避免字符拥挤。
+
+1.3 图标与图形规范
+
+图标：
+
+使用简洁、线条化的图标，采用白色或浅色调，保证视觉一致性。
+
+图标设计需与整体页面风格协调，避免过度复杂的设计。
+
+插图与插画：
+
+采用手绘风格的插图和图标，增强自然、亲和力的视觉效果。
+
+以简洁和现代的插画为主，帮助用户更好地理解信息。
+
+1.4 空间与布局原则
+
+网格系统：
+
+使用12列网格布局，便于响应式设计，并保证各个元素的对齐和均衡。
+
+页面空间：
+
+各部分之间保持适当的空白，避免视觉拥挤，使页面更具可读性和吸引力。
+
+全屏背景：
+
+首页使用大面积背景图，展示自然景观或企业产品，吸引用户注意。
+
+2. 交互设计规范
+2.1 鼠标悬停(Hover)效果设计
+
+按钮：
+
+悬停时，按钮的背景色会发生细微变化，例如由绿色变为浅绿色，或增加边框阴影，让用户感知到按钮的可点击性。
+
+图片：
+
+鼠标悬停时，图片可以出现轻微放大效果或模糊切换，以提升互动感。
+
+文本：
+
+重要链接或按钮文字在悬停时会变为金色或黄色，增强视觉吸引力。
+
+2.2 动效设计
+
+页面加载动画：
+
+页面加载时使用渐变淡入效果，所有内容（如标题、图像、按钮）逐步显示，给用户平滑的加载体验。
+
+元素过渡动画：
+
+页面元素的变化（如按钮点击、图片切换等）采用平滑过渡动画，提升用户体验。
+
+微交互动画：
+
+使用小型的微交互动画（如按钮点击、文本输入提示），增强页面的动态感与交互性。
+
+2.3 交互反馈
+
+表单元素：
+
+用户输入内容时，表单字段失焦时会给出反馈提示，如错误信息显示在下方。
+
+按钮点击：
+
+按钮点击后，按钮会有轻微缩小或放大的视觉反馈，表明操作成功。
+
+3. 组件库规范
+3.1 按钮
+
+主按钮：
+
+绿色背景，白色文字，具备圆角设计，具有良好的可点击性。
+
+鼠标悬停时，按钮背景颜色轻微变化，增强交互反馈。
+
+次按钮：
+
+浅绿色背景，边框设计，用于次要操作，视觉上不如主按钮突出。
+
+3.2 表单元素
+
+输入框：
+
+输入框需要设计圆角，并有清晰的标签和占位符文本。
+
+聚焦时，输入框边框颜色变为绿色或金色，增强可操作性。
+
+下拉菜单：
+
+清晰显示选项列表，点击展开时带有平滑的过渡动画。
+
+3.3 导航菜单
+
+顶部导航：
+
+使用简洁的横向菜单，子菜单采用鼠标悬停显示的方式。
+
+导航条保持简洁，避免过多的菜单项。
+
+侧边栏（适配移动端）：
+
+在移动端，导航会切换为汉堡菜单，点击展开后显示垂直菜单。
+
+3.4 模态框
+
+弹窗设计：
+
+弹窗采用平滑的过渡动画，可以包含表单、提示信息或确认框。
+
+弹窗背景为半透明，使内容更加突出。
+
+4. 响应式设计规范
+4.1 设备适配
+
+桌面版： 使用全宽设计，适当利用空间展示大量信息（如大背景图、产品展示等）。
+
+平板版： 布局会自动调整，确保内容不被压缩，重要信息仍清晰可见。
+
+移动版： 采用单列布局，导航变为汉堡菜单，保证良好的触屏操作体验。
+
+4.2 断点设计
+
+桌面端： 主要使用大屏幕宽度，内容排布为多列。
+
+平板端： 宽度约为768px到1024px，布局为两列或单列。
+
+移动端： 屏幕宽度小于768px，所有内容垂直排列，确保操作简便。
+
+4.3 布局变化原则
+
+在不同设备上，内容块的排列方式应根据屏幕宽度进行调整，例如在小屏设备上采用单列布局，在大屏设备上采用多列布局。
+
+5. 交互状态规范
+5.1 默认状态
+
+所有元素（按钮、表单输入、链接等）初始时处于可交互状态。
+
+5.2 悬停状态
+
+鼠标悬停时，元素（如按钮、链接）会显示颜色变化或下划线等效果，增强可操作性。
+
+5.3 点击状态
+
+按钮点击时，会触发微动效，如缩小或轻微弹起，以给用户点击反馈。
+
+5.4 禁用状态
+
+禁用的按钮、表单元素会显示为灰色或半透明状态，明确不可操作。
+
+5.5 加载状态
+
+在页面加载或数据提交过程中，显示加载动画（如转圈、进度条等）提示用户等待。
+
+设计原则
+
+一致性： 保证网站各部分设计风格一致，提升品牌识别度和用户的使用体验。
+
+可访问性： 遵循WCAG标准，保证所有用户（包括残障人士）均可顺利使用网站。
+
+直观性： 确保网站操作简单，用户不需过多思考即可完成所需操作。
+
+性能优化： 优化图片、脚本和样式表，减少页面加载时间，提升用户体验。
+
+技术实现建议
+
+CSS 动画： 使用 @keyframes 和 transition 实现流畅的过渡动画。
+
+JavaScript 交互： 使用 Vanilla JS 或 GSAP 库增强页面的动态交互效果。
+
+性能优化：
+
+使用 lazy-loading 技术延迟加载图片，减少初始加载时间。
+
+使用 WebP 格式压缩图像，提高页面加载速度。
+
+对 JavaScript 文件进行最小化和延迟加载，减少主线程的负担。