fix: cancel sorting

src/components/seal-table/components/header.tsx

@@ -7,11 +7,12 @@ interface HeaderProps {
   columns: SealColumnProps[];
   sortDirections?: ('ascend' | 'descend' | null)[];
   sorterList: TableOrder | Array<TableOrder>;
+  showSorterTooltip?: boolean;
   onSort?: OnSortFn;
 }
 
 const Header: React.FC<HeaderProps> = (props) => {
-  const { onSort, sortDirections, sorterList } = props;
+  const { onSort, sortDirections, sorterList, showSorterTooltip } = props;
 
   return (
     <Row className="row">
@@ -31,6 +32,7 @@ const Header: React.FC<HeaderProps> = (props) => {
           <Col span={span} key={dataIndex || i}>
             <TableHeader
               onSort={onSort}
+              showSorterTooltip={showSorterTooltip}
               sorter={sorter}
               sorterList={sorterList}
               dataIndex={dataIndex}

src/components/seal-table/components/table-header.tsx

@@ -1,5 +1,6 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import classNames from 'classnames';
 import React, { useEffect } from 'react';
 import '../styles/header.less';
@@ -22,6 +23,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
     width,
     dataIndex
   } = props;
+  const intl = useIntl();
 
   const [currentSortOrder, setCurrentSortOrder] = React.useState<
     'ascend' | 'descend' | null
@@ -33,6 +35,16 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
     return sortDirections[nextIndex];
   };
 
+  const nextSortTips = () => {
+    if (!currentSortOrder) {
+      return intl.formatMessage({ id: 'common.sorter.tips.ascend' });
+    }
+    if (currentSortOrder === 'ascend') {
+      return intl.formatMessage({ id: 'common.sorter.tips.descend' });
+    }
+    return intl.formatMessage({ id: 'common.sorter.tips.cancel' });
+  };
+
   const handleOnSort = () => {
     setCurrentSortOrder((prev) => {
       const next = getNextSortOrder(prev);

src/components/seal-table/index.tsx

@@ -45,6 +45,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     pagination,
     empty,
     sortDirections,
+    showSorterTooltip,
     renderChildren,
     loadChildren,
     loadChildrenAPI
@@ -167,6 +168,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
             columns={parsedColumns}
             sortDirections={sortDirections}
             sorterList={sorterList}
+            showSorterTooltip={showSorterTooltip}
           ></Header>
         </div>
         <Spin spinning={loading}>

src/components/seal-table/styles/header.less

@@ -41,6 +41,7 @@
   .sorter-header {
     display: flex;
     flex: 1;
+    width: 100%;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;

src/components/seal-table/types.ts

@@ -44,6 +44,7 @@ export interface SealColumnProps {
 }
 
 export interface TableHeaderProps {
+  showSorterTooltip?: boolean;
   sorterList?: TableOrder | Array<TableOrder>;
   sorter?: boolean | { multiple?: number };
   sortDirections?: ('ascend' | 'descend' | null)[];
@@ -78,6 +79,7 @@ export type TableOrder = {
   order: 'ascend' | 'descend' | null;
 };
 export interface SealTableProps {
+  showSorterTooltip?: boolean;
   sortDirections?: ('ascend' | 'descend' | null)[];
   columns?: SealColumnProps[];
   childParentKey?: string;

src/config/settings.ts

@@ -15,7 +15,7 @@ type SortDirection = 'ascend' | 'descend' | null;
 export const TABLE_SORT_DIRECTIONS: SortDirection[] = [
   'ascend',
   'descend',
-  'ascend'
+  null
 ];
 
 export const tableSorter = (order: number | boolean) => {

src/locales/en-US/common.ts

@@ -266,5 +266,8 @@ export default {
   'common.form.rule.selectInput': 'Please select or enter a {name}',
   'common.tag.experimental': 'Experimental',
   'common.title.example': 'Example',
-  'common.button.dontshowagain': "Don't show again"
+  'common.button.dontshowagain': "Don't show again",
+  'common.sorter.tips.ascend': 'Click to sort ascending',
+  'common.sorter.tips.descend': 'Click to sort descending',
+  'common.sorter.tips.cancel': 'Click to cancel sorting'
 };

src/locales/ja-JP/common.ts

@@ -266,7 +266,10 @@ export default {
   'common.form.rule.selectInput': 'Please select or enter a {name}',
   'common.tag.experimental': 'Experimental',
   'common.title.example': 'Example',
-  'common.button.dontshowagain': "Don't show again"
+  'common.button.dontshowagain': "Don't show again",
+  'common.sorter.tips.ascend': 'Click to sort ascending',
+  'common.sorter.tips.descend': 'Click to sort descending',
+  'common.sorter.tips.cancel': 'Click to cancel sorting'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -298,5 +301,8 @@ export default {
 // 26. 'common.form.rule.selectInput': 'Please select or enter a {name}',
 // 27. 'common.tag.experimental': 'Experimental',
 // 28. 'common.title.example': 'Example',
-// 29. 'common.button.dontshowagain': "Don't show again"
+// 29. 'common.button.dontshowagain': "Don't show again",
+// 30.  'common.sorter.tips.ascend': 'Click to sort ascending',
+// 31.  'common.sorter.tips.descend': 'Click to sort descending',
+// 32.  'common.sorter.tips.cancel': 'Click to cancel sorting'
 // ========== End of To-Do List ==========

src/locales/ru-RU/clusters.ts

@@ -133,5 +133,5 @@ export default {
 // 12. 'clusters.form.serverUrl.tips': 'Specify the server URL accessible from your cloud provider.'
 // 13. 'clusters.addworker.specifyWorkerIP': 'Specify Worker IP <span class="text-tertiary">{type}</span>',
 // 14. 'clusters.form.setDefault': 'Set as Default',
-// 15.  'clusters.form.setDefault.tips': 'Default for deployment'
+// 15.  'clusters.form.setDefault.tips': 'Default for deployment',
 // ================================================================

src/locales/ru-RU/common.ts

@@ -265,9 +265,15 @@ export default {
   'common.form.rule.selectInput': 'Выберите или введите {name}',
   'common.tag.experimental': 'Экспериментальный',
   'common.title.example': 'Пример',
-  'common.button.dontshowagain': "Don't show again"
+  'common.button.dontshowagain': "Don't show again",
+  'common.sorter.tips.ascend': 'Click to sort ascending',
+  'common.sorter.tips.descend': 'Click to sort descending',
+  'common.sorter.tips.cancel': 'Click to cancel sorting'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-// 1. 'common.button.dontshowagain': "Don't show again"
+// 1. 'common.button.dontshowagain': "Don't show again",
+// 2.  'common.sorter.tips.ascend': 'Click to sort ascending',
+// 3.  'common.sorter.tips.descend': 'Click to sort descending',
+// 4.  'common.sorter.tips.cancel': 'Click to cancel sorting'
 // ========== End of To-Do List ==========

src/locales/zh-CN/common.ts

@@ -258,5 +258,8 @@ export default {
   'common.form.rule.selectInput': '请选择或输入{name}',
   'common.tag.experimental': '实验性',
   'common.title.example': '示例',
-  'common.button.dontshowagain': '不再提示'
+  'common.button.dontshowagain': '不再提示',
+  'common.sorter.tips.ascend': '点击升序',
+  'common.sorter.tips.descend': '点击降序',
+  'common.sorter.tips.cancel': '取消排序'
 };

src/pages/cluster-management/clusters.tsx

@@ -6,6 +6,7 @@ import SealTable from '@/components/seal-table';
 import TableContext from '@/components/seal-table/table-context';
 import { TableOrder } from '@/components/seal-table/types';
 import { PageAction } from '@/config';
+import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
 import type { PageActionType } from '@/config/types';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableFetch from '@/hooks/use-table-fetch';
@@ -326,12 +327,13 @@ const Clusters: React.FC = () => {
           <SealTable
             rowKey="id"
             loadChildren={getWorkerPoolList}
-            sortDirections={['descend', 'ascend']}
+            sortDirections={TABLE_SORT_DIRECTIONS}
             expandedRowKeys={expandedRowKeys}
             onExpand={handleExpandChange}
             onExpandAll={handleToggleExpandAll}
             renderChildren={renderChildren}
             onTableSort={handleOnSortChange}
+            showSorterTooltip={false}
             dataSource={dataSource.dataList}
             loading={dataSource.loading}
             loadend={dataSource.loadend}

src/pages/cluster-management/hooks/use-credential-columns.tsx

@@ -36,7 +36,6 @@ const useCredentialColumns = (
       {
         title: intl.formatMessage({ id: 'common.table.createTime' }),
         dataIndex: 'created_at',
-        showSorterTooltip: false,
         sorter: tableSorter(3),
         ellipsis: {
           showTitle: false

src/pages/llmodels/components/table-list.tsx

@@ -727,6 +727,7 @@ const Models: React.FC<ModelsProps> = ({
           dataSource={dataSource}
           rowSelection={rowSelection}
           expandedRowKeys={expandedRowKeys}
+          showSorterTooltip={false}
           onExpand={handleExpandChange}
           onExpandAll={handleToggleExpandAll}
           loading={loading}

src/pages/llmodels/index.tsx

@@ -327,6 +327,7 @@ const Models: React.FC = () => {
     setQueryParams((pre: any) => {
       return {
         ...pre,
+        page: 1,
         sort_by: sortKeys.join(',')
       };
     });

src/pages/users/hooks/use-users-columns.tsx

@@ -179,7 +179,6 @@ const useUsersColumns = ({
         title: intl.formatMessage({ id: 'common.table.createTime' }),
         dataIndex: 'created_at',
         key: 'created_at',
-        showSorterTooltip: false,
         sorter: tableSorter(5),
         ellipsis: {
           showTitle: false