@sia.soul/sia-react-ui 0.1.28 → 0.1.29

package/dist/index.css

@@ -3517,8 +3517,21 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   gap: 5px;
 }
 .sia-table__header-label-content {
+  display: block;
   min-width: 0;
   flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sia-table__sortable-header > span:first-child,
+.sia-table__filter-header > span:first-child,
+.sia-table__resizable-header > span:first-child {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .sia-table__header-description {
   display: inline-grid;
@@ -3828,24 +3841,40 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-width: 0;
   gap: 6px;
 }
 .sia-table__sort-button {
   display: grid;
   align-content: center;
-  width: 20px;
+  justify-items: center;
+  flex: 0 0 26px;
+  width: 26px;
   height: 28px;
   padding: 0;
   color: var(--sia-color-text-secondary);
   cursor: pointer;
   background: transparent;
   border: 0;
+  border-radius: var(--sia-radius);
 }
-.sia-table__sort-button .sia-icon {
+.sia-table__sort-button[data-sort-order=none] .sia-icon {
   margin-block: -2px;
 }
-.sia-table__sort-button .is-active {
+.sia-table__sort-button:not([data-sort-order=none]) {
   color: var(--sia-color-primary-text);
+  background: color-mix(in srgb, var(--sia-color-primary) 14%, var(--sia-color-surface));
+}
+.sia-table__sort-button:not([data-sort-order=none]) .sia-icon {
+  stroke-width: 2.5;
+}
+.sia-table__sort-button:hover {
+  color: var(--sia-color-primary-text);
+  background: color-mix(in srgb, var(--sia-color-primary) 20%, var(--sia-color-surface));
+}
+.sia-table__sort-button:focus-visible {
+  outline: 2px solid var(--sia-color-primary);
+  outline-offset: 1px;
 }
 .sia-table__filter-header {
   display: flex;
@@ -6979,6 +7008,205 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-upload-dragger__content strong {
   color: var(--sia-color-text);
 }
+.sia-upload {
+  min-width: 0;
+  outline-offset: 4px;
+}
+.sia-upload__list:empty {
+  display: none;
+}
+.sia-upload__item {
+  position: relative;
+  min-width: 0;
+}
+.sia-upload__choose {
+  gap: 8px;
+}
+.sia-upload__choose > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.sia-upload__name a {
+  color: var(--sia-color-primary-text);
+  text-decoration: none;
+}
+.sia-upload__item--error .sia-upload__name a {
+  color: inherit;
+}
+.sia-upload__uploading {
+  display: grid;
+  grid-column: 2 / -1;
+  gap: 5px;
+  font-size: 12px;
+  color: var(--sia-color-text-secondary);
+}
+.sia-upload__progress {
+  display: block;
+  grid-column: auto;
+  width: 100%;
+}
+.sia-upload__error {
+  grid-column: 2 / -1;
+  font-size: 12px;
+}
+.sia-upload__item > .sia-upload__remove {
+  grid-column: 3;
+  grid-row: 1;
+  width: 28px;
+  height: 28px;
+}
+.sia-upload__item--error {
+  border-color: var(--sia-color-error);
+}
+.sia-upload__item--error > .sia-upload__remove {
+  color: var(--sia-color-error);
+}
+.sia-upload__thumbnail.sia-button {
+  display: grid;
+  place-items: center;
+  width: 60px;
+  height: 60px;
+  padding: 0;
+  color: inherit;
+  background: var(--sia-color-control-hover);
+  border-radius: 5px;
+}
+.sia-upload__thumbnail img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sia-upload__thumbnail > span {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+}
+.sia-upload--picture .sia-upload__item {
+  min-height: 84px;
+  padding: 10px;
+  border: 1px solid var(--sia-color-border);
+  border-radius: 8px;
+}
+.sia-upload--picture .sia-upload__item--error {
+  border-color: var(--sia-color-error);
+}
+.sia-upload--picture .sia-upload__thumbnail {
+  grid-row: 1 / 3;
+}
+.sia-upload--picture .sia-upload__uploading,
+.sia-upload--picture .sia-upload__error {
+  grid-row: 2;
+}
+.sia-upload--picture-card .sia-upload__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.sia-upload--picture-card .sia-upload__item,
+.sia-upload--picture-card .sia-upload__choose {
+  box-sizing: border-box;
+  width: 112px;
+  height: 112px;
+  border: 1px solid var(--sia-color-border);
+  border-radius: 9px;
+}
+.sia-upload--picture-card .sia-upload__item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 8px;
+  gap: 4px;
+  overflow: hidden;
+}
+.sia-upload--picture-card .sia-upload__choose {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 8px;
+  border-style: dashed;
+  color: var(--sia-color-text);
+  background: var(--sia-color-control-hover);
+}
+.sia-upload--picture-card .sia-upload__choose > span {
+  flex-direction: column;
+  gap: 10px;
+}
+.sia-upload--picture-card .sia-upload__thumbnail {
+  width: 100%;
+  height: 70px;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+.sia-upload--picture-card .sia-upload__name {
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  flex: 0 0 auto;
+}
+.sia-upload--picture-card .sia-upload__remove {
+  position: absolute;
+  right: 3px;
+  top: 3px;
+  background: var(--sia-color-surface);
+  border-radius: 50%;
+  opacity: 0;
+  z-index: 1;
+}
+.sia-upload--picture-card .sia-upload__item:hover .sia-upload__remove,
+.sia-upload--picture-card .sia-upload__item:focus-within .sia-upload__remove {
+  opacity: 1;
+}
+.sia-upload--picture-card .sia-upload__item--error {
+  border-color: var(--sia-color-error);
+}
+.sia-upload--picture-card .sia-upload__uploading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px;
+  text-align: center;
+  background: var(--sia-color-surface);
+  pointer-events: none;
+}
+.sia-upload--picture-card .sia-upload__error {
+  font-size: 11px;
+}
+.sia-upload-dragger .sia-upload__choose {
+  width: 100%;
+  height: auto;
+  padding: 0;
+  white-space: normal;
+  border: 0;
+}
+.sia-upload-dragger .sia-upload__choose > span {
+  display: block;
+  width: 100%;
+}
+.sia-upload-dragger__content {
+  box-sizing: border-box;
+}
+.sia-upload-dragger__content > .sia-icon {
+  color: var(--sia-color-primary);
+}
+.sia-upload.is-dragging .sia-upload__choose {
+  outline: 2px solid var(--sia-color-primary);
+  outline-offset: 2px;
+}
+.sia-upload.is-disabled .sia-upload-dragger__content {
+  cursor: not-allowed;
+}
+@media (hover: none) {
+  .sia-upload--picture-card .sia-upload__remove {
+    opacity: 1;
+  }
+}
 .sia-form > fieldset {
   display: contents;
   min-width: 0;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-CTe-Sfl1.cjs';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagVariant, aA as Timeline, aB as TimelineItem, aC as TimelineProps, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aG as Tooltip, aH as TooltipProps, aI as Tour, aJ as TourProps, aK as TourStep, aL as Tree, aM as TreeDropPosition, aN as TreeKey, aO as TreeNode, aP as TreeProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadProps, a$ as UploadRequestOptions, b0 as Watermark, b1 as WatermarkFont, b2 as WatermarkProps, b3 as message, b4 as notification } from './core-CTe-Sfl1.cjs';
+import { T as TagStatus, B as BadgeProps } from './core-C_aAA7OF.cjs';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagVariant, aA as Timeline, aB as TimelineItem, aC as TimelineProps, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aG as Tooltip, aH as TooltipProps, aI as Tour, aJ as TourProps, aK as TourStep, aL as Tree, aM as TreeDropPosition, aN as TreeKey, aO as TreeNode, aP as TreeProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadHttpRequest, a$ as UploadItemActions, b0 as UploadProps, b1 as UploadRef, b2 as UploadRejectInfo, b3 as UploadRequestHandle, b4 as UploadRequestOptions, b5 as Watermark, b6 as WatermarkFont, b7 as WatermarkProps, b8 as message, b9 as notification } from './core-C_aAA7OF.cjs';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
@@ -1875,7 +1875,7 @@ interface TableColumn<T = Record<string, unknown>> {
     code?: string;
     /** 名称或字段标识。 */
     name?: string;
-    /** 标题内容，可传入文本或 React 节点。 */
+    /** 列头内容，可传入文本或 React 节点；默认单行显示，超宽省略，并通过框架 title 提示展示完整文本。节点无法提取文本时使用 name 或 key。 */
     title?: ReactNode;
     /** 补充说明内容。 */
     description?: ReactNode;
@@ -1897,11 +1897,11 @@ interface TableColumn<T = Record<string, unknown>> {
     fixed?: TableFixed | boolean;
     /** 是否隐藏此项。 */
     hidden?: boolean;
-    /** 默认单行显示并省略溢出内容（含 Space 标签组）；设为 false 允许多行。 */
+    /** 数据单元格默认单行显示并省略溢出内容（含 Space 标签组）；设为 false 允许多行，不影响列头始终单行省略。 */
     ellipsis?: boolean;
-    /** 是否使用 Sia Tooltip 显示完整文本；默认 false，不生成浏览器原生 title。 */
+    /** 数据单元格是否使用 Sia Tooltip 显示完整文本；默认 false，不生成浏览器原生 title。列头始终提供完整标题提示，不受此属性影响。 */
     showTitle?: boolean;
-    /** 是否允许该列排序。 */
+    /** 是否允许该列排序；配合排序插件显示按钮，依次切换升序、降序、未排序，当前排序方向以高亮单箭头显示。 */
     sortable?: boolean;
     /** 是否允许该列筛选。 */
     filterable?: boolean;
@@ -1921,7 +1921,7 @@ interface TableColumn<T = Record<string, unknown>> {
     children?: readonly TableColumn<T>[];
     /** 自定义数据单元格内容，接收该列的值、行数据和单元格上下文。 */
     render?: (value: unknown, record: T, index: number, info: TableCellRenderInfo<T>) => ReactNode;
-    /** 自定义列头内容。 */
+    /** 自定义列头内容，接收当前列及插件上下文；外层保持单行省略，悬停提示从 title 提取文本，无法提取时回退到 name 或 key。 */
     renderHeader?: (column: TableColumn<T>, context: TablePluginContext<T, any>) => ReactNode;
     /** 数据单元格的 CSS 类名，也可按单元格计算。 */
     cellClassName?: string | ((record: T, index: number) => string);
@@ -2446,7 +2446,7 @@ interface TableSortApi {
     /** 清空当前值或内容。 */
     clear: () => void;
 }
-/** 创建表格列排序插件。将返回值加入 Table 的 plugins 后生效。 */
+/** 创建表格列排序插件。将返回值加入 Table 的 plugins 后生效；点击列头按钮依次切换升序、降序和未排序，当前方向以高亮单箭头显示，悬停提示当前状态及下一步操作。 */
 declare function createSortPlugin<T extends Record<string, unknown>>(options?: TableSortPluginOptions): TablePlugin<T, SortState, TableSortApi>;
 /** 列标识到筛选条件的映射。 */
 type TableFilterValues = Readonly<Record<string, string>>;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-DlvCqFU7.js';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagVariant, aA as Timeline, aB as TimelineItem, aC as TimelineProps, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aG as Tooltip, aH as TooltipProps, aI as Tour, aJ as TourProps, aK as TourStep, aL as Tree, aM as TreeDropPosition, aN as TreeKey, aO as TreeNode, aP as TreeProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadProps, a$ as UploadRequestOptions, b0 as Watermark, b1 as WatermarkFont, b2 as WatermarkProps, b3 as message, b4 as notification } from './core-DlvCqFU7.js';
+import { T as TagStatus, B as BadgeProps } from './core-CuszFlw9.js';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagVariant, aA as Timeline, aB as TimelineItem, aC as TimelineProps, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aG as Tooltip, aH as TooltipProps, aI as Tour, aJ as TourProps, aK as TourStep, aL as Tree, aM as TreeDropPosition, aN as TreeKey, aO as TreeNode, aP as TreeProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadHttpRequest, a$ as UploadItemActions, b0 as UploadProps, b1 as UploadRef, b2 as UploadRejectInfo, b3 as UploadRequestHandle, b4 as UploadRequestOptions, b5 as Watermark, b6 as WatermarkFont, b7 as WatermarkProps, b8 as message, b9 as notification } from './core-CuszFlw9.js';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';
@@ -1875,7 +1875,7 @@ interface TableColumn<T = Record<string, unknown>> {
     code?: string;
     /** 名称或字段标识。 */
     name?: string;
-    /** 标题内容，可传入文本或 React 节点。 */
+    /** 列头内容，可传入文本或 React 节点；默认单行显示，超宽省略，并通过框架 title 提示展示完整文本。节点无法提取文本时使用 name 或 key。 */
     title?: ReactNode;
     /** 补充说明内容。 */
     description?: ReactNode;
@@ -1897,11 +1897,11 @@ interface TableColumn<T = Record<string, unknown>> {
     fixed?: TableFixed | boolean;
     /** 是否隐藏此项。 */
     hidden?: boolean;
-    /** 默认单行显示并省略溢出内容（含 Space 标签组）；设为 false 允许多行。 */
+    /** 数据单元格默认单行显示并省略溢出内容（含 Space 标签组）；设为 false 允许多行，不影响列头始终单行省略。 */
     ellipsis?: boolean;
-    /** 是否使用 Sia Tooltip 显示完整文本；默认 false，不生成浏览器原生 title。 */
+    /** 数据单元格是否使用 Sia Tooltip 显示完整文本；默认 false，不生成浏览器原生 title。列头始终提供完整标题提示，不受此属性影响。 */
     showTitle?: boolean;
-    /** 是否允许该列排序。 */
+    /** 是否允许该列排序；配合排序插件显示按钮，依次切换升序、降序、未排序，当前排序方向以高亮单箭头显示。 */
     sortable?: boolean;
     /** 是否允许该列筛选。 */
     filterable?: boolean;
@@ -1921,7 +1921,7 @@ interface TableColumn<T = Record<string, unknown>> {
     children?: readonly TableColumn<T>[];
     /** 自定义数据单元格内容，接收该列的值、行数据和单元格上下文。 */
     render?: (value: unknown, record: T, index: number, info: TableCellRenderInfo<T>) => ReactNode;
-    /** 自定义列头内容。 */
+    /** 自定义列头内容，接收当前列及插件上下文；外层保持单行省略，悬停提示从 title 提取文本，无法提取时回退到 name 或 key。 */
     renderHeader?: (column: TableColumn<T>, context: TablePluginContext<T, any>) => ReactNode;
     /** 数据单元格的 CSS 类名，也可按单元格计算。 */
     cellClassName?: string | ((record: T, index: number) => string);
@@ -2446,7 +2446,7 @@ interface TableSortApi {
     /** 清空当前值或内容。 */
     clear: () => void;
 }
-/** 创建表格列排序插件。将返回值加入 Table 的 plugins 后生效。 */
+/** 创建表格列排序插件。将返回值加入 Table 的 plugins 后生效；点击列头按钮依次切换升序、降序和未排序，当前方向以高亮单箭头显示，悬停提示当前状态及下一步操作。 */
 declare function createSortPlugin<T extends Record<string, unknown>>(options?: TableSortPluginOptions): TablePlugin<T, SortState, TableSortApi>;
 /** 列标识到筛选条件的映射。 */
 type TableFilterValues = Readonly<Record<string, string>>;

package/dist/index.js

@@ -80,7 +80,7 @@ import {
   Watermark,
   message,
   notification
-} from "./chunk-NEYUBLLB.js";
+} from "./chunk-I5KAI6FC.js";
 import {
   TextArea
 } from "./chunk-YQDHCORW.js";
@@ -4686,7 +4686,7 @@ function TableCellContent({ children, ellipsis, title }) {
 }
 
 // src/components/Table/Table.tsx
-import { Fragment as Fragment8, forwardRef as forwardRef5, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef15, useState as useState18 } from "react";
+import { Fragment as Fragment8, forwardRef as forwardRef5, isValidElement as isValidElement4, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef15, useState as useState18 } from "react";
 
 // src/components/Table/plugins.tsx
 import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef14, useState as useState17 } from "react";
@@ -5713,36 +5713,26 @@ function createSortPlugin(options = {}) {
           ...column,
           renderHeader: (currentColumn, coreContext) => {
             const info = current(context);
+            const order = info?.field === field ? info.order : null;
+            const sortHint = `${getColumnLabel(currentColumn)}\uFF1A${order === "ascend" ? "\u5F53\u524D\u5347\u5E8F\uFF0C\u70B9\u51FB\u5207\u6362\u4E3A\u964D\u5E8F" : order === "descend" ? "\u5F53\u524D\u964D\u5E8F\uFF0C\u70B9\u51FB\u53D6\u6D88\u6392\u5E8F" : "\u672A\u6392\u5E8F\uFF0C\u70B9\u51FB\u6309\u5347\u5E8F\u6392\u5E8F"}`;
             return /* @__PURE__ */ jsxs20("span", { className: "sia-table__sortable-header", children: [
               /* @__PURE__ */ jsx21("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
-              /* @__PURE__ */ jsxs20(
+              /* @__PURE__ */ jsx21(
                 "button",
                 {
                   type: "button",
                   className: "sia-table__sort-button",
-                  "aria-label": `\u5207\u6362${getColumnLabel(currentColumn)}\u6392\u5E8F`,
+                  "data-sort-order": order ?? "none",
+                  "aria-label": sortHint,
+                  ...withTitleTooltip({ title: sortHint }),
                   onClick: (event) => {
                     event.stopPropagation();
                     cycle(field, context);
                   },
-                  children: [
-                    /* @__PURE__ */ jsx21(
-                      Icon,
-                      {
-                        name: "chevron-up",
-                        size: 11,
-                        className: info?.field === field && info.order === "ascend" ? "is-active" : ""
-                      }
-                    ),
-                    /* @__PURE__ */ jsx21(
-                      Icon,
-                      {
-                        name: "chevron-down",
-                        size: 11,
-                        className: info?.field === field && info.order === "descend" ? "is-active" : ""
-                      }
-                    )
-                  ]
+                  children: order ? /* @__PURE__ */ jsx21(Icon, { name: order === "ascend" ? "arrow-up" : "arrow-down", size: 18 }) : /* @__PURE__ */ jsxs20(Fragment7, { children: [
+                    /* @__PURE__ */ jsx21(Icon, { name: "chevron-up", size: 11 }),
+                    /* @__PURE__ */ jsx21(Icon, { name: "chevron-down", size: 11 })
+                  ] })
                 }
               )
             ] });
@@ -7168,6 +7158,12 @@ var EMPTY_COLUMNS = [];
 var EMPTY_PLUGINS = [];
 var DEFAULT_WIDTH = 160;
 var SIZE_ROW_HEIGHT = { small: 32, medium: 38, large: 46 };
+function getHeaderTitleText(content) {
+  if (typeof content === "string" || typeof content === "number") return String(content);
+  if (Array.isArray(content)) return content.map(getHeaderTitleText).join("");
+  if (isValidElement4(content)) return getHeaderTitleText(content.props.children);
+  return "";
+}
 function getColumnDepth(columns) {
   let depth = 1;
   for (const column of columns) {
@@ -7689,10 +7685,10 @@ function TableInner(props, ref) {
     return fixed === "left" ? { left: leftOffsets.get(column.key) } : fixed === "right" ? { right: rightOffsets.get(column.key) } : void 0;
   }
   function renderHeaderContent(column, content) {
-    if (column.description === void 0 || column.description === null) return content;
+    const title = getHeaderTitleText(column.title ?? column.name) || column.name || column.key;
     return /* @__PURE__ */ jsxs21("span", { className: "sia-table__header-label", children: [
-      /* @__PURE__ */ jsx22("span", { className: "sia-table__header-label-content", children: content }),
-      /* @__PURE__ */ jsx22(Tooltip, { title: column.description, placement: "top", trigger: ["hover", "focus"], children: /* @__PURE__ */ jsx22("button", { type: "button", className: "sia-table__header-description", "aria-label": `${column.name ?? column.key}\u5217\u8BF4\u660E`, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx22(Icon, { name: "info", size: 14 }) }) })
+      /* @__PURE__ */ jsx22("span", { className: "sia-table__header-label-content", ...withTitleTooltip({ title }), children: content }),
+      column.description != null && /* @__PURE__ */ jsx22(Tooltip, { title: column.description, placement: "top", trigger: ["hover", "focus"], children: /* @__PURE__ */ jsx22("button", { type: "button", className: "sia-table__header-description", "aria-label": `${column.name ?? column.key}\u5217\u8BF4\u660E`, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx22(Icon, { name: "info", size: 14 }) }) })
     ] });
   }
   function getPluginCellProps(row, column) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",