cx-chat 0.0.1

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

@@ -0,0 +1,254 @@
+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

@@ -0,0 +1,393 @@
+// 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>
+  )
+}