UUSKINS — 全球 CS2 饰品 B2C+C2C 跨境交易平台（Next.js SSR）

技术信息

语言技术
HTML5、CSS、React、TypeScript、前端系统类型
Web行业分类
游戏、电商

作品详情

行业场景

面向全球 CS2（《反恐精英 2》）玩家的饰品交易平台，同时覆盖 B2C 官方出售与 C2C 玩家互相交易两种模式。业务链路包括：饰品浏览与检索、下单购买、C2C 个人出售与店铺管理、账号租赁、跨境钱包充值、KYC 实名认证。用户来自全球多个国家和地区，需要多语言、多币种、多本地支付渠道支持，并要应对 Steam 库存实时变动、饰品价格波动、跨境合规（KYC/AML）等场景特有的复杂度。项目采用服务端渲染以保证 SEO 与首屏性能，支持 22 种语言的 SEO 友好路由。

功能介绍

1. 交易核心：饰品商城浏览/筛选、下单购买、订单与售后流程；C2C 个人出售、商品上下架与改价、店铺状态管理。
2. Steam 对接：浏览器插件实现 Steam 登录拦截验证；Steam 库存无限滚动加载，应对单账号海量饰品的渲染性能问题。
3. 账号租赁：饰品外的账号租赁交易模块。
4. 跨境钱包充值：多币种汇率换算，接入 Visa / Mastercard / 本地支付等多支付渠道（Airwallex）。
5. KYC 实名认证：集成 Sumsub，实现自助持卡人验证的完整流程。
6. 国际化：22 种语言，基于 next-intl 的自动化翻译流水线，新增语言只需配置映射关系。
7. 自动化 SEO：按语言/类目分片生成 Sitemap、Google Search Console 自动推送、OpenGraph 标签自动填充。
8. 全链路监控：接入 OpenTelemetry + 阿里云 ARMS RUM，覆盖接口请求、订单转化、CSP 安全策略，P0/P1 指标报警。

项目实现

技术栈：Next.js 16（App Router）、React 19、TypeScript、Tailwind CSS 4、Zustand、TanStack Query v5、next-intl、Docker、Nacos、OpenTelemetry。规模约 1100+ TS/TSX 文件、259 个组件、49+ 页面路由、22 种语言。

关键实现：

全局统一 API Client：Token + Ticket 双认证自动注入、统一错误码处理、OpenTelemetry TraceId 前后端贯穿透传。
22 语言国际化体系：基于 next-intl 搭建自动化翻译流水线，SEO 友好的多语言 Slug 路由，语言/类目分片的自动化 Sitemap 与 GSC 推送。
Steam 库存无限滚动：针对海量饰品做虚拟列表 + 分页加载优化，解决首屏与滚动卡顿。
跨境支付与 KYC：对接 Airwallex 多渠道支付与多币种汇率换算，集成 Sumsub 完成自助 KYC 持卡人验证全流程。
可观测性：OpenTelemetry + 阿里云 ARMS RUM 全链路监控，覆盖接口耗时、订单转化漏斗、JS 异常、CSP 报警。
工程化：Docker 容器化部署，Nacos 配置管理。

个人职责：负责 C2C 个人出售市场核心模块、跨境钱包充值全流程、国际化与 SEO 流水线的设计与落地。