hamedandClaude Opus 4.8
9023ecc36f
Set primary to tauri purple, bg #fafafa/#1f1d2b, dark surface #222433, text #D7D8ED/#A1A1A1. Sync sRGB fallbacks and @supports oklch block. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
14 KiB
همسان‌سازی کامل UI پنل ادمین clinicpro با فیگما (زبان طراحی clinic-pro-tauri)
پروژه
clinicpro — فقط لایه‌ی frontend پنل ادمین (assets/admin/). بدون تغییر backend/API. تسک صرفاً بصری است: توکن‌های طراحی + کامپوننت‌های مشترک + layout هر صفحه.
هدف کلی
همه‌ی صفحات پنل ادمین clinicpro باید ظاهر و زبان طراحیِ این فیگما را داشته باشند — همان رنگ‌ها، تایپوگرافی، کارت‌ها، جدول‌ها، فرم‌ها، badgeها، سایدبار/هدر، و الگوهای موبایل (bottom sheet، منوی پایین). clinic-pro-tauri پیاده‌سازی مرجعِ همین طراحی است؛ هرجا فیگما و tauri هم‌خوان بودند از همان مقادیر استفاده کن.
فیگما: https://www.figma.com/design/76Z5FkibRdsMRisqPTIXKU/nobat724?node-id=3598-18842
fileKey = 76Z5FkibRdsMRisqPTIXKU— page:Cover— board:3598:18842(name «new version»، کل صفحات اینجاست)- ابزار: Figma MCP →
get_screenshot,get_variable_defs,get_metadataروی node-id هر فریم جداگانه (بورد کامل ۴۹۸۳۳×۱۶۰۰۰ است، یک‌جا نگیر).
معماری فعلی (مهم — قبل از شروع بخوان)
پنل ادمین clinicpro از قبل یک design-system سفارشی کامل دارد و تا حدی به سمت tauri رفته (کامنت‌های styles.css صراحتاً «دقیقاً مطابق clinic-pro-tauri»):
- استک: Tailwind v4 + CSS variables، نه MUI. MUI را وارد نکن؛ معماری را عوض نکن. فقط مقدار متغیرها و کلاس‌های موجود را به مقادیر فیگما/tauri برسان.
- فایل توکن/کامپوننت:
assets/admin/styles.css(۸۳۱ خط) — کلاس‌های.cp-*(کارت/input/button/stat/badge)،.app/.sidebar/.topbar/.nav-item،.seg,.avatar,.modal. - dark mode: کلاس
.dark+data-theme="dark"روی<html>(درAdminLayout.tsxخطوط ۱۶–۲۲). عیناً مثل tauri؛ نگه‌دار. - RTL + فونت Vazirmatn از قبل درست است؛ دست نزن.
پس این تسک «بازنویسی از صفر» نیست؛ دو بخش است: (الف) یک‌بار توکن/کامپوننت‌های مشترک را دقیق مطابق فیگما کن، (ب) بعد تک‌تک صفحات را با فریم فیگمای متناظر مقایسه و اصلاح کن.
بخش الف — سیستم طراحی مشترک (یک‌بار، پایه‌ی همه‌ی صفحات)
فایل: assets/admin/styles.css + stores/uiStore.ts + components/layout/*.
الف-۱. توکن‌های رنگ (light + dark)
اختلاف فعلی با فیگما/tauri:
| توکن | فعلی clinicpro | هدف (tauri/فیگما) |
|---|---|---|
| primary | oklch پویا ~#5457dd |
بنفش ثابت #5559CE (hover #494CB3، dark selected #6B6FD6) |
| bg light | #eef2f8 |
#fafafa |
| bg dark (body) | #080d16 |
#1f1d2b |
| surface dark (سایدبار/هدر/کارت) | #111a29 |
#222433 |
| border dark | #243042 |
#343645 (اغلب فریم‌ها transparent) |
| text dark | #e9eef7 / #9eb0c6 |
#D7D8ED / #A1A1A1 |
:root {
--brand-h: 277; --brand-c: 0.14; /* تأیید با نمونه‌گیری #5559CE از get_variable_defs */
--primary: #5559CE; --primary-600: #494CB3; --primary-700: #3E41A0;
--bg: #fafafa; --bg-2: #f2f2f5; --surface: #ffffff;
}
[data-theme="dark"] {
--bg: #1f1d2b; --bg-2: #1a1826;
--surface: #222433; --surface-2: #2a2c3d; --surface-3: #313349;
--border: #343645; --text: #D7D8ED; --text-2: #A1A1A1;
--primary: #6B6FD6;
}
بلوک
@supports (color: color-mix(in oklch …))(خطوط ۱۱۳–۱۳۹) هم primary/dark را از نو می‌سازد؛ هم sRGB و هم oklch را هماهنگ کن وگرنه مرورگر مدرن رنگ متفاوت می‌دهد. رنگ‌های status/stat-card را باget_variable_defsفیگما تأیید کن (accent نارنجی#F17732، سبز#009D79، amber#FFC051از قبل کپی شده‌اند).
الف-۲. سلکتور رنگ کاربر
primary فعلاً «قابل‌تعویض» است (brandHue در uiStore + سلکتور در Topbar.tsx). فیگما این را ندارد. پیش‌فرض brandHue را روی بنفش بگذار؛ سلکتور رنگ بماند اما default بنفش (اگر کارفرما تک‌رنگ می‌خواهد، بلوک سلکتور رنگ در Topbar.tsx خطوط ۱۱۶–۱۳۶ را حذف کن).
الف-۳. ابعاد و رفتار layout
- عرض سایدبار:
--sidebar-w: 243px، حالت جمع90px(بجای252/76). همه‌ی76pxهاردکد‌شده (styles.cssخطوط ۳۱۳، ۳۲۶، ۷۱۵) →90px. - hover-expand سایدبار مثل tauri: در
data-collapsed="true"روی:hoverعرض به243pxو برچسب‌ها/brand-textدوباره ظاهر شوند (مرجع:clinic-pro-tauri/src/components/layout/sidebar/index.jsx، کلاسhover-mode-sidebar). - ارتفاع هدر ریسپانسیو مثل tauri (
56 → 67 → 79 → 90px)؛ مقدار دقیق دسکتاپ را از فریمheaderفیگما بگیر. - border سایدبار/هدر در dark عملاً محو (
dark:border-transparent).
الف-۴. شعاع‌ها و input/button
- input/select/textarea شعاع 8px (tauri
mui.js)؛--r-smرا به8pxببر یا--r-input: 8pxبساز و در.cp-input/.cp-select/.cp-textarea(خطوط ۲۰۱–۲۲۸) استفاده کن. focus بنفش (بعد از تغییر primary خودکار). - ارتفاع دکمه‌ها را با فریم button فیگما مقایسه کن (اگر tauri 40px است،
.cp-btn-*از 42px به 40px).
الف-۵. کامپوننت‌های مشترک مطابق فیگما
این کلاس‌ها/کامپوننت‌ها پایه‌ی همه‌ی صفحات‌اند؛ هرکدام را با کامپوننت متناظر فیگما یک‌به‌یک تطبیق بده (شعاع، سایه، padding، رنگ، حالت hover/active):
| کامپوننت clinicpro | فایل | فریم مرجع فیگما |
|---|---|---|
| کارت | .cp-card (styles.css) |
کارت‌های dashboard (4836:5435) |
| stat card | components/ui/StatCard.tsx + .cp-stat |
کارت‌های بالای dashboard |
| جدول | components/ui/DataTable.tsx |
appointments-table (4840:7773)، patients-grid (5265:8540) |
| صفحه‌بندی | components/ui/Pagination.tsx |
پایین جدول‌ها |
| مودال | components/ui/Modal.tsx + .modal |
appointments-info (5635:11700) |
| badge وضعیت | components/ui/StatusBadge.tsx, AppointmentStatusDropdown.tsx |
ستون status جدول‌ها، status (6070:35666) |
| هدر صفحه | components/ui/PageHeader.tsx |
نوار عنوان فریم‌ها |
| فرم/input | .cp-input/.cp-label/... + MobileInput.tsx, PriceInput.tsx |
add patients (5287:32314)، add services |
| تقویم/تاریخ شمسی | PersianDatePicker/Calendar/DateInput.tsx |
calendar-mobile (6070:36125)، فریم‌های reserve |
| آواتار | .avatar |
آواتار هدر/کارت بیمار |
| سایدبار ناوبری | components/layout/Sidebar.tsx |
فریم menu/سایدبار |
| هدر بالا | components/layout/Topbar.tsx |
instance header (7788:39703) |
بخش ب — تطبیق تک‌تک صفحات با فریم فیگما
ایندکس فریم‌های فیگما (۴ section، node-id دسکتاپ)
section edited-appointment (نوبت‌ها) — 4836:5434:
| فریم | node-id |
|---|---|
| dashboard | 4836:5435 |
| appointments-table | 4840:7773 |
| appointments-info | 5635:11700 |
| appointments-replace | 5635:14347 |
| appointments-change | 5126:7712 |
| transfer | 6026:23601 / 6030:12460 |
| reserve-table | 5484:10961 |
| add reserve / add patients | 5760:34891 |
| edit | 6026:23229 |
section patients (پرونده/بیماران) — 5265:8539:
| فریم | node-id | فریم | node-id | |
|---|---|---|---|---|
| patients-grid | 5265:8540 |
detail | 6020:22415 |
|
| patients-card | 5642:11515 |
invoice | 5892:15788 |
|
| add patients | 5287:32314 |
wallet | 6046:13257 |
|
| services | 5339:9489 |
call center | 6328:9693 |
|
| add services | 5892:12711 |
document | 6419:10086 |
|
| booked | 6214:9519 |
patients-filter | 5272:31373 |
|
| payment / payment1–4 | 5892:13200 … 5892:14976 |
section inventory (انبار) — 7492:16182:
| inventory | 7492:15558 | inventory-package | 7501:15827 |
section setting (تنظیمات) — 6838:34246: ~۲۵ فریم seetting (تب‌های مختلف). شروع‌ها: 6923:34358, 6945:14186, 7043:24804, 7091:14411, 7291:33902. هر تب را با get_screenshot جدا بگیر.
موبایل: هر فریم دسکتاپ نسخه‌ی
*-mobile(عرض ۳۶۰) دارد + الگوهای مشترک:menu(نوار پایین،360x56)،bottom sheet،filters-mobile،status. این الگوها را در نسخه‌ی responsive صفحات clinicpro پیاده کن (بویژه bottom-sheet بجای مودال روی موبایل، و منوی پایین موبایل).
mapping صفحات clinicpro → فریم فیگما
پنل clinicpro علاوه بر صفحات پزشک/کلینیک، صفحات super-admin دارد که معادل مستقیم در فیگما ندارند. قانون:
- معادل مستقیم دارد → دقیقاً از فریم فیگما پیروی کن (layout، اجزا، رنگ).
- معادل ندارد (super-admin) → همان کامپوننت‌لایبرری و استایل مشترک (بخش الف) را اعمال کن تا هم‌خانواده‌ی فیگما به‌نظر برسد؛ ساختار جدول/فرم/کارت را از نزدیک‌ترین الگوی فیگما (جدول =
patients-grid، فرم =add patients، تنظیمات =seetting) وام بگیر.
| صفحه clinicpro | فریم فیگمای مرجع | نوع |
|---|---|---|
DashboardPage.tsx |
dashboard 4836:5435 |
مستقیم |
AppointmentsPage.tsx |
appointments-table 4840:7773 |
مستقیم |
AppointmentDetailPage.tsx |
appointments-info 5635:11700 |
مستقیم |
NewSessionPage.tsx |
add reserve 5760:34891 |
مستقیم |
MyPatientsPage.tsx |
patients-grid 5265:8540 |
مستقیم |
PaymentsPage.tsx / PaymentDetailPage.tsx |
payment 5892:13200, invoice 5892:15788 |
مستقیم |
SettingsPage.tsx / MyClinicPage.tsx / DoctorProfilePage.tsx |
seetting 6923:34358… |
مستقیم |
MyFinancialPage.tsx / FinancialReportPage.tsx |
wallet 6046:13257 |
مستقیم |
ClinicServicesPage.tsx / InsurancePricingPage.tsx |
services 5339:9489 |
مستقیم |
SmsPage.tsx / SmsWalletPage.tsx |
wallet 6046:13257 |
نیمه‌مستقیم |
MySecretariesPage.tsx / SecretariesPage.tsx / StaffPage.tsx |
patients-grid (جدول) + add patients (فرم) | الگو |
DoctorsPage/ClinicsPage/UsersPage/RepresentationsPage/BlogsPage/CommentsPage/RatingsPage/ClaimsPage/PreRegistrationsPage/LogsPage/SettlementsPage/SubscriptionPage و صفحات *DetailPage/*FormPage |
جدول = patients-grid 5265:8540، فرم = add patients 5287:32314، جزئیات = detail 6020:22415 |
الگو |
CategoriesPage.tsx |
seetting (تب‌دار) | الگو |
LoginPage.tsx / SelectContextPage.tsx |
— (اگر فریم auth در فیگما نبود، استایل مشترک) | الگو |
صفحات با تست (
BlogFormPage.test.tsx,BlogsPage.test.tsx,LoginPage.test.tsx) — بعد از تغییر UI، تست‌ها را اجرا کن و اگر selectorها شکستند به‌روز کن.
روش کار پیشنهادی (گام‌به‌گام و ایمن)
- بخش الف را کامل کن (توکن + کامپوننت مشترک)، سپس با یک صفحه‌ی نمونه (Dashboard) صحت پایه را تأیید کن.
- صفحات را گروه‌به‌گروه جلو ببر (اول «مستقیم»ها: dashboard → appointments → patients → payments → settings؛ بعد «الگو»ها).
- برای هر صفحه:
get_screenshotفریم فیگما → مقایسه با اجرای محلی → اصلاح. رنگ/شعاع را در توکن‌هایstyles.cssعوض کن، نه inline در کامپوننت (مگر جایی که tauri هم inline دارد). - موبایل: bottom-sheet و منوی پایین را طبق فریم‌های
*-mobileاضافه کن.
نکات مهم
- فقط CSS/توکن/layout و JSX ظاهری؛ منطق داده/API/route را دست نزن. هیچ فایل backend یا
docs/api/*تغییر نمی‌کند. - MUI وارد نکن؛ Tailwind v4 + CSS variables را نگه‌دار. tauri فقط «مرجع ظاهری» است.
- fallback مرورگر قدیمی (بلوک
@supports oklch) را حفظ کن؛ sRGB و oklch را هماهنگ به‌روز کن. - بعد از هر گروه:
ddev exec yarn dev(خطای native lightningcss داخل ddev بی‌ربط است؛ فقط JS/TS مهم) وddev exec npx tsc --noEmit. تست‌ها:ddev exec yarn testیا vitest. - پایان کار:
graphify update .درclinicpro/. - به‌خاطر بزرگی تسک، حتماً incremental commit بزن (هر گروه صفحه یک commit).
## دستور اجرا
/run-prompt clinicpro/.claude/prompt/admin-ui-match-tauri.md