-
navigation("/search")}>
- }
- value={searchKeyword}
- onChange={(e) => setSearchKeyword(e.target.value)}
- onPressEnter={() => {
- const q = searchKeyword.trim();
- if (q) navigation(`/search?q=${encodeURIComponent(q)}`);
- }}
- onClick={(e) => e.stopPropagation()}
- allowClear
- />
-
+ {isCompactSearch ? (
+
navigation("/search")}
+ title={t("nav.searchPlaceholder")}
+ >
+
+
+ ) : (
+
navigation("/search")}>
+ }
+ value={searchKeyword}
+ onChange={(e) => setSearchKeyword(e.target.value)}
+ onPressEnter={() => {
+ const q = searchKeyword.trim();
+ if (q) navigation(`/search?q=${encodeURIComponent(q)}`);
+ }}
+ onClick={(e) => e.stopPropagation()}
+ allowClear
+ />
+
+ )}
diff --git a/src/contexts/LoginModalContext.tsx b/src/contexts/LoginModalContext.tsx
index e4d3938..3dd4b46 100644
--- a/src/contexts/LoginModalContext.tsx
+++ b/src/contexts/LoginModalContext.tsx
@@ -73,7 +73,7 @@ export const LoginModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
const [qrToken, setQrToken] = useState
(null);
const [qrStatus, setQrStatus] = useState("waiting");
const [qrUsername, setQrUsername] = useState("");
- const pollingRef = useRef(null);
+ const wsRef = useRef(null);
const openLoginModal = useCallback(() => {
setOpen(true);
@@ -82,12 +82,60 @@ export const LoginModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
const closeLoginModal = useCallback(() => {
setOpen(false);
- if (pollingRef.current) {
- clearInterval(pollingRef.current);
- pollingRef.current = null;
+ if (wsRef.current) {
+ wsRef.current.close();
+ wsRef.current = null;
}
}, []);
+ const handleAuthData = (auth: Record) => {
+ if (auth.user) localStorage.setItem("user", JSON.stringify(auth.user));
+ if (auth.access) localStorage.setItem("access_token", auth.access);
+ if (auth.refresh) localStorage.setItem("refresh_token", auth.refresh);
+ if (auth.token_type) localStorage.setItem("token_type", auth.token_type);
+ if (auth.expires_at_timestamp) {
+ localStorage.setItem("expires_at_timestamp", String(auth.expires_at_timestamp));
+ }
+ setQrStatus("confirmed");
+ window.location.reload();
+ };
+
+ const connectWs = (token: string) => {
+ if (wsRef.current) {
+ wsRef.current.close();
+ }
+ const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+ const wsUrl = `${protocol}//${window.location.host}/ws/qr-status/${token}/`;
+ const ws = new WebSocket(wsUrl);
+ wsRef.current = ws;
+
+ ws.onmessage = (event) => {
+ try {
+ const data = JSON.parse(event.data);
+ if (data.status) setQrStatus(data.status);
+ if (data.username) setQrUsername(data.username);
+ if (data.status === "confirmed" && data.auth) {
+ ws.close();
+ handleAuthData(data.auth);
+ }
+ if (data.status === "expired") {
+ ws.close();
+ fetchQrToken();
+ }
+ } catch {
+ // ignore malformed messages
+ }
+ };
+
+ ws.onerror = () => {
+ ws.close();
+ };
+
+ ws.onclose = () => {
+ if (wsRef.current === ws) wsRef.current = null;
+ };
+ };
+
const fetchQrToken = async () => {
try {
const res = await api_request.user.getQrToken();
@@ -95,51 +143,18 @@ export const LoginModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
setQrToken(res.data.token);
setQrStatus("waiting");
setQrUsername("");
- startPolling(res.data.token);
+ connectWs(res.data.token);
}
} catch {
setQrToken(null);
}
};
- const startPolling = (token: string) => {
- if (pollingRef.current) {
- clearInterval(pollingRef.current);
- }
- pollingRef.current = setInterval(async () => {
- try {
- const res = await api_request.user.getQrStatus(token);
- if (res.data) {
- setQrStatus(res.data.status);
- setQrUsername(res.data.username || "");
- if (res.data.status === "confirmed" && res.data.auth) {
- if (pollingRef.current) clearInterval(pollingRef.current);
- const auth = res.data.auth;
- if (auth.user) localStorage.setItem("user", JSON.stringify(auth.user));
- if (auth.access) localStorage.setItem("access_token", auth.access);
- if (auth.refresh) localStorage.setItem("refresh_token", auth.refresh);
- if (auth.token_type) localStorage.setItem("token_type", auth.token_type);
- if (auth.expires_at_timestamp) {
- localStorage.setItem("expires_at_timestamp", String(auth.expires_at_timestamp));
- }
- setQrStatus("confirmed");
- window.location.reload();
- }
- if (res.data.status === "expired") {
- if (pollingRef.current) clearInterval(pollingRef.current);
- fetchQrToken();
- }
- }
- } catch {
- // ignore polling errors
- }
- }, 2000);
- };
-
useEffect(() => {
return () => {
- if (pollingRef.current) {
- clearInterval(pollingRef.current);
+ if (wsRef.current) {
+ wsRef.current.close();
+ wsRef.current = null;
}
};
}, []);
diff --git a/src/pages/LoginMobile/login-templates-preview.html b/src/pages/LoginMobile/login-templates-preview.html
new file mode 100644
index 0000000..60cbb74
--- /dev/null
+++ b/src/pages/LoginMobile/login-templates-preview.html
@@ -0,0 +1,1284 @@
+
+
+
+
+
+可乐Web - 移动端登录/注册模板预览
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
模板 A · 渐变卡片
+
渐变背景 + 毛玻璃卡片，主流社交App风格
+
渐变色彩
+
圆角卡片
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
其他方式
+
+
+
+
+
+
+
+
+
+
+
模板 B · 极简清爽
+
大留白 + 线条感，类似 Linear / Notion 风格
+
极简设计
+
清爽留白
+
+
+
+
+
+
+
+
←
+
+
+
创建账户
+
加入可乐Web，开始你的探索之旅
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
模板 C · 玻璃拟态
+
深色渐变 + 毛玻璃效果，科技感十足
+
深色主题
+
玻璃拟态
+
+
+
+
+
+
+
+
+
🥤
+
可乐Web
+
你的全能在线工具平台
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
OR
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
OR
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+