create-bubbles 0.1.25 → 0.1.27

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

@@ -0,0 +1,226 @@
+import type {
+  AccessScope,
+  AccountRecord,
+  AccountStatusRequest,
+  AddProjectMemberRequest,
+  AdministratorSummary,
+  AssignMemberRolesRequest,
+  AssignPlatformRolesRequest,
+  AuditQuery,
+  AuditRecord,
+  CompanyMemberInvitationIssueResult,
+  CompanyMemberInvitationQuery,
+  CompanyMemberInvitationRecord,
+  CompanyDetail,
+  CompanyHierarchyDetail,
+  CompanyHierarchyNode,
+  CompanyHierarchyRecord,
+  CompanyRecord,
+  CreateCompanyRequest,
+  CreateProjectRequest,
+  CreateRoleRequest,
+  DeleteResult,
+  EntityStatus,
+  GlobalAccountCandidate,
+  GlobalAccountCandidateQuery,
+  MemberRecord,
+  OrganizationMemberCandidate,
+  OrganizationMemberCandidateQuery,
+  OrganizationTemplateListQuery,
+  OrganizationTemplateSummary,
+  PageQuery,
+  PageResult,
+  PermissionTreeResult,
+  ProjectDetail,
+  ProjectRecord,
+  RegisterCompanyMemberRequest,
+  ResetAccountPasswordRequest,
+  ResetAccountPasswordResult,
+  ResendCompanyMemberInvitationRequest,
+  RevokeCompanyMemberInvitationRequest,
+  RoleRecord,
+  ResolveGlobalAccountCandidatesRequest,
+  ResolveOrganizationMemberCandidatesRequest,
+  SetAdministratorRequest,
+  SetAdministratorResult,
+  SetRolePermissionsRequest,
+  StatusRequest,
+  UpdateProfileRequest,
+  UpdateRoleRequest,
+  UpdateCompanyHierarchyRequest,
+} from 'shared/types'
+import { accessScopeBasePath, accessScopeKey } from 'shared/utils'
+import {
+  freshRequest,
+  runWorkspaceRequest,
+  workspaceRequest as http,
+} from '@/utils/request/workspace'
+
+/** 为指定工作空间绑定管理接口，统一使用禁用缓存且可取消的请求。 */
+export function managementApi(scope: AccessScope) {
+  const base = accessScopeBasePath(scope)
+  const workspaceKey = accessScopeKey(scope)
+  /** 发送当前工作空间的无缓存查询，并将请求纳入会话取消控制。 */
+  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 })
+  /** 将预期版本加入删除参数，避免删除并发变更后的数据。 */
+  const remove = (url: string, expectedVersion: number) =>
+    runWorkspaceRequest({
+      method: http.Delete<DeleteResult>(url, undefined, {
+        ...freshRequest,
+        params: { expectedVersion },
+      }),
+      workspaceKey,
+    })
+  const entities = scope.type === 'platform' ? '/platform/companies' : `${base}/projects`
+
+  return {
+    /** 分页查询平台下的企业，支持按状态筛选。 */
+    companies: (params: PageQuery & { status?: EntityStatus }) =>
+      get<PageResult<CompanyRecord>>(entities, params),
+    /** 分页查询当前企业下的项目，支持按状态筛选。 */
+    projects: (params: PageQuery & { status?: EntityStatus }) =>
+      get<PageResult<ProjectRecord>>(entities, params),
+    /** 创建企业并返回包含管理员信息的企业详情。 */
+    createCompany: (data: CreateCompanyRequest) => post<CompanyHierarchyDetail>(entities, data),
+    /** 在当前企业下创建项目并返回项目详情。 */
+    createProject: (data: CreateProjectRequest) => post<ProjectDetail>(entities, data),
+    /** 读取企业详情及管理员信息。 */
+    companyDetail: (id: string) => get<CompanyDetail>(`${entities}/${id}`),
+    /** 读取指定项目的管理员列表。 */
+    projectAdministrators: (id: string) =>
+      get<AdministratorSummary[]>(`${entities}/${id}/administrators`),
+    /** 携带版本条件更新企业或项目的启用状态。 */
+    entityStatus: (id: string, data: StatusRequest) =>
+      patch<CompanyRecord | ProjectRecord>(`${entities}/${id}/status`, data),
+    /** 为指定企业或项目补充或替换管理员。 */
+    setAdministrator: (id: string, data: SetAdministratorRequest) =>
+      post<SetAdministratorResult>(`${entities}/${id}/administrator`, data),
+    /** 查询平台全局账号候选；purpose 由服务端映射到对应企业管理权限。 */
+    globalAccountCandidates: (params: GlobalAccountCandidateQuery, signal?: AbortSignal) =>
+      get<PageResult<GlobalAccountCandidate>>('/platform/account-candidates', params, signal),
+    /** 按 userId 批量补查全局账号候选并保持请求顺序。 */
+    resolveGlobalAccountCandidates: (
+      data: ResolveGlobalAccountCandidatesRequest,
+      signal?: AbortSignal,
+    ) => post<GlobalAccountCandidate[]>('/platform/account-candidates/resolve', data, signal),
+    /** 查询当前企业或项目可见的组织成员候选。 */
+    organizationMemberCandidates: (
+      params: OrganizationMemberCandidateQuery,
+      signal?: AbortSignal,
+    ) =>
+      get<PageResult<OrganizationMemberCandidate>>(
+        `${base}/organization/member-candidates`,
+        params,
+        signal,
+      ),
+    /** 按 userId 批量补查当前作用域的组织成员候选。 */
+    resolveOrganizationMemberCandidates: (
+      data: ResolveOrganizationMemberCandidatesRequest,
+      signal?: AbortSignal,
+    ) =>
+      post<OrganizationMemberCandidate[]>(
+        `${base}/organization/member-candidates/resolve`,
+        data,
+        signal,
+      ),
+    /** 查询企业可用的项目组织模板摘要。 */
+    organizationTemplates: (params: OrganizationTemplateListQuery = {}) =>
+      get<PageResult<OrganizationTemplateSummary>>(`${base}/organization/templates`, params),
+    /** 查询平台可见企业层级树。 */
+    companyTree: () => get<CompanyHierarchyNode[]>('/platform/companies/tree'),
+    /** 更新企业父级、实体类型和同级排序。 */
+    updateCompanyHierarchy: (id: string, data: UpdateCompanyHierarchyRequest) =>
+      patch<CompanyHierarchyRecord>(`/platform/companies/${id}/hierarchy`, data),
+    /** 读取当前工作空间的企业或项目资料。 */
+    profile: () => get<CompanyDetail | ProjectDetail>(base),
+    /** 携带版本条件更新当前企业或项目资料。 */
+    updateProfile: (data: UpdateProfileRequest) => patch<CompanyRecord | ProjectRecord>(base, data),
+    /** 分页查询当前工作空间成员，支持按成员状态筛选。 */
+    members: (params: PageQuery & { status?: EntityStatus }) =>
+      get<PageResult<MemberRecord>>(`${base}/members`, params),
+    /** 直接注册新账号并加入当前企业。 */
+    registerCompanyMember: (data: RegisterCompanyMemberRequest) =>
+      post<MemberRecord>(`${base}/members`, data),
+    /** 分页读取当前企业的一次性成员邀请，不返回原始 token。 */
+    companyMemberInvitations: (params: CompanyMemberInvitationQuery) =>
+      get<PageResult<CompanyMemberInvitationRecord>>(`${base}/member-invitations`, params),
+    /** 创建不绑定账号的一次性企业邀请，原始 token 仅在本次响应返回。 */
+    createCompanyMemberInvitation: () =>
+      post<CompanyMemberInvitationIssueResult>(`${base}/member-invitations`, {}),
+    /** 携带当前版本撤销尚未接受的企业成员邀请。 */
+    revokeCompanyMemberInvitation: (
+      invitationId: string,
+      data: RevokeCompanyMemberInvitationRequest,
+    ) =>
+      post<CompanyMemberInvitationRecord>(
+        `${base}/member-invitations/${invitationId}/revoke`,
+        data,
+      ),
+    /** 使旧凭证失效并签发新的企业邀请 token，原始 token 仅在本次响应返回。 */
+    resendCompanyMemberInvitation: (
+      invitationId: string,
+      data: ResendCompanyMemberInvitationRequest,
+    ) =>
+      post<CompanyMemberInvitationIssueResult>(
+        `${base}/member-invitations/${invitationId}/resend`,
+        data,
+      ),
+    /** 按稳定 userId 将所属企业的有效成员加入当前项目。 */
+    addProjectMember: (data: AddProjectMemberRequest) =>
+      post<MemberRecord>(`${base}/members`, data),
+    /** 携带版本条件更新指定成员的启用状态。 */
+    memberStatus: (id: string, data: StatusRequest) =>
+      patch<MemberRecord>(`${base}/members/${id}/status`, data),
+    /** 按预期版本移除工作空间成员。 */
+    removeMember: (id: string, expectedVersion: number) =>
+      remove(`${base}/members/${id}`, expectedVersion),
+    /** 替换工作空间成员的角色分配。 */
+    memberRoles: (id: string, data: AssignMemberRolesRequest) =>
+      put<MemberRecord>(`${base}/members/${id}/roles`, data),
+    /** 分页查询平台全局账号，支持按账号状态筛选。 */
+    accounts: (params: PageQuery & { status?: string }) =>
+      get<PageResult<AccountRecord>>('/platform/accounts', params),
+    /** 携带版本条件更新全局账号状态。 */
+    accountStatus: (id: string, data: AccountStatusRequest) =>
+      patch<AccountRecord>(`/platform/accounts/${id}/status`, data),
+    /** 替换全局账号在平台范围内的角色分配。 */
+    accountRoles: (id: string, data: AssignPlatformRolesRequest) =>
+      put<AccountRecord>(`/platform/accounts/${id}/roles`, data),
+    /** 为其他全局账号设定新密码；请求不缓存，目标会话撤销由服务端确认。 */
+    resetAccountPassword: (id: string, data: ResetAccountPasswordRequest) =>
+      post<ResetAccountPasswordResult>(`/platform/accounts/${id}/reset-password`, data),
+    /** 分页读取当前工作空间的角色列表。 */
+    roles: (params: PageQuery = {}) => get<PageResult<RoleRecord>>(`${base}/roles`, params),
+    /** 读取指定角色的详情及权限配置。 */
+    role: (id: string) => get<RoleRecord>(`${base}/roles/${id}`),
+    /** 在当前工作空间创建自定义角色。 */
+    createRole: (data: CreateRoleRequest) => post<RoleRecord>(`${base}/roles`, data),
+    /** 携带版本条件更新指定角色资料。 */
+    updateRole: (id: string, data: UpdateRoleRequest) =>
+      patch<RoleRecord>(`${base}/roles/${id}`, data),
+    /** 携带版本条件替换角色的权限集合。 */
+    rolePermissions: (id: string, data: SetRolePermissionsRequest) =>
+      put<RoleRecord>(`${base}/roles/${id}/permissions`, data),
+    /** 按预期版本删除自定义角色。 */
+    deleteRole: (id: string, expectedVersion: number) =>
+      remove(`${base}/roles/${id}`, expectedVersion),
+    /** 获取当前作用域的权限目录及当前用户可授予的权限。 */
+    permissions: () => get<PermissionTreeResult>(`${base}/permissions`),
+    /** 按查询条件分页读取当前工作空间的审计日志。 */
+    audits: (params: AuditQuery) => get<PageResult<AuditRecord>>(`${base}/audit-logs`, params),
+  }
+}

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

