cx-chat 0.0.2 → 0.0.3

package/src/components/cx-ui/modal/index.jsx

@@ -1,212 +0,0 @@
-import React, { useMemo } from 'react';
-import { Modal } from 'antd';
-import './index.less';
-import CxButton from '../button';
-import { useTranslation } from 'react-i18next';
-
-/**
- * Ant Design 6 Modal 的 styles 语义是 container（对应 .ant-modal-container），不是 content。
- * rc-dialog 把 container 包在 header/body/footer 外层，这里用 flex + body 的 minHeight:0 让中间区域滚动。
- */
-const defaultModalStyles = {
-    container: {
-        maxHeight: '85vh',
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-    },
-    body: {
-        flex: '1 1 auto',
-        minHeight: 0,
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        // maxHeight: 'calc(75vh - 200px)',
-    },
-    mask: {
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-        backdropFilter: 'blur(4px)',
-    },
-};
-
-function mergeModalStyles(userStyles) {
-    if (!userStyles) return defaultModalStyles;
-    const containerFromLegacy = userStyles.content
-        ? { ...defaultModalStyles.container, ...userStyles.content }
-        : undefined;
-    return {
-        container: {
-            ...defaultModalStyles.container,
-            ...containerFromLegacy,
-            ...userStyles.container,
-        },
-        header: { ...userStyles.header },
-        body: { ...defaultModalStyles.body, ...userStyles.body },
-        footer: { ...userStyles.footer },
-        mask: userStyles.mask
-            ? { ...defaultModalStyles.mask, ...userStyles.mask }
-            : defaultModalStyles.mask,
-        wrapper: userStyles.wrapper ? { ...userStyles.wrapper } : undefined,
-        title: userStyles.title ? { ...userStyles.title } : undefined,
-        root: userStyles.root ? { ...userStyles.root } : undefined,
-    };
-}
-
-/**
- * @param {'default'|'add'|'edit'|'detail'|'select'} opeType
- *   - default：取消 + 确定（主按钮 onOk ?? onSubmit）
- *   - add | edit：取消 + 提交（主按钮 onSubmit）
- *   - detail：仅「关闭」
- *   - select：取消 + 确定（取消仅 onClose；确定走 onOk，与列表内 onSelect 区分）
- * 若传入 `actions`（含空数组），则完全使用自定义 footer，忽略 opeType。
- */
-function buildBuiltinFooter(opeType, { t, onClose, onOk, onSubmit, submitting }) {
-    if (opeType === 'add' || opeType === 'edit') {
-        return [
-            <CxButton.Cancel key="cancel" disabled={submitting} onClick={onClose} />,
-            <CxButton.Submit key="submit" loading={submitting} onClick={() => onSubmit?.()} />,
-        ];
-    }
-
-    if (opeType === 'detail') {
-        return [
-            <CxButton key="close" type="text" onClick={onClose}>
-                {t('common.close')}
-            </CxButton>,
-        ];
-    }
-
-    if (opeType === 'select') {
-        return [
-            <CxButton.Cancel key="cancel" onClick={onClose} />,
-            <CxButton.Ok
-                key="ok"
-                loading={submitting}
-                disabled={onOk == null}
-                onClick={() => onOk?.()}
-            />,
-        ];
-    }
-
-    const primary = onOk ?? onSubmit;
-    return [
-        <CxButton.Cancel key="cancel" onClick={onClose} />,
-        <CxButton.Ok
-            key="ok"
-            loading={submitting}
-            disabled={primary == null}
-            onClick={() => primary?.()}
-        />,
-    ];
-}
-
-const CxModal = ({
-    isOpen,
-    title,
-    onClose,
-    actions = undefined,
-    children,
-    /** 内置 footer 时：渲染在取消/确定左侧，占满剩余宽度（如表单筛选项、角色选择） */
-    footerExtra = undefined,
-    onOk = undefined,
-    onSubmit = undefined,
-    opeType = 'default',
-    submitting = false,
-    afterClose = undefined,
-    modalConfig = {},
-}) => {
-    const mergedModalConfig = {
-        ...modalConfig,
-        width: modalConfig.width ?? 500,
-        centered: modalConfig.centered ?? true,
-    };
-    const { t } = useTranslation();
-    const {
-        styles: userStyles,
-        centered: centeredFromConfig,
-        rootClassName: userRootClassName,
-        maskClosable: maskClosableLegacy,
-        ...restModalConfig
-    } = mergedModalConfig;
-
-    const mergedStyles = useMemo(() => mergeModalStyles(userStyles), [userStyles]);
-
-    const useBuiltinFooter = actions === undefined;
-
-    const footer = useMemo(() => {
-        const hasExtra = footerExtra != null && footerExtra !== false;
-
-        if (!useBuiltinFooter) {
-            if (!hasExtra) return actions;
-            return (
-                <div className="cx-modal-footer-with-extra flex w-full flex-wrap items-center justify-between gap-3">
-                    <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
-                        {footerExtra}
-                    </div>
-                    <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-                        {actions}
-                    </div>
-                </div>
-            );
-        }
-
-        const builtinButtons = buildBuiltinFooter(opeType, {
-            t,
-            onClose,
-            onOk,
-            onSubmit,
-            submitting,
-        });
-
-        if (!hasExtra) return builtinButtons;
-
-        return (
-            <div className="cx-modal-footer-with-extra flex w-full flex-wrap items-center justify-between gap-3">
-                <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
-                    {footerExtra}
-                </div>
-                <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-                    {builtinButtons}
-                </div>
-            </div>
-        );
-    }, [
-        useBuiltinFooter,
-        actions,
-        footerExtra,
-        opeType,
-        t,
-        onClose,
-        onOk,
-        onSubmit,
-        submitting,
-    ]);
-
-    const primaryForModal =
-        opeType === 'add' || opeType === 'edit'
-            ? onSubmit
-            : opeType === 'select'
-              ? onOk
-              : (onOk ?? onSubmit);
-
-    return (
-        <Modal
-            {...restModalConfig}
-            rootClassName={['cx-modal-viewport', userRootClassName].filter(Boolean).join(' ')}
-            centered={centeredFromConfig ?? true}
-            open={isOpen}
-            title={title}
-            footer={footer}
-            styles={mergedStyles}
-            mask={{ closable: maskClosableLegacy ?? false }}
-            onCancel={onClose}
-            onOk={primaryForModal ?? onClose}
-            afterClose={afterClose}
-            className="cx-modal"
-        >
-            {children}
-        </Modal>
-    );
-};
-
-export { useCxModal } from './useCxModal';
-export default CxModal;

