花野猫的班级毕业蹭饭地图制作工具概要设计

项目地址： https://uni.utities.online/map-creator

1. 这是一款能帮助你无痛制作默认好看的蹭饭图的web工具。
2. 使用传统的方法制作一张毕业蹭饭图，往往费时费力，而且效果不好，这个工具让你不必再从0开始，花一整天，甚至更多的时间就能制作完成。
3. 用此工具制作一张毕业蹭饭图要多久？只需要提前收集好数据，完全可以在5分钟制作出来。

关键词：手机一键生成蹭饭地图 、 设计器

应用界面

一、编辑配置界面

分为三个 Tab ，元数据、数据、样式。

二、地图界面

预览设计的毕业蹭饭地图

三、文本内容

SEO

应用功能

一、元数据配置功能

1. 支持配置标题、副标题、母校图标、任课教师、上传校徽等。
2. 文本均支持单独配置字体、字号。标题默认使用龙仓手写体 https://gstatic.aby.pub/css2?family=Long+Cang:wght@500&display=swap
3. 任课教师支持配置水平内边距（两端均匀分布）
4. 上传的校徽有文件大小限制（不超过 500KB）
5. 以上元数据均支持禁用，让其在地图中不显示

二、录入去向数据功能

用户输入姓名、查找学校、选择省份。

细节：

1. 选定学校后，自动选择省份。
2. 添加新记录时，默认选中的学校要延续上一个才行，用户实际输入时，应该会连续输入相同学校的，这样就可以避免录入相同学校时重复去选择。
3. 省份支持选择其他，并手动填入名称，以此来支持海外的去向。
4. 数据支持调整顺序

支持录入标题

三、数据导出、导入功能

录入的数据支持导出为 excel 文件，同时支持从 excel 文件导入数据。

四、地图渲染功能

1. 主要元素有：标题、副标题、地图、引线、录取信息框
2. 自动生成的布局应只是默认，因为必然不足够完美，应支持让用户再去拖拽卡片，但线条要自动排。
3. 录入以及导入数据时，要能自动平衡左右，否则，当左侧或右侧卡片的累计高度很高时，卡片将溢出到整个容器之外，导致卡片无法拖动。现在手动调整左右分布分界这个参数，可以解决这个问题，但很多人不知道。所以要自动平衡左右，当然这个参数仍然保留，并默认为自动平衡后的结果。
4. 水印添加在标题下方
5. 当姓名为 2 个字时，在两个字之间插入一个全角空格，使其视觉宽度与 3 字姓名对齐。注意如果输入的是英文的话，这个空格似乎会使得2个 letter 比起 3 个 letter 超宽，
6. 录取信息框卡片支持配置无边框。
7. 区分已授权和未授权状态，授权页面编辑预览、导出时都不显示水印

五、地图编辑功能

1. 支持缩放查看，打开时默认应该缩放到画布范围全部可见
2. 支持拖拽调整各个录取信息框的位置、宽度等。
3. 各个元素，包括标题、卡片等，可手动拖拽移动位置。
4. 支持在省份的录取信息框中直接编辑，添加学生

六、应用主题功能

1. 数据可视化主题：梯度颜色填充，人数越多，颜色越深。
2. 极简纯色风格
3. 卡通风格。

七、自定义样式功能

1. 支持调整布局风格

2. 支持调整省份配色。可以从预设的配色方案中选择。或是自定义配色，甚至还支持上传图片提取配色。如过有你觉得配色非常好看的图片。

3. 可根据背景提取颜色，然后渲染

4. 支持调整字体配置

5. 上传背景图片（不超过 2M）。 上传背景后，如果当前已经有上传的背景图，要能允许展示和下载现有的背景图片

6. 支持仅展示学校 或 姓名

7. 地图边缘颜色、列表字体颜色、任课教师文本框为文字颜色等。默认派生自主题颜色。

八、各省录取人数可视化功能

九、导出高清图片功能

• 移动端要先预览，再导出。生成图片之后，先放到个弹出层，能支持预览整张图片，还可以使用 lightbox 打开缩放。弹出层有导出按钮可点击导出
• 开发授权码功能，付费获取授权码

todo

十、保存配置和导入配置功能

保存的配置文件，文件名同时体现标题和时间戳

todo

• 制作器页面，功能区下面还要有 FAQ 和相关文章。相关文章：

  • 花野猫的毕业蹭饭图制作工具使用教程 、
  • 什么是班级毕业蹭饭地图、如何制作毕业蹭饭地图 、
  • 毕业蹭饭图制作工具支持录取信息框自动平衡左右分布了 。还要内链到博客页面，告诉用户可以在博客页面关注本项目的最新动态。

• 现在页面太杂乱了。

• 数据录入要增加视图了，例如按省份分组，以方便填写。

• 建一个 QQ 群

• 博客 tag 筛选没有用。

• 调整博客内容，增加内链。

