cx-chat 0.0.2 → 0.0.4

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

@@ -1,120 +0,0 @@
-import type { SwitchProps } from 'antd'
-import { Switch } from 'antd'
-import type { ReactNode } from 'react'
-import './index.less'
-
-export type CxSwitchVariant = 'default' | 'text' | 'dual'
-
-export type CxSwitchProps = SwitchProps & {
-  variant?: CxSwitchVariant
-  /** variant=text：选中态轨道内文案 */
-  checkedText?: ReactNode
-  /** variant=text：未选中态轨道内文案 */
-  uncheckedText?: ReactNode
-  /** variant=dual：左侧文案（对应 dualUncheckedValue） */
-  leftLabel?: ReactNode
-  /** variant=dual：右侧文案（对应 dualCheckedValue） */
-  rightLabel?: ReactNode
-  /** variant=dual：左侧对应取值 */
-  dualUncheckedValue?: string | number
-  /** variant=dual：右侧对应取值 */
-  dualCheckedValue?: string | number
-  /** variant=dual 时由 Form 注入 */
-  value?: string | number | boolean
-}
-
-/**
- * 表单用开关；支持轨道内文案（text）、左右文案 + 双值（dual）。
- */
-const CxSwitch = ({
-  className,
-  variant = 'default',
-  checkedText,
-  uncheckedText,
-  leftLabel,
-  rightLabel,
-  dualUncheckedValue = 1,
-  dualCheckedValue = 2,
-  value,
-  checked,
-  onChange,
-  disabled,
-  ...rest
-}: CxSwitchProps) => {
-  const baseClass = ['cx-switch', className].filter(Boolean).join(' ')
-
-  if (variant === 'dual') {
-    const raw =
-      value !== undefined && value !== null
-        ? Number(value)
-        : Number(dualUncheckedValue)
-    const isRight = raw === Number(dualCheckedValue)
-
-    const emit = (next: string | number) => {
-      if (disabled) return
-      if (typeof onChange !== 'function') return
-      // Form 注入的 onChange 多为单参；antd Switch 为 (checked, e)。dual 只向外抛业务值。
-      ;(onChange as unknown as (v: string | number) => void)(next)
-    }
-
-    return (
-      <div
-        className={['cx-switch-dual', disabled && 'cx-switch-dual--disabled']
-          .filter(Boolean)
-          .join(' ')}>
-        <button
-          type="button"
-          disabled={disabled}
-          className={`cx-switch-dual__side${!isRight ? ' cx-switch-dual__side--active' : ''}`}
-          onClick={() => emit(dualUncheckedValue)}>
-          {leftLabel}
-        </button>
-        <Switch
-          {...rest}
-          disabled={disabled}
-          className={`${baseClass} cx-switch--dual-track`}
-          checked={isRight}
-          onChange={(c) => emit(c ? dualCheckedValue : dualUncheckedValue)}
-        />
-        <button
-          type="button"
-          disabled={disabled}
-          className={`cx-switch-dual__side${isRight ? ' cx-switch-dual__side--active' : ''}`}
-          onClick={() => emit(dualCheckedValue)}>
-          {rightLabel}
-        </button>
-      </div>
-    )
-  }
-
-  if (variant === 'text') {
-    const {
-      checkedChildren: rcCheckedChildren,
-      unCheckedChildren: rcUnCheckedChildren,
-      ...textRest
-    } = rest
-    return (
-      <Switch
-        {...textRest}
-        disabled={disabled}
-        checked={checked}
-        onChange={onChange}
-        checkedChildren={checkedText ?? rcCheckedChildren}
-        unCheckedChildren={uncheckedText ?? rcUnCheckedChildren}
-        className={[baseClass, 'cx-switch--text'].filter(Boolean).join(' ')}
-      />
-    )
-  }
-
-  return (
-    <Switch
-      {...rest}
-      disabled={disabled}
-      checked={checked}
-      onChange={onChange}
-      className={baseClass}
-    />
-  )
-}
-
-export default CxSwitch

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

