@@ -1,102 +0,0 @@
|
||||
/**
|
||||
* 模板库页面(升级版)— V21 设计系统
|
||||
* 对接后端模板管理 API:
|
||||
* - 分页查询(page/page_size/category/keyword)
|
||||
* - 模板详情(素材规则、字幕样式、BGM、比例等参数配置)
|
||||
* - 复制模板 / 从模板生成
|
||||
* - 卡片网格布局 + 类型筛选 + 搜索 + 收藏
|
||||
*/
|
||||
import React from "react"
|
||||
import { useTemplateLibrary } from "./hooks/useTemplateLibrary"
|
||||
import { useTemplateDetail } from "./hooks/useTemplateDetail"
|
||||
import { TemplateHeader } from "./components/template-library/TemplateHeader"
|
||||
import { TemplateToolbar } from "./components/template-library/TemplateToolbar"
|
||||
import { TemplateGrid } from "./components/template-library/TemplateGrid"
|
||||
import { TemplateDetailModal } from "./components/template-library/TemplateDetailModal"
|
||||
import "./templates.css"
|
||||
|
||||
const TemplateLibrary: React.FC = () => {
|
||||
const {
|
||||
templates,
|
||||
totalTemplates,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
searchText,
|
||||
activeType,
|
||||
page,
|
||||
pageSize,
|
||||
setPage,
|
||||
toggleFavorite,
|
||||
handleCopy,
|
||||
handleUse,
|
||||
handleCreate,
|
||||
handleSearchChange,
|
||||
handleCategoryChange,
|
||||
} = useTemplateLibrary()
|
||||
|
||||
const {
|
||||
previewTemplate,
|
||||
detailLoading,
|
||||
handlePreview,
|
||||
handleClose,
|
||||
handleToggleFavorite,
|
||||
handleUse: handleUseFromDetail,
|
||||
handleCopy: handleCopyFromDetail,
|
||||
} = useTemplateDetail({
|
||||
onToggleFavorite: (id) => toggleFavorite(id),
|
||||
onUse: handleUse,
|
||||
onCopy: handleCopy,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="xx-templates-page">
|
||||
{/* 页面头部 */}
|
||||
<TemplateHeader onCreateClick={handleCreate} />
|
||||
|
||||
{/* 工具栏:搜索 + 类型按钮组 + 时长筛选 */}
|
||||
<TemplateToolbar
|
||||
searchText={searchText}
|
||||
onSearchChange={handleSearchChange}
|
||||
activeType={activeType}
|
||||
onTypeChange={handleCategoryChange}
|
||||
/>
|
||||
|
||||
{/* 模板展示区 */}
|
||||
<TemplateGrid
|
||||
templates={templates}
|
||||
total={totalTemplates}
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
isLoading={isLoading}
|
||||
isError={isError}
|
||||
errorMessage={error?.message}
|
||||
searchText={searchText}
|
||||
activeType={activeType}
|
||||
onPageChange={setPage}
|
||||
onPreview={handlePreview}
|
||||
onToggleFavorite={toggleFavorite}
|
||||
onUse={handleUse}
|
||||
/>
|
||||
|
||||
{/* 详情弹窗 */}
|
||||
{previewTemplate && (
|
||||
<TemplateDetailModal
|
||||
template={previewTemplate}
|
||||
isFavorite={previewTemplate.is_favorite ?? false}
|
||||
onClose={handleClose}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
onUse={handleUseFromDetail}
|
||||
onCopy={handleCopyFromDetail}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 详情加载中的提示 */}
|
||||
{detailLoading && previewTemplate && (
|
||||
<div className="xx-template-detail-loading">加载中...</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TemplateLibrary
|
||||
Reference in New Issue
Block a user