create-bubbles 0.1.26 → 0.1.27

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;
+    }
+  }
+}

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

@@ -0,0 +1,110 @@
+@layer components {
+  .workspace-body .ant-pro-table-search,
+  .workspace-body .ant-pro-card,
+  .workspace-body .ant-card {
+    border: 1px solid var(--wanwu-border);
+    border-radius: 18px;
+    background: var(--wanwu-glass);
+    box-shadow: var(--wanwu-shadow);
+  }
+  .workspace-body .ant-pro-table-search {
+    padding-top: 24px;
+    padding-bottom: 0;
+  }
+  .workspace-body .ant-pro-table-list-toolbar-title {
+    font-size: 18px;
+    letter-spacing: 0.02em;
+    font-weight: 600;
+  }
+  .workspace-body .ant-pro-table-list-toolbar {
+    padding-block: 4px;
+  }
+  .workspace-body .ant-pro-card .ant-pro-card {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+  .workspace-body .ant-table,
+  .workspace-body .ant-table-placeholder,
+  .workspace-body .ant-table-placeholder:hover > td {
+    background: transparent;
+  }
+  .workspace-body .ant-table-thead > tr > th {
+    background: #f3f0fa;
+    font-size: 12px;
+    font-weight: 500;
+    padding-block: 16px;
+  }
+  .workspace-body .ant-input,
+  .workspace-body .ant-input-affix-wrapper,
+  .workspace-body .ant-select-selector {
+    background: #ffffff9c;
+  }
+  .workspace-body .ant-btn-primary,
+  .workspace-landing .ant-btn-primary {
+    background: linear-gradient(120deg, #8976d1, #7460be);
+    border-color: transparent;
+  }
+  .workspace-body .ant-btn-primary:hover,
+  .workspace-landing .ant-btn-primary:hover {
+    filter: brightness(1.06);
+  }
+  .workspace-body .ant-table-empty .ant-table-placeholder > td {
+    height: 310px;
+  }
+  .workspace-table-empty .ant-empty-image {
+    height: 88px;
+  }
+  .workspace-empty-orbit {
+    display: inline-block;
+    position: relative;
+    width: 70px;
+    height: 70px;
+    margin: 6px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 30% 25%, #fff 2%, #ece3fb 40%, #d2c5ec 72%, #e3ebfa);
+    box-shadow:
+      inset -6px -5px 12px #bca8d92b,
+      0 16px 30px #b9abd329;
+  }
+  .workspace-empty-orbit::before {
+    content: '';
+    position: absolute;
+    inset: 21px -20px;
+    border: 1px solid #cfc1e7;
+    border-top-color: #fffd;
+    border-radius: 50%;
+    transform: rotate(-28deg);
+  }
+  .workspace-empty-orbit::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -14px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #cabbe6;
+    box-shadow: -95px 57px 0 -1px #cddcf0;
+  }
+  .workspace-table-empty strong {
+    display: block;
+    color: #625a79;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  .workspace-table-empty p {
+    margin-top: 8px;
+    color: var(--wanwu-muted);
+    font-size: 12px;
+  }
+  @media (max-width: 767px) {
+    .workspace-body .ant-pro-table-search,
+    .workspace-body .ant-pro-card {
+      border-radius: 14px;
+    }
+    .workspace-body .ant-table-empty .ant-table-placeholder > td {
+      height: 230px;
+    }
+  }
+}

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

@@ -0,0 +1,223 @@
+@import './workspace-surfaces.css';
+@import './workspace-landing.css';
+
+@layer components {
+  .workspace-layout {
+    background: var(--wanwu-atmosphere);
+  }
+  .workspace-layout .ant-pro-layout-bg-list {
+    background: transparent;
+  }
+  .workspace-layout .ant-pro-layout-header {
+    border-bottom: 1px solid var(--wanwu-border);
+    backdrop-filter: blur(22px);
+  }
+  .workspace-layout .ant-pro-global-header {
+    padding-inline: 28px;
+    gap: 24px;
+  }
+  .workspace-layout .ant-pro-global-header > div[style] {
+    min-width: 0;
+  }
+  .workspace-layout .ant-pro-sider {
+    background: linear-gradient(160deg, #ffffff70, #f4effc50 55%, #e7e7fa55);
+    border-inline-end: 1px solid #ffffff80;
+    box-shadow: none;
+    padding-top: 18px;
+  }
+  .workspace-layout .ant-pro-sider .ant-menu-item-selected {
+    background: linear-gradient(110deg, #e4ddf8, #eee8fa);
+    box-shadow:
+      inset 0 1px 0 #ffffffb3,
+      0 4px 12px #7964b508;
+    font-weight: 600;
+  }
+  .workspace-layout .ant-pro-sider .ant-menu-item {
+    margin-block: 6px;
+  }
+  .workspace-context {
+    display: flex;
+    width: fit-content;
+    max-width: 100%;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 14px;
+    border: 1px solid #e7e0f1;
+    border-radius: 24px;
+    background: #ffffff66;
+    font-size: 12px;
+    line-height: 24px;
+  }
+  .workspace-context-dot {
+    width: 7px;
+    height: 7px;
+    flex: 0 0 7px;
+    border-radius: 50%;
+    background: #9d89d5;
+    box-shadow: 0 0 0 4px #eae2f6;
+  }
+  .workspace-context-company .workspace-context-dot {
+    background: #699aab;
+    box-shadow: 0 0 0 4px #e0eef3;
+  }
+  .workspace-context-project .workspace-context-dot {
+    background: #b47da8;
+    box-shadow: 0 0 0 4px #f1e3ed;
+  }
+  .workspace-context-type {
+    color: var(--wanwu-muted);
+    white-space: nowrap;
+  }
+  .workspace-context strong {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+    color: var(--wanwu-ink);
+  }
+  .workspace-user {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-inline-end: 14px;
+    line-height: 19px;
+    color: var(--wanwu-ink);
+  }
+  .workspace-user .ant-avatar {
+    color: #7763ad;
+    background: linear-gradient(135deg, #e9e1f7, #e3eafb);
+    border: 1px solid #ffffff;
+  }
+  .workspace-user > span:last-child {
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .workspace-user small {
+    display: block;
+    color: var(--wanwu-muted);
+    font-size: 11px;
+  }
+  .workspace-content {
+    height: calc(100dvh - 72px);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .workspace-body {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .workspace-page-surface {
+    height: 100%;
+  }
+  .workspace-navigation-loading {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    background: #f5f3fc66;
+  }
+  .workspace-page {
+    height: 100%;
+    overflow: auto;
+    padding: 32px;
+  }
+  .workspace-page-title {
+    margin-bottom: 28px;
+  }
+  .workspace-page-title h1 {
+    margin: 0 0 10px;
+    color: var(--wanwu-ink);
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+  }
+  .workspace-page-title p {
+    color: var(--wanwu-muted);
+    margin: 0;
+    line-height: 1.8;
+  }
+  .workspace-stateless-home {
+    max-width: 1100px;
+  }
+  .workspace-stateless-home .ant-descriptions {
+    margin-bottom: 28px;
+    background: var(--wanwu-glass);
+    border-radius: 12px;
+  }
+  .permission-tree {
+    max-height: 430px;
+    overflow: auto;
+    margin-top: 16px;
+    border: 1px solid #e1ddec;
+    border-radius: 12px;
+    padding: 12px;
+  }
+  .menu-management {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .menu-management > .ant-tabs {
+    padding: 12px 20px 0;
+  }
+  .menu-table {
+    flex: 1;
+    min-height: 0;
+  }
+  .audit-summary {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font-size: 12px;
+    max-width: 420px;
+  }
+  @media (max-width: 1023px) {
+    .workspace-layout .ant-pro-global-header {
+      gap: 12px;
+      padding-inline: 16px;
+    }
+    .workspace-context-type {
+      display: none;
+    }
+    .workspace-user {
+      margin-inline-end: 0;
+    }
+  }
+  @media (max-width: 767px) {
+    .workspace-layout .ant-pro-global-header {
+      gap: 8px;
+      padding-inline: 12px;
+      margin-inline: 0;
+    }
+    .workspace-layout .ant-pro-global-header-collapsed-button {
+      margin-inline-end: 0;
+    }
+    .workspace-user,
+    .workspace-context-dot,
+    .workspace-context-parent,
+    .workspace-logout > span:not(.ant-btn-icon),
+    .workspace-switch > span:not(.ant-btn-icon) {
+      display: none;
+    }
+    .workspace-switch,
+    .workspace-logout {
+      width: 36px;
+      padding-inline: 0;
+    }
+    .workspace-context {
+      border: 0;
+      background: transparent;
+      padding: 0 4px;
+    }
+    .workspace-page {
+      padding: 20px 16px;
+    }
+  }
+}