create-bubbles 0.1.26 → 0.1.27

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

@@ -0,0 +1,12 @@
+import type { OrganizationMemberCandidate } from 'shared/types'
+
+/** 不改变原 Map 地删除指定成员候选；不存在该键时复用原引用。 */
+export function removeMemberCandidate(
+  candidates: Map<string, OrganizationMemberCandidate>,
+  userId: string,
+): Map<string, OrganizationMemberCandidate> {
+  if (!candidates.has(userId)) return candidates
+  const next = new Map(candidates)
+  next.delete(userId)
+  return next
+}

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

@@ -0,0 +1,251 @@
+import {
+  ModalForm,
+  ProForm,
+  ProFormDependency,
+  ProFormDigit,
+  ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components'
+import { Alert } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  CreateMenuRequest,
+  FunctionCatalogResult,
+  MenuNode,
+  MenuTreeResult,
+  UpdateMenuRequest,
+} from 'shared/types'
+import { IconSelector } from '@/components/Icon/SvgAsset'
+
+interface EditorState {
+  record?: MenuNode
+  tree: MenuTreeResult
+  catalog: FunctionCatalogResult
+}
+export interface MenuFormDialogRef {
+  show: (state: EditorState) => void
+  hide: () => void
+}
+
+/** 编辑菜单结构与功能绑定，限制循环父级及重复绑定。 */
+export default function MenuFormDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<MenuFormDialogRef>
+  onSave: (state: EditorState, data: CreateMenuRequest | UpdateMenuRequest) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [state, setState] = useState<EditorState>()
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 载入菜单树、功能目录及可选编辑节点，打开菜单表单。 */
+    show: (value) => {
+      setState(value)
+      setOpen(true)
+    },
+    hide,
+  }))
+  const nodes: MenuNode[] = []
+  /** 递归展开菜单树，供父级节点和已绑定功能的筛选使用。 */
+  const append = (items: MenuNode[]) => {
+    for (const node of items) {
+      nodes.push(node)
+      append(node.children)
+    }
+  }
+  append(state?.tree.items ?? [])
+  const record = state?.record
+  const descendants = new Set<string>()
+  /** 收集当前节点及全部后代，避免菜单编辑时选择自身后代作为父级。 */
+  const mark = (node?: MenuNode) => {
+    if (!node) return
+    descendants.add(node.id)
+    node.children.forEach(mark)
+  }
+  mark(nodes.find((node) => node.id === record?.id))
+  const pages =
+    state?.catalog.items.filter((item) => item.kind === 'page' && !item.deprecated) ?? []
+  const boundPages = new Set(
+    nodes.filter((item) => item.type === 'page').map((item) => item.routeKey),
+  )
+  const boundOperations = new Set(
+    nodes.filter((item) => item.type === 'operation').map((item) => item.permissionKey),
+  )
+
+  return (
+    <ModalForm<CreateMenuRequest>
+      title={record ? tr('编辑菜单节点') : tr('新增菜单节点')}
+      open={open}
+      width={620}
+      initialValues={
+        record ?? { type: 'page', parentId: null, sort: 0, hidden: false, status: 'active' }
+      }
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('保存菜单') } }}
+      onFinish={
+        /** 规范化菜单字段并携带树版本提交新增或编辑，成功后关闭弹窗。 */ async (values) => {
+          if (!state) return false
+          const common: UpdateMenuRequest = {
+            expectedVersion: state.tree.version,
+            name: values.name.trim(),
+            parentId: values.parentId ?? null,
+            // 新建页面未选择图标时省略字段，让服务端按页面目录补默认图标；编辑时保留空值以支持显式清空。
+            icon: record ? (values.icon ?? '') : values.icon || undefined,
+            sort: values.sort ?? 0,
+            hidden: values.hidden ?? false,
+            status: values.status ?? 'active',
+          }
+          const data = record
+            ? common
+            : {
+                ...common,
+                name: values.name.trim(),
+                parentId: values.parentId ?? null,
+                type: values.type,
+                ...(values.type === 'page'
+                  ? { routeKey: values.routeKey }
+                  : values.type === 'operation'
+                    ? { permissionKey: values.permissionKey }
+                    : {}),
+              }
+          const ok = await onSave(state, data)
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      {record?.protected && (
+        <Alert
+          type="info"
+          showIcon
+          title={tr('此节点属于受保护的管理入口，不能隐藏、停用或移到不可用位置。')}
+          style={{ marginBottom: 18 }}
+        />
+      )}
+      {!record && (
+        <ProFormSelect
+          name="type"
+          label={tr('节点类型')}
+          options={[
+            { value: 'directory', label: tr('目录') },
+            { value: 'page', label: tr('页面') },
+            { value: 'operation', label: tr('按钮 / 操作') },
+          ]}
+          rules={[{ required: true }]}
+        />
+      )}
+      <ProFormText
+        name="name"
+        label={tr('显示名称')}
+        fieldProps={{ maxLength: 100 }}
+        rules={[{ required: true, whitespace: true, max: 100, message: tr('请输入显示名称') }]}
+      />
+      <ProFormDependency name={['type', 'parentId']}>
+        {
+          /** 按节点类型筛选合法父级及尚未绑定的页面或操作，渲染联动字段。 */ ({
+            type,
+            parentId,
+          }) => {
+            const nodeType = record?.type ?? type
+            const parent = nodes.find((node) => node.id === parentId)
+            const availableParents = nodes.filter(
+              (node) =>
+                !descendants.has(node.id) &&
+                (nodeType === 'operation'
+                  ? node.type === 'page' && (!record || node.routeKey === record.routeKey)
+                  : node.type === 'directory'),
+            )
+            return (
+              <>
+                <ProFormSelect
+                  name="parentId"
+                  label={tr('父级节点')}
+                  allowClear={nodeType !== 'operation'}
+                  placeholder={
+                    nodeType === 'operation' ? tr('选择所属页面') : tr('不选择，放在根目录')
+                  }
+                  rules={
+                    nodeType === 'operation'
+                      ? [{ required: true, message: tr('操作必须属于一个页面') }]
+                      : []
+                  }
+                  options={availableParents.map((node) => ({ value: node.id, label: node.name }))}
+                />
+                {!record && nodeType === 'page' && (
+                  <ProFormSelect
+                    name="routeKey"
+                    label={tr('绑定页面')}
+                    placeholder={tr('选择已发布的页面')}
+                    rules={[{ required: true, message: tr('请选择页面') }]}
+                    options={pages
+                      .filter((item) => !boundPages.has(item.routeKey))
+                      .map((item) => ({ value: item.routeKey, label: tr(item.title) }))}
+                  />
+                )}
+                {!record && nodeType === 'operation' && (
+                  <ProFormSelect
+                    name="permissionKey"
+                    label={tr('绑定操作')}
+                    placeholder={tr('先选择所属页面')}
+                    rules={[{ required: true, message: tr('请选择操作') }]}
+                    options={(state?.catalog.items ?? [])
+                      .filter(
+                        (item) =>
+                          item.kind === 'operation' &&
+                          !item.deprecated &&
+                          item.routeKey === parent?.routeKey &&
+                          !boundOperations.has(item.key),
+                      )
+                      .map((item) => ({ value: item.key, label: tr(item.title) }))}
+                  />
+                )}
+                {record && record.type !== 'directory' && (
+                  <p>
+                    {tr('已绑定：')}
+                    {tr(
+                      state?.catalog.items.find((item) => item.key === record.permissionKey)
+                        ?.title ?? record.name,
+                    )}
+                    {tr('。已有节点不能更换绑定功能。')}
+                  </p>
+                )}
+              </>
+            )
+          }
+        }
+      </ProFormDependency>
+      <ProForm.Item name="icon" label={tr('图标')}>
+        <IconSelector placeholder={tr('搜索并选择图标')} />
+      </ProForm.Item>
+      <ProFormDigit
+        name="sort"
+        label={tr('排序')}
+        min={0}
+        max={100000}
+        fieldProps={{ precision: 0 }}
+      />
+      <ProFormSwitch
+        name="hidden"
+        label={tr('隐藏导航')}
+        disabled={record?.protected}
+        extra={tr('隐藏只影响菜单展示，已授权用户仍可直接访问。')}
+      />
+      <ProFormSelect
+        name="status"
+        label={tr('功能状态')}
+        disabled={record?.protected}
+        options={[
+          { value: 'active', label: tr('启用') },
+          { value: 'disabled', label: tr('停用') },
+        ]}
+        extra={tr('停用会阻断节点及下级功能，管理员也受此限制。')}
+      />
+    </ModalForm>
+  )
+}

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