@@ -0,0 +1,169 @@
+import type { ProColumns } from '@ant-design/pro-components'
+import type { I18nState } from '@bubblesjs/i18n-core'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { App, Typography } from 'antd'
+import type { AuditRecord } from 'shared/types'
+import FullHeightProTable from '@/components/FullHeightProTable/FullHeightProTable'
+import { managementApi } from './api'
+import { useAccess } from './use-access'
+
+/** 使用当前语言构建审计操作名称。 */
+function createActionNames(tr: I18nState['tr']): Record<string, string> {
+  return {
+    'company.create': tr('开通企业'),
+    'company.status': tr('变更企业状态'),
+    'company.administrator.set': tr('设置企业管理员'),
+    'company.update': tr('修改企业资料'),
+    'project.update': tr('修改项目资料'),
+    'project.create': tr('创建项目'),
+    'project.status': tr('变更项目状态'),
+    'project.administrator.set': tr('设置项目管理员'),
+    'account.status': tr('变更账号状态'),
+    'account.roles': tr('分配平台角色'),
+    'member.add': tr('添加成员'),
+    'member.status': tr('变更成员状态'),
+    'member.remove': tr('移除成员'),
+    'member.roles': tr('分配成员角色'),
+    'role.create': tr('创建角色'),
+    'role.update': tr('修改角色'),
+    'role.permissions': tr('修改角色权限'),
+    'role.delete': tr('删除角色'),
+    'menu.create': tr('新增菜单'),
+    'menu.update': tr('修改菜单'),
+    'menu.delete': tr('删除菜单'),
+    'permission.cleanup': tr('清理废弃权限'),
+  }
+}
+
+/** 使用当前语言构建审计摘要字段名称。 */
+function createSummaryNames(tr: I18nState['tr']): Record<string, string> {
+  return {
+    changedFields: tr('修改字段'),
+    fromStatus: tr('原状态'),
+    toStatus: tr('新状态'),
+    roleIds: tr('角色'),
+    permissionKeys: tr('权限'),
+    targetUserId: tr('目标用户'),
+    companyId: tr('企业'),
+    replacedUserId: tr('被替换用户'),
+    name: tr('名称'),
+    code: tr('编码'),
+    description: tr('说明'),
+  }
+}
+
+/** 按当前工作空间查询操作日志，展示操作者、目标对象及变更摘要。 */
+export default function AuditPage() {
+  const access = useAccess()
+  const api = managementApi(access.scope)
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+  const actionNames = createActionNames(tr)
+  const summaryNames = createSummaryNames(tr)
+  const columns: ProColumns<AuditRecord>[] = [
+    {
+      title: tr('搜索'),
+      dataIndex: 'query',
+      hideInTable: true,
+      fieldProps: { placeholder: tr('操作、对象类型或对象编号') },
+    },
+    {
+      title: tr('操作'),
+      dataIndex: 'action',
+      width: 160,
+      valueType: 'select',
+      valueEnum: actionNames,
+    },
+    {
+      title: tr('时间范围'),
+      dataIndex: 'timeRange',
+      valueType: 'dateTimeRange',
+      hideInTable: true,
+      search: {
+        /** 将审计查询时间范围转换为接口要求的 ISO 起止时间。 */
+        transform: (value: string[]) => ({
+          from: value[0] ? new Date(value[0]).toISOString() : undefined,
+          to: value[1] ? new Date(value[1]).toISOString() : undefined,
+        }),
+      },
+    },
+    {
+      title: tr('操作时间'),
+      dataIndex: 'createdAt',
+      valueType: 'dateTime',
+      search: false,
+      width: 180,
+    },
+    {
+      title: tr('操作者'),
+      search: false,
+      width: 180,
+      render: (_, record) => (
+        <span>
+          {record.actor.name}
+          <br />
+          <Typography.Text type="secondary">{record.actor.account}</Typography.Text>
+        </span>
+      ),
+    },
+    {
+      title: tr('对象'),
+      search: false,
+      width: 220,
+      render: (_, record) => (
+        <span>
+          {record.objectType}
+          <br />
+          <Typography.Text copyable>{record.objectId}</Typography.Text>
+        </span>
+      ),
+    },
+    {
+      title: tr('变更摘要'),
+      search: false,
+      width: 320,
+      render: (_, record) => (
+        <div className="audit-summary">
+          {Object.entries(record.summary).map(([key, value]) => (
+            <div key={key}>
+              <strong>{summaryNames[key] ?? key}: </strong>
+              {Array.isArray(value) ? value.join(', ') : String(value ?? '—')}
+            </div>
+          ))}
+        </div>
+      ),
+    },
+    {
+      title: tr('请求编号'),
+      dataIndex: 'requestId',
+      search: false,
+      copyable: true,
+      ellipsis: true,
+      width: 200,
+    },
+  ]
+  return (
+    <FullHeightProTable<AuditRecord>
+      rowKey="id"
+      columns={columns}
+      headerTitle={tr('操作日志')}
+      pagination={{ defaultPageSize: 20, showSizeChanger: true, pageSizeOptions: [20, 50, 100] }}
+      request={
+        /** 转换表格查询条件为审计分页参数，并适配返回结果。 */ async (params) => {
+          const result = await api.audits({
+            page: params.current,
+            pageSize: params.pageSize,
+            query: params.query as string | undefined,
+            action: params.action as string | undefined,
+            from: params.from as string | undefined,
+            to: params.to as string | undefined,
+          })
+          return { data: result.items, total: result.total, success: true }
+        }
+      }
+      onRequestError={(error) => {
+        if (error.name !== 'AbortError') void message.error(error.message)
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,128 @@
+import { ModalForm, ProFormSelect } from '@ant-design/pro-components'
+import { Alert, Form } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  AdministratorSummary,
+  CompanyRecord,
+  OrganizationMemberCandidate,
+  SetAdministratorRequest,
+} from 'shared/types'
+import GlobalAccountSelect from '@/components/Selector/GlobalAccountSelect'
+import type {
+  GlobalAccountResolver,
+  GlobalAccountSearchRequest,
+  GlobalAccountSearchResult,
+} from '@/components/Selector/GlobalAccountSelect'
+import OrganizationMemberSelector from '@/components/Selector/OrganizationMemberSelector'
+import type {
+  OrganizationMemberSearchRequest,
+  OrganizationMemberSearchResult,
+} from '@/components/Selector/OrganizationMemberSelector'
+
+const PROJECT_ADMINISTRATOR_SOURCE_SCOPE = { type: 'company' } as const
+
+export interface AdministratorDialogRef {
+  show: (record: CompanyRecord, administrators: AdministratorSummary[]) => void
+  hide: () => void
+}
+
+/** 展示现有管理员，按企业或项目权限域选择稳定 userId 进行补充或替换。 */
+export default function AdministratorDialog({
+  ref,
+  project,
+  memberContextKey,
+  globalAccountRequest,
+  resolveGlobalAccounts,
+  memberRequest,
+  resolveMembers,
+  onSave,
+}: {
+  ref: Ref<AdministratorDialogRef>
+  project: boolean
+  /** 当前管理页的完整访问作用域键，用于隔离项目管理员候选缓存。 */
+  memberContextKey: string
+  globalAccountRequest: (input: GlobalAccountSearchRequest) => Promise<GlobalAccountSearchResult>
+  resolveGlobalAccounts: GlobalAccountResolver
+  memberRequest: (input: OrganizationMemberSearchRequest) => Promise<OrganizationMemberSearchResult>
+  resolveMembers: (userIds: string[]) => Promise<OrganizationMemberCandidate[]>
+  onSave: (record: CompanyRecord, input: SetAdministratorRequest) => Promise<boolean>
+}) {
+  const [record, setRecord] = useState<CompanyRecord>()
+  const [administrators, setAdministrators] = useState<AdministratorSummary[]>([])
+  const [open, setOpen] = useState(false)
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 载入待维护实体及现有管理员，打开管理员设置弹窗。 */
+    show: (item, admins) => {
+      setRecord(item)
+      setAdministrators(admins)
+      setOpen(true)
+    },
+    hide,
+  }))
+  return (
+    <ModalForm<SetAdministratorRequest>
+      title={tr('设置{type}管理员 · {name}', {
+        type: project ? tr('项目') : tr('企业'),
+        name: record?.name ?? '',
+      })}
+      open={open}
+      width={640}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('保存管理员') } }}
+      onFinish={
+        /** 按稳定 userId 和可选替换对象提交管理员设置。 */ async (values) => {
+          if (!record) return false
+          const ok = await onSave(record, {
+            administratorUserId: values.administratorUserId,
+            ...(values.replaceUserId ? { replaceUserId: values.replaceUserId } : {}),
+          })
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('补充或更换管理员')}
+        description={tr(
+          '不选择被替换者表示补充管理员。更换时仅撤销旧管理员身份，保留其成员关系及其他角色；此操作不会启用已停用的工作空间。',
+        )}
+        style={{ marginBottom: 20 }}
+      />
+      <Form.Item
+        name="administratorUserId"
+        label={tr('新管理员')}
+        rules={[{ required: true, message: tr('请选择新管理员') }]}
+        extra={project ? tr('新管理员须为有效企业成员。') : tr('新管理员须为有效全局账号。')}
+      >
+        {project ? (
+          <OrganizationMemberSelector
+            candidateContextKey={`${memberContextKey}:setProjectAdministrator`}
+            scope={PROJECT_ADMINISTRATOR_SOURCE_SCOPE}
+            request={memberRequest}
+            resolve={resolveMembers}
+            placeholder={tr('选择企业成员')}
+          />
+        ) : (
+          <GlobalAccountSelect request={globalAccountRequest} resolve={resolveGlobalAccounts} />
+        )}
+      </Form.Item>
+      <ProFormSelect
+        name="replaceUserId"
+        label={tr('被替换的管理员（可选）')}
+        placeholder={tr('不选择，补充管理员')}
+        allowClear
+        options={administrators.map((admin) => ({
+          value: admin.id,
+          label: `${admin.name} (${admin.account})${admin.effective ? '' : tr(' · 当前无效')}`,
+        }))}
+      />
+    </ModalForm>
+  )
+}

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