@@ -1,160 +0,0 @@
-.cx-table {
-  height: 100%;
-
-  // 字体统一（与页面主 UI 字体一致）
-  // 字号对齐 LiteTable（table: text-sm）
-  font-size: 14px;
-  line-height: 20px;
-  .ant-table,
-  .ant-table * {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  // 表头样式对齐 `LiteTable`（原生 table）：
-  // - bg-gray-50 / dark:bg-gray-700/50
-  // - text-gray-500 / dark:text-gray-400
-  // - th: px-3 py-4 font-medium
-  .ant-table-thead > tr > th {
-    background: #f9fafb; // gray-50
-    color: #6b7280; // gray-500
-    padding: 16px 12px; // py-4 px-3
-    border-bottom: none;
-  }
-
-  // antd 默认表头字重是 600，这里在 cx-table 范围内覆盖为正常字重
-  .ant-table-wrapper .ant-table-thead > tr > th,
-  .ant-table-wrapper .ant-table-thead > tr > td {
-    font-weight: 400 !important;
-  }
-
-  // 内容单元格 padding 对齐 LiteTable（td: px-3 py-4）
-  .ant-table-tbody > tr > td {
-    padding: 16px 12px;
-  }
-
-  // 选择列（checkbox/radio）对齐：去掉 th/td padding 并居中
-  .ant-table-thead > tr > th.cx-table__select-col,
-  .ant-table-tbody > tr > td.cx-table__select-col {
-    padding: 0 !important;
-    text-align: center;
-    line-height: 0;
-    vertical-align: middle;
-  }
-
-  &.cx-table--small {
-    .ant-table-thead > tr > th {
-      padding: 12px 12px;
-    }
-    .ant-table-tbody > tr > td {
-      padding: 12px 12px;
-    }
-  }
-
-  /** 预留更紧凑的表格尺寸（用于选择弹框等空间有限场景） */
-  &.cx-table--mini {
-    font-size: 13px;
-    line-height: 18px;
-    .ant-table-thead > tr > th {
-      padding: 6px 6px;
-    }
-    .ant-table-tbody > tr > td {
-      padding: 6px 6px;
-    }
-  }
- 
-
-  // antd 默认会在 th 之间加分隔线与 hover 背景，这里对齐 LiteTable 的干净表头
-  .ant-table-thead > tr > th::before {
-    display: none;
-  }
-
-  // 深色模式：跟随项目的 dark class（Tailwind 方案）
-  .dark & {
-    .ant-table-thead > tr > th {
-      background: rgba(55, 65, 81, 0.5); // gray-700/50
-      color: #9ca3af; // gray-400
-    }
-  }
-
-  .ant-table {
-    height: 100%;
-    .ant-table-container {
-      height: 100%;
-    }
-  }
-  // antd Table 根节点：高度继承自外层容器
-  .ant-table-wrapper {
-    height: inherit;
-  }
-
-  // Table 在有 loading 时会多一层 Spin 包裹，这些都要继承高度，否则内部撑不起来
-  .ant-spin-nested-loading,
-  .ant-spin,
-  .ant-spin-container {
-    height: inherit;
-  }
-
-  // 只允许 body 容器纵向滚动，避免出现“嵌套滚动/双滚动条”
-  .ant-table-container,
-  .ant-table-content {
-    overflow-y: hidden !important;
-  }
-
-  // body：数据少不显示滚动条（auto），数据多才滚动；顺便把滚动条调淡一点
-  .ant-table-body {
-    overflow-y: auto !important;
-    scrollbar-width: thin; // Firefox
-    scrollbar-color: rgba(0, 0, 0, 0.24) transparent;
-  }
-
-  // 未启用 scroll.x 时，彻底隐藏横向滚动条（避免 1px 溢出导致出现横条）
-  &.cx-table--no-scroll-x {
-    .ant-table-body {
-      overflow-x: hidden !important;
-    }
-    .ant-table-content {
-      overflow-x: hidden !important;
-    }
-  }
-
-  .ant-table-body::-webkit-scrollbar,
-  .ant-table-body *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .ant-table-body::-webkit-scrollbar-track,
-  .ant-table-body *::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .ant-table-body::-webkit-scrollbar-thumb,
-  .ant-table-body *::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.24);
-    border-radius: 999px;
-    border: 2px solid transparent;
-    background-clip: content-box;
-  }
-
-  .ant-table-body:hover::-webkit-scrollbar-thumb,
-  .ant-table-body:hover *::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.38);
-  }
-
-  .dark & {
-    .ant-table-body {
-      scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
-    }
-    .ant-table-body::-webkit-scrollbar-thumb,
-    .ant-table-body *::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.24);
-    }
-    .ant-table-body:hover::-webkit-scrollbar-thumb,
-    .ant-table-body:hover *::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.38);
-    }
-  }
-}
-

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

