cx-chat 0.0.2 → 0.0.4

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

@@ -1,20 +0,0 @@
-import React from 'react'
-import { Form } from 'antd'
-import type { FormProps } from 'antd'
-import { CxFormContext, type CxFormRulesMap } from './CxForm'
-
-type Props = Omit<FormProps, 'children'> & {
-  children?: React.ReactNode
-  rules?: CxFormRulesMap
-}
-
-export default function CxForm(props: Props) {
-  const { rules, children, ...formProps } = props
-  return (
-    <CxFormContext.Provider value={{ rules }}>
-      <Form {...formProps}>{children}</Form>
-    </CxFormContext.Provider>
-  )
-}
-
-export type { CxFormRulesMap }

package/src/components/cx-ui/form-item/index.less

@@ -1,26 +0,0 @@
-.cx-form-item {
-  .ant-form-item-control-input {
-    min-height: 42px;
-  }
-
-  .ant-form-item-control-input-content {
-    display: flex;
-    align-items: center;
-    /* 上层 overflow:hidden（如宽屏角色弹窗）时避免裁切加粗边框与焦点 ring */
-    padding: 2px;
-  }
-}
-
-.ant-form-horizontal .cx-form-item {
-  .ant-form-item-row {
-    align-items: center;
-  }
-
-  .ant-form-item-label > label {
-    min-height: 42px;
-    display: inline-flex;
-    align-items: center;
-    line-height: 1.2;
-  }
-}
-

package/src/components/cx-ui/form-item/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { Form } from 'antd'
-import type { FormItemProps } from 'antd'
-import type { Rule } from 'antd/es/form'
-import { useCxFormRules } from '../form/CxForm'
-import './index.less'
-
-type NameType = FormItemProps['name']
-
-function pickRuleKey(name: NameType, ruleKey?: string): string | undefined {
-  if (ruleKey) return ruleKey
-  if (typeof name === 'string') return name
-  return undefined
-}
-
-type Props = FormItemProps & {
-  /** 规则键；不传则尝试用 name(string) 作为键 */
-  ruleKey?: string
-}
-
-export default function CxFormItem({ ruleKey, rules, name, ...props }: Props) {
-  const rulesMap = useCxFormRules()
-  const key = pickRuleKey(name, ruleKey)
-  const autoRules = key ? (rulesMap?.[key] as Rule[] | undefined) : undefined
-  const mergedClassName = ['cx-form-item', props.className].filter(Boolean).join(' ')
-
-  return (
-    <Form.Item
-      {...props}
-      className={mergedClassName}
-      name={name}
-      rules={rules ?? autoRules}
-    />
-  )
-}
-

package/src/components/cx-ui/index.ts

@@ -1,70 +0,0 @@
-import './styles/index.less'
-
-export {
-    CxButton,
-    CxButtonAdd,
-    CxButtonCancel,
-    CxButtonDelete,
-    CxButtonDownload,
-    CxButtonEdit,
-    CxButtonExport,
-    CxButtonIcon,
-    CxButtonIconDelete,
-    CxButtonIconDisable,
-    CxButtonIconDownload,
-    CxButtonIconEdit,
-    CxButtonIconEnable, CxButtonIconExport, CxButtonIconSetDefault, CxButtonIconView,
-    CxButtonOk,
-    CxButtonSave,
-    CxButtonSecondary,
-    CxButtonSubmit,
-    CxButtonView
-} from './button'
-export { CxCheckbox } from './checkbox'
-export type { CxCheckboxProps } from './checkbox'
-export { default as CxDatePicker } from './date-picker'
-export type { CxDatePickerProps } from './date-picker'
-export { default as CxDrawer } from './drawer'
-export { CxEmptyState } from './empty-state'
-export type { CxEmptyStateProps } from './empty-state'
-export { default as CxForm } from './form'
-export type { CxFormRulesMap } from './form'
-export { default as CxFormItem } from './form-item'
-export { CxFormContext, useCxFormRules } from './form/CxForm'
-export { default as CxInput } from './input'
-export type { CxInputAutoCompleteProps, CxInputProps } from './input'
-export { default as CxInputNumber } from './input-number'
-export { default as CxModal, useCxModal } from './modal'
-export { default as CxMultiSelect } from './multi-select'
-export { default as CxRadio } from './radio'
-export type { CxRadioOption, CxRadioProps } from './radio'
-export { default as CxRangePicker } from './range-picker'
-export type { CxRangePickerProps } from './range-picker'
-export { default as CxSelect } from './select'
-export type { CxSelectProps } from './select'
-export { CxSteps } from './steps'
-export type { CxStepsProps } from './steps'
-export { CxTimeline } from './timeline'
-export type { CxTimelineProps } from './timeline'
-export { CxSkeleton } from './skeleton'
-export type { CxSkeletonProps } from './skeleton'
-export { default as CxSwitch } from './switch'
-export type { CxSwitchProps, CxSwitchVariant } from './switch'
-export { default as CxTable } from './table'
-export type { CxTableProps } from './table'
-export { CxTabs } from './tabs'
-export type { CxTabsProps } from './tabs'
-export { CxTag } from './tag'
-export type { CxTagProps } from './tag'
-export { CxTooltip } from './tooltip'
-export type { CxTooltipProps, CxTooltipTone } from './tooltip'
-export { CxTree } from './tree'
-export type {
-    CxTreeFieldNames,
-    CxTreeProps,
-    CxTreeSameNodeReselect
-} from './tree'
-export { default as CxTreeSelect } from './tree-select'
-export { default as UploadFile } from './upload-file'
-export { default as UploadImg } from './upload-img'
-

