♻️ 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)

web/src/components/common/ui/CardTable.js

@@ -23,6 +23,7 @@ import { Table, Card, Skeleton, Pagination, Empty, Button, Collapsible } from '@
 import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
 import PropTypes from 'prop-types';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
+import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
 
 /**
  * CardTable 响应式表格组件
@@ -40,25 +41,8 @@ const CardTable = ({
 }) => {
   const isMobile = useIsMobile();
   const { t } = useTranslation();
-
-  const [showSkeleton, setShowSkeleton] = useState(loading);
-  const loadingStartRef = useRef(Date.now());
-
-  useEffect(() => {
-    if (loading) {
-      loadingStartRef.current = Date.now();
-      setShowSkeleton(true);
-    } else {
-      const elapsed = Date.now() - loadingStartRef.current;
-      const remaining = Math.max(0, 1000 - elapsed);
-      if (remaining === 0) {
-        setShowSkeleton(false);
-      } else {
-        const timer = setTimeout(() => setShowSkeleton(false), remaining);
-        return () => clearTimeout(timer);
-      }
-    }
-  }, [loading]);
+  
+  const showSkeleton = useMinimumLoadingTime(loading);
 
   const getRowKey = (record, index) => {
     if (typeof rowKey === 'function') return rowKey(record);

web/src/components/common/ui/SelectableButtonGroup.jsx

@@ -17,8 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
+import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
 import { Divider, Button, Tag, Row, Col, Collapsible, Checkbox, Skeleton } from '@douyinfe/semi-ui';
 import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
 
@@ -49,32 +50,15 @@ const SelectableButtonGroup = ({
   loading = false
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [showSkeleton, setShowSkeleton] = useState(loading);
   const [skeletonCount] = useState(6);
   const isMobile = useIsMobile();
   const perRow = 3;
   const maxVisibleRows = Math.max(1, Math.floor(collapseHeight / 32)); // Approx row height 32
   const needCollapse = collapsible && items.length > perRow * maxVisibleRows;
-  const loadingStartRef = useRef(Date.now());
+  const showSkeleton = useMinimumLoadingTime(loading);
 
   const contentRef = useRef(null);
 
-  useEffect(() => {
-    if (loading) {
-      loadingStartRef.current = Date.now();
-      setShowSkeleton(true);
-    } else {
-      const elapsed = Date.now() - loadingStartRef.current;
-      const remaining = Math.max(0, 1000 - elapsed);
-      if (remaining === 0) {
-        setShowSkeleton(false);
-      } else {
-        const timer = setTimeout(() => setShowSkeleton(false), remaining);
-        return () => clearTimeout(timer);
-      }
-    }
-  }, [loading]);
-
   const maskStyle = isOpen
     ? {}
     : {
@@ -110,7 +94,7 @@ const SelectableButtonGroup = ({
           <Col
             {...(isMobile
               ? { span: 12 }
-              : { xs: 24, sm: 24, md: 24, lg: 12, xl: 8 }
+              : { span: 8 }
             )}
             key={index}
           >
@@ -158,7 +142,7 @@ const SelectableButtonGroup = ({
             <Col
               {...(isMobile
                 ? { span: 12 }
-                : { xs: 24, sm: 24, md: 24, lg: 12, xl: 8 }
+                : { span: 8 }
               )}
               key={item.value}
             >
@@ -197,7 +181,7 @@ const SelectableButtonGroup = ({
           <Col
             {...(isMobile
               ? { span: 12 }
-              : { xs: 24, sm: 24, md: 24, lg: 12, xl: 8 }
+              : { span: 8 }
             )}
             key={item.value}
           >