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

feat: 前端HESUPIPE品牌化+管道文案+GDPR提示

Browse Source 
- 品牌色橙#f08a31→HESUPIPE蓝#066fc0(取自官网主题CSS a:hover/导航主色),7槽位色板三处同步:theme.js/widget.js内联副本/style.css :root
- chat.html/widget.js/js/chat.js:标题HESUPIPE Support、管道场景描述、欢迎语、热门话题Get Quotation/Pipe Specifications/Delivery & Shipping、WhatsApp+8615937108317、邮箱hesu@hesuu.com
- 邀请卡文案管道化(pipe specs, MOQ, delivery timing)+GDPR小字;聊天面板footer GDPR行(复用.chat-footer)
- admin.html VOLT→HESUPIPE;头像PIL重绘为品牌蓝底白H(512/128px)
- widget-test.html色值同步+断言基准更新(浏览器断言9/9 Δ=0);.gitignore排除.playwright-mcp/

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-29 18:57:49 +08:00
parent 47c27e5bd1
commit afee0dfa4d
11 changed files with 81 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/widget.js
+22 -16
View File
@@ -7,25 +7,25 @@
// Save config immediately (before DOM ready)
var position = script.getAttribute("data-position") || "bottom-right";
var theme = script.getAttribute("data-theme") || "light";
var title = script.getAttribute("data-title") || "HESU Support";
var title = script.getAttribute("data-title") || "HESUPIPE Support";
var autoOpen = script.getAttribute("data-auto-open") === "true";
var whatsapp = script.getAttribute("data-whatsapp") || "https://wa.me/+8619037179250";
var email = script.getAttribute("data-email") || "mailto:info@borderlesscar.com";
var whatsapp = script.getAttribute("data-whatsapp") || "https://wa.me/+8615937108317";
var email = script.getAttribute("data-email") || "mailto:hesu@hesuu.com";
var autoInvite = script.getAttribute("data-auto-invite") !== "false";
var isMobile = script.getAttribute("data-mobile") === "true";
var wsBase = new URL(script.src).origin;
/* ===== 主题派生单元:与 static/js/theme.js 逐字同步,tests/test_theme_static.py 强制;只可整块替换,不可单边修改 ===== */
var DEFAULT_COLOR = "#f08a31";
var DEFAULT_COLOR = "#066fc0";
var DEFAULT_PALETTE = {
primary: "#f08a31",
primaryRgb: "240,138,49",
gradientEnd: "#f08e2c",
deepText: "#8a4c1d",
captionText: "#c16d2d",
softBg: "#fef8f4",
borderSoft: "#f0d3bd"
primary: "#066fc0",
primaryRgb: "6,111,192",
gradientEnd: "#0666bb",
deepText: "#14517a",
captionText: "#2174ab",
softBg: "#f3f9fe",
borderSoft: "#bbdcf2"
};
function clampNum(v, lo, hi) {
@@ -219,6 +219,7 @@
".chat-footer { padding:10px 10px; background:white; display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--w-caption-text); gap:20px; }",
".chat-footer .footer-left { flex:1; }",
".chat-footer .footer-right { flex-shrink:0; }",
".chat-footer a { color:var(--w-caption-text); text-decoration:underline; }",
// Typing
".typing { display:none; align-self:flex-start; padding:8px 12px; background:" + c.bubble + "; border-radius:12px; }",
@@ -275,6 +276,8 @@
".invite-start-btn:hover { opacity:0.95; }",
".invite-dismiss-btn { border-radius:20px; border:1px solid var(--w-border-soft); background:white; padding:14px 20px; color:var(--w-deep-text); font-size:14px; font-weight:500; cursor:pointer; transition:background 0.2s; }",
".invite-dismiss-btn:hover { background:#FEFEFE; }",
".invite-privacy { padding:2px 16px 12px; font-size:11px; color:var(--w-caption-text); text-align:center; }",
".invite-privacy a { color:var(--w-caption-text); text-decoration:underline; }",
// Responsive
"@media(max-width:450px){ .chat-panel{width:calc(100vw - 20px);height:calc(100vh - 200px);bottom:60px;right:0px;} .invite-panel{width:calc(100vw - 24px);} .invite-topics{grid-template-columns:1fr;} }",
@@ -297,19 +300,20 @@
'</div></div>',
'<div class="ended" id="w-ended">Chat ended. We\'ll be in touch!</div>',
'<div class="panel-top">',
'<div class="help-block"><div style="display:flex;align-items:center;gap:14px;"><div class="help-content"><div class="help-title">How can we help?</div><div class="help-description">Ask about vehicles, market support, quotation, shipping and delivery.</div></div><div class="help-actions"><a href="' + whatsapp + '" target="_blank" class="call-btn whatsapp-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg><span>WhatsApp</span></a><a href="' + email + '" class="call-btn email-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg><span>Email</span></a></div></div></div>',
'<div class="help-block"><div style="display:flex;align-items:center;gap:14px;"><div class="help-content"><div class="help-title">How can we help?</div><div class="help-description">Ask about pipe specifications, quotations, MOQ, shipping and delivery.</div></div><div class="help-actions"><a href="' + whatsapp + '" target="_blank" class="call-btn whatsapp-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg><span>WhatsApp</span></a><a href="' + email + '" class="call-btn email-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg><span>Email</span></a></div></div></div>',
'</div>',
'<div class="chat-separator"></div>',
'<div class="panel-messages" id="w-msgs">',
'<div class="msg-wrapper"><div class="msg ai">Hey! What kind of car are you looking for?</div></div>',
'<div class="msg-wrapper"><div class="msg ai">What kind of piping project are you working on?</div></div>',
'</div>',
'<div class="typing" id="w-typing"><span></span><span></span><span></span></div>',
'<div class="popular-topics-fixed" id="w-popular-topics"><div class="popular-topics-label">POPULAR TOPICS</div><div class="popular-topics-grid"><button class="popular-topic-btn" data-topic="Get Quotation">Get Quotation</button><button class="popular-topic-btn" data-topic="Distributor Cooperation">Distributor Cooperation</button></div></div>',
'<div class="popular-topics-fixed" id="w-popular-topics"><div class="popular-topics-label">POPULAR TOPICS</div><div class="popular-topics-grid"><button class="popular-topic-btn" data-topic="Get Quotation">Get Quotation</button><button class="popular-topic-btn" data-topic="Pipe Specifications">Pipe Specifications</button><button class="popular-topic-btn" data-topic="Delivery &amp; Shipping">Delivery &amp; Shipping</button></div></div>',
'<div class="chat-separator-topics"></div>',
'<div class="input-container"><div class="input-wrapper">',
'<input type="text" id="w-input" placeholder="Type a message...">',
'<button id="w-send"><span style="font-size:16px;">➤</span><span>Send</span></button>',
'</div></div>',
'<div class="chat-footer"><span class="footer-left">By chatting, you agree to our <a href="https://hesupipe.com/privacy-policy/" target="_blank" rel="noopener">privacy policy</a>.</span></div>',
].join("");
// Invite card HTML template
@@ -320,7 +324,7 @@
'<div class="invite-icon"><span class="avatar-emoji">🤖</span><img class="avatar-img" alt="" src="'+avatarUrl+'"><span class="invite-status-dot"></span></div>',
'</div>',
'<div class="invite-header-content">',
'<div class="invite-title">Chat with us for available vehicles, delivery timing and distributor cooperation.</div>',
'<div class="invite-title">Chat with us for pipe specs, MOQ, delivery timing and quotations.</div>',
'</div>',
'<div class="invite-header-actions">',
'<button class="invite-close-btn" aria-label="Close">',
@@ -339,7 +343,8 @@
'<div class="invite-body">',
'<div class="invite-topics">',
'<button class="invite-topic-btn" data-topic="Get Quotation">Get Quotation</button>',
'<button class="invite-topic-btn" data-topic="Distributor Cooperation">Distributor Cooperation</button>',
'<button class="invite-topic-btn" data-topic="Pipe Specifications">Pipe Specifications</button>',
'<button class="invite-topic-btn" data-topic="Delivery &amp; Shipping">Delivery &amp; Shipping</button>',
'</div>',
'</div>',
'<div class="chat-separator"></div>',
@@ -350,6 +355,7 @@
'</button>',
'<button class="invite-dismiss-btn">No Thanks</button>',
'</div>',
'<div class="invite-privacy">By chatting, you agree to our <a href="https://hesupipe.com/privacy-policy/" target="_blank" rel="noopener">privacy policy</a>.</div>',
'</div>',
'</div>'
].join("");