← 返回封面 打开原型

PC 全链路说明文档

与原型图分开。本文按「背景 → 目标 → 范围 → 页面 → 数据 → 业务流程 → 状态 → 交互 → 异常 → 视觉 → 技术 → 验收」组织。实现以 UAT 真机 https://newuat-sportpc.uatsptcn.com/ 为准；本原型只演示 PC 主链路。矩阵只收录已按真机核对过的行，未在真机打到的空/加载/失败帧不作为本轮验收。

1. 背景

随着平台业务持续发展，现有前端页面在视觉表现、页面布局、交互体验及信息呈现等方面逐渐无法满足当前业务需求，因此做前端改版。

2. 目标

1. 视觉统一：统一全站页面视觉规范及组件样式，提升产品整体形象及一致性。
2. 体验优化：优化页面布局、信息层级及交互状态，降低用户操作成本，提升使用体验。
3. 架构优化：规范 PC 页面及通用组件，为后续业务扩展及持续迭代提供基础。

3. 范围

本次需求范围为现有 PC 前端页面的视觉、布局、交互改版（不自适应 H5），核心业务规则原则上不变；涉及新增功能、业务规则调整及后端逻辑变更的内容不纳入本次前端改版范围。视觉与交互以 UAT 真机为准，不以 Axure 多出来的帧为准。

4. 页面

点击可打开对应原型。弹窗以真机为准；矩阵里真机未打到的行不要当缺陷单。

模块	画面	打开原型

5. 数据

演示账号

角色	账号	密码	手机	登录后
会员	testtom1995	zz123123	15698669866	会员首页 + 平台公告；余额 367.92；消息 3。提现微信码默认未绑，绑完本会话显示已添加
主播	zuoyi01	aa123456	13800001111	主播首页 + 平台公告；余额 100.00；消息 2；侧栏德甲瓷砖、无个人中心项

短信 / 找回密码验证码固定 123456。极验：拖动滑块到最右侧通过（对应真机拼图）；中途松开为失败，点「重新验证」重来；点 × / 蒙层关窗，回到原登录/注册/发码窗，表单保留，登录钮从「登录中...」恢复为「登录」。

校验规则（实现必须一致）

字段	规则	用户看见的红字
登录账号	6–20 位数字或字母	空：请输入账号；格式：账号由6-20位数字与字母组成
登录/新密码	8–20 位数字或字母	空：请输入密码；格式：密码由8-20位数字与字母组成
注册账号	6–12 位数字或字母	请输入6-12个字母及数字组成的账号
手机号	1 开头 11 位	请输入正确手机号 / 请输入手机号
验证码	6 位；演示环境必须 123456	未输完：请输入验证码；错：验证码错误
昵称	必填，≤12 字	请输入昵称 / 超出校验格式
生日	可选；年龄不得 <15	生日设置小于15岁
反馈内容	必填，0–100 字	请输入内容 / 内容 0-100
充值金额	必须 >0 的数字	请输入金额；整页另有低于最小金额 / 超过单笔限额
开播	赛事+标题必填	请选择您要关联的赛事 / 请填写直播的标题
改登录密码	新旧不得相同	Toast：密码相同，请重新设置

进馆结果（本号）

场馆	已登录结果
V体育转账	进 V体育整页
其它体育（DB/FE/IM/沙巴/FB）	Toast 游戏参数初始化失败
棋牌全部	Toast 游戏参数初始化失败
彩票全部	Toast 获取游戏token失败
电子捕鱼 / 电竞	进电子大厅
真人全部	进三方落地页，不画馆内
IM 体育等非 V 体育馆	「进入游戏」可点；已登录 Toast「游戏参数初始化失败」。本号飞出层未出现置灰「维护」帧，不造置灰
游客点任何进入游戏	账号登录弹窗，无失败 Toast

6. 业务流程

