cx-chat 0.0.2 → 0.0.3

package/src/views/page-menus/model-metadata/role/modal/role-assign-users-modal.tsx

@@ -1,254 +0,0 @@
-import DepUserSelectMultiModal, {
-  pickUserId,
-  type DepUserSelectUser,
-} from '@/components/common/modal/dep-user-select-multi'
-import { useToast } from '@/contexts/ToastContext'
-import { roleModalShellStyles } from '@/views/page-system/role/modal/role-modal-shell-styles'
-import {
-  getModelMetadataRoleAssignUsersAPI,
-  getModelMetadataRoleAssignUsersContextAPI,
-  saveModelMetadataRoleAssignUsersAPI,
-} from '@api/menus/model-metadata/role'
-import { CxModal, useCxModal } from '@cx-ui'
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import RoleAssignUsersPanel from './role-assign-users-panel'
-import {
-  buildEmptyPermissionsFromContext,
-  mergeUserPermissionsWithContext,
-  parseLibrariesFromContext,
-  parseUsersFromAssignResponse,
-  type AssignContextLibrary,
-  type AssignUserEntry,
-} from './role-assign-users-utils'
-
-export type RoleAssignUsersModalOpenPayload = {
-  record: { id: string | number; name?: string }
-}
-
-const RoleAssignUsersModal = forwardRef<
-  { open: (p: RoleAssignUsersModalOpenPayload) => void; close: () => void },
-  { onSaved?: () => void | Promise<void> }
->(function RoleAssignUsersModal({ onSaved }, ref) {
-  const { t } = useTranslation()
-  const { showToast } = useToast()
-
-  const [loading, setLoading] = useState(false)
-  const [saving, setSaving] = useState(false)
-  const [roleId, setRoleId] = useState<string | number | null>(null)
-  const [titleHintFromList, setTitleHintFromList] = useState<string | undefined>(undefined)
-  const [libraries, setLibraries] = useState<AssignContextLibrary[]>([])
-  const [users, setUsers] = useState<AssignUserEntry[]>([])
-  const [activeUserId, setActiveUserId] = useState<string | null>(null)
-  const [panelBootstrapKey, setPanelBootstrapKey] = useState(0)
-
-  const librariesRef = useRef<AssignContextLibrary[]>([])
-  librariesRef.current = libraries
-
-  const userSelectRef = useRef<{ open: (p?: any) => void; close: () => void } | null>(null)
-
-  const modal = useCxModal({
-    onOpen: async (payload) => {
-      const id = payload?.data?.record?.id ?? payload?.opeId
-      setRoleId(id ?? null)
-      setLibraries([])
-      setUsers([])
-      setActiveUserId(null)
-      setPanelBootstrapKey((k) => k + 1)
-
-      if (id == null || `${id}`.trim() === '') {
-        setTitleHintFromList(undefined)
-        return
-      }
-
-      const hint = payload?.data?.record?.name
-      setTitleHintFromList(typeof hint === 'string' && hint.trim() ? hint.trim() : undefined)
-
-      setLoading(true)
-      try {
-        const [contextRes, assignRes] = await Promise.all([
-          getModelMetadataRoleAssignUsersContextAPI(id),
-          getModelMetadataRoleAssignUsersAPI(id),
-        ])
-        const libs = parseLibrariesFromContext(contextRes)
-        setLibraries(libs)
-        librariesRef.current = libs
-
-        const parsedUsers = parseUsersFromAssignResponse(assignRes).map((u) => ({
-          ...u,
-          permissions: mergeUserPermissionsWithContext(u.permissions, libs),
-        }))
-        setUsers(parsedUsers)
-        setActiveUserId(parsedUsers[0]?.userId ?? null)
-      } finally {
-        setLoading(false)
-      }
-    },
-    onClose: () => {
-      setRoleId(null)
-      setLibraries([])
-      setUsers([])
-      setActiveUserId(null)
-      setTitleHintFromList(undefined)
-    },
-  })
-
-  const { isOpen, close } = modal
-
-  const handleAddUsersClick = useCallback(() => {
-    userSelectRef.current?.open({
-      title: t('menus.model_metadata.role.assign_users_pick_users_title'), // 选择用户
-      deptSelectable: false,
-    })
-  }, [t])
-
-  const handleUserSelectOk = useCallback(
-    async ({ users: picked }: { users: DepUserSelectUser[] }) => {
-      const libs = librariesRef.current
-      let dupCount = 0
-      const newEntries: AssignUserEntry[] = []
-
-      setUsers((prev) => {
-        const existingIds = new Set(prev.map((u) => String(u.userId)))
-        for (const u of picked) {
-          const id = pickUserId(u)
-          if (id == null) continue
-          const sid = String(id)
-          if (existingIds.has(sid)) {
-            dupCount++
-            continue
-          }
-          existingIds.add(sid)
-          newEntries.push({
-            userId: sid,
-            userName:
-              u.display_name ?? u.userName ?? u.name ?? u.email ?? u.userEmail ?? sid,
-            userPhone: (u as any).userPhone ?? (u as any).phone ?? '',
-            permissions: buildEmptyPermissionsFromContext(libs),
-          })
-        }
-        if (!newEntries.length) return prev
-        return [...prev, ...newEntries]
-      })
-
-      if (newEntries.length > 0) {
-        setActiveUserId((cur) => cur ?? newEntries[0]?.userId ?? null)
-      }
-      if (dupCount > 0) {
-        showToast(t('menus.model_metadata.role.assign_users_duplicate'), 'info') // 已跳过重复用户
-      }
-    },
-    [showToast, t],
-  )
-
-  const handleRemoveUser = useCallback((userId: string) => {
-    setUsers((prev) => {
-      const next = prev.filter((u) => u.userId !== userId)
-      setActiveUserId((cur) => {
-        if (cur !== userId) return cur
-        return next[0]?.userId ?? null
-      })
-      return next
-    })
-  }, [])
-
-  const handlePermissionValueChange = useCallback(
-    (userId: string, metadataId: string, permissionId: string, value: string) => {
-      setUsers((prev) =>
-        prev.map((u) => {
-          if (u.userId !== userId) return u
-          return {
-            ...u,
-            permissions: u.permissions.map((p) =>
-              p.metadataId === metadataId && p.permissionId === permissionId
-                ? { ...p, permissionValue: value }
-                : p,
-            ),
-          }
-        }),
-      )
-    },
-    [],
-  )
-
-  const handleSave = useCallback(async () => {
-    if (!roleId) return
-    setSaving(true)
-    try {
-      await saveModelMetadataRoleAssignUsersAPI(roleId, {
-        users: users.map((u) => ({
-          userId: u.userId,
-          permissions: u.permissions.map((p) => ({
-            permissionValue: p.permissionValue ?? '',
-            metadataId: p.metadataId,
-            permissionId: p.permissionId,
-          })),
-        })),
-      })
-      showToast(t('common.operation_success'), 'success') // 操作成功
-      await onSaved?.()
-      close()
-    } catch {
-      // 失败由 axios 拦截器等统一提示
-    } finally {
-      setSaving(false)
-    }
-  }, [roleId, users, showToast, t, onSaved, close])
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      open: (payload: RoleAssignUsersModalOpenPayload) => {
-        modal.open({
-          opeType: 'edit',
-          opeId: payload.record.id,
-          data: { record: payload.record },
-        })
-      },
-      close,
-    }),
-    [modal.open, close],
-  )
-
-  const titleBase = t('menus.model_metadata.role.assign_users_title') // 添加用户
-  const modalTitle = titleHintFromList ? `${titleBase} — ${titleHintFromList}` : titleBase
-
-  return (
-    <>
-      <CxModal
-        isOpen={isOpen}
-        title={modalTitle}
-        onClose={close}
-        opeType="edit"
-        onSubmit={() => void handleSave()}
-        submitting={saving}
-        modalConfig={{
-          width: 1380,
-          styles: roleModalShellStyles,
-          rootClassName: 'cx-modal-role-assign',
-        }}
-      >
-        <div className="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden">
-          <RoleAssignUsersPanel
-            key={`${String(roleId)}-${panelBootstrapKey}`}
-            active={isOpen}
-            loading={loading}
-            libraries={libraries}
-            users={users}
-            activeUserId={activeUserId}
-            onActiveUserIdChange={setActiveUserId}
-            onAddUsersClick={handleAddUsersClick}
-            onRemoveUser={handleRemoveUser}
-            onPermissionValueChange={handlePermissionValueChange}
-            maxHeightClass="h-full min-h-0 w-full flex-1 overflow-hidden"
-          />
-        </div>
-      </CxModal>
-      <DepUserSelectMultiModal ref={userSelectRef} onOk={handleUserSelectOk} />
-    </>
-  )
-})
-
-RoleAssignUsersModal.displayName = 'RoleAssignUsersModal'
-export default RoleAssignUsersModal