package/src/components/cx-ui/input/auto-complete.tsx

@@ -1,134 +0,0 @@
-import type { AutoCompleteProps } from 'antd'
-import { AutoComplete, Input } from 'antd'
-import { clsx } from 'clsx'
-import { ChevronDown } from 'lucide-react'
-import { useCallback, useState } from 'react'
-
-export type CxInputAutoCompleteProps = Omit<AutoCompleteProps, 'children'> & {
-  /** 与 CxInput small/middle 对齐，默认 small（表格内紧凑） */
-  size?: 'small' | 'middle' | 'large'
-  /** 透传到内部 antd Input */
-  inputClassName?: string
-  /**
-   * 是否在输入框**内侧**展示下拉箭头（与 Select 后缀一致）；默认 true。
-   * 为 false 时仅靠焦点展开，无箭头。
-   */
-  showDropdownArrow?: boolean
-}
-
-/**
- * 与 CxInput 默认行高一致：primitive 未写 style 时为 42；CxInputMedium=40；CxInputLarge=42。
- * （若需 32px 紧凑行请使用 CxInput.Small，本组件暂无对应档，可后续加 `compact`）
- */
-const inputHeights = { small: 42, middle: 40, large: 42 } as const
-
-/** AutoComplete 底层是 Select，去掉 selector 壳层多余 min-height/padding，避免比同行 CxInput 高或矮一截 */
-const autocompleteSelectShellClass =
-  '[&_.ant-select-selector]:!min-h-0 [&_.ant-select-selector]:!h-full [&_.ant-select-selector]:border-0 [&_.ant-select-selector]:bg-transparent [&_.ant-select-selector]:p-0 [&_.ant-select-selector]:shadow-none'
-
-/**
- * 与 CxInput 同系样式的可输入下拉（antd AutoComplete + 统一样式）。
- * - 下拉展开时默认展示**全部**候选项（不按当前输入过滤）；仍可手输列表外的类型如 VARCHAR(100)
- * - 需要按输入过滤时可传入 `filterOption`
- * - 获得焦点时展开；箭头在输入框内作后缀，点击可切换展开（mousedown 防失焦）
- */
-export function CxInputAutoComplete({
-  size = 'small',
-  className,
-  inputClassName,
-  style,
-  open: openProp,
-  onOpenChange,
-  onFocus,
-  filterOption,
-  suffixIcon: _suffixIcon,
-  showDropdownArrow = true,
-  disabled,
-  ...rest
-}: CxInputAutoCompleteProps) {
-  const [internalOpen, setInternalOpen] = useState(false)
-  const mergedOpen = openProp ?? internalOpen
-
-  const handleOpenChange = useCallback(
-    (next: boolean) => {
-      if (openProp === undefined) {
-        setInternalOpen(next)
-      }
-      onOpenChange?.(next)
-    },
-    [openProp, onOpenChange],
-  )
-
-  const h = inputHeights[size] ?? inputHeights.small
-
-  const inputSuffix =
-    showDropdownArrow === false ? undefined : (
-      <span
-        role="button"
-        tabIndex={-1}
-        aria-label="toggle options"
-        className="flex cursor-pointer items-center text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
-        onMouseDown={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          if (!disabled) {
-            handleOpenChange(!mergedOpen)
-          }
-        }}
-      >
-        <ChevronDown size={14} strokeWidth={2} aria-hidden />
-      </span>
-    )
-
-  /** 默认 false：展开下列表为全量候选项，避免“只剩与当前输入匹配的几项” */
-  const mergedFilter = filterOption !== undefined ? filterOption : false
-
-  return (
-    <AutoComplete
-      {...rest}
-      disabled={disabled}
-      open={mergedOpen}
-      onOpenChange={handleOpenChange}
-      filterOption={mergedFilter}
-      popupMatchSelectWidth={rest.popupMatchSelectWidth ?? false}
-      className={clsx(
-        'cx-input-autocomplete w-full min-w-0',
-        autocompleteSelectShellClass,
-        className,
-      )}
-      style={{
-        width: '100%',
-        height: h,
-        minHeight: h,
-        ...style,
-      }}
-      suffixIcon={null}
-    >
-      <Input
-        size={size}
-        disabled={disabled}
-        className={clsx('cx-input min-w-0', inputClassName)}
-        rootClassName="cx-input-root"
-        suffix={inputSuffix}
-        styles={{
-          root: {
-            boxSizing: 'border-box',
-            minHeight: h,
-            height: h,
-            borderRadius: 8,
-          },
-        }}
-        style={{
-          boxSizing: 'border-box',
-          borderRadius: 8,
-          height: h,
-          minHeight: h,
-        }}
-        onFocus={(e) => {
-          handleOpenChange(true)
-          onFocus?.(e)
-        }}
-      />
-    </AutoComplete>
-  )
-}

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