@@ -0,0 +1,73 @@
+import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { CreateRoleRequest, RoleRecord } from 'shared/types'
+
+export interface RoleFormDialogRef {
+  show: (record?: RoleRecord) => void
+  hide: () => void
+}
+/** 复用新增与编辑角色表单，并保留原角色的版本信息。 */
+export default function RoleFormDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<RoleFormDialogRef>
+  onSave: (values: CreateRoleRequest, record?: RoleRecord) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [record, setRecord] = useState<RoleRecord>()
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 载入待编辑记录并打开表单；未传记录时进入新增模式。 */
+    show: (item) => {
+      setRecord(item)
+      setOpen(true)
+    },
+    hide,
+  }))
+  return (
+    <ModalForm<CreateRoleRequest>
+      title={record ? tr('编辑自定义角色') : tr('创建自定义角色')}
+      open={open}
+      width={520}
+      initialValues={record}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('保存角色') } }}
+      onFinish={
+        /** 规范化角色名称与说明，提交新增或编辑后按结果关闭弹窗。 */ async (values) => {
+          const ok = await onSave(
+            { name: values.name.trim(), description: values.description?.trim() },
+            record,
+          )
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      <ProFormText
+        name="name"
+        label={tr('角色名称')}
+        rules={[
+          {
+            required: true,
+            whitespace: true,
+            min: 2,
+            max: 100,
+            message: tr('请输入 2–100 字角色名称'),
+          },
+        ]}
+        fieldProps={{ maxLength: 100 }}
+      />
+      <ProFormTextArea
+        name="description"
+        label={tr('角色说明')}
+        fieldProps={{ maxLength: 500, showCount: true, rows: 3 }}
+      />
+      {!record && <p>{tr('创建后，通过“配置权限”选择此角色可以使用的功能。')}</p>}
+    </ModalForm>
+  )
+}

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

