cx-chat 0.0.1

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

@@ -0,0 +1,34 @@
+.ant-select-dropdown {
+  .ant-select-item,
+  .ant-select-item-option {
+    height: 36px!important;
+    font-size: 14px!important;
+    line-height: 26px;
+    border-radius: 6px;
+  }
+
+  .ant-select-item:last-child,
+  .ant-select-item-option:last-child {
+    height: 36px!important;
+    font-size: 14px!important;
+    line-height: 26px;
+    border-radius: 6px;
+  }
+
+  /* hover：未选中项 */
+  .ant-select-item-option:hover:not(.ant-select-item-option-disabled),
+  .ant-select-item-option-active:not(.ant-select-item-option-selected):not(.ant-select-item-option-disabled) {
+    background-color: var(--cx-option-hover-bg) !important;
+  }
+
+  /* 选中项 */
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    background-color: var(--cx-option-selected-bg) !important;
+    color: var(--cx-option-selected-text) !important;
+  }
+
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled):hover {
+    background-color: var(--cx-option-selected-bg) !important;
+    color: var(--cx-option-selected-text) !important;
+  }
+}

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

@@ -0,0 +1,196 @@
+import type { GetProps } from 'antd'
+import { Select } from 'antd'
+import clsx from 'clsx'
+import React, { useMemo, useState } from 'react'
+
+import { CxFloatingShell } from '../floating-shell/CxFloatingShell'
+import { hasCxFloatingValue } from '../floating-shell/has-floating-value'
+import { CxEmptyState } from '../empty-state'
+import './index.less'
+
+type AntSelectProps = GetProps<typeof Select>
+
+type CxSelectOwn = {
+  cxFloatingLabel?: React.ReactNode
+  cxFocusPlaceholder?: string
+}
+
+export type CxSelectProps = Omit<AntSelectProps, 'variant'> & CxSelectOwn
+
+type CxSelectBaseProps = Omit<AntSelectProps, 'variant'> & CxSelectOwn
+
+/** 判断浮动标签是否有效（避免 String() / Number() 这类强转）。 */
+const hasNonEmptyFloatingLabel = (label: React.ReactNode): boolean => {
+  if (label == null || label === false) return false
+  if (typeof label === 'string') return label.trim().length > 0
+  return true
+}
+
+/** 获取浮动壳聚焦占位：优先 cxFocusPlaceholder，其次仅接受 string placeholder。 */
+const resolveFocusPlaceholder = (
+  cxFocusPlaceholder: string | undefined,
+  placeholder: AntSelectProps['placeholder'] | undefined,
+): string | undefined => {
+  if (cxFocusPlaceholder) return cxFocusPlaceholder
+  if (typeof placeholder === 'string') return placeholder
+  return undefined
+}
+
+/** CxSelect 基础组件：统一 Select 与浮动标签能力。 */
+const CxSelectPrimitive: React.FC<CxSelectProps> = (props) => {
+  const {
+    style = undefined,
+    cxFloatingLabel,
+    cxFocusPlaceholder,
+    placeholder,
+    value,
+    disabled,
+    className,
+    size: sizeProp,
+    mode,
+    onDropdownVisibleChange,
+    onOpenChange,
+    notFoundContent,
+    ...rest
+  } = props
+
+  /** 解析高度：须与 `size` 一致，否则小号下箭头会上下错位（表格内常用 size=small）。 */
+  const resolveHeight = () => {
+    const h = style && typeof style === 'object' ? (style as { height?: unknown }).height : undefined
+    if (typeof h === 'number') return h
+    if (sizeProp === 'small') return 32
+    if (sizeProp === 'middle') return 40
+    return 42
+  }
+
+  /** 根据高度推导浮动壳的布局类型：40 及以下按搜索区，其他按表单区。 */
+  const shellVariant: 'cxForm' | 'cxSearch' = resolveHeight() <= 40 ? 'cxSearch' : 'cxForm'
+
+  const height = resolveHeight()
+  /** 多选 / tags：行高随 Tag 换行增高，各 size 仅保 minHeight 与控件刻度一致 */
+  const multiOrTags = mode === 'multiple' || mode === 'tags'
+  const useFloat = hasNonEmptyFloatingLabel(cxFloatingLabel)
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+
+  const hasValue = useMemo(() => hasCxFloatingValue(value, 'select'), [value])
+
+  const mergedStyle: React.CSSProperties =
+    style && typeof style === 'object' ? { ...(style as React.CSSProperties) } : {}
+
+  const selectStyle: React.CSSProperties = {
+    boxSizing: 'border-box',
+    borderRadius: 8,
+    ...mergedStyle,
+  }
+
+  if (useFloat) {
+    Object.assign(selectStyle, { minHeight: 49 })
+  } else if (multiOrTags) {
+    const rawMin = mergedStyle.minHeight
+    const n =
+      typeof rawMin === 'number'
+        ? rawMin
+        : typeof rawMin === 'string'
+          ? Number.parseFloat(rawMin)
+          : Number.NaN
+    const minH = Number.isFinite(n) && n > 0 ? Math.max(n, height) : height
+    Object.assign(selectStyle, { minHeight: minH, height: 'auto' })
+  } else {
+    Object.assign(selectStyle, { height, minHeight: height })
+  }
+
+  const selectSize = sizeProp || (useFloat ? 'middle' : 'large')
+  const selectNotFoundContent =
+    notFoundContent === undefined
+      ? <CxEmptyState message="暂无数据" />
+      : notFoundContent
+
+  const selectEl = (
+    <Select
+      {...rest}
+      mode={mode}
+      disabled={disabled}
+      value={value}
+      size={selectSize}
+      className={clsx('cx-select', 'cx-select-selector', className)}
+      style={selectStyle}
+      placeholder={useFloat ? undefined : placeholder}
+      fieldNames={{ label: 'label', value: 'value' }}
+      notFoundContent={selectNotFoundContent}
+      onOpenChange={(open) => {
+        setDropdownOpen(open)
+        onOpenChange?.(open)
+        onDropdownVisibleChange?.(open)
+      }}
+    />
+  )
+
+  if (!useFloat) return selectEl
+
+  return (
+    <CxFloatingShell
+      disabled={disabled}
+      focusPlaceholder={resolveFocusPlaceholder(cxFocusPlaceholder, placeholder)}
+      hasValue={hasValue}
+      label={cxFloatingLabel}
+      overlayOpen={dropdownOpen}
+      variant={shellVariant}
+    >
+      {selectEl}
+    </CxFloatingShell>
+  )
+}
+
+/** Large：42px，高度偏表单主输入。 */
+export function CxSelectLarge(props: CxSelectBaseProps): React.ReactElement
+export function CxSelectLarge(props: CxSelectProps) {
+  return (
+    <CxSelectPrimitive
+      {...(props as any)}
+      style={{ ...(props as any)?.style, height: 42, minHeight: 42 }}
+    />
+  )
+}
+
+/** Medium：40px，高度偏搜索区输入。 */
+export function CxSelectMedium(props: CxSelectBaseProps): React.ReactElement
+export function CxSelectMedium(props: CxSelectProps) {
+  return (
+    <CxSelectPrimitive
+      {...(props as any)}
+      style={{ ...(props as any)?.style, height: 40, minHeight: 40 }}
+    />
+  )
+}
+
+/** Small：32px，更紧凑。 */
+export function CxSelectSmall(props: CxSelectBaseProps): React.ReactElement
+export function CxSelectSmall(props: CxSelectProps) {
+  return (
+    <CxSelectPrimitive
+      {...(props as any)}
+      style={{ ...(props as any)?.style, height: 32, minHeight: 32 }}
+    />
+  )
+}
+
+/** Float：第 4 种类型，浮动标签下拉（使用 CxFloatingShell）。 */
+export function CxSelectFloat(props: CxSelectBaseProps): React.ReactElement
+export function CxSelectFloat(props: CxSelectBaseProps) {
+  const hasLabel = hasNonEmptyFloatingLabel((props as any)?.cxFloatingLabel)
+  return (
+    <CxSelectPrimitive
+      {...(props as any)}
+      cxFloatingLabel={hasLabel ? (props as any)?.cxFloatingLabel : (props as any)?.placeholder}
+    />
+  )
+}
+
+const ExportedCxSelect = Object.assign(CxSelectPrimitive, {
+  Large: CxSelectLarge,
+  Medium: CxSelectMedium,
+  Small: CxSelectSmall,
+  Float: CxSelectFloat,
+})
+
+export default ExportedCxSelect

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

