diff --git a/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx index ae02eb8..8c17148 100644 --- a/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx +++ b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx @@ -10,11 +10,12 @@ interface ArticlePhonePreviewProps { } /** - * iPhone 15 Pro Max 高保真仿真预览 + * iPhone 17 Pro Max 高保真仿真预览 * * 真实参数比例: - * 物理尺寸 159.9mm × 76.7mm (aspect 2.084) - * Natural Titanium 钛金属直边边框 + * 物理尺寸 163.4mm × 78.0mm (aspect 2.095) + * 铝合金一体化机身 (7000-series aerospace aluminum) + * 横向相机条 (horizontal camera bar) — 3 镜头 * Dynamic Island: 药丸形 + 前置摄像头 + 接近传感器 * 侧边按钮: 音量×2 / Action Button / 电源 * Home Indicator: 底部圆角横条 @@ -43,13 +44,13 @@ export default function ArticlePhonePreview({ const today = useMemo(() => new Date().toLocaleDateString('zh-CN'), []); - // ── iPhone 15 Pro Max 缩放参数 ── - // 物理: 159.9 × 76.7 mm → 比例 2.084:1 + // ── iPhone 17 Pro Max 缩放参数 ── + // 物理: 163.4 × 78.0 mm → 比例 2.095:1 const PHONE_W = 256; - const PHONE_H = Math.round(PHONE_W * 2.084); // 533 + const PHONE_H = Math.round(PHONE_W * 2.095); // 536 const PHONE_R = 50; - const BEZEL = 4; // 边框到屏幕的距离 - const SCREEN_R = PHONE_R - BEZEL; // 46 + const BEZEL = 3; // 铝合金一体 → 更窄边框 + const SCREEN_R = PHONE_R - BEZEL; // 47 // Dynamic Island (物理约 25.4mm × 8.8mm) const ISLAND_W = 82; @@ -75,6 +76,12 @@ export default function ArticlePhonePreview({ // 侧边按钮突出距离 const BTN_OUT = 2.5; + // ── 铝合金颜色 ── + // iPhone 17 Pro Max: 航空级 7000 系铝合金,一体成型 + const AL_BODY = '#B0B2B8'; // 银色铝合金 + const AL_DARK = '#9A9CA2'; + const AL_LIGHT = '#C4C6CC'; + return (
- 实时预览 · iPhone 15 Pro Max + 实时预览 · iPhone 17 Pro Max
- {/* ══════ iPhone 15 Pro Max 外壳 ══════ */} - {/* 外层: 钛金属渐变边框效果 */} + {/* ══════ iPhone 17 Pro Max 外壳 ══════ */} + {/* 铝合金一体化机身 */}
@@ -134,11 +140,10 @@ export default function ArticlePhonePreview({ style={{ position: 'absolute', left: -BTN_OUT, - top: 115, + top: 118, width: BTN_OUT + 1, - height: 28, - background: - 'linear-gradient(180deg, #A0A0A4, #78787C, #88888C)', + height: 26, + background: `linear-gradient(180deg, ${AL_LIGHT}, ${AL_DARK})`, borderRadius: '2px 0 0 2px', zIndex: 5, }} @@ -148,11 +153,10 @@ export default function ArticlePhonePreview({ style={{ position: 'absolute', left: -BTN_OUT, - top: 150, + top: 152, width: BTN_OUT + 1, - height: 28, - background: - 'linear-gradient(180deg, #A0A0A4, #78787C, #88888C)', + height: 26, + background: `linear-gradient(180deg, ${AL_LIGHT}, ${AL_DARK})`, borderRadius: '2px 0 0 2px', zIndex: 5, }} @@ -165,8 +169,7 @@ export default function ArticlePhonePreview({ top: 188, width: 11, height: 11, - background: - 'radial-gradient(circle at 40% 40%, #A8A8AC, #78787C)', + background: `radial-gradient(circle at 40% 40%, ${AL_LIGHT}, ${AL_DARK})`, borderRadius: '50%', zIndex: 5, }} @@ -176,11 +179,10 @@ export default function ArticlePhonePreview({ style={{ position: 'absolute', right: -BTN_OUT, - top: 145, + top: 148, width: BTN_OUT + 1, - height: 38, - background: - 'linear-gradient(180deg, #A0A0A4, #78787C, #88888C)', + height: 36, + background: `linear-gradient(180deg, ${AL_LIGHT}, ${AL_DARK})`, borderRadius: '0 2px 2px 0', zIndex: 5, }} @@ -211,7 +213,6 @@ export default function ArticlePhonePreview({ background: '#000', borderRadius: ISLAND_R, zIndex: 30, - // Dynamic Island 微妙的凹陷感 boxShadow: 'inset 0 0.5px 1px rgba(0,0,0,0.5)', }} > @@ -226,8 +227,7 @@ export default function ArticlePhonePreview({ height: SENSOR_SIZE, borderRadius: '50%', background: '#1a1a2e', - boxShadow: - 'inset 0 0 1px rgba(80,80,120,0.4)', + boxShadow: 'inset 0 0 1px rgba(80,80,120,0.4)', }} /> {/* 前置摄像头 (右侧) */} @@ -240,7 +240,6 @@ export default function ArticlePhonePreview({ width: CAM_SIZE, height: CAM_SIZE, borderRadius: '50%', - // 摄像头镜头效果: 外环 + 内部蓝紫反光 background: 'radial-gradient(circle at 35% 35%, #3a3a5c, #1a1a2e 50%, #0d0d1a)', boxShadow: [ @@ -252,7 +251,7 @@ export default function ArticlePhonePreview({ />
- {/* ── 状态栏 (iOS 17 风格) ── */} + {/* ── 状态栏 (iOS 26 风格) ── */}
{/* 蜂窝信号 (4格) */} - - - - - + + + + + {/* WiFi */} - + {/* 电池 */} - - {/* 电池外壳 */} + - {/* 电量 */} - {/* 电池头 */} { - (e.target as HTMLImageElement).style.display = - 'none'; + (e.target as HTMLImageElement).style.display = 'none'; }} /> )} @@ -595,57 +547,70 @@ export default function ArticlePhonePreview({ />
- {/* ── 背面摄像头模组暗示 (左侧上方微阴影) ── */} + {/* ── 背面横向相机条 (iPhone 17 Pro Max 标志性设计) ── */} + {/* 铝合金外壳上方的相机条凸起暗示 */}
- {/* 三个镜头位置的微暗圆点 */} + {/* 三个镜头位置 — 横向排列 */}
+ {/* 闪光灯位置 */} +