پرتوپرتو

نشان اولویت (SeverityBadge)

نمایش اولویت/فوریت یک وظیفه یا هشدار در چهار سطح (فوری/بالا/متوسط/پایین)

معرفی

SeverityBadge اولویت یک وظیفه، هشدار، تیکت، یا پیشنهاد اقدام را در چهار سطح نشان می‌دهد. این مفهوم از وضعیت عملیاتی (StatusBadge) مستقل است — یک وظیفه می‌تواند «فوری + پایین» باشد.

ورودی severity انعطاف‌پذیر است: می‌توانید کلید اولویت، کد عددی (۱ تا ۴)، یا متن (نام انگلیسی یا برچسب محلی) بدهید — کامپوننت در هر حالت اولویت درست را تشخیص می‌دهد و رنگ، آیکون و برچسب متناظر را نمایش می‌دهد.

چه زمانی استفاده کنیم:

  • در TaskCard یا ردیف وظیفه‌ی عملیات
  • در فهرست هشدارها برای مرتب‌سازی بر اساس اولویت
  • در صف «Booster» یا «Comment Generator» برای تعیین ترتیب انجام

چه زمانی استفاده نکنیم:

  • برای وضعیت عملیاتی (بحرانی/هشدار/متوسط/پایین) — از StatusBadge استفاده کنید
  • برای sentiment/emotion — از badgeهای مربوطه استفاده کنید
  • زمانی که فقط ۲ سطح کافی است — از Badge معمولی با رنگ destructive/brand استفاده کنید
فوریبالامتوسطپایین

زمین بازی

زمین بازی
متوسط
تنظیمات
ظاهر
محتوا
import { SeverityBadge } from '@parto-system-design/ui'

<SeverityBadge />

مقادیر و نگاشت عددی

نشان اولویت روی مقیاس عددی افکارسنجی کار می‌کند. کدها از 1 (فوری) شروع و به 4 (پایین) ختم می‌شوند:

کدکلید (key)برچسب فارسینام انگلیسیتوکن رنگرنگ
۱urgentفوریUrgent--severity-urgentقرمز #ef4444
۲highبالاHigh--severity-highنارنجی #f97316
۳mediumمتوسطMedium--severity-mediumکهربایی #f59e0b
۴lowپایینLow--severity-lowخاکستری #a1a1aa

استفاده

severity هر یک از این فرم‌ها را می‌پذیرد:

import { SeverityBadge } from '@parto-system-design/ui';

// ۱) کلید اولویت
<SeverityBadge severity="urgent" />

// ۲) کد عددی (۱ تا ۴) — مثلاً خروجی مستقیم API
<SeverityBadge severity={1} />     {/* → فوری */}
<SeverityBadge severity={4} />     {/* → پایین */}

// ۳) متن — نام انگلیسی، رشته‌ی عددی، یا برچسب محلی (بزرگ/کوچک مهم نیست)
<SeverityBadge severity="Urgent" /> {/* → فوری */}
<SeverityBadge severity="متوسط" />  {/* → متوسط */}
<SeverityBadge severity={'2'} />    {/* → بالا */}

// سایر تنظیمات
<SeverityBadge severity="high" variant="solid" />  // چیپ تیره برای لیست‌های فشرده
<SeverityBadge severity="low" size="sm" showLabel={false} />

// مقدار ناشناخته یا خارج از بازه → چیزی رندر نمی‌شود
<SeverityBadge severity={0} />     {/* → null */}

ورودی از کد عددی (۱ تا ۴)

فوریبالامتوسطپایین

ورودی از متن

نام انگلیسی، رشته‌ی عددی، یا برچسب فارسی/عربی — همه به یک اولویت نگاشت می‌شوند.

فوریبالامتوسطپایینفوری

انواع رنگ

soft (پیش‌فرض) چیپ رنگی تیره‌روشن است؛ solid پس‌زمینه‌ی پررنگ با متن روشن — مناسب لیست‌های انبوه یا تایم‌لاین‌ها که نیاز به خوانایی لحظه‌ای دارند.

فوریفوریبالا

Props

Prop

Type

ابزار کمکی

برای تبدیل دستی مقدار به کلید اولویت (خارج از این کامپوننت)، از resolveSeverity استفاده کنید. خروجی برای مقادیر نامعتبر null است:

import { resolveSeverity, SEVERITY_VALUE_MAP, SEVERITY_KEY_TO_VALUE } from '@parto-system-design/ui'

resolveSeverity(1) // 'urgent'
resolveSeverity('Urgent') // 'urgent'
resolveSeverity('متوسط') // 'medium'
resolveSeverity('2') // 'high'
resolveSeverity(0) // null
resolveSeverity(99) // null

SEVERITY_VALUE_MAP[1] // 'urgent'
SEVERITY_KEY_TO_VALUE.low // 4

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

بکنید

  • در یک صف وظایف، ترتیب نمایش را بر اساس urgent → high → medium → low بچینید - از variant="solid" در محیط‌های متراکم (مثل timeline) استفاده کنید که نیاز به خوانایی یک‌نگاهی دارید - از size="sm" در جدول‌ها استفاده کنید - وقتی داده‌ی API به‌صورت کد عددی می‌آید، همان عدد را مستقیم به severity بدهید — نیازی به نگاشت دستی نیست

نکنید

  • SeverityBadge را جایگزین StatusBadge نکنید — معنا متفاوت است - برای بیش از ۴ سطح اولویت از این کامپوننت استفاده نکنید — صحنه احتمالاً نیازمند بازنگری است

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

  • هر سطح هم آیکون و هم رنگ دارد
  • variant="solid" کنتراست WCAG AA با متن روشن دارد
  • aria-label در حالت showLabel={false} حفظ می‌شود

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

  • StatusBadge — وضعیت عملیاتی (بحرانی/هشدار/متوسط/پایین)
  • Badge — نشان عمومی