feat:回调弹框展示修改

This commit is contained in:
非凡主儿 2025-10-21 14:58:31 +08:00
parent 31bb1b1fe3
commit 1f37369b3d

View File

@ -1,10 +1,13 @@
'use client'; 'use client';
import { useEffect } from 'react'; import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import TwitterCallbackModal from '@/components/common/TwitterCallbackModal';
export default function TwitterAuthCallbackPage() { export default function TwitterAuthCallbackPage() {
const router = useRouter(); const router = useRouter();
const [callbackParams, setCallbackParams] = useState<{ state: string; code: string } | null>(null);
const [project, setProject] = useState<any>(null);
useEffect(() => { useEffect(() => {
// 解析回调参数 // 解析回调参数
@ -12,38 +15,57 @@ export default function TwitterAuthCallbackPage() {
const state = searchParams.get('state'); const state = searchParams.get('state');
const code = searchParams.get('code'); const code = searchParams.get('code');
// 将回调参数写入 localStorage供原窗口读取
if (state && code) { if (state && code) {
try { setCallbackParams({ state, code });
const payload = {
state,
code,
timestamp: Date.now(),
};
localStorage.setItem('twitterAuthCallbackPayload', JSON.stringify(payload));
// 通过变化一个随机标记键,确保触发其它窗口的 storage 事件
localStorage.setItem('twitterAuthCallbackFlag', Math.random().toString(36).slice(2));
} catch {
// 忽略本地存储异常
}
// 通过 postMessage 通知打开者(如果存在且同源策略允许) // 从 localStorage 获取项目信息
try { const storedProject = localStorage.getItem('currentShareProject');
if (window.opener) { if (storedProject) {
window.opener.postMessage({ type: 'TWITTER_AUTH_CALLBACK', state, code }, window.location.origin); try {
const parsedProject = JSON.parse(storedProject);
setProject(parsedProject);
} catch (error) {
console.error('解析项目信息失败:', error);
setProject({ project_id: '', name: '未知项目', final_video_url: '' });
} }
} catch { } else {
setProject({ project_id: '', name: '未知项目', final_video_url: '' });
} }
}
// 跳回应用页面(原窗口会通过 storage 事件弹出处理弹框) // 清理 URL 参数
router.push('/movies?twitterCallback=true'); const cleanUrl = window.location.pathname;
window.history.replaceState({}, document.title, cleanUrl);
} else {
// 如果没有参数,重定向到主页面
router.push('/movies');
}
}, [router]); }, [router]);
const handleCloseModal = () => {
// 清理 localStorage 中的临时数据
try {
localStorage.removeItem('twitterAuthCallbackPayload');
localStorage.removeItem('twitterAuthCallbackFlag');
} catch (error) {
console.error('清理 localStorage 失败:', error);
}
setCallbackParams(null);
router.push('/movies');
};
return ( return (
<div className="flex items-center justify-center min-h-screen bg-gray-900 text-white"> <div className="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<p> Twitter ...</p> {callbackParams && project && (
<TwitterCallbackModal
visible={true}
onClose={handleCloseModal}
project={project}
urlParams={callbackParams}
/>
)}
{!callbackParams && (
<p> Twitter ...</p>
)}
</div> </div>
); );
} }