feat: add React frontend with auth, project list, import, and project detail pages

Converts packages/web from vanilla TypeScript Vite scaffold to React with:
- React 19, react-router-dom v7, @tanstack/react-query v5, Tailwind CSS v4
- JWT auth context with auto-refresh token support
- Login/Register pages, protected Layout with auth guard
- Projects list with grid cards and delete action
- ImportDialog supporting URL or file upload with API key display
- ProjectDetail with 4 tabs: Documentation, Modules, MCP Integration, Settings
- All TypeScript compiles cleanly (noEmit check passes)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-02 13:36:45 +08:00
parent ac60f0bb49
commit c3f8b598af
26 changed files with 1143 additions and 389 deletions

View File

@@ -0,0 +1,74 @@
const API_BASE = '/api';
type ApiResponse<T> = {
success: boolean;
data?: T;
error?: { code: string; message: string };
};
let accessToken: string | null = localStorage.getItem('accessToken');
let refreshToken: string | null = localStorage.getItem('refreshToken');
export function setTokens(access: string, refresh: string) {
accessToken = access;
refreshToken = refresh;
localStorage.setItem('accessToken', access);
localStorage.setItem('refreshToken', refresh);
}
export function clearTokens() {
accessToken = null;
refreshToken = null;
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
}
export function getAccessToken() {
return accessToken;
}
async function refreshAccessToken(): Promise<boolean> {
if (!refreshToken) return false;
try {
const res = await fetch(`${API_BASE}/auth/refresh`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ refreshToken }),
});
if (!res.ok) return false;
const json: ApiResponse<{ accessToken: string; refreshToken: string }> = await res.json();
if (json.success && json.data) {
setTokens(json.data.accessToken, json.data.refreshToken);
return true;
}
return false;
} catch {
return false;
}
}
export async function apiFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
const headers = new Headers(options.headers);
if (!headers.has('Content-Type') && !(options.body instanceof FormData)) {
headers.set('Content-Type', 'application/json');
}
if (accessToken) {
headers.set('Authorization', `Bearer ${accessToken}`);
}
let res = await fetch(`${API_BASE}${path}`, { ...options, headers });
if (res.status === 401 && refreshToken) {
const refreshed = await refreshAccessToken();
if (refreshed) {
headers.set('Authorization', `Bearer ${accessToken}`);
res = await fetch(`${API_BASE}${path}`, { ...options, headers });
}
}
const json: ApiResponse<T> = await res.json();
if (!json.success) {
throw new Error(json.error?.message || 'Request failed');
}
return json.data as T;
}