教程【免费下载链接】ru-test-assignmentsТестовые задания для самостоятельного выполнения от разных it компаний项目地址https://gitcode.com/gh_mirrors/ru/ru-test-assignments点击查看免费下载本文以开源仓库 frontend/kvartirka/1bsc3hgaye69fjfkknfh.md 中的 КвартиркаKvartirka.comFrontend Junior 测试任务为主线完整拆解「基于 NASA Asteroids – NeoWs 公共 API 的在线小行星监控与摧毁服务」的需求、数据模型、页面架构与工程落地要点。读完本文你将掌握如何把一份只有 19 行的俄语任务描述翻译成可验收的产品规格如何用 Next.js或 React SSR TypeScript CSS Modules 实现无限滚动列表、购物车流程与详情页路由以及如何用 NASA 公开数据字段完成距离单位换算、危险度评估与尺寸图标映射。任务全景从一段产品描述到可验收的功能清单仓库中该任务原文位于 frontend/kvartirka/1bsc3hgaye69fjfkknfh.md全文只有 19 行但它浓缩了一个真实产品的完整骨架数据源、三个页面、四个核心交互、一套技术约束与一组加分项。仓库根目录 README.md 将其收录为「Frontend-разработчик, Junior(JS, React/Next.js/TypeScript)」也就是说这是一份面向 Junior 的前端实战任务重点考察数据驱动的列表页 分页加载 跨页面状态管理 响应式布局。把原文档逐行翻译并结构化后可以整理出如下需求清单维度需求内容依据原文产品主题在线服务监控并「摧毁」危险小行星主题致敬电影《Armageddon》数据源NASA 公共 APIapi.nasa.gov的 Asteroids – NeoWs 服务主页面从当前日期起至「无限」的小行星接近地球列表滚动时分批加载每条记录展示名称、尺寸、危险度评估、离地球距离、最大接近的精确日期图标规则小行星图标随尺寸变化「小/大」的判定阈值由候选者自行定义单位切换距离可在「公里」与「月球距离LD」之间切换购物车列表页卡片上的「订购」按钮把对应接近close approach加入购物车购物车为列表页上的悬浮面板点发送后跳转订单成功页成功页列出所有已订购的接近详情页每个小行星有独立页面展示小行星数据 全部接近记录每条接近含相对地球速度、与地球最大接近的时间、距离、绕行轨道orbiting body详情页视觉设计由候选者自定适配自适应响应式布局技术约束使用 Next.js接受 React SSR 的方案不推荐使用 Redux样式用 CSS Modules交付形式为 git 仓库浏览器兼容Chrome / Firefox / Safari / Edge 的最新版本加分项TypeScript测试部署到任意托管平台提供 README 构建文档注意仓库中只有任务描述本身没有参考实现代码因此下文所有代码均为作者给出的示意方案用于把需求转化为可实现的结构读者可按自己的风格改写。数据层NASA Asteroids – NeoWs API 的字段模型整个应用是数据驱动的第一步是吃透 NeoWs 接口返回的数据结构。NeoWsNear Earth Object Web Service提供两类核心接口列表类接口按日期窗口返回接近地球的小行星集合feed或按页浏览全量目录browse均返回分页数据单对象接口按neo_reference_id或 NeoWs 的id返回单个小行星的完整档案。每个小行星对象的核心字段可以映射到页面上需要展示的每一个信息点接口字段含义在界面中的用途对应原文需求name小行星名称列表卡片与详情页标题estimated_diameter.kilometers.estimated_diameter_max估算直径公里另有 meters / miles / feet 变体尺寸展示作为「小/大」图标阈值判定的输入is_potentially_hazardous_asteroid是否属于潜在危险小行星PHA危险度评估的角标/高亮close_approach_data[].close_approach_date最大接近的日期列表中的「最大接近精确日期」close_approach_data[].miss_distance接近时距地球的距离kilometers / astronomical / lunar / miles距离展示与单位切换的原始数据close_approach_data[].relative_velocity相对地球的速度详情页接近记录的速度字段close_approach_data[].orbiting_body绕行天体通常是Earth详情页「绕什么轨道飞行」字段close_approach_data[].close_approach_date_full带时分秒的接近时间详情页「最大接近时间」neo_reference_id/id唯一标识路由参数与购物车条目主键一个值得注意的细节close_approach_data是数组——同一颗小行星可能有多次历史/未来的接近记录。这正好支撑了两个页面结构列表页可以按「最近一次接近」聚合展示详情页则遍历该数组渲染完整的接近历史表。距离单位换算公里与月球距离LD原文要求提供「公里 / 月球距离」两种距离显示模式。NeoWs 的miss_distance本身就以kilometers、lunar、astronomical、miles四种单位同时返回所以最稳妥的做法是直接读取接口里的lunar值而不是在客户端自行换算。若实现者选择自行换算需要记住约数1 月球距离LD≈ 384 400 公里即lunar kilometers / 384400。单位切换属于典型的 UI 状态建议用useState或 URL 查询参数保存当前单位km | lunar放在列表页顶部作为开关toggle把所有距离展示收敛到一个纯函数组件如Distance value{km} unit{unit} /中避免在多个卡片里重复换算逻辑切换单位时不重新请求 API只在渲染层换算保证体验流畅。技术选型与工程搭建原文档给出的技术约束非常明确这也是本次任务最重要的「评分表」框架Next.js若用 React 则必须自行实现 SSR因为要求是「也接受 React SSR」的方案状态管理「不推荐使用 Redux」。这意味着应优先选择 React 内置方案——Context useReducer或Context useState也可以配合 SWR / TanStack Query 做服务端状态管理样式CSS Modules.module.css满足组件样式隔离避免全局样式污染语言TypeScript 是加分项但对 Junior 来说几乎是默认选择交付git 仓库GitHub / Bitbucket / GitLab 任选需要包含完整提交历史与清晰的 README。工程结构可以这样组织示意armageddon/ ├── app/ # Next.js App Router 页面 │ ├── page.tsx # 主列表页无限滚动 │ ├── order/success.tsx # 订单成功页 │ └── asteroid/[id]/page.tsx# 小行星详情页动态路由 ├── components/ │ ├── AsteroidCard/ # 列表卡片 module.css │ ├── CartPanel/ # 购物车悬浮面板 │ ├── Distance/ # 距离单位换算组件 │ └── AsteroidIcon/ # 尺寸映射图标 ├── lib/ │ ├── api.ts # NeoWs 封装 │ └── types.ts # NeoWs 响应类型定义 ├── store/ │ └── cart-context.tsx # 购物车 Context替代 Redux └── .env.local # NASA_API_KEYAPI Key 通过环境变量注入例如在.env.local中配置NASA_API_KEYYOUR_API_KEY主列表页从当前日期到「无限」的滚动分批加载原文对主列表页的描述是「从当前日期起的小行星接近地球列表……滚动时分批加载порциями」。NeoWs 的feed接口天然适合作为「分批」的单位——它要求传入start_date与end_date格式YYYY-MM-DD一次返回该日期窗口内的接近数据。因此「无限滚动」可以这样设计维护一个滑动日期窗口例如每次请求 7 天[today, today6]首屏请求第 1 个窗口在列表底部放置一个哨兵元素sentinel用IntersectionObserver监听它进入视口哨兵可见 → 请求下一个 7 天窗口 → 追加渲染 → 更新哨兵位置如此循环即形成「从当前日期到无限」的伪无限流每次请求之间要处理 loading 与 error 状态防止滚动时重复触发请求。示意实现客户端组件App Routeruse client; export function AsteroidFeed() { const [approaches, setApproaches] useStateCloseApproach[]([]); const [windowStart, setWindowStart] useState(() todayISO()); const [loading, setLoading] useState(false); const sentinelRef useRefHTMLDivElement(null); const loadNextWindow useCallback(async () { setLoading(true); const next await fetchNeoFeed(windowStart, 7); // 7 天一批 setApproaches(prev [...prev, ...next.approaches]); setWindowStart(next.endDate); setLoading(false); }, [windowStart]); useEffect(() { const observer new IntersectionObserver( entries { if (entries[0].isIntersecting !loading) loadNextWindow(); }, { rootMargin: 200px } ); if (sentinelRef.current) observer.observe(sentinelRef.current); return () observer.disconnect(); }, [loadNextWindow, loading]); return ( div {approaches.map(a AsteroidCard key{a.id} approach{a} /)} div ref{sentinelRef} className{styles.sentinel} {loading ? Загрузка... : } /div /div ); }lib/api.ts中封装请求时需要注意 feed 接口的返回结构near_earth_objects是一个按日期分组key 为日期字符串的对象而非数组所以取数据时需要拍平Object.values(data.near_earth_objects).flat()。这是实现中非常容易踩坑、也最能体现对 API 理解程度的一个点。卡片上每个信息点都对应一个明确的字段见数据模型表名称用name危险度用is_potentially_hazardous_asteroidPHA 为 true 时给出红色/危险样式距离用miss_distance最大接近日期用close_approach_date。尺寸图标规则阈值由你定义原文明确「критерий малый-большой выбрать самостоятельно」——小/大的判定标准由候选者自己定义这正是体现产品判断力的地方。推荐做法以estimated_diameter.kilometers.estimated_diameter_max为基准定义阈值常量例如 0.1 km视为「小」、0.1 ~ 1 km视为「中」、≥ 1 km视为「大」也可按直径直接映射 2~3 档图标把阈值定义写成带注释的常量让评审者一眼看到你的决策逻辑。例如// 阈值自行定义0.1km 以下为小1km 以上为大中间为中等 export function sizeCategory(maxDiameterKm: number): small | medium | large { if (maxDiameterKm 0.1) return small; if (maxDiameterKm 1) return large; return medium; }购物车与订单流程Context 替代 Redux原文对购物车的要求有三层列表卡片上的「订购」按钮把对应接近加入购物车购物车是列表页上的悬浮面板плашка常驻可见点击「发送」后跳转订单成功页页面列出所有已订购的接近。由于明确「不推荐 Redux」最贴合 React 惯例的做法是Context useReducer。购物车条目以「接近记录」为最小单位因为同一小行星可能有多次接近订购的是某一次接近而非整颗小行星——这符合原文「заказанные сближения已订购的接近」的措辞。示意// store/cart-context.tsx type CartItem { key: string; // ${neoReferenceId}:${closeApproachDate} name: string; closeApproachDate: string; missDistanceKm: number; }; type CartState { items: CartItem[] }; type CartAction { type: add | remove | clear; payload?: CartItem }; const cartReducer (state: CartState, action: CartAction): CartState { switch (action.type) { case add: // 用 key 去重同一接近不可重复订购 if (state.items.some(i i.key action.payload!.key)) return state; return { items: [...state.items, action.payload!] }; case remove: return { items: state.items.filter(i i.key ! action.payload!.key) }; case clear: return { items: [] }; default: return state; } };关键交互细节去重以neoReferenceId closeApproachDate组合为 key避免同一接近被重复下单幂等的发送动作点击「发送」时把购物车内容写入订单可通过路由传参、Context 或本地存储传递给成功页随后clear购物车并router.push(/order/success)成功页展示订单号如有与全部已订购接近的列表可从购物车快照直接渲染无需再请求 API。小行星详情页动态路由 接近历史表详情页通过动态路由实现App Router 下为app/asteroid/[id]/page.tsx其中[id]取neo_reference_id或 NeoWsid。该页从单对象接口拉取小行星完整档案并展示原文要求的字段对应数据相对地球的速度close_approach_data[].relative_velocity.kilometers_per_second或kilometers_per_hour与地球最大接近的时间close_approach_data[].close_approach_date_full含时分秒距离close_approach_data[].miss_distance同样支持公里/月球距离切换绕什么轨道飞行close_approach_data[].orbiting_body详情页上半部分是「小行星档案」名称、尺寸、危险度、绝对星等absolute_magnitude_h等下半部分是close_approach_data数组的完整表格——因为一次接近就是一行天然适合用table或卡片列表渲染。原文特意说明「详情页的设计由候选者自行决定」所以这里是展示设计能力的自由发挥区但信息完整性是硬指标速度、时间、距离、轨道四要素缺一不可。由于主列表页的「订购」发生在任意接近记录上购物车与详情页之间也可以联动详情页的每条接近记录同样可以加购两处共用同一个 CartContext状态天然一致。加分项落地TypeScript、测试、部署与 README原文档列出了四个加分项任何一个都能显著提升评分TypeScript为 NeoWs 响应定义完整类型NeoFeedResponse、NearEarthObject、CloseApproach等让字段映射、单位换算、购物车去重全部获得编译期保护测试优先覆盖纯函数与核心交互——单位换算公里→月球距离、sizeCategory阈值判定、cartReducer 的 add/remove/clear 与去重逻辑组件测试用 Vitest/Jest React Testing LibraryAPI 层用 mock 拦截避免依赖真实网络部署部署到任意免费托管平台如 Vercel提交时在 README 中给出线上地址让评审者可以直接体验无限滚动与购物车流程README除常规的安装与启动命令外还应写明NeoWs API Key 的获取与.env.local配置、页面路由清单、单位换算规则、小/大图标阈值定义——这些「设计决策」是 Junior 候选人与众不同的关键。验收清单对照原文逐条自查提交前把这份清单逐项打勾它同时就是面试官眼中的评分表主列表从当前日期开始滚动时分批加载而非一次性拉全量每条记录包含名称、尺寸、危险度、距地距离、最大接近精确日期小行星图标随尺寸变化且阈值定义有据可查注释/文档说明距离可在公里与月球距离间切换切换不触发重新请求卡片「订购」按钮 → 列表页悬浮购物车面板 → 发送 → 订单成功页列出全部已订购接近详情页包含小行星档案 全部接近记录速度/时间/距离/轨道四要素自适应布局在移动端可用基于 Next.js或 React SSR无 Redux样式为 CSS Modules在 Chrome / Firefox / Safari / Edge 最新版验证渲染以 git 仓库交付含 TypeScript、测试、部署地址与 README加分项。需要特别说明的是本仓库仅提供任务描述与索引见 README.md 中 Квартирка 条目不含任何参考答案——这意味着无限滚动、单位换算、购物车去重、详情页路由这些环节没有「标准解」评审关注的是你的实现思路、代码组织与对 API 数据的理解深度。把上文的功能拆解当作需求规格书剩下的就是你的设计与编码了。赞分享教程【免费下载链接】ru-test-assignmentsТестовые задания для самостоятельного выполнения от разных it компаний项目地址https://gitcode.com/gh_mirrors/ru/ru-test-assignments点击查看免费下载相关推荐Market Intelligence 测试任务实战用 Python 构建 Avito 广告数量监控 JSON API 服务Market Intelligence 测试任务实战用 Python 构建 Avito 广告数量监控 JSON API 服务 导读 本篇技术指南围绕仓库中 b教程Agro.Club Junior 前端测试任务实战用 React CRA 实现带 API 筛选与搜索的商品列表组件Agro.Club Junior 前端测试任务实战用 React CRA 实现带 API 筛选与搜索的商品列表组件 导读 本篇文章围绕 Agro.Club教程Appstorespy Junior Backend 测试任务全解用 Python 3 Django GraphQL 构建注册与异步文件处理服务Appstorespy Junior Backend 测试任务全解用 Python 3 Django GraphQL 构建注册与异步文件处理服务 本篇教程上一篇3步搭建你的知识网络开源Zettelkasten卡片盒笔记法实践指南下一篇终极开源三国杀网页版零部署即玩的完整跨平台解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Квартирка 前端 Junior+ 测试任务实战：用 Next.js 与 NASA NeoWs API 构建「Armageddon」小行星监控与摧毁服务
教程【免费下载链接】ru-test-assignmentsТестовые задания для самостоятельного выполнения от разных it компаний项目地址https://gitcode.com/gh_mirrors/ru/ru-test-assignments点击查看免费下载本文以开源仓库 frontend/kvartirka/1bsc3hgaye69fjfkknfh.md 中的 КвартиркаKvartirka.comFrontend Junior 测试任务为主线完整拆解「基于 NASA Asteroids – NeoWs 公共 API 的在线小行星监控与摧毁服务」的需求、数据模型、页面架构与工程落地要点。读完本文你将掌握如何把一份只有 19 行的俄语任务描述翻译成可验收的产品规格如何用 Next.js或 React SSR TypeScript CSS Modules 实现无限滚动列表、购物车流程与详情页路由以及如何用 NASA 公开数据字段完成距离单位换算、危险度评估与尺寸图标映射。任务全景从一段产品描述到可验收的功能清单仓库中该任务原文位于 frontend/kvartirka/1bsc3hgaye69fjfkknfh.md全文只有 19 行但它浓缩了一个真实产品的完整骨架数据源、三个页面、四个核心交互、一套技术约束与一组加分项。仓库根目录 README.md 将其收录为「Frontend-разработчик, Junior(JS, React/Next.js/TypeScript)」也就是说这是一份面向 Junior 的前端实战任务重点考察数据驱动的列表页 分页加载 跨页面状态管理 响应式布局。把原文档逐行翻译并结构化后可以整理出如下需求清单维度需求内容依据原文产品主题在线服务监控并「摧毁」危险小行星主题致敬电影《Armageddon》数据源NASA 公共 APIapi.nasa.gov的 Asteroids – NeoWs 服务主页面从当前日期起至「无限」的小行星接近地球列表滚动时分批加载每条记录展示名称、尺寸、危险度评估、离地球距离、最大接近的精确日期图标规则小行星图标随尺寸变化「小/大」的判定阈值由候选者自行定义单位切换距离可在「公里」与「月球距离LD」之间切换购物车列表页卡片上的「订购」按钮把对应接近close approach加入购物车购物车为列表页上的悬浮面板点发送后跳转订单成功页成功页列出所有已订购的接近详情页每个小行星有独立页面展示小行星数据 全部接近记录每条接近含相对地球速度、与地球最大接近的时间、距离、绕行轨道orbiting body详情页视觉设计由候选者自定适配自适应响应式布局技术约束使用 Next.js接受 React SSR 的方案不推荐使用 Redux样式用 CSS Modules交付形式为 git 仓库浏览器兼容Chrome / Firefox / Safari / Edge 的最新版本加分项TypeScript测试部署到任意托管平台提供 README 构建文档注意仓库中只有任务描述本身没有参考实现代码因此下文所有代码均为作者给出的示意方案用于把需求转化为可实现的结构读者可按自己的风格改写。数据层NASA Asteroids – NeoWs API 的字段模型整个应用是数据驱动的第一步是吃透 NeoWs 接口返回的数据结构。NeoWsNear Earth Object Web Service提供两类核心接口列表类接口按日期窗口返回接近地球的小行星集合feed或按页浏览全量目录browse均返回分页数据单对象接口按neo_reference_id或 NeoWs 的id返回单个小行星的完整档案。每个小行星对象的核心字段可以映射到页面上需要展示的每一个信息点接口字段含义在界面中的用途对应原文需求name小行星名称列表卡片与详情页标题estimated_diameter.kilometers.estimated_diameter_max估算直径公里另有 meters / miles / feet 变体尺寸展示作为「小/大」图标阈值判定的输入is_potentially_hazardous_asteroid是否属于潜在危险小行星PHA危险度评估的角标/高亮close_approach_data[].close_approach_date最大接近的日期列表中的「最大接近精确日期」close_approach_data[].miss_distance接近时距地球的距离kilometers / astronomical / lunar / miles距离展示与单位切换的原始数据close_approach_data[].relative_velocity相对地球的速度详情页接近记录的速度字段close_approach_data[].orbiting_body绕行天体通常是Earth详情页「绕什么轨道飞行」字段close_approach_data[].close_approach_date_full带时分秒的接近时间详情页「最大接近时间」neo_reference_id/id唯一标识路由参数与购物车条目主键一个值得注意的细节close_approach_data是数组——同一颗小行星可能有多次历史/未来的接近记录。这正好支撑了两个页面结构列表页可以按「最近一次接近」聚合展示详情页则遍历该数组渲染完整的接近历史表。距离单位换算公里与月球距离LD原文要求提供「公里 / 月球距离」两种距离显示模式。NeoWs 的miss_distance本身就以kilometers、lunar、astronomical、miles四种单位同时返回所以最稳妥的做法是直接读取接口里的lunar值而不是在客户端自行换算。若实现者选择自行换算需要记住约数1 月球距离LD≈ 384 400 公里即lunar kilometers / 384400。单位切换属于典型的 UI 状态建议用useState或 URL 查询参数保存当前单位km | lunar放在列表页顶部作为开关toggle把所有距离展示收敛到一个纯函数组件如Distance value{km} unit{unit} /中避免在多个卡片里重复换算逻辑切换单位时不重新请求 API只在渲染层换算保证体验流畅。技术选型与工程搭建原文档给出的技术约束非常明确这也是本次任务最重要的「评分表」框架Next.js若用 React 则必须自行实现 SSR因为要求是「也接受 React SSR」的方案状态管理「不推荐使用 Redux」。这意味着应优先选择 React 内置方案——Context useReducer或Context useState也可以配合 SWR / TanStack Query 做服务端状态管理样式CSS Modules.module.css满足组件样式隔离避免全局样式污染语言TypeScript 是加分项但对 Junior 来说几乎是默认选择交付git 仓库GitHub / Bitbucket / GitLab 任选需要包含完整提交历史与清晰的 README。工程结构可以这样组织示意armageddon/ ├── app/ # Next.js App Router 页面 │ ├── page.tsx # 主列表页无限滚动 │ ├── order/success.tsx # 订单成功页 │ └── asteroid/[id]/page.tsx# 小行星详情页动态路由 ├── components/ │ ├── AsteroidCard/ # 列表卡片 module.css │ ├── CartPanel/ # 购物车悬浮面板 │ ├── Distance/ # 距离单位换算组件 │ └── AsteroidIcon/ # 尺寸映射图标 ├── lib/ │ ├── api.ts # NeoWs 封装 │ └── types.ts # NeoWs 响应类型定义 ├── store/ │ └── cart-context.tsx # 购物车 Context替代 Redux └── .env.local # NASA_API_KEYAPI Key 通过环境变量注入例如在.env.local中配置NASA_API_KEYYOUR_API_KEY主列表页从当前日期到「无限」的滚动分批加载原文对主列表页的描述是「从当前日期起的小行星接近地球列表……滚动时分批加载порциями」。NeoWs 的feed接口天然适合作为「分批」的单位——它要求传入start_date与end_date格式YYYY-MM-DD一次返回该日期窗口内的接近数据。因此「无限滚动」可以这样设计维护一个滑动日期窗口例如每次请求 7 天[today, today6]首屏请求第 1 个窗口在列表底部放置一个哨兵元素sentinel用IntersectionObserver监听它进入视口哨兵可见 → 请求下一个 7 天窗口 → 追加渲染 → 更新哨兵位置如此循环即形成「从当前日期到无限」的伪无限流每次请求之间要处理 loading 与 error 状态防止滚动时重复触发请求。示意实现客户端组件App Routeruse client; export function AsteroidFeed() { const [approaches, setApproaches] useStateCloseApproach[]([]); const [windowStart, setWindowStart] useState(() todayISO()); const [loading, setLoading] useState(false); const sentinelRef useRefHTMLDivElement(null); const loadNextWindow useCallback(async () { setLoading(true); const next await fetchNeoFeed(windowStart, 7); // 7 天一批 setApproaches(prev [...prev, ...next.approaches]); setWindowStart(next.endDate); setLoading(false); }, [windowStart]); useEffect(() { const observer new IntersectionObserver( entries { if (entries[0].isIntersecting !loading) loadNextWindow(); }, { rootMargin: 200px } ); if (sentinelRef.current) observer.observe(sentinelRef.current); return () observer.disconnect(); }, [loadNextWindow, loading]); return ( div {approaches.map(a AsteroidCard key{a.id} approach{a} /)} div ref{sentinelRef} className{styles.sentinel} {loading ? Загрузка... : } /div /div ); }lib/api.ts中封装请求时需要注意 feed 接口的返回结构near_earth_objects是一个按日期分组key 为日期字符串的对象而非数组所以取数据时需要拍平Object.values(data.near_earth_objects).flat()。这是实现中非常容易踩坑、也最能体现对 API 理解程度的一个点。卡片上每个信息点都对应一个明确的字段见数据模型表名称用name危险度用is_potentially_hazardous_asteroidPHA 为 true 时给出红色/危险样式距离用miss_distance最大接近日期用close_approach_date。尺寸图标规则阈值由你定义原文明确「критерий малый-большой выбрать самостоятельно」——小/大的判定标准由候选者自己定义这正是体现产品判断力的地方。推荐做法以estimated_diameter.kilometers.estimated_diameter_max为基准定义阈值常量例如 0.1 km视为「小」、0.1 ~ 1 km视为「中」、≥ 1 km视为「大」也可按直径直接映射 2~3 档图标把阈值定义写成带注释的常量让评审者一眼看到你的决策逻辑。例如// 阈值自行定义0.1km 以下为小1km 以上为大中间为中等 export function sizeCategory(maxDiameterKm: number): small | medium | large { if (maxDiameterKm 0.1) return small; if (maxDiameterKm 1) return large; return medium; }购物车与订单流程Context 替代 Redux原文对购物车的要求有三层列表卡片上的「订购」按钮把对应接近加入购物车购物车是列表页上的悬浮面板плашка常驻可见点击「发送」后跳转订单成功页页面列出所有已订购的接近。由于明确「不推荐 Redux」最贴合 React 惯例的做法是Context useReducer。购物车条目以「接近记录」为最小单位因为同一小行星可能有多次接近订购的是某一次接近而非整颗小行星——这符合原文「заказанные сближения已订购的接近」的措辞。示意// store/cart-context.tsx type CartItem { key: string; // ${neoReferenceId}:${closeApproachDate} name: string; closeApproachDate: string; missDistanceKm: number; }; type CartState { items: CartItem[] }; type CartAction { type: add | remove | clear; payload?: CartItem }; const cartReducer (state: CartState, action: CartAction): CartState { switch (action.type) { case add: // 用 key 去重同一接近不可重复订购 if (state.items.some(i i.key action.payload!.key)) return state; return { items: [...state.items, action.payload!] }; case remove: return { items: state.items.filter(i i.key ! action.payload!.key) }; case clear: return { items: [] }; default: return state; } };关键交互细节去重以neoReferenceId closeApproachDate组合为 key避免同一接近被重复下单幂等的发送动作点击「发送」时把购物车内容写入订单可通过路由传参、Context 或本地存储传递给成功页随后clear购物车并router.push(/order/success)成功页展示订单号如有与全部已订购接近的列表可从购物车快照直接渲染无需再请求 API。小行星详情页动态路由 接近历史表详情页通过动态路由实现App Router 下为app/asteroid/[id]/page.tsx其中[id]取neo_reference_id或 NeoWsid。该页从单对象接口拉取小行星完整档案并展示原文要求的字段对应数据相对地球的速度close_approach_data[].relative_velocity.kilometers_per_second或kilometers_per_hour与地球最大接近的时间close_approach_data[].close_approach_date_full含时分秒距离close_approach_data[].miss_distance同样支持公里/月球距离切换绕什么轨道飞行close_approach_data[].orbiting_body详情页上半部分是「小行星档案」名称、尺寸、危险度、绝对星等absolute_magnitude_h等下半部分是close_approach_data数组的完整表格——因为一次接近就是一行天然适合用table或卡片列表渲染。原文特意说明「详情页的设计由候选者自行决定」所以这里是展示设计能力的自由发挥区但信息完整性是硬指标速度、时间、距离、轨道四要素缺一不可。由于主列表页的「订购」发生在任意接近记录上购物车与详情页之间也可以联动详情页的每条接近记录同样可以加购两处共用同一个 CartContext状态天然一致。加分项落地TypeScript、测试、部署与 README原文档列出了四个加分项任何一个都能显著提升评分TypeScript为 NeoWs 响应定义完整类型NeoFeedResponse、NearEarthObject、CloseApproach等让字段映射、单位换算、购物车去重全部获得编译期保护测试优先覆盖纯函数与核心交互——单位换算公里→月球距离、sizeCategory阈值判定、cartReducer 的 add/remove/clear 与去重逻辑组件测试用 Vitest/Jest React Testing LibraryAPI 层用 mock 拦截避免依赖真实网络部署部署到任意免费托管平台如 Vercel提交时在 README 中给出线上地址让评审者可以直接体验无限滚动与购物车流程README除常规的安装与启动命令外还应写明NeoWs API Key 的获取与.env.local配置、页面路由清单、单位换算规则、小/大图标阈值定义——这些「设计决策」是 Junior 候选人与众不同的关键。验收清单对照原文逐条自查提交前把这份清单逐项打勾它同时就是面试官眼中的评分表主列表从当前日期开始滚动时分批加载而非一次性拉全量每条记录包含名称、尺寸、危险度、距地距离、最大接近精确日期小行星图标随尺寸变化且阈值定义有据可查注释/文档说明距离可在公里与月球距离间切换切换不触发重新请求卡片「订购」按钮 → 列表页悬浮购物车面板 → 发送 → 订单成功页列出全部已订购接近详情页包含小行星档案 全部接近记录速度/时间/距离/轨道四要素自适应布局在移动端可用基于 Next.js或 React SSR无 Redux样式为 CSS Modules在 Chrome / Firefox / Safari / Edge 最新版验证渲染以 git 仓库交付含 TypeScript、测试、部署地址与 README加分项。需要特别说明的是本仓库仅提供任务描述与索引见 README.md 中 Квартирка 条目不含任何参考答案——这意味着无限滚动、单位换算、购物车去重、详情页路由这些环节没有「标准解」评审关注的是你的实现思路、代码组织与对 API 数据的理解深度。把上文的功能拆解当作需求规格书剩下的就是你的设计与编码了。赞分享教程【免费下载链接】ru-test-assignmentsТестовые задания для самостоятельного выполнения от разных it компаний项目地址https://gitcode.com/gh_mirrors/ru/ru-test-assignments点击查看免费下载相关推荐Market Intelligence 测试任务实战用 Python 构建 Avito 广告数量监控 JSON API 服务Market Intelligence 测试任务实战用 Python 构建 Avito 广告数量监控 JSON API 服务 导读 本篇技术指南围绕仓库中 b教程Agro.Club Junior 前端测试任务实战用 React CRA 实现带 API 筛选与搜索的商品列表组件Agro.Club Junior 前端测试任务实战用 React CRA 实现带 API 筛选与搜索的商品列表组件 导读 本篇文章围绕 Agro.Club教程Appstorespy Junior Backend 测试任务全解用 Python 3 Django GraphQL 构建注册与异步文件处理服务Appstorespy Junior Backend 测试任务全解用 Python 3 Django GraphQL 构建注册与异步文件处理服务 本篇教程上一篇3步搭建你的知识网络开源Zettelkasten卡片盒笔记法实践指南下一篇终极开源三国杀网页版零部署即玩的完整跨平台解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考