# 🎨 پلن جامع یکپارچه‌سازی UI/UX — کارا بازار سلامت > **تاریخ**: بهمن ۱۴۰۴ > **وضعیت**: ✅ **تمام ۶ فاز + فاز ۷ (ناوبری و امنیت) تکمیل شد** > **هدف**: یکپارچه‌سازی طراحی FrontOffice با ۲۰٪ تغییر UX و ۵۰٪ تغییر UI > **فریمورک**: Blazor Server + MudBlazor 8.14 > **📋 تاریخچه تغییرات جزئی**: [CHANGELOG.md](CHANGELOG.md) --- ## 📊 خلاصه اجرایی | شاخص | وضعیت قبل | وضعیت بعد | |---|---|---| | **صفحات کل** | ۴۱ صفحه + ۶ کامپوننت مشترک | ۴۱ صفحه + ۸ کامپوننت مشترک | | **الگوی PageHeader** | ۱۹ صفحه از ۴۱ | ۳۲+ صفحه ✅ | | **Inline Style سنگین** | ۱۱ صفحه 🔴 | ≤۲ صفحه (فقط gradient‌های تزئینی) ✅ | | **Loading State** | ۲ الگوی متفاوت (Circular vs Linear) | `` واحد ✅ | | **Empty State** | ۴+ الگوی متناقض | `` واحد ✅ | | **Container Spacing** | ۶ الگوی متناقض | `py-6` استاندارد ✅ | | **رنگ‌بندی** | رنگ‌های hardcoded در ۸+ صفحه | CSS Variable ✅ | | **تم پالت** | Primary `#0380C0` (آبی ساده) | Indigo `#6366f1` + Full PaletteDark ✅ | | **Elevation** | مخلوط ۲/۳/۴ | استاندارد ۰–۲ ✅ | | **Build** | ۰ خطا | ۰ خطا ✅ | ### فازها | فاز | عنوان | وضعیت | |---|---|---| | ۱ | زیرساخت دیزاین سیستم | ✅ تکمیل | | ۲ | صفحات پروفایل | ✅ تکمیل | | ۳ | صفحات تخصصی | ✅ تکمیل | | ۴ | بهبود بصری فروشگاه | ✅ تکمیل | | ۵ | صفحات عمومی | ✅ تکمیل | | ۶ | پالیش و تست | ✅ تکمیل | | ۷ | ناوبری، امنیت و بازسازی کامپوننت‌ها | ✅ تکمیل | --- ## 🔍 بخش ۱: تحلیل ضعف‌های جاری ### ۱.۱ ناسازگاری‌های ساختاری (Structural) #### ❌ ۱.۱.۱ — PageHeader دوگانه **مشکل**: نیمی از صفحات از `` استفاده می‌کنند، نیم دیگر header دستی دارند. | از `` استفاده می‌کنند ✅ | Header دستی دارند ❌ | |---|---| | Store/* (۸ صفحه) | Profile/* (۷ صفحه) | | DiscountStore/* (۶ صفحه) | Club/* (۲ صفحه) | | Gateway/* (۳ صفحه) | Commission/* (۲ صفحه) | | Package/* (۲ صفحه) | Network/* (۱ صفحه) | | PackageDetail, Checkout | Blog/*, Index, About, Contact, FAQ | **تأثیر**: ظاهر متفاوت دکمه بازگشت، فاصله‌بندی ناهماهنگ #### ❌ ۱.۱.۲ — Container MaxWidth متناقض ``` MaxWidth.Large → اکثر صفحات MaxWidth.Medium → Personal, Settings, OrderTracking, Blog/Post, Gateway/* MaxWidth.Small → ChangePassword ترکیبی (loading≠content) → OrderDetail, ProductDetail, PackageDetail ``` **تأثیر**: برخی صفحات پهن‌تر از حد نیاز هستند (مثلاً فرم‌های ساده با Large) #### ❌ ۱.۱.۳ — Container Padding متناقض ``` py-6 → اکثریت (استاندارد) py-8 → Package/Packages, Package/MyPackages pa-2 pa-md-6 → Store/Products, DiscountStore/Products py-6 py-md-10 → Gateway/* py-4 py-md-6 → DiscountStore/ProductDetail py-16 سکشنی → Index, About, Contact, FAQ ``` **قاعده پیشنهادی**: `py-6` برای صفحات داخلی، section-based برای صفحات عمومی --- ### ۱.۲ ناسازگاری‌های بصری (Visual) #### ❌ ۱.۲.۱ — Inline Style سنگین (۱۱ صفحه) | صفحه | نمونه مشکل‌دار | |---|---| | **Index.razor** | `Style="color:#fff; font-size:clamp(1.6rem,4.5vw,2.4rem);"` | | **Profile/Index** | `Style="background:rgba(99,102,241,.12);"` | | **Store/ProductDetail** | `style="width:100%;height:360px;background-image:url(...);"` | | **PackageDetail** | `Style="background: radial-gradient(600px 280px..."` | | **Checkout** | `Style="background: radial-gradient(..."` + `Elevation="4"` | | **Blog/Index** | `Style="color:#fff; font-weight:700;"`, `Style="font-size:3.5rem;"` | | **Blog/Post** | `Style="width:100%; height:100%;"`, `Style="font-size:4rem;"` | | **About** | `Style="background: radial-gradient(...);"` | | **WeeklyBalance** | `Style="background: linear-gradient(135deg, #e8f5e9..."` | | **Gateway/**** | `Style="background:rgba(16,185,129,.12)..."`, `Style="color:#10b981;"` | | **DiscountStore/ProductDetail** | `Style="background:rgba(16,185,129,.06)..."` | #### ❌ ۱.۲.۲ — رنگ‌های Hardcoded | رنگ | استفاده | باید باشد | |---|---|---| | `#10b981` | Gateway (سبز فروشگاه) | `var(--ds-color-store)` | | `#ef4444` | Gateway (قرمز اعتباری) | `var(--ds-color-discount)` | | `#6366f1`, `#818cf8`, `#a78bfa` | Hero/Banner gradients | `var(--ds-gradient-primary)` | | `rgba(99,102,241,.12)` | Dashboard backgrounds | `var(--ds-primary-soft)` | | `rgba(16,185,129,.06)` | Discount product highlights | `var(--ds-success-soft)` | | `#e8f5e9`, `#c8e6c9` | WeeklyBalance stat cards | `var(--ds-success-gradient)` | #### ❌ ۱.۲.۳ — Elevation ناهماهنگ ``` Elevation="0" → Blog cards (با border) Elevation="1" → برخی صفحات Elevation="2" → اکثر صفحات (استاندارد) Elevation="3" → WeeklyBalance stat cards Elevation="4" → Checkout.razor ``` **قاعده پیشنهادی**: `Elevation="0"` با `border` = کارت‌های اطلاعاتی، `Elevation="2"` = default #### ❌ ۱.۲.۴ — Paper Rounding ناهماهنگ ``` rounded-lg (16px) → اکثریت rounded-xl (20px) → Index, Profile/Index, Gateway, DiscountStore/ProductDetail بدون class → design system !important → 12px ``` --- ### ۱.۳ ناسازگاری‌های UX (تجربه کاربری) #### ❌ ۱.۳.۱ — Loading State دوگانه ``` MudProgressCircular → Store/*, DiscountStore/*, Package/*, About, Blog, Addresses MudProgressLinear → Club/*, Commission/*, Network/*, RegisterWizard ``` **مشکل**: کاربر دو تجربه مختلف «در حال بارگذاری» می‌بیند #### ❌ ۱.۳.۲ — Empty State ناهماهنگ ``` MudAlert Severity.Info → Store/Orders, Categories, DiscountStore/Orders Icon + Text + Button → Addresses, Package/MyPackages, PackageDetail MudAlert Severity.Warning → WithdrawalRequests Custom dashed-border paper → Blog/Index ``` #### ❌ ۱.۳.۳ — Routing Directive ناهماهنگ ``` @attribute [Route(RouteConstants...)] → ۳۹ صفحه ✅ @page "/categories" → Categories.razor ❌ @page "/blog/{Slug}" → Blog/Post.razor ❌ ``` #### ❌ ۱.۳.۴ — PackageDetail Loading/Error بدون Container Loading و Error state در `PackageDetail.razor` بدون `MudContainer` رندر می‌شوند → محتوا تمام‌عرض نمایش می‌یابد. #### ❌ ۱.۳.۵ — تم فعلی کم‌رنگ ```csharp // CustomMudTheme.cs فعلی Primary = "#0380C0" // آبی ساده // بدون Secondary، Tertiary، Info، Warning تعریف‌شده // بدون PaletteDark // بدون LayoutProperties ``` **مشکلات**: - فقط Primary تعریف شده، بقیه رنگ‌ها default MudBlazor - Dark mode بدون palette اختصاصی - بدون `DefaultBorderRadius`، `AppbarHeight` و غیره - تناقض بین Primary `#0380C0` و gradient‌های CSS با `#6366f1` --- ## 🎯 بخش ۲: معماری دیزاین سیستم هدف ### ۲.۱ سلسله‌مراتب صفحات ``` ┌─────────────────────────────────────────────┐ │ MainLayout │ │ ├─ AppBar (fixed, transparent) │ │ ├─ MudMainContent │ │ │ ├─ [Public Pages] → Section-based │ │ │ │ (Index, About, Contact, FAQ, Blog) │ │ │ └─ [Internal Pages] → Container-based │ │ │ ├─ │ │ │ ├─ Content (MudStack/MudGrid) │ │ │ └─ │ │ ├─ Footer (hidden on mobile) │ │ └─ BottomNav (mobile only) │ └─────────────────────────────────────────────┘ ``` ### ۲.۲ قواعد واحد (Single Source of Truth) | قاعده | مقدار | |---|---| | **Container MaxWidth** | `Large` = لیست/گرید, `Medium` = فرم/جزئیات, `Small` = تک‌فرم ساده | | **Container Spacing** | `py-6` صفحات داخلی, section-based صفحات عمومی | | **Paper Elevation** | `0` با border = کارت اطلاعاتی, `2` = default | | **Paper Rounding** | `rounded-lg` = default, `rounded-xl` = hero/banner | | **Loading State** | `` component واحد | | **Empty State** | `` component واحد | | **Page Header** | `` در تمام صفحات داخلی | | **Content Wrapper** | `MudStack Spacing="3"` بعد از PageHeader | ### ۲.۳ CSS Variables هدف ```css :root { /* ── Brand Colors ── */ --ds-brand-primary: #6366f1; /* Indigo — هویت اصلی */ --ds-brand-secondary: #8b5cf6; /* Purple */ --ds-brand-accent: #a78bfa; /* Light purple */ /* ── Semantic Colors ── */ --ds-color-store: #10b981; /* فروشگاه عادی */ --ds-color-discount: #ef4444; /* فروشگاه اعتباری */ --ds-color-success: #10b981; --ds-color-warning: #f59e0b; --ds-color-error: #ef4444; --ds-color-info: #3b82f6; /* ── Soft Backgrounds ── */ --ds-primary-soft: rgba(99,102,241,.08); --ds-success-soft: rgba(16,185,129,.08); --ds-error-soft: rgba(239,68,68,.08); --ds-warning-soft: rgba(245,158,11,.08); /* ── Gradients ── */ --ds-gradient-primary: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a78bfa 100%); --ds-gradient-store: linear-gradient(135deg, #10b981 0%, #34d399 100%); --ds-gradient-discount: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #f59e0b 100%); --ds-gradient-success: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); /* ── Spacing (existing) ── */ --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px; --ds-radius-xl: 20px; --ds-transition: 0.2s ease; --ds-shadow-sm: 0 1px 3px rgba(0,0,0,.06); --ds-shadow-md: 0 4px 12px rgba(0,0,0,.08); --ds-shadow-lg: 0 8px 24px rgba(0,0,0,.10); } ``` --- ## 🚀 بخش ۳: فازبندی اجرا ### 🔷 فاز ۱ — زیرساخت دیزاین سیستم (UI ~15%) > **اولویت**: بالا | **ریسک**: پایین | **حجم**: ۶ فایل | # | تسک | فایل | نوع تغییر | |---|---|---|---| | 1.1 | ارتقاء `CustomMudTheme.cs` — اضافه کردن PaletteDark، LayoutProperties، رنگ‌های Secondary/Tertiary/Info، تغییر Primary به `#6366f1` | `CustomMudTheme.cs` | UI | | 1.2 | توسعه CSS Variables — اضافه کردن brand colors، semantic colors، soft backgrounds، gradients | `site.css` | UI | | 1.3 | ساخت `` component واحد | `Shared/LoadingState.razor` (جدید) | UX | | 1.4 | ساخت `` component واحد | `Shared/EmptyState.razor` (جدید) | UX | | 1.5 | بهبود `` — اضافه کردن آیکون، subtitle اختیاری | `Shared/PageHeader.razor` | UI | | 1.6 | اضافه کردن `.page-container` CSS pattern | `site.css` | UI | --- ### 🔷 فاز ۲ — یکپارچه‌سازی صفحات Profile (UI ~10%, UX ~5%) > **اولویت**: بالا | **ریسک**: پایین | **حجم**: ۹ فایل | # | تسک | تغییرات | |---|---|---| | 2.1 | `Profile/Personal` → جایگزینی header دستی با `` | UX | | 2.2 | `Profile/Addresses` → `` + `` + `` | UX | | 2.3 | `Profile/Wallet` → `` | UX | | 2.4 | `Profile/Settings` → `` | UX | | 2.5 | `Profile/Tree` → `` | UX | | 2.6 | `Profile/WithdrawalRequests` → `` + `` | UX | | 2.7 | `Profile/ChangePassword` → `` | UX | | 2.8 | `Profile/Index` (Dashboard) → حذف inline styles، استفاده از CSS Variables | UI | | 2.9 | `Club/MembershipPage` + `Club/FeaturesPage` → `` + `` | UX | --- ### 🔷 فاز ۳ — یکپارچه‌سازی صفحات تخصصی (UI ~5%, UX ~5%) > **اولویت**: متوسط | **ریسک**: پایین | **حجم**: ۵ فایل | # | تسک | تغییرات | |---|---|---| | 3.1 | `Commission/Dashboard` → `` + `` | UX | | 3.2 | `Commission/WeeklyBalance` → `` + حذف inline gradient styles | UI + UX | | 3.3 | `Network/NetworkStatistics` → `` + `` | UX | | 3.4 | `PackageDetail` → wrap loading/error در `MudContainer` | UX bug fix | | 3.5 | `Checkout` → Elevation=4→2، حذف inline radial-gradient | UI | --- ### 🔷 فاز ۴ — بهبود بصری فروشگاه‌ها (UI ~10%) > **اولویت**: متوسط | **ریسک**: پایین | **حجم**: ۶ فایل | # | تسک | تغییرات | |---|---|---| | 4.1 | `Store/Products` → حذف inline hero styles، استفاده از CSS class | UI | | 4.2 | `Store/ProductDetail` → حذف inline image styles، ساخت `.product-image-main` CSS | UI | | 4.3 | `DiscountStore/ProductDetail` → حذف hardcoded rgba، استفاده از `--ds-success-soft` | UI | | 4.4 | `Gateway/*` (۳ صفحه) → حذف hardcoded `#10b981`/`#ef4444`، استفاده از `--ds-color-store`/`--ds-color-discount` | UI | | 4.5 | یکسان‌سازی Elevation → `0` با border یا `2` | UI | | 4.6 | یکسان‌سازی Container spacing → `py-6` | UI | --- ### 🔷 فاز ۵ — بهبود صفحات عمومی و بلاگ (UI ~10%) > **اولویت**: پایین | **ریسک**: پایین | **حجم**: ۷ فایل | # | تسک | تغییرات | |---|---|---| | 5.1 | `Index.razor` → حذف inline styles از hero، استفاده از CSS class | UI | | 5.2 | `About.razor` → حذف inline radial-gradient | UI | | 5.3 | `Contact.razor` → cleanup minor inline styles | UI | | 5.4 | `FAQ.razor` → cleanup minor inline styles | UI | | 5.5 | `Blog/Index` → حذف inline hero styles، استفاده از CSS class | UI | | 5.6 | `Blog/Post` → حذف inline styles از hero image و typography | UI | | 5.7 | `RegisterWizard` → بهینه‌سازی wizard-section dark mode | UI | --- ### 🔷 فاز ۶ — Polish نهایی و فرآیندی (UX ~10%) > **اولویت**: پایین | **ریسک**: بسیار پایین | **حجم**: ۴ فایل + تست | # | تسک | تغییرات | |---|---|---| | 6.1 | Fix routing inconsistency — Categories + Blog/Post | UX | | 6.2 | MudSnackbar notifications styling | UI | | 6.3 | Dialog styling consistency (AuthDialog, AddressDialogs) | UI | | 6.4 | Micro-interactions — button press, card hover, page transition | UI | | 6.5 | تست کامل Dark Mode در تمام صفحات | UI + QA | | 6.6 | تست Mobile Responsive در تمام صفحات | UX + QA | --- ## 📈 بخش ۴: جدول تأثیرگذاری ### تأثیر UI (هدف ~۵۰٪ تغییر) | حوزه | تعداد فایل | درصد تأثیر | |---|---|---| | Theme + CSS Variables | ۲ | ۱۵% (تأثیر سراسری) | | حذف Inline Styles | ۱۱ | ۱۵% | | یکسان‌سازی Elevation/Rounding | ۲۰+ | ۱۰% | | بهبود رنگ‌بندی (CSS Variables) | ۸ | ۵% | | Micro-interactions | سراسری | ۵% | | **جمع** | | **~۵۰%** | ### تأثیر UX (هدف ~۲۰٪ تغییر) | حوزه | تعداد فایل | درصد تأثیر | |---|---|---| | PageHeader یکپارچه | ۱۲ صفحه | ۸% | | LoadingState واحد | ۱۵+ صفحه | ۴% | | EmptyState واحد | ۸+ صفحه | ۳% | | Container fixes (PackageDetail) | ۲ | ۲% | | Routing consistency | ۲ | ۱% | | Flow improvements | ۲ | ۲% | | **جمع** | | **~۲۰%** | --- ## 🔧 بخش ۵: مشخصات فنی کامپوننت‌های جدید ### ۵.۱ LoadingState Component ```razor @* Shared/LoadingState.razor *@ @if (!string.IsNullOrWhiteSpace(Message)) { @Message } @code { [Parameter] public string Message { get; set; } = "در حال بارگذاری..."; } ``` ### ۵.۲ EmptyState Component ```razor @* Shared/EmptyState.razor *@ @Title @if (!string.IsNullOrWhiteSpace(Description)) { @Description } @if (!string.IsNullOrWhiteSpace(ActionText)) { @ActionText } @code { [Parameter] public string Icon { get; set; } = Icons.Material.Filled.Inbox; [Parameter] public string Title { get; set; } = "موردی یافت نشد"; [Parameter] public string? Description { get; set; } [Parameter] public string? ActionText { get; set; } [Parameter] public string? ActionHref { get; set; } [Parameter] public EventCallback OnAction { get; set; } } ``` ### ۵.۳ PageHeader ارتقاء‌یافته ```razor @* Shared/PageHeader.razor — ارتقاء‌یافته *@
@Title @if (!string.IsNullOrWhiteSpace(Subtitle)) { @Subtitle } @if (!string.IsNullOrWhiteSpace(BackHref)) { بازگشت } else { بازگشت }
@code { [Parameter] public string Title { get; set; } = ""; [Parameter] public string? Subtitle { get; set; } [Parameter] public string? BackHref { get; set; } [Inject] private IJSRuntime JS { get; set; } = default!; private async Task GoBack() => await JS.InvokeVoidAsync("history.back"); } ``` --- ## ✅ بخش ۶: چک‌لیست تکمیل هر فاز ### فاز ۱ چک‌لیست: - [ ] `CustomMudTheme.cs` — Primary→`#6366f1`, PaletteDark اضافه شد - [ ] `site.css` — CSS Variables جدید (brand, semantic, soft, gradient) - [ ] `Shared/LoadingState.razor` — ساخته و تست شد - [ ] `Shared/EmptyState.razor` — ساخته و تست شد - [ ] `Shared/PageHeader.razor` — Subtitle parameter اضافه شد - [ ] `.page-container` CSS pattern اضافه شد - [ ] Build: 0 errors ✅ - [ ] Dark Mode: صحیح ✅ - [ ] Mobile: صحیح ✅ ### فاز ۲ چک‌لیست: - [ ] `Profile/Personal` → `` - [ ] `Profile/Addresses` → `` + `` + `` - [ ] `Profile/Wallet` → `` - [ ] `Profile/Settings` → `` - [ ] `Profile/Tree` → `` - [ ] `Profile/WithdrawalRequests` → `` + `` - [ ] `Profile/ChangePassword` → `` - [ ] `Profile/Index` → inline styles → CSS - [ ] `Club/*` → `` + `` - [ ] Build: 0 errors ✅ ### فاز ۳ چک‌لیست: - [ ] `Commission/*` → `` + `` - [ ] `Network/*` → `` + `` - [ ] `PackageDetail` → MudContainer wrapper برای loading/error - [ ] `Checkout` → Elevation fix + inline cleanup - [ ] `WeeklyBalance` → inline gradient → CSS class - [ ] Build: 0 errors ✅ ### فاز ۴ چک‌لیست: - [ ] `Store/Products` → hero inline → CSS - [ ] `Store/ProductDetail` → image inline → CSS class - [ ] `DiscountStore/ProductDetail` → rgba → variable - [ ] `Gateway/*` → hardcoded → variable - [ ] Elevation یکسان‌سازی - [ ] Container spacing یکسان‌سازی - [ ] Build: 0 errors ✅ ### فاز ۵ چک‌لیست: - [ ] `Index.razor` → hero inline cleanup - [ ] `About.razor` → radial-gradient cleanup - [ ] `Blog/Index` + `Blog/Post` → inline cleanup - [ ] `Contact.razor` + `FAQ.razor` → minor cleanup - [ ] Build: 0 errors ✅ ### فاز ۶ چک‌لیست: - [ ] Routing fix (Categories, Blog/Post) - [ ] MudSnackbar styling - [ ] Dialog consistency - [ ] Dark mode full test - [ ] Mobile responsive full test - [ ] Build: 0 errors ✅ --- ## 📋 بخش ۷: خلاصه تغییرات در یک نگاه ``` فایل‌های تغییر‌یافته: ├── CustomMudTheme.cs [فاز ۱] — ارتقاء کامل تم ├── site.css [فاز ۱-۵] — CSS Variables + class‌های جدید ├── Shared/LoadingState.razor [فاز ۱] — جدید ├── Shared/EmptyState.razor [فاز ۱] — جدید ├── Shared/PageHeader.razor [فاز ۱] — بهبود ├── Profile/* (۷ فایل) [فاز ۲] — PageHeader + LoadingState ├── Profile/Index.razor [فاز ۲] — حذف inline styles ├── Club/* (۲ فایل) [فاز ۲] — PageHeader + LoadingState ├── Commission/* (۲ فایل) [فاز ۳] — PageHeader + LoadingState + cleanup ├── Network/* (۱ فایل) [فاز ۳] — PageHeader + LoadingState ├── PackageDetail.razor [فاز ۳] — Container fix ├── Checkout.razor [فاز ۳] — Elevation + cleanup ├── Store/* (۲ فایل) [فاز ۴] — inline → CSS ├── DiscountStore/ProductDetail [فاز ۴] — rgba → variable ├── Gateway/* (۳ فایل) [فاز ۴] — hardcoded → variable ├── Index.razor [فاز ۵] — hero cleanup ├── About.razor [فاز ۵] — gradient cleanup ├── Blog/* (۲ فایل) [فاز ۵] — inline cleanup ├── Contact.razor + FAQ.razor [فاز ۵] — minor cleanup └── Categories + Blog/Post [فاز ۶] — routing fix ``` **مجموع فایل‌های تأثیرپذیر**: ~۳۵ فایل **فایل‌های جدید**: ۲ (LoadingState, EmptyState) **میزان تغییر UI**: ~۵۰٪ **میزان تغییر UX**: ~۲۰٪ **ریسک شکست**: پایین (تغییرات تدریجی، build verification در هر فاز)