路由概览
Kira Web 使用 Next.js App Router,所有页面位于 app/ 目录。
| 路由 | 目录 | 说明 |
|---|
/ | (home)/ | 首页,产品介绍和入口 |
/auth | auth/ | 登录/注册页面 |
/auth/callback | auth/callback/ | OAuth 回调 API 路由 |
/auth/mobile-callback | auth/mobile-callback/ | 移动端 OAuth 回调 API 路由 |
/generator | generator/ | 重定向到 /,实际页面为 /generator/[threadId] |
/generator/[threadId] | generator/[threadId]/ | 生成器 (核心功能) |
/gallery | gallery/ | 图库浏览 |
/rewind/[feedId] | rewind/[feedId]/ | 时间回溯 |
/timeline | timeline/ | 时间线 |
/setting | setting/ | 用户设置 |
/setting/account | setting/account/ | 账户设置 |
/setting/appearance | setting/appearance/ | 外观设置 |
/setting/billing | setting/billing/ | 订阅与计费 |
/setting/language | setting/language/ | 语言设置 |
/user/[userId] | user/[userId]/ | 用户主页 |
页面详情
| 页面 | 路由 | 说明 | 功能点 |
|---|
| 首页 | / | 产品落地页 | 响应式布局、SEO 优化、多语言支持 |
| 认证 | /auth | 登录/注册 | 邮箱密码、OAuth (Google, Apple) |
| 生成器 | /generator/[threadId] | 核心工作区 | AI 对话生成、编辑工具栏、实时预览 |
| 图库 | /gallery | 社区图片浏览 | 瀑布流布局、无限滚动、点赞收藏 |
| 时间回溯 | /rewind/[feedId] | 编辑历史版本 | 时间线展示、版本对比、一键恢复 |
| 时间线 | /timeline | 时间线浏览 | 时间线展示 |
| 设置 | /setting/* | 账户设置 | 账户、外观、计费、语言子页面 |
| 用户主页 | /user/[userId] | 用户公开信息 | 用户资料、作品列表、关注/粉丝 |
中间件 (proxy.ts)
实际中间件文件为 proxy.ts,负责以下功能:
- 域名重定向:
app.kira.art → kira.art
- Locale URL 重写: 剥离
[locale] 前缀,设置 x-locale 请求头
- Supabase session 刷新: 自动续期用户会话
- X-Robots-Tag 注入: 控制搜索引擎爬取
中间件 不会 将未登录用户重定向到 /auth。路由保护在客户端通过 useAuthStore 实现。
路由保护(客户端)
路由保护通过客户端 useAuthStore 实现,而非中间件:
// 客户端路由保护示例
const { isAuth } = useAuthStore();
// 未登录时在组件内重定向或显示登录提示
需要登录的路由:
/generator/[threadId]
/rewind/[feedId]
/setting/*
公开路由:
/
/auth
/gallery
/user/[userId]
/timeline