docs: restructure server and web documentation into ADR files and a

routing table
This commit is contained in:
2026-07-17 22:07:55 +08:00
parent f8494a44ca
commit 519aa35f1f
23 changed files with 710 additions and 654 deletions
+26 -51
View File
@@ -1,65 +1,40 @@
# Web Roadmap
## Product Boundary
## Product Model
- The Web client is a pure client-side rendered single-page application.
- Vite produces static assets only. The project does not use SSR, React Server Components, a Node API server, or a browser-specific business backend.
- The Web client consumes the same versioned REST API as future Android and other native clients.
- Production may serve `web/dist` from MyGO or a reverse proxy.
- Shared API contracts should remain client-neutral and eventually be described by OpenAPI.
MyGO Web is a client-side application built by Vite. It consumes the same `/api/v1` REST API as native clients. Production can serve `web/dist` from MyGO or a same-origin reverse proxy.
## Current Milestone
## Available Capabilities
The browser client now provides the first authenticated file workflow:
- Email and password login
- Access and refresh tokens stored for the browser session
- One coordinated refresh retry after an authenticated request returns `401`
- Protected application shell
- Root file listing with 50 items per page
- Single-file upload to the root directory
- Authenticated file download
- Responsive Ant Design interface with Tailwind layout utilities
- Unit tests for the API client and session behavior
- Playwright smoke tests and repository-scoped browser diagnostics
- Email/password login through the shared REST API
- Session-scoped access and refresh tokens with one automatic refresh retry
- Protected application shell and root file list
- Single-file upload to the root directory and authenticated download
- Server-side pagination with 50 items per page
Directory navigation and management, multi-file queues, transfer progress,
resumable or chunked transfers, account/profile/settings screens, and admin
screens remain deferred.
## Foundation
The project foundation contains:
- Node.js 24 and npm
- Vite
- React
- TypeScript in strict mode
- TanStack Query provider
- Tailwind CSS 4 through its Vite plugin
- Ant Design provider and components
- Ant Design icons for application and file actions
- Oxlint from the Vite template
- Vitest for framework-independent client and session tests
- Playwright Test with a headless Chromium smoke test
- Project-scoped Playwright CLI and repository Skill for interactive browser debugging
Ant Design owns reusable UI components and theme tokens. Tailwind CSS is initially limited to application layout, spacing, and responsive utilities.
## Planned Structure
## Current Structure
```text
web/src/
├── app/ # Router, providers, and application composition
├── api/ # API client and generated contracts
├── api/ # API client, session storage, and wire types
├── app/ # Router, providers, and authentication guard
├── components/ # Shared presentation components
├── features/ # Auth, files, account, and admin features
── pages/ # Route entry points
├── lib/ # Framework-independent utilities
└── test/ # Shared test setup and fixtures
├── features/ # Feature hooks and state
── pages/ # Route entry points
```
## Deferred Dependencies
## Planned Capabilities
Some dependencies are suggested for future implementation. Refer these only when the corresponding feature is implemented and propose better choices if any:
- Directory navigation and management
- Account, settings, and administrator screens
- Shared OpenAPI contracts and generated client types
- Multi-file transfer queues and progress reporting
- Resumable large-file transfers
- Document preview
- `openapi-typescript`: Generate TypeScript API types from the shared OpenAPI document.
- `openapi-fetch`: Provide a small type-safe Fetch client based on generated OpenAPI types.
- `openapi-react-query`: Connect generated OpenAPI operations to TanStack Query if handwritten query adapters become repetitive.
- `zustand`: Manage a cross-route upload queue, bulk selection, or other complex client-only state if React state is insufficient.
- `pdfjs-dist`: Preview PDF files in the browser when document preview is implemented.
Select dependencies when designing the capability that requires them. Record significant choices in the Web decision log.