我们正在寻找一位全职前端开发人员，负责设计并构建我们高性能交易平台面向用户的部分。你将帮助打造清晰且数据密度高的界面，使交易员和分析师能够更高效、更有效地开展工作。

你将与后端开发团队及项目经理紧密协作，交付整合良好的系统。该岗位的重要部分在于你能与团队坦诚讨论解决方案思路、取舍、局限性以及优缺点——而不只是照搬某种固定模式或某个库。

## 主要职责
– 开发并维护交易平台的前端应用。
– 与后端开发人员和项目经理协作，确保各系统之间的顺畅集成。
– 设计多页面布局、菜单与工作流，在可用性与效率之间取得平衡。
– 参与塑造交易平台、性能与风控管理器以及回测引擎的设计与用户体验。
– 构建并优化图表与数据可视化功能，使用如 TradingView 或 D3.js 等库来支持多种图表类型（包括表格与多序列图表套件）。
– 持续提升 UI/UX 的清晰度、速度与直观导航体验。

## 任职资格
– 良好的沟通能力，能够与开发人员、项目经理及业务相关方有效协作。
– 强大的设计直觉——在简洁与高效之间取舍，并能将复杂需求转化为清晰、易用的界面。
– 了解金融系统或交易相关概念者优先。

## 核心技术栈（必需）
– React 18 + Next.js（App Router），TypeScript，TailwindCSS。
– 针对高频数据具备扎实的状态管理能力（例如 Zustand、Redux Toolkit、useSyncExternalStore）。

## 实时数据与性能
– 有使用 WebSockets/SSE 的实际经验，包括断线重连/退避、带鉴权的 socket 连接，以及主题重新订阅。
– 能够实现背压（backpressure）、缓冲（buffering）、合并（coalescing）与窗口化（windowing），以避免每分钟数千次更新导致 UI 卡顿或“抖动”。
– 有数据虚拟化经验（例如 react-virtualized、react-window），用于大表格（如订单、持仓、成交记录）。
– 熟悉 Web Workers/OffscreenCanvas 及消息传递，确保主线程保持响应。
– 理解延迟预算，并能使用 React DevTools 与浏览器性能工具进行帧时间（frame-time）分析与评估。

## 图表与可视化
– 熟悉并具备实际经验的专业图表库（例如 TradingView Charting Library、Lightweight Charts、Highcharts、D3）。
– 能实现如最佳买卖价/买卖盘深度/最新 OHLCV/订单与持仓标注等实时叠加效果。
– 支持多面板布局（价格、成交量、指标），并提供同步十字准线与共享的时间刻度。

## 架构与数据访问
– 客户端缓存与失效策略（例如 TanStack Query/React Query）。
– 基于模式（schema）的仪器与交易场所（venues）驱动 UI。
– 在大体量 Next.js 页面中使用 Error Boundaries、Suspense，以及渐进式水合/流式加载（progressive hydration/streaming）。

## 认证、安全与权限
– 扎实理解 OIDC/JWT 流程、令牌刷新/轮转，以及 WebSocket 鉴权机制。
– 基于角色的功能开关（只读 vs 具备交易权限）。

## 测试、质量与可靠性
– 为关键的转换/解析编写单元测试（例如使用 Playwright/Vitest 覆盖端到端或交互流程）。
– 具备使用特性开关（feature flags）、分阶段发布（staged rollouts）以及用 Sentry/OpenTelemetry 进行监控的经验。

## 加分项
– 有类似桌面端界面经验（例如拖拽停靠面板、可调整大小的网格）。
– 接触过 WASM 用于重计算（例如指标计算）。
– 了解 FIX/加密交易场所相关细节，如最小跳动价（tick size）、最小下单量（lot size）与交易时段行为。

## 筛选问题
请将每个问题的回答控制在 4–8 句话之间；如内容清晰，允许使用要点列表。

1）**UI 迁移（hrzk → Next.js）：**
从 `hrzk.html` 中选择 ONE 个模块（例如：Orders+Trades、持仓表、权益/回撤）。说明你将如何把它迁移到 React 18 + Next.js（App Router）+ TypeScript + Tailwind。请包含你的文件夹结构，并说明哪些是客户端组件（client components）与哪些是服务端组件（server components）。我们看重你的取舍与理由，而不是唯一“正确”的做法。

2）**实时数据接入：**
说明你如何处理高频更新场景下的 WebSockets/SSE，包括断线重连/退避、鉴权 socket 连接与主题重新订阅。你预计在生产环境中会出现哪些失败情况？

3）**背压 + 防止 UI 抖动：**
假设订单/持仓/成交每分钟都有数千次更新。描述你将如何实现缓冲/合并/窗口化，确保 UI 保持响应性。说明你会如何把它与状态管理（例如 Zustand/RTK/useSyncExternalStore）结合，并结合数据虚拟化（react-window/react-virtualized）。你会测量哪些指标来证明它有效？

4）**图表方案：**
我们需要快速、易读且信息量大的图表（例如权益/回撤、甜甜圈图/柱状图）。从 `hrzk.html` 中选一种图表类型，说明你会使用哪种库、更新频率策略，以及性能风险与对应的缓解措施。

5）**认证 + 角色权限控制：**
解释你将如何处理 JWT/OIDC 令牌刷新与 WebSocket 鉴权，然后实现基于角色的权限控制（只读 vs 交易）。以“取消所有订单”（Cancel All Orders）或“停止/开始执行”（Stop/Start Execution）为例，说明你会在何时隐藏、禁用或展示警告。

6）**远程负责与团队协作：**
分享一个你在远程情况下对不明确任务承担负责的例子。然后说明你会如何与一个小型开发团队协作：你如何提出澄清问题、如何尽早沟通风险，以及如何避免提交“只对本地最优有效”的代码，从而破坏系统其他部分。

## 面试流程预期（Interview Process）
我们的流程主要是异步的，强调真实工作。你会先提交简历与一段简短的结构化申请。入围者会完成一次异步技术筛选。最终候选人将完成一项付费且时间盒（time-boxed）的工作样例，与该岗位匹配。整个流程通常需要 4–6 周。

## 常见问题（FAQs）
– **我需要逐一回答这些问题吗？** 需要。请以开放式格式回答，最好通过求职信（cover letter）方式提交。这是筛选的强制要求。
– **我需要现场面试吗？** 大部分环节是异步的，以减少协调排期的摩擦；现场通话很少。
– **样例工作需要我出镜吗？** 不需要——仅“屏幕录制 + 语音”即可。
– **我可以用哪些工具提交录制内容？** 任何常见的屏幕录制或文件分享工具都可以，只要视频容易观看即可。
– **最终任务是付费的吗？** 是的。最终入围候选人将完成一项付费、时间盒的工作样例。