masoodafar-web
1419 lines
60 KiB
Markdown
1419 lines
60 KiB
Markdown
# 🎨 طرح نوسازی رابط کاربری فرانتآفیس + سیستم بلاگ
|
||
|
||
> **تاریخ شروع:** تیر ۱۴۰۴
|
||
> **آخرین بروزرسانی:** بهمن ۱۴۰۴
|
||
> **وضعیت:** فازهای ۱ تا ۶ تکمیل ✅ — فاز ۷ در حال اجرا
|
||
> **اولویت:** بالا
|
||
|
||
---
|
||
|
||
## فهرست مطالب
|
||
|
||
1. [خلاصه اجرایی](#1-خلاصه-اجرایی)
|
||
2. [وضعیت فعلی](#2-وضعیت-فعلی)
|
||
3. [اهداف پروژه](#3-اهداف-پروژه)
|
||
4. [معماری فنی](#4-معماری-فنی)
|
||
5. [فاز ۱ — موجودیتهای بکند (CMS)](#5-فاز-۱--موجودیتهای-بکند-cms)
|
||
6. [فاز ۲ — پنل مدیریت بلاگ (BackOffice)](#6-فاز-۲--پنل-مدیریت-بلاگ-backoffice)
|
||
7. [فاز ۳ — صفحات محتوای دینامیک (درباره ما / تماس با ما)](#7-فاز-۳--صفحات-محتوای-دینامیک-درباره-ما--تماس-با-ما)
|
||
8. [فاز ۴ — نوسازی لندینگ پیج](#8-فاز-۴--نوسازی-لندینگ-پیج)
|
||
9. [فاز ۵ — صفحات بلاگ فرانتآفیس](#9-فاز-۵--صفحات-بلاگ-فرانتآفیس)
|
||
10. [فاز ۶ — بهبود داشبورد کاربر](#10-فاز-۶--بهبود-داشبورد-کاربر)
|
||
11. [فاز ۷ — بهینهسازی موبایل](#11-فاز-۷--بهینهسازی-موبایل)
|
||
12. [فایلهای تغییریافته (نقشه فایلها)](#12-فایلهای-تغییریافته-نقشه-فایلها)
|
||
13. [جدول زمانی](#13-جدول-زمانی)
|
||
14. [ریسکها و وابستگیها](#14-ریسکها-و-وابستگیها)
|
||
|
||
---
|
||
|
||
## 1. خلاصه اجرایی
|
||
|
||
این سند طرح جامع نوسازی رابط کاربری **فرانتآفیس** (سمت مشتری) و ایجاد **سیستم بلاگ/مدیریت محتوا** را شامل میشود. اهداف اصلی:
|
||
|
||
- ✅ ایجاد **سیستم بلاگ** با قابلیت انتشار مقالات، مجوزها، گواهینامهها با تصاویر
|
||
- ✅ **صفحات دینامیک** درباره ما و تماس با ما (قابل مدیریت از پنل ادمین)
|
||
- ✅ **نوسازی لندینگ پیج** با طراحی حرفهای و حس زنده بودن سامانه
|
||
- ✅ **صفحات بلاگ فرانتآفیس** — لیست مقالات با جستجو/فیلتر + صفحه جزئیات مقاله
|
||
- ✅ **بهبود داشبورد** کاربر با طراحی مدرن و اطلاعات پویا
|
||
- 🔄 **طراحی Mobile-First** (اولویت موبایل) — فاز ۷
|
||
- ⛔ بدون تغییر UI سمت ادمین (فقط افزودن صفحات مدیریت بلاگ/محتوا)
|
||
|
||
---
|
||
|
||
## 2. وضعیت فعلی
|
||
|
||
### 2.1 پشته فنی
|
||
|
||
| لایه | تکنولوژی |
|
||
|------|----------|
|
||
| FrontOffice | Blazor Server (.NET 9) + MudBlazor 8.14.0 |
|
||
| BackOffice | Blazor WebAssembly (.NET 9) + MudBlazor 8.14.0 |
|
||
| CMS (Backend) | .NET 9 gRPC + MediatR CQRS + EF Core |
|
||
| دیتابیس | SQL Server |
|
||
| فایلها | FMS (File Management Service) via gRPC |
|
||
| زبان UI | فارسی (RTL) + فونت Vazir |
|
||
| تم | Light/Dark toggle |
|
||
|
||
### 2.2 صفحات فعلی فرانتآفیس
|
||
|
||
| صفحه | مسیر | وضعیت |
|
||
|------|------|-------|
|
||
| لندینگ | `/` | ✅ Hero گرادیان + Features + Timeline + Stats + بلاگ + Testimonials + FAQ + CTA |
|
||
| درباره ما | `/about` | ✅ محتوای دینامیک از CMS (با fallback) |
|
||
| تماس با ما | `/contact` | ✅ محتوای دینامیک از CMS + فرم تماس |
|
||
| بلاگ | `/blog` | ✅ لیست مقالات + جستجو + فیلتر دستهبندی + صفحهبندی |
|
||
| مقاله | `/blog/{slug}` | ✅ صفحه جزئیات مقاله + breadcrumb + تگها + شمارنده بازدید |
|
||
| سوالات متداول | `/faq` | ✅ فعال |
|
||
| پروفایل | `/profile/*` | ✅ ۱۰ صفحه (هدر گرادیانی + والتکارتها + تایلهای مدرن) |
|
||
| فروشگاه | `/products/*` | ✅ ۸ صفحه (محصولات، سبد، سفارشات، ...) |
|
||
| باشگاه | `/club/*` | ✅ ۲ صفحه |
|
||
| کمیسیون | `/commission/*` | ✅ ۳ صفحه |
|
||
| شبکه | `/network/*` | ✅ ۲ صفحه |
|
||
| پکیج | `/packages/*` | ✅ ۴ صفحه |
|
||
|
||
### 2.3 مشکلات فعلی (رفع شده ✅)
|
||
|
||
1. ~~**احساس ایستا بودن** — لندینگ پیج بدون انیمیشن و محتوای پویا~~ → ✅ فاز ۴ حل شد
|
||
2. ~~**بدون بلاگ** — امکان انتشار مقاله/خبر/مجوز وجود ندارد~~ → ✅ فازهای ۱، ۲، ۵ حل شد
|
||
3. ~~**صفحات استاتیک** — درباره ما و تماس با ما هاردکد هستند~~ → ✅ فاز ۳ حل شد
|
||
4. ~~**طراحی ساده** — فاقد عناصر بصری جذاب~~ → ✅ فازهای ۴ و ۶ حل شد
|
||
5. **موبایلمحور نبودن** — ریسپانسیو هست اما اولویت با دسکتاپ → 🔄 فاز ۷
|
||
|
||
---
|
||
|
||
## 3. اهداف پروژه
|
||
|
||
### 3.1 اهداف عملیاتی
|
||
|
||
| هدف | شاخص موفقیت |
|
||
|-----|-------------|
|
||
| سیستم بلاگ | ادمین بتواند مقاله بنویسد، دستهبندی کند، تصویر آپلود کند، منتشر/آرشیو کند |
|
||
| محتوای دینامیک | ادمین بتواند درباره ما و تماس با ما را از پنل ویرایش کند |
|
||
| لندینگ حرفهای | اولین بازدید حس «پلتفرم زنده و فعال» بدهد |
|
||
| Mobile-First | تمام صفحات در موبایل عالی نمایش داده شوند |
|
||
| عملکرد | زمان بارگذاری صفحه اول < ۳ ثانیه |
|
||
|
||
### 3.2 محدوده (Scope)
|
||
|
||
```
|
||
✅ در محدوده:
|
||
- سیستم بلاگ کامل (CMS → BackOffice → FrontOffice)
|
||
- صفحات محتوای دینامیک (About, Contact)
|
||
- نوسازی لندینگ پیج
|
||
- بهبود داشبورد/پروفایل
|
||
- بهینهسازی موبایل
|
||
- افزودن صفحات مدیریت بلاگ به BackOffice
|
||
|
||
⛔ خارج از محدوده:
|
||
- تغییرات UI سایر بخشهای BackOffice
|
||
- سیستم کامنتگذاری (فاز بعدی)
|
||
- سیستم جستجوی پیشرفته (فاز بعدی)
|
||
- اپلیکیشن موبایل (PWA یا Native)
|
||
```
|
||
|
||
---
|
||
|
||
## 4. معماری فنی
|
||
|
||
### 4.1 جریان داده بلاگ
|
||
|
||
```
|
||
┌──────────────┐ gRPC ┌───────────┐ EF Core ┌──────────┐
|
||
│ BackOffice │ ──────────► │ CMS │ ────────────► │ SQL Server│
|
||
│ (Admin CRUD) │ ◄────────── │ (gRPC) │ ◄──────────── │ │
|
||
└──────────────┘ └───────────┘ └──────────┘
|
||
│ ▲
|
||
gRPC │ │
|
||
▼ │
|
||
┌──────────────┐
|
||
│ FrontOffice │
|
||
│ (مشاهده بلاگ)│
|
||
└──────────────┘
|
||
│
|
||
FMS │ (آپلود تصاویر)
|
||
▼
|
||
┌──────────┐
|
||
│ FMS │
|
||
│ (فایلها) │
|
||
└──────────┘
|
||
```
|
||
|
||
### 4.2 موجودیتهای جدید (Entity Relationship)
|
||
|
||
```
|
||
BlogPost (1) ──────── (N) BlogPostCategory ──────── (1) BlogCategory
|
||
│
|
||
│ (1:N)
|
||
▼
|
||
BlogPostImage
|
||
|
||
BlogPost.Tags → از Tag موجود استفاده میشود (BlogPostTag join table)
|
||
|
||
SitePage → صفحات دینامیک (About, Contact, Custom)
|
||
│
|
||
│ (1:N)
|
||
▼
|
||
SitePageSection → بخشهای هر صفحه
|
||
```
|
||
|
||
### 4.3 الگوی CQRS موجود (برای مرجع)
|
||
|
||
```
|
||
Proto (gRPC Definition)
|
||
↓
|
||
WebApi/Services/{Feature}Service.cs (extends generated gRPC base)
|
||
↓ Mapster (Proto → Command/Query)
|
||
Application/{Feature}CQ/Commands/ or Queries/
|
||
↓ MediatR
|
||
Handler → Repository (DbContext)
|
||
↓
|
||
Domain/Entities/{Entity}.cs
|
||
```
|
||
|
||
---
|
||
|
||
## 5. فاز ۱ — موجودیتهای بکند (CMS) ✅ تکمیل شد
|
||
|
||
> **وضعیت:** ✅ تکمیل | **اولویت:** بالا | **پیشنیاز:** ندارد
|
||
|
||
### 5.1 موجودیتهای جدید Domain
|
||
|
||
#### `BlogPost.cs`
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Domain/Entities/Blog/BlogPost.cs
|
||
Base: BaseAuditableEntity
|
||
|
||
Properties:
|
||
- string Title (required, max 200)
|
||
- string Slug (required, unique, max 200)
|
||
- string Summary (max 500) — خلاصه برای کارتها
|
||
- string HtmlContent (required) — محتوای HTML کامل
|
||
- string? FeaturedImagePath — تصویر شاخص
|
||
- string? FeaturedImageThumbnailPath — تامبنیل تصویر شاخص
|
||
- BlogPostStatus Status (enum: Draft, Published, Scheduled, Archived)
|
||
- DateTime? PublishedAt — زمان انتشار
|
||
- DateTime? ScheduledPublishAt — زمانبندی انتشار
|
||
- int ViewCount — تعداد بازدید
|
||
- long AuthorUserId — نویسنده
|
||
- bool IsFeatured — نمایش در صفحه اول
|
||
- int SortOrder — ترتیب نمایش
|
||
|
||
Relations:
|
||
- ICollection<BlogPostCategory> BlogPostCategories
|
||
- ICollection<BlogPostTag> BlogPostTags
|
||
- ICollection<BlogPostImage> BlogPostImages
|
||
```
|
||
|
||
#### `BlogCategory.cs`
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Domain/Entities/Blog/BlogCategory.cs
|
||
Base: BaseAuditableEntity
|
||
|
||
Properties:
|
||
- string Title (required, max 100)
|
||
- string Slug (required, unique, max 100)
|
||
- string? Description (max 500)
|
||
- string? IconName — آیکون Material
|
||
- int SortOrder
|
||
- bool IsActive
|
||
|
||
Relations:
|
||
- ICollection<BlogPostCategory> BlogPostCategories
|
||
```
|
||
|
||
#### `BlogPostCategory.cs` (Join Table)
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Domain/Entities/Blog/BlogPostCategory.cs
|
||
Base: BaseEntity
|
||
|
||
Properties:
|
||
- long BlogPostId
|
||
- long BlogCategoryId
|
||
|
||
Relations:
|
||
- BlogPost BlogPost
|
||
- BlogCategory BlogCategory
|
||
```
|
||
|
||
#### `BlogPostTag.cs` (Join Table)
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Domain/Entities/Blog/BlogPostTag.cs
|
||
Base: BaseEntity
|
||
|
||
Properties:
|
||
- long BlogPostId
|
||
- long TagId
|
||
|
||
Relations:
|
||
- BlogPost BlogPost
|
||
- Tag Tag (موجود — استفاده مجدد)
|
||
```
|
||
|
||
#### `BlogPostImage.cs`
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Domain/Entities/Blog/BlogPostImage.cs
|
||
Base: BaseAuditableEntity
|
||
|
||
Properties:
|
||
- long BlogPostId
|
||
- string ImagePath
|
||
- string ThumbnailPath
|
||
- string? AltText (max 200)
|
||
- string? Caption (max 300)
|
||
- int SortOrder
|
||
|
||
Relations:
|
||
- BlogPost BlogPost
|
||
```
|
||
|
||
#### `SitePage.cs` (صفحات دینامیک)
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Domain/Entities/Content/SitePage.cs
|
||
Base: BaseAuditableEntity
|
||
|
||
Properties:
|
||
- string PageKey (unique, e.g. "about", "contact") — کلید شناسایی
|
||
- string Title (max 200)
|
||
- string? MetaDescription (max 300) — SEO
|
||
- string? HeroTitle — عنوان Hero
|
||
- string? HeroSubtitle — زیرعنوان Hero
|
||
- string? HeroImagePath — تصویر Hero
|
||
- bool IsActive
|
||
|
||
Relations:
|
||
- ICollection<SitePageSection> Sections
|
||
```
|
||
|
||
#### `SitePageSection.cs` (بخشهای صفحه)
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Domain/Entities/Content/SitePageSection.cs
|
||
Base: BaseAuditableEntity
|
||
|
||
Properties:
|
||
- long SitePageId
|
||
- string SectionKey (e.g. "mission", "vision", "team-member-1")
|
||
- string Title (max 200)
|
||
- string? Subtitle (max 300)
|
||
- string? HtmlContent — محتوای HTML
|
||
- string? IconName — آیکون Material
|
||
- string? ImagePath
|
||
- string? ImageThumbnailPath
|
||
- int SortOrder
|
||
- bool IsActive
|
||
- string? ExtraData — JSON blob for flexible data
|
||
|
||
Relations:
|
||
- SitePage SitePage
|
||
```
|
||
|
||
#### Enum: `BlogPostStatus.cs`
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Domain/Enums/BlogPostStatus.cs
|
||
|
||
Values:
|
||
Draft = 0
|
||
Published = 1
|
||
Scheduled = 2
|
||
Archived = 3
|
||
```
|
||
|
||
### 5.2 Entity Configurations (Infrastructure)
|
||
|
||
```
|
||
فایلهای جدید:
|
||
CMS/src/CMSMicroservice.Infrastructure/Configurations/Blog/
|
||
├── BlogPostConfiguration.cs
|
||
├── BlogCategoryConfiguration.cs
|
||
├── BlogPostCategoryConfiguration.cs
|
||
├── BlogPostTagConfiguration.cs
|
||
└── BlogPostImageConfiguration.cs
|
||
CMS/src/CMSMicroservice.Infrastructure/Configurations/Content/
|
||
├── SitePageConfiguration.cs
|
||
└── SitePageSectionConfiguration.cs
|
||
|
||
فایلهای ویرایشی:
|
||
CMS/src/CMSMicroservice.Infrastructure/ApplicationDbContext.cs
|
||
+ DbSet<BlogPost> BlogPosts
|
||
+ DbSet<BlogCategory> BlogCategories
|
||
+ DbSet<BlogPostCategory> BlogPostCategories
|
||
+ DbSet<BlogPostTag> BlogPostTags
|
||
+ DbSet<BlogPostImage> BlogPostImages
|
||
+ DbSet<SitePage> SitePages
|
||
+ DbSet<SitePageSection> SitePageSections
|
||
```
|
||
|
||
### 5.3 Proto Definitions
|
||
|
||
#### `blogpost.proto`
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Protobuf/Protos/blogpost.proto
|
||
|
||
service BlogPostContract {
|
||
rpc CreateBlogPost (CreateBlogPostRequest) returns (BlogPostResponse);
|
||
rpc UpdateBlogPost (UpdateBlogPostRequest) returns (BlogPostResponse);
|
||
rpc DeleteBlogPost (DeleteBlogPostRequest) returns (BoolResponse);
|
||
rpc GetBlogPost (GetBlogPostRequest) returns (BlogPostResponse);
|
||
rpc GetBlogPostBySlug (GetBlogPostBySlugRequest) returns (BlogPostResponse);
|
||
rpc GetAllBlogPosts (GetAllBlogPostsRequest) returns (BlogPostListResponse);
|
||
rpc GetPublishedBlogPosts (GetPublishedBlogPostsRequest) returns (BlogPostListResponse);
|
||
rpc GetFeaturedBlogPosts (GetFeaturedBlogPostsRequest) returns (BlogPostListResponse);
|
||
rpc PublishBlogPost (PublishBlogPostRequest) returns (BoolResponse);
|
||
rpc ArchiveBlogPost (ArchiveBlogPostRequest) returns (BoolResponse);
|
||
rpc IncrementViewCount (IncrementViewCountRequest) returns (BoolResponse);
|
||
}
|
||
```
|
||
|
||
#### `blogcategory.proto`
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Protobuf/Protos/blogcategory.proto
|
||
|
||
service BlogCategoryContract {
|
||
rpc CreateBlogCategory (CreateBlogCategoryRequest) returns (BlogCategoryResponse);
|
||
rpc UpdateBlogCategory (UpdateBlogCategoryRequest) returns (BlogCategoryResponse);
|
||
rpc DeleteBlogCategory (DeleteBlogCategoryRequest) returns (BoolResponse);
|
||
rpc GetBlogCategory (GetBlogCategoryRequest) returns (BlogCategoryResponse);
|
||
rpc GetAllBlogCategories (GetAllBlogCategoriesRequest) returns (BlogCategoryListResponse);
|
||
}
|
||
```
|
||
|
||
#### `blogpostimage.proto`
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Protobuf/Protos/blogpostimage.proto
|
||
|
||
service BlogPostImageContract {
|
||
rpc AddBlogPostImage (AddBlogPostImageRequest) returns (BlogPostImageResponse);
|
||
rpc DeleteBlogPostImage (DeleteBlogPostImageRequest) returns (BoolResponse);
|
||
rpc GetBlogPostImages (GetBlogPostImagesRequest) returns (BlogPostImageListResponse);
|
||
rpc ReorderBlogPostImages (ReorderBlogPostImagesRequest) returns (BoolResponse);
|
||
}
|
||
```
|
||
|
||
#### `sitepage.proto`
|
||
```
|
||
Location: CMS/src/CMSMicroservice.Protobuf/Protos/sitepage.proto
|
||
|
||
service SitePageContract {
|
||
rpc GetSitePage (GetSitePageRequest) returns (SitePageResponse);
|
||
rpc GetSitePageByKey (GetSitePageByKeyRequest) returns (SitePageResponse);
|
||
rpc UpdateSitePage (UpdateSitePageRequest) returns (SitePageResponse);
|
||
rpc GetAllSitePages (GetAllSitePagesRequest) returns (SitePageListResponse);
|
||
rpc CreateSitePageSection (CreateSitePageSectionRequest) returns (SitePageSectionResponse);
|
||
rpc UpdateSitePageSection (UpdateSitePageSectionRequest) returns (SitePageSectionResponse);
|
||
rpc DeleteSitePageSection (DeleteSitePageSectionRequest) returns (BoolResponse);
|
||
rpc ReorderSitePageSections (ReorderSitePageSectionsRequest) returns (BoolResponse);
|
||
}
|
||
```
|
||
|
||
### 5.4 Application Layer (CQRS)
|
||
|
||
```
|
||
CMS/src/CMSMicroservice.Application/
|
||
BlogPostCQ/
|
||
Commands/
|
||
CreateBlogPost/
|
||
CreateBlogPostCommand.cs
|
||
CreateBlogPostCommandHandler.cs
|
||
CreateBlogPostCommandValidator.cs
|
||
UpdateBlogPost/
|
||
UpdateBlogPostCommand.cs
|
||
UpdateBlogPostCommandHandler.cs
|
||
UpdateBlogPostCommandValidator.cs
|
||
DeleteBlogPost/
|
||
DeleteBlogPostCommand.cs
|
||
DeleteBlogPostCommandHandler.cs
|
||
PublishBlogPost/
|
||
PublishBlogPostCommand.cs
|
||
PublishBlogPostCommandHandler.cs
|
||
ArchiveBlogPost/
|
||
ArchiveBlogPostCommand.cs
|
||
ArchiveBlogPostCommandHandler.cs
|
||
Queries/
|
||
GetBlogPost/
|
||
GetBlogPostQuery.cs
|
||
GetBlogPostQueryHandler.cs
|
||
GetBlogPostBySlug/
|
||
GetBlogPostBySlugQuery.cs
|
||
GetBlogPostBySlugQueryHandler.cs
|
||
GetAllBlogPosts/
|
||
GetAllBlogPostsQuery.cs
|
||
GetAllBlogPostsQueryHandler.cs
|
||
GetPublishedBlogPosts/
|
||
GetPublishedBlogPostsQuery.cs
|
||
GetPublishedBlogPostsQueryHandler.cs
|
||
GetFeaturedBlogPosts/
|
||
GetFeaturedBlogPostsQuery.cs
|
||
GetFeaturedBlogPostsQueryHandler.cs
|
||
|
||
BlogCategoryCQ/
|
||
Commands/
|
||
CreateBlogCategory/ (3 files)
|
||
UpdateBlogCategory/ (3 files)
|
||
DeleteBlogCategory/ (2 files)
|
||
Queries/
|
||
GetBlogCategory/ (2 files)
|
||
GetAllBlogCategories/ (2 files)
|
||
|
||
BlogPostImageCQ/
|
||
Commands/
|
||
AddBlogPostImage/ (3 files)
|
||
DeleteBlogPostImage/ (2 files)
|
||
ReorderBlogPostImages/ (2 files)
|
||
Queries/
|
||
GetBlogPostImages/ (2 files)
|
||
|
||
SitePageCQ/
|
||
Commands/
|
||
UpdateSitePage/ (3 files)
|
||
CreateSitePageSection/ (3 files)
|
||
UpdateSitePageSection/ (3 files)
|
||
DeleteSitePageSection/ (2 files)
|
||
ReorderSitePageSections/ (2 files)
|
||
Queries/
|
||
GetSitePage/ (2 files)
|
||
GetSitePageByKey/ (2 files)
|
||
GetAllSitePages/ (2 files)
|
||
```
|
||
|
||
### 5.5 WebApi Services & Mappings
|
||
|
||
```
|
||
CMS/src/CMSMicroservice.WebApi/
|
||
Services/
|
||
BlogPostService.cs — extends BlogPostContractBase
|
||
BlogCategoryService.cs — extends BlogCategoryContractBase
|
||
BlogPostImageService.cs — extends BlogPostImageContractBase
|
||
SitePageService.cs — extends SitePageContractBase
|
||
Common/Mappings/
|
||
BlogPostProfile.cs
|
||
BlogCategoryProfile.cs
|
||
BlogPostImageProfile.cs
|
||
SitePageProfile.cs
|
||
```
|
||
|
||
### 5.6 Migration
|
||
|
||
```bash
|
||
# ساخت Migration جدید
|
||
cd CMS/src/CMSMicroservice.Infrastructure
|
||
dotnet ef migrations add AddBlogAndSitePages \
|
||
--startup-project ../CMSMicroservice.WebApi \
|
||
--context ApplicationDbContext
|
||
```
|
||
|
||
---
|
||
|
||
## 6. فاز ۲ — پنل مدیریت بلاگ (BackOffice) ✅ تکمیل شد
|
||
|
||
> **تخمین:** ۲-۳ روز | **اولویت:** بالا | **پیشنیاز:** فاز ۱ | **وضعیت: تکمیل ✅**
|
||
|
||
### 6.1 صفحات ایجاد شده BackOffice
|
||
|
||
```
|
||
BackOffice/src/BackOffice/Pages/
|
||
Blog/
|
||
BlogPostManagementPage.razor — لیست پستها + فیلتر وضعیت/دستهبندی + جستجو
|
||
BlogPostManagementPage.razor.cs — کدبیهایند: LoadServerData، CRUD، Publish، Archive
|
||
BlogCategoryManagementPage.razor — مدیریت دستهبندیها (MudDataGrid)
|
||
BlogCategoryManagementPage.razor.cs
|
||
Components/
|
||
BlogPostEditDialog.razor — ایجاد/ویرایش پست (عنوان، اسلاگ، خلاصه، HTML، دستهبندیها)
|
||
BlogPostEditDialog.razor.cs — Multi-select دستهبندی + ویژه/ترتیب
|
||
BlogCategoryEditDialog.razor — ایجاد/ویرایش دستهبندی
|
||
BlogCategoryEditDialog.razor.cs
|
||
|
||
Content/
|
||
SitePageManagementPage.razor — لیست صفحات سایت
|
||
SitePageManagementPage.razor.cs — ویرایش صفحه + مدیریت بخشها
|
||
Components/
|
||
SitePageEditDialog.razor — ویرایش اطلاعات صفحه (Hero, Meta, وضعیت)
|
||
SitePageEditDialog.razor.cs
|
||
SitePageSectionsDialog.razor — مدیریت بخشهای صفحه (CRUD + لیست)
|
||
SitePageSectionsDialog.razor.cs
|
||
SitePageSectionEditDialog.razor — ایجاد/ویرایش بخش (کلید، عنوان، HTML، تصاویر)
|
||
SitePageSectionEditDialog.razor.cs
|
||
```
|
||
|
||
### 6.2 ناوبری BackOffice (NavMenu) ✅
|
||
|
||
بخش «مدیریت محتوا» به `NavMenu.razor` اضافه شد (قبل از بخش سیستم):
|
||
|
||
```razor
|
||
<MudText Class="nav-menu__title" Typo="Typo.subtitle2">مدیریت محتوا</MudText>
|
||
|
||
<AuthorizeView Roles="Administrator">
|
||
<Authorized>
|
||
@if (CanManageBlog)
|
||
{
|
||
<MudNavGroup Title="بلاگ" Icon="@Icons.Material.Filled.Article" Expanded="false">
|
||
<MudNavLink Href="/blog/posts" Icon="@Icons.Material.Filled.PostAdd">پستها</MudNavLink>
|
||
<MudNavLink Href="/blog/categories" Icon="@Icons.Material.Filled.Category">دستهبندیها</MudNavLink>
|
||
</MudNavGroup>
|
||
}
|
||
|
||
@if (CanManageSitePages)
|
||
{
|
||
<MudNavLink Href="/content/pages" Icon="@Icons.Material.Filled.WebAsset">صفحات سایت</MudNavLink>
|
||
}
|
||
</Authorized>
|
||
</AuthorizeView>
|
||
```
|
||
|
||
مجوزهای جدید: `blog.manage`، `sitepages.manage`
|
||
|
||
### 6.3 سرویسهای BackOffice ✅
|
||
|
||
```
|
||
BackOffice/src/BackOffice/Services/
|
||
Blog/
|
||
IBlogCategoryService.cs — اینترفیس + DTOs (Filter, ListResult, Item, Edit)
|
||
BlogCategoryService.cs — پیادهسازی با gRPC client (GetAll, GetActive, GetById, Create, Update, Delete)
|
||
IBlogPostService.cs — اینترفیس + DTOs (Filter, ListResult, ListItem, Details, Edit, PublishResult, ArchiveResult)
|
||
BlogPostService.cs — پیادهسازی (CRUD + Publish + Archive)
|
||
IBlogPostImageService.cs — اینترفیس + DTOs (ImageItem, ImageAdd, ImageSort)
|
||
BlogPostImageService.cs — پیادهسازی (GetByPostId, Add, Delete, Reorder)
|
||
Content/
|
||
ISitePageService.cs — اینترفیس + DTOs (Summary, Details, SectionItem, Edit, SectionEdit, SectionSort)
|
||
SitePageService.cs — پیادهسازی (GetAll, GetById, Update, CRUD Section, Reorder)
|
||
```
|
||
|
||
ثبت DI در `ConfigureService.cs`:
|
||
- ۴ gRPC Client: `BlogPostContractClient`، `BlogCategoryContractClient`، `BlogPostImageContractClient`، `SitePageContractClient`
|
||
- ۴ Application Service: `IBlogPostService`، `IBlogCategoryService`، `IBlogPostImageService`، `ISitePageService`
|
||
|
||
### 6.4 ویرایشگر محتوا
|
||
|
||
از پکیج موجود `Tizzani.MudBlazor.HtmlEditor` (قبلاً نصب شده) استفاده میشود:
|
||
|
||
```razor
|
||
<!-- در CreateBlogPostDialog -->
|
||
<MudHtmlEditor @bind-Value="_post.HtmlContent"
|
||
Placeholder="محتوای مقاله را بنویسید..."
|
||
MinHeight="400px" />
|
||
```
|
||
|
||
### 6.5 آپلود تصویر شاخص
|
||
|
||
از سرویس موجود `IFileManagerService` استفاده:
|
||
|
||
```csharp
|
||
// الگوی موجود از ProductService
|
||
var imagePath = await _fileManagerService.UploadFileAsync(imageBytes, fileName);
|
||
```
|
||
|
||
### 6.6 مشخصات صفحه مدیریت مقالات
|
||
|
||
| ویژگی | شرح |
|
||
|-------|------|
|
||
| جدول مقالات | MudDataGrid با ستونهای: عنوان، دستهبندی، وضعیت، تاریخ انتشار، بازدید |
|
||
| فیلتر | وضعیت (همه/پیشنویس/منتشر/آرشیو) + جستجوی عنوان |
|
||
| عملیات | ایجاد، ویرایش، حذف، انتشار، آرشیو، پیشنمایش |
|
||
| تصویر شاخص | Drag & Drop آپلود + پیشنمایش |
|
||
| دستهبندی | Multi-select از دستهبندیهای موجود |
|
||
| تگ | Multi-select با autocomplete از تگهای موجود |
|
||
| ویرایشگر | WYSIWYG HTML editor (MudBlazor.HtmlEditor) |
|
||
|
||
---
|
||
|
||
## 7. فاز ۳ — صفحات محتوای دینامیک (درباره ما / تماس با ما) ✅ تکمیل شد
|
||
|
||
> **وضعیت:** ✅ تکمیل | **اولویت:** متوسط | **پیشنیاز:** فاز ۱
|
||
|
||
### 7.1 تغییرات About.razor
|
||
|
||
**قبل (فعلی):** محتوا هاردکد — عنوانها، تصاویر، متون همه در Razor مستقیم نوشته شده
|
||
|
||
**بعد (جدید):**
|
||
```
|
||
OnInitializedAsync:
|
||
1. صدا زدن SitePageContract.GetSitePageByKey("about")
|
||
2. دریافت SitePage + Sections
|
||
3. نمایش دینامیک با loop روی Sections
|
||
|
||
Fallback:
|
||
- اگر سرویس خطا داد → نمایش محتوای پیشفرض (هاردکد فعلی به عنوان fallback)
|
||
```
|
||
|
||
ساختار بخشهای صفحه درباره ما:
|
||
|
||
| SectionKey | نوع | داده |
|
||
|-----------|-----|------|
|
||
| `hero` | Hero | HeroTitle, HeroSubtitle, HeroImagePath |
|
||
| `mission` | Card | Title, HtmlContent, IconName |
|
||
| `vision` | Card | Title, HtmlContent, IconName |
|
||
| `value-1` ... `value-N` | Cards Grid | Title, Subtitle, IconName, HtmlContent |
|
||
| `team-1` ... `team-N` | Team Cards | Title (نام), Subtitle (سمت), HtmlContent (توضیح), ImagePath |
|
||
|
||
### 7.2 تغییرات Contact.razor
|
||
|
||
| SectionKey | نوع | داده |
|
||
|-----------|-----|------|
|
||
| `hero` | Hero | HeroTitle, HeroSubtitle |
|
||
| `contact-info` | Info | ExtraData (JSON: address, phone, email, hours) |
|
||
| `social-media` | Links | ExtraData (JSON: telegram, instagram, linkedin, whatsapp urls) |
|
||
| `map` | Map | ExtraData (JSON: lat, lng, address text) |
|
||
|
||
### 7.3 Seed Data
|
||
|
||
اجرای اولیه Migration با داده پیشفرض (محتوای هاردکد فعلی):
|
||
|
||
```csharp
|
||
// در SitePageConfiguration یا Seed Migration
|
||
var aboutPage = new SitePage {
|
||
PageKey = "about",
|
||
Title = "درباره ما",
|
||
HeroTitle = "پلتفرم هوشمند تیمسازی و مدیریت فروش",
|
||
HeroSubtitle = "ما با ارائه ابزارهای نوآورانه...",
|
||
IsActive = true
|
||
};
|
||
// + Sections با محتوای فعلی
|
||
```
|
||
|
||
---
|
||
|
||
## 8. فاز ۴ — نوسازی لندینگ پیج ✅ تکمیل شد
|
||
|
||
> **وضعیت:** ✅ تکمیل | **اولویت:** بالا | **پیشنیاز:** فاز ۱ (بخش بلاگ برای "آخرین مقالات")
|
||
|
||
### 8.1 ساختار جدید لندینگ پیج
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 🔝 HERO SECTION │
|
||
│ • Gradient animated background │
|
||
│ • عنوان بزرگ + زیرعنوان │
|
||
│ • Badgeهای انیمیشنی │
|
||
│ • CTA buttons با hover effects │
|
||
│ • تصویر/ایلاستریشن سمت چپ │
|
||
│ • اعداد زنده (تعداد کاربران، ...) │
|
||
└─────────────────────────────────────────┘
|
||
↓ Scroll indicator ↓
|
||
┌─────────────────────────────────────────┐
|
||
│ ✨ FEATURES (چرا ما؟) │
|
||
│ • 6 کارت با آیکون + عنوان + توضیح │
|
||
│ • Hover effect (scale + shadow) │
|
||
│ • انیمیشن fade-in on scroll │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ 📊 LIVE STATS (آمار زنده) │
|
||
│ • Counter animation (شمارش تعداد) │
|
||
│ • تعداد کاربران فعال │
|
||
│ • تعداد محصولات │
|
||
│ • حجم معاملات │
|
||
│ • Intersection Observer trigger │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ 🔄 HOW IT WORKS (چطور کار میکند) │
|
||
│ • Timeline بهبودیافته │
|
||
│ • آیکونهای مرحلهای بزرگتر │
|
||
│ • انیمیشن step-by-step │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ 📝 LATEST BLOG (آخرین مقالات) │ ← جدید!
|
||
│ • ۳ کارت آخرین مقالات منتشرشده │
|
||
│ • تصویر شاخص + عنوان + خلاصه │
|
||
│ • دکمه "مشاهده همه مقالات" │
|
||
│ • Loading skeleton │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ 🏆 TESTIMONIALS (اعتماد مشتریان) │
|
||
│ • Carousel/Swiper اسلایدر │
|
||
│ • Avatar + نام + سمت + نقل قول │
|
||
│ • Auto-play + دکمههای ناوبری │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ ❓ FAQ (سوالات متداول) │
|
||
│ • بدون تغییر اساسی (فقط پولیش) │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ 📞 CTA BANNER (دعوت نهایی) │ ← جدید!
|
||
│ • Gradient background │
|
||
│ • عنوان جذاب + دکمه ثبتنام │
|
||
│ • طرح ساده و تأثیرگذار │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ 🦶 FOOTER │
|
||
│ • بدون تغییر اساسی + لینک بلاگ │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 8.2 تغییرات فنی لندینگ
|
||
|
||
#### الف) Hero Section بهبودیافته
|
||
|
||
```
|
||
تغییرات:
|
||
1. Animated gradient background (CSS keyframes)
|
||
2. اعداد واقعی از API (تعداد کاربران، محصولات، ...)
|
||
3. Badgeها با انیمیشن pulse
|
||
4. Scroll-down indicator (chevron انیمیشنی)
|
||
5. تصویر/SVG illustration سمت چپ
|
||
```
|
||
|
||
#### ب) آمار زنده (Live Stats)
|
||
|
||
```
|
||
سرویس جدید — یک Query ساده در CMS:
|
||
GetPlatformStats → { UserCount, ProductCount, OrderCount, ... }
|
||
|
||
فرانت:
|
||
- Counter animation (JS interop یا CSS counter)
|
||
- Intersection Observer: فقط وقتی اسکرول به این بخش رسید شمارش شروع شود
|
||
```
|
||
|
||
#### ج) بخش آخرین مقالات (جدید)
|
||
|
||
```razor
|
||
<!-- Latest Blog Posts Section -->
|
||
<section class="py-16">
|
||
<MudContainer MaxWidth="MaxWidth.Large">
|
||
<MudText Typo="Typo.h4" Align="Align.Center">آخرین مقالات</MudText>
|
||
<MudGrid Spacing="4">
|
||
@foreach (var post in _latestPosts.Take(3))
|
||
{
|
||
<MudItem xs="12" md="4">
|
||
<BlogPostCard Post="post" />
|
||
</MudItem>
|
||
}
|
||
</MudGrid>
|
||
<MudButton Href="/blog" Variant="Variant.Outlined">مشاهده همه</MudButton>
|
||
</MudContainer>
|
||
</section>
|
||
```
|
||
|
||
#### د) CTA Banner نهایی (جدید)
|
||
|
||
```razor
|
||
<!-- Final CTA -->
|
||
<section class="cta-banner py-16">
|
||
<MudContainer MaxWidth="MaxWidth.Medium">
|
||
<MudStack AlignItems="AlignItems.Center" Spacing="4">
|
||
<MudText Typo="Typo.h3">آماده شروع هستید؟</MudText>
|
||
<MudText>همین الان ثبتنام کنید و از مزایای کارا بازار سلامت بهرهمند شوید.</MudText>
|
||
<MudButton Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large">
|
||
شروع رایگان
|
||
</MudButton>
|
||
</MudStack>
|
||
</MudContainer>
|
||
</section>
|
||
```
|
||
|
||
### 8.3 CSS جدید / بهبودیافته
|
||
|
||
```css
|
||
/* فایل: wwwroot/css/app.css — بخشهای جدید */
|
||
|
||
/* Animated gradient hero */
|
||
.hero-section {
|
||
background: linear-gradient(-45deg, #6366f1, #8b5cf6, #a855f7, #6366f1);
|
||
background-size: 400% 400%;
|
||
animation: gradientShift 8s ease infinite;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
/* Scroll-triggered fade-in */
|
||
.fade-in-up {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
.fade-in-up.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Counter animation */
|
||
@property --num {
|
||
syntax: '<integer>';
|
||
initial-value: 0;
|
||
inherits: false;
|
||
}
|
||
.counter {
|
||
animation: counter 2s ease-out forwards;
|
||
counter-reset: num var(--num);
|
||
}
|
||
|
||
/* Pulse badge */
|
||
.pulse-badge {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
|
||
70% { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
|
||
}
|
||
|
||
/* CTA Banner */
|
||
.cta-banner {
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||
color: white;
|
||
border-radius: 24px;
|
||
margin: 2rem;
|
||
}
|
||
|
||
/* Card hover effects */
|
||
.feature-card-v2 {
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
}
|
||
.feature-card-v2:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.12);
|
||
}
|
||
|
||
/* Blog post card */
|
||
.blog-card {
|
||
transition: transform 0.3s ease;
|
||
overflow: hidden;
|
||
}
|
||
.blog-card:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
.blog-card .blog-card-image {
|
||
transition: transform 0.5s ease;
|
||
}
|
||
.blog-card:hover .blog-card-image {
|
||
transform: scale(1.05);
|
||
}
|
||
```
|
||
|
||
### 8.4 JS Interop (حداقل)
|
||
|
||
```javascript
|
||
// فایل: wwwroot/js/landing.js
|
||
|
||
// Intersection Observer for fade-in animations
|
||
window.initScrollAnimations = () => {
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
|
||
document.querySelectorAll('.fade-in-up').forEach(el => observer.observe(el));
|
||
};
|
||
|
||
// Counter animation
|
||
window.animateCounter = (elementId, target, duration) => {
|
||
const el = document.getElementById(elementId);
|
||
if (!el) return;
|
||
let start = 0;
|
||
const step = target / (duration / 16);
|
||
const timer = setInterval(() => {
|
||
start += step;
|
||
if (start >= target) { start = target; clearInterval(timer); }
|
||
el.textContent = Math.floor(start).toLocaleString('fa-IR');
|
||
}, 16);
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 9. فاز ۵ — صفحات بلاگ فرانتآفیس ✅ تکمیل شد
|
||
|
||
> **وضعیت:** ✅ تکمیل | **اولویت:** بالا | **پیشنیاز:** فاز ۱
|
||
|
||
### 9.1 صفحات ایجاد شده (واقعی)
|
||
|
||
```
|
||
FrontOffice/src/FrontOffice.Main/Pages/Blog/
|
||
Index.razor — لیست مقالات با جستجو + فیلتر دستهبندی + صفحهبندی
|
||
Index.razor.cs — LoadPostsAsync، OnCategoryChanged، OnPageChanged، NavigateToPost
|
||
Post.razor — صفحه جزئیات مقاله (تصویر شاخص، breadcrumb، HTML، تگها)
|
||
Post.razor.cs — OnParametersSetAsync (لود slug)، IncrementViewCount خودکار
|
||
```
|
||
|
||
### 9.2 سرویسهای جدید فرانتآفیس
|
||
|
||
```
|
||
FrontOffice/src/FrontOffice.Main/Utilities/
|
||
BlogPostService.cs — (قبلاً فاز ۴ ایجاد شد) GetFeatured, GetPublished, GetBySlug, IncrementView
|
||
BlogCategoryService.cs — GetActiveCategoriesAsync (فیلتر سایدبار بلاگ)
|
||
```
|
||
|
||
**DTOs تعریف شده در `BlogPostService.cs`:**
|
||
- `BlogPostCardDto` — Id, Title, Slug, Summary, ThumbnailUrl, PublishedAt, ViewCount, IsFeatured, Categories
|
||
- `BlogPostDetailDto` — همه فیلدهای کارت + HtmlContent, FeaturedImagePath, Tags
|
||
- `BlogPostListResult` — Posts, TotalCount, TotalPages, CurrentPage
|
||
- `BlogCategoryInfo` — Id, Title, Slug
|
||
- `BlogTagInfo` — Id, Title, Name
|
||
|
||
**DTO تعریف شده در `BlogCategoryService.cs`:**
|
||
- `BlogCategoryDto` — Id, Title, Slug, Description, IconName, PostCount
|
||
|
||
### 9.3 مسیرها (Routes) — پیادهسازی شده
|
||
|
||
```csharp
|
||
// RouteConstants.cs
|
||
public static class Blog
|
||
{
|
||
public const string Index = "/blog";
|
||
public const string Post = "/blog/"; // usage: /blog/{slug}
|
||
}
|
||
```
|
||
|
||
### 9.4 طراحی صفحه لیست بلاگ — پیادهسازی شده
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ Blog Hero (گرادیان بنفش) │
|
||
│ "بلاگ" │
|
||
│ "آخرین مطالب، آموزشها و اخبار" │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ [جستجو...] [دستهبندی ▼] [جستجو 🔍] │ ← فیلتر + MudSelect
|
||
└─────────────────────────────────────────┘
|
||
┌────────┐ ┌────────┐ ┌────────┐
|
||
│ Card 1 │ │ Card 2 │ │ Card 3 │ ← blog-card-v2
|
||
│ thumb │ │ thumb │ │ thumb │ ← تصویر شاخص
|
||
│ cat │ │ cat │ │ cat │ ← chip دستهبندی
|
||
│ title │ │ title │ │ title │ ← ۲ خط clamp
|
||
│ desc │ │ desc │ │ desc │ ← ۲ خط clamp
|
||
│ 📅 👁 │ │ 📅 👁 │ │ 📅 👁 │ ← تاریخ + بازدید
|
||
└────────┘ └────────┘ └────────┘
|
||
← ← ← [1] [2] [3] → → → ← MudPagination
|
||
```
|
||
|
||
### 9.5 طراحی صفحه مقاله — پیادهسازی شده
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ [تصویر شاخص full-width] + overlay │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ خانه > بلاگ > عنوان مقاله │ ← Breadcrumb
|
||
│ │
|
||
│ [دستهبندی ۱] [دستهبندی ۲] │ ← Chips (کلیک → فیلتر)
|
||
│ │
|
||
│ عنوان مقاله (H4, bold) │
|
||
│ خلاصه مقاله (subtitle) │
|
||
│ │
|
||
│ 📅 تاریخ 👁 ۱,۲۳۴ بازدید │
|
||
│ ───────────────────────── │
|
||
│ │
|
||
│ [محتوای HTML مقاله] │ ← blog-content (styled)
|
||
│ ... │
|
||
│ │
|
||
│ ───────────────────────── │
|
||
│ 🏷️ [تگ ۱] [تگ ۲] [تگ ۳] │ ← Outlined chips
|
||
│ │
|
||
│ [← بازگشت به بلاگ] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 9.6 CSS اضافه شده (بخش Blog Pages در site.css)
|
||
|
||
```css
|
||
/* Blog Pages region — اضافه شده به site.css */
|
||
.blog-hero — گرادیان بنفش (مشابه CTA)
|
||
.blog-title-clamp — -webkit-line-clamp: 2
|
||
.blog-summary-clamp — -webkit-line-clamp: 2
|
||
.cursor-pointer — cursor: pointer
|
||
.blog-detail-hero — تصویر شاخص 340px + overlay
|
||
.blog-content — تایپوگرافی مقاله (h1-h3, p, img, blockquote, code, pre, ul/ol, a)
|
||
/* + mobile overrides + dark mode */
|
||
```
|
||
|
||
### 9.7 ناوبری — لینک بلاگ اضافه شد ✅
|
||
|
||
```
|
||
تغییرات واقعی:
|
||
- MainLayout.razor → لینک "بلاگ" در navbar دسکتاپ (بین FAQ و Contact)
|
||
- MainLayout.razor → لینک "بلاگ" در Mobile Drawer
|
||
- Index.razor (لندینگ) → کارتهای بلاگ کلیکپذیر شدند (onclick)
|
||
- Index.razor (لندینگ) → دکمه "مشاهده همه مقالات" فعال شد (uncomment)
|
||
```
|
||
|
||
### 9.8 ثبت DI (ConfigureServices.cs)
|
||
|
||
```csharp
|
||
// اضافه شده:
|
||
using CMSMicroservice.Protobuf.Protos.BlogCategory;
|
||
|
||
// Common services:
|
||
services.AddScoped<BlogCategoryService>();
|
||
|
||
// gRPC clients:
|
||
services.AddScoped(CreateAuthenticatedClient<BlogCategoryContract.BlogCategoryContractClient>);
|
||
```
|
||
|
||
---
|
||
|
||
## 10. فاز ۶ — بهبود داشبورد کاربر ✅ تکمیل شد
|
||
|
||
> **وضعیت:** ✅ تکمیل | **اولویت:** متوسط | **پیشنیاز:** ندارد
|
||
|
||
### 10.1 بازطراحی کامل Profile/Index.razor
|
||
|
||
صفحه `/profile` به طور کامل با طراحی مدرن بازنویسی شد:
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ ████ GRADIENT HEADER CARD ████ │ ← .dash-header-card
|
||
│ 🧑 آواتار شیشهای | نام + موبایل │ ← .dash-avatar
|
||
│ عضو از ... | [💎 سامانه دایا] │ ← دکمه glass-morphism
|
||
└─────────────────────────────────────────┘
|
||
┌──────────┐ ┌──────────┐ ┌──────────┐
|
||
│ 💳 اعتباری│ │ 🏷 تخفیف │ │ 👥 تیمی │ ← .dash-wallet-card
|
||
│ ۲.۵M تومان│ │ ۵۰۰K │ │ ۸۵۰K │ (hover lift)
|
||
└──────────┘ └──────────┘ └──────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ 📎 کد دعوت شما | [اشتراکگذاری] │ ← فعال اگر پکیج + باشگاه
|
||
│ یا │
|
||
│ 🔒 لینک دعوت فعال نشده (dashed border)│ ← حالت قفل
|
||
│ [شروع فرآیند تامین اعتبار] │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ دسترسی سریع │ ← .dash-tile (10 تایل)
|
||
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
|
||
│ │شخصی│ │آدرس│ │شجره│ │تنظیم│ │ هر تایل:
|
||
│ └────┘ └────┘ └────┘ └────┘ │ - آواتار رنگی
|
||
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ - عنوان + زیرعنوان
|
||
│ │فروش│ │کیف │ │برداشت│ │باشگا│ │ - hover: lift + primary border
|
||
│ └────┘ └────┘ └────┘ └────┘ │
|
||
│ ┌────┐ ┌────┐ │
|
||
│ │آمار│ │پاداش│ │
|
||
│ └────┘ └────┘ │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 10.2 تغییرات فایلها
|
||
|
||
**`Profile/Index.razor`** — بازنویسی کامل:
|
||
- هدر گرادیانی (`dash-header-card`) با آواتار شیشهای
|
||
- ۳ کارت والت جداگانه (اعتباری/تخفیف/تیمی) با رنگهای مختلف
|
||
- بخش رفرال تمیزتر (فعال با TextField + دکمه | قفل با dashed border)
|
||
- ۱۰ تایل مدرن با `DashTile` record + آواتار رنگی
|
||
|
||
**`Profile/Index.razor.cs`** — اضافه شده:
|
||
```csharp
|
||
private readonly List<DashTile> _dashTiles = new()
|
||
{
|
||
new(RouteConstants.Profile.Personal, Icons.Material.Filled.Person, "اطلاعات شخصی", ...),
|
||
new(RouteConstants.Profile.Addresses, Icons.Material.Filled.LocationOn, "آدرسها", ...),
|
||
// ... 10 تایل با رنگبندی اختصاصی
|
||
};
|
||
private record DashTile(string Href, string Icon, string Title, string Subtitle, string AvatarStyle);
|
||
```
|
||
|
||
### 10.3 CSS اضافه شده (بخش Dashboard v2 در site.css)
|
||
|
||
```css
|
||
/* Dashboard v2 region */
|
||
.dash-header-card — گرادیان بنفش + دایره تزئینی
|
||
.dash-avatar — شیشهای (rgba + border سفید)
|
||
.dash-wallet-card — border + hover lift
|
||
.dash-tile — border + hover lift + primary border on hover
|
||
/* + dark mode + mobile overrides */
|
||
```
|
||
|
||
---
|
||
|
||
## 11. فاز ۷ — بهینهسازی موبایل ✅ تکمیل شد
|
||
|
||
> **وضعیت:** ✅ تکمیل | **اولویت:** بالا | **پیشنیاز:** فازهای ۴-۶
|
||
|
||
### 11.1 مشکلات شناسایی و رفع شده
|
||
|
||
| مشکل | وضعیت قبل | راهحل |
|
||
|------|----------|--------|
|
||
| **Dead Zone ناوبری (600-959px)** | همبرگر فقط زیر 600px، لینکها فقط بالای 960px | تغییر Breakpoint از `SmAndUp` به `MdAndUp` |
|
||
| **فوتر پنهان در موبایل** | `DeviceDetector.IsDesktop()` فوتر را حذف میکرد | حذف شرط — فوتر همیشه نمایش داده شود |
|
||
| **عدم وجود Bottom Nav** | فقط Drawer برای ناوبری موبایل | اضافه شدن bottom-nav ثابت (5 لینک) |
|
||
| **تایپوگرافی بزرگ** | h1=2rem, h2=1.875rem ثابت | responsive: h1→1.5rem, h2→1.35rem در موبایل |
|
||
| **Touch targets کوچک** | Dense AppBar، لینکهای Drawer بدون padding | min-height: 44px برای لینکها، 40px برای آیکونها |
|
||
| **نقشه تماس بلند** | 400px ثابت | 240px در موبایل با کلاس `contact-map-placeholder` |
|
||
| **دکمههای About تنگ** | Row بدون flex-wrap | اضافه flex-wrap + full-width در موبایل |
|
||
| **محتوای بلاگ overflow** | بدون guard | `overflow-x: auto` + table/iframe responsive |
|
||
| **هاور در تاچ** | جلوههای هاور در صفحه لمسی | `@media (hover: none)` — غیرفعال |
|
||
| **Safe area** | بدون padding | `env(safe-area-inset-*)` برای notched phones |
|
||
| **theme-color** | نداشت | `<meta name="theme-color" content="#7c4dff">` |
|
||
|
||
### 11.2 Bottom Navigation — پیادهسازی
|
||
|
||
```
|
||
┌──────────────────────────────────────┐
|
||
│ 🏠 🏬 📰 🛒 👤 │ ← .bottom-nav (fixed)
|
||
│ خانه فروش بلاگ سبد پروفایل │ backdrop-filter blur
|
||
└──────────────────────────────────────┘
|
||
```
|
||
|
||
- فقط در زیر `Breakpoint.MdAndUp` نمایش داده شود (`MudHidden`)
|
||
- اگر لاگین نباشد: دکمه "ورود" بجای "سبد خرید" و "پروفایل"
|
||
- `padding-bottom: 68px` روی `.main-content-wrapper` برای جلوگیری از overlap
|
||
- `env(safe-area-inset-bottom)` برای گوشیهای notched
|
||
|
||
### 11.3 CSS اضافه شده (بخش Phase 7 در site.css ~120 خط)
|
||
|
||
```
|
||
.bottom-nav — fixed, z-1100, rounded top, glass blur
|
||
.bottom-nav-item — flex column, min 48px touch, transition color
|
||
.main-content-wrapper — padding-bottom 68px (≤960px)
|
||
responsive typography — h1-h5 smaller ≤600px
|
||
touch targets — drawer links 44px, appbar icons 40px
|
||
footer mobile — compact padding, smaller text
|
||
landing mobile — smaller chips, timeline text
|
||
blog mobile — shorter thumbnails, scaled pagination, overflow guard
|
||
dashboard mobile — compact wallets + tiles
|
||
about mobile — hero button wrap, reduced padding
|
||
contact mobile — shorter map, full-width submit
|
||
global mobile — tighter container padding, safe-area
|
||
@media (hover: none) — disable hover transforms on touch
|
||
```
|
||
|
||
### 11.4 فایلهای تغییریافته
|
||
|
||
```
|
||
MainLayout.razor — Breakpoint fix + Bottom Nav + Footer gate removed
|
||
site.css — +120 خط CSS موبایل (Phase 7 region)
|
||
_Host.cshtml — +theme-color + apple-mobile-web-app meta tags
|
||
Contact.razor — +class contact-map-placeholder
|
||
About.razor — +flex-wrap روی دکمههای hero
|
||
```
|
||
|
||
---
|
||
|
||
## 12. فایلهای تغییریافته (نقشه فایلها)
|
||
|
||
### فایلهای جدید
|
||
|
||
| پروژه | مسیر | تعداد فایل |
|
||
|--------|------|-----------|
|
||
| **CMS Domain** | `Entities/Blog/` (BlogPost, BlogCategory, BlogTag, BlogPostCategory, BlogPostTag, BlogPostImage) + `Entities/Content/` (SitePage, SitePageAttachment) + `Enums/` (BlogPostStatus) | **9** |
|
||
| **CMS Infrastructure** | `Configurations/Blog/` (5) + `Configurations/Content/` (2) + EF Migration | **8** |
|
||
| **CMS Application** | `BlogPostCQ/` (~25) + `BlogCategoryCQ/` (~12) + `BlogPostImageCQ/` (~9) + `SitePageCQ/` (~18) | **~64** |
|
||
| **CMS Protobuf** | `public_messages.proto` + `blogpost.proto` + `blogcategory.proto` + `sitepage.proto` | **4** |
|
||
| **CMS WebApi** | `Services/` (BlogPostService, BlogCategoryService, SitePageService, BlogPostImageService) + `Mappings/` (4 profiles) | **8** |
|
||
| **BackOffice Pages** | `Pages/Blog/` (BlogPosts.razor, BlogCategories.razor + ۲ dialog) + `Pages/Content/` (SitePages.razor + ۳ dialog) | **10** |
|
||
| **BackOffice Services** | `Services/Blog/` (BlogPostService, BlogCategoryService, BlogTagService + ۳ model) + `Services/Content/` (SitePageService + model) | **8** |
|
||
| **FrontOffice Pages** | `Pages/Blog/Index.razor` + `Index.razor.cs` + `Post.razor` + `Post.razor.cs` | **4** |
|
||
| **FrontOffice Services** | `Utilities/BlogPostService.cs` + `Utilities/BlogCategoryService.cs` + `Utilities/SitePageService.cs` | **3** |
|
||
| **FrontOffice Assets** | `wwwroot/js/landing.js` | **1** |
|
||
| | | **~119 فایل جدید** |
|
||
|
||
### فایلهای ویرایشی
|
||
|
||
| پروژه | فایل | تغییر |
|
||
|--------|------|-------|
|
||
| CMS Infrastructure | `ApplicationDbContext.cs` | +7 DbSets (BlogPost, BlogCategory, BlogTag, BlogPostCategory, BlogPostTag, BlogPostImage, SitePage) |
|
||
| CMS WebApi | `Program.cs` | +4 gRPC service registrations |
|
||
| BackOffice | `Shared/NavMenu.razor` | +بخش مدیریت محتوا (بلاگ + صفحات) + ۲ مجوز جدید |
|
||
| BackOffice | `Common/Configure/ConfigureService.cs` | +4 gRPC clients + 4 services + using statements |
|
||
| FrontOffice | `Pages/Index.razor` | بازنویسی کامل (Hero + Features + Timeline + Stats + Blog + Testimonials + FAQ + CTA) |
|
||
| FrontOffice | `Pages/Index.razor.cs` | +LoadFeaturedPosts + NavigateToPost |
|
||
| FrontOffice | `Pages/About.razor` | تبدیل به دینامیک (CMS + fallback) |
|
||
| FrontOffice | `Pages/Contact.razor` | تبدیل به دینامیک (CMS + fallback) |
|
||
| FrontOffice | `Pages/Profile/Index.razor` | بازنویسی کامل (header card + wallets + tiles) |
|
||
| FrontOffice | `Pages/Profile/Index.razor.cs` | +DashTile record + _dashTiles لیست |
|
||
| FrontOffice | `Shared/MainLayout.razor` | +لینک بلاگ (desktop + mobile drawer) |
|
||
| FrontOffice | `Common/Configure/ConfigureServices.cs` | +BlogCategoryService + BlogCategoryContract gRPC |
|
||
| FrontOffice | `Utilities/RouteConstants.cs` | +Blog.Index + Blog.Post routes |
|
||
| FrontOffice | `wwwroot/css/site.css` | +Landing v2 + Blog Pages + Dashboard v2 (~300 خط CSS) |
|
||
| FrontOffice | `Pages/_Host.cshtml` | +landing.js script reference |
|
||
| | | **~15 فایل ویرایشی** |
|
||
|
||
---
|
||
|
||
## 13. جدول زمانی
|
||
|
||
```
|
||
هفته ۱:
|
||
├─ فاز ۱: موجودیتهای بکند (Entities + Protos + CQRS) [۲-۳ روز] ✅ تکمیل
|
||
└─ فاز ۲: پنل مدیریت بلاگ BackOffice [۲-۳ روز] ✅ تکمیل
|
||
|
||
هفته ۲:
|
||
├─ فاز ۳: صفحات دینامیک (About + Contact) [۱-۲ روز] ✅ تکمیل
|
||
├─ فاز ۴: نوسازی لندینگ پیج [۲-۳ روز] ✅ تکمیل
|
||
└─ فاز ۵: صفحات بلاگ FrontOffice [۲-۳ روز] ✅ تکمیل
|
||
|
||
هفته ۳:
|
||
├─ فاز ۶: بهبود داشبورد کاربر [۱-۲ روز] ✅ تکمیل
|
||
├─ فاز ۷: بهینهسازی موبایل [۱-۲ روز] ✅ تکمیل
|
||
└─ تست + رفع باگ + دیپلوی [۱-۲ روز]
|
||
```
|
||
|
||
**مجموع تخمین: ۱۲-۲۰ روز کاری (۲.۵ تا ۴ هفته)**
|
||
|
||
### ترتیب وابستگی
|
||
|
||
```
|
||
فاز ۱ (Backend) ──► فاز ۲ (Admin Blog)
|
||
│
|
||
├──────────► فاز ۳ (Dynamic Pages)
|
||
│
|
||
├──────────► فاز ۵ (FrontOffice Blog)
|
||
│ │
|
||
│ ▼
|
||
└──────────► فاز ۴ (Landing) ──► فاز ۷ (Mobile)
|
||
▲
|
||
فاز ۶ (Dashboard) ───────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 14. ریسکها و وابستگیها
|
||
|
||
| ریسک | احتمال | تأثیر | راهحل |
|
||
|------|--------|-------|--------|
|
||
| WYSIWYG Editor محدودیت RTL | متوسط | متوسط | تست اولیه MudBlazor.HtmlEditor با فارسی، fallback به textarea + markdown |
|
||
| حجم Migration بزرگ | کم | بالا | Migration را تکهتکه اجرا کن (Blog اول، SitePage بعد) |
|
||
| عملکرد لندینگ با انیمیشنها | متوسط | متوسط | Lazy load + Intersection Observer + حداقل JS |
|
||
| FMS قطعی هنگام آپلود تصویر | کم | بالا | Retry policy + پیام خطای مناسب |
|
||
| Slug فارسی در URL | متوسط | کم | استفاده از ID-based URLs با slug فقط برای SEO |
|
||
| سازگاری Dark Mode | متوسط | کم | تست هر بخش در هر دو حالت |
|
||
|
||
---
|
||
|
||
## ضمیمه: نمونه کد الگوهای کلیدی
|
||
|
||
### A. الگوی Entity (مطابق پروژه)
|
||
|
||
```csharp
|
||
// Domain/Entities/Blog/BlogPost.cs
|
||
public class BlogPost : BaseAuditableEntity
|
||
{
|
||
public string Title { get; set; } = default!;
|
||
public string Slug { get; set; } = default!;
|
||
public string? Summary { get; set; }
|
||
public string HtmlContent { get; set; } = default!;
|
||
public string? FeaturedImagePath { get; set; }
|
||
public string? FeaturedImageThumbnailPath { get; set; }
|
||
public BlogPostStatus Status { get; set; } = BlogPostStatus.Draft;
|
||
public DateTime? PublishedAt { get; set; }
|
||
public int ViewCount { get; set; }
|
||
public long AuthorUserId { get; set; }
|
||
public bool IsFeatured { get; set; }
|
||
public int SortOrder { get; set; }
|
||
|
||
public ICollection<BlogPostCategory> BlogPostCategories { get; set; } = new List<BlogPostCategory>();
|
||
public ICollection<BlogPostTag> BlogPostTags { get; set; } = new List<BlogPostTag>();
|
||
public ICollection<BlogPostImage> BlogPostImages { get; set; } = new List<BlogPostImage>();
|
||
}
|
||
```
|
||
|
||
### B. الگوی Proto (مطابق پروژه)
|
||
|
||
```protobuf
|
||
// blogpost.proto
|
||
syntax = "proto3";
|
||
option csharp_namespace = "CMSMicroservice.Protobuf";
|
||
import "google/protobuf/timestamp.proto";
|
||
import "google/protobuf/wrappers.proto";
|
||
|
||
service BlogPostContract {
|
||
rpc CreateBlogPost (CreateBlogPostRequest) returns (BlogPostResponse);
|
||
rpc GetPublishedBlogPosts (GetPublishedBlogPostsRequest) returns (BlogPostListResponse);
|
||
// ...
|
||
}
|
||
|
||
message CreateBlogPostRequest {
|
||
string title = 1;
|
||
string slug = 2;
|
||
string summary = 3;
|
||
string html_content = 4;
|
||
bytes featured_image = 5;
|
||
string featured_image_file_name = 6;
|
||
repeated int64 category_ids = 7;
|
||
repeated int64 tag_ids = 8;
|
||
bool is_featured = 9;
|
||
}
|
||
|
||
message BlogPostResponse {
|
||
int64 id = 1;
|
||
string title = 2;
|
||
string slug = 3;
|
||
string summary = 4;
|
||
string html_content = 5;
|
||
string featured_image_path = 6;
|
||
string featured_image_thumbnail_path = 7;
|
||
int32 status = 8;
|
||
google.protobuf.Timestamp published_at = 9;
|
||
int32 view_count = 10;
|
||
bool is_featured = 11;
|
||
repeated BlogCategoryInfo categories = 12;
|
||
repeated TagInfo tags = 13;
|
||
}
|
||
```
|
||
|
||
### C. الگوی CQRS Handler (مطابق پروژه)
|
||
|
||
```csharp
|
||
// Application/BlogPostCQ/Commands/CreateBlogPost/CreateBlogPostCommandHandler.cs
|
||
public class CreateBlogPostCommandHandler : IRequestHandler<CreateBlogPostCommand, long>
|
||
{
|
||
private readonly IApplicationDbContext _context;
|
||
private readonly IFileManagerService _fileManager;
|
||
|
||
public CreateBlogPostCommandHandler(
|
||
IApplicationDbContext context,
|
||
IFileManagerService fileManager)
|
||
{
|
||
_context = context;
|
||
_fileManager = fileManager;
|
||
}
|
||
|
||
public async Task<long> Handle(CreateBlogPostCommand request, CancellationToken ct)
|
||
{
|
||
var post = new BlogPost
|
||
{
|
||
Title = request.Title,
|
||
Slug = request.Slug,
|
||
Summary = request.Summary,
|
||
HtmlContent = request.HtmlContent,
|
||
Status = BlogPostStatus.Draft,
|
||
AuthorUserId = request.AuthorUserId,
|
||
};
|
||
|
||
if (request.FeaturedImage?.Length > 0)
|
||
{
|
||
var (path, thumb) = await _fileManager.UploadFileAsync(
|
||
request.FeaturedImage, request.FeaturedImageFileName);
|
||
post.FeaturedImagePath = path;
|
||
post.FeaturedImageThumbnailPath = thumb;
|
||
}
|
||
|
||
_context.BlogPosts.Add(post);
|
||
await _context.SaveChangesAsync(ct);
|
||
|
||
// Add categories & tags...
|
||
|
||
return post.Id;
|
||
}
|
||
}
|
||
```
|
||
|
||
### D. الگوی gRPC Service (مطابق پروژه)
|
||
|
||
```csharp
|
||
// WebApi/Services/BlogPostService.cs
|
||
public class BlogPostService : BlogPostContract.BlogPostContractBase
|
||
{
|
||
private readonly IMediator _mediator;
|
||
private readonly IMapper _mapper;
|
||
|
||
public BlogPostService(IMediator mediator, IMapper mapper)
|
||
{
|
||
_mediator = mediator;
|
||
_mapper = mapper;
|
||
}
|
||
|
||
public override async Task<BlogPostResponse> CreateBlogPost(
|
||
CreateBlogPostRequest request, ServerCallContext context)
|
||
{
|
||
var command = _mapper.Map<CreateBlogPostCommand>(request);
|
||
var id = await _mediator.Send(command);
|
||
// Get and return the created post...
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
> **یادداشت:** این سند یک نقشهراه جامع است. هر فاز به صورت مستقل قابل پیادهسازی است و وابستگیها در بخش ۱۳ مشخص شدهاند. بعد از تأیید این طرح، پیادهسازی فاز به فاز شروع میشود.
|