1. 游客浏览：无直播 Tab；足球/篮球均为卫星卡片（直播中+未开赛），足球另有直播画面；点登录/注册/进馆/更多比赛/盘口 → 登录窗；点充值 → Toast 后再登录窗。
2. 账号登录：空钮置灰 → 填合法账号密码 → 钮变「登录中...」并出极验滑块 → 拖到右侧通过。匹配演示账号则进对应首页+公告；不匹配回到登录窗（钮恢复「登录」）+ Toast/红字「账号或密码错误」。关极验或失败重试后钮必须恢复，不能停在「登录中...」。
3. 短信登录：合法手机 → 获取验证码（极验+倒计时+Toast 发送成功）→ 6 位码 → 极验 → 进首页+公告。关发码极验回到短信窗。
4. 注册：账号或手机号路径校验通过 → 极验 → 会员首页+公告。关极验回到注册窗。
5. 找回密码：空账号「下一步」置灰 → 账号存在进第 2 步 → 必须先点获取验证码并过极验 → 再填 123456 才能下一步 → 新密码合法且一致 → Toast 密码重置成功 → 登录窗。未发码时第 2 步「下一步」置灰。
6. 进 V体育：会员点更多比赛 / 飞出层 V体育进入游戏 / 盘口立即前往 / VIP 前往投注 / 热门体育，一律落到 LIVE 滚球列表，不停留在上次点过的「我的关注」。游客点这些入口出登录窗。
7. 直播下注：会员点赔率 →「前往三方投注」→ 立即前往 → V体育 LIVE。侧栏进馆不走这张窗。
8. 直播跟单：加入聊天后点跟单 → 跟单提示 → 确认跟单 →「前往三方投注」→ 立即前往 → V体育 LIVE。取消回聊天。游客点跟单出登录窗。
9. 充值：首页弹窗选通道填金额提交 → C体育待支付详情（无 Toast「订单已提交」）；未绑手机走绑定拦截。
10. 提现：未绑显示「请先添加微信收款码」→ 添加并提交绑定 → 回到提现窗显示「wx****1234 已添加」+「更换」→ 填金额立即提现 → C体育处理中。已绑不再出现「请先添加」。
11. 会话过期：Toast「登录已过期，请重新登录」+ 登录窗。

7. 状态

每个模块必须按下面 8 列写完。不存在的列填「无」，禁止只写正常、禁止「其他异常」。

列	含义
正常状态	默认有数据/可操作时用户看见什么
空状态	无数据时看见什么；没有空数据则「无」
加载状态	请求中看见什么（转圈「加载中」/按钮置灰/倒计时）
异常状态	该模块具体失败文案，一条条写死
禁用状态	置灰、不可点、不渲染时看见什么
点击后状态	必须含操作前、操作中、操作后
Toast	底部短提示原文；没有则「无」
Popup	接着打开的弹窗名；没有则「无」

全表见文末矩阵。统计：

8. 交互

下列链路的前/中/后与矩阵「点击后状态」列一致，实现时两边都要对上。

登录（账号）

操作前：登录窗，空值时登录钮置灰不可点。操作中：格式合法则钮置灰、文案「登录中...」，叠极验滑块。操作后：滑块通过后要么进首页+公告，要么回到登录窗（钮恢复「登录」）并 Toast「账号或密码错误」。关极验或失败重试，钮同样恢复，表单值保留。

获取验证码

操作前：「获取验证码」可点。操作中：极验；通过后按钮改为「59秒后重试」递减。操作后：Toast「验证码发送成功」，验证码框可输入；倒计时结束按钮恢复。

游客点充值

操作前：右浮标或 Banner 相关充值入口。操作中：先出 Toast「请先登录账号，再进行充值」。操作后：账号登录弹窗。

会员点盘口

操作前：投注 Tab 赔率高亮可点。操作中：按下。操作后：「前往三方投注」窗；取消回投注 Tab；立即前往进 V体育 LIVE 滚球。

进馆

操作前：飞出层「进入游戏」或首页「更多比赛」。操作中：按钮按下。操作后：V体育转账进 LIVE 滚球（即使刚才在台内点过「我的关注」）；其它馆按数据表 Toast 或落地。本号飞出层未见置灰维护馆。

直播跟单

操作前：已入房，聊天工具条可见「跟单」。操作中：出跟单提示。操作后：确认 → 前往三方投注窗 → 立即前往进 V体育 LIVE；取消 → 窗关，仍在聊天。

提现绑码

操作前：提现 Tab，未绑时「请先添加微信收款码」。操作中：添加收款码并提交绑定。操作后：回到提现窗，提示变为已添加，可更换；再点立即提现进处理中。

资料保存 / 反馈 / 回拨 / 开播

操作前：表单可填。操作中：校验失败出红字且按钮可再点；通过则按钮置灰。操作后：对应成功 Toast，窗或页按矩阵关/留。

消息删除

操作前：已选消息或点删除已读。操作中：确认弹窗。操作后：确定 → Toast「删除成功」并刷新列表；取消 → 列表不变。

9. 异常

业务异常必须用下列原文（或矩阵里该行的红字），不要汇总成「失败」。系统页是造数入口，不是接口兜底文案。

