cx-chat 0.0.1

package/src/views/page-system/user/modal/assign-roles-modal.tsx

@@ -0,0 +1,389 @@
+import React, {
+    forwardRef,
+    useImperativeHandle,
+    useMemo,
+    useState,
+    useEffect,
+} from 'react'
+import { message } from 'antd'
+import clsx from 'clsx'
+import { Loader2, Search, X, Check, Plus } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useAuth } from '@/contexts/AuthContext'
+import { CxButton, CxInput, CxModal } from '@cx-ui'
+import './modal-style/submit-modal.less'
+import { assignRolesAPI, getUserDetailAPI } from '@/api/system/user'
+import { getRoleList } from '@/api/system/role'
+interface AssignRolesSubmitPayload {
+    userId: number | string | undefined
+    roleIds: Array<number | string>
+    roles: string[]
+    roleItems: any[]
+    source: any
+}
+
+interface AssignRolesModalProps {
+    onOk?: (payload: AssignRolesSubmitPayload) => void | Promise<void>
+}
+
+/** 判断目标用户 id 是否与当前登录用户相同（兼容字符串/数字）。 */
+function isTargetCurrentUser(targetId: unknown, me: { id?: string | number } | null | undefined): boolean {
+    if (me?.id == null || targetId === undefined || targetId === null) return false
+    return String(targetId) === String(me.id)
+}
+
+/** 判断是否为默认角色：角色名称为 default 的归类到不可修改角色。 */
+function isDefaultRole(role: any): boolean {
+    const name = role?.name
+    if (name === undefined || name === null) return false
+    return String(name).toLowerCase() === 'default'
+}
+
+const AssignRolesModal = forwardRef<any, AssignRolesModalProps>(function AssignRolesModal(_props, ref) {
+    const { onOk: onSubmit } = (_props || {}) as AssignRolesModalProps
+    const [isOpen, setIsOpen] = useState(false) // 是否打开弹框
+    const [currentPayload, setCurrentPayload] = useState<any>({}) // 打开弹窗时透传对象
+    const { t } = useTranslation()
+    const { user: currentUser } = useAuth()
+    const [isLoadingRoles, setIsLoadingRoles] = useState(false)
+    const [targetUserForRoles, setTargetUserForRoles] = useState<any>(null)
+    const [selectedRoles, setSelectedRoles] = useState<string[]>([])
+    const [assignableRoles, setAssignableRoles] = useState<Array<{ role: any }>>([])
+    const [roleSearchTerm, setRoleSearchTerm] = useState('')
+    // 弹框名称
+    const title = useMemo(
+        () => (t('system.user.modal_user.assign_roles_title', { name: currentPayload?.name || '' })),
+        [t, currentPayload],
+    )
+
+    /** 默认角色名称：用于保证默认角色始终选中。 */
+    const defaultRoleName = useMemo(() => {
+        const found = (Array.isArray(assignableRoles) ? assignableRoles : [])
+            .map((x) => x?.role)
+            .find((r) => isDefaultRole(r))
+        return found?.name ? String(found.name) : 'default'
+    }, [assignableRoles])
+
+    /** 确保默认角色始终处于选中状态（避免被取消勾选）。 */
+    const ensureDefaultRoleSelected = (nextSelected: string[]) => {
+        const list = Array.isArray(nextSelected) ? nextSelected.filter(Boolean) : []
+        if (list.includes(defaultRoleName)) return list
+        return [...list, defaultRoleName]
+    }
+
+    /** 角色分组：默认角色（name=default）归类到不可修改角色。 */
+    const roleGroups = useMemo(() => {
+        const all = Array.isArray(assignableRoles) ? assignableRoles : []
+        const unmodifiable = all.filter((x) => isDefaultRole(x?.role))
+        const manageable = all.filter((x) => !isDefaultRole(x?.role))
+        return [
+            { key: 'manageable', roles: manageable, title: t('system.user.assign_roles.manageable_roles') },
+            { key: 'unmodifiable', roles: unmodifiable, title: t('system.user.assign_roles.unmodifiable_roles') },
+        ]
+    }, [assignableRoles, t])
+
+    useEffect(() => {
+        // assignableRoles/默认角色确定后，强制补齐默认角色为选中
+        setSelectedRoles((prev) => ensureDefaultRoleSelected(prev))
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- 仅用于兜底保证 default 常驻
+    }, [defaultRoleName])
+
+    const close = () => {
+        // 关闭弹框
+        setIsOpen(false)
+        setCurrentPayload({})
+        setTargetUserForRoles(null)
+        setRoleSearchTerm('')
+    }
+    const onOk = async () => {
+        try {
+            const userId = currentPayload?.opeId ?? currentPayload?.id
+            if (!userId) {
+                message.error(t('system.user.messages.user_id_missing'))
+                return
+            }
+            if (isTargetCurrentUser(userId, currentUser)) {
+                message.warning(t('system.user.assign_roles.self_warning'))
+                return
+            }
+
+            const selectedRoleItems = assignableRoles
+                .map((item) => item.role)
+                .filter((role) => selectedRoles.includes(role?.name))
+            const roleIds = selectedRoleItems
+                .map((role) => role?.id)
+                .filter((id) => id !== undefined && id !== null)
+
+            await assignRolesAPI({
+                userId,
+                roleIds,
+            })
+
+            message.success(t('system.user.messages.save_success'))
+
+            await onSubmit?.({
+                userId,
+                roleIds,
+                roles: selectedRoles,
+                roleItems: selectedRoleItems,
+                source: currentPayload,
+            })
+            close()
+        } catch (e) {
+            // message.error(t('system.user.messages.submit_failed'))
+        }
+    }
+
+    const normalizeRoles = (raw: any): Array<{ role: any }> => {
+        const list = Array.isArray(raw)
+            ? raw
+            : Array.isArray(raw?.data?.data)
+                ? raw.data.data
+                : Array.isArray(raw?.data)
+                    ? raw.data
+                    : []
+
+        return list.map((role: any) => ({ role }))
+    }
+
+    const normalizeUserDetail = (raw: any) => {
+        if (raw?.data?.data) return raw.data.data
+        if (raw?.data) return raw.data
+        return raw || {}
+    }
+
+    const extractRoleIdsFromDetail = (detail: any): Array<number | string> => {
+        const raw =
+            detail?.roles ??
+            detail?.roleIds ??
+            detail?.role_ids ??
+            detail?.role_id_list ??
+            detail?.roleList ??
+            null
+
+        if (!Array.isArray(raw) || raw.length === 0) return []
+
+        // raw could be: [{id:1}, ...] OR [1,2,3]
+        return raw
+            .map((item: any) => (typeof item === 'object' && item ? item.id : item))
+            .filter((id: any) => id !== undefined && id !== null && id !== '')
+    }
+
+
+    useImperativeHandle(
+        // 暴露给父组件的方法 不常用
+        ref,
+        () => ({
+            // 父组件调用打开弹框：
+            open: async (payload: any = {}) => {
+                const userId = payload?.opeId ?? payload?.id
+                if (isTargetCurrentUser(userId, currentUser)) {
+                    message.warning(t('system.user.assign_roles.self_warning'))
+                    return
+                }
+                setCurrentPayload(payload)
+                setTargetUserForRoles(payload)
+                setSelectedRoles(ensureDefaultRoleSelected(Array.isArray(payload?.roles) ? payload.roles : []))
+                setRoleSearchTerm('')
+                setIsLoadingRoles(true)
+                try {
+                    const rolesRes = await getRoleList()
+                    const nextAssignableRoles = normalizeRoles(rolesRes)
+                    setAssignableRoles(nextAssignableRoles)
+
+                    if (userId) {
+                        const detailRes = await getUserDetailAPI(userId)
+                        const detail = normalizeUserDetail(detailRes)
+                        const roleIds = extractRoleIdsFromDetail(detail)
+
+                        if (roleIds.length > 0) {
+                            const idSet = new Set(roleIds.map((id) => String(id)))
+                            const roleNames = nextAssignableRoles
+                                .map((item) => item.role)
+                                .filter((role) => idSet.has(String(role?.id)))
+                                .map((role) => role?.name)
+                                .filter((name) => Boolean(name))
+                            setSelectedRoles(ensureDefaultRoleSelected(roleNames))
+                        }
+                    }
+                } catch (error) {
+                    setAssignableRoles([])
+                    // message.error(t('system.user.messages.fetch_roles_failed'))
+                } finally {
+                    setIsLoadingRoles(false)
+                }
+
+                setIsOpen(true)
+            },
+            close,
+        }),
+        [close, currentUser, t],
+    )
+
+    return (
+        <CxModal
+            title={title}
+            isOpen={isOpen}
+            onClose={close}
+            onOk={onOk}
+            modalConfig={{
+                width: '60%',
+            }}
+        >
+            {isLoadingRoles ? (
+                <div className="flex items-center justify-center h-[450px]">
+                    <Loader2 className="animate-spin h-10 w-10 text-indigo-500" />
+                </div>
+            ) : (
+                <div className="space-y-6">
+                    {isTargetCurrentUser(targetUserForRoles?.id, currentUser) && (
+                        <div className="p-4 bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 text-sm rounded-2xl mb-4 border border-amber-100 dark:border-amber-900/30">
+                            {t('system.user.assign_roles.self_warning')}
+                        </div>
+                    )}
+
+                    <div className="h-[450px] flex flex-col">
+                        {/* Search Bar */}
+                        <div className="relative group shrink-0 mb-6">
+                            <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                                <Search size={18} className="text-gray-400 group-focus-within:text-indigo-500 transition-colors" />
+                            </div>
+                            <CxInput
+                                type="text"
+                                placeholder={t('system.user.assign_roles.search_placeholder')}
+                                value={roleSearchTerm}
+                                onChange={(e) => setRoleSearchTerm(e.target.value)}
+                            />
+                            {roleSearchTerm && (
+                                <CxButton.Icon
+                                    type="default"
+                                    icon={<X size={16} />}
+                                    onClick={() => setRoleSearchTerm('')}
+                                    className="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 active:scale-90 transition-all"
+                                />
+                            )}
+                        </div>
+
+                        {/* Categorized Bento Grid */}
+                        <div className="flex-1 overflow-y-auto custom-scrollbar min-h-0 pr-1">
+                            <div className="space-y-8 pb-4">
+                                {roleGroups.map(({ key, roles, title }) => {
+                                    const filtered = roles.filter(item =>
+                                        String(item?.role?.name ?? '').toLowerCase().includes(roleSearchTerm.toLowerCase()) ||
+                                        String(item?.role?.description ?? '').toLowerCase().includes(roleSearchTerm.toLowerCase())
+                                    );
+
+                                    if (filtered.length === 0) return null;
+
+                                    return (
+                                        <div key={key}>
+                                            <div className="flex items-center gap-2 mb-4">
+                                                <div className={clsx(
+                                                    "h-1.5 w-1.5 rounded-full shadow-glow",
+                                                    key === 'unmodifiable'
+                                                        ? "bg-gray-300 dark:bg-gray-600"
+                                                        : "bg-indigo-500"
+                                                )} />
+                                                <h3 className="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest">
+                                                    {title}
+                                                </h3>
+                                            </div>
+                                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+                                                {filtered.map((item) => {
+                                                    const roleName = String(item?.role?.name ?? '')
+                                                    const isDefault = isDefaultRole(item?.role)
+                                                    const isSelected = isDefault || selectedRoles.includes(roleName)
+                                                    const isSelf = isTargetCurrentUser(targetUserForRoles?.id, currentUser);
+                                                    const isDisabled = isSelf || isDefault;
+
+                                                    return (
+                                                        <div
+                                                            key={item.role.id}
+                                                            onClick={() => {
+                                                                if (isDisabled) return;
+                                                                if (isSelected) {
+                                                                    setSelectedRoles(
+                                                                        ensureDefaultRoleSelected(
+                                                                            selectedRoles.filter(r => r !== roleName)
+                                                                        )
+                                                                    );
+                                                                } else {
+                                                                    setSelectedRoles(
+                                                                        ensureDefaultRoleSelected([...selectedRoles, roleName])
+                                                                    );
+                                                                }
+                                                            }}
+                                                            className={clsx(
+                                                                "group relative p-3.5 rounded-xl border transition-all duration-300 flex flex-col justify-center min-h-[80px] cursor-pointer",
+                                                                isDefault
+                                                                    ? "bg-gray-50 border-gray-200 dark:bg-gray-900/30 dark:border-gray-700/60"
+                                                                    : isSelected
+                                                                    ? "bg-blue-50/50 border-blue-400 shadow-sm dark:bg-blue-900/10 dark:border-blue-500/50 hover:shadow-md hover:-translate-y-0.5"
+                                                                    : "bg-white border-gray-100 hover:border-indigo-300 dark:bg-gray-800/40 dark:border-gray-700/50 dark:hover:border-indigo-500/30 hover:shadow-sm hover:-translate-y-0.5",
+                                                                isDisabled && "opacity-60 cursor-not-allowed grayscale-[0.5]"
+                                                            )}
+                                                        >
+                                                            <div className="flex justify-between items-start">
+                                                                <div className="flex-1 min-w-0 pr-2">
+                                                                    <div className="flex items-center gap-1.5">
+                                                                        <h4 className={clsx(
+                                                                            "text-sm font-bold truncate transition-colors",
+                                                                            isDefault
+                                                                                ? "text-gray-700 dark:text-gray-200"
+                                                                                : isSelected
+                                                                                    ? "text-blue-700 dark:text-blue-400"
+                                                                                    : "text-gray-900 dark:text-gray-100"
+                                                                        )}>
+                                                                            {item.role.name}
+                                                                        </h4>
+                                                                    </div>
+                                                                    {item.role.description && (
+                                                                        <p className={clsx(
+                                                                            "text-[11px] line-clamp-1 mt-0.5",
+                                                                            ""
+                                                                        )}>
+                                                                            <span className="text-gray-500 dark:text-gray-400">{item.role.description}</span>
+                                                                        </p>
+                                                                    )}
+                                                                </div>
+                                                                <div className="flex-shrink-0 pt-0.5">
+                                                                    {isSelected ? (
+                                                                        <Check size={16} className={clsx(
+                                                                            "animate-in zoom-in duration-300",
+                                                                            "text-blue-600 dark:text-blue-400"
+                                                                        )} />
+                                                                    ) : (
+                                                                        <Plus size={16} className="text-gray-300 group-hover:text-indigo-400 transition-all group-hover:rotate-90" />
+                                                                    )}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    );
+                                                })}
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+
+                            {/* Empty Search Result */}
+                            {assignableRoles.filter(item =>
+                                item.role.name.toLowerCase().includes(roleSearchTerm.toLowerCase()) ||
+                                item.role.description?.toLowerCase().includes(roleSearchTerm.toLowerCase())
+                            ).length === 0 && (
+                                    <div className="py-20 text-center flex flex-col items-center justify-center space-y-4">
+                                        <div className="p-4 bg-gray-50 dark:bg-gray-800/40 rounded-full">
+                                            <Search size={32} className="text-gray-300" />
+                                        </div>
+                                        <p className="text-gray-500 text-sm font-medium">{t('system.user.assign_roles.no_results')}</p>
+                                    </div>
+                                )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </CxModal>
+    )
+})
+
+export default AssignRolesModal

package/src/views/page-system/user/modal/detail-modal.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef, useImperativeHandle, useState } from 'react'
+import { Descriptions } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { CxModal, CxTag, useCxModal } from '@cx-ui'
+import { getUserDetailAPI } from '@/api/system/user'
+import { Spin } from 'antd'
+
+const DetailModal = forwardRef(function DetailModal(_props, ref) {
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(false)
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const opeId = payload.opeId ?? payload.data?.id
+      setLoading(true)
+      modal.setFormData(undefined)
+      if (opeId == null || `${opeId}`.trim() === '') {
+        setLoading(false)
+        return
+      }
+      try {
+        const res = await getUserDetailAPI(opeId)
+        modal.setFormData(res?.data)
+      } finally {
+        setLoading(false)
+      }
+    },
+    onClose: () => {
+      setLoading(false)
+    },
+  })
+  
+  const { isOpen, close } = modal
+  const record = modal.formData
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  return (
+    <CxModal
+      title={t('system.user.modal_user.detail_title')}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="detail">
+      {loading ? (
+        <div className="flex justify-center py-10">
+          <Spin />
+        </div>
+      ) : (
+        <Descriptions column={1} size="small" bordered>
+          <Descriptions.Item label={t('system.user.detail.username')}>
+            {record?.username ?? '-'}
+          </Descriptions.Item>
+          <Descriptions.Item label={t('system.user.detail.email')}>
+            {record?.email ?? '-'}
+          </Descriptions.Item>
+          <Descriptions.Item label={t('common.status')}>
+            {(() => {
+              const s = record?.status
+              if (s === undefined || s === null || s === '') return '-'
+              return <CxTag.Enabled value={Number(s)} />
+            })()}
+          </Descriptions.Item>
+        </Descriptions>
+      )}
+    </CxModal>
+  )
+})
+
+export default DetailModal

package/src/views/page-system/user/modal/modal-style/submit-modal.less

@@ -0,0 +1,40 @@
+.customizeStyle{
+  height: 42px;
+  width: 100%;
+  /* Select */
+  .ant-select {
+    height: 42px;
+    width: 120px;
+    flex: 0 0 120px;
+    background-color: #f9fafb !important;
+
+  }
+
+  .ant-select-selector {
+    height: 42px !important;
+    min-height: 42px !important;
+    border-radius: 8px !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  /* Input */
+  .ant-input {
+    height: 42px !important;
+    box-sizing: border-box;
+    width: calc(100% - 120px);
+  }
+
+  /* Compact group alignment */
+  .ant-space-compact-item,
+  .ant-space-compact-item .ant-select,
+  .ant-space-compact-item .ant-input {
+    height: 42px;
+  }
+
+  /* 右侧 input 撑满剩余空间 */
+  .ant-space-compact-item:last-child {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}

package/src/views/page-system/user/modal/submit-modal.less

@@ -0,0 +1,40 @@
+.customizeStyle{
+  height: 42px;
+  width: 100%;
+  /* Select */
+  .ant-select {
+    height: 42px;
+    width: 120px;
+    flex: 0 0 120px;
+    background-color: #f9fafb !important;
+
+  }
+
+  .ant-select-selector {
+    height: 42px !important;
+    min-height: 42px !important;
+    border-radius: 8px !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  /* Input */
+  .ant-input {
+    height: 42px !important;
+    box-sizing: border-box;
+    width: calc(100% - 120px);
+  }
+
+  /* Compact group alignment */
+  .ant-space-compact-item,
+  .ant-space-compact-item .ant-select,
+  .ant-space-compact-item .ant-input {
+    height: 42px;
+  }
+
+  /* 右侧 input 撑满剩余空间 */
+  .ant-space-compact-item:last-child {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}