• 用户录入的数据需要存储到本地，需要验证下，标题、配置、位置等，是否都存了。

• 优化页面整体布局和交互：移动端的配置 tab 放在抽屉中吧，优化一下布局。否则太难用了

• 排查修复导出转很久都无响应的问题，添加进度提示？

• 写个博客说明一下如何录入海外的去向。

• 移动端即使可以滚动，地图显示不全

• 相关文章要更新，让这个东西依赖于某个 tag 吧

• faq section 内容也要支持 markdown

• 移动端初始应该能看全貌，而不是这样显示不完靠滚动，然后支持手指缩放。注意容器内手指缩放不要触发整个页面的缩放

• 引线也好，地图区块之间的分界线也好。所有的线条都太细了。省份标题要大一点，线条也太淡默认不要用白色主题了。

• 手绘风字体。

• 卡片中省份和第一条内容之间的间距太小了

• 主页不要去加载数据了。

• 导出时，导出的相关进度放到对话框里显示，并提示一些事项：1. 若加载失败，请再次点击导出按钮重试。或尝试刷新页面后再导出。或者更换浏览器。更换浏览器后数据可以通过数据面板中导出按钮，导出 excel ，再导入的方式进行迁移。首次导出成功后，得到的图片可能出现字体不一致问题，再次导出2~3次即可得到正常的图片。

• banner 商务合作，定制软件，联系作者花野猫。遇到问题、功能讨论， qq 群 字体小一点

• 移动端支持删除条目。

• 视频放在页面上。

• 重置位置等按钮，提出来放在地图右边、下边

• 毕业蹭饭图高级感配色 发一条图文

• 重置样式应当只涉及样式，不涉及位置。重置样式的按钮，在重置位置旁边也应该放一个

• 配置要不要再加一列布局。

• 支持添加文本框，作为高级功能。

• 现在教师的框框不太好看

• 默认配色还需要继续优化

• 画布（灰色虚线框）之外不应渲染背景颜色、背景图片

• 要能够单独导入样式和导出样式，导入样式配置文件后缀要有所不同，比如 .style.json 吧

• 写一下进群公告

• 招募案例作品

• 省份卡片内的标题文字颜色，及引线的颜色，不能完全按照省份块的颜色，而是要考虑在背景下的对比效果。要有一个算法来处理，使其能很好地现实。例如省份色块是浅棕色，而背景是棕色，但不是很深，那么浅浅对比起来就会使得文字基本不可见，这就不是好的设计，总之这个要能有一个算法使之能够自适应。野兽风格文字也不要全黑，也要计算。有的卡片颜色很深的，那文字应该反过来用浅色。

• 导入数据还要有另外的示例数据。姓名全是拼音的。先给个 markdown 表格，我会复制到 excel 文件。

• 操作说明搬到 b 站

• uni 默认字体大小、教师字体要改。重置位置与默认值不一致

• 卡片标题字很大的时候，会有问题

• 移动端现在缩放不到小到能预览整个画布。不要写死，而要是动态的。

沟通话术

• 您好，蹭饭图需要导出无水印高清图的话，参考这个操作下，然后支付5元（5元可导出三次）。如果不需要，请互删谢谢

FAQ

• 导出高清图的按钮不灵怎办？等待、重试，或者直接截图。
• 如何全屏？F11
• 可以用来做其他图吗？不光是高中毕业去向图，还有本科毕业去向、同学来源分布图、机构人员分布图等，其实都可以使用这个工具来制作。
• 想要只显示姓名，怎么办。样式里最底下可以配置。

使用方法

1. 汇总去向信息：收集汇总班级内的录取去向信息，包括姓名、录取院校及所在省份等。
2. 配置标题：在左侧配置栏的“标题设置”中，修改地图主标题，例如输入“师大附中2026届5班毕业去向分布图”，使图表更具辨识度。
3. 逐条录入或批量导入数据：进入左侧配置栏的“数据面板”，清空预置示例数据后，即可开始操作：
   • 逐条录入：点击【添加条目】按钮，逐条填写同学姓名、录取院校与省份信息；
   • 批量导入：下载指定格式的 Excel 模板，按模板填写数据后一键上传，快速完成批量录入。
4. 灵活调整信息布局：根据需要，地图生成后，您可以直接用鼠标拖拽任意录取信息框，自由调整其位置；同时也可根据内容长短，手动调整信息框宽度，确保展示效果整洁美观。
5. 自定义风格样式与配色：数据录入完成后，在左侧配置栏中的样式面板，可调整布局风格、配色方案、字体样式、其他布局参数等。
6. 导出图片：制作完成后，点击右上角的【导出高清图】按钮，即可下载高清版分布图；您也可以直接截图保存。

用户 配置标题、录入学生数据后，可通过配置布局风格、选择预设配色或自定义颜色、调整卡片宽度和间距等布局参数来自定义样式，实时渲染，并一键渲染导出个性化的高考毕业去向分布图