فرانت‌اند: نسخه انگلیسی با مسیر /en/ — مسیریابی دوزبانه، دیکشنری رابط، بومی‌سازی داده، تغییر زبان در هدر، ویرایش انگلیسی در پنل و پشتیبانی LTR

2026-09-12 23:37:55 +03:30
parent 6bb6226e06
commit 6b49d035c2
43 changed files with 1194 additions and 262 deletions
@@ -16,12 +16,18 @@ type Draft = {
  id: number
  slug: string
  title: string
+  title_en: string
  date: string
+  date_en: string
  category: string
+  category_en: string
  image: string
  read: string
+  read_en: string
  excerpt: string
+  excerpt_en: string
  body: ArticleBodyDoc
+  body_en: ArticleBodyDoc
  status: 'draft' | 'published'
  seo_keyphrase: string
 }
@@ -37,7 +43,7 @@ const STATUS_TEXT: Record<string, string> = {
 * مسیرها: /admin/write (مقاله جدید) و /admin/write/:id (ویرایش).
 */
 export function ArticleWritePage() {
-  const { isAuthenticated, saveStatus, runSave } = useAdmin()
+  const { isAuthenticated, saveStatus, runSave, editLang, toggleEditLang } = useAdmin()
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const { data, updateSite } = useSiteData()
@@ -50,12 +56,18 @@ export function ArticleWritePage() {
    id: 0,
    slug: `article-${Date.now()}`,
    title: '',
+    title_en: '',
    date: new Date().toLocaleDateString('fa-IR'),
+    date_en: '',
    category: 'یادداشت',
+    category_en: '',
    image: '',
    read: '۵ دقیقه',
+    read_en: '',
    excerpt: '',
+    excerpt_en: '',
    body: EMPTY_DOC,
+    body_en: EMPTY_DOC,
    status: 'draft',
    seo_keyphrase: '',
  })
@@ -90,9 +102,14 @@ export function ArticleWritePage() {
  // وقتی مقاله موجود شناخته شد، فرم و شناسه ساخته‌شده یک‌بار مقداردهی می‌شود
  useEffect(() => {
    if (!article || createdRef.current) return
+    const rawEnBody = (article as unknown as { body_en?: unknown }).body_en
    setDraft({
-      ...article,
+      ...(article as unknown as Draft),
      body: (Array.isArray(article.body) ? EMPTY_DOC : article.body) as ArticleBodyDoc,
+      body_en:
+        rawEnBody && typeof rawEnBody === 'object' && !Array.isArray(rawEnBody)
+          ? (rawEnBody as ArticleBodyDoc)
+          : EMPTY_DOC,
    })
    setCreatedId(article.id)
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -190,6 +207,9 @@ export function ArticleWritePage() {
      queueSave({ [name]: e.target.value }),
  })

+  // در زبان انگلیسی، فیلدهای متنی به ستون‌های _en می‌روند؛ اسلاگ/تصویر/وضعیت مشترک‌اند
+  const suf = <N extends string>(name: N) => `${name}${editLang === 'en' ? '_en' : ''}` as keyof Draft
+
  return (
    <div dir="rtl" className="min-h-screen bg-ink font-pinar text-ivory">
      {/* نوار بالا */}
@@ -205,6 +225,18 @@ export function ArticleWritePage() {
          </Link>

          <div className="flex items-center gap-4">
+            <button
+              type="button"
+              onClick={toggleEditLang}
+              title="تعیین می‌کند متن مقاله روی کدام زبان ذخیره شود"
+              className={`px-4 py-2 text-xs font-bold transition-colors duration-200 ${
+                editLang === 'en'
+                  ? 'bg-copper text-char'
+                  : 'border border-ivory/20 text-ivory/70 hover:border-copper hover:text-copper'
+              }`}
+            >
+              {editLang === 'fa' ? 'ویرایش: فارسی' : 'Edit: English'}
+            </button>
            <span className="flex items-center gap-2 text-xs font-light text-ivory/60">
              {saveStatus === 'idle' && <CheckIcon className="h-3.5 w-3.5 text-emerald-400" />}
              {STATUS_TEXT[saveStatus]}
@@ -239,7 +271,7 @@ export function ArticleWritePage() {
                  {draft.status === 'draft' ? 'انتشار در سایت' : 'تبدیل به پیش‌نویس'}
                </button>
                <Link
-                  to={`/blog/${draft.slug}`}
+                  to={`${editLang === 'en' ? '/en' : ''}/blog/${draft.slug}`}
                  data-admin-link
                  className="flex items-center gap-1.5 border border-ivory/20 px-4 py-2 text-xs font-light text-ivory/70 transition-colors hover:border-copper hover:text-copper"
                >
@@ -270,11 +302,11 @@ export function ArticleWritePage() {
              : 'مقاله منتشرشده — تغییرها همان لحظه در سایت اعمال می‌شود'}
        </p>

-        {/* عنوان */}
+        {/* عنوان — در ویرایش انگلیسی، متن فارسی فعلی جای‌نگهدار می‌ماند */}
        <input
          type="text"
-          {...textField('title')}
-          placeholder="عنوان مقاله…"
+          {...textField(suf('title'))}
+          placeholder={editLang === 'en' ? draft.title || 'English article title…' : 'عنوان مقاله…'}
          aria-label="عنوان مقاله"
          className="mt-4 w-full bg-transparent text-4xl font-bold leading-[1.6] text-ivory placeholder:text-ivory/25 focus:outline-none"
        />
@@ -292,11 +324,11 @@ export function ArticleWritePage() {
          />
        </div>

-        {/* متن */}
+        {/* متن — ویرایشگر روی سند زبان جاری کار می‌کند */}
        <div className="mt-8">
          <ArticleEditor
-            doc={draft.body as unknown as Record<string, unknown>}
-            onChange={(json) => queueSave({ body: json })}
+            doc={(editLang === 'en' ? draft.body_en : draft.body) as unknown as Record<string, unknown>}
+            onChange={(json) => queueSave({ [suf('body')]: json })}
          />
        </div>

@@ -328,7 +360,8 @@ export function ArticleWritePage() {
              <label className="text-xs font-light text-ivory/50">چکیده (روی کارت مقاله نمایش داده می‌شود)</label>
              <textarea
                rows={2}
-                {...textField('excerpt')}
+                {...textField(suf('excerpt'))}
+                placeholder={editLang === 'en' ? draft.excerpt || 'English excerpt…' : undefined}
                className="mt-2 w-full resize-y border border-ivory/15 bg-char px-4 py-3 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
              />
            </div>
@@ -337,7 +370,7 @@ export function ArticleWritePage() {
                <label className="text-xs font-light text-ivory/50">دسته</label>
                <input
                  type="text"
-                  {...textField('category')}
+                  {...textField(suf('category'))}
                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
                />
              </div>
@@ -345,7 +378,7 @@ export function ArticleWritePage() {
                <label className="text-xs font-light text-ivory/50">تاریخ</label>
                <input
                  type="text"
-                  {...textField('date')}
+                  {...textField(suf('date'))}
                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
                />
              </div>
@@ -353,7 +386,7 @@ export function ArticleWritePage() {
                <label className="text-xs font-light text-ivory/50">زمان مطالعه</label>
                <input
                  type="text"
-                  {...textField('read')}
+                  {...textField(suf('read'))}
                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
                />
              </div>