repo 4 轮多轮数据 — 建站 → 加功能 → 调整 → 再加功能（10/10）

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

我想增加通知中心功能，入口放在 Design Tool Launch 首页右上角现有的铃铛图标，点击后进入 Notifications 页面。页面顶部提供返回和全部标为已读，下面按 Today、Earlier 分组展示通知；每条通知都要由数据驱动，包含类型图标、消息内容、时间和已读状态，没有内容时显示空状态，底部可放通知偏好入口。页面布局参考 /workspace/feature_sketch.png，新页面的配色字体组件风格必须与现有产品完全一致，其他页面路由交互保持不变，改完补自检清单并完整重新自检全部通过再交付。

请调整通知页的已读联动：点击未读通知整行后立即标为已读并移除圆点，未读汇总和启动页右上角铃铛角标同步减一；点击“全部标为已读”后两处计数归零，按钮置为不可用。刷新后状态仍需保留，其他保持不变，改完补自检清单并完整重新自检全部通过再交付。

再加一个通知搜索小功能：入口放在通知页顶部栏右侧的搜索图标，点击后在标题下展开单行搜索框，可按消息正文和通知类型实时匹配；结果仍按“今天/更早”分组，无匹配时显示带清除关键词操作的空态，返回时保留原已读状态。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

我想增加购买成功确认功能，入口是 Template Checkout 页现有的“Pay $49”按钮，支付后进入“订单确认”页，展示成功状态、订单号和时间、模板与许可证、实付金额、下载入口及收据邮箱，订单卡片都要由本次交易数据驱动。页面布局参考 /workspace/feature_sketch.png，新页面配色、字体、组件风格必须与现有产品完全一致，其他页面路由交互保持不变。改完补自检清单并完整重新自检，全部通过再交付。

请调整订单确认页的数据联动：已购模板卡片中的名称、平台标签和许可证，以及支付摘要里的小计、实付金额，都必须直接沿用结账页最终提交的数据；订单号和购买时间按实际交易生成，刷新页面后保持一致，不要回退为占位内容。其他保持不变，改完补自检清单并完整重新自检全部通过再交付。

再加一个复制订单号的小功能，入口放在订单确认页成功面板的订单号右侧，显示轻量复制图标和“复制”提示；点击后将完整订单号写入剪贴板，按钮短暂切换为“已复制”，两秒后恢复，复制失败时显示就地错误提示且不影响页面其他操作。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

想加一个锁定课节详情功能，入口放在 Course Syllabus 页现有的“1.2 Core Principles”锁定课节行，点击后进入“课节详情”页，展示课节概览、学习目标、时长、内容清单、解锁条件和解锁按钮，所有内容都按该课节数据动态渲染。页面布局参考 /workspace/feature_sketch.png，配色、字体和组件风格必须与现有产品完全一致，其他页面路由交互保持不变，改完补自检清单并完整重新自检，全部通过再交付。

请调整“Lesson Details”页的内容列表：按视频、阅读、练习的实际学习顺序展示，并在每项右侧统一显示时长；缺少时长时显示“待定”，不要留空。列表总时长需与顶部预计时长实时汇总一致，锁定状态下各项不可点击。其他页面和交互保持不变，改完补自检清单并完整重新自检全部通过再交付。

请在课程大纲页增加轻量搜索功能，入口放在模块列表上方。用户输入课节标题关键词后即时筛选，保留所属模块标题，并清楚区分可预览与锁定状态；无匹配结果时显示带“清除搜索”按钮的空态，点击后恢复完整列表，返回页面时保留本次关键词。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

我想加一个讲师主页，入口放在课程详情页现有的“Instructor”讲师卡，点击后展示讲师头像姓名、简介资历、擅长主题、所授课程和学员评价，课程卡与评价均由数据驱动。页面布局参考 /workspace/feature_sketch.png，新页面的配色字体组件风格必须与现有产品完全一致，其他页面路由交互保持不变；改完补自检清单并完整重新自检，全部通过再交付。

