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}