@@ -1,259 +0,0 @@
-import type { GetProps } from 'antd'
-import { Input, Space } from 'antd'
-import clsx from 'clsx'
-import React, { useMemo } from 'react'
-
-import { CxInputAutoComplete } from './auto-complete'
-import { CxFloatingShell } from '../floating-shell/CxFloatingShell'
-import { hasCxFloatingValue } from '../floating-shell/has-floating-value'
-
-type TextAreaProps = GetProps<typeof Input.TextArea>
-type AntInputProps = GetProps<typeof Input>
-type InputStyles = NonNullable<AntInputProps['styles']>
-
-type CxInputOwn = {
-  cxFloatingLabel?: React.ReactNode
-  cxFocusPlaceholder?: string
-}
-
-export type CxInputProps =
-  | (Omit<AntInputProps, 'variant'> & CxInputOwn)
-  | (TextAreaProps & CxInputOwn & { type: 'textarea' })
-
-type CxInputTextProps = Omit<AntInputProps, 'variant'> & CxInputOwn
-
-/** CxInput 基础组件：统一 Input / TextArea 与浮动标签能力。 */
-const CxInputPrimitive: React.FC<CxInputProps> = (props) => {
-  const {
-    style = undefined,
-    cxFloatingLabel,
-    cxFocusPlaceholder,
-    placeholder,
-    value,
-    onFocus,
-    onBlur,
-    disabled,
-    className,
-    rootClassName: rootClassNameProp,
-    addonBefore,
-    addonAfter,
-    styles: stylesProp,
-    size,
-    ...rest
-  } = props as AntInputProps & CxInputOwn
-
-  const resolveHeight = () => {
-    const h = (style && typeof style === 'object' ? (style as any).height : undefined) ??
-      ((props as any).style && typeof (props as any).style === 'object' ? (props as any).style.height : undefined)
-    if (typeof h === 'number') return h
-    if (size === 'small') return 32
-    if (size === 'middle') return 40
-    return 42
-  }
-
-  /** 根据高度推导浮动壳的布局类型：40 及以下按搜索区，其他按表单区。 */
-  const shellVariant: 'cxForm' | 'cxSearch' = resolveHeight() <= 40 ? 'cxSearch' : 'cxForm'
-
-  const height = resolveHeight()
-  const hasAddon = addonBefore != null || addonAfter != null
-  const mergedStyles = useMemo((): InputStyles | undefined => {
-    if (!hasAddon) return stylesProp
-    const box = {
-      height,
-      minHeight: height,
-      boxSizing: 'border-box' as const,
-    }
-    const base = (stylesProp ?? {}) as InputStyles & { input?: Record<string, unknown> }
-    return {
-      ...base,
-      input: { ...box, ...(base.input ?? {}) },
-    } as InputStyles
-  }, [hasAddon, height, stylesProp])
-  const isTextarea = (rest as AntInputProps).type === 'textarea'
-
-  if (isTextarea) {
-    const { type, ...restProps } = rest as AntInputProps & { type?: string }
-    return (
-      <CxInputTextarea
-        {...(restProps as unknown as TextAreaProps)}
-        rootClassName={rootClassNameProp}
-        className={className}
-        style={style}
-      />
-    )
-  }
-
-  const useFloat =
-    cxFloatingLabel != null &&
-    cxFloatingLabel !== false &&
-    String(cxFloatingLabel).trim() !== ''
-
-  const hasValue = useMemo(
-    () => hasCxFloatingValue(value, 'default'),
-    [value],
-  )
-
-  const inputStyle: React.CSSProperties = {
-    boxSizing: 'border-box',
-    /* addon 时样式在 Input.Group 根上，圆角会破坏与 addon 的拼接，交给 antd */
-    ...(!hasAddon ? { borderRadius: 8 } : {}),
-    ...(useFloat
-      ? { minHeight: 49 }
-      : hasAddon
-        ? { minHeight: height }
-        : { height }),
-    ...(style && typeof style === 'object' ? style : {}),
-  }
-
-  const isPassword = (rest as AntInputProps).type === 'password'
-
-  if (isPassword) {
-    const { type, ...restProps } = rest as AntInputProps & { type?: string }
-    return (
-      <Input.Password
-        {...(restProps as any)}
-        size={size}
-        rootClassName={clsx('cx-input-root', rootClassNameProp)}
-        disabled={disabled}
-        value={value}
-        className={clsx('cx-input', className)}
-        style={inputStyle}
-        styles={mergedStyles}
-        placeholder={useFloat ? undefined : placeholder}
-        onBlur={onBlur}
-        onFocus={onFocus}
-      />
-    )
-  }
-
-  const inputEl = (
-    addonBefore != null || addonAfter != null ? (
-      <Space.Compact style={{ width: '100%' }}>
-        {addonBefore}
-        <Input
-          {...(rest as AntInputProps)}
-          size={size}
-          rootClassName={clsx('cx-input-root', rootClassNameProp)}
-          disabled={disabled}
-          value={value}
-          className={clsx('cx-input', className)}
-          style={inputStyle}
-          styles={mergedStyles}
-          placeholder={useFloat ? undefined : placeholder}
-          onBlur={onBlur}
-          onFocus={onFocus}
-        />
-        {addonAfter}
-      </Space.Compact>
-    ) : (
-      <Input
-        {...(rest as AntInputProps)}
-        size={size}
-        rootClassName={clsx('cx-input-root', rootClassNameProp)}
-        disabled={disabled}
-        value={value}
-        className={clsx('cx-input', className)}
-        style={inputStyle}
-        styles={mergedStyles}
-        placeholder={useFloat ? undefined : placeholder}
-        onBlur={onBlur}
-        onFocus={onFocus}
-      />
-    )
-  )
-
-  if (!useFloat) {
-    return inputEl
-  }
-
-  return (
-    <CxFloatingShell
-      disabled={disabled}
-      focusPlaceholder={cxFocusPlaceholder ?? placeholder}
-      hasValue={hasValue}
-      label={cxFloatingLabel}
-      variant={shellVariant}
-    >
-      {inputEl}
-    </CxFloatingShell>
-  )
-}
-
-/** Large：42px，高度偏表单主输入。 */
-export function CxInputLarge(props: CxInputTextProps): React.ReactElement
-export function CxInputLarge(props: CxInputProps) {
-  return (
-    <CxInputPrimitive
-      {...(props as any)}
-      style={{ ...(props as any)?.style, height: 42, minHeight: 42 }}
-    />
-  )
-}
-
-/** Medium：40px，高度偏搜索区输入。 */
-export function CxInputMedium(props: CxInputTextProps): React.ReactElement
-export function CxInputMedium(props: CxInputProps) {
-  return (
-    <CxInputPrimitive
-      {...(props as any)}
-      style={{ ...(props as any)?.style, height: 40, minHeight: 40 }}
-    />
-  )
-}
-
-/** Small：32px，更紧凑。 */
-export function CxInputSmall(props: CxInputTextProps): React.ReactElement
-export function CxInputSmall(props: CxInputProps) {
-  return (
-    <CxInputPrimitive
-      {...(props as any)}
-      style={{ ...(props as any)?.style, height: 32, minHeight: 32 }}
-    />
-  )
-}
-
-/** Float：第 4 种类型，浮动标签输入（使用 CxFloatingShell）。 */
-export function CxInputFloat(props: CxInputTextProps): React.ReactElement
-export function CxInputFloat(props: CxInputTextProps) {
-  const hasLabel =
-    (props as any)?.cxFloatingLabel != null &&
-    (props as any)?.cxFloatingLabel !== false &&
-    String((props as any)?.cxFloatingLabel).trim() !== ''
-  return (
-    <CxInputPrimitive
-      {...(props as any)}
-      cxFloatingLabel={
-        hasLabel ? (props as any)?.cxFloatingLabel : (props as any)?.placeholder
-      }
-    />
-  )
-}
-
-/** Textarea：第 5 种类型，独立文本域输入。 */
-export function CxInputTextarea(props: TextAreaProps & CxInputOwn) {
-  const { style, className, rootClassName, ...rest } = props as any
-  return (
-    <Input.TextArea
-      {...(rest as TextAreaProps)}
-      rootClassName={clsx('cx-input-root', rootClassName)}
-      className={clsx('cx-input', 'cx-input--textarea', className)}
-      style={{
-        boxSizing: 'border-box',
-        borderRadius: 8,
-        ...(style && typeof style === 'object' ? style : {}),
-      }}
-    />
-  )
-}
-
-const ExportedCxInput = Object.assign(CxInputPrimitive, {
-  Large: CxInputLarge,
-  Medium: CxInputMedium,
-  Small: CxInputSmall,
-  Float: CxInputFloat,
-  Textarea: CxInputTextarea,
-  AutoComplete: CxInputAutoComplete,
-})
-
-export type { CxInputAutoCompleteProps } from './auto-complete'
-export default ExportedCxInput

