图片上传与处理
P1拖拽/粘贴/选择上传，自动压缩、生成多尺寸缩略图、EXIF 信息清除、水印可选。
实现要点：前端压缩后直传对象存储，服务端生成 avatar/thumb/medium/large 多档尺寸；EXIF 必须清除（含 GPS 位置）以保护隐私。
!See translation tasks
This page is not translated yet
The interface, navigation and community content are bilingual. The long-form body of this page is still in Chinese. The translation work is tracked as task I18N-10.
Module 11 · V1.1 · Media & Creation
富媒体与创作工具
降低表达门槛，提升内容表现力
P2V1.1提升上限与差异化，可延后交付
模块目标
要达成什么
提供图片、视频、代码、表格、引用、投票等多形态的内容表达能力，配合 AI 辅助，降低创作成本。
为什么必须存在
表达力决定内容上限。技术社区需要代码块，生活社区需要图片与视频，缺一不可。
功能清单
共 8 个功能点，每个功能点给出实现要点，可直接作为开发任务的描述。
视频与音频
P2视频转码为 HLS 自适应码率，生成封面图；支持短视频与音频附件。
实现要点：上传后进入异步转码队列，转码完成前帖子显示「处理中」；支持进度回传。
代码块增强
P2语法高亮、行号、复制按钮、可选运行（前端沙箱）。
实现要点：技术社区的核心体验，代码渲染质量直接影响口碑。语言自动检测 + 手动指定双支持。
图片画廊与灯箱
P2多图以网格布局，点击进入灯箱支持左右切换、缩放、键盘导航。
实现要点：灯箱使用原生 dialog 提升可访问性；图片懒加载 + 渐进式模糊占位。
内容模板
P2社区可配置发帖模板，如「问题描述 / 复现步骤 / 期望结果 / 实际结果」。
实现要点：选择模板后编辑器预填骨架与提示文本，显著提升求助类内容的信息完整度。
AI 辅助创作
P2标题建议、摘要生成、语法润色、标签推荐、内容查重、评论自动摘要。
实现要点：全部为「建议」而非「自动替换」，用户始终保有最终控制权。AI 生成内容需在站点规则中明确标识要求。
草稿箱与跨端同步
P2草稿多端同步，支持从本地文件导入 Markdown 与从剪贴板智能解析。
实现要点：草稿以 revision 方式存储，冲突时提示用户选择保留哪一版。
无障碍与可访问性
P2全站键盘可操作、图片 alt 强制引导填写、色彩对比度校验、屏幕阅读器友好。
实现要点：上传图片时提示填写 alt；关键操作均有键盘快捷键；对比度不足时在主题配置界面直接警告。
交互设计
2 条关键交互的分步流程，按用户体验顺序描述，可直接作为前端开发与可用性测试脚本。
1
上传图片
- 1
在编辑器中粘贴或拖拽图片，立即出现占位块与上传进度圈。
- 2
可点击占位块填写说明文字（alt）与调整尺寸（原始/中/大）。
- 3
上传完成后占位块替换为真实图片，未上传完成的图片不允许发布。
2
代码块编辑
- 1
输入 ``` 触发代码块，弹出语言选择。
- 2
编辑时保持等宽字体与缩进保持；粘贴多行代码自动识别语言。
- 3
渲染后提供复制按钮，点击显示「已复制」反馈。
业务规则
5 条硬性约束。这些规则应当在服务层强校验，而非仅在前端提示。
R01
单张图片上限 20MB，单个视频上限 500MB，单帖媒体数量上限 20。
R02
图片必须清除 EXIF；上传即视为授权平台在站内展示。
R03
视频仅支持白名单格式（mp4/mov/webm），其他格式提示转换。
R04
AI 生成的辅助内容需遵守站点内容政策，用户对最终发布内容负全部责任。
R05
存储配额按信任等级分配（TL1: 100MB，TL3: 1GB，TL4: 10GB）。
涉及数据表
本模块涉及的 5 张表。完整字段、索引与说明见「数据表设计」页。
竞品参考
本模块的设计参照了哪些产品，具体参照了什么。
掘金
掘金
编辑器体验是国内的标杆，代码运行与目录导航值得学习。
DI
Discourse
拖拽上传 + 实时预览，交互顺畅。
REReddit
图片画廊与灯箱的移动端体验经过大规模验证。
V2
V2EX
代码块渲染质量高，是技术社区的基本功。
验收指标
本模块交付时应当达到的量化目标。未达标即视为该模块未完成。
媒体上传成功率≥ 99%
图片首屏加载≤ 800ms（缩略图）
带媒体内容互动率高于纯文本 ≥ 40%
转码任务成功率≥ 98%
避坑清单
竞品踩过的坑，以及本模块在实现时最容易犯的错误。
不清除 EXIF 会泄露用户拍摄位置，是严重的隐私事故。
图片若不做多尺寸，移动端会加载原始大图，流量与速度双输。
视频转码若同步执行，接口必然超时。
存储若不设配额，会被滥用为免费图床。