auto-save 2026-05-15 15:54 (~4)

.memory/worklog.json

@@ -1,12 +1,5 @@
 {
   "entries": [
-    {
-      "files_changed": 11,
-      "hash": "abeff42",
-      "message": "auto-save 2026-05-14 00:25 (+6, ~5)",
-      "ts": "2026-05-14T00:26:10+08:00",
-      "type": "commit"
-    },
     {
       "files_changed": 1,
       "hash": "5c9c80e",
@@ -3251,6 +3244,13 @@
       "type": "session-heartbeat",
       "message": "Codex 会话活跃 · 最近命令：codex · 1 项未提交变更 · 最近提交：auto-save 2026-05-15 15:43 (~1)",
       "files_changed": 1
+    },
+    {
+      "ts": "2026-05-15T15:49:01+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-15 15:48 (~1)",
+      "hash": "beeed42",
+      "files_changed": 1
     }
   ]
 }

docs/source-analysis.html

@@ -941,6 +941,17 @@ SubjectAsset {
         <h2>变更记录</h2>
         <p>这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。</p>
         <div class="changelog">
+          <article class="change">
+            <header>
+              <h3>2026-05-15 · 登录页动画角色改回风格库原版几何结构</h3>
+              <span class="tag rose">UI</span>
+            </header>
+            <div class="body">
+              <p><strong>问题：</strong>首版登录页把风格库的动画角色理解成圆润小球，视觉上偏幼稚，和 <code>14 动画角色登录</code> 的原始气质不一致。</p>
+              <p><strong>改动：</strong>对照风格库 <code>AnimatedCharacters.vue</code> 和 demo，把角色重写为紫色高矩形、黑色矩形、橙色半圆、黄色圆角柱的贴底几何组合；保留鼠标视线跟随，并让输入、显示密码、错误、成功状态驱动 skew、眼睛和嘴型变化。</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

@@ -179,186 +179,295 @@
   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);
 }
+.login-character-stage::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 40%;
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
+  pointer-events: none;
+}
 .login-stage-grid {
   position: absolute;
   inset: 26px;
   border: 1px dashed rgba(255, 255, 255, 0.1);
   border-radius: 8px;
 }
-.login-character {
+.login-characters-container {
-  --character-fill: #6c3ff5;
-  --character-shadow: rgba(108, 63, 245, 0.34);
   position: absolute;
-  width: 128px;
+  z-index: 1;
-  height: 128px;
+  left: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.22);
+  bottom: 0;
-  background: var(--character-fill);
+  width: 550px;
-  box-shadow: 0 26px 45px var(--character-shadow), inset 0 14px 24px rgba(255, 255, 255, 0.18);
+  height: 400px;
+  transform: translateX(-50%) scale(0.74);
+  transform-origin: bottom center;
+  animation: login-stage-breathe 7s ease-in-out infinite;
+}
+.login-figure {
+  position: absolute;
+  bottom: 0;
+  transform-origin: bottom center;
   transition:
-    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
-    border-radius 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+    height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
-    background 0.25s ease;
+    opacity 0.2s ease;
-  animation: login-float 5.8s ease-in-out infinite;
+  will-change: transform;
-  animation-delay: calc(var(--i) * -0.55s);
+  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.32));
 }
-.login-character--pilot {
+.login-figure::after {
-  left: 10%;
-  top: 18%;
-  border-radius: 34% 54% 46% 42%;
-}
-.login-character--lens {
-  --character-fill: #ff9b6b;
-  --character-shadow: rgba(255, 155, 107, 0.28);
-  right: 13%;
-  top: 10%;
-  width: 112px;
-  height: 112px;
-  border-radius: 50%;
-}
-.login-character--spark {
-  --character-fill: #e8d754;
-  --character-shadow: rgba(232, 215, 84, 0.22);
-  left: 28%;
-  bottom: 12%;
-  width: 106px;
-  height: 106px;
-  border-radius: 28% 50% 32% 52%;
-  color: #111;
-}
-.login-character--keeper {
-  --character-fill: #2d2d2d;
-  --character-shadow: rgba(0, 0, 0, 0.5);
-  right: 28%;
-  bottom: 16%;
-  width: 138px;
-  height: 138px;
-  border-radius: 46% 38% 54% 34%;
-}
-.login-character__gloss {
-  position: absolute;
-  left: 20%;
-  top: 16%;
-  width: 34%;
-  height: 18%;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.22);
-  transform: rotate(-18deg);
-}
-.login-character__eye {
-  position: absolute;
-  top: 39%;
-  width: 20px;
-  height: 20px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.95);
-  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15);
-}
-.login-character--spark .login-character__eye {
-  background: rgba(17, 17, 17, 0.92);
-}
-.login-character__eye::after {
   content: "";
   position: absolute;
-  left: 6px;
+  inset: 0;
-  top: 6px;
+  background: linear-gradient(105deg, rgba(255, 255, 255, 0.16), transparent 34%, rgba(0, 0, 0, 0.12));
-  width: 8px;
+  pointer-events: none;
-  height: 8px;
+}
+.login-figure--purple {
+  left: 70px;
+  width: 180px;
+  height: 400px;
+  z-index: 1;
+  background: #6c3ff5;
+  border-radius: 0;
+}
+.login-figure--black {
+  left: 240px;
+  width: 120px;
+  height: 310px;
+  z-index: 2;
+  background: #2d2d2d;
+  border-radius: 0;
+}
+.login-figure--orange {
+  left: 0;
+  width: 240px;
+  height: 150px;
+  z-index: 3;
+  background: #ff9b6b;
+  border-radius: 120px 120px 0 0;
+}
+.login-figure--yellow {
+  left: 310px;
+  width: 140px;
+  height: 230px;
+  z-index: 4;
+  background: #e8d754;
+  border-radius: 70px 70px 0 0;
+}
+.login-eyes {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  transition:
+    left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.login-eyes--purple {
+  left: 75px;
+  top: 25px;
+  gap: 32px;
+}
+.login-eyes--black {
+  left: 26px;
+  top: 32px;
+  gap: 24px;
+}
+.login-eyes--orange {
+  left: 112px;
+  top: 60px;
+  gap: 32px;
+}
+.login-eyes--yellow {
+  left: 52px;
+  top: 40px;
+  gap: 24px;
+}
+.login-eye {
+  position: relative;
+  width: 18px;
+  height: 18px;
   border-radius: 999px;
-  background: #111;
+  background: white;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+}
+.login-eye--small {
+  width: 16px;
+  height: 16px;
+}
+.login-eye::after,
+.login-pupil::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #2d2d2d;
   transform: translate(var(--eye-x), var(--eye-y));
   transition: transform 0.08s linear, opacity 0.2s ease;
 }
-.login-character--spark .login-character__eye::after {
+.login-eye::after {
-  background: #fff;
+  margin: -3.5px 0 0 -3.5px;
 }
-.login-character__eye--left {
+.login-pupil {
-  left: 28%;
+  position: relative;
-}
+  width: 12px;
-.login-character__eye--right {
-  right: 28%;
-}
-.login-character__mouth {
-  position: absolute;
-  left: 50%;
-  top: 62%;
-  width: 30px;
   height: 12px;
-  border-bottom: 3px solid rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
-  border-radius: 0 0 999px 999px;
-  transform: translateX(-50%);
-  transition: transform 0.2s ease, height 0.2s ease, border-radius 0.2s ease;
 }
-.login-character--spark .login-character__mouth {
+.login-pupil::after {
-  border-bottom-color: #111;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
 }
-.login-character__badge {
+.login-mouth {
   position: absolute;
-  right: 15%;
+  z-index: 2;
-  bottom: 14%;
+  background: #2d2d2d;
-  width: 16px;
+  transition:
-  height: 16px;
+    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-  border-radius: 4px;
+    height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-  background: rgba(255, 255, 255, 0.35);
+    border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-  transform: rotate(12deg);
+    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.login-page[data-mood="typing"] .login-character {
+.login-mouth--purple {
-  transform: translateY(-8px) scale(1.02);
+  left: 97px;
+  top: 57px;
+  width: 24px;
+  height: 8px;
+  border-radius: 0 0 12px 12px;
 }
-.login-page[data-mood="peek"] .login-character__eye::after {
+.login-mouth--orange {
-  opacity: 0.25;
+  left: 126px;
+  top: 92px;
+  width: 26px;
+  height: 13px;
+  border-radius: 0 0 13px 13px;
 }
-.login-page[data-mood="peek"] .login-character--keeper {
+.login-yellow-mouth {
-  border-radius: 50% 50% 40% 40%;
+  position: absolute;
-  transform: translateY(-10px) scale(1.05);
+  z-index: 2;
+  left: 40px;
+  top: 88px;
 }
-.login-page[data-mood="error"] .login-character {
+.login-yellow-mouth path {
-  animation: login-shake 0.28s ease-in-out 2;
+  stroke: #2d2d2d;
+  stroke-width: 3;
+  fill: none;
+  stroke-linecap: round;
 }
-.login-page[data-mood="error"] .login-character__mouth {
+.login-page[data-mood="typing"] .login-figure--purple {
+  height: 430px;
+  transform: skewX(-10deg) translateX(36px);
+}
+.login-page[data-mood="typing"] .login-figure--black {
+  transform: skewX(7deg) translateX(6px);
+}
+.login-page[data-mood="typing"] .login-figure--orange {
+  transform: skewX(-5deg);
+}
+.login-page[data-mood="typing"] .login-figure--yellow {
+  transform: skewX(4deg);
+}
+.login-page[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 {
+  width: 14px;
   height: 14px;
-  border-top: 3px solid rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
-  border-bottom: 0;
+  transform: translateX(6px);
-  border-radius: 999px 999px 0 0;
-  transform: translate(-50%, 5px);
 }
-.login-page[data-mood="success"] .login-character {
+.login-page[data-mood="peek"] .login-figure--purple,
-  transform: translateY(-14px) scale(1.06);
+.login-page[data-mood="peek"] .login-figure--black {
+  transform: skewX(0deg) translateY(-10px);
 }
-.login-page[data-mood="success"] .login-character__mouth {
+.login-page[data-mood="peek"] .login-eyes--purple {
+  left: 50px;
+  top: 20px;
+}
+.login-page[data-mood="peek"] .login-eyes--black {
+  left: 10px;
+  top: 28px;
+}
+.login-page[data-mood="peek"] .login-eyes--orange {
+  left: 80px;
+  top: 55px;
+}
+.login-page[data-mood="peek"] .login-eyes--yellow {
+  left: 20px;
+  top: 35px;
+}
+.login-page[data-mood="peek"] .login-eye::after,
+.login-page[data-mood="peek"] .login-pupil::after {
+  transform: translate(-5px, -4px);
+}
+.login-page[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 {
+  height: 10px;
+  margin-top: 4px;
+}
+.login-page[data-mood="error"] .login-mouth--purple,
+.login-page[data-mood="error"] .login-mouth--orange {
+  border-radius: 12px 12px 0 0;
+  transform: translateY(10px);
+}
+.login-page[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 {
+  animation: login-stage-success 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+.login-page[data-mood="success"] .login-mouth--purple {
+  width: 30px;
+  height: 16px;
+  border-radius: 0 0 15px 15px;
+}
+.login-page[data-mood="success"] .login-mouth--orange {
+  width: 32px;
   height: 18px;
+  border-radius: 0 0 16px 16px;
 }
-@keyframes login-float {
+.login-page[data-mood="success"] .login-yellow-mouth path {
+  d: path("M0 6 Q20 18, 40 18 Q60 18, 80 6");
+}
+@keyframes login-stage-breathe {
   0%, 100% { translate: 0 0; }
-  50% { translate: 0 -12px; }
+  50% { translate: 0 -8px; }
 }
 @keyframes login-shake {
   0%, 100% { translate: 0 0; }
   33% { translate: -5px 0; }
   66% { translate: 5px 0; }
 }
+@keyframes login-stage-success {
+  0% { translate: 0 0; }
+  45% { translate: 0 -22px; }
+  100% { translate: 0 -8px; }
+}
 @media (max-width: 720px) {
   .login-character-stage {
-    min-height: 260px;
+    min-height: 270px;
   }
-  .login-character {
+  .login-characters-container {
-    width: 96px;
+    transform: translateX(-50%) scale(0.58);
-    height: 96px;
-  }
-  .login-character--lens,
-  .login-character--spark {
-    width: 84px;
-    height: 84px;
-  }
-  .login-character--keeper {
-    width: 102px;
-    height: 102px;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .login-character {
+  .login-characters-container,
-    animation: none;
+  .login-page[data-mood="error"] .login-characters-container,
-  }
+  .login-page[data-mood="success"] .login-characters-container {
-  .login-page[data-mood="error"] .login-character {
     animation: none;
   }
 }

web/app/login/page.tsx

@@ -17,8 +17,6 @@ import {
 type LoginStatus = "idle" | "loading" | "success"
 type LoginMood = "idle" | "typing" | "peek" | "error" | "success"
 
-const CHARACTER_IDS = ["pilot", "lens", "spark", "keeper"] as const
-
 export default function LoginPage() {
   const [username, setUsername] = useState("")
   const [password, setPassword] = useState("")
@@ -119,15 +117,39 @@ export default function LoginPage() {
 
               <div className="login-character-stage" aria-hidden="true">
                 <div className="login-stage-grid" />
-                {CHARACTER_IDS.map((id, index) => (
+                <div className="login-characters-container">
-                  <div className={`login-character login-character--${id}`} key={id} style={{ "--i": index } as CSSProperties}>
+                  <div className="login-figure login-figure--purple">
-                    <span className="login-character__gloss" />
+                    <span className="login-eyes login-eyes--purple">
-                    <span className="login-character__eye login-character__eye--left" />
+                      <span className="login-eye" />
-                    <span className="login-character__eye login-character__eye--right" />
+                      <span className="login-eye" />
-                    <span className="login-character__mouth" />
+                    </span>
-                    <span className="login-character__badge" />
+                    <span className="login-mouth login-mouth--purple" />
                   </div>
-                ))}
+                  <div className="login-figure login-figure--black">
+                    <span className="login-eyes login-eyes--black">
+                      <span className="login-eye login-eye--small" />
+                      <span className="login-eye login-eye--small" />
+                    </span>
+                  </div>
+                  <div className="login-figure login-figure--orange">
+                    <span className="login-eyes login-eyes--orange">
+                      <span className="login-pupil" />
+                      <span className="login-pupil" />
+                    </span>
+                    <span className="login-mouth login-mouth--orange" />
+                  </div>
+                  <div className="login-figure login-figure--yellow">
+                    <span className="login-eyes login-eyes--yellow">
+                      <span className="login-pupil" />
+                      <span className="login-pupil" />
+                    </span>
+                    <span className="login-yellow-mouth">
+                      <svg width="80" height="20" viewBox="0 0 80 20">
+                        <path d="M0 10 Q10 10, 20 10 Q30 10, 40 10 Q50 10, 60 10 Q70 10, 80 10" />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
               </div>
 
               <div className="grid gap-3 sm:grid-cols-3">