create-bubbles 0.1.26 → 0.1.28

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/workspaces/index.tsx

@@ -0,0 +1,146 @@
+import { logout } from '@/api/auth'
+import Brand from '@/components/Brand/Brand'
+import LocaleSwitch from '@/components/LocaleSwitch/LocaleSwitch'
+import PageLoading from '@/components/Loading/PageLoading'
+import ChangePasswordDialog, {
+  type ChangePasswordDialogRef,
+} from '@/components/PasswordActions/ChangePasswordDialog'
+import '@/layouts/WorkspaceLayout/workspace.css'
+import { clearWorkspaceRequests } from '@/utils/request/workspace'
+import { cookie } from '@/utils/storage/cookie'
+import { ArrowRightOutlined, KeyOutlined, LogoutOutlined, ReloadOutlined } from '@ant-design/icons'
+import { App, Button, Card, Empty, Input, Space, Tag } from 'antd'
+import { accessScopeBasePath, accessScopeKey } from 'shared/utils'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { getWorkspaceState } from './state'
+
+/** 展示可访问工作空间，支持搜索、权限刷新及退出登录。 */
+export default function WorkspacesPage() {
+  const data = getWorkspaceState().workspaces
+  const [query, setQuery] = useState('')
+  const changePasswordRef = useRef<ChangePasswordDialogRef>(null)
+  const navigate = useNavigate()
+  const revalidator = useRevalidator()
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+
+  useEffect(
+    /** 注册窗口焦点刷新，在组件卸载时取消监听。 */ () => {
+      /** 窗口重新获得焦点时，在路由空闲状态下刷新工作空间列表。 */
+      const refresh = () => {
+        if (revalidator.state === 'idle') void revalidator.revalidate()
+      }
+      window.addEventListener('focus', refresh)
+      return () => window.removeEventListener('focus', refresh)
+    },
+    [revalidator],
+  )
+
+  /** 结束当前登录会话，清理本地令牌并返回登录页。 */
+  async function handleLogout() {
+    clearWorkspaceRequests()
+    try {
+      await logout().send(true)
+      cookie.remove('token')
+      void navigate('/login', { replace: true })
+    } catch (error) {
+      void message.error(error instanceof Error ? error.message : tr('退出失败，请重试'))
+    }
+  }
+
+  if (!data) return <PageLoading />
+  const entries = data.workspaces.filter((item) =>
+    `${item.name} ${item.companyName ?? ''}`.toLowerCase().includes(query.toLowerCase()),
+  )
+
+  return (
+    <main className="workspace-landing">
+      <title>{tr('工作空间 - 万物')}</title>
+      <header className="workspace-landing-header">
+        <Brand variant="workspace" />
+        <Space>
+          <span>{data.user.name}</span>
+          <LocaleSwitch />
+          <Button
+            type="text"
+            icon={<KeyOutlined />}
+            onClick={() => changePasswordRef.current?.show()}
+          >
+            {tr('修改密码')}
+          </Button>
+          <Button type="text" icon={<LogoutOutlined />} onClick={() => void handleLogout()}>
+            {tr('退出登录')}
+          </Button>
+        </Space>
+      </header>
+      <section className="workspace-landing-main">
+        <div className="workspace-page-title">
+          <h1>{tr('选择工作空间')}</h1>
+          <p>{tr('你好，{name}。进入企业或项目，继续你的工作。', { name: data.user.name })}</p>
+        </div>
+        <Space style={{ marginBottom: 24, width: '100%', justifyContent: 'space-between' }} wrap>
+          <Input.Search
+            placeholder={tr('搜索企业或项目')}
+            aria-label={tr('搜索工作空间')}
+            allowClear
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            style={{ maxWidth: 340 }}
+          />
+          <Button
+            icon={<ReloadOutlined />}
+            loading={revalidator.state === 'loading'}
+            onClick={() => void revalidator.revalidate()}
+          >
+            {tr('刷新工作空间')}
+          </Button>
+        </Space>
+        {data.workspaces.length === 0 ? (
+          <Card>
+            <Empty
+              description={
+                <>
+                  <strong>{tr('暂未加入企业，请联系管理员获取邀请链接')}</strong>
+                  <p>{tr('登录后确认加入企业；加入后，刷新此页即可进入。')}</p>
+                </>
+              }
+            />
+          </Card>
+        ) : entries.length === 0 ? (
+          <Empty description={tr('没有匹配的工作空间，请调整搜索条件。')} />
+        ) : (
+          <div className="workspace-grid">
+            {entries.map((entry) => (
+              <Card
+                key={accessScopeKey(entry.scope)}
+                className={`workspace-card workspace-card-${entry.scope.type}`}
+              >
+                <Space>
+                  <Tag>
+                    {entry.scope.type === 'platform'
+                      ? tr('平台')
+                      : entry.scope.type === 'company'
+                        ? tr('企业')
+                        : tr('项目')}
+                  </Tag>
+                  {entry.administrator && <Tag color="purple">{tr('管理员')}</Tag>}
+                </Space>
+                <h3>{entry.name}</h3>
+                <p>
+                  {entry.companyName ??
+                    (entry.scope.type === 'platform'
+                      ? tr('管理企业、账号与平台功能')
+                      : tr('企业协作工作空间'))}
+                </p>
+                <Link to={accessScopeBasePath(entry.scope)}>
+                  {tr('进入空间')} <ArrowRightOutlined />
+                </Link>
+              </Card>
+            ))}
+          </div>
+        )}
+      </section>
+      <ChangePasswordDialog ref={changePasswordRef} />
+    </main>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/workspaces/state.ts

@@ -0,0 +1,24 @@
+import type { AccessContext, WorkspaceEntry, WorkspacesResult } from 'shared/types'
+import { cookie } from '@/utils/storage/cookie'
+
+interface WorkspaceState {
+  workspaces?: WorkspacesResult
+  accessByScope: Map<string, AccessContext & { workspace?: WorkspaceEntry }>
+}
+
+let session: string | null
+let state: WorkspaceState = { accessByScope: new Map() }
+
+/**
+ * 保存当前账号的工作空间列表和各空间权限，换号时清空。
+ * middleware 写入；页面随路由导航或重新校验完成后读取，不额外订阅路由状态。
+ * 每次进入空间仍会请求最新权限，这里的数据不能用于跳过权限校验。
+ */
+export function getWorkspaceState() {
+  const token = cookie.get('token')
+  if (token !== session) {
+    session = token
+    state = { accessByScope: new Map() }
+  }
+  return state
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/router/AGENTS.MD

@@ -0,0 +1,6 @@
+## 菜单图标规则
+
+- 新增或调整菜单路由时，先检查 `apps/web/src/assets/svg/` 及其子目录是否已有语义匹配的 SVG，优先复用现有资源。
+- 没有合适图标时，新增 SVG 到 `apps/web/src/assets/svg/`，保留 `viewBox`，单色图标使用 `currentColor`，源文件使用 `width="1em"` 和 `height="1em"`，不得写死颜色或像素尺寸。
+- 页面目录中的 `icon` 必须填写 SVG 文件名去掉 `.svg` 后的稳定 key；不要重新添加 Ant Design 菜单图标映射，也不要把 SVG 内容、HTML 或远程 URL 写入菜单配置。
+- 新增 SVG 会被图标选择器自动发现；实现菜单页面时必须补充导航、表单回显和图标选择器相关测试。

package/template-vp-monorepo-react-nestjs/apps/web/src/router/index.tsx

@@ -1,49 +1,5 @@
-import { Button, Result } from 'antd'
-import { lazy } from 'react'
-import { createBrowserRouter, Link, Navigate, type RouteObject } from 'react-router'
-import BasicLayout from '@/layouts/BasicLayout'
+import { routes } from './modules'
 
-const Home = lazy(() => import('@/pages/home'))
-const I18nExample = lazy(() => import('@/pages/examples/i18n'))
-const ProTableExample = lazy(() => import('@/pages/examples/pro-table'))
-const ProTableDraftExample = lazy(() => import('@/pages/examples/pro-table/draft'))
-const Login = lazy(() => import('@/pages/login'))
-
-const routes: RouteObject[] = [
-  {
-    path: '/login',
-    element: <Login />,
-  },
-  {
-    path: '/',
-    element: <BasicLayout />,
-    children: [
-      { index: true, element: <Navigate to="/home" replace /> },
-      { path: 'home', element: <Home /> },
-      { path: 'examples/pro-table', element: <ProTableExample /> },
-      { path: 'examples/pro-table/draft', element: <ProTableDraftExample /> },
-      { path: 'examples/i18n', element: <I18nExample /> },
-      {
-        path: '*',
-        element: (
-          <Result
-            status="404"
-            title="404"
-            subTitle="页面不存在，请检查地址或返回工作台。"
-            extra={
-              <Link to="/home">
-                <Button type="primary">返回工作台</Button>
-              </Link>
-            }
-          />
-        ),
-      },
-    ],
-  },
-]
-
-export const router = createBrowserRouter(routes, {
-  basename: '/',
-})
+export const router = createBrowserRouter(routes, { basename: '/' })
 
 export const navigator = router.navigate.bind(router)

package/template-vp-monorepo-react-nestjs/apps/web/src/router/lazy-load/index.tsx

@@ -0,0 +1,26 @@
+interface PageModule {
+  default: ComponentType
+}
+
+const pageModules = import.meta.glob<PageModule>('@/pages/**/*.tsx')
+const lazyPages = new Map<string, LazyExoticComponent<ComponentType>>()
+
+/**
+ * 按 pages 下的模块目录懒加载页面，并复用已创建的懒加载组件。
+ * @param moduleName 相对于 pages 的模块目录，例如 access/menus。
+ * @param leafPath 模块目录下的页面路径，不带扩展名，默认 index。
+ * @throws 页面模块不存在时抛出包含完整模块路径的错误。
+ */
+export function lazyLoad(moduleName: string, leafPath = 'index'): ReactElement {
+  const modulePath = `/src/pages/${moduleName}/${leafPath}.tsx`
+  let Page = lazyPages.get(modulePath)
+
+  if (!Page) {
+    const importPage = pageModules[modulePath]
+    if (!importPage) throw new Error(`找不到路由页面模块：${modulePath}`)
+    Page = lazy(importPage)
+    lazyPages.set(modulePath, Page)
+  }
+
+  return <Page />
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/router/middleware/README.md

@@ -0,0 +1,23 @@
+# 路由中间件
+
+当前共有 5 个路由中间件，通过 [index.ts](./index.ts) 统一导出，并在路由的 `middleware` 数组中配置。
+
+| 中间件 / 实现文件 | 作用 | 拦截、跳转及异常处理 | 使用位置 |
+| --- | --- | --- | --- |
+| `authMiddleware` · [auth.ts](./auth.ts) | 检查本地 Cookie 中是否存在 `token`，作为进入受保护路由的登录检查。 | 缺少 `token` 时跳转到 `/login`；令牌有效性由后端接口校验。 | 默认入口 `/`、`/home`，工作空间选择页 `/workspaces`，示例页 `/examples`，以及平台、企业、项目的父路由。 |
+| `workspacesMiddleware` · [workspace/data.ts](./workspace/data.ts) | 切换到工作空间列表的请求上下文，获取最新的可访问工作空间列表，写入页面共享状态和 `workspacesContext`，供选择页、布局及入口分流使用。 | 请求失败时继续抛出异常；非取消错误会清除旧列表，`AbortError` 不清除状态。 | `/`、`/home`、`/workspaces` 和 `/examples`，位于 `authMiddleware` 之后。 |
+| `entryMiddleware` · [workspace/entry.ts](./workspace/entry.ts) | 为默认入口选择落地页：仅有一个项目入口，且没有平台入口、企业管理员身份或超出内置企业成员权限的企业职责时，进入该项目的首个已授权页面。 | 不满足自动进入条件、找不到可访问页面，或查询权限时收到 403 / 404，均跳转到 `/workspaces`；其他异常继续抛出。 | 仅 `/`、`/home`，位于 `workspacesMiddleware` 之后；主动选择空间或直接访问具体页面不经过此分流。 |
+| `scopeMiddleware(type)` · [workspace/data.ts](./workspace/data.ts) | 根据 `platform`、`company`、`project` 及路由参数构造作用域；并行获取该空间的访问上下文和工作空间列表，将权限、菜单及空间信息保存到共享状态，并将权限上下文写入 `scopeAccessContext`。 | 请求失败时继续抛出异常；非取消错误会清除该作用域的旧权限，`AbortError` 不清除状态。切换账号或空间时，通过请求上下文切换中止旧请求。 | `/platform`、`/companies/:companyId`、`/companies/:companyId/projects/:projectId` 的父路由，位于 `authMiddleware` 之后。 |
+| `accessMiddleware(routeKey)` · [workspace/access.ts](./workspace/access.ts) | **检查菜单对应页面的访问权限**：读取 `scopeAccessContext`，判断 `permissionKeys` 是否包含 `${routeKey}.read`，例如 `platform.menus.read`。 | 有权限则放行；首页无权限时尝试跳转到其他已授权页面，否则抛出状态为 403 的错误。错误归属当前叶子页面边界，保留父级空间导航。 | 由 [page()](../modules/access/page.tsx) 统一挂载到平台、企业、项目的叶子页面路由，在父级 `scopeMiddleware` 之后执行。 |
+
+常见路由的执行顺序如下；前面的中间件发生跳转或失败时，按对应结果处理。
+
+| 路由场景 | 执行顺序 |
+| --- | --- |
+| 默认入口 `/`、`/home` | `authMiddleware` → `workspacesMiddleware` → `entryMiddleware` |
+| 工作空间选择页 `/workspaces`、示例页 `/examples` | `authMiddleware` → `workspacesMiddleware` |
+| 平台、企业、项目内的页面 | 父路由 `authMiddleware` → 父路由 `scopeMiddleware(type)` → 叶子路由 `accessMiddleware(routeKey)` |
+
+`workspacesContext` 和 `scopeAccessContext` 是路由上下文对象，用于在本次导航的中间件之间传递数据。页面和布局使用的共享状态由 `getWorkspaceState()` 提供；每次进入空间仍会请求最新权限，已有状态不会跳过权限校验。
+
+后端接口的权限校验由全局守卫 `AccessGuard` 调用 `AccessService` 完成。前端中间件负责路由访问控制和导航体验。

package/template-vp-monorepo-react-nestjs/apps/web/src/router/middleware/auth.ts

@@ -0,0 +1,6 @@
+import { cookie } from '@/utils/storage/cookie'
+
+/** 在路由进入前检查本地登录令牌，缺失时重定向到登录页。 */
+export const authMiddleware: MiddlewareFunction = () => {
+  if (!cookie.get('token')) throw redirect('/login')
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/router/middleware/index.ts

@@ -0,0 +1,4 @@
+export { authMiddleware } from './auth'
+export { accessMiddleware } from './workspace/access'
+export { scopeMiddleware, workspacesMiddleware } from './workspace/data'
+export { entryMiddleware } from './workspace/entry'

package/template-vp-monorepo-react-nestjs/apps/web/src/router/middleware/workspace/access.ts

@@ -0,0 +1,23 @@
+import { tr } from '@/i18n'
+import { firstAccessiblePagePath, type RegisteredPage } from '@/router/page-registry'
+import { scopeAccessContext } from './data'
+
+/** 校验当前页面；首页失效时转向可用页面，叶子拒绝访问时保留父级导航。 */
+export function accessMiddleware(routeKey: RegisteredPage): MiddlewareFunction {
+  return /** 检查页面读取权限，首页可回退到其他授权页面，否则抛出访问拒绝。 */ async (
+    { context },
+    next,
+  ) => {
+    const access = context.get(scopeAccessContext)
+    if (access.permissionKeys.includes(`${routeKey}.read`)) return
+
+    // 首页撤权后仍可进入其他已授权页面；叶子页面错误保留已验证的父级空间。
+    const destination = routeKey.endsWith('.home') ? firstAccessiblePagePath(access) : null
+    // 零 loader 路由先完成空处理链，让错误归属当前叶子边界；此时页面尚未渲染。
+    await next()
+    if (destination) throw redirect(destination)
+    throw Object.assign(new Error(tr('你没有访问此页面的权限，请联系管理员授权。')), {
+      status: 403,
+    })
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/router/middleware/workspace/data.ts

@@ -0,0 +1,55 @@
+import type { AccessContext, AccessScope, ScopeType, WorkspacesResult } from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import { getAccessContext, getWorkspaces } from '@/pages/workspaces/api'
+import { getWorkspaceState } from '@/pages/workspaces/state'
+import { enterWorkspace } from '@/utils/request/workspace'
+
+export const workspacesContext = createRouterContext<WorkspacesResult>()
+export const scopeAccessContext = createRouterContext<AccessContext>()
+
+/** 按本次导航获取最新入口列表，交给后续分流或工作空间选择页。 */
+export const workspacesMiddleware: MiddlewareFunction = async ({ request, context }) => {
+  enterWorkspace('workspaces')
+  const state = getWorkspaceState()
+  try {
+    const workspaces = await getWorkspaces({ workspaceKey: 'workspaces', signal: request.signal })
+    state.workspaces = workspaces
+    context.set(workspacesContext, workspaces)
+  } catch (error) {
+    if ((error as Error).name !== 'AbortError') state.workspaces = undefined
+    throw error
+  }
+}
+
+/** 获取空间权限，交给布局展示及叶子 middleware 校验，共享一次权限请求。 */
+export function scopeMiddleware(type: ScopeType): MiddlewareFunction {
+  return /** 按作用域保存权限和名称；请求失败时清除旧权限，取消请求不影响新数据。 */ async ({
+    params,
+    request,
+    context,
+  }) => {
+    const scope: AccessScope =
+      type === 'platform'
+        ? { type }
+        : type === 'project'
+          ? { type, companyId: params.companyId!, projectId: params.projectId! }
+          : { type, companyId: params.companyId! }
+    const key = accessScopeKey(scope)
+    enterWorkspace(key)
+    const state = getWorkspaceState()
+    try {
+      const [access, workspaces] = await Promise.all([
+        getAccessContext(scope, { workspaceKey: key, signal: request.signal }),
+        getWorkspaces({ workspaceKey: key, signal: request.signal }),
+      ])
+      state.accessByScope.set(key, {
+        ...access,
+        workspace: workspaces.workspaces.find((entry) => accessScopeKey(entry.scope) === key),
+      })
+      context.set(scopeAccessContext, access)
+    } catch (error) {
+      if ((error as Error).name !== 'AbortError') state.accessByScope.delete(key)
+      throw error
+    }
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/router/middleware/workspace/entry.ts

@@ -0,0 +1,52 @@
+import { getBuiltinPermissionKeys } from 'shared/utils'
+import { getAccessContext } from '@/pages/workspaces/api'
+import { firstAccessiblePagePath } from '@/router/page-registry'
+import { workspacesContext } from './data'
+
+const companyMemberPermissions = new Set(
+  getBuiltinPermissionKeys({ scopeType: 'company', builtin: 'member' }),
+)
+
+/** 只用于默认入口；主动选择空间和具体页面链接不执行自动选项目。 */
+export const entryMiddleware: MiddlewareFunction = async ({ request, context }) => {
+  const data = context.get(workspacesContext)
+  const projects = data.workspaces.filter((entry) => entry.scope.type === 'project')
+  const project = projects[0]
+  if (
+    projects.length !== 1 ||
+    !project ||
+    data.workspaces.some(
+      (entry) => entry.scope.type === 'platform' || entry.administrator === 'company',
+    )
+  ) {
+    throw redirect('/workspaces')
+  }
+
+  let destination: string | null = null
+  try {
+    // 默认企业成员也有企业入口；额外的企业授权才表示需要保留的企业职责。
+    const companyAccess = await Promise.all(
+      data.workspaces
+        .filter((entry) => entry.scope.type === 'company')
+        .map((entry) =>
+          getAccessContext(entry.scope, { workspaceKey: 'workspaces', signal: request.signal }),
+        ),
+    )
+    const hasCompanyResponsibilities = companyAccess.some(
+      (access) =>
+        access.administrator === 'company' ||
+        access.permissionKeys.some((key) => !companyMemberPermissions.has(key)),
+    )
+    if (!hasCompanyResponsibilities) {
+      const access = await getAccessContext(project.scope, {
+        workspaceKey: 'workspaces',
+        signal: request.signal,
+      })
+      destination = firstAccessiblePagePath(access)
+    }
+  } catch (error) {
+    // 列表获取后若身份恰好被撤销，回选择页重新取最新列表，避免自动进入失效项目。
+    if (![403, 404].includes((error as { status?: number }).status ?? 0)) throw error
+  }
+  throw redirect(destination ?? '/workspaces')
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/router/modules/access/page.tsx

@@ -0,0 +1,20 @@
+import RouteError from '@/pages/error/error'
+import { lazyLoad } from '@/router/lazy-load'
+import { accessMiddleware } from '@/router/middleware'
+import { pageRegistry, type RegisteredPage } from '@/router/page-registry'
+
+/** 将已注册页面转换为带权限中间件和懒加载内容的路由。 */
+export function page(
+  routeKey: RegisteredPage,
+  moduleName: string,
+  leafPath = 'index',
+): RouteObject {
+  const path = pageRegistry[routeKey].path
+  return {
+    id: routeKey,
+    ...(path ? { path } : { index: true }),
+    element: lazyLoad(moduleName, leafPath),
+    middleware: [accessMiddleware(routeKey)],
+    errorElement: <RouteError />,
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/router/modules/auth.tsx

@@ -0,0 +1,17 @@
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import { lazyLoad } from '@/router/lazy-load'
+
+export const authRoutes: RouteObject[] = [
+  {
+    path: '/login',
+    element: <RouteTransition>{lazyLoad('login')}</RouteTransition>,
+  },
+  {
+    path: '/register',
+    element: <RouteTransition>{lazyLoad('register')}</RouteTransition>,
+  },
+  {
+    path: '/member-invitations/accept',
+    element: <RouteTransition>{lazyLoad('member-invitations', 'accept')}</RouteTransition>,
+  },
+]

package/template-vp-monorepo-react-nestjs/apps/web/src/router/modules/company.tsx

@@ -0,0 +1,30 @@
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import WorkspaceLayout from '@/layouts/WorkspaceLayout'
+import RouteError from '@/pages/error/error'
+import { authMiddleware, scopeMiddleware } from '@/router/middleware'
+import { page } from './access/page'
+
+export const companyRoutes: RouteObject[] = [
+  {
+    id: 'company',
+    path: '/companies/:companyId',
+    element: <WorkspaceLayout />,
+    middleware: [authMiddleware, scopeMiddleware('company')],
+    errorElement: (
+      <RouteTransition>
+        <RouteError />
+      </RouteTransition>
+    ),
+    children: [
+      page('company.home', 'access', 'home'),
+      page('company.profile', 'access', 'profile'),
+      page('company.members', 'access', 'members'),
+      page('company.roles', 'access', 'roles'),
+      page('company.organization', 'organization'),
+      page('company.positions', 'positions'),
+      page('company.organization.templates', 'organization-templates'),
+      page('company.projects', 'access', 'entities'),
+      page('company.audit', 'access', 'audit'),
+    ],
+  },
+]

package/template-vp-monorepo-react-nestjs/apps/web/src/router/modules/entry.tsx

@@ -0,0 +1,20 @@
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import RouteError from '@/pages/error/error'
+import { lazyLoad } from '@/router/lazy-load'
+import { authMiddleware, entryMiddleware, workspacesMiddleware } from '@/router/middleware'
+
+export const entryRoutes: RouteObject[] = [
+  { path: '/', middleware: [authMiddleware, workspacesMiddleware, entryMiddleware] },
+  { path: '/home', middleware: [authMiddleware, workspacesMiddleware, entryMiddleware] },
+  {
+    id: 'workspaces',
+    path: '/workspaces',
+    element: <RouteTransition>{lazyLoad('workspaces')}</RouteTransition>,
+    middleware: [authMiddleware, workspacesMiddleware],
+    errorElement: (
+      <RouteTransition>
+        <RouteError />
+      </RouteTransition>
+    ),
+  },
+]

package/template-vp-monorepo-react-nestjs/apps/web/src/router/modules/examples.tsx

@@ -0,0 +1,23 @@
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import BasicLayout from '@/layouts/BasicLayout'
+import RouteError from '@/pages/error/error'
+import { lazyLoad } from '@/router/lazy-load'
+import { authMiddleware, workspacesMiddleware } from '@/router/middleware'
+
+export const exampleRoutes: RouteObject[] = [
+  {
+    path: '/examples',
+    element: <BasicLayout />,
+    middleware: [authMiddleware, workspacesMiddleware],
+    errorElement: (
+      <RouteTransition>
+        <RouteError />
+      </RouteTransition>
+    ),
+    children: [
+      { path: 'pro-table', element: lazyLoad('examples/pro-table') },
+      { path: 'pro-table/draft', element: lazyLoad('examples/pro-table/draft') },
+      { path: 'i18n', element: lazyLoad('examples/i18n') },
+    ],
+  },
+]

package/template-vp-monorepo-react-nestjs/apps/web/src/router/modules/fallback.tsx

@@ -0,0 +1,13 @@
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import NotFound from '@/pages/error/404'
+
+export const fallbackRoutes: RouteObject[] = [
+  {
+    path: '*',
+    element: (
+      <RouteTransition>
+        <NotFound />
+      </RouteTransition>
+    ),
+  },
+]

package/template-vp-monorepo-react-nestjs/apps/web/src/router/modules/index.tsx

@@ -0,0 +1,32 @@
+import PageLoading from '@/components/Loading/PageLoading'
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import RouteError from '@/pages/error/error'
+import { authRoutes } from './auth'
+import { companyRoutes } from './company'
+import { entryRoutes } from './entry'
+import { exampleRoutes } from './examples'
+import { fallbackRoutes } from './fallback'
+import { platformRoutes } from './platform'
+import { projectRoutes } from './project'
+
+export const routes: RouteObject[] = [
+  {
+    id: 'root',
+    element: <Outlet />,
+    errorElement: (
+      <RouteTransition>
+        <RouteError />
+      </RouteTransition>
+    ),
+    HydrateFallback: PageLoading,
+    children: [
+      ...authRoutes,
+      ...entryRoutes,
+      ...platformRoutes,
+      ...companyRoutes,
+      ...projectRoutes,
+      ...exampleRoutes,
+      ...fallbackRoutes,
+    ],
+  },
+]

package/template-vp-monorepo-react-nestjs/apps/web/src/router/modules/platform.tsx

@@ -0,0 +1,27 @@
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import WorkspaceLayout from '@/layouts/WorkspaceLayout'
+import RouteError from '@/pages/error/error'
+import { authMiddleware, scopeMiddleware } from '@/router/middleware'
+import { page } from './access/page'
+
+export const platformRoutes: RouteObject[] = [
+  {
+    id: 'platform',
+    path: '/platform',
+    element: <WorkspaceLayout />,
+    middleware: [authMiddleware, scopeMiddleware('platform')],
+    errorElement: (
+      <RouteTransition>
+        <RouteError />
+      </RouteTransition>
+    ),
+    children: [
+      page('platform.home', 'access', 'home'),
+      page('platform.companies', 'access', 'entities'),
+      page('platform.accounts', 'access', 'members'),
+      page('platform.roles', 'access', 'roles'),
+      page('platform.menus', 'access/menus'),
+      page('platform.audit', 'access', 'audit'),
+    ],
+  },
+]

package/template-vp-monorepo-react-nestjs/apps/web/src/router/modules/project.tsx

@@ -0,0 +1,28 @@
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import WorkspaceLayout from '@/layouts/WorkspaceLayout'
+import RouteError from '@/pages/error/error'
+import { authMiddleware, scopeMiddleware } from '@/router/middleware'
+import { page } from './access/page'
+
+export const projectRoutes: RouteObject[] = [
+  {
+    id: 'project',
+    path: '/companies/:companyId/projects/:projectId',
+    element: <WorkspaceLayout />,
+    middleware: [authMiddleware, scopeMiddleware('project')],
+    errorElement: (
+      <RouteTransition>
+        <RouteError />
+      </RouteTransition>
+    ),
+    children: [
+      page('project.home', 'access', 'home'),
+      page('project.profile', 'access', 'profile'),
+      page('project.members', 'access', 'members'),
+      page('project.roles', 'access', 'roles'),
+      page('project.organization', 'organization'),
+      page('project.positions', 'positions'),
+      page('project.audit', 'access', 'audit'),
+    ],
+  },
+]