请调整讲师主页中“该讲师教授的课程”的排序：默认按课程评分从高到低展示，评分相同时按学习人数从高到低，缺失评分的课程统一置底。卡片内容和点击去向、页面其他区域及现有流程保持不变。改完补自检清单并完整重新自检，全部通过再交付。

再给讲师主页的“该讲师教授的课程”增加搜索功能，入口放在区块标题右侧，点击后展开输入框，按课程名称和简介实时匹配当前讲师的课程；支持一键清空和按Esc收起，无结果时在原卡片区域显示提示及“清除搜索”按钮，不跳转新页面。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

我想给研究资料库补一个文件夹详情功能，入口放在 Demo Research Library 左侧 Folders 里的“ML”行，点击后进入 ML 文件夹页，集中查看文件夹概况、论文和相关笔记，并支持搜索、筛选及添加论文。每条论文和笔记卡片都要由真实数据驱动。页面布局参考 /workspace/feature_sketch.png，新页面的配色、字体和组件风格必须与现有产品完全一致，其他页面路由交互保持不变。改完请补自检清单，并完整重新自检，全部通过后再交付。

请调整 ML Folder Details 里的排序和筛选联动：默认按最近更新时间倒序，筛选支持年份、会议和是否已保存，可多选；选中条件以标签展示并支持单项移除或一键清空。搜索、筛选或排序后，论文列表和顶部论文数量要同步更新，笔记预览不受影响。其他保持不变，改完补自检清单并完整重新自检全部通过再交付。

请在 ML Folder Details 现有搜索框增加一个小增强：输入时在框下展示最多 5 条匹配建议，覆盖论文标题、会议和笔记内容，点击建议后直接应用搜索并定位到对应论文；无匹配结果时显示清晰空态，并提供“清除搜索和筛选”快捷按钮，点击后恢复默认列表。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

我想增加通知中心功能，入口放在 Productivity Home 右上角现有的铃铛图标。点击后进入 Notifications 页面，可筛选未读或全部消息，并按 Today、Earlier 分组；每张通知卡片的类型、标题、摘要、时间和已读状态都要由数据驱动。页面布局参考 /workspace/feature_sketch.png，新页面的配色、字体和组件风格必须与现有产品完全一致，其他页面路由交互保持不变。改完补充自检清单，并完整重新自检，全部通过后再交付。

请调整通知中心的已读联动：用户点开任一未读通知后立即标记为已读，卡片未读标识、未读标签数量及首页铃铛红点同步更新；“全部标为已读”后未读列表显示空态，切回全部仍保留通知并展示已读样式。其他保持不变，改完补自检清单并完整重新自检全部通过再交付。

再给通知中心加一个轻量搜索功能，入口放在顶部栏标题下方、筛选标签上方。支持按通知标题和摘要关键词实时搜索，结果仍按 Today、Earlier 分组并保留未读状态；无匹配时展示带“清除搜索”的空态，点击即可恢复完整列表，加载更多仅加载匹配结果。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

我想增加多语言代码示例功能，入口放在 Endpoint Reference 页现有的“View code”按钮，点击后进入 Code Examples 页面。页面展示当前接口摘要、语言切换、自动生成的请求代码、鉴权与参数说明，以及复制代码和在 Explorer 中打开的操作；内容需根据所选接口和语言动态生成。页面布局参考 /workspace/feature_sketch.png，新页面的配色字体组件风格必须与现有产品完全一致，其他页面路由交互保持不变，改完补自检清单并完整重新自检全部通过再交付。

请调整 Code Examples 页的语言切换行为：默认记住用户上次选择的语言，再次从任一 Endpoint Reference 的“View code”进入时沿用；切换语言后代码面板、复制内容和认证/参数说明需同步刷新，接口摘要保持当前接口不变。其他保持不变，改完补自检清单并完整重新自检全部通过再交付。

