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 - 添加错误边界和统一状态组件 - 完善类型定义和可访问性支持 - 更新文档（优化记录、优化计划、更新日志）
103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
'use client'
|
||
|
||
import { buttonStyles, buttonModifiers, inputStyles, cn } from '@/lib/ui-styles'
|
||
import type { TemplateForm, BuiltinTemplateConfig } from '../types'
|
||
|
||
interface TemplateBasicsFormProps {
|
||
form: TemplateForm
|
||
statusOptions: Array<{ value: string; label: string }>
|
||
showPresetSelector: boolean
|
||
selectedPreset: string | null
|
||
presets: BuiltinTemplateConfig[]
|
||
onChange: (patch: Partial<TemplateForm>) => void
|
||
onSelectPreset: (presetKey: string) => void
|
||
}
|
||
|
||
export default function TemplateBasicsForm({
|
||
form,
|
||
statusOptions,
|
||
showPresetSelector,
|
||
selectedPreset,
|
||
presets,
|
||
onChange,
|
||
onSelectPreset,
|
||
}: TemplateBasicsFormProps) {
|
||
return (
|
||
<div className="space-y-5">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-slate-900 dark:text-white mb-2">
|
||
模板名称 <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={form.name}
|
||
onChange={(e) => onChange({ name: e.target.value })}
|
||
className={cn(inputStyles.base)}
|
||
placeholder="例如：产品素材模板"
|
||
/>
|
||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1.5">给模板起一个容易识别的名称</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-slate-900 dark:text-white mb-2">模板描述</label>
|
||
<textarea
|
||
rows={2}
|
||
value={form.description}
|
||
onChange={(e) => onChange({ description: e.target.value })}
|
||
className={cn(inputStyles.base, 'resize-none')}
|
||
placeholder="简单描述这个模板的用途"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-slate-900 dark:text-white mb-2">模板状态</label>
|
||
<select
|
||
value={form.status}
|
||
onChange={(e) => onChange({ status: e.target.value })}
|
||
className={cn(inputStyles.base)}
|
||
>
|
||
{statusOptions.map((option) => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1.5">草稿：仅保存，不生效；启用：用户可以使用</p>
|
||
</div>
|
||
|
||
{showPresetSelector && (
|
||
<div>
|
||
<label className="block text-sm font-semibold text-slate-900 dark:text-white mb-2">选择预设模板</label>
|
||
<div className="flex flex-wrap gap-2">
|
||
{presets.map((preset) => {
|
||
const active = selectedPreset === preset.key
|
||
return (
|
||
<button
|
||
key={preset.key}
|
||
type="button"
|
||
onClick={() => onSelectPreset(preset.key)}
|
||
className={cn(
|
||
active ? buttonStyles.primary : buttonStyles.secondary,
|
||
buttonModifiers.compactXs,
|
||
buttonModifiers.pill,
|
||
'flex items-center gap-1.5 shadow-none',
|
||
!active && 'border-dashed',
|
||
)}
|
||
>
|
||
{active && <span className="inline-block w-1.5 h-1.5 rounded-full bg-white" />}
|
||
<span>{preset.name}</span>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1.5">
|
||
选择一个预设模板后，下方字段会自动填充，可在此基础上继续增删或调整。
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
|