@@ -1,111 +0,0 @@
|
||||
/**
|
||||
* 我的模板页面
|
||||
* 卡片视图展示用户已保存的剪辑模板
|
||||
* 支持搜索、分类筛选、编辑/复制/删除/使用模板生成
|
||||
*/
|
||||
import React from "react"
|
||||
import { Typography, Input, Select, Button, Empty, Spin, Row, Col } from "antd"
|
||||
import { SearchOutlined, AppstoreOutlined, PlusOutlined } from "@ant-design/icons"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import type { EditingTemplate } from "@/api/editing-planner"
|
||||
import { useMyTemplates } from "./hooks/useMyTemplates"
|
||||
import { TemplateCard } from "./components/TemplateCard"
|
||||
import "./MyTemplates.css"
|
||||
|
||||
const { Title, Text } = Typography
|
||||
|
||||
const MyTemplates: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const {
|
||||
searchText,
|
||||
setSearchText,
|
||||
filterCategory,
|
||||
setFilterCategory,
|
||||
templates,
|
||||
categories,
|
||||
isLoading,
|
||||
handleCopy,
|
||||
handleDelete,
|
||||
} = useMyTemplates()
|
||||
|
||||
const handleEdit = (tpl: EditingTemplate) => {
|
||||
navigate(`/editing-planner?template=${tpl.id}`)
|
||||
}
|
||||
|
||||
const handleGenerate = (tpl: EditingTemplate) => {
|
||||
navigate(`/generate?templateId=${tpl.id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-page">
|
||||
{/* 页面头部 */}
|
||||
<div className="mt-head">
|
||||
<div>
|
||||
<Title level={4} style={{ margin: 0 }}>
|
||||
<AppstoreOutlined style={{ marginRight: 8 }} />
|
||||
我的模板
|
||||
</Title>
|
||||
<Text type="secondary">管理你创建的剪辑模板,快速复用生成视频</Text>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => navigate("/app/editing-planner")}
|
||||
>
|
||||
新建模板
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 筛选栏 */}
|
||||
<div className="mt-filters">
|
||||
<Input
|
||||
prefix={<SearchOutlined />}
|
||||
placeholder="搜索模板名称或标签..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
allowClear
|
||||
style={{ width: 280 }}
|
||||
/>
|
||||
<Select
|
||||
placeholder="按分类筛选"
|
||||
value={filterCategory || undefined}
|
||||
onChange={(v) => setFilterCategory(v || "")}
|
||||
allowClear
|
||||
style={{ width: 160 }}
|
||||
options={categories.map((c) => ({ value: c.name, label: c.name }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 模板卡片列表 */}
|
||||
<div className="mt-content">
|
||||
{isLoading ? (
|
||||
<div style={{ textAlign: "center", padding: 80 }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : templates.length === 0 ? (
|
||||
<Empty description="还没有模板,点击右上角「新建模板」开始创建" style={{ padding: 80 }}>
|
||||
<Button type="primary" onClick={() => navigate("/app/editing-planner")}>
|
||||
新建模板
|
||||
</Button>
|
||||
</Empty>
|
||||
) : (
|
||||
<Row gutter={[16, 16]}>
|
||||
{templates.map((tpl) => (
|
||||
<Col key={tpl.id} xs={24} sm={12} md={8} lg={6}>
|
||||
<TemplateCard
|
||||
tpl={tpl}
|
||||
onEdit={handleEdit}
|
||||
onCopy={handleCopy}
|
||||
onGenerate={handleGenerate}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyTemplates
|
||||
Reference in New Issue
Block a user