8705b9846a
Some checks failed
CI Check / check (push) Has been cancelled
- 创建统一的Modal组件，采用Apple风格设计 - 实现毛玻璃效果、圆角、动画和细边框描边 - 修复弹窗打开时背景滚动问题 - 修复分类管理中重复卡片和数组字符串显示问题 - 优化选项解析逻辑，添加去重和过滤机制
73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
'use client'
|
||
|
||
import { useThemeStyles, useTheme, cn } from '@/lib/ui-styles'
|
||
|
||
interface TemplateManagerHeaderProps {
|
||
searchTerm: string
|
||
onSearchChange: (value: string) => void
|
||
}
|
||
|
||
export default function TemplateManagerHeader({
|
||
searchTerm,
|
||
onSearchChange,
|
||
}: TemplateManagerHeaderProps) {
|
||
const styles = useThemeStyles()
|
||
const theme = useTheme()
|
||
const textTitle = theme === 'dark' ? 'text-white' : 'text-slate-900'
|
||
const textDesc = theme === 'dark' ? 'text-slate-400' : 'text-slate-500'
|
||
|
||
return (
|
||
<section
|
||
className={cn(
|
||
'relative overflow-hidden rounded-3xl border mb-6 flex-shrink-0',
|
||
theme === 'dark'
|
||
? 'border-slate-600/60 text-white shadow-[0_28px_60px_rgba(139,92,246,0.2)] hover:shadow-[0_35px_65px_rgba(139,92,246,0.3)]'
|
||
: 'border-slate-200/70 text-slate-900 shadow-[0_28px_60px_rgba(15,23,42,0.28)] hover:shadow-[0_35px_65px_rgba(15,23,42,0.35)]',
|
||
'transition-all duration-500 p-6',
|
||
)}
|
||
>
|
||
<div className="relative z-10 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||
<div className="space-y-3">
|
||
<p className={cn('text-sm font-semibold tracking-[0.2em] uppercase', theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600')}>
|
||
Template Management
|
||
</p>
|
||
<h2 className={cn('text-2xl font-semibold', textTitle)}>模板工作台</h2>
|
||
<p className={cn('text-sm leading-relaxed', textDesc)}>
|
||
预制模板仅供参考和复制，自定义模板启用后才会对上传面板生效。
|
||
</p>
|
||
</div>
|
||
<div className="relative w-full md:w-[320px] lg:w-[360px]">
|
||
<input
|
||
type="text"
|
||
value={searchTerm}
|
||
onChange={(e) => onSearchChange(e.target.value)}
|
||
placeholder="搜索模板名称..."
|
||
className={cn(styles.inputStyles.base, 'pl-11 pr-10')}
|
||
/>
|
||
<svg className="absolute left-4 top-3 w-5 h-5 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||
</svg>
|
||
{searchTerm && (
|
||
<button
|
||
type="button"
|
||
onClick={() => onSearchChange('')}
|
||
className={cn(
|
||
styles.buttonStyles.ghost,
|
||
styles.buttonModifiers.icon,
|
||
'absolute right-2 top-2 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200',
|
||
)}
|
||
aria-label="清空模板搜索"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
|