feat(pc-client): 第二批登录、会话、聊天与添加同事界面按规范收口

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>

pc-client/src/pages/login/index.tsx

@@ -1,7 +1,7 @@
 import { t } from "i18next";
+import { useCallback, useEffect, useState } from "react";
 import { useCopyToClipboard } from "react-use";
 
-import login_bg from "@/assets/images/login/login_bg.png";
 import WindowControlBar from "@/components/WindowControlBar";
 import { APP_NAME, APP_VERSION, SDK_VERSION } from "@/config";
 import { feedbackToast } from "@/utils/common";
@@ -11,6 +11,8 @@ import LoginForm from "./LoginForm";
 
 export const Login = () => {
   const [_, copyToClipboard] = useCopyToClipboard();
+  const [banner, setBanner] = useState<string | null>(null);
+  const clearBanner = useCallback(() => setBanner(null), []);
 
   const handleCopy = () => {
     copyToClipboard(`${`${APP_NAME} ${APP_VERSION}`}/${SDK_VERSION}`);
@@ -19,16 +21,16 @@ export const Login = () => {
 
   return (
     <div className="relative flex h-full flex-col">
-      <div className="app-drag relative h-10 bg-[var(--top-search-bar)]">
+      <div className="app-drag relative h-10 bg-[var(--primary)]">
         <WindowControlBar />
       </div>
+      {banner ? <LoginToastBanner text={banner} onDone={clearBanner} /> : null}
       <div className="flex flex-1 items-center justify-center">
-        <LeftBar />
         <div
-          className={`${styles.login} mr-14 h-[450px] w-[350px] rounded-md bg-white p-11`}
-          style={{ boxShadow: "0 0 30px rgba(0,0,0,.1)" }}
+          className={`${styles.login} h-[450px] w-[350px] rounded-xl bg-white p-11`}
+          style={{ boxShadow: "0 4px 16px rgba(0,0,0,0.08)" }}
         >
-          <LoginForm />
+          <LoginForm onBanner={setBanner} />
         </div>
       </div>
       <div
@@ -42,14 +44,26 @@ export const Login = () => {
   );
 };
 
-const LeftBar = () => {
+const LoginToastBanner = ({ text, onDone }: { text: string; onDone: () => void }) => {
+  const [phase, setPhase] = useState<"in" | "out">("in");
+
+  useEffect(() => {
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const stay = window.setTimeout(() => setPhase("out"), reduce ? 2000 : 2150);
+    const done = window.setTimeout(onDone, reduce ? 2000 : 2350);
+    return () => {
+      window.clearTimeout(stay);
+      window.clearTimeout(done);
+    };
+  }, [onDone]);
+
   return (
-    <div className="flex min-h-[420]">
-      <div className="mr-14 text-center">
-        <div className="text-2xl">{t("placeholder.title")}</div>
-        <span className="text-sm  text-gray-400">{t("placeholder.subTitle")}</span>
-        <img src={login_bg} alt="login_bg" />
-      </div>
+    <div
+      className={styles["login-toast"]}
+      data-phase={phase}
+      style={{ backgroundColor: "var(--warn-text)" }}
+    >
+      {text}
     </div>
   );
 };