From 103c8aa059c0ba3af74715f66ae9c1fb1db2bdfa Mon Sep 17 00:00:00 2001
From: iven <iven_h@qq.com>
Date: Mon, 11 May 2026 09:36:43 +0800
Subject: [PATCH] =?UTF-8?q?refactor(web):=20=E6=96=87=E7=AB=A0=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E5=8E=BB=E5=A3=B3=E5=8C=96=20=E2=80=94=20375px=20?=
 =?UTF-8?q?=E7=BA=AF=E5=86=85=E5=AE=B9=E9=9D=A2=E6=9D=BF=E6=9B=BF=E4=BB=A3?=
 =?UTF-8?q?=20iPhone=20=E4=BB=BF=E7=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx
index c85c79c..f8f2c67 100644
--- a/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx
+++ b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx
@@ -10,18 +10,10 @@ interface ArticlePhonePreviewProps {
 }
 
 /**
- * iPhone 17 Pro Max 高保真仿真预览
+ * 文章内容在小程序端的实时渲染预览
  *
- * 屏幕宽度 375px（接近 iPhone CSS 逻辑像素 430pt 的 87%），
- * 内容区文字大小和间距与小程序 article/detail 完全一致，
- * 保证预览效果 = 实际手机阅读效果。
- *
- * iPhone 17 Pro Max 参数:
- *   物理尺寸 163.4mm × 78.0mm (aspect 2.095)
- *   铝合金一体化机身 (7000-series aerospace aluminum)
- *   横向相机条 — 3 镜头
- *   Dynamic Island: 药丸形
- *   Home Indicator: 底部圆角横条
+ * 375px 宽度匹配 iPhone CSS 逻辑像素，CSS 与小程序 article/detail 完全一致。
+ * 去掉手机外壳装饰，聚焦内容排版效果验证。
  */
 export default function ArticlePhonePreview({
   title,
@@ -45,413 +37,218 @@ export default function ArticlePhonePreview({
 
   const today = useMemo(() => new Date().toLocaleDateString('zh-CN'), []);
 
-  // ── iPhone 17 Pro Max 缩放参数 ──
-  // 屏幕 375px 宽 → 接近真机 CSS 像素，内容可读性保证
-  const BEZEL = 4;
-  const PHONE_W = 375;
-  const PHONE_R = 58;
-  const SCREEN_R = PHONE_R - BEZEL; // 54
-
-  // Dynamic Island
-  const ISLAND_W = 120;
-  const ISLAND_H = 32;
-  const ISLAND_R = 16;
-  const ISLAND_TOP = 14;
-
-  // 前置摄像头
-  const CAM_SIZE = 10;
-  const CAM_RIGHT = 22;
-  const SENSOR_SIZE = 4;
-  const SENSOR_LEFT = 22;
-
-  // 状态栏
-  const STATUS_H = 56;
-
-  // Home Indicator
-  const HOME_W = 120;
-  const HOME_H = 4;
-  const HOME_BOTTOM = 10;
-
-  // 侧边按钮
-  const BTN_OUT = 3;
-
-  // 铝合金
-  const AL_BODY = '#B0B2B8';
-  const AL_DARK = '#9A9CA2';
-  const AL_LIGHT = '#C4C6CC';
-
-  // 外框总宽度（手机 + 左右 padding）
-  const OUTER_W = PHONE_W + BEZEL * 2 + 32; // ~415
-
   return (
     <div
       style={{
-        width: OUTER_W,
+        width: 375,
         flexShrink: 0,
         background: isDark ? '#0f172a' : '#e8e8ed',
         borderLeft: `1px solid ${isDark ? '#1e293b' : '#d2d2d7'}`,
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center',
-        padding: '12px 0',
-        overflow: 'auto',
+        overflow: 'hidden',
       }}
     >
+      {/* 顶部标签 */}
       <div
         style={{
+          padding: '8px 16px',
           fontSize: 11,
           color: isDark ? '#64748b' : '#86868b',
-          marginBottom: 10,
           fontWeight: 500,
           letterSpacing: 0.3,
+          borderBottom: `1px solid ${isDark ? '#1e293b' : '#e5e7eb'}`,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          background: isDark ? '#0f172a' : '#f3f4f6',
+          flexShrink: 0,
         }}
       >
-        实时预览 · iPhone 17 Pro Max
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <rect x="5" y="2" width="14" height="20" rx="2" />
+          <line x1="12" y1="18" x2="12" y2="18.01" />
+        </svg>
+        小程序端效果预览 · 375px
       </div>
 
-      {/* ══════ iPhone 17 Pro Max 外壳 ══════ */}
+      {/* 内容区域 — 自然流动高度，内部可滚动 */}
       <div
         style={{
-          width: PHONE_W + BEZEL * 2,
-          borderRadius: PHONE_R + BEZEL,
-          // 高度不设固定值，让屏幕撑开
-          position: 'relative',
-          background: `linear-gradient(165deg, ${AL_LIGHT} 0%, ${AL_BODY} 30%, ${AL_DARK} 70%, ${AL_BODY} 100%)`,
-          boxShadow: [
-            '0 1px 2px rgba(0,0,0,0.06)',
-            '0 4px 12px rgba(0,0,0,0.08)',
-            '0 12px 32px rgba(0,0,0,0.10)',
-            '0 24px 64px rgba(0,0,0,0.06)',
-            'inset 0 1px 0 rgba(255,255,255,0.35)',
-            'inset 1px 0 0 rgba(255,255,255,0.15)',
-            'inset 0 -1px 0 rgba(0,0,0,0.15)',
-            'inset -1px 0 0 rgba(0,0,0,0.08)',
-          ].join(', '),
+          flex: 1,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          background: mpColors.bg,
         }}
       >
-        {/* ── 侧边按钮 ── */}
-        <div
-          style={{
-            position: 'absolute', left: -BTN_OUT, top: 170,
-            width: BTN_OUT + 1, height: 36,
-            background: `linear-gradient(180deg, ${AL_LIGHT}, ${AL_DARK})`,
-            borderRadius: '2px 0 0 2px', zIndex: 5,
-          }}
-        />
-        <div
-          style={{
-            position: 'absolute', left: -BTN_OUT, top: 218,
-            width: BTN_OUT + 1, height: 36,
-            background: `linear-gradient(180deg, ${AL_LIGHT}, ${AL_DARK})`,
-            borderRadius: '2px 0 0 2px', zIndex: 5,
-          }}
-        />
-        <div
-          style={{
-            position: 'absolute', left: -BTN_OUT - 1, top: 268,
-            width: 14, height: 14,
-            background: `radial-gradient(circle at 40% 40%, ${AL_LIGHT}, ${AL_DARK})`,
-            borderRadius: '50%', zIndex: 5,
-          }}
-        />
-        <div
-          style={{
-            position: 'absolute', right: -BTN_OUT, top: 210,
-            width: BTN_OUT + 1, height: 48,
-            background: `linear-gradient(180deg, ${AL_LIGHT}, ${AL_DARK})`,
-            borderRadius: '0 2px 2px 0', zIndex: 5,
-          }}
-        />
+        <style>{`
+          .mp-preview {
+            background: ${mpColors.bg};
+            padding-bottom: 40px;
+            min-height: 100%;
+          }
+          .mp-preview .mp-header {
+            background: ${mpColors.card};
+            padding: 20px 16px;
+            margin-bottom: 8px;
+          }
+          .mp-preview .mp-title {
+            font-size: 20px;
+            font-weight: 700;
+            color: ${mpColors.text};
+            line-height: 1.45;
+            margin-bottom: 10px;
+            display: block;
+          }
+          .mp-preview .mp-meta {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+          }
+          .mp-preview .mp-category {
+            font-size: 12px;
+            color: ${mpColors.primary};
+            background: ${mpColors.primaryLight};
+            padding: 3px 10px;
+            border-radius: 10px;
+          }
+          .mp-preview .mp-author {
+            font-size: 13px;
+            color: ${mpColors.textSecondary};
+          }
+          .mp-preview .mp-date {
+            font-size: 13px;
+            color: #9ca3af;
+          }
+          .mp-preview .mp-cover {
+            width: 100%;
+            border-radius: 8px;
+            margin: 0 0 10px;
+            max-height: 180px;
+            object-fit: cover;
+          }
+          .mp-preview .mp-summary {
+            background: ${mpColors.card};
+            padding: 14px 16px;
+            margin-bottom: 8px;
+          }
+          .mp-preview .mp-summary-text {
+            font-size: 14px;
+            color: ${mpColors.textSecondary};
+            line-height: 1.75;
+            border-left: 3px solid ${mpColors.primary};
+            padding-left: 12px;
+          }
+          .mp-preview .mp-content {
+            background: ${mpColors.card};
+            padding: 16px;
+          }
+          .mp-preview .mp-content p {
+            font-size: 16px;
+            color: ${mpColors.text};
+            line-height: 1.85;
+            margin-bottom: 12px;
+          }
+          .mp-preview .mp-content h1,
+          .mp-preview .mp-content h2,
+          .mp-preview .mp-content h3 {
+            font-weight: 700;
+            color: ${mpColors.text};
+            margin: 16px 0 8px;
+          }
+          .mp-preview .mp-content h1 { font-size: 20px; }
+          .mp-preview .mp-content h2 { font-size: 18px; }
+          .mp-preview .mp-content h3 { font-size: 16px; }
+          .mp-preview .mp-content img {
+            max-width: 100%;
+            border-radius: 8px;
+            margin: 8px 0;
+          }
+          .mp-preview .mp-content blockquote {
+            border-left: 3px solid ${mpColors.primary};
+            padding: 6px 12px;
+            color: ${mpColors.textSecondary};
+            margin: 12px 0;
+          }
+          .mp-preview .mp-content ul,
+          .mp-preview .mp-content ol {
+            padding-left: 20px;
+            margin: 8px 0;
+            font-size: 16px;
+            line-height: 1.9;
+            color: ${mpColors.text};
+          }
+          .mp-preview .mp-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 8px 0;
+            font-size: 14px;
+          }
+          .mp-preview .mp-content td,
+          .mp-preview .mp-content th {
+            border: 1px solid #e5e7eb;
+            padding: 6px 8px;
+          }
+          .mp-preview .mp-content hr {
+            border: none;
+            border-top: 1px dashed #d1d5db;
+            margin: 14px 0;
+          }
+          .mp-preview .mp-empty {
+            padding: 60px 16px;
+            text-align: center;
+            color: #9ca3af;
+            font-size: 14px;
+            line-height: 1.8;
+          }
+          .mp-preview .mp-content div[data-w-e-type="styled-block"] {
+            max-width: 100%;
+            box-sizing: border-box;
+          }
+        `}</style>
 
-        {/* ── 屏幕容器 ── */}
-        <div
-          style={{
-            margin: BEZEL,
-            borderRadius: SCREEN_R,
-            background: '#000',
-            overflow: 'hidden',
-            position: 'relative',
-          }}
-        >
-          {/* ── Dynamic Island ── */}
-          <div
-            style={{
-              position: 'absolute', top: ISLAND_TOP, left: '50%',
-              transform: 'translateX(-50%)',
-              width: ISLAND_W, height: ISLAND_H,
-              background: '#000', borderRadius: ISLAND_R,
-              zIndex: 30, boxShadow: 'inset 0 0.5px 1px rgba(0,0,0,0.5)',
-            }}
-          >
-            <div
-              style={{
-                position: 'absolute', left: SENSOR_LEFT, top: '50%',
-                transform: 'translateY(-50%)',
-                width: SENSOR_SIZE, height: SENSOR_SIZE,
-                borderRadius: '50%', background: '#1a1a2e',
-                boxShadow: 'inset 0 0 1px rgba(80,80,120,0.4)',
-              }}
-            />
-            <div
-              style={{
-                position: 'absolute', right: CAM_RIGHT, top: '50%',
-                transform: 'translateY(-50%)',
-                width: CAM_SIZE, height: CAM_SIZE,
-                borderRadius: '50%',
-                background: 'radial-gradient(circle at 35% 35%, #3a3a5c, #1a1a2e 50%, #0d0d1a)',
-                boxShadow: [
-                  '0 0 0 1px rgba(60,60,80,0.5)',
-                  'inset 0 0 2px rgba(100,100,180,0.3)',
-                  '0 0 1px rgba(120,120,200,0.2)',
-                ].join(', '),
-              }}
-            />
-          </div>
-
-          {/* ── 状态栏 ── */}
-          <div
-            style={{
-              position: 'absolute', top: 0, left: 0, right: 0,
-              height: STATUS_H,
-              display: 'flex', alignItems: 'center',
-              justifyContent: 'space-between', padding: '0 30px',
-              fontSize: 14, fontWeight: 600, color: '#fff', zIndex: 20,
-              fontFamily: '-apple-system, "SF Pro Text", "Helvetica Neue", sans-serif',
-            }}
-          >
-            <span style={{ width: 50, letterSpacing: 0.2 }}>9:41</span>
-            <div
-              style={{
-                display: 'flex', alignItems: 'center', gap: 6,
-                width: 95, justifyContent: 'flex-end',
-              }}
-            >
-              <svg width="17" height="12" viewBox="0 0 17 12" fill="none">
-                <rect x="0" y="9" width="3" height="3" rx="0.6" fill="#fff" />
-                <rect x="4.5" y="6" width="3" height="6" rx="0.6" fill="#fff" />
-                <rect x="9" y="3" width="3" height="9" rx="0.6" fill="#fff" />
-                <rect x="13.5" y="0" width="3" height="12" rx="0.6" fill="#fff" />
-              </svg>
-              <svg width="16" height="12" viewBox="0 0 20 15" fill="#fff">
-                <circle cx="10" cy="13" r="1.4" />
-                <path d="M6 10.5a5.5 5.5 0 018 0" stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round" />
-                <path d="M2.5 7a10 10 0 0115 0" stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round" />
-              </svg>
-              <svg width="27" height="13" viewBox="0 0 27 13" fill="none">
-                <rect x="0.5" y="0.5" width="22" height="12" rx="2.5" stroke="rgba(255,255,255,0.55)" strokeWidth="1" />
-                <rect x="2" y="2" width="17" height="9" rx="1.2" fill="#fff" />
-                <rect x="23.5" y="3.5" width="2.5" height="6" rx="1" fill="rgba(255,255,255,0.35)" />
-              </svg>
-            </div>
-          </div>
-
-          {/* ── 内容区域 — 与小程序 article/detail 完全一致的样式 ── */}
-          <div
-            style={{
-              position: 'absolute', top: STATUS_H - 4, left: 0, right: 0,
-              bottom: HOME_BOTTOM + HOME_H + 12,
-              overflowY: 'auto', overflowX: 'hidden',
-              background: mpColors.bg,
-              borderRadius: `0 0 ${SCREEN_R - 4}px ${SCREEN_R - 4}px`,
-              WebkitOverflowScrolling: 'touch',
-            }}
-          >
-            <style>{`
-              .mp-preview {
-                background: ${mpColors.bg};
-                padding-bottom: 40px;
-                min-height: 100%;
-              }
-              .mp-preview .mp-header {
-                background: ${mpColors.card};
-                padding: 24px 20px;
-                margin-bottom: 1px;
-              }
-              .mp-preview .mp-title {
-                font-size: 22px;
-                font-weight: 700;
-                color: ${mpColors.text};
-                line-height: 1.45;
-                margin-bottom: 12px;
-                display: block;
-              }
-              .mp-preview .mp-meta {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                flex-wrap: wrap;
-              }
-              .mp-preview .mp-category {
-                font-size: 12px;
-                color: ${mpColors.primary};
-                background: ${mpColors.primaryLight};
-                padding: 3px 10px;
-                border-radius: 10px;
-              }
-              .mp-preview .mp-author {
-                font-size: 13px;
-                color: ${mpColors.textSecondary};
-              }
-              .mp-preview .mp-date {
-                font-size: 13px;
-                color: #9ca3af;
-              }
-              .mp-preview .mp-cover {
-                width: 100%;
-                border-radius: 10px;
-                margin: 0 0 12px;
-                max-height: 200px;
-                object-fit: cover;
-              }
-              .mp-preview .mp-summary {
-                background: ${mpColors.card};
-                padding: 16px 20px;
-                margin-bottom: 1px;
-              }
-              .mp-preview .mp-summary-text {
-                font-size: 15px;
-                color: ${mpColors.textSecondary};
-                line-height: 1.75;
-                border-left: 3px solid ${mpColors.primary};
-                padding-left: 14px;
-              }
-              .mp-preview .mp-content {
-                background: ${mpColors.card};
-                padding: 20px;
-              }
-              .mp-preview .mp-content p {
-                font-size: 16px;
-                color: ${mpColors.text};
-                line-height: 1.85;
-                margin-bottom: 14px;
-              }
-              .mp-preview .mp-content h1,
-              .mp-preview .mp-content h2,
-              .mp-preview .mp-content h3 {
-                font-weight: 700;
-                color: ${mpColors.text};
-                margin: 18px 0 10px;
-              }
-              .mp-preview .mp-content h1 { font-size: 20px; }
-              .mp-preview .mp-content h2 { font-size: 18px; }
-              .mp-preview .mp-content h3 { font-size: 16px; }
-              .mp-preview .mp-content img {
-                max-width: 100%;
-                border-radius: 8px;
-                margin: 10px 0;
-              }
-              .mp-preview .mp-content blockquote {
-                border-left: 3px solid ${mpColors.primary};
-                padding: 8px 14px;
-                color: ${mpColors.textSecondary};
-                margin: 14px 0;
-              }
-              .mp-preview .mp-content ul,
-              .mp-preview .mp-content ol {
-                padding-left: 22px;
-                margin: 10px 0;
-                font-size: 16px;
-                line-height: 1.9;
-                color: ${mpColors.text};
-              }
-              .mp-preview .mp-content table {
-                width: 100%;
-                border-collapse: collapse;
-                margin: 10px 0;
-                font-size: 14px;
-              }
-              .mp-preview .mp-content td,
-              .mp-preview .mp-content th {
-                border: 1px solid #e5e7eb;
-                padding: 8px 10px;
-              }
-              .mp-preview .mp-content hr {
-                border: none;
-                border-top: 1px dashed #d1d5db;
-                margin: 16px 0;
-              }
-              .mp-preview .mp-empty {
-                padding: 60px 20px;
-                text-align: center;
-                color: #9ca3af;
-                font-size: 15px;
-                line-height: 1.8;
-              }
-              .mp-preview .mp-content div[data-w-e-type="styled-block"] {
-                max-width: 100%;
-                box-sizing: border-box;
-              }
-            `}</style>
-
-            <div className="mp-preview">
-              <div className="mp-header">
-                {coverImage && (
-                  <img
-                    className="mp-cover"
-                    src={coverImage}
-                    alt="封面"
-                    onError={(e) => {
-                      (e.target as HTMLImageElement).style.display = 'none';
-                    }}
-                  />
-                )}
-                <span className="mp-title">
-                  {title || '文章标题'}
-                </span>
-                <div className="mp-meta">
-                  {category && (
-                    <span className="mp-category">{category}</span>
-                  )}
-                  <span className="mp-author">健康管理中心</span>
-                  <span className="mp-date">{today}</span>
-                </div>
-              </div>
-
-              {summary && (
-                <div className="mp-summary">
-                  <div className="mp-summary-text">{summary}</div>
-                </div>
+        <div className="mp-preview">
+          <div className="mp-header">
+            {coverImage && (
+              <img
+                className="mp-cover"
+                src={coverImage}
+                alt="封面"
+                onError={(e) => {
+                  (e.target as HTMLImageElement).style.display = 'none';
+                }}
+              />
+            )}
+            <span className="mp-title">
+              {title || '文章标题'}
+            </span>
+            <div className="mp-meta">
+              {category && (
+                <span className="mp-category">{category}</span>
               )}
-
-              <div className="mp-content">
-                {content && content !== '<p><br></p>' ? (
-                  <div dangerouslySetInnerHTML={{ __html: content }} />
-                ) : (
-                  <div className="mp-empty">
-                    在左侧编辑器中输入内容
-                    <br />
-                    此处将实时显示预览效果
-                  </div>
-                )}
-              </div>
+              <span className="mp-author">健康管理中心</span>
+              <span className="mp-date">{today}</span>
             </div>
           </div>
 
-          {/* ── Home Indicator ── */}
-          <div
-            style={{
-              position: 'absolute', bottom: HOME_BOTTOM,
-              left: '50%', transform: 'translateX(-50%)',
-              width: HOME_W, height: HOME_H,
-              background: 'rgba(255,255,255,0.22)',
-              borderRadius: 99, zIndex: 20,
-            }}
-          />
-        </div>
+          {summary && (
+            <div className="mp-summary">
+              <div className="mp-summary-text">{summary}</div>
+            </div>
+          )}
 
-        {/* ── 背面横向相机条 ── */}
-        <div
-          style={{
-            position: 'absolute', top: BEZEL + 12, left: BEZEL + 8,
-            width: 150, height: 36, borderRadius: 10,
-            boxShadow: 'inset 0 0 4px rgba(0,0,0,0.05), 0 0 2px rgba(0,0,0,0.02)',
-            zIndex: 0, pointerEvents: 'none',
-          }}
-        >
-          <div style={{ position: 'absolute', top: 7, left: 12, width: 22, height: 22, borderRadius: '50%', background: 'radial-gradient(circle, rgba(0,0,0,0.06), transparent)' }} />
-          <div style={{ position: 'absolute', top: 7, left: 42, width: 22, height: 22, borderRadius: '50%', background: 'radial-gradient(circle, rgba(0,0,0,0.06), transparent)' }} />
-          <div style={{ position: 'absolute', top: 7, left: 72, width: 22, height: 22, borderRadius: '50%', background: 'radial-gradient(circle, rgba(0,0,0,0.06), transparent)' }} />
-          <div style={{ position: 'absolute', top: 11, right: 10, width: 14, height: 14, borderRadius: '50%', background: 'radial-gradient(circle, rgba(0,0,0,0.03), transparent)' }} />
+          <div className="mp-content">
+            {content && content !== '<p><br></p>' ? (
+              <div dangerouslySetInnerHTML={{ __html: content }} />
+            ) : (
+              <div className="mp-empty">
+                在左侧编辑器中输入内容
+                <br />
+                此处将实时显示预览效果
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/discussions/2026-05-11-article-phone-preview-brainstorm.md b/docs/discussions/2026-05-11-article-phone-preview-brainstorm.md
new file mode 100644
index 0000000..dce6dbe
--- /dev/null
+++ b/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 行外壳代码 + 微调布局