fix(data,ranking,ui): real dynamic ranking + data sync hardening
数据准确性 - 票数初始为 0,不再用 Math.sqrt 公式造假票 - 排序 tiebreaker 统一为 votes desc + no asc,确保稳定 - store.rank() 与 sortArtists() 行为对齐 Top12 / 出道位 - Top12Bar 仅收纳真正有票的人(votes > 0),0 票时显示"出道位尚未产生"空态 - ArtistCard / RankingRow / SearchModal / MyFanSupport / RankCard 的 inTop12 高亮全部加 votes > 0 守卫 - ArtistFilters 新增"实时排名 / 编号顺序"分段切换 + 首页 sortKey 状态 领奖台 (Top3Podium) - 1 人有票即可显示领奖台(此前要求 >= 3 人才显示) - 缺位的 #2/#3 用"虚位以待"占位卡片填充,与正式卡片同 3:4 比例对齐 - 全员 0 票时三张全部显示虚位以待 - 卡片间距拉大到 gap-8 sm:gap-12 排行榜页 (/ranking) - API 票数与本地乐观投票取 max() 合并,避免 API 落后覆盖本地新票 - 合并后重新排序与赋 rank - 仅 >= 12 人有票才显示出道线分隔与复活位标记 - 复活位 gapToDebut 计算修正 跨日额度 - selectRemaining 按 quotaDate 判断是否跨日,跨日自动回满额(此前会卡在昨日剩余值) 搜索 (SearchModal) - 改为订阅 store 拿活的票数,投票后立即反映 - 默认"热门 Top12"只在真正有票时显示,否则降级为"推荐艺人 · 编号顺序" - 票数显示统一走 formatVotes(0 票不再显示 0.0w) 人物详情 - 36 人真实数据接入,移除全部静态数据(slogan/birthday/cv/themeColor) - 接入人物小传 docx 数据(年龄/身高/性格/口头禅/技能/赛道/座右铭/长简介) - 视频区与版心同宽 + 首帧自动作为封面 + 整区点击播放/暂停 + 可拖拽进度条 - 表演图片改为三张氛围图竖向 3:4,左对齐 - 移除分享按钮,投票按钮全宽 个人页 (/me) - 移除等级/邀请好友/签到/编辑资料等静态数据 - 退出登录按钮在移动端 icon-only 显示(此前 sm:hidden 导致移动端无法登出) - 我的应援 list 基于真实 myVotesByArtist 派生,凯之类的投票真正同步过去 导航 - 余票徽章未登录态显示 0/0,已登录显示 N/10 - 登录/注册按钮样式与登录后头像胶囊保持一致(紫色实心) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d5ed43acbd
commit
71a2672ff6
4
.gitignore
vendored
4
.gitignore
vendored
@ -40,3 +40,7 @@ yarn-error.log*
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# 大型静态资源 · 走 TOS 桶 + CDN，不入仓库
|
||||
/public/portraits/
|
||||
/public/videos/
|
||||
|
||||
1
public/rank-1.svg
Normal file
1
public/rank-1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.9 MiB |
1
public/rank-2.svg
Normal file
1
public/rank-2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 3.7 MiB |
1
public/rank-3.svg
Normal file
1
public/rank-3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 4.1 MiB |
@ -21,8 +21,6 @@ export async function GET() {
|
||||
no: string;
|
||||
name: string;
|
||||
enName: string;
|
||||
slogan: string;
|
||||
themeColor: string;
|
||||
voteCount: number;
|
||||
currentRank: number | null;
|
||||
};
|
||||
@ -53,8 +51,6 @@ export async function GET() {
|
||||
no: true,
|
||||
name: true,
|
||||
enName: true,
|
||||
slogan: true,
|
||||
themeColor: true,
|
||||
voteCount: true,
|
||||
currentRank: true,
|
||||
},
|
||||
|
||||
@ -3,7 +3,7 @@ import { ok, ERR } from "@/lib/api-response";
|
||||
|
||||
/**
|
||||
* GET /api/ranking
|
||||
* 返回完整 35 人实时排名（按 voteCount 降序）。
|
||||
* 返回完整 36 人实时排名（按 voteCount 降序）。
|
||||
*
|
||||
* 该接口适合每分钟轮询。生产环境会优先读 Redis 缓存（由后台聚合任务每分钟刷新）。
|
||||
*/
|
||||
@ -17,8 +17,6 @@ export async function GET() {
|
||||
no: true,
|
||||
name: true,
|
||||
enName: true,
|
||||
slogan: true,
|
||||
themeColor: true,
|
||||
avatar: true,
|
||||
portrait: true,
|
||||
voteCount: true,
|
||||
|
||||
@ -35,7 +35,7 @@ const inter = Inter({
|
||||
export const metadata: Metadata = {
|
||||
title: "CYBER ✦ STAR · 虚拟偶像 Top12 出道企划",
|
||||
description:
|
||||
"35 位虚拟偶像候选人，由你投票决出最终出道 Top12。Cyber Star · Virtual Idol Debut Project.",
|
||||
"36 位虚拟偶像候选人，由你投票决出最终出道 Top12。Cyber Star · Virtual Idol Debut Project.",
|
||||
keywords: ["虚拟偶像", "出道", "投票", "Top12", "Cyber Star", "Virtual Idol"],
|
||||
openGraph: {
|
||||
title: "CYBER ✦ STAR",
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useMemo } from "react";
|
||||
import { signOut } from "next-auth/react";
|
||||
import toast from "react-hot-toast";
|
||||
import UserHeader from "@/components/me/UserHeader";
|
||||
import QuotaCard from "@/components/me/QuotaCard";
|
||||
import StatsGrid from "@/components/me/StatsGrid";
|
||||
import SignInCalendar from "@/components/me/SignInCalendar";
|
||||
import MyFanSupport from "@/components/me/MyFanSupport";
|
||||
import { MOCK_USER, getFanSupports, type MockUser } from "@/lib/mock-user";
|
||||
import {
|
||||
useVoteStore,
|
||||
selectRemaining,
|
||||
DAILY_VOTE_QUOTA,
|
||||
type MySupport,
|
||||
} from "@/lib/store";
|
||||
|
||||
interface MeContentProps {
|
||||
@ -23,69 +22,23 @@ interface MeContentProps {
|
||||
}
|
||||
|
||||
export default function MeContent({ session }: MeContentProps) {
|
||||
// 订阅 store 原始引用（稳定，仅在 set() 时变更），组件内 useMemo 派生 supports，
|
||||
// 避免 Zustand v5 + useSyncExternalStore 对"selector 返回新引用"报 infinite-loop 错。
|
||||
const myTotalVotes = useVoteStore((s) => s.myTotalVotes);
|
||||
const myVotesByArtist = useVoteStore((s) => s.myVotesByArtist);
|
||||
const storeArtists = useVoteStore((s) => s.artists);
|
||||
const remaining = useVoteStore(selectRemaining);
|
||||
|
||||
const [signedInToday, setSignedInToday] = useState(MOCK_USER.todaySignedIn);
|
||||
const [weeklySignIn, setWeeklySignIn] = useState(MOCK_USER.weeklySignIn);
|
||||
|
||||
const user: MockUser = {
|
||||
...MOCK_USER,
|
||||
id: session.id,
|
||||
nickname: session.nickname,
|
||||
todaySignedIn: signedInToday,
|
||||
weeklySignIn,
|
||||
totalVotes: MOCK_USER.totalVotes + myTotalVotes,
|
||||
};
|
||||
|
||||
// 用 store 里最新的艺人排名重算"我的应援"当前排名
|
||||
const supports = getFanSupports().map((s) => {
|
||||
const fresh = storeArtists.find((a) => a.id === s.artist.id);
|
||||
return fresh ? { ...s, artist: fresh } : s;
|
||||
});
|
||||
|
||||
const handleInvite = async () => {
|
||||
const url =
|
||||
typeof window !== "undefined"
|
||||
? `${window.location.origin}?invite=${session.id}`
|
||||
: "";
|
||||
if (typeof navigator !== "undefined" && navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: "CYBER STAR · 一起为偶像应援",
|
||||
text: "邀请你加入虚拟偶像 Top12 出道企划！",
|
||||
url,
|
||||
});
|
||||
return;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
const supports = useMemo<MySupport[]>(() => {
|
||||
const list: MySupport[] = [];
|
||||
for (const [id, votedCount] of Object.entries(myVotesByArtist)) {
|
||||
if (votedCount <= 0) continue;
|
||||
const artist = storeArtists.find((a) => a.id === id);
|
||||
if (artist) list.push({ artist, votedCount });
|
||||
}
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
toast.success("邀请链接已复制 · 快去喊朋友一起来");
|
||||
} catch {
|
||||
toast.error("复制失败，请手动复制地址");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignIn = () => {
|
||||
if (signedInToday) {
|
||||
toast("今日已签到", { icon: "✓" });
|
||||
return;
|
||||
}
|
||||
const idx = weeklySignIn.findIndex((v) => !v);
|
||||
if (idx === -1) {
|
||||
toast("本周已全部签到");
|
||||
return;
|
||||
}
|
||||
const next = [...weeklySignIn];
|
||||
next[idx] = true;
|
||||
setWeeklySignIn(next);
|
||||
setSignedInToday(true);
|
||||
toast.success("签到成功");
|
||||
};
|
||||
list.sort((a, b) => b.votedCount - a.votedCount);
|
||||
return list;
|
||||
}, [myVotesByArtist, storeArtists]);
|
||||
|
||||
const handleLogout = () => {
|
||||
toast("正在退出登录…");
|
||||
@ -94,26 +47,15 @@ export default function MeContent({ session }: MeContentProps) {
|
||||
|
||||
return (
|
||||
<div className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-10 space-y-8">
|
||||
<UserHeader user={user} onLogout={handleLogout} />
|
||||
|
||||
<QuotaCard
|
||||
remaining={remaining}
|
||||
dailyQuota={DAILY_VOTE_QUOTA}
|
||||
cumulative={user.totalVotes}
|
||||
onInvite={handleInvite}
|
||||
<UserHeader
|
||||
nickname={session.nickname}
|
||||
userId={session.id}
|
||||
onLogout={handleLogout}
|
||||
/>
|
||||
|
||||
<StatsGrid user={user} />
|
||||
<QuotaCard remaining={remaining} dailyQuota={DAILY_VOTE_QUOTA} />
|
||||
|
||||
<section>
|
||||
<SectionTitle label="每日签到" />
|
||||
<SignInCalendar
|
||||
weekly={user.weeklySignIn}
|
||||
todaySigned={user.todaySignedIn}
|
||||
streak={user.signInStreak}
|
||||
onSignIn={handleSignIn}
|
||||
/>
|
||||
</section>
|
||||
<StatsGrid totalVotes={myTotalVotes} supportingCount={supports.length} />
|
||||
|
||||
<section>
|
||||
<SectionTitle label="我的应援" />
|
||||
|
||||
@ -7,7 +7,7 @@ import Top12Bar from "@/components/Top12Bar";
|
||||
import ArtistCard from "@/components/cards/ArtistCard";
|
||||
import ArtistFilters, { type TagFilter } from "@/components/ArtistFilters";
|
||||
import VoteModal from "@/components/VoteModal";
|
||||
import { getActivityEndTime, sortArtists } from "@/lib/mock-data";
|
||||
import { getActivityEndTime, sortArtists, type SortKey } from "@/lib/mock-data";
|
||||
import { useVoteStore } from "@/lib/store";
|
||||
import { useVoteAction } from "@/hooks/useVoteAction";
|
||||
import { cn } from "@/lib/cn";
|
||||
@ -18,6 +18,7 @@ export default function Home() {
|
||||
useVoteAction();
|
||||
|
||||
const [tagFilter, setTagFilter] = useState<TagFilter>("all");
|
||||
const [sortKey, setSortKey] = useState<SortKey>("votes");
|
||||
const [filterStuck, setFilterStuck] = useState(false);
|
||||
const filterSentinelRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@ -28,8 +29,8 @@ export default function Home() {
|
||||
if (tagFilter !== "all") {
|
||||
list = list.filter((a) => a.tags.includes(tagFilter));
|
||||
}
|
||||
return sortArtists(list, "votes");
|
||||
}, [artists, tagFilter]);
|
||||
return sortArtists(list, sortKey);
|
||||
}, [artists, tagFilter, sortKey]);
|
||||
|
||||
// 仅在首页启用 scroll-snap mandatory：用户下滑就立即切换到下一个 snap 点
|
||||
// (Hero → Top12 → 候选区)。卸载时还原。
|
||||
@ -69,7 +70,7 @@ export default function Home() {
|
||||
scrollMarginTop: "80px",
|
||||
}}
|
||||
>
|
||||
<HeroBanner endTime={endTime} />
|
||||
<HeroBanner endTime={endTime} videoSrc="/videos/hero-pv.mp4" />
|
||||
</div>
|
||||
|
||||
{/* Top12 出道位 · 作为第二个 snap 点：滚动结束后自然落到这里，标题贴近顶部 */}
|
||||
@ -97,7 +98,7 @@ export default function Home() {
|
||||
<div className="flex items-end justify-between mb-3 px-1">
|
||||
<h2 className="font-display text-base sm:text-lg tracking-[0.2em] text-white inline-flex items-center gap-2">
|
||||
<Users size={16} className="text-purple-300" />
|
||||
35 位候选人
|
||||
{artists.length} 位候选人
|
||||
</h2>
|
||||
<p className="font-label text-[11px] tracking-widest text-white/45 uppercase">
|
||||
当前显示{" "}
|
||||
@ -122,7 +123,12 @@ export default function Home() {
|
||||
style={{ top: "80px" }}
|
||||
>
|
||||
<div className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ArtistFilters tagFilter={tagFilter} onTagChange={setTagFilter} />
|
||||
<ArtistFilters
|
||||
tagFilter={tagFilter}
|
||||
onTagChange={setTagFilter}
|
||||
sort={sortKey}
|
||||
onSortChange={setSortKey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -19,22 +19,48 @@ export default function RankingPage() {
|
||||
|
||||
const live = useRanking({ pollInterval: 30_000 });
|
||||
|
||||
// 数据同步：本地乐观投票 + 服务端最新票数取 max（避免 API 落后覆盖本地新票，
|
||||
// 也避免本地缺其他用户的票数）。合并后按 votes desc + no asc 重新排序并赋 rank。
|
||||
const sorted = useMemo<Artist[]>(() => {
|
||||
if (live.data?.list && live.data.list.length > 0) {
|
||||
return live.data.list.map((row) => {
|
||||
const base = storeArtists.find((a) => a.id === row.id);
|
||||
if (!base) return row as unknown as Artist;
|
||||
return { ...base, votes: row.voteCount, rank: row.rank };
|
||||
});
|
||||
const apiVotes = new Map<string, number>();
|
||||
if (live.data?.list) {
|
||||
for (const row of live.data.list) apiVotes.set(row.id, row.voteCount);
|
||||
}
|
||||
return sortArtists(storeArtists, "votes");
|
||||
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");
|
||||
// 重新按合并后的排名赋 rank（store 自带的 rank 仅来自本地 vote 后的 rank()）
|
||||
return ranked.map((a, i) => ({ ...a, rank: i + 1 }));
|
||||
}, [storeArtists, live.data]);
|
||||
|
||||
const top3 = sorted.slice(0, 3);
|
||||
const top4to12 = sorted.slice(3, 12);
|
||||
const candidates = sorted.slice(12);
|
||||
// 仅有票的人能"进榜单"，0 票不参与排名兜底
|
||||
const ranked = sorted.filter((a) => a.votes > 0);
|
||||
const zeros = sorted.filter((a) => a.votes === 0);
|
||||
// 只要有 1 人有票就显示领奖台（#2/#3 缺位会自动以"虚位以待"占位）；
|
||||
// 至少 12 人有票才有"出道线 / 复活位"概念
|
||||
const podiumReady = ranked.length >= 1;
|
||||
const debutReady = ranked.length >= 12;
|
||||
|
||||
const debutCutoff = sorted[11]?.votes ?? 0;
|
||||
const top3 = podiumReady ? ranked.slice(0, 3) : [];
|
||||
|
||||
// 出道线上方（top3 之后到出道线之间）
|
||||
// - Top12 满员：经典 9 位（rank 4-12）
|
||||
// - 已有领奖台但 Top12 未满：podium 之后的所有有票
|
||||
// - 连领奖台都没满：所有有票的人都从这里开始
|
||||
const aboveLine = debutReady
|
||||
? ranked.slice(3, 12)
|
||||
: podiumReady
|
||||
? ranked.slice(3)
|
||||
: ranked;
|
||||
|
||||
// 出道线下方
|
||||
// - Top12 满员：ranked[12..] + 全部 0 票
|
||||
// - 否则：仅 0 票
|
||||
const belowLine = debutReady ? [...ranked.slice(12), ...zeros] : zeros;
|
||||
|
||||
const debutCutoff = debutReady ? ranked[11].votes : 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -59,8 +85,13 @@ export default function RankingPage() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{top4to12.map((a, idx) => {
|
||||
const prev = idx === 0 ? top3[2] : top4to12[idx - 1];
|
||||
{aboveLine.map((a, idx) => {
|
||||
const prev =
|
||||
idx === 0
|
||||
? podiumReady
|
||||
? top3[2]
|
||||
: undefined
|
||||
: aboveLine[idx - 1];
|
||||
const gap = prev ? prev.votes - a.votes : undefined;
|
||||
return (
|
||||
<RankingRow
|
||||
@ -73,14 +104,16 @@ export default function RankingPage() {
|
||||
})}
|
||||
</div>
|
||||
|
||||
<DebutLineDivider />
|
||||
{/* 仅 Top12 满员才显示"出道线"分隔 */}
|
||||
{debutReady && <DebutLineDivider />}
|
||||
|
||||
<div>
|
||||
{candidates.map((a, idx) => {
|
||||
{belowLine.map((a, idx) => {
|
||||
const prev =
|
||||
idx === 0 ? top4to12[top4to12.length - 1] : candidates[idx - 1];
|
||||
idx === 0 ? aboveLine[aboveLine.length - 1] : belowLine[idx - 1];
|
||||
const gap = prev ? prev.votes - a.votes : undefined;
|
||||
const isRescue = idx === 0;
|
||||
// 仅 Top12 满员时第一位才是"复活位"
|
||||
const isRescue = debutReady && idx === 0;
|
||||
const gapToDebut = isRescue ? debutCutoff - a.votes + 1 : undefined;
|
||||
return (
|
||||
<RankingRow
|
||||
|
||||
@ -2,38 +2,75 @@
|
||||
|
||||
import { cn } from "@/lib/cn";
|
||||
import type { ArtistTag } from "@/types/artist";
|
||||
import type { SortKey } from "@/lib/mock-data";
|
||||
|
||||
export type ViewMode = "grid" | "list";
|
||||
export type TagFilter = ArtistTag | "all";
|
||||
|
||||
interface ArtistFiltersProps {
|
||||
tagFilter: TagFilter;
|
||||
onTagChange: (tag: TagFilter) => void;
|
||||
sort: SortKey;
|
||||
onSortChange: (sort: SortKey) => void;
|
||||
}
|
||||
|
||||
const TAG_OPTIONS: { key: TagFilter; label: string }[] = [
|
||||
{ key: "all", label: "全部" },
|
||||
{ key: "dance", label: "舞蹈担当" },
|
||||
{ key: "vocal", label: "声乐担当" },
|
||||
{ key: "rap", label: "rap担当" },
|
||||
{ key: "all-rounder", label: "全能型" },
|
||||
{ key: "rock", label: "摇滚" },
|
||||
{ key: "pop", label: "流行" },
|
||||
{ key: "chinese", label: "国风" },
|
||||
{ key: "hiphop", label: "嘻哈说唱" },
|
||||
{ key: "folk", label: "民谣治愈" },
|
||||
{ key: "jazz", label: "爵士" },
|
||||
];
|
||||
|
||||
const SORT_OPTIONS: { key: SortKey; label: string }[] = [
|
||||
{ key: "votes", label: "实时排名" },
|
||||
{ key: "no", label: "编号顺序" },
|
||||
];
|
||||
|
||||
export default function ArtistFilters({
|
||||
tagFilter,
|
||||
onTagChange,
|
||||
sort,
|
||||
onSortChange,
|
||||
}: ArtistFiltersProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-1 py-3 border-b border-white/[0.06] overflow-x-auto">
|
||||
{TAG_OPTIONS.map((opt) => (
|
||||
<TagPill
|
||||
key={opt.key}
|
||||
active={tagFilter === opt.key}
|
||||
onClick={() => onTagChange(opt.key)}
|
||||
>
|
||||
{opt.label}
|
||||
</TagPill>
|
||||
))}
|
||||
<div className="flex items-center gap-3 py-3 border-b border-white/[0.06]">
|
||||
{/* 左:标签筛选 */}
|
||||
<div className="flex items-center gap-1 overflow-x-auto flex-1 min-w-0">
|
||||
{TAG_OPTIONS.map((opt) => (
|
||||
<TagPill
|
||||
key={opt.key}
|
||||
active={tagFilter === opt.key}
|
||||
onClick={() => onTagChange(opt.key)}
|
||||
>
|
||||
{opt.label}
|
||||
</TagPill>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 右:排序切换(segmented control 胶囊) */}
|
||||
<div className="flex-shrink-0 inline-flex rounded-full bg-white/[0.04] border border-white/10 p-0.5 text-xs">
|
||||
{SORT_OPTIONS.map((opt) => {
|
||||
const active = sort === opt.key;
|
||||
return (
|
||||
<button
|
||||
key={opt.key}
|
||||
type="button"
|
||||
onClick={() => onSortChange(opt.key)}
|
||||
aria-pressed={active}
|
||||
className={cn(
|
||||
"px-3 sm:px-3.5 h-7 rounded-full transition-colors whitespace-nowrap",
|
||||
active
|
||||
? "bg-purple-500/25 text-purple-100 shadow-[0_0_10px_rgba(139,92,246,0.35)]"
|
||||
: "text-white/55 hover:text-white/85",
|
||||
)}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,8 +6,13 @@ import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Search, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ARTISTS } from "@/lib/mock-data";
|
||||
import { useVoteStore } from "@/lib/store";
|
||||
import { TAG_LABEL, type Artist } from "@/types/artist";
|
||||
|
||||
function formatVotes(v: number): string {
|
||||
if (v >= 10_000) return `${(v / 10_000).toFixed(1)}w`;
|
||||
return v.toLocaleString();
|
||||
}
|
||||
import ArtistPortrait from "./cards/ArtistPortrait";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
@ -40,21 +45,30 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
// 过滤艺人：名字 / 编号 / slogan / 标签
|
||||
// 订阅 store 拿活的票数 / rank（投票后立即反映）
|
||||
const storeArtists = useVoteStore((s) => s.artists);
|
||||
|
||||
// 过滤艺人：名字 / 编号 / 座右铭 / 标签。默认显示真实 Top12（有票才上榜）
|
||||
const results = useMemo<Artist[]>(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return ARTISTS.slice(0, 12); // 默认显示前 12 名
|
||||
return ARTISTS.filter((a) => {
|
||||
const tagText = a.tags.map((t) => TAG_LABEL[t]).join("");
|
||||
return (
|
||||
a.name.toLowerCase().includes(q) ||
|
||||
a.enName.toLowerCase().includes(q) ||
|
||||
a.no.includes(q) ||
|
||||
a.slogan.toLowerCase().includes(q) ||
|
||||
tagText.includes(q)
|
||||
);
|
||||
}).slice(0, 20);
|
||||
}, [query]);
|
||||
if (!q) {
|
||||
const top12 = storeArtists.filter((a) => a.votes > 0).slice(0, 12);
|
||||
// 还没产生 Top12 时退回到默认 12 位（按编号），保持空态可浏览
|
||||
return top12.length > 0 ? top12 : storeArtists.slice(0, 12);
|
||||
}
|
||||
return storeArtists
|
||||
.filter((a) => {
|
||||
const tagText = a.tags.map((t) => TAG_LABEL[t]).join("");
|
||||
return (
|
||||
a.name.toLowerCase().includes(q) ||
|
||||
a.enName.toLowerCase().includes(q) ||
|
||||
a.no.includes(q) ||
|
||||
(a.motto?.toLowerCase().includes(q) ?? false) ||
|
||||
tagText.includes(q)
|
||||
);
|
||||
})
|
||||
.slice(0, 20);
|
||||
}, [query, storeArtists]);
|
||||
|
||||
// 键盘导航
|
||||
useEffect(() => {
|
||||
@ -162,7 +176,9 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
|
||||
{!query && (
|
||||
<div className="px-5 pt-1 pb-2">
|
||||
<p className="font-label text-[10px] tracking-widest uppercase text-purple-300/70">
|
||||
热门艺人 · TOP 12
|
||||
{results.some((a) => a.votes > 0)
|
||||
? "热门艺人 · TOP 12"
|
||||
: "推荐艺人 · 编号顺序"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -205,7 +221,7 @@ function ResultRow({
|
||||
onHover: () => void;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const inTop12 = artist.rank <= 12;
|
||||
const inTop12 = artist.rank <= 12 && artist.votes > 0;
|
||||
return (
|
||||
<Link
|
||||
data-index={index}
|
||||
@ -237,9 +253,11 @@ function ResultRow({
|
||||
· {artist.enName}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[11px] text-white/45 truncate">
|
||||
{artist.slogan}
|
||||
</div>
|
||||
{artist.motto && (
|
||||
<div className="text-[11px] text-white/45 truncate italic">
|
||||
“{artist.motto}”
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 text-right">
|
||||
@ -252,7 +270,7 @@ function ResultRow({
|
||||
#{artist.rank}
|
||||
</div>
|
||||
<div className="text-[10px] text-white/35 tabular-nums">
|
||||
{(artist.votes / 10000).toFixed(1)}w 票
|
||||
{formatVotes(artist.votes)} 票
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@ -18,7 +18,8 @@ function formatVotes(v: number): string {
|
||||
}
|
||||
|
||||
export default function Top12Bar({ artists, showHeader = true }: Top12BarProps) {
|
||||
const top12 = artists.slice(0, 12);
|
||||
// Top12 出道位 只看「真正有票」的人 —— 0 票时不靠编号兜底占位
|
||||
const top12 = artists.filter((a) => a.votes > 0).slice(0, 12);
|
||||
return (
|
||||
<div className="w-full">
|
||||
{showHeader && (
|
||||
@ -37,16 +38,31 @@ export default function Top12Bar({ artists, showHeader = true }: Top12BarProps)
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 12 张胶囊卡片 · grid 等分铺满，无滚动 · 无外边框无背景 */}
|
||||
<div
|
||||
className={cn(
|
||||
"grid grid-cols-6 sm:grid-cols-12 gap-2 sm:gap-3 py-2",
|
||||
)}
|
||||
>
|
||||
{top12.map((artist) => (
|
||||
<Top12Card key={artist.id} artist={artist} />
|
||||
))}
|
||||
</div>
|
||||
{top12.length === 0 ? (
|
||||
<Top12Empty />
|
||||
) : (
|
||||
// 12 张胶囊卡片 · grid 等分铺满，无滚动 · 无外边框无背景
|
||||
<div
|
||||
className={cn(
|
||||
"grid grid-cols-6 sm:grid-cols-12 gap-2 sm:gap-3 py-2",
|
||||
)}
|
||||
>
|
||||
{top12.map((artist) => (
|
||||
<Top12Card key={artist.id} artist={artist} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Top12Empty() {
|
||||
return (
|
||||
<div className="py-10 sm:py-12 px-6 text-center border border-dashed border-white/10 rounded-2xl bg-white/[0.02]">
|
||||
<p className="font-label text-[11px] tracking-widest uppercase text-purple-300 mb-2">
|
||||
Awaiting Votes
|
||||
</p>
|
||||
<p className="text-sm text-white/70">出道位尚未产生 · 等你为 ta 投下第一票</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ChevronLeft, Heart, Share2 } from "lucide-react";
|
||||
import toast from "react-hot-toast";
|
||||
import {
|
||||
ChevronLeft,
|
||||
Heart,
|
||||
Quote as QuoteIcon,
|
||||
Sparkles,
|
||||
Compass,
|
||||
MessageCircle,
|
||||
User,
|
||||
Ruler,
|
||||
Calendar,
|
||||
BookOpen,
|
||||
} from "lucide-react";
|
||||
import type { Artist } from "@/types/artist";
|
||||
import { TAG_LABEL } from "@/types/artist";
|
||||
import ArtistPortrait from "@/components/cards/ArtistPortrait";
|
||||
@ -14,17 +24,27 @@ import PerformanceGallery from "./PerformanceGallery";
|
||||
import FloatingVoteButton from "@/components/FloatingVoteButton";
|
||||
import { useVoteStore, selectArtist } from "@/lib/store";
|
||||
import { useVoteAction } from "@/hooks/useVoteAction";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
interface ArtistDetailContentProps {
|
||||
artist: Artist;
|
||||
allArtists: Artist[];
|
||||
}
|
||||
|
||||
/** 把 "、 / , ，" 分隔的串切成 chip 数组 */
|
||||
function parseChips(text?: string): string[] {
|
||||
if (!text) return [];
|
||||
return text
|
||||
.split(/[、，,/]/)
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
export default function ArtistDetailContent({
|
||||
artist: initialArtist,
|
||||
allArtists: initialAll,
|
||||
}: ArtistDetailContentProps) {
|
||||
// 用 store 数据覆盖（这样投票后票数能马上变）
|
||||
// 用 store 数据覆盖（投票后票数能马上变）
|
||||
const storeArtist = useVoteStore(selectArtist(initialArtist.id));
|
||||
const storeAll = useVoteStore((s) => s.artists);
|
||||
|
||||
@ -34,39 +54,9 @@ export default function ArtistDetailContent({
|
||||
const { target, remaining, dailyQuota, openVote, closeVote, confirmVote } =
|
||||
useVoteAction();
|
||||
|
||||
const handleShare = async () => {
|
||||
const url =
|
||||
typeof window !== "undefined"
|
||||
? `${window.location.origin}/artist/${artist.id}`
|
||||
: `/artist/${artist.id}`;
|
||||
const shareData = {
|
||||
title: `${artist.name} · CYBER STAR`,
|
||||
text: `为 ${artist.name}（${artist.enName}）打 Call！${artist.slogan}`,
|
||||
url,
|
||||
};
|
||||
|
||||
// 优先用 Web Share API（移动端 / Safari 支持）
|
||||
if (typeof navigator !== "undefined" && navigator.share) {
|
||||
try {
|
||||
await navigator.share(shareData);
|
||||
return;
|
||||
} catch {
|
||||
// 用户取消分享：不报错
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 兜底：复制到剪贴板
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
toast.success("链接已复制，去粘贴给朋友吧～");
|
||||
} catch {
|
||||
toast.error("复制失败，请手动复制地址栏");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 面包屑 */}
|
||||
<div className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pt-4">
|
||||
<div className="h-12 flex items-center gap-3 text-sm">
|
||||
<Link
|
||||
@ -77,135 +67,82 @@ export default function ArtistDetailContent({
|
||||
全部艺人
|
||||
</Link>
|
||||
<span className="text-white/30">/</span>
|
||||
<span className="text-white/85">艺人详情</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleShare}
|
||||
className="ml-auto inline-flex items-center gap-1.5 text-purple-300 hover:text-purple-200 text-xs"
|
||||
>
|
||||
<Share2 size={14} />
|
||||
<span className="hidden sm:inline">分享</span>
|
||||
</button>
|
||||
<span className="text-white/85 truncate">{artist.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-12">
|
||||
<div
|
||||
className="rounded-2xl border border-white/[0.06] overflow-hidden p-5 sm:p-8 grid gap-6 lg:grid-cols-[340px_1fr] lg:gap-8"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(13,10,36,0.6) 100%)",
|
||||
}}
|
||||
>
|
||||
<div className="relative">
|
||||
<ArtistPortrait
|
||||
artist={artist}
|
||||
rounded="rounded-xl"
|
||||
className="w-full aspect-[4/5] shadow-card"
|
||||
/>
|
||||
<div className="mt-3 flex items-center gap-2 px-3 py-2 rounded-lg bg-black/35 border border-white/10">
|
||||
<span
|
||||
className="w-4 h-4 rounded-full ring-2 ring-white/20"
|
||||
style={{ background: artist.themeColor }}
|
||||
/>
|
||||
<span className="font-label text-[10px] tracking-widest uppercase text-white/55">
|
||||
应援色
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-white/45 ml-auto">
|
||||
{artist.themeColor}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<div className="font-label text-[10px] tracking-[0.3em] uppercase text-purple-300/80 mb-2">
|
||||
No.{artist.no}
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-4xl font-bold text-white tracking-tight mb-1">
|
||||
{artist.name}
|
||||
</h1>
|
||||
<p className="font-display text-lg tracking-[0.2em] uppercase text-purple-300 glow-text-purple">
|
||||
{artist.enName}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{artist.tags.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="px-2.5 py-1 rounded-full bg-purple-500/12 border border-purple-500/30 text-purple-300 text-[11px]"
|
||||
>
|
||||
{TAG_LABEL[t]}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<MetaCell label="生日" value={artist.birthday} />
|
||||
<MetaCell label="身高" value={`${artist.height} cm`} />
|
||||
<MetaCell label="CV" value={artist.cv ?? "未公开"} />
|
||||
</div>
|
||||
|
||||
<RankCard artist={artist} allArtists={allArtists} />
|
||||
|
||||
<div className="flex gap-3 pt-1">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
pulse
|
||||
className="flex-1"
|
||||
leftIcon={<Heart size={16} fill="currentColor" />}
|
||||
onClick={() => openVote(artist)}
|
||||
>
|
||||
投票
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
leftIcon={<Share2 size={14} />}
|
||||
aria-label="分享"
|
||||
onClick={handleShare}
|
||||
>
|
||||
<span className="hidden sm:inline">关注</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-12">
|
||||
<SectionHeading title="表演视频" subtitle="15s Performance" />
|
||||
<PerformanceVideo themeColor={artist.themeColor} duration="00:15" />
|
||||
<p className="text-xs text-white/40 mt-3">
|
||||
视频不会自动播放，避免流量浪费
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-12">
|
||||
<SectionHeading title="表演图片" subtitle="Performance Gallery" />
|
||||
<PerformanceGallery
|
||||
images={artist.gallery}
|
||||
themeColor={artist.themeColor}
|
||||
{/* HERO · 立绘 + 身份信息 */}
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-10">
|
||||
<HeroPanel
|
||||
artist={artist}
|
||||
allArtists={allArtists}
|
||||
onVote={() => openVote(artist)}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-20">
|
||||
<SectionHeading title="艺人简介" subtitle="Biography" />
|
||||
<div className="bg-surface/50 backdrop-blur-md border border-white/[0.08] rounded-xl p-5 sm:p-7">
|
||||
<p className="text-sm sm:text-base text-white/75 leading-[1.85]">
|
||||
{artist.bio}
|
||||
</p>
|
||||
<div className="mt-5 pt-5 border-t border-white/[0.06] grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
|
||||
<BioMeta label="性格关键词" value={artist.slogan} />
|
||||
<BioMeta label="主推楼曲" value={`《${artist.enName}'s Song》`} />
|
||||
<BioMeta
|
||||
label="训练经历"
|
||||
value={`${Math.floor(artist.height / 30)} 年声乐 + 舞台`}
|
||||
/>
|
||||
{/* 性格 · 口头禅 */}
|
||||
{(artist.personality || artist.catchphrase) && (
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-10">
|
||||
<div className="grid lg:grid-cols-[1.5fr_1fr] gap-4">
|
||||
{artist.personality && <PersonalityCard text={artist.personality} />}
|
||||
{artist.catchphrase && <CatchphraseCard text={artist.catchphrase} />}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 核心技能 · 核心赛道 */}
|
||||
{(artist.skills || artist.track) && (
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-10">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{artist.skills && (
|
||||
<ChipCard
|
||||
label="核心技能"
|
||||
subtitle="Core Skills"
|
||||
icon={<Sparkles size={14} />}
|
||||
chips={parseChips(artist.skills)}
|
||||
/>
|
||||
)}
|
||||
{artist.track && (
|
||||
<ChipCard
|
||||
label="核心赛道"
|
||||
subtitle="Career Track"
|
||||
icon={<Compass size={14} />}
|
||||
chips={parseChips(artist.track)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 人物小传 · 长简介 */}
|
||||
{artist.bio && (
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-12">
|
||||
<BiographyCard bio={artist.bio} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 表演视频 · 与版心同宽,首帧自动作为封面,整个视频区域可点击播放/暂停 */}
|
||||
{artist.videoUrl && (
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-12">
|
||||
<SectionHeading title="表演视频" subtitle="Solo Performance" />
|
||||
<div className="mt-4">
|
||||
<PerformanceVideo src={artist.videoUrl} poster={artist.videoPoster} />
|
||||
</div>
|
||||
<p className="text-xs text-white/40 mt-3">
|
||||
视频不会自动播放，避免流量浪费
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 表演图片 · 三张氛围图,左对齐,竖向 3:4 */}
|
||||
{artist.gallery && artist.gallery.filter(Boolean).length > 0 && (
|
||||
<section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-20">
|
||||
<SectionHeading title="表演图片" subtitle="Performance Gallery" />
|
||||
<div className="mt-4">
|
||||
<PerformanceGallery images={artist.gallery} />
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<FloatingVoteButton onClick={() => openVote(artist)} />
|
||||
|
||||
@ -220,24 +157,258 @@ export default function ArtistDetailContent({
|
||||
);
|
||||
}
|
||||
|
||||
function MetaCell({ label, value }: { label: string; value: string }) {
|
||||
/* ============================================================
|
||||
* 子组件 · 统一品牌紫色，无 per-artist themeColor
|
||||
* ============================================================ */
|
||||
|
||||
interface HeroPanelProps {
|
||||
artist: Artist;
|
||||
allArtists: Artist[];
|
||||
onVote: () => void;
|
||||
}
|
||||
|
||||
function HeroPanel({ artist, allArtists, onVote }: HeroPanelProps) {
|
||||
return (
|
||||
<div className="bg-deep/60 border border-white/[0.06] rounded-lg px-3 py-2">
|
||||
<div className="font-label text-[9px] tracking-widest uppercase text-white/40 mb-0.5">
|
||||
{label}
|
||||
<div className="relative rounded-2xl border border-purple-500/20 overflow-hidden grid gap-6 lg:grid-cols-[420px_1fr] lg:gap-8 p-5 sm:p-8 bg-[linear-gradient(135deg,rgba(139,92,246,0.10)_0%,rgba(13,10,36,0.6)_100%)]">
|
||||
{/* 装饰光晕 */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute -top-24 -right-16 w-[420px] h-[420px] pointer-events-none bg-[radial-gradient(circle,rgba(139,92,246,0.22)_0%,transparent_60%)]"
|
||||
/>
|
||||
|
||||
{/* 立绘 */}
|
||||
<div className="relative">
|
||||
<ArtistPortrait
|
||||
artist={artist}
|
||||
rounded="rounded-xl"
|
||||
className="w-full aspect-[4/5] shadow-card"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 身份信息 */}
|
||||
<div className="relative flex flex-col gap-4">
|
||||
{/* 编号 */}
|
||||
<div className="font-label text-[10px] tracking-[0.3em] uppercase text-purple-300/80">
|
||||
No.{artist.no}
|
||||
</div>
|
||||
|
||||
{/* 中文名 / 英文名 */}
|
||||
<div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-white tracking-tight mb-1">
|
||||
{artist.name}
|
||||
</h1>
|
||||
<p className="font-display text-xl sm:text-2xl tracking-[0.22em] uppercase text-purple-300 glow-text-purple">
|
||||
{artist.enName}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 实力标签 */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{artist.tags.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="px-2.5 py-1 rounded-full bg-purple-500/12 border border-purple-500/30 text-purple-300 text-[11px]"
|
||||
>
|
||||
{TAG_LABEL[t]}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 年龄 / 身高 / 性别 */}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<MetaCell
|
||||
icon={<Calendar size={13} />}
|
||||
label="年龄"
|
||||
value={artist.age != null ? `${artist.age} 岁` : "未公开"}
|
||||
/>
|
||||
<MetaCell
|
||||
icon={<Ruler size={13} />}
|
||||
label="身高"
|
||||
value={`${artist.height} cm`}
|
||||
/>
|
||||
<MetaCell
|
||||
icon={<User size={13} />}
|
||||
label="性别"
|
||||
value={
|
||||
artist.gender === "M"
|
||||
? "男生"
|
||||
: artist.gender === "F"
|
||||
? "女生"
|
||||
: "未公开"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 座右铭 · 品牌紫引文,保持与全站视觉一致 */}
|
||||
{artist.motto && (
|
||||
<div className="relative pl-6 pr-4 py-3.5 rounded-r-lg bg-[linear-gradient(90deg,rgba(139,92,246,0.10)_0%,transparent_100%)] border-l-[3px] border-purple-400">
|
||||
<QuoteIcon size={14} className="absolute top-3 left-2 text-purple-400/50" />
|
||||
<p className="text-base sm:text-lg italic font-medium text-white/95 leading-snug">
|
||||
{artist.motto}
|
||||
</p>
|
||||
<p className="mt-1.5 font-label text-[10px] tracking-[0.25em] uppercase text-purple-300/70">
|
||||
Motto · 座右铭
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 排名卡片 */}
|
||||
<RankCard artist={artist} allArtists={allArtists} />
|
||||
|
||||
{/* 操作按钮 · 仅投票 */}
|
||||
<div className="pt-1">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
pulse
|
||||
className="w-full"
|
||||
leftIcon={<Heart size={16} fill="currentColor" />}
|
||||
onClick={onVote}
|
||||
>
|
||||
投票
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-white/85 truncate">{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BioMeta({ label, value }: { label: string; value: string }) {
|
||||
function MetaCell({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<span className="font-label text-[10px] tracking-widest uppercase text-purple-300/70 block mb-1">
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-white/85">{value}</span>
|
||||
<div className="bg-deep/60 border border-white/[0.06] rounded-lg px-3 py-2.5">
|
||||
<div className="flex items-center gap-1.5 text-purple-300/60 mb-0.5">
|
||||
{icon}
|
||||
<span className="font-label text-[9px] tracking-widest uppercase">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-white/90 truncate">{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 性格 / 口头禅 双卡使用完全相同的容器规范：
|
||||
* - 圆角 2xl + 玻璃化 surface 背景 + 同样的 border / padding
|
||||
* - 左上角同样的紫色装饰条
|
||||
* - 同款 SectionHeading
|
||||
* 唯一差异:内容呈现 —— 性格是段落正文，口头禅是大字引号。
|
||||
*/
|
||||
function ProfileInfoCard({
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="relative rounded-2xl border border-white/[0.08] bg-surface/50 backdrop-blur-md p-6 sm:p-8 overflow-hidden min-h-[200px]">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute top-0 left-0 w-1 h-16 rounded-r bg-[linear-gradient(180deg,#a78bfa_0%,transparent_100%)]"
|
||||
/>
|
||||
<SectionHeading title={title} subtitle={subtitle} />
|
||||
<div className="mt-5">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PersonalityCard({ text }: { text: string }) {
|
||||
return (
|
||||
<ProfileInfoCard title="性格" subtitle="Personality">
|
||||
<p
|
||||
className="text-sm sm:text-base leading-relaxed"
|
||||
style={{ color: "rgba(255,255,255,0.95)" }}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
</ProfileInfoCard>
|
||||
);
|
||||
}
|
||||
|
||||
function CatchphraseCard({ text }: { text: string }) {
|
||||
return (
|
||||
<ProfileInfoCard title="口头禅" subtitle="Catchphrase">
|
||||
<div className="flex items-start gap-3 h-full">
|
||||
<MessageCircle
|
||||
size={22}
|
||||
className="flex-shrink-0 mt-1 text-purple-400/70"
|
||||
/>
|
||||
<p className="text-lg sm:text-xl font-semibold text-white/95 leading-snug tracking-wide italic">
|
||||
“{text}”
|
||||
</p>
|
||||
</div>
|
||||
</ProfileInfoCard>
|
||||
);
|
||||
}
|
||||
|
||||
function ChipCard({
|
||||
label,
|
||||
subtitle,
|
||||
icon,
|
||||
chips,
|
||||
}: {
|
||||
label: string;
|
||||
subtitle: string;
|
||||
icon: React.ReactNode;
|
||||
chips: string[];
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/[0.08] bg-surface/40 backdrop-blur-md p-5 sm:p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<SectionHeading title={label} subtitle={subtitle} />
|
||||
<span className="text-purple-300/60">{icon}</span>
|
||||
</div>
|
||||
{chips.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2 mt-5">
|
||||
{chips.map((c, i) => (
|
||||
<span
|
||||
key={`${c}-${i}`}
|
||||
className={cn(
|
||||
"px-3 py-1.5 rounded-full border text-xs whitespace-nowrap",
|
||||
"bg-purple-500/12 border-purple-400/30 text-purple-200",
|
||||
)}
|
||||
>
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-4 text-sm text-white/45">未公开</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BiographyCard({ bio }: { bio: string }) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/[0.08] bg-surface/50 backdrop-blur-md p-6 sm:p-10">
|
||||
<div className="flex items-baseline justify-between mb-2">
|
||||
<SectionHeading title="人物小传" subtitle="Biography" />
|
||||
<span className="text-purple-300/60">
|
||||
<BookOpen size={14} />
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
className={cn(
|
||||
"mt-5 text-base sm:text-lg text-white/85 leading-[2.05]",
|
||||
// 首字下沉
|
||||
"first-letter:text-4xl sm:first-letter:text-5xl first-letter:font-display first-letter:text-purple-300",
|
||||
"first-letter:mr-2 first-letter:float-left first-letter:leading-none first-letter:mt-1",
|
||||
)}
|
||||
>
|
||||
{bio}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -250,8 +421,11 @@ function SectionHeading({
|
||||
subtitle: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="mb-4 flex items-baseline gap-3">
|
||||
<span aria-hidden className="w-1 h-4 rounded-full bg-purple-400 shadow-[0_0_8px_rgba(167,139,250,0.7)]" />
|
||||
<div className="inline-flex items-baseline gap-3">
|
||||
<span
|
||||
aria-hidden
|
||||
className="w-1 h-4 rounded-full bg-purple-400 shadow-[0_0_8px_rgba(167,139,250,0.7)]"
|
||||
/>
|
||||
<h2 className="font-display text-base sm:text-lg text-white tracking-[0.2em]">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -5,23 +5,14 @@ import { createPortal } from "react-dom";
|
||||
import { X, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
interface PerformanceGalleryProps {
|
||||
images: string[];
|
||||
/** 当无真实图时，用此颜色生成占位 */
|
||||
themeColor?: string;
|
||||
/** 占位标签（如 "定妆照"、"表演中"） */
|
||||
placeholderLabels?: string[];
|
||||
}
|
||||
|
||||
const DEFAULT_LABELS = ["定妆照", "表演中", "幕后花絮", "舞台 1", "舞台 2", "未公开"];
|
||||
|
||||
export default function PerformanceGallery({
|
||||
images,
|
||||
themeColor = "#8b5cf6",
|
||||
placeholderLabels = DEFAULT_LABELS,
|
||||
}: PerformanceGalleryProps) {
|
||||
export default function PerformanceGallery({ images }: PerformanceGalleryProps) {
|
||||
// 过滤掉空字符串，只渲染真实路径
|
||||
images = images.filter(Boolean);
|
||||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
@ -46,39 +37,31 @@ export default function PerformanceGallery({
|
||||
};
|
||||
}, [lightboxIndex, images.length]);
|
||||
|
||||
if (images.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-dashed border-white/10 p-10 text-center text-white/45 text-sm">
|
||||
暂无表演图片
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-3">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4">
|
||||
{images.map((src, i) => (
|
||||
<button
|
||||
type="button"
|
||||
key={i}
|
||||
key={src}
|
||||
onClick={() => setLightboxIndex(i)}
|
||||
className="group relative aspect-[4/3] rounded-lg overflow-hidden border border-white/[0.08] hover:border-purple-500/50 hover:shadow-[0_0_16px_rgba(139,92,246,0.25)] transition-all"
|
||||
className="group relative aspect-[3/4] rounded-xl overflow-hidden border border-white/[0.08] hover:border-purple-500/50 hover:shadow-[0_0_16px_rgba(139,92,246,0.25)] transition-all"
|
||||
>
|
||||
{src ? (
|
||||
<Image
|
||||
src={src}
|
||||
alt={`表演图 ${i + 1}`}
|
||||
fill
|
||||
sizes="(max-width: 768px) 33vw, 200px"
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="absolute inset-0 flex items-center justify-center text-white/55 text-[11px]"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${themeColor}25 0%, #1a1638 70%)`,
|
||||
}}
|
||||
>
|
||||
<span className="font-label tracking-widest uppercase text-[10px]">
|
||||
{placeholderLabels[i] || `Image ${i + 1}`}
|
||||
</span>
|
||||
<span className="absolute top-1.5 right-1.5 text-white/15 text-[10px]">
|
||||
✦
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Image
|
||||
src={src}
|
||||
alt={`表演图 ${i + 1}`}
|
||||
fill
|
||||
sizes="(max-width: 768px) 50vw, 320px"
|
||||
className="object-cover object-top group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@ -153,35 +136,13 @@ export default function PerformanceGallery({
|
||||
transition={{ duration: 0.25 }}
|
||||
className="relative max-w-5xl w-full mx-6 max-h-[85vh] aspect-[4/3] z-10"
|
||||
>
|
||||
{images[lightboxIndex] ? (
|
||||
<Image
|
||||
src={images[lightboxIndex]!}
|
||||
alt={`表演图 ${lightboxIndex + 1}`}
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-0 rounded-xl flex items-center justify-center",
|
||||
"border border-white/10",
|
||||
)}
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${themeColor}30 0%, #1a1638 70%)`,
|
||||
}}
|
||||
>
|
||||
<div className="text-center">
|
||||
<span className="font-logo text-6xl text-white/30 tracking-widest">
|
||||
✦
|
||||
</span>
|
||||
<p className="font-label text-xs tracking-widest text-white/55 uppercase mt-3">
|
||||
{placeholderLabels[lightboxIndex] ||
|
||||
`Image ${lightboxIndex + 1}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Image
|
||||
src={images[lightboxIndex]!}
|
||||
alt={`表演图 ${lightboxIndex + 1}`}
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-contain"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* 索引 */}
|
||||
|
||||
@ -1,27 +1,66 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import {
|
||||
MouseEvent as ReactMouseEvent,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Play, Pause, Volume2, VolumeX, Maximize2 } from "lucide-react";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
interface PerformanceVideoProps {
|
||||
src?: string;
|
||||
poster?: string;
|
||||
duration?: string;
|
||||
themeColor?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function fmtTime(s: number): string {
|
||||
if (!isFinite(s) || s < 0) return "00:00";
|
||||
const m = Math.floor(s / 60);
|
||||
const sec = Math.floor(s % 60);
|
||||
return `${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export default function PerformanceVideo({
|
||||
src,
|
||||
poster,
|
||||
duration = "00:15",
|
||||
themeColor = "#8b5cf6",
|
||||
className,
|
||||
}: PerformanceVideoProps) {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const progressRef = useRef<HTMLDivElement>(null);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
const [muted, setMuted] = useState(false);
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [seeking, setSeeking] = useState(false);
|
||||
|
||||
// 视频时间事件 + 首帧封面（loadedmetadata 后 seek 0.001s 让浏览器渲染首帧）
|
||||
useEffect(() => {
|
||||
const v = videoRef.current;
|
||||
if (!v) return;
|
||||
const onTime = () => !seeking && setCurrent(v.currentTime);
|
||||
const onMeta = () => {
|
||||
setDuration(v.duration);
|
||||
// 没有 poster 时强制渲染首帧
|
||||
if (!poster && v.currentTime === 0) {
|
||||
try {
|
||||
v.currentTime = 0.001;
|
||||
} catch {
|
||||
/* noop */
|
||||
}
|
||||
}
|
||||
};
|
||||
const onEnd = () => setPlaying(false);
|
||||
v.addEventListener("timeupdate", onTime);
|
||||
v.addEventListener("loadedmetadata", onMeta);
|
||||
v.addEventListener("ended", onEnd);
|
||||
return () => {
|
||||
v.removeEventListener("timeupdate", onTime);
|
||||
v.removeEventListener("loadedmetadata", onMeta);
|
||||
v.removeEventListener("ended", onEnd);
|
||||
};
|
||||
}, [seeking, poster]);
|
||||
|
||||
const togglePlay = () => {
|
||||
const v = videoRef.current;
|
||||
@ -46,101 +85,165 @@ export default function PerformanceVideo({
|
||||
videoRef.current?.requestFullscreen?.();
|
||||
};
|
||||
|
||||
// 进度条:点击 / 拖拽 seek
|
||||
const seekTo = (clientX: number) => {
|
||||
const bar = progressRef.current;
|
||||
const v = videoRef.current;
|
||||
if (!bar || !v || !duration) return;
|
||||
const rect = bar.getBoundingClientRect();
|
||||
const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
||||
const t = ratio * duration;
|
||||
v.currentTime = t;
|
||||
setCurrent(t);
|
||||
};
|
||||
|
||||
const handleBarMouseDown = (e: ReactMouseEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setSeeking(true);
|
||||
seekTo(e.clientX);
|
||||
const onMove = (ev: MouseEvent) => seekTo(ev.clientX);
|
||||
const onUp = () => {
|
||||
setSeeking(false);
|
||||
window.removeEventListener("mousemove", onMove);
|
||||
window.removeEventListener("mouseup", onUp);
|
||||
};
|
||||
window.addEventListener("mousemove", onMove);
|
||||
window.addEventListener("mouseup", onUp);
|
||||
};
|
||||
|
||||
const handleBarTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
|
||||
e.stopPropagation();
|
||||
setSeeking(true);
|
||||
const t = e.touches[0];
|
||||
if (t) seekTo(t.clientX);
|
||||
const onMove = (ev: TouchEvent) => {
|
||||
const tt = ev.touches[0];
|
||||
if (tt) seekTo(tt.clientX);
|
||||
};
|
||||
const onEnd = () => {
|
||||
setSeeking(false);
|
||||
window.removeEventListener("touchmove", onMove);
|
||||
window.removeEventListener("touchend", onEnd);
|
||||
};
|
||||
window.addEventListener("touchmove", onMove, { passive: true });
|
||||
window.addEventListener("touchend", onEnd);
|
||||
};
|
||||
|
||||
const progress = duration > 0 ? (current / duration) * 100 : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative w-full aspect-video bg-deep rounded-xl overflow-hidden border border-white/[0.08] group",
|
||||
"relative w-full bg-black rounded-xl overflow-hidden border border-white/[0.08] group",
|
||||
"aspect-video",
|
||||
className,
|
||||
)}
|
||||
onClick={src ? togglePlay : undefined}
|
||||
role={src ? "button" : undefined}
|
||||
aria-label={src ? (playing ? "暂停" : "播放") : undefined}
|
||||
>
|
||||
{src ? (
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={src}
|
||||
poster={poster}
|
||||
poster={poster || undefined}
|
||||
playsInline
|
||||
onEnded={() => setPlaying(false)}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
preload="metadata"
|
||||
className="absolute inset-0 w-full h-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-[radial-gradient(circle_at_50%_40%,rgba(139,92,246,0.30)_0%,#1a1638_55%,#08051a_100%)]">
|
||||
<p className="font-label text-[10px] tracking-[0.3em] uppercase text-white/40">
|
||||
视频暂未上线
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 中央播放提示(未播放时) · 仅作视觉提示,真正的点击区是整个容器 */}
|
||||
{!playing && src && (
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center z-10">
|
||||
<span className="w-16 h-16 rounded-full bg-white/15 backdrop-blur-md border-2 border-white/40 flex items-center justify-center text-white transition-transform group-hover:scale-110">
|
||||
<Play size={22} fill="white" />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 播放中 hover 中央暂停提示 */}
|
||||
{playing && (
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/30">
|
||||
<span className="w-14 h-14 rounded-full bg-white/15 backdrop-blur-md border-2 border-white/40 flex items-center justify-center text-white">
|
||||
<Pause size={20} />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 底部控制条 · 进度 + 时间 + 音量 + 全屏。点击控件不触发外层播放/暂停 */}
|
||||
{src && (
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background: `radial-gradient(circle at 50% 40%, ${themeColor}55 0%, #1a1638 55%, #08051a 100%)`,
|
||||
}}
|
||||
className={cn(
|
||||
"absolute inset-x-0 bottom-0 z-20 px-3 pt-10 pb-3 bg-gradient-to-t from-black/85 via-black/35 to-transparent transition-opacity",
|
||||
playing && !seeking
|
||||
? "opacity-0 group-hover:opacity-100"
|
||||
: "opacity-100",
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 装饰星点 */}
|
||||
<div className="absolute inset-0 opacity-50">
|
||||
<span className="absolute top-[15%] left-[20%] text-white text-xs">
|
||||
✦
|
||||
</span>
|
||||
<span className="absolute top-[70%] left-[80%] text-purple-300 text-sm">
|
||||
✧
|
||||
</span>
|
||||
<span className="absolute top-[30%] left-[70%] text-white/60 text-[10px]">
|
||||
✦
|
||||
{/* 进度条 · 可点击 / 拖拽 */}
|
||||
<div
|
||||
ref={progressRef}
|
||||
onMouseDown={handleBarMouseDown}
|
||||
onTouchStart={handleBarTouchStart}
|
||||
className="relative h-1.5 rounded-full bg-white/15 cursor-pointer group/bar"
|
||||
role="slider"
|
||||
aria-label="视频进度"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={duration || 0}
|
||||
aria-valuenow={current}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 rounded-full bg-purple-400 shadow-[0_0_10px_rgba(167,139,250,0.6)]"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
<div
|
||||
className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3.5 h-3.5 rounded-full bg-white shadow-[0_0_8px_rgba(255,255,255,0.7)] opacity-0 group-hover/bar:opacity-100 transition-opacity"
|
||||
style={{ left: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-2.5 flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={togglePlay}
|
||||
aria-label={playing ? "暂停" : "播放"}
|
||||
className="text-white/85 hover:text-white"
|
||||
>
|
||||
{playing ? <Pause size={16} /> : <Play size={16} fill="currentColor" />}
|
||||
</button>
|
||||
<span className="font-display text-[11px] text-white/75 tabular-nums">
|
||||
{fmtTime(current)} / {fmtTime(duration)}
|
||||
</span>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMute}
|
||||
aria-label={muted ? "取消静音" : "静音"}
|
||||
className="text-white/85 hover:text-white"
|
||||
>
|
||||
{muted ? <VolumeX size={14} /> : <Volume2 size={14} />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={goFullscreen}
|
||||
aria-label="全屏"
|
||||
className="text-white/85 hover:text-white"
|
||||
>
|
||||
<Maximize2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 顶部 15s 标签 */}
|
||||
<div className="absolute top-3 left-3 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-purple-600/90 backdrop-blur-md text-white text-[10px] font-display tracking-widest uppercase shadow-purple-glow z-10">
|
||||
▶ 15s Performance
|
||||
</div>
|
||||
|
||||
{/* 时长徽章 */}
|
||||
<div className="absolute bottom-3 right-3 px-2 py-0.5 rounded bg-black/65 backdrop-blur-md text-white text-[10px] font-display tracking-wider tabular-nums z-10">
|
||||
{duration}
|
||||
</div>
|
||||
|
||||
{/* 中央播放按钮（未播放时） */}
|
||||
{!playing && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={togglePlay}
|
||||
className="absolute inset-0 flex items-center justify-center z-10 group/play"
|
||||
aria-label="播放视频"
|
||||
>
|
||||
<span className="w-16 h-16 rounded-full bg-white/15 backdrop-blur-md border-2 border-white/40 flex items-center justify-center text-white group-hover/play:scale-110 transition-transform">
|
||||
<Play size={22} fill="white" />
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 暂停按钮 + 控制条（播放中） */}
|
||||
{playing && (
|
||||
<div className="absolute inset-0 flex items-center justify-center z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/30">
|
||||
<button
|
||||
type="button"
|
||||
onClick={togglePlay}
|
||||
className="w-14 h-14 rounded-full bg-white/15 backdrop-blur-md border-2 border-white/40 flex items-center justify-center text-white hover:scale-105 transition-transform"
|
||||
aria-label="暂停"
|
||||
>
|
||||
<Pause size={20} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 右下：音量 / 全屏 */}
|
||||
<div className="absolute bottom-3 left-3 flex items-center gap-1.5 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMute}
|
||||
aria-label={muted ? "取消静音" : "静音"}
|
||||
className="w-7 h-7 rounded-full bg-black/55 backdrop-blur-md flex items-center justify-center text-white/85 hover:text-white"
|
||||
>
|
||||
{muted ? <VolumeX size={12} /> : <Volume2 size={12} />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={goFullscreen}
|
||||
aria-label="全屏"
|
||||
className="w-7 h-7 rounded-full bg-black/55 backdrop-blur-md flex items-center justify-center text-white/85 hover:text-white"
|
||||
>
|
||||
<Maximize2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
import type { Artist } from "@/types/artist";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
function formatVotes(v: number): string {
|
||||
if (v >= 10_000) return `${(v / 10_000).toFixed(1)}w`;
|
||||
return v.toLocaleString();
|
||||
}
|
||||
|
||||
interface RankCardProps {
|
||||
artist: Artist;
|
||||
/** 全榜单（用于计算与上下名的差距） */
|
||||
@ -18,8 +23,9 @@ export default function RankCard({ artist, allArtists, className }: RankCardProp
|
||||
const leadOver = next ? artist.votes - next.votes : null;
|
||||
const trailBehind = prev ? prev.votes - artist.votes : null;
|
||||
|
||||
const isFirst = artist.rank === 1;
|
||||
const inTop12 = artist.rank <= 12;
|
||||
// 0 票时即便 rank=1 也不是真的"冠军"，按编号兜底而已
|
||||
const isFirst = artist.rank === 1 && artist.votes > 0;
|
||||
const inTop12 = artist.rank <= 12 && artist.votes > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -43,7 +49,7 @@ export default function RankCard({ artist, allArtists, className }: RankCardProp
|
||||
#{artist.rank}
|
||||
</span>
|
||||
<span className="text-xs text-white/45 pb-1 tabular-nums">
|
||||
{(artist.votes / 10000).toFixed(1)}w 票
|
||||
{formatVotes(artist.votes)} 票
|
||||
</span>
|
||||
</div>
|
||||
{inTop12 && (
|
||||
@ -53,9 +59,9 @@ export default function RankCard({ artist, allArtists, className }: RankCardProp
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 差距信息 */}
|
||||
{/* 差距信息 · 仅在艺人本身有票时显示 */}
|
||||
<div className="text-right">
|
||||
{isFirst && leadOver != null ? (
|
||||
{artist.votes > 0 && isFirst && leadOver != null ? (
|
||||
<>
|
||||
<div className="font-label text-[10px] tracking-widest uppercase text-white/40 mb-1">
|
||||
领先第二名
|
||||
@ -65,7 +71,7 @@ export default function RankCard({ artist, allArtists, className }: RankCardProp
|
||||
</div>
|
||||
<div className="text-[10px] text-white/40">票</div>
|
||||
</>
|
||||
) : trailBehind != null ? (
|
||||
) : artist.votes > 0 && trailBehind != null ? (
|
||||
<>
|
||||
<div className="font-label text-[10px] tracking-widest uppercase text-white/40 mb-1">
|
||||
距上一名
|
||||
|
||||
@ -39,13 +39,13 @@ export default function AuthMenu() {
|
||||
const user = session?.user;
|
||||
const initial = user?.name?.charAt(0).toUpperCase() ?? "?";
|
||||
|
||||
// 未登录态：紫色描边胶囊按钮
|
||||
// 未登录态：与登录后保持一致的紫色实心胶囊
|
||||
if (status !== "authenticated") {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => status !== "loading" && openLogin()}
|
||||
className="font-display text-[10px] sm:text-xs tracking-[0.2em] uppercase px-4 sm:px-5 h-9 inline-flex items-center justify-center rounded-full border border-[var(--border-purple)] text-purple-300 hover:bg-purple-500/10 hover:shadow-[0_0_20px_rgba(139,92,246,0.3)] transition-all"
|
||||
className="font-display text-[10px] sm:text-xs tracking-[0.2em] uppercase px-4 sm:px-5 h-9 inline-flex items-center justify-center rounded-full bg-grad-purple text-white shadow-[0_0_14px_rgba(139,92,246,0.45)] ring-1 ring-inset ring-white/15 hover:brightness-110 active:brightness-95 transition-all"
|
||||
>
|
||||
登录 / 注册
|
||||
</button>
|
||||
|
||||
@ -4,16 +4,19 @@ import { useSession } from "next-auth/react";
|
||||
import { useVoteStore, selectRemaining, DAILY_VOTE_QUOTA } from "@/lib/store";
|
||||
|
||||
/**
|
||||
* 导航栏右侧的"今日剩余票数"徽章。
|
||||
* - 仅登录态显示
|
||||
* - 实时从 vote store 取剩余票
|
||||
* - 视觉上是 **填充紫渐变胶囊**，与 AuthMenu 的描边/头像胶囊明显区分（信息 vs 操作）
|
||||
* 导航栏的"今日剩余票数"徽章。
|
||||
* - 始终显示（位于 AuthMenu 左侧）
|
||||
* - 未登录：数值固定为 0
|
||||
* - 已登录：实时从 vote store 取剩余票
|
||||
* - 视觉为中性轻盈胶囊，与 AuthMenu 的紫色实心胶囊明显区分（信息 vs 操作）
|
||||
*/
|
||||
export default function RemainingVotesBadge() {
|
||||
const { status } = useSession();
|
||||
const remaining = useVoteStore(selectRemaining);
|
||||
|
||||
if (status !== "authenticated") return null;
|
||||
const storeRemaining = useVoteStore(selectRemaining);
|
||||
const authed = status === "authenticated";
|
||||
// 未登录：0/0（没有额度）；登录后：当日剩余 / 每日总额度
|
||||
const remaining = authed ? storeRemaining : 0;
|
||||
const quota = authed ? DAILY_VOTE_QUOTA : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -26,9 +29,7 @@ export default function RemainingVotesBadge() {
|
||||
<span className="font-display text-sm text-purple-300 tabular-nums leading-none">
|
||||
{remaining}
|
||||
</span>
|
||||
<span className="text-[11px] text-white/45 leading-none">
|
||||
/ {DAILY_VOTE_QUOTA}
|
||||
</span>
|
||||
<span className="text-[11px] text-white/45 leading-none">/ {quota}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -21,7 +21,8 @@ export default function ArtistCard({
|
||||
onVote,
|
||||
className,
|
||||
}: ArtistCardProps) {
|
||||
const inTop12 = artist.rank <= 12;
|
||||
// 「真正进 Top12」必须有票 —— 0 票时编号兜底排出来的前 12 不算
|
||||
const inTop12 = artist.rank <= 12 && artist.votes > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -72,7 +73,7 @@ export default function ArtistCard({
|
||||
{artist.name}
|
||||
</div>
|
||||
<div className="text-[11px] text-white/55 truncate mt-0.5">
|
||||
{artist.slogan}
|
||||
{artist.enName}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
|
||||
@ -11,7 +11,7 @@ interface ArtistPortraitProps {
|
||||
|
||||
/**
|
||||
* 艺人立绘容器。
|
||||
* 有真实图时显示 Image；否则渲染基于 themeColor 的渐变占位（带首字母）。
|
||||
* 有真实图时显示 Image；否则渲染统一品牌紫渐变占位（带英文首字母）。
|
||||
*/
|
||||
export default function ArtistPortrait({
|
||||
artist,
|
||||
@ -26,45 +26,35 @@ export default function ArtistPortrait({
|
||||
if (artist.portrait) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative overflow-hidden bg-deep",
|
||||
rounded,
|
||||
className,
|
||||
)}
|
||||
className={cn("relative overflow-hidden bg-deep", rounded, className)}
|
||||
>
|
||||
<Image
|
||||
src={artist.portrait}
|
||||
alt={`${artist.name} · ${artist.enName}`}
|
||||
fill
|
||||
sizes="(max-width: 768px) 50vw, 240px"
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 50vw, 360px"
|
||||
// 氛围图大多为全身竖向构图，用 object-cover + object-top
|
||||
// 让头部 + 上半身保留在画面里，下半身（腿/脚）自然超出底边被剪裁
|
||||
className="object-cover object-top"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 无立绘 fallback：品牌紫渐变 + 字母占位
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative overflow-hidden flex items-center justify-center",
|
||||
"bg-[linear-gradient(155deg,rgba(139,92,246,0.20)_0%,#1a1638_60%,#0d0a24_100%)]",
|
||||
rounded,
|
||||
className,
|
||||
)}
|
||||
style={{
|
||||
background: `linear-gradient(155deg, ${artist.themeColor}33 0%, #1a1638 60%, #0d0a24 100%)`,
|
||||
}}
|
||||
>
|
||||
{/* 装饰光晕 */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background: `radial-gradient(circle at 50% 30%, ${artist.themeColor}55 0%, transparent 55%)`,
|
||||
}}
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[radial-gradient(circle_at_50%_30%,rgba(139,92,246,0.35)_0%,transparent_55%)]"
|
||||
/>
|
||||
{/* 装饰星标 */}
|
||||
<span className="absolute top-2 right-2 text-white/15 text-sm">✦</span>
|
||||
<span className="absolute bottom-3 left-3 text-white/10 text-xs">✧</span>
|
||||
{/* 首字母 */}
|
||||
<span
|
||||
className="font-logo text-5xl text-white/85 glow-text-purple tracking-wider relative z-10"
|
||||
aria-hidden
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import Link from "next/link";
|
||||
import { Heart, AlertTriangle } from "lucide-react";
|
||||
import type { FanSupport } from "@/lib/mock-user";
|
||||
import type { MySupport } from "@/lib/store";
|
||||
import ArtistPortrait from "@/components/cards/ArtistPortrait";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
export default function MyFanSupport({ supports }: { supports: FanSupport[] }) {
|
||||
export default function MyFanSupport({ supports }: { supports: MySupport[] }) {
|
||||
if (supports.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-dashed border-white/10 p-8 text-center text-white/45 text-sm">
|
||||
@ -19,7 +19,7 @@ export default function MyFanSupport({ supports }: { supports: FanSupport[] }) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{supports.map(({ artist, votedCount }) => {
|
||||
const inTop12 = artist.rank <= 12;
|
||||
const inTop12 = artist.rank <= 12 && artist.votes > 0;
|
||||
return (
|
||||
<Link
|
||||
key={artist.id}
|
||||
|
||||
@ -1,22 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { UserPlus } from "lucide-react";
|
||||
|
||||
interface QuotaCardProps {
|
||||
/** 今日剩余票数 */
|
||||
remaining: number;
|
||||
/** 每日总额度（用于「重置为 X 票」展示） */
|
||||
dailyQuota: number;
|
||||
/** 我累计投出的票数（保留 prop 以兼容现有调用方，组件内不直接展示） */
|
||||
cumulative?: number;
|
||||
onInvite?: () => void;
|
||||
}
|
||||
|
||||
export default function QuotaCard({
|
||||
remaining,
|
||||
dailyQuota,
|
||||
onInvite,
|
||||
}: QuotaCardProps) {
|
||||
export default function QuotaCard({ remaining, dailyQuota }: QuotaCardProps) {
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-2xl border border-purple-500/30 bg-gradient-to-br from-purple-500/[0.12] via-purple-500/[0.04] to-transparent shadow-[0_8px_32px_rgba(0,0,0,0.55),0_0_28px_rgba(139,92,246,0.2)]">
|
||||
{/* 装饰：右侧紫色光晕 */}
|
||||
@ -31,37 +22,21 @@ export default function QuotaCard({
|
||||
{/* 装饰：右侧"水晶"占位（无素材时用 CSS 渲染的辉光六边形） */}
|
||||
<CrystalDecoration />
|
||||
|
||||
<div className="relative p-6 sm:p-8 grid grid-cols-[1fr_auto] gap-4 items-center">
|
||||
<div>
|
||||
<p className="text-xs text-white/70 tracking-wider">今日剩余票数</p>
|
||||
<div className="mt-2 flex items-baseline gap-1">
|
||||
<span className="font-display text-5xl sm:text-6xl text-white tabular-nums leading-none">
|
||||
{remaining}
|
||||
</span>
|
||||
<span className="text-xl text-white/85 ml-1">票</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-white/55 mt-3">
|
||||
明日 00:00 重置为{" "}
|
||||
<span className="text-purple-300 font-display tabular-nums">
|
||||
{dailyQuota}
|
||||
</span>{" "}
|
||||
票
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-2">
|
||||
<span className="font-label text-[10px] tracking-widest uppercase text-white/55">
|
||||
获取更多票数
|
||||
<div className="relative p-6 sm:p-8">
|
||||
<p className="text-xs text-white/70 tracking-wider">今日剩余票数</p>
|
||||
<div className="mt-2 flex items-baseline gap-1">
|
||||
<span className="font-display text-5xl sm:text-6xl text-white tabular-nums leading-none">
|
||||
{remaining}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onInvite}
|
||||
className="inline-flex items-center gap-2 px-4 sm:px-5 h-10 rounded-full bg-grad-purple text-white font-body text-sm shadow-[0_0_14px_rgba(139,92,246,0.45)] hover:brightness-110 transition-all"
|
||||
>
|
||||
<UserPlus size={14} />
|
||||
邀请好友得票
|
||||
</button>
|
||||
<span className="text-xl text-white/85 ml-1">票</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-white/55 mt-3">
|
||||
明日 00:00 重置为{" "}
|
||||
<span className="text-purple-300 font-display tabular-nums">
|
||||
{dailyQuota}
|
||||
</span>{" "}
|
||||
票
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,38 +1,33 @@
|
||||
import { Sparkles, Star, Calendar, UserPlus } from "lucide-react";
|
||||
import type { MockUser } from "@/lib/mock-user";
|
||||
import { Sparkles, Star } from "lucide-react";
|
||||
|
||||
const ICON_MAP = {
|
||||
votes: <Sparkles size={14} />,
|
||||
fan: <Star size={14} />,
|
||||
signin: <Calendar size={14} />,
|
||||
invite: <UserPlus size={14} />,
|
||||
};
|
||||
interface StatsGridProps {
|
||||
/** 我累计投出的总票数 */
|
||||
totalVotes: number;
|
||||
/** 我应援的艺人数（去重） */
|
||||
supportingCount: number;
|
||||
}
|
||||
|
||||
export default function StatsGrid({ user }: { user: MockUser }) {
|
||||
const stats = [
|
||||
{ key: "votes", label: "累计投票", value: user.totalVotes, icon: ICON_MAP.votes },
|
||||
export default function StatsGrid({
|
||||
totalVotes,
|
||||
supportingCount,
|
||||
}: StatsGridProps) {
|
||||
const stats: { key: string; label: string; value: number; icon: React.ReactNode }[] = [
|
||||
{
|
||||
key: "votes",
|
||||
label: "累计投票",
|
||||
value: totalVotes,
|
||||
icon: <Sparkles size={14} />,
|
||||
},
|
||||
{
|
||||
key: "fan",
|
||||
label: "应援艺人",
|
||||
value: user.supportingIds.length,
|
||||
icon: ICON_MAP.fan,
|
||||
},
|
||||
{
|
||||
key: "signin",
|
||||
label: "签到天数",
|
||||
value: user.signInStreak,
|
||||
icon: ICON_MAP.signin,
|
||||
},
|
||||
{
|
||||
key: "invite",
|
||||
label: "邀请好友",
|
||||
value: user.invitedCount,
|
||||
icon: ICON_MAP.invite,
|
||||
value: supportingCount,
|
||||
icon: <Star size={14} />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3">
|
||||
<div className="grid grid-cols-2 gap-2 sm:gap-3">
|
||||
{stats.map((s) => (
|
||||
<div
|
||||
key={s.key}
|
||||
|
||||
@ -1,20 +1,24 @@
|
||||
import { Pencil, Star, LogOut } from "lucide-react";
|
||||
import type { MockUser } from "@/lib/mock-user";
|
||||
import { LogOut } from "lucide-react";
|
||||
|
||||
interface UserHeaderProps {
|
||||
user: MockUser;
|
||||
/** 用户昵称（来自 session） */
|
||||
nickname: string;
|
||||
/** 用户 ID（来自 session） */
|
||||
userId: string;
|
||||
onLogout?: () => void;
|
||||
}
|
||||
|
||||
export default function UserHeader({ user, onLogout }: UserHeaderProps) {
|
||||
const initial = user.nickname.charAt(0).toUpperCase();
|
||||
// 简单的等级算法：每 50 票升 1 级，从 1 起步
|
||||
const level = Math.max(1, Math.floor(user.totalVotes / 50) + 1);
|
||||
export default function UserHeader({
|
||||
nickname,
|
||||
userId,
|
||||
onLogout,
|
||||
}: UserHeaderProps) {
|
||||
const initial = nickname.charAt(0).toUpperCase();
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
{/* 头像 + 等级角标 */}
|
||||
<div className="relative flex-shrink-0">
|
||||
{/* 头像 */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full overflow-hidden border-2 border-purple-500/60 shadow-[0_0_16px_rgba(139,92,246,0.4)]">
|
||||
<div
|
||||
className="w-full h-full flex items-center justify-center font-logo text-2xl text-white"
|
||||
@ -26,46 +30,27 @@ export default function UserHeader({ user, onLogout }: UserHeaderProps) {
|
||||
{initial}
|
||||
</div>
|
||||
</div>
|
||||
<span className="absolute -bottom-1 -right-1 inline-flex items-center gap-0.5 px-1.5 h-5 rounded-full bg-purple-500 text-white text-[10px] font-display border-2 border-deep">
|
||||
<Star size={9} fill="currentColor" />
|
||||
Lv.{level}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-lg sm:text-xl font-bold text-white truncate">
|
||||
{user.nickname}
|
||||
</div>
|
||||
<div className="text-xs text-white/55 mt-1.5">
|
||||
ID: {user.id}
|
||||
<span className="mx-2 text-white/25">·</span>
|
||||
已连续签到{" "}
|
||||
<span className="text-purple-300 font-display tabular-nums">
|
||||
{user.signInStreak}
|
||||
</span>{" "}
|
||||
天
|
||||
{nickname}
|
||||
</div>
|
||||
<div className="text-xs text-white/55 mt-1.5">ID: {userId}</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden sm:flex flex-col items-stretch gap-2">
|
||||
{/* 退出登录 · 粉色危险态描边（移动端 = icon-only 圆按钮，桌面端 = 带文案胶囊） */}
|
||||
{onLogout && (
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center gap-1.5 px-3 h-9 rounded-full bg-white/[0.04] border border-white/15 text-white/75 hover:bg-white/10 text-xs transition-colors"
|
||||
onClick={onLogout}
|
||||
aria-label="退出登录"
|
||||
className="inline-flex items-center justify-center gap-1.5 h-9 rounded-full bg-transparent border border-pink-500/40 text-pink-300 hover:bg-pink-500/[0.08] hover:text-pink-200 hover:border-pink-500/60 text-xs transition-colors w-9 sm:w-auto sm:px-3"
|
||||
>
|
||||
<Pencil size={12} />
|
||||
编辑资料
|
||||
<LogOut size={12} />
|
||||
<span className="hidden sm:inline">退出登录</span>
|
||||
</button>
|
||||
{onLogout && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onLogout}
|
||||
className="inline-flex items-center justify-center gap-1.5 px-3 h-9 rounded-full bg-white/[0.04] border border-white/10 text-white/55 hover:text-pink-400 hover:border-pink-500/40 text-xs transition-colors"
|
||||
>
|
||||
<LogOut size={12} />
|
||||
退出登录
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -29,7 +29,8 @@ export default function RankingRow({
|
||||
isRescue = false,
|
||||
onVote,
|
||||
}: RankingRowProps) {
|
||||
const inTop12 = artist.rank <= 12;
|
||||
// 「真正进 Top12」必须有票 —— 0 票时编号兜底不算
|
||||
const inTop12 = artist.rank <= 12 && artist.votes > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -74,7 +75,7 @@ export default function RankingRow({
|
||||
<div className="text-sm text-white font-semibold truncate">
|
||||
{artist.name}
|
||||
<span className="ml-2 text-white/45 font-normal text-[11px]">
|
||||
· {artist.slogan}
|
||||
· {artist.enName}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import Link from "next/link";
|
||||
import { Crown } from "lucide-react";
|
||||
import type { Artist } from "@/types/artist";
|
||||
import ArtistPortrait from "@/components/cards/ArtistPortrait";
|
||||
import { cn } from "@/lib/cn";
|
||||
@ -15,73 +14,101 @@ function formatVotes(v: number): string {
|
||||
|
||||
export default function Top3Podium({ top3 }: Top3PodiumProps) {
|
||||
const [first, second, third] = top3;
|
||||
if (!first || !second || !third) return null;
|
||||
|
||||
// 视觉排序：第二 / 第一(中央) / 第三
|
||||
const order: Array<{ artist: Artist; rank: 1 | 2 | 3 }> = [
|
||||
{ artist: second, rank: 2 },
|
||||
{ artist: first, rank: 1 },
|
||||
{ artist: third, rank: 3 },
|
||||
// 0 票时按编号兜底排出来的"伪冠军"不算 —— 这些位置当作缺位处理
|
||||
const champ = first && first.votes > 0 ? first : undefined;
|
||||
const runnerUp = second && second.votes > 0 ? second : undefined;
|
||||
const thirdPlace = third && third.votes > 0 ? third : undefined;
|
||||
|
||||
// 视觉顺序：第二 / 第一(中央) / 第三 · 缺位 = 虚位以待
|
||||
const order: Array<{ artist: Artist | undefined; rank: 1 | 2 | 3 }> = [
|
||||
{ artist: runnerUp, rank: 2 },
|
||||
{ artist: champ, rank: 1 },
|
||||
{ artist: thirdPlace, rank: 3 },
|
||||
];
|
||||
|
||||
const lead = champ && runnerUp ? champ.votes - runnerUp.votes : null;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-3 sm:gap-5 items-end">
|
||||
// 冠军卡片更宽更高（1.3fr），亚季军等宽（1fr），三张底部对齐；
|
||||
// 整个组合最大宽度受限并横向居中，避免在 1500 版心下占满铺张。
|
||||
<div className="grid grid-cols-[1fr_1.3fr_1fr] items-end gap-8 sm:gap-12 pt-12 sm:pt-14 max-w-[860px] mx-auto">
|
||||
{order.map(({ artist, rank }) => {
|
||||
if (!artist) {
|
||||
return <EmptySlot key={`empty-${rank}`} rank={rank} />;
|
||||
}
|
||||
const isFirst = rank === 1;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={artist.id}
|
||||
href={`/artist/${artist.id}`}
|
||||
className={cn(
|
||||
"group relative flex flex-col items-center rounded-2xl border transition-all overflow-hidden",
|
||||
"bg-gradient-to-b from-purple-500/[0.12] via-purple-500/[0.04] to-transparent",
|
||||
"border-purple-500/40 hover:border-purple-400/60",
|
||||
"shadow-[0_8px_32px_rgba(0,0,0,0.55),0_0_28px_rgba(139,92,246,0.25)]",
|
||||
isFirst && "shadow-[0_8px_36px_rgba(0,0,0,0.65),0_0_42px_rgba(196,181,253,0.35)]",
|
||||
isFirst ? "py-8 px-3 -translate-y-3" : "py-6 px-3",
|
||||
)}
|
||||
className="group relative block"
|
||||
>
|
||||
{/* 顶部小皇冠（仅第一名） */}
|
||||
{isFirst && (
|
||||
<div className="absolute -top-2 left-1/2 -translate-x-1/2 text-purple-300">
|
||||
<Crown size={20} fill="currentColor" />
|
||||
{/* 顶部奖牌 SVG · 悬浮在卡片顶边上方 */}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={`/rank-${rank}.svg`}
|
||||
alt={`第 ${rank} 名`}
|
||||
className={cn(
|
||||
"absolute left-1/2 -translate-x-1/2 z-20 select-none pointer-events-none drop-shadow-[0_4px_12px_rgba(0,0,0,0.5)]",
|
||||
isFirst
|
||||
? "w-16 sm:w-20 -top-9 sm:-top-11"
|
||||
: "w-14 sm:w-16 -top-7 sm:-top-9",
|
||||
)}
|
||||
draggable={false}
|
||||
/>
|
||||
|
||||
{/* 卡片容器（3:4 比例） · #1 金色渐变描边 + 金色辉光；#2 #3 紫色描边 */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative aspect-[3/4] rounded-xl overflow-hidden transition-all",
|
||||
isFirst
|
||||
? "p-[2px] shadow-[0_8px_36px_rgba(0,0,0,0.55),0_0_36px_rgba(255,200,120,0.20)]"
|
||||
: "border border-purple-500/40 shadow-[0_8px_32px_rgba(0,0,0,0.55),0_0_24px_rgba(139,92,246,0.18)] hover:border-purple-400/60",
|
||||
)}
|
||||
style={
|
||||
isFirst
|
||||
? {
|
||||
background:
|
||||
"linear-gradient(180deg, #FFDAA8 0%, #A88351 100%)",
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{/* 内层 · #1 用 2px 内填让金色渐变作为描边露出 */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative w-full h-full overflow-hidden bg-deepest",
|
||||
isFirst ? "rounded-[10px]" : "rounded-[11px]",
|
||||
)}
|
||||
>
|
||||
{/* 立绘填满卡片 */}
|
||||
<ArtistPortrait
|
||||
artist={artist}
|
||||
rounded="rounded-none"
|
||||
className="absolute inset-0"
|
||||
/>
|
||||
|
||||
{/* 底部渐隐 + 信息层 */}
|
||||
<div className="absolute inset-x-0 bottom-0 px-3 pb-3 pt-10 bg-gradient-to-t from-black/90 via-black/65 to-transparent text-center">
|
||||
<div
|
||||
className="text-sm sm:text-base font-semibold truncate"
|
||||
style={{ color: "#ffffff" }}
|
||||
>
|
||||
{artist.name}
|
||||
</div>
|
||||
<div className="mt-0.5 font-display tabular-nums text-base sm:text-lg text-pink-400">
|
||||
{formatVotes(artist.votes)}{" "}
|
||||
<span className="text-xs text-pink-300/80">票</span>
|
||||
</div>
|
||||
{isFirst && lead != null && lead > 0 && (
|
||||
<div className="mt-1 text-[11px] text-white/60 tabular-nums">
|
||||
领先 +{lead.toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 头像（圆形 + 紫色环） */}
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-full overflow-hidden border-2 mb-3",
|
||||
"border-purple-500 shadow-[0_0_18px_rgba(139,92,246,0.55)]",
|
||||
isFirst ? "w-24 h-24 sm:w-28 sm:h-28" : "w-20 h-20 sm:w-24 sm:h-24",
|
||||
)}
|
||||
>
|
||||
<ArtistPortrait
|
||||
artist={artist}
|
||||
rounded="rounded-full"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 名字 */}
|
||||
<div className={cn("font-semibold text-white truncate max-w-full", isFirst ? "text-base sm:text-lg" : "text-sm")}>
|
||||
{artist.name}
|
||||
</div>
|
||||
|
||||
{/* 票数 */}
|
||||
<div
|
||||
className={cn(
|
||||
"mt-1 font-display tabular-nums",
|
||||
isFirst ? "text-lg sm:text-xl text-purple-200" : "text-base text-purple-300",
|
||||
)}
|
||||
>
|
||||
{formatVotes(artist.votes)}{" "}
|
||||
<span className="text-xs opacity-70">票</span>
|
||||
</div>
|
||||
|
||||
{/* 当前排名徽章 */}
|
||||
<div className="mt-2 inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-purple-500/15 border border-purple-400/40 text-[10px] text-purple-200">
|
||||
当前 #{artist.rank}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
@ -89,3 +116,32 @@ export default function Top3Podium({ top3 }: Top3PodiumProps) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 虚位以待 · 任意 rank 缺位时的占位卡片，与正式卡片同 3:4 比例对齐底边 */
|
||||
function EmptySlot({ rank }: { rank: 1 | 2 | 3 }) {
|
||||
const isFirst = rank === 1;
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={`/rank-${rank}.svg`}
|
||||
alt={`第 ${rank} 名`}
|
||||
className={cn(
|
||||
"absolute left-1/2 -translate-x-1/2 z-20 select-none pointer-events-none opacity-40 drop-shadow-[0_4px_12px_rgba(0,0,0,0.5)]",
|
||||
isFirst
|
||||
? "w-16 sm:w-20 -top-9 sm:-top-11"
|
||||
: "w-14 sm:w-16 -top-7 sm:-top-9",
|
||||
)}
|
||||
draggable={false}
|
||||
/>
|
||||
<div className="relative aspect-[3/4] rounded-xl border border-dashed border-white/12 bg-white/[0.02] flex items-center justify-center">
|
||||
<div className="text-center px-3">
|
||||
<p className="font-label text-[10px] tracking-widest uppercase text-white/35">
|
||||
Vacant
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-white/55">虚位以待</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,8 +7,6 @@ export interface RankedArtist {
|
||||
no: string;
|
||||
name: string;
|
||||
enName: string;
|
||||
slogan: string;
|
||||
themeColor: string;
|
||||
avatar: string | null;
|
||||
portrait: string | null;
|
||||
voteCount: number;
|
||||
|
||||
564
src/lib/artist-bios.ts
Normal file
564
src/lib/artist-bios.ts
Normal file
@ -0,0 +1,564 @@
|
||||
import type { ArtistTag } from "@/types/artist";
|
||||
|
||||
/**
|
||||
* 36 位真实艺人种子数据 · 来源：人物小传.docx
|
||||
* 字段全部从 docx 提取；tags 是筛选用的运行时分类（非小传内容）。
|
||||
*/
|
||||
export interface ArtistSeed {
|
||||
no: string;
|
||||
name: string;
|
||||
enName: string;
|
||||
age: number;
|
||||
gender: "M" | "F";
|
||||
height: number;
|
||||
tags: ArtistTag[];
|
||||
motto?: string;
|
||||
personality?: string;
|
||||
catchphrase?: string;
|
||||
skills?: string;
|
||||
track?: string;
|
||||
bio: string;
|
||||
}
|
||||
|
||||
export const ARTIST_SEEDS: ArtistSeed[] = [
|
||||
{
|
||||
no: `001`,
|
||||
name: `陈默`,
|
||||
enName: `SIREN`,
|
||||
age: 25,
|
||||
gender: `M`,
|
||||
height: 184,
|
||||
tags: [`rock`] as ArtistTag[],
|
||||
motto: `沉默蓄力，舞台绽放。`,
|
||||
personality: `清冷寡言、内敛克制，不喜喧闹与无效社交，待人谦和温柔、分寸感十足。舞台上沉稳凌厉、爆发力拉满，全程沉浸音乐，用专业演绎传递摇滚态度`,
|
||||
catchphrase: `嗯，知道了。`,
|
||||
skills: `电吉他演奏、摇滚副唱、即兴 solo`,
|
||||
track: `主音电吉他手、摇滚赛道`,
|
||||
bio: `陈默天生不喜喧闹，习惯独处观察生活，久而久之便成了旁人眼中沉默寡言的少年。这份内敛让他拥有了远超同龄人的细腻洞察力，也让他习惯性将所有情绪藏于心底，不轻易外露。十七岁的盛夏，是他人生的重要转折点，一次偶然的街边演出，让他第一次听见重金属摇滚的炸裂音浪，激昂的电吉他旋律瞬间击穿了他平淡压抑的青春。自此，他彻底爱上了摇滚，开启了日复一日的练琴时光，没人知晓他独处时的拼命打磨，只看到他日渐精湛的琴技。为了诠释这份极致的音乐吸引力，他为自己取名 “SIREN”，以此致敬摇滚音乐自带的致命魅力。怀揣着对摇滚的赤诚，他带着专属电吉他扎根地下摇滚赛道，在无数次小型演出中积累舞台经验、打磨即兴 solo 能力。台下的他，始终保持着温柔克制的本性，待人细腻温和、低调内敛；可只要舞台灯光亮起，他便会彻底卸下沉静伪装，以极致炸裂的舞台爆发力掌控全场。`,
|
||||
},
|
||||
{
|
||||
no: `002`,
|
||||
name: `许则`,
|
||||
enName: `ETHAN`,
|
||||
age: 21,
|
||||
gender: `M`,
|
||||
height: 181,
|
||||
tags: [`rock`] as ArtistTag[],
|
||||
motto: `藏于人海，忠于舞台。`,
|
||||
personality: `内向腼腆、安静疏离，极度不善社交，偏爱独处与二次元世界，心性敏感纯粹。舞台上野性张扬、气场凌厉，对节奏把控极致，爆发力拉满，全然释放压抑情绪`,
|
||||
catchphrase: `别吵，练鼓。`,
|
||||
skills: `架子鼓演奏、重型音乐演绎、双踩即兴`,
|
||||
track: `架子鼓手、重型摇滚赛道`,
|
||||
bio: `许则成长于书香门第，父母深耕学术领域，从小到大，他始终活在 “优秀学子” 的标签之下，被迫循规蹈矩，几乎没有自我表达的空间。性格内向的他不善社交，畏惧人群与热闹，习惯性避开所有人的目光，孤独成了他青春的常态。而二次元世界，是他唯一的避风港。高二那年，一次偶然的机会，他走进街边地下琴行，第一次握住鼓棒、触碰架子鼓，厚重炸裂的节奏瞬间击碎了他长久以来的压抑。他终于找到专属自己的宣泄方式，那些无法言说的委屈、压抑与不甘，都能通过鼓点肆意释放。自此，他彻底沉迷重型摇滚，每日放学后坚守琴行苦练，日复一日打磨双踩技巧、钻研重型音乐节奏，哪怕手指磨破、虎口反复结痂，也从未停歇，凭借极致的毅力练就了扎实的鼓技与超强的即兴能力。如今的他，拥有极致的双面人生：日常里，是戴着降噪耳机、沉默寡言的清冷大学生，低调内敛、不善交际；站上舞台，便会彻底挣脱束缚，化身野性张扬的舞台强者，狂暴有力的鼓点、极具张力的舞台状态，将积压多年的情绪尽数释放。于他而言，鼓声是救赎，是重生，让沉寂的灵魂得以热烈生长。`,
|
||||
},
|
||||
{
|
||||
no: `003`,
|
||||
name: `夏致`,
|
||||
enName: `SUNNY`,
|
||||
age: 22,
|
||||
gender: `M`,
|
||||
height: 183,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `心怀热忱，不负热爱。`,
|
||||
personality: `阳光热忱、坦荡纯粹，元气开朗、待人亲和，是靠谱的邻家哥哥。舞台上松弛舒展、活力满满，感染力极强，用干净律动与温柔唱腔传递青春温度`,
|
||||
catchphrase: `没问题，交给我！`,
|
||||
skills: `木吉他弹唱、和声、唱跳`,
|
||||
track: `节奏吉他手、校园流行赛道`,
|
||||
bio: `夏致从小在体育大院长大，父亲是专业篮球教练，母亲是小学音乐老师，在这样的环境里，他既练就了一身运动细胞，也早早接触到了音乐。他曾是校篮球队的绝对主力，带领球队拿下过三次市级联赛冠军，是学校里小有名气的篮球校草。他的 “走红” 纯属意外，在校赛夺冠后的庆功宴上，穿着被汗水打湿的球衣、随手抱起队友的木吉他为大家弹唱了一首自己改编的民谣，被路人拍下上传到社交平台，收获了不少关注。视频中他那张自带盐系少年感的校草脸，配合毫无偶像包袱的灿烂笑容，瞬间治愈了很多人的夏天。作为典型的运动达人，夏致身上有着一种难得的纯粹。他拒绝了多家经纪公司的流水线包装和单独出道的邀约，坚持留在乐队担任节奏吉他手，只为守住那份最热血的校园流行情怀。他习惯在球场挥汗如雨后，背起吉他钻进排练室，用最干净的和声回应每一份期待。对他而言，生活从不是刻意经营的舞台，而是一场永远保持热忱、无距离感的邻家冒险。现在，这位元气满满的节奏掌控者，正带着他的阳光与律动，向更多人发出入场邀约。`,
|
||||
},
|
||||
{
|
||||
no: `004`,
|
||||
name: `陆友祁`,
|
||||
enName: `WIFI`,
|
||||
age: 20,
|
||||
gender: `M`,
|
||||
height: 174,
|
||||
tags: [`hiphop`] as ArtistTag[],
|
||||
motto: `随性而活，清醒自持。`,
|
||||
personality: `活泼跳脱、鬼马通透，幽默随性、自带综艺感，看似玩世不恭实则清醒有分寸。舞台上灵动百变、松弛有度，节奏把控精准，风格多元不被定义，感染力十足`,
|
||||
catchphrase: `笑死，这也太离谱了。`,
|
||||
skills: `Rap 演唱、综艺控场、节奏吉他、大提琴`,
|
||||
track: `鬼马主持担当、嘻哈融合赛道`,
|
||||
bio: `陆友祁出身于正统的音乐世家，祖父是国内知名的大提琴演奏家，父母均是国家级交响乐团的成员，他从三岁起就被家人逼着学习大提琴，本该是穿着定制西装在音乐厅拉大提琴的贵公子，可他偏偏有一身 “反骨”。在枯燥的练琴时光里，他偷偷迷上了嘻哈音乐和脱口秀，常常躲在琴房里跟着视频学 Rap、练段子。在某次正儿八经的家族晚宴上，因为嫌弃背景音乐太催眠，他穿着一身挺括的西服，当众抄起一把破旧的贝斯，对着那群非富即贵的亲戚来了段极其松弛的 Rap 演唱，甚至还当场接梗造梗，把严肃的晚宴变成了大型脱口秀现场。这段反差感拉满的短视频被亲戚随手发到网上，让他在网络上收获了不少关注，被网友称为 “互联网嘴替”。作为搞笑担当，陆友祁在嘻哈融合赛道里完全是野蛮生长。他既能用大提琴拉出高级的音色，也能在后台一边吃着几块钱的冰棒一边跟粉丝直播唠嗑。对他而言，搞音乐不是为了 “起范儿”，纯粹是因为这儿能让他大声说话、自由蹦迪。这位活得通透的跳脱少年，正用他那毫无距离感的魅力，活得真实又自在。`,
|
||||
},
|
||||
{
|
||||
no: `005`,
|
||||
name: `苏恋和`,
|
||||
enName: `LEON`,
|
||||
age: 19,
|
||||
gender: `M`,
|
||||
height: 178,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `以温柔渡岁月，以初心赴长路。`,
|
||||
personality: `温柔腼腆、干净纯粹，安静内敛、心思细腻，共情力极强。舞台上温柔且有力量，唱腔细腻走心、情绪饱满，沉浸式演绎安静却撼动人心`,
|
||||
catchphrase: `谢谢你们呀。`,
|
||||
skills: `流行演唱、吉他弹唱、流行曲创作`,
|
||||
track: `主唱、日系抒情流行赛道、粉丝陪伴向内容`,
|
||||
bio: `苏恋和成长于单亲家庭，母亲是一名急诊科护士，常年忙于工作，他从小就学会了独立照顾自己，也养成了温柔腼腆、心思细腻的性格。他的被发现，始于高二那年一个雨天，他在学校天台练习吉他弹唱的视频被同学偶然拍下。作为典型的 “日系初恋脸”，他总是带着几分腼腆与细腻，那种干净清澈的少年感，让他即便只是安静地坐着，也像是一封还未拆开的情书。为了和粉丝建立更紧密的连接，他在网络上坚持分享了 365 天的 “粉丝陪伴向” 弹唱记录，每一首歌都精准记录了当下的心情起伏，从考试失利的沮丧到吃到好吃甜品的开心，都毫无保留地分享给大家。这种真诚让他在粉丝眼中成为了无可替代的 “治愈系” 存在。虽然外表温润，但他极强的逻辑思维与专业创作力，让他不仅是一位歌者，更是灵魂创作者。如今，这位习惯用音乐传递细腻情感的少年，正带着他特有的抒情律动，从屏幕后走向聚光灯下。`,
|
||||
},
|
||||
{
|
||||
no: `006`,
|
||||
name: `傅希文`,
|
||||
enName: `RYAN`,
|
||||
age: 20,
|
||||
gender: `M`,
|
||||
height: 180,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `理性编曲，真诚赴乐。`,
|
||||
personality: `清冷克制、沉稳自律，严肃理性、不喜客套，逻辑思维缜密，专注自我深耕。舞台上极致严谨、精准专业，摒弃情绪化表达，用理性逻辑承载细腻情绪，质感高级。`,
|
||||
catchphrase: `逻辑上是这样的。`,
|
||||
skills: undefined,
|
||||
track: `键盘 / 编曲、智性向内容赛道`,
|
||||
bio: `傅希文出生在一个理工科世家，父母都是大学的物理学教授，在家庭环境的熏陶下，他从小就展现出惊人的逻辑思维和数学天赋，是别人口中 “别人家的孩子”。他从小学开始学习钢琴，和其他孩子不同，他并不把音乐当成感性的艺术，而是将其视为一门严谨的科学。他在音乐圈的初次露面，源于一段在大学图书馆角落戴着耳机、用平板电脑推导复杂音程规律的侧拍视频。这种 “高智性学霸” 的清冷感，配合他键盘前修长而精准的手指，让他迅速在校园中走红，受到很多智性恋偏好者的喜爱。作为键盘手兼编曲者，他并不相信虚无缥缈的灵感，而更倾向于将情感拆解为严密的数学逻辑，通过精准的音程组合和节奏编排来表达情绪。在采访中，他那种自律克制、条理缜密的说话方式，总能让人感受到逻辑思维的魅力。对他而言，作曲是一场音符的推导，而舞台是唯一不需要证明的公理。`,
|
||||
},
|
||||
{
|
||||
no: `007`,
|
||||
name: `林星`,
|
||||
enName: `STARRY`,
|
||||
age: 24,
|
||||
gender: `F`,
|
||||
height: 171,
|
||||
tags: [`rock`] as ArtistTag[],
|
||||
motto: `于独处中沉淀，于舞台上生长。`,
|
||||
personality: `外表疏离，慢热且极度社恐，不爱社交与客套。舞台上酷飒拽气场全开，私下敏感柔软，只对音乐与信任的人敞开心扉。`,
|
||||
catchphrase: `别管我。`,
|
||||
skills: `贝斯演奏、摇滚副唱、和声编写`,
|
||||
track: `贝斯手、摇滚赛道`,
|
||||
bio: `林星成长于规矩森严、管教严苛的传统家庭，父母秉持传统固化的教育理念，逼着她常年深耕古典乐器，日复一日的枯燥练习、条条框框的规矩束缚，压抑了她所有的天性与情绪，也让她养成了疏离寡言的性格，心底悄悄埋下了叛逆的种子。漫长压抑的青春里，她始终活在他人的期待里，习惯性封闭自我，对外始终保持着拒人千里的冷淡姿态。高中时期，是她人生的重要转折点，一次偶然的机会，她接触到摇滚音乐与贝斯乐器，乐器低沉厚重、充满力量的音色，瞬间击穿了她多年的压抑与桎梏，让她终于找到专属自己的情绪出口。自此，她开启了偷偷练琴、私下写和声的日子，避开家人的管控与反对，在无人知晓的角落深耕摇滚，用琴弦倾诉所有无法言说的情绪与不甘。成年后的她，彻底挣脱了家庭的固化安排，毅然独自闯荡，坚定奔赴热爱的摇滚舞台。平日里的她，极度慢热社恐，沉默寡言，习惯性与人保持距离，敏感柔软的内心只对音乐和极少数信任的人敞开。可一旦站上舞台，她便会彻底切换状态，褪去内敛怯懦，化身气场全开的酷飒贝斯手，她用炸裂的舞台表现力、极具态度的旋律，对抗过往的束缚与规训。于林星而言，贝斯不是简单的乐器，摇滚不是刻意的人设，而是她挣脱桎梏、表达自我、释放本心的唯一方式，是一个叛逆少女与世界温柔对抗的底气。`,
|
||||
},
|
||||
{
|
||||
no: `008`,
|
||||
name: `田糯`,
|
||||
enName: `NORI`,
|
||||
age: 18,
|
||||
gender: `F`,
|
||||
height: 165,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `心怀赤诚，向阳而生。`,
|
||||
personality: `元气纯粹、热忱真诚，开朗灵动、笑容甜美，心性简单无城府，踏实努力上进。舞台上鲜活灵动、甜度满分，兼具温柔质感与高音爆发力，自带阳光治愈氛围感。`,
|
||||
catchphrase: `哇，好棒！`,
|
||||
skills: `流行唱跳、高音爆发、吉他弹唱`,
|
||||
track: `乐队主唱 / 偶像、流行赛道`,
|
||||
bio: `18 岁的田糯，出生在南方一个宁静的小镇，父母在镇上开了一家小卖部，家境普通但温馨和睦。她从小就展现出过人的音乐天赋，喜欢跟着电视里的歌曲哼唱，邻居们都叫她 “小百灵”。为了实现音乐梦想，她用攒了好几年的压岁钱买了一把二手吉他，每天放学写完作业后，就对着镜子练习弹唱和舞蹈。她曾是那个在南方小镇巷口，背着比自己还大的吉他盒赶车的普通女孩，周末会去镇上的集市表演，赚点零花钱补贴家用。一个在小镇集市举办的简陋歌唱比赛，她凭着 “灵动甜美” 的气质以及惊人的高音爆发力，演唱片段被传到网上后迅速走红。她身上那种接地气无距离感以及满满的元气，源于最真实的追梦热血。作为偶像主唱，田糯不仅拥有绝佳的舞台表现力，更有着一种能让观众 “多云转晴” 的治愈感染力。从宁静小镇到万众瞩目的舞台，不变的是那颗真诚感恩的初心。`,
|
||||
},
|
||||
{
|
||||
no: `009`,
|
||||
name: `蒋莎莎`,
|
||||
enName: `SASA`,
|
||||
age: 21,
|
||||
gender: `F`,
|
||||
height: 168,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `以实力立身，以专业立舞台。`,
|
||||
personality: `飒爽直爽、干练果决，独立强势、自带拽姐气场，对待专业极致严谨自律。舞台上气场全开、掌控力拉满，唱功扎实爆发力强，临场应变顶尖，用实力锁定全场。`,
|
||||
catchphrase: `再来一遍。`,
|
||||
skills: `实力唱跳、高音演绎、欧美流行演唱`,
|
||||
track: `主唱 / 高音担当、欧美流行赛道`,
|
||||
bio: `蒋莎莎 16 岁时独自一人远赴韩国成为练习生，在严苛的训练体系下度过了整整五年。这五年里，她每天练习超过 12 个小时，经历过三次出道机会的落空，也曾因为高强度的训练累到晕倒在练习室，但她从未想过放弃。这段经历不仅练就了她过硬的唱跳实力，也塑造了她飒爽自信、永不言败的性格。她的出现，是音乐节现场一次令人印象深刻的 “意外补位”。在音响设备突发故障的极端环境下，凭借一副富有磁性的 “欧美大烟嗓” 直接清唱全场，极具穿透力的高音瞬间撕裂了嘈杂。那种飒爽自信、专业强势的临场感，让台下观众亲眼见证了她扎实的唱跳实力。她天生自带一种 “拽姐气场”，性格直爽、从不拖泥带水。作为主唱，她不仅是团队中的高音担当，更是舞台上的精神领袖。现在，这位性格火辣、实力硬核的舞台新人已准备就绪，即将用最直接的方式，定义属于她的黄金时代。`,
|
||||
},
|
||||
{
|
||||
no: `010`,
|
||||
name: `凌桀`,
|
||||
enName: `AVRIL`,
|
||||
age: 22,
|
||||
gender: `F`,
|
||||
height: 166,
|
||||
tags: [`rock`] as ArtistTag[],
|
||||
motto: `不被定义，不受束缚。`,
|
||||
personality: `叛逆随性、个性鲜明，清冷不羁、不迎合世俗，自带朋克内核，拒绝循规蹈矩。舞台上野性张扬、张力拉满，风格锐利态度鲜明，用极具破坏性的演绎诠释摇滚精神。`,
|
||||
catchphrase: `随便，无所谓。`,
|
||||
skills: `朋克摇滚演唱、架子鼓手、电吉他演奏、词曲创作`,
|
||||
track: `朋克摇滚主唱、欧美摇滚赛道`,
|
||||
bio: `凌桀是中英混血，父亲是英国的摇滚乐队贝斯手，母亲是中国的美术老师，她从小在英国伦敦长大，在父亲的影响下，三岁就开始接触摇滚音乐，七岁学习电吉他，十岁就能独立创作简单的歌曲。她骨子里带着朋克摇滚的叛逆精神，不喜欢循规蹈矩的生活，16 岁时不顾家人反对，独自一人回到中国，在上海组建了自己的第一支地下朋克乐队。她第一次出现在大众视野是因一段在雨中废弃工厂进行的地下 live 路透。镜头里的她画着凌厉的眼线，手持电吉他，在简陋的架子鼓节奏中疯狂扫弦，那种 “混血甜酷感” 配合极具破坏性的舞台张力，瞬间点燃了评论区。生而叛逆、个性鲜明的她不仅是乐队的灵魂主唱，更是拥有极强词曲创作能力的先锋玩家。她拒绝被定义，更拒绝平庸的温和，所有的创作都带着一种撕裂空气的野性美。对凌桀而言，摇滚不是表演，而是她与生俱来的呼吸方式。`,
|
||||
},
|
||||
{
|
||||
no: `011`,
|
||||
name: `苏清沅`,
|
||||
enName: `JANE`,
|
||||
age: 20,
|
||||
gender: `F`,
|
||||
height: 168,
|
||||
tags: [`chinese`, `pop`] as ArtistTag[],
|
||||
motto: `以细节筑精品，以初心承国风。`,
|
||||
personality: `温柔内向、细腻敏感，安静温婉、恬淡素雅，自带江南书香门第的古典气韵。舞台上极致严谨、精益求精，自带轻微舞台强迫症，用细腻国风旋律营造温柔氛围。`,
|
||||
catchphrase: `麻烦你了。`,
|
||||
skills: `钢琴演奏、古风演奏、国风编曲、抒情演唱`,
|
||||
track: `键盘 / 和声、民乐担当、抒情流行赛道、国风赛道`,
|
||||
bio: `苏清沅出生在江南苏州的书香门第，爷爷是著名的国画家，她从小在墨香与琴声中长大，四岁开始学习钢琴，六岁学习古筝，深受中国传统文化的熏陶，身上自带一种与生俱来的古典韵味。她的 “出圈”，源于一场民乐系毕业晚会的侧拍。20 岁的她一袭素衣坐在钢琴前，清冷易碎的 “淡颜小白花” 气质与指尖流淌出的古风编曲完美融合，被网友盛赞为 “校园清冷白月光”。虽然外表温柔内向，但苏清沅在专业上有着近乎偏执的 “舞台强迫症”：每一个音符的力度、每一次国风元素的切入、每一个舞台动作的细节，她都要求达到极致的精准。作为乐队的键盘与民乐担当，她不仅擅长钢琴，更能将古筝、竹笛等多种民乐元素巧妙融入现代编曲中。对她而言，音乐是她安静构建世界的砖瓦，每一个音符都承载着她细腻敏感的内心。`,
|
||||
},
|
||||
{
|
||||
no: `012`,
|
||||
name: `夏晚`,
|
||||
enName: `WENDY`,
|
||||
age: 30,
|
||||
gender: `F`,
|
||||
height: 173,
|
||||
tags: [`jazz`] as ArtistTag[],
|
||||
motto: `岁月沉淀温柔，旋律治愈人心。`,
|
||||
personality: `松弛慵懒、温柔知性，成熟通透、从容淡然，历经岁月沉淀自带温润治愈质感。舞台上舒展随性、松弛自然，摒弃炫技与浮夸，用旋律叙事抒情，氛围感极致拉满。`,
|
||||
catchphrase: `慢慢来，不着急。`,
|
||||
skills: `萨克斯演奏、爵士演唱、即兴编曲`,
|
||||
track: `萨克斯手、爵士 / 流行融合赛道`,
|
||||
bio: `夏晚从小在香港的老街区长大，父亲是一名爵士乐手，在当地的酒吧驻唱多年，她从小听着港乐和爵士乐长大，耳濡目染之下爱上了这种充满故事感的音乐。大学时，她考入香港演艺学院主修爵士乐，专攻萨克斯演奏。毕业后，她没有进入主流乐坛，而是留在香港的爵士酒吧驻唱，这一唱就是八年。八年的驻唱生涯，让她积累了丰富的舞台经验，也形成了她松弛慵懒、娓娓道来的演唱风格。她的被关注，源于一段在深夜老街长镜头下的即兴萨克斯演奏。30 岁的她，身上有着一种岁月沉淀后的松弛慵懒，举手投足间尽是港风电影里的复古氛围感，被网友称赞为氛围感十足。夏晚并不追求炫技，她更擅长用萨克斯的叙事感填充音乐里的留白，将爵士与流行完美融合。她大气专业的舞台状态，从不是刻意表演，而是与听众分享岁月里的遗憾与和解。对夏晚而言，舞台不需要喧嚣，只需一盏暖光。`,
|
||||
},
|
||||
{
|
||||
no: `013`,
|
||||
name: `虞浓`,
|
||||
enName: `LYDIA`,
|
||||
age: 28,
|
||||
gender: `F`,
|
||||
height: 172,
|
||||
tags: [`rock`] as ArtistTag[],
|
||||
motto: `以锋芒立舞台，以真诚待世人。`,
|
||||
personality: `明艳大气、爽朗通透，可盐可甜、坦荡豁达，待人真诚大方，自带异域氛围感。舞台上掌控力十足、表现力超强，气场张扬自带焦点，既能驾驭摇滚也能演绎温柔。`,
|
||||
catchphrase: `放心，交给我。`,
|
||||
skills: `摇滚主唱、贝斯演奏、舞台门面把控`,
|
||||
track: `颜值赛道/摇滚主唱、流行摇滚赛道`,
|
||||
bio: `虞浓是来自新疆乌鲁木齐的维吾尔族姑娘，从小在能歌善舞的民族氛围中长大，天生拥有过人的艺术天赋和舞台表现力。18 岁独自远赴北京闯荡，凭借优越的浓颜五官和高挑身材成为平面模特，深耕时尚杂志与广告拍摄，积累了极强的镜头感和时尚气场。但她始终怀揣着音乐梦想，尤其痴迷硬核流行摇滚，偶然一次地下 live 演出彻底坚定了她转型的决心。她从零开始深耕贝斯与声乐，日复一日泡在排练室打磨技艺，摒弃模特光环潜心深耕音乐领域。她因一组音乐节雨后后台生图在网络上收获了大量关注，明艳浓烈的异域五官、大气张扬的气质，瞬间俘获了很多人的目光。看似惊艳的颜值是她的舞台门面，扎实的摇滚功底才是她的核心底气。站上舞台的她掌控力十足，拨动琴弦、开嗓演唱的瞬间便能锁定全场视线，可盐可甜的性格反差，让她既能驾驭炸裂的摇滚舞台，也能温柔亲和地与粉丝互动。对虞浓而言，异域风情只是她的点缀，深耕热爱、肆意发光的摇滚灵魂，才是她征服舞台的终极底气。`,
|
||||
},
|
||||
{
|
||||
no: `014`,
|
||||
name: `温知予`,
|
||||
enName: `YUKI`,
|
||||
age: 23,
|
||||
gender: `F`,
|
||||
height: 166,
|
||||
tags: [`chinese`] as ArtistTag[],
|
||||
motto: `静水流深，初心不改。`,
|
||||
personality: `清冷温婉、安静纯粹，恬淡内敛、温润素雅，自带江南古韵仙气，不慕浮华喧嚣。舞台上沉稳从容、气韵独特，摒弃浮夸动作，用古典底蕴碰撞流行，故事感十足。`,
|
||||
catchphrase: `好，知道了。`,
|
||||
skills: `大提琴演奏、竖琴演奏、抒情演唱`,
|
||||
track: `大提琴手 / 抒情主唱、古典跨界赛道`,
|
||||
bio: `温知予出生在浙江杭州的艺术世家，长辈深耕昆曲与古典音乐领域，自幼浸润在江南古韵与优雅旋律之中，三岁习竖琴，五岁练大提琴，多年的深耕沉淀出一身温润清冷的古典气质。她毕业于中央音乐学院大提琴专业，科班功底扎实，却不局限于古典音乐的固有框架。一段江南古桥细雨中的大提琴即兴演奏视频，让她意外出圈，温柔温婉的姿态、仙气十足的气质，搭配悠扬治愈的旋律，成为很多人心中的清冷白月光。她始终低调纯粹，拒绝流水线影视邀约与商业包装，一心深耕古典与现代音乐的跨界融合。在乐队中，她以大提琴的深沉搭配竖琴的灵动，中和现代旋律的凌厉，用温柔细腻的唱腔赋予歌曲别样的故事感。她的舞台从不用夸张的动作博眼球，仅凭音符与气质便能治愈人心，用古典底蕴碰撞现代流行，走出独属于自己的长线音乐之路。`,
|
||||
},
|
||||
{
|
||||
no: `015`,
|
||||
name: `韩臻臻`,
|
||||
enName: `JOJO`,
|
||||
age: 30,
|
||||
gender: `F`,
|
||||
height: 169,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `实力为基，坚持为翼。`,
|
||||
personality: `飒爽沉稳、低调务实，成熟干练、内敛谦和，对待音乐极致严谨，坚守初心。舞台上专业度拉满、气场稳重从容，唱功全能发挥稳定，兼具力量感与共情力。`,
|
||||
catchphrase: `我们可以的。`,
|
||||
skills: `流行主唱、高音演唱、词曲创作`,
|
||||
track: `实力主唱、流行赛道`,
|
||||
bio: `韩臻臻自幼展露极致声乐天赋，六岁接受专业声乐训练，十岁便能轻松驾驭高音 C，被业内导师誉为极具潜力的声乐奇才。16 岁登台参加全国青年歌手大奖赛，凭借原创高难度曲目一举夺冠，年少成名。她对待音乐极致严谨，每一首作品都反复打磨、精修细节，绝不敷衍流水线创作。多年舞台历练，让她拥有极强的临场应变能力和舞台掌控力，高音通透有力、共情细腻，既能驾驭大气恢弘的曲风，也能演绎温柔细腻的抒情旋律。她以初心坚守音乐本心，持续用极具穿透力的嗓音，书写属于实力派歌手的音乐之路。`,
|
||||
},
|
||||
{
|
||||
no: `016`,
|
||||
name: `黎抒`,
|
||||
enName: `LEE`,
|
||||
age: 28,
|
||||
gender: `F`,
|
||||
height: 170,
|
||||
tags: [`folk`] as ArtistTag[],
|
||||
motto: `随心而往，随乐而行。`,
|
||||
personality: `独立通透、随性淡然，安静文艺、清冷松弛，待人真诚坦荡，不刻意迎合世俗。舞台上温柔有力量、叙事感十足，嗓音独特辨识度高，用纯粹民谣治愈人心。`,
|
||||
catchphrase: `ok，都一样。`,
|
||||
skills: `民谣 / 流行演唱、词曲创作、吉他演奏`,
|
||||
track: `创作主唱、独立民谣赛道`,
|
||||
bio: `黎抒是中文系出身，毕业后入职出版社担任文学编辑，过着安稳规整的朝九晚五生活。但骨子里热爱自由、偏爱文字与旋律的她，始终不甘于被平淡的生活束缚。25 岁那年，她毅然辞去稳定工作，背着一把木吉他开启流浪之旅，走遍南方大小城市，在街边酒馆、小众清吧驻唱，把沿途的烟火人间、离别重逢、细碎情绪全部写进歌词。广州小酒馆的一次突发停电，黑暗之中她淡然落座，一把木吉他、一副独特沙哑的嗓音，清唱原创民谣，温柔又清冷的氛围感打动了很多网友。深耕独立民谣赛道的她，拒绝迎合主流市场，不做流水线情歌，只唱真实生活、真心感悟。作为乐队创作主唱，她包揽大量词曲创作，文字功底加持下的歌词细腻有深度，独特声线极具辨识度，安静温柔却充满力量，用最纯粹的民谣旋律，治愈每一个向往自由、心怀故事的听众。`,
|
||||
},
|
||||
{
|
||||
no: `017`,
|
||||
name: `楚瑶瑶`,
|
||||
enName: `CRYSTAL`,
|
||||
age: 26,
|
||||
gender: `F`,
|
||||
height: 164,
|
||||
tags: [`folk`] as ArtistTag[],
|
||||
motto: `以温柔治愈世界，以善意温暖岁月。`,
|
||||
personality: `温柔暖心、耐心纯粹，温和柔软、接地气，共情力极强，自带邻家姐姐治愈气场。舞台上舒缓温柔、治愈感拉满，用轻柔琴声与温润和声抚平情绪，氛围松弛温暖。`,
|
||||
catchphrase: `没事的，都会好的。`,
|
||||
skills: `键盘演奏、和声、粉丝陪伴向内容`,
|
||||
track: `键盘 / 和声、治愈系流行赛道`,
|
||||
bio: `楚瑶瑶毕业于师范大学音乐系，毕业后成为一名小学音乐代课老师，长期陪伴孩子成长的经历，让她始终保持温柔纯粹、耐心治愈的性格。任教期间，她发现很多学生因学业压力陷入焦虑、情绪低落，便开始尝试创作舒缓温暖的原创旋律，在课堂上教孩子们演唱，用音乐治愈少年心事。后来她将自己的原创弹唱、温柔和声片段发布在网络平台，慢慢积累人气。她没有炸裂的舞台噱头，没有华丽的包装，仅凭长达一年的深夜直播陪伴、温柔细腻的琴声与歌声，陪伴和治愈了很多熬夜、焦虑、内耗的网友。自带邻家姐姐的亲和力，接地气、无距离感，是粉丝心中最温暖的情绪港湾。她擅长键盘演奏与和声编写，用温柔的旋律中和歌曲的凌厉感，为每一首作品注入温暖底色，坚守治愈系音乐赛道，用音乐传递温柔与力量。`,
|
||||
},
|
||||
{
|
||||
no: `018`,
|
||||
name: `仇甯`,
|
||||
enName: `LYNN`,
|
||||
age: 27,
|
||||
gender: `F`,
|
||||
height: 171,
|
||||
tags: [`rock`] as ArtistTag[],
|
||||
motto: `严于律己，温柔待人。`,
|
||||
personality: `外冷内热、严谨自律，清冷寡言、低调内敛，对专业极致严苛，责任心极强。舞台上甜酷反差、张力十足，将舞蹈功底融入摇滚，唱跳编排质感拉满，表现力出彩。`,
|
||||
catchphrase: `别偷懒，认真点。`,
|
||||
skills: `架子鼓演奏、贝斯演奏、舞台编舞、唱跳演绎`,
|
||||
track: `贝斯手、唱跳摇滚赛道`,
|
||||
bio: `仇甯自幼深耕舞蹈领域，12 岁考入北京舞蹈学院附中专修现代舞，18 岁成为国内顶尖职业舞团的舞者，多年严苛的舞蹈训练，练就了她极致的体态线条、扎实的舞台功底和偏执的专业态度，常年稳居排练室最晚离场名单，被同行称作 “练功狂人”。本该深耕舞蹈舞台的她，却因一次演出意外膝盖重伤，被迫告别高强度舞蹈表演，打碎了多年的职业梦想。低谷期的她偶然接触摇滚音乐，被贝斯的沉稳厚重、架子鼓的强劲节奏深深治愈，从此开启跨界之路，从零开始自学贝斯与架子鼓。深夜排练室独自练琴调试的侧拍视频意外出圈，清冷疏离的神态、优越的体态线条、专注认真的模样收到很多人点赞。她将多年舞蹈功底融入摇滚舞台，独创极具张力的唱跳编排，对舞台细节极致严苛，为团队舞台质感保驾护航，用硬核的舞台实力，活出独属于自己的飒爽锋芒。`,
|
||||
},
|
||||
{
|
||||
no: `019`,
|
||||
name: `方凌`,
|
||||
enName: `FANNY`,
|
||||
age: 29,
|
||||
gender: `F`,
|
||||
height: 167,
|
||||
tags: [`chinese`] as ArtistTag[],
|
||||
motto: `以匠心传国风，以坚守续传统。`,
|
||||
personality: `温婉古典、清冷雅致，沉稳内敛、低调专注，自带正统民乐气韵，匠心纯粹坚定。舞台上专业极致、匠心满满，演奏沉稳精准，打破传统与现代壁垒，尽显国风温柔力量。`,
|
||||
catchphrase: `再练习一次好吗？`,
|
||||
skills: `二胡演奏、长笛演奏、国风编曲、古风演唱`,
|
||||
track: `民乐担当、国风古典赛道`,
|
||||
bio: `方凌出身正统民乐世家，父母均为国家级民乐演奏家，四岁便开启练琴生涯，每日坚持六小时以上专业训练，数十年从未间断，基本功扎实到极致。18 岁考入中央音乐学院民乐系，毕业后进入中国广播民族乐团，成为乐团里年轻的二胡演奏者，常年参与国内外巡演，深耕正统民乐演奏多年，斩获不少专业奖项。常年的正统民乐熏陶，造就了她温婉清冷、严谨雅致的古典气质。但不甘于固守传统的她，厌倦了千篇一律的复刻演出，一心想要打破民乐与流行音乐的壁垒，让传统国风被更多年轻人看见。一次巡演后台校音花絮意外走红，她古典雅致的气质，收获大批国风爱好者关注。随后她致力于将二胡、长笛等传统民乐乐器与现代编曲融合，深耕国风改编与原创，以极致专业的态度，让传统民乐在新时代舞台焕发全新生机。`,
|
||||
},
|
||||
{
|
||||
no: `020`,
|
||||
name: `尹卓曜`,
|
||||
enName: `ROY`,
|
||||
age: 29,
|
||||
gender: `M`,
|
||||
height: 185,
|
||||
tags: [`rock`] as ArtistTag[],
|
||||
motto: `自由为魂，热爱为骨。`,
|
||||
personality: `随性洒脱、痞帅温柔，自由不羁、不受拘束，自带港风复古慵懒质感，豁达通透。舞台上松弛感拉满、随性张扬，即兴演奏灵动炸裂，曲风醇厚复古，感染力极强。`,
|
||||
catchphrase: `OK啦`,
|
||||
skills: `主音吉他演奏、单簧管演绎、港风歌曲演绎、即兴 solo`,
|
||||
track: `主音吉他手、港风复古摇滚赛道`,
|
||||
bio: `尹卓曜成长于香港老街区，自幼浸润在黄金时代港乐与复古摇滚的氛围中，家中收藏大量经典老唱片与磁带，早早埋下音乐热爱的种子。少年时期的他洒脱不羁，偏爱机车改装与街头自由氛围，高中毕业后深耕机车改装行业，同时与志同道合的好友组建地下乐队，专职担任主音吉他手，常年游走于香港街头酒吧、露天街头演出。他不被刻板规则束缚，偏爱自由随性的舞台风格，擅长将复古港风旋律与摇滚律动结合，还自学单簧管，将小众乐器音色融入原创编曲，打造独属于自己的复古摇滚风格。一场暴雨后的街头义演路透，让他收获了不少关注，机车上随性弹吉他的模样，痞帅松弛的港风气质、自由狂野的舞台状态，瞬间击中很多路人。他的舞台从无刻意设计，全程松弛自然，即兴 solo 灵动炸裂，始终坚守自由热血的摇滚初心，用复古旋律致敬港乐黄金时代。`,
|
||||
},
|
||||
{
|
||||
no: `021`,
|
||||
name: `温景然`,
|
||||
enName: `RYAN`,
|
||||
age: 27,
|
||||
gender: `M`,
|
||||
height: 178,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `默默深耕，极致求精。`,
|
||||
personality: `温润儒雅、沉稳低调，内敛谦和、温润通透，不爱张扬造势，做事踏实细致。舞台上专注极致、细腻走心，编曲演奏精准深情，擅长用温柔旋律勾勒情绪，共情力强。`,
|
||||
catchphrase: `我来吧。`,
|
||||
skills: `钢琴演奏、音乐制作、作曲编曲`,
|
||||
track: `音乐制作人、钢琴演奏、抒情流行赛道`,
|
||||
bio: `温景然年少展露极致音乐天赋，三岁学钢琴，十岁独立完成原创作曲，音乐感知力与创作天赋远超同龄人。本科考入中央音乐学院音乐制作专业，科班功底扎实，毕业后入职国内唱片公司，从事幕后编曲制作多年，是业内小有名气的音乐制作人。他为人低调内敛，极少公开露面，常年隐身幕后。一场颁奖礼突发演奏嘉宾缺席事故，作为幕后编曲的他临时救场，一袭西装端坐钢琴前，行云流水的即兴独奏、温润儒雅的气质引发热捧。作为音乐制作人，他擅长把控编曲、作曲与音乐质感，偏爱细腻治愈的抒情流行曲风，擅长用精准的乐理编排勾勒细腻情绪。沉稳温柔的性格、顶级的专业实力，让他成为团队最可靠的灵魂核心。`,
|
||||
},
|
||||
{
|
||||
no: `022`,
|
||||
name: `林铮`,
|
||||
enName: `CHAIN`,
|
||||
age: 33,
|
||||
gender: `M`,
|
||||
height: 186,
|
||||
tags: [`rock`] as ArtistTag[],
|
||||
motto: `以担当护团队，以真诚待伙伴。`,
|
||||
personality: `沉稳可靠、幽默豁达，真诚坦荡、接地气，责任心极强，是团队的定心丸。舞台上稳重笃定、掌控全局，贝斯律动扎实稳健，统筹守护团队，低调靠谱担当十足。`,
|
||||
catchphrase: `有我呢。`,
|
||||
skills: `贝斯演奏、编曲制作、团队统筹`,
|
||||
track: `队长 / 贝斯手、摇滚 / 流行赛道`,
|
||||
bio: `土生土长的东北人林铮，18 岁应征入伍，五年武警军旅生涯，磨练出坚韧沉稳的意志、极强的责任心与绝佳的团队统筹能力，自带一身正直可靠的硬汉气质。退伍后，他从事健身教练工作，同时始终坚守年少热爱，自学贝斯演奏，深耕摇滚音乐领域，和好友组建乐队并担任队长。多年军旅生涯造就了他雷厉风行、靠谱稳重的处事风格，同时自带东北人天生的幽默豁达，待人真诚接地气，是团队公认的定海神针。一场户外义演的设备突发故障，现场支架即将倾倒，他单手稳稳稳住设备，从容安抚全场观众，冷静靠谱的救场画面在网络上传播，收获了少量粉丝。作为乐队队长与贝斯手，他统筹团队大小事务，把控舞台安全与作品质量，深耕摇滚与流行融合曲风，用沉稳的贝斯律动稳住全队节奏，以极强的责任感，守护团队稳步前行。`,
|
||||
},
|
||||
{
|
||||
no: `023`,
|
||||
name: `高翊宸`,
|
||||
enName: `ALSTON`,
|
||||
age: 30,
|
||||
gender: `M`,
|
||||
height: 184,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `以艺术为信仰，以专业为基石。`,
|
||||
personality: `温润贵气、专业严谨，儒雅通透、谦和有礼，对待艺术心怀敬畏，不慕浮华。舞台上端庄雅致、表现力高级，美声跨界兼具力量与美感，舞台叙事感饱满，质感拉满。`,
|
||||
catchphrase: `完美。`,
|
||||
skills: `美声高音演唱、音乐剧跨界、小提琴演奏`,
|
||||
track: `高音担当 / 主唱、音乐剧跨界赛道`,
|
||||
bio: `高翊宸出身艺术世家，自小浸泡在正统古典艺术氛围中，三岁启蒙小提琴，五岁系统学习美声唱法，从小接受严苛的艺术训练，深耕古典艺术领域二十余年，练就了极致扎实的科班功底与端正雅致的艺术气质。他自幼对艺术怀揣极致敬畏之心，做任何演绎、练习都力求精益求精，从不敷衍潦草，常年的打磨让他拥有了精准到极致的艺术感知力。私下的他温润谦和、低调内敛，待人处事分寸得当，自带温润端庄的青年艺术家风骨。剧院中，他兼具力量与细腻的美声跨界演绎，流畅高级的舞台叙事感，让无数观众感受到古典艺术与流行音乐融合的独特魅力。深耕音乐剧与美声跨界赛道的他，打破了古典艺术小众固化的壁垒，摒弃传统美声的刻板厚重，将轻盈的流行律动、细腻的情感表达融入正统唱法之中。站上舞台的他端庄大气、气场雅致，他以正统艺术底蕴赋能现代舞台，用跨界演绎让古典艺术焕发新生，凭极致专业的舞台素养，成为圈内小众且优质的实力派新人。`,
|
||||
},
|
||||
{
|
||||
no: `024`,
|
||||
name: `江驰`,
|
||||
enName: `CHILL`,
|
||||
age: 26,
|
||||
gender: `M`,
|
||||
height: 179,
|
||||
tags: [`hiphop`] as ArtistTag[],
|
||||
motto: `音乐无国界，潮流我定义。`,
|
||||
personality: `潮酷随性、阳光痞帅，开朗洒脱、真诚坦荡，审美前卫独到，创意十足。舞台上活力四射、气场全开，Rap 节奏精准炸裂，架子鼓充满力量，先锋编曲自带国际质感。`,
|
||||
catchphrase: `酷。`,
|
||||
skills: `Rap 演唱、架子鼓手、先锋编曲、舞台设计`,
|
||||
track: `Rapper / 先锋制作人、国际流行赛道`,
|
||||
bio: `江驰出生于美国洛杉矶的华人家庭，自幼浸润在多元国际文化氛围中，深受欧美嘻哈、先锋流行音乐熏陶。十岁专攻架子鼓，十五岁便能登台洛杉矶地下 Livehouse 演出，是当地小有名气的新生代华人鼓手，常年接触国际前沿的音乐制作与舞台设计理念，审美与实力接轨国际。24 岁，他选择回国发展，立志将海外先锋音乐理念与华语音乐融合，打破本土音乐的风格壁垒。一场街头即兴 Rap Battle 现场，他无彩排即兴控场，节奏切分新潮炸裂，阳光痞帅的气质、潮酷十足的舞台风格，收获了不少年轻粉丝的关注。他身兼 rapper、鼓手、先锋制作人多重身份，亲自打磨编曲、舞台设计、舞台演绎，拒绝流水线套路，主打新潮、先锋、国际化的音乐风格，用顶级的舞台实力与创新思维，打造年轻化、潮流化的华语流行新形态。`,
|
||||
},
|
||||
{
|
||||
no: `025`,
|
||||
name: `曾辙`,
|
||||
enName: `JACK`,
|
||||
age: 28,
|
||||
gender: `M`,
|
||||
height: 176,
|
||||
tags: [`folk`] as ArtistTag[],
|
||||
motto: `声音有温度，音乐有力量。`,
|
||||
personality: `温柔沉稳、高情商通透，谦和内敛、待人真诚，善于体察情绪，是团队情绪粘合剂。舞台上温润治愈、共情力极强，唱腔醇厚磁性，和声细腻和谐，仅凭歌声打动人心。`,
|
||||
catchphrase: `别急，慢慢来。`,
|
||||
skills: `实力演唱、和声编写、抒情演绎`,
|
||||
track: `主唱 / 和声担当、治愈系流行赛道`,
|
||||
bio: `曾辙毕业于中国传媒大学播音主持专业，拥有极佳的声线条件与语言共情力，毕业后任职深夜电台配音主播，多年深夜播音经历，让他的声线温润醇厚、自带治愈质感，常年陪伴无数失眠听众。工作之余，他始终尝试声乐与和声编写，利用业余时间打磨唱功、创作原创歌曲，唱功扎实、共情力极强。一场户外直播突发设备故障，现场嘈杂混乱，他仅凭一段纯净温柔的和声，瞬间抚平全场躁动。他是擅长捕捉细腻情绪，将平凡的歌词与旋律演绎出满满的画面感，深耕治愈系流行赛道，不追求炸裂噱头，只用温柔纯粹的歌声治愈人心。`,
|
||||
},
|
||||
{
|
||||
no: `026`,
|
||||
name: `范智演`,
|
||||
enName: `CY`,
|
||||
age: 30,
|
||||
gender: `M`,
|
||||
height: 178,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `颠覆传统，创造未来。`,
|
||||
personality: `特立独行、先锋前卫，清冷孤傲、不随波逐流，对艺术有极致追求，创意大胆。舞台上张力拉满、极具颠覆性，电音制作先锋炸裂，舞台设计冲击力强，视听体验极致。`,
|
||||
catchphrase: `炸了。`,
|
||||
skills: `电音制作、鼓手、Rap 演唱、舞台艺术设计`,
|
||||
track: `音乐总监 / 制作人、先锋电音赛道`,
|
||||
bio: `范智演自幼兼具美术与音乐双重艺术天赋，对视觉、听觉艺术拥有极致敏锐的感知力。大学远赴德国留学，深耕先锋艺术与电子音乐制作，潜心研究极简主义与暴力美学的艺术融合，曾亮相欧洲先锋艺术周，是业内极具辨识度的新锐视觉导演与音乐制作人。他的艺术风格极具颠覆性，擅长打破常规、解构传统，打造极具冲击力的先锋作品。一场午夜先锋 live 秀，他操控鼓棒与采样器，将破碎的电音底噪与炸裂的说唱节奏完美融合，癫狂又极致专业的舞台状态、先锋潮流的艺术质感，受到了大批先锋乐迷的关注。加入乐队担任音乐总监后，他全权把控团队音乐风格与舞台视觉设计，对音色、节奏、舞台细节偏执苛求，擅长解构重组音轨，打造独一无二的先锋电音风格。他不迎合大众主流审美，坚持自我先锋艺术理念，用超强的创作能力与舞台审美，引领小众潮流音乐出圈。`,
|
||||
},
|
||||
{
|
||||
no: `027`,
|
||||
name: `周新宇`,
|
||||
enName: `JOE`,
|
||||
age: 29,
|
||||
gender: `M`,
|
||||
height: 178,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `用音乐记录都市，用旋律治愈孤独。`,
|
||||
personality: `沉稳内敛、低调务实，理性通透、思维缜密，兼具程序员严谨与音乐人感性。舞台上专注投入、氛围感十足，词曲贴近都市生活，用旋律讲述喜怒哀乐，代入感极强。`,
|
||||
catchphrase: `我试试。`,
|
||||
skills: `词曲创作、吉他演奏、音乐制作`,
|
||||
track: `全能制作人、都市流行赛道`,
|
||||
bio: `周新宇本科攻读计算机专业，毕业后成为一名程序员，深耕互联网行业。但他从未放弃自幼热爱的音乐，利用下班、深夜的碎片化时间，自学吉他、词曲创作、后期混音，从零搭建个人小型音乐工作室，被圈内人称作 “深夜搬砖音乐人”。常年的都市职场生活，让他深谙当代年轻人的压力与孤独，创作灵感大多源于真实的都市烟火。他因发起 “一人成军” 创作挑战受到关注，狭小的出租屋内，他独自包揽词曲、演奏、后期全流程，融入地铁、雨夜、街道等真实城市白噪音，打造极具代入感的都市流行旋律。他凭借顶级的全能创作能力，主打生活化、共情力极强的都市流行曲风，拒绝流水线模板化创作，每一首作品都扎根现实、贴近人心，用细腻的旋律，讲述当代都市人的喜怒哀乐。`,
|
||||
},
|
||||
{
|
||||
no: `028`,
|
||||
name: `刘影`,
|
||||
enName: `SHADOW`,
|
||||
age: 38,
|
||||
gender: `F`,
|
||||
height: 170,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `音乐是灵魂的栖息地。`,
|
||||
personality: `清冷疏离、特立独行，安静淡然、不慕名利，厌倦商业化束缚，偏爱山野生活。舞台上空灵治愈、仙气十足，嗓音天籁极具辨识度，另类摇滚演绎充满生命力。`,
|
||||
catchphrase: `随缘。`,
|
||||
skills: `流行演唱、词曲创作、空灵抒情演绎`,
|
||||
track: `抒情主唱、长线 IP 赛道`,
|
||||
bio: `刘影曾是华语乐坛黄金时代出道的歌手，19 岁正式出道，凭借独一无二的空灵天籁嗓音、小众高级的音乐风格收获了一些关注，留下过传唱度较高的歌曲。事业上升期的她，厌倦了流量内卷与规则束缚，毅然选择淡出乐坛，隐居大理山野，远离喧嚣浮华，潜心沉淀自我、打磨音乐心境。隐居多年，她极少公开露面，唯一的动态是一段深山溶洞无伴奏清唱视频，纯天然的空灵嗓音、不带烟火气的纯粹唱腔，搭配自然水声回响，让无数老粉与文艺爱好者为之动容，悄然回归大众视野。她坚持原创、坚守艺术本心，不迎合流量、不妥协市场，用空灵治愈的声线，打造长线艺术生命力。`,
|
||||
},
|
||||
{
|
||||
no: `029`,
|
||||
name: `君墨`,
|
||||
enName: `CHAO`,
|
||||
age: 37,
|
||||
gender: `F`,
|
||||
height: 172,
|
||||
tags: [`chinese`, `rock`] as ArtistTag[],
|
||||
motto: `以戏曲为根，以摇滚为魂。`,
|
||||
personality: `英气沉稳、专业严谨，坚韧独立、做事认真，自带戏曲端庄气场，敢于跨界突破。舞台上气场全开、英气逼人，越剧与摇滚完美融合，雌雄莫辨的气场极具颠覆性。`,
|
||||
catchphrase: `可。`,
|
||||
skills: `越剧演唱、架子鼓演奏、国风编曲`,
|
||||
track: `国风担当、国风摇滚赛道`,
|
||||
bio: `君墨出身绍兴越剧世家，母亲是国家级越剧表演艺术家，自幼泡在剧团长大，耳濡目染深耕戏曲艺术，15 岁正式拜师学戏，专攻小生反串，身段利落、唱腔醇厚，年纪轻轻便成为剧团台柱子，是业内公认的越剧新星。看似深耕传统戏曲的她，骨子里藏着极致的叛逆与热爱，私下痴迷摇滚音乐，无人教导便凭着极致的自律与专业，自学架子鼓、国风编曲，默默探索戏曲与摇滚的融合之路。一次下乡公益演出，现场伴奏设备突发故障，舞台中断，她临场应变，褪去戏袍、卸下戏曲妆容，手持鼓棒即兴敲出强劲摇滚节奏，将经典越剧唱段与硬核摇滚旋律完美融合，雌雄莫辨的英气气场、颠覆性的舞台演绎，让在场的所有人印象深刻。自此，她彻底打破传统戏曲与现代音乐的壁垒，走出独一无二的国风摇滚跨界之路。`,
|
||||
},
|
||||
{
|
||||
no: `030`,
|
||||
name: `李叙`,
|
||||
enName: `SEAN`,
|
||||
age: 28,
|
||||
gender: `M`,
|
||||
height: 176,
|
||||
tags: [`folk`] as ArtistTag[],
|
||||
motto: `平凡日子里，也有温柔回响。`,
|
||||
personality: `温和沉稳、接地气通透，内敛真诚、高情商，深谙普通人辛酸，习惯平视生活。舞台上温暖治愈、共情力极强，嗓音自带生活磨砺质感，用简单旋律戳中内心柔软。`,
|
||||
catchphrase: `好的。`,
|
||||
skills: `民谣弹唱、词曲创作、木吉他演奏`,
|
||||
track: `民谣主唱、都市治愈民谣赛道`,
|
||||
bio: `李叙大学毕业后，进入一家互联网公司做产品经理，一做就是五年。这五年里，他每天过着 996 的生活，加班到深夜是家常便饭，经历过无数次的项目改稿和职场内卷，深知社畜的辛酸与不易。为了排解工作和生活的压力，他开始自学吉他，把自己的经历和感受写进歌里。他的故事没有奇迹，只有共鸣：他没有在专业的录音棚，而是在合租房窄小的阳台上，就着路灯的光，抱着那把边角磨损的木吉他，用那副自带生活磨砺感的温暖烟嗓，平淡地唱出一句关于 “下班后在车里发呆” 的原创歌词，戳中了无数社畜内心最隐秘的孤独。他亲自操刀词曲创作，坚持保留音乐里那份最原始的呼吸感，用最简单的旋律，为每一个在深夜里自我怀疑的灵魂，点燃一盏不必太亮却足够暖心的灯。`,
|
||||
},
|
||||
{
|
||||
no: `031`,
|
||||
name: `金晓璐`,
|
||||
enName: `KIM`,
|
||||
age: 31,
|
||||
gender: `F`,
|
||||
height: 168,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `以琴为始，以歌为终。`,
|
||||
personality: `温婉大气、低调谦和，沉稳内敛、待人真诚，毫无明星架子，亲和力拉满。舞台上从容优雅、气场温润，钢琴演奏行云流水，将古典功底与流行完美融合。`,
|
||||
catchphrase: `谢谢。`,
|
||||
skills: `流行演唱、钢琴演奏`,
|
||||
track: `主唱 / 键盘手、经典流行赛道`,
|
||||
bio: `金晓璐出生在一个钢琴世家，父亲是著名的钢琴教育家，母亲是钢琴演奏家。她三岁开始学习钢琴，五岁登台演出，十岁获得全国钢琴比赛冠军，被誉为 “钢琴神童”。长大后，她成为了一名职业钢琴演奏家，在国内外举办过多场个人独奏音乐会，是业内公认的实力派钢琴家。但她内心一直渴望尝试不同的音乐风格，不满足于只演奏古典音乐。她的转折点发生在一次极其 “失态” 的意外：在某次严肃的古典音乐会现场，面对台下昏昏欲睡的观众，她突然中断了练习过万次的肖邦，转而用那副被乐评人称为 “温婉大气” 却暗藏力量的嗓音，即兴拆解了一段流行金曲。这种对规则的低调真诚反击，让她在社交媒体上凭借极具辨识度的经典淡颜感，收获了大量关注。她不再甘于只做背景板，而是以另一种身份重回经典流行赛道，比起精致的滤镜，她更愿意展示自己在琴房练到指尖红肿的真实，用成熟女性的韧性，重新定义自己的音乐之路。`,
|
||||
},
|
||||
{
|
||||
no: `032`,
|
||||
name: `莫晴`,
|
||||
enName: `MOMO`,
|
||||
age: 11,
|
||||
gender: `F`,
|
||||
height: 145,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `音乐是我的好朋友。`,
|
||||
personality: `元气灵动、懂事乖巧，开朗活泼、心思细腻，共情力远超同龄人，自律坚韧。舞台上清澈治愈、元气满满，童声干净透亮，小提琴悠扬动听，自然纯真无表演痕迹。`,
|
||||
catchphrase: `好呀好呀。`,
|
||||
skills: `童声演唱、小提琴演奏、舞台表演、短视频陪伴内容创作`,
|
||||
track: `乐队童声主唱、乐队小提琴手、养成系偶像赛道`,
|
||||
bio: `莫晴出生在杭州，父母均为浙江音乐学院的小提琴教师，她从 3 岁起就踮着脚趴在琴凳上看父母练琴，展现出远超同龄人的音乐感知力。5 岁时她就能完整演奏《小星星变奏曲》，6 岁首次登台参加全国少儿小提琴比赛便斩获金奖，被评委誉为 “极具潜力的小提琴神童”。妈妈随手分享的一段睡前练琴视频：扎着羊角辫的她抱着比自己还高的小提琴，认真拉完一曲后，对着镜头露出缺了一颗门牙的可爱笑容，治愈了很多网友。虽然年纪尚小，但莫晴格外懂事自律，每天坚持练琴 ，同时从未落下学业，还会在短视频平台分享自己的练琴日常和暖心小故事。她清澈透亮的童声与悠扬的小提琴声，为观众增添了独一无二的治愈色彩。对她而言，音乐不是任务，而是和世界对话的方式。`,
|
||||
},
|
||||
{
|
||||
no: `033`,
|
||||
name: `裴靖`,
|
||||
enName: `JAY`,
|
||||
age: 14,
|
||||
gender: `M`,
|
||||
height: 168,
|
||||
tags: [`pop`] as ArtistTag[],
|
||||
motto: `摇滚少年，永不言弃。`,
|
||||
personality: `阳光开朗、活泼好动，热情真诚、精力旺盛，自带少年元气冲劲，坚韧不服输。舞台上活力四射、爆发力强，电吉他演奏灵动炸裂，充满少年热血与青春激情。`,
|
||||
catchphrase: `冲！`,
|
||||
skills: `电吉他演奏、木吉他弹唱、架子鼓演奏、舞台表演`,
|
||||
track: `节奏 / 主音吉他手、养成系偶像赛道`,
|
||||
bio: `裴靖的父亲曾是北京一支地下摇滚乐队的主音吉他手，受父亲影响，他从 6 岁起就抱着比自己还大的电吉他摸索琴弦，展现出惊人的天赋。9 岁时他就能完成高难度的速弹即兴 solo，12 岁获得全国少儿电吉他大赛总冠军，被业内前辈称为 “未来的吉他新星”。他性格活泼好动，是学校篮球队的主力后卫，走到哪里都带着满满的元气。穿着校服的他抱着电吉他在舞台上尽情挥洒汗水，阳光帅气的脸庞和极具爆发力的演奏，收获了不少同学的喜爱。虽然年纪不大，但裴靖对音乐有着近乎偏执的热爱，每天放学后都会泡在排练室练琴到天黑，手指磨出茧子也从不叫苦。作为吉他手，他用充满活力的演奏，为世界注入了年轻的热血与朝气。`,
|
||||
},
|
||||
{
|
||||
no: `034`,
|
||||
name: `Kael Walker`,
|
||||
enName: `KAEL`,
|
||||
age: 20,
|
||||
gender: `M`,
|
||||
height: 190,
|
||||
tags: [`folk`] as ArtistTag[],
|
||||
motto: `Music brighten everywhere.`,
|
||||
personality: `安静内敛、温柔绅士，谦和有礼、待人真诚，自带加州松弛感，偏爱独处创作。舞台上判若两人、感染力极强，电吉他演奏充满力量，演唱温柔治愈，反差魅力独特。`,
|
||||
catchphrase: `Cheers.`,
|
||||
skills: `电吉他演奏、木吉他弹唱、流行演唱、即兴词曲创作`,
|
||||
track: `主音吉他手、欧美流行赛道、治愈系偶像赛道`,
|
||||
bio: `Kael Walker 出生在美国加州圣塔莫尼卡的一个艺术家庭，父亲是知名音乐制作人，母亲是前维多利亚的秘密超模。他从小在阳光明媚的海边长大，12 岁生日时父亲送了他一把电吉他，从此便与音乐结下不解之缘。16 岁时，他在 YouTube 上传了一段自己在海边弹唱《Here Comes The Sun》的视频，凭借干净帅气的外形和温柔治愈的烟嗓受到关注，被网友亲切地称为 “加州阳光”。私下里的 Kael 安静内敛，最大的爱好是冲浪、摄影和写歌，常常一个人带着吉他去海边，把海风、日落和海浪的声音写进旋律里。舞台上的他却判若两人，抱着电吉他时眼神坚定，演奏充满力量。他拒绝了多家主流唱片公司的单独签约邀约，选择加入乐队，希望和伙伴们一起创造出更有温度、更有灵魂的音乐。`,
|
||||
},
|
||||
{
|
||||
no: `035`,
|
||||
name: `Anthony Williams`,
|
||||
enName: `TRUMPET`,
|
||||
age: 20,
|
||||
gender: `M`,
|
||||
height: 190,
|
||||
tags: [`jazz`] as ArtistTag[],
|
||||
motto: `Music is the voice of the soul.`,
|
||||
personality: `慵懒随性、清冷孤傲，独立自我、不被束缚，自带贵族高级疏离感，浪漫细腻。舞台上慵懒迷人、氛围感拉满，爵士小号悠扬慵懒，融合复古与现代，气质独一无二。`,
|
||||
catchphrase: `Well.`,
|
||||
skills: `爵士小号演奏、高级时装走秀、黑胶采样制作、即兴编曲`,
|
||||
track: `小号手、时尚先锋模特赛道、爵士融合赛道`,
|
||||
bio: `Anthony Williams 出身于英国伦敦的一个贵族家庭，从小接受严格的精英教育，学习钢琴、马术和古典绘画，但他唯独对爵士小号情有独钟。7 岁时，他在一场爵士音乐节上听到小号演奏家 Miles Davis 的演出，瞬间被那种慵懒又充满故事感的音色吸引，从此便全身心投入到爵士小号的学习中，师从英国著名爵士小号手 。14 岁时，他在伦敦街头被顶级时尚星探发掘，凭借近乎雕塑般的深邃五官和 190CM 的优越身材，迅速成为时尚界的宠儿，16 岁首次登上T台，为品牌走秀。即使在时尚界声名鹊起，Anthony 也从未放弃自己的音乐梦想，他常常在走秀间隙带着小号去伦敦的老爵士酒吧即兴演奏，那种将高级时尚与复古爵士完美融合的独特气质，让人印象深刻。`,
|
||||
},
|
||||
{
|
||||
no: `036`,
|
||||
name: `Sylvia Ross`,
|
||||
enName: `SYLVIA`,
|
||||
age: 18,
|
||||
gender: `F`,
|
||||
height: 172,
|
||||
tags: [`rock`] as ArtistTag[],
|
||||
motto: `Girls Bravo！`,
|
||||
personality: `直爽开朗、率真可爱，独立坚强、敢想敢做，热爱自由，喜欢小动物反差感十足。舞台上气场全开、爆发力极强，全能驾驭多种乐器，用摇滚打破对女孩的刻板印象`,
|
||||
catchphrase: `I love it！`,
|
||||
skills: `架子鼓演奏、贝斯演奏、电吉他 / 木吉他弹唱、摇滚演唱`,
|
||||
track: `全能乐器担当、欧美摇滚赛道、酷飒偶像赛道`,
|
||||
bio: `Sylvia Ross 出生在加拿大温哥华的一个摇滚家庭，父母都是当地知名朋克乐队的成员，她从小在排练室长大，耳边永远是吉他和鼓声的轰鸣，摇篮曲都是父母演奏的摇滚歌曲。受家庭氛围熏陶，她 5 岁开始学习架子鼓，7 岁学贝斯，10 岁学吉他，15 岁就和三个好朋友组建了自己的少女摇滚乐队 “Silver Hair”，在温哥华的地下 Livehouse 演出，凭借极具爆发力的演奏和酷飒的舞台风格，成为当地小有名气的少女摇滚偶像。留着标志性银白发的她在舞台上疯狂打鼓，汗水顺着发丝滴落，眼神里充满了野性的生命力，酷飒的舞台风格收获了不少年轻粉丝的喜爱。私下里的 Sylvia 直爽开朗，喜欢滑板、涂鸦和收养流浪猫，毫无偶像包袱。她能熟练驾驭多种乐器，用自己的音乐，打破人们对女孩的刻板印象。`,
|
||||
},
|
||||
];
|
||||
@ -1,124 +1,75 @@
|
||||
import type { Artist, ArtistTag } from "@/types/artist";
|
||||
import type { Artist } from "@/types/artist";
|
||||
import { ARTIST_SEEDS } from "./artist-bios";
|
||||
|
||||
const STAGE_NAMES: Array<[string, string, string]> = [
|
||||
["艺奈", "AURORA", "破晓极光"],
|
||||
["路米", "LUMI", "暖光治愈"],
|
||||
["星澪", "NEBULA", "星云吟唱"],
|
||||
["凯", "KAI", "海岸少年"],
|
||||
["回音", "ECHO", "声波女王"],
|
||||
["薇尔", "VEIL", "薄雾低语"],
|
||||
["艾莉雅", "ARIA", "咏叹之声"],
|
||||
["怜", "REN", "莲华少女"],
|
||||
["米拉", "MIRA", "镜面舞者"],
|
||||
["诺娃", "NOVA", "超新星"],
|
||||
["纪罗", "KIRO", "Rap 制造机"],
|
||||
["瑞", "ZUI", "醉月夜"],
|
||||
["阳", "SOL", "阳光少年"],
|
||||
["凛", "LIN", "学院偶像"],
|
||||
["律", "LYRA", "竖琴公主"],
|
||||
["昕", "DAWN", "晨曦少女"],
|
||||
["天", "SKY", "天空之翼"],
|
||||
["语", "ARIE", "诗与远方"],
|
||||
["翼", "WING", "飞翔之翼"],
|
||||
["铃", "CHIME", "风铃声"],
|
||||
["夜", "NYX", "暗夜女神"],
|
||||
["晴", "SUNNY", "晴空万里"],
|
||||
["月", "LUNA", "月光女神"],
|
||||
["岚", "STORM", "暴风之子"],
|
||||
["雷", "BOLT", "雷霆速度"],
|
||||
["焰", "FLARE", "火焰之心"],
|
||||
["雪", "FROST", "霜花少女"],
|
||||
["林", "LEAF", "森林精灵"],
|
||||
["渊", "ABYSS", "深渊之声"],
|
||||
["瑶", "JADE", "翡翠少女"],
|
||||
["晨", "AURIA", "金色晨光"],
|
||||
["岩", "ROCK", "硬核摇滚"],
|
||||
["翔", "SOAR", "翱翔天际"],
|
||||
["茉", "MOLLY", "茉莉芬芳"],
|
||||
["梓", "AZUR", "蓝调诗人"],
|
||||
];
|
||||
/**
|
||||
* 真实艺人数据装配层。
|
||||
* 所有人物字段（姓名 / 性别 / 年龄 / 身高 / 性格 / 技能 / 赛道 / 口头禅 /
|
||||
* 座右铭 / 长简介）来自《36 位虚拟艺人人物小传.docx》。
|
||||
* 立绘 / 三视图 / 氛围图 / solo 视频 来自 public/portraits/ 和 public/videos/artists/。
|
||||
*
|
||||
* 票数 / 排名是运行时计算（store 投票后会更新）。除此之外不再有任何虚构数据。
|
||||
*/
|
||||
|
||||
// 4 个新主标签均匀分布。每位艺人 1-2 个标签，便于筛选器命中。
|
||||
const TAG_POOL: ArtistTag[][] = [
|
||||
["vocal"],
|
||||
["dance"],
|
||||
["all-rounder"],
|
||||
["rap"],
|
||||
["vocal", "all-rounder"],
|
||||
["dance", "all-rounder"],
|
||||
["rap", "all-rounder"],
|
||||
["vocal"],
|
||||
["dance"],
|
||||
["all-rounder"],
|
||||
["rap"],
|
||||
["vocal", "dance"],
|
||||
];
|
||||
/** 没有 solo.mp4 的艺人编号（docx 标注"缺视频"） */
|
||||
const MISSING_VIDEO: ReadonlySet<string> = new Set(["003", "010", "017", "027"]);
|
||||
|
||||
const THEME_COLORS = [
|
||||
"#8b5cf6",
|
||||
"#ec4899",
|
||||
"#06b6d4",
|
||||
"#f59e0b",
|
||||
"#10b981",
|
||||
"#ef4444",
|
||||
"#a78bfa",
|
||||
"#f472b6",
|
||||
"#38bdf8",
|
||||
"#fbbf24",
|
||||
"#34d399",
|
||||
"#fb7185",
|
||||
];
|
||||
/** 缺氛围图3 的艺人编号（资料文件夹里实际只到氛围图2） */
|
||||
const MISSING_ATMOSPHERE_3: ReadonlySet<string> = new Set(["036"]);
|
||||
|
||||
/** 画廊 = 三张氛围图（1/2/3）。不包含三视图，因为长宽比与卡片不一致。 */
|
||||
function buildGallery(no: string): string[] {
|
||||
const items = [`/portraits/${no}.png`, `/portraits/${no}-2.png`];
|
||||
if (!MISSING_ATMOSPHERE_3.has(no)) {
|
||||
items.push(`/portraits/${no}-3.png`);
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
/** 生成确定性 35 位艺人 mock 数据 */
|
||||
function buildArtists(): Artist[] {
|
||||
return STAGE_NAMES.map(([name, enName, slogan], idx) => {
|
||||
const no = String(idx + 1).padStart(3, "0");
|
||||
const rank = idx + 1;
|
||||
// 票数采用反比例衰减（确定性 · 避免 SSR/CSR hydration 不一致）
|
||||
// 主曲线：125000/√rank · 用 idx 推导抖动量保持稳定分布
|
||||
const jitter = ((idx * 1103) % 2999) - 1499;
|
||||
const votes = Math.round(125000 / Math.sqrt(rank) + jitter);
|
||||
|
||||
return ARTIST_SEEDS.map((seed, idx) => {
|
||||
return {
|
||||
id: no,
|
||||
no,
|
||||
name,
|
||||
enName,
|
||||
slogan,
|
||||
bio: `来自虚拟星域的偶像候选人 ${enName}，从小热爱音乐与舞蹈。性格${
|
||||
rank % 2 === 0 ? "温柔" : "活泼"
|
||||
}，擅长${
|
||||
idx % 3 === 0 ? "抒情曲" : idx % 3 === 1 ? "舞台表演" : "Rap 创作"
|
||||
}。曾获得多项虚拟偶像新人奖项，代表作品深受粉丝喜爱。立志成为 Top12 出道阵容的一员，用音乐传递梦想与力量。`,
|
||||
portrait: "",
|
||||
id: seed.no,
|
||||
no: seed.no,
|
||||
name: seed.name,
|
||||
enName: seed.enName,
|
||||
age: seed.age,
|
||||
gender: seed.gender,
|
||||
bio: seed.bio,
|
||||
portrait: `/portraits/${seed.no}.png`,
|
||||
avatar: "",
|
||||
gallery: ["", "", "", "", ""],
|
||||
videoUrl: undefined,
|
||||
gallery: buildGallery(seed.no),
|
||||
videoUrl: MISSING_VIDEO.has(seed.no)
|
||||
? undefined
|
||||
: `/videos/artists/${seed.no}.mp4`,
|
||||
// 不设置 poster，由播放器运行时 seek 到 0.001s 渲染首帧作为封面
|
||||
videoPoster: "",
|
||||
tags: TAG_POOL[idx % TAG_POOL.length]!,
|
||||
birthday: `${String(((idx * 7) % 12) + 1).padStart(2, "0")}-${String(
|
||||
((idx * 13) % 28) + 1
|
||||
).padStart(2, "0")}`,
|
||||
height: 158 + (idx % 12),
|
||||
cv: idx < 12 ? `CV 配音 #${idx + 1}` : undefined,
|
||||
themeColor: THEME_COLORS[idx % THEME_COLORS.length]!,
|
||||
votes,
|
||||
rank,
|
||||
tags: seed.tags,
|
||||
height: seed.height,
|
||||
// 初始全部 0 票，等用户投票产生真实排名；rank 按 no 顺序兜底
|
||||
votes: 0,
|
||||
rank: idx + 1,
|
||||
motto: seed.motto,
|
||||
personality: seed.personality,
|
||||
catchphrase: seed.catchphrase,
|
||||
skills: seed.skills,
|
||||
track: seed.track,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export const ARTISTS: Artist[] = buildArtists();
|
||||
|
||||
export const TOP_12 = ARTISTS.slice(0, 12);
|
||||
export const CANDIDATES = ARTISTS.slice(12);
|
||||
/** 排序方式 · "votes" = 实时排名(票数倒序),"no" = 编号顺序 */
|
||||
export type SortKey = "votes" | "no";
|
||||
|
||||
/** 按当前排序方式获取艺人列表 */
|
||||
export type SortKey = "votes" | "no" | "recent";
|
||||
/** 票数相同时按编号升序兜底，保证排序稳定 */
|
||||
export function sortArtists(list: Artist[], key: SortKey = "votes"): Artist[] {
|
||||
const sorted = [...list];
|
||||
if (key === "votes") sorted.sort((a, b) => b.votes - a.votes);
|
||||
else if (key === "no") sorted.sort((a, b) => a.no.localeCompare(b.no));
|
||||
if (key === "votes") {
|
||||
sorted.sort((a, b) => b.votes - a.votes || a.no.localeCompare(b.no));
|
||||
} else {
|
||||
sorted.sort((a, b) => a.no.localeCompare(b.no));
|
||||
}
|
||||
return sorted;
|
||||
}
|
||||
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
import { ARTISTS } from "./mock-data";
|
||||
import type { Artist } from "@/types/artist";
|
||||
|
||||
export interface MockUser {
|
||||
id: string;
|
||||
nickname: string;
|
||||
/** 头像 URL（无则使用首字母占位） */
|
||||
avatar: string;
|
||||
signInStreak: number;
|
||||
/** 本周签到状态：每天 true/false（按周一开始的一周 7 天） */
|
||||
weeklySignIn: boolean[];
|
||||
/** 今日是否已签到 */
|
||||
todaySignedIn: boolean;
|
||||
/** 累计投票数 */
|
||||
totalVotes: number;
|
||||
/** 应援的艺人 ID 列表 */
|
||||
supportingIds: string[];
|
||||
/** 邀请好友数 */
|
||||
invitedCount: number;
|
||||
}
|
||||
|
||||
export interface FanSupport {
|
||||
artist: Artist;
|
||||
votedCount: number;
|
||||
}
|
||||
|
||||
export const MOCK_USER: MockUser = {
|
||||
id: "12345678",
|
||||
nickname: "粉丝昵称",
|
||||
avatar: "",
|
||||
signInStreak: 7,
|
||||
weeklySignIn: [true, true, true, true, true, true, false],
|
||||
todaySignedIn: false,
|
||||
totalVotes: 87,
|
||||
supportingIds: ["001", "005", "014"],
|
||||
invitedCount: 2,
|
||||
};
|
||||
|
||||
export function getFanSupports(): FanSupport[] {
|
||||
// 已应援票数采用确定性映射（避免 hydration 不一致）
|
||||
const VOTED_BY_ID: Record<string, number> = { "001": 42, "005": 28, "014": 17 };
|
||||
return MOCK_USER.supportingIds
|
||||
.map((id) => {
|
||||
const artist = ARTISTS.find((a) => a.id === id);
|
||||
if (!artist) return null;
|
||||
return {
|
||||
artist,
|
||||
votedCount: VOTED_BY_ID[id] ?? 10,
|
||||
};
|
||||
})
|
||||
.filter((x): x is FanSupport => x !== null);
|
||||
}
|
||||
@ -5,10 +5,18 @@ import type { Artist } from "@/types/artist";
|
||||
/** 每日基础投票额度（与后端 ActivityConfig.dailyQuota 对齐） */
|
||||
export const DAILY_VOTE_QUOTA = 10;
|
||||
|
||||
/** 派生类型：我支持的某位艺人 + 我为 ta 投出的票数 */
|
||||
export interface MySupport {
|
||||
artist: Artist;
|
||||
votedCount: number;
|
||||
}
|
||||
|
||||
interface VoteStore {
|
||||
/** 当前所有艺人（含动态票数 / 实时排名） */
|
||||
artists: Artist[];
|
||||
/** 累计已投票数 */
|
||||
/** 我为每个艺人投出的票数（artistId → count，仅 > 0 的进入"我的应援"列表） */
|
||||
myVotesByArtist: Record<string, number>;
|
||||
/** 累计已投票数（= sum(myVotesByArtist)） */
|
||||
myTotalVotes: number;
|
||||
/** 今日已用票数（跨日自动重置） */
|
||||
usedToday: number;
|
||||
@ -28,9 +36,10 @@ function todayKey(): string {
|
||||
return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
|
||||
}
|
||||
|
||||
/** 票数倒序 + 编号升序兜底,确保 0 票时也有稳定排名 */
|
||||
function rank(list: Artist[]): Artist[] {
|
||||
return [...list]
|
||||
.sort((a, b) => b.votes - a.votes)
|
||||
.sort((a, b) => b.votes - a.votes || a.no.localeCompare(b.no))
|
||||
.map((a, i) => ({ ...a, rank: i + 1 }));
|
||||
}
|
||||
|
||||
@ -38,6 +47,7 @@ const INITIAL = rank(ARTISTS);
|
||||
|
||||
export const useVoteStore = create<VoteStore>((set) => ({
|
||||
artists: INITIAL,
|
||||
myVotesByArtist: {},
|
||||
myTotalVotes: 0,
|
||||
usedToday: 0,
|
||||
quotaDate: todayKey(),
|
||||
@ -56,6 +66,10 @@ export const useVoteStore = create<VoteStore>((set) => ({
|
||||
);
|
||||
return {
|
||||
artists: rank(updated),
|
||||
myVotesByArtist: {
|
||||
...state.myVotesByArtist,
|
||||
[artistId]: (state.myVotesByArtist[artistId] ?? 0) + count,
|
||||
},
|
||||
myTotalVotes: state.myTotalVotes + count,
|
||||
usedToday: baseUsed + count,
|
||||
quotaDate: today,
|
||||
@ -66,6 +80,7 @@ export const useVoteStore = create<VoteStore>((set) => ({
|
||||
reset: () =>
|
||||
set({
|
||||
artists: INITIAL,
|
||||
myVotesByArtist: {},
|
||||
myTotalVotes: 0,
|
||||
usedToday: 0,
|
||||
quotaDate: todayKey(),
|
||||
@ -77,7 +92,37 @@ export function selectArtist(id: string) {
|
||||
return (s: VoteStore) => s.artists.find((a) => a.id === id);
|
||||
}
|
||||
|
||||
/** 选择器：当前剩余票数（基于今日已用） */
|
||||
/** 选择器：当前剩余票数（跨日自动重置） */
|
||||
export function selectRemaining(s: VoteStore): number {
|
||||
return Math.max(0, DAILY_VOTE_QUOTA - s.usedToday);
|
||||
// 必须按 quotaDate 判断是否还属于今日：跨过午夜后 usedToday 仍是昨日值，
|
||||
// 但 today 切换后基线应回到 0，余票回到满额。下次 vote() 才会真正落库重置。
|
||||
const today = todayKey();
|
||||
const baseUsed = s.quotaDate === today ? s.usedToday : 0;
|
||||
return Math.max(0, DAILY_VOTE_QUOTA - baseUsed);
|
||||
}
|
||||
|
||||
/**
|
||||
* 派生函数："我的应援"列表 —— 凡是我投过票（>0）的艺人都进入，
|
||||
* 按我投出的票数降序，artist 字段使用 store 最新排名。
|
||||
*
|
||||
* ⚠️ 不要直接 `useVoteStore(selectMySupports)`：它每次都返回新数组，
|
||||
* 会触发 React 19 的 "getSnapshot should be cached" 报错。
|
||||
* 正确用法：分别订阅 `s.myVotesByArtist` 和 `s.artists`，在组件里 useMemo 派生。
|
||||
*/
|
||||
export function selectMySupports(s: VoteStore): MySupport[] {
|
||||
const list: MySupport[] = [];
|
||||
for (const [id, votedCount] of Object.entries(s.myVotesByArtist)) {
|
||||
if (votedCount <= 0) continue;
|
||||
const artist = s.artists.find((a) => a.id === id);
|
||||
if (artist) list.push({ artist, votedCount });
|
||||
}
|
||||
list.sort((a, b) => b.votedCount - a.votedCount);
|
||||
return list;
|
||||
}
|
||||
|
||||
/** 选择器：我支持的艺人数（去重，仅计 > 0 票） */
|
||||
export function selectMySupportingCount(s: VoteStore): number {
|
||||
let n = 0;
|
||||
for (const v of Object.values(s.myVotesByArtist)) if (v > 0) n++;
|
||||
return n;
|
||||
}
|
||||
|
||||
@ -1,57 +1,63 @@
|
||||
export type ArtistTag =
|
||||
| "vocal"
|
||||
| "dance"
|
||||
| "rap"
|
||||
| "all-rounder"
|
||||
| "visual"
|
||||
| "leader";
|
||||
| "rock"
|
||||
| "pop"
|
||||
| "chinese"
|
||||
| "hiphop"
|
||||
| "folk"
|
||||
| "jazz";
|
||||
|
||||
export interface Artist {
|
||||
/** 唯一 ID（如 001 ~ 035） */
|
||||
/** 唯一 ID（如 001 ~ 036） */
|
||||
id: string;
|
||||
/** 编号字符串（如 "001"） */
|
||||
no: string;
|
||||
/** 中文名 */
|
||||
/** 中文名（来自小传） */
|
||||
name: string;
|
||||
/** 英文名 / 艺名 */
|
||||
/** 英文名 / 艺名（来自小传） */
|
||||
enName: string;
|
||||
/** Slogan 短宣传语 */
|
||||
slogan: string;
|
||||
/** 长简介 (200-500 字) */
|
||||
/** 年龄（来自小传） */
|
||||
age?: number;
|
||||
/** 性别（来自小传） */
|
||||
gender?: "M" | "F";
|
||||
/** 长简介 / 人物小传（来自小传） */
|
||||
bio: string;
|
||||
/** 立绘主图 URL */
|
||||
portrait: string;
|
||||
/** 圆形头像 URL */
|
||||
/** 圆形头像 URL（暂未使用） */
|
||||
avatar: string;
|
||||
/** 表演视频 URL (15s) */
|
||||
/** 表演视频 URL（来自 solo.mp4，缺失则 undefined） */
|
||||
videoUrl?: string;
|
||||
/** 视频封面图 */
|
||||
videoPoster?: string;
|
||||
/** 表演图片轮播 */
|
||||
/** 表演图片轮播（三视图 + 氛围图 2/3） */
|
||||
gallery: string[];
|
||||
/** 标签 */
|
||||
/** 实力标签（用于筛选） */
|
||||
tags: ArtistTag[];
|
||||
/** 生日 MM-DD */
|
||||
birthday: string;
|
||||
/** 身高 cm */
|
||||
/** 身高 cm（来自小传） */
|
||||
height: number;
|
||||
/** CV / 声优 */
|
||||
cv?: string;
|
||||
/** 应援色 hex */
|
||||
themeColor: string;
|
||||
/** 当前票数 */
|
||||
votes: number;
|
||||
/** 当前排名 (1-35) */
|
||||
/** 当前排名 (1-36) */
|
||||
rank: number;
|
||||
/** 座右铭（来自小传） */
|
||||
motto?: string;
|
||||
/** 性格描述（来自小传） */
|
||||
personality?: string;
|
||||
/** 口头禅（来自小传） */
|
||||
catchphrase?: string;
|
||||
/** 核心技能（来自小传） */
|
||||
skills?: string;
|
||||
/** 核心赛道（来自小传） */
|
||||
track?: string;
|
||||
}
|
||||
|
||||
export const TAG_LABEL: Record<ArtistTag, string> = {
|
||||
vocal: "声乐担当",
|
||||
dance: "舞蹈担当",
|
||||
rap: "rap担当",
|
||||
"all-rounder": "全能型",
|
||||
visual: "颜值担当",
|
||||
leader: "队长担当",
|
||||
rock: "摇滚",
|
||||
pop: "流行",
|
||||
chinese: "国风",
|
||||
hiphop: "嘻哈说唱",
|
||||
folk: "民谣治愈",
|
||||
jazz: "爵士",
|
||||
};
|
||||
|
||||
export type RankCategory = "gold" | "silver" | "bronze" | "top12" | "candidate";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user