create-bubbles 0.1.25 → 0.1.27

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/OrganizationMemberFilterPanel.tsx

@@ -0,0 +1,209 @@
+import {
+  ApartmentOutlined,
+  BankOutlined,
+  ClearOutlined,
+  IdcardOutlined,
+  ProjectOutlined,
+  SafetyCertificateOutlined,
+} from '@ant-design/icons'
+import { Button, Flex, Select, Spin, Switch, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  OrganizationMemberBrowserScope,
+  OrganizationMemberFilterOption,
+  OrganizationMemberResourceFilters,
+} from './OrganizationMemberSelectorTypes'
+
+/** 左侧浏览面板当前提交给候选查询的筛选值。 */
+export interface OrganizationMemberFilterValue {
+  projectIds: string[]
+  organizationUnitIds: string[]
+  positionIds: string[]
+  roleIds: string[]
+  unassigned: boolean
+}
+
+/** 创建互不共享数组引用的空筛选值。 */
+export function createEmptyOrganizationMemberFilterValue(): OrganizationMemberFilterValue {
+  return {
+    projectIds: [],
+    organizationUnitIds: [],
+    positionIds: [],
+    roleIds: [],
+    unassigned: false,
+  }
+}
+
+/** 渲染左侧单类多选入口，空列表仍明确展示当前没有可见项。 */
+function FilterSelect({
+  icon,
+  label,
+  emptyText,
+  options,
+  value,
+  onChange,
+}: {
+  icon: ReactNode
+  label: string
+  emptyText: string
+  options: readonly OrganizationMemberFilterOption[]
+  value: string[]
+  onChange: (value: string[]) => void
+}) {
+  return (
+    <Flex vertical gap={6}>
+      <Flex align="center" gap={6}>
+        {icon}
+        <Typography.Text strong>{label}</Typography.Text>
+      </Flex>
+      <Select
+        mode="multiple"
+        value={value}
+        options={[...options]}
+        disabled={!options.length}
+        placeholder={options.length ? label : emptyText}
+        maxTagCount="responsive"
+        optionFilterProp="label"
+        popupMatchSelectWidth={320}
+        onChange={onChange}
+      />
+    </Flex>
+  )
+}
+
+/** 以作用域为第一层，提供组织、岗位和权限角色的左侧筛选轨道。 */
+export default function OrganizationMemberFilterPanel({
+  scope,
+  projects,
+  resourceFilters,
+  loading,
+  value,
+  onChange,
+}: {
+  scope: OrganizationMemberBrowserScope
+  projects?: readonly OrganizationMemberFilterOption[]
+  resourceFilters?: OrganizationMemberResourceFilters
+  loading?: boolean
+  value: OrganizationMemberFilterValue
+  onChange: (value: OrganizationMemberFilterValue) => void
+}) {
+  const { tr } = useI18n()
+  const currentScopeLabel =
+    scope.label ?? (scope.type === 'company' ? tr('当前企业') : tr('当前项目'))
+  const changeProjects = (projectIds: string[]) => {
+    onChange({ ...createEmptyOrganizationMemberFilterValue(), projectIds })
+  }
+
+  return (
+    <Flex
+      vertical
+      gap={16}
+      style={{
+        flex: '0 0 252px',
+        width: 252,
+        minHeight: 472,
+        padding: 16,
+        border: '1px solid rgba(113, 83, 184, .18)',
+        borderRadius: 12,
+        background:
+          'linear-gradient(180deg, rgba(118, 87, 190, .085) 0%, rgba(118, 87, 190, .025) 100%)',
+      }}
+    >
+      <Flex align="center" justify="space-between" gap={8}>
+        <div>
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            {tr('浏览范围')}
+          </Typography.Text>
+          <Typography.Title level={5} style={{ margin: '2px 0 0' }}>
+            {tr('按组织定位人员')}
+          </Typography.Title>
+        </div>
+        <Button
+          type="text"
+          aria-label={tr('清除筛选')}
+          icon={<ClearOutlined />}
+          disabled={
+            !value.projectIds.length &&
+            !value.organizationUnitIds.length &&
+            !value.positionIds.length &&
+            !value.roleIds.length &&
+            !value.unassigned
+          }
+          onClick={() => onChange(createEmptyOrganizationMemberFilterValue())}
+        />
+      </Flex>
+
+      <Flex vertical gap={8}>
+        <Typography.Text strong>{tr('作用范围')}</Typography.Text>
+        <Button
+          type={!value.projectIds.length ? 'primary' : 'default'}
+          icon={<BankOutlined />}
+          block
+          style={{ textAlign: 'left' }}
+          onClick={() => changeProjects([])}
+        >
+          {currentScopeLabel}
+        </Button>
+        {scope.type === 'company' && projects !== undefined && (
+          <Select
+            mode="multiple"
+            value={value.projectIds}
+            options={[...projects]}
+            disabled={!projects.length}
+            prefix={<ProjectOutlined />}
+            placeholder={projects.length ? tr('选择可见项目') : tr('暂无可见项目')}
+            maxTagCount="responsive"
+            optionFilterProp="label"
+            popupMatchSelectWidth={320}
+            onChange={changeProjects}
+          />
+        )}
+      </Flex>
+
+      <Spin spinning={loading} size="small">
+        <Flex vertical gap={14}>
+          {resourceFilters?.organizationUnits !== undefined && (
+            <FilterSelect
+              icon={<ApartmentOutlined />}
+              label={tr('组织架构')}
+              emptyText={tr('暂无可见组织')}
+              options={resourceFilters.organizationUnits}
+              value={value.organizationUnitIds}
+              onChange={(organizationUnitIds) => onChange({ ...value, organizationUnitIds })}
+            />
+          )}
+          {resourceFilters?.positions !== undefined && (
+            <FilterSelect
+              icon={<IdcardOutlined />}
+              label={tr('岗位')}
+              emptyText={tr('暂无可见岗位')}
+              options={resourceFilters.positions}
+              value={value.positionIds}
+              onChange={(positionIds) => onChange({ ...value, positionIds })}
+            />
+          )}
+          {resourceFilters?.roles !== undefined && (
+            <FilterSelect
+              icon={<SafetyCertificateOutlined />}
+              label={tr('权限角色')}
+              emptyText={tr('暂无可见角色')}
+              options={resourceFilters.roles}
+              value={value.roleIds}
+              onChange={(roleIds) => onChange({ ...value, roleIds })}
+            />
+          )}
+          {resourceFilters?.allowUnassigned && (
+            <Flex align="center" justify="space-between" gap={12}>
+              <Typography.Text>{tr('只看未归属组织')}</Typography.Text>
+              <Switch
+                size="small"
+                checked={value.unassigned}
+                onChange={(unassigned) => onChange({ ...value, unassigned })}
+              />
+            </Flex>
+          )}
+        </Flex>
+      </Spin>
+    </Flex>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/OrganizationMemberSelector.tsx

@@ -0,0 +1,196 @@
+import { Select } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { OrganizationMemberCandidate } from 'shared/types'
+import OrganizationMemberBrowser from './OrganizationMemberBrowser'
+import type {
+  OrganizationMemberBrowserRef,
+  OrganizationMemberSelectorProps,
+} from './OrganizationMemberSelectorTypes'
+
+/** 把单选或多选值统一转换为去重后的 userId 数组。 */
+function normalizeValue(value: string | string[] | undefined, multiple: boolean) {
+  if (multiple) return [...new Set(Array.isArray(value) ? value : value ? [value] : [])]
+  const selected = Array.isArray(value) ? value[0] : value
+  return selected ? [selected] : []
+}
+
+interface CandidateCache {
+  contextKey: string
+  candidateById: Map<string, OrganizationMemberCandidate>
+}
+
+/** 把业务传入的候选快照转换为按稳定 userId 索引的缓存。 */
+function candidateMap(candidates?: readonly OrganizationMemberCandidate[]) {
+  return new Map(candidates?.map((candidate) => [candidate.userId, candidate]))
+}
+
+/** Select 风格入口，点击后在弹窗中按组织、岗位、角色和项目浏览成员。 */
+export default function OrganizationMemberSelector({
+  value,
+  candidateContextKey,
+  scope,
+  multiple = false,
+  selectedCandidates,
+  filters,
+  request,
+  resolve,
+  getCandidateDisabled,
+  onChange,
+  placeholder,
+  disabled,
+  allowClear = true,
+  ...selectProps
+}: OrganizationMemberSelectorProps) {
+  const { tr } = useI18n()
+  const browserRef = useRef<OrganizationMemberBrowserRef>(null)
+  const [candidateCache, setCandidateCache] = useState<CandidateCache>(() => ({
+    contextKey: candidateContextKey,
+    candidateById: candidateMap(selectedCandidates),
+  }))
+  const resolveRef = useRef(resolve)
+  const resolveRequestRef = useRef({ sequence: 0, contextKey: '' })
+  const userIds = normalizeValue(value, multiple)
+  const userIdsKey = userIds.join('\u0000')
+  const suppliedCandidateById = useMemo(
+    () => candidateMap(selectedCandidates),
+    [candidateContextKey, selectedCandidates],
+  )
+  const candidateById =
+    candidateCache.contextKey === candidateContextKey
+      ? candidateCache.candidateById
+      : suppliedCandidateById
+  resolveRef.current = resolve
+
+  /** 合并业务传入的候选回显快照。 */
+  useEffect(() => {
+    const supplied = selectedCandidates ?? []
+    setCandidateCache((current) => {
+      const currentCandidates =
+        current.contextKey === candidateContextKey ? current.candidateById : suppliedCandidateById
+      let next: Map<string, OrganizationMemberCandidate> | undefined
+      for (const candidate of supplied) {
+        if (currentCandidates.get(candidate.userId) === candidate) continue
+        next ??= new Map(currentCandidates)
+        next.set(candidate.userId, candidate)
+      }
+      if (!next && current.contextKey === candidateContextKey) return current
+      return { contextKey: candidateContextKey, candidateById: next ?? currentCandidates }
+    })
+  }, [candidateContextKey, selectedCandidates, suppliedCandidateById])
+
+  /** 按需补查缺失候选，避免字段显示裸 userId。 */
+  useEffect(() => {
+    const missing = userIds.filter((userId) => !candidateById.has(userId))
+    if (!missing.length) {
+      resolveRequestRef.current = {
+        sequence: resolveRequestRef.current.sequence + 1,
+        contextKey: '',
+      }
+      return
+    }
+    const missingKey = [...missing].sort().join('\u0000')
+    const contextKey = `${candidateContextKey}\u0001${userIdsKey}\u0001${missingKey}`
+    const sequence = resolveRequestRef.current.sequence + 1
+    resolveRequestRef.current = { sequence, contextKey }
+    void resolveRef
+      .current(missing)
+      .then((rows) => {
+        const activeRequest = resolveRequestRef.current
+        if (
+          activeRequest.sequence !== sequence ||
+          activeRequest.contextKey !== contextKey ||
+          !rows.length
+        )
+          return
+        setCandidateCache((current) => {
+          const currentCandidates =
+            current.contextKey === candidateContextKey ? current.candidateById : candidateById
+          let changed = false
+          const next = new Map(currentCandidates)
+          for (const candidate of rows) {
+            if (currentCandidates.get(candidate.userId) !== candidate) changed = true
+            next.set(candidate.userId, candidate)
+          }
+          if (!changed && current.contextKey === candidateContextKey) return current
+          return { contextKey: candidateContextKey, candidateById: next }
+        })
+      })
+      .catch(() => {
+        const activeRequest = resolveRequestRef.current
+        if (activeRequest.sequence === sequence && activeRequest.contextKey === contextKey) {
+          resolveRequestRef.current = { sequence: sequence + 1, contextKey: '' }
+        }
+      })
+    return () => {
+      const activeRequest = resolveRequestRef.current
+      if (activeRequest.sequence === sequence && activeRequest.contextKey === contextKey) {
+        resolveRequestRef.current = { sequence: sequence + 1, contextKey: '' }
+      }
+    }
+  }, [candidateById, candidateContextKey, userIdsKey])
+
+  const options = userIds.map((userId) => {
+    const candidate = candidateById.get(userId)
+    return {
+      value: userId,
+      label: candidate ? `${candidate.name} · ${candidate.account}` : userId,
+    }
+  })
+
+  /** 提交弹窗选择并缓存候选快照，表单值只保留稳定 userId。 */
+  const confirm = (selectedUserIds: string[], candidates: OrganizationMemberCandidate[]) => {
+    setCandidateCache((current) => {
+      const currentCandidates =
+        current.contextKey === candidateContextKey ? current.candidateById : candidateById
+      const next = new Map(currentCandidates)
+      for (const candidate of candidates) next.set(candidate.userId, candidate)
+      return { contextKey: candidateContextKey, candidateById: next }
+    })
+    onChange?.(multiple ? selectedUserIds : selectedUserIds[0], candidates)
+  }
+
+  return (
+    <>
+      <Select
+        {...selectProps}
+        value={multiple ? userIds : userIds[0]}
+        mode={multiple ? 'multiple' : undefined}
+        options={options}
+        open={false}
+        showSearch={false}
+        disabled={disabled}
+        allowClear={allowClear}
+        placeholder={placeholder ?? tr('请选择成员')}
+        onClick={() => {
+          if (!disabled)
+            browserRef.current?.show(
+              userIds,
+              userIds
+                .map((userId) => candidateById.get(userId))
+                .filter((candidate): candidate is OrganizationMemberCandidate => !!candidate),
+            )
+        }}
+        onChange={
+          /** 允许通过清空按钮或多选标签删除立即更新受控表单值。 */ (nextValue) => {
+            const nextIds = normalizeValue(nextValue, multiple)
+            const rows = nextIds
+              .map((userId) => candidateById.get(userId))
+              .filter((candidate): candidate is OrganizationMemberCandidate => !!candidate)
+            onChange?.(multiple ? nextIds : nextIds[0], rows)
+          }
+        }
+      />
+      <OrganizationMemberBrowser
+        ref={browserRef}
+        candidateContextKey={candidateContextKey}
+        scope={scope}
+        multiple={multiple}
+        filters={filters}
+        request={request}
+        resolve={resolve}
+        getCandidateDisabled={getCandidateDisabled}
+        onConfirm={confirm}
+      />
+    </>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/OrganizationMemberSelectorTypes.ts

@@ -0,0 +1,103 @@
+import type { SelectProps } from 'antd'
+import type {
+  OrganizationMemberCandidate,
+  OrganizationMemberCandidateQuery,
+  OrganizationScope,
+} from 'shared/types'
+
+/** 组织成员浏览器中可选筛选项。 */
+export interface OrganizationMemberFilterOption {
+  value: string
+  label: string
+}
+
+/** 选择器当前 URL 作用域的展示信息；它不进入最终选择值。 */
+export interface OrganizationMemberBrowserScope {
+  type: OrganizationScope['type']
+  label?: string
+}
+
+/** 业务侧提供给候选搜索请求的参数。 */
+export interface OrganizationMemberSearchRequest extends Omit<
+  OrganizationMemberCandidateQuery,
+  'page' | 'pageSize' | 'query'
+> {
+  page: number
+  pageSize: number
+  query?: string
+  signal?: AbortSignal
+}
+
+/** 组织成员搜索的分页结果。 */
+export interface OrganizationMemberSearchResult {
+  items: OrganizationMemberCandidate[]
+  total: number
+}
+
+/** 某个企业或项目身份域内可用的组织、岗位和角色筛选数据。 */
+export interface OrganizationMemberResourceFilters {
+  organizationUnits?: readonly OrganizationMemberFilterOption[]
+  positions?: readonly OrganizationMemberFilterOption[]
+  roles?: readonly OrganizationMemberFilterOption[]
+  allowUnassigned?: boolean
+}
+
+/** 组织成员浏览器可选的分类筛选数据。 */
+export interface OrganizationMemberBrowserFilters extends OrganizationMemberResourceFilters {
+  projects?: readonly OrganizationMemberFilterOption[]
+  /** 企业浏览切到项目身份域时，按实际项目权限加载可见筛选项。 */
+  loadProjectFilters?: (projectIds: string[]) => Promise<OrganizationMemberResourceFilters>
+}
+
+/** 组织成员弹窗浏览器公开方法。 */
+export interface OrganizationMemberBrowserRef {
+  show: (value: readonly string[], selectedRows?: readonly OrganizationMemberCandidate[]) => void
+  hide: () => void
+}
+
+/** 组织成员弹窗浏览器属性。 */
+export interface OrganizationMemberBrowserProps {
+  ref: Ref<OrganizationMemberBrowserRef>
+  /** 隔离不同作用域、解析来源和用途的候选缓存。 */
+  candidateContextKey: string
+  scope: OrganizationMemberBrowserScope
+  multiple?: boolean
+  title?: ReactNode
+  filters?: OrganizationMemberBrowserFilters
+  request: (input: OrganizationMemberSearchRequest) => Promise<OrganizationMemberSearchResult>
+  resolve: (userIds: string[]) => Promise<OrganizationMemberCandidate[]>
+  /** 业务场景附加禁选条件；已选项仍可从选择摘要中移除。 */
+  getCandidateDisabled?: (candidate: OrganizationMemberCandidate) => boolean
+  onConfirm: (userIds: string[], rows: OrganizationMemberCandidate[]) => void
+}
+
+type ManagedSelectProps =
+  | 'value'
+  | 'defaultValue'
+  | 'mode'
+  | 'options'
+  | 'open'
+  | 'showSearch'
+  | 'onChange'
+  | 'labelInValue'
+
+/** Select 风格的组织成员选择器属性，稳定值始终为 userId。 */
+export interface OrganizationMemberSelectorProps extends Omit<
+  SelectProps<string | string[] | undefined>,
+  ManagedSelectProps
+> {
+  value?: string | string[]
+  /** 必须包含完整来源作用域和业务用途，防止同 userId 跨上下文复用。 */
+  candidateContextKey: string
+  scope: OrganizationMemberBrowserScope
+  multiple?: boolean
+  selectedCandidates?: readonly OrganizationMemberCandidate[]
+  filters?: OrganizationMemberBrowserFilters
+  request: OrganizationMemberBrowserProps['request']
+  resolve: OrganizationMemberBrowserProps['resolve']
+  getCandidateDisabled?: OrganizationMemberBrowserProps['getCandidateDisabled']
+  onChange?: (
+    value: string | string[] | undefined,
+    candidates: OrganizationMemberCandidate[],
+  ) => void
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/README.md

@@ -0,0 +1,8 @@
+# OrganizationMemberSelector
+
+Select 风格的组织成员选择器。点击字段后打开“左侧组织浏览 + 右侧分页人员”的弹窗，支持搜索、跨页选择、按可见作用域/组织/岗位/角色筛选、批量 resolve 回显与候选禁选。
+
+- 单选值为 `userId | undefined`，多选值为 `userId[]`。
+- 搜索与 resolve 请求必须由业务页面注入，组件不决定 URL 或权限 purpose。
+- `scope` 只展示当前 URL 作用域；企业可通过 `filters.projects` 和 `loadProjectFilters` 浏览获准查看的项目身份。
+- `selectedCandidates` 只用于回显快照，不改变最终表单值。

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/index.ts

@@ -0,0 +1,13 @@
+export { default } from './OrganizationMemberSelector'
+export { default as OrganizationMemberBrowser } from './OrganizationMemberBrowser'
+export type {
+  OrganizationMemberBrowserFilters,
+  OrganizationMemberBrowserProps,
+  OrganizationMemberBrowserRef,
+  OrganizationMemberBrowserScope,
+  OrganizationMemberFilterOption,
+  OrganizationMemberResourceFilters,
+  OrganizationMemberSearchRequest,
+  OrganizationMemberSearchResult,
+  OrganizationMemberSelectorProps,
+} from './OrganizationMemberSelectorTypes'

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/README.md

@@ -0,0 +1,13 @@
+# Selector
+
+前端选择器组件集合。不同交互形态拆成独立组件，不通过一个庞大的 `mode` 参数混合。
+
+| 组件                         | 适用场景                         | 值                  |
+| ---------------------------- | -------------------------------- | ------------------- |
+| `BasicTableSelector`         | 弹窗表格、分页、跨页单选或多选   | 稳定行 key 数组     |
+| `GlobalAccountSelect`        | 表单内远程搜索平台全局账号       | 单个全局 `userId`   |
+| `OrganizationMemberSelector` | 按组织、岗位、角色或项目浏览成员 | 单个或多个 `userId` |
+
+详细用法见各组件目录中的 README。查询函数均由业务侧注入，公共组件不决定接口地址、候选权限或数据保存方式。
+
+根入口暂时保留原 `Selector` 默认导出及旧类型别名，实际均指向 `BasicTableSelector`；新代码应使用命名导出。

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/index.ts

@@ -0,0 +1,30 @@
+export { default, default as BasicTableSelector } from './BasicTableSelector'
+export type {
+  BasicTableSelectorProps,
+  BasicTableSelectorProps as SelectorProps,
+  BasicTableSelectorRef,
+  BasicTableSelectorRef as SelectorRef,
+  BasicTableSelectorRowKey,
+  BasicTableSelectorRowKey as SelectorRowKey,
+  BasicTableSelectorShowOptions,
+  BasicTableSelectorShowOptions as SelectorShowOptions,
+} from './BasicTableSelector'
+export { default as GlobalAccountSelect } from './GlobalAccountSelect'
+export type {
+  GlobalAccountOption,
+  GlobalAccountResolver,
+  GlobalAccountSearchRequest,
+  GlobalAccountSearchResult,
+  GlobalAccountSelectOption,
+  GlobalAccountSelectProps,
+} from './GlobalAccountSelect'
+export { default as OrganizationMemberSelector } from './OrganizationMemberSelector'
+export type {
+  OrganizationMemberBrowserFilters,
+  OrganizationMemberBrowserProps,
+  OrganizationMemberBrowserRef,
+  OrganizationMemberFilterOption,
+  OrganizationMemberSearchRequest,
+  OrganizationMemberSearchResult,
+  OrganizationMemberSelectorProps,
+} from './OrganizationMemberSelector'

package/template-vp-monorepo-react-nestjs/apps/web/src/config/theme.ts

@@ -0,0 +1,52 @@
+import type { ThemeConfig } from 'antd'
+
+/** Ant Design 与 ProComponents 共用的主题入口。 */
+export const appTheme: ThemeConfig = {
+  token: {
+    colorPrimary: '#7864c4',
+    colorInfo: '#7864c4',
+    colorBgLayout: '#f5f3fc',
+    colorText: '#302b49',
+    colorTextSecondary: '#78718e',
+    colorBorder: '#e1ddec',
+    colorBorderSecondary: '#eeebf5',
+    borderRadius: 12,
+    controlHeight: 36,
+    fontFamily: '"PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif',
+  },
+  components: {
+    Button: { primaryShadow: '0 4px 12px rgba(120, 100, 196, 0.18)' },
+    Card: { borderRadiusLG: 18 },
+    Table: {
+      headerBg: '#f5f3fb',
+      headerColor: '#67607c',
+      headerSplitColor: 'transparent',
+      rowHoverBg: '#f7f5ff',
+    },
+    Menu: { itemBorderRadius: 12 },
+    Layout: {
+      headerBg: 'transparent',
+      siderBg: 'transparent',
+    },
+  },
+}
+
+export const workspaceLayoutToken = {
+  bgLayout: 'transparent',
+  header: {
+    heightLayoutHeader: 72,
+    colorBgHeader: 'rgba(255, 255, 255, 0.56)',
+    colorHeaderTitle: '#302b49',
+    colorTextRightActionsItem: '#78718e',
+  },
+  sider: {
+    colorMenuBackground: 'transparent',
+    colorBgMenuItemSelected: '#e9e3fa',
+    colorBgMenuItemHover: '#eeebf8',
+    colorTextMenuSelected: '#6853ad',
+    colorTextMenu: '#78718e',
+    colorTextMenuItemHover: '#6853ad',
+    colorTextMenuTitle: '#302b49',
+    menuHeight: 46,
+  },
+}