前端模型能力评估方案：8维度20题专项测试

请用 Flexbox 实现以下效果：一个 300×300px 的容器内，一个 100×100px 的子元素水平垂直居中。
要求：
1. 子元素在容器缩小到 200×200px 时仍保持居中且不被裁切
2. 不能使用 margin: auto
3. 给出完整的 HTML + CSS（含 box-sizing 设置）

用 CSS Grid 实现一个「圣杯布局」（Holy Grail Layout）：
- 顶部 Header（高度固定 60px）
- 底部 Footer（高度固定 40px）
- 中间三栏：左侧 Sidebar（200px 宽）、中间 Main（自适应）、右侧 Aside（150px 宽）
- 要求：中间栏在内容不足时也能撑满剩余高度（即 Footer 始终在底部）
- 兼容移动端：屏幕 < 768px 时，三栏垂直堆叠，顺序为 Main → Sidebar → Aside

以下代码中，最终 p 元素的颜色是什么？请逐步解释计算过程：

<style>
#app .text { color: blue; }
.container p.text { color: red; }
[data-theme="dark"] p { color: white; }
p { color: black; }
</style>

<div id="app" data-theme="dark">
  <div class="container">
    <p class="text">Hello</p>
  </div>
</div>

请按执行顺序写出以下代码的输出：

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
new Promise(resolve => {
  console.log('5');
  resolve();
}).then(() => console.log('6'));
setTimeout(() => console.log('7'), 0);

以下代码意图创建 3 个按钮，点击分别弹出 0、1、2。但实际都弹出 3。请修复：

for (var i = 0; i < 3; i++) {
  const btn = document.createElement('button');
  btn.textContent = `Button ${i}`;
  btn.onclick = () => alert(i);
  document.body.appendChild(btn);
}

实现一个函数 parallelLimit(tasks, limit)，其中：
- tasks 是一个返回 Promise 的函数数组
- limit 是最大并发数
- 要求：同时运行的任务不超过 limit，全部完成后返回结果数组（保持顺序）

例如：
const tasks = [1,2,3,4,5].map(n => () => fetch(`/api/item/${n}`));
parallelLimit(tasks, 2).then(results => console.log(results));

以下组件存在性能问题，请指出并优化：

function ProductList({ products, onAddToCart }) {
  const [filter, setFilter] = useState('');
  
  const filtered = products.filter(p => 
    p.name.toLowerCase().includes(filter.toLowerCase())
  );
  
  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      {filtered.map(p => (
        <ProductCard product={p} onAdd={onAddToCart} />
      ))}
    </div>
  );
}

设计一个 useLocalStorage hook，要求：
1. 与 useState 类似的 API：const [value, setValue] = useLocalStorage('key', 'default')
2. 多个 Tab 之间同步更新（监听 storage 事件）
3. 首次渲染时从 localStorage 读取，避免 hydration mismatch（SSR 安全）
4. 处理 JSON 序列化/反序列化，且能处理存储满异常

一个电商应用有以下状态：
- 用户购物车（跨页面共享）
- 商品列表筛选条件（页面级别）
- 表单草稿（组件级别，关闭页面丢失也可接受）
- 用户登录态（全局，持久化）

请为 React 项目设计状态管理方案，说明每个状态用什么方式管理（useState/useContext/Zustand/Redux/URL 参数等）及理由。

用纯 CSS 实现以下加载动画：
- 三个圆点水平排列
- 依次上下弹跳（不同步，有先后）
- 颜色分别为 #ff6b6b、#4ecdc4、#45b7d1
- 动画循环，总时长 1.4s
- 要求：无 JavaScript，兼容最新 2 个 Chrome 版本即可

请根据以下文字描述写出 HTML + CSS，尽量还原视觉效果：

「一个卡片组件：
- 宽度 320px，圆角 12px，白色背景，阴影轻微
- 顶部是一张 16:9 的封面图
- 下方是标题（18px 粗体，#1a1a1a，单行截断）
- 标题下方是描述（14px，#666，最多 2 行，超出省略）
- 底部是作者区：左侧 32px 圆形头像，右侧是作者名（14px 粗体）和日期（12px，#999）
- 整体 hover 时轻微上浮（translateY -4px），阴影加深，过渡 0.3s ease」

实现一个图片画廊：
- 桌面端：3 列网格，图片等高（aspect-ratio 3:2），gap 16px
- 平板端（< 1024px）：2 列
- 移动端（< 640px）：1 列
- 图片使用懒加载，且提供 srcset 适配 DPR 1x/2x/3x
- 图片加载前显示骨架屏（灰色占位，渐变动效）

一个 React 单页应用，Lighthouse 报告如下问题：
- LCP 4.2s（目标 < 2.5s）
- CLS 0.25（目标 < 0.1）
- TBT 350ms（目标 < 200ms）

请列出至少 5 条具体优化建议，并说明每条预期解决哪个指标。

一个 Next.js 项目，分析发现 lodash 占包体积 70KB+，但实际只用到了 _.debounce 和 _.throttle。
请给出 3 种不同的优化方案，说明各自的优缺点。

以下是一个自定义下拉菜单，存在严重的可访问性问题。请指出所有问题并修复：

<div class="dropdown">
  <div class="trigger" onclick="toggle()">Options ▼</div>
  <ul class="menu" style="display: none;">
    <li onclick="select(1)">Item 1</li>
    <li onclick="select(2)">Item 2</li>
    <li onclick="select(3)">Item 3</li>
  </ul>
</div>

将以下「 div  soup」改写为语义化 HTML5，说明每个改动的理由：

<div class="header">
  <div class="logo">Site</div>
  <div class="nav">
    <div class="item"><a href="/">Home</a></div>
    <div class="item"><a href="/about">About</a></div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">Post Title</div>
    <div class="content">...</div>
  </div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

用户反馈：点击按钮后页面闪了一下，数据没有更新。
以下是简化后的代码，请找出原因：

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(data => {
      setUser(data);
      document.title = user.name;  // 问题行
    });
  }, [userId]);
  
  if (!user) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

一个微前端项目，子应用 A 的全局样式污染了子应用 B：

/* 子应用 A */
button { background: red; border: none; }

/* 子应用 B 期望默认 button 样式 */

请给出 3 种隔离方案，说明适用场景。

以下代码在单页应用中导致内存泄漏，请指出原因并修复：

useEffect(() => {
  const handler = () => console.log('resize');
  window.addEventListener('resize', handler);
  // 缺少 cleanup
}, []);

设计一个 Button 组件，要求：
1. 支持变体：primary、secondary、ghost、danger
2. 支持尺寸：sm、md、lg
3. 支持状态：loading（带 spinner）、disabled
4. 支持作为链接（<a>）或按钮（<button>）渲染（polymorphic）
5. 使用 TypeScript，类型安全
6. 样式方案任选（CSS Modules / Styled-components / Tailwind），说明理由

一个电商后台采用微前端架构（qiankun），包含：
- 基座应用（负责登录、导航）
- 商品子应用
- 订单子应用

需求：商品子应用点击「查看订单」时，需要跳转到订单子应用并携带商品 ID 过滤条件。

请设计通信方案，说明：
1. 路由跳转方式
2. 跨应用状态共享
3. 如何避免硬编码依赖

设计一个 React 应用的全局错误处理策略，要求：
1. UI 渲染错误（React Error Boundary）捕获并显示降级 UI
2. 异步错误（API 失败）统一处理，区分「可恢复」与「不可恢复」
3. 全局未捕获错误（window.onerror）上报监控
4. 开发环境显示详细错误堆栈，生产环境显示友好提示