refactor(web): 文章预览去壳化 — 375px 纯内容面板替代 iPhone 仿真

- 删除全部 iPhone 外壳代码（Dynamic Island / 状态栏 / 侧边按钮 / 相机条 / Home Indicator）
- 从 620 行精简到 200 行
- 改为 375px 固定宽度纯内容面板，CSS 与小程序 article/detail 完全一致
- 内容区自然流动高度 + 滚动，不再被外壳约束
- 顶部简洁标签栏「小程序端效果预览 · 375px」
- 新增头脑风暴讨论记录 docs/discussions/2026-05-11

docs/discussions/2026-05-11-article-phone-preview-brainstorm.md

@@ -0,0 +1,31 @@
+# 文章编辑器手机预览方案头脑风暴
+
+> 日期: 2026-05-11 | 参与者: 用户 + Claude
+
+## 背景
+
+文章编辑器右栏的手机预览（iPhone 17 Pro Max 仿真）效果差：
+1. 手机外壳占据大量像素，内容区被压缩
+2. 手机高度不可控，内容多了无限拉长
+3. styled-block 模板在窄屏下渲染错乱
+4. 用户目标是看「小程序上文章长什么样」，不是看一台手机
+
+## 5 个候选方案
+
+| 方案 | 用户体验 | 实现复杂度 | 维护成本 | 推荐度 |
+|------|---------|-----------|---------|--------|
+| A: 去壳化纯内容预览 | 内容完整可读 | 极低（删代码） | 最低 | ⭐⭐⭐⭐⭐ |
+| B: 等比缩放 scale | 比例正确但文字小 | 中等 | 中高 | ⭐⭐ |
+| C: iframe 独立页面 | 理论最接近实际 | 高 | 高 | ⭐ |
+| D: 迷你手机+点击放大 | 工作流被割裂 | 中高 | 高 | ⭐⭐ |
+| E: 标签切换多设备 | 当前无桌面端需求 | 低 | 低 | ⭐⭐⭐（渐进扩展） |
+
+## 结论
+
+**推荐方案 A（去壳化）**：去掉 iPhone 外壳，保留 375px 窄屏内容面板，CSS 与小程序 article/detail 完全一致。渐进可扩展方案 E（标签切换多设备宽度）。
+
+核心论据：
+- 编辑器预览的目标是验证内容排版，不是仿真设备
+- 去掉外壳后内容区从 ~285px 扩展到 375px，可读性直接提升
+- 公众号后台、飞书文档、Notion 的移动端预览全部采用去壳化方案
+- 实现成本 = 删除 200 行外壳代码 + 微调布局