GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: align UI palette with Taonier visuals

Browse Source
This commit is contained in:
kdletters
2026-05-21 13:54:35 +08:00
parent 0eed942ce5
commit da3badb802
24 changed files with 400 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/match3d-result/Match3DResultView.tsx
View File

@@ -1003,7 +1003,7 @@ function Match3DBatchGenerationProgress({
</div>
) : null}
{generationState.error ? (
<div className="mt-2 text-sm font-semibold text-rose-600">
<div className="mt-2 text-sm font-semibold text-[var(--platform-button-danger-text)]">
{generationState.error}
</div>
) : null}
@@ -1478,14 +1478,14 @@ function Match3DWorkInfoTab({
{tags.map((tag) => (
<span
key={tag}
className="inline-flex items-center gap-1.5 rounded-full border border-emerald-300/35 bg-emerald-100/68 px-3 py-1.5 text-xs font-semibold text-emerald-700"
className="inline-flex items-center gap-1.5 rounded-full border border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] px-3 py-1.5 text-xs font-semibold text-[var(--platform-warm-text)]"
>
{tag}
<button
type="button"
disabled={isBusy}
onClick={() => updateTags(tags.filter((item) => item !== tag))}
className="rounded-full text-emerald-800/70 transition hover:text-emerald-950 disabled:opacity-45"
className="rounded-full text-[var(--platform-warm-text)] opacity-70 transition hover:text-[var(--platform-text-strong)] hover:opacity-100 disabled:opacity-45"
aria-label={`删除标签 ${tag}`}
title="删除标签"
>
@@ -1691,7 +1691,7 @@ function Match3DCoverImageEditor({
<span
aria-hidden="true"
className={`relative h-5 w-9 rounded-full transition ${
aiRedraw ? 'bg-[#ff4056]' : 'bg-zinc-300'
aiRedraw ? 'bg-[var(--platform-accent)]' : 'bg-zinc-300'
}`}
>
<span
@@ -1705,7 +1705,7 @@ function Match3DCoverImageEditor({
type="button"
disabled={isGenerating}
onClick={onUploadedImageRemove}
className="absolute left-3 top-3 z-10 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/80 bg-white/94 text-[var(--platform-text-strong)] shadow-sm backdrop-blur transition hover:text-[#ff4056] disabled:cursor-not-allowed disabled:opacity-55"
className="absolute left-3 top-3 z-10 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/80 bg-white/94 text-[var(--platform-text-strong)] shadow-sm backdrop-blur transition hover:text-[var(--platform-accent)] disabled:cursor-not-allowed disabled:opacity-55"
aria-label="移除封面图"
title="移除封面图"
>
@@ -1715,7 +1715,7 @@ function Match3DCoverImageEditor({
) : (
<label
htmlFor="match3d-cover-upload-input"
className={`absolute bottom-9 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap text-center text-sm font-black text-[var(--platform-text-strong)] drop-shadow-[0_1px_0_rgba(255,255,255,0.82)] transition hover:text-[#ff4056] ${isGenerating ? 'cursor-not-allowed opacity-55' : 'cursor-pointer'}`}
className={`absolute bottom-9 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap text-center text-sm font-black text-[var(--platform-text-strong)] drop-shadow-[0_1px_0_rgba(255,255,255,0.82)] transition hover:text-[var(--platform-accent)] ${isGenerating ? 'cursor-not-allowed opacity-55' : 'cursor-pointer'}`}
>
上传图片/填写封面描述
</label>
@@ -1764,7 +1764,7 @@ function Match3DCoverImageEditor({
{referenceImages.map((reference) => (
<div
key={reference.id}
className="relative overflow-hidden rounded-[1rem] border border-emerald-300 bg-white/74"
className="relative overflow-hidden rounded-[1rem] border border-[var(--platform-warm-border)] bg-white/74"
>
<div className="aspect-square overflow-hidden">
<ResolvedAssetImage
@@ -1781,7 +1781,7 @@ function Match3DCoverImageEditor({
type="button"
disabled={isGenerating}
onClick={() => onReferenceRemove(reference.id)}
className="absolute bottom-1.5 right-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-white/92 text-[var(--platform-text-strong)] shadow-sm transition hover:text-[#ff4056] disabled:opacity-55"
className="absolute bottom-1.5 right-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-white/92 text-[var(--platform-text-strong)] shadow-sm transition hover:text-[var(--platform-accent)] disabled:opacity-55"
aria-label={`移除参考图 ${reference.label}`}
title="移除参考图"
>
@@ -1803,8 +1803,8 @@ function Match3DCoverImageEditor({
referenceImages.some(
(reference) => reference.imageSrc === asset.imageSrc,
)
? 'border-emerald-300 ring-2 ring-emerald-100'
: 'border-[var(--platform-subpanel-border)] hover:border-emerald-200'
? 'border-[var(--platform-warm-border)] ring-2 ring-[var(--platform-warm-bg)]'
: 'border-[var(--platform-subpanel-border)] hover:border-[var(--platform-surface-hover-border)]'
}`}
aria-label={`引用${asset.label}`}
>
@@ -2058,9 +2058,9 @@ function Match3DConfigTab({
<section className="platform-subpanel rounded-[1.35rem] p-4 sm:p-5">
<div className="relative px-1 pb-1 pt-2">
<div className="relative mx-[1.35rem] h-10">
<div className="absolute left-0 right-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-white/75 shadow-[inset_0_0_0_1px_rgba(244,114,182,0.16)]" />
<div className="absolute left-0 right-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-white/75 shadow-[inset_0_0_0_1px_rgba(204,117,76,0.16)]" />
<div
className="absolute left-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-[linear-gradient(90deg,#ff8aac_0%,#ff5f7e_54%,#ff9b88_100%)] transition-[width] duration-200"
className="absolute left-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-[linear-gradient(90deg,#df7f40_0%,#c7653d_54%,#e2ab86_100%)] transition-[width] duration-200"
style={{ width: `${trackProgress * 100}%` }}
/>
{MATCH3D_DIFFICULTY_OPTIONS.map((option, index) => {
@@ -2069,10 +2069,10 @@ function Match3DConfigTab({
<div
key={option.id}
aria-hidden="true"
className={`absolute top-1/2 flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200 ${
className={`absolute top-1/2 flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-warm-border)] ${
selected
? 'border-[#ff5f7e] bg-white shadow-[0_8px_18px_rgba(244,63,94,0.2)]'
: 'border-rose-100 bg-white/90 hover:border-rose-200'
? 'border-[var(--platform-surface-hover-border)] bg-white shadow-[0_8px_18px_rgba(112,57,30,0.16)]'
: 'border-[var(--platform-subpanel-border)] bg-white/90 hover:border-[var(--platform-surface-hover-border)]'
} ${isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
style={{
left: `${(index / (MATCH3D_DIFFICULTY_OPTIONS.length - 1)) * 100}%`,
@@ -2080,7 +2080,7 @@ function Match3DConfigTab({
>
<span
className={`h-3.5 w-3.5 rounded-full ${
selected ? 'bg-[var(--platform-accent)]' : 'bg-rose-100'
selected ? 'bg-[var(--platform-accent)]' : 'bg-[var(--platform-warm-bg)]'
}`}
/>
</div>
@@ -2108,9 +2108,9 @@ function Match3DConfigTab({
type="button"
disabled={isBusy}
onClick={() => applyDifficultyOption(option)}
className={`rounded-[0.9rem] px-1.5 py-2 text-center transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200 ${
className={`rounded-[0.9rem] px-1.5 py-2 text-center transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-warm-border)] ${
selected
? 'bg-[#fff1f5] text-[var(--platform-text-strong)] shadow-[inset_0_0_0_1px_rgba(244,63,94,0.18)]'
? 'bg-[var(--platform-warm-bg)] text-[var(--platform-text-strong)] shadow-[inset_0_0_0_1px_rgba(204,117,76,0.18)]'
: 'text-[var(--platform-text-base)] hover:bg-white/58'
} ${isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
aria-pressed={selected}
@@ -2124,7 +2124,7 @@ function Match3DConfigTab({
})}
</div>
</div>
<div className="mt-3 rounded-[1rem] border border-rose-100/80 bg-white/62 px-3 py-3">
<div className="mt-3 rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/62 px-3 py-3">
<div className="flex items-center justify-between gap-3">
<div>
<div className="text-lg font-black text-[var(--platform-text-strong)]">
@@ -2135,7 +2135,7 @@ function Match3DConfigTab({
种
</div>
</div>
<div className="rounded-full bg-[var(--platform-accent)] px-3 py-1 text-xs font-black text-white shadow-[0_8px_18px_rgba(244,63,94,0.16)]">
<div className="rounded-full bg-[var(--platform-accent)] px-3 py-1 text-xs font-black text-white shadow-[0_8px_18px_rgba(112,57,30,0.16)]">
难度 {selectedOption.difficulty}
</div>
</div>
@@ -2189,15 +2189,15 @@ function Match3DItemAssetListCard({
<div
className={`group min-w-0 rounded-[1.15rem] border p-2 text-left transition-colors ${
active
? 'border-rose-300/70 bg-rose-50/80'
: 'border-[var(--platform-subpanel-border)] bg-white/76 hover:border-rose-200 hover:bg-white'
? 'border-[var(--platform-surface-hover-border)] bg-[var(--platform-warm-bg)]'
: 'border-[var(--platform-subpanel-border)] bg-white/76 hover:border-[var(--platform-surface-hover-border)] hover:bg-white'
}`}
>
<div className="grid min-h-full grid-rows-[minmax(0,1fr)_auto] gap-2">
<button
type="button"
onClick={onClick}
className="grid min-h-0 gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200"
className="grid min-h-0 gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-warm-border)]"
aria-label={`打开${asset.name}物品素材`}
>
<div className="grid aspect-square min-h-0 place-items-center overflow-hidden rounded-[0.95rem] border border-[var(--platform-subpanel-border)] bg-white/82">
@@ -2220,7 +2220,7 @@ function Match3DItemAssetListCard({
<button
type="button"
onClick={onDelete}
className="platform-icon-button h-8 w-8 shrink-0 text-rose-500"
className="platform-icon-button h-8 w-8 shrink-0 text-[var(--platform-button-danger-text)]"
aria-label="删除物品素材"
title="删除"
>
@@ -2307,9 +2307,9 @@ function Match3DItemAssetDetail({
aria-pressed={isActive}
className={`grid aspect-square place-items-center overflow-hidden rounded-[0.65rem] border bg-white/82 transition ${
isActive
? 'border-rose-300 ring-2 ring-rose-200'
? 'border-[var(--platform-surface-hover-border)] ring-2 ring-[var(--platform-warm-border)]'
: 'border-[var(--platform-subpanel-border)]'
} ${!hasSource || busy ? 'cursor-not-allowed opacity-58' : 'hover:border-rose-200'}`}
} ${!hasSource || busy ? 'cursor-not-allowed opacity-58' : 'hover:border-[var(--platform-surface-hover-border)]'}`}
>
{source ? (
<ResolvedAssetImage