From df514784c5acc2bffc2412fd3aa8b9432791eb6a Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 19:11:10 +0800 Subject: [PATCH] =?UTF-8?q?iter(g203):=20=E6=96=87=E6=A1=A3=E7=AB=99?= =?UTF-8?q?=E4=BA=AE=E6=9A=97=E5=88=87=E6=8D=A2=E4=B8=8E=20demo=20?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=8F=82=E6=95=B0=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/demo/main.ts | 5 +++-- packages/tools/cli/bin/ua.js | 26 ++++++++++++++++++++++++-- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 89f2a4a..5a73ed9 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -283,9 +283,10 @@ const orgTree = [ { key: 'qa', label: '质量中心', children: [{ key: 'reg', label: '回归测试', disabled: true }] }, ]; -// —— 主题：优先读上次选择，其次跟随系统；写 html[data-theme] 让令牌换色 —— +// —— 主题：优先读 URL 参数（文档站 iframe 联动入口），其次上次选择，最后跟随系统；写 html[data-theme] 让令牌换色 —— const THEME_KEY = 'ua-demo-theme'; -const dark = signal((localStorage.getItem(THEME_KEY) ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')) === 'dark'); +const themeParam = new URLSearchParams(location.search).get('theme'); // ?theme=dark|light，iframe 带参重载时生效 +const dark = signal(((themeParam === 'dark' || themeParam === 'light' ? themeParam : null) ?? localStorage.getItem(THEME_KEY) ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')) === 'dark'); effect(() => { const mode = dark() ? 'dark' : 'light'; document.documentElement.dataset.theme = mode; // 令牌按 data-theme 切换 diff --git a/packages/tools/cli/bin/ua.js b/packages/tools/cli/bin/ua.js index 7ab70af..df541cc 100644 --- a/packages/tools/cli/bin/ua.js +++ b/packages/tools/cli/bin/ua.js @@ -300,7 +300,8 @@ function renderDocs(index, tokens) { @ui-arch 组件库文档 -

@ui-arch私人组件库

+

@ui-arch私人组件库

@@ -421,6 +424,25 @@ document.getElementById('q').addEventListener('input',function(e){ var q=e.target.value.trim().toLowerCase(); render(q?ordered.filter(function(p){return norm(p).indexOf(q)>=0}):ordered); }); +// —— 主题：默认跟随系统（不写 data-theme），用户选择后持久化；iframe 演示带参重载联动 —— +var THEME_KEY='ua-docs-theme'; +var themeBtn=document.getElementById('theme'); +function paintTheme(t){ // t: 'light'|'dark'|null，null 表示跟随系统 + if(t)document.documentElement.setAttribute('data-theme',t);else document.documentElement.removeAttribute('data-theme'); + themeBtn.textContent=t==='dark'?'暗色':'亮色'; +} +var savedTheme=null;try{savedTheme=localStorage.getItem(THEME_KEY)}catch(e){} +paintTheme(savedTheme==='dark'||savedTheme==='light'?savedTheme:null); +themeBtn.addEventListener('click',function(){ + var cur=document.documentElement.getAttribute('data-theme')||(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'); + var next=cur==='dark'?'light':'dark'; + try{localStorage.setItem(THEME_KEY,next)}catch(e){} + paintTheme(next); + document.querySelectorAll('iframe.demo').forEach(function(f){ // 带参重载：demo 读 ?theme= 切换 + var parts=f.src.split('#');var anchor=parts.length>1?'#'+parts.slice(1).join('#'):''; + f.src=parts[0].split('?')[0]+'?theme='+next+anchor; + }); +});