auto-save 2026-05-15 16:49 (~4)

.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
     }
   ]
 }

docs/source-analysis.html

@@ -591,7 +591,7 @@
             <table>
               <tbody>
                 <tr><td><code>web/app/page.tsx</code></td><td>产品工作台主状态：jobs、activeJobId、按 job 隔离的 selectedFrames/详情面板状态、clipboard、ReactFlow 节点和边；负责打开/找回画布工作面板。</td></tr>
-                <tr><td><code>web/app/login/page.tsx</code></td><td>生产登录页：账号密码表单、保持登录、错误/成功状态；把角色状态和眼神位移传给独立动画组件。</td></tr>
+                <tr><td><code>web/app/login/page.tsx</code></td><td>生产登录页：账号密码表单、保持登录、错误/成功状态；左侧展示区参考 skg.com 官网的浅灰产品橱窗、胶囊按钮和 SKG 标识；把角色状态和眼神位移传给独立动画组件。</td></tr>
                 <tr><td><code>web/components/login/animated-login-characters.tsx</code></td><td>登录页四个几何角色组件：按配置渲染紫色高矩形、黑色矩形、橙色半圆、黄色圆角柱，以及眼睛和嘴型。</td></tr>
                 <tr><td><code>web/components/nodes/index.tsx</code></td><td>DAG 节点定义：Input、VisualLab、Audio、Compose，以及画布工作面板 KeyframePanel / VideoFramePanel；旧 Keyframe/Storyboard/VideoGen 组件保留但不再挂主画布。</td></tr>
                 <tr><td><code>web/components/audio-strip.tsx</code></td><td>底部吸附音频条：可拖拽调整高度；播放原音频时移动指针，逐个高亮英文/中文字幕节点和对应波形，并在右侧固定显示按原音频时长生成的 SKG 英文产品口播和 MiniMax 随机英文配音。</td></tr>
@@ -942,6 +942,16 @@ SubjectAsset {
         <h2>变更记录</h2>
         <p>这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。</p>
         <div class="changelog">
+          <article class="change">
+            <header>
+              <h3>2026-05-15 · 登录页吸收 skg.com 官网视觉元素</h3>
+              <span class="tag rose">UI</span>
+            </header>
+            <div class="body">
+              <p><strong>改动：</strong>参考 skg.com 官网的浅灰产品橱窗、黑白强对比、胶囊按钮、SKG 标识、米白/香槟金健康产品光感，重构生产登录页左侧展示区；角色舞台从纯暗色网格改为官网感浅灰产品展示台，底部模块文案改为 Shop by Need / Recovery / Self-Care 语义。</p>
+              <p><strong>影响：</strong><code>web/app/login/page.tsx</code>、<code>web/app/globals.css</code>、<code>docs/source-analysis.html</code>。</p>
+            </div>
+          </article>
           <article class="change">
             <header>
               <h3>2026-05-15 · 登录页角色视觉样式升级</h3>

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 {

web/app/login/page.tsx

@@ -100,11 +100,11 @@ export default function LoginPage() {
                   </div>
                   <div className="mt-5 flex items-center gap-3">
                     <div className="grid h-11 w-11 place-items-center rounded-[8px] bg-[#282828] text-white">
-                    <Sparkles className="h-5 w-5" />
-                  </div>
-                  <div>
+                      <Sparkles className="h-5 w-5" />
+                    </div>
+                    <div>
                       <p className="text-sm text-[#666]">SKG Marketing Studio</p>
-                      <h1 className="text-3xl font-semibold leading-tight text-[#111] sm:text-4xl">营销内容工作台</h1>
+                      <h1 className="text-2xl font-semibold leading-tight text-[#111] sm:text-4xl">营销内容工作台</h1>
                     </div>
                   </div>
                 </div>