cx-chat 0.0.1

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+/* 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

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

@@ -0,0 +1,14 @@
+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} />
+}