94 lines
3.7 KiB
TypeScript
94 lines
3.7 KiB
TypeScript
'use client'
|
||
|
||
import type { TemplateForm } from '../types'
|
||
|
||
interface TemplateAdvancedConfigPanelProps {
|
||
form: TemplateForm
|
||
advancedConfigOpen: boolean
|
||
onToggle: () => void
|
||
fieldGroupsError: string | null
|
||
displayConfigError: string | null
|
||
onFieldGroupsChange: (value: string) => void
|
||
onDisplayConfigChange: (value: string) => void
|
||
onFieldGroupsErrorChange: (value: string | null) => void
|
||
onDisplayConfigErrorChange: (value: string | null) => void
|
||
}
|
||
|
||
export default function TemplateAdvancedConfigPanel({
|
||
form,
|
||
advancedConfigOpen,
|
||
onToggle,
|
||
fieldGroupsError,
|
||
displayConfigError,
|
||
onFieldGroupsChange,
|
||
onDisplayConfigChange,
|
||
onFieldGroupsErrorChange,
|
||
onDisplayConfigErrorChange,
|
||
}: TemplateAdvancedConfigPanelProps) {
|
||
const textareaClass =
|
||
'w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors placeholder:text-slate-400 focus:border-slate-500 focus:ring-2 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-900 dark:text-white dark:focus:border-slate-500 dark:focus:ring-slate-700 font-mono'
|
||
|
||
return (
|
||
<div className="rounded-lg border border-slate-200 bg-slate-50/50 p-4 transition-colors dark:border-slate-700 dark:bg-slate-800/40">
|
||
<button type="button" onClick={onToggle} className="w-full flex items-center justify-between text-left">
|
||
<div>
|
||
<p className="text-sm font-semibold text-slate-900 dark:text-white">高级显示 / 分组配置（选填）</p>
|
||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1">仅在需要自定义上传布局或字段分组时填写，支持 JSON</p>
|
||
</div>
|
||
<svg
|
||
className={`w-5 h-5 text-slate-500 dark:text-slate-400 transition-transform ${advancedConfigOpen ? 'rotate-180' : ''}`}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
{advancedConfigOpen && (
|
||
<div className="mt-4 space-y-4">
|
||
<div>
|
||
<label className="block text-xs font-medium text-slate-700 dark:text-slate-300 mb-1.5">字段分组（fieldGroups）</label>
|
||
<textarea
|
||
rows={3}
|
||
value={form.fieldGroups}
|
||
onChange={(e) => {
|
||
onFieldGroupsErrorChange(null)
|
||
onFieldGroupsChange(e.target.value)
|
||
}}
|
||
className={textareaClass}
|
||
placeholder='例如：{"groups":[{"title":"核心信息","fieldKeys":["materialType","productModel"]}]}'
|
||
/>
|
||
{fieldGroupsError ? (
|
||
<p className="text-xs text-red-500 mt-1">{fieldGroupsError}</p>
|
||
) : (
|
||
<p className="text-[11px] text-slate-400 dark:text-slate-500 mt-1">留空即可使用默认展示顺序。</p>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-slate-700 dark:text-slate-300 mb-1.5">展示配置（displayConfig）</label>
|
||
<textarea
|
||
rows={3}
|
||
value={form.displayConfig}
|
||
onChange={(e) => {
|
||
onDisplayConfigErrorChange(null)
|
||
onDisplayConfigChange(e.target.value)
|
||
}}
|
||
className={textareaClass}
|
||
placeholder='例如：{"layout":"two-column","showPreview":true}'
|
||
/>
|
||
{displayConfigError ? (
|
||
<p className="text-xs text-red-500 mt-1">{displayConfigError}</p>
|
||
) : (
|
||
<p className="text-[11px] text-slate-400 dark:text-slate-500 mt-1">用于自定义上传界面元素，非必要可不填。</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
|