4.3 KiB
联系我们页面重构
页面：https://www.gynhc.com/official/online_message/list/18/18.html
页面策划与文案
以业务咨询为核心，提供电话、邮箱和在线留言三种沟通方式。页面包括首屏介绍、项目需求表单、直接联系、资料准备建议、到访地址和常见问答。沿用现有电话、邮箱、工作时间与办公地址；地图按地点关键词查询，不使用未经核实的坐标或伪地图。
撤下两小时回访、24 小时方案等未确认承诺，改为根据需求和工作安排沟通。说明初次咨询的资料范围、脱敏建议及保密安排，不以 ISO 字样作无依据背书。电话与邮箱读取站点配置，点击即可拨号或打开邮件应用。
设计与资产
浅色商务风，1280px 容器、科技蓝、细线及紧凑布局。桌面采用表单与联系方式双列，手机端单列。保留站点当前字体规范。新增石材门框与蓝色玻璃桥抽象主视觉，配图明确标注示意。
页面模板：addons/official/view/web/official_online_message/list.html、list_e.html。
独立样式：public/assets/addons/official/css/contact-nhc.css；独立脚本：public/assets/addons/official/js/contact-nhc.js。未修改后端控制器、模型及全站公共样式。
图片使用内置 image_gen 生成，保存于 public/assets/addons/official/images/contact/connection.webp 与 connection.jpg，1440×960。WebP 66,562 字节，JPEG 151,461 字节，首屏优先加载。提示词见 contact-image-prompt.json。
表单行为
- 称呼、联系电话、主题及需求说明必填，标签与输入控件显式关联；错误显示在对应字段并聚焦首项错误。
- 咨询方向使用按钮，支持键盘及选中状态，可快速填入主题，也可自行编辑。
- 图片验证码支持键盘更换，继续使用原站验证码和令牌机制。
- 使用原有
name、phone、title、content、captcha、__token__字段及原提交接口。每次提交前从现有/hhome/get_token.html获取新令牌，避免单次令牌失效后无法重试。 - 提交中禁用按钮，输入设为只读，避免重复提交及输入变化。仅服务端明确成功时清空内容；失败保留正文，校验返回后刷新验证码。
- 网络异常或超时后不自动重复 POST。若无法确认提交结果，显示电话或邮箱确认提示并保留输入。
- 移除页面对外部 Axios CDN 及专属弹层脚本的依赖，使用原生 Fetch 与内联状态反馈。公共模板依赖保持不变。
验证
文案 5 项、配图 2 项、联系页结构 12 项检查通过。tests/contact_form_browser.js 在本地真实浏览器中执行 13 项模拟检查，覆盖空表单、电话校验、方向选择、重复点击、请求字段与令牌、服务器拒绝、验证码刷新、成功重置、失败重试及网络异常。所有成功路径采用本地模拟响应，未发送真实咨询留言。
检查 1440px 桌面、375px 手机、812px 横屏、125% 缩放及减少动态效果，无横向溢出。发现旧移动样式以 !important 覆盖输入框，已在页面独立作用域内修复为 16px 字号、48px 高度，文本域至少 125px。标签、主要按钮、验证码按钮与输入控件触控尺寸通过检查，菜单和问答支持键盘操作。
发布后桌面和 iPhone 请求为 200，模板、脚本、样式与图片引用正确，四个资源内容与本地一致。iPhone 15 模拟环境 393px 宽度无溢出，主题选择、菜单、问答和主视觉正常，无浏览器错误。验证码接口返回图片，令牌接口返回有效响应；使用空必填字段验证线上接口拒绝缺失令牌及空内容，未创建留言。未向线上写入成功测试记录，成功反馈与重试流程通过模拟验证。
UI/UX Pro Max 本地搜索脚本为失效路径指针，依据技能正文完成布局、表单、可访问性与响应式检查，保留现有 ThinkPHP 技术栈。
发布与回退
发布 6 个文件，静态资源先于模板，上传校验 SHA-256，覆盖前检查远端未在核对后变更，清理编译模板缓存。未执行 Git reset 或修改其他业务页面。
服务器原版备份：/www/backup/nhc-contact-redesign-20261105-153734。清单：runtime/contact-deployment.json。本地旧模板与远端快照：runtime/contact-backup/。