← 返回项目《1836 开源系统》
【DONE】项目表单 Markdown 预览 + imagePosition + 独立图片块 + webp 压缩
参与共建发布
shadow · 发布于 2026/9/27
SH
shadow2026/9/27
把「内容发布」表单的体验对齐到「发起 / 编辑项目」表单,所有「写作型」表单现在操作一致。
1. 项目描述:撰写 / 预览 tab
- 项目描述字段和 PostBody 同款切换 tab
- 默认 edit tab,写的时候就能看到最终呈现(所见即所得)
- 与 /projects/[id] 详情页描述区视觉 1:1 一致(小字、muted)
2. 项目 imagePosition + 独立图片块
- 项目现在可以上传多张「项目图片」(和封面图分开)
- 通过图片位置选择器决定图片块在描述前还是描述后
- 详情页按 imagePosition 渲染;视频 / 文档附件行为不变
- 与 post-form 的 imagePosition 同款语义
3. 客户端图片压缩支持 webp 输出
- 浏览器支持时自动输出 WebP(比 JPEG 小 25~35%、保留 alpha 通道)
- 不支持 WebP 的浏览器自动降级到 PNG / JPEG(Safari < 14 / 老 Android)
- 全站 8 处上传入口全部覆盖
技术要点
- 抽出共享 MarkdownBody(src/components/markdown-body.tsx),post-form / post-draft-form 预览 tab 和 project-form 描述预览 tab 都引用同一组件
- projects 表新增 imagePosition 列(复用 PostImagePosition enum)
- 复用 project_attachments.type='image' 作「项目图片块」,不新建表
- imagePosition 归 owner only(与封面图同性质),由 ownerOnlyFields 守门
代码:commit ddc90b5 + commit ee52840,部署到 1836.online。
登录后可以留言