-
- );
- }
-
- return (
-
- {/* 页面标题栏 */}
- setMediaPickerOpen(false)}
- onSelect={(url) => {
- setCoverImage(url);
- message.success('已选择封面图');
- }}
- />
-
- );
-}
diff --git a/apps/web/src/pages/health/articleEditor/ArticleEditor.tsx b/apps/web/src/pages/health/articleEditor/ArticleEditor.tsx
new file mode 100644
index 0000000..2055c68
--- /dev/null
+++ b/apps/web/src/pages/health/articleEditor/ArticleEditor.tsx
@@ -0,0 +1,470 @@
+import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button, Input, Space, message, Spin } from 'antd';
+import {
+ ArrowLeftOutlined,
+ SaveOutlined,
+ SendOutlined,
+ SettingOutlined,
+} from '@ant-design/icons';
+import { Editor } from '@wangeditor/editor-for-react';
+import { createToolbar } from '@wangeditor/editor';
+import type { IDomEditor, IEditorConfig, IToolbarConfig, Toolbar as ToolbarType } from '@wangeditor/editor';
+import {
+ articleApi,
+ articleCategoryApi,
+ articleTagApi,
+ type Article,
+ type ArticleTagItem,
+} from '../../../api/health/articles';
+import { useThemeMode } from '../../../hooks/useThemeMode';
+import { AuthButton } from '../../../components/AuthButton';
+import { handleApiError } from '../../../api/client';
+import { uploadFile } from '../../../api/upload';
+import ArticleStyleLibrary from './ArticleStyleLibrary';
+import ArticlePhonePreview from './ArticlePhonePreview';
+import ArticleSettingsDrawer from './ArticleSettingsDrawer';
+import { registerStyledBlockPlugin } from './styledBlockPlugin';
+import '@wangeditor/editor/dist/css/style.css';
+
+// 在任何编辑器实例创建之前注册自定义模块
+registerStyledBlockPlugin();
+
+export default function ArticleEditor() {
+ const { id } = useParams<{ id: string }>();
+ const navigate = useNavigate();
+ const isEdit = Boolean(id);
+ const isDark = useThemeMode();
+
+ // 表单状态
+ const [title, setTitle] = useState('');
+ const [summary, setSummary] = useState('');
+ const [content, setContent] = useState('');
+ const [coverImage, setCoverImage] = useState('');
+ const [slug, setSlug] = useState('');
+ const [categoryId, setCategoryId] = useState
-
- }
- onClick={() => navigate('/health/articles')}
- />
-
-
-
- }
- onClick={handleSave}
- loading={saving}
- >
- 保存草稿
-
-
-
- }
- onClick={handleSubmit}
- loading={saving}
- >
- 提交审核
-
-
-
-
-
- {/* 主体布局: 左侧编辑区 + 右侧设置面板 */}
-
-
- {isEdit ? '编辑文章' : '新建文章'}
-
- {/* 左侧: 富文本编辑器 — key 变化时强制重新挂载，防止 WangEditor toolbar 重复创建 */}
-
-
-
-
-
- {/* 右侧: 设置面板 */}
-
-
-
- setContent(editorInstance.getHtml())}
- mode="default"
- style={{
- minHeight: 500,
- background: isDark ? '#111827' : '#FFFFFF',
- color: isDark ? '#e2e8f0' : '#1e293b',
- }}
- />
-
-
- {/* 标题 */}
-
-
-
- setTitle(e.target.value)}
- placeholder="请输入文章标题"
- maxLength={200}
- showCount
- />
-
-
- {/* 分类 */}
-
-
-
-
- {/* 标签 */}
-
-
-
-
- {/* 摘要 */}
-
-
- setSummary(e.target.value)}
- placeholder="请输入文章摘要"
- rows={3}
- maxLength={500}
- showCount
- />
-
-
- {/* 封面图 */}
-
-
-
- setCoverImage(e.target.value)}
- placeholder="请输入封面图片 URL 或上传文件"
- style={{ flex: 1 }}
- />
- } onClick={() => setMediaPickerOpen(true)}>
- 媒体库
-
- {
- try {
- const result = await uploadFile(file);
- setCoverImage(result.url);
- message.success('封面图上传成功');
- } catch {
- message.error('封面图上传失败');
- }
- return false;
- }}
- >
- }>上传
-
-
- {coverImage && (
-
-
- {/* Slug */}
-
- 
{
- (e.target as HTMLImageElement).style.display = 'none';
- }}
- />
-
- )}
-
-
- setSlug(e.target.value)}
- placeholder="例如: health-tips-for-elderly"
- />
-
-
- {/* 排序 */}
-
-
- setSortOrder(Number(e.target.value))}
- placeholder="0"
- />
-
-
+
+ );
+ }
+
+ const borderColor = isDark ? '#1e293b' : '#f1f5f9';
+ const bgPrimary = isDark ? '#111827' : '#FFFFFF';
+ const bgSecondary = isDark ? '#0f172a' : '#f8fafc';
+
+ return (
+
+ {/* 页面标题栏 */}
+ setSettingsDrawerOpen(false)}
+ isDark={isDark}
+ summary={summary}
+ onSummaryChange={setSummary}
+ coverImage={coverImage}
+ onCoverImageChange={setCoverImage}
+ categoryId={categoryId}
+ onCategoryChange={setCategoryId}
+ selectedTagIds={selectedTagIds}
+ onTagIdsChange={setSelectedTagIds}
+ slug={slug}
+ onSlugChange={setSlug}
+ sortOrder={sortOrder}
+ onSortOrderChange={setSortOrder}
+ categories={categories}
+ tags={tags}
+ />
+
+ );
+}
diff --git a/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx
new file mode 100644
index 0000000..a76997a
--- /dev/null
+++ b/apps/web/src/pages/health/articleEditor/ArticlePhonePreview.tsx
@@ -0,0 +1,239 @@
+import { useMemo } from 'react';
+
+interface ArticlePhonePreviewProps {
+ title: string;
+ content: string;
+ category?: string;
+ summary?: string;
+ coverImage?: string;
+ isDark: boolean;
+}
+
+/**
+ * 手机端实时预览组件
+ * 模拟微信小程序文章阅读效果，匹配小程序 article/detail 页面样式。
+ * 预览内容始终亮色（不跟暗黑模式），外框背景跟随主题。
+ */
+export default function ArticlePhonePreview({
+ title,
+ content,
+ category,
+ summary,
+ coverImage,
+ isDark,
+}: ArticlePhonePreviewProps) {
+ // 小程序 design tokens
+ const mpColors = useMemo(
+ () => ({
+ bg: '#F5F0EB',
+ primary: '#C4623A',
+ primaryLight: '#F0DDD4',
+ text: '#2D2A26',
+ textSecondary: '#5A554F',
+ card: '#FFFFFF',
+ }),
+ [],
+ );
+
+ const today = useMemo(() => new Date().toLocaleDateString('zh-CN'), []);
+
+ return (
+
+
+ }
+ onClick={() => navigate('/health/articles')}
+ />
+
+
+ }
+ onClick={() => setSettingsDrawerOpen(true)}
+ >
+ 设置
+
+
+ } onClick={handleSave} loading={saving}>
+ 保存草稿
+
+
+
+ }
+ onClick={handleSubmit}
+ loading={saving}
+ >
+ 提交审核
+
+
+
+
+
+ {/* 三栏布局 */}
+ {isEdit ? '编辑文章' : '新建文章'}
+
+ {/* 左栏：样式组件库 */}
+ c.id === categoryId)?.name}
+ summary={summary}
+ coverImage={coverImage}
+ isDark={isDark}
+ />
+
+
+ {/* 设置抽屉 */}
+
+ {/* 标题输入 — Notion 风格大字 */}
+
+
+ {/* 右栏：手机预览 */}
+
+ setTitle(e.target.value)}
+ placeholder="请输入文章标题..."
+ variant="borderless"
+ maxLength={200}
+ style={{
+ fontSize: 28,
+ fontWeight: 700,
+ color: isDark ? '#e2e8f0' : '#1e293b',
+ padding: 0,
+ lineHeight: 1.4,
+ }}
+ />
+
+
+ {/* 工具栏 */}
+
+
+ {/* 编辑器 */}
+
+ setContent(editorInstance.getHtml())}
+ mode="default"
+ style={{
+ minHeight: 400,
+ background: bgPrimary,
+ color: isDark ? '#e2e8f0' : '#1e293b',
+ }}
+ />
+
+
+
+ );
+}
diff --git a/apps/web/src/pages/health/articleEditor/ArticleSettingsDrawer.tsx b/apps/web/src/pages/health/articleEditor/ArticleSettingsDrawer.tsx
new file mode 100644
index 0000000..994706e
--- /dev/null
+++ b/apps/web/src/pages/health/articleEditor/ArticleSettingsDrawer.tsx
@@ -0,0 +1,206 @@
+import { useState } from 'react';
+import { Drawer, Input, Select, Space, Upload, Button, message } from 'antd';
+import { UploadOutlined, PictureOutlined } from '@ant-design/icons';
+import type { ArticleTagItem } from '../../../api/health/articles';
+import { uploadFile } from '../../../api/upload';
+import MediaPicker from '../../../components/MediaPicker';
+
+interface ArticleSettingsDrawerProps {
+ open: boolean;
+ onClose: () => void;
+ isDark: boolean;
+ summary: string;
+ onSummaryChange: (v: string) => void;
+ coverImage: string;
+ onCoverImageChange: (v: string) => void;
+ categoryId: string | undefined;
+ onCategoryChange: (v: string | undefined) => void;
+ selectedTagIds: string[];
+ onTagIdsChange: (v: string[]) => void;
+ slug: string;
+ onSlugChange: (v: string) => void;
+ sortOrder: number;
+ onSortOrderChange: (v: number) => void;
+ categories: { id: string; name: string }[];
+ tags: ArticleTagItem[];
+}
+
+const labelStyle = (isDark: boolean) => ({
+ display: 'block',
+ fontSize: 13,
+ fontWeight: 500 as const,
+ marginBottom: 6,
+ color: isDark ? '#94a3b8' : '#475569',
+});
+
+/**
+ * 文章设置抽屉
+ * 从原右侧面板迁移，包含分类、标签、摘要、封面图、Slug、排序等设置。
+ */
+export default function ArticleSettingsDrawer({
+ open,
+ onClose,
+ isDark,
+ summary,
+ onSummaryChange,
+ coverImage,
+ onCoverImageChange,
+ categoryId,
+ onCategoryChange,
+ selectedTagIds,
+ onTagIdsChange,
+ slug,
+ onSlugChange,
+ sortOrder,
+ onSortOrderChange,
+ categories,
+ tags,
+}: ArticleSettingsDrawerProps) {
+ const [mediaPickerOpen, setMediaPickerOpen] = useState(false);
+
+ return (
+ <>
+
+ 📱 实时预览 · 小程序端
+
+
+ {/* iPhone 外壳 */}
+
+ {/* 灵动岛 */}
+
+
+ {/* 状态栏 */}
+
+
+ 9:41
+
+
+ {/* 内容区 */}
+
+
+
+
+
+
+
+ {/* 作用域样式 — 匹配小程序 article/detail/index.scss */}
+
+
+
+
+ {/* Home Indicator */}
+
+
+ {/* 头部：标题+元信息 */}
+
+
+ {coverImage && (
+ {
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
+ )}
+ {title || '文章标题'}
+
+
+ {/* 摘要 */}
+ {summary && (
+
+ {category && {category}}
+ 健康管理中心
+ {today}
+
+
+
+ )}
+
+ {/* 正文内容 */}
+ {summary}
+
+ {content && content !== '
+ 在左侧编辑器中输入文章内容，此处将实时显示预览效果...
+ )}
+
+ {/* 分类 */}
+
+
+
+
+
+ {/* 标签 */}
+
+
+
+
+ {/* 摘要 */}
+
+
+ onSummaryChange(e.target.value)}
+ placeholder="请输入文章摘要"
+ rows={3}
+ maxLength={500}
+ showCount
+ />
+
+
+ {/* 封面图 */}
+
+
+
+ onCoverImageChange(e.target.value)}
+ placeholder="输入 URL 或上传文件"
+ style={{ flex: 1 }}
+ />
+ }
+ onClick={() => setMediaPickerOpen(true)}
+ >
+ 媒体库
+
+ {
+ try {
+ const result = await uploadFile(file);
+ onCoverImageChange(result.url);
+ message.success('封面图上传成功');
+ } catch {
+ message.error('封面图上传失败');
+ }
+ return false;
+ }}
+ >
+ }>上传
+
+
+ {coverImage && (
+
+
+ {/* Slug */}
+
+ {
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
+
+ )}
+
+
+ onSlugChange(e.target.value)}
+ placeholder="例如: health-tips-for-elderly"
+ />
+
+
+ {/* 排序 */}
+
+
+ onSortOrderChange(Number(e.target.value))}
+ placeholder="0"
+ />
+
+ {label}
+ {templates.map((t) => (
+ handleInsert(t)}
+ style={{
+ margin: '0 12px 8px',
+ padding: 12,
+ background: cardBg,
+ borderRadius: 8,
+ border: `1px solid ${cardBorder}`,
+ cursor: 'pointer',
+ transition: 'border-color 0.15s, box-shadow 0.15s',
+ }}
+ onMouseEnter={(e) => {
+ e.currentTarget.style.borderColor = theme.primary;
+ e.currentTarget.style.boxShadow = `0 0 0 1px ${theme.primary}`;
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.borderColor = cardBorder;
+ e.currentTarget.style.boxShadow = 'none';
+ }}
+ >
+
+ ))}
+
+ );
+ };
+
+ return (
+
+ {t.name}
+
+
+ {t.preview}
+
+
+ {/* 搜索框 */}
+ `,
+ },
+ {
+ id: 'list-unordered',
+ name: '无序列表',
+ category: 'content',
+ preview: '• • •',
+ html: ``,
+ },
+ {
+ id: 'card-image-text',
+ name: '图文卡片',
+ category: 'content',
+ preview: '[图] 文字说明',
+ html: ``,
+ },
+ {
+ id: 'card-data',
+ name: '数据卡片',
+ category: 'content',
+ preview: '血压 120/80',
+ html: ``,
+ },
+];
+
+export const BLOCK_TEMPLATES: StyleTemplate[] = [
+ {
+ id: 'divider',
+ name: '分割线',
+ category: 'block',
+ preview: '─ ─ ─ ─',
+ html: ``,
+ },
+ {
+ id: 'section-header',
+ name: '章节标题',
+ category: 'block',
+ preview: '§ 带编号章节',
+ html: ` {
+ const result: Record = {};
+ str.split(';').forEach((rule) => {
+ const idx = rule.indexOf(':');
+ if (idx === -1) return;
+ const key = rule.substring(0, idx).trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+ const value = rule.substring(idx + 1).trim();
+ if (key && value) result[key] = value;
+ });
+ return result;
+}
+
+const renderElemConf = {
+ type: TYPE,
+ renderElem(elemNode: SlateElement): VNode {
+ const node = elemNode as Record;
+ const style = (node.style as string) || '';
+ const innerHtml = (node.innerHtml as string) || '';
+ return h(
+ 'div',
+ {
+ attrs: { 'data-w-e-type': TYPE, contenteditable: 'false' },
+ style: parseStyleStr(style),
+ hook: {
+ insert(vnode: VNode) {
+ if (vnode.elm) (vnode.elm as HTMLElement).innerHTML = innerHtml;
+ },
+ postpatch(_: VNode, vnode: VNode) {
+ if (vnode.elm) (vnode.elm as HTMLElement).innerHTML = innerHtml;
+ },
+ },
+ },
+ [],
+ );
+ },
+};
+
+const elemToHtmlConf = {
+ type: TYPE,
+ elemToHtml(elemNode: SlateElement): string {
+ const node = elemNode as Record;
+ const style = (node.style as string) || '';
+ const innerHtml = (node.innerHtml as string) || '';
+ return `
+ setSearchKeyword(e.target.value)}
+ allowClear
+ style={{ borderRadius: 8 }}
+ />
+
+
+ {/* 配色方案 */}
+ 配色方案
+
+ {COLOR_THEMES.map((c) => (
+
+ );
+}
diff --git a/apps/web/src/pages/health/articleEditor/articleTemplates.ts b/apps/web/src/pages/health/articleEditor/articleTemplates.ts
new file mode 100644
index 0000000..5e8cff0
--- /dev/null
+++ b/apps/web/src/pages/health/articleEditor/articleTemplates.ts
@@ -0,0 +1,156 @@
+/**
+ * 文章编辑器样式模板数据
+ * 所有 HTML 片段使用内联样式，通过 wangEditor 自定义 styled-block 模块保留样式。
+ * 模板中使用 {{primary}} / {{primaryLight}} 占位符，由 applyTheme() 替换为实际颜色值。
+ */
+
+export interface StyleTemplate {
+ id: string;
+ name: string;
+ category: 'heading' | 'content' | 'block';
+ preview: string;
+ html: string;
+}
+
+export interface ColorTheme {
+ id: string;
+ name: string;
+ primary: string;
+ primaryLight: string;
+}
+
+export const COLOR_THEMES: ColorTheme[] = [
+ { id: 'green', name: '清新绿', primary: '#16a34a', primaryLight: '#dcfce7' },
+ { id: 'blue', name: '专业蓝', primary: '#2563eb', primaryLight: '#dbeafe' },
+ { id: 'red', name: '暖橘红', primary: '#C4623A', primaryLight: '#F0DDD4' },
+ { id: 'purple', name: '雅致紫', primary: '#7c3aed', primaryLight: '#ede9fe' },
+ { id: 'amber', name: '琥珀金', primary: '#d97706', primaryLight: '#fef3c7' },
+];
+
+const W = 'data-w-e-type="styled-block"';
+
+export const HEADING_TEMPLATES: StyleTemplate[] = [
+ {
+ id: 'heading-classic',
+ name: '经典',
+ category: 'heading',
+ preview: '▎左边框标题',
+ html: ` onThemeChange(c.id)}
+ style={{
+ width: 24,
+ height: 24,
+ borderRadius: '50%',
+ background: c.primary,
+ cursor: 'pointer',
+ border:
+ selectedTheme === c.id
+ ? `2px solid ${isDark ? '#fff' : '#1d1d1f'}`
+ : '2px solid transparent',
+ transition: 'border-color 0.15s, transform 0.1s',
+ transform: selectedTheme === c.id ? 'scale(1.15)' : 'scale(1)',
+ }}
+ />
+ ))}
+
+
+ {/* 模板列表 */}
+ {renderSection('标题样式', headingFiltered)}
+ {renderSection('内容模板', contentFiltered)}
+ {renderSection('区块组件', blockFiltered)}
+
+ {/* 无结果 */}
+ {filteredTemplates.length === 0 && (
+
+ 未找到匹配的模板
+
+ )}
+ 标题文本
`,
+ },
+ {
+ id: 'heading-simple',
+ name: '简约',
+ category: 'heading',
+ preview: '下划线标题 ──',
+ html: `标题文本
`,
+ },
+ {
+ id: 'heading-rounded',
+ name: '圆标',
+ category: 'heading',
+ preview: '■ 标签式标题',
+ html: `标题文本
`,
+ },
+ {
+ id: 'heading-centered',
+ name: '居中',
+ category: 'heading',
+ preview: '居中标题',
+ html: `标题文本
`,
+ },
+];
+
+export const CONTENT_TEMPLATES: StyleTemplate[] = [
+ {
+ id: 'blockquote',
+ name: '引用框',
+ category: 'content',
+ preview: '▎引用文字...',
+ html: `引用内容请在此处编辑
`,
+ },
+ {
+ id: 'tip-warning',
+ name: '提示框 · 警告',
+ category: 'content',
+ preview: '⚠ 温馨提示',
+ html: `⚠ 温馨提示：请在此处编辑警告内容。
`,
+ },
+ {
+ id: 'tip-info',
+ name: '提示框 · 信息',
+ category: 'content',
+ preview: 'ℹ️ 补充说明',
+ html: `ℹ️ 补充说明：请在此处编辑信息内容。
`,
+ },
+ {
+ id: 'list-ordered',
+ name: '有序列表',
+ category: 'content',
+ preview: '① ② ③',
+ html: `1.第一项内容
2.第二项内容
3.第三项内容
●第一项内容
●第二项内容
●第三项内容
图片
图文卡片的文字描述内容请在此处编辑。
120/80
血压 (mmHg)
72
心率 (bpm)
1章节标题
`,
+ },
+ {
+ id: 'table',
+ name: '数据表格',
+ category: 'block',
+ preview: '⊞ 3×2 表格',
+ html: ``,
+ },
+];
+
+/** 所有模板合并列表 */
+export const ALL_TEMPLATES: StyleTemplate[] = [
+ ...HEADING_TEMPLATES,
+ ...CONTENT_TEMPLATES,
+ ...BLOCK_TEMPLATES,
+];
+
+/** 将模板 HTML 中的颜色占位符替换为主题实际颜色值 */
+export function applyTheme(html: string, theme: ColorTheme): string {
+ return html
+ .replaceAll('{{primary}}', theme.primary)
+ .replaceAll('{{primaryLight}}', theme.primaryLight);
+}
+
+/** 根据 ID 查找颜色主题 */
+export function getColorTheme(themeId: string): ColorTheme {
+ return COLOR_THEMES.find((t) => t.id === themeId) ?? COLOR_THEMES[0];
+}
diff --git a/apps/web/src/pages/health/articleEditor/index.ts b/apps/web/src/pages/health/articleEditor/index.ts
new file mode 100644
index 0000000..107cab8
--- /dev/null
+++ b/apps/web/src/pages/health/articleEditor/index.ts
@@ -0,0 +1 @@
+export { default } from './ArticleEditor';
diff --git a/apps/web/src/pages/health/articleEditor/styledBlockPlugin.ts b/apps/web/src/pages/health/articleEditor/styledBlockPlugin.ts
new file mode 100644
index 0000000..f56227b
--- /dev/null
+++ b/apps/web/src/pages/health/articleEditor/styledBlockPlugin.ts
@@ -0,0 +1,78 @@
+import { Boot } from '@wangeditor/editor';
+import type { SlateElement } from '@wangeditor/editor';
+import { h, type VNode } from 'snabbdom';
+
+const TYPE = 'styled-block';
+
+function parseStyleStr(str: string): Record${innerHtml}
`;
+ },
+};
+
+const parseElemHtmlConf = {
+ selector: `div[data-w-e-type="${TYPE}"]`,
+ parseElemHtml($elem: HTMLElement): SlateElement {
+ return {
+ type: TYPE,
+ style: $elem.getAttribute('style') || '',
+ innerHtml: $elem.innerHTML,
+ children: [{ text: '' }],
+ } as SlateElement;
+ },
+};
+
+let registered = false;
+
+export function registerStyledBlockPlugin() {
+ if (registered) return;
+ Boot.registerModule({
+ renderElems: [renderElemConf],
+ elemsToHtml: [elemToHtmlConf],
+ parseElemsHtml: [parseElemHtmlConf],
+ });
+ registered = true;
+}
+
+export { TYPE as STYLE_BLOCK_TYPE };