212 lines
8.4 KiB
TypeScript
212 lines
8.4 KiB
TypeScript
'use client'
|
||
|
||
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
||
import type { DisplayTemplate } from './types'
|
||
|
||
interface CustomTemplateSectionProps {
|
||
loading: boolean
|
||
error: string | null
|
||
templates: DisplayTemplate[]
|
||
filteredTemplates: DisplayTemplate[]
|
||
deletingId: string | null
|
||
canManageCustomTemplates: boolean
|
||
onRequestUpgrade: () => void
|
||
onCreate: () => void
|
||
onPreview: (template: DisplayTemplate) => void
|
||
onActivate: (id: string) => void
|
||
onDeactivate: (id: string) => void
|
||
onEdit: (template: DisplayTemplate) => void
|
||
onDuplicate: (template: DisplayTemplate) => void
|
||
onDelete: (id: string) => void
|
||
}
|
||
|
||
export default function CustomTemplateSection({
|
||
loading,
|
||
error,
|
||
templates,
|
||
filteredTemplates,
|
||
deletingId,
|
||
canManageCustomTemplates,
|
||
onRequestUpgrade,
|
||
onCreate,
|
||
onPreview,
|
||
onActivate,
|
||
onDeactivate,
|
||
onEdit,
|
||
onDuplicate,
|
||
onDelete,
|
||
}: CustomTemplateSectionProps) {
|
||
const styles = useThemeStyles()
|
||
|
||
const runTemplateAction = (action: () => void) => {
|
||
if (!canManageCustomTemplates) {
|
||
onRequestUpgrade()
|
||
return
|
||
}
|
||
action()
|
||
}
|
||
|
||
return (
|
||
<div className="px-6 pt-5 pb-4">
|
||
<div className="flex flex-col gap-3 mb-3 sm:flex-row sm:items-center sm:justify-between">
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="text-sm font-semibold text-slate-900 dark:text-white">自定义模板</h3>
|
||
{!canManageCustomTemplates && (
|
||
<span className="inline-flex items-center rounded-md border border-slate-200 bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
|
||
授权受限
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
|
||
{canManageCustomTemplates
|
||
? '这里列出你自己创建的模板，可继续编辑、复制或删除'
|
||
: '当前许可证未包含自定义模板功能，请联系管理员处理授权'}
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (!canManageCustomTemplates) {
|
||
onRequestUpgrade()
|
||
return
|
||
}
|
||
onCreate()
|
||
}}
|
||
className={cn(
|
||
canManageCustomTemplates ? styles.buttonStyles.primary : styles.buttonStyles.secondary,
|
||
styles.buttonModifiers.compactXs,
|
||
'w-full sm:w-auto'
|
||
)}
|
||
>
|
||
{canManageCustomTemplates ? '新建自定义模板' : '授权后可新建'}
|
||
</button>
|
||
</div>
|
||
|
||
{loading ? (
|
||
<div className="p-8 text-center text-slate-500 dark:text-slate-400">加载中...</div>
|
||
) : error ? (
|
||
<div className="p-8 text-center text-red-500 dark:text-red-300">{error}</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{templates.length === 0 ? (
|
||
<div className="rounded-lg border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">暂无自定义模板。</div>
|
||
) : filteredTemplates.length === 0 ? (
|
||
<div className="rounded-lg border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">未找到匹配的模板名称，请调整搜索关键词。</div>
|
||
) : (
|
||
filteredTemplates.map((tpl) => (
|
||
<div
|
||
key={tpl.id}
|
||
onClick={() => onPreview(tpl)}
|
||
className="group relative cursor-pointer rounded-lg border border-slate-200 bg-white px-4 py-3 transition-colors hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:hover:border-slate-600 dark:hover:bg-slate-800/70"
|
||
>
|
||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||
<div className="min-w-0 space-y-1">
|
||
<p className="text-sm font-semibold text-slate-900 dark:text-white">{tpl.name}</p>
|
||
{tpl.description && (
|
||
<p className="text-xs text-slate-500 dark:text-slate-400 leading-snug line-clamp-2">{tpl.description}</p>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-wrap items-center justify-start gap-2 lg:justify-end">
|
||
<span
|
||
className={`px-2 py-0.5 text-xs font-medium rounded-md transition-colors ${
|
||
tpl.status === 'active'
|
||
? 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300'
|
||
: tpl.status === 'draft'
|
||
? 'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-300'
|
||
: 'bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300'
|
||
}`}
|
||
>
|
||
{tpl.statusLabel}
|
||
</span>
|
||
<span className="text-[11px] text-slate-400 dark:text-slate-500">
|
||
{tpl.updatedLabel} · 版本 {tpl.version}
|
||
</span>
|
||
{tpl.status === 'active' ? (
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
runTemplateAction(() => onDeactivate(tpl.id))
|
||
}}
|
||
className={cn(
|
||
styles.buttonStyles.secondary,
|
||
styles.buttonModifiers.compactXs,
|
||
!canManageCustomTemplates && 'opacity-70'
|
||
)}
|
||
>
|
||
取消启用
|
||
</button>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
runTemplateAction(() => onActivate(tpl.id))
|
||
}}
|
||
className={cn(
|
||
styles.buttonStyles.success,
|
||
styles.buttonModifiers.compactXs,
|
||
!canManageCustomTemplates && 'opacity-70'
|
||
)}
|
||
>
|
||
启用
|
||
</button>
|
||
)}
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
runTemplateAction(() => onEdit(tpl))
|
||
}}
|
||
className={cn(
|
||
styles.buttonStyles.secondary,
|
||
styles.buttonModifiers.compactXs,
|
||
!canManageCustomTemplates && 'opacity-70'
|
||
)}
|
||
>
|
||
编辑
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
runTemplateAction(() => onDuplicate(tpl))
|
||
}}
|
||
className={cn(
|
||
styles.buttonStyles.secondary,
|
||
styles.buttonModifiers.compactXs,
|
||
'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200',
|
||
!canManageCustomTemplates && 'opacity-70'
|
||
)}
|
||
>
|
||
复制
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
runTemplateAction(() => onDelete(tpl.id))
|
||
}}
|
||
disabled={deletingId === tpl.id}
|
||
className={cn(
|
||
styles.buttonStyles.danger,
|
||
styles.buttonModifiers.compactXs,
|
||
'bg-red-500 hover:bg-red-600 text-white',
|
||
!canManageCustomTemplates && 'opacity-70',
|
||
deletingId === tpl.id && 'opacity-70 cursor-wait',
|
||
)}
|
||
>
|
||
{deletingId === tpl.id ? '删除中...' : '删除'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|