cx-chat 0.0.2 → 0.0.3

package/src/components/common/modal/dep-user-select-multi.tsx

@@ -1,324 +0,0 @@
-// i18n 中文：locales/zh/common.ts（common.selectTable · 部门树 + 多选用户）
-
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { TreeSelectTableMulti } from '@/components/table-view'
-import { useToast } from '@/contexts/ToastContext'
-import { CxModal, useCxModal } from '@cx-ui'
-
-import {
-  pickUserId,
-  useDepUserSelectPageConfig,
-  type DepUserSelectUser,
-} from './dep-user-select'
-
-export { pickUserId } from './dep-user-select'
-export type { DepUserSelectUser } from './dep-user-select'
-
-export type DepUserSelectMultiKind = 'user' | 'dept'
-
-export type DepUserSelectMultiPicked = {
-  kind: DepUserSelectMultiKind
-  id: string | number
-  name?: string
-  email?: string
-}
-
-/** open(...) 入参；context 由业务传入，确认时原样回传 onOk */
-export type DepUserSelectMultiOpenPayload = {
-  title?: string
-  /** 是否允许勾选部门 */
-  deptSelectable?: boolean
-  context?: Record<string, any>
-}
-
-export type DepUserSelectMultiColumn = {
-  title?: ReactNode
-  key?: string
-  width?: number
-  render?: (value: unknown, row: DepUserSelectUser) => ReactNode
-}
-
-type DepUserSelectMultiModalProps = {
-  onAfterOk?: () => void | Promise<void>
-  onOk?: (data: {
-    users: DepUserSelectUser[]
-    deptIds: (string | number)[]
-    picked: DepUserSelectMultiPicked[]
-    payload?: DepUserSelectMultiOpenPayload
-  }) => boolean | void | Promise<boolean | void>
-  /** 用户列表列；不传则默认成员头像列 */
-  userColumns?: DepUserSelectMultiColumn[]
-  /** 已选面板列；不传则与 userColumns 相同 */
-  selectedPanelColumns?: DepUserSelectMultiColumn[]
-  /** 已选用户变更（便于业务侧同步扩展状态，如权限勾选） */
-  onUsersChange?: (users: DepUserSelectUser[]) => void
-  /**
-   * 确认前校验；返回 i18n 键则 toast 并阻止提交，返回 null 表示通过。
-   * 不传则：不可选部门时至少一名用户；可选部门时至少一名用户或一个部门。
-   */
-  onValidate?: (data: {
-    users: DepUserSelectUser[]
-    deptIds: (string | number)[]
-    payload?: DepUserSelectMultiOpenPayload
-  }) => string | null
-  opeType?: string
-  rootClassName?: string
-  width?: number
-}
-
-/** 默认成员列（头像 + 姓名 + 邮箱） */
-export function useDefaultDepUserMemberColumns(): DepUserSelectMultiColumn[] {
-  return useMemo(
-    () => [
-      {
-        title: 'system.department.fields.member',
-        key: 'member',
-        render: (_: unknown, data: DepUserSelectUser) => {
-          const name = data.display_name ?? data.userName ?? data.name
-          const mail = data.email ?? data.userEmail
-          return (
-            <div className="flex items-center gap-3">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-sm font-bold uppercase text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
-                {name?.[0] || mail?.[0] || '?'}
-              </div>
-              <div>
-                <div className="text-sm font-medium text-gray-900 dark:text-white">
-                  {name ?? mail ?? '—'}
-                </div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">{mail ?? ''}</div>
-              </div>
-            </div>
-          )
-        },
-      },
-    ],
-    [],
-  )
-}
-
-const DepUserSelectMultiModal = forwardRef(function DepUserSelectMultiModal(
-  props: DepUserSelectMultiModalProps,
-  ref,
-) {
-  const {
-    onAfterOk,
-    onOk,
-    userColumns: userColumnsProp,
-    selectedPanelColumns: selectedPanelColumnsProp,
-    onUsersChange,
-    onValidate,
-    opeType = 'select',
-    rootClassName = 'cx-modal-dep-user-select-multi',
-    width = 1340,
-  } = props
-  const { t } = useTranslation()
-  const { showToast } = useToast()
-
-  const defaultUserColumns = useDefaultDepUserMemberColumns()
-  const userColumns = userColumnsProp ?? defaultUserColumns
-  const selectedPanelColumns = selectedPanelColumnsProp ?? userColumns
-
-  const [payload, setPayload] = useState<DepUserSelectMultiOpenPayload | undefined>(undefined)
-  const payloadRef = useRef<DepUserSelectMultiOpenPayload | undefined>(undefined)
-  const [checkedDeptKeys, setCheckedDeptKeys] = useState<Set<string>>(() => new Set())
-  const [selectedUsers, setSelectedUsers] = useState<DepUserSelectUser[]>([])
-  const [submitting, setSubmitting] = useState(false)
-
-  const modal = useCxModal({
-    onOpen: (p) => {
-      const nextPayload = ((p as any) ?? {}) as DepUserSelectMultiOpenPayload
-      payloadRef.current = nextPayload
-      setPayload(nextPayload)
-      setCheckedDeptKeys(new Set())
-      setSelectedUsers([])
-      onUsersChange?.([])
-    },
-  })
-
-  const { isOpen, close } = modal
-  const effectivePayload = payload ?? payloadRef.current
-  const deptSelectable = effectivePayload?.deptSelectable === true
-  const title =
-    effectivePayload?.title ?? t('common.selectTable.single_tree_default_title') // 选择用户
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      open: modal.open,
-      close,
-    }),
-    [modal.open, close],
-  )
-
-  const pageConfigWithTree = useDepUserSelectPageConfig()
-
-  const handleDeptCheck = useCallback((key: any, checked: boolean) => {
-    const k = String(key)
-    setCheckedDeptKeys((prev) => {
-      const next = new Set(prev)
-      if (checked) next.add(k)
-      else next.delete(k)
-      return next
-    })
-  }, [])
-
-  const handleUsersChange = useCallback(
-    (next: DepUserSelectUser[]) => {
-      setSelectedUsers(next)
-      onUsersChange?.(next)
-    },
-    [onUsersChange],
-  )
-
-  const buildPicked = useCallback(
-    (users: DepUserSelectUser[], deptIds: (string | number)[]): DepUserSelectMultiPicked[] => {
-      return [
-        ...deptIds.map((id) => ({ kind: 'dept' as const, id })),
-        ...users
-          .map((u) => {
-            const id = pickUserId(u)
-            if (id == null) return null
-            return {
-              kind: 'user' as const,
-              id,
-              name: u?.display_name ?? u?.name ?? u?.userName,
-              email: u?.email ?? u?.userEmail,
-            }
-          })
-          .filter(Boolean),
-      ] as DepUserSelectMultiPicked[]
-    },
-    [],
-  )
-
-  const handleConfirm = useCallback(async () => {
-    const users = selectedUsers
-    const deptIds = Array.from(checkedDeptKeys)
-    const currentPayload = payload ?? payloadRef.current
-
-    const validateKey =
-      onValidate?.({ users, deptIds, payload: currentPayload }) ??
-      (() => {
-        const hasUser = users.length > 0
-        const hasDept = deptIds.length > 0
-        if (deptSelectable) {
-          if (!hasUser && !hasDept) return 'common.selectTable.multi_tree_pick_user_or_dept_required'
-        } else if (!hasUser) {
-          return 'common.selectTable.multi_tree_pick_user_required'
-        }
-        return null
-      })()
-
-    if (validateKey) {
-      showToast(t(validateKey), 'error')
-      return
-    }
-
-    setSubmitting(true)
-    try {
-      const picked = buildPicked(users, deptIds)
-      const result = await onOk?.({
-        users,
-        deptIds,
-        picked,
-        payload: currentPayload,
-      })
-      if (result === false) return
-      await onAfterOk?.()
-      close()
-    } catch {
-      // 业务 onOk 抛错：不关闭
-    } finally {
-      setSubmitting(false)
-    }
-  }, [
-    buildPicked,
-    checkedDeptKeys,
-    close,
-    deptSelectable,
-    onAfterOk,
-    onOk,
-    onValidate,
-    payload,
-    selectedUsers,
-    showToast,
-    t,
-  ])
-
-  const modalBody = isOpen ? (
-    <TreeSelectTableMulti.Horizontal
-      key={deptSelectable ? 'dept' : 'user'}
-      leftWidth="45%"
-      className="min-h-0 flex-1"
-      columns={userColumns as any}
-      pageConfig={pageConfigWithTree}
-      rowKey="userId"
-      treeCheckable={deptSelectable}
-      treeCheckedKeys={checkedDeptKeys}
-      onTreeCheck={(key, checked) => handleDeptCheck(key, checked)}
-      treeRenderLabel={(node: any) => node?.name ?? node?.title ?? '-'}
-      selectedPanelTitleKey="selectTable.selected_panel"
-      selectedPanelColumns={selectedPanelColumns as any}
-      value={selectedUsers}
-      onChange={(next) => handleUsersChange(Array.isArray(next) ? next : [])}
-    />
-  ) : null
-
-  const modalConfig = {
-    width,
-    rootClassName,
-    styles: {
-      container: { height: '95vh', maxHeight: '95vh' },
-      body: {
-        display: 'flex',
-        flexDirection: 'column',
-        flex: '1 1 0%',
-        minHeight: 0,
-        overflowY: 'hidden',
-        overflowX: 'hidden',
-        padding: 0,
-        maxHeight: 'none',
-      },
-    },
-  }
-
-  if (opeType === 'add') {
-    return (
-      <CxModal
-        title={title}
-        isOpen={isOpen}
-        onClose={close}
-        opeType="add"
-        onSubmit={handleConfirm}
-        submitting={submitting}
-        modalConfig={modalConfig}>
-        {modalBody}
-      </CxModal>
-    )
-  }
-
-  return (
-    <CxModal
-      title={title}
-      isOpen={isOpen}
-      onClose={close}
-      opeType="select"
-      onOk={handleConfirm}
-      submitting={submitting}
-      modalConfig={modalConfig}>
-      {modalBody}
-    </CxModal>
-  )
-})
-
-export default DepUserSelectMultiModal

