create-bubbles 0.1.25 → 0.1.27

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

@@ -0,0 +1,268 @@
+import { PlusOutlined } from '@ant-design/icons'
+import type { ActionType, ProColumns } from '@ant-design/pro-components'
+import { App, Button, Empty, Popconfirm, Space } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  CompanyRecord,
+  CreateCompanyRequest,
+  CreateProjectRequest,
+  EntityStatus,
+} from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import FullHeightProTable from '@/components/FullHeightProTable/FullHeightProTable'
+import { useLatestDialogRequest } from '@/hooks/useLatestDialogRequest'
+import { managementApi } from './api'
+import AdministratorDialog, { type AdministratorDialogRef } from './components/AdministratorDialog'
+import CompanyHierarchyDialog, {
+  type CompanyHierarchyDialogRef,
+} from './components/CompanyHierarchyDialog'
+import EntityFormDialog, { type EntityFormDialogRef } from './components/EntityFormDialog'
+import {
+  createGlobalAccountResolver,
+  createGlobalAccountSearch,
+  createOrganizationMemberResolver,
+  createOrganizationMemberSearch,
+} from './components/EntitySelectors'
+import { useAccess, useManagementAction } from './use-access'
+
+/** 按当前作用域管理下级企业或项目，并提供状态及管理员维护入口。 */
+export default function EntitiesPage() {
+  const access = useAccess()
+  const project = access.scope.type === 'company'
+  const memberContextKey = accessScopeKey(access.scope)
+  const api = managementApi(access.scope)
+  const actionRef = useRef<ActionType>(null)
+  const formRef = useRef<EntityFormDialogRef>(null)
+  const administratorRef = useRef<AdministratorDialogRef>(null)
+  const hierarchyRef = useRef<CompanyHierarchyDialogRef>(null)
+  const administratorRequest = useLatestDialogRequest(accessScopeKey(access.scope))
+  const { message } = App.useApp()
+  const execute = useManagementAction()
+  const { tr } = useI18n()
+  const prefix = project ? 'company.projects' : 'platform.companies'
+  const allowed = (action: string) => access.permissionKeys.includes(`${prefix}.${action}`)
+  const canCreate = allowed('create') && access.administrator === (project ? 'company' : 'platform')
+  /** 重新查询当前表格，使管理操作立即反映到列表。 */
+  const refresh = () => {
+    void actionRef.current?.reload()
+  }
+
+  /** 获取实体当前管理员信息后打开管理员维护弹窗。 */
+  async function openAdministrator(record: CompanyRecord) {
+    await administratorRequest.run({
+      targetId: record.id,
+      load: async () =>
+        project
+          ? api.projectAdministrators(record.id)
+          : (await api.companyDetail(record.id)).administrators,
+      onSuccess: (administrators) => administratorRef.current?.show(record, administrators),
+      onError: (error) => {
+        if ((error as Error).name !== 'AbortError')
+          void message.error(error instanceof Error ? error.message : tr('无法加载管理员，请重试'))
+      },
+    })
+  }
+
+  const columns: ProColumns<CompanyRecord>[] = [
+    {
+      title: tr('搜索'),
+      dataIndex: 'query',
+      hideInTable: true,
+      fieldProps: {
+        placeholder: tr('搜索{type}名称或编码', { type: project ? tr('项目') : tr('企业') }),
+      },
+    },
+    {
+      title: project ? tr('项目名称') : tr('企业名称'),
+      dataIndex: 'name',
+      search: false,
+      ellipsis: true,
+      width: 220,
+    },
+    { title: tr('编码'), dataIndex: 'code', search: false, width: 150 },
+    {
+      title: tr('状态'),
+      dataIndex: 'status',
+      valueEnum: {
+        active: { text: tr('启用'), status: 'Success' },
+        disabled: { text: tr('停用'), status: 'Default' },
+      },
+      width: 100,
+    },
+    { title: tr('说明'), dataIndex: 'description', search: false, ellipsis: true },
+    {
+      title: tr('创建时间'),
+      dataIndex: 'createdAt',
+      valueType: 'dateTime',
+      search: false,
+      width: 180,
+    },
+    {
+      title: tr('操作'),
+      valueType: 'option',
+      width: 270,
+      render: (_, record) => (
+        <Space size={4} wrap>
+          {project && record.status === 'active' && access.scope.type === 'company' && (
+            <Link to={`/companies/${access.scope.companyId}/projects/${record.id}`}>
+              {tr('进入项目')}
+            </Link>
+          )}
+          {allowed('administrator') && (
+            <Button
+              type="link"
+              size="small"
+              loading={administratorRequest.loadingId === record.id}
+              onClick={() => void openAdministrator(record)}
+            >
+              {tr('设置管理员')}
+            </Button>
+          )}
+          {allowed('status') && (
+            <Popconfirm
+              title={
+                record.status === 'active'
+                  ? tr('停用{type}？', { type: project ? tr('项目') : tr('企业') })
+                  : tr('启用{type}？', { type: project ? tr('项目') : tr('企业') })
+              }
+              description={
+                record.status === 'active'
+                  ? tr('停用后阻断访问，保留成员和角色。')
+                  : tr('恢复时检查有效管理员，保留子级原有状态。')
+              }
+              onConfirm={() =>
+                execute(
+                  () =>
+                    api.entityStatus(record.id, {
+                      status: record.status === 'active' ? 'disabled' : 'active',
+                      expectedVersion: record.version,
+                    }),
+                  refresh,
+                )
+              }
+            >
+              <Button type="link" size="small" danger={record.status === 'active'}>
+                {record.status === 'active' ? tr('停用') : tr('启用')}
+              </Button>
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <>
+      <FullHeightProTable<CompanyRecord>
+        actionRef={actionRef}
+        rowKey="id"
+        columns={columns}
+        headerTitle={project ? tr('项目管理') : tr('企业管理')}
+        locale={{
+          emptyText: (
+            <Empty
+              className="workspace-table-empty"
+              image={<span className="workspace-empty-orbit" aria-hidden="true" />}
+              description={
+                <>
+                  <strong>{tr('暂无{type}', { type: project ? tr('项目') : tr('企业') })}</strong>
+                  <p>
+                    {tr('试试调整搜索条件')}
+                    {canCreate
+                      ? tr('，或{action}', {
+                          action: project ? tr('创建项目') : tr('开通企业'),
+                        })
+                      : ''}
+                    {tr('。')}
+                  </p>
+                </>
+              }
+            />
+          ),
+        }}
+        pagination={{ defaultPageSize: 20, showSizeChanger: true, pageSizeOptions: [20, 50, 100] }}
+        request={
+          /** 按作用域查询企业或项目列表，并转换为表格分页结果。 */ async (params) => {
+            const query = {
+              page: params.current ?? 1,
+              pageSize: params.pageSize ?? 20,
+              query: params.query as string | undefined,
+              status: params.status as EntityStatus | undefined,
+            }
+            const result = project ? await api.projects(query) : await api.companies(query)
+            return { data: result.items, total: result.total, success: true }
+          }
+        }
+        onRequestError={(error) => {
+          if (error.name !== 'AbortError') void message.error(error.message)
+        }}
+        toolBarRender={() => [
+          ...(!project && allowed('hierarchy')
+            ? [
+                <Button key="hierarchy" onClick={() => hierarchyRef.current?.show()}>
+                  {tr('企业层级')}
+                </Button>,
+              ]
+            : []),
+          ...(canCreate
+            ? [
+                <Button
+                  key="create"
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={() => formRef.current?.show()}
+                >
+                  {project ? tr('创建项目') : tr('开通企业')}
+                </Button>,
+              ]
+            : []),
+        ]}
+      />
+      <EntityFormDialog
+        ref={formRef}
+        project={project}
+        memberContextKey={memberContextKey}
+        globalAccountRequest={createGlobalAccountSearch(api, 'createCompanyAdministrator')}
+        resolveGlobalAccounts={createGlobalAccountResolver(api, 'createCompanyAdministrator')}
+        memberRequest={createOrganizationMemberSearch(api, 'createProjectAdministrator')}
+        resolveMembers={createOrganizationMemberResolver(api, 'createProjectAdministrator')}
+        loadCompanyTree={!project ? api.companyTree : undefined}
+        loadTemplates={
+          project && access.permissionKeys.includes('company.organization.templates.read')
+            ? async () =>
+                (await api.organizationTemplates({ page: 1, pageSize: 100, status: 'active' }))
+                  .items
+            : undefined
+        }
+        onSave={(values) =>
+          execute(
+            () =>
+              project
+                ? api.createProject(values as CreateProjectRequest)
+                : api.createCompany(values as CreateCompanyRequest),
+            refresh,
+          )
+        }
+      />
+      <AdministratorDialog
+        ref={administratorRef}
+        project={project}
+        memberContextKey={memberContextKey}
+        globalAccountRequest={createGlobalAccountSearch(api, 'setCompanyAdministrator')}
+        resolveGlobalAccounts={createGlobalAccountResolver(api, 'setCompanyAdministrator')}
+        memberRequest={createOrganizationMemberSearch(api, 'setProjectAdministrator')}
+        resolveMembers={createOrganizationMemberResolver(api, 'setProjectAdministrator')}
+        onSave={(record, input) => execute(() => api.setAdministrator(record.id, input), refresh)}
+      />
+      {!project && (
+        <CompanyHierarchyDialog
+          ref={hierarchyRef}
+          loadTree={api.companyTree}
+          onSave={(record, values) =>
+            execute(() => api.updateCompanyHierarchy(record.id, values), refresh)
+          }
+        />
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,67 @@
+import { Card, Descriptions, Empty, Space, Tag } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { navigationTree } from '@/router/page-registry'
+import { useAccess } from './use-access'
+
+/** 展示当前工作空间身份、授权信息及可访问的管理入口。 */
+export default function WorkspaceHome() {
+  const access = useAccess()
+  const { tr } = useI18n()
+  const typeName =
+    access.scope.type === 'platform'
+      ? tr('平台')
+      : access.scope.type === 'company'
+        ? tr('企业')
+        : tr('项目')
+  const entries = navigationTree(access.menus, access.scope)
+  return (
+    <div className="workspace-page">
+      <div className="workspace-stateless-home">
+        <div className="workspace-page-title">
+          <h1>{tr('{type}工作台', { type: typeName })}</h1>
+          <p>{tr('查看当前身份，选择你需要的管理功能。')}</p>
+        </div>
+        <Descriptions
+          bordered
+          column={{ xs: 1, sm: 2 }}
+          items={[
+            { key: 'name', label: tr('当前用户'), children: access.user.name },
+            { key: 'account', label: tr('完整账号'), children: access.user.account },
+            { key: 'scope', label: tr('工作空间'), children: typeName },
+            {
+              key: 'role',
+              label: tr('当前身份'),
+              children: (
+                <Tag color={access.administrator ? 'cyan' : 'default'}>
+                  {access.administrator === 'company'
+                    ? tr('企业管理员')
+                    : access.administrator === 'platform'
+                      ? tr('平台管理员')
+                      : access.administrator === 'project'
+                        ? tr('项目管理员')
+                        : tr('普通成员')}
+                </Tag>
+              ),
+            },
+          ]}
+        />
+        <Card title={tr('可用功能')}>
+          {entries.length ? (
+            <Space size={[24, 18]} wrap>
+              {entries
+                .flatMap((entry) => entry.routes ?? [entry])
+                .filter((entry) => entry.path)
+                .map((entry) => (
+                  <Link key={entry.key} to={entry.path!}>
+                    {entry.icon} {entry.name}
+                  </Link>
+                ))}
+            </Space>
+          ) : (
+            <Empty description={tr('当前没有可用的菜单，请联系管理员授权。')} />
+          )}
+        </Card>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,310 @@
+import type { ActionType } from '@ant-design/pro-components'
+import { App } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  AccountRecord,
+  EntityStatus,
+  MemberRecord,
+  OrganizationMemberCandidate,
+  OrganizationScope,
+} from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import FullHeightProTable from '@/components/FullHeightProTable/FullHeightProTable'
+import ResetAccountPasswordDialog, {
+  type ResetAccountPasswordDialogRef,
+} from '@/components/PasswordActions/ResetAccountPasswordDialog'
+import { useLatestDialogRequest } from '@/hooks/useLatestDialogRequest'
+import { managementApi } from './api'
+import MemberOnboardingActions from './components/MemberOnboarding/MemberOnboardingActions'
+import MemberRolesDialog, { type MemberRolesDialogRef } from './components/MemberRolesDialog'
+import {
+  MemberOrganizationsDialog,
+  type MemberOrganizationsDialogRef,
+  MemberPositionsDialog,
+  type MemberPositionsDialogRef,
+  loadAllOrganizationUnits,
+  loadAllPositions,
+} from './components/MemberAffiliations'
+import { createMemberTableColumns, removeMemberCandidate } from './components/MemberTable'
+import { useAccess, useManagementAction } from './use-access'
+import { organizationApi } from '@/pages/organization/api'
+import { positionsApi } from '@/pages/positions/api'
+
+/** 按作用域管理账号或成员，处理状态、移除及角色分配。 */
+export default function MembersPage() {
+  const access = useAccess()
+  const platform = access.scope.type === 'platform'
+  const api = managementApi(access.scope)
+  const execute = useManagementAction()
+  const { message } = App.useApp()
+  const actionRef = useRef<ActionType>(null)
+  const rolesRef = useRef<MemberRolesDialogRef>(null)
+  const organizationsRef = useRef<MemberOrganizationsDialogRef>(null)
+  const positionsRef = useRef<MemberPositionsDialogRef>(null)
+  const resetPasswordRef = useRef<ResetAccountPasswordDialogRef>(null)
+  const [candidateByUserId, setCandidateByUserId] = useState(
+    () => new Map<string, OrganizationMemberCandidate>(),
+  )
+  const { tr } = useI18n()
+  const prefix = `${access.scope.type}.${platform ? 'accounts' : 'members'}`
+  const allowed = (action: string) => access.permissionKeys.includes(`${prefix}.${action}`)
+  const organizationPrefix = `${access.scope.type}.organization`
+  const positionsPrefix = `${access.scope.type}.positions`
+  const canReadOrganization =
+    !platform && access.permissionKeys.includes(`${organizationPrefix}.read`)
+  const canAssignOrganization =
+    !platform && access.permissionKeys.includes(`${organizationPrefix}.assign`)
+  const canAssignPositions =
+    !platform && access.permissionKeys.includes(`${positionsPrefix}.assign`)
+  const scope = platform ? undefined : (access.scope as OrganizationScope)
+  const scopeKey = accessScopeKey(access.scope)
+  const rolesRequest = useLatestDialogRequest(scopeKey)
+  const organizationsRequest = useLatestDialogRequest(scopeKey)
+  const positionsRequest = useLatestDialogRequest(scopeKey)
+  const organization = useMemo(() => (scope ? organizationApi(scope) : undefined), [scopeKey])
+  const positions = useMemo(() => (scope ? positionsApi(scope) : undefined), [scopeKey])
+  /** 重新查询当前表格，使管理操作立即反映到列表。 */
+  const refresh = () => {
+    void actionRef.current?.reload()
+  }
+
+  /** 加载可分配角色，并将当前成员或账号带入角色分配弹窗。 */
+  async function openRoles(record: AccountRecord | MemberRecord) {
+    await rolesRequest.run({
+      targetId: record.id,
+      load: async () => {
+        const first = await api.roles({ page: 1, pageSize: 100 })
+        const rest = await Promise.all(
+          Array.from({ length: Math.ceil(first.total / 100) - 1 }, (_, index) =>
+            api.roles({ page: index + 2, pageSize: 100 }),
+          ),
+        )
+        return [...first.items, ...rest.flatMap((page) => page.items)]
+      },
+      onSuccess: (roles) => rolesRef.current?.show(record, roles),
+      onError: (error) => {
+        if ((error as Error).name !== 'AbortError')
+          void message.error(error instanceof Error ? error.message : tr('无法加载角色'))
+      },
+    })
+  }
+
+  /** 通过组织浏览权限取得成员当前组织和岗位快照。 */
+  async function resolveOrganizationCandidate(record: MemberRecord) {
+    const cached = candidateByUserId.get(record.userId)
+    if (cached) return cached
+    if (!organization) throw new Error(tr('当前作用域不支持组织关系'))
+    const [candidate] = await organization.resolveMemberCandidates({
+      userIds: [record.userId],
+      purpose: 'browseOrganization',
+    })
+    if (!candidate) throw new Error(tr('成员当前不可见'))
+    return candidate
+  }
+
+  /** 通过岗位分配权限取得成员当前岗位快照，不依赖组织读取权限。 */
+  async function resolvePositionCandidate(record: MemberRecord) {
+    if (!positions) throw new Error(tr('当前作用域不支持岗位关系'))
+    const [candidate] = await positions.resolveMemberCandidates({
+      userIds: [record.userId],
+      purpose: 'assignPositionMembers',
+    })
+    if (!candidate) throw new Error(tr('成员当前不可见'))
+    return candidate
+  }
+
+  /** 加载组织候选和完整组织树后打开成员组织归属编辑器。 */
+  async function openOrganizations(record: MemberRecord) {
+    await organizationsRequest.run({
+      targetId: record.id,
+      load: () =>
+        Promise.all([
+          resolveOrganizationCandidate(record),
+          organization ? loadAllOrganizationUnits(organization) : [],
+        ]),
+      onSuccess: ([candidate, units]) => {
+        setCandidateByUserId((current) => new Map(current).set(candidate.userId, candidate))
+        organizationsRef.current?.show(record, candidate, units)
+      },
+      onError: (error) => {
+        if ((error as Error).name !== 'AbortError')
+          void message.error(error instanceof Error ? error.message : tr('无法加载组织归属'))
+      },
+    })
+  }
+
+  /** 加载成员候选和完整岗位列表后打开岗位任职编辑器。 */
+  async function openPositions(record: MemberRecord) {
+    await positionsRequest.run({
+      targetId: record.id,
+      load: () =>
+        Promise.all([
+          resolvePositionCandidate(record),
+          positions ? loadAllPositions(positions) : [],
+        ]),
+      onSuccess: ([candidate, availablePositions]) => {
+        positionsRef.current?.show(record, candidate, availablePositions)
+      },
+      onError: (error) => {
+        if ((error as Error).name !== 'AbortError')
+          void message.error(error instanceof Error ? error.message : tr('无法加载岗位任职'))
+      },
+    })
+  }
+
+  const columns = createMemberTableColumns({
+    platform,
+    currentUserId: access.user.id,
+    companyScope: access.scope.type === 'company',
+    canReadOrganization,
+    canAssignOrganization,
+    canAssignPositions,
+    canManageRoles: allowed('roles'),
+    canManageStatus: allowed('status'),
+    canResetPassword: platform && access.administrator === 'platform' && allowed('reset-password'),
+    canRemove: allowed('remove'),
+    candidateByUserId,
+    openingOrganizationId: organizationsRequest.loadingId,
+    openingPositionId: positionsRequest.loadingId,
+    openingRoleId: rolesRequest.loadingId,
+    tr,
+    onOpenOrganizations: (record) => void openOrganizations(record),
+    onOpenPositions: (record) => void openPositions(record),
+    onOpenRoles: (record) => void openRoles(record),
+    onToggleStatus: (record) => {
+      void execute(
+        () =>
+          platform
+            ? api.accountStatus(record.id, {
+                status: record.status === 'active' ? 'disabled' : 'active',
+              })
+            : api.memberStatus(record.id, {
+                status: record.status === 'active' ? 'disabled' : 'active',
+                expectedVersion: (record as MemberRecord).version,
+              }),
+        refresh,
+      )
+    },
+    onResetPassword: (record) => resetPasswordRef.current?.show(record),
+    onRemove: (record) => {
+      void execute(() => api.removeMember(record.id, record.version), refresh)
+    },
+  })
+  return (
+    <>
+      <FullHeightProTable<MemberRecord | AccountRecord>
+        rowKey="id"
+        actionRef={actionRef}
+        columns={columns}
+        headerTitle={
+          platform
+            ? tr('全局账号')
+            : access.scope.type === 'company'
+              ? tr('企业成员')
+              : tr('项目成员')
+        }
+        pagination={{ defaultPageSize: 20, showSizeChanger: true, pageSizeOptions: [20, 50, 100] }}
+        request={
+          /** 按作用域查询全局账号或空间成员，并转换为表格分页结果。 */ async (params) => {
+            const query = {
+              page: params.current ?? 1,
+              pageSize: params.pageSize ?? 20,
+              query: params.query as string | undefined,
+              status: params.status as EntityStatus | undefined,
+            }
+            const result = platform ? await api.accounts(query) : await api.members(query)
+            if (!platform && canReadOrganization && result.items.length && organization) {
+              try {
+                const candidates = await organization.resolveMemberCandidates({
+                  userIds: result.items.map((item) => (item as MemberRecord).userId),
+                  purpose: 'browseOrganization',
+                })
+                setCandidateByUserId(
+                  new Map(candidates.map((candidate) => [candidate.userId, candidate])),
+                )
+              } catch (error) {
+                if ((error as Error).name !== 'AbortError') throw error
+              }
+            } else if (!platform) {
+              setCandidateByUserId(new Map())
+            }
+            return { data: result.items, total: result.total, success: true }
+          }
+        }
+        onRequestError={(error) => {
+          if (error.name !== 'AbortError') void message.error(error.message)
+        }}
+        toolBarRender={() =>
+          !platform && scope && allowed('add')
+            ? [
+                <MemberOnboardingActions
+                  key={scopeKey}
+                  scope={scope}
+                  memberContextKey={scopeKey}
+                  api={api}
+                  onRegisterCompanyMember={(data) =>
+                    execute(() => api.registerCompanyMember(data), refresh)
+                  }
+                  onAddProjectMember={(data) => execute(() => api.addProjectMember(data), refresh)}
+                />,
+              ]
+            : []
+        }
+      />
+      <MemberRolesDialog
+        ref={rolesRef}
+        onSave={(record, roleIds) =>
+          execute(
+            () =>
+              platform
+                ? api.accountRoles(record.id, { roleIds })
+                : api.memberRoles(record.id, {
+                    roleIds,
+                    expectedVersion: (record as MemberRecord).version,
+                  }),
+            refresh,
+          )
+        }
+      />
+      {platform && (
+        <ResetAccountPasswordDialog
+          key={scopeKey}
+          ref={resetPasswordRef}
+          onSave={async (record, values) => {
+            await api.resetAccountPassword(record.id, values)
+          }}
+        />
+      )}
+      {scope && organization && positions && (
+        <>
+          <MemberOrganizationsDialog
+            ref={organizationsRef}
+            scope={scope}
+            onSave={(record, relations) =>
+              execute(
+                () => organization.replaceMemberUnits(record.userId, { relations }),
+                () => {
+                  setCandidateByUserId((current) => removeMemberCandidate(current, record.userId))
+                  refresh()
+                },
+              )
+            }
+          />
+          <MemberPositionsDialog
+            ref={positionsRef}
+            scope={scope}
+            onSave={(record, positionIds) =>
+              execute(
+                () => positions.replaceMemberPositions(record.userId, { positionIds }),
+                () => {
+                  setCandidateByUserId((current) => removeMemberCandidate(current, record.userId))
+                  refresh()
+                },
+              )
+            }
+          />
+        </>
+      )}
+    </>
+  )
+}