@@ -0,0 +1,12 @@
+import { Skeleton } from 'antd'
+import type { SkeletonProps } from 'antd'
+import clsx from 'clsx'
+
+export type CxSkeletonProps = SkeletonProps & {
+  className?: string
+}
+
+/** antd Skeleton 薄封装，便于统一 class 与后续主题扩展 */
+export function CxSkeleton({ className, ...rest }: CxSkeletonProps) {
+  return <Skeleton className={clsx('cx-skeleton', className)} {...rest} />
+}

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

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

package/src/components/cx-ui/styles/_tokens.less

@@ -0,0 +1,79 @@
+/**
+ * Cx UI 设计令牌（--cx-*）
+ * 业务或主题可在 :root 或局部容器上覆盖这些变量，无需改组件源码。
+ *
+ * 根类约定（供 index.less 作用域覆盖 antd）：
+ * - CxInput       → .cx-input + rootClassName `.cx-input-root`（单行焦点环）
+ * - CxSelect      → 根节点 `.ant-select.cx-select`（antd 6+ 边框在根上；`cx-select-selector` 仅作兼容类名，勿当作子节点）
+ * - CxDatePicker  → .cx-datepicker + .cx-date-picker
+ * - CxRangePicker → .cx-range-picker
+ * - CxInputNumber → .cx-input-number + rootClassName `.cx-input-number-root`
+ * - CxTreeSelect  → .cx-tree-select
+ * - CxMultiSelect → .cx-multi-select
+ */
+
+:root {
+  /* 字号 */
+  --cx-font-size-base: 14px;
+  --cx-font-size-sm: 12px;
+  /** 浮动搜索等：比 sm 再小一档 */
+  --cx-font-size-xs: 11px;
+
+  /* 表单/搜索控件内文字（对齐原 ant 默认约 14px，由 index.less 落到具体节点） */
+  --cx-input-font-size: var(--cx-font-size-base);
+  --cx-select-font-size: var(--cx-font-size-base);
+  --cx-select-option-font-size: var(--cx-font-size-base);
+  --cx-picker-font-size: var(--cx-font-size-base);
+  --cx-input-number-font-size: var(--cx-font-size-base);
+  --cx-tree-select-font-size: var(--cx-font-size-base);
+
+  /* 浮动壳内：略小于 label，且略小于普通 sm */
+  --cx-floating-control-font-size: var(--cx-font-size-xs);
+  --cx-floating-label-font-size: var(--cx-font-size-base);
+
+  /* 控件高度（与组件内联高度策略一致时可再抽） */
+  --cx-control-height: 42px;
+  --cx-control-height-sm: 40px;
+
+  --cx-border-radius-control: 8px;
+
+  /**
+   * 控件聚焦：对齐 `focus:ring-2 focus:ring-blue-500`（仅 ring，不把边框改成蓝）
+   * 与 `border-gray-200` 并存；避免「蓝边框 + 蓝 ring」叠成更粗的一圈
+   * ring：三层 box-shadow（offset / ring / tw-shadow 占位）
+   */
+  --cx-control-focus-keep-border: #e5e7eb; /* gray-200，与 Admin 原生输入一致 */
+  --cx-control-focus-ring-color: rgb(59, 130, 246);
+  --cx-control-focus-ring-width: 2px;
+  --cx-control-focus-ring-box: 0 0 #0000, 0 0 0 var(--cx-control-focus-ring-width)
+    var(--cx-control-focus-ring-color), 0 0 #0000;
+
+  --cx-control-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* 尝试映射 antd 5 组件级 CSS 变量（存在则生效，便于与 ant 主题对齐） */
+  --cx-ant-input-font-size: var(--cx-input-font-size);
+  --cx-ant-select-font-size: var(--cx-select-font-size);
+}
+
+html.dark,
+.dark {
+  --cx-control-focus-keep-border: #374151; /* gray-700 */
+  --cx-control-focus-ring-color: rgb(96, 165, 250);
+  /** 浏览器自动填充：覆盖默认浅黄/白底（与 antd 暗色容器接近） */
+  --cx-autofill-bg: #1f1f1f;
+  --cx-autofill-text: #e5e7eb;
+}
+
+/**
+ * 登录/注册等：外层用 ConfigProvider darkAlgorithm，但 document 未挂 `html.dark` 时，
+ * 仍须用暗色「保持边框」与 ring，否则 LESS 仍用 :root 的 gray-200，聚焦会像白边闪一下。
+ */
+.auth-dark-cx {
+  --cx-control-focus-keep-border: #3f3f46;
+  --cx-control-focus-ring-color: rgb(96, 165, 250);
+  --cx-control-focus-ring-width: 2px;
+  --cx-control-focus-ring-box: 0 0 #0000, 0 0 0 var(--cx-control-focus-ring-width)
+    var(--cx-control-focus-ring-color), 0 0 #0000;
+  --cx-autofill-bg: rgba(19, 19, 20, 0.96);
+  --cx-autofill-text: #e5e7eb;
+}

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

