From 193708a836b594d395a1cedbcf256338ad47f00c Mon Sep 17 00:00:00 2001 From: kang Date: Tue, 19 May 2026 15:55:18 +0800 Subject: [PATCH] style: apply oasis glass theme to workspace --- src/app/globals.css | 163 +++++++++++++++++++++++++-------- src/app/page.tsx | 26 ++++-- src/components/PackPanel.tsx | 68 +++++++------- src/components/PromptPanel.tsx | 12 +-- src/components/ResultGrid.tsx | 6 +- src/components/Sidebar.tsx | 16 ++-- tailwind.config.ts | 24 ++--- 7 files changed, 204 insertions(+), 111 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 96cbceb..a01cb9d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,7 +3,7 @@ @tailwind utilities; html, body { - background: #0A0A0F; + background: #030603; color: #FFFFFF; font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01"; -webkit-font-smoothing: antialiased; @@ -12,88 +12,155 @@ html, body { body { font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif; - background-color: #0A0A0F; - background-image: - radial-gradient(circle at 18% -10%, rgba(139, 92, 246, 0.22), transparent 55%), - radial-gradient(circle at 88% 8%, rgba(59, 130, 246, 0.18), transparent 50%), - radial-gradient(circle at 50% 110%, rgba(217, 70, 239, 0.12), transparent 60%); + background-color: #030603; + background-image: linear-gradient(180deg, rgba(13, 24, 12, 0.9), rgba(2, 4, 2, 1)); background-attachment: fixed; min-height: 100vh; } -::selection { background: rgba(139, 92, 246, 0.35); color: #fff; } +::selection { background: rgba(230, 245, 120, 0.28); color: #fff; } + +.app-oasis .login-oasis-canvas { + z-index: 0; + opacity: 0.74; + filter: saturate(0.92) contrast(1.04); +} + +.app-oasis-shade { + position: fixed; + inset: 0; + z-index: 1; + pointer-events: none; + background: + linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(3, 9, 3, 0.46) 42%, rgba(0, 0, 0, 0.72)), + linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.12) 36%, rgba(0, 0, 0, 0.82)), + linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px), + linear-gradient(180deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px); + background-size: auto, auto, 64px 64px, 64px 64px; +} + +.app-grass-floor { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + height: 34vh; + pointer-events: none; + opacity: 0.38; + background: + linear-gradient(180deg, transparent, rgba(5, 12, 4, 0.78) 60%, rgba(0, 0, 0, 0.94)), + repeating-linear-gradient(103deg, transparent 0 13px, rgba(188, 218, 112, 0.13) 13px 14px, transparent 14px 28px), + repeating-linear-gradient(78deg, transparent 0 18px, rgba(84, 122, 67, 0.18) 18px 20px, transparent 20px 34px); + mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8) 38%, #000 100%); +} /* ===== Buttons ===== */ .btn { - @apply inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl text-sm font-medium transition-all; + @apply inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-[8px] text-sm font-medium transition-all; } .btn-primary { - @apply text-white bg-gradient-to-r from-violet-500 via-indigo-500 to-blue-500 hover:brightness-110 active:scale-[0.98]; + @apply active:scale-[0.98]; + background: linear-gradient(135deg, rgba(230, 245, 120, 0.96), rgba(214, 179, 106, 0.94)); + color: #081006; box-shadow: 0 6px 24px -8px rgba(99, 102, 241, 0.6), inset 0 1px 0 rgba(255,255,255,0.18); } +.btn-primary:hover { + filter: brightness(1.06); +} .btn-ghost { - @apply text-white/80 bg-white/[0.05] hover:bg-white/[0.09] border border-white/[0.08] active:scale-[0.98]; + @apply text-white/80 active:scale-[0.98]; + border: 1px solid rgba(140, 180, 120, 0.14); + background: rgba(10, 18, 10, 0.34); } .btn-outline { - @apply text-white/80 bg-white/[0.03] hover:bg-white/[0.07] border border-white/[0.1] hover:border-white/[0.18] active:scale-[0.98]; + @apply text-white/80 active:scale-[0.98]; + border: 1px solid rgba(140, 180, 120, 0.16); + background: rgba(10, 18, 10, 0.28); } .btn-glass { - @apply text-white bg-white/[0.06] hover:bg-white/[0.10] border border-white/[0.12] backdrop-blur-xl active:scale-[0.98]; + @apply text-white backdrop-blur-xl active:scale-[0.98]; + border: 1px solid rgba(140, 180, 120, 0.18); + background: rgba(10, 18, 10, 0.42); } /* ===== Cards (glass) ===== */ .card { - @apply relative rounded-3xl bg-white/[0.035] border border-white/[0.08] backdrop-blur-xl; + @apply relative rounded-[8px] backdrop-blur-xl; + border: 1px solid rgba(140, 180, 120, 0.14); + background: + linear-gradient(180deg, rgba(17, 28, 13, 0.62), rgba(5, 10, 5, 0.54)), + rgba(10, 18, 10, 0.42); box-shadow: - 0 1px 0 0 rgba(255,255,255,0.06) inset, - 0 18px 60px -24px rgba(0,0,0,0.6); + 0 1px 0 0 rgba(255,255,255,0.08) inset, + 0 22px 70px -30px rgba(0,0,0,0.82), + 0 0 42px -34px rgba(230, 245, 120, 0.64); } .card-2 { - @apply rounded-2xl bg-white/[0.03] border border-white/[0.07] backdrop-blur-xl; + @apply rounded-[8px] backdrop-blur-xl; + border: 1px solid rgba(140, 180, 120, 0.12); + background: rgba(8, 16, 8, 0.42); } .card-hover { - @apply transition-all hover:border-white/[0.14]; + @apply transition-all; +} +.card-hover:hover, +.card:hover { + border-color: rgba(140, 180, 120, 0.28); } /* ===== Chips ===== */ .chip { - @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium border; + @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] text-[11px] font-medium border; } .chip-mock { @apply bg-amber-500/10 text-amber-300 border-amber-400/30; } .chip-live { - @apply bg-emerald-500/10 text-emerald-300 border-emerald-400/30; + @apply border-emerald-400/30; + background: rgba(142, 190, 104, 0.13); + color: #dff5a8; } .chip-neutral { - @apply bg-white/[0.05] text-white/70 border-white/[0.12]; + color: rgba(255, 255, 255, 0.7); + border-color: rgba(140, 180, 120, 0.14); + background: rgba(10, 18, 10, 0.34); } .chip-violet { - @apply bg-violet-500/15 text-violet-200 border-violet-400/30; + border-color: rgba(230, 245, 120, 0.28); + background: rgba(230, 245, 120, 0.12); + color: #e6f578; } /* ===== Segmented ===== */ .seg { - @apply inline-flex p-1 bg-white/[0.04] border border-white/[0.07] rounded-xl gap-1; + @apply inline-flex p-1 rounded-[8px] gap-1; + border: 1px solid rgba(140, 180, 120, 0.13); + background: rgba(10, 18, 10, 0.36); + backdrop-filter: blur(16px); } .seg-item { - @apply px-3 py-1.5 rounded-lg text-xs font-medium text-white/55 transition-all cursor-pointer; + @apply px-3 py-1.5 rounded-[7px] text-xs font-medium text-white/55 transition-all cursor-pointer; } .seg-item-active { - @apply text-white; - background: linear-gradient(135deg, rgba(139,92,246,0.35), rgba(59,130,246,0.25)); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 16px -8px rgba(99,102,241,0.6); + color: #081006; + background: linear-gradient(135deg, rgba(230,245,120,0.92), rgba(214,179,106,0.86)); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 16px -8px rgba(230,245,120,0.6); } /* ===== Tiles ===== */ .tile { - @apply relative aspect-square overflow-hidden rounded-2xl bg-white/[0.04] ring-1 ring-white/[0.08] transition-all cursor-pointer; + @apply relative aspect-square overflow-hidden rounded-[8px] transition-all cursor-pointer; + background: rgba(10, 18, 10, 0.44); + box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 18px 50px -28px rgba(0,0,0,0.8); + --tw-ring-color: rgba(140, 180, 120, 0.14); + border: 1px solid rgba(140, 180, 120, 0.1); } .tile-selected { position: relative; - background: linear-gradient(#0A0A0F, #0A0A0F) padding-box, linear-gradient(135deg, #8B5CF6, #3B82F6) border-box; + background: linear-gradient(#071006, #071006) padding-box, linear-gradient(135deg, #e6f578, #d6b36a) border-box; border: 2px solid transparent; - box-shadow: 0 0 0 1px rgba(139,92,246,0.25), 0 8px 32px -8px rgba(139,92,246,0.55); + box-shadow: 0 0 0 1px rgba(230,245,120,0.22), 0 8px 32px -8px rgba(230,245,120,0.46); } .tile-rejected { @apply opacity-30 grayscale; @@ -107,8 +174,8 @@ body { box-shadow: 0 6px 18px -4px rgba(0,0,0,0.6); } .tile-badge-selected { - background: linear-gradient(135deg, #8B5CF6, #3B82F6); - color: #fff; + background: linear-gradient(135deg, #e6f578, #d6b36a); + color: #081006; } .tile-badge-rejected { @apply bg-rose-500 text-white; @@ -119,24 +186,44 @@ input, textarea { font-family: inherit; } .field { - @apply w-full rounded-xl px-3.5 py-3 text-sm text-white placeholder:text-white/30 outline-none resize-none transition-colors; - background: rgba(255,255,255,0.04); - border: 1px solid rgba(255,255,255,0.08); + @apply w-full rounded-[8px] px-3.5 py-3 text-sm text-white placeholder:text-white/30 outline-none resize-none transition-colors; + background: rgba(10, 18, 10, 0.42); + border: 1px solid rgba(140, 180, 120, 0.14); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .field:focus { - border-color: rgba(139, 92, 246, 0.55); - box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12); + border-color: rgba(230, 245, 120, 0.5); + box-shadow: 0 0 0 4px rgba(230, 245, 120, 0.12); } /* ===== KBD ===== */ .kbd { - @apply inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded text-[10px] font-medium text-white/70 ring-1 ring-white/10 bg-white/[0.06]; + @apply inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-[6px] text-[10px] font-medium text-white/70; + border: 1px solid rgba(140, 180, 120, 0.16); + background: rgba(10, 18, 10, 0.46); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } /* ===== Section header ===== */ .section-eyebrow { - @apply inline-block text-[10px] font-semibold uppercase tracking-[0.18em] text-violet-300/80; + @apply inline-block text-[10px] font-semibold uppercase tracking-[0.18em]; + color: rgba(230, 245, 120, 0.82); + text-shadow: 0 0 22px rgba(230, 245, 120, 0.16); +} + +.glass-sidebar { + border-right: 1px solid rgba(140, 180, 120, 0.14); + background: + linear-gradient(180deg, rgba(8, 16, 7, 0.72), rgba(2, 5, 2, 0.62)), + rgba(10, 18, 10, 0.42); + box-shadow: + inset -1px 0 0 rgba(255,255,255,0.04), + 16px 0 70px -44px rgba(0,0,0,0.95); + backdrop-filter: blur(18px); +} + +.app-oasis main { + background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(10,18,10,0.08)); } /* ===== Login (cloned from SKG source) ===== */ diff --git a/src/app/page.tsx b/src/app/page.tsx index e11d55c..08b14cf 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,6 +5,7 @@ import PromptPanel from '@/components/PromptPanel'; import ResultGrid from '@/components/ResultGrid'; import Sidebar from '@/components/Sidebar'; import PackPanel from '@/components/PackPanel'; +import { OasisCanvas } from '@/components/login/OasisCanvas'; import type { GenImage, GenSession, @@ -277,7 +278,11 @@ export default function Home() { } return ( -
+
+ +
+
+
setSidebarOpen(v => !v)} @@ -287,20 +292,20 @@ export default function Home() { onNew={() => setCurrent(null)} />
-
+
-
- +
+
-

+

AI Toy Patent - 把一句想法变成专利 / 生产 / 宣发素材包 + 把一句想法变成专利 / 生产 / 宣发素材包

-

批量出意向 · 快筛 · 锁定角色 · 一键四包 · Seedance 视频

+

批量出意向 · 快筛 · 锁定角色 · 一键四包 · Seedance 视频

@@ -310,7 +315,7 @@ export default function Home() { href={`/api/gallery/${encodeURIComponent(current.id)}`} target="_blank" rel="noreferrer" - className="chip chip-neutral hover:border-violet-300/40 hover:text-white transition-colors" + className="chip chip-neutral hover:border-[#e6f578]/40 hover:text-white transition-colors" > 图库 @@ -318,7 +323,7 @@ export default function Home() { href={`/api/audit/${encodeURIComponent(current.id)}`} target="_blank" rel="noreferrer" - className="chip chip-neutral hover:border-violet-300/40 hover:text-white transition-colors" + className="chip chip-neutral hover:border-[#e6f578]/40 hover:text-white transition-colors" > 记录 @@ -326,7 +331,7 @@ export default function Home() { )} @@ -374,6 +379,7 @@ export default function Home() {
+
); } diff --git a/src/components/PackPanel.tsx b/src/components/PackPanel.tsx index 0539233..3efeec6 100644 --- a/src/components/PackPanel.tsx +++ b/src/components/PackPanel.tsx @@ -12,10 +12,10 @@ const PACK_DESCRIPTIONS: Record = { }; const PACK_ACCENT: Record = { - patent: { bar: 'from-violet-400 to-indigo-400', chip: 'bg-violet-500/15 text-violet-200 border-violet-400/30', icon: 'P' }, - accessories: { bar: 'from-sky-400 to-cyan-400', chip: 'bg-sky-500/15 text-sky-200 border-sky-400/30', icon: 'A' }, - production: { bar: 'from-amber-400 to-orange-400', chip: 'bg-amber-500/15 text-amber-200 border-amber-400/30', icon: 'F' }, - marketing: { bar: 'from-emerald-400 to-teal-400', chip: 'bg-emerald-500/15 text-emerald-200 border-emerald-400/30', icon: 'M' }, + patent: { bar: 'from-[#e6f578] to-[#d6b36a]', chip: 'bg-[#e6f578]/15 text-[#e6f578] border-[#e6f578]/30', icon: 'P' }, + accessories: { bar: 'from-[#8cb478] to-[#547a43]', chip: 'bg-[#8cb478]/15 text-[#cfe7a7] border-[#8cb478]/30', icon: 'A' }, + production: { bar: 'from-[#d6b36a] to-[#b6813c]', chip: 'bg-[#d6b36a]/15 text-[#f2d38c] border-[#d6b36a]/30', icon: 'F' }, + marketing: { bar: 'from-[#b6df72] to-[#4f9a56]', chip: 'bg-[#b6df72]/15 text-[#dff5a8] border-[#b6df72]/30', icon: 'M' }, }; const ASPECT_PX: Record = { @@ -59,13 +59,13 @@ function AssetRow({ template, asset, accent, onRegenerate }: { } } return ( -
+
{/* thumbnail */} -
+
{ready ? ( <> {template.title} -
+
@@ -75,7 +75,7 @@ function AssetRow({ template, asset, accent, onRegenerate }: {
)} {template.required && !ready && ( - + )}
@@ -84,14 +84,14 @@ function AssetRow({ template, asset, accent, onRegenerate }: {
{template.title} {template.required && !ready && ( - 必备 + 必备 )} {ready && ✓}

{template.description}

)}
{remixFiles.map((file, i) => ( -
+
{file.name} )}
-
+
上传图必须为你拥有或有合法授权使用的素材。请勿上传迪士尼、三丽鸥、泡泡玛特等已注册 IP 图像；用于专利申请前需自行确认不与他人在先权利冲突。
diff --git a/src/components/ResultGrid.tsx b/src/components/ResultGrid.tsx index f587bc7..1857d89 100644 --- a/src/components/ResultGrid.tsx +++ b/src/components/ResultGrid.tsx @@ -45,7 +45,7 @@ export default function ResultGrid({ images, onAction }: ResultGridProps) {
已选 - {selectedCount} + {selectedCount} / {images.length}
@@ -57,7 +57,7 @@ export default function ResultGrid({ images, onAction }: ResultGridProps) { className={`tile group ${img.status === 'selected' ? 'tile-selected' : ''} ${img.status === 'rejected' ? 'tile-rejected' : ''}`} > {`gen -
+
{i + 1}
@@ -72,7 +72,7 @@ export default function ResultGrid({ images, onAction }: ResultGridProps) {
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 582095e..8e3b0db 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -19,7 +19,7 @@ export default function Sidebar({ }) { if (!open) { return ( -