cx-chat 0.0.1

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

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

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

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

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

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

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

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