 hailin
|
9e1dca25f2
|
refactor(admin-client): implement 3-layer Clean Architecture for frontend
Refactored admin-client from 1.5-layer to 3-layer architecture using
Feature-Sliced Design pattern with Zustand + TanStack Query.
## Architecture Pattern
Each feature now follows 3-layer structure:
```
features/{feature}/
├── presentation/ # React UI components, pages
├── application/ # Zustand stores, TanStack Query hooks
└── infrastructure/ # API clients (axios calls)
```
## Changes by Feature
### Auth Feature
- infrastructure/auth.api.ts: Login, verify API calls
- application/useAuthStore.ts: Zustand store for auth state
- Updated LoginPage.tsx to use useAuthStore
- shared/hooks/useAuth.ts: Re-exports for backward compatibility
### Knowledge Feature
- infrastructure/knowledge.api.ts: Article CRUD APIs
- application/useKnowledge.ts: TanStack Query hooks
- useKnowledgeArticles, useCreateArticle, useUpdateArticle
- useDeleteArticle, usePublishArticle, useUnpublishArticle
- Updated KnowledgePage.tsx to use application hooks
### Experience Feature
- infrastructure/experience.api.ts: Experience management APIs
- application/useExperience.ts: TanStack Query hooks
- usePendingExperiences, useExperienceStatistics
- useApproveExperience, useRejectExperience, useRunEvolution
- Updated ExperiencePage.tsx to use application hooks
### Dashboard Feature
- infrastructure/dashboard.api.ts: Statistics APIs
- application/useDashboard.ts: TanStack Query hooks
- useEvolutionStatistics, useSystemHealth
- Updated DashboardPage.tsx to use application hooks
## Benefits
- Clear separation of concerns (UI / business logic / data access)
- Better testability (each layer can be tested independently)
- Reusable hooks across components
- Type-safe API interfaces
- Centralized API error handling
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
2026-01-24 22:17:48 -08:00 |