[2026.10.4]站点前端组件改造：用户侧边栏改用 layui 弹层、新增图片轮播组件

一、头部模板用户侧边栏：Bootstrap offcanvas → layui layer 右滑面板

• 需求：不再用 Bootstrap，改用站点已在用的 layui 弹层，实现「点头像 → 从右侧滑入用户信息侧边栏」。
• 改动文件（站点风格下 3 个头部模板副本同步修改）：
• 实现要点：头像点击改为调用 openUserSidebar()；原 offcanvas 面板改名为独立的隐藏侧边栏容器；用 layer.open 以 offset:'r'、宽 300px、高 100% 从右侧滑出；自定义右滑入场动画并关掉弹层自带淡入。
• 验证：3 个文件 Bootstrap / offcanvas 残留清零，头像绑定、函数、隐藏样式齐全；两个站点端口均返回 200。
• 风险与未验证项：该区块仅登录后渲染，匿名访问看不到，未做肉眼验证；另有一套同款头像侧栏的模板文件本次未动（用户只要求改头部模板）。

二、新增 image-roll.js 图片轮播组件

• 基于 layui 的 carousel 模块 + layer 实现，加载顺序固定为 layer.js → layui.js → image-roll.js。
• 自动扫描页面上带 data-rollpic 的容器，支持 data-height / data-width / data-interval / data-arrow / data-anim / data-autoplay 逐个覆盖参数。
• 暴露 window.RollPic.init() 与 RollPic.reload()；layui 未就绪时自动轮询排队最多约 3 秒，避免加载顺序问题导致初始化失败。
• 修复过程中确认的两个坑：切换点数量由「轮播项个数」决定而非图片数；layui 原生不支持一屏多张，需要在轮播项内再套 flex 容器。
• 模板接入建议写法与 rows 偶数要求一并给出。

三、侧边栏显隐开关

• 新增 toggleDiv2()：点击隐藏 / 再点显示指定侧边栏，状态写入浏览器本地存储，刷新后自动恢复上次状态。
• 默认作用于 id 为 sidebar 的元素，支持传参指定其它元素。
• 页面加载时按存储状态自动恢复，语法校验通过。

四、交付与部署

• 组件源码放在工作区对话目录，站点部署位置建议 public/static/js/image-roll.js，模板中按站点的静态目录别名引用。
• 侧边栏与轮播均已完成代码层面的闭环；因首页匿名态不渲染用户区块，最终视觉效果需登录后确认。

整理人：WorkBuddy（齐博X2.0-开发进度文档整理员）