refactor(frontend): 内联 iframe skill hook 并删除旧文件
This commit is contained in:
parent
49ff9411e9
commit
93b9bc7af5
|
|
@ -1,92 +0,0 @@
|
||||||
import { useSearchParams } from "next/navigation";
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
|
||||||
|
|
||||||
const POST_MESSAGE_TYPES = {
|
|
||||||
SELECT_SKILL: "selectSkill",
|
|
||||||
OPEN_SKILL_DIALOG: "openSkillDialog",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
const RECEIVE_MESSAGE_TYPES = {
|
|
||||||
SELECTED_SKILL: "selectedSkill",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
type SelectedSkillMessage = {
|
|
||||||
type: typeof RECEIVE_MESSAGE_TYPES.SELECTED_SKILL;
|
|
||||||
id: string | number;
|
|
||||||
title: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
function sendToParent(message: unknown): void {
|
|
||||||
if (window.parent !== window) {
|
|
||||||
window.parent.postMessage(message, "*");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Skill 数据类型
|
|
||||||
interface SkillData {
|
|
||||||
skill_id: string;
|
|
||||||
title: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hook 返回类型
|
|
||||||
interface UseIframeSkillReturn {
|
|
||||||
selectedSkill: SkillData | null;
|
|
||||||
sendSelectSkill: (skill_id: string) => void;
|
|
||||||
openSkillDialog: () => void;
|
|
||||||
clearSkill: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useIframeSkill(): UseIframeSkillReturn {
|
|
||||||
const searchParams = useSearchParams();
|
|
||||||
const skillIdFromQuery = searchParams.get("skill_id");
|
|
||||||
const titleFromQuery = searchParams.get("title");
|
|
||||||
|
|
||||||
const [selectedSkill, setSelectedSkill] = useState<SkillData | null>(null);
|
|
||||||
|
|
||||||
// 1. 监听 query 参数变化
|
|
||||||
useEffect(() => {
|
|
||||||
if (skillIdFromQuery && titleFromQuery) {
|
|
||||||
setSelectedSkill({ skill_id: skillIdFromQuery, title: titleFromQuery });
|
|
||||||
}
|
|
||||||
}, [skillIdFromQuery, titleFromQuery]);
|
|
||||||
|
|
||||||
// 2. 监听宿主页 postMessage
|
|
||||||
useEffect(() => {
|
|
||||||
const handleMessage = (event: MessageEvent) => {
|
|
||||||
if (event.data?.type === RECEIVE_MESSAGE_TYPES.SELECTED_SKILL) {
|
|
||||||
const { id, title } = event.data as SelectedSkillMessage;
|
|
||||||
setSelectedSkill({ skill_id: String(id), title });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener("message", handleMessage);
|
|
||||||
return () => window.removeEventListener("message", handleMessage);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 发送选择预定义 skill
|
|
||||||
const sendSelectSkill = useCallback((skill_id: string) => {
|
|
||||||
const message = { type: POST_MESSAGE_TYPES.SELECT_SKILL, skill_id };
|
|
||||||
console.log("[useIframeSkill] sendSelectSkill:", message);
|
|
||||||
sendToParent(message);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 打开 skill 选择对话框
|
|
||||||
const openSkillDialog = useCallback(() => {
|
|
||||||
const message = {
|
|
||||||
type: POST_MESSAGE_TYPES.OPEN_SKILL_DIALOG,
|
|
||||||
openSkillDialog: true,
|
|
||||||
} as const;
|
|
||||||
console.log("[useIframeSkill] openSkillDialog:", message);
|
|
||||||
sendToParent(message);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 清除选中并发送 skill_id=0 给主页
|
|
||||||
const clearSkill = useCallback(() => {
|
|
||||||
setSelectedSkill(null);
|
|
||||||
// 发送 skill_id=0 给主页,通知取消选择
|
|
||||||
const message = { type: POST_MESSAGE_TYPES.SELECT_SKILL, skill_id: "0" };
|
|
||||||
console.log("[useIframeSkill] clearSkill, sending skill_id=0:", message);
|
|
||||||
sendToParent(message);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return { selectedSkill, sendSelectSkill, openSkillDialog, clearSkill };
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue