@@ -1,62 +0,0 @@
|
||||
import { useState, useCallback } from "react"
|
||||
import { useQueryClient } from "@tanstack/react-query"
|
||||
import { message } from "antd"
|
||||
import { getTemplate, type TemplateItem } from "@/api/templates"
|
||||
|
||||
interface UseTemplateDetailProps {
|
||||
onToggleFavorite: (id: string) => void
|
||||
onUse: (template: TemplateItem) => void
|
||||
onCopy: (template: TemplateItem) => void
|
||||
}
|
||||
|
||||
export const useTemplateDetail = ({ onToggleFavorite, onUse, onCopy }: UseTemplateDetailProps) => {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
/* 弹窗状态 */
|
||||
const [previewTemplate, setPreviewTemplate] = useState<TemplateItem | null>(null)
|
||||
const [detailLoading, setDetailLoading] = useState(false)
|
||||
|
||||
/* 点击卡片 → 获取详情并展示弹窗 */
|
||||
const handlePreview = useCallback(async (template: TemplateItem) => {
|
||||
setDetailLoading(true)
|
||||
setPreviewTemplate(template)
|
||||
try {
|
||||
const detail = await getTemplate(template.id)
|
||||
setPreviewTemplate(detail)
|
||||
} catch {
|
||||
message.warning("模板详情加载失败,显示摘要信息")
|
||||
} finally {
|
||||
setDetailLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
/* 关闭弹窗 */
|
||||
const handleClose = useCallback(() => {
|
||||
setPreviewTemplate(null)
|
||||
setDetailLoading(false)
|
||||
}, [])
|
||||
|
||||
/* 收藏切换(同时更新预览模板的状态) */
|
||||
const handleToggleFavorite = useCallback(
|
||||
(id: string) => {
|
||||
onToggleFavorite(id)
|
||||
/* 乐观更新详情弹窗的收藏状态 */
|
||||
setPreviewTemplate((prev) =>
|
||||
prev && prev.id === id ? { ...prev, is_favorite: !prev.is_favorite } : prev,
|
||||
)
|
||||
/* 刷新列表缓存 */
|
||||
queryClient.invalidateQueries({ queryKey: ["templates"] })
|
||||
},
|
||||
[onToggleFavorite, queryClient],
|
||||
)
|
||||
|
||||
return {
|
||||
previewTemplate,
|
||||
detailLoading,
|
||||
handlePreview,
|
||||
handleClose,
|
||||
handleToggleFavorite,
|
||||
handleUse: onUse,
|
||||
handleCopy: onCopy,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user