src/features/profile/ProfilePage.tsx

@@ -235,6 +235,9 @@ function ProfilePage({
   const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
   const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
   const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
+  const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
+  const phoneLooksValid = /^1[3-9]\d{9}$/.test(phone.trim());
+  const passwordLooksReady = password.length >= (mode === "register" ? 6 : 1);
 
   useEffect(() => {
     setLocalAvatarUrl(session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
@@ -812,13 +815,31 @@ function ProfilePage({
             <source src={AUTH_SHOWCASE_VIDEO_URL} type="video/mp4" />
           </video>
           <div className="auth-page__video-overlay">
+            <div className="auth-page__showcase-content">
+              <div className="auth-page__brand-row">
                 <h1 className="auth-page__brand">OmniAI</h1>
+              </div>
               <p className="auth-page__tagline">一句话，从创意到成片</p>
               <div className="auth-page__features">
                 <span>AI 视频生成</span>
                 <span>AI 图片创作</span>
                 <span>AI 电商素材</span>
               </div>
+              <div className="auth-page__showcase-stats" aria-label="平台能力">
+                <span>
+                  <strong>Studio</strong>
+                  创作工作台
+                </span>
+                <span>
+                  <strong>Assets</strong>
+                  资产沉淀
+                </span>
+                <span>
+                  <strong>Team</strong>
+                  团队协作
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -829,6 +850,7 @@ function ProfilePage({
             <span className="auth-page__logo">
               <img src={AUTH_LOGO_URL} alt="OmniAI" />
             </span>
+            <span className="auth-page__form-kicker">{mode === "login" ? "账户登录" : "新用户注册"}</span>
             <h2 className="auth-page__title">{mode === "login" ? "欢迎回来" : "创建账号"}</h2>
             <p className="auth-page__subtitle">
               {mode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"}
@@ -868,7 +890,8 @@ function ProfilePage({
               <MailOutlined /> 邮箱
             </button>
             <button type="button" className={authTab === "phone" ? "is-active" : ""} onClick={() => { setAuthTab("phone"); setFieldErrors({}); }}>
-              <MobileOutlined /> 手机验证码
+              <MobileOutlined />
+              <span className="auth-page__tab-label-short">手机</span>
             </button>
           </div>
 
@@ -924,6 +947,11 @@ function ProfilePage({
                     autoComplete={mode === "login" ? "current-password" : "new-password"}
                   />
                   {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                  {mode === "register" && passwordLooksReady && !fieldErrors.password ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 密码长度符合要求
+                    </span>
+                  ) : null}
                 </label>
                 {mode === "login" ? (
                   <div className="auth-page__forgot">
@@ -961,6 +989,11 @@ function ProfilePage({
                     autoComplete="email"
                   />
                   {fieldErrors.email ? <span className="auth-page__field-error">{fieldErrors.email}</span> : null}
+                  {emailLooksValid && !fieldErrors.email ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 邮箱格式正确
+                    </span>
+                  ) : null}
                 </label>
                 <label className={`auth-page__field${fieldErrors.password ? " auth-page__field--error" : ""}`}>
                   <span>
@@ -975,6 +1008,11 @@ function ProfilePage({
                     autoComplete={mode === "login" ? "current-password" : "new-password"}
                   />
                   {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                  {mode === "register" && passwordLooksReady && !fieldErrors.password ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 密码长度符合要求
+                    </span>
+                  ) : null}
                 </label>
               </>
             ) : null}
@@ -990,6 +1028,11 @@ function ProfilePage({
                     <input type="tel" value={phone} onChange={(event) => { setPhone(event.target.value); clearFieldError("phone"); }} onBlur={() => handleFieldBlur("phone", phone)} placeholder="输入手机号" autoComplete="tel" />
                   </div>
                   {fieldErrors.phone ? <span className="auth-page__field-error">{fieldErrors.phone}</span> : null}
+                  {phoneLooksValid && !fieldErrors.phone ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 手机号格式正确
+                    </span>
+                  ) : null}
                 </label>
                 <label className={`auth-page__field${fieldErrors.smsCode ? " auth-page__field--error" : ""}`}>
                   <span>
@@ -1015,6 +1058,11 @@ function ProfilePage({
                     </span>
                     <input type="password" value={password} onChange={(event) => { setPassword(event.target.value); clearFieldError("password"); }} onBlur={() => handleFieldBlur("password", password)} placeholder="至少 6 位" autoComplete="new-password" />
                     {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                    {passwordLooksReady && !fieldErrors.password ? (
+                      <span className="auth-page__field-hint">
+                        <CheckCircleFilled /> 密码长度符合要求
+                      </span>
+                    ) : null}
                   </label>
                 ) : null}
               </>

src/features/workbench/WorkbenchPage.tsx

@@ -236,6 +236,7 @@ function WorkbenchPage({
   const keepaliveTasksRef = useRef<Record<string, WorkbenchKeepaliveTask>>(readStoredKeepaliveTasks());
   const taskAbortControllersRef = useRef<Map<string, AbortController>>(new Map());
   const lastScrollTopRef = useRef(0);
+  const scrollActionsHideTimerRef = useRef<number | null>(null);
   const shouldFollowNewMessagesRef = useRef(true);
   const pendingScrollToLatestRef = useRef(true);
   const renderedMessageIdsRef = useRef<string[]>([]);
@@ -273,6 +274,8 @@ function WorkbenchPage({
   const [promptSelectionRange, setPromptSelectionRange] = useState({ start: 0, end: 0 });
   const [mentionActiveIndex, setMentionActiveIndex] = useState(0);
   const [composerHidden, setComposerHidden] = useState(false);
+  const [scrollActionsVisible, setScrollActionsVisible] = useState(false);
+  const [scrollActionDirection, setScrollActionDirection] = useState<"top" | "bottom" | null>(null);
   const [workspaceStarted, setWorkspaceStarted] = useState(false);
 
   useEffect(() => {
@@ -441,6 +444,27 @@ function WorkbenchPage({
     "--accent-glow": `0 0 24px rgba(${accentRgb}, 0.22)`,
   } as CSSProperties;
 
+  const revealScrollActionsTemporarily = useCallback((direction: "top" | "bottom") => {
+    setScrollActionDirection(direction);
+    setScrollActionsVisible(true);
+    if (scrollActionsHideTimerRef.current !== null) {
+      window.clearTimeout(scrollActionsHideTimerRef.current);
+    }
+    scrollActionsHideTimerRef.current = window.setTimeout(() => {
+      setScrollActionsVisible(false);
+      setScrollActionDirection(null);
+      scrollActionsHideTimerRef.current = null;
+    }, 950);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (scrollActionsHideTimerRef.current !== null) {
+        window.clearTimeout(scrollActionsHideTimerRef.current);
+      }
+    };
+  }, []);
+
   const scrollMessagesToLatest = useCallback((behavior: ScrollBehavior = "smooth") => {
     const scroll = () => {
       const surface = messagesSurfaceRef.current;
@@ -451,6 +475,7 @@ function WorkbenchPage({
 
       setComposerHidden(false);
       shouldFollowNewMessagesRef.current = true;
+      revealScrollActionsTemporarily("bottom");
       surface.scrollTo({ top: surface.scrollHeight, behavior });
       lastScrollTopRef.current = surface.scrollTop;
     };
@@ -459,7 +484,7 @@ function WorkbenchPage({
       scroll();
       window.setTimeout(scroll, 80);
     });
-  }, []);
+  }, [revealScrollActionsTemporarily]);
 
   const imageSettingGroups = useMemo<WorkbenchFieldGroup[]>(
     () => [
@@ -1373,6 +1398,9 @@ function WorkbenchPage({
       const delta = top - lastScrollTopRef.current;
       const atTop = top <= edgeThreshold;
       const atBottom = top + surface.clientHeight >= surface.scrollHeight - edgeThreshold;
+      if (surface.scrollHeight > surface.clientHeight + edgeThreshold && Math.abs(delta) > 1) {
+        revealScrollActionsTemporarily(delta > 0 ? "bottom" : "top");
+      }
       shouldFollowNewMessagesRef.current = atBottom;
       if (atTop || atBottom) {
         setComposerHidden(false);
@@ -1384,7 +1412,7 @@ function WorkbenchPage({
 
     surface.addEventListener("scroll", handleScroll, { passive: true });
     return () => surface.removeEventListener("scroll", handleScroll);
-  }, [hasActivatedWorkspace]);
+  }, [hasActivatedWorkspace, revealScrollActionsTemporarily]);
 
   const scrollMessagesSurface = useCallback((direction: "top" | "bottom") => {
     const surface = messagesSurfaceRef.current;
@@ -1392,8 +1420,9 @@ function WorkbenchPage({
 
     const top = direction === "top" ? 0 : surface.scrollHeight;
     setComposerHidden(false);
+    revealScrollActionsTemporarily(direction);
     surface.scrollTo({ top, behavior: "smooth" });
-  }, []);
+  }, [revealScrollActionsTemporarily]);
 
   const closeToolbarMenus = () => setToolbarMenuId(null);
   const toggleToolbarMenu = (menuId: Exclude<ToolbarMenuId, null>) => {
@@ -3022,10 +3051,13 @@ function WorkbenchPage({
                 {renderComposerToolbar(false, isGenerating)}
               </div>
             </section>
-            <div className="wb-chat-scroll-actions" aria-label="聊天滚动">
+            <div
+              className={`wb-chat-scroll-actions${scrollActionsVisible ? " is-visible" : ""}${scrollActionDirection ? ` is-${scrollActionDirection}` : ""}`}
+              aria-label="聊天滚动"
+            >
               <button
                 type="button"
-                className="wb-chat-scroll-actions__button"
+                className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--top"
                 title="返回聊天顶部"
                 aria-label="返回聊天顶部"
                 onClick={() => scrollMessagesSurface("top")}
@@ -3034,7 +3066,7 @@ function WorkbenchPage({
               </button>
               <button
                 type="button"
-                className="wb-chat-scroll-actions__button"
+                className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--bottom"
                 title="到达聊天底部"
                 aria-label="到达聊天底部"
                 onClick={() => scrollMessagesSurface("bottom")}