دو تصمیم هم‌وزن (DecisionActions)

معرفی

قاعدهٔ سیستم طراحی این است: هر ناحیهٔ مستقل یک اقدام اصلی دارد — سرِ صفحه (با نوارابزارش)، یک پنل (PagePane)، یک بخش تنظیمات، یک کشو یا یک دیالوگ. ولی بعضی جاها دو تصمیم هم‌وزن‌اند: تأیید یا رد برچسب‌های پیشنهادی، پذیرفتن یا نپذیرفتن یک تطبیق چهره، انتشار یا بازگرداندن. DecisionActions همین جفت است، به‌عنوان یک اقدام: آن را همان‌جا بدهید که اقدام اصلی ناحیه می‌رود.

• emphasis="region" (پیش‌فرض) — جفت، اقدام اصلی ناحیه است: «تأیید» اصلی و «رد» خطرناک، هم‌اندازه، «تأیید» در انتها؛
• emphasis="item" — یک جفت برای هر مورد از یک صف بررسی (کارت، ردیف): هر دو خنثی با آیکونشان، تا صفی از بیست مورد چهل دکمهٔ رنگی نشود؛
• pending — تصمیمی که در حال فرستادن است اسپینر دارد و دیگری منتظر می‌ماند؛
• disabledReason — تصمیمی که کاربر اجازه‌اش را ندارد، همان‌جا غیرفعال با دلیلش (GatedAction).

استفاده

'use client'
import * as React from 'react'
import { toast } from '@partodata/ui'
import { DecisionActions, DetailPage, DetailSection } from '@partodata/ui/templates'

export function LabelReviewScreen() {
  const [pending, setPending] = React.useState<'approve' | 'reject'>()
  const decide = (kind: 'approve' | 'reject') => async () => {
    setPending(kind)
    await fetch(`/api/labels/review/${kind}`, { method: 'POST' })
    setPending(undefined)
    toast.success(kind === 'approve' ? 'برچسب‌ها تأیید شد' : 'برچسب‌ها رد شد')
  }
  return (
    <DetailPage
      title="برچسب‌های پیشنهادی"
      back={{ href: '/analyses', label: 'تحلیل‌ها' }}
      primaryAction={
        <DecisionActions
          pending={pending}
          approve={{ label: 'تأیید', onClick: decide('approve') }}
          reject={{ label: 'رد', onClick: decide('reject') }}
        />
      }
    >
      <DetailSection title="برچسب‌ها">…</DetailSection>
    </DetailPage>
  )
}

حالت‌ها و انواع

در محیط توسعه، اگر سرِ صفحه (یا نوارابزار و سرِ ناحیه‌اش) بیش از یک دکمهٔ اصلی رندر کند، هشدار می‌دهد و همین جفت را پیشنهاد می‌کند.

راهنمای استفاده

Props

DecisionActions

DecisionAction

دسترسی‌پذیری

• جفت یک گروه با نام «تصمیم» است؛ هر دکمه آیکون و متن فعلش را دارد (رنگ تنها نشانه نیست).
• تصمیمی که اجازه‌اش نیست با aria-disabled در دسترس صفحه‌کلید می‌ماند و دلیلش توضیح آن است.

کامپوننت‌های مرتبط

• GatedAction — اقدامی که کاربر اجازه‌اش را ندارد.
• EntityDrawer — کشویی که پاورقی‌اش جای این جفت است.