create-bubbles 0.1.26 → 0.1.28

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/login/login.css

@@ -1,164 +1,186 @@
+@import './login-form.css';
+
 @layer components {
   .login-page {
-    --login-panel-bg: #102f40;
-    --login-accent: #7dd4ce;
+    --login-accent: #8270db;
+    --login-text: #302b49;
+    --login-muted: #78718e;
+    position: relative;
+    isolation: isolate;
     display: grid;
-    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
     min-height: 100vh;
     min-height: 100svh;
-    background: #fff;
+    padding: 38px clamp(32px, 5vw, 96px);
+    overflow: hidden;
+    color: var(--login-text);
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    background:
+      radial-gradient(ellipse at 16% 18%, #dceefad9 0, transparent 44%),
+      radial-gradient(ellipse at 82% 88%, #f2dfefcc 0, transparent 42%), #f5f3fc;
+  }
+
+  .login-page::before {
+    position: absolute;
+    z-index: -1;
+    top: -180px;
+    left: 30%;
+    width: 620px;
+    height: 620px;
+    border: 1px solid #ffffffb3;
+    border-radius: 50%;
+    content: '';
   }
 
   .login-brand-panel {
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 40px 56px 28px;
-    overflow: hidden;
-    color: #e3f1f4;
-    background-color: var(--login-panel-bg);
-    background-image:
-      linear-gradient(#ffffff03 1px, transparent 1px),
-      linear-gradient(90deg, #ffffff03 1px, transparent 1px);
-    background-size: 32px 32px;
+    min-width: 0;
+    padding: 8px 36px 14px 0;
   }
 
-  .login-brand {
+  .login-story {
+    position: relative;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 12px;
-    font-size: 20px;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-  }
-
-  .login-brand > .anticon {
-    color: var(--login-accent);
-    font-size: 28px;
-  }
-
-  .login-story {
+    justify-content: center;
     width: 100%;
-    max-width: 540px;
-    margin: 40px auto 24px;
+    min-height: 480px;
+    margin: 28px 0 36px;
+    text-align: center;
   }
 
-  .login-eyebrow,
-  .login-form-eyebrow {
-    font-family: Bahnschrift, 'Segoe UI', sans-serif;
+  .login-eyebrow {
+    z-index: 1;
+    margin: 0 0 24px;
+    padding-left: 0.38em;
+    color: #797493;
     font-size: 11px;
-    letter-spacing: 0.16em;
+    letter-spacing: 0.38em;
   }
 
-  .login-eyebrow {
-    margin-bottom: 20px;
-    color: #a8c4cc;
-  }
   .login-story h1 {
+    z-index: 1;
     margin: 0;
-    font-size: clamp(32px, 3.2vw, 48px);
-    font-weight: 500;
-    line-height: 1.5;
-    letter-spacing: 0.06em;
-  }
-  .login-drawing {
-    display: block;
-    width: 100%;
-    max-height: 310px;
-    margin-top: 20px;
-    color: #6d9cae;
+    padding-left: 0.16em;
+    color: #54466d;
+    font-family: 'Songti SC', SimSun, serif;
+    font-size: clamp(72px, 7.1vw, 112px);
+    font-weight: 400;
+    line-height: 1.3;
+    letter-spacing: 0.16em;
+    text-shadow: 0 2px 14px #ffffffc9;
   }
 
-  .login-brand-footer {
-    display: flex;
-    justify-content: space-between;
-    gap: 20px;
-    color: #a8c4cc;
-    font-size: 11px;
-    letter-spacing: 0.08em;
+  .login-story-caption {
+    z-index: 1;
+    margin: 22px 0 0;
+    color: #78718e;
+    font-size: 13px;
+    letter-spacing: 0.14em;
   }
 
-  .login-form-panel {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 88px 40px 112px;
-  }
-  .login-form-content {
-    width: 100%;
-    max-width: 368px;
-  }
-  .login-form-eyebrow {
-    margin: 0 0 14px;
-    color: var(--ant-color-primary);
-  }
-  .login-form-content h2 {
-    margin: 0 0 12px;
-    font-size: 30px;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-  }
-  .login-description {
-    margin: 0 0 36px;
-    color: var(--ant-color-text-secondary);
-  }
-  .login-error {
-    margin-bottom: 24px;
-  }
-  .login-form-content .ant-form-item {
-    margin-bottom: 24px;
-  }
-  .login-form-content .ant-input-prefix {
-    margin-inline-end: 10px;
-    color: var(--ant-color-text-tertiary);
-  }
-  .login-form-content .ant-btn-primary {
-    height: 44px;
-    margin-top: 8px;
-    box-shadow: none;
-  }
-  .login-account-hint {
-    margin: 24px 0 0;
-    color: var(--ant-color-text-secondary);
-    font-size: 12px;
-    text-align: center;
-  }
-  .login-footer {
+  .login-orbit {
     position: absolute;
-    bottom: 28px;
-    inset-inline: 24px;
-    color: var(--ant-color-text-tertiary);
-    font-size: 12px;
-    text-align: center;
+    inset: 50% auto auto 50%;
+    width: min(88%, 440px);
+    aspect-ratio: 1;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
   }
-}
 
-@media (max-width: 1023px) {
-  .login-brand-panel {
-    padding-inline: 32px;
+  .login-pearl {
+    position: absolute;
+    inset: 6%;
+    border: 1px solid #ffffffd9;
+    border-radius: 50%;
+    background:
+      radial-gradient(circle at 30% 23%, #fff 0, #fffffff0 11%, transparent 43%),
+      radial-gradient(circle at 72% 80%, #dceefa 0, transparent 58%),
+      linear-gradient(132deg, #efebfdc2, #f2dfef9c 62%, #c5c5ebc4);
+    box-shadow:
+      inset 8px 8px 30px #ffffffd9,
+      inset -12px -10px 25px #b0a6e336,
+      0 26px 70px #9c94c126;
   }
-}
 
-@media (max-width: 767px) {
-  .login-page {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
+  .login-orbit-ring {
+    position: absolute;
+    inset: 23% -9%;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 2px 5px #9384bd12;
+    transform: rotate(-32deg);
   }
-  .login-brand-panel {
-    padding: 24px;
+
+  .login-orbit-ring::after {
+    position: absolute;
+    inset: -18% 6%;
+    border: 1px solid #aea1d429;
+    border-radius: 50%;
+    content: '';
   }
-  .login-brand {
-    font-size: 18px;
+
+  .login-orbit-satellite {
+    position: absolute;
+    top: 21%;
+    right: 3%;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    background: radial-gradient(circle at 30% 25%, #fff, #d8c6ee 70%, #aca0cd);
+    box-shadow: 0 4px 14px #a797c533;
   }
-  .login-story,
+
   .login-brand-footer {
-    display: none;
+    color: var(--login-muted);
+    font-size: 12px;
+    letter-spacing: 0.04em;
   }
-  .login-form-panel {
-    padding: 52px 24px 92px;
+
+  @media (min-width: 1600px) {
+    .login-page {
+      padding-inline: calc((100vw - 1440px) / 2);
+    }
   }
-  .login-form-content h2 {
-    font-size: 28px;
+
+  @media (max-width: 1023px) {
+    .login-page {
+      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
+      padding-inline: 28px;
+    }
+
+    .login-brand-panel {
+      padding-right: 24px;
+    }
+
+    .login-story {
+      min-height: 360px;
+    }
+
+    .login-story h1 {
+      font-size: 72px;
+    }
+  }
+
+  @media (max-width: 767px) {
+    .login-page {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 1fr;
+      padding: 24px;
+    }
+
+    .login-brand-panel {
+      padding: 0;
+    }
+
+    .login-story,
+    .login-brand-footer {
+      display: none;
+    }
   }
 }

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/member-invitations/accept.css

@@ -0,0 +1,47 @@
+@layer components {
+  .invitation-accept-card {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .invitation-ticket-mark {
+    position: absolute;
+    top: -38px;
+    right: -32px;
+    display: grid;
+    width: 132px;
+    height: 132px;
+    place-items: center;
+    border: 1px solid #ffffffcc;
+    border-radius: 50%;
+    color: #8270db24;
+    font-size: 64px;
+    background: radial-gradient(circle, #ebe6fb8f, transparent 68%);
+    pointer-events: none;
+  }
+
+  .invitation-accept-card .ant-alert {
+    margin-bottom: 22px;
+    border-radius: 12px;
+  }
+
+  .invitation-accept-card > .ant-btn,
+  .invitation-auth-actions {
+    width: 100%;
+  }
+
+  .invitation-auth-actions a {
+    display: block;
+    width: 100%;
+  }
+
+  .invitation-auth-actions .ant-btn {
+    margin: 0;
+  }
+
+  @media (max-width: 767px) {
+    .invitation-accept-card {
+      margin-top: 18px;
+    }
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/member-invitations/accept.tsx

@@ -0,0 +1,143 @@
+import {
+  ArrowRightOutlined,
+  LoginOutlined,
+  SafetyCertificateOutlined,
+  UserAddOutlined,
+} from '@ant-design/icons'
+import { useRequest } from 'alova/client'
+import { Alert, App, Button, Space } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import Brand from '@/components/Brand/Brand'
+import LocaleSwitch from '@/components/LocaleSwitch/LocaleSwitch'
+import { buildAuthPath, safeNextPath } from '@/utils/safe-next'
+import { cookie } from '@/utils/storage/cookie'
+import { acceptCompanyMemberInvitation } from './api'
+import '../login/login.css'
+import './accept.css'
+
+/** 展示一次性邀请凭证，并仅在已登录用户主动确认后接受邀请。 */
+export default function CompanyMemberInvitationAcceptPage() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [searchParams] = useSearchParams()
+  const { send, loading } = useRequest(acceptCompanyMemberInvitation, { immediate: false })
+  const [error, setError] = useState<string | null>(null)
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+  const token = searchParams.get('token')?.trim() ?? ''
+  const authenticated = Boolean(cookie.get('token'))
+  const next = safeNextPath(`${location.pathname}${location.search}`, '/member-invitations/accept')
+
+  /** 将当前 token 作为唯一请求字段提交，登录失效时保留邀请地址返回登录页。 */
+  async function handleAccept() {
+    if (!token || loading) return
+    setError(null)
+    try {
+      await send({ token })
+      void message.success(tr('已加入企业'))
+      void navigate('/workspaces', { replace: true })
+    } catch (cause) {
+      if ((cause as { status?: number }).status === 401) {
+        cookie.remove('token')
+        void navigate(buildAuthPath('/login', { next }), { replace: true })
+        return
+      }
+      setError(cause instanceof Error ? cause.message : tr('接受邀请失败，请稍后重试'))
+    }
+  }
+
+  return (
+    <main className="login-page invitation-accept-page">
+      <title>{tr('接受企业邀请 - 万物')}</title>
+      <section className="login-brand-panel" aria-label={tr('万物')}>
+        <Brand variant="auth" />
+        <div className="login-story">
+          <div className="login-orbit" aria-hidden="true">
+            <span className="login-pearl" />
+            <span className="login-orbit-ring" />
+            <span className="login-orbit-satellite" />
+          </div>
+          <p className="login-eyebrow">INVITATION</p>
+          <h1>{tr('邀请')}</h1>
+          <p className="login-story-caption">{tr('一次性企业成员邀请')}</p>
+        </div>
+        <div className="login-brand-footer">
+          <span>{tr('链接只可成功使用一次，请勿转发给无关人员。')}</span>
+        </div>
+      </section>
+
+      <section className="login-form-panel" aria-labelledby="invitation-title">
+        <div className="login-locale-switch">
+          <LocaleSwitch />
+        </div>
+        <div className="login-form-content invitation-accept-card">
+          <div className="invitation-ticket-mark" aria-hidden="true">
+            <SafetyCertificateOutlined />
+          </div>
+          <p className="login-form-eyebrow">{tr('企业成员邀请')}</p>
+          <h2 id="invitation-title">{tr('接受邀请并加入企业')}</h2>
+          <p className="login-description">
+            {tr('系统只会在你点击确认后，将当前登录账号加入发出邀请的企业。')}
+          </p>
+
+          {!token ? (
+            <>
+              <Alert
+                type="error"
+                showIcon
+                title={tr('邀请链接无效')}
+                description={tr('链接中缺少邀请凭证，请向企业管理员重新获取邀请链接。')}
+              />
+              <Button block size="large" onClick={() => void navigate('/workspaces')}>
+                {tr('返回工作空间')}
+              </Button>
+            </>
+          ) : !authenticated ? (
+            <>
+              <Alert
+                type="info"
+                showIcon
+                title={tr('登录后再确认加入')}
+                description={tr('登录或注册完成后会返回此页面，邀请不会被自动接受。')}
+              />
+              <Space direction="vertical" size="middle" className="invitation-auth-actions">
+                <Link to={buildAuthPath('/login', { next })}>
+                  <Button block type="primary" size="large" icon={<LoginOutlined />}>
+                    {tr('登录并继续')}
+                  </Button>
+                </Link>
+                <Link to={buildAuthPath('/register', { next })}>
+                  <Button block size="large" icon={<UserAddOutlined />}>
+                    {tr('注册账号')}
+                  </Button>
+                </Link>
+              </Space>
+            </>
+          ) : (
+            <>
+              <Alert
+                type="warning"
+                showIcon
+                title={tr('确认使用当前账号加入企业')}
+                description={tr('确认后该邀请立即失效，无法转交给其他账号使用。')}
+              />
+              {error && <Alert type="error" showIcon title={error} role="alert" />}
+              <Button
+                block
+                type="primary"
+                size="large"
+                loading={loading}
+                icon={<ArrowRightOutlined />}
+                iconPlacement="end"
+                onClick={() => void handleAccept()}
+              >
+                {tr('确认加入企业')}
+              </Button>
+            </>
+          )}
+        </div>
+        <footer className="login-footer">{tr('万物 · 工作空间')}</footer>
+      </section>
+    </main>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/member-invitations/api.ts

@@ -0,0 +1,20 @@
+import type {
+  AcceptCompanyMemberInvitationRequest,
+  AcceptCompanyMemberInvitationResult,
+} from 'shared/types'
+import request from '@/utils/request'
+
+const invitationRequest = request({
+  /** 由接受页保留安全 next 并处理登录失效，避免全局 401 跳转丢失邀请 token。 */
+  unAuthorizedResponseFunc: () => {},
+  isShowErrorMessage: false,
+})
+
+/** 使用当前登录账号接受一次性企业成员邀请。 */
+export function acceptCompanyMemberInvitation(input: AcceptCompanyMemberInvitationRequest) {
+  return invitationRequest.Post<AcceptCompanyMemberInvitationResult>(
+    '/company-member-invitations/accept',
+    input,
+    { cacheFor: 0, shareRequest: false },
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/api.ts

@@ -0,0 +1,91 @@
+import type {
+  CreateOrganizationUnitRequest,
+  MoveOrganizationUnitRequest,
+  OrganizationMemberCandidate,
+  OrganizationMemberCandidateQuery,
+  OrganizationScope,
+  OrganizationTreeQuery,
+  OrganizationTreeRecord,
+  OrganizationUnitRecord,
+  PageResult,
+  ReplaceMemberOrganizationUnitsRequest,
+  ReplaceMemberOrganizationUnitsResult,
+  ReplaceOrganizationUnitMembersRequest,
+  ReplaceOrganizationUnitMembersResult,
+  ResolveOrganizationMemberCandidatesRequest,
+  StatusRequest,
+  UpdateOrganizationUnitRequest,
+} from 'shared/types'
+import { accessScopeBasePath, accessScopeKey } from 'shared/utils'
+import {
+  freshRequest,
+  runWorkspaceRequest,
+  workspaceRequest as http,
+} from '@/utils/request/workspace'
+
+/** 为企业或项目组织架构页绑定无缓存且可随工作空间切换取消的接口。 */
+export function organizationApi(scope: OrganizationScope) {
+  const base = accessScopeBasePath(scope)
+  const workspaceKey = accessScopeKey(scope)
+  const organizationBase = `${base}/organization`
+  /** 发送组织架构查询并纳入工作空间代次取消。 */
+  const get = <T>(url: string, params?: object, signal?: AbortSignal) =>
+    runWorkspaceRequest({
+      method: http.Get<T>(url, { ...freshRequest, params }),
+      workspaceKey,
+      signal,
+    })
+  /** 发送组织架构创建或动作请求。 */
+  const post = <T>(url: string, data: object, signal?: AbortSignal) =>
+    runWorkspaceRequest({ method: http.Post<T>(url, data, freshRequest), workspaceKey, signal })
+  /** 发送组织架构局部更新请求。 */
+  const patch = <T>(url: string, data: object) =>
+    runWorkspaceRequest({ method: http.Patch<T>(url, data, freshRequest), workspaceKey })
+  /** 发送组织关系全量替换请求。 */
+  const put = <T>(url: string, data: object) =>
+    runWorkspaceRequest({ method: http.Put<T>(url, data, freshRequest), workspaceKey })
+
+  return {
+    /** 按父节点懒加载一层组织单元。 */
+    tree: (params: OrganizationTreeQuery = {}, signal?: AbortSignal) =>
+      get<OrganizationTreeRecord>(`${organizationBase}/tree`, params, signal),
+    /** 创建顶级或子级组织单元。 */
+    createUnit: (data: CreateOrganizationUnitRequest) =>
+      post<OrganizationUnitRecord>(`${organizationBase}/units`, data),
+    /** 更新组织单元基本信息和排序。 */
+    updateUnit: (id: string, data: UpdateOrganizationUnitRequest) =>
+      patch<OrganizationUnitRecord>(`${organizationBase}/units/${id}`, data),
+    /** 在同一作用域组织树中移动组织单元。 */
+    moveUnit: (id: string, data: MoveOrganizationUnitRequest) =>
+      post<OrganizationUnitRecord>(`${organizationBase}/units/${id}/move`, data),
+    /** 停用或恢复组织单元，保留后代状态和成员关系。 */
+    updateUnitStatus: (id: string, data: StatusRequest) =>
+      patch<OrganizationUnitRecord>(`${organizationBase}/units/${id}/status`, data),
+    /** 按 purpose 分页查询当前作用域成员候选。 */
+    memberCandidates: (params: OrganizationMemberCandidateQuery, signal?: AbortSignal) =>
+      get<PageResult<OrganizationMemberCandidate>>(
+        `${organizationBase}/member-candidates`,
+        params,
+        signal,
+      ),
+    /** 按 userId 批量补查成员候选。 */
+    resolveMemberCandidates: (
+      data: ResolveOrganizationMemberCandidatesRequest,
+      signal?: AbortSignal,
+    ) =>
+      post<OrganizationMemberCandidate[]>(
+        `${organizationBase}/member-candidates/resolve`,
+        data,
+        signal,
+      ),
+    /** 按组织单元完整替换该单元成员及职责。 */
+    replaceUnitMembers: (id: string, data: ReplaceOrganizationUnitMembersRequest) =>
+      put<ReplaceOrganizationUnitMembersResult>(`${organizationBase}/units/${id}/members`, data),
+    /** 按成员完整替换其在当前作用域的组织关系。 */
+    replaceMemberUnits: (userId: string, data: ReplaceMemberOrganizationUnitsRequest) =>
+      put<ReplaceMemberOrganizationUnitsResult>(
+        `${organizationBase}/members/${userId}/units`,
+        data,
+      ),
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/components/MoveOrganizationUnitDialog.tsx

@@ -0,0 +1,82 @@
+import { ModalForm, ProFormDigit, ProFormSelect } from '@ant-design/pro-components'
+import { Alert } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { MoveOrganizationUnitRequest, OrganizationUnitRecord } from 'shared/types'
+
+const ROOT_VALUE = '__organization_root__'
+
+export interface MoveOrganizationUnitDialogRef {
+  show: (record: OrganizationUnitRecord, options: Array<{ value: string; label: string }>) => void
+  hide: () => void
+}
+
+/** 移动组织单元并可同时更新目标同级排序。 */
+export default function MoveOrganizationUnitDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<MoveOrganizationUnitDialogRef>
+  onSave: (record: OrganizationUnitRecord, values: MoveOrganizationUnitRequest) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [record, setRecord] = useState<OrganizationUnitRecord>()
+  const [options, setOptions] = useState<Array<{ value: string; label: string }>>([])
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 带入当前节点和可选父级列表后打开移动弹窗。 */
+    show: (item, parentOptions) => {
+      setRecord(item)
+      setOptions(parentOptions)
+      setOpen(true)
+    },
+    hide,
+  }))
+  return (
+    <ModalForm<{ parentId: string; sort?: number }>
+      title={tr('移动组织单元 · {name}', { name: record?.name ?? '' })}
+      open={open}
+      width={560}
+      initialValues={{ parentId: record?.parentId ?? ROOT_VALUE, sort: record?.sort }}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('确认移动') } }}
+      onFinish={
+        /** 将虚拟根转换为 null，并携带当前乐观锁版本提交。 */ async (values) => {
+          if (!record) return false
+          const ok = await onSave(record, {
+            parentId: values.parentId === ROOT_VALUE ? null : values.parentId,
+            sort: values.sort,
+            expectedVersion: record.version,
+          })
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      <Alert
+        type="warning"
+        showIcon
+        title={tr('移动会改变本节点及全部后代的完整路径')}
+        description={tr('最多允许 10 层；循环和无效目标会由服务端拒绝。')}
+        style={{ marginBottom: 20 }}
+      />
+      <ProFormSelect
+        name="parentId"
+        label={tr('新父级')}
+        options={[{ value: ROOT_VALUE, label: tr('组织根节点') }, ...options]}
+        rules={[{ required: true, message: tr('请选择新父级') }]}
+        fieldProps={{ showSearch: true, optionFilterProp: 'label' }}
+      />
+      <ProFormDigit
+        name="sort"
+        label={tr('新排序')}
+        min={0}
+        max={999999999}
+        fieldProps={{ precision: 0 }}
+      />
+    </ModalForm>
+  )
+}