e4dcb6260a
Some checks failed
CI Check / check (push) Has been cancelled
- 创建统一UI三层架构系统（基础层、颜色层、组合层） - 拆分Admin页面为独立Tab组件（MonitorTab、UsersTab、DepartmentsTab等） - 提取公共逻辑到Hooks（useToast、useDataFetch、useUserOperations等） - 提取工具函数（validators、formatters、api等） - 创建统一弹窗组件（Modal）和useModal Hook - 添加错误边界和统一状态组件 - 完善类型定义和可访问性支持 - 更新文档（优化记录、优化计划、更新日志）
59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
'use client'
|
||
|
||
import { buttonStyles, buttonModifiers, inputStyles, cn } from '@/lib/ui-styles'
|
||
|
||
interface TemplateManagerHeaderProps {
|
||
searchTerm: string
|
||
onSearchChange: (value: string) => void
|
||
}
|
||
|
||
export default function TemplateManagerHeader({
|
||
searchTerm,
|
||
onSearchChange,
|
||
}: TemplateManagerHeaderProps) {
|
||
return (
|
||
<section className="rounded-2xl border border-slate-200/70 dark:border-slate-600/60 bg-gradient-to-br from-[#e9efff] via-[#dfe6ff] to-[#d3ddff] dark:from-[#0b1424] dark:via-[#111c32] dark:to-[#1b2740] text-slate-900 dark:text-white shadow-[0_18px_38px_rgba(15,23,42,0.16)] p-6">
|
||
<div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
|
||
<div className="space-y-3 w-full">
|
||
<div className="space-y-1.5">
|
||
<p className="text-sm font-semibold tracking-wide text-slate-900 dark:text-white/90">模板工作台</p>
|
||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||
预制模板仅供参考和复制，自定义模板启用后才会对上传面板生效。
|
||
</p>
|
||
</div>
|
||
</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(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(
|
||
buttonStyles.ghost,
|
||
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>
|
||
)
|
||
}
|
||
|
||
|