create-bubbles 0.1.25 → 0.1.27

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/index.tsx

@@ -0,0 +1,113 @@
+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 {
+  DashboardOutlined,
+  LogoutOutlined,
+  TableOutlined,
+  TranslationOutlined,
+} from '@ant-design/icons'
+import { ProLayout } from '@ant-design/pro-components'
+import { useRequest } from 'alova/client'
+import { App, Button } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { I18nState } from '@bubblesjs/i18n-core'
+import '../WorkspaceLayout/workspace.css'
+
+/** 使用当前语言构建基础示例导航。 */
+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 {
+      await send()
+      cookie.remove('token')
+      void navigate('/login', { replace: true })
+    } catch (error) {
+      void message.error(error instanceof Error ? error.message : tr('退出失败，请重试'))
+    }
+  }
+
+  return (
+    <ProLayout
+      className="platform-layout workspace-layout"
+      style={{ height: '100dvh', overflow: 'hidden' }}
+      contentStyle={{ minHeight: 0, padding: 0, overflow: 'auto' }}
+      title={tr('万物')}
+      logo={<BrandMark />}
+      token={workspaceLayoutToken}
+      layout="mix"
+      fixedHeader
+      fixSiderbar
+      siderWidth={224}
+      actionsRender={() =>
+        token
+          ? [
+              <LocaleSwitch key="locale" />,
+              <Button
+                key="logout"
+                type="text"
+                icon={<LogoutOutlined />}
+                loading={loading}
+                onClick={() => void handleLogout()}
+              >
+                {tr('退出登录')}
+              </Button>,
+            ]
+          : [
+              <LocaleSwitch key="locale" />,
+              <Link key="login" to="/login">
+                {tr('登录')}
+              </Link>,
+            ]
+      }
+      location={location}
+      route={{ path: '/', routes: menuRoutes }}
+      menu={{ locale: false }}
+      menuProps={{
+        selectedKeys: [
+          location.pathname === '/examples/pro-table' ? 'pro-table-basic' : location.pathname,
+        ],
+      }}
+      menuItemRender={(item, dom, { isMobile }) => (
+        <Link to={item.path ?? '/home'} onClick={isMobile ? item.onClick : undefined}>
+          {dom}
+        </Link>
+      )}
+      headerTitleRender={() => <Brand variant="basic" to="/home" ariaLabel={tr('万物首页')} />}
+    >
+      <RouteTransition>
+        <Outlet />
+      </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,
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,196 @@
+import { logout } from '@/api/auth'
+import Brand, { BrandMark } from '@/components/Brand/Brand'
+import PageLoading from '@/components/Loading/PageLoading'
+import ChangePasswordDialog, {
+  type ChangePasswordDialogRef,
+} from '@/components/PasswordActions/ChangePasswordDialog'
+import LocaleSwitch from '@/components/LocaleSwitch/LocaleSwitch'
+import RouteTransition from '@/components/RouteTransition/RouteTransition'
+import { workspaceLayoutToken } from '@/config/theme'
+import { getWorkspaceState } from '@/pages/workspaces/state'
+import { navigationTree } from '@/router/page-registry'
+import { clearWorkspaceRequests } from '@/utils/request/workspace'
+import { cookie } from '@/utils/storage/cookie'
+import { KeyOutlined, LogoutOutlined, SwapOutlined } from '@ant-design/icons'
+import { ProLayout } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { App, Avatar, Button, Tooltip } from 'antd'
+import type { AccessScope } from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import WorkspaceNavigationBoundary from './components/WorkspaceNavigationBoundary'
+import './workspace.css'
+
+/** 根据当前工作空间权限构建导航并同步刷新状态，页面懒加载交由全局边界等待。 */
+export default function WorkspaceLayout() {
+  const { companyId, projectId } = useParams()
+  const scope: AccessScope = projectId
+    ? { type: 'project', companyId: companyId!, projectId }
+    : companyId
+      ? { type: 'company', companyId }
+      : { type: 'platform' }
+  const access = getWorkspaceState().accessByScope.get(accessScopeKey(scope))
+  const location = useLocation()
+  const navigation = useNavigation()
+  const navigate = useNavigate()
+  const revalidator = useRevalidator()
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+  const changePasswordRef = useRef<ChangePasswordDialogRef>(null)
+  const navigating = navigation.state !== 'idle'
+  const refreshing = revalidator.state === 'loading'
+
+  useEffect(
+    /** 监听窗口焦点和权限刷新事件，在卸载时移除订阅。 */ () => {
+      let requested = false
+      /** 在页面可见且未在刷新时重新校验工作空间权限，避免重复请求。 */
+      const refresh = () => {
+        if (document.visibilityState === 'hidden' || requested || revalidator.state !== 'idle')
+          return
+        requested = true
+        void revalidator.revalidate().finally(() => {
+          requested = false
+        })
+      }
+      window.addEventListener('focus', refresh)
+      window.addEventListener('workspace-access-refresh', refresh)
+      return /** 移除窗口焦点和权限更新监听，防止已卸载布局再次触发请求。 */ () => {
+        window.removeEventListener('focus', refresh)
+        window.removeEventListener('workspace-access-refresh', refresh)
+      }
+    },
+    [revalidator],
+  )
+
+  /** 结束当前登录会话，清理本地令牌并返回登录页。 */
+  async function handleLogout() {
+    clearWorkspaceRequests()
+    try {
+      await logout().send(true)
+    } catch (error) {
+      void message.error(error instanceof Error ? error.message : tr('退出失败，请重试'))
+      return
+    }
+    cookie.remove('token')
+    void navigate('/login', { replace: true })
+  }
+
+  // 撤权时旧布局可能仍在等待错误边界提交，暂时显示加载态，避免子页面读取空权限。
+  if (!access) return <PageLoading />
+
+  const scopeName =
+    access.scope.type === 'platform'
+      ? tr('平台空间')
+      : access.scope.type === 'company'
+        ? tr('企业空间')
+        : tr('项目空间')
+  const workspaceName = [access.workspace?.companyName, access.workspace?.name]
+    .filter(Boolean)
+    .join(' / ')
+
+  return (
+    <ProLayout
+      className="workspace-layout"
+      title={tr('万物')}
+      logo={<BrandMark />}
+      token={workspaceLayoutToken}
+      style={{ height: '100dvh', overflow: 'hidden' }}
+      contentStyle={{ padding: 0, minHeight: 0, overflow: 'hidden' }}
+      layout="mix"
+      fixedHeader
+      fixSiderbar
+      siderWidth={232}
+      location={location}
+      route={{ path: '/', routes: navigationTree(access.menus, access.scope) }}
+      menu={{ locale: false }}
+      menuProps={{ selectedKeys: [location.pathname] }}
+      menuItemRender={(item, dom, { isMobile }) =>
+        item.path ? (
+          <Link to={item.path} onClick={isMobile ? item.onClick : undefined}>
+            {dom}
+          </Link>
+        ) : (
+          dom
+        )
+      }
+      headerTitleRender={() => (
+        <Brand variant="workspace" to="/workspaces" ariaLabel={tr('万物工作空间')} />
+      )}
+      menuHeaderRender={(_logo, _title, props) =>
+        props && !props.isMobile ? null : (
+          <Brand variant="workspace" to="/workspaces" ariaLabel={tr('万物工作空间')} />
+        )
+      }
+      headerContentRender={() => (
+        <div className={`workspace-context workspace-context-${access.scope.type}`}>
+          <span className="workspace-context-dot" aria-hidden="true" />
+          <span className="workspace-context-type">{scopeName}</span>
+          <strong title={workspaceName}>
+            {access.workspace?.companyName && (
+              <span className="workspace-context-parent">{access.workspace.companyName} / </span>
+            )}
+            {access.workspace?.name || scopeName}
+          </strong>
+        </div>
+      )}
+      actionsRender={() => [
+        <Tooltip title={tr('账号：{account}', { account: access.user.account })} key="user">
+          <div className="workspace-user" tabIndex={0}>
+            <Avatar size={34}>{access.user.name.slice(0, 1).toUpperCase()}</Avatar>
+            <span>
+              {access.user.name}
+              <small>{access.administrator ? tr('管理员') : tr('成员')}</small>
+            </span>
+          </div>
+        </Tooltip>,
+        <LocaleSwitch key="locale" showLabel={false} />,
+        <Button
+          key="change-password"
+          type="text"
+          icon={<KeyOutlined />}
+          onClick={() => changePasswordRef.current?.show()}
+        >
+          {tr('修改密码')}
+        </Button>,
+        <Link key="switch" to="/workspaces" aria-label={tr('切换空间')}>
+          <Button className="workspace-switch" aria-label={tr('切换空间')} icon={<SwapOutlined />}>
+            {tr('切换空间')}
+          </Button>
+        </Link>,
+        <Button
+          key="logout"
+          className="workspace-logout"
+          aria-label={tr('退出登录')}
+          type="text"
+          icon={<LogoutOutlined />}
+          onClick={() => void handleLogout()}
+        >
+          {tr('退出')}
+        </Button>,
+      ]}
+    >
+      <title>{`${workspaceName || scopeName} - ${tr('万物')}`}</title>
+      <div className="workspace-content">
+        <div
+          className="workspace-body"
+          key={accessScopeKey(scope)}
+          aria-busy={navigating || refreshing}
+        >
+          <WorkspaceNavigationBoundary
+            navigating={navigating}
+            refreshing={refreshing}
+            fallback={
+              <div className="workspace-navigation-loading">
+                <PageLoading />
+              </div>
+            }
+          >
+            <RouteTransition>
+              <Outlet context={access} />
+            </RouteTransition>
+          </WorkspaceNavigationBoundary>
+        </div>
+      </div>
+      <ChangePasswordDialog ref={changePasswordRef} />
+    </ProLayout>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/layouts/WorkspaceLayout/workspace-landing.css

@@ -0,0 +1,119 @@
+@layer components {
+  .workspace-landing {
+    min-height: 100dvh;
+    isolation: isolate;
+    position: relative;
+    overflow: hidden;
+    background: var(--wanwu-atmosphere);
+  }
+  .workspace-landing::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    width: 580px;
+    height: 580px;
+    top: 100px;
+    right: -180px;
+    border: 1px solid #ffffffa6;
+    border-radius: 50%;
+    box-shadow:
+      0 0 0 70px #ffffff1a,
+      0 0 0 140px #ffffff14;
+  }
+  .workspace-landing-header {
+    background: #ffffff59;
+    border-bottom: 1px solid var(--wanwu-border);
+    padding: 22px 6vw;
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    align-items: center;
+    backdrop-filter: blur(20px);
+  }
+  .workspace-landing-main {
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 72px 24px;
+  }
+  .workspace-landing .workspace-page-title h1 {
+    font-family: 'STSong', 'SimSun', serif;
+    font-size: 38px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+  }
+  .workspace-landing .workspace-page-title {
+    margin-bottom: 40px;
+  }
+  .workspace-landing .ant-card {
+    background: var(--wanwu-glass);
+    border: 1px solid var(--wanwu-border);
+    box-shadow: var(--wanwu-shadow);
+  }
+  .workspace-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 22px;
+  }
+  .workspace-card {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    transition:
+      transform 180ms,
+      box-shadow 180ms;
+  }
+  .workspace-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 16px 32px #8570af14;
+  }
+  .workspace-card::after {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    right: -30px;
+    top: -45px;
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 40% 40%, #eee7fc80, #ded0f84d 50%, #e9e1f500 70%);
+  }
+  .workspace-card-company::after {
+    background: radial-gradient(circle, #dceefa99, #dceefa00 70%);
+  }
+  .workspace-card-project::after {
+    background: radial-gradient(circle, #f2dfef99, #f2dfef00 70%);
+  }
+  .workspace-card .ant-card-body {
+    min-height: 215px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding: 28px;
+  }
+  .workspace-card h3 {
+    margin: 0;
+    font-size: 19px;
+    overflow-wrap: anywhere;
+  }
+  .workspace-card p {
+    margin: 0;
+    color: var(--wanwu-muted);
+    overflow-wrap: anywhere;
+  }
+  .workspace-card a {
+    margin-top: auto;
+    width: fit-content;
+    font-weight: 500;
+  }
+  @media (max-width: 767px) {
+    .workspace-landing-main {
+      padding: 40px 20px;
+    }
+    .workspace-landing-header {
+      padding: 18px 20px;
+    }
+    .workspace-landing .workspace-page-title h1 {
+      font-size: 30px;
+    }
+  }
+}