智慧大屏产品系统Vibe Coding

1.本项目的立项源于知识产权服务行业长期存在的多重管理痛点。当前专利代理机构的业务数据分散于案件管理、财务、流程跟踪等多个独立系统，管理层无法实时掌握建案量、外发量、上报量等核心经营指标，传统人工汇总报表滞后且易错；代理人日常检索专利法条、典型案例等专业知识效率低下，政策法规更新频繁难以及时跟进；待办案件依赖人工提醒，期限超期风险高，直接影响服务质量。为此，团队打造集数据可视化大屏、AI智能问答、语音唤醒交互、任务自动提醒于一体的综合平台，帮助机构实现运营数据实时可视、专业知识即时获取、工作任务智能管理，从而提升整体运营效率和专业服务能力。
2.行业场景上，本项目聚焦于知识产权服务领域，面向全国数万家专利代理机构及知识产权法律团队。随着中国专利申请量全球领先、行业竞争加剧，代理机构迫切需要数字化工具提升内部管理效率和对外服务形象，国家“放管服”改革也使得政策法规频繁更新，进一步放大了对智能化工具的需求。具体业务场景覆盖四大维度：管理决策上，管理层通过大屏实时监控建案总量、外发量、上报量等经营指标及同比变化，查看热门技术领域分布，辅助资源配置；代理人工作上，系统自动汇总当日待办案件并按优先级（高/中/低）视觉区分，帮助快速聚焦紧急任务、规避超期风险；品牌展示上，前台通过轮播典型案例、资讯视频，直观呈现机构专业实力；智能交互上，用户通过“你好小智”唤醒语音对话，用自然语言询问专利法规等问题，AI实时流式回复，显著降低知识获取门槛。

1.实时数据统计大屏：集中展示建案总量及发明专利、实用新型、外观设计三类细分数据，同时呈现外发初稿量和上报量的月度趋势，每5秒自动刷新，同比变化以红绿箭头直观标识，辅助管理层快速掌握经营全貌。

2.AI 智能问答（小智知识团组）：支持文字输入与语音提问两种方式，AI 助手以流式打字逐字回复专利法条解读、审查流程指导、侵权判定分析等专业问题，并实时显示在线人数。

3.语音唤醒与 ASR 识别：持续监听麦克风，用户说出“你好小智”即可唤醒，语音问题实时转文字并自动提交 AI 问答，全程免键盘操作，配合 TTS 语音反馈，提升展厅接待场景的科技感与便利性。

4.视频与资讯轮播：自动循环播放宣传视频和知识产权新闻，视频结束后切换至新闻列表展示60秒再继续播放下一视频，充分利用大屏空间进行品牌形象展示与信息传递。

5.政策法规速递：实时更新最新知识产权政策法规，每条含发布机构、文号及摘要信息，为代理人提供便捷的政策查阅参考。

6.当日待办案件：以时间徽章显示截止时刻，按高（红）、中（橙）、低（蓝）优先级着色区分紧急程度，已完成案件自动灰化并打勾标记，帮助代理人快速聚焦紧急任务、规避超期风险。

7.热门技术领域分析：按 IPC 主分类展示各技术领域专利数量的横向柱状图，直观反映不同技术方向的热度分布，为业务方向调整提供数据参考。

8.典型案例展示：展示侵权、维权等经典专利案件，含案件类型、当事人、法院、判决结果及案情摘要，为代理人提供专业参考，也为客户来访提供专业实力佐证。

本项目采用 前后端分离架构，前端基于 Vue 3 框架开发，使用 ECharts 实现数据可视化图表、WebSocket 处理 AI 流式对话与语音交互，并通过 CSS transform 缩放 实现大屏自适应；后端采用 Python（FastAPI/Flask） 与 Java（Spring Boot） 双语言混合架构，其中 Python 负责 AI 智能问答及语音识别（ASR）服务的对接与逻辑处理，Java 负责业务数据聚合、定时任务及 RESTful API 接口。我在本项目中独立负责全部前端开发工作，包括整体 UI 设计与布局、八大功能模块的组件化实现、ECharts 图表渲染与数据联动、WebSocket 连接管理及流式消息打字机效果、唤醒词与 ASR 语音识别的接入及交互逻辑、大屏自适应缩放方案，以及与后端接口的联调对接。技术难点与亮点在于：实现 AI 流式回复的逐字打字效果的同时，处理好 mock 数据与真实对话的切换、WebSocket 断线重连及心跳保活机制、语音唤醒与 TTS 播报期间避免麦克风回采污染的音频流控制、以及待办模块中优先级着色与完成状态标记的复杂条件渲染逻辑；此外，通过 Vue 3 的 shallowRef 巧妙解决了流式消息中代理对象与原对象引用不一致导致的打字中断问题，提升了系统的交互流畅度和稳定性。