@@ -1,108 +0,0 @@
|
||||
import React from "react"
|
||||
import { Pagination } from "antd"
|
||||
import { InboxOutlined, LoadingOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
|
||||
import { TemplateCard } from "./TemplateCard"
|
||||
import type { TemplateItem } from "@/api/templates"
|
||||
|
||||
interface TemplateGridProps {
|
||||
templates: TemplateItem[]
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
isLoading: boolean
|
||||
isError: boolean
|
||||
errorMessage?: string
|
||||
searchText: string
|
||||
activeType: string
|
||||
onPageChange: (page: number) => void
|
||||
onPreview: (template: TemplateItem) => void
|
||||
onToggleFavorite: (id: string, e: React.MouseEvent) => void
|
||||
onUse: (template: TemplateItem) => void
|
||||
}
|
||||
|
||||
export const TemplateGrid: React.FC<TemplateGridProps> = ({
|
||||
templates,
|
||||
total,
|
||||
page,
|
||||
pageSize,
|
||||
isLoading,
|
||||
isError,
|
||||
errorMessage,
|
||||
searchText,
|
||||
activeType,
|
||||
onPageChange,
|
||||
onPreview,
|
||||
onToggleFavorite,
|
||||
onUse,
|
||||
}) => {
|
||||
// Loading 状态
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="xx-templates-empty">
|
||||
<div className="xx-templates-empty-icon">
|
||||
<LoadingOutlined />
|
||||
</div>
|
||||
<h3>加载模板中...</h3>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Error 状态
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="xx-templates-empty">
|
||||
<div className="xx-templates-empty-icon">
|
||||
<ExclamationCircleOutlined />
|
||||
</div>
|
||||
<h3>加载失败</h3>
|
||||
<p>{errorMessage || "网络异常,请稍后重试"}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 空状态
|
||||
if (templates.length === 0) {
|
||||
const hasFilter = !!searchText || activeType !== "全部"
|
||||
return (
|
||||
<div className="xx-templates-empty">
|
||||
<div className="xx-templates-empty-icon">
|
||||
<InboxOutlined />
|
||||
</div>
|
||||
<h3>{hasFilter ? "未找到匹配的模板" : "暂无模板"}</h3>
|
||||
<p>{hasFilter ? "试试调整搜索条件或切换类型" : "点击上方「创建模板」开始创作"}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="xx-templates-grid">
|
||||
{templates.map((tpl) => (
|
||||
<TemplateCard
|
||||
key={tpl.id}
|
||||
template={tpl}
|
||||
isFavorite={tpl.is_favorite ?? false}
|
||||
onPreview={onPreview}
|
||||
onToggleFavorite={onToggleFavorite}
|
||||
onUse={onUse}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
{total > pageSize && (
|
||||
<div className="xx-templates-pagination">
|
||||
<Pagination
|
||||
current={page}
|
||||
pageSize={pageSize}
|
||||
total={total}
|
||||
showSizeChanger={false}
|
||||
showQuickJumper
|
||||
showTotal={(t) => `共 ${t} 个模板`}
|
||||
onChange={onPageChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user