---
url: /docs/recipes/new-page.md
---
# 新增页面

## 新增工作台页面

创建 `apps/app/routes/(app)/projects.tsx`：

```tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/(app)/projects")({
  component: Projects,
});

function Projects() {
  return (
    <main>
      <h1>项目列表</h1>
      <p>在这里显示当前账号的项目。</p>
    </main>
  );
}
```

这是新增路由示例，当前模板没有项目列表模块。启动开发或构建后生成路由树，再使用统一组件完善布局和数据状态。

## 注册入口路径

把 `projects` 加入 `apps/web/worker.ts` 的工作台路径列表，并同步 `scripts/local-gateway.ts`。不要与 `apps/web/pages/` 的公开页面重名。直接打开、刷新与站内点击都要落到同一个应用。

导航使用 TanStack Router 的类型化 `Link`，数据从统一查询模块读取，显示加载、错误与空列表状态。界面中的中文是教程示例，客户网站文案按产品语言编写。

## 公开页面

营销、博客和搜索任务页创建在 `apps/web/pages/`，保留静态正文、标题、规范网址及结构化信息。无需登录的交互应用页面可放在账号路由分组，但仍要注册边缘路径。

## 验证

构建后检查正常账号、未登录、无数据、加载失败和直接刷新。公开页检查原始 HTML 正文；私有页检查退出后接口拒绝访问。不要手改 `routeTree.gen.ts`。