cx-chat 0.0.1

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

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

@@ -0,0 +1,144 @@
+/* 避免遮罩层导致整页出现滚动条；弹框高度由 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

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

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

@@ -0,0 +1,40 @@
+/* 只影响 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;
+}