@@ -1,152 +0,0 @@
-import type { TableProps } from 'antd'
-import { Table } from 'antd'
-import clsx from 'clsx'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { CxEmptyState } from '../empty-state'
-import './index.less'
-
-/**
- * 基于 antd Table 的封装：
- * - 强制挂载 `cx-table` class，便于在 `.cx-table { ... }` 里做定向样式覆盖
- * - 不修改 antd 全局样式
- */
-export type CxTableOwnProps<RecordType extends object = any> = Omit<TableProps<RecordType>, 'size'> & {
-  /**
-   * 表头固定 + 内容区内部滚动：
-   * 开启后会自动计算 scroll.y（基于父容器高度），并把结果合并进 `props.scroll`。
-   */
-  autoScrollY?: boolean
-  /** 自动计算 scroll.y 的最小高度（px），默认 120 */
-  minScrollY?: number
-  /** 表格尺寸：影响行高/间距（默认 default）；须 Omit antd Table `size`，否则与 large|middle|small 求交只剩 small */
-  size?: 'default' | 'small' | 'mini'
-  /** 自定义空状态文案，不传则使用 `common.no_data` */
-  emptyText?: string
-}
-
-export default function CxTable<RecordType extends object = any>(props: CxTableOwnProps<RecordType>) {
-  const { t } = useTranslation()
-  const {
-    className,
-    autoScrollY,
-    minScrollY = 120,
-    size = 'default',
-    scroll,
-    pagination,
-    tableLayout,
-    columns,
-    emptyText,
-    ...rest
-  } = props
-  const wrapRef = useRef<HTMLDivElement | null>(null)
-  const [autoY, setAutoY] = useState<number | undefined>(undefined)
-  const [wrapW, setWrapW] = useState<number | undefined>(undefined)
-
-  useEffect(() => {
-    if (!autoScrollY) {
-      setAutoY(undefined)
-      return
-    }
-    const wrap = wrapRef.current
-    if (!wrap) return
-
-    const calc = () => {
-      const h = wrap.getBoundingClientRect().height
-      if (!Number.isFinite(h) || h <= 0) return
-      const headerEl = wrap.querySelector(
-        '.ant-table-header',
-      ) as HTMLElement | null
-      const headerH = headerEl ? headerEl.getBoundingClientRect().height : 0
-      setAutoY(Math.max(minScrollY, Math.floor(h - headerH)))
-    }
-
-    calc()
-    const ro = new ResizeObserver(() => calc())
-    ro.observe(wrap)
-    return () => ro.disconnect()
-  }, [autoScrollY, minScrollY])
-
-  useEffect(() => {
-    const wrap = wrapRef.current
-    if (!wrap) return
-    const calc = () => {
-      const w = wrap.getBoundingClientRect().width
-      if (!Number.isFinite(w) || w <= 0) return
-      setWrapW(Math.floor(w))
-    }
-    calc()
-    const ro = new ResizeObserver(() => calc())
-    ro.observe(wrap)
-    return () => ro.disconnect()
-  }, [])
-
-  const mergedScroll = useMemo(() => {
-    if (!autoScrollY || autoY == null) return scroll
-    return { ...(scroll as any), y: autoY } as any
-  }, [autoScrollY, autoY, scroll])
-
-  const mergedColumns = useMemo(() => {
-    if (!Array.isArray(columns)) return columns
-    const base = columns.map((c: any) => ({
-      ...c,
-      dataIndex: c?.dataIndex ?? c?.key,
-    }))
-
-    // 关闭横向滚动时（scroll.x 未设置）在 fixed 布局下把“未设置 width 的列”平分剩余宽度
-    const noScrollX = scroll == null || (scroll as any).x == null
-    const isFixed = tableLayout === 'fixed'
-    if (!noScrollX || !isFixed || wrapW == null) return base
-
-    let fixedW = 0
-    const flexCols: any[] = []
-    for (const c of base as any[]) {
-      const w = c?.width
-      if (typeof w === 'number' && Number.isFinite(w)) {
-        fixedW += w
-      } else if (w == null) {
-        flexCols.push(c)
-      }
-    }
-    if (flexCols.length === 0) return base
-
-    const remain = wrapW - fixedW
-    const each = Math.floor(remain / flexCols.length)
-    return (base as any[]).map((c) => {
-      if (c?.width != null) return c
-      const mw = typeof c?.minWidth === 'number' ? c.minWidth : undefined
-      const nextW = mw != null ? Math.max(mw, each) : each
-      return { ...c, width: nextW }
-    })
-  }, [columns, scroll, tableLayout, wrapW])
-
-  const mergedPagination = pagination === undefined ? false : pagination
-  const mergedTableLayout = tableLayout ?? 'fixed'
-  const noScrollX = scroll == null || (scroll as any).x == null
-
-  const emptyTextValue = emptyText ?? t('common.no_data')
-
-  return (
-    <div
-      ref={wrapRef}
-      className={clsx(
-        'cx-table',
-        `cx-table--${size}`,
-        noScrollX && 'cx-table--no-scroll-x',
-        className,
-      )}
-    >
-      <Table<RecordType>
-        {...rest}
-        columns={mergedColumns as any}
-        pagination={mergedPagination}
-        tableLayout={mergedTableLayout}
-        scroll={mergedScroll}
-        locale={{ emptyText: <CxEmptyState message={emptyTextValue} /> }}
-      />
-    </div>
-  )
-}
-
-export type { CxTableOwnProps as CxTableProps }
-

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

