cx-chat 0.0.1

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

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

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

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

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

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