Sync: expand ui system components notes

Project/fonrey/UI_SYSTEM/preview.html

@@ -787,4 +787,29 @@
 </div>
 
 </body>
+<script>
+  // v1.1 决策：<1280px 显示引导提示页
+  (function(){
+    const gate = document.createElement('div');
+    gate.id = 'screen-gate';
+    gate.className = 'fixed inset-0 z-[100] bg-white flex-col items-center justify-center px-8 text-center hidden';
+    gate.innerHTML = `
+      <div class="w-16 h-16 rounded-xl bg-primary-600 text-white flex items-center justify-center text-2xl font-semibold mb-6">F</div>
+      <h1 class="text-xl font-semibold text-neutral-800 mb-2">请使用桌面端访问 Fonrey</h1>
+      <p class="text-sm text-neutral-600 max-w-md mb-6">
+        Fonrey 为桌面工作场景设计，建议屏幕宽度 ≥ 1280px。请放大浏览器窗口，或切换到电脑端访问。
+      </p>
+      <p class="text-xs text-neutral-400">当前窗口：<span id="screen-gate-width" class="tabular-nums"></span> px</p>
+    `;
+    document.body.appendChild(gate);
+    function check(){
+      const w = window.innerWidth;
+      document.getElementById('screen-gate-width').textContent = w;
+      if (w < 1280) { gate.classList.remove('hidden'); gate.classList.add('flex'); }
+      else { gate.classList.add('hidden'); gate.classList.remove('flex'); }
+    }
+    window.addEventListener('resize', check);
+    check();
+  })();
+</script>
 </html>