105 lines
4.8 KiB
TypeScript
105 lines
4.8 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useApp } from "@/lib/app-context";
|
||
|
||
/**
|
||
* 侧边栏项目信息卡（Phase 1）。
|
||
*
|
||
* 展示当前项目名、绑定的默认风格缩略图（占位），以及快捷入口：
|
||
* 风格库 / 角色库 / 项目设置。数据来自 placeholder-store 的占位数据。
|
||
*/
|
||
export function ProjectCard() {
|
||
const { activeProject, stylePacks } = useApp();
|
||
|
||
if (!activeProject) return null;
|
||
|
||
const defaultStyle = activeProject.defaultStyleId
|
||
? stylePacks.find((s) => s.id === activeProject.defaultStyleId)
|
||
: stylePacks[0];
|
||
|
||
return (
|
||
<div className="mx-3 mb-2 rounded-xl placeholder-card p-3">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="typo-micro" style={{ textTransform: "none" }}>
|
||
当前项目
|
||
</span>
|
||
<span className="phase-chip">P1</span>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2.5 mb-2.5">
|
||
<div className="w-10 h-10 rounded-lg flex-shrink-0 flex items-center justify-center
|
||
bg-gradient-to-br from-[var(--accent)]/15 to-[var(--accent-secondary)]/15
|
||
border border-[var(--border-glow)]">
|
||
{defaultStyle ? (
|
||
<span className="text-[10px] text-[var(--accent)] font-semibold tracking-tight px-1 text-center">
|
||
{defaultStyle.name.slice(0, 2)}
|
||
</span>
|
||
) : (
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.8">
|
||
<path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-7l-2-2H5a2 2 0 00-2 2z" />
|
||
</svg>
|
||
)}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="text-sm text-[var(--text-primary)] font-medium truncate">
|
||
{activeProject.name}
|
||
</div>
|
||
<div className="text-[10px] text-[var(--text-secondary)] truncate">
|
||
{activeProject.type}
|
||
{defaultStyle && <> · {defaultStyle.name}</>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-3 gap-1.5">
|
||
<Link
|
||
href="/styles"
|
||
className="flex flex-col items-center justify-center gap-1 py-1.5 rounded-md
|
||
bg-[var(--bg-tertiary)]/60 text-[10px] text-[var(--text-secondary)]
|
||
hover:text-[var(--accent)] hover:bg-[var(--accent)]/8
|
||
cursor-pointer transition-colors"
|
||
title="风格库"
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<circle cx="13.5" cy="6.5" r=".5" />
|
||
<circle cx="17.5" cy="10.5" r=".5" />
|
||
<circle cx="8.5" cy="7.5" r=".5" />
|
||
<circle cx="6.5" cy="12.5" r=".5" />
|
||
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.55 0 1-.45 1-1v-3.5c0-.55.45-1 1-1h2c2.76 0 5-2.24 5-5 0-5.5-4.5-9.5-10-9.5z" />
|
||
</svg>
|
||
风格
|
||
</Link>
|
||
<Link
|
||
href="/characters"
|
||
className="flex flex-col items-center justify-center gap-1 py-1.5 rounded-md
|
||
bg-[var(--bg-tertiary)]/60 text-[10px] text-[var(--text-secondary)]
|
||
hover:text-[var(--accent)] hover:bg-[var(--accent)]/8
|
||
cursor-pointer transition-colors"
|
||
title="角色库"
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||
<circle cx="12" cy="7" r="4" />
|
||
</svg>
|
||
角色
|
||
</Link>
|
||
<Link
|
||
href="/settings"
|
||
className="flex flex-col items-center justify-center gap-1 py-1.5 rounded-md
|
||
bg-[var(--bg-tertiary)]/60 text-[10px] text-[var(--text-secondary)]
|
||
hover:text-[var(--accent)] hover:bg-[var(--accent)]/8
|
||
cursor-pointer transition-colors"
|
||
title="项目设置"
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<circle cx="12" cy="12" r="3" />
|
||
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
|
||
</svg>
|
||
设置
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|