diff --git a/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx index 8c17148..c85c79c 100644 --- a/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx +++ b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx @@ -12,15 +12,16 @@ 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) - * 横向相机条 (horizontal camera bar) — 3 镜头 - * Dynamic Island: 药丸形 + 前置摄像头 + 接近传感器 - * 侧边按钮: 音量×2 / Action Button / 电源 + * 横向相机条 — 3 镜头 + * Dynamic Island: 药丸形 * Home Indicator: 底部圆角横条 - * - * 内容始终亮色(不跟暗黑模式),外框背景跟随主题。 */ export default function ArticlePhonePreview({ title, @@ -45,47 +46,47 @@ export default function ArticlePhonePreview({ const today = useMemo(() => new Date().toLocaleDateString('zh-CN'), []); // ── iPhone 17 Pro Max 缩放参数 ── - // 物理: 163.4 × 78.0 mm → 比例 2.095:1 - const PHONE_W = 256; - const PHONE_H = Math.round(PHONE_W * 2.095); // 536 - const PHONE_R = 50; - const BEZEL = 3; // 铝合金一体 → 更窄边框 - const SCREEN_R = PHONE_R - BEZEL; // 47 + // 屏幕 375px 宽 → 接近真机 CSS 像素,内容可读性保证 + const BEZEL = 4; + const PHONE_W = 375; + const PHONE_R = 58; + const SCREEN_R = PHONE_R - BEZEL; // 54 - // Dynamic Island (物理约 25.4mm × 8.8mm) - const ISLAND_W = 82; - const ISLAND_H = 25; - const ISLAND_R = 12.5; + // Dynamic Island + const ISLAND_W = 120; + const ISLAND_H = 32; + const ISLAND_R = 16; const ISLAND_TOP = 14; // 前置摄像头 - const CAM_SIZE = 7; - const CAM_RIGHT = 16; - // 接近传感器 - const SENSOR_SIZE = 3; - const SENSOR_LEFT = 16; + const CAM_SIZE = 10; + const CAM_RIGHT = 22; + const SENSOR_SIZE = 4; + const SENSOR_LEFT = 22; // 状态栏 - const STATUS_H = 50; + const STATUS_H = 56; // Home Indicator - const HOME_W = 84; + const HOME_W = 120; const HOME_H = 4; const HOME_BOTTOM = 10; - // 侧边按钮突出距离 - const BTN_OUT = 2.5; + // 侧边按钮 + const BTN_OUT = 3; - // ── 铝合金颜色 ── - // iPhone 17 Pro Max: 航空级 7000 系铝合金,一体成型 - const AL_BODY = '#B0B2B8'; // 银色铝合金 + // 铝合金 + const AL_BODY = '#B0B2B8'; const AL_DARK = '#9A9CA2'; const AL_LIGHT = '#C4C6CC'; + // 外框总宽度(手机 + 左右 padding) + const OUTER_W = PHONE_W + BEZEL * 2 + 32; // ~415 + return (
- {/* 标签 */}
{/* ══════ iPhone 17 Pro Max 外壳 ══════ */} - {/* 铝合金一体化机身 */}
{/* ── 侧边按钮 ── */} - {/* 音量+ (左侧) */}
- {/* 音量- (左侧) */}
- {/* Action Button (左侧) */}
- {/* 电源键 (右侧) */}
- {/* ── 屏幕容器 (黑边 + 圆角) ── */} + {/* ── 屏幕容器 ── */}
{/* ── Dynamic Island ── */}
- {/* 接近传感器 (左侧小点) */}
- {/* 前置摄像头 (右侧) */}
- {/* ── 状态栏 (iOS 26 风格) ── */} + {/* ── 状态栏 ── */}
- {/* 左侧: 时间 */} - 9:41 - - {/* 右侧: 信号 + WiFi + 电池 */} + 9:41
- {/* 蜂窝信号 (4格) */} - + - - {/* WiFi */} - + - - + + - - {/* 电池 */} - - - - + + + +
- {/* ── 内容区域 ── */} + {/* ── 内容区域 — 与小程序 article/detail 完全一致的样式 ── */}
- {/* 作用域样式 — 匹配小程序 article/detail */}