会议概览：
本次会议围绕一个问卷统计项目，详细梳理了其移动端和PC端的UI设计、功能实现、技术选型及性能优化方案。
小结
- 项目背景与技术栈
项目基于开源代码二次开发，旨在为YH企业提供专业的数据收集解决方案。
采用拖拽式设计和富文本编辑器，支持问卷的快速创建与生动编辑。
PC端与移动端采用不同的技术栈：PC端使用Vue2和Element UI，移动端使用Vue2和Vant。
- 移动端（APP端）功能与实现
首页与数据展示: 移动端首页未采用 ECharts 大屏展示，仅展示问卷列表；统计列表页则使用ECharts 图表展示数据，并支持图表切换与下载。
问卷创建: 支持拖拽式创建，可通过表格选择题型并进行排序调整。
答题体验: 基本与PC端保持一致，包括背景图展示、精准跳转、防抖提交等。针对iOS的键盘弹起问题，通过兼容性方案解决。
网络与数据: 提供自动保存、加载中提示及超时重试机制；支持导出统计数据为Excel格式。
权限与安全: 实现了按钮级别的权限控制；数据安全方面，后端有防篡改机制（如签名验证），前端使用HTTPS传输。
- PC端功能与实现
问卷创建: 支持拖拽式创建，题型丰富，可通过富文本编辑器设置题目和选项内容。
答题体验: 提供纵向进度条、多列布局等优化；支持快捷键（如Ctrl+C/V）和键盘导航。
共享与协作: 支持问卷共享，但不支持单个题目的共享，仅支持整个问卷的发布与编辑。
权限与路由: 实现了动态路由权限控制，根据用户身份获取权限列表来配置可访问的页面。
- 跨端差异与复用
UI差异: 由于技术栈不同，PC端使用Element UI，移动端使用Vant，导致部分UI组件（如单选题）的实现方式和样式略有差异。
功能差异: 移动端暂未处理横屏模式下的展示；PC端支持打印预览，移动端暂无；PC端支持多问卷合并统计和答题路径分析，移动端暂无。
待办
- 移动端横屏模式适配
针对移动端横屏模式下问卷无法正常展示的问题，需要进行适配处理
H5 移动端项目梳理：
1、简单介绍一下项目
该项目是基于 开源问卷系统二次开发的YH内部员工数据收集平台，主要用于疫情期间每日员工健康及工作情况统计。
平台面向YH企业内部员工，提供专业问卷调研服务，支持每日定时发布各类调查问卷。核心亮点为 可视化 拖拽式 问卷设计，无需代码即可快速创建问卷；同时集成 富文本编辑器，满足多样化内容编辑需求。
后期在开源基础上优化了页面背景展示，提升用户体验；新增 发布范围权限控制，可按普通员工、管理员等不同身份区分问卷发布对象，实现精细化管理。
2、你负责的首页数据化大屏展示在移动端是怎么去设计与适用小屏的？
首页数据大屏这块，我主要负责的是 PC 端基于 ECharts 实现的数据可视化展示。页面布局是左上、右上、左下、右下四个区块：
- 左上角：问卷总数量统计
- 右上角：已答 / 未答环形占比图
- 左下角：已发布问卷数量
- 右下角：问卷填写部门排行榜
中间区域是问卷事项列表，可以查看 未答、已答问卷。
考虑到 移动端屏幕尺寸小、加载性能和操作体验 ，移动端首页没有直接照搬 PC 端的 ECharts 大屏，而是做了 适配简化处理 ：只保留中间核心的 问卷列表区域，方便用户快速查看、填写问卷，保证操作流畅。
而在专门的 统计分析页面，移动端是完整使用了 ECharts 图表的，用户可以在手机上查看详细的统计数据和可视化结果。这样既保证了 PC 端的展示效果，又兼顾了移动端的实用性和加载性能。
3、统计列表页面在移动端需要展示哪些关键信息？
移动端的统计列表页面，主要展示问卷的 关键统计信息：
首先会展示问题标题和题型，比如单选题会清晰列出问题内容，以及每个选项被选择的人数和占已回答人数的百分比。
下方通过 ECharts 实现了 三种图表可视化展示 ，分别是折线图、柱状图和饼图，用户可以通过 Tab 自由切换查看不同维度的数据趋势。同时还做了 图表下载功能，用户可以把自己需要的图表（比如饼图）直接下载保存，方便后续汇报和整理。
4、移动端的答题页面和 PC 端的有什么差异化吗？
移动端答题页面和 PC 端整体保持了 交互与展示一致，功能基本同步。
比如后台发布问卷时设置的背景图，PC 端答题页会展示，移动端后来也做了适配，同样支持显示背景图，提升视觉体验和用户感官。
另外，PC 端答题时点击提交，会自动滚动到未答题目位置，并提示还有多少道必填题未作答。移动端一开始因为 iOS 和安卓滚动兼容性问题，
scrollTo在 iOS 上表现不一致，后来针对性做了兼容性处理，最终也实现了和 PC 端一样的 精准滚动跳转未答题目的效果。除此之外，其他答题交互、题型展示、校验逻辑等两端基本保持一致。
5、拖拽式问卷创建在移动端的话支持吗？
移动端 同样支持拖拽式问卷创建，不过考虑到手机屏幕操作特性，做了更适合触控的交互设计：
点击创建问卷按钮后，会弹出题型选择面板，分为 基础题型、常用题型、分段组件几类，选中后即可直接生成题目并进入编辑页。
题目创建较多时，支持在页面内 上下拖动排序 ，同时也提供 上移、下移 按钮，方便用户精准调整题目顺序，整体操作逻辑和 PC 端保持一致，适配移动端触控体验。
6、移动端统计大屏中，ECharts图表如何适配小屏触摸交互？
答案： 图表简化数据点，开启 tooltip 触摸响应，支持手势缩放（如果必要）。使用响应式配置，根据屏幕宽度调整字体、图例位置。对于复杂图表，可提供 "查看大图" 模式，跳转到独立页面。
移动端的 ECharts 统计图表，我们主要做了 小屏适配 和 触摸交互优化，核心是基于 ECharts 自身的 响应式 能力来实现的：
开启移动端触摸交互 主要配置了 tooltip 触摸响应，用户在手机上点击图表区域，就能正常弹出数据提示框，替代 PC 端的鼠标悬浮效果。
响应式适配小屏 使用 ECharts 的响应式配置，根据屏幕宽度自动调整 图例位置、字体大小、坐标轴间距，保证在手机上显示清晰、不挤压、不重叠。
支持触摸手势操作 针对手机触屏特性，开启了 双指缩放、单指滑动查看的交互，方便用户在小屏上查看更详细的数据细节。
简化展示，保证体验移动端不会照搬 PC 端复杂的图表样式，适当简化数据点、隐藏多余装饰元素，确保加载流畅、触控灵敏。
整体就是基于 ECharts 原生配置，完成了 触摸提示、响应式布局、手势缩放这几项关键适配，让图表在手机上可用、好用。
超简短版
移动端 ECharts 图表主要做了触摸交互 和小屏适配 ：开启了 tooltip 触摸提示 ，支持手机点击查看数据；用响应式配置 自动调整图表大小、字体和图例；同时支持双指缩放、滑动查看，保证在小屏上展示清晰、触控流畅。
7、你是怎么去处理移动端不同操作系统键盘弹起导致页面布局错误的？
在处理移动端不同操作系统、键盘弹起导致页面布局错乱的问题时，主要遇到的是 iOS 系统的兼容性问题，安卓端是完全正常的。
问题表现：点击输入框唤起键盘后，页面里的搜索框、fixed 定位元素会整体 下移、偏移 ；键盘收回后，下方列表也会 错位、留白，无法自动恢复。
排查过程：一开始通过资料查询，发现是 iOS 对 CSS fixed 定位兼容性较差 导致的。但当时项目已经开发大半，全部重构定位成本太高，所以只能找兼容方案。期间也考虑过监听键盘事件手动调整高度，甚至想过跳转到独立搜索页，但要么效果不好，要么影响用户体验。
最终解决方案：咨询了其他有经验的项目组，采用了 系统判断 + 针对性 CSS 兼容处理的方案：
- 先通过 JS 判断当前设备是否为 iOS 设备；
- 针对 iOS 环境，单独添加 兼容样式，修复键盘弹起 / 收起时 fixed 定位失效、页面错位的问题；
- 保证在 iOS 和安卓两端，键盘操作后页面布局都能正常显示。
最终成功解决了 iOS 键盘导致的页面错位问题，且没有大规模重构原有代码。
超简短版（20 秒）
主要解决 iOS 键盘弹起导致页面 fixed 定位错乱 的问题。安卓正常，iOS 会出现输入框偏移、页面留白。因为项目后期不便重构布局，最终通过 判断 iOS 系统 + 单独 CSS 兼容样式，成功修复了布局错位问题。
https://blog.csdn.net/weixin_58099903/article/details/132282446?fromshare=blogdetail&sharetype=blogdetail&sharerId=132282446&sharerefer=PC&sharesource=weixin_58099903&sharefrom=from_link
8、
9、
10、
11、
12、
13、
14、
15、
16、
17、
18、
19、
20、
21、
22、
23、