场景	用户看见
账号密码不匹配	Toast + 红字：账号或密码错误
找回密码账号不存在	红字：账号不存在
验证码错	红字：验证码错误
验证码发送失败	Toast：验证码发送失败，不进倒计时
极验失败	窗内：验证失败，请重试
账号已存在 / 手机号已注册	Toast：账号已存在 / 该手机号已注册
游客充值	Toast：请先登录账号，再进行充值
棋牌进馆失败	Toast：游戏参数初始化失败
彩票进馆失败	Toast：获取游戏token失败
其它体育进馆失败	Toast：游戏参数初始化失败
客服通道失败	Toast：客服通道暂不可用
聊天空发送	Toast：请输入内容
送礼余额不足	Toast：余额不足
加入聊天失败	Toast：加入聊天失败
余额刷新失败	Toast：余额刷新失败
改密新旧相同	Toast：密码相同，请重新设置
原密码错误	Toast：原密码错误
未绑手机点提现密码	Toast：请先绑定手机号
会话过期	Toast：登录已过期，请重新登录 + 登录窗
路由不存在	404 整页 + 在线客服
全站维护	系统维护中整页
地区限制	当前地区无法访问整页
列表接口失败	该区域「…加载失败」或「查询失败」+「重试」，不要用笼统失败

10. 视觉

• PC only，主栏最小宽度按现网 1280 思路，不自适应 H5。
• 默认夜间；侧栏可切日间。
• 首页：Header 通栏在侧栏之上；热门推荐用完整图卡；风采四卡等宽，悬停只拉宽当前卡；直播收起按钮在视频列底栏右缘；视频框内右下角有全屏按钮；投注盘口红升绿降。
• 登录左图、侧栏瓷砖跟 UAT 写死（会员法甲、主播德甲）。
• 其它模块页目前多为结构占位；视觉以 UAT 为准，下一阶段按本矩阵逐页改，禁止用裁切拼贴冒充整模块。
• Toast：底部居中深底白字，约 2.2 秒消失。
• 表单错误：字段下方红字，不是 Toast（除非矩阵写了 Toast）。

11. 技术

• 本地：pc-chain 目录执行 node serve.js，打开 http://127.0.0.1:8765/。改 CSS/JS 后 Ctrl+F5。
• 封面是 index.html。原型是 hash SPA（proto.html#/...），说明是 docs.html。旧链接 index.html#/... 会跳到原型。
• 角色 query：role=guest|member|anchor；弹窗 m=；飞出层 fly=。造数条默认隐藏，加 bar=1 才显示空/加载/失败开关。说明文档在顶栏登录 / 充值按钮左侧。
• 生产实现应对接真实极验、短信、支付、进馆 token；演示号与固定验证码仅原型。V体育真机是新标签，原型 #/vsport 仅演示。
• client-prototype/ 不是本轮产品真相。

12. 验收

• 实现与真机不一致时以真机为准，不以矩阵里 Axure 多出来的行（送礼面板、已绑手机登录成功独立窗等）为准。
• 演示号跑通第 6 章链路；游客充值 Toast「请先登录账号，再进行充值」后再出登录窗；棋牌/彩票 Toast 原文正确。
• 游客无直播 Tab；已结算与未结算同一套表；今天与七天内已结算同一布局。
• 登录后悬停头像出现真机同款下拉（充值/提现 + 个人中心各项 + 退出）；点用户名进资料。无「已绑手机登录成功」独立窗。
• 立即充值成功进 C体育待支付，不出现 Toast「订单已提交」。
• 首页视觉回归：收起不伸到投注列下；风采悬停不把整行挤乱。视觉以 UAT 为准。

怎么跑通（演示）

操作	输入对了	输入错了
账号登录	testtom1995 / zz123123 → 拖滑块到右侧 → 会员首页+公告；zuoyi01 / aa123456 → 主播号。关滑块后钮恢复「登录」，可再点	空钮置灰；格式红字见数据表；不匹配 Toast「账号或密码错误」，钮恢复「登录」
短信登录	15698669866 + 123456 → 会员	手机红字「请输入正确手机号」；码错「验证码错误」
注册	6-12 新账号 + 8-20 密码，完成验证 → 已登录首页	未过校验按钮置灰+红字
找回密码	演示账号 → 获取验证码（过极验）→ 123456 → 新密码合法 → Toast「密码重置成功」	空账号下一步置灰；未发码下一步置灰；账号不存在；验证码错误；格式失败；两次不一致
游客充值 / 进馆	—	充值先 Toast 再登录；进馆直接登录窗
会员进 V体育	更多比赛 / 进入游戏 / 立即前往 → LIVE 滚球，不进「我的关注」空页	—
直播跟单	加入聊天 → 跟单 → 确认跟单 → 立即前往 → V体育 LIVE	游客点跟单出登录窗；取消回聊天
提现绑码	请先添加 → 提交绑定 → 窗显示已添加 → 立即提现 → 处理中	未绑点立即提现仍去添加
棋牌 / 彩票	—	游戏参数初始化失败 / 获取游戏token失败

仍按口径不实现的缺口

【页面 × 模块 × 状态矩阵】

格式：页面 | 模块 | 正常状态 | 空状态 | 加载状态 | 异常状态 | 禁用状态 | 点击后状态 | Toast | Popup。筛选只过滤页面名和模块名。