再加一个代码内搜索的小功能，入口放在 Code Examples 页生成代码面板右上角、复制按钮左侧的搜索图标。点击后展开输入框，输入关键词即时高亮全部匹配项，并显示“当前项/总数”；Enter 和 Shift+Enter 前后跳转，Esc 清空并收起，无结果时给出明确提示。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

想让市场首页右上角的购物车图标可点击，进入“购物车”页，集中确认模板并结算。页面包含商品列表、优惠码、订单汇总和结算按钮；列表项须数据驱动，显示缩略图、模板名、平台、授权、价格、数量和删除操作。布局参考 /workspace/feature_sketch.png，新页面配色字体组件风格必须与现有产品完全一致，其他页面路由交互保持不变。改完补自检清单并完整重新自检，全部通过再交付。

请调整 Shopping Cart 的勾选与结算联动：Select All 控制购物车内全部商品，部分勾选时显示半选态；订单摘要和底部总价仅统计已选商品，未选任何商品时 Checkout 置灰且不可点击。数量变化或移除商品后须即时重算，其他保持不变、改完补自检清单并完整重新自检全部通过再交付。

再加一个购物车批量移除功能，入口放在 selection row 右侧，仅在至少勾选一件商品时显示“Remove Selected”。点击后弹出确认层，确认后一次移除已选商品，并同步商品总数、Select All 状态、订单摘要和底部总价，取消则不改数据；若购物车被清空，原页展示带返回 Marketplace 按钮的空态。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

我想增加学习统计功能，入口放在 Study Dashboard 现有的“Your Progress”卡片，点击后进入 Study Statistics 页面，展示连续学习、每周时长、掌握度、各学习模式表现和近期进步记录；每张统计卡及记录项都要由真实学习数据驱动。页面布局参考 /workspace/feature_sketch.png，新页面的配色字体组件风格必须与现有产品完全一致，其他页面路由交互保持不变，改完补自检清单并完整重新自检全部通过再交付。

想调整一下 Study Statistics 页的最近进展列表：默认按日期从新到旧排列，并在列表上方增加“全部、AI Tutor、Flashcards、Practice Quiz”筛选项，切换后立即刷新结果，停留期间保留选择。其他内容和交互保持不变，改完补自检清单并完整重新自检全部通过再交付。

再加一个材料搜索小功能，入口放在 Study Dashboard 的 Recent Study Materials 标题下方。输入材料名称关键词后实时筛选当前列表，支持模糊匹配和一键清空；无匹配结果时显示简洁空态，并提供清除搜索的操作，不跳转新页面。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。

把这张手绘的交互流程图（多屏 + 箭头 + 交互标注）做成一个可运行的前端工程（React 或 Vue + Vite + TypeScript），把图里的每个屏都实现成组件，并把屏之间的跳转和草图里出现的所有交互用代码真正接上、一种都不要遗漏；最后 npm install 且 npm run build 必须通过。 流程图: /workspace/sketch.png 把工程建在并构建于: /workspace/app

请在展览首页右上角头像入口增加“我的参观”，点击进入参观记录页，展示近期预约、电子票、快捷操作和历史预约；每张预约卡须由数据驱动，包含日期、时段、票数、状态与订单号。页面布局参考 /workspace/feature_sketch.png，新页面配色、字体和组件风格必须与现有产品完全一致，其他页面路由交互保持不变。改完请补自检清单，并完整重新自检，全部通过再交付。

请调整“My Visits”页面的订单状态联动：即将到访按参观日期由近到远展示，超过所选时段后自动移入历史记录；仅“已确认且未过期”的预约显示可扫码二维码，已取消或已过期订单隐藏二维码并显示对应状态。其他保持不变，改完补自检清单并完整重新自检全部通过再交付。

再给“My Visits”的历史记录加一个轻量搜索和筛选功能，入口放在“Past visits”标题右侧的搜索图标；点击后在当前页面展开搜索框和状态筛选项，可按展览名称或订单号即时匹配，并筛选已完成、已取消，清空后恢复全部记录，无结果时显示明确空态。新增部分的配色字体组件风格与现有产品完全一致；补自检清单，完整重新自检全部通过再交付。