@@ -0,0 +1,185 @@
+import { Alert, Button, Modal, Space, Tree, type TreeDataNode } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { PermissionTreeResult, RoleRecord } from 'shared/types'
+
+export interface RolePermissionsDialogRef {
+  show: (record: RoleRecord, tree: PermissionTreeResult, readOnly: boolean) => void
+  hide: () => void
+}
+
+/** 按可授予范围编辑角色权限，维护页面和操作权限的依赖关系。 */
+export default function RolePermissionsDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<RolePermissionsDialogRef>
+  onSave: (record: RoleRecord, permissionKeys: string[]) => Promise<boolean>
+}) {
+  const [record, setRecord] = useState<RoleRecord>()
+  const [tree, setTree] = useState<PermissionTreeResult>()
+  const [selected, setSelected] = useState<string[]>([])
+  const [open, setOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [readOnly, setReadOnly] = useState(false)
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 载入角色、权限目录和只读状态，初始化勾选后打开权限弹窗。 */
+    show: (item, data, readonly) => {
+      setRecord(item)
+      setTree(data)
+      setSelected(item.permissionKeys)
+      setReadOnly(readonly)
+      setOpen(true)
+    },
+    hide,
+  }))
+
+  const permissions =
+    tree?.permissions.filter(
+      (permission) => !permission.adminOnly || record?.builtin === 'administrator',
+    ) ?? []
+  const grantable = new Set(tree?.grantablePermissionKeys ?? [])
+  const existing = new Set(record?.permissionKeys ?? [])
+  const definitionByKey = new Map(permissions.map((permission) => [permission.key, permission]))
+  const treeData: TreeDataNode[] = permissions
+    .filter((permission) => permission.kind === 'page')
+    .map(
+      /** 按页面组织权限树，把页面读取权限及其操作放入同一勾选组。 */ (page) => ({
+        key: `group:${page.routeKey}`,
+        title: tr(page.title),
+        children: [
+          page,
+          ...permissions.filter((permission) => permission.pagePermissionKey === page.key),
+        ].map(
+          /** 展示权限及废弃标记，仅允许调整既有授权或当前可授予的权限。 */ (permission) => ({
+            key: permission.key,
+            title: `${permission.kind === 'page' ? tr('访问页面') : tr(permission.title)}${permission.deprecated ? tr('（已废弃）') : ''}`,
+            disabled: readOnly || (!grantable.has(permission.key) && !existing.has(permission.key)),
+          }),
+        ),
+      }),
+    )
+  // 不在当前目录中的历史引用原样保留；清理由受控平台维护操作完成。
+  const preserved = selected.filter((key) => !definitionByKey.has(key))
+
+  /** 联动页面与操作权限勾选，并保留当前目录外的历史权限引用。 */
+  function handleCheck(
+    keys: Key[] | { checked: Key[]; halfChecked: Key[] },
+    info: { checked: boolean; node: { key: Key } },
+  ) {
+    const next = new Set(
+      (Array.isArray(keys) ? keys : keys.checked)
+        .map(String)
+        .filter((key) => definitionByKey.has(key)),
+    )
+    preserved.forEach((key) => next.add(key))
+    const changed = definitionByKey.get(String(info.node.key))
+    if (!info.checked && changed?.kind === 'page') {
+      for (const permission of permissions)
+        if (permission.pagePermissionKey === changed.key) next.delete(permission.key)
+    }
+    for (const key of next) {
+      const page = definitionByKey.get(key)?.pagePermissionKey
+      if (page) next.add(page)
+    }
+    setSelected([...next])
+  }
+
+  /** 提交角色权限配置，成功后关闭弹窗并在结束时解除保存状态。 */
+  async function save() {
+    if (!record) return
+    setSaving(true)
+    try {
+      if (await onSave(record, selected)) hide()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal
+      title={tr('{action}权限 · {name}', {
+        action: readOnly ? tr('查看') : tr('配置'),
+        name: record?.name ?? '',
+      })}
+      open={open}
+      width={680}
+      onCancel={hide}
+      destroyOnHidden
+      footer={
+        readOnly ? (
+          <Button onClick={hide}>{tr('关闭')}</Button>
+        ) : (
+          <Space>
+            <Button onClick={hide}>{tr('取消')}</Button>
+            <Button type="primary" loading={saving} onClick={() => void save()}>
+              {tr('保存权限')}
+            </Button>
+          </Space>
+        )
+      }
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={
+          record?.builtin
+            ? tr('内置角色由系统维护，不能人工编辑。')
+            : tr('按钮授权自动包含页面访问权限；取消页面访问将同步取消页面下的操作。')
+        }
+        description={
+          record?.builtin
+            ? tr('新增功能自动授予对应内置管理员，仍受功能启停状态约束。')
+            : tr(
+                '只能新增你有权授予的权限。目录支持全选和半选；创建项目等管理员专属能力不在自定义角色树中。',
+              )
+        }
+      />
+      {!readOnly && (
+        <Space style={{ marginTop: 16 }}>
+          <Button
+            size="small"
+            onClick={
+              /** 补入全部可授予操作及其页面读取权限，并保留已有选择。 */ () =>
+                setSelected([
+                  ...new Set([
+                    ...selected,
+                    ...permissions
+                      .filter((item) => grantable.has(item.key))
+                      .flatMap((item) =>
+                        item.pagePermissionKey ? [item.key, item.pagePermissionKey] : [item.key],
+                      ),
+                  ]),
+                ])
+            }
+          >
+            {tr('全选可授予权限')}
+          </Button>
+          <Button size="small" onClick={() => setSelected(preserved)}>
+            {tr('清空可见权限')}
+          </Button>
+        </Space>
+      )}
+      <div className="permission-tree">
+        <Tree
+          disabled={readOnly}
+          checkable
+          defaultExpandAll
+          checkedKeys={selected}
+          treeData={treeData}
+          onCheck={handleCheck}
+        />
+      </div>
+      {preserved.length > 0 && (
+        <Alert
+          style={{ marginTop: 12 }}
+          type="warning"
+          title={tr('另有 {count} 项历史权限引用将保留，须经平台维护流程清理。', {
+            count: preserved.length,
+          })}
+        />
+      )}
+    </Modal>
+  )
+}