(function(){ if(window.parent===window)return; var T="https://appdev.ai1st.site"; var s=null,f=null,c=null,ow=null,owq=false,h=null,hSeq=0; // #1318 —— 试穿期间每个块根原来的 data-shape（没有就记 null），Cancel 按它还原。 var shapeWas=null; // #1123 r2 —— 上一次 paint() 有没有把【风格设定那几个变量】全都补齐。paintSheet 停用 // /theme.css 的前置条件就是它（理由写在 sheetEl 上面那段和 paint 里）。默认 false： // 没 paint 过就来一条只带 sheet 的消息时，失败方向是「画法不换」，不是「页面掉一半变量」。 var setFull=false; function els(){ if(!s){s=document.createElement('style');s.id='ai1st-theme-preview';document.head.appendChild(s);} if(!f){f=document.createElement('link');f.id='ai1st-theme-preview-font';f.rel='stylesheet';document.head.appendChild(f);} } function cssEl(){ if(!c){c=document.createElement('style');c.id='ai1st-theme-preview-css';document.head.appendChild(c);} return c; } function ownCss(){ if(owq){return ow;} owq=true; var ls=document.querySelectorAll('link[rel="stylesheet"]'),i,u; for(i=0;i 在试穿期间被 disabled，画法由这一份顶上。而停用它是有代价的： // theme.css 的「:root」里除了配色和两个字体变量，还有**风格设定那 3 个**（--section-* 2 个 · --radius-button； // #1541 之前是 15 个，density 删了横向三个；#1586 又删了没有读者的 --radius-* 5 个、--shadow-* 4 个）。停掉之后这些得有人补，否则它们落回 // globals.css 的平台默认值 —— 那是一个**不属于任何一套主题**的样子。 // // 🔴 r1 这里写的是「paint() 产出的是完整的一组…所以停掉也没事」。**那句话是假的，QA1 量出来了**： // paint() 的档位分支只认字符串档位名，而池里 80 套主题的 settings 是数值 ⟹ 当时那 15 个里只出得来 // --radius-button 一个，页头 logo 的圆角因此变成 globals.css 的 8px（试穿那套是 44px、站自己那套 // 是 20px）。r2 的修法有两半：① paint() 改成吃平台用 settingsToCssVars 算好的那份（见那边）； // ② **这里不再靠一句注释，而是靠一个前置条件**：paint() 把「补齐了吗」记在 setFull 上， // 下面 paintSheet 只有在它为 true 时才 disabled /theme.css。 // // ⟹ 两条失败路径都指向同一个方向：**取不到表**或**补不齐那几个变量**，都不停用 /theme.css， // 结果是「画法没换」，不是「页面掉一半变量」。字体表由那个顶上。 // // 🔴 插在 /custom.css 【之前】，不是 head 末尾：Apply 之后真实的层序是 // base.css → theme.css → custom.css，微调排最后所以它赢。插在末尾的话画法表会反过来压掉微调 —— // 那就又不等于 Apply 了。📌 说在明处：「:root」那一半（上面那个 s）**仍然**在 custom.css 之后， // 那是 #1067 就有的既有代价（标 Current 的卡因此干脆不发消息），本票不动它。 function sheetEl(){ if(!h){ h=document.createElement('style');h.id='ai1st-theme-preview-sheet'; var cu=document.querySelector('link[rel="stylesheet"][href="/custom.css"]'); if(cu&&cu.parentNode){cu.parentNode.insertBefore(h,cu);}else{document.head.appendChild(h);} } return h; } function siteSheetLink(){return document.querySelector('link[rel="stylesheet"][href="/theme.css"]');} function dropSheet(){ if(h){h.textContent='';} var l=siteSheetLink();if(l){l.disabled=false;} } // id 只认 slug —— 它会被拼进一个路径。判据与 scripts/theme-sheet.js 的 SHEET_NAME_OK 同形。 var SHEET_ID_OK=/^[a-z0-9][a-z0-9-]*$/; // 🔴 **每一条结局都要么换掉表、要么把表撤干净** —— 这是「有表的 A → 没表的退役 R」那条路唯一的 // 保险。少了撤的那一支，页面会停在 A 的画法 + R 的颜色上：一个不属于任何一套主题的组合，比不改还错。 // 📌 撤这件事放在**结局**里，不放在开头：放开头的话每次成功切换都会有一段「没有画法表」的白板期 // （先撤、再等 fetch、再贴）。放结局 ⟹ 只有取不到表的那次会短暂留着上一套的画法，而它随即被撤掉。 function paintSheet(id){ var seq=++hSeq; var name=typeof id==='string'?id:''; if(!name||!SHEET_ID_OK.test(name)){dropSheet();tell(seq,name,false,'not an id');return;} if(typeof fetch!=='function'){dropSheet();tell(seq,name,false,'no fetch');return;} fetch('/themes/'+name+'.css',{cache:'force-cache'}).then(function(r){ if(!r.ok)throw new Error('HTTP '+r.status); return r.text(); }).then(function(text){ // 🔴 回来晚的那一份丢掉，而且【什么都不做】。连点两张卡时两次 fetch 可以乱序返回，而页面最终 // 该是后点那张 —— 先到先贴的话最终样子由网络快慢决定，那正是这种缺陷最难复现的形态。 if(seq!==hSeq)return; if(!text){dropSheet();tell(seq,name,false,'empty');return;} // 🔴 #1123 r2 —— 停用 /theme.css 的前置条件：paint() 这一轮把风格设定那几个变量补齐了。 // 补不齐就【不停用】，也不贴表 —— 贴了表而不停用 /theme.css 会得到 A ∪ B（sheetEl 上面那段 // 量过 83 份表：并集 1835、83/83 份都小于它），那个东西不属于任何一套主题，比不换更错。 if(!setFull){dropSheet();tell(seq,name,false,'settings incomplete');return;} sheetEl().textContent=text; var l=siteSheetLink();if(l){l.disabled=true;} tell(seq,name,true,''); })['catch'](function(err){ if(seq!==hSeq)return; dropSheet(); tell(seq,name,false,String((err&&err.message)||err)); }); } // ── #1318 —— 画法：当场改 data-shape ───────────────────────────────────────────────────────────── // // 🔴 这段注释里不许出现反引号 —— 它住在 buildThemePreviewScript 那个模板字符串里面，一个反引号 // 就把模板提前收尾，整个文件语法错、next build 当场死（同族坑见下面 #1129 那段）。 // // 🔴 **只写属性，不注 CSS。** /shapes.css 是平台表、无条件加载（layout 里那条 link 上写了理由）， // 这个站的产物里已经有全部 50 个 (block, shape) 对的规则 ⟹ 换一个属性值就是换一副排版， // 不用 fetch、不用重建。这也是它跟 paintSheet（要去取另一套主题的表回来）不同形的原因。 // // 🔴 **第一次试穿时把原值整批记下来，之后每次试穿都从【原值】起算，不从上一次试穿的结果起算。** // 从上一次起算的话，连点两张卡之后 Cancel 会还原到中间那一套 —— 而中间那一套不属于任何一次 // 用户操作。记的是 null（本来就没有这个属性）还是字符串，两种都要能还原。 // // 🔴 值要过一遍形状判据再进 DOM（跟 SHEET_ID_OK 同形，理由也一样：它会被拼进选择器去匹配）。 // 选择单里没有这个块、或者值不合形状 ⟹ **把属性摘掉**，让这个块落回 base.css 的地板 —— // 跟「写一个查不到的画法名」相比，摘掉是能看出来的，而写一个假名字是静默塌陷。 var SHAPE_OK=/^[a-z0-9][a-z0-9-]*$/; function shapeRoots(){return document.querySelectorAll('[data-block]');} function rememberShapes(){ if(shapeWas)return; shapeWas=[]; var ns=shapeRoots(),i; for(i=0;i=4.5?'#ffffff':(CR('#000000',h)>=4.5?'#000000':'');}; // #1091 —— 先选底（500 起朝深，取第一个「压在它上面的那个字色」过线的档），再按那块底选字。 var BL=['500','600','700','800','900'],bs='',q; for(q=0;qbn2;}) .sort(function(a,b){return d?Number(b)-Number(a):Number(a)-Number(b);}), ot=ns.filter(function(k){return d?Number(k)>bn2:Number(k)=4.5){return by[z];}} return by.length?by[0]:(ot.length?ot[0]:bb); }; var hv=HOV(pk,ink,bs),ol=''; // #1100 —— accent 按钮 hover 那一档：同一把梯子，字是 globals.css 写死的 text-gray-900， // 起点是它的静止态 bg-accent-400。accent 那一组解不出来时不产出这个变量（页面落回兜底）。 var ak=(t&&t.colors&&t.colors.accent)||{},ah=ok(ak['400'])?HOV(ak,'#111827','400'):''; var gnd='#ffffff'; var OL=['500','600','400','700','300','800','200','900','100','50']; for(q=0;q=4.5){ol=OL[q];break;}} if(!ol){ol='500';} out.push('--btn-primary-bg:var(--color-primary-'+bs+');'); out.push('--btn-primary-ink:'+ink+';'); if(hv){out.push('--btn-primary-hover:var(--color-primary-'+hv+');');} if(ol){out.push('--btn-outline-ink:var(--color-primary-'+ol+');');} if(ah){out.push('--btn-accent-hover:var(--color-accent-'+ah+');');} } if(t&&typeof t.fontSans==='string'&&!/[;{}<>]/.test(t.fontSans)){out.push('--font-sans:'+t.fontSans+';');} if(t&&typeof t.fontHeading==='string'&&!/[;{}<>]/.test(t.fontHeading)){out.push('--font-heading:'+t.fontHeading+';');} // #961 — 风格设定的四组。校验方式比颜色和字体那几条更严：这里【不接受任意字符串】， // 只认 S 这张表里的档位名 / 只认 S 派生出来的变量名，值要么来自表本身、要么过一道字符白名单 // ⟹ 拼进

Get a Free Quote

Tell us about your project