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格) */}
-
- {/* ── 背面摄像头模组暗示 (左侧上方微阴影) ── */}
+ {/* ── 背面横向相机条 (iPhone 17 Pro Max 标志性设计) ── */}
+ {/* 铝合金外壳上方的相机条凸起暗示 */}
- {/* 三个镜头位置的微暗圆点 */}
+ {/* 三个镜头位置 — 横向排列 */}
+ {/* 闪光灯位置 */}
+