一款 Notion Like 的轻量 Markdown 笔记应用，为微信公众号写作而生：左侧管理笔记，中间写 Markdown，右侧实时预览公众号排版，写完一键复制成带内联样式的富文本，粘到公众号后台即可发布。
单文件、零依赖、无需构建、不加载任何 CDN，双击 index.html 就能用。
在线体验：https://neonity2020.github.io/wxnote/ 参赛作品页：https://workbuddy.link/p/1pHvbCsrR9uZ7UvQee6DAX
在公众号后台写字有三个老问题：排版靠手调、Markdown 无处安放、截图要手动上传再插链接。wxnote 把这条链路压成三步——写 Markdown → 右边看效果 → 一键粘过去，并且刻意把视觉做成微信自己的样子（绿 #07C160、正文蓝 #576B95、677px 阅读宽度），让预览和最终发布的样子尽量一致。
| 能力 | 说明 |
|---|---|
| 笔记管理 | 左侧列表按更新时间排序，新建 / 切换 / 删除，内容自动保存到本地，刷新不丢 |
| Markdown 写作 | 标题、加粗、斜体、删除线、行内代码、引用、有序/无序列表、代码块、表格、分割线、链接、图片；工具栏 + Tab 缩进 |
| 公众号排版预览 | 677px 正文宽、绿色标题竖条、引用块、深色代码块，按公众号阅读习惯渲染 |
| 一键发布 | 转成内联样式富文本复制到剪贴板，公众号后台 ⌘/Ctrl+V 直接粘，另有「复制 HTML」备用 |
| 图床贴图 | 粘贴截图 / 拖拽 / 选文件三种方式；自动压缩（长边 1600、WebP）后上传图床，失败自动降级本地内嵌 |
| 多图床可切换 | 蜜蜂图床（国内默认）、本地压缩内嵌、自定义接口、HD-R（走代理）、Telegraph |
| 编辑器不炸 | 本地内嵌图片在编辑器里显示为 editor-local://localN 短占位，不糊一屏 base64 |
| 响应式 | PC 三栏、平板收起列表、手机切换「编辑 / 预览」单栏 |
git clone https://github.com/Neonity2020/wxnote.git
cd wxnote
open index.html # macOS；Windows 直接双击，或 python3 -m http.server 8000不需要 npm install，没有构建步骤。
- 左边新建一篇笔记，写 Markdown
- 需要配图时直接 ⌘/Ctrl+V 粘贴截图，自动压缩并上传
- 右边预览确认排版
- 点右上角 发布到公众号 → 到公众号后台正文区粘贴 → 检查图片 → 群发
微信公众号没有开放的个人发布接口，「一键发布」采用的是复制富文本、后台粘贴这条路。如果你有公众号开发者凭证，可以自己接草稿箱 API。
默认使用蜜蜂图床，国内直连、接口已开放跨域、免注册即可上传：
- 游客模式：图片仅保存 1 小时、每 IP 每分钟限 1 张（适合试用）
- 注册后在「API令牌」生成 Token 填入，图片永久保存、无频率限制
点右上角「图床」可切换其他方案。各家接口的实测结论、请求参数、跨域情况见 docs/image-hosting.md。
wxnote/
├── index.html # 全部应用（HTML + CSS + JS，单文件）
├── wxnote-react/ # 同一应用的 Vite + React 工程版
├── docs/
│ ├── architecture.md # 架构与实现细节
│ ├── image-hosting.md # 图床接口实测与接入说明
│ ├── wechat-publish.md # 公众号发布的原理与限制
│ ├── design-system.md # 视觉规范（颜色/字号/间距/断点）
│ └── changelog.md # 版本记录
├── LICENSE
└── README.md
index.html 内部按顺序分区：样式 → 骨架 → 状态与存储 → Markdown 解析 → 公众号渲染 → 富文本复制 → 图片管线 → 图床设置 → 交互绑定。
wxnote-react/ 是把同一套功能拆成 Vite + React 的工程实现，组件、hooks、纯函数模块分层，带 10 组单测：
cd wxnote-react
npm install
npm run dev # 本地开发
npm run build # 产物在 dist/
npm test # 纯逻辑单测功能与单文件版一一对等（笔记管理、Markdown、公众号预览、一键发布、图床贴图、base64 折叠、响应式），详见 wxnote-react/README.md。
- 数据存在浏览器
localStorage，换设备/清缓存不保留（可导出 HTML 存档） - 公众号后台会剥离
class，所以复制走的是内联样式，版本迭代时样式需两边同步维护 - 本地内嵌图片随笔记存在浏览器里，体积大时可能触发存储配额告警；正式发文建议用图床
- 蜜蜂图床游客图的 1 小时有效期是服务端策略，非本项目可控