From bd2f156ccab0072b6d5bfe2c4bb13f3535918bcf Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Mon, 13 Jul 2026 08:08:00 +0800
Subject: [PATCH] Refactor login functionality and enhance MobileCallPage
 positioning

- Update LoginPage to initialize username state as an empty string for improved user experience.
- Introduce floatingVideoRef in MobileCallVisualWorkspace to dynamically manage video panel positioning.
- Adjust position calculations for the floating video panel to account for its dimensions, enhancing drag-and-drop functionality and ensuring proper placement within the viewport.
---
 frontend/src/app/login/page.tsx               |  2 +-
 .../src/components/pages/MobileCallPage.tsx   | 33 +++++++++++++++----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index 5113789..fa2748c 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -18,7 +18,7 @@ import { Input } from "@/components/ui/input";
 export default function LoginPage() {
   const router = useRouter();
   const { user, loading, login } = useAuth();
-  const [username, setUsername] = useState("admin");
+  const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState("");
diff --git a/frontend/src/components/pages/MobileCallPage.tsx b/frontend/src/components/pages/MobileCallPage.tsx
index 3cf3b6a..a70a4d9 100644
--- a/frontend/src/components/pages/MobileCallPage.tsx
+++ b/frontend/src/components/pages/MobileCallPage.tsx
@@ -150,6 +150,7 @@ function MobileCallVisualWorkspace({
   cameraError: string | null;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const floatingVideoRef = useRef<HTMLButtonElement>(null);
   const [position, setPosition] = useState({ x: 16, y: 72 });
   const positionedRef = useRef(false);
   const dragRef = useRef<{
@@ -166,16 +167,25 @@ function MobileCallVisualWorkspace({
 
   useEffect(() => {
     const container = containerRef.current;
-    if (!container) return;
+    const floatingVideo = floatingVideoRef.current;
+    if (!container || !floatingVideo) return;
     const rect = container.getBoundingClientRect();
+    const floatWidth = floatingVideo.offsetWidth;
+    const floatHeight = floatingVideo.offsetHeight;
     if (!positionedRef.current) {
       positionedRef.current = true;
-      setPosition({ x: Math.max(16, rect.width - 168), y: 72 });
+      setPosition({ x: Math.max(16, rect.width - floatWidth - 16), y: 72 });
       return;
     }
     setPosition((current) => ({
-      x: Math.min(Math.max(16, current.x), Math.max(16, rect.width - 168)),
-      y: Math.min(Math.max(72, current.y), Math.max(72, rect.height - 200)),
+      x: Math.min(
+        Math.max(16, current.x),
+        Math.max(16, rect.width - floatWidth - 16),
+      ),
+      y: Math.min(
+        Math.max(72, current.y),
+        Math.max(72, rect.height - floatHeight - 104),
+      ),
     }));
   }, [view]);
 
@@ -187,9 +197,17 @@ function MobileCallVisualWorkspace({
     const dy = event.clientY - drag.startY;
     if (Math.abs(dx) + Math.abs(dy) > 4) drag.moved = true;
     const rect = container.getBoundingClientRect();
+    const floatWidth = event.currentTarget.offsetWidth;
+    const floatHeight = event.currentTarget.offsetHeight;
     setPosition({
-      x: Math.min(Math.max(16, drag.originX + dx), Math.max(16, rect.width - 168)),
-      y: Math.min(Math.max(72, drag.originY + dy), Math.max(72, rect.height - 200)),
+      x: Math.min(
+        Math.max(16, drag.originX + dx),
+        Math.max(16, rect.width - floatWidth - 16),
+      ),
+      y: Math.min(
+        Math.max(72, drag.originY + dy),
+        Math.max(72, rect.height - floatHeight - 104),
+      ),
     });
   }, []);
 
@@ -199,9 +217,10 @@ function MobileCallVisualWorkspace({
         <>
           <MobileCallTranscript messages={messages} />
           <button
+            ref={floatingVideoRef}
             type="button"
             style={{ left: position.x, top: position.y }}
-            className="absolute z-10 h-24 w-38 touch-none overflow-hidden rounded-2xl border border-white/20 bg-black shadow-2xl ring-1 ring-black/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
+            className="absolute z-10 aspect-video w-[clamp(7.5rem,38vw,10rem)] touch-none overflow-hidden rounded-2xl border border-white/20 bg-black shadow-2xl ring-1 ring-black/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
             aria-label="拖动摄像头浮窗，点击切换到视频流"
             onPointerDown={(event) => {
               event.currentTarget.setPointerCapture(event.pointerId);