♻️ Refactor: Move token unit toggle from table header to filter settings

- Remove K/M switch from model price column header in pricing table
- Add "Display in K units" option to pricing display settings panel
- Update parameter passing for tokenUnit and setTokenUnit across components:
  - PricingDisplaySettings: Add tokenUnit toggle functionality
  - PricingSidebar: Pass tokenUnit props to display settings
  - PricingFilterModal: Include tokenUnit in mobile filter modal
- Enhance resetPricingFilters utility to reset token unit to default 'M'
- Clean up PricingTableColumns by removing unused setTokenUnit parameter
- Add English translation for "按K显示单位" as "Display in K units"

This change improves UX by consolidating all display-related controls
in the filter settings panel, making the interface more organized and
the token unit setting more discoverable alongside other display options.

Affected components:
- PricingTableColumns.js
- PricingDisplaySettings.jsx
- PricingSidebar.jsx
- PricingFilterModal.jsx
- PricingTable.jsx
- utils.js (resetPricingFilters)
- en.json (translations)
This commit is contained in:
t0ng7u
2025-07-24 17:10:08 +08:00
parent e417c269eb
commit 1880164e29
24 changed files with 963 additions and 559 deletions

View File

@@ -24,6 +24,7 @@ import { API, isAdmin, showError, timestamp2string } from '../../helpers';
import { getDefaultTime, getInitialTimestamp } from '../../helpers/dashboard';
import { TIME_OPTIONS } from '../../constants/dashboard.constants';
import { useIsMobile } from '../common/useIsMobile';
import { useMinimumLoadingTime } from '../common/useMinimumLoadingTime';
export const useDashboardData = (userState, userDispatch, statusState) => {
const { t } = useTranslation();
@@ -35,6 +36,7 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
const [loading, setLoading] = useState(false);
const [greetingVisible, setGreetingVisible] = useState(false);
const [searchModalVisible, setSearchModalVisible] = useState(false);
const showLoading = useMinimumLoadingTime(loading);
// ========== 输入状态 ==========
const [inputs, setInputs] = useState({
@@ -145,7 +147,6 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
// ========== API 调用函数 ==========
const loadQuotaData = useCallback(async () => {
setLoading(true);
const startTime = Date.now();
try {
let url = '';
const { start_timestamp, end_timestamp, username } = inputs;
@@ -177,11 +178,7 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
return [];
}
} finally {
const elapsed = Date.now() - startTime;
const remainingTime = Math.max(0, 1000 - elapsed);
setTimeout(() => {
setLoading(false);
}, remainingTime);
setLoading(false);
}
}, [inputs, dataExportDefaultTime, isAdminUser, now]);
@@ -246,7 +243,7 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
return {
// 基础状态
loading,
loading: showLoading,
greetingVisible,
searchModalVisible,