跳到正文
1836 · 开源社区

1836 · 开源社区

AI时代的人本基建

← 返回项目《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。

登录后可以留言