@@ -0,0 +1,140 @@
+import { Alert, Button, Checkbox, Descriptions, Empty, List, Modal, Space, Tag } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { CleanupPreview, CleanupRequest } from 'shared/types'
+
+export interface CleanupDialogRef {
+  show: (preview: CleanupPreview) => void
+  hide: () => void
+}
+/** 展示废弃权限影响范围，在确认预览凭据后提交清理。 */
+export default function CleanupDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<CleanupDialogRef>
+  onSave: (data: CleanupRequest) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [preview, setPreview] = useState<CleanupPreview>()
+  const [confirmed, setConfirmed] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 载入本次清理预览并重置人工确认状态。 */
+    show: (value) => {
+      setPreview(value)
+      setConfirmed(false)
+      setOpen(true)
+    },
+    hide,
+  }))
+  const executable = preview?.eligible && preview.items.length > 0 && Boolean(preview.proofDigest)
+
+  /** 校验清理条件和人工确认状态，携带预览凭据提交废弃权限清理。 */
+  async function clean() {
+    if (!preview?.proofDigest || !executable || !confirmed) return
+    setSaving(true)
+    try {
+      const success = await onSave({
+        permissionKeys: preview.items.map((item) => item.permissionKey),
+        proofDigest: preview.proofDigest,
+      })
+      if (success) hide()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal
+      title={tr('废弃权限清理预览')}
+      open={open}
+      width={740}
+      onCancel={hide}
+      destroyOnHidden
+      footer={
+        <Space>
+          <Button onClick={hide}>{tr('关闭')}</Button>
+          <Button
+            danger
+            type="primary"
+            disabled={!executable || !confirmed}
+            loading={saving}
+            onClick={() => void clean()}
+          >
+            {tr('确认清理废弃权限')}
+          </Button>
+        </Space>
+      }
+    >
+      {!preview?.items.length ? (
+        <Empty description={tr('当前没有需要清理的废弃权限。')} />
+      ) : (
+        <>
+          <Alert
+            type={executable ? 'warning' : 'info'}
+            showIcon
+            title={
+              executable
+                ? tr('执行后将清理这些权限及对应引用，请核对影响范围。')
+                : tr('当前条件不满足，暂不能执行清理。')
+            }
+            description={tr(
+              '仅处理功能目录明确标记为废弃的权限。执行时会重新检查当前引用和所有在用服务版本的发布条件。',
+            )}
+          />
+          {!!preview.blockedReasons.length && (
+            <Alert
+              style={{ marginTop: 16 }}
+              type="warning"
+              title={tr('暂不能清理')}
+              description={preview.blockedReasons.map((reason) => (
+                <div key={reason}>{reason}</div>
+              ))}
+            />
+          )}
+          <Descriptions
+            style={{ marginTop: 20 }}
+            column={3}
+            items={[
+              { key: 'permissions', label: tr('权限'), children: preview.totals.permissions },
+              { key: 'menus', label: tr('菜单节点'), children: preview.totals.menus },
+              { key: 'roles', label: tr('角色授权引用'), children: preview.totals.roleAssignments },
+            ]}
+          />
+          <List
+            dataSource={preview.items}
+            style={{ maxHeight: 340, overflow: 'auto' }}
+            renderItem={(item) => (
+              <List.Item>
+                <List.Item.Meta
+                  title={
+                    <Space>
+                      {tr(item.title)}
+                      <Tag>{tr('{count} 个菜单', { count: item.menuIds.length })}</Tag>
+                      <Tag>{tr('{count} 个角色', { count: item.roleCount })}</Tag>
+                    </Space>
+                  }
+                  description={
+                    <>
+                      {item.permissionKey}
+                      {item.blockedReasons.map((reason) => (
+                        <div key={reason}>{reason}</div>
+                      ))}
+                    </>
+                  }
+                />
+              </List.Item>
+            )}
+          />
+          {executable && (
+            <Checkbox checked={confirmed} onChange={(event) => setConfirmed(event.target.checked)}>
+              {tr('已核对权限、菜单和角色授权引用的清理范围')}
+            </Checkbox>
+          )}
+        </>
+      )}
+    </Modal>
+  )
+}