MMD
5ed082631e
لایه ویرایش بصری روی سایت واقعی (بدون داشبورد جدا): - ورود ادمین از مسیر پنهان /admin/login با توکن JWT (localStorage) و AdminContext شامل isEditMode و وضعیت ذخیره (همگام/در حال ذخیره/خطا) - AdminBar شناور پایین صفحه (فقط برای کاربر واردشده): کلید حالت ویرایش، وضعیت ذخیره، خروج — حالت ویرایش در sessionStorage می‌ماند - InlineEdit: در حالت عادی دقیقاً همان HTML قبلی (بدون تغییر چیدمان)؛ در حالت ویرایش کادرخط‌چین + contentEditable با ذخیره خودکار در blur (Enter ذخیره، Esc لغو) — وایرایش‌شده روی همه متن‌های سایت: هیرو، تیتر بخش‌ها، هیرو صفحات، داستان، فرم تماس، خبرنامه، فوتر، منو، برچسب‌های وضعیت پروژه و... - کشوی عمومی EntityDrawer با پیکربندی متمرکز برای ۱۴ مجموعه (خدمات، پروژه‌ها، مقالات، نظرات، سوالات، تیم، تایم‌لاین، آمار، چرا آرامش، مدل‌های سرمایه‌گذاری، مراحل کار، دفاتر، گالری، منو): ویرایش چندفیلدی، افزودن، حذف و جابه‌جایی ترتیب (▲▼) با ذخیره خودکار هر فیلد - دکمه‌های شناور ویرایش/حذف/ترتیب فقط در حالت ویرایش روی آیتم‌ها - کشوهای یگانه: برند و لوگو، تنظیمات هیرو، فرم تماس، خبرنامه، فوتر، قبل/بعد و نقل‌قول داستان — آپلود تصویر به MinIO از همان‌جا - به‌روزرسانی خوش‌بینانه SiteContext (updateSite) پس از هر PATCH؛ مسیرها در حالت ویرایش کلیک نمی‌شوند؛ breadcrumb محافظ beforeunload
59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import { Reveal } from './Reveal'
|
|
import { useSectionHeading } from '../api'
|
|
import { useFieldSaver } from '../admin/AdminContext'
|
|
import { InlineEdit } from './admin/InlineEdit'
|
|
|
|
type SectionHeadingProps = {
|
|
/** در صورت ارسال، تیتر و توضیح از دیتابیس خوانده و به‌صورت درجا ویرایش‌پذیر می‌شوند */
|
|
headingKey?: string
|
|
title?: string
|
|
lead?: string
|
|
align?: 'right' | 'center'
|
|
tone?: 'copper' | 'ivory'
|
|
}
|
|
|
|
export function SectionHeading({
|
|
headingKey,
|
|
title,
|
|
lead,
|
|
align = 'right',
|
|
tone = 'ivory',
|
|
}: SectionHeadingProps) {
|
|
const heading = useSectionHeading(headingKey ?? '')
|
|
const save = useFieldSaver()
|
|
const isDb = !!headingKey
|
|
const currentTitle = isDb ? heading.title : (title ?? '')
|
|
const currentLead = isDb ? heading.lead : (lead ?? '')
|
|
const isCenter = align === 'center'
|
|
|
|
const saveField = (field: 'title' | 'lead', value: string) =>
|
|
save('section-headings', heading.id, { [field]: value }, (d) => {
|
|
const h = d.section_headings.find((s) => s.id === heading.id)
|
|
if (h) (h as Record<string, unknown>)[field] = value
|
|
})
|
|
|
|
return (
|
|
<Reveal className={isCenter ? 'mx-auto max-w-2xl text-center' : 'max-w-2xl text-right'}>
|
|
<InlineEdit
|
|
as="h2"
|
|
value={currentTitle}
|
|
onSave={(v) => saveField('title', v)}
|
|
className={`text-section font-bold ${tone === 'copper' ? 'text-copper' : 'text-ivory'}`}
|
|
/>
|
|
|
|
{currentLead && (
|
|
<InlineEdit
|
|
as="p"
|
|
multiline
|
|
value={currentLead}
|
|
onSave={(v) => saveField('lead', v)}
|
|
className="mt-5 text-base font-light leading-9 text-ivory/60"
|
|
/>
|
|
)}
|
|
|
|
<div className={`mt-6 h-px w-24 bg-copper/70 ${isCenter ? 'mx-auto' : ''}`} />
|
|
</Reveal>
|
|
)
|
|
}
|