wpy/rhinelab-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: RHINE LAB · ANALYSIS OS：三维界面与动效实验（本仓库不含个人归档索引数据）

Browse Source
This commit is contained in:
WpyQwq
2026-09-19 13:04:56 +08:00
commit 3f422218a5
1098 changed files with 39410 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
reference/visual-effects-review.html
+23
View File
@@ -0,0 +1,23 @@
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><title>曲面 HUD 与全局屏幕效果验证</title>
<style>body{margin:0;background:#dedbd6;font:13px system-ui;display:flex;flex-direction:column;height:100vh}header{display:flex;flex-wrap:wrap;gap:7px;padding:8px;flex-shrink:0}button{padding:5px}label{display:flex;align-items:center;gap:3px}input[type=range]{width:88px}iframe{border:0;width:100%;flex:1;min-height:0}output{display:block;padding:4px 8px;min-height:18px;white-space:pre-wrap}button[aria-pressed=true]{background:#b8b8ae}</style>
<header>
<button data-only="hud">只看曲面视差</button><button data-only="fringe">只看色散</button><button data-only="grain">只看颗粒</button><button data-only="vignette">只看暗角</button><button data-only="all">全部效果</button><button data-only="off">关闭效果</button>
<label><input id="tracking" type="checkbox" checked>鼠标追踪</label><label><input id="frost" type="checkbox">磨砂底</label>
<button id="light">亮色</button><button id="dark">暗色</button><button id="mode">切换档案／工作台</button>
<label>纵深<input id="depth" type="range" min="0" max="100" value="20"></label><label>色散<input id="fringe" type="range" min="0" max="100" value="20"></label><label>颗粒<input id="grain" type="range" min="0" max="100" value="20"></label><label>尺寸<input id="size" type="range" min="0" max="100" value="20"></label><label>暗角<input id="vignette" type="range" min="0" max="100" value="20"></label>
<button data-pointer="left">鼠标左上</button><button data-pointer="center">鼠标居中</button><button data-pointer="right">鼠标右下</button><button id="probe">读取诊断</button>
<label>上边距<input id="margin-top" type="range" min="-300" max="300" value="0"></label><label>下边距<input id="margin-bottom" type="range" min="-300" max="300" value="0"></label><label>左边距<input id="margin-left" type="range" min="-300" max="300" value="0"></label><label>右边距<input id="margin-right" type="range" min="-300" max="300" value="0"></label><button id="inset-probe">读取边距位置</button>
</header><output id="result">等待载入</output><iframe src="/?scene=archive" title="效果预览"></iframe>
<script>
const f=document.querySelector('iframe'),out=document.querySelector('output');let selected='off',workbench=true;
function apply(values){f.contentWindow.wallpaperPropertyListener.applyUserProperties(Object.fromEntries(Object.entries(values).map(([k,v])=>[k,{value:v}])))}
function sync(){const all=selected==='all';apply({hudparallax:all||selected==='hud',hudtracking:document.querySelector('#tracking').checked,huddepth:+document.querySelector('#depth').value,screenfinish:['all','fringe','grain','vignette'].includes(selected),screenfringe:all||selected==='fringe'?+document.querySelector('#fringe').value:0,screengrain:all||selected==='grain'?+document.querySelector('#grain').value:0,screengrainsize:+document.querySelector('#size').value,screenvignette:all||selected==='vignette'?+document.querySelector('#vignette').value:0,uifrost:document.querySelector('#frost').checked,uifroststrength:55});document.querySelectorAll('[data-only]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.only===selected)))}
f.onload=()=>{apply({desktopmode:'workbench',boot:false,music:false,sound:false,colortheme:'light'});sync();out.textContent='已载入；可分别检查曲面、全局色散、颗粒和暗角'};
for(const b of document.querySelectorAll('[data-only]'))b.onclick=()=>{selected=b.dataset.only;sync()};
for(const input of document.querySelectorAll('input'))input.oninput=()=>{sync();apply(Object.fromEntries(['top','bottom','left','right'].map(side=>['uimargin'+side,+document.querySelector('#margin-'+side).value])))};
for(const theme of ['light','dark'])document.querySelector('#'+theme).onclick=()=>apply({colortheme:theme});
document.querySelector('#mode').onclick=()=>{workbench=!workbench;apply({desktopmode:workbench?'workbench':'archive'})};
for(const b of document.querySelectorAll('[data-pointer]'))b.onclick=()=>{const w=f.contentWindow,s=w.document.querySelector('#stage'),r=s.getBoundingClientRect(),p={left:[.05,.05],center:[.5,.5],right:[.95,.95]}[b.dataset.pointer];s.dispatchEvent(new w.PointerEvent('pointermove',{clientX:r.left+r.width*p[0],clientY:r.top+r.height*p[1],pointerType:'mouse',bubbles:true}));};
document.querySelector('#probe').onclick=()=>{const w=f.contentWindow,s=w.document.querySelector('#stage'),node=w.document.querySelector('.brand'),m=new w.DOMMatrix(w.getComputedStyle(node).transform),a=m.transformPoint({x:0,y:0}),b=m.transformPoint({x:node.offsetWidth,y:0});out.textContent=JSON.stringify({hud:s.dataset.hudDepth,tracking:s.dataset.hudTracking,globalFilter:w.getComputedStyle(s).filter,brandTopSlope:((b.y/b.w-a.y/a.w)/(b.x/b.w-a.x/a.w)).toFixed(3),brandTransform:w.getComputedStyle(node).transform,canvasTransform:w.getComputedStyle(w.document.querySelector('canvas')).transform,noiseSeed:w.document.querySelector('feTurbulence')?.getAttribute('seed'),frost:s.dataset.uiFrost})};
document.querySelector('#inset-probe').onclick=()=>{const w=f.contentWindow,d=w.document,s=d.querySelector('#stage'),r=s.getBoundingClientRect(),brand=d.querySelector('.brand').getBoundingClientRect(),footer=d.querySelector('.system-footer').getBoundingClientRect(),nav=d.querySelector('.system-nav').getBoundingClientRect(),canvas=d.querySelector('canvas').getBoundingClientRect();out.textContent=JSON.stringify({enabled:s.dataset.uiInsets,brandLeft:+(brand.left-r.left).toFixed(2),brandTop:+(brand.top-r.top).toFixed(2),footerBottom:+(r.bottom-footer.bottom).toFixed(2),navRight:+(r.right-nav.right).toFixed(2),font:w.getComputedStyle(d.querySelector('.brand h1')).fontSize,canvas:[canvas.width,canvas.height],css:['top','right','bottom','left'].map(side=>s.style.getPropertyValue('--ui-'+side))})};
</script></html>