package/src/components/cx-ui/modal/index.less

@@ -1,144 +0,0 @@
-/* 避免遮罩层导致整页出现滚动条；弹框高度由 cx-modal 的 styles 控制 */
-.cx-modal-viewport .ant-modal {
-    top: 16px;
-    padding-bottom: 16px;
-    max-width: calc(100vw - 32px);
-}
-
-.cx-modal-viewport .ant-modal-wrap {
-    overflow: hidden;
-}
-
-/* 与 styles.container / styles.body 双保险：中间内容区滚动，头尾固定 */
-.cx-modal-viewport .ant-modal-container {
-    // height: 85vh;
-    max-height: 85vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    padding:0;
-    border-radius: 24px;
-    
-}
-.ant-modal-close{
-    margin-top: 14px;
-    margin-right: 24px;
-}
-.cx-modal-viewport .ant-modal-body {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    max-height: calc(85vh - 180px);
-    padding: 20px 32px;
-    /* 滚动条：淡淡显示（全局 cx-modal 统一风格） */
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
-    scrollbar-gutter: stable;
-}
-
-.dark .cx-modal-viewport .ant-modal-body {
-    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
-}
-
-.cx-modal-viewport .ant-modal-body::-webkit-scrollbar {
-    width: 8px;
-}
-.cx-modal-viewport .ant-modal-body::-webkit-scrollbar-track {
-    background: transparent;
-}
-.cx-modal-viewport .ant-modal-body::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.24);
-    border-radius: 10px;
-}
-.cx-modal-viewport .ant-modal-body:hover::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.38);
-}
-.dark .cx-modal-viewport .ant-modal-body::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.24);
-}
-.dark .cx-modal-viewport .ant-modal-body:hover::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.38);
-}
-
-/* Header / Footer 与内容区分隔线（样式集中在本文件） */
-.cx-modal-viewport .ant-modal-header {
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--ant-color-split, rgba(0, 0, 0, 0.06));
-    padding:24px 32px;
-    font-size: 24px;
-    margin-bottom: 0;
-}
-.cx-modal-viewport .ant-modal-header .ant-modal-title{
-    font-size: 24px;
-}
-.cx-modal-viewport .ant-modal-footer {
-    flex-shrink: 0;
-    border-top: 1px solid var(--ant-color-split, rgba(0, 0, 0, 0.06));
-    background-color: rgb(249 250 251 / 0.8);
-    padding:24px 32px;
-}
-
-/* 选人多选弹框：放开默认 max-height 限制，避免上下表被裁剪 */
-.cx-modal-user-select-multi .ant-modal-container {
-    padding: 0 !important;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    height: min(95dvh, 95vh) !important;
-    max-height: min(95dvh, 95vh);
-    min-height: 0;
-}
-
-.cx-modal-user-select-multi .ant-modal-body {
-    max-height: none !important;
-    padding: 0 !important;
-    overflow-x: hidden !important;
-    overflow-y: auto !important;
-    /* 滚动条淡化（与 custom-scrollbar 风格一致） */
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
-    /* 预留滚动条槽位，避免被布局/overlay 影响 */
-    scrollbar-gutter: stable;
-}
-
-.dark .cx-modal-user-select-multi .ant-modal-body {
-    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
-}
-
-.cx-modal-user-select-multi .ant-modal-body::-webkit-scrollbar {
-    width: 8px;
-}
-.cx-modal-user-select-multi .ant-modal-body::-webkit-scrollbar-track {
-    background: transparent;
-}
-.cx-modal-user-select-multi .ant-modal-body::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.24);
-    border-radius: 10px;
-}
-.cx-modal-user-select-multi .ant-modal-body:hover::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.38);
-}
-.dark .cx-modal-user-select-multi .ant-modal-body::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.24);
-}
-.dark .cx-modal-user-select-multi .ant-modal-body:hover::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.38);
-}
-
-/* 知识库权限/共享：保留右侧独立滚动（树 sticky/fixed 体验更好） */
-
-/* 知识库权限/共享：滚动条在弹框最右侧（由 modal-body 滚动），内部不再出现独立纵向滚动条 */
-.cx-modal-dep-user-select-multi .select-table-view-right {
-    overflow-y: visible !important;
-}
-.cx-modal-dep-user-select-multi .cx-table,
-.cx-modal-dep-user-select-multi .cx-table .ant-table,
-.cx-modal-dep-user-select-multi .cx-table .ant-table-container {
-    height: auto !important;
-}
-.cx-modal-dep-user-select-multi .cx-table .ant-table-body {
-    overflow-y: visible !important;
-    max-height: none !important;
-}
-

