用途
Frontend Feature 用于在 Next.js 前端中构建新页面、视图或数据驱动功能。典型场景包括在仪表盘（dashboard）或营销（marketing）区域下新增路由，以及将前端 UI 接入后端数据。
技术栈与布局
前端代码位于 frontend/src/，采用 App Router、TypeScript、Tailwind、next-intl 和 Zustand。路由带语言前缀：app/[locale]/…。
目录结构：
| 路径 | 用途 |
|---|---|
| src/app/[locale]/… | 页面（路由组：(dashboard)、(marketing)、(auth)） |
| src/app/api/… | 代理到后端的 Next.js 路由处理程序 |
| src/lib/ | API 客户端（api-client.ts、*-api.ts）、query-keys.ts、辅助工具 |
| src/components/ | 按领域划分的 UI（chat/、kb/、dashboard/、ui/ 等） |
| src/stores/ | Zustand 状态仓库（每个关注点一个，从 index.ts 重新导出） |
| src/hooks/ | useChat、useWebSocket 等 |
使用方式（步骤）
- 页面：新增 src/app/[locale]/(dashboard)/<feature>/page.tsx。默认使用 Server Component，仅在需要交互时添加 "use client"。通过异步 App Router API 读取 params。
- 数据访问：在 src/lib/<feature>-api.ts 中新增基于 api-client.ts 的类型化客户端，不要把 fetch 调用散落在组件中。服务端获取数据使用 server-api.ts。如果后端需要同源代理（用于认证 cookie），在 src/app/api/… 下新增处理程序。
- 缓存键：在 src/lib/query-keys.ts 中注册查询键，以保持缓存失效逻辑一致。
- 客户端状态：如果该功能需要共享客户端状态，在 src/stores/<feature>-store.ts 中新增 store，并从 stores/index.ts 导出。服务端数据保留在数据层，store 用于 UI/临时状态。
- 组件：可复用部分放在 src/components/<domain>/；组合 src/components/ui/ 中的基础组件。组件保持在约 100 行以内，超出时进行抽取。
- 国际化（i18n）：用户可见文案通过 next-intl 消息管理，不要硬编码字符串。将键加入消息目录，并用 useTranslations / getTranslations 读取。
验证
cd frontend
bun run type-check && bun run lint
bun dev # 在运行中的后端（make dev）下检查页面渲染
规则
- 默认使用 Server Component；仅在需要时（状态、副作用、事件处理）使用 "use client"。
- 所有 API 调用都通过 src/lib/ 中的客户端；组件使用 hooks/客户端，而不是原始的 fetch。
- 本地化字符串通过 next-intl，绝不要硬编码用户可见文案。
- 匹配现有的按领域划分的目录结构；复用 components/ui/ 中的基础组件。
限制
资料未提供该技能的收费、价格、平台限制或效果说明。