用途：为 Chuuk 词典项目的 React + TypeScript 前端提供统一的开发约定。前端是 frontend/ 下的单个 Vite 应用，构建输出到 frontend/dist，由 Flask 容器在生产环境托管，不使用静态 Web 应用。技术栈包括 React/React DOM 19.2.x、TypeScript ~5.9、Mantine 8.3.x（core、hooks、dates、dropzone、modals、notifications、tiptap）、@tabler/icons-react 3.x、react-router-dom 7.10.x、axios 1.13.x、vite 7.x、eslint 9。未配置路径别名（无 @/ 导入），也没有 frontend/src/api/ 目录。API 调用直接使用 axios 相对路径；开发时 Vite 把 /api 代理到 Flask，生产同源提供。
主要能力与结构：BrowserRouter 在 main.tsx 中，App.tsx 负责认证状态、AppShell、路由表和权限门控。路由覆盖首页、查询、翻译、句子、文章分析、动词、数据库、出版物、翻译游戏、语法、撰写、用户管理、登录等，每条路由对应一个权限键；新增页面需在 pages/ 添加文件、在 App.tsx 添加导入与 Route、用 hasPermission 包裹 NavLink，并在后端 ROLE_PERMISSIONS 添加对应键。认证通过 GET /api/auth/status 获取 { user, permissions } 并经 UserContext 广播，登录提交到 /api/auth/login 或 /api/auth/magic-link。页面路径变化会向 /api/auth/track-page 发送请求。
使用方式：在 frontend 目录执行 npm install、npm run dev（Vite 于 :5173 代理 /api 到 :5000）、npm run build（tsc -b && vite build）、npm run lint；dev-start.sh 同时启动 Flask 与 Vite。异步请求使用 axios 相对路径，SSE 用 EventSource，按用户持久化用 useUserCache。上传使用 Mantine dropzone，接受类型需与后端 ALLOWED_EXTENSIONS 一致。
限制与注意：无全局状态库，避免引入 Redux/Zustand；tsconfig.app.json 为严格模式；API 响应类型目前多为页面内联接口。加载态背景硬编码 #1a1b1e 会产生首屏闪烁。axios 1.13 默认 withCredentials 为 false，生产同源才使 cookie 生效；若拆分前端主机需开启该选项并配置 Flask CORS。Mantine v8 相比 v7 修改了部分属性名（如 position 改为 justify），移植代码时需核对。其余如是否收费、平台与效果等暂未提供。