cx-chat 0.0.2 → 0.0.4

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

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

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

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

@@ -1,40 +0,0 @@
-.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;
-  }
-}