| import { useLayoutEffect, useRef } from 'react'; |
| import type { ProblemFramingPlan, ProblemFramingStep } from '../../../shared/types/api'; |
| import { useI18n } from '../../../shared/i18n'; |
|
|
| const DESIGN_FIELDS = ['audience', 'backgroundRules', 'selectedRoute', 'alternativeRoutes', 'outOfScope', 'specialCases', 'visualMotif', 'designerHint'] as const; |
|
|
| |
| |
| const blockField = 'w-full overflow-hidden rounded-lg bg-transparent px-2 py-1.5 text-sm leading-6 text-text-primary transition-colors duration-200 hover:bg-bg-tertiary/15 focus:bg-bg-tertiary/20 focus:outline-none disabled:opacity-60'; |
| const rowField = 'w-full overflow-hidden bg-transparent text-text-primary focus:outline-none disabled:opacity-60'; |
|
|
| |
| function GrowingTextarea({ label, value, disabled, className, onChange }: { |
| label: string; |
| value: string; |
| disabled: boolean; |
| className: string; |
| onChange: (value: string) => void; |
| }) { |
| const ref = useRef<HTMLTextAreaElement>(null); |
| useLayoutEffect(() => { |
| const el = ref.current; |
| if (!el) return; |
| const fit = () => { |
| el.style.height = 'auto'; |
| el.style.height = `${el.scrollHeight}px`; |
| }; |
| fit(); |
| |
| void document.fonts?.ready.then(fit); |
| }, [value, disabled]); |
| return <textarea ref={ref} aria-label={label} rows={1} value={value} disabled={disabled} className={className} onChange={e => onChange(e.target.value)} />; |
| } |
|
|
| |
| export function ProblemPlanEditor({ plan, onChange, disabled = false }: { |
| plan: ProblemFramingPlan; |
| onChange: (plan: ProblemFramingPlan) => void; |
| disabled?: boolean; |
| }) { |
| const { t } = useI18n(); |
| const editStep = (index: number, patch: Partial<ProblemFramingStep>) => { |
| onChange({ ...plan, steps: plan.steps.map((step, i) => i === index ? { ...step, ...patch } : step) }); |
| }; |
| return <div className="mx-auto max-w-3xl space-y-6 pb-4"> |
| <header className="space-y-3"> |
| <h2 className="text-xl text-text-primary">{plan.headline}</h2> |
| <p className="text-sm leading-6 text-text-secondary">{plan.summary}</p> |
| {(['question', 'answer'] as const).map(field => plan[field] !== undefined && <label key={field} className="block"> |
| <span className="text-xs tracking-[0.14em] text-text-tertiary">{t(`problem.field.${field}`)}</span> |
| <GrowingTextarea label={t(`problem.field.${field}`)} className={blockField} value={plan[field]} disabled={disabled} onChange={value => onChange({ ...plan, [field]: value })} /> |
| </label>)} |
| </header> |
| {/* 时间轴：一条 rail 串起全部步骤，节点圆点落在 rail 上，步骤是一次论证，不是十二个盒子。 |
| 颜色必须是裸字面量：类名一旦靠变量拼接，Tailwind 与运行时各拿一份，圆点会静默变透明。 */} |
| <ol className="space-y-5"> |
| {plan.steps.map((step, index) => { |
| const startsPhase = index === 0 || step.phase !== plan.steps[index - 1].phase; |
| return <li key={index} className="group relative pl-9"> |
| {/* 线先渲染、圆点后渲染：节点压在 rail 上，而不是被 rail 划开 */} |
| <span aria-hidden="true" className={`absolute left-1 w-px bg-text-tertiary/25 ${index === 0 ? 'top-[40px]' : 'top-0'} ${index === plan.steps.length - 1 ? 'hidden' : 'bottom-[-20px]'}`} /> |
| <span aria-hidden="true" className={`absolute left-0 h-[9px] w-[9px] rounded-full bg-text-tertiary/55 transition-colors duration-200 group-focus-within:bg-accent ${startsPhase ? 'top-[39.5px]' : 'top-[15.5px]'}`} /> |
| {startsPhase && <h3 className={`flex items-center gap-3 text-xs tracking-[0.18em] text-text-tertiary ${index === 0 ? 'mb-2' : 'mb-2 mt-8'}`}> |
| {t(`problem.phase.${step.phase || 'steps'}`)} |
| <span aria-hidden="true" className="h-px flex-1 bg-text-tertiary/15" /> |
| </h3>} |
| <div className="rounded-lg px-2 py-1.5 transition-colors duration-200 group-focus-within:bg-bg-tertiary/20 group-hover:bg-bg-tertiary/10"> |
| <div className="flex items-center gap-2"> |
| <span aria-hidden="true" className="w-6 shrink-0 text-xs tabular-nums text-text-tertiary">{String(index + 1).padStart(2, '0')}</span> |
| <input aria-label={`${t('problem.step')} ${index + 1} ${t('problem.stepTitle')}`} className={`${rowField} text-base leading-7`} value={step.title} disabled={disabled} onChange={e => editStep(index, { title: e.target.value })} /> |
| </div> |
| <GrowingTextarea label={`${t('problem.step')} ${index + 1} ${t('problem.stepContent')}`} className={`${rowField} pl-8 text-sm leading-6`} value={step.content} disabled={disabled} onChange={value => editStep(index, { content: value })} /> |
| </div> |
| </li>; |
| })} |
| </ol> |
| <details className="border-t border-text-tertiary/15 pt-4"> |
| <summary className="cursor-pointer text-sm text-text-secondary transition-colors hover:text-text-primary">{t('problem.designBasis')}</summary> |
| <div className="mt-4 space-y-4">{DESIGN_FIELDS.map(field => plan[field] !== undefined && <label key={field} className="block"> |
| <span className="text-xs tracking-[0.14em] text-text-tertiary">{t(`problem.field.${field}`)}</span> |
| <GrowingTextarea label={t(`problem.field.${field}`)} className={blockField} value={plan[field]} disabled={disabled} onChange={value => onChange({ ...plan, [field]: value })} /> |
| </label>)}</div> |
| </details> |
| </div>; |
| } |
|
|
