这是 DJG 前端页面的独立设计实验目录，用来专门调整视觉风格、页面布局和交互体验。
它只包含前端代码，不包含后端、采集、ingest、训练数据和生产进程。这里的改动不会影响主程序，也不会影响 Windows 正在跑的测试。
cd /Users/tu/Desktop/UT/DJG-web-design-lab
npm install
npm run dev -- --host 127.0.0.1 --port 5175打开：
http://127.0.0.1:5175/
- 大胆调整页面视觉风格。
- 重做首页、主播详情、用户查询、数据状态页布局。
- 调整颜色、间距、表格密度、按钮样式、字体层级。
- 修改 mock 数据，让页面更接近真实客户场景。
- 尝试不同设计方案，不担心影响主程序。
- 不改后端算法。
- 不改采集、ingest、checkpoint、Redis、DB migration。
- 不把这里当生产代码直接发布。
- 不在这里接 Windows 正在跑的生产进程。
项目采用三层数据架构，确保未来对接真实后端时页面组件零改动：
┌─────────────────────────────────┐
│ 页面组件 │ App.vue / AnchorDetailView 等
│ 只调用 api/djg.js 的 async 函数 │ 不直接 import 任何静态数据
└──────────┬──────────────────────┘
│ await fetchXxx()
┌──────────▼──────────────────────┐
│ api/djg.js │ 统一 API 入口（当前 → mock）
│ fetchDashboardOverview() │ 未来 → 真实 HTTP 调用
│ fetchAnchorDetail(roomId) │
│ fetchUserLookup(query) │
│ fetchTopCustomers(params) │
│ fetchDataStatus() │
│ fetchTopCustomers() │
│ fetchUserProfile() │
└──────────┬──────────────────────┘
│ transform(rawData)
┌──────────▼──────────────────────┐
│ data/platformDashboard.js │ 纯 transform 函数
│ transformOverview(raw) │ raw API → 页面展示模型
│ transformAnchorDetail(room) │
│ transformUserLookup(users) │
│ transformDataStatus(rooms) │
└──────────┬──────────────────────┘
│
┌──────────▼──────────────────────┐
│ api/mock.js │ 静态 mock 数据
│ data/customerDashboard.js │ 客户训练基准数据
└─────────────────────────────────┘
只需修改 api/djg.js 中的函数实现：
export async function fetchDashboardOverview({ date, range } = {}) {
- await delay(400);
- const raw = { ...dashboardOverviewMock, date };
- return transformOverview(raw);
+ const res = await fetch(`/api/dashboard?date=${date}&range=${range}`);
+ const raw = await res.json();
+ return transformOverview(raw);
}页面组件无需任何改动。
src/api/mock.js：模拟后端返回数据。src/api/djg.js：统一 API 入口，当前指向 mock / demo service，后续替换为真实 HTTP。
src/data/platformDashboard.js：纯 transform 函数，把 API 返回整理成页面展示模型。src/data/customerDashboard.js：客户训练基准数据整理。src/data/vips.json：用户数据中心 mock 数据源，当前抽取自 2026-05-15 训练基准用户榜前 20。
src/app/App.vue：页面入口和视图切换，异步加载数据，含 loading skeleton。src/components/anchor/AnchorDetailView.vue：主播详情页，含柱折组合图（Nice Numbers Y轴）。src/components/users/UserLookupView.vue：用户查询页。src/components/vips/EnjoymentView.vue：高价值用户榜（demo-only 管理模式）。src/components/status/DataStatusView.vue：数据状态页。src/components/dashboard/：首页 MetricGrid、AnchorTable。src/components/layout/：TopNav、DateToolbar。
src/services/vipService.js：大客户 demo 数据访问及持久化服务层，由api/djg.js包装调用，组件不直接依赖。scripts/sync-vips.js：大客户数据一键同步脚本。
src/styles/：全局视觉样式。
主播详情页的分段数据趋势组合图包含：
- 柱状图（收益分布）+ 折线图（弹幕趋势、贵宾走势）叠加显示
- Nice Numbers 算法：Y 轴刻度自动圆整为美观的整数
- 鼠标悬浮交互：垂直指示线 + 深色 Tooltip 浮层
- 可切换图例：点击底部图例可独立显示/隐藏各指标层
项目内置了 2026-05-15 训练基准前 20 用户榜及 demo-only 管理模式，支持检索、分页、动态增删与一键接口同步。
当目标网站数据更新后，只需在终端运行以下命令，即可全自动抓取并格式化全网最新数据：
npm run sync-vips脚本执行完毕后，会自动覆盖更新 src/data/vips.json，且得益于 Vite 的热更新机制，网页在不刷新浏览器的情况下即可完成实时渲染。
在网页中切换至 「🛠️ 管理数据」 后：
- 新增客户：点击「+ 新增大客户」，在弹出的高保真微动效模态框中输入昵称和积分。系统会自动对其进行重排重计算，并存入本地
localStorage。 - 删除客户：点击各行末尾的「删除」可即时剔除相应记录并重置排名。
- 后端对接：当您准备接入自己的后端接口时，只需解开
src/services/vipService.js中syncFromRemote的 fetch 注释，网页中的「🔄 手动同步」即可无缝联通真实服务器。
注意：管理模式（新增、删除、手动同步）为 demo-only 功能，不作为客户版核心功能。
npm test
npm run build项目支持自动抓取斗鱼主播的真实头像与开播状态，并一键同步更新回本地开发数据层。
运行以下命令，脚本将自动拉取真实大盘主播头像并覆写更新 src/api/mock.js，运行完毕后会立即彻底退出进程：
npm run sync-avatars- 头像数据 (Avatar)：工会大客户接口（咚咚呢）限制了越权，因而采用斗鱼公开的 RoomApi (
https://open.douyucdn.cn/api/RoomApi/room/{roomId})。该接口完全公开且稳定。 - 开播时长 (Live Duration)：斗鱼开放接口返回了
room_status（开播状态，1 为开播中）以及start_time（本次开播开始时间）。系统通过 “当前时间 - 开始时间” 的差值计算，即可在开播中 100% 精准得出当前的累计开播时长。
正式前端 worktree 在：
/Users/tu/Desktop/UT/DJG-worktrees/p0b-web-console/apps/web
当这个 design lab 里的页面满意后，优先把这些文件的改动挑回正式 worktree：
src/app/App.vuesrc/styles/src/components/src/api/djg.jssrc/api/mock.jssrc/data/platformDashboard.jssrc/data/customerDashboard.jssrc/services/(新增)src/data/vips.json(新增)scripts/sync-vips.js(新增)
合并时仍然保持原则：
- 客户可见文案用"收入、送礼人数、弹幕"等业务语言。
- 首页不放用户查询大框。
- 主播详情、用户查询、数据状态都只读。
- 不暴露
dgb、tsboxb、protocol、source_type、gap等内部词。 - 不碰后端和生产链路。
在 src/data/douyuIdentityAssets.js 中配置了高能等级（sl 值为 10-70，如白银、黄金、铂金、紫金、星耀、超凡、王者至尊）的官方高清 CDN 图标 URL：
- 白银至尊 (sl=10):
https://sta-op.douyucdn.cn/front-publish/static-file-master/supreme/levelInfo/icon28/10.01cd7d8eab1046425047acfd07aa1950.5301.png - 黄金至尊 (sl=20):
https://sta-op.douyucdn.cn/front-publish/static-file-master/supreme/levelInfo/icon28/20.bb3ade50537447ba8e381b823c041bd3.5309.png - 铂金至尊 (sl=30):
https://sta-op.douyucdn.cn/front-publish/static-file-master/supreme/levelInfo/icon28/30.6ad42f66b4c72a8f2ce0c1224227e572.5396.png - 紫金至尊 (sl=40):
https://sta-op.douyucdn.cn/front-publish/static-file-master/supreme/levelInfo/icon28/40.6b0426f8178852f67cb60277151f349f.5447.png - 星耀至尊 (sl=50):
https://sta-op.douyucdn.cn/front-publish/static-file-master/supreme/levelInfo/icon28/50.5bb8c3d0570486d2c0d890bfbea5d1a0.5384.png - 超凡至尊 (sl=60):
https://sta-op.douyucdn.cn/front-publish/static-file-master/supreme/levelInfo/icon28/60.c24f6a93602291f0ecc88e50cb1bff05.5480.png - 王者至尊 (sl=70):
https://sta-op.douyucdn.cn/front-publish/static-file-master/supreme/levelInfo/icon28/70.a65641682c6afdec90687d3100937945.5469.png
上述资源全部来自于斗鱼官方成长值配置文件 https://webconf.douyucdn.cn/resource/common/growth_level_w.json 中的 levelInfo 配置。
为了和主播详情页的展现形成对称，用户查询模块做出了如下重构与升级：
- 跳转逻辑：移除了原先列表中“礼物详情”和“弹幕详情”的弹窗，整合成独立的“画像分析”主视图跳转。
- 分段数据趋势组合图：
- 支持 「今日消费走势」（24小时）与 「近七天走势」（日维度）的周期切换。
- 柱状图展示累计消费分布，折线图展示弹幕互动频次，使用自适应刻度圆整算法展示。
- 具备指示垂线与详细指标浮层 Tooltip。
- 重点消费与互动主播榜：以表格形式展示该用户消费或互动的 Top 主播（与主播详情的送礼用户榜正好反过来）。
- 主播名称支持点击穿梭跳转，直接无缝切入该主播详情页面。
- 近期弹幕流：右下侧作为独立的纵向滑动流面板，汇总显示详细弹幕。