package/src/components/cx-ui/modal/useCxModal.ts

@@ -1,125 +0,0 @@
-import { useCallback, useState, useRef } from 'react'
-import { Form } from 'antd'
-import type { FormInstance } from 'antd'
-
-export type UseCxModalOptions = {
-  /** 初始是否打开 */
-  defaultOpen?: boolean
-  /** 打开前的业务回调(可异步) */
-  onOpen?: (payload: CxModalOpenPayload) => void | Promise<void>
-  /** 关闭前的业务回调(可异步) */
-  onClose?: () => void | Promise<void>
-  /** 自定义额外状态重置函数 */
-  onReset?: () => void
-}
-
-export type CxModalOpenPayload = {
-  opeType?: string
-  opeId?: string | number
-  data?: any
-  [key: string]: any
-}
-
-export type CxModalRef = {
-  open: (payload?: CxModalOpenPayload) => void | Promise<void>
-  close: () => void
-}
-
-/**
- * 弹层显隐状态管理 Hook
- * 
- * 用法:
- * ```tsx
- * const modal = useCxModal({
- *   onOpen: async (payload) => {
- *     // 弹层已先打开；此处可拉数据，内容区自行 loading
- *     await loadData(payload.data)
- *   },
- *   onClose: () => {
- *     // 自定义清理逻辑(可选)
- *   },
- *   onReset: () => {
- *     // 关闭时重置的额外状态
- *     setMode('add')
- *     setOpeId(undefined)
- *   }
- * })
- * 
- * const { isOpen, close, form, opeType, opeId } = modal
- * 
- * // 暴露给父组件
- * useImperativeHandle(ref, () => ({
- *   open: modal.open,
- *   close: modal.close,
- * }), [modal])
- * 
- * return <CxForm form={form} ... />
- * ```
- */
-export function useCxModal(options: UseCxModalOptions = {}) {
-  const { defaultOpen = false, onOpen: onOpenCallback, onClose: onCloseCallback, onReset } = options
-  const [form] = Form.useForm()
-  const [isOpen, setIsOpen] = useState(defaultOpen)
-  const [opeType, setOpeType] = useState<string>('detail')
-  const [opeId, setOpeId] = useState<string | number | undefined>(undefined)
-  const [formData, setFormData] = useState<any>(undefined)
-  
-  // 用 ref 保存回调,避免依赖变化
-  const onOpenRef = useRef(onOpenCallback)
-  const onCloseRef = useRef(onCloseCallback)
-  const onResetRef = useRef(onReset)
-  onOpenRef.current = onOpenCallback
-  onCloseRef.current = onCloseCallback
-  onResetRef.current = onReset
-
-  const open = useCallback(async (payload: CxModalOpenPayload = {}) => {
-    setOpeType(payload.opeType ?? 'add')
-    setOpeId(payload.opeId)
-    setIsOpen(true)
-
-    if (onOpenRef.current) {
-      await onOpenRef.current(payload)
-    }
-  }, [])
-
-  const close = useCallback(async () => {
-    // 1. 执行业务回调(如果有)
-    if (onCloseRef.current) {
-      await onCloseRef.current()
-    }
-    
-    // 2. 重置表单
-    form.resetFields()
-    setFormData(undefined)
-    
-    // 3. 执行自定义重置(如果有)
-    if (onResetRef.current) {
-      onResetRef.current()
-    }
-    
-    // 4. 关闭弹框并重置状态
-    setIsOpen(false)
-    setOpeType('detail')
-    setOpeId(undefined)
-  }, [form])
-
-  return {
-    isOpen,
-    opeType,
-    opeId,
-    setIsOpen,
-    setOpeType,
-    setOpeId,
-    form,
-    formData,
-    setFormData,
-    open,
-    close,
-    /** 直接展开到 `<CxModal isOpen={...} onClose={...} opeType={...} />` */
-    modalBind: {
-      isOpen,
-      onClose: close,
-      opeType,
-    },
-  }
-}