package/src/views/page-menus/model-metadata/role/modal/role-assign-users-panel.tsx

@@ -1,393 +0,0 @@
-// i18n 中文：locales/zh/menus/model-metadata/role.ts、manage.ts（permissionName / permissionColumns）
-
-import { CxButton, CxInput, CxSkeleton, CxTable } from '@cx-ui'
-import clsx from 'clsx'
-import { Plus, Trash2 } from 'lucide-react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import {
-  formatPermissionColumns,
-  type AssignContextLibrary,
-  type AssignUserEntry,
-  type UserPermissionRow,
-} from './role-assign-users-utils'
-
-type RoleAssignUsersPanelProps = {
-  active: boolean
-  loading: boolean
-  libraries: AssignContextLibrary[]
-  users: AssignUserEntry[]
-  activeUserId: string | null
-  onActiveUserIdChange: (userId: string) => void
-  onAddUsersClick: () => void
-  onRemoveUser: (userId: string) => void
-  onPermissionValueChange: (
-    userId: string,
-    metadataId: string,
-    permissionId: string,
-    value: string,
-  ) => void
-  maxHeightClass?: string
-}
-
-export default function RoleAssignUsersPanel(props: RoleAssignUsersPanelProps) {
-  const {
-    active,
-    loading,
-    libraries,
-    users,
-    activeUserId,
-    onActiveUserIdChange,
-    onAddUsersClick,
-    onRemoveUser,
-    onPermissionValueChange,
-    maxHeightClass,
-  } = props
-  const { t } = useTranslation()
-
-  const contentScrollRef = useRef<HTMLDivElement>(null)
-  const sectionRefs = useRef<Record<string, HTMLElement | null>>({})
-  const [activeMetadataId, setActiveMetadataId] = useState<string | null>(null)
-
-  const activeUser = useMemo(
-    () => users.find((u) => u.userId === activeUserId) ?? null,
-    [users, activeUserId],
-  )
-
-  const permRowsByMeta = useMemo(() => {
-    const map = new Map<string, UserPermissionRow[]>()
-    for (const row of activeUser?.permissions ?? []) {
-      const mid = row.metadataId
-      if (!map.has(mid)) map.set(mid, [])
-      map.get(mid)!.push(row)
-    }
-    return map
-  }, [activeUser?.permissions])
-
-  useEffect(() => {
-    if (!libraries.length) {
-      setActiveMetadataId(null)
-      return
-    }
-    setActiveMetadataId((cur) => {
-      if (cur && libraries.some((l) => l.metadataId === cur)) return cur
-      return libraries[0]?.metadataId ?? null
-    })
-  }, [libraries, activeUserId])
-
-  useEffect(() => {
-    if (loading || !activeUser || !libraries.length) return
-    const container = contentScrollRef.current
-    if (!container) return
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const visible = entries
-          .filter((e) => e.isIntersecting)
-          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)
-        const top = visible[0]
-        if (!top?.target) return
-        const id = top.target.getAttribute('data-metadata-id')
-        if (id) setActiveMetadataId(id)
-      },
-      { root: container, threshold: [0, 0.2, 0.45, 0.7], rootMargin: '-12% 0px -55% 0px' },
-    )
-
-    for (const lib of libraries) {
-      const el = sectionRefs.current[lib.metadataId]
-      if (el) {
-        el.setAttribute('data-metadata-id', lib.metadataId)
-        observer.observe(el)
-      }
-    }
-    return () => observer.disconnect()
-  }, [libraries, activeUser, loading])
-
-  const scrollToMeta = useCallback((metadataId: string) => {
-    setActiveMetadataId(metadataId)
-    const el = sectionRefs.current[metadataId]
-    const container = contentScrollRef.current
-    if (!el || !container) return
-    const top = el.offsetTop - container.offsetTop
-    container.scrollTo({ top: Math.max(0, top - 8), behavior: 'smooth' })
-  }, [])
-
-  const hasLayoutLock = Boolean(maxHeightClass && String(maxHeightClass).trim())
-  const rootLayoutClass = clsx(
-    'flex min-h-0 gap-4 overflow-hidden',
-    hasLayoutLock ? clsx(maxHeightClass, 'min-h-0 flex-1') : 'min-h-[320px]',
-  )
-  const scrollColClass = 'min-h-0 flex-1 basis-0 overflow-y-auto overflow-x-hidden'
-  /** 与 role-permission-assign-panel 侧栏标题一致：固定 44px 高 */
-  const sidePanelHeaderClass =
-    'flex h-[44px] min-h-[44px] shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50'
-  const sidePanelHeaderTitleClass =
-    'line-clamp-1 min-w-0 flex-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300'
-
-  if (!active) return null
-
-  const renderLibrarySection = (lib: AssignContextLibrary) => {
-    const mid = lib.metadataId
-    const templateMap = new Map(
-      (lib.permissions || []).map((p) => [p.permissionId, p] as const),
-    )
-    const rows = (permRowsByMeta.get(mid) ?? []).filter((r) => templateMap.has(r.permissionId))
-
-    const columns = [
-      {
-        title: t('menus.model_metadata.manage.fields.permissionName'), // 权限组名称
-        key: 'permissionName',
-        width: 160,
-        render: (_: unknown, row: UserPermissionRow) => {
-          const tpl = templateMap.get(row.permissionId)
-          return (
-            <span className="text-sm text-gray-900 dark:text-gray-100">
-              {tpl?.permissionName || '—'}
-            </span>
-          )
-        },
-      },
-      {
-        title: t('menus.model_metadata.manage.fields.permissionColumns'), // 模板允许的列名
-        key: 'permissionColumns',
-        minWidth: 200,
-        render: (_: unknown, row: UserPermissionRow) => {
-          const tpl = templateMap.get(row.permissionId)
-          return (
-            <span className="text-sm text-gray-600 dark:text-gray-300">
-              {formatPermissionColumns(tpl?.permissionColumns ?? [])}
-            </span>
-          )
-        },
-      },
-      {
-        title: t('menus.model_metadata.role.assign_users_permission_value'), // 权限值
-        key: 'permissionValue',
-        width: 240,
-        render: (_: unknown, row: UserPermissionRow) => {
-          if (!activeUser) return null
-          return (
-            <CxInput
-              className="w-[240px] max-w-full"
-              value={row.permissionValue}
-              onChange={(e) =>
-                onPermissionValueChange(
-                  activeUser.userId,
-                  row.metadataId,
-                  row.permissionId,
-                  e.target.value,
-                )
-              }
-              placeholder={t('menus.model_metadata.role.assign_users_permission_value')}
-            />
-          )
-        },
-      },
-    ]
-
-    return (
-      <section
-        key={mid}
-        ref={(el) => {
-          sectionRefs.current[mid] = el
-        }}
-        data-metadata-id={mid}
-        className={clsx(
-          'scroll-mt-2 rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800',
-          activeMetadataId === mid
-            ? 'border-blue-300 ring-1 ring-blue-200/80 dark:border-blue-600 dark:ring-blue-900/50'
-            : 'border-gray-200 dark:border-gray-600',
-        )}
-      >
-        <h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
-          {t('menus.model_metadata.role.assign_users_library_title', {
-            subject: lib.subject || mid,
-            databaseName: lib.databaseName || '—',
-          })}
-        </h3>
-        {rows.length === 0 ? (
-          <p className="py-4 text-center text-sm text-gray-500">{t('common.no_data')}</p>
-        ) : (
-          <CxTable
-            className="min-w-0 w-full"
-            columns={columns}
-            dataSource={rows.map((r) => ({
-              ...r,
-              key: `${r.metadataId}::${r.permissionId}`,
-            }))}
-            pagination={false}
-            scroll={{ x: true }}
-          />
-        )}
-      </section>
-    )
-  }
-
-  const renderMetaNav = () => {
-    if (loading || !libraries.length || !activeUser) return null
-    return (
-      <div
-        className={clsx(
-          'flex w-52 shrink-0 flex-col overflow-hidden border-r border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800',
-          hasLayoutLock && 'h-full min-h-0',
-        )}
-      >
-        <div className={sidePanelHeaderClass}>
-          <h2 className={sidePanelHeaderTitleClass}>
-            {t('menus.model_metadata.role.assign_users_nav_title')}
-          </h2>
-        </div>
-        <nav className={clsx(scrollColClass, 'p-2')}>
-          <ul className="space-y-1">
-            {libraries.map((lib) => {
-              const isNavActive = lib.metadataId === activeMetadataId
-              return (
-                <li key={lib.metadataId}>
-                  <button
-                    type="button"
-                    onClick={() => scrollToMeta(lib.metadataId)}
-                    className={clsx(
-                      'w-full rounded-l-lg border-r-[3px] px-2 py-2 text-left text-sm transition-colors',
-                      isNavActive
-                        ? 'border-r-blue-500 bg-blue-50 font-medium text-blue-900 dark:border-r-blue-400 dark:bg-blue-950/40 dark:text-blue-100'
-                        : 'border-r-transparent text-gray-800 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-700/50',
-                    )}
-                  >
-                    <div className="line-clamp-2">{lib.subject || lib.metadataId}</div>
-                    <div
-                      className={clsx(
-                        'mt-0.5 line-clamp-1 text-xs',
-                        isNavActive
-                          ? 'text-blue-700/80 dark:text-blue-300/80'
-                          : 'text-gray-500 dark:text-gray-400',
-                      )}
-                    >
-                      {lib.databaseName ?? '—'}
-                    </div>
-                  </button>
-                </li>
-              )
-            })}
-          </ul>
-        </nav>
-      </div>
-    )
-  }
-
-  return (
-    <div className={rootLayoutClass}>
-      <div
-        className={clsx(
-          'flex min-w-0 w-72 shrink-0 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800',
-          hasLayoutLock && 'h-full min-h-0',
-        )}
-      >
-        <div className="flex min-h-[44px] shrink-0 items-center justify-between gap-2 border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
-          <h2 className="min-w-0 flex-1 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
-            {t('menus.model_metadata.role.assign_users_user_list')}
-          </h2>
-          <CxButton
-            type="primary"
-            size="small"
-            icon={<Plus size={14} />}
-            onClick={onAddUsersClick}
-          >
-            {t('menus.model_metadata.role.assign_users_add_user')}
-          </CxButton>
-        </div>
-        <div className={clsx(scrollColClass, 'p-2')}>
-          {loading ? (
-            <ul className="space-y-2 px-1 py-1">
-              {Array.from({ length: 5 }).map((_, i) => (
-                <li key={i}>
-                  <CxSkeleton active paragraph={{ rows: 2, width: ['80%', '50%'] }} title={false} />
-                </li>
-              ))}
-            </ul>
-          ) : users.length === 0 ? (
-            <p className="px-2 py-6 text-center text-sm text-gray-500">
-              {t('menus.model_metadata.role.assign_users_no_user')}
-            </p>
-          ) : (
-            <ul className="space-y-1">
-              {users.map((u) => {
-                const isActive = u.userId === activeUserId
-                return (
-                  <li key={u.userId}>
-                    <div
-                      className={clsx(
-                        'flex w-full items-stretch overflow-hidden rounded-lg border text-left text-sm transition-colors',
-                        isActive
-                          ? 'border-blue-300 bg-blue-50 text-blue-900 dark:border-blue-700 dark:bg-blue-950/40 dark:text-blue-100'
-                          : 'border-transparent bg-transparent text-gray-800 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-700/40',
-                      )}
-                    >
-                      <button
-                        type="button"
-                        onClick={() => onActiveUserIdChange(u.userId)}
-                        className="min-w-0 flex-1 px-3 py-2 text-left"
-                      >
-                        <div className="line-clamp-1 font-medium">
-                          {u.userName || u.userId}
-                        </div>
-                        {u.userPhone ? (
-                          <div className="mt-0.5 line-clamp-1 text-xs text-gray-500 dark:text-gray-400">
-                            {u.userPhone}
-                          </div>
-                        ) : null}
-                      </button>
-                      <div className="flex shrink-0 items-center px-2">
-                        <CxButton.Icon
-                          type="default"
-                          title={t('menus.model_metadata.role.assign_users_remove_user')}
-                          icon={<Trash2 size={14} />}
-                          onClick={() => onRemoveUser(u.userId)}
-                        />
-                      </div>
-                    </div>
-                  </li>
-                )
-              })}
-            </ul>
-          )}
-        </div>
-      </div>
-
-      <div
-        className={clsx(
-          'flex min-w-0 flex-1 overflow-hidden rounded-xl border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/50',
-          hasLayoutLock && 'h-full min-h-0',
-        )}
-      >
-        {renderMetaNav()}
-
-        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-          <div className={sidePanelHeaderClass}>
-            <h2 className={sidePanelHeaderTitleClass}>
-              {t('menus.model_metadata.role.assign_users_permission_panel')}
-              {activeUser?.userName ? ` — ${activeUser.userName}` : ''}
-            </h2>
-          </div>
-          <div ref={contentScrollRef} className={clsx(scrollColClass, 'p-3')}>
-            {loading ? (
-              <div className="space-y-4">
-                {Array.from({ length: 3 }).map((_, i) => (
-                  <CxSkeleton key={i} active paragraph={{ rows: 4 }} />
-                ))}
-              </div>
-            ) : !activeUser ? (
-              <p className="py-10 text-center text-sm text-gray-500">
-                {t('menus.model_metadata.role.assign_users_no_user')}
-              </p>
-            ) : libraries.length === 0 ? (
-              <p className="py-10 text-center text-sm text-gray-500">{t('common.no_data')}</p>
-            ) : (
-              <div className="space-y-4">{libraries.map(renderLibrarySection)}</div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}