نشان اولویت (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
ابزار کمکی
برای تبدیل دستی مقدار به کلید اولویت (خارج از این کامپوننت)، از 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 — نشان عمومی