diff --git a/.memory/worklog.json b/.memory/worklog.json index aa3608f..a4b2a7c 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 05:10 (~3)", - "ts": "2026-05-13T21:13:13Z", - "type": "session-heartbeat" - }, - { - "files_changed": 3, - "hash": "e46289f", - "message": "auto-save 2026-05-14 05:16 (~3)", - "ts": "2026-05-14T05:16:23+08:00", - "type": "commit" - }, { "files_changed": 3, "message": "Codex 会话活跃 · 最近命令：codex · 3 项未提交变更 · 最近提交：auto-save 2026-05-14 05:16 (~3)", @@ -3264,6 +3251,19 @@ "message": "auto-save 2026-05-15 22:54 (~1)", "hash": "6824315", "files_changed": 1 + }, + { + "ts": "2026-05-15T22:59:45+08:00", + "type": "commit", + "message": "auto-save 2026-05-15 22:59 (~1)", + "hash": "b81ed17", + "files_changed": 1 + }, + { + "ts": "2026-05-15T15:01:54Z", + "type": "session-heartbeat", + "message": "Codex 会话活跃 · 最近命令：codex · 1 项未提交变更 · 最近提交：auto-save 2026-05-15 22:59 (~1)", + "files_changed": 1 } ] } diff --git a/docs/source-analysis.html b/docs/source-analysis.html index 3d60e29..e04d073 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -592,10 +592,11 @@ web/next.config.mjsNext.js 构建配置：静态导出、图片不走优化、禁用开发环境左下角 Next Dev Indicator，避免本地登录页截图出现额外字母标识。 web/app/page.tsx产品工作台主状态：jobs、activeJobId、按 job 隔离的 selectedFrames/详情面板状态、clipboard、ReactFlow 节点和边；负责打开/找回画布工作面板。 - web/app/login/page.tsx生产登录页：访问账号/访问密钥表单、保持会话、错误/成功状态；当前只在原版 Digital Oasis 动态背景上叠加一个组合登录框，桌面端左侧是动态角色、右侧是无任何界面文字的图标化登录表单，移动端再回落为上下排列。 + web/app/login/page.tsx生产登录页：访问账号/访问密钥表单、保持会话、错误/成功状态；当前只在原版 Digital Oasis 动态背景上叠加一个组合登录框，桌面端左侧是动态角色、右侧是无任何界面文字的图标化登录表单，并在面板左上角展示官网 SKG 字标。 web/app/login/layout.tsx登录路由专属 layout：覆盖全站默认网页标题和描述为空，避免 /login 继承工作台 metadata 后在页面源码里继续出现登录界面文字以外的文案。 web/components/login/oasis-canvas.tsx登录页全屏动态视觉层：用 iframe 直接承载下载包 web/public/oasis-source/index.html 的原 WebGPU / Three.js 草场源码；父级登录页只覆盖自己的文案和表单，并在捕获阶段把全局鼠标坐标同时用原生事件和 postMessage 转发给 iframe，避免登录面板或输入框遮挡时草地失去鼠标响应。 web/public/oasis-source/index.html从下载包 remix-3d-website-the-digital-o 复制来的原始视觉源码。嵌入登录页时会隐藏 demo 站自己的导航、文字和设置面板，保留原多段滚动背景变化、WebGPU 草场、景深、风动和鼠标交互源码；末端阶段保留，只禁用原 footer 出现时把 canvas 上移的逻辑，避免底部露黑边。 + web/public/skg-logo-black.svg从官网 https://cn.skg.com/logo-black.svg 获取的 SKG 官方黑色 SVG 字标；登录页通过 CSS 反相成白色玻璃标识使用。 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 随机英文配音。 @@ -946,6 +947,18 @@ SubjectAsset {

变更记录

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

+
+
+

2026-05-15 · 登录页加入 SKG 字标并增强角色立体感

+ UI + Login +
+
+

问题：登录页缺少 SKG 品牌识别；动态角色仍偏扁平，和玻璃草场背景的空间感不够一致。

+

改动：新增 web/public/skg-logo-black.svg，来源为官网 cn.skg.com/logo-black.svg；web/app/login/page.tsx 在组合登录框内加入 SKG 标识；web/app/globals.css 为标识做反相白色玻璃处理，并给四个动态角色加高光、暗边、内阴影、接触投影和透视层次。

+

影响：web/app/login/page.tsx、web/app/globals.css、web/public/skg-logo-black.svg、docs/source-analysis.html。

+
+

2026-05-15 · 登录框固定在视口中心