package/src/components/cx-ui/input-number/index.jsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import { InputNumber } from 'antd'
-
-/**
- * 基础数字输入框：用于统一 cx-ui 样式与高度。
- * @param {import('antd').InputNumberProps & { height?: number, rootClassName?: string }} props
- */
-function CxInputNumberPrimitive({
-  height,
-  style = undefined,
-  rootClassName,
-  className,
-  ...props
-}) {
-  const resolvedHeight = height ?? 42
-
-  return (
-    <InputNumber
-      {...props}
-      rootClassName={clsx('cx-input-number-root', rootClassName)}
-      className={['cx-input-number', className].filter(Boolean).join(' ')}
-      style={{
-        height: resolvedHeight,
-        width: style?.width ?? props.style?.width ?? '100%',
-        boxSizing: 'border-box',
-        borderRadius: 8,
-        ...(props.style || {}),
-        ...(style || {}),
-      }}
-    />
-  )
-}
-
-/**
- * cxForm 场景数字输入框：高度 42px。
- * @param {import('antd').InputNumberProps} props
- */
-export function CxInputNumberLarge(props) {
-  return <CxInputNumberPrimitive {...props} height={42} />
-}
-
-/**
- * cxSearch 场景数字输入框：高度 40px。
- * @param {import('antd').InputNumberProps} props
- */
-export function CxInputNumberMedium(props) {
-  return <CxInputNumberPrimitive {...props} height={40} />
-}
-
-/**
- * small 场景数字输入框：高度 32px。
- * @param {import('antd').InputNumberProps} props
- */
-export function CxInputNumberSmall(props) {
-  return <CxInputNumberPrimitive {...props} height={32}  />
-}
-
-const ExportedCxInputNumber = Object.assign(CxInputNumberPrimitive, {
-  Large: CxInputNumberLarge,
-  Medium: CxInputNumberMedium,
-  Small: CxInputNumberSmall,
-})
-
-export default ExportedCxInputNumber
-