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

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

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

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

应用界面

一、编辑配置界面

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

二、地图界面

预览设计的毕业蹭饭地图

三、文本内容

SEO

• 相关文章要更新，让这个东西依赖于某个 tag 吧
• faq section 内容也要支持 markdown
• 毕业蹭饭图高级感配色 发一条图文

应用功能

一、元数据配置功能

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. 支持仅展示学校 或 姓名