diff --git a/web/app/globals.css b/web/app/globals.css index abc2a19..0ad7ebe 100644 --- a/web/app/globals.css +++ b/web/app/globals.css @@ -398,6 +398,18 @@ pointer-events: auto; background: rgba(10, 18, 10, 0.2); backdrop-filter: none; + overflow: visible; +} +.login-skg-mark { + position: absolute; + left: 24px; + top: 22px; + z-index: 5; + width: 126px; + height: auto; + opacity: 0.86; + filter: invert(1) brightness(1.25) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45)); + pointer-events: none; } .login-page--source .login-auth-icon { margin-bottom: 0; @@ -413,6 +425,7 @@ border: 0; background: transparent; box-shadow: none; + perspective: 900px; } .login-source-character-strip .login-character-stage::after, .login-source-character-strip .login-stage-grid, @@ -421,6 +434,7 @@ } .login-source-character-strip .login-characters-container { transform: translateX(-50%) scale(0.66); + transform-style: preserve-3d; } .login-source-form-pane { min-width: 0; @@ -784,21 +798,38 @@ bottom: 0; transform-origin: bottom center; overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.16); + border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), height 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; will-change: transform; - filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.34)); + filter: drop-shadow(0 34px 32px rgba(0, 0, 0, 0.42)); +} +.login-figure::before { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + background: + radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.34), transparent 24%), + linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 26%, transparent 62%, rgba(0, 0, 0, 0.3)), + linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%, rgba(0, 0, 0, 0.18)); + mix-blend-mode: screen; + pointer-events: none; } .login-figure::after { content: ""; position: absolute; inset: 0; + z-index: 1; background: - linear-gradient(105deg, rgba(255, 255, 255, 0.2), transparent 30%, rgba(0, 0, 0, 0.15)), - linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%); + linear-gradient(105deg, rgba(255, 255, 255, 0.2), transparent 30%, rgba(0, 0, 0, 0.26)), + radial-gradient(ellipse at 50% 106%, rgba(0, 0, 0, 0.28), transparent 54%); + box-shadow: + inset 12px 0 22px rgba(255, 255, 255, 0.09), + inset -18px 0 28px rgba(0, 0, 0, 0.22), + inset 0 -28px 36px rgba(0, 0, 0, 0.18); pointer-events: none; } .login-figure__rim { @@ -850,7 +881,11 @@ z-index: 1; background: linear-gradient(165deg, #9b7bff 0%, #6c3ff5 46%, #3e1eb8 100%); border-radius: 22px 22px 8px 8px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26); + box-shadow: + inset 18px 0 26px rgba(255, 255, 255, 0.12), + inset -22px 0 32px rgba(31, 14, 114, 0.42), + inset 0 -30px 38px rgba(26, 12, 88, 0.32), + 0 24px 44px rgba(45, 22, 140, 0.26); } .login-figure--black { left: 240px; @@ -860,6 +895,11 @@ background: linear-gradient(165deg, #34343a 0%, #202126 48%, #111217 100%); border-radius: 18px 18px 6px 6px; border-color: rgba(170, 160, 255, 0.18); + box-shadow: + inset 14px 0 22px rgba(255, 255, 255, 0.08), + inset -18px 0 28px rgba(0, 0, 0, 0.45), + inset 0 -26px 34px rgba(0, 0, 0, 0.34), + 0 22px 38px rgba(0, 0, 0, 0.36); } .login-figure--orange { left: 0; @@ -868,6 +908,11 @@ z-index: 3; background: linear-gradient(160deg, #ffb27f 0%, #ff8f61 56%, #dc6f48 100%); border-radius: 120px 120px 0 0; + box-shadow: + inset 18px 0 24px rgba(255, 255, 255, 0.16), + inset -20px 0 28px rgba(153, 66, 41, 0.32), + inset 0 -22px 34px rgba(149, 55, 37, 0.24), + 0 22px 36px rgba(113, 42, 30, 0.28); } .login-figure--yellow { left: 310px; @@ -876,6 +921,11 @@ z-index: 4; background: linear-gradient(160deg, #fff17a 0%, #e8d754 58%, #bfa73a 100%); border-radius: 70px 70px 0 0; + box-shadow: + inset 14px 0 22px rgba(255, 255, 255, 0.2), + inset -18px 0 24px rgba(113, 94, 20, 0.28), + inset 0 -24px 32px rgba(117, 96, 17, 0.22), + 0 22px 34px rgba(84, 69, 16, 0.22); } .login-figure--purple .login-figure__panel { left: 22px; @@ -1162,6 +1212,11 @@ justify-self: center; padding: 16px 18px 20px; } + .login-skg-mark { + left: 18px; + top: 16px; + width: 98px; + } .login-source-character-strip { height: 172px; margin-bottom: 12px; diff --git a/web/app/login/page.tsx b/web/app/login/page.tsx index 0cf3b6f..d4be1ad 100644 --- a/web/app/login/page.tsx +++ b/web/app/login/page.tsx @@ -82,6 +82,7 @@ export default function LoginPage() {
+ diff --git a/web/public/skg-logo-black.svg b/web/public/skg-logo-black.svg new file mode 100644 index 0000000..ea381c6 --- /dev/null +++ b/web/public/skg-logo-black.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + +