create-bubbles 0.1.26 → 0.1.28

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberOnboarding/CompanyMemberInvitation/InvitationRecordsTable.tsx

@@ -0,0 +1,152 @@
+import { ReloadOutlined, StopOutlined } from '@ant-design/icons'
+import { Button, Popconfirm, Space, Table, Tag } from 'antd'
+import type { TableColumnsType } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { CompanyMemberInvitationRecord, CompanyMemberInvitationStatus } from 'shared/types'
+
+const PAGE_SIZE = 8
+
+export interface InvitationAction {
+  kind: 'revoke' | 'resend'
+  record: CompanyMemberInvitationRecord
+}
+
+interface InvitationRecordsTableProps {
+  records: CompanyMemberInvitationRecord[]
+  loading: boolean
+  page: number
+  total: number
+  actionKey?: string
+  onPageChange: (page: number) => void
+  onAction: (action: InvitationAction) => void
+}
+
+const statusColors: Record<CompanyMemberInvitationStatus, string> = {
+  pending: 'processing',
+  expired: 'warning',
+  accepted: 'success',
+  revoked: 'default',
+}
+
+/** 将邀请状态转换为管理员可识别的本地化文案。 */
+function invitationStatusText(
+  status: CompanyMemberInvitationStatus,
+  tr: (message: string) => string,
+): string {
+  const statusLabels: Record<CompanyMemberInvitationStatus, string> = {
+    pending: tr('待接受'),
+    expired: tr('已过期'),
+    accepted: tr('已接受'),
+    revoked: tr('已撤销'),
+  }
+  return statusLabels[status]
+}
+
+/** 使用当前浏览器区域格式化邀请时间。 */
+function formatInvitationDateTime(value: string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(new Date(value))
+}
+
+/** 展示企业邀请状态，并向父弹窗回传分页、撤销和重发操作。 */
+export default function InvitationRecordsTable({
+  records,
+  loading,
+  page,
+  total,
+  actionKey,
+  onPageChange,
+  onAction,
+}: InvitationRecordsTableProps) {
+  const { tr } = useI18n()
+  const columns: TableColumnsType<CompanyMemberInvitationRecord> = [
+    {
+      title: tr('状态'),
+      dataIndex: 'status',
+      width: 110,
+      render: (status: CompanyMemberInvitationStatus) => (
+        <Tag color={statusColors[status]}>{invitationStatusText(status, tr)}</Tag>
+      ),
+    },
+    {
+      title: tr('创建时间'),
+      dataIndex: 'createdAt',
+      width: 170,
+      render: formatInvitationDateTime,
+    },
+    {
+      title: tr('失效时间'),
+      dataIndex: 'expiresAt',
+      width: 170,
+      render: formatInvitationDateTime,
+    },
+    {
+      title: tr('操作'),
+      key: 'action',
+      width: 180,
+      render: (_, record) => {
+        if (!['pending', 'expired'].includes(record.status)) return '-'
+        return (
+          <Space size={4}>
+            <Popconfirm
+              title={tr('撤销这条邀请？')}
+              description={tr('撤销后该链接将无法再被接受。')}
+              okText={tr('撤销')}
+              cancelText={tr('取消')}
+              onConfirm={() => onAction({ kind: 'revoke', record })}
+            >
+              <Button
+                type="link"
+                danger
+                size="small"
+                icon={<StopOutlined />}
+                loading={actionKey === `revoke:${record.id}`}
+              >
+                {tr('撤销')}
+              </Button>
+            </Popconfirm>
+            <Popconfirm
+              title={tr('重发并生成新链接？')}
+              description={tr('旧链接会立即失效，请只发送新链接。')}
+              okText={tr('重发')}
+              cancelText={tr('取消')}
+              onConfirm={() => onAction({ kind: 'resend', record })}
+            >
+              <Button
+                type="link"
+                size="small"
+                icon={<ReloadOutlined />}
+                loading={actionKey === `resend:${record.id}`}
+              >
+                {tr('重发')}
+              </Button>
+            </Popconfirm>
+          </Space>
+        )
+      },
+    },
+  ]
+
+  return (
+    <Table<CompanyMemberInvitationRecord>
+      rowKey="id"
+      size="middle"
+      loading={loading}
+      columns={columns}
+      dataSource={records}
+      locale={{ emptyText: tr('暂无邀请记录') }}
+      pagination={{
+        current: page,
+        pageSize: PAGE_SIZE,
+        total,
+        showSizeChanger: false,
+        onChange: onPageChange,
+      }}
+    />
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberOnboarding/CompanyMemberInvitation/invitation-link.ts

@@ -0,0 +1,9 @@
+/** 使用一次性 token 组装可直接打开的企业成员邀请完整链接。 */
+export function buildCompanyMemberInvitationLink(
+  token: string,
+  origin = window.location.origin,
+): string {
+  const url = new URL('/member-invitations/accept', origin)
+  url.searchParams.set('token', token)
+  return url.toString()
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberOnboarding/MemberOnboardingActions.tsx

@@ -0,0 +1,79 @@
+import { MailOutlined, PlusOutlined, UserAddOutlined } from '@ant-design/icons'
+import { Button, Space } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  AddProjectMemberRequest,
+  OrganizationScope,
+  RegisterCompanyMemberRequest,
+} from 'shared/types'
+import type { managementApi } from '../../api'
+import {
+  createOrganizationMemberResolver,
+  createOrganizationMemberSearch,
+} from '../EntitySelectors/selector-requests'
+import AddProjectMemberDialog, { type AddProjectMemberDialogRef } from './AddProjectMemberDialog'
+import CompanyMemberInvitationDialog, {
+  type CompanyMemberInvitationDialogRef,
+} from './CompanyMemberInvitation/CompanyMemberInvitationDialog'
+import RegisterCompanyMemberDialog, {
+  type RegisterCompanyMemberDialogRef,
+} from './RegisterCompanyMember/RegisterCompanyMemberDialog'
+
+type ManagementApi = ReturnType<typeof managementApi>
+
+export interface MemberOnboardingActionsProps {
+  scope: OrganizationScope
+  memberContextKey: string
+  api: ManagementApi
+  onRegisterCompanyMember: (data: RegisterCompanyMemberRequest) => Promise<boolean>
+  onAddProjectMember: (data: AddProjectMemberRequest) => Promise<boolean>
+}
+
+/** 按企业或项目作用域展示唯一允许的成员接入入口及对应弹窗。 */
+export default function MemberOnboardingActions({
+  scope,
+  memberContextKey,
+  api,
+  onRegisterCompanyMember,
+  onAddProjectMember,
+}: MemberOnboardingActionsProps) {
+  const registerRef = useRef<RegisterCompanyMemberDialogRef>(null)
+  const invitationRef = useRef<CompanyMemberInvitationDialogRef>(null)
+  const projectRef = useRef<AddProjectMemberDialogRef>(null)
+  const { tr } = useI18n()
+
+  if (scope.type === 'project')
+    return (
+      <>
+        <Button type="primary" icon={<PlusOutlined />} onClick={() => projectRef.current?.show()}>
+          {tr('添加成员')}
+        </Button>
+        <AddProjectMemberDialog
+          ref={projectRef}
+          memberContextKey={memberContextKey}
+          request={createOrganizationMemberSearch(api, 'addProjectMember')}
+          resolve={createOrganizationMemberResolver(api, 'addProjectMember')}
+          onSave={onAddProjectMember}
+        />
+      </>
+    )
+
+  return (
+    <>
+      <Space size="small">
+        <Button
+          type="primary"
+          icon={<UserAddOutlined />}
+          onClick={() => registerRef.current?.show()}
+        >
+          {tr('直接注册')}
+        </Button>
+        <Button icon={<MailOutlined />} onClick={() => invitationRef.current?.show()}>
+          {tr('邀请成员')}
+        </Button>
+      </Space>
+      <RegisterCompanyMemberDialog ref={registerRef} onSave={onRegisterCompanyMember} />
+      <CompanyMemberInvitationDialog ref={invitationRef} api={api} />
+    </>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberOnboarding/RegisterCompanyMember/RegisterCompanyMemberDialog.module.css

@@ -0,0 +1,12 @@
+.dialog :global(.ant-input):-webkit-autofill,
+.dialog :global(.ant-input):-webkit-autofill:hover,
+.dialog :global(.ant-input):-webkit-autofill:focus,
+.dialog :global(.ant-input):-webkit-autofill:active,
+.dialog :global(.ant-input):autofill,
+.dialog :global(.ant-input):autofill:hover,
+.dialog :global(.ant-input):autofill:focus,
+.dialog :global(.ant-input):autofill:active {
+  -webkit-text-fill-color: #302b49;
+  caret-color: #8270db;
+  transition: background-color 900000000s ease-in-out 0s;
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberOnboarding/RegisterCompanyMember/RegisterCompanyMemberDialog.tsx

@@ -0,0 +1,122 @@
+import { ModalForm, ProFormText } from '@ant-design/pro-components'
+import { Alert } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { RegisterCompanyMemberRequest } from 'shared/types'
+import { ACCOUNT_PATTERN, normalizeAccount } from 'shared/utils'
+import styles from './RegisterCompanyMemberDialog.module.css'
+
+interface RegisterCompanyMemberFormValues extends RegisterCompanyMemberRequest {
+  confirmPassword: string
+}
+
+export interface RegisterCompanyMemberDialogRef {
+  show: () => void
+  hide: () => void
+}
+
+/** 由企业管理员直接创建账号，并在保存成功后关闭企业成员注册弹窗。 */
+export default function RegisterCompanyMemberDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<RegisterCompanyMemberDialogRef>
+  onSave: (data: RegisterCompanyMemberRequest) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({ show: () => setOpen(true), hide }))
+
+  return (
+    <ModalForm<RegisterCompanyMemberFormValues>
+      title={tr('直接注册企业成员')}
+      open={open}
+      width={560}
+      modalProps={{
+        destroyOnHidden: true,
+        rootClassName: styles.dialog,
+        onCancel: hide,
+      }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('注册并加入企业') } }}
+      onFinish={
+        /** 规范化账号与姓名，只向服务端提交注册所需字段。 */ async (values) => {
+          const ok = await onSave({
+            name: values.name.trim(),
+            account: normalizeAccount(values.account),
+            password: values.password,
+          })
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('账号创建后会立即加入当前企业')}
+        description={tr('请将初始账号和密码安全地交给成员，并提醒其首次登录后妥善保管。')}
+        style={{ marginBottom: 20 }}
+      />
+      <ProFormText
+        name="name"
+        label={tr('姓名')}
+        fieldProps={{ maxLength: 100, autoComplete: 'name' }}
+        rules={[
+          {
+            required: true,
+            whitespace: true,
+            min: 2,
+            max: 100,
+            message: tr('请输入 2–100 字姓名'),
+          },
+        ]}
+      />
+      <ProFormText
+        name="account"
+        label={tr('账号')}
+        extra={tr('4–32 位字母、数字或下划线；账号已存在时请改用邀请流程。')}
+        fieldProps={{
+          maxLength: 32,
+          autoComplete: 'username',
+          autoCapitalize: 'none',
+          spellCheck: false,
+        }}
+        rules={[
+          { required: true, message: tr('请输入账号') },
+          {
+            pattern: ACCOUNT_PATTERN,
+            transform: (value: string) => value?.trim(),
+            message: tr('请输入 4–32 位字母、数字或下划线'),
+          },
+        ]}
+      />
+      <ProFormText.Password
+        name="password"
+        label={tr('初始密码')}
+        fieldProps={{ maxLength: 16, autoComplete: 'new-password' }}
+        rules={[
+          { required: true, message: tr('请输入密码') },
+          { min: 8, max: 16, message: tr('密码长度为 8–16 位') },
+        ]}
+      />
+      <ProFormText.Password
+        name="confirmPassword"
+        label={tr('确认密码')}
+        dependencies={['password']}
+        fieldProps={{ maxLength: 16, autoComplete: 'new-password' }}
+        rules={[
+          { required: true, message: tr('请再次输入密码') },
+          ({ getFieldValue }) => ({
+            validator: (_, value) =>
+              value === getFieldValue('password')
+                ? Promise.resolve()
+                : Promise.reject(new Error(tr('两次输入的密码不一致'))),
+          }),
+        ]}
+      />
+    </ModalForm>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberRolesDialog.tsx

@@ -0,0 +1,80 @@
+import { ModalForm, ProFormSelect } from '@ant-design/pro-components'
+import { Alert } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { AccountRecord, MemberRecord, RoleRecord } from 'shared/types'
+
+export interface MemberRolesDialogRef {
+  show: (record: MemberRecord | AccountRecord, roles: RoleRecord[]) => void
+  hide: () => void
+}
+/** 展示成员当前角色与可分配角色，提交最新角色选择。 */
+export default function MemberRolesDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<MemberRolesDialogRef>
+  onSave: (record: MemberRecord | AccountRecord, roleIds: string[]) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [record, setRecord] = useState<MemberRecord | AccountRecord>()
+  const [roles, setRoles] = useState<RoleRecord[]>([])
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  const selected = record
+    ? 'platformRoleIds' in record
+      ? record.platformRoleIds
+      : record.roleIds
+    : []
+  useImperativeHandle(ref, () => ({
+    /** 载入目标成员和可选角色，打开角色分配弹窗。 */
+    show: (item, options) => {
+      setRecord(item)
+      setRoles(options)
+      setOpen(true)
+    },
+    hide,
+  }))
+  return (
+    <ModalForm<{ roleIds: string[] }>
+      title={tr('分配角色 · {name}', { name: record?.name ?? '' })}
+      open={open}
+      width={580}
+      initialValues={{ roleIds: selected }}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('保存角色') } }}
+      onFinish={
+        /** 提交成员最新角色集合，保存成功后关闭弹窗。 */ async (values) => {
+          if (!record) return false
+          const ok = await onSave(record, values.roleIds ?? [])
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('多个角色的权限合并生效')}
+        description={tr(
+          '这里只修改当前工作空间的角色。撤销管理员身份受委派资格和最后有效管理员保护。',
+        )}
+        style={{ marginBottom: 20 }}
+      />
+      <ProFormSelect
+        name="roleIds"
+        label={tr('角色')}
+        mode="multiple"
+        placeholder={tr('选择角色；留空表示撤销当前范围全部角色')}
+        options={roles.map((role) => ({
+          value: role.id,
+          label: `${role.name}${role.builtin ? tr('（内置）') : ''}`,
+          disabled: !role.assignable && !selected.includes(role.id),
+        }))}
+        fieldProps={{ optionFilterProp: 'label', allowClear: true }}
+      />
+    </ModalForm>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberTable/MemberTableColumns.tsx

@@ -0,0 +1,234 @@
+import type { I18nState } from '@bubblesjs/i18n-core'
+import type { ProColumns } from '@ant-design/pro-components'
+import { Button, Popconfirm, Space, Tag } from 'antd'
+import type { AccountRecord, MemberRecord, OrganizationMemberCandidate } from 'shared/types'
+
+type ManagedMemberRecord = MemberRecord | AccountRecord
+
+interface MemberTableColumnOptions {
+  platform: boolean
+  currentUserId: string
+  companyScope: boolean
+  canReadOrganization: boolean
+  canAssignOrganization: boolean
+  canAssignPositions: boolean
+  canManageRoles: boolean
+  canManageStatus: boolean
+  canResetPassword: boolean
+  canRemove: boolean
+  candidateByUserId: ReadonlyMap<string, OrganizationMemberCandidate>
+  openingOrganizationId?: string
+  openingPositionId?: string
+  openingRoleId?: string
+  tr: I18nState['tr']
+  onOpenOrganizations: (record: MemberRecord) => void
+  onOpenPositions: (record: MemberRecord) => void
+  onOpenRoles: (record: ManagedMemberRecord) => void
+  onToggleStatus: (record: ManagedMemberRecord) => void
+  onResetPassword: (record: AccountRecord) => void
+  onRemove: (record: MemberRecord) => void
+}
+
+/**
+ * 创建平台账号或工作空间成员表格列。
+ * 操作副作用由页面注入，列定义只负责展示、确认提示和触发对应动作。
+ */
+export function createMemberTableColumns({
+  platform,
+  currentUserId,
+  companyScope,
+  canReadOrganization,
+  canAssignOrganization,
+  canAssignPositions,
+  canManageRoles,
+  canManageStatus,
+  canResetPassword,
+  canRemove,
+  candidateByUserId,
+  openingOrganizationId,
+  openingPositionId,
+  openingRoleId,
+  tr,
+  onOpenOrganizations,
+  onOpenPositions,
+  onOpenRoles,
+  onToggleStatus,
+  onResetPassword,
+  onRemove,
+}: MemberTableColumnOptions): ProColumns<ManagedMemberRecord>[] {
+  return [
+    {
+      title: tr('搜索'),
+      dataIndex: 'query',
+      hideInTable: true,
+      fieldProps: { placeholder: tr('搜索姓名或账号') },
+    },
+    { title: tr('姓名'), dataIndex: 'name', search: false, width: 150 },
+    { title: tr('完整账号'), dataIndex: 'account', search: false, copyable: true, width: 180 },
+    {
+      title: platform ? tr('账号状态') : tr('成员状态'),
+      dataIndex: 'status',
+      width: 100,
+      valueEnum: {
+        active: { text: tr('启用'), status: 'Success' },
+        disabled: { text: tr('停用'), status: 'Default' },
+        ...(platform ? { locked: { text: tr('锁定'), status: 'Warning' } } : {}),
+      },
+    },
+    ...(!platform
+      ? [
+          {
+            title: tr('账号状态'),
+            dataIndex: 'accountStatus',
+            width: 100,
+            search: false,
+            valueEnum: {
+              active: { text: tr('启用'), status: 'Success' },
+              disabled: { text: tr('停用'), status: 'Default' },
+              locked: { text: tr('锁定'), status: 'Warning' },
+            },
+          } as ProColumns<ManagedMemberRecord>,
+        ]
+      : []),
+    {
+      title: platform ? tr('平台角色') : tr('角色'),
+      search: false,
+      render: (_, record) =>
+        'roleNames' in record ? (
+          <Space size={[0, 4]} wrap>
+            {record.roleNames.map((name) => (
+              <Tag key={name}>{name}</Tag>
+            ))}
+          </Space>
+        ) : (
+          tr('{count} 个角色', { count: record.platformRoleIds.length })
+        ),
+    },
+    ...(!platform && canReadOrganization
+      ? [
+          {
+            title: tr('组织归属'),
+            search: false,
+            width: 220,
+            render: (_: unknown, record: ManagedMemberRecord) => (
+              <Space size={[0, 4]} wrap>
+                {candidateByUserId
+                  .get((record as MemberRecord).userId)
+                  ?.identities.flatMap((identity) => identity.organizationUnits)
+                  .map((unit) => (
+                    <Tag key={unit.membershipId} color="purple">
+                      {unit.name}
+                    </Tag>
+                  )) ?? '—'}
+              </Space>
+            ),
+          } as ProColumns<ManagedMemberRecord>,
+          {
+            title: tr('岗位'),
+            search: false,
+            width: 200,
+            render: (_: unknown, record: ManagedMemberRecord) => (
+              <Space size={[0, 4]} wrap>
+                {candidateByUserId
+                  .get((record as MemberRecord).userId)
+                  ?.identities.flatMap((identity) => identity.positions)
+                  .map((position) => (
+                    <Tag key={position.id} color="blue">
+                      {position.name}
+                    </Tag>
+                  )) ?? '—'}
+              </Space>
+            ),
+          } as ProColumns<ManagedMemberRecord>,
+        ]
+      : []),
+    {
+      title: tr('加入时间'),
+      dataIndex: 'createdAt',
+      valueType: 'dateTime',
+      search: false,
+      width: 180,
+    },
+    {
+      title: tr('操作'),
+      valueType: 'option',
+      width: platform ? 320 : 390,
+      render: (_, record) => (
+        <Space size={4} wrap>
+          {!platform && canAssignOrganization && (
+            <Button
+              type="link"
+              size="small"
+              loading={openingOrganizationId === record.id}
+              onClick={() => onOpenOrganizations(record as MemberRecord)}
+            >
+              {tr('编辑组织')}
+            </Button>
+          )}
+          {!platform && canAssignPositions && (
+            <Button
+              type="link"
+              size="small"
+              loading={openingPositionId === record.id}
+              onClick={() => onOpenPositions(record as MemberRecord)}
+            >
+              {tr('编辑岗位')}
+            </Button>
+          )}
+          {canManageRoles && (
+            <Button
+              type="link"
+              size="small"
+              loading={openingRoleId === record.id}
+              onClick={() => onOpenRoles(record)}
+            >
+              {tr('分配角色')}
+            </Button>
+          )}
+          {canManageStatus && (
+            <Popconfirm
+              title={tr('{action}{type}？', {
+                action: record.status === 'active' ? tr('停用') : tr('启用'),
+                type: platform ? tr('账号') : tr('成员'),
+              })}
+              description={
+                platform
+                  ? tr('账号停用后所有工作空间均不可访问；重新启用后须重新登录。')
+                  : tr('停用保留成员关系和角色，阻断此身份提供的访问。')
+              }
+              onConfirm={() => onToggleStatus(record)}
+            >
+              <Button type="link" size="small" danger={record.status === 'active'}>
+                {record.status === 'active' ? tr('停用') : tr('启用')}
+              </Button>
+            </Popconfirm>
+          )}
+          {platform && canResetPassword && record.id !== currentUserId && (
+            <Button
+              type="link"
+              size="small"
+              onClick={() => onResetPassword(record as AccountRecord)}
+            >
+              {tr('重置密码')}
+            </Button>
+          )}
+          {!platform && canRemove && (
+            <Popconfirm
+              title={tr('移除成员？')}
+              description={
+                companyScope
+                  ? tr('同时清理该成员的企业角色及下属项目关系和角色。重新加入不会恢复旧授权。')
+                  : tr('清理该成员在此项目的关系和角色。')
+              }
+              onConfirm={() => onRemove(record as MemberRecord)}
+            >
+              <Button type="link" size="small" danger>
+                {tr('移除')}
+              </Button>
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ]
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberTable/index.ts

@@ -0,0 +1,2 @@
+export { createMemberTableColumns } from './MemberTableColumns'
+export { removeMemberCandidate } from './member-candidate-cache'