create-bubbles 0.1.26 → 0.1.27

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/OrganizationMemberSelectorTypes.ts

@@ -0,0 +1,103 @@
+import type { SelectProps } from 'antd'
+import type {
+  OrganizationMemberCandidate,
+  OrganizationMemberCandidateQuery,
+  OrganizationScope,
+} from 'shared/types'
+
+/** 组织成员浏览器中可选筛选项。 */
+export interface OrganizationMemberFilterOption {
+  value: string
+  label: string
+}
+
+/** 选择器当前 URL 作用域的展示信息；它不进入最终选择值。 */
+export interface OrganizationMemberBrowserScope {
+  type: OrganizationScope['type']
+  label?: string
+}
+
+/** 业务侧提供给候选搜索请求的参数。 */
+export interface OrganizationMemberSearchRequest extends Omit<
+  OrganizationMemberCandidateQuery,
+  'page' | 'pageSize' | 'query'
+> {
+  page: number
+  pageSize: number
+  query?: string
+  signal?: AbortSignal
+}
+
+/** 组织成员搜索的分页结果。 */
+export interface OrganizationMemberSearchResult {
+  items: OrganizationMemberCandidate[]
+  total: number
+}
+
+/** 某个企业或项目身份域内可用的组织、岗位和角色筛选数据。 */
+export interface OrganizationMemberResourceFilters {
+  organizationUnits?: readonly OrganizationMemberFilterOption[]
+  positions?: readonly OrganizationMemberFilterOption[]
+  roles?: readonly OrganizationMemberFilterOption[]
+  allowUnassigned?: boolean
+}
+
+/** 组织成员浏览器可选的分类筛选数据。 */
+export interface OrganizationMemberBrowserFilters extends OrganizationMemberResourceFilters {
+  projects?: readonly OrganizationMemberFilterOption[]
+  /** 企业浏览切到项目身份域时，按实际项目权限加载可见筛选项。 */
+  loadProjectFilters?: (projectIds: string[]) => Promise<OrganizationMemberResourceFilters>
+}
+
+/** 组织成员弹窗浏览器公开方法。 */
+export interface OrganizationMemberBrowserRef {
+  show: (value: readonly string[], selectedRows?: readonly OrganizationMemberCandidate[]) => void
+  hide: () => void
+}
+
+/** 组织成员弹窗浏览器属性。 */
+export interface OrganizationMemberBrowserProps {
+  ref: Ref<OrganizationMemberBrowserRef>
+  /** 隔离不同作用域、解析来源和用途的候选缓存。 */
+  candidateContextKey: string
+  scope: OrganizationMemberBrowserScope
+  multiple?: boolean
+  title?: ReactNode
+  filters?: OrganizationMemberBrowserFilters
+  request: (input: OrganizationMemberSearchRequest) => Promise<OrganizationMemberSearchResult>
+  resolve: (userIds: string[]) => Promise<OrganizationMemberCandidate[]>
+  /** 业务场景附加禁选条件；已选项仍可从选择摘要中移除。 */
+  getCandidateDisabled?: (candidate: OrganizationMemberCandidate) => boolean
+  onConfirm: (userIds: string[], rows: OrganizationMemberCandidate[]) => void
+}
+
+type ManagedSelectProps =
+  | 'value'
+  | 'defaultValue'
+  | 'mode'
+  | 'options'
+  | 'open'
+  | 'showSearch'
+  | 'onChange'
+  | 'labelInValue'
+
+/** Select 风格的组织成员选择器属性，稳定值始终为 userId。 */
+export interface OrganizationMemberSelectorProps extends Omit<
+  SelectProps<string | string[] | undefined>,
+  ManagedSelectProps
+> {
+  value?: string | string[]
+  /** 必须包含完整来源作用域和业务用途，防止同 userId 跨上下文复用。 */
+  candidateContextKey: string
+  scope: OrganizationMemberBrowserScope
+  multiple?: boolean
+  selectedCandidates?: readonly OrganizationMemberCandidate[]
+  filters?: OrganizationMemberBrowserFilters
+  request: OrganizationMemberBrowserProps['request']
+  resolve: OrganizationMemberBrowserProps['resolve']
+  getCandidateDisabled?: OrganizationMemberBrowserProps['getCandidateDisabled']
+  onChange?: (
+    value: string | string[] | undefined,
+    candidates: OrganizationMemberCandidate[],
+  ) => void
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/README.md

@@ -0,0 +1,8 @@
+# OrganizationMemberSelector
+
+Select 风格的组织成员选择器。点击字段后打开“左侧组织浏览 + 右侧分页人员”的弹窗，支持搜索、跨页选择、按可见作用域/组织/岗位/角色筛选、批量 resolve 回显与候选禁选。
+
+- 单选值为 `userId | undefined`，多选值为 `userId[]`。
+- 搜索与 resolve 请求必须由业务页面注入，组件不决定 URL 或权限 purpose。
+- `scope` 只展示当前 URL 作用域；企业可通过 `filters.projects` 和 `loadProjectFilters` 浏览获准查看的项目身份。
+- `selectedCandidates` 只用于回显快照，不改变最终表单值。

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/index.ts

@@ -0,0 +1,13 @@
+export { default } from './OrganizationMemberSelector'
+export { default as OrganizationMemberBrowser } from './OrganizationMemberBrowser'
+export type {
+  OrganizationMemberBrowserFilters,
+  OrganizationMemberBrowserProps,
+  OrganizationMemberBrowserRef,
+  OrganizationMemberBrowserScope,
+  OrganizationMemberFilterOption,
+  OrganizationMemberResourceFilters,
+  OrganizationMemberSearchRequest,
+  OrganizationMemberSearchResult,
+  OrganizationMemberSelectorProps,
+} from './OrganizationMemberSelectorTypes'

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/README.md

@@ -0,0 +1,13 @@
+# Selector
+
+前端选择器组件集合。不同交互形态拆成独立组件，不通过一个庞大的 `mode` 参数混合。
+
+| 组件                         | 适用场景                         | 值                  |
+| ---------------------------- | -------------------------------- | ------------------- |
+| `BasicTableSelector`         | 弹窗表格、分页、跨页单选或多选   | 稳定行 key 数组     |
+| `GlobalAccountSelect`        | 表单内远程搜索平台全局账号       | 单个全局 `userId`   |
+| `OrganizationMemberSelector` | 按组织、岗位、角色或项目浏览成员 | 单个或多个 `userId` |
+
+详细用法见各组件目录中的 README。查询函数均由业务侧注入，公共组件不决定接口地址、候选权限或数据保存方式。
+
+根入口暂时保留原 `Selector` 默认导出及旧类型别名，实际均指向 `BasicTableSelector`；新代码应使用命名导出。

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/index.ts

@@ -0,0 +1,30 @@
+export { default, default as BasicTableSelector } from './BasicTableSelector'
+export type {
+  BasicTableSelectorProps,
+  BasicTableSelectorProps as SelectorProps,
+  BasicTableSelectorRef,
+  BasicTableSelectorRef as SelectorRef,
+  BasicTableSelectorRowKey,
+  BasicTableSelectorRowKey as SelectorRowKey,
+  BasicTableSelectorShowOptions,
+  BasicTableSelectorShowOptions as SelectorShowOptions,
+} from './BasicTableSelector'
+export { default as GlobalAccountSelect } from './GlobalAccountSelect'
+export type {
+  GlobalAccountOption,
+  GlobalAccountResolver,
+  GlobalAccountSearchRequest,
+  GlobalAccountSearchResult,
+  GlobalAccountSelectOption,
+  GlobalAccountSelectProps,
+} from './GlobalAccountSelect'
+export { default as OrganizationMemberSelector } from './OrganizationMemberSelector'
+export type {
+  OrganizationMemberBrowserFilters,
+  OrganizationMemberBrowserProps,
+  OrganizationMemberBrowserRef,
+  OrganizationMemberFilterOption,
+  OrganizationMemberSearchRequest,
+  OrganizationMemberSearchResult,
+  OrganizationMemberSelectorProps,
+} from './OrganizationMemberSelector'

package/template-vp-monorepo-react-nestjs/apps/web/src/config/theme.ts

@@ -3,18 +3,50 @@ import type { ThemeConfig } from 'antd'
 /** Ant Design 与 ProComponents 共用的主题入口。 */
 export const appTheme: ThemeConfig = {
   token: {
-    colorPrimary: '#176f88',
-    colorInfo: '#176f88',
-    colorBgLayout: '#f3f6f8',
-    colorText: '#1a2938',
-    colorBorderSecondary: '#dfe7ed',
-    borderRadius: 6,
-    fontFamily: '"Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif',
+    colorPrimary: '#7864c4',
+    colorInfo: '#7864c4',
+    colorBgLayout: '#f5f3fc',
+    colorText: '#302b49',
+    colorTextSecondary: '#78718e',
+    colorBorder: '#e1ddec',
+    colorBorderSecondary: '#eeebf5',
+    borderRadius: 12,
+    controlHeight: 36,
+    fontFamily: '"PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif',
   },
   components: {
+    Button: { primaryShadow: '0 4px 12px rgba(120, 100, 196, 0.18)' },
+    Card: { borderRadiusLG: 18 },
+    Table: {
+      headerBg: '#f5f3fb',
+      headerColor: '#67607c',
+      headerSplitColor: 'transparent',
+      rowHoverBg: '#f7f5ff',
+    },
+    Menu: { itemBorderRadius: 12 },
     Layout: {
-      headerBg: '#ffffff',
-      siderBg: '#ffffff',
+      headerBg: 'transparent',
+      siderBg: 'transparent',
     },
   },
 }
+
+export const workspaceLayoutToken = {
+  bgLayout: 'transparent',
+  header: {
+    heightLayoutHeader: 72,
+    colorBgHeader: 'rgba(255, 255, 255, 0.56)',
+    colorHeaderTitle: '#302b49',
+    colorTextRightActionsItem: '#78718e',
+  },
+  sider: {
+    colorMenuBackground: 'transparent',
+    colorBgMenuItemSelected: '#e9e3fa',
+    colorBgMenuItemHover: '#eeebf8',
+    colorTextMenuSelected: '#6853ad',
+    colorTextMenu: '#78718e',
+    colorTextMenuItemHover: '#6853ad',
+    colorTextMenuTitle: '#302b49',
+    menuHeight: 46,
+  },
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/hooks/useLatestDialogRequest.ts

@@ -0,0 +1,71 @@
+interface LatestDialogRequestOptions<TResult> {
+  targetId: string
+  load: () => Promise<TResult>
+  onSuccess: (result: TResult) => void
+  onError: (error: unknown) => void
+}
+
+interface LatestDialogRequestController {
+  run: <TResult>(options: LatestDialogRequestOptions<TResult>) => Promise<void>
+  invalidate: () => void
+}
+
+interface LatestDialogRequestState {
+  loadingId?: string
+  run: LatestDialogRequestController['run']
+}
+
+/**
+ * 创建只允许最新请求更新弹窗和 loading 的协调器。
+ * 旧请求完成时会静默退出，既不会执行回调，也不会清除新请求的 loading。
+ */
+export function createLatestDialogRequestController(
+  onLoadingChange: (targetId?: string) => void,
+): LatestDialogRequestController {
+  let sequence = 0
+
+  return {
+    async run<TResult>({
+      targetId,
+      load,
+      onSuccess,
+      onError,
+    }: LatestDialogRequestOptions<TResult>) {
+      const requestSequence = ++sequence
+      onLoadingChange(targetId)
+      try {
+        const result = await load()
+        if (requestSequence !== sequence) return
+        onSuccess(result)
+      } catch (error) {
+        if (requestSequence !== sequence) return
+        onError(error)
+      } finally {
+        if (requestSequence === sequence) onLoadingChange(undefined)
+      }
+    },
+    invalidate() {
+      sequence += 1
+    },
+  }
+}
+
+/**
+ * 为异步弹窗请求提供“最后一次调用生效”语义。
+ * 作用域变化或组件卸载时，尚未完成的请求会自动失效。
+ */
+export function useLatestDialogRequest(scopeKey: string): LatestDialogRequestState {
+  const [loadingId, setLoadingId] = useState<string>()
+  const controllerRef = useRef<LatestDialogRequestController | undefined>(undefined)
+  if (!controllerRef.current) {
+    controllerRef.current = createLatestDialogRequestController(setLoadingId)
+  }
+
+  useEffect(() => {
+    controllerRef.current?.invalidate()
+    setLoadingId(undefined)
+    return () => controllerRef.current?.invalidate()
+  }, [scopeKey])
+
+  return { loadingId, run: controllerRef.current.run }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/i18n/config.ts

@@ -0,0 +1,40 @@
+export const APP_LOCALES = ['zh_CN', 'en_US'] as const
+
+export type AppLocale = (typeof APP_LOCALES)[number]
+
+export const DEFAULT_LOCALE: AppLocale = 'zh_CN'
+export const I18N_STORAGE_KEY = 'wanwu-locale'
+
+/**
+ * 将应用语言映射到组件库和日期库使用的 locale 标识。
+ *
+ * 应用词条使用下划线格式（`zh_CN` / `en_US`），而 Day.js 使用短横线或短名称；
+ * 将映射集中在这里可以避免 antd、Pro Components 和 Day.js 在语言切换时出现漂移。
+ */
+export const APP_LOCALE_ADAPTERS = {
+  zh_CN: {
+    antd: 'zh_CN',
+    pro: 'zh-CN',
+    dayjs: 'zh-cn',
+    document: 'zh-CN',
+  },
+  en_US: {
+    antd: 'en_US',
+    pro: 'en-US',
+    dayjs: 'en',
+    document: 'en',
+  },
+} as const satisfies Record<
+  AppLocale,
+  { antd: string; pro: string; dayjs: string; document: string }
+>
+
+/** 判断外部输入是否为前端支持的语言标识。 */
+export function isAppLocale(locale: unknown): locale is AppLocale {
+  return APP_LOCALES.includes(locale as AppLocale)
+}
+
+/** 根据浏览器首选语言选择应用初始语言，未匹配时回退到简体中文。 */
+export function resolveBrowserLocale(language = navigator.language): AppLocale {
+  return language.toLowerCase().startsWith('en') ? 'en_US' : DEFAULT_LOCALE
+}

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

@@ -0,0 +1,10 @@
+export {
+  APP_LOCALES,
+  DEFAULT_LOCALE,
+  I18N_STORAGE_KEY,
+  isAppLocale,
+  resolveBrowserLocale,
+} from './config'
+export type { AppLocale } from './config'
+export { appI18nStore, tr } from './instance'
+export { getUiLocale } from './ui-locale'

package/template-vp-monorepo-react-nestjs/apps/web/src/i18n/instance.ts

@@ -0,0 +1,36 @@
+import { createJsonStorage, i18n } from '@bubblesjs/i18n-core'
+import type { MessageValues, Messages } from '@bubblesjs/i18n-core'
+import {
+  DEFAULT_LOCALE,
+  I18N_STORAGE_KEY,
+  isAppLocale,
+  resolveBrowserLocale,
+  type AppLocale,
+} from './config'
+
+const storage = createJsonStorage(localStorage)
+const persistedLocale = storage.getItem<string>(I18N_STORAGE_KEY)
+
+if (persistedLocale && !isAppLocale(persistedLocale)) storage.removeItem(I18N_STORAGE_KEY)
+
+const messageLoaders: Record<AppLocale, () => Promise<Messages>> = {
+  en_US: async () => (await import('@/locales/en_US.json')).default,
+  zh_CN: async () => (await import('@/locales/zh_CN.json')).default,
+}
+
+/** 加载指定语言的前端词条，未知语言回退到默认语言。 */
+async function loadMessages(locale?: string): Promise<Messages> {
+  return messageLoaders[isAppLocale(locale) ? locale : DEFAULT_LOCALE]()
+}
+
+export const appI18nStore = await i18n.init({
+  locale: isAppLocale(persistedLocale) ? persistedLocale : resolveBrowserLocale(),
+  loaderMessage: loadMessages,
+  storage,
+  storageKey: I18N_STORAGE_KEY,
+})
+
+/** 为 React 组件之外的前端逻辑读取当前语言词条。 */
+export function tr(key: string, values?: MessageValues): string {
+  return appI18nStore.getState().tr(key, values)
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/i18n/ui-locale.ts

@@ -0,0 +1,30 @@
+import { enUSIntl, zhCNIntl, type IntlType } from '@ant-design/pro-components'
+import type { Locale as AntdLocale } from 'antd/es/locale'
+import enUS from 'antd/locale/en_US'
+import zhCN from 'antd/locale/zh_CN'
+import type { AppLocale } from './config'
+import { APP_LOCALE_ADAPTERS } from './config'
+
+const antdLocales: Record<string, AntdLocale> = { en_US: enUS, zh_CN: zhCN }
+const proLocales: Record<string, IntlType> = { 'en-US': enUSIntl, 'zh-CN': zhCNIntl }
+
+/**
+ * 返回与应用语言匹配的 antd、Pro Components 和 Day.js 配置。
+ *
+ * 该适配器只负责静态映射；实际的 Day.js 全局切换仍由 App 在 locale 变化后执行，
+ * 以保证 Pro Components 内部副作用不会覆盖应用最终选择。
+ */
+export function getUiLocale(locale: AppLocale): {
+  antd: AntdLocale
+  pro: IntlType
+  dayjs: string
+  document: string
+} {
+  const adapter = APP_LOCALE_ADAPTERS[locale]
+  return {
+    antd: antdLocales[adapter.antd] ?? zhCN,
+    pro: proLocales[adapter.pro] ?? zhCNIntl,
+    dayjs: adapter.dayjs,
+    document: adapter.document,
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/layouts/{BasicLayout.tsx → BasicLayout/index.tsx}

@@ -1,5 +1,10 @@
+import { logout } from '@/api/auth'
+import Brand, { BrandMark } from '@/components/Brand/Brand'
+import LocaleSwitch from '@/components/LocaleSwitch/LocaleSwitch'
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import { workspaceLayoutToken } from '@/config/theme'
+import { cookie } from '@/utils/storage/cookie'
 import {
-  AppstoreOutlined,
   DashboardOutlined,
   LogoutOutlined,
   TableOutlined,
@@ -8,35 +13,39 @@ import {
 import { ProLayout } from '@ant-design/pro-components'
 import { useRequest } from 'alova/client'
 import { App, Button } from 'antd'
-import { Suspense } from 'react'
-import { Link, Outlet, useLocation, useNavigate } from 'react-router'
-import PageLoading from '@/components/Loading/PageLoading'
-import { logout } from '@/api/auth'
-import { cookie } from '@/utils/storage/cookie'
-import styles from './BasicLayout.module.css'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { I18nState } from '@bubblesjs/i18n-core'
+import '../WorkspaceLayout/workspace.css'
 
-const menuRoutes = [
-  { path: '/home', name: '工作台', icon: <DashboardOutlined /> },
-  {
-    path: '/examples/pro-table',
-    key: 'pro-table-examples',
-    name: 'ProTable 示例',
-    icon: <TableOutlined />,
-    routes: [
-      { path: '/examples/pro-table', key: 'pro-table-basic', name: '基础' },
-      { path: '/examples/pro-table/draft', name: '草稿' },
-    ],
-  },
-  { path: '/examples/i18n', name: '国际化示例', icon: <TranslationOutlined /> },
-]
+/** 使用当前语言构建基础示例导航。 */
+function createMenuRoutes(tr: I18nState['tr']) {
+  return [
+    { path: '/home', name: tr('工作台'), icon: <DashboardOutlined /> },
+    {
+      path: '/examples/pro-table',
+      key: 'pro-table-examples',
+      name: tr('ProTable 示例'),
+      icon: <TableOutlined />,
+      routes: [
+        { path: '/examples/pro-table', key: 'pro-table-basic', name: tr('基础') },
+        { path: '/examples/pro-table/draft', name: tr('草稿') },
+      ],
+    },
+    { path: '/examples/i18n', name: tr('国际化示例'), icon: <TranslationOutlined /> },
+  ]
+}
 
+/** 组织基础导航、登录入口及退出登录，页面懒加载交由全局边界等待。 */
 export default function BasicLayout() {
   const location = useLocation()
   const navigate = useNavigate()
   const token = cookie.get('token')
   const { message } = App.useApp()
+  const { tr } = useI18n()
   const { send, loading } = useRequest(logout, { immediate: false })
+  const menuRoutes = createMenuRoutes(tr)
 
+  /** 结束当前登录会话，清理本地令牌并返回登录页。 */
   async function handleLogout() {
     if (loading) return
     try {
@@ -44,17 +53,18 @@ export default function BasicLayout() {
       cookie.remove('token')
       void navigate('/login', { replace: true })
     } catch (error) {
-      void message.error(error instanceof Error ? error.message : '退出失败，请重试')
+      void message.error(error instanceof Error ? error.message : tr('退出失败，请重试'))
     }
   }
 
   return (
     <ProLayout
-      className="platform-layout"
+      className="platform-layout workspace-layout"
       style={{ height: '100dvh', overflow: 'hidden' }}
       contentStyle={{ minHeight: 0, padding: 0, overflow: 'auto' }}
-      title="通用平台"
-      logo={<AppstoreOutlined className={styles.logo} />}
+      title={tr('万物')}
+      logo={<BrandMark />}
+      token={workspaceLayoutToken}
       layout="mix"
       fixedHeader
       fixSiderbar
@@ -62,6 +72,7 @@ export default function BasicLayout() {
       actionsRender={() =>
         token
           ? [
+              <LocaleSwitch key="locale" />,
               <Button
                 key="logout"
                 type="text"
@@ -69,12 +80,13 @@ export default function BasicLayout() {
                 loading={loading}
                 onClick={() => void handleLogout()}
               >
-                退出登录
+                {tr('退出登录')}
               </Button>,
             ]
           : [
+              <LocaleSwitch key="locale" />,
               <Link key="login" to="/login">
-                登录
+                {tr('登录')}
               </Link>,
             ]
       }
@@ -91,16 +103,11 @@ export default function BasicLayout() {
           {dom}
         </Link>
       )}
-      headerTitleRender={(logo, title) => (
-        <Link className={styles.brand} to="/home" aria-label="通用平台首页">
-          {logo}
-          {title}
-        </Link>
-      )}
+      headerTitleRender={() => <Brand variant="basic" to="/home" ariaLabel={tr('万物首页')} />}
     >
-      <Suspense fallback={<PageLoading />}>
+      <RouteTransition>
         <Outlet />
-      </Suspense>
+      </RouteTransition>
     </ProLayout>
   )
 }

package/template-vp-monorepo-react-nestjs/apps/web/src/layouts/WorkspaceLayout/components/WorkspaceNavigationBoundary.tsx

@@ -0,0 +1,50 @@
+import { ConfigProvider, Modal } from 'antd'
+
+interface WorkspaceNavigationBoundaryProps extends PropsWithChildren {
+  navigating: boolean
+  refreshing: boolean
+  fallback: ReactNode
+}
+
+/**
+ * 导航或权限重校验期间保留页面结构，隔离全部页面交互并显示等待态；目标路由提交后由
+ * Outlet 替换旧页面，以便页面过渡捕获连续的新旧快照。页面级 Ant Design portal 统一挂到
+ * 独立宿主；静态 Modal 不受上下文管理，等待时直接清理。
+ */
+export default function WorkspaceNavigationBoundary({
+  navigating,
+  refreshing,
+  fallback,
+  children,
+}: WorkspaceNavigationBoundaryProps) {
+  const portalHostRef = useRef<HTMLDivElement>(null)
+  const blocked = navigating || refreshing
+
+  /** 返回 ProLayout 外的页面专属 portal 宿主，首次提交前暂时回退到 body。 */
+  const getPopupContainer = useCallback(() => portalHostRef.current ?? document.body, [])
+
+  useLayoutEffect(() => {
+    if (blocked) Modal.destroyAll()
+  }, [blocked])
+
+  return (
+    <>
+      <ConfigProvider getPopupContainer={getPopupContainer}>
+        <div className="workspace-page-surface" hidden={refreshing} inert={blocked}>
+          {children}
+        </div>
+        {blocked && fallback}
+      </ConfigProvider>
+      {createPortal(
+        <div
+          ref={portalHostRef}
+          className="workspace-portal-host"
+          hidden={blocked}
+          inert={blocked}
+          aria-hidden={blocked ? true : undefined}
+        />,
+        document.body,
+      )}
+    </>
+  )
+}