第四轮 · 内容创作组件
文章/视频创作工具链。编辑器、上传、内容渲染、标签管理、分栏布局。
本轮 5 个：① Editor（富文本编辑器）② MediaUploader（媒体上传）③ MarkdownRenderer（内容渲染）④ TagInput（标签输入）⑤ SplitPane（可拖拽分栏）
1Editor · 富文本编辑器
基于 TipTap（ProseMirror）。工具栏：加粗/斜体/标题/列表/链接/代码/引用。支持图片插入、Markdown 快捷输入。文章/脚本/描述编辑。
props: { value; onChange; toolbar?: string[]; maxLength?; placeholder?; onImageUpload? } | 基于 TipTap，可扩展自定义节点
2MediaUploader · 媒体上传
拖拽/点击上传，视频+图片+音频。进度条、预览缩略图、类型角标、删除。替换 ops-console 自造 VideoPlayer 上传逻辑。
'/%3E%3C/svg%3E)
MP4intro.mp4
MOV
b-roll.mov · 65%
'/%3E%3C/svg%3E)
JPGcover.jpg
props: { accept?: string; multiple?; maxCount?; maxSize?; value: MediaFile[]; onChange; onUpload } | 受控组件，上传逻辑由业务层注入
3MarkdownRenderer · 内容渲染
Markdown 渲染为格式化 HTML。支持标题/引用/列表/代码块/表格/链接/图片。用于知识库、审核规则、内容预览。
品牌内容规范
所有视频号内容须遵循以下原则：
真实优先。不夸大效果，不虚假对比。
核心要求
- 开场 3 秒须有明确钩子
- 产品展示须标明
price_tag - 结尾须有行动号召
详见 完整规范文档。
hook: "3s",
cta: "required"
};```
props: { content: string; className? } | 基于 remark/rehype，支持 GFM（表格/任务列表/删除线）
4TagInput · 标签输入
输入即生成标签，回车确认，可删除，支持建议（autocomplete）。内容分类、关键词、场景标签。
内容标签
家居好物推荐视频号
props: { value: string[]; onChange; suggestions?: string[]; placeholder?; maxTags?; allowCustom? }
5SplitPane · 可拖拽分栏
可拖拽调整左右栏宽度。编辑器/预览、文件树/编辑区、列表/详情双栏布局。
脚本列表
视频号 - 家居好物
小红书 - 美妆
抖音 - 美食
B站 - 数码
预览
视频号 - 家居好物
本期推荐 3 款北欧风家居单品，每款 15 秒展示，聚焦实用性与设计感。开场用"你的家还差这一件"作钩子。
时长 60 秒，节奏明快，配轻快 BGM。
props: { left; right; defaultSize?; minSize?; maxSize?; direction?: 'horizontal'|'vertical'; onResize? }