cx-chat 0.0.1 → 0.0.3

package/src/components/cx-ui/tooltip/index.tsx

@@ -1,67 +0,0 @@
-import { Tooltip, type TooltipProps } from 'antd'
-import clsx from 'clsx'
-import type { CSSProperties, ReactNode } from 'react'
-
-type LooseTooltipStyles = Record<string, CSSProperties | undefined>
-type LooseTooltipClassNames = Record<string, string | undefined>
-
-export type CxTooltipTone = 'default' | 'primary' | 'success' | 'warning' | 'danger'
-
-const TONE_BG: Record<CxTooltipTone, string> = {
-  default: '#1f1f1f',
-  primary: '#2563eb',
-  success: '#15803d',
-  warning: '#b45309',
-  danger: '#dc2626',
-}
-
-export type CxTooltipProps = Omit<
-  TooltipProps,
-  'color' | 'overlayInnerStyle' | 'overlayClassName' | 'title'
-> & {
-  title: ReactNode
-  /** Tooltip 背景语义色，便于与操作类型区分 */
-  tone?: CxTooltipTone
-  overlayInnerStyle?: CSSProperties
-  overlayClassName?: string
-}
-
-/**
- * 基于 antd Tooltip 的封装，统一字号与类名前缀，后续可在 `cx-tooltip` 上覆写样式。
- */
-export function CxTooltip({
-  title,
-  tone = 'default',
-  overlayInnerStyle,
-  overlayClassName,
-  mouseEnterDelay = 0.35,
-  children,
-  classNames: userClassNames,
-  styles: userStyles,
-  ...rest
-}: CxTooltipProps) {
-  const ucn = userClassNames as LooseTooltipClassNames | undefined
-  const ust = userStyles as LooseTooltipStyles | undefined
-  return (
-    <Tooltip
-      title={title}
-      color={TONE_BG[tone]}
-      mouseEnterDelay={mouseEnterDelay}
-      classNames={{
-        ...ucn,
-        root: clsx('cx-tooltip', overlayClassName, ucn?.root),
-      }}
-      styles={{
-        ...ust,
-        container: {
-          fontSize: 12,
-          lineHeight: 1.4,
-          ...(overlayInnerStyle ?? {}),
-          ...ust?.container,
-        },
-      }}
-      {...rest}>
-      {children}
-    </Tooltip>
-  )
-}

package/src/components/cx-ui/tree/index.tsx

