Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9a122ffa27 | |||
| 85cf284848 | |||
| 9772ba88ae | |||
| 8b99c2f091 | |||
| 5c009f38cd | |||
| 51009616a1 | |||
| e05f63b94f | |||
| 80c37923d4 | |||
| 338549ee27 |
132
CHANGELOG.md
132
CHANGELOG.md
@ -13,10 +13,122 @@ CYBER STAR(虚拟明星 Top 12 出道选拔)更新日志。新条目写在最上
|
||||
2. 本文件加新条目(顶部)
|
||||
3. `git tag v<x.y.z>`(可选 push 到远程,触发 CI release 流程)
|
||||
|
||||
每个版本下方都写两块 commit 信息:
|
||||
- **Tag**: tag 实际打在哪条 commit(可点击直达 Gitea)
|
||||
- **核心 commit**: 该版本最重要的功能/改动 commit hash
|
||||
- **完整 diff**: 与上一个版本的 compare 链接
|
||||
|
||||
---
|
||||
|
||||
## v0.3.4 · 2026-05-18 · 跨设备同步 + Logo v3 + 导航合并 + 窄屏适配
|
||||
|
||||
**Commit 信息**
|
||||
- 完整 diff: [v0.3.3...v0.3.4](https://gitea.airlabs.art/zyc/UI-UX/compare/v0.3.3...v0.3.4)
|
||||
|
||||
**改了什么(用户视角)**
|
||||
- 跨设备投票状态自动对齐:A 设备投了 5 票,B 设备登录后立刻看到 5 票已投(原来只看 localStorage)
|
||||
- 登录页 / 登录弹窗 / Footer 替换为新版金属质感 logo(`logo-v3.png`),Footer 顺手去掉 logo 行
|
||||
- 导航栏窄屏不再"双行":"首页 / 排行榜 / 我的"合并到第一行,与右侧搜索/badge/auth 同行
|
||||
- 窄屏(< 768px)hero 右上角应援进度只显示文字,隐藏 12 格点 —— 让左侧 "TOP 12 · CYBER STAR" eyebrow 有空间不挤撞
|
||||
|
||||
**技术点**
|
||||
- `src/hooks/useSyncMe.ts`(新): 监听 session 变化 → 拉 `/api/me` → `hydrateFromServer(votedArtists)` 覆盖本地 store;登出清本地避免上一个用户残留
|
||||
- `src/components/Providers.tsx`: `<SyncMeBridge/>` 在 SessionProvider 内部启动 useSyncMe
|
||||
- `src/components/Navigation.tsx`: 删除 mobile 第二行 NavLinks,nav `gap-4 sm:gap-8` 响应式
|
||||
- `src/components/NavLinks.tsx`: 删除 mobile/desktop 双分支,统一用 `gap-5 sm:gap-8 text-[13px] sm:text-sm`
|
||||
- `src/components/HeroVoteProgress.tsx`: 12 格点容器加 `hidden md:inline-flex`,< 768px 隐藏
|
||||
- `public/logo-v3.png`(新): 金属质感 logo,替换原 `<Logo>` 组件
|
||||
|
||||
**实测三种屏宽**(脚本 `scripts/screenshot-narrow.mjs`)
|
||||
|
||||
| 屏宽 | nav | hero eyebrow | hero progress 宽 |
|
||||
|------|-----|--------------|------------------|
|
||||
| 1500px | 单行 ✓ | 不撞 ✓ | 252(完整 12 点)|
|
||||
| 740px | 单行 ✓ | 不撞 ✓ | 135(隐藏点)|
|
||||
| 360px | 单行 ✓(NavLinks 140px 塞下)| eyebrow 320px 太长仍占满 ⚠️ | 135 |
|
||||
|
||||
**风险 / 已知问题**
|
||||
- 360px 极窄屏 hero eyebrow 自身已占 320px,即使 progress 缩到 135 仍会横向重叠。下次单独修(eyebrow 极窄屏可简化为 "TOP 12" 或 hidden sm:block)
|
||||
|
||||
---
|
||||
|
||||
## v0.3.3 · 2026-05-15 · 修复:投票后票数 +1 和 Top12 排位要等 30s
|
||||
|
||||
**Commit 信息**
|
||||
- 完整 diff: [v0.3.2...v0.3.3](https://gitea.airlabs.art/zyc/UI-UX/compare/v0.3.2...v0.3.3)
|
||||
|
||||
**改了什么**
|
||||
- 投票成功后,首页 Top12 + 排行榜立即拉新数据,不必等下次 30s 轮询
|
||||
- 服务端拒绝投票时(如其他设备已投过),本地立即回滚乐观更新 + 用 /api/me 重新对齐
|
||||
- 网络异常时回滚 + 报错,避免本地状态与服务端不一致
|
||||
|
||||
**根因(诊断详见 v0.3.2 后的对话)**
|
||||
- `useRanking` 30s 轮询拉服务端票数,merge 时取 max(serverVotes, storeVotes)
|
||||
- 用户投票后,storeVotes 立即 +1,但 serverVotes 还是 30s 前的旧值,且更大
|
||||
- max 永远取 server → 本地 +1 被压住 → 票数和排位最多延迟 30s 才更新
|
||||
|
||||
**技术修复**
|
||||
- `useVoteAction` 加 `onVoteSuccess` 回调,服务端 200 后立即触发
|
||||
- `page.tsx` + `ranking/page.tsx` 把 `live.refresh` 传进去
|
||||
- 顺手把 fire-and-forget 改成 await 服务端,失败时 `rollbackVote` + `refetchMe(/api/me)` 跨设备对齐
|
||||
- store 新增 `rollbackVote(id)` + `hydrateFromServer(ids[])` 两个 action
|
||||
|
||||
**体感对比**
|
||||
| 场景 | 本地 dev(打公网 RDS) | 生产(同区 K3s + RDS) |
|
||||
|------|---------------------|---------------------|
|
||||
| 改前 | 0~30 秒后才看到票数 +1 | 同上 |
|
||||
| 改后 | ~700-1000 ms(vote API 写完 + ranking refresh) | ~150 ms |
|
||||
|
||||
**风险 / 已知问题**
|
||||
- ArtistDetailContent 显示的 artist.votes 仍从 store 来,store 里这个字段是"本地用户投过几次"不是服务端真实票。详情页票数显示问题留下次单独修。
|
||||
|
||||
---
|
||||
|
||||
## v0.3.2 · 2026-05-15 · 修复:首页 Top12 出道位空着,排行榜却有数据
|
||||
|
||||
**Commit 信息**
|
||||
- 完整 diff: [v0.3.1...v0.3.2](https://gitea.airlabs.art/zyc/UI-UX/compare/v0.3.1...v0.3.2)
|
||||
|
||||
**改了什么**
|
||||
- 首页 Top12 出道位现在能显示真实票数(此前一直显示"Awaiting Votes")
|
||||
|
||||
**根因**
|
||||
- 首页 Top12Bar 之前只读前端 zustand store 的 `artists`,store 初始来自 mock-data(36 人全部 0 票),只有**当前浏览器用户自己投票时**才会更新
|
||||
- 排行榜 `/ranking` 走 `/api/ranking` 直接读 DB,所以有真实票数
|
||||
- 未登录访客访问首页 → store 全 0 票 → `top12 = filter(votes > 0)` 空 → 显示"Awaiting Votes"
|
||||
|
||||
**技术修复**
|
||||
- `src/app/page.tsx` 加 `useRanking({ pollInterval: 30_000 })`,30 秒轮询 `/api/ranking`
|
||||
- 用 `useMemo` 合并 `storeArtists`(本地乐观投票)+ API 票数(取 max),重新排序赋 rank
|
||||
- 与 `/ranking` 页面用同样的 merge 策略,保证两处票数视图一致
|
||||
|
||||
**风险 / 已知问题**
|
||||
- 首页和排行榜各自跑一个 `useRanking` 实例,会产生两个独立轮询请求。后续可以提到 layout 层共享,但当前 36 行查询很轻,先这样
|
||||
|
||||
---
|
||||
|
||||
## v0.3.1 · 2026-05-15 · 13 号(虞浓)氛围图 2 替换
|
||||
|
||||
**Commit 信息**
|
||||
- Tag 打在: 本次 release commit(`git log -1` 看)
|
||||
- 完整 diff: [v0.3.0...v0.3.1](https://gitea.airlabs.art/zyc/UI-UX/compare/v0.3.0...v0.3.1)
|
||||
|
||||
**改了什么**
|
||||
- 13 号虞浓的氛围图 2 换成新版本(`portraits/013-2.webp`,1440×2560,153KB)
|
||||
|
||||
**技术点**
|
||||
- TOS cache version `7` → `8`(`src/lib/tos.ts`),浏览器 + CDN 立即拿到新图,不必等 TTL
|
||||
- 转换脚本 `_tmp_webp_convert/round3.mjs`,sharp quality 82
|
||||
|
||||
---
|
||||
|
||||
## v0.3.0 · 2026-05-15 · 投票模型大改:每日额度 → 终身 12 票
|
||||
|
||||
**Commit 信息**
|
||||
- Tag 打在: [`93c3abe`](https://gitea.airlabs.art/zyc/UI-UX/commit/93c3abe) `chore(release): v0.3.0 + 建立 CHANGELOG + 追溯版本号`
|
||||
- 核心 commit: [`10878dd`](https://gitea.airlabs.art/zyc/UI-UX/commit/10878dd) `feat(vote): 重构投票模型为终身 12 票 + 每艺人 1 票`
|
||||
- 完整 diff: [v0.2.2...v0.3.0](https://gitea.airlabs.art/zyc/UI-UX/compare/v0.2.2...v0.3.0)
|
||||
|
||||
**改了什么**
|
||||
- 每个用户改为终身 12 票,每位艺人最多 1 票,投出不可撤销
|
||||
- 取消活动时间窗(不再限定结束日期)
|
||||
@ -43,6 +155,10 @@ CYBER STAR(虚拟明星 Top 12 出道选拔)更新日志。新条目写在最上
|
||||
|
||||
## v0.2.2 · 2026-05-15 · 内容批次 v2 修正 + 单人视频
|
||||
|
||||
**Commit 信息**
|
||||
- Tag 打在: [`8d8451b`](https://gitea.airlabs.art/zyc/UI-UX/commit/8d8451b) `chore(tos): bump cache version 6 → 7 for 014-2 recrop`
|
||||
- 完整 diff: [v0.2.1...v0.2.2](https://gitea.airlabs.art/zyc/UI-UX/compare/v0.2.1...v0.2.2)
|
||||
|
||||
**改了什么**
|
||||
- 多位艺人立绘 / 头像 / 氛围图替换(003 / 006 / 007 / 010 / 014 / 017 / 019 / 027 / 033 等)
|
||||
- 单人表演视频更新(5 个艺人)
|
||||
@ -57,6 +173,10 @@ CYBER STAR(虚拟明星 Top 12 出道选拔)更新日志。新条目写在最上
|
||||
|
||||
## v0.2.1 · 2026-05-14 · UI 视觉打磨
|
||||
|
||||
**Commit 信息**
|
||||
- Tag 打在: [`7168e50`](https://gitea.airlabs.art/zyc/UI-UX/commit/7168e50) `fix: prod login + env-file driven config + scroll-snap bounce`
|
||||
- 完整 diff: [v0.2.0...v0.2.1](https://gitea.airlabs.art/zyc/UI-UX/compare/v0.2.0...v0.2.1)
|
||||
|
||||
**改了什么**
|
||||
- 导航栏滚动到 Hero 下方时自动从透明变毛玻璃
|
||||
- 加浮动返回按钮 + 滚动位置 per-tab 记忆
|
||||
@ -70,6 +190,11 @@ CYBER STAR(虚拟明星 Top 12 出道选拔)更新日志。新条目写在最上
|
||||
|
||||
## v0.2.0 · 2026-05-13 · 真实持久化 + CI/CD 打通
|
||||
|
||||
**Commit 信息**
|
||||
- Tag 打在: [`1073262`](https://gitea.airlabs.art/zyc/UI-UX/commit/1073262) `ci(secret): inject Aliyun SMS credentials into cyberstar-env`
|
||||
- 核心 commit: [`a9f4799`](https://gitea.airlabs.art/zyc/UI-UX/commit/a9f4799) `feat(db): wire real persistence for votes / users / quota / supports`
|
||||
- 完整 diff: [v0.1.0...v0.2.0](https://gitea.airlabs.art/zyc/UI-UX/compare/v0.1.0...v0.2.0)
|
||||
|
||||
**改了什么**
|
||||
- 投票 / 用户 / 应援 / 额度全部走真实数据库(火山引擎 RDS),不再 mock
|
||||
- 阿里云短信 OTP 登录上线(国内手机号)
|
||||
@ -86,6 +211,11 @@ CYBER STAR(虚拟明星 Top 12 出道选拔)更新日志。新条目写在最上
|
||||
|
||||
## v0.1.0 · 2026-05-12 · 项目骨架与全部页面初版
|
||||
|
||||
**Commit 信息**
|
||||
- Tag 打在: [`d5ed43a`](https://gitea.airlabs.art/zyc/UI-UX/commit/d5ed43a) `feat(ui): design overhaul, global login modal, design spec`
|
||||
- 核心 commit: [`8a83815`](https://gitea.airlabs.art/zyc/UI-UX/commit/8a83815) `chore: bootstrap Next.js 16 + Tailwind v4 + TypeScript baseline`
|
||||
- 范围: 项目第一个 commit 到 d5ed43a(共 16 个 commit)
|
||||
|
||||
**改了什么**
|
||||
- Next.js 16 + Tailwind v4 + TypeScript 项目搭建
|
||||
- 紫色品牌设计系统(Megrim / Audiowide / Cinzel / Inter 字体)
|
||||
@ -105,4 +235,4 @@ CYBER STAR(虚拟明星 Top 12 出道选拔)更新日志。新条目写在最上
|
||||
|
||||
---
|
||||
|
||||
_格式参考 [Keep a Changelog](https://keepachangelog.com/),但宽松,优先记"改了什么"和"风险",不强求语义化版本号_
|
||||
_格式参考 [Keep a Changelog](https://keepachangelog.com/),宽松版_
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cyber-star",
|
||||
"version": "0.3.0",
|
||||
"version": "0.3.4",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
|
||||
BIN
public/logo-v3.png
Normal file
BIN
public/logo-v3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
public/logo-v4.png
Normal file
BIN
public/logo-v4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
59
scripts/reset-vote-data.mjs
Normal file
59
scripts/reset-vote-data.mjs
Normal file
@ -0,0 +1,59 @@
|
||||
// 清空投票相关测试数据,准备重新测试。
|
||||
//
|
||||
// 清:votes / fan_supports / daily_quota / sign_ins / risk_logs / ranking_snapshots
|
||||
// reset:artists.vote_count = 0, artists.current_rank = null
|
||||
// 保留:users / artists 配置 / activity_config / invitations
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
const prisma = new PrismaClient({ log: ["error"] });
|
||||
|
||||
console.log("=== 清空投票测试数据 ===\n");
|
||||
|
||||
// 跑前 snapshot
|
||||
const before = {
|
||||
votes: await prisma.vote.count(),
|
||||
fanSupports: await prisma.fanSupport.count(),
|
||||
dailyQuotas: await prisma.dailyQuota.count(),
|
||||
signIns: await prisma.signIn.count(),
|
||||
riskLogs: await prisma.riskLog.count(),
|
||||
snapshots: await prisma.rankingSnapshot.count(),
|
||||
artistsWithVotes: await prisma.artist.count({ where: { voteCount: { gt: 0 } } }),
|
||||
};
|
||||
console.log("清前:", before);
|
||||
|
||||
await prisma.$transaction(
|
||||
async (tx) => {
|
||||
await tx.vote.deleteMany({});
|
||||
await tx.fanSupport.deleteMany({});
|
||||
await tx.dailyQuota.deleteMany({});
|
||||
await tx.signIn.deleteMany({});
|
||||
await tx.riskLog.deleteMany({});
|
||||
await tx.rankingSnapshot.deleteMany({});
|
||||
// reset artists 缓存
|
||||
await tx.artist.updateMany({
|
||||
data: { voteCount: 0, currentRank: null },
|
||||
});
|
||||
},
|
||||
{ timeout: 30000 },
|
||||
);
|
||||
|
||||
const after = {
|
||||
votes: await prisma.vote.count(),
|
||||
fanSupports: await prisma.fanSupport.count(),
|
||||
dailyQuotas: await prisma.dailyQuota.count(),
|
||||
signIns: await prisma.signIn.count(),
|
||||
riskLogs: await prisma.riskLog.count(),
|
||||
snapshots: await prisma.rankingSnapshot.count(),
|
||||
artistsWithVotes: await prisma.artist.count({ where: { voteCount: { gt: 0 } } }),
|
||||
};
|
||||
console.log("\n清后:", after);
|
||||
|
||||
// 同时确认保留了什么
|
||||
const preserved = {
|
||||
users: await prisma.user.count(),
|
||||
artists: await prisma.artist.count(),
|
||||
activityConfig: await prisma.activityConfig.count(),
|
||||
};
|
||||
console.log("保留:", preserved);
|
||||
|
||||
await prisma.$disconnect();
|
||||
console.log("\n✓ 完成");
|
||||
86
scripts/screenshot-narrow.mjs
Normal file
86
scripts/screenshot-narrow.mjs
Normal file
@ -0,0 +1,86 @@
|
||||
import { spawn } from "node:child_process";
|
||||
import { writeFile } from "node:fs/promises";
|
||||
import { setTimeout as wait } from "node:timers/promises";
|
||||
|
||||
const CHROME = "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
|
||||
const PORT = 9333;
|
||||
const PROFILE = "C:\\Users\\10419\\AppData\\Local\\Temp\\cs-narrow-shot";
|
||||
const OUT = process.env.SHOT_OUT || "d:/ClaudeProjects/虚拟明星/UI-UX/docs/screenshots/nav-overlap-narrow.png";
|
||||
const WIDTH = Number(process.env.SHOT_WIDTH || 740);
|
||||
const HEIGHT = Number(process.env.SHOT_HEIGHT || 1000);
|
||||
|
||||
const proc = spawn(CHROME, [
|
||||
`--headless=new`, `--disable-gpu`, `--remote-debugging-port=${PORT}`,
|
||||
`--user-data-dir=${PROFILE}`, `--hide-scrollbars`, `--no-first-run`, `about:blank`,
|
||||
], { stdio: "ignore", detached: true });
|
||||
proc.unref();
|
||||
for (let i = 0; i < 30; i++) {
|
||||
try { if ((await fetch(`http://127.0.0.1:${PORT}/json/version`)).ok) break; } catch {}
|
||||
await wait(300);
|
||||
}
|
||||
const t = await (await fetch(`http://127.0.0.1:${PORT}/json/new?about:blank`, { method: "PUT" })).json();
|
||||
const ws = new WebSocket(t.webSocketDebuggerUrl);
|
||||
await new Promise(r => ws.addEventListener("open", () => r(), { once: true }));
|
||||
let id = 0; const pending = new Map();
|
||||
ws.addEventListener("message", (e) => {
|
||||
const m = JSON.parse(e.data);
|
||||
if (m.id && pending.has(m.id)) { const { resolve, reject } = pending.get(m.id); pending.delete(m.id);
|
||||
if (m.error) reject(new Error(m.error.message)); else resolve(m.result); }
|
||||
});
|
||||
const cmd = (method, params = {}) => new Promise((resolve, reject) => {
|
||||
pending.set(++id, { resolve, reject });
|
||||
ws.send(JSON.stringify({ id, method, params }));
|
||||
});
|
||||
|
||||
await cmd("Emulation.setDeviceMetricsOverride", {
|
||||
width: WIDTH, height: HEIGHT, deviceScaleFactor: 1, mobile: false,
|
||||
});
|
||||
await cmd("Page.navigate", { url: "http://localhost:3000" });
|
||||
await wait(3500);
|
||||
await cmd("Runtime.evaluate", {
|
||||
expression: `document.querySelectorAll('video').forEach(v => { try { v.pause(); } catch{} });`,
|
||||
});
|
||||
await wait(500);
|
||||
const r = await cmd("Page.captureScreenshot", { format: "png" });
|
||||
await writeFile(OUT, Buffer.from(r.data, "base64"));
|
||||
|
||||
// 同时取关键元素的位置信息
|
||||
const layout = await cmd("Runtime.evaluate", {
|
||||
returnByValue: true,
|
||||
expression: `(() => {
|
||||
const get = sel => {
|
||||
const el = document.querySelector(sel);
|
||||
if (!el) return null;
|
||||
const r = el.getBoundingClientRect();
|
||||
return { top: Math.round(r.top), left: Math.round(r.left), width: Math.round(r.width), height: Math.round(r.height), text: el.textContent?.trim().slice(0, 30) ?? '' };
|
||||
};
|
||||
return {
|
||||
headerNav: get('header > nav'),
|
||||
mobileNavLinks: get('header ul.md\\\\:hidden') || get('header [class*="md:hidden"] ul') || (() => {
|
||||
// mobile NavLinks 在 header 下方第二行,找 header 内最后一个 ul
|
||||
const uls = document.querySelectorAll('header ul');
|
||||
const last = uls[uls.length - 1];
|
||||
if (!last) return null;
|
||||
const r = last.getBoundingClientRect();
|
||||
return { top: Math.round(r.top), left: Math.round(r.left), width: Math.round(r.width), height: Math.round(r.height), text: last.textContent?.trim().slice(0, 30) ?? '' };
|
||||
})(),
|
||||
heroEyebrow: (() => {
|
||||
const els = Array.from(document.querySelectorAll('p'));
|
||||
const m = els.find(p => /Top 12.*Cyber Star/i.test(p.textContent || ''));
|
||||
if (!m) return null;
|
||||
const r = m.getBoundingClientRect();
|
||||
return { top: Math.round(r.top), left: Math.round(r.left), width: Math.round(r.width), height: Math.round(r.height), text: m.textContent?.trim().slice(0, 40) ?? '' };
|
||||
})(),
|
||||
heroProgress: get('[data-hero-vote-progress]'),
|
||||
};
|
||||
})()`,
|
||||
});
|
||||
console.log("\n=== 关键元素位置(viewport 坐标)===");
|
||||
for (const [k, v] of Object.entries(layout.result.value)) {
|
||||
if (v) console.log(` ${k.padEnd(16)} top=${String(v.top).padStart(3)}px left=${String(v.left).padStart(3)}px w=${v.width} h=${v.height} "${v.text}"`);
|
||||
else console.log(` ${k.padEnd(16)} (未找到)`);
|
||||
}
|
||||
console.log(`\n✓ ${OUT}`);
|
||||
ws.close();
|
||||
try { process.kill(proc.pid); } catch {}
|
||||
spawn("taskkill", ["/F", "/PID", String(proc.pid), "/T"], { stdio: "ignore" });
|
||||
76
scripts/verify-top12.mjs
Normal file
76
scripts/verify-top12.mjs
Normal file
@ -0,0 +1,76 @@
|
||||
import { spawn } from "node:child_process";
|
||||
import { writeFile } from "node:fs/promises";
|
||||
import { setTimeout as wait } from "node:timers/promises";
|
||||
|
||||
const CHROME = "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
|
||||
const PORT = 9333;
|
||||
const PROFILE = "C:\\Users\\10419\\AppData\\Local\\Temp\\cs-top12-verify";
|
||||
|
||||
const proc = spawn(
|
||||
CHROME,
|
||||
[
|
||||
`--headless=new`,
|
||||
`--disable-gpu`,
|
||||
`--remote-debugging-port=${PORT}`,
|
||||
`--user-data-dir=${PROFILE}`,
|
||||
`--window-size=1500,900`,
|
||||
`--hide-scrollbars`,
|
||||
`--no-first-run`,
|
||||
`about:blank`,
|
||||
],
|
||||
{ stdio: "ignore", detached: true },
|
||||
);
|
||||
proc.unref();
|
||||
for (let i = 0; i < 30; i++) {
|
||||
try {
|
||||
const r = await fetch(`http://127.0.0.1:${PORT}/json/version`);
|
||||
if (r.ok) break;
|
||||
} catch {}
|
||||
await wait(300);
|
||||
}
|
||||
|
||||
const t = await (await fetch(`http://127.0.0.1:${PORT}/json/new?about:blank`, { method: "PUT" })).json();
|
||||
const ws = new WebSocket(t.webSocketDebuggerUrl);
|
||||
await new Promise((r) => ws.addEventListener("open", () => r(), { once: true }));
|
||||
let id = 0;
|
||||
const pending = new Map();
|
||||
ws.addEventListener("message", (e) => {
|
||||
const m = JSON.parse(e.data);
|
||||
if (m.id && pending.has(m.id)) {
|
||||
const { resolve, reject } = pending.get(m.id);
|
||||
pending.delete(m.id);
|
||||
if (m.error) reject(new Error(m.error.message));
|
||||
else resolve(m.result);
|
||||
}
|
||||
});
|
||||
const cmd = (method, params = {}) =>
|
||||
new Promise((resolve, reject) => {
|
||||
pending.set(++id, { resolve, reject });
|
||||
ws.send(JSON.stringify({ id, method, params }));
|
||||
});
|
||||
|
||||
await cmd("Emulation.setDeviceMetricsOverride", {
|
||||
width: 1500, height: 900, deviceScaleFactor: 1, mobile: false,
|
||||
});
|
||||
await cmd("Page.navigate", { url: "http://localhost:3000" });
|
||||
await wait(3000);
|
||||
await cmd("Runtime.evaluate", {
|
||||
expression: `document.querySelectorAll('video').forEach(v => { try { v.pause(); } catch{} });`,
|
||||
});
|
||||
// 滚到 Top12 区
|
||||
await cmd("Runtime.evaluate", {
|
||||
expression: `window.scrollTo(0, window.innerHeight);`,
|
||||
});
|
||||
await wait(1500);
|
||||
// 多等一下 useRanking 拉到数据
|
||||
await wait(2500);
|
||||
|
||||
const r = await cmd("Page.captureScreenshot", { format: "png" });
|
||||
await writeFile(
|
||||
"d:/ClaudeProjects/虚拟明星/UI-UX/docs/screenshots/top12-fix-verify.png",
|
||||
Buffer.from(r.data, "base64"),
|
||||
);
|
||||
console.log("✓ saved");
|
||||
ws.close();
|
||||
try { process.kill(proc.pid); } catch {}
|
||||
spawn("taskkill", ["/F", "/PID", String(proc.pid), "/T"], { stdio: "ignore" });
|
||||
@ -14,7 +14,7 @@ const Body = z.object({
|
||||
|
||||
/**
|
||||
* POST /api/auth/send-otp
|
||||
* 发送短信验证码 · 单手机号 60s 限频 / 单 IP 5 分钟 5 次
|
||||
* 发送短信验证码 · 单手机号 60s 限频 / 单 IP 5 分钟 100 次
|
||||
*/
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
@ -31,7 +31,7 @@ export async function POST(req: NextRequest) {
|
||||
}
|
||||
const ip = await getClientIp();
|
||||
if (ip) {
|
||||
const ipRl = await rateLimit(`otp:ip:${ip}`, 300, 5);
|
||||
const ipRl = await rateLimit(`otp:ip:${ip}`, 300, 100);
|
||||
if (!ipRl.allowed) return ERR.RATE_LIMITED();
|
||||
}
|
||||
|
||||
|
||||
@ -16,10 +16,10 @@ export async function generateMetadata({
|
||||
}: ArtistPageProps): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const artist = getArtist(id);
|
||||
if (!artist) return { title: "艺人不存在 · CYBER STAR" };
|
||||
if (!artist) return { title: "艺人不存在 · 银河初星计划 C . S . G" };
|
||||
|
||||
return {
|
||||
title: `${artist.name} · ${artist.enName} · CYBER STAR`,
|
||||
title: `${artist.name} · ${artist.enName} · 银河初星计划 C . S . G`,
|
||||
description: artist.bio.slice(0, 120),
|
||||
};
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 81 KiB |
@ -33,15 +33,27 @@ const inter = Inter({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "CYBER ✦ STAR · 虚拟偶像 Top12 出道企划",
|
||||
title: "银河初星计划 C . S . G",
|
||||
description:
|
||||
"36 位虚拟偶像候选人,由你投票决出最终出道 Top12。Cyber Star · Virtual Idol Debut Project.",
|
||||
keywords: ["虚拟偶像", "出道", "投票", "Top12", "Cyber Star", "Virtual Idol"],
|
||||
"36 位虚拟偶像候选人,由你投票决出最终出道 Top12。银河初星计划 C . S . G。",
|
||||
keywords: [
|
||||
"银河初星计划",
|
||||
"C . S . G",
|
||||
"虚拟偶像",
|
||||
"出道",
|
||||
"投票",
|
||||
"Top12",
|
||||
"Virtual Idol",
|
||||
],
|
||||
openGraph: {
|
||||
title: "CYBER ✦ STAR",
|
||||
title: "银河初星计划 C . S . G",
|
||||
description: "虚拟偶像 Top12 出道企划",
|
||||
type: "website",
|
||||
},
|
||||
icons: {
|
||||
icon: "/favicon.ico?v=4",
|
||||
shortcut: "/favicon.ico?v=4",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@ -5,7 +5,6 @@ import { useRouter, useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { Phone, KeyRound, Loader2 } from "lucide-react";
|
||||
import Logo from "@/components/Logo";
|
||||
import Button from "@/components/ui/Button";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
@ -92,8 +91,15 @@ export default function LoginForm() {
|
||||
<div className="min-h-[calc(100vh-128px)] flex items-center justify-center px-4 py-10">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo */}
|
||||
<div className="text-center mb-8">
|
||||
<Logo size="lg" href={null} />
|
||||
<div className="flex flex-col items-center mb-8">
|
||||
<img
|
||||
src="/logo-v4.png?v=4"
|
||||
alt="银河初星计划 C . S . G"
|
||||
decoding="async"
|
||||
draggable={false}
|
||||
className="block select-none h-20 sm:h-24 w-auto"
|
||||
style={{ background: "transparent" }}
|
||||
/>
|
||||
<p className="font-label text-[10px] tracking-[0.4em] uppercase text-purple-300/80 mt-3">
|
||||
Sign in to Vote
|
||||
</p>
|
||||
|
||||
@ -2,7 +2,7 @@ import { Suspense } from "react";
|
||||
import LoginForm from "./LoginForm";
|
||||
|
||||
export const metadata = {
|
||||
title: "登录 · CYBER STAR",
|
||||
title: "登录 · 银河初星计划 C . S . G",
|
||||
};
|
||||
|
||||
export default function LoginPage() {
|
||||
|
||||
@ -4,7 +4,7 @@ import { auth } from "@/lib/auth";
|
||||
import MeContent from "./MeContent";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "个人中心 · CYBER STAR",
|
||||
title: "个人中心 · 银河初星计划 C . S . G",
|
||||
};
|
||||
|
||||
export default async function MePage() {
|
||||
|
||||
@ -10,15 +10,22 @@ import VoteModal from "@/components/VoteModal";
|
||||
import { sortArtists, type SortKey } from "@/lib/mock-data";
|
||||
import { useVoteStore } from "@/lib/store";
|
||||
import { useVoteAction } from "@/hooks/useVoteAction";
|
||||
import { useRanking } from "@/hooks/useRanking";
|
||||
import { useScrollRestore } from "@/hooks/useScrollRestore";
|
||||
import { useUIStore } from "@/lib/ui-store";
|
||||
import { cn } from "@/lib/cn";
|
||||
import { tosUrl } from "@/lib/tos";
|
||||
import type { Artist } from "@/types/artist";
|
||||
|
||||
export default function Home() {
|
||||
const artists = useVoteStore((s) => s.artists);
|
||||
const storeArtists = useVoteStore((s) => s.artists);
|
||||
|
||||
// 30s 轮询 /api/ranking 拿服务端真实票数
|
||||
const live = useRanking({ pollInterval: 30_000 });
|
||||
|
||||
// 投票成功后立即 refresh 排名,不等下次轮询(解决"票数 +1 / Top12 排位延迟"问题)
|
||||
const { target, remaining, totalQuota, openVote, closeVote, confirmVote } =
|
||||
useVoteAction();
|
||||
useVoteAction({ onVoteSuccess: live.refresh });
|
||||
|
||||
const [tagFilter, setTagFilter] = useState<TagFilter>("all");
|
||||
const [sortKey, setSortKey] = useState<SortKey>("votes");
|
||||
@ -29,6 +36,21 @@ export default function Home() {
|
||||
// 首页滚动位置 per-tab 记忆:从艺人详情点 ← 返回时恢复到上次浏览位置
|
||||
useScrollRestore("home");
|
||||
|
||||
// 数据同步:本地乐观投票 + 服务端票数取 max,避免本地 store 只看到自己投的票。
|
||||
// 与 /ranking 页面同一策略,首页 Top12 + 候选区都基于这份合并数据。
|
||||
const artists = useMemo<Artist[]>(() => {
|
||||
const apiVotes = new Map<string, number>();
|
||||
if (live.data?.list) {
|
||||
for (const row of live.data.list) apiVotes.set(row.id, row.voteCount);
|
||||
}
|
||||
const merged = storeArtists.map((a) => {
|
||||
const apiV = apiVotes.get(a.id) ?? 0;
|
||||
return apiV > a.votes ? { ...a, votes: apiV } : a;
|
||||
});
|
||||
const ranked = sortArtists(merged, "votes");
|
||||
return ranked.map((a, i) => ({ ...a, rank: i + 1 }));
|
||||
}, [storeArtists, live.data]);
|
||||
|
||||
const visibleArtists = useMemo(() => {
|
||||
let list = [...artists];
|
||||
if (tagFilter !== "all") {
|
||||
|
||||
@ -14,11 +14,13 @@ import type { Artist } from "@/types/artist";
|
||||
|
||||
export default function RankingPage() {
|
||||
const storeArtists = useVoteStore((s) => s.artists);
|
||||
const { target, remaining, totalQuota, openVote, closeVote, confirmVote } =
|
||||
useVoteAction();
|
||||
|
||||
const live = useRanking({ pollInterval: 30_000 });
|
||||
|
||||
// 投票成功后立即 refresh 排名,不等下次轮询
|
||||
const { target, remaining, totalQuota, openVote, closeVote, confirmVote } =
|
||||
useVoteAction({ onVoteSuccess: live.refresh });
|
||||
|
||||
// 数据同步:本地乐观投票 + 服务端最新票数取 max(避免 API 落后覆盖本地新票,
|
||||
// 也避免本地缺其他用户的票数)。合并后按 votes desc + no asc 重新排序并赋 rank。
|
||||
const sorted = useMemo<Artist[]>(() => {
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
import Logo from "./Logo";
|
||||
|
||||
export default function Footer() {
|
||||
const year = new Date().getFullYear();
|
||||
return (
|
||||
<footer className="border-t border-white/[0.06] bg-deep mt-16">
|
||||
<div className="max-w-[1500px] mx-auto px-6 sm:px-8 h-16 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-6 text-center">
|
||||
<Logo size="sm" href={null} />
|
||||
<div className="max-w-[1500px] mx-auto px-6 sm:px-8 h-16 flex items-center justify-center text-center">
|
||||
<p className="text-[11px] text-white/35 tracking-[0.05em]">
|
||||
© {year} CYBER STAR · All Rights Reserved
|
||||
© {year} 银河初星计划 C . S . G · All Rights Reserved
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -90,8 +90,8 @@ export default function HeroBanner({
|
||||
<div className="absolute inset-0 max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Eyebrow 左上 · 紧贴导航下方 */}
|
||||
<div className="absolute top-[6.5rem] sm:top-[7.5rem] left-4 sm:left-6 lg:left-8 z-10">
|
||||
<p className="font-label text-[10px] sm:text-xs tracking-[0.4em] uppercase text-purple-200/90">
|
||||
Top 12 · Cyber Star Debut Survival
|
||||
<p className="font-label text-[10px] sm:text-xs tracking-[0.28em] uppercase text-purple-200/90">
|
||||
银河初星计划 C . S . G
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -60,10 +60,10 @@ export default function HeroVoteProgress({ className }: { className?: string })
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* 12 格点亮式进度条 */}
|
||||
{/* 12 格点亮式进度条 —— 窄屏隐藏,避免与左侧 Eyebrow 横向挤撞;>= md 才显示 */}
|
||||
<span
|
||||
aria-hidden
|
||||
className="inline-flex items-center gap-[3px] ml-0.5"
|
||||
className="hidden md:inline-flex items-center gap-[3px] ml-0.5"
|
||||
>
|
||||
{Array.from({ length: TOTAL_VOTE_QUOTA }).map((_, i) => {
|
||||
const lit = i < filled;
|
||||
|
||||
@ -8,7 +8,7 @@ interface LogoProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// 高度由 size 控制,宽度按 logo.png 实际比例(约 5.41:1,单行 CYBER STAR + 星环)自适应
|
||||
// 高度由 size 控制,宽度按 logo-v4.png 实际比例自适应
|
||||
const HEIGHT_PX: Record<LogoSize, number> = {
|
||||
sm: 24,
|
||||
md: 44,
|
||||
@ -25,11 +25,11 @@ export default function Logo({
|
||||
|
||||
// 用原生 <img> 绕开 Next/Image 的格式转换 —— 某些环境下 sharp 把透明 PNG
|
||||
// 转 webp/avif 时会铺白底,导致 logo 在深色 nav 上出现白色矩形。
|
||||
// ?v=2 缓存破坏:logo 改版时 +1,浏览器立刻拉新版而不读老缓存。
|
||||
// ?v=4 缓存破坏:logo 改版时 +1,浏览器立刻拉新版而不读老缓存。
|
||||
const inner = (
|
||||
<img
|
||||
src="/logo.png?v=3"
|
||||
alt="CYBER STAR"
|
||||
src="/logo-v4.png?v=4"
|
||||
alt="银河初星计划 C . S . G"
|
||||
decoding="async"
|
||||
draggable={false}
|
||||
style={{
|
||||
@ -46,7 +46,7 @@ export default function Logo({
|
||||
<Link
|
||||
href={href}
|
||||
className="inline-flex items-center hover:opacity-90 transition-opacity"
|
||||
aria-label="CYBER STAR · 首页"
|
||||
aria-label="银河初星计划 C . S . G · 首页"
|
||||
style={{ background: "transparent" }}
|
||||
>
|
||||
{inner}
|
||||
|
||||
@ -19,10 +19,9 @@ const NAV_ITEMS: Array<{
|
||||
|
||||
interface NavLinksProps {
|
||||
className?: string;
|
||||
mobile?: boolean;
|
||||
}
|
||||
|
||||
export default function NavLinks({ className, mobile = false }: NavLinksProps) {
|
||||
export default function NavLinks({ className }: NavLinksProps) {
|
||||
const pathname = usePathname();
|
||||
const { status } = useSession();
|
||||
const openLogin = useLoginModalStore((s) => s.show);
|
||||
@ -43,39 +42,11 @@ export default function NavLinks({ className, mobile = false }: NavLinksProps) {
|
||||
}
|
||||
};
|
||||
|
||||
if (mobile) {
|
||||
return (
|
||||
<ul
|
||||
className={cn(
|
||||
"flex items-center gap-6 px-6 py-2.5 text-[13px] tracking-[0.1em] whitespace-nowrap",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{NAV_ITEMS.map((item) => {
|
||||
const active = isActive(item.href);
|
||||
return (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={(e) => handleClick(e, item)}
|
||||
className={cn(
|
||||
"transition-colors",
|
||||
active ? "text-purple-300" : "text-white/55",
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul
|
||||
className={cn(
|
||||
"items-center gap-8 text-sm tracking-[0.1em]",
|
||||
// 单一布局:窄屏 gap-5 text-[13px],sm 以上 gap-8 text-sm,装饰一致
|
||||
"flex items-center gap-5 sm:gap-8 text-[13px] sm:text-sm tracking-[0.1em] whitespace-nowrap",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Logo from "./Logo";
|
||||
import NavLinks from "./NavLinks";
|
||||
import SearchTrigger from "./SearchTrigger";
|
||||
import AuthMenu from "./auth/AuthMenu";
|
||||
@ -27,6 +28,7 @@ export default function Navigation() {
|
||||
// nav 关掉自己的玻璃,避免双重 backdrop-filter 在 y=80 处出现拼接线。
|
||||
const filterStuck = useUIStore((s) => s.filterStuck);
|
||||
const glassOff = isTransparent || filterStuck;
|
||||
const showLogo = pathname !== "/";
|
||||
|
||||
// 维护一个站内导航计数器(per-tab),供 FloatingBackButton 判断 router.back() 是否安全
|
||||
useEffect(() => {
|
||||
@ -80,28 +82,26 @@ export default function Navigation() {
|
||||
glassOff ? "opacity-0" : "opacity-100",
|
||||
)}
|
||||
/>
|
||||
<nav className="relative max-w-[1500px] mx-auto h-20 px-4 sm:px-6 lg:px-8 flex items-center gap-8">
|
||||
{/* 左侧:首页 / 排行榜 / 我的(logo 已移除) */}
|
||||
<NavLinks className="hidden md:flex" />
|
||||
<nav className="relative max-w-[1500px] mx-auto h-20 px-4 sm:px-6 lg:px-8 flex items-center gap-4 sm:gap-8">
|
||||
{showLogo && (
|
||||
<div className="hidden sm:flex shrink-0 items-center">
|
||||
<Logo
|
||||
size="md"
|
||||
className="drop-shadow-[0_0_14px_rgba(139,92,246,0.55)]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 左侧:首页 / 排行榜 / 我的 */}
|
||||
<NavLinks />
|
||||
|
||||
{/* 右侧:搜索 + 今日余票 + 登录/注册 (或 头像+下拉) */}
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<div className="ml-auto flex items-center gap-2 sm:gap-3">
|
||||
<SearchTrigger />
|
||||
<RemainingVotesBadge />
|
||||
<AuthMenu />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* 移动端:单独一行 nav links · 顶部分割线只在玻璃态显示 */}
|
||||
<NavLinks
|
||||
className={cn(
|
||||
"relative md:hidden overflow-x-auto transition-colors duration-300",
|
||||
glassOff
|
||||
? "border-t border-transparent"
|
||||
: "border-t border-white/[0.05]",
|
||||
)}
|
||||
mobile
|
||||
/>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,15 +3,27 @@
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import GlobalLoginModal from "@/components/auth/GlobalLoginModal";
|
||||
import { useSyncMe } from "@/hooks/useSyncMe";
|
||||
|
||||
/**
|
||||
* 登录后把服务端 /api/me 同步到本地 vote store 的隐形组件。
|
||||
* 必须放在 SessionProvider 内部才能拿到 useSession。
|
||||
*/
|
||||
function SyncMeBridge() {
|
||||
useSyncMe();
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 客户端全局 Provider 集合
|
||||
* - SessionProvider: 让 client 组件能用 useSession()
|
||||
* - SyncMeBridge: 登录后用 /api/me 覆盖本地票数态(跨设备同步关键)
|
||||
* - Toaster: 全站 toast 容器(紫调样式,自动叠加)
|
||||
*/
|
||||
export default function Providers({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<SessionProvider>
|
||||
<SyncMeBridge />
|
||||
{children}
|
||||
<GlobalLoginModal />
|
||||
<Toaster
|
||||
|
||||
@ -6,7 +6,6 @@ import { AnimatePresence, motion } from "framer-motion";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { X, Phone, KeyRound, Loader2 } from "lucide-react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Logo from "@/components/Logo";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
interface LoginModalProps {
|
||||
@ -172,10 +171,15 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
|
||||
<X size={18} />
|
||||
</button>
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<div className="inline-block">
|
||||
<Logo size="md" href={null} />
|
||||
</div>
|
||||
<div className="flex flex-col items-center mb-6">
|
||||
<img
|
||||
src="/logo-v4.png?v=4"
|
||||
alt="银河初星计划 C . S . G"
|
||||
decoding="async"
|
||||
draggable={false}
|
||||
className="block select-none h-16 sm:h-20 w-auto"
|
||||
style={{ background: "transparent" }}
|
||||
/>
|
||||
<p
|
||||
id="login-modal-title"
|
||||
className="font-label text-[10px] tracking-[0.4em] uppercase text-purple-300/80 mt-3"
|
||||
|
||||
82
src/hooks/useSyncMe.ts
Normal file
82
src/hooks/useSyncMe.ts
Normal file
@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
import { useVoteStore } from "@/lib/store";
|
||||
|
||||
/**
|
||||
* 把服务端 /api/me 的真相态同步进本地 vote store。
|
||||
*
|
||||
* - status === "authenticated" → 拉一次 /api/me,用 votedArtists 覆盖本地
|
||||
* - status === "unauthenticated" → 清本地(避免上一个用户的票残留给下一个登录者)
|
||||
* - 切换用户(uid 变化) → 重新拉一次
|
||||
*
|
||||
* 僵尸 session 兜底:NextAuth 用 JWT 策略,cookie 不会因 DB user 被删而失效。
|
||||
* 当 /api/me 返回 401(签名失效) 或 NOT_FOUND(DB 里 user 已不存在) 时,
|
||||
* 自动 signOut() 清 cookie —— 避免页面"假登录"假象(显示已登录但拉不到数据)。
|
||||
*
|
||||
* localStorage 仅作为本设备的缓存加速首屏渲染,服务端永远是唯一真相源。
|
||||
*/
|
||||
export function useSyncMe() {
|
||||
const { data, status } = useSession();
|
||||
const hydrateFromServer = useVoteStore((s) => s.hydrateFromServer);
|
||||
const reset = useVoteStore((s) => s.reset);
|
||||
const lastSyncedUidRef = useRef<string | null>(null);
|
||||
|
||||
const sessionUser = data?.user as { id?: string } | undefined;
|
||||
const uid = sessionUser?.id ?? null;
|
||||
|
||||
useEffect(() => {
|
||||
if (status === "loading") return;
|
||||
|
||||
if (status === "unauthenticated") {
|
||||
if (lastSyncedUidRef.current !== null) {
|
||||
reset();
|
||||
lastSyncedUidRef.current = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// authenticated
|
||||
if (!uid) return;
|
||||
if (lastSyncedUidRef.current === uid) return;
|
||||
|
||||
let cancelled = false;
|
||||
const ctrl = new AbortController();
|
||||
const timer = setTimeout(() => ctrl.abort(), 8000);
|
||||
|
||||
fetch("/api/me", {
|
||||
credentials: "include",
|
||||
signal: ctrl.signal,
|
||||
})
|
||||
.then(async (r) => {
|
||||
if (cancelled) return;
|
||||
const res = await r.json().catch(() => null);
|
||||
|
||||
if (r.ok && res?.ok && Array.isArray(res.data?.votedArtists)) {
|
||||
hydrateFromServer(res.data.votedArtists as string[]);
|
||||
lastSyncedUidRef.current = uid;
|
||||
return;
|
||||
}
|
||||
|
||||
// 僵尸 session:JWT 还有效,但 DB 里 user 已不存在(或鉴权失效)。
|
||||
// 直接登出清 cookie,UI 状态切换为未登录,避免"显示已登录但拉不到数据"。
|
||||
const code: string | undefined = res?.error?.code;
|
||||
if (r.status === 401 || code === "UNAUTHORIZED" || code === "NOT_FOUND") {
|
||||
signOut({ redirect: false });
|
||||
reset();
|
||||
lastSyncedUidRef.current = null;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 网络失败容忍 —— 下次 status 变化或手动刷新会再试
|
||||
})
|
||||
.finally(() => clearTimeout(timer));
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
ctrl.abort();
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [status, uid, hydrateFromServer, reset]);
|
||||
}
|
||||
@ -26,6 +26,30 @@ interface UseVoteActionResult {
|
||||
confirmVote: (artist: Artist) => Promise<void>;
|
||||
}
|
||||
|
||||
interface UseVoteActionOpts {
|
||||
/**
|
||||
* 投票成功且服务端 200 写入后回调 —— 调用方在此触发 useRanking.refresh(),
|
||||
* 让 Top12 / 排行榜立即拉到新票数,而不是等 30s 下次轮询。
|
||||
* 不传则不做任何额外刷新(适合详情页等不显示排名的场景)。
|
||||
*/
|
||||
onVoteSuccess?: () => void;
|
||||
}
|
||||
|
||||
/** 服务端拉一次 /api/me,把权威态灌进本地 store。用于跨设备状态对齐。 */
|
||||
async function refetchMe(
|
||||
hydrateFromServer: (ids: string[]) => void,
|
||||
): Promise<void> {
|
||||
try {
|
||||
const res = await fetch("/api/me", { credentials: "include" });
|
||||
const data = await res.json();
|
||||
if (data?.ok && Array.isArray(data.data?.votedArtists)) {
|
||||
hydrateFromServer(data.data.votedArtists as string[]);
|
||||
}
|
||||
} catch {
|
||||
// 失败容忍 —— 下次页面交互或登录态变化会再同步
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 投票交互统一入口。
|
||||
*
|
||||
@ -34,11 +58,16 @@ interface UseVoteActionResult {
|
||||
* - 未登录 → toast 提示并跳登录弹窗
|
||||
* - 已投过该艺人 → toast 提示,不打开弹窗
|
||||
* - 12 票已用完 → toast 提示,不打开弹窗
|
||||
* - 弹窗确认后:本地 store 立即记录 + 调用后端 API(fire-and-forget)
|
||||
* - 弹窗确认后:乐观更新本地 + await 服务端写入
|
||||
* - 服务端拒绝 → 回滚本地 + 用 /api/me 重新对齐(跨设备真相源)
|
||||
* - API 200 后触发 opts.onVoteSuccess() —— 让排名相关页面立即 refresh,
|
||||
* 解决"票数 +1 / Top12 排位要等 30s"的体感问题
|
||||
*/
|
||||
export function useVoteAction(): UseVoteActionResult {
|
||||
export function useVoteAction(opts: UseVoteActionOpts = {}): UseVoteActionResult {
|
||||
const { status } = useSession();
|
||||
const recordVote = useVoteStore((s) => s.vote);
|
||||
const rollbackVote = useVoteStore((s) => s.rollbackVote);
|
||||
const hydrateFromServer = useVoteStore((s) => s.hydrateFromServer);
|
||||
const remaining = useVoteStore(selectRemaining);
|
||||
const votedArtists = useVoteStore((s) => s.votedArtists);
|
||||
const openLogin = useLoginModalStore((s) => s.show);
|
||||
@ -69,7 +98,7 @@ export function useVoteAction(): UseVoteActionResult {
|
||||
|
||||
const confirmVote = useCallback(
|
||||
async (artist: Artist) => {
|
||||
// 1. 本地 store 记录(包含已投/已满校验)
|
||||
// 1. 乐观更新本地(含已投/已满兜底校验)
|
||||
const result = recordVote(artist.id);
|
||||
if (!result.ok) {
|
||||
if (result.reason === "already") {
|
||||
@ -81,30 +110,67 @@ export function useVoteAction(): UseVoteActionResult {
|
||||
return;
|
||||
}
|
||||
|
||||
// 投票成功:计算投票后状态,判断是否是最后一票
|
||||
// 乐观成功提示;若服务端拒绝再 dismiss + 报错
|
||||
const remainingAfter = remaining - 1;
|
||||
if (remainingAfter === 0) {
|
||||
toast.success(`完成!你的 12 票已全部投出 ✦`, { duration: 4000 });
|
||||
} else {
|
||||
toast.success(`已为 ${artist.name} 投票 · 剩余 ${remainingAfter} 票`);
|
||||
}
|
||||
const successMsg =
|
||||
remainingAfter === 0
|
||||
? `完成!你的 12 票已全部投出 ✦`
|
||||
: `已为 ${artist.name} 投票 · 剩余 ${remainingAfter} 票`;
|
||||
const successToastId = toast.success(successMsg, {
|
||||
duration: remainingAfter === 0 ? 4000 : 2800,
|
||||
});
|
||||
setTarget(null);
|
||||
|
||||
// 2. 后台 fire-and-forget 调用真实 API(5 秒超时,失败静默忽略)
|
||||
// 注意:旧 API 仍接收 count 参数,这里固定传 1。后端逻辑 unique 约束
|
||||
// 等后续提交单独迁移,现阶段前端 store 已保证不会重投。
|
||||
// 2. await 服务端真实写入。失败 → 回滚 + 用 /api/me 对齐
|
||||
const ctrl = new AbortController();
|
||||
const timer = setTimeout(() => ctrl.abort(), 5000);
|
||||
fetch("/api/vote", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ artistId: artist.id, count: 1 }),
|
||||
signal: ctrl.signal,
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => clearTimeout(timer));
|
||||
const timer = setTimeout(() => ctrl.abort(), 8000);
|
||||
try {
|
||||
const res = await fetch("/api/vote", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ artistId: artist.id, count: 1 }),
|
||||
signal: ctrl.signal,
|
||||
credentials: "include",
|
||||
});
|
||||
const data = await res.json().catch(() => null);
|
||||
|
||||
if (res.ok && data?.ok) {
|
||||
// API 200 → 通知调用方(如首页)立即 refresh 排名,不等 30s 轮询
|
||||
opts.onVoteSuccess?.();
|
||||
return;
|
||||
}
|
||||
|
||||
// 服务端拒绝 → 回滚乐观更新
|
||||
rollbackVote(artist.id);
|
||||
toast.dismiss(successToastId);
|
||||
|
||||
const code: string | undefined = data?.error?.code;
|
||||
if (code === "ALREADY_VOTED") {
|
||||
toast.error("你已在其他设备为该艺人投过票");
|
||||
} else if (code === "QUOTA_EXHAUSTED") {
|
||||
toast.error("你的 12 票已在其他设备投完");
|
||||
} else if (code === "UNAUTHORIZED") {
|
||||
toast.error("登录已失效,请重新登录");
|
||||
} else if (code === "ACTIVITY_OFF") {
|
||||
toast.error("投票活动暂未开放");
|
||||
} else if (code === "RATE_LIMITED") {
|
||||
toast.error("操作太快了,请稍后再试");
|
||||
} else {
|
||||
toast.error(data?.error?.message ?? "投票失败,请重试");
|
||||
}
|
||||
|
||||
// 跨设备状态对齐:服务端永远是真相源
|
||||
await refetchMe(hydrateFromServer);
|
||||
} catch {
|
||||
// 网络错误 / 超时 → 回滚 + 不强拉 /api/me(网络问题大概率也拉不到)
|
||||
rollbackVote(artist.id);
|
||||
toast.dismiss(successToastId);
|
||||
toast.error("网络异常,投票未生效");
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
},
|
||||
[recordVote, remaining],
|
||||
[recordVote, rollbackVote, hydrateFromServer, remaining, opts],
|
||||
);
|
||||
|
||||
return {
|
||||
|
||||
@ -30,7 +30,14 @@ interface VoteStore {
|
||||
* - 成功 → 返回 { ok: true }
|
||||
*/
|
||||
vote: (artistId: string) => { ok: boolean; reason?: "already" | "exhausted" };
|
||||
/** 重置(开发时用 / 测试用) */
|
||||
/**
|
||||
* 服务端权威态覆盖本地态:登录后从 /api/me 拿到的 votedArtists 直接灌进来,
|
||||
* 跨设备/清缓存的关键 —— 本地 localStorage 不再是唯一真相源。
|
||||
*/
|
||||
hydrateFromServer: (votedArtists: string[]) => void;
|
||||
/** 服务端拒绝时回滚单次投票(乐观更新的兜底) */
|
||||
rollbackVote: (artistId: string) => void;
|
||||
/** 重置(开发时用 / 测试用 / 登出时清理) */
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
@ -65,6 +72,37 @@ export const useVoteStore = create<VoteStore>()(
|
||||
});
|
||||
return { ok: true };
|
||||
},
|
||||
hydrateFromServer: (votedArtists) => {
|
||||
// 用服务端返回的 votedArtists 重建 artists 票数(回放 mock baseline)
|
||||
const counts = new Map<string, number>();
|
||||
for (const id of votedArtists) {
|
||||
counts.set(id, (counts.get(id) ?? 0) + 1);
|
||||
}
|
||||
const rebuilt = INITIAL_ARTISTS.map((a) => ({
|
||||
...a,
|
||||
votes: a.votes + (counts.get(a.id) ?? 0),
|
||||
}));
|
||||
set({
|
||||
artists: rank(rebuilt),
|
||||
votedArtists,
|
||||
});
|
||||
},
|
||||
rollbackVote: (artistId) => {
|
||||
const state = get();
|
||||
const idx = state.votedArtists.lastIndexOf(artistId);
|
||||
if (idx === -1) return;
|
||||
const nextVoted = [
|
||||
...state.votedArtists.slice(0, idx),
|
||||
...state.votedArtists.slice(idx + 1),
|
||||
];
|
||||
const updated = state.artists.map((a) =>
|
||||
a.id === artistId ? { ...a, votes: Math.max(0, a.votes - 1) } : a,
|
||||
);
|
||||
set({
|
||||
artists: rank(updated),
|
||||
votedArtists: nextVoted,
|
||||
});
|
||||
},
|
||||
reset: () =>
|
||||
set({
|
||||
artists: INITIAL_ARTISTS,
|
||||
@ -75,7 +113,8 @@ export const useVoteStore = create<VoteStore>()(
|
||||
name: "cyber-star-vote",
|
||||
// 仅持久化 votedArtists —— artists 票数/排名是派生数据,
|
||||
// 刷新后重新从初始数据 + votedArtists 重建。
|
||||
// 注意:当前 mock 阶段 artists 只反映本地投票,不同步服务端 —— 等后端接入再调整。
|
||||
// localStorage 仅作本设备缓存,加速首屏渲染;真相源是 /api/me
|
||||
// —— useSyncMe 会在登录/切换用户后用服务端数据覆盖本地。
|
||||
partialize: (state) => ({ votedArtists: state.votedArtists }),
|
||||
// rehydrate 时把 votedArtists 数据"回放"到 artists 票数上,保持视图一致
|
||||
onRehydrateStorage: () => (state) => {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
* 立即看到更新后的内容,不必等 TTL 过期或手动 invalidate。
|
||||
*/
|
||||
const TOS_BASE = (process.env.NEXT_PUBLIC_TOS_DOMAIN ?? "").replace(/\/+$/, "");
|
||||
const TOS_VERSION = "7";
|
||||
const TOS_VERSION = "8";
|
||||
|
||||
export function tosUrl(path: string): string {
|
||||
const clean = path.replace(/^\/+/, "");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user