完整新的需求
1、关键词搜索
markdown
使用萤石 ezuikit-js SDK，结合vue3技术，实现PC端控制视频的直播和回放，设备控制、设备查询与管理功能。
1. 默认展示第一个视频，支持切换1/4/9宫格。
2. 每个视频可单独控制播放、回放、云台（放大缩小）、截图功能。
3. 整体操作区切换布局。
4. 设备查询与管理功能
5. 设备查询与管理：需要从萤石云API获取设备列表，显示设备状态（在线/离线），并允许用户选择设备来添加到当前布局中。这部分可能需要调用萤石的设备列表接口，并处理分页和筛选。
6. 性能优化：多视频流同时播放可能影响性能，需要考虑按需加载、非活动窗口暂停播放、分辨率切换等策略。例如，使用Intersection Observer来检测视频元素是否在视口中，从而暂停或恢复播放。
7. 错误处理与用户反馈：处理视频加载失败、设备离线等情况，给出提示信息。例如，当设备离线时，显示离线状态并禁用控制按钮。
这个视频列表，默认展示一个屏幕展示第一个返回的视频。可选择4个视频在屏幕中间同时展示、也可以选择9个视频在屏幕中间同时展示。
每个视频可以单独控制放大、缩小、播放、回放等的操作区，也有一个整体的操作区，能控制1屏展示1个、4个、9个视频的控制。注意控制分屏后，视频加载的性能。避免卡顿。视频设备离线状态的给出列表说明。2、期间一直会出现一些报错和不符合需求的地方，一步一步让它修正。
期间正确的处理过程就打勾，出现不符合预期的问题都能解决。
甚至一开始提问错误，使用react生成的项目，我让它给我切成vue3也能很快速的实现。
3、使用效果
单屏
4分屏
9分屏
2、关键词：增加一个电站列表，可查看在离线设备数，离线不允许操作
3、关键词搜索
目前生成的设备列表是属于一个电站下面的，比如输入泰州电站。在设备列表上面增加一个电站名称的展示。在分屏右边增加一个全屏展示的按钮。另外在画一个电站的列表，统计出有多少和监控设备，多少个监控设备正常异常，
前置有电站列表
点击电站列表中某一个电站后，进入具体的设备监控页面
总结
AI助手 Cursor更适合新项目，老项目需要人工干预处理比较多。掌握好提示词和提问技巧是关键。
该文档仅用于学习分享。不涉及商业用途。