package/src/components/cx-ui/multi-select/index.jsx

@@ -1,74 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { Select, Divider } from 'antd';
-import './index.less';
-const CxMultiSelect = ({ variant = 'cxForm', style, ...props }) => {
-    const height = variant === 'cxSearch' ? 40 : 42;
-    const [open, setOpen] = useState(false);
-
-    // 优先使用外部传入的 options（用于业务页面渲染下拉数据）
-    const mergedOptions = useMemo(() => {
-        if (Array.isArray(props.options)) return props.options;
-        return [
-            { label: 'jack', value: 'jack' },
-            { label: 'lucy', value: 'lucy' },
-        ];
-    }, [props.options]);
-
-    const allValues = useMemo(
-        () => mergedOptions.map(o => o?.value).filter(Boolean),
-        [mergedOptions],
-    );
-    const selectedValues = props.value || [];
-
-    const isAllSelected = selectedValues.length > 0 && selectedValues.length === allValues.length;
-
-    const toggleSelectAll = e => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isAllSelected) {
-            props.onChange?.([]);
-            setOpen(false);
-        } else {
-            props.onChange?.(allValues);
-        }
-    };
-    return (
-        <Select
-            {...props}
-            mode="multiple"
-            open={open}
-            onOpenChange={setOpen}
-            classNames={{ popup: 'cx-multi-select-dropdown' }}
-            className='cx-multi-select'
-            style={{
-                height,
-                boxSizing: 'border-box',
-                borderRadius: 8,
-                ...(style || {}),
-            }}
-            popupRender={menu => (
-                <>
-                    <div
-                        className="ant-select-item ant-select-item-option"
-                        style={{ cursor: 'pointer' }}
-                        onMouseDown={e => {
-                            // 防止点击时下拉关闭
-                            e.preventDefault();
-                            e.stopPropagation();
-                        }}
-                        onClick={toggleSelectAll}
-                    >
-                        <div className="ant-select-item-option-content cx-multi-select__toggle-all">
-                            {isAllSelected ? '取消全选' : '全选'}
-                        </div>
-                    </div>
-                    <Divider style={{ margin: '8px 0' }} />
-                    {menu}
-                </>
-            )}
-            options={mergedOptions}
-        />
-    );
-};
-
-export default CxMultiSelect;

package/src/components/cx-ui/multi-select/index.less

@@ -1,40 +0,0 @@
-/* 只影响 CxMultiSelect 的下拉 */
-.cx-multi-select-dropdown,
-.ant-select-dropdown.cx-multi-select-dropdown {
-  .ant-select-item,
-  .ant-select-item-option {
-    height: 36px !important;
-    font-size: 14px !important;
-    line-height: 26px;
-    border-radius: 6px;
-  }
-
-  /* hover：未选中项 */
-  .ant-select-item-option:hover:not(.ant-select-item-option-disabled),
-  .ant-select-item-option-active:not(.ant-select-item-option-selected):not(.ant-select-item-option-disabled) {
-    background-color: var(--cx-option-hover-bg) !important;
-  }
-
-  /* 选中项 */
-  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-    background-color: var(--cx-option-selected-bg) !important;
-    color: var(--cx-option-selected-text) !important;
-    border-radius: 6px;
-  }
-
-  .ant-select-item-option-selected:not(.ant-select-item-option-disabled):hover {
-    background-color: var(--cx-option-selected-bg) !important;
-    color: var(--cx-option-selected-text) !important;
-    border-radius: 6px;
-  }
-
-  /* popupRender 顶部的“全选/取消全选”项 */
-  .cx-multi-select__toggle-all {
-    color: var(--cx-accent-link) !important;
-  }
-  
-}
-.ant-select-multiple .ant-select-content{
-    height: 100% !important;
-    font-size: 14px !important;
-}