xinyouhe/ai-kefu-jc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 挂件面板位置联动——bottom-left溢出屏幕/top模式向上溢出(线上实测x=-183.78根因:面板硬编码right:0未随position翻转)

Browse Source 
容器挂pos-<position>类+CSS联动规则,无效position归一化;静态测试锁定。

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-30 12:21:31 +08:00
parent ea5fdf70d0
commit 557dab3caf
2 changed files with 30 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/widget.js
+9 -1
View File
@@ -138,6 +138,9 @@
};
var c = colors[theme] || colors.light;
// 无效 position 归一化(防 "pos-垃圾" class 与查表错位)
if (!positionStyles[position]) position = "bottom-right";
var pos = (isMobile ? positionStylesMobile : positionStyles)[position]
|| (isMobile ? positionStylesMobile : positionStyles)["bottom-right"];
@@ -176,6 +179,11 @@
// Chat panel
".chat-panel { position:absolute; bottom:80px; right:0; width:400px; height:540px; background:" + c.bg + "; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.15); display:none; flex-direction:column; overflow:hidden; }",
".chat-panel.open { display:flex; }",
// 位置联动(2026-09-30 修复): 面板对齐随 data-position 翻转,默认 right:0
// 只适配 bottom-right——左侧模式溢出屏幕、顶部模式向上溢出
".widget-container.pos-bottom-left .chat-panel { left:0; right:auto; }",
".widget-container.pos-top-right .chat-panel { top:0; bottom:auto; }",
".widget-container.pos-top-left .chat-panel { left:0; right:auto; top:0; bottom:auto; }",
// Panel header
".panel-header { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--w-primary); color:white; }",
@@ -286,7 +294,7 @@
// Build DOM
var container = document.createElement("div");
container.className = "widget-container" + (isMobile ? " mobile-host" : "");
container.className = "widget-container pos-" + position + (isMobile ? " mobile-host" : "");
var panel = document.createElement("div");
panel.className = "chat-panel";
tests/test_invite_static.py
+21
View File
@@ -78,3 +78,24 @@ def test_gdpr_privacy_notice_present():
assert 'target="_blank" rel="noopener"' in wjs
chat = _read("chat.html")
assert "privacy policy" in chat and "privacy-policy/" in chat
def test_position_class_panel_alignment():
"""位置联动(2026-09-30 线上bug): 面板对齐必须随 data-position 翻转。
根因: .chat-panel 硬编码 right:0(为 bottom-right 设计), positionStyles
只应用到按钮容器——bottom-left 时 400px 面板右缘贴 196px 容器右缘,
向左溢出屏幕 184px(线上实测 x=-183.78); top-* 模式面板 bottom:80px
同理向上溢出。修法: 容器挂 pos-<position> class + CSS 联动规则。"""
src = _read("widget.js")
# 1) 无效 position 归一化(防 "pos-垃圾" class 与查表错位)
assert "if (!positionStyles[position])" in src, "position 需归一化为合法值"
# 2) 容器挂载位置 class
assert '"widget-container pos-" + position' in src, "container 需挂 pos-<position> class"
# 3) CSS 联动规则: 左侧模式面板左对齐, 顶部模式面板从顶部向下弹
assert ".widget-container.pos-bottom-left .chat-panel { left:0; right:auto; }" in src
assert ".widget-container.pos-top-right .chat-panel { top:0; bottom:auto; }" in src
assert ".widget-container.pos-top-left .chat-panel { left:0; right:auto; top:0; bottom:auto; }" in src
# 4) pos 规则须在 mobile-host 规则之后注入(同特异性靠顺序决胜, 不得被 bottom:84px 覆盖打断)
mobile_rule = ".widget-container.mobile-host .chat-panel { bottom:84px; }"
pos_rule = ".widget-container.pos-bottom-left .chat-panel"
assert src.index(mobile_rule) < src.index(pos_rule), "pos 规则须在 mobile 规则之后"