前端-远程-1个月

项目编号：【187026】
、 项目概述（Project Overview）
• 定位：一个基于特定 ID 验证的资产流动性数据可视化展示平台。
• 终端：Mobile-First（移动端优先），适配所有主流手机浏览器及微信内置浏览器。
• 设计风格：High-End Fintech（高端金融科技）。采用极简、暗黑模式，强调数据权威感。
二、 功能模块详述（Functional Specifications）
1. 动态鉴权模块（Authentication Gate）
• URL 参数解析：系统需自动抓取 URL 中的 unit_id 参数（例如 ?id=A7F932）。
• 二次校验：进入首屏后，用户必须输入 6 位数字验证码（Security Code）以解锁数据。
• 交互逻辑：输入正确后，触发一个 1.5s 的 “数据链检索/资产比对” 动效（由 CSS/Lottie 实现）。
2. 数据看板模块（Data Dashboard）
• 数据绑定：根据 unit_id 从 JSON/数据库读取并渲染以下字段：
• 核心指标 A：总额度（Face Value）——采用大字号加粗显示。
• 核心指标 B：核定贴现净值（Liquidity Value）——动态增长动效显示。
• 核心指标 C：风险敞口评级（Risk Grade）——采用 仪表盘（Gauge Chart） 或雷达图可视化呈现。
• 图表组件：需集成 ECharts 或类似轻量库，展示一个简单的“资产价值波动曲线”。
3. 转化触发模块（CTA - Call to Action）
• 动作 A：意向核销。点击后弹出结构化表单，收集用户联系方式并生成“预约编号”。
• 动作 B：人工介入。点击直接跳转拨号页面或拉起企业微信二维码。
• 动作 C：文档下发。点击触发 PDF 预览或发送至指定邮箱的逻辑。
三、 技术架构与性能要求（Non-Functional Requirements）
1. 响应速度（Latency Control）
• 白屏时间：首屏渲染（LCP）必须控制在 1.0s 以内。
• 资源压缩：所有图片及图标采用 WebP/SVG 格式，代码需进行混淆和压缩。
2. 数据追踪（Behavioral Tracking）
• 埋点要求：需集成行为分析工具（如采集用户停留时长、按钮点击率、滑屏深度）。
• 后端记录：每一次成功的 ID 验证及按钮点击，需同步向后端接口发送一条 Log。
3. 安全性（Security）
• 前端防爬：禁止右键点击和代码审查控制台开启。
• 脱敏逻辑：在前端不显示完整的敏感 ID 信息，仅展示部分掩码（如 A7F***32）。
四、 交付产物清单（Deliverables）
1. 完整源代码：托管至我方 GitHub 私有仓库。
2. 构建后文件：可直接部署于阿里云服务器的生产包（Build Artifacts）。
3. 技术文档：包含《环境部署手册》和《接口定义文档（Swagger 格式）》。
4. 设计原稿：Figma 或 Adobe XD 的高保密设计源文件。


附件：技术开发规格与服务等级约定 (SLA)
第一章：系统视觉与交互标准
1. **视觉风格**：全站采用 **极简主义（Minimalism）** 及 **暗黑模式（Dark Mode）**。UI 还原度需达到设计稿 95% 以上，确保在 2026 年主流移动设备上的视觉一致性。
2. **核心组件**：
* **动态看板**：数值翻滚增长动效（CountUp），加载时间不得超过 1.2s。
* **动态图表**：集成高保真仪表盘（Gauge）与资产价值波动曲线（Line Chart）。
3. **仪式感逻辑**：
* 扫码后强制执行 1.5s-2s 的“系统自检/初始化”动效。
* 进入核心数据前需通过 **6 位数字安全门（Verification Gate）**。
### 第二章：基础设施与安全架构
1. **环境部署**：
* **数据库**：采用阿里云 **RDS MySQL 8.0 高可用版**（配置：1核 2GB），严禁开启公网访问。
* **存储**：法律及权属证明文书须存储于 **阿里云 OSS**。采用 **STS（临时安全令牌）** 方案，确保文件下载链接的时效性（≤5 分钟）。
2. **网络安全**：
* **SSL 证书**：必须部署 **OV（企业型）证书**。
* **通信加密**：强制开启 **HSTS** 协议，全站 TLS 1.3 加密传输。
3. **权限隔离**：技术方仅拥有“维护分支（Maintenance Branch）”权限，正式服务器（Production）的 Root 密码及数据库管理权限由我方统一管控。
### 第三章：数据处理
1. **数据导入（核心需求）**：
* 后台须具备通用的 **CSV/Excel 动态映射导入功能**。
* 系统应支持通过 Excel 表头自动生成数据库对应字段（如 Val_1, Field_A），实现业务逻辑与底层代码的转换。
2. **合规闭环**：
* 上传模块须关联《资产评估数据处理协议》及《隐私协议》勾选框。
* 后端须实时记录用户授权的 **IP 地址**、**时间戳** 及 **设备指纹**，形成完整的审计闭环。
### 第四章：质量保证 (QA) 与验收标准
1. **兼容性义务**：确保在 iOS (Safari) 及 Android (微信内置浏览器) 近三代主流版本中无功能性故障。
2. **并发性能**：支持 3,000 个 Unit_ID 的并发查询请求，响应延迟（RTT）在 4G 网络下不得高于 300ms。
3. **代码交付**：交付物须包含：
* 前端经混淆处理（Obfuscated）后的全量生产代码。
* 完整的《数据库字典》及《环境部署运维手册》。
第五章：售后质保与长期维护
1. **质保期**：自系统上线之日起，提供 **90 天免费质保**。范围涵盖逻辑 Bug、UI 错位及数据读取异常。
2. **响应等级 (SLA)**：
* **致命故障（S1，如系统宕机）**：2 小时内远程响应，4 小时内提供临时恢复方案。
* **常规故障（S2，如显示瑕疵）**：24 小时内完成修复。
3. 后续任何维护操作均须在 影子（测试）服务器上进行，严禁在包含真实业务数据的正式库中直接调试代码。