活动邀请函模板编辑器

[TechQuery]

业务逻辑

1. 活动组织者在活动页面上看到编辑入口按钮，鉴权代码参考：

kaiyuanshe.github.io/models/Activity/Agenda.ts

Lines 126 to 132 in e948952

	async checkAuthorization(title: string, mobilePhone: string) {
	mobilePhone = mobilePhone.replace(/^\+86-?/, '');
	const [matched] = await this.getList({ title, 负责人手机号: mobilePhone });
	return (this.currentAuthorized = !!matched);
	}

2. 拉取某个议程的数据，以其数据对象字段名为组件名罗列可拖拽组件：

   • URL 显示为二维码
   • 其余显示为纯文本

3. 点击画布空白处上传背景图到对象存储，并在模板 JSON 中记录图片 URL

4. 点击拖拽组件后加入画布，并可在其中拖拽移动，其尺寸、位置均以画布尺寸百分比为单位记录在模板 JSON

5. 将模板 JSON 存入活动记录的 cardTemplate 字段

6. 邀请函生成页面读取模板、议程数据后渲染

参考代码

• 拖拽：https://codepen.io/tech_query/pen/bGmJaYr
• 画布：https://codepen.io/tech_query/pen/mGJzbK

[TechQuery]

现在可以用 gpt-4-vision-preview 模型从 issue 中的图片生成代码发 pull request，拖拽式编辑器就不需要做了：

• https://github.com/alexanmtz/AIPR
• https://github.com/mirrajabi/aider-github-workflows/blob/main/docs/issue-to-pr.md

界面参考：https://github.com/Yuyz0112/dewhale