kurihada/no-whatever
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 提取 UserAvatar、Input、Card 三个可复用 UI 组件

Browse Source 
- UserAvatar: 统一头像渲染（5 种尺寸），新增 resolveAvatar 工具函数，替换 SwipeDeck 和 RoomManageModal 中的重复逻辑
- Input: 统一表单输入样式（4 种尺寸 + default/purple 变体），替换 AuthModal、ProfilePage、BlindboxPage 共 12 处
- Card: 统一卡片容器样式 + 可选淡入动画和延迟，替换 ProfilePage 中 7 处重复的 motion.div
This commit is contained in:
kurihada
2026-02-26 19:43:07 +08:00
parent 9641acbcbd
commit 0c5676493e
9 changed files with 182 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/blindbox/page.tsx
+17 -8
View File
@@ -15,6 +15,7 @@ import {
import { getCachedProfile, isRegistered } from "@/lib/userId";
import AuthModal from "@/components/AuthModal";
import Button from "@/components/Button";
import Input from "@/components/Input";
import { BlindboxListSkeleton } from "@/components/Skeleton";
import type { UserProfile } from "@/types";
@@ -244,7 +245,7 @@ export default function BlindboxLobbyPage() {
{/* Inline create form */}
<div className="mt-7 w-full max-w-xs">
<div className="flex gap-2">
<input
<Input
type="text"
placeholder="我们的周末"
value={createName}
@@ -254,7 +255,9 @@ export default function BlindboxLobbyPage() {
}}
onKeyDown={(e) => { if (e.key === "Enter") handleCreate(); }}
maxLength={30}
className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
size="xl"
variant="purple"
className="flex-1"
/>
<Button
onClick={handleCreate}
@@ -275,7 +278,7 @@ export default function BlindboxLobbyPage() {
</div>
<div className="mt-3 flex gap-2">
<input
<Input
type="text"
placeholder="6 位房间号"
value={joinCode}
@@ -285,7 +288,9 @@ export default function BlindboxLobbyPage() {
}}
onKeyDown={(e) => { if (e.key === "Enter") handleJoin(); }}
maxLength={6}
className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
size="xl"
variant="purple"
className="flex-1 text-center font-mono tracking-[0.15em]"
/>
<Button
onClick={handleJoin}
@@ -321,7 +326,7 @@ export default function BlindboxLobbyPage() {
>
{/* Create row */}
<div className="flex gap-2">
<input
<Input
type="text"
placeholder="新房间名称"
value={createName}
@@ -331,7 +336,9 @@ export default function BlindboxLobbyPage() {
}}
onKeyDown={(e) => { if (e.key === "Enter") handleCreate(); }}
maxLength={30}
className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
size="lg"
variant="purple"
className="flex-1"
/>
<Button
onClick={handleCreate}
@@ -345,7 +352,7 @@ export default function BlindboxLobbyPage() {
{/* Join row */}
<div className="mt-2 flex gap-2">
<input
<Input
type="text"
placeholder="输入 6 位房间号加入"
value={joinCode}
@@ -355,7 +362,9 @@ export default function BlindboxLobbyPage() {
}}
onKeyDown={(e) => { if (e.key === "Enter") handleJoin(); }}
maxLength={6}
className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:font-sans placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-purple-600"
size="lg"
variant="purple"
className="flex-1 text-center font-mono tracking-[0.15em] placeholder:font-sans placeholder:tracking-normal"
/>
<Button
onClick={handleJoin}
src/app/profile/page.tsx
+27 -48
View File
@@ -24,6 +24,8 @@ import {
Heart,
} from "lucide-react";
import EmptyState from "@/components/EmptyState";
import Card from "@/components/Card";
import Input from "@/components/Input";
import { useToast } from "@/hooks/useToast";
import RestaurantImage from "@/components/RestaurantImage";
import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
@@ -261,18 +263,18 @@ export default function ProfilePage() {
</nav>
<div className="mx-auto max-w-sm px-5">
<ProfileCardSkeleton />
<div className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border">
<Card className="mt-4">
<div className="flex flex-col gap-2">
<RecordItemSkeleton />
<RecordItemSkeleton />
</div>
</div>
<div className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border">
</Card>
<Card className="mt-4">
<div className="flex flex-col gap-2">
<RecordItemSkeleton />
<RecordItemSkeleton />
</div>
</div>
</Card>
</div>
</div>
);
@@ -295,11 +297,7 @@ export default function ProfilePage() {
<div className="mx-auto max-w-sm px-5">
{/* Profile card */}
<motion.div
className="rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
>
<Card animated>
<div className="flex items-center gap-4">
<button
onClick={() => setEditingAvatar(!editingAvatar)}
@@ -313,7 +311,7 @@ export default function ProfilePage() {
<div className="flex-1">
{editingUsername ? (
<div className="flex items-center gap-2">
<input
<Input
type="text"
value={newUsername}
onChange={(e) => {
@@ -322,7 +320,8 @@ export default function ProfilePage() {
}}
maxLength={16}
autoFocus
className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-foreground outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
size="sm"
className="flex-1"
/>
<button
onClick={handleSaveUsername}
@@ -387,15 +386,10 @@ export default function ProfilePage() {
</motion.div>
)}
</AnimatePresence>
</motion.div>
</Card>
{/* Change password */}
<motion.div
className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.05 }}
>
<Card animated className="mt-4" delay={0.05}>
<button
onClick={() => { setEditingPassword(!editingPassword); setPasswordMsg(""); }}
className="flex w-full items-center gap-2"
@@ -417,11 +411,11 @@ export default function ProfilePage() {
<div>
<p className="text-xs text-muted">当前密码</p>
<div className="relative mt-1">
<input
<Input
type={showPassword ? "text" : "password"}
value={currentPassword}
onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }}
className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-heading outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
className="pr-9"
/>
<button
type="button"
@@ -434,22 +428,22 @@ export default function ProfilePage() {
</div>
<div>
<p className="text-xs text-muted">新密码</p>
<input
<Input
type={showPassword ? "text" : "password"}
value={newPassword}
onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
placeholder="至少 6 个字符"
className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
className="mt-1"
/>
</div>
<div>
<p className="text-xs text-muted">确认新密码</p>
<input
<Input
type={showPassword ? "text" : "password"}
value={confirmPassword}
onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
placeholder="再次输入新密码"
className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
className="mt-1"
/>
</div>
@@ -470,22 +464,17 @@ export default function ProfilePage() {
</motion.div>
)}
</AnimatePresence>
</motion.div>
</Card>
{/* Email binding */}
<motion.div
className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.1 }}
>
<Card animated className="mt-4" delay={0.1}>
<div className="flex items-center gap-2">
<Mail size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-secondary">绑定邮箱</h3>
<span className="text-[10px] text-dim">（可选）</span>
</div>
<div className="mt-3 flex gap-2">
<input
<Input
type="email"
placeholder="your@email.com"
value={email}
@@ -493,7 +482,7 @@ export default function ProfilePage() {
setEmail(e.target.value);
setEmailMsg("");
}}
className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
className="flex-1"
/>
<button
onClick={handleSaveEmail}
@@ -508,15 +497,10 @@ export default function ProfilePage() {
{emailMsg}
</p>
)}
</motion.div>
</Card>
{/* Decision History */}
<motion.div
className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.15 }}
>
<Card animated className="mt-4" delay={0.15}>
<button
onClick={() => setShowHistory((v) => !v)}
className="flex w-full items-center justify-between"
@@ -591,15 +575,10 @@ export default function ProfilePage() {
</motion.div>
)}
</AnimatePresence>
</motion.div>
</Card>
{/* Favorites */}
<motion.div
className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.2 }}
>
<Card animated className="mt-4" delay={0.2}>
<button
onClick={() => setShowFavorites((v) => !v)}
className="flex w-full items-center justify-between"
@@ -688,7 +667,7 @@ export default function ProfilePage() {
</motion.div>
)}
</AnimatePresence>
</motion.div>
</Card>
{/* Logout */}
<motion.div
src/components/AuthModal.tsx
+10 -6
View File
@@ -8,6 +8,7 @@ import { setCachedProfile } from "@/lib/userId";
import type { UserProfile } from "@/types";
import Modal from "@/components/Modal";
import Button from "@/components/Button";
import Input from "@/components/Input";
type Tab = "login" | "register";
@@ -147,7 +148,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
<div className="mt-5">
<p className="text-xs font-medium text-muted">用户名</p>
<input
<Input
type="text"
value={username}
onChange={(e) => {
@@ -156,14 +157,15 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
}}
placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
maxLength={16}
className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
size="xl"
className="mt-2"
/>
</div>
<div className="mt-4">
<p className="text-xs font-medium text-muted">密码</p>
<div className="relative mt-2">
<input
<Input
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => {
@@ -171,7 +173,8 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
setError("");
}}
placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
size="xl"
className="pr-10"
/>
<button
type="button"
@@ -186,7 +189,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
{tab === "register" && (
<div className="mt-4">
<p className="text-xs font-medium text-muted">确认密码</p>
<input
<Input
type={showPassword ? "text" : "password"}
value={confirmPassword}
onChange={(e) => {
@@ -194,7 +197,8 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
setError("");
}}
placeholder="再次输入密码"
className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
size="xl"
className="mt-2"
/>
</div>
)}
src/components/Card.tsx
+37
View File
@@ -0,0 +1,37 @@
import { motion } from "framer-motion";
import type { ReactNode } from "react";
interface CardProps {
children: ReactNode;
className?: string;
animated?: boolean;
delay?: number;
}
const fadeUp = {
initial: { y: 10, opacity: 0 },
animate: { y: 0, opacity: 1 },
} as const;
export default function Card({
children,
className = "",
animated = false,
delay,
}: CardProps) {
const cls = `rounded-2xl bg-surface p-4 ring-1 ring-border ${className}`;
if (animated) {
return (
<motion.div
className={cls}
{...fadeUp}
transition={delay ? { delay } : undefined}
>
{children}
</motion.div>
);
}
return <div className={cls}>{children}</div>;
}
src/components/Input.tsx
+31
View File
@@ -0,0 +1,31 @@
import { type ComponentPropsWithoutRef, forwardRef } from "react";
const sizeStyles = {
sm: "h-8 rounded-lg px-2",
md: "h-9 rounded-lg px-3",
lg: "h-10 rounded-xl px-3",
xl: "h-11 rounded-xl px-4",
} as const;
const variantStyles = {
default: "bg-elevated text-heading focus:ring-accent/50",
purple: "bg-surface text-foreground focus:ring-purple-600",
} as const;
interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
size?: keyof typeof sizeStyles;
variant?: keyof typeof variantStyles;
}
const Input = forwardRef<HTMLInputElement, InputProps>(
({ size = "md", variant = "default", className = "", ...rest }, ref) => (
<input
ref={ref}
className={`w-full border-none text-sm outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 ${sizeStyles[size]} ${variantStyles[variant]} ${className}`}
{...rest}
/>
),
);
Input.displayName = "Input";
export default Input;
src/components/RoomManageModal.tsx
+3 -10
View File
@@ -11,7 +11,7 @@ import {
Loader2,
} from "lucide-react";
import { UserProfile } from "@/types";
import { getAvatar, getAvatarBg } from "@/lib/avatars";
import UserAvatar from "@/components/UserAvatar";
import Modal from "@/components/Modal";
import { useToast } from "@/hooks/useToast";
@@ -129,10 +129,7 @@ export default function RoomManageModal({
</h3>
<div className="mt-2 flex flex-col gap-1.5">
{users.map((uid) => {
const profile = userProfiles[uid];
const emoji = profile?.avatar ?? getAvatar(uid).emoji;
const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(uid).bg;
const displayName = profile?.username ?? uid.slice(0, 8);
const displayName = userProfiles[uid]?.username ?? uid.slice(0, 8);
const isCreator = uid === userId;
const swiped = swipeCounts[uid] ?? 0;
const finished = swiped >= totalCards;
@@ -142,11 +139,7 @@ export default function RoomManageModal({
key={uid}
className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
>
<span
className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
>
{emoji}
</span>
<UserAvatar userId={uid} profile={userProfiles[uid]} />
<div className="flex min-w-0 flex-1 flex-col">
<div className="flex items-center gap-1.5">
{isCreator && (
src/components/SwipeDeck.tsx
+12 -29
View File
@@ -8,7 +8,7 @@ import MatchResult from "./MatchResult";
import SwipeGuide from "./SwipeGuide";
import { Restaurant, SwipeDirection, MatchType, RunnerUp, UserProfile, SceneType } from "@/types";
import { Heart, Undo2, Check } from "lucide-react";
import { getAvatar, getAvatarBg } from "@/lib/avatars";
import UserAvatar from "@/components/UserAvatar";
function UserProgressBar({
userId,
@@ -27,17 +27,11 @@ function UserProgressBar({
}) {
const others = Object.entries(swipeCounts).filter(([id]) => id !== userId);
const myProfile = userProfiles[userId];
const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
return (
<div className="flex items-center gap-x-3">
<div className="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1">
<span className="flex items-center gap-1.5 text-[11px] text-accent">
<span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
{myAvatar}
</span>
<UserAvatar userId={userId} profile={userProfiles[userId]} size="xs" />
你
<span className="rounded bg-accent/10 px-1 py-px tabular-nums font-medium">
{localIndex}/{total}
@@ -45,18 +39,13 @@ function UserProgressBar({
</span>
{others.map(([id, count]) => {
const finished = count >= total;
const profile = userProfiles[id];
const emoji = profile?.avatar ?? getAvatar(id).emoji;
const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(id).bg;
const label = profile?.username ?? "";
const label = userProfiles[id]?.username ?? "";
return (
<span
key={id}
className={`flex items-center gap-1.5 text-[11px] ${finished ? "text-emerald-400" : "text-muted"}`}
>
<span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
{emoji}
</span>
<UserAvatar userId={id} profile={userProfiles[id]} size="xs" />
{label && <span className="max-w-12 truncate">{label}</span>}
<span className={`rounded px-1 py-px tabular-nums font-medium ${finished ? "bg-emerald-500/10" : "bg-elevated"}`}>
{count}/{total}
@@ -95,17 +84,11 @@ function WaitingProgress({
const others = entries.filter(([id]) => id !== userId);
const finishedCount = others.filter(([, c]) => c >= total).length;
const myProfile = userProfiles[userId];
const myEmoji = myProfile?.avatar ?? getAvatar(userId).emoji;
const myBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
return (
<div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-surface px-4 py-3 ring-1 ring-border">
<div className="flex items-center justify-between">
<span className="flex items-center gap-1.5 text-xs font-medium text-accent">
<span className={`inline-flex h-5 w-5 items-center justify-center rounded-full ${myBg} text-sm leading-none`}>
{myEmoji}
</span>
<UserAvatar userId={userId} profile={userProfiles[userId]} size="sm" />
你 {total}/{total}
</span>
<Check size={14} className="text-emerald-400" />
@@ -114,17 +97,17 @@ function WaitingProgress({
{others.map(([id, count]) => {
const finished = count >= total;
const pct = Math.min((count / total) * 100, 100);
const profile = userProfiles[id];
const emoji = profile?.avatar ?? getAvatar(id).emoji;
const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(id).bg;
const label = profile?.username ?? "";
const label = userProfiles[id]?.username ?? "";
return (
<div key={id} className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-accent" : "text-muted"}`}>
<span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-500/20" : bg}`}>
{emoji}
</span>
<UserAvatar
userId={id}
profile={userProfiles[id]}
size="sm"
bg={finished ? "bg-emerald-500/20" : undefined}
/>
{label && <span className="max-w-12 truncate">{label}</span>}
{count}/{total}
</span>
src/components/UserAvatar.tsx
+34
View File
@@ -0,0 +1,34 @@
import { resolveAvatar } from "@/lib/avatars";
const sizeStyles = {
xs: "h-4 w-4 text-[10px]",
sm: "h-5 w-5 text-sm",
md: "h-8 w-8 text-base",
lg: "h-11 w-11 text-xl",
xl: "h-14 w-14 text-2xl",
} as const;
interface UserAvatarProps {
userId: string;
profile?: { avatar: string } | null;
size?: keyof typeof sizeStyles;
bg?: string;
className?: string;
}
export default function UserAvatar({
userId,
profile,
size = "md",
bg,
className = "",
}: UserAvatarProps) {
const avatar = resolveAvatar(userId, profile);
return (
<span
className={`inline-flex items-center justify-center rounded-full leading-none ${sizeStyles[size]} ${bg ?? avatar.bg} ${className}`}
>
{avatar.emoji}
</span>
);
}
src/lib/avatars.ts
+11
View File
@@ -25,3 +25,14 @@ export function getAvatarBg(emoji: string): string {
const found = AVATARS.find((a) => a.emoji === emoji);
return found?.bg ?? "bg-zinc-100";
}
export function resolveAvatar(
userId: string,
profile?: { avatar: string } | null,
): { emoji: string; bg: string } {
if (profile) {
return { emoji: profile.avatar, bg: getAvatarBg(profile.avatar) };
}
const fallback = getAvatar(userId);
return { emoji: fallback.emoji, bg: fallback.bg };
}