@@ -1,137 +0,0 @@
|
||||
import { useState, useMemo, useCallback } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { message } from "antd"
|
||||
import {
|
||||
getTemplates,
|
||||
toggleFavoriteTemplate,
|
||||
copyTemplate,
|
||||
type TemplateItem,
|
||||
type TemplateListParams,
|
||||
} from "@/api/templates"
|
||||
import type { EditTemplateType } from "../types/templateLibrary"
|
||||
import { DEFAULT_PAGE_SIZE } from "../constants/templateLibrary"
|
||||
|
||||
export const useTemplateLibrary = () => {
|
||||
const navigate = useNavigate()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
/* 筛选状态 */
|
||||
const [searchText, setSearchText] = useState("")
|
||||
const [activeType, setActiveType] = useState<EditTemplateType | "全部">("全部")
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize] = useState(DEFAULT_PAGE_SIZE)
|
||||
|
||||
/* 构建查询参数 */
|
||||
const queryParams: TemplateListParams = useMemo(() => {
|
||||
const params: TemplateListParams = {
|
||||
page,
|
||||
page_size: pageSize,
|
||||
}
|
||||
if (activeType !== "全部") params.category = activeType
|
||||
if (searchText.trim()) params.keyword = searchText.trim()
|
||||
return params
|
||||
}, [page, pageSize, activeType, searchText])
|
||||
|
||||
/* 获取模板列表 */
|
||||
const {
|
||||
data: templateData,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["templates", queryParams],
|
||||
queryFn: () => getTemplates(queryParams),
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
const templates = templateData?.items ?? []
|
||||
const totalTemplates = templateData?.total ?? 0
|
||||
|
||||
/* 收藏 mutation */
|
||||
const favMutation = useMutation({
|
||||
mutationFn: toggleFavoriteTemplate,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["templates"] })
|
||||
},
|
||||
})
|
||||
|
||||
/* 复制模板 mutation */
|
||||
const copyMutation = useMutation({
|
||||
mutationFn: copyTemplate,
|
||||
onSuccess: (data) => {
|
||||
message.success(`模板「${data.name}」已复制到「我的模板」`)
|
||||
queryClient.invalidateQueries({ queryKey: ["templates"] })
|
||||
},
|
||||
onError: () => {
|
||||
message.error("复制模板失败,请稍后重试")
|
||||
},
|
||||
})
|
||||
|
||||
/* 操作:切换收藏 */
|
||||
const toggleFavorite = useCallback(
|
||||
(id: string, e?: React.MouseEvent) => {
|
||||
e?.stopPropagation()
|
||||
favMutation.mutate(id)
|
||||
},
|
||||
[favMutation],
|
||||
)
|
||||
|
||||
/* 操作:复制模板 */
|
||||
const handleCopy = useCallback(
|
||||
(template: TemplateItem) => {
|
||||
copyMutation.mutate(template.id)
|
||||
},
|
||||
[copyMutation],
|
||||
)
|
||||
|
||||
/* 操作:使用模板 → 跳转剪辑模板 */
|
||||
const handleUse = useCallback(
|
||||
(template: TemplateItem) => {
|
||||
navigate(`/app/editing-planner?templateId=${template.id}`)
|
||||
},
|
||||
[navigate],
|
||||
)
|
||||
|
||||
/* 操作:创建模板 */
|
||||
const handleCreate = useCallback(() => {
|
||||
navigate("/app/editing-planner")
|
||||
}, [navigate])
|
||||
|
||||
/* 搜索 */
|
||||
const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchText(e.target.value)
|
||||
setPage(1)
|
||||
}, [])
|
||||
|
||||
/* 切换分类 */
|
||||
const handleCategoryChange = useCallback((type: EditTemplateType | "全部") => {
|
||||
setActiveType(type)
|
||||
setPage(1)
|
||||
}, [])
|
||||
|
||||
return {
|
||||
/* 状态 */
|
||||
templates,
|
||||
totalTemplates,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
searchText,
|
||||
activeType,
|
||||
page,
|
||||
pageSize,
|
||||
/* mutations */
|
||||
favMutation,
|
||||
copyMutation,
|
||||
/* setters */
|
||||
setPage,
|
||||
/* handlers */
|
||||
toggleFavorite,
|
||||
handleCopy,
|
||||
handleUse,
|
||||
handleCreate,
|
||||
handleSearchChange,
|
||||
handleCategoryChange,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user