@@ -1,15 +0,0 @@
-.cx-tabs {
-  & > .ant-tabs-content-holder {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  & > .ant-tabs-content-holder > .ant-tabs-content {
-    height: 100%;
-  }
-
-  & > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
-    height: 100%;
-  }
-}

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

@@ -1,34 +0,0 @@
-import type { TabsProps } from 'antd'
-import { Tabs } from 'antd'
-import clsx from 'clsx'
-import type { Ref } from 'react'
-import { forwardRef } from 'react'
-import './index.less'
-
-export type CxTabsProps = TabsProps & {
-  /** 自定义类名 */
-  className?: string
-}
-
-const CxTabsInner = forwardRef<any, CxTabsProps>(
-  ({ className, ...rest }, ref) => {
-    return (
-      <Tabs
-        ref={ref as Ref<any>}
-        {...rest}
-        className={clsx('cx-tabs', className)}
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          minHeight: 0,
-          ...rest.style,
-        }}
-      />
-    )
-  },
-)
-
-CxTabsInner.displayName = 'CxTabs'
-
-export const CxTabs = CxTabsInner

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

@@ -1,51 +0,0 @@
-/* CxTag：仅作用于同时带 .cx-tag 的 antd Tag */
-
-span.cx-tag.ant-tag {
-  margin-inline-end: 0;
-  /* 与 antd 主题圆角对齐（无 CSS 变量时退回 6px） */
-  border-radius: var(--ant-border-radius-sm, 6px);
-  font-size: 12px;
-  line-height: 1.25;
-  font-weight: 500;
-
-  /* CxTag 内部所有内容字号统一 12px */
-  * {
-    font-size: 12px;
-  }
-}
-
-/* 胶囊：与用户管理状态列（rounded-full + text-xs + px-2.5 py-1）一致 */
-span.cx-tag.ant-tag.cx-tag--pill {
-  border-radius: 9999px;
-  padding-block: 4px;
-  padding-inline: 10px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.25;
-}
-
-/* filled + 状态色：覆盖 antd 默认 success/error，与用户管理启用/禁用对齐 */
-span.cx-tag.ant-tag.ant-tag-filled.ant-tag-success {
-  background: #dcfce7;
-  color: #166534;
-}
-
-span.cx-tag.ant-tag.ant-tag-filled.ant-tag-error {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.dark span.cx-tag.ant-tag.ant-tag-filled.ant-tag-success {
-  background: rgba(22, 101, 52, 0.35);
-  color: #bbf7d0;
-}
-
-.dark span.cx-tag.ant-tag.ant-tag-filled.ant-tag-error {
-  background: rgba(153, 27, 27, 0.35);
-  color: #fecaca;
-}
-
-span.cx-tag.ant-tag .ant-tag-close-icon {
-  margin-inline-start: 4px;
-  font-size: 12px;
-}

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

@@ -1,140 +0,0 @@
-import { ENUM_DATA, getEnumLabelKey } from '@/meta'
-import { getIconComponent } from '@/utils/routeConfig'
-import type { TagProps } from 'antd'
-import { Tag } from 'antd'
-import clsx from 'clsx'
-import { forwardRef, memo } from 'react'
-import { useTranslation } from 'react-i18next'
-
-export type CxTagProps = TagProps & {
-  /**
-   * 胶囊全圆角 + 与用户管理状态列一致的字号/字重/内边距。
-   * 不设时圆角跟随 antd 主题（`--ant-border-radius-sm` 等）。
-   */
-  pill?: boolean
-  /** 固定宽度（不传则按内容自适应） */
-  width?: number | string
-}
-
-/** YesNo Tag：显示「是/否」，基于 commonYesNo 枚举 */
-export type CxTagYesNoProps = Omit<CxTagProps, 'children'> & {
-  value: unknown
-  /** 枚举 key，预留扩展，默认 'commonYesNo' */
-  enumKey?: string
-  /** 是否反转：true 时 0=是，1=否；适用于「需要认证」等反向语义 */
-  reverse?: boolean
-}
-
-/** Enabled Tag：显示「启用/禁用」，基于 commonStatus 枚举 */
-export type CxTagEnabledProps = Omit<CxTagProps, 'children'> & {
-  value: unknown
-  /** 枚举 key，预留扩展，默认 'commonStatus' */
-  enumKey?: string
-  /** 是否反转：true 时 0/1 与文案、颜色对调（与 YesNo 一致） */
-  reverse?: boolean
-}
-
-/** Enum Tag：通用枚举 Tag，根据 enumKey 和 value 自动获取 label */
-export type CxTagEnumProps = Omit<CxTagProps, 'children'> & {
-  value: unknown
-  /** 枚举 key，如 'commonStatus'、'commonYesNo'、'permissionApiType' 等 */
-  enumKey: string
-}
-
-const CxTagInner = forwardRef<HTMLSpanElement, CxTagProps>(
-  (
-    { className, pill = true, width, style, variant = 'filled', children, ...rest },
-    ref,
-  ) => {
-    return (
-      <Tag
-        ref={ref}
-        {...rest}
-        variant={variant}
-        style={width == null ? style : { ...style, width }}
-        className={clsx('cx-tag', pill && 'cx-tag--pill', className)}
-      >
-        {children}
-      </Tag>
-    )
-  },
-)
-
-CxTagInner.displayName = 'CxTag'
-
-/** YesNo Tag 组件 */
-function CxTagYesNoInner({ value, enumKey = 'commonYesNo', reverse = false, ...rest }: CxTagYesNoProps) {
-  const { t } = useTranslation()
-  // 如果反转，则交换 0 和 1 的映射
-  const normalizedValue = reverse ? (Number(value) === 0 ? 1 : Number(value) === 1 ? 0 : value) : value
-  const labelKey = getEnumLabelKey(enumKey, normalizedValue)
-  
-  // 如果没有自定义 color，根据标准化后的值自动设置颜色
-  if (!rest.color) {
-    rest.color = Number(normalizedValue) === 1 ? 'success' : 'default'
-  }
-  
-  return <CxTagInner {...rest}>{labelKey ? t(labelKey) : undefined}</CxTagInner>
-}
-
-/** Enabled Tag 组件 */
-function CxTagEnabledInner({
-  value,
-  enumKey = 'commonStatus',
-  reverse = false,
-  ...rest
-}: CxTagEnabledProps) {
-  const { t } = useTranslation()
-  const normalizedValue = reverse
-    ? Number(value) === 0
-      ? 1
-      : Number(value) === 1
-        ? 0
-        : value
-    : value
-  const labelKey = getEnumLabelKey(enumKey, normalizedValue)
-  const n = Number(normalizedValue)
-  // 如果没有自定义 color，则根据状态自动设置颜色
-  if (!rest.color) {
-    rest.color = n === 1 ? 'success' : 'error'
-  }
-  return <CxTagInner {...rest}>{labelKey ? t(labelKey) : undefined}</CxTagInner>
-}
-
-/** Enum Tag 组件 */
-function CxTagEnumInner({ value, enumKey, ...rest }: CxTagEnumProps) {
-  const { t } = useTranslation()
-  const labelKey = getEnumLabelKey(enumKey, value)
-  const item = ENUM_DATA[enumKey]?.dataMap?.[`${value}`]
-  const iconName = typeof item?.icon === 'string' ? item.icon : undefined
-  const Icon = getIconComponent(iconName)
-  // 如果没有自定义 color，则从枚举配置中读取颜色
-  if (!rest.color) {
-    const colorMap = ENUM_DATA[enumKey]?.tagColorMap
-    if (colorMap) {
-      const colorValue = colorMap[`${value}`]
-      if (colorValue) {
-        rest.color = colorValue
-      }
-    }
-  }
-  return (
-    <CxTagInner {...rest}>
-      <span className="inline-flex items-center gap-1">
-        {Icon ? <Icon size={14} /> : null}
-        {labelKey ? t(labelKey) : undefined}
-      </span>
-    </CxTagInner>
-  )
-}
-
-CxTagYesNoInner.displayName = 'CxTag.YesNo'
-CxTagEnabledInner.displayName = 'CxTag.Enabled'
-CxTagEnumInner.displayName = 'CxTag.Enum'
-
-/** 基于 antd Tag；`color` 与官方一致（如 success / error 或 `#xxx`）；列表纯展示可受益于 `memo`。 */
-export const CxTag = Object.assign(memo(CxTagInner), {
-  YesNo: memo(CxTagYesNoInner),
-  Enabled: memo(CxTagEnabledInner),
-  Enum: memo(CxTagEnumInner),
-})

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

@@ -1,14 +0,0 @@
-import type { TimelineProps } from 'antd'
-import { Timeline } from 'antd'
-import type { CSSProperties } from 'react'
-
-export type CxTimelineProps = Omit<TimelineProps, 'className' | 'style'> & {
-  className?: string
-  style?: CSSProperties
-}
-
-export function CxTimeline(props: CxTimelineProps) {
-  const { className, style, ...restProps } = props
-
-  return <Timeline className={className} style={style} {...restProps} />
-}