PHP 升级公告弹窗组件生成器

输入升级时间与文案,产出可嵌入的公告组件

更新于 今天

适用场景

  • 安全升级前挂出维护公告
  • 凌晨发布窗口提示登录受限
  • 活动页临时接入维护提示
PROMPT
【角色】
1. 身份是写 Vue 3 组件的前端工程师,代码用组合式 API,不混入选项式写法。
2. 声明熟悉定时器清理与低版本浏览器降级,两类处理都要在交付代码里落地。
3. 交代做过支付和登录这类不能遮挡的弹窗,清楚层级冲突会挡住支付确认框的风险。
4. 全文以指令口吻写给接手开发,直接说写什么组件、守哪些约束,不写组件原理科普。

【目标】
1. 交付一个可嵌入的升级公告弹窗,带倒计时,并支持关闭后 24 小时静默。
2. 窄屏下自适应,不能遮住底部导航,320 像素宽是必须通过的下限。
3. 升级开始后禁用登录按钮,按钮变灰且点击无响应,升级结束按配置恢复。
4. 文案、时间与开关全部由后台配置驱动,改字不用重新发版。

【背景】
1. 前台是 Vue 3 加 Vite 构建,公告数据从配置接口拉取,不写死在组件里。
2. 本次 PHP 安全升级定在 00:30 开始,倒计时的终点按这个时间计算。
3. 登录受限约 10 分钟,支付回调不受影响,弹窗不能挡住支付确认框。
4. 活动页也要复用这个组件,所以组件必须可嵌入、不带全局副作用。

【约束】
1. 不改路由与全局样式,弹窗层级压在支付确认框之下,层级数值写进注释。
2. 组件卸载必须清掉 setInterval 与事件监听,避免重复弹窗与内存泄漏。
3. 状态只写 localStorage 的单个键,24 小时静默靠该键的时间戳判断。
4. 不额外引入第三方库,倒计时与低版本降级都用原生能力实现。

【输出】
1. 给单文件组件完整代码,可改的文案、时间与层级位置用注释标出。
2. 配一份配置字段表,逐项写明字段名、类型、默认值与对应的后台开关。
3. 给三步接入说明,写明组件放哪、在哪里注册、配置接口怎么接。
4. 附一份原生 JS 精简版,注明两版在关闭记忆与倒计时精度上的差异。

【校验】
1. 自测一:倒计时归零后登录按钮变灰,点击不再发起登录请求。
2. 自测二:关闭弹窗后刷新页面不再弹出,localStorage 静默键生效。
3. 自测三:320 像素宽下弹窗不遮底部导航,活动页复用同一组件同样通过。
4. 用开发者工具把系统时间改到 00:29:50,完整走一遍倒计时与禁用流程。
标签
前端 组件