diff --git a/.memory/worklog.json b/.memory/worklog.json index fc41e34..cddd1ca 100644 --- a/.memory/worklog.json +++ b/.memory/worklog.json @@ -1,12 +1,5 @@ { "entries": [ - { - "files_changed": 7, - "hash": "042efdc", - "message": "auto-save 2026-05-14 00:42 (+4, ~3)", - "ts": "2026-05-14T00:43:18+08:00", - "type": "commit" - }, { "files_changed": 7, "hash": "e8a653e", @@ -3251,6 +3244,13 @@ "type": "session-heartbeat", "message": "Codex 会话活跃 · 最近命令：codex · 1 项未提交变更 · 最近提交：auto-save 2026-05-15 15:59 (~4)", "files_changed": 1 + }, + { + "ts": "2026-05-15T16:05:39+08:00", + "type": "commit", + "message": "auto-save 2026-05-15 16:05 (~1)", + "hash": "ac36c4e", + "files_changed": 1 } ] } diff --git a/docs/source-analysis.html b/docs/source-analysis.html index c398e52..cb87a0a 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -591,7 +591,8 @@ - + + @@ -941,6 +942,17 @@ SubjectAsset {

变更记录

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

+
+
+

2026-05-15 · 登录页角色组件重构

+ UI + Refactor +
+
+

改动：新增 web/components/login/animated-login-characters.tsx，把登录页四个角色从 web/app/login/page.tsx 抽成独立组件；角色用配置数组渲染，眼睛、嘴型和黄色 SVG 嘴不再散落在页面主体。动效状态从全页 data-mood 改为挂在角色舞台 login-character-stage 上，样式作用域更清晰。

+

影响：web/app/login/page.tsx、web/components/login/animated-login-characters.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 5fbb6ea..6b58f52 100644 --- a/web/app/globals.css +++ b/web/app/globals.css @@ -362,84 +362,84 @@ fill: none; stroke-linecap: round; } -.login-page[data-mood="typing"] .login-figure--purple { +.login-character-stage[data-mood="typing"] .login-figure--purple { height: 430px; transform: skewX(-10deg) translateX(36px); } -.login-page[data-mood="typing"] .login-figure--black { +.login-character-stage[data-mood="typing"] .login-figure--black { transform: skewX(7deg) translateX(6px); } -.login-page[data-mood="typing"] .login-figure--orange { +.login-character-stage[data-mood="typing"] .login-figure--orange { transform: skewX(-5deg); } -.login-page[data-mood="typing"] .login-figure--yellow { +.login-character-stage[data-mood="typing"] .login-figure--yellow { transform: skewX(4deg); } -.login-page[data-mood="typing"] .login-mouth--purple { +.login-character-stage[data-mood="typing"] .login-mouth--purple { width: 7px; height: 32px; border-radius: 0; transform: translate(14px, -28px) skewX(10deg); } -.login-page[data-mood="typing"] .login-mouth--orange { +.login-character-stage[data-mood="typing"] .login-mouth--orange { width: 14px; height: 14px; border-radius: 50%; transform: translateX(6px); } -.login-page[data-mood="peek"] .login-figure--purple, -.login-page[data-mood="peek"] .login-figure--black { +.login-character-stage[data-mood="peek"] .login-figure--purple, +.login-character-stage[data-mood="peek"] .login-figure--black { transform: skewX(0deg) translateY(-10px); } -.login-page[data-mood="peek"] .login-eyes--purple { +.login-character-stage[data-mood="peek"] .login-eyes--purple { left: 40px; top: 14px; } -.login-page[data-mood="peek"] .login-eyes--black { +.login-character-stage[data-mood="peek"] .login-eyes--black { left: 2px; top: 20px; } -.login-page[data-mood="peek"] .login-eyes--orange { +.login-character-stage[data-mood="peek"] .login-eyes--orange { left: 68px; top: 48px; } -.login-page[data-mood="peek"] .login-eyes--yellow { +.login-character-stage[data-mood="peek"] .login-eyes--yellow { left: 10px; top: 28px; } -.login-page[data-mood="peek"] .login-eye::after, -.login-page[data-mood="peek"] .login-pupil::after { +.login-character-stage[data-mood="peek"] .login-eye::after, +.login-character-stage[data-mood="peek"] .login-pupil::after { transform: translate(-8px, -6px); } -.login-page[data-mood="error"] .login-characters-container { +.login-character-stage[data-mood="error"] .login-characters-container { animation: login-stage-breathe 7s ease-in-out infinite, login-shake 0.28s ease-in-out 2; } -.login-page[data-mood="error"] .login-eye { +.login-character-stage[data-mood="error"] .login-eye { height: 10px; margin-top: 4px; } -.login-page[data-mood="error"] .login-mouth--purple, -.login-page[data-mood="error"] .login-mouth--orange { +.login-character-stage[data-mood="error"] .login-mouth--purple, +.login-character-stage[data-mood="error"] .login-mouth--orange { border-radius: 12px 12px 0 0; transform: translateY(10px); } -.login-page[data-mood="error"] .login-yellow-mouth path { +.login-character-stage[data-mood="error"] .login-yellow-mouth path { d: path("M0 10 Q10 2, 20 10 Q30 18, 40 10 Q50 2, 60 10 Q70 18, 80 10"); } -.login-page[data-mood="success"] .login-characters-container { +.login-character-stage[data-mood="success"] .login-characters-container { animation: login-stage-success 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both; } -.login-page[data-mood="success"] .login-mouth--purple { +.login-character-stage[data-mood="success"] .login-mouth--purple { width: 30px; height: 16px; border-radius: 0 0 15px 15px; } -.login-page[data-mood="success"] .login-mouth--orange { +.login-character-stage[data-mood="success"] .login-mouth--orange { width: 32px; height: 18px; border-radius: 0 0 16px 16px; } -.login-page[data-mood="success"] .login-yellow-mouth path { +.login-character-stage[data-mood="success"] .login-yellow-mouth path { d: path("M0 6 Q20 18, 40 18 Q60 18, 80 6"); } @keyframes login-stage-breathe { @@ -466,8 +466,8 @@ } @media (prefers-reduced-motion: reduce) { .login-characters-container, - .login-page[data-mood="error"] .login-characters-container, - .login-page[data-mood="success"] .login-characters-container { + .login-character-stage[data-mood="error"] .login-characters-container, + .login-character-stage[data-mood="success"] .login-characters-container { animation: none; } } diff --git a/web/app/login/page.tsx b/web/app/login/page.tsx index 0ae0ff4..d6eca90 100644 --- a/web/app/login/page.tsx +++ b/web/app/login/page.tsx @@ -1,6 +1,6 @@ "use client" -import type { CSSProperties, FormEvent } from "react" +import type { FormEvent } from "react" import { useEffect, useMemo, useState } from "react" import { AlertCircle, @@ -13,9 +13,9 @@ import { Sparkles, UserRound, } from "lucide-react" +import { AnimatedLoginCharacters, type LoginCharacterMood } from "@/components/login/animated-login-characters" type LoginStatus = "idle" | "loading" | "success" -type LoginMood = "idle" | "typing" | "peek" | "error" | "success" export default function LoginPage() { const [username, setUsername] = useState("") @@ -39,7 +39,7 @@ export default function LoginPage() { return () => window.removeEventListener("pointermove", onPointerMove) }, []) - const mood: LoginMood = useMemo(() => { + const mood: LoginCharacterMood = useMemo(() => { if (status === "success") return "success" if (error) return "error" if (showPassword && activeField === "password") return "peek" @@ -87,13 +87,6 @@ export default function LoginPage() { return (
@@ -115,42 +108,7 @@ export default function LoginPage() {
-
web/app/page.tsx产品工作台主状态：jobs、activeJobId、按 job 隔离的 selectedFrames/详情面板状态、clipboard、ReactFlow 节点和边；负责打开/找回画布工作面板。
web/app/login/page.tsx生产登录页：账号密码表单、保持登录、错误/成功状态，以及参考风格库 14 的四个动画角色互动。
web/app/login/page.tsx生产登录页：账号密码表单、保持登录、错误/成功状态；把角色状态和眼神位移传给独立动画组件。
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 随机英文配音。
web/components/lightbox.tsx关键帧素材准备面板：清洗、统一主体候选、参考帧网格、六张主体重绘图、每帧去主体场景图、纵向 6 行产品融合镜头工作表和审核。