package/src/components/common/modal/dep-user-select.tsx

@@ -1,249 +0,0 @@
-// i18n 中文：locales/zh/common.ts（common.selectTable · 部门树 + 单选用户）
-
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { getDepartmentTreeAPI, getDepartmentUsersAPI } from '@/api/system/department'
-import { TreeSelectTableSingle, createSelectTableConfig } from '@/components/table-view'
-import { useToast } from '@/contexts/ToastContext'
-import { CxModal, useCxModal } from '@cx-ui'
-
-export type DepUserSelectUser = {
-  id?: string | number
-  user_id?: string | number
-  userId?: string | number
-  name?: string
-  userName?: string
-  display_name?: string
-  email?: string
-  userEmail?: string
-  status?: number
-}
-
-/** open(...) 入参；context 由业务传入，确认时原样回传 onOk */
-export type DepUserSelectOpenPayload = {
-  title?: string
-  excludeUserId?: string | number | null
-  context?: Record<string, any>
-}
-
-type DepUserSelectModalProps = {
-  onAfterAdd?: () => void | Promise<void>
-  onOk?: (data: {
-    user: DepUserSelectUser
-    userId: string
-    payload: DepUserSelectOpenPayload | undefined
-  }) => boolean | void | Promise<boolean | void>
-}
-
-export function pickUserId(u: DepUserSelectUser | Record<string, any>): string | number | undefined {
-  return (
-    (u as any)?.id ??
-    (u as any)?.userId ??
-    (u as any)?.user_id
-  )
-}
-
-const excludeUserIdRef: { current: string | number | null | undefined } = {
-  current: undefined,
-}
-
-/** 与部门管理一致：顶级部门不传 departmentId；子部门才带部门条件查人 */
-const omitDepartmentIdRef: { current: boolean } = { current: true }
-
-function isTopLevelDepartmentNode(node: Record<string, any> | null | undefined): boolean {
-  if (node == null) return true
-  const p = node.parentId ?? node.parent_id
-  return p == null || p === '' || p === 0
-}
-
-/** 顶级不传 departmentId，其余与部门成员列表同一接口、原样返回 */
-async function departmentUsersTableAPI(params: Record<string, any>) {
-  const req = { ...params }
-  if (omitDepartmentIdRef.current) delete req.departmentId
-  return getDepartmentUsersAPI(req)
-}
-
-export const useDepUserSelectPageConfig = createSelectTableConfig({
-  tableAPI: departmentUsersTableAPI,
-  treeAPI: getDepartmentTreeAPI,
-  tree: {
-    title: 'system.department.title',
-    fieldNames: {
-      id: 'id',
-      label: 'name',
-      children: 'children',
-    },
-    searchField: 'departmentId',
-    autoSearch: true,
-    defaultSelectRoot: true,
-    unselectText: 'common.unselect_tree',
-    onSelect: (node: any) => {
-      omitDepartmentIdRef.current = isTopLevelDepartmentNode(node)
-    },
-  },
-  searchFields: [
-    {
-      prop: 'keyword',
-      label: 'system.department.search.member_placeholder', // 成员关键字
-      placeholder: 'system.department.search.member_placeholder',
-    },
-  ],
-  table: {
-    showPagination: true,
-    scrollX: false,
-  },
-  pagination: { page: 1, pageSize: 10, total: 0 },
-  pageInfo: {},
-  listQuery: { sort: 'createTime', order: 'desc' },
-  initialSearchFormData: {},
-})
-
-type DepUserSelectPaneProps = {
-  value: DepUserSelectUser | null
-  onChange: (next: DepUserSelectUser | null) => void
-}
-
-function DepUserSelectPane(props: DepUserSelectPaneProps) {
-  const { value, onChange } = props
-  const pageConfigWithTree = useDepUserSelectPageConfig()
-
-  const userColumns = useMemo(
-    () => [
-      {
-        title: 'system.department.fields.member',
-        key: 'member',
-        render: (_: unknown, data: DepUserSelectUser) => {
-          const name = data.display_name ?? data.userName ?? data.name
-          const mail = data.email ?? data.userEmail
-          return (
-          <div className="flex items-center gap-3">
-            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-sm font-bold uppercase text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
-              {name?.[0] || mail?.[0] || '?'}
-            </div>
-            <div>
-              <div className="text-sm font-medium text-gray-900 dark:text-white">
-                {name ?? mail ?? '—'}
-              </div>
-              <div className="text-xs text-gray-500 dark:text-gray-400">{mail ?? ''}</div>
-            </div>
-          </div>
-          )
-        },
-      },
-    ],
-    [],
-  )
-
-  return (
-    <TreeSelectTableSingle
-      className="min-h-0 flex-1"
-      columns={userColumns as any}
-      pageConfig={pageConfigWithTree}
-      rowKey="userId"
-      value={value}
-      onChange={(next) => onChange(next && typeof next === 'object' ? next : null)}
-    />
-  )
-}
-
-const DepUserSelectModal = forwardRef(function DepUserSelectModal(
-  props: DepUserSelectModalProps,
-  ref,
-) {
-  const { onAfterAdd, onOk } = props
-  const { t } = useTranslation()
-  const { showToast } = useToast()
-  const [selectedUser, setSelectedUser] = useState<DepUserSelectUser | null>(null)
-  const [submitting, setSubmitting] = useState(false)
-  const payloadRef = useRef<DepUserSelectOpenPayload | undefined>(undefined)
-  const [title, setTitle] = useState<string>('')
-
-  const modal = useCxModal({
-    onOpen: (p) => {
-      const next = ((p as any) ?? {}) as DepUserSelectOpenPayload
-      payloadRef.current = next
-      excludeUserIdRef.current = next?.excludeUserId
-      omitDepartmentIdRef.current = true // 树重挂载前默认按「不传部门」直到 onSelect 刷新
-      setSelectedUser(null)
-      setTitle(next?.title ?? t('common.selectTable.single_tree_default_title')) // 选择用户
-    },
-  })
-
-  const { isOpen, close } = modal
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      open: modal.open,
-      close,
-    }),
-    [modal.open, close],
-  )
-
-  const handleConfirm = useCallback(async () => {
-    const id = selectedUser ? pickUserId(selectedUser) : undefined
-    if (id == null || String(id).trim() === '') {
-      showToast(t('common.selectTable.single_tree_pick_required'), 'error') // 请先选择一名用户
-      return
-    }
-    const ex = excludeUserIdRef.current
-    if (ex != null && String(id) === String(ex)) {
-      showToast(t('common.selectTable.single_tree_pick_excluded'), 'error') // 该用户不可选
-      return
-    }
-    setSubmitting(true)
-    try {
-      const result = await onOk?.({
-        user: selectedUser as DepUserSelectUser,
-        userId: String(id),
-        payload: payloadRef.current,
-      })
-      if (result === false) return
-      await onAfterAdd?.()
-      close()
-    } catch {
-      // 业务 onOk 抛错：不关闭
-    } finally {
-      setSubmitting(false)
-    }
-  }, [close, onAfterAdd, onOk, selectedUser, showToast, t])
-
-  return (
-    <CxModal
-      title={title}
-      isOpen={isOpen}
-      onClose={close}
-      opeType="select"
-      onOk={handleConfirm}
-      submitting={submitting}
-      modalConfig={{
-        width: 960,
-        rootClassName: 'cx-modal-dep-user-select',
-        styles: {
-          container: { height: '88vh', maxHeight: '88vh' },
-          body: {
-            display: 'flex',
-            flexDirection: 'column',
-            flex: '1 1 0%',
-            minHeight: 0,
-            overflowY: 'hidden',
-            overflowX: 'hidden',
-            padding: 0,
-            maxHeight: 'none',
-          },
-        },
-      }}>
-      {isOpen ? <DepUserSelectPane value={selectedUser} onChange={setSelectedUser} /> : null}
-    </CxModal>
-  )
-})
-
-export default DepUserSelectModal