AI热点检索工具项目话术AI开发相关部分什么是Vibe Coding?用自然语言和AI聊天让AI帮你生成代码修改和优化代码双方协作迭代优化项目感受让在实战中学习变得更加便捷你可以在AI Coding下快速实现一个小demo,并且在阅读和修改中不断加深对某个方法的使用尤其是实现方案的先进性避免你学到一些过时的技术你还可以实现功能之后不断追问是否有更好的实现方法怎么做做个demo看一下不断强化自己的业务能力。存在问题界面效果同质化严重代码不可控避免让AI生成或者修改大模块代码生成代码后要进行测试颗粒度上传仓库有问题及时回滚基础知识只会更加重要我其实在学习的时候会选择让AI生成代码但不要直接插入而是我理解学习后再手打进去除了遇到bug很难受的情况我觉得手打对我理解是有效果的。什么是AI代码编辑器传统代码编辑器内置AI助手欧可以帮你生成代码解释代码修改代码甚至自动执行多文件任务使用AI代码编辑器也是一个很好的学习机会AI生成的代码可能使用了一些你不熟悉的技术和库我们可以学着去理解并提出疑问。Vibe Coding使用技巧规划优先级最高做好项目的规划可以先跟AI讨论一下整理一份需求文档并且进行人工确认好执行你需要先理清几个问题应用的核心功能用户如何受用功能的优先级特殊要求MVP思维MVP最小可行产品先做一个最简单但能用的版本然后慢慢完善也就是敏捷性开发可以和AI对话时说一下我们先做一个MVP版本只包含最核心的功能其他功能以后再加然后列出2-3个最重要的功能先专注把核心功能做好。完成比完美更重要多次迭代优化颗粒化实现不要害怕回滚返工其实也是你和AI在探索和学习的过程。比如说我在实现AI对话聊天的时候我是先实现正常的对话界面最后再来实现虚拟滚动结果bug出现了当你上滑的时候它居然会跟着流式输出缓慢向下滚动当时折腾了好久都无法解决也尝试了很多种实现虚拟滚动的方案居然也没用最后直接选择代码回滚并让AI先选择一种比较简单实现的方式实现虚拟滚动之后在再把之前已经实现的优化再重新实现这下子才解决了这个bug。提供好的上下文使用项目文档说明技术栈参考已有代码描述设计风格有些AI工具支持上下文文件。如Claude Code可以读取项目根目录下的CLAUDE.md文件作为系统提示词每次AI都会自动获取这些信息你就不用每次都重复了。Vibe Coding 对话工程技巧传统的提示词思维需要你在一句话里把所有需求都说清楚但往往会遗漏细节或者说得不够准确对话思维你我想做一个导航栏你能帮我吗AI当然可以。你想用什么技术栈有什么设计要求你我用 React 和 Tailwind CSS。设计上希望简洁专业深蓝色背景。AI好的。导航栏需要包含哪些元素你Logo、几个菜单项、搜索框和用户头像。AI明白了。需要支持移动端吗你对移动端要能折叠成汉堡菜单。对话思维可以逐步明确需求而不会是一开始就说清楚所有细节。降低你的思考负担可以边聊边想更容易发现自己的问题AI更能理解你的需求你也可以在对话中学到很多新知识和最佳实践。多轮迭代优化功能模块细粒度实现具体描述而非抽象提供文字描述或者图片描述用提问来引导你的思考和技术选型设定约束条件要求多个方案使用角色扮演提供情感价值为每个工具提供详细的说明和使用示例设计返回的数据的示例Vibe Coding上下文管理技巧上下文就是AI的工作记忆项目级上下文整个项目的基本信息如技术栈设计规范目录结构功能级上下文当前正在开发的功能的信息对话级上下文当前对话中的临时信息比如刚才讨论的问题生成的代码片段如何管理AI的短期记忆?一个对话一个任务定期压缩上下文在新对话开始前根据之前压缩的上下文和文档让AI简单回顾一下之前的内容如何管理长期记忆README.md项目文档# 我的博客系统 一个简洁的个人博客系统支持 Markdown 写作和代码高亮。 ## 技术栈 - 前端Next.js 14 (App Router) TypeScript Tailwind CSS - 后端Supabase (PostgreSQL Auth) - 部署Vercel ## 目录结构 - /app - Next.js 页面和路由 - /components - 可复用组件 - /lib - 工具函数和配置 - /public - 静态资源 ## 开发规范 - 使用函数式组件不用 class 组件 - 所有组件都要有 TypeScript 类型 - 样式使用 Tailwind CSS不写自定义 CSS - API 调用统一使用 /lib/api.ts 中的函数 ## 如何运行 bash npm install npm run dev TODO.md项目的任务清单# 开发进度 ## 已完成 ✅ - [x] 用户注册和登录 - [x] 文章列表页 - [x] 文章详情页 - [x] Markdown 渲染 ## 进行中 - [ ] 文章编辑功能 - [x] 编辑器界面 - [ ] 保存草稿 - [ ] 发布文章 ## 待开发 - [ ] 评论功能 - [ ] 搜索功能 - [ ] 标签系统 ## 已知问题 - 移动端导航栏在某些设备上显示不正常 - 代码高亮在暗色主题下对比度不够记得文档应该要及时更新Vibe Coding 网站美化技巧如何去除网站的AI 味为什么会有AI味AI训练数据里很多网站采用tailwindcss样式库这个库默认颜色主调就是蓝紫色由于这些颜色出现频率最高AI会偏向选择这些蓝紫色样式利用FireCrawl MCP让AI读取网页或者网页截图直接参考真实网站使用截图转代码工具转成html这样准确度会高很多直接套用网站模版使用AI设计工具Google Stitch,Onlook提示词约束Claude Code的文章前端美学如反向提示说明禁止内容角色设定明确要求语境注入情绪注入skills:Frontend-design,UI UX Pro Max小众组件库Aceternity,ikun-ui,Magic UI什么是Agent Skills它和MCP有什么区别和联系Agent Skills是给AI的技能包本质是一个文件夹存放skill.md技能说明书可运行的脚本和参考资料让Agent开发工具能理解并使用特定的能力本质上就是对冗长的提示词的结构化分配和打包复用。而MCP是一种标准协议比如某项工具实现这个协议那么AI就可以根据协议调用这个工具就是使AI能与外部进行交互。一个偏重教AI做事另一个偏重让AI与外部连接两者协作AI利用MCP获取数据之后在skill指导下进行数据处理。对这个工具有什么未来的打算将这个工具设计和封装成一个skill,结合当下龙虾的热潮可以给龙虾使用让龙虾获得捕获热点的技能如何设计和封装设计原则就是该工具要调用不应该依赖后端还可以让AI编程工具本身充当AI分析引擎达到开箱即用将工具改装成直接脚本爬取网页AI自身分析网页搜索和国内平台全部无需key,推特为可选信息源技能包结构skill.md定义触发词工作流程(理解意图 - 查询扩展 - 执行搜索 - AI分析 - 输出报告)scripts/脚本复用搜索策略和过滤逻辑references/包括数据源说明和分析框架为AI提供评估标准测试是否能够正常使用在项目中你遇到的什么困难如何解决平衡信息的丰富度和质量矛盾目标导致我在多次迭代优化中经历了反复的套娃最终的解决方案是先扩后筛的分层策略搜索阶段通过查询扩展功能增加搜索变体宽松条件尽可能多的获取候选内容过滤阶段URL去重时效性基础文本匹配AI深度分析展示阶段让用户根据筛选排序进一步精选追求两个矛盾目标不应在单一环节扯皮而是分层处理每一层只负责自己的职责如何利用AI辅助开发工具类项目和开发业务系统有什么不同工具类采取更敏捷的方式直接把需求描述给AI更AI进行对话协作设计方案并且快速迭代而业务系统通常需要更严格的架构设计和接口规范迭代频率更高可快速验证和调整需要更多的人工判断工具的核心是效果而非正确性AI编程工具的局限遇到了哪些AI解决不好的问题信息过滤的阀值需要反复调整AI的初始值看起来合理实际场景中经常过严或过松AI写爬虫不太能预判各平台的反爬政策爬百度被拦截了人工切换成搜狗上下文断裂UI同质化套娃信息丰富和信息精准的矛盾前端相关部分如何实现科技感UI如何去除AI味使用UI X Pro Max前端美化技能让AI在生成界面时遵循更高质量的设计规范人工指定UI风格简洁高效直观酷炫赛博风科技感彰显急切发现热点的心情使用Acetenity UI ,实现炫酷效果流行背景光束聚光灯(注意Aceternity UI组件计算量较大主要用在首屏和背景内容区域保持简洁平衡效果和性能)为什么使用Vite?有什么优势我们使用了许多需要大量复杂计算的视觉组件和需要实时的通信逻辑我们要保证开发环境的极速响应和提供高效生产构建的工具。放弃传统的webpack或cra(甚至react官方文档都已经找不到这个构建方式了)Webpack:配置复杂启动慢HMR慢Vite利用浏览器原生的esm在开发阶段不需要打包而是按需编译这使得无论项目多大启动速度始终是秒级的避免像webpack那样在启动前进行全量打包减少等待时间在调整复杂的科技感UI时热更新快实现毫秒级的及时反馈Vite使用Esbuild处理依赖预构建速度比js编写的打包器快10-100倍生产环境利用Rollup进行构建自动处理代码分割和预打包提升首屏加载速度通过内置的Tree-shaking,生产包体积减小了约20%首屏渲染性能优异为什么实时通信选择WebSocket而不是SSE虽然上一个项目AIChat使用了SSE但是这里我转向了WebSocket(Socket.io):AI流式输出是一个典型的请求-响应模型一个单向高频连续的文本流热点监控是一个异步事件驱动的场景服务端抓取热点需要主动推送到所有在线客户SSE适合长文本流WebSocket适合发送JSON格式对象热点信息包含多种属性这些作为事件发送更符合逻辑用户可以选择监听或者不监听某个关键词WebSocket允许客户端直接通过当前通道反馈操作不需要重新发起http请求延迟更低服务端需要知道当前多少用户在线和订阅某个关键词以便进行精准推送WebSocket协议天然支持感知客户连接和断开状态通过 Socket.io 房间Rooms机制我可以轻松实现“按关键词订阅”功能即只有关注了“Claude”关键词的用户才会收到相关推送减少了无效的下行流量。业务场景热点用户迫切且快速想要了解到的东西即时性显得尤为关键webSocket的低延迟性是刚需前端如何实现实时数据更新通过Socket.io-client实现在APP组件挂载时建立跟后端的WebSocket连接当用户激活某个关键词前端通过订阅事件告知后端订阅该关键词的更新后端采集到新热点后向订阅该关键词的用户推送数据。前端收到后将新热点插入到列表头部并触发动画效果同时推送notification时间更新通知列表和统计数据如果这个热点的相关性很高流量很高他的等级就是最高的会通过邮件方式发送给用户。用户取消监控则通过unsubscribe取消订阅相比于轮询来说优势是实时性好资源消耗低只有在有数据时传输对于这种时效性敏感的场景非常适合。前端筛选排序组件是怎么设计的FilterSortBar:组件结构顶部有多个筛选下拉框右侧是排序选择器用useState进行状态管理筛选维度来源、重要程度、关键词、时间范围排序方式最新发现最新发布最热重要程度相关性封装一个排序工具sortHotspots性能考虑当数据量不大筛选排序可以在前端内存中完成本地化存储状态更新而调用全网搜索获取数据时就必须请求后端API因为订阅WebSocket会立即返回最新数据这是立即请求后端获取最新数据保证消息通知和数据展示的一致性。当数据量大的时候就必须调用后端API但是也可以使用虚拟滚动懒加载滚动分页或者传统分页来减少对后端数据的请求。用户获取热点的完整流程页面打开 首次加载请求数据库订阅关键词(Socket)获取到数据后会把所有激活的关键词通过Socket订阅给后端后端定时/手动触发热点检查对激活的关键词进行多源抓取 - 去重过滤AI分析(判断真实性相关性评估)符合条件 的保存到数据库为新热点写一条通知推送给前端订阅该关键词的用户前端接受到后先把新热点插入到本地存储(瞬间显示)然后再根据当前筛选过滤条件对渲染进行更新。如果是数据量大的情况下就得每次请求后端时带上筛选过滤作为url请求参数。这样做确保分页数据一致性。热点卡片组的设计有什么好的设计对于可展开区域我设计单个热点卡片的展开折叠和一键实现全部卡片的展开折叠思路展开和折叠很明显就是两个状态的切换但是遇到个问题热点数据不是固定的你不可能每一个都设计一个专属状态同时还要实现能够一键操控所有状态。解决我这里决定只使用一个state来维护state里面存一个set数据结构存储每一个热点的id,当set里面没有这个id,就是折叠有这个id就是展开。一键实现展开折叠就是对将所有热点id都存到set里面反之亦然。前端通知中心如何设计实时接收监听notification事件收到通知后显示未读数量通知列表展开面板按时间倒序展示所有通知已读管理点击某条消息标为已读也支持全部标为已读的批量操作每个通知都关联这条热点的资源地址点击可立即跳转
AI检索工具项目话术
AI热点检索工具项目话术AI开发相关部分什么是Vibe Coding?用自然语言和AI聊天让AI帮你生成代码修改和优化代码双方协作迭代优化项目感受让在实战中学习变得更加便捷你可以在AI Coding下快速实现一个小demo,并且在阅读和修改中不断加深对某个方法的使用尤其是实现方案的先进性避免你学到一些过时的技术你还可以实现功能之后不断追问是否有更好的实现方法怎么做做个demo看一下不断强化自己的业务能力。存在问题界面效果同质化严重代码不可控避免让AI生成或者修改大模块代码生成代码后要进行测试颗粒度上传仓库有问题及时回滚基础知识只会更加重要我其实在学习的时候会选择让AI生成代码但不要直接插入而是我理解学习后再手打进去除了遇到bug很难受的情况我觉得手打对我理解是有效果的。什么是AI代码编辑器传统代码编辑器内置AI助手欧可以帮你生成代码解释代码修改代码甚至自动执行多文件任务使用AI代码编辑器也是一个很好的学习机会AI生成的代码可能使用了一些你不熟悉的技术和库我们可以学着去理解并提出疑问。Vibe Coding使用技巧规划优先级最高做好项目的规划可以先跟AI讨论一下整理一份需求文档并且进行人工确认好执行你需要先理清几个问题应用的核心功能用户如何受用功能的优先级特殊要求MVP思维MVP最小可行产品先做一个最简单但能用的版本然后慢慢完善也就是敏捷性开发可以和AI对话时说一下我们先做一个MVP版本只包含最核心的功能其他功能以后再加然后列出2-3个最重要的功能先专注把核心功能做好。完成比完美更重要多次迭代优化颗粒化实现不要害怕回滚返工其实也是你和AI在探索和学习的过程。比如说我在实现AI对话聊天的时候我是先实现正常的对话界面最后再来实现虚拟滚动结果bug出现了当你上滑的时候它居然会跟着流式输出缓慢向下滚动当时折腾了好久都无法解决也尝试了很多种实现虚拟滚动的方案居然也没用最后直接选择代码回滚并让AI先选择一种比较简单实现的方式实现虚拟滚动之后在再把之前已经实现的优化再重新实现这下子才解决了这个bug。提供好的上下文使用项目文档说明技术栈参考已有代码描述设计风格有些AI工具支持上下文文件。如Claude Code可以读取项目根目录下的CLAUDE.md文件作为系统提示词每次AI都会自动获取这些信息你就不用每次都重复了。Vibe Coding 对话工程技巧传统的提示词思维需要你在一句话里把所有需求都说清楚但往往会遗漏细节或者说得不够准确对话思维你我想做一个导航栏你能帮我吗AI当然可以。你想用什么技术栈有什么设计要求你我用 React 和 Tailwind CSS。设计上希望简洁专业深蓝色背景。AI好的。导航栏需要包含哪些元素你Logo、几个菜单项、搜索框和用户头像。AI明白了。需要支持移动端吗你对移动端要能折叠成汉堡菜单。对话思维可以逐步明确需求而不会是一开始就说清楚所有细节。降低你的思考负担可以边聊边想更容易发现自己的问题AI更能理解你的需求你也可以在对话中学到很多新知识和最佳实践。多轮迭代优化功能模块细粒度实现具体描述而非抽象提供文字描述或者图片描述用提问来引导你的思考和技术选型设定约束条件要求多个方案使用角色扮演提供情感价值为每个工具提供详细的说明和使用示例设计返回的数据的示例Vibe Coding上下文管理技巧上下文就是AI的工作记忆项目级上下文整个项目的基本信息如技术栈设计规范目录结构功能级上下文当前正在开发的功能的信息对话级上下文当前对话中的临时信息比如刚才讨论的问题生成的代码片段如何管理AI的短期记忆?一个对话一个任务定期压缩上下文在新对话开始前根据之前压缩的上下文和文档让AI简单回顾一下之前的内容如何管理长期记忆README.md项目文档# 我的博客系统 一个简洁的个人博客系统支持 Markdown 写作和代码高亮。 ## 技术栈 - 前端Next.js 14 (App Router) TypeScript Tailwind CSS - 后端Supabase (PostgreSQL Auth) - 部署Vercel ## 目录结构 - /app - Next.js 页面和路由 - /components - 可复用组件 - /lib - 工具函数和配置 - /public - 静态资源 ## 开发规范 - 使用函数式组件不用 class 组件 - 所有组件都要有 TypeScript 类型 - 样式使用 Tailwind CSS不写自定义 CSS - API 调用统一使用 /lib/api.ts 中的函数 ## 如何运行 bash npm install npm run dev TODO.md项目的任务清单# 开发进度 ## 已完成 ✅ - [x] 用户注册和登录 - [x] 文章列表页 - [x] 文章详情页 - [x] Markdown 渲染 ## 进行中 - [ ] 文章编辑功能 - [x] 编辑器界面 - [ ] 保存草稿 - [ ] 发布文章 ## 待开发 - [ ] 评论功能 - [ ] 搜索功能 - [ ] 标签系统 ## 已知问题 - 移动端导航栏在某些设备上显示不正常 - 代码高亮在暗色主题下对比度不够记得文档应该要及时更新Vibe Coding 网站美化技巧如何去除网站的AI 味为什么会有AI味AI训练数据里很多网站采用tailwindcss样式库这个库默认颜色主调就是蓝紫色由于这些颜色出现频率最高AI会偏向选择这些蓝紫色样式利用FireCrawl MCP让AI读取网页或者网页截图直接参考真实网站使用截图转代码工具转成html这样准确度会高很多直接套用网站模版使用AI设计工具Google Stitch,Onlook提示词约束Claude Code的文章前端美学如反向提示说明禁止内容角色设定明确要求语境注入情绪注入skills:Frontend-design,UI UX Pro Max小众组件库Aceternity,ikun-ui,Magic UI什么是Agent Skills它和MCP有什么区别和联系Agent Skills是给AI的技能包本质是一个文件夹存放skill.md技能说明书可运行的脚本和参考资料让Agent开发工具能理解并使用特定的能力本质上就是对冗长的提示词的结构化分配和打包复用。而MCP是一种标准协议比如某项工具实现这个协议那么AI就可以根据协议调用这个工具就是使AI能与外部进行交互。一个偏重教AI做事另一个偏重让AI与外部连接两者协作AI利用MCP获取数据之后在skill指导下进行数据处理。对这个工具有什么未来的打算将这个工具设计和封装成一个skill,结合当下龙虾的热潮可以给龙虾使用让龙虾获得捕获热点的技能如何设计和封装设计原则就是该工具要调用不应该依赖后端还可以让AI编程工具本身充当AI分析引擎达到开箱即用将工具改装成直接脚本爬取网页AI自身分析网页搜索和国内平台全部无需key,推特为可选信息源技能包结构skill.md定义触发词工作流程(理解意图 - 查询扩展 - 执行搜索 - AI分析 - 输出报告)scripts/脚本复用搜索策略和过滤逻辑references/包括数据源说明和分析框架为AI提供评估标准测试是否能够正常使用在项目中你遇到的什么困难如何解决平衡信息的丰富度和质量矛盾目标导致我在多次迭代优化中经历了反复的套娃最终的解决方案是先扩后筛的分层策略搜索阶段通过查询扩展功能增加搜索变体宽松条件尽可能多的获取候选内容过滤阶段URL去重时效性基础文本匹配AI深度分析展示阶段让用户根据筛选排序进一步精选追求两个矛盾目标不应在单一环节扯皮而是分层处理每一层只负责自己的职责如何利用AI辅助开发工具类项目和开发业务系统有什么不同工具类采取更敏捷的方式直接把需求描述给AI更AI进行对话协作设计方案并且快速迭代而业务系统通常需要更严格的架构设计和接口规范迭代频率更高可快速验证和调整需要更多的人工判断工具的核心是效果而非正确性AI编程工具的局限遇到了哪些AI解决不好的问题信息过滤的阀值需要反复调整AI的初始值看起来合理实际场景中经常过严或过松AI写爬虫不太能预判各平台的反爬政策爬百度被拦截了人工切换成搜狗上下文断裂UI同质化套娃信息丰富和信息精准的矛盾前端相关部分如何实现科技感UI如何去除AI味使用UI X Pro Max前端美化技能让AI在生成界面时遵循更高质量的设计规范人工指定UI风格简洁高效直观酷炫赛博风科技感彰显急切发现热点的心情使用Acetenity UI ,实现炫酷效果流行背景光束聚光灯(注意Aceternity UI组件计算量较大主要用在首屏和背景内容区域保持简洁平衡效果和性能)为什么使用Vite?有什么优势我们使用了许多需要大量复杂计算的视觉组件和需要实时的通信逻辑我们要保证开发环境的极速响应和提供高效生产构建的工具。放弃传统的webpack或cra(甚至react官方文档都已经找不到这个构建方式了)Webpack:配置复杂启动慢HMR慢Vite利用浏览器原生的esm在开发阶段不需要打包而是按需编译这使得无论项目多大启动速度始终是秒级的避免像webpack那样在启动前进行全量打包减少等待时间在调整复杂的科技感UI时热更新快实现毫秒级的及时反馈Vite使用Esbuild处理依赖预构建速度比js编写的打包器快10-100倍生产环境利用Rollup进行构建自动处理代码分割和预打包提升首屏加载速度通过内置的Tree-shaking,生产包体积减小了约20%首屏渲染性能优异为什么实时通信选择WebSocket而不是SSE虽然上一个项目AIChat使用了SSE但是这里我转向了WebSocket(Socket.io):AI流式输出是一个典型的请求-响应模型一个单向高频连续的文本流热点监控是一个异步事件驱动的场景服务端抓取热点需要主动推送到所有在线客户SSE适合长文本流WebSocket适合发送JSON格式对象热点信息包含多种属性这些作为事件发送更符合逻辑用户可以选择监听或者不监听某个关键词WebSocket允许客户端直接通过当前通道反馈操作不需要重新发起http请求延迟更低服务端需要知道当前多少用户在线和订阅某个关键词以便进行精准推送WebSocket协议天然支持感知客户连接和断开状态通过 Socket.io 房间Rooms机制我可以轻松实现“按关键词订阅”功能即只有关注了“Claude”关键词的用户才会收到相关推送减少了无效的下行流量。业务场景热点用户迫切且快速想要了解到的东西即时性显得尤为关键webSocket的低延迟性是刚需前端如何实现实时数据更新通过Socket.io-client实现在APP组件挂载时建立跟后端的WebSocket连接当用户激活某个关键词前端通过订阅事件告知后端订阅该关键词的更新后端采集到新热点后向订阅该关键词的用户推送数据。前端收到后将新热点插入到列表头部并触发动画效果同时推送notification时间更新通知列表和统计数据如果这个热点的相关性很高流量很高他的等级就是最高的会通过邮件方式发送给用户。用户取消监控则通过unsubscribe取消订阅相比于轮询来说优势是实时性好资源消耗低只有在有数据时传输对于这种时效性敏感的场景非常适合。前端筛选排序组件是怎么设计的FilterSortBar:组件结构顶部有多个筛选下拉框右侧是排序选择器用useState进行状态管理筛选维度来源、重要程度、关键词、时间范围排序方式最新发现最新发布最热重要程度相关性封装一个排序工具sortHotspots性能考虑当数据量不大筛选排序可以在前端内存中完成本地化存储状态更新而调用全网搜索获取数据时就必须请求后端API因为订阅WebSocket会立即返回最新数据这是立即请求后端获取最新数据保证消息通知和数据展示的一致性。当数据量大的时候就必须调用后端API但是也可以使用虚拟滚动懒加载滚动分页或者传统分页来减少对后端数据的请求。用户获取热点的完整流程页面打开 首次加载请求数据库订阅关键词(Socket)获取到数据后会把所有激活的关键词通过Socket订阅给后端后端定时/手动触发热点检查对激活的关键词进行多源抓取 - 去重过滤AI分析(判断真实性相关性评估)符合条件 的保存到数据库为新热点写一条通知推送给前端订阅该关键词的用户前端接受到后先把新热点插入到本地存储(瞬间显示)然后再根据当前筛选过滤条件对渲染进行更新。如果是数据量大的情况下就得每次请求后端时带上筛选过滤作为url请求参数。这样做确保分页数据一致性。热点卡片组的设计有什么好的设计对于可展开区域我设计单个热点卡片的展开折叠和一键实现全部卡片的展开折叠思路展开和折叠很明显就是两个状态的切换但是遇到个问题热点数据不是固定的你不可能每一个都设计一个专属状态同时还要实现能够一键操控所有状态。解决我这里决定只使用一个state来维护state里面存一个set数据结构存储每一个热点的id,当set里面没有这个id,就是折叠有这个id就是展开。一键实现展开折叠就是对将所有热点id都存到set里面反之亦然。前端通知中心如何设计实时接收监听notification事件收到通知后显示未读数量通知列表展开面板按时间倒序展示所有通知已读管理点击某条消息标为已读也支持全部标为已读的批量操作每个通知都关联这条热点的资源地址点击可立即跳转
