cx-chat 0.0.1

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

@@ -0,0 +1,611 @@
+import type { ButtonProps } from 'antd'
+import { Button } from 'antd'
+import clsx from 'clsx'
+import {
+  Check,
+  CircleCheck,
+  CircleX,
+  Download,
+  Edit,
+  Edit2,
+  Eye,
+  Plus,
+  Star,
+  Trash2,
+  Upload,
+  X,
+} from 'lucide-react'
+import type { CSSProperties, ReactNode } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import type { CxTooltipTone } from '../tooltip'
+import { CxTooltip } from '../tooltip'
+import './index.less'
+
+/** 方框风格图标容器：用于让图标呈现“带方框”的视觉效果（保持整体占位与 iconSize 一致） */
+function SquareIconFrame({ size, children }: { size: number; children: React.ReactNode }) {
+  return (
+    <span
+      className="inline-flex items-center justify-center border-2 border-current rounded-[2px] box-border"
+      style={{ width: size, height: size }}
+    >
+      {children}
+    </span>
+  )
+}
+
+function toCssLength(value: number | string | undefined | null): string | undefined {
+  if (value == null) return undefined
+  return typeof value === 'number' ? `${value}px` : value
+}
+
+const ICON_TYPE_CLASS: Record<string, string> = {
+  default: 'text-gray-500 hover:text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800',
+  primary:
+    'text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 active:bg-blue-100 dark:active:bg-blue-900/40',
+  /** 与 `CxTooltip` success 色（#15803d）同一语义，悬停为绿色系 */
+  success:
+    'text-green-700 hover:bg-green-50 dark:hover:bg-green-900/25 active:bg-green-100 dark:active:bg-green-900/40',
+  danger:
+    'text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 active:bg-red-100 dark:active:bg-red-900/40',
+}
+
+function normalizeAntdButtonSize(
+  sizeProp: ButtonProps['size'] | undefined | null,
+): 'small' | 'medium' | 'large' {
+  if (sizeProp === undefined || sizeProp === null) return 'medium'
+  if (sizeProp === 'middle') return 'medium'
+  return sizeProp
+}
+
+/** 与 antd Button 一致，并支持 icon 模式与 height；icon 模式下 `type` 可作色调（含 danger） */
+export type CxButtonBaseProps = Omit<ButtonProps, 'type'> & {
+  buttonType?: 'antd' | 'icon'
+  height?: number | string
+  type?: ButtonProps['type'] | 'danger' | 'success'
+  /** 图标按钮：悬停文案，优先于原生 `title` */
+  tooltipTitle?: ReactNode
+  /** 图标按钮：`CxTooltip` 背景语义色 */
+  tooltipTone?: CxTooltipTone
+}
+
+/** 纯图标按钮：必须传入 `icon`；语义等价于 `buttonType="icon"` 的 `CxButton` */
+export type CxButtonIconProps = Omit<CxButtonBaseProps, 'buttonType' | 'icon'> & {
+  icon: ReactNode
+}
+
+/** 预设图标的变体：默认图标在组件内写死；可选 `icon` 覆盖、`iconSize` 控制边长 */
+export type CxButtonIconPresetProps = Omit<CxButtonIconProps, 'icon'> & {
+  icon?: ReactNode
+  iconSize?: number
+}
+
+/** 纯图标按钮 / 行内预设（IconEdit 等）默认边长：与列表操作列常用 16 对齐；非列表场景请传 `iconSize` 或自定义 `icon` */
+const CX_ICON_PX = 16
+/** antd 文字按钮上默认图标的边长（与未传 `icon` 时配套；自定义 `icon` 时忽略） */
+const TEXT_BTN_ICON_PX = 16
+
+export function CxButtonIcon({ icon, ...props }: CxButtonIconProps) {
+  return <CxButtonPrimitive buttonType="icon" icon={icon} {...props} />
+}
+
+/**
+ * 与 antd Button 一致：size 支持 large / medium / small；不传 size 默认为 small（表格、搜索、弹窗等）。
+ * 列表页顶栏「新增」等需显式 `size="medium"` 或 `large`。
+ * `middle` 为历史别名，内部会规范为 `medium`。
+ */
+function CxButtonPrimitive({
+  buttonType = 'antd',
+  height,
+  style,
+  icon,
+  size: sizeProp,
+  className,
+  tooltipTitle: tooltipTitleProp,
+  tooltipTone = 'default',
+  ...props
+}: CxButtonBaseProps) {
+  if (buttonType === 'icon') {
+    const {
+      type: iconTone = 'primary',
+      title: legacyTitle,
+      onClick,
+      disabled,
+      ...rest
+    } = props as CxButtonBaseProps & {
+      type?: 'default' | 'primary' | 'danger' | 'success'
+      title?: string
+    }
+    const tipContent = tooltipTitleProp ?? legacyTitle
+    const showTip =
+      tipContent != null &&
+      tipContent !== '' &&
+      (typeof tipContent !== 'string' || tipContent.trim() !== '')
+
+    const buttonEl = (
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={onClick}
+        aria-label={
+          showTip && typeof tipContent === 'string' ? tipContent : undefined
+        }
+        style={style as CSSProperties | undefined}
+        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+        className={clsx(
+          'p-1.5 rounded-lg transition-all active:scale-90',
+          ICON_TYPE_CLASS[iconTone as string] || ICON_TYPE_CLASS.primary,
+          disabled && 'opacity-50 cursor-not-allowed active:scale-100',
+          className,
+        )}>
+        {icon}
+      </button>
+    )
+
+    if (showTip) {
+      const trigger =
+        disabled ? (
+          <span className="inline-flex cursor-not-allowed">{buttonEl}</span>
+        ) : (
+          buttonEl
+        )
+      return (
+        <CxTooltip title={tipContent} tone={tooltipTone}>
+          {trigger}
+        </CxTooltip>
+      )
+    }
+
+    return buttonEl
+  }
+
+  const sizeForAntd = normalizeAntdButtonSize(sizeProp)
+
+  const styleObj = style && typeof style === 'object' ? style : {}
+  const fromStyleHeight = styleObj.height
+  const hasCustomHeight =
+    (fromStyleHeight !== undefined && fromStyleHeight !== null) ||
+    (height !== undefined && height !== null)
+
+  const defaultHeightBySize =
+    sizeForAntd === 'small' ? 32 : sizeForAntd === 'large' ? 44 : 40
+  const resolved =
+    fromStyleHeight !== undefined && fromStyleHeight !== null
+      ? fromStyleHeight
+      : height !== undefined && height !== null
+        ? toCssLength(height)
+        : defaultHeightBySize
+  const resolvedStr = toCssLength(resolved) ?? String(resolved)
+
+  const { height: _drop, ...restStyle } = styleObj
+
+  const mergedStyle: CSSProperties = {
+    boxSizing: 'border-box',
+    ...restStyle,
+  }
+  if (hasCustomHeight) {
+    mergedStyle.height = resolvedStr
+    mergedStyle.minHeight = resolvedStr
+  }
+
+  const antdProps = { ...(props as Record<string, unknown>) }
+  if (antdProps.type === 'success') {
+    antdProps.type = 'default'
+  }
+
+  return (
+    <Button
+      {...(antdProps as ButtonProps)}
+      size={sizeForAntd}
+      icon={icon}
+      className={clsx(
+        'cx-button',
+        `cx-button--size-${sizeForAntd}`,
+        className,
+      )}
+      style={mergedStyle}
+    />
+  )
+}
+
+type VariantProps = CxButtonBaseProps & { children?: ReactNode }
+
+type VariantPropsWithBuiltInIcon = VariantProps & {
+  /** 内置默认图标的边长；仅在使用默认图标时生效（`icon` 为 `undefined`） */
+  iconSize?: number
+}
+
+/** 添加按钮（未传 `icon` 时默认 Plus；不要图标可传 `icon={null}`） */
+export function CxButtonAdd({
+  children,
+  icon,
+  iconSize = TEXT_BTN_ICON_PX,
+  ...props
+}: VariantPropsWithBuiltInIcon) {
+  const { t } = useTranslation()
+  const resolvedIcon = icon === undefined ? <Plus size={iconSize} /> : icon
+  return (
+    <CxButtonPrimitive type="primary" icon={resolvedIcon} {...props}>
+      {children || t('common.add')}
+    </CxButtonPrimitive>
+  )
+}
+
+/** 删除按钮（未传 `icon` 时默认 Trash2；不要图标可传 `icon={null}`） */
+export function CxButtonDelete({
+  children,
+  icon,
+  iconSize = TEXT_BTN_ICON_PX,
+  ...props
+}: VariantPropsWithBuiltInIcon) {
+  const { t } = useTranslation()
+  const resolvedIcon = icon === undefined ? <Trash2 size={iconSize} /> : icon
+  return (
+    <CxButtonPrimitive danger icon={resolvedIcon} {...props}>
+      {children || t('common.delete')}
+    </CxButtonPrimitive>
+  )
+}
+
+/** 确定按钮 */
+export function CxButtonOk({ children, ...props }: VariantProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonPrimitive type="primary" {...props}>
+      {children || t('common.ok')}
+    </CxButtonPrimitive>
+  )
+}
+
+/** 提交按钮 */
+export function CxButtonSubmit({ children, ...props }: VariantProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonPrimitive type="primary" htmlType="submit" {...props}>
+      {children || t('common.submit')}
+    </CxButtonPrimitive>
+  )
+}
+
+/**
+ * 取消按钮（antd 文本按钮：`type="text"` → 无边框、无填充底）。
+ * 注意：antd 6 仅传 `variant` 而不传 `color` 时不会生效，会回退成 `default`+`outlined`（有边框、浅底）。
+ * 若需自定义，可同时传 `color` + `variant`，此时不再默认 `type="text"`。
+ */
+export function CxButtonCancel({
+  children,
+  type,
+  color,
+  variant,
+  ...props
+}: VariantProps) {
+  const { t } = useTranslation()
+  if (color != null && variant != null) {
+    return (
+      <CxButtonPrimitive {...props} color={color} variant={variant}>
+        {children || t('common.cancel')}
+      </CxButtonPrimitive>
+    )
+  }
+  return (
+    <CxButtonPrimitive {...props} type={type ?? 'text'}>
+      {children || t('common.cancel')}
+    </CxButtonPrimitive>
+  )
+}
+
+/**
+ * 表单旁辅助按钮：`type="default"` + `height={42}`，与常见表单项/输入框高度对齐（如图标选择、次要操作）。
+ */
+export function CxButtonSecondary({ children, ...props }: VariantProps) {
+  return (
+    <CxButtonPrimitive type="default" height={42} {...props}>
+      {children}
+    </CxButtonPrimitive>
+  )
+}
+
+/** 编辑按钮（未传 `icon` 时默认 Edit；不要图标可传 `icon={null}`） */
+export function CxButtonEdit({
+  children,
+  icon,
+  iconSize = TEXT_BTN_ICON_PX,
+  ...props
+}: VariantPropsWithBuiltInIcon) {
+  const { t } = useTranslation()
+  const resolvedIcon = icon === undefined ? <Edit size={iconSize} /> : icon
+  return (
+    <CxButtonPrimitive type="link" icon={resolvedIcon} {...props}>
+      {children || t('common.edit')}
+    </CxButtonPrimitive>
+  )
+}
+
+/** 查看按钮 */
+export function CxButtonView({ children, ...props }: VariantProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonPrimitive type="link" {...props}>
+      {children || t('common.view')}
+    </CxButtonPrimitive>
+  )
+}
+
+/** 下载按钮 */
+export function CxButtonDownload({ children, ...props }: VariantProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonPrimitive type="link" {...props}>
+      {children || t('common.download')}
+    </CxButtonPrimitive>
+  )
+}
+
+/** 导出按钮 */
+export function CxButtonExport({ children, ...props }: VariantProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonPrimitive type="link" {...props}>
+      {children || t('common.export')}
+    </CxButtonPrimitive>
+  )
+}
+
+/** 保存按钮 */
+export function CxButtonSave({ children, ...props }: VariantProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonPrimitive type="primary" {...props}>
+      {children || t('common.save')}
+    </CxButtonPrimitive>
+  )
+}
+
+/** 编辑图标按钮（默认 Edit2；默认 Tooltip 为「编辑」） */
+export function CxButtonIconEdit({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'primary',
+  ...rest
+}: CxButtonIconPresetProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonIcon
+      icon={icon ?? <Edit2 size={iconSize} />}
+      tooltipTitle={tooltipTitle ?? title ?? t('common.edit')}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+/** 删除图标按钮（默认 Trash2 + danger 色调；默认 Tooltip 为「删除」） */
+export function CxButtonIconDelete({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'danger',
+  ...rest
+}: CxButtonIconPresetProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonIcon
+      type="danger"
+      icon={icon ?? <Trash2 size={iconSize} />}
+      tooltipTitle={tooltipTitle ?? title ?? t('common.delete')}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+/** 查看图标按钮（默认 Tooltip 为「查看」） */
+export function CxButtonIconView({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'default',
+  ...rest
+}: CxButtonIconPresetProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonIcon
+      icon={icon ?? <Eye size={iconSize} />}
+      tooltipTitle={tooltipTitle ?? title ?? t('common.view')}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+/** 下载图标按钮（默认 Tooltip 为「下载」） */
+export function CxButtonIconDownload({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'primary',
+  ...rest
+}: CxButtonIconPresetProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonIcon
+      icon={icon ?? <Download size={iconSize} />}
+      tooltipTitle={tooltipTitle ?? title ?? t('common.download')}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+/** 导出图标按钮（默认 Tooltip 为「导出」） */
+export function CxButtonIconExport({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'primary',
+  ...rest
+}: CxButtonIconPresetProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonIcon
+      icon={icon ?? <Upload size={iconSize} />}
+      tooltipTitle={tooltipTitle ?? title ?? t('common.export')}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+/** 设为默认等：方框打钩（勾选为默认）；默认 Tooltip 为 common.set_as_default */
+export function CxButtonIconSetDefault({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'primary',
+  type: _typeIgnored,
+  ...rest
+}: CxButtonIconPresetProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonIcon
+      type="primary"
+      icon={icon ?? <Star size={iconSize} />}
+      tooltipTitle={tooltipTitle ?? title ?? t('common.set_as_default')}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+/** 启用图标按钮（默认 Check；hover 与 Tooltip 均为 success 语义） */
+export function CxButtonIconEnable({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'success',
+  type: _typeIgnored,
+  ...rest
+}: CxButtonIconPresetProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonIcon
+      type="success"
+      icon={
+        icon ?? (
+          <SquareIconFrame size={iconSize}>
+            <Check size={iconSize - 4} strokeWidth={2.6} />
+          </SquareIconFrame>
+        )
+      }
+      tooltipTitle={tooltipTitle ?? title ?? t('common.enabled')}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+/** 禁用图标按钮（默认 X；hover 与 Tooltip 均为 danger 语义） */
+export function CxButtonIconDisable({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'danger',
+  type: _typeIgnored,
+  ...rest
+}: CxButtonIconPresetProps) {
+  const { t } = useTranslation()
+  return (
+    <CxButtonIcon
+      type="danger"
+      icon={
+        icon ?? (
+          <SquareIconFrame size={iconSize}>
+            <X size={iconSize - 4} strokeWidth={2.6} />
+          </SquareIconFrame>
+        )
+      }
+      tooltipTitle={tooltipTitle ?? title ?? t('common.disabled')}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+/** 通过图标按钮（默认 CircleCheck；hover 与 Tooltip 均为 success 语义） */
+export function CxButtonIconAccept({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'success',
+  type: _typeIgnored,
+  ...rest
+}: CxButtonIconPresetProps) {
+  return (
+    <CxButtonIcon
+      type="success"
+      icon={icon ?? <CircleCheck size={iconSize} />}
+      tooltipTitle={tooltipTitle ?? title}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+/** 拒绝图标按钮（默认 CircleX；hover 与 Tooltip 均为 danger 语义） */
+export function CxButtonIconReject({
+  iconSize = CX_ICON_PX,
+  icon,
+  tooltipTitle,
+  title,
+  tooltipTone = 'danger',
+  type: _typeIgnored,
+  ...rest
+}: CxButtonIconPresetProps) {
+  return (
+    <CxButtonIcon
+      type="danger"
+      icon={icon ?? <CircleX size={iconSize} />}
+      tooltipTitle={tooltipTitle ?? title}
+      tooltipTone={tooltipTone}
+      {...rest}
+    />
+  )
+}
+
+const CxButton = Object.assign(CxButtonPrimitive, {
+  Add: CxButtonAdd,
+  Cancel: CxButtonCancel,
+  Delete: CxButtonDelete,
+  Download: CxButtonDownload,
+  Edit: CxButtonEdit,
+  Export: CxButtonExport,
+  Icon: CxButtonIcon,
+  IconAccept: CxButtonIconAccept,
+  IconDelete: CxButtonIconDelete,
+  IconDisable: CxButtonIconDisable,
+  IconDownload: CxButtonIconDownload,
+  IconEdit: CxButtonIconEdit,
+  IconEnable: CxButtonIconEnable,
+  IconReject: CxButtonIconReject,
+  IconSetDefault: CxButtonIconSetDefault,
+  IconExport: CxButtonIconExport,
+  IconView: CxButtonIconView,
+  Ok: CxButtonOk,
+  Save: CxButtonSave,
+  Secondary: CxButtonSecondary,
+  Submit: CxButtonSubmit,
+  View: CxButtonView,
+})
+
+export { CxButton }
+export default CxButton

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

@@ -0,0 +1,78 @@
+import clsx from 'clsx'
+import type { MouseEvent } from 'react'
+
+export type CxCheckboxProps = {
+  checked: boolean
+  /** 点击后目标状态为 `!checked`；事件已 `stopPropagation`，适合放在可点击行内 */
+  onChange?: (checked: boolean, e: MouseEvent<HTMLButtonElement>) => void
+  disabled?: boolean
+  className?: string
+  /** 格子尺寸，默认与权限卡片一致 */
+  size?: 'sm' | 'md'
+  'aria-label'?: string
+}
+
+const sizeClass: Record<NonNullable<CxCheckboxProps['size']>, string> = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+}
+
+const iconSizeClass: Record<NonNullable<CxCheckboxProps['size']>, string> = {
+  sm: 'h-3 w-3',
+  md: 'h-3.5 w-3.5',
+}
+
+/**
+ * 视觉勾选框：与分配权限弹框右侧权限项一致（蓝底白勾 / 灰边框白底）。
+ * 使用 `button` 实现，避免原生 checkbox 与自定义样式不一致。
+ */
+export function CxCheckbox({
+  checked,
+  onChange,
+  disabled = false,
+  className,
+  size = 'md',
+  'aria-label': ariaLabel,
+}: CxCheckboxProps) {
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={(e) => {
+        e.stopPropagation()
+        if (disabled) return
+        onChange?.(!checked, e)
+      }}
+      className={clsx(
+        'flex shrink-0 items-center justify-center rounded-md border transition-all outline-none',
+        'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+        sizeClass[size],
+        checked
+          ? 'border-blue-600 bg-blue-600 shadow-md shadow-blue-500/20'
+          : 'border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-900',
+        disabled && 'cursor-not-allowed opacity-50',
+        className,
+      )}>
+      {checked && (
+        <svg
+          className={clsx(iconSizeClass[size], 'text-white')}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden>
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={3.5}
+            d="M5 13l4 4L19 7"
+          />
+        </svg>
+      )}
+    </button>
+  )
+}
+
+export default CxCheckbox

package/src/components/cx-ui/date-picker/index.less

@@ -0,0 +1,17 @@
+.cx-date-picker {
+  border-radius: 8px;
+
+  &.cx-date-picker--cxForm {
+    min-height: 42px;
+    height: 42px;
+  }
+
+  &.cx-date-picker--cxSearch {
+    min-height: 40px;
+    height: 40px;
+  }
+
+  .ant-picker-input > input {
+    font-size: inherit;
+  }
+}