@@ -0,0 +1,246 @@
+@import './_tokens.less';
+@import '../floating-shell/cx-floating-shell.less';
+
+/* ========== 覆盖 antd 默认：仅作用于带 cx- 根类的 Cx 封装 ========== */
+
+/* ---------- 焦点高亮与过渡（对齐 Tailwind ring-2 + ring-blue-500 + transition-all）---------- */
+.cx-input-root {
+  transition: var(--cx-control-transition);
+}
+
+/* 内层原生 input：去掉浏览器 / antd 额外 outline，避免暗色底上闪白边 */
+.cx-input-root .ant-input,
+.cx-input-root input.ant-input {
+  outline: none !important;
+}
+
+.cx-input-root:focus-within:not(.ant-input-disabled):not(.ant-input-status-error):not(
+    .ant-input-affix-wrapper-disabled
+  ):not(.ant-input-affix-wrapper-status-error),
+.cx-input-root.ant-input-affix-wrapper-focused:not(.ant-input-affix-wrapper-disabled):not(
+    .ant-input-affix-wrapper-status-error
+  ) {
+  border-color: var(--cx-control-focus-keep-border) !important;
+  box-shadow: var(--cx-control-focus-ring-box) !important;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.cx-input-root .ant-input:focus,
+.cx-input-root .ant-input:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+/**
+ * 暗黑 / 落地页暗壳：Chrome 等自动填充默认白底、黄底，用 inset box-shadow 盖住（WebKit）
+ * 变量见 _tokens：`html.dark` / `.dark` / `.auth-dark-cx` 下的 --cx-autofill-*
+ */
+.auth-dark-cx .cx-input-root input.ant-input:-webkit-autofill,
+.auth-dark-cx .cx-input-root input.ant-input:-webkit-autofill:hover,
+.auth-dark-cx .cx-input-root input.ant-input:-webkit-autofill:focus,
+.auth-dark-cx .cx-input-root input.ant-input:-webkit-autofill:active,
+html.dark .cx-input-root input.ant-input:-webkit-autofill,
+html.dark .cx-input-root input.ant-input:-webkit-autofill:hover,
+html.dark .cx-input-root input.ant-input:-webkit-autofill:focus,
+html.dark .cx-input-root input.ant-input:-webkit-autofill:active,
+.dark .cx-input-root input.ant-input:-webkit-autofill,
+.dark .cx-input-root input.ant-input:-webkit-autofill:hover,
+.dark .cx-input-root input.ant-input:-webkit-autofill:focus,
+.dark .cx-input-root input.ant-input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px var(--cx-autofill-bg) inset !important;
+  -webkit-text-fill-color: var(--cx-autofill-text) !important;
+  caret-color: var(--cx-autofill-text);
+  transition: background-color 99999s ease-out;
+}
+
+.auth-dark-cx textarea.cx-input:-webkit-autofill,
+html.dark textarea.cx-input:-webkit-autofill,
+.dark textarea.cx-input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--cx-autofill-bg) inset !important;
+  -webkit-text-fill-color: var(--cx-autofill-text) !important;
+  caret-color: var(--cx-autofill-text);
+  transition: background-color 99999s ease-out;
+}
+
+/* 落地页内原生 input（非 ant Input） */
+.auth-dark-cx input:-webkit-autofill,
+.auth-dark-cx input:-webkit-autofill:hover,
+.auth-dark-cx input:-webkit-autofill:focus,
+.auth-dark-cx input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px var(--cx-autofill-bg) inset !important;
+  -webkit-text-fill-color: var(--cx-autofill-text) !important;
+  caret-color: var(--cx-autofill-text);
+  transition: background-color 99999s ease-out;
+}
+
+/* 全站挂 html.dark / .dark 时的普通 input */
+html.dark input:-webkit-autofill,
+html.dark input:-webkit-autofill:hover,
+html.dark input:-webkit-autofill:focus,
+html.dark input:-webkit-autofill:active,
+.dark input:-webkit-autofill,
+.dark input:-webkit-autofill:hover,
+.dark input:-webkit-autofill:focus,
+.dark input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px var(--cx-autofill-bg) inset !important;
+  -webkit-text-fill-color: var(--cx-autofill-text) !important;
+  caret-color: var(--cx-autofill-text);
+  transition: background-color 99999s ease-out;
+}
+
+textarea.cx-input.cx-input--textarea {
+  transition: var(--cx-control-transition);
+}
+
+textarea.cx-input.cx-input--textarea:focus:not(:disabled):not(.ant-input-status-error) {
+  border-color: var(--cx-control-focus-keep-border) !important;
+  box-shadow: var(--cx-control-focus-ring-box) !important;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+/* Input：affix 包裹层与原生 input */
+span.cx-input.ant-input-affix-wrapper {
+  font-size: var(--cx-input-font-size);
+  border-radius: var(--cx-border-radius-control);
+  /* antd 5 部分版本在根上消费该变量 */
+  --ant-input-input-font-size: var(--cx-ant-input-font-size);
+}
+
+span.cx-input.ant-input-affix-wrapper > input.ant-input,
+input.cx-input.ant-input {
+  font-size: var(--cx-input-font-size);
+  --ant-input-input-font-size: var(--cx-ant-input-font-size);
+}
+
+textarea.cx-input {
+  font-size: var(--cx-input-font-size);
+  border-radius: var(--cx-border-radius-control);
+}
+
+/**
+ * Select（antd 6+）：边框与 focus 光晕在根节点 `.ant-select` 上，不在子级 `.ant-select-selector`。
+ * 故 Cx 的 ring / 过渡须作用在 `.ant-select.cx-select` 根上（与 class 列表一致）。
+ */
+.ant-select.cx-select {
+  font-size: var(--cx-select-font-size);
+  border-radius: var(--cx-border-radius-control);
+  --ant-select-font-size: var(--cx-ant-select-font-size);
+  transition: var(--cx-control-transition);
+  /* antd 6 默认 flex-start，与 CxSelect 根上固定高度叠加时箭头易偏；首列 AutoComplete 用 Input.suffix 无此问题 */
+  align-items: center !important;
+}
+
+.ant-select.cx-select .ant-select-suffix {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* 仍挂在根上的箭头节点（与 suffix 并存或旧结构） */
+.ant-select.cx-select .ant-select-arrow {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* 根节点 flex 对齐后，清除钮相对视觉中心略偏下，微上移（保留 antd translateZ 防闪烁） */
+.ant-select.cx-select .ant-select-clear {
+  transform: translateZ(0) translateY(-3px) !important;
+}
+
+.ant-select.cx-select.ant-select-focused:not(.ant-select-disabled):not(.ant-select-status-error),
+.ant-select.cx-select.ant-select-open:not(.ant-select-disabled):not(.ant-select-status-error),
+.ant-select.cx-select:not(.ant-select-disabled):not(.ant-select-status-error):focus-within {
+  border-color: var(--cx-control-focus-keep-border) !important;
+  box-shadow: var(--cx-control-focus-ring-box) !important;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+/**
+ * Select（兼容旧结构）：部分 antd 版本边框仍在 `.ant-select-selector` 上，
+ * 这里同步一份 ring/边框，避免 Float 场景出现“边框颜色不对”。
+ */
+.ant-select.cx-select.ant-select-focused:not(.ant-select-disabled):not(.ant-select-status-error)
+  .ant-select-selector,
+.ant-select.cx-select.ant-select-open:not(.ant-select-disabled):not(.ant-select-status-error)
+  .ant-select-selector,
+.ant-select.cx-select:not(.ant-select-disabled):not(.ant-select-status-error):focus-within
+  .ant-select-selector {
+  border-color: var(--cx-control-focus-keep-border) !important;
+  box-shadow: var(--cx-control-focus-ring-box) !important;
+}
+
+.ant-select.cx-select.ant-select-lg {
+  font-size: var(--cx-select-font-size);
+}
+
+/* DatePicker / RangePicker */
+.cx-datepicker.cx-date-picker.ant-picker,
+.cx-range-picker.ant-picker {
+  font-size: var(--cx-picker-font-size);
+  border-radius: var(--cx-border-radius-control);
+  transition: var(--cx-control-transition);
+}
+
+.cx-datepicker.cx-date-picker.ant-picker.ant-picker-focused:not(.ant-picker-disabled):not(
+    .ant-picker-status-error
+  ),
+.cx-range-picker.ant-picker.ant-picker-focused:not(.ant-picker-disabled):not(
+    .ant-picker-status-error
+  ) {
+  border-color: var(--cx-control-focus-keep-border) !important;
+  box-shadow: var(--cx-control-focus-ring-box) !important;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.cx-datepicker.cx-date-picker .ant-picker-input > input,
+.cx-range-picker.ant-picker .ant-picker-input > input {
+  font-size: var(--cx-picker-font-size);
+}
+
+/* InputNumber */
+.cx-input-number.ant-input-number {
+  font-size: var(--cx-input-number-font-size);
+  border-radius: var(--cx-border-radius-control);
+  transition: var(--cx-control-transition);
+}
+
+.cx-input-number-root.ant-input-number-focused:not(.ant-input-number-disabled):not(
+    .ant-input-number-status-error
+  ) {
+  border-color: var(--cx-control-focus-keep-border) !important;
+  box-shadow: var(--cx-control-focus-ring-box) !important;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.cx-input-number.ant-input-number .ant-input-number-input {
+  font-size: var(--cx-input-number-font-size);
+}
+
+/* TreeSelect：与 Select 同源，边框在根 `.ant-select.cx-tree-select` */
+.cx-tree-select.ant-select {
+  font-size: var(--cx-tree-select-font-size);
+  border-radius: var(--cx-border-radius-control);
+  transition: var(--cx-control-transition);
+}
+
+.cx-tree-select.ant-select.ant-select-focused:not(.ant-select-disabled):not(.ant-select-status-error),
+.cx-tree-select.ant-select.ant-select-open:not(.ant-select-disabled):not(.ant-select-status-error),
+.cx-tree-select.ant-select:not(.ant-select-disabled):not(.ant-select-status-error):focus-within {
+  border-color: var(--cx-control-focus-keep-border) !important;
+  box-shadow: var(--cx-control-focus-ring-box) !important;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+/* MultiSelect（自定义结构，仅按钮区） */
+.cx-multi-select {
+  font-size: var(--cx-select-font-size);
+}
+
+@import '../tag/index.less';
+@import '../tabs/index.less';

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

@@ -0,0 +1,106 @@
+.cx-switch.ant-switch {
+  min-height: 22px;
+}
+
+/* 轨道内文案（开启/关闭 等） */
+.cx-switch--text.ant-switch {
+  min-width: 64px;
+  min-height: 26px;
+  line-height: 24px;
+
+  .ant-switch-handle {
+    top: 2px;
+    width: 20px;
+    height: 20px;
+
+    &::before {
+      border-radius: 10px;
+    }
+  }
+
+  &.ant-switch-checked .ant-switch-handle {
+    inset-inline-start: calc(100% - 20px - 2px);
+  }
+
+  .ant-switch-inner {
+    padding-inline: 8px 26px;
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.92);
+  }
+
+  &.ant-switch-checked .ant-switch-inner {
+    padding-inline: 26px 8px;
+    color: rgba(255, 255, 255, 0.95);
+  }
+
+  &:not(.ant-switch-checked) {
+    background: rgba(0, 0, 0, 0.22);
+
+    .ant-switch-inner {
+      color: rgba(255, 255, 255, 0.92);
+    }
+  }
+
+  &.ant-switch-checked {
+    background: var(--cx-color-primary-solid);
+  }
+}
+
+html.dark {
+  .cx-switch--text.ant-switch:not(.ant-switch-checked) {
+    background: rgba(255, 255, 255, 0.22);
+  }
+}
+
+/* 左右文案 + 中间开关（接口类型等） */
+.cx-switch-dual {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cx-switch-dual__side {
+  margin: 0;
+  padding: 0 2px;
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.55);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.75);
+  }
+
+  &--active {
+    color: var(--cx-color-primary-solid);
+    font-weight: 500;
+  }
+}
+
+html.dark .cx-switch-dual__side {
+  color: rgba(255, 255, 255, 0.55);
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.75);
+  }
+
+  &--active {
+    color: var(--cx-color-primary-solid);
+  }
+}
+
+.cx-switch--dual-track.ant-switch {
+  min-width: 44px;
+}
+
+/* dual：整组禁用（如未选菜单不可切接口类型） */
+.cx-switch-dual--disabled {
+  opacity: 0.68;
+
+  .cx-switch-dual__side:disabled {
+    cursor: not-allowed;
+  }
+}