diff --git a/src/components/seal-table/components/header.tsx b/src/components/seal-table/components/header.tsx index b216d2c0..75cad7f7 100644 --- a/src/components/seal-table/components/header.tsx +++ b/src/components/seal-table/components/header.tsx @@ -7,11 +7,12 @@ interface HeaderProps { columns: SealColumnProps[]; sortDirections?: ('ascend' | 'descend' | null)[]; sorterList: TableOrder | Array; + showSorterTooltip?: boolean; onSort?: OnSortFn; } const Header: React.FC = (props) => { - const { onSort, sortDirections, sorterList } = props; + const { onSort, sortDirections, sorterList, showSorterTooltip } = props; return ( @@ -31,6 +32,7 @@ const Header: React.FC = (props) => { = (props) => { width, dataIndex } = props; + const intl = useIntl(); const [currentSortOrder, setCurrentSortOrder] = React.useState< 'ascend' | 'descend' | null @@ -33,6 +35,16 @@ const TableHeader: React.FC = (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); diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index 89802b2c..74410c4a 100644 --- a/src/components/seal-table/index.tsx +++ b/src/components/seal-table/index.tsx @@ -45,6 +45,7 @@ const SealTable: React.FC = ( pagination, empty, sortDirections, + showSorterTooltip, renderChildren, loadChildren, loadChildrenAPI @@ -167,6 +168,7 @@ const SealTable: React.FC = ( columns={parsedColumns} sortDirections={sortDirections} sorterList={sorterList} + showSorterTooltip={showSorterTooltip} > diff --git a/src/components/seal-table/styles/header.less b/src/components/seal-table/styles/header.less index 94b566ab..be39bcae 100644 --- a/src/components/seal-table/styles/header.less +++ b/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; diff --git a/src/components/seal-table/types.ts b/src/components/seal-table/types.ts index 965297de..5edb9633 100644 --- a/src/components/seal-table/types.ts +++ b/src/components/seal-table/types.ts @@ -44,6 +44,7 @@ export interface SealColumnProps { } export interface TableHeaderProps { + showSorterTooltip?: boolean; sorterList?: TableOrder | Array; 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; diff --git a/src/config/settings.ts b/src/config/settings.ts index 661acbf3..501659b3 100644 --- a/src/config/settings.ts +++ b/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) => { diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts index 35208f1e..a600da2f 100644 --- a/src/locales/en-US/common.ts +++ b/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' }; diff --git a/src/locales/ja-JP/common.ts b/src/locales/ja-JP/common.ts index 84ffa798..231d00ef 100644 --- a/src/locales/ja-JP/common.ts +++ b/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 ========== diff --git a/src/locales/ru-RU/clusters.ts b/src/locales/ru-RU/clusters.ts index c9abacfc..09e5ec3c 100644 --- a/src/locales/ru-RU/clusters.ts +++ b/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 {type}', // 14. 'clusters.form.setDefault': 'Set as Default', -// 15. 'clusters.form.setDefault.tips': 'Default for deployment' +// 15. 'clusters.form.setDefault.tips': 'Default for deployment', // ================================================================ diff --git a/src/locales/ru-RU/common.ts b/src/locales/ru-RU/common.ts index 4cd28f22..4ebf4c33 100644 --- a/src/locales/ru-RU/common.ts +++ b/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 ========== diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts index 7b69e4c5..defd31cd 100644 --- a/src/locales/zh-CN/common.ts +++ b/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': '取消排序' }; diff --git a/src/pages/cluster-management/clusters.tsx b/src/pages/cluster-management/clusters.tsx index c194ab9b..dc74cb31 100644 --- a/src/pages/cluster-management/clusters.tsx +++ b/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 = () => { = ({ dataSource={dataSource} rowSelection={rowSelection} expandedRowKeys={expandedRowKeys} + showSorterTooltip={false} onExpand={handleExpandChange} onExpandAll={handleToggleExpandAll} loading={loading} diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index a9c1eac3..a8abe034 100644 --- a/src/pages/llmodels/index.tsx +++ b/src/pages/llmodels/index.tsx @@ -327,6 +327,7 @@ const Models: React.FC = () => { setQueryParams((pre: any) => { return { ...pre, + page: 1, sort_by: sortKeys.join(',') }; }); diff --git a/src/pages/users/hooks/use-users-columns.tsx b/src/pages/users/hooks/use-users-columns.tsx index 7b8c9542..2b863b2b 100644 --- a/src/pages/users/hooks/use-users-columns.tsx +++ b/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