diff --git a/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx index a76997a..ae02eb8 100644 --- a/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx +++ b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx @@ -10,9 +10,16 @@ interface ArticlePhonePreviewProps { } /** - * 手机端实时预览组件 - * 模拟微信小程序文章阅读效果，匹配小程序 article/detail 页面样式。 - * 预览内容始终亮色（不跟暗黑模式），外框背景跟随主题。 + * iPhone 15 Pro Max 高保真仿真预览 + * + * 真实参数比例: + * 物理尺寸 159.9mm × 76.7mm (aspect 2.084) + * Natural Titanium 钛金属直边边框 + * Dynamic Island: 药丸形 + 前置摄像头 + 接近传感器 + * 侧边按钮: 音量×2 / Action Button / 电源 + * Home Indicator: 底部圆角横条 + * + * 内容始终亮色（不跟暗黑模式），外框背景跟随主题。 */ export default function ArticlePhonePreview({ title, @@ -22,7 +29,6 @@ export default function ArticlePhonePreview({ coverImage, isDark, }: ArticlePhonePreviewProps) { - // 小程序 design tokens const mpColors = useMemo( () => ({ bg: '#F5F0EB', @@ -37,202 +43,612 @@ export default function ArticlePhonePreview({ const today = useMemo(() => new Date().toLocaleDateString('zh-CN'), []); + // ── iPhone 15 Pro Max 缩放参数 ── + // 物理: 159.9 × 76.7 mm → 比例 2.084:1 + const PHONE_W = 256; + const PHONE_H = Math.round(PHONE_W * 2.084); // 533 + const PHONE_R = 50; + const BEZEL = 4; // 边框到屏幕的距离 + const SCREEN_R = PHONE_R - BEZEL; // 46 + + // Dynamic Island (物理约 25.4mm × 8.8mm) + const ISLAND_W = 82; + const ISLAND_H = 25; + const ISLAND_R = 12.5; + const ISLAND_TOP = 14; + + // 前置摄像头 + const CAM_SIZE = 7; + const CAM_RIGHT = 16; + // 接近传感器 + const SENSOR_SIZE = 3; + const SENSOR_LEFT = 16; + + // 状态栏 + const STATUS_H = 50; + + // Home Indicator + const HOME_W = 84; + const HOME_H = 4; + const HOME_BOTTOM = 10; + + // 侧边按钮突出距离 + const BTN_OUT = 2.5; + return (
+ {/* 标签 */}
- 📱 实时预览 · 小程序端 + 实时预览 · iPhone 15 Pro Max
- {/* iPhone 外壳 */} + {/* ══════ iPhone 15 Pro Max 外壳 ══════ */} + {/* 外层: 钛金属渐变边框效果 */}
- {/* 灵动岛 */} + {/* ── 侧边按钮 ── */} + {/* 音量+ (左侧) */}
+ {/* 音量- (左侧) */} +
+ {/* Action Button (左侧) */} +
+ {/* 电源键 (右侧) */} +
- {/* 状态栏 */} + {/* ── 屏幕容器 (黑边 + 圆角) ── */}
- 9:41 -
- - - - + {/* ── Dynamic Island ── */} +
+ {/* 接近传感器 (左侧小点) */}
+ {/* 前置摄像头 (右侧) */} +
+
+ + {/* ── 状态栏 (iOS 17 风格) ── */} +
+ {/* 左侧: 时间 */} + 9:41 + + {/* 右侧: 信号 + WiFi + 电池 */} +
-
+ {/* 蜂窝信号 (4格) */} + + + + + + + + {/* WiFi */} + + + + + + + {/* 电池 */} + + {/* 电池外壳 */} + + {/* 电量 */} + + {/* 电池头 */} + +
+ + {/* ── 内容区域 ── */} +
+ {/* 作用域样式 — 匹配小程序 article/detail */} + + +
+
+ {coverImage && ( + 封面 { + (e.target as HTMLImageElement).style.display = + 'none'; + }} + /> + )} + + {title || '文章标题'} + +
+ {category && ( + {category} + )} + 健康管理中心 + {today} +
+
+ + {summary && ( +
+
{summary}
+
+ )} + +
+ {content && content !== '


' ? ( +
+ ) : ( +
+ 在左侧编辑器中输入内容 +
+ 此处将实时显示预览效果 +
+ )} +
+
+
+ + {/* ── Home Indicator ── */} +
- {/* 内容区 */} + {/* ── 背面摄像头模组暗示 (左侧上方微阴影) ── */}
- {/* 作用域样式 — 匹配小程序 article/detail/index.scss */} - - -
- {/* 头部：标题+元信息 */} -
- {coverImage && ( - 封面 { - (e.target as HTMLImageElement).style.display = 'none'; - }} - /> - )} - {title || '文章标题'} -
- {category && {category}} - 健康管理中心 - {today} -
-
- - {/* 摘要 */} - {summary && ( -
-
{summary}
-
- )} - - {/* 正文内容 */} -
- {content && content !== '


' ? ( -
- ) : ( -
在左侧编辑器中输入文章内容，此处将实时显示预览效果...
- )} -
-
+ {/* 三个镜头位置的微暗圆点 */} +
+
+
- - {/* Home Indicator */} -
); diff --git a/apps/web/src/pages/health/articleEditor/articleTemplates.ts b/apps/web/src/pages/health/articleEditor/articleTemplates.ts index 5e8cff0..22a4e30 100644 --- a/apps/web/src/pages/health/articleEditor/articleTemplates.ts +++ b/apps/web/src/pages/health/articleEditor/articleTemplates.ts @@ -29,37 +29,59 @@ export const COLOR_THEMES: ColorTheme[] = [ const W = 'data-w-e-type="styled-block"'; +// ═══════════════════════════════════════ +// 标题样式 (6 种) +// ═══════════════════════════════════════ + export const HEADING_TEMPLATES: StyleTemplate[] = [ { id: 'heading-classic', - name: '经典', + name: '经典 · 左边框', category: 'heading', preview: '▎左边框标题', html: `
标题文本
`, }, { - id: 'heading-simple', - name: '简约', + id: 'heading-underline', + name: '简约 · 下划线', category: 'heading', - preview: '下划线标题 ──', + preview: '标题 ──────', html: `
标题文本
`, }, { - id: 'heading-rounded', - name: '圆标', + id: 'heading-badge', + name: '圆标 · 标签式', category: 'heading', preview: '■ 标签式标题', html: `
标题文本
`, }, { id: 'heading-centered', - name: '居中', + name: '居中标题', category: 'heading', - preview: '居中标题', + preview: '── 居中标题 ──', html: `
标题文本
`, }, + { + id: 'heading-double-line', + name: '双线 · 上下框', + category: 'heading', + preview: '───────\n标题\n───────', + html: `
标题文本
`, + }, + { + id: 'heading-accent-bar', + name: '色带 · 顶部色条', + category: 'heading', + preview: '━━━\n标题文本', + html: `
标题文本
`, + }, ]; +// ═══════════════════════════════════════ +// 内容模板 (13 种) +// ═══════════════════════════════════════ + export const CONTENT_TEMPLATES: StyleTemplate[] = [ { id: 'blockquote', @@ -72,15 +94,36 @@ export const CONTENT_TEMPLATES: StyleTemplate[] = [ id: 'tip-warning', name: '提示框 · 警告', category: 'content', - preview: '⚠ 温馨提示', - html: `
⚠ 温馨提示：请在此处编辑警告内容。
`, + preview: '⚠ 注意事项', + html: `
⚠ 注意事项：请在此处编辑警告内容。
`, }, { id: 'tip-info', name: '提示框 · 信息', category: 'content', - preview: 'ℹ️ 补充说明', - html: `
ℹ️ 补充说明：请在此处编辑信息内容。
`, + preview: 'ℹ 补充说明', + html: `
ℹ 补充说明：请在此处编辑信息内容。
`, + }, + { + id: 'tip-success', + name: '提示框 · 正确', + category: 'content', + preview: '✓ 正确做法', + html: `
✓ 正确做法：请在此处编辑推荐内容。
`, + }, + { + id: 'tip-danger', + name: '提示框 · 危险', + category: 'content', + preview: '✕ 严禁事项', + html: `
✕ 严禁事项：请在此处编辑危险警告内容。
`, + }, + { + id: 'tip-primary', + name: '提示框 · 强调', + category: 'content', + preview: '★ 重点强调', + html: `
★ 重点强调：请在此处编辑重点内容。
`, }, { id: 'list-ordered', @@ -110,19 +153,72 @@ export const CONTENT_TEMPLATES: StyleTemplate[] = [ preview: '血压 120/80', html: `
120/80
血压 (mmHg)
72
心率 (bpm)
`, }, + { + id: 'timeline', + name: '时间线', + category: 'content', + preview: '●── 第一步\n●── 第二步', + html: `
2024年1月
第一阶段内容描述
2024年3月
第二阶段内容描述
2024年6月
第三阶段内容描述
`, + }, + { + id: 'steps', + name: '步骤流程', + category: 'content', + preview: '➊ → ➋ → ➌', + html: `
1
第一步标题
步骤一的详细说明内容
2
第二步标题
步骤二的详细说明内容
3
第三步标题
步骤三的详细说明内容
`, + }, + { + id: 'comparison', + name: '对比卡片', + category: 'content', + preview: '✓ 推荐 ✕ 避免', + html: `
✓ 推荐做法
推荐内容第一项
推荐内容第二项
推荐内容第三项
✕ 应该避免
避免内容第一项
避免内容第二项
避免内容第三项
`, + }, + { + id: 'faq', + name: '问答卡片', + category: 'content', + preview: 'Q: 问题\nA: 回答', + html: `
Q：这里填写常见问题？
A：这里填写问题的详细回答内容，帮助读者理解相关知识。
`, + }, + { + id: 'highlight-text', + name: '重点高亮', + category: 'content', + preview: '▸ 高亮重点内容', + html: `
重点：这里是需要高亮强调的关键内容。
`, + }, + { + id: 'key-value', + name: '键值对列表', + category: 'content', + preview: '指标: 数值', + html: `
检查项目
检测结果
血红蛋白
110 g/L
血清白蛋白
38 g/L
血钾
4.2 mmol/L
`, + }, ]; +// ═══════════════════════════════════════ +// 区块组件 (6 种) +// ═══════════════════════════════════════ + export const BLOCK_TEMPLATES: StyleTemplate[] = [ { id: 'divider', - name: '分割线', + name: '分割线 · 虚线', category: 'block', preview: '─ ─ ─ ─', html: `
`, }, + { + id: 'divider-gradient', + name: '分割线 · 渐变', + category: 'block', + preview: '━━━━━━━━', + html: `
`, + }, { id: 'section-header', - name: '章节标题', + name: '章节编号', category: 'block', preview: '§ 带编号章节', html: `
1章节标题
`, @@ -134,6 +230,20 @@ export const BLOCK_TEMPLATES: StyleTemplate[] = [ preview: '⊞ 3×2 表格', html: `
项目
数值
备注
收缩压
120 mmHg
正常
舒张压
80 mmHg
正常
`, }, + { + id: 'progress', + name: '进度指示', + category: 'block', + preview: '█████░░░ 65%', + html: `
治疗进度65%
`, + }, + { + id: 'quote-card', + name: '引言卡片', + category: 'block', + preview: '「」引用名言', + html: `
"
这里填写引用的名言或重要语句。
—— 作者名
`, + }, ]; /** 所有模板合并列表 */