3.4 KiB
3.4 KiB
Arad Learning Glass — Color Edition
Audit
- Stack: Next.js 15، React 19، TypeScript، Tailwind CSS و Lucide.
- Routing: App Router با مسیرهای مستقل Login، Dashboard، Calendar، Apps و System Settings.
- State: Hookهای Desktop/Window/Dock و Local Storage برای Appearance و Workspace state.
- Data: Service adapterهای جدا از UI؛ Analytics از API اختیاری و fallback محلی استفاده میکند.
- Theme:
AppearanceProvider، semantic CSS variables، Light/Dark/System و accent themes. - RTL:
lang="fa"وdir="rtl"در Root و کنترل جهت مستقل برای دادههای LTR.
Design system
- سه سطح اصلی: Content Surface، Color Surface و Glass Surface.
- توکنهای Brand، module colors، surfaces، radius، shadow، spacing و state colors.
- آیکونهای یکپارچه Lucide از طریق
UiIcon. - Touch target حداقل ۴۴px، focus visible، reduced motion و dialogهای دارای focus trap.
- Glass محدود به Navigation، Dock، Dialog، Search، Quick Settings و لایههای شناور است.
تغییرات این مرحله
- صفحه خانه از Launcher خالی به Learning Workspace سهستونه تبدیل شد.
- Hero یادگیری، KPIهای نقشمحور، ادامه یادگیری، پیشنهادها، برنامه امروز، اعلانها و Quick Access اضافه شد.
- Launcher قبلی با تمام رفتارهای icon/folder/widget به نمای قابلتغییر «برنامهها» منتقل شد.
- صفحه ورود به چیدمان کامل Desktop و فرم تمامعرض Mobile ارتقا یافت.
- ورود با کد سازمانی، Remember Me، راهنمای بازیابی رمز و لینک پشتیبانی اضافه شد.
- تصویرسازی Login با CSS سبک و بدون asset یا dependency اضافی ساخته شد.
- Audit browser برای Dark Mode و بستن Dialog گسترش یافت.
صفحات و سطوح موجود در سیستم یکپارچه
- Dashboard / Learning Workspace
- Dock / Launcher / Quick actions
- Login
- Notification Center
- Profile Dashboard
- Global Search / Command Center
- Quick Settings
- Organizational Social Network
- Navigation / Window Workspace
- Course and Microlearning management
داده و محدودیت Backend
- KPIها در صورت تنظیم
NEXT_PUBLIC_LMS_API_BASE_URLاز API دریافت میشوند؛ بدون آن از adapter محلی توسعه استفاده میشود. - فهرست «دورههای من» در وضعیت فعلی پروژه به
myCoursesMockServiceمتصل است و Endpoint تولیدی در repository وجود ندارد. - Authentication فعلی نمونهای و Local Storage-based است؛ هیچ Token، Secret یا API key جدیدی اضافه نشده است.
Verification
npm run lint: موفق، بدون خطا.npm run build: موفق؛ TypeScript و ۴۵ route بررسی شدند.- Login: ۱۴۴۰×۱۰۰۰ و ۳۷۵×۸۱۲.
- Dashboard: Light و Dark در ۱۴۴۰×۱۰۰۰.
- RTL، focus، Escape/dialog و touch targetهای اصلی در Audit مرورگر بررسی شدند.
Screenshots
artifacts/arad-glass-login-light.pngartifacts/arad-glass-login-mobile.pngartifacts/arad-glass-dashboard-light.pngartifacts/arad-glass-dashboard-dark.png