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 - 添加错误边界和统一状态组件 - 完善类型定义和可访问性支持 - 更新文档（优化记录、优化计划、更新日志）
92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
'use client'
|
||
|
||
import { cardStyles, inputStyles, inputModifiers, cn } from '@/lib/ui-styles'
|
||
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) {
|
||
return (
|
||
<div className={cn(cardStyles.base, 'p-4')}>
|
||
<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={cn(inputStyles.base, inputModifiers.compact, 'font-mono')}
|
||
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={cn(inputStyles.base, inputModifiers.compact, 'font-mono')}
|
||
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>
|
||
)
|
||
}
|
||
|
||
|