今日概览
- 统一了全站顶部导航的视觉样式,移除各页面导航按钮的
primary
高亮,确保颜色一致与信息层级清晰。 - 修正了个人中心页的导航,移除指向当前页的“个人中心”按钮,避免自指链接。
- 启动并验证了本地服务,通过关键页面预览确认改动生效。
- 梳理了项目启动脚本与 Maven 启动方式的差异,解决端口冲突问题。
关键改动
- 导航统一:在多个页面移除顶部导航链接的
class="primary"
高亮,仅保留页面内容区域内的功能按钮高亮。- 涉及文件:
chat.html
、profile.html
、login.html
、counselors.html
、index.html
、bookings.html
、register.html
、counselor.html
- 涉及文件:
- 个人中心导航调整:修改
c:\Users\王朝东\IdeaProjects\heartask\src\main\resources\static\profile.html
的buildNav(role)
,不再显示“个人中心”链接:- 来访者:
主菜单
、全部咨询师
、退出登录
- 咨询师:
主菜单
、预约列表
、退出登录
- 其他:
退出登录
技术过程
- 来访者:
- 全局检索:使用正则在
static
目录定位所有包含class="primary"
的导航元素,精确命中需要统一的页面。 - 精准编辑:逐页移除顶部导航的高亮样式,保留页面内部按钮(如提交、保存)的高亮不变,维持交互重点。
- 导航生成脚本:在
profile.html
的导航渲染逻辑中按角色重构链接集合,减少重复与歧义。
问题与解决
- Maven命令参数异常:在 PowerShell 下传递
-Dspring-boot.run.arguments
初始尝试报 “Unknown lifecycle phase”,改用脚本启动规避。 - 端口冲突:
8080
被占用导致启动失败,执行scripts\stop.ps1
释放端口后用scripts\start.ps1
启动。 - 日志抓取:预览时浏览器日志获取失败,但页面实际加载正常,不阻碍验证。
验证与预览
- 服务启动:通过
scripts\start.ps1
启动 Spring Boot 应用,监听8080
。 - 页面预览:
http://localhost:8080/register.html
:顶部导航无primary
高亮,样式一致。http://localhost:8080/bookings.html
:导航一致,日志抓取失败但页面无错误。http://localhost:8080/counselor.html?id=1
:导航一致,页面正常。http://localhost:8080/profile.html
:不显示“个人中心”按钮,导航逻辑正确。
影响与收益
- 导航一致性提升:去除了页面间不一致的高亮,降低误导和视觉噪音。
- 信息层级更清晰:将高亮集中于页面内操作按钮(如保存/提交),引导用户关注核心交互。
- 可维护性增强:个人中心页避免自指链接,后续可复用统一的导航生成逻辑。
后续计划
- 添加统一“当前页标识”样式:不使用高亮,可采用下划线、加粗或轻微色差标示当前页面。
- 抽取导航构建到公共脚本:将各页重复的导航模板迁移到一个共享的
js
,按location.pathname
和角色动态渲染,减少分散修改。 - 启动参数规范化:在需要自定义端口时,统一文档化 PowerShell 下 Maven 的参数传递方式,或扩展
start.ps1
支持端口可选参数。
今日思考
- 样式统一要兼顾“一致性”和“可感知定位”,顶部导航去高亮是合理的,但仍需轻量的当前页指示来增强定位感。
- 与其在每个页面维护导航,不如中心化渲染逻辑,减少未来改动的传播面和不一致风险。
- 启动方式要与环境兼容(Windows/PowerShell 与 Maven 参数传递),脚本化是更稳妥的团队协作方案。