diff --git a/.memory/worklog.json b/.memory/worklog.json index 118e964..732a975 100644 --- a/.memory/worklog.json +++ b/.memory/worklog.json @@ -1,18 +1,5 @@ { "entries": [ - { - "files_changed": 2, - "message": "Claude 会话活跃 · 最近命令：claude · 2 项未提交变更 · 最近提交：auto-save 2026-05-14 01:17 (+6, ~3)", - "ts": "2026-05-13T17:23:10Z", - "type": "session-heartbeat" - }, - { - "files_changed": 5, - "hash": "9fc2442", - "message": "auto-save 2026-05-14 01:22 (+3, ~2)", - "ts": "2026-05-14T01:23:21+08:00", - "type": "commit" - }, { "files_changed": 8, "hash": "d054788", @@ -3251,6 +3238,19 @@ "message": "auto-save 2026-05-15 16:38 (~1)", "hash": "2ad7884", "files_changed": 1 + }, + { + "ts": "2026-05-15T16:44:19+08:00", + "type": "commit", + "message": "auto-save 2026-05-15 16:44 (~2)", + "hash": "6fdcb47", + "files_changed": 2 + }, + { + "ts": "2026-05-15T08:44:48Z", + "type": "session-heartbeat", + "message": "Codex 会话活跃 · 最近命令：codex · 1 项未提交变更 · 最近提交：auto-save 2026-05-15 16:44 (~2)", + "files_changed": 1 } ] } diff --git a/docs/source-analysis.html b/docs/source-analysis.html index d139252..cc5dee4 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -591,7 +591,7 @@ - + @@ -942,6 +942,16 @@ SubjectAsset {

变更记录

这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。

+
+
+

2026-05-15 · 登录页吸收 skg.com 官网视觉元素

+ UI +
+
+

改动：参考 skg.com 官网的浅灰产品橱窗、黑白强对比、胶囊按钮、SKG 标识、米白/香槟金健康产品光感，重构生产登录页左侧展示区；角色舞台从纯暗色网格改为官网感浅灰产品展示台，底部模块文案改为 Shop by Need / Recovery / Self-Care 语义。

+

影响：web/app/login/page.tsx、web/app/globals.css、docs/source-analysis.html。

+
+

2026-05-15 · 登录页角色视觉样式升级

diff --git a/web/app/globals.css b/web/app/globals.css index ef2c9f7..8772317 100644 --- a/web/app/globals.css +++ b/web/app/globals.css @@ -129,10 +129,11 @@ ============================================================ */ .login-page { background: - linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), - linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), - linear-gradient(135deg, #090a12 0%, #111426 48%, #07080d 100%); - background-size: 44px 44px, 44px 44px, auto; + radial-gradient(circle at 15% 18%, rgba(64, 93, 230, 0.2), transparent 30%), + radial-gradient(circle at 77% 26%, rgba(245, 135, 32, 0.14), transparent 30%), + linear-gradient(115deg, #f6f7f9 0 42%, #16171c 42% 100%); + background-size: auto, auto, auto; + font-family: Roboto, "Geist", "Geist Fallback", sans-serif; } .login-page::before { content: ""; @@ -140,21 +141,26 @@ inset: 0; pointer-events: none; background: - linear-gradient(115deg, transparent 0 18%, rgba(108, 63, 245, 0.16) 18% 28%, transparent 28% 52%, rgba(255, 155, 107, 0.12) 52% 60%, transparent 60%), - linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%, rgba(0, 0, 0, 0.36)); + linear-gradient(90deg, rgba(40, 40, 40, 0.035) 1px, transparent 1px), + linear-gradient(180deg, rgba(40, 40, 40, 0.035) 1px, transparent 1px), + linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 34%, rgba(0, 0, 0, 0.22)); + background-size: 48px 48px, 48px 48px, auto; } .login-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; - background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px); + background-image: + linear-gradient(114deg, transparent 0 16%, rgba(64, 93, 230, 0.1) 16% 25%, transparent 25% 53%, rgba(245, 135, 32, 0.09) 53% 61%, transparent 61%), + linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px); background-size: 100% 6px; - opacity: 0.45; + opacity: 0.72; mix-blend-mode: screen; } .login-hero { isolation: isolate; + color: #282828; } .login-hero::before { content: ""; @@ -162,22 +168,91 @@ inset: 0; z-index: 0; background: - linear-gradient(145deg, rgba(108, 63, 245, 0.25), transparent 38%), - linear-gradient(20deg, transparent 38%, rgba(45, 45, 45, 0.8) 39% 52%, transparent 53%), - linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 45%); + radial-gradient(circle at 75% 18%, rgba(255, 255, 255, 0.95), transparent 26%), + linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(238, 240, 244, 0.72)), + linear-gradient(20deg, transparent 40%, rgba(40, 40, 40, 0.06) 40% 54%, transparent 54%); +} +.login-hero::after { + content: ""; + position: absolute; + left: -18%; + top: 10%; + z-index: 0; + width: 88%; + height: 68%; + border-radius: 999px; + background: linear-gradient(90deg, rgba(255, 255, 255, 0.54), rgba(240, 224, 190, 0.26), transparent); + filter: blur(18px); + transform: rotate(-11deg); + pointer-events: none; +} +.login-brand-mark { + display: inline-flex; + align-items: baseline; + gap: 8px; + color: #282828; + letter-spacing: 0; +} +.login-brand-mark__logo { + font-size: 26px; + font-weight: 700; + line-height: 1; +} +.login-brand-mark__sub { + font-size: 13px; + color: rgba(40, 40, 40, 0.54); +} +.login-store-pill { + display: inline-flex; + align-items: center; + gap: 8px; + min-height: 36px; + border-radius: 999px; + background: #282828; + padding: 0 14px; + color: #fff; + font-size: 13px; + box-shadow: 0 10px 24px rgba(40, 40, 40, 0.18); +} +.login-product-ribbon { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: -12px; +} +.login-product-ribbon span { + border: 1px solid rgba(40, 40, 40, 0.08); + border-radius: 999px; + background: rgba(255, 255, 255, 0.74); + padding: 8px 12px; + color: rgba(40, 40, 40, 0.66); + font-size: 12px; + box-shadow: 0 10px 28px rgba(40, 40, 40, 0.06); +} +.login-skg-tile { + border: 1px solid rgba(40, 40, 40, 0.08); + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(244, 245, 247, 0.75)), + #f5f5f5; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.8), + 0 16px 34px rgba(40, 40, 40, 0.08); } .login-character-stage { position: relative; min-height: 320px; overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid rgba(40, 40, 40, 0.08); border-radius: 8px; background: - linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px), - linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px), - rgba(6, 7, 13, 0.68); - background-size: 34px 34px, 34px 34px, auto; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px rgba(0, 0, 0, 0.35); + radial-gradient(circle at 82% 28%, rgba(245, 135, 32, 0.14), transparent 24%), + linear-gradient(90deg, rgba(40, 40, 40, 0.04) 1px, transparent 1px), + linear-gradient(180deg, rgba(40, 40, 40, 0.04) 1px, transparent 1px), + linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(235, 237, 241, 0.78)); + background-size: auto, 34px 34px, 34px 34px, auto; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.8), + 0 30px 70px rgba(40, 40, 40, 0.13); } .login-character-stage::after { content: ""; @@ -186,13 +261,15 @@ right: 0; bottom: 0; height: 40%; - background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28)); + background: + linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.56)), + linear-gradient(90deg, transparent 40%, rgba(40, 40, 40, 0.08) 40% 58%, transparent 58%); pointer-events: none; } .login-stage-grid { position: absolute; inset: 26px; - border: 1px dashed rgba(255, 255, 255, 0.1); + border: 1px dashed rgba(40, 40, 40, 0.11); border-radius: 8px; } .login-characters-container { diff --git a/web/app/login/page.tsx b/web/app/login/page.tsx index 25bb9b5..527f61c 100644 --- a/web/app/login/page.tsx +++ b/web/app/login/page.tsx @@ -100,11 +100,11 @@ export default function LoginPage() {
- -
-
+ +
+

SKG Marketing Studio

-

营销内容工作台

+

营销内容工作台

web/app/page.tsx产品工作台主状态：jobs、activeJobId、按 job 隔离的 selectedFrames/详情面板状态、clipboard、ReactFlow 节点和边；负责打开/找回画布工作面板。
web/app/login/page.tsx生产登录页：账号密码表单、保持登录、错误/成功状态；把角色状态和眼神位移传给独立动画组件。
web/app/login/page.tsx生产登录页：账号密码表单、保持登录、错误/成功状态；左侧展示区参考 skg.com 官网的浅灰产品橱窗、胶囊按钮和 SKG 标识；把角色状态和眼神位移传给独立动画组件。
web/components/login/animated-login-characters.tsx登录页四个几何角色组件：按配置渲染紫色高矩形、黑色矩形、橙色半圆、黄色圆角柱，以及眼睛和嘴型。
web/components/nodes/index.tsxDAG 节点定义：Input、VisualLab、Audio、Compose，以及画布工作面板 KeyframePanel / VideoFramePanel；旧 Keyframe/Storyboard/VideoGen 组件保留但不再挂主画布。
web/components/audio-strip.tsx底部吸附音频条：可拖拽调整高度；播放原音频时移动指针，逐个高亮英文/中文字幕节点和对应波形，并在右侧固定显示按原音频时长生成的 SKG 英文产品口播和 MiniMax 随机英文配音。