docs: move docs to totalDoc, replace with placeholders
Build and Deploy to Kubernetes / build-and-deploy (push) Successful in 5m42s
Build and Deploy to Kubernetes / build-and-deploy (push) Successful in 5m42s
This commit is contained in:
masoodafar-web
+2
-541
@@ -1,542 +1,3 @@
|
||||
# 🎨 پلن جامع یکپارچهسازی UI/UX — کارا بازار سلامت
|
||||
# Docs moved to totalDoc
|
||||
|
||||
> **تاریخ**: بهمن ۱۴۰۴
|
||||
> **وضعیت**: ✅ **تمام ۶ فاز + فاز ۷ (ناوبری و امنیت) تکمیل شد**
|
||||
> **هدف**: یکپارچهسازی طراحی FrontOffice با ۲۰٪ تغییر UX و ۵۰٪ تغییر UI
|
||||
> **فریمورک**: Blazor Server + MudBlazor 8.14
|
||||
> **📋 تاریخچه تغییرات جزئی**: [CHANGELOG.md](CHANGELOG.md)
|
||||
|
||||
---
|
||||
|
||||
## 📊 خلاصه اجرایی
|
||||
|
||||
| شاخص | وضعیت قبل | وضعیت بعد |
|
||||
|---|---|---|
|
||||
| **صفحات کل** | ۴۱ صفحه + ۶ کامپوننت مشترک | ۴۱ صفحه + ۸ کامپوننت مشترک |
|
||||
| **الگوی PageHeader** | ۱۹ صفحه از ۴۱ | ۳۲+ صفحه ✅ |
|
||||
| **Inline Style سنگین** | ۱۱ صفحه 🔴 | ≤۲ صفحه (فقط gradientهای تزئینی) ✅ |
|
||||
| **Loading State** | ۲ الگوی متفاوت (Circular vs Linear) | `<LoadingState>` واحد ✅ |
|
||||
| **Empty State** | ۴+ الگوی متناقض | `<EmptyState>` واحد ✅ |
|
||||
| **Container Spacing** | ۶ الگوی متناقض | `py-6` استاندارد ✅ |
|
||||
| **رنگبندی** | رنگهای hardcoded در ۸+ صفحه | CSS Variable ✅ |
|
||||
| **تم پالت** | Primary `#0380C0` (آبی ساده) | Indigo `#6366f1` + Full PaletteDark ✅ |
|
||||
| **Elevation** | مخلوط ۲/۳/۴ | استاندارد ۰–۲ ✅ |
|
||||
| **Build** | ۰ خطا | ۰ خطا ✅ |
|
||||
|
||||
### فازها
|
||||
| فاز | عنوان | وضعیت |
|
||||
|---|---|---|
|
||||
| ۱ | زیرساخت دیزاین سیستم | ✅ تکمیل |
|
||||
| ۲ | صفحات پروفایل | ✅ تکمیل |
|
||||
| ۳ | صفحات تخصصی | ✅ تکمیل |
|
||||
| ۴ | بهبود بصری فروشگاه | ✅ تکمیل |
|
||||
| ۵ | صفحات عمومی | ✅ تکمیل |
|
||||
| ۶ | پالیش و تست | ✅ تکمیل |
|
||||
| ۷ | ناوبری، امنیت و بازسازی کامپوننتها | ✅ تکمیل |
|
||||
|
||||
---
|
||||
|
||||
## 🔍 بخش ۱: تحلیل ضعفهای جاری
|
||||
|
||||
### ۱.۱ ناسازگاریهای ساختاری (Structural)
|
||||
|
||||
#### ❌ ۱.۱.۱ — PageHeader دوگانه
|
||||
**مشکل**: نیمی از صفحات از `<PageHeader>` استفاده میکنند، نیم دیگر header دستی دارند.
|
||||
|
||||
| از `<PageHeader>` استفاده میکنند ✅ | 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 │
|
||||
│ │ ├─ <PageHeader/> │
|
||||
│ │ ├─ Content (MudStack/MudGrid) │
|
||||
│ │ └─ </MudContainer> │
|
||||
│ ├─ 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** | `<LoadingState/>` component واحد |
|
||||
| **Empty State** | `<EmptyState/>` component واحد |
|
||||
| **Page Header** | `<PageHeader/>` در تمام صفحات داخلی |
|
||||
| **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 | ساخت `<LoadingState>` component واحد | `Shared/LoadingState.razor` (جدید) | UX |
|
||||
| 1.4 | ساخت `<EmptyState>` component واحد | `Shared/EmptyState.razor` (جدید) | UX |
|
||||
| 1.5 | بهبود `<PageHeader>` — اضافه کردن آیکون، subtitle اختیاری | `Shared/PageHeader.razor` | UI |
|
||||
| 1.6 | اضافه کردن `.page-container` CSS pattern | `site.css` | UI |
|
||||
|
||||
---
|
||||
|
||||
### 🔷 فاز ۲ — یکپارچهسازی صفحات Profile (UI ~10%, UX ~5%)
|
||||
> **اولویت**: بالا | **ریسک**: پایین | **حجم**: ۹ فایل
|
||||
|
||||
| # | تسک | تغییرات |
|
||||
|---|---|---|
|
||||
| 2.1 | `Profile/Personal` → جایگزینی header دستی با `<PageHeader>` | UX |
|
||||
| 2.2 | `Profile/Addresses` → `<PageHeader>` + `<LoadingState>` + `<EmptyState>` | UX |
|
||||
| 2.3 | `Profile/Wallet` → `<PageHeader>` | UX |
|
||||
| 2.4 | `Profile/Settings` → `<PageHeader>` | UX |
|
||||
| 2.5 | `Profile/Tree` → `<PageHeader>` | UX |
|
||||
| 2.6 | `Profile/WithdrawalRequests` → `<PageHeader>` + `<EmptyState>` | UX |
|
||||
| 2.7 | `Profile/ChangePassword` → `<PageHeader>` | UX |
|
||||
| 2.8 | `Profile/Index` (Dashboard) → حذف inline styles، استفاده از CSS Variables | UI |
|
||||
| 2.9 | `Club/MembershipPage` + `Club/FeaturesPage` → `<PageHeader>` + `<LoadingState>` | UX |
|
||||
|
||||
---
|
||||
|
||||
### 🔷 فاز ۳ — یکپارچهسازی صفحات تخصصی (UI ~5%, UX ~5%)
|
||||
> **اولویت**: متوسط | **ریسک**: پایین | **حجم**: ۵ فایل
|
||||
|
||||
| # | تسک | تغییرات |
|
||||
|---|---|---|
|
||||
| 3.1 | `Commission/Dashboard` → `<PageHeader>` + `<LoadingState>` | UX |
|
||||
| 3.2 | `Commission/WeeklyBalance` → `<PageHeader>` + حذف inline gradient styles | UI + UX |
|
||||
| 3.3 | `Network/NetworkStatistics` → `<PageHeader>` + `<LoadingState>` | 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 *@
|
||||
<MudStack AlignItems="AlignItems.Center" Class="py-16">
|
||||
<MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
|
||||
@if (!string.IsNullOrWhiteSpace(Message))
|
||||
{
|
||||
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">@Message</MudText>
|
||||
}
|
||||
</MudStack>
|
||||
|
||||
@code {
|
||||
[Parameter] public string Message { get; set; } = "در حال بارگذاری...";
|
||||
}
|
||||
```
|
||||
|
||||
### ۵.۲ EmptyState Component
|
||||
|
||||
```razor
|
||||
@* Shared/EmptyState.razor *@
|
||||
<MudStack AlignItems="AlignItems.Center" Class="py-12" Spacing="3">
|
||||
<MudIcon Icon="@Icon" Size="Size.Large" Color="Color.Default" Class="mud-text-disabled" />
|
||||
<MudText Typo="Typo.h6" Class="mud-text-secondary">@Title</MudText>
|
||||
@if (!string.IsNullOrWhiteSpace(Description))
|
||||
{
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary" Style="max-width:400px; text-align:center;">
|
||||
@Description
|
||||
</MudText>
|
||||
}
|
||||
@if (!string.IsNullOrWhiteSpace(ActionText))
|
||||
{
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary"
|
||||
Href="@ActionHref" OnClick="@OnAction" Class="mt-2">
|
||||
@ActionText
|
||||
</MudButton>
|
||||
}
|
||||
</MudStack>
|
||||
|
||||
@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 — ارتقاءیافته *@
|
||||
<div class="page-header">
|
||||
<MudStack Spacing="0">
|
||||
<MudText Typo="Typo.h5">@Title</MudText>
|
||||
@if (!string.IsNullOrWhiteSpace(Subtitle))
|
||||
{
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">@Subtitle</MudText>
|
||||
}
|
||||
</MudStack>
|
||||
@if (!string.IsNullOrWhiteSpace(BackHref))
|
||||
{
|
||||
<MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ArrowBack"
|
||||
Href="@BackHref">بازگشت</MudButton>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ArrowBack"
|
||||
OnClick="GoBack">بازگشت</MudButton>
|
||||
}
|
||||
</div>
|
||||
|
||||
@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` → `<PageHeader>`
|
||||
- [ ] `Profile/Addresses` → `<PageHeader>` + `<LoadingState>` + `<EmptyState>`
|
||||
- [ ] `Profile/Wallet` → `<PageHeader>`
|
||||
- [ ] `Profile/Settings` → `<PageHeader>`
|
||||
- [ ] `Profile/Tree` → `<PageHeader>`
|
||||
- [ ] `Profile/WithdrawalRequests` → `<PageHeader>` + `<EmptyState>`
|
||||
- [ ] `Profile/ChangePassword` → `<PageHeader>`
|
||||
- [ ] `Profile/Index` → inline styles → CSS
|
||||
- [ ] `Club/*` → `<PageHeader>` + `<LoadingState>`
|
||||
- [ ] Build: 0 errors ✅
|
||||
|
||||
### فاز ۳ چکلیست:
|
||||
- [ ] `Commission/*` → `<PageHeader>` + `<LoadingState>`
|
||||
- [ ] `Network/*` → `<PageHeader>` + `<LoadingState>`
|
||||
- [ ] `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 در هر فاز)
|
||||
See [totalDoc/INDEX.md](../../totalDoc/INDEX.md) for all documentation.
|
||||
|
||||
Reference in New Issue
Block a user