@@ -1,193 +0,0 @@
-import type { MenuTreeItem } from '@/types/menu'
-import { getMenuNodeIcon } from '@/utils'
-import { getMenuDisplayName } from '@/utils/menuI18n'
-import { ChevronDown, ChevronRight } from 'lucide-react'
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { CxCheckbox } from '../checkbox'
-
-export type CxTreeFieldNames = {
-  id?: string
-  children?: string
-}
-
-export type CxTreeSameNodeReselect = 'keep' | 'deselect'
-
-export type CxTreeProps = {
-  treeData: any[]
-  fieldNames?: CxTreeFieldNames
-  /** 与现有 tree-sidebar 一致：受控展开 */
-  expandedKeys: Set<string | number> | ReadonlyArray<string | number>
-  selectedKey?: string | number | null
-  onSelect?: (key: string | number | null, node: any | null) => void
-  onToggleExpand?: (key: string | number, e?: React.MouseEvent) => void
-  /** 为 true 时在行首渲染勾选框；仅操作勾选框会触发 onCheck，与选中行分离 */
-  checkable?: boolean
-  checkedKeys?: Set<string | number> | ReadonlyArray<string | number>
-  onCheck?: (key: string | number, checked: boolean, node: any) => void
-  /** 覆盖默认菜单标题（默认走 getMenuDisplayName） */
-  renderLabel?: (node: any) => React.ReactNode
-  className?: string
-  emptyText?: React.ReactNode
-  /**
-   * `keep`（默认）：已选中节点再次点击仍回调选中；
-   * `deselect`：再次点击当前选中节点回调 `(null, null)` 用于取消选中
-   */
-  sameNodeReselect?: CxTreeSameNodeReselect
-}
-
-function toSet(
-  keys: Set<string | number> | ReadonlyArray<string | number> | undefined,
-): Set<string | number> {
-  if (!keys) return new Set()
-  return keys instanceof Set ? keys : new Set(keys)
-}
-
-/**
- * 纯展示树：缩进、间距、展开图标、文件夹图标与 `tree-sidebar` 菜单样式对齐。
- */
-export function CxTree({
-  treeData,
-  fieldNames,
-  expandedKeys,
-  selectedKey,
-  onSelect,
-  onToggleExpand,
-  checkable = false,
-  checkedKeys,
-  onCheck,
-  renderLabel,
-  className,
-  emptyText,
-  sameNodeReselect = 'keep',
-}: CxTreeProps) {
-  const { t, i18n } = useTranslation()
-  const idKey = fieldNames?.id ?? 'id'
-  const childrenKey = fieldNames?.children ?? 'children'
-
-  const expandSet = useMemo(() => toSet(expandedKeys), [expandedKeys])
-  const checkSet = useMemo(() => toSet(checkedKeys), [checkedKeys])
-
-  const formatNodeLabel = (node: any): React.ReactNode => {
-    if (renderLabel) return renderLabel(node)
-    return getMenuDisplayName(node as MenuTreeItem, t, i18n.language)
-  }
-
-  const renderTreeNode = (node: any, level = 0): React.JSX.Element => {
-    const children = node[childrenKey] as any[] | undefined
-    const hasChildren = !!children?.length
-    const key = node[idKey]
-    const isExpanded = expandSet.has(key)
-    const isSelected =
-      selectedKey != null &&
-      key != null &&
-      String(selectedKey) === String(key)
-    const isChecked = checkSet.has(key)
-    const nodeSelectable = node.selectable !== false
-
-    return (
-      <div key={String(key)}>
-        <div
-          className={`
-            group flex items-center px-2 py-1.5 rounded-md text-sm transition-colors
-            ${
-              isSelected
-                ? 'bg-blue-50 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 font-medium'
-                : nodeSelectable
-                  ? 'hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-700 dark:text-gray-300'
-                  : 'text-gray-500 dark:text-gray-400'
-            }
-          `}
-          style={{ paddingLeft: `${level * 16 + 8}px` }}>
-          <button
-            type="button"
-            className={`mr-1 shrink-0 p-0.5 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-700 ${
-              hasChildren ? 'visible' : 'invisible'
-            }`}
-            onClick={(e) => hasChildren && onToggleExpand?.(key, e)}>
-            {isExpanded ? (
-              <ChevronDown size={14} />
-            ) : (
-              <ChevronRight size={14} />
-            )}
-          </button>
-
-          <div
-            role={nodeSelectable ? 'button' : undefined}
-            tabIndex={nodeSelectable ? 0 : undefined}
-            className={`flex min-w-0 flex-1 items-center ${
-              nodeSelectable
-                ? 'cursor-pointer'
-                : 'cursor-default pointer-events-none select-none'
-            }`}
-            onClick={() => {
-              if (!nodeSelectable) return
-              if (
-                sameNodeReselect === 'deselect' &&
-                selectedKey != null &&
-                String(selectedKey) === String(key)
-              ) {
-                onSelect?.(null, null)
-                return
-              }
-              onSelect?.(key, node)
-            }}
-            onKeyDown={(e) => {
-              if (!nodeSelectable) return
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                if (
-                  sameNodeReselect === 'deselect' &&
-                  selectedKey != null &&
-                  String(selectedKey) === String(key)
-                ) {
-                  onSelect?.(null, null)
-                  return
-                }
-                onSelect?.(key, node)
-              }
-            }}>
-            <div className="mr-2 shrink-0 text-gray-400 dark:text-gray-500">
-              {getMenuNodeIcon(node as MenuTreeItem, isExpanded, isSelected)}
-            </div>
-            {checkable && (
-              <span
-                className="mr-1.5 flex shrink-0 items-center"
-                onClick={(e) => e.stopPropagation()}
-                onMouseDown={(e) => e.stopPropagation()}>
-                <CxCheckbox
-                  checked={isChecked}
-                  size="md"
-                  onChange={(next) => onCheck?.(key, next, node)}
-                />
-              </span>
-            )}
-            <span className="truncate">{formatNodeLabel(node)}</span>
-          </div>
-        </div>
-
-        {hasChildren && isExpanded && (
-          <div className="ml-4 border-l border-gray-200 dark:border-gray-700">
-            {children!.map((child) => renderTreeNode(child, level + 1))}
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  if (!treeData?.length) {
-    return (
-      <div className="p-4 text-center text-sm text-gray-400 dark:text-gray-500">
-        {emptyText ?? t('common.no_data')}
-      </div>
-    )
-  }
-
-  return (
-    <div className={className}>
-      {treeData.map((n) => renderTreeNode(n))}
-    </div>
-  )
-}
-
-export default CxTree

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

@@ -1,91 +0,0 @@
-import React from 'react';
-import { TreeSelect } from 'antd';
-import { CxEmptyState } from '../empty-state';
-import './index.less';
-
-/** 有子节点的树节点 key，用于「全部展开」 */
-function collectExpandableKeys(treeData) {
-  const keys = [];
-  const walk = (nodes) => {
-    if (!Array.isArray(nodes)) return;
-    for (const node of nodes) {
-      const children = node.children;
-      if (Array.isArray(children) && children.length > 0) {
-        const k = node.key != null ? node.key : node.value;
-        if (k != null) keys.push(k);
-        walk(children);
-      }
-    }
-  };
-  walk(treeData);
-  return keys;
-}
-
-/**
- * @param {import('antd').TreeSelectProps & { variant?: 'cxForm' | 'cxSearch' }} props
- *   - variant: cxForm 表单下拉（42px，默认）| cxSearch 搜索下拉（40px）
- *   - treeDefaultExpandAll：树数据异步更新时 rc 仅初次挂载生效，此处随 treeData 同步展开
- */
-const CxTreeSelect = ({
-  variant = 'cxForm',
-  style = undefined,
-  treeData,
-  treeDefaultExpandAll,
-  treeExpandedKeys,
-  onTreeExpand,
-  notFoundContent,
-  ...props
-}) => {
-  const height = variant === 'cxSearch' ? 40 : 42;
-
-  const expandableKeys = React.useMemo(
-    () => collectExpandableKeys(treeData),
-    [treeData],
-  );
-
-  const isExpandedControlled = treeExpandedKeys !== undefined;
-  const useInternalExpandAll = Boolean(treeDefaultExpandAll) && !isExpandedControlled;
-
-  const [internalExpandedKeys, setInternalExpandedKeys] = React.useState([]);
-
-  React.useEffect(() => {
-    if (!useInternalExpandAll) return;
-    setInternalExpandedKeys(expandableKeys);
-  }, [useInternalExpandAll, expandableKeys]);
-
-  const treeNotFoundContent =
-    notFoundContent === undefined
-      ? <CxEmptyState message="暂无数据" />
-      : notFoundContent;
-
-  return (
-    <TreeSelect
-      {...props}
-      treeData={treeData}
-      treeDefaultExpandAll={useInternalExpandAll ? false : treeDefaultExpandAll}
-      treeExpandedKeys={
-        useInternalExpandAll ? internalExpandedKeys : treeExpandedKeys
-      }
-      onTreeExpand={
-        useInternalExpandAll
-          ? (keys) => {
-              setInternalExpandedKeys(keys);
-              onTreeExpand?.(keys);
-            }
-          : onTreeExpand
-      }
-      size='large'
-      notFoundContent={treeNotFoundContent}
-      className='cx-tree-select'
-      classNames={{ popup: 'cx-tree-select-dropdown' }}
-      style={{
-        height,
-        boxSizing: 'border-box',
-        borderRadius: 8,
-        ...(style || {}),
-      }}
-    />
-  );
-};
-
-export default CxTreeSelect;

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

@@ -1,27 +0,0 @@
-.cx-tree-select-dropdown {
-  .ant-select-tree-treenode {
-    min-height: 36px;
-    border-radius: 6px;
-  }
-
-  .ant-select-tree-node-content-wrapper {
-    min-height: 36px !important;
-    line-height: 34px !important;
-    border-radius: 6px;
-    font-size: 14px !important;
-  }
-
-  .ant-select-tree-node-content-wrapper:hover {
-    background-color: var(--cx-option-hover-bg) !important;
-  }
-
-  .ant-select-tree-node-selected {
-    background-color: var(--cx-option-selected-bg) !important;
-    color: var(--cx-option-selected-text) !important;
-  }
-
-  .ant-select-tree-node-selected:hover {
-    background-color: var(--cx-option-selected-bg) !important;
-    color: var(--cx-option-selected-text) !important;
-  }
-}

package/src/components/cx-ui/upload-file/index.less

@@ -1,223 +0,0 @@
-.cx-upload-file-root {
-  width: 100%;
-
-  .ant-upload-wrapper,
-  .ant-upload-list,
-  .ant-upload-list-item,
-  .ant-upload-list-item-container {
-    box-sizing: border-box;
-  }
-
-  // 清掉 Upload 列表默认的上下间距，避免在 Table 单元格里出现“底部空白”
-  .ant-upload-list {
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-
-  // antd 会在 list 非空时强行给 picture-card list 设置 min-height（dev 环境用 :where(.css-dev-only-...) 包裹）
-  // 这里统一按 thumbSize 覆盖，避免底部被撑出空白
-  .ant-upload-wrapper.ant-upload-picture-card-wrapper
-    .ant-upload-list.ant-upload-list-picture-card:not(:empty),
-  .ant-upload-wrapper.ant-upload-picture-circle-wrapper
-    .ant-upload-list.ant-upload-list-picture-card:not(:empty),
-  .ant-upload-wrapper.ant-upload-picture-card-wrapper
-    .ant-upload-list.ant-upload-list-picture-circle:not(:empty),
-  .ant-upload-wrapper.ant-upload-picture-circle-wrapper
-    .ant-upload-list.ant-upload-list-picture-circle:not(:empty) {
-    min-height: var(--cx-upload-thumb-size, 104px) !important;
-  }
-
-  // 缩略图尺寸：上传位 + 已上传项容器统一
-  .ant-upload-list-picture-card {
-    // 容器本身不要默认 padding/margin
-    margin: 0 !important;
-    padding: 0 !important;
-
-    .ant-upload-list-item-container,
-    .ant-upload-select {
-      width: var(--cx-upload-thumb-size, 104px);
-      height: var(--cx-upload-thumb-size, 104px);
-      box-sizing: border-box;
-    }
-
-    // antd 默认会给每个 item/上传位加 margin，导致视觉尺寸不一致，这里统一清掉
-    .ant-upload-list-item-container {
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-
-    .ant-upload-select {
-      margin: 0 !important;
-      padding: 0 !important;
-      min-height: var(--cx-upload-thumb-size, 104px) !important;
-      height: var(--cx-upload-thumb-size, 104px) !important;
-      line-height: var(--cx-upload-thumb-size, 104px) !important;
-    }
-
-    .ant-upload-select .ant-upload {
-      width: 100%;
-      height: 100%;
-      margin: 0 !important;
-      padding: 0 !important;
-      box-sizing: border-box;
-      min-height: 0 !important;
-      line-height: var(--cx-upload-thumb-size, 104px) !important;
-    }
-
-    // 已上传项本体也清掉默认边距，确保和上传位同盒模型
-    .ant-upload-list-item {
-      margin: 0 !important;
-      padding: 0 !important;
-      box-sizing: border-box;
-      box-shadow: none !important;
-    }
-
-    .ant-upload-list-item:hover {
-      border-color: transparent !important;
-      box-shadow: none !important;
-    }
-  }
-}
-
-.cx-upload-file-picture-list-wrap {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  width: 100%;
-
-  .ant-upload-wrapper {
-    width: var(--cx-upload-thumb-size, 104px);
-    height: var(--cx-upload-thumb-size, 104px);
-    flex: 0 0 var(--cx-upload-thumb-size, 104px);
-  }
-
-  &.is-empty {
-    .ant-upload-wrapper {
-      width: 100%;
-      height: auto;
-      flex: 1 1 auto;
-    }
-  }
-
-  .cx-upload-file-list {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  // 右侧文件名列表：纯文本，无边框
-  .cx-upload-file-list-item {
-    border: none;
-    background: transparent;
-    padding: 0;
-    height: var(--cx-upload-thumb-size, 104px);
-    align-items: center;
-  }
-}
-
-.cx-upload-file-card {
-  .cx-upload-file-card-mask {
-    opacity: 0;
-    transition: opacity 0.2s;
-    z-index: 3;
-    background: rgba(0, 0, 0, 0.6);
-
-    .ant-btn {
-      color: #fff;
-      background: transparent;
-      border: none !important;
-      opacity: 1;
-      box-shadow: none;
-      padding: 6px;
-      line-height: 1;
-      outline: none !important;
-    }
-
-    .ant-btn:hover {
-      color: #fff;
-      background: transparent;
-      opacity: 1;
-      text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
-      box-shadow: none;
-      outline: none !important;
-    }
-
-    .ant-btn:active {
-      color: #fff;
-      background: transparent;
-      box-shadow: none;
-      border-color: transparent;
-      outline: none !important;
-    }
-
-    .ant-btn:focus,
-    .ant-btn:focus-visible {
-      outline: none;
-      box-shadow: none;
-      border-color: transparent;
-    }
-
-    // 去掉 antd 的 hover/click 状态层（避免出现“一闪的边框/波纹”）
-    .ant-btn::before,
-    .ant-btn::after {
-      display: none !important;
-    }
-
-    // 图标更明显：放大 + 投影描边
-    .anticon {
-      font-size: 18px;
-      filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.55));
-    }
-  }
-
-  &:hover {
-    .cx-upload-file-card-mask {
-      opacity: 1;
-    }
-  }
-}
-
-.cx-upload-file-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.cx-upload-file-list-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border: 1px solid rgba(5, 5, 5, 0.06);
-  border-radius: 6px;
-  background: #fff;
-
-  .cx-upload-file-list-actions {
-    opacity: 0;
-    transition: opacity 0.15s;
-  }
-
-  &:hover {
-    .cx-upload-file-list-actions {
-      opacity: 1;
-    }
-  }
-}
-
-.cx-upload-file-list-name {
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  height: 100%;
-}
-
-.cx-upload-file-list-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  flex: 0 0 auto;
-}
-