♻️ refactor(web): consolidate design-system primitives and responsive data views

web/classic/src/components/settings/ChannelSelectorModal.jsx

@@ -59,7 +59,7 @@ const ChannelSelectorModal = forwardRef(
   ) => {
     const [searchText, setSearchText] = useState('');
     const [currentPage, setCurrentPage] = useState(1);
-    const [pageSize, setPageSize] = useState(10);
+    const [pageSize, setPageSize] = useState(20);
     const isMobile = useIsMobile();
 
     const [filteredData, setFilteredData] = useState([]);

web/classic/src/components/table/channels/modals/MultiKeyManageModal.jsx

@@ -58,7 +58,7 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
 
   // Pagination states
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(20);
   const [total, setTotal] = useState(0);
   const [totalPages, setTotalPages] = useState(0);
 
@@ -99,7 +99,7 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
         setKeyStatusList(data.keys || []);
         setTotal(data.total || 0);
         setCurrentPage(data.page || 1);
-        setPageSize(data.page_size || 10);
+        setPageSize(data.page_size || 20);
         setTotalPages(data.total_pages || 0);
 
         // Update statistics (these are always the overall statistics)

web/classic/src/components/table/users/modals/UserSubscriptionsModal.jsx

@@ -84,7 +84,7 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
 
   const [subs, setSubs] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
-  const pageSize = 10;
+  const pageSize = 20;
 
   const planTitleMap = useMemo(() => {
     const map = new Map();

web/classic/src/components/topup/modals/TopupHistoryModal.jsx

@@ -61,7 +61,7 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
   const [topups, setTopups] = useState([]);
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(20);
   const [keyword, setKeyword] = useState('');
   const isMobile = useIsMobile();
 

web/classic/src/constants/channel.constants.js

@@ -196,4 +196,4 @@ export const MODEL_FETCHABLE_CHANNEL_TYPES = new Set([
   1, 4, 14, 34, 17, 26, 27, 24, 47, 25, 20, 23, 31, 40, 42, 48, 43,
 ]);
 
-export const MODEL_TABLE_PAGE_SIZE = 10;
+export const MODEL_TABLE_PAGE_SIZE = 20;

web/classic/src/constants/common.constant.js

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-export const ITEMS_PER_PAGE = 10; // this value must keep same as the one defined in backend!
+export const ITEMS_PER_PAGE = 20; // this value must keep same as the one defined in backend!
 
 export const DEFAULT_ENDPOINT = '/api/pricing';
 

web/classic/src/constants/dashboard.constants.js

@@ -144,6 +144,6 @@ export const STORAGE_KEYS = {
 export const DEFAULTS = {
   PAGE_SIZE: 20,
   CHART_HEIGHT: 96,
-  MODEL_TABLE_PAGE_SIZE: 10,
+  MODEL_TABLE_PAGE_SIZE: 20,
   MAX_TREND_POINTS: 7,
 };

web/classic/src/hooks/subscriptions/useSubscriptionsData.jsx

@@ -32,7 +32,7 @@ export const useSubscriptionsData = () => {
 
   // Pagination (client-side for now)
   const [activePage, setActivePage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(20);
 
   // Drawer states
   const [showEdit, setShowEdit] = useState(false);

web/classic/src/pages/Setting/Chat/SettingsChats.jsx

@@ -469,7 +469,7 @@ export default function SettingsChats(props) {
                 dataSource={filteredConfigs}
                 rowKey='id'
                 pagination={{
-                  pageSize: 10,
+                  pageSize: 20,
                   showSizeChanger: false,
                   showQuickJumper: true,
                   showTotal: (total, range) =>

web/classic/src/pages/Setting/Dashboard/SettingsAPIInfo.jsx

@@ -59,7 +59,7 @@ const SettingsAPIInfo = ({ options, refresh }) => {
     color: 'blue',
   });
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(20);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 
   // 面板启用状态 state

web/classic/src/pages/Setting/Dashboard/SettingsAnnouncements.jsx

@@ -67,7 +67,7 @@ const SettingsAnnouncements = ({ options, refresh }) => {
     extra: '',
   });
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(20);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 
   // 面板启用状态

web/classic/src/pages/Setting/Dashboard/SettingsFAQ.jsx

@@ -56,7 +56,7 @@ const SettingsFAQ = ({ options, refresh }) => {
     answer: '',
   });
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(20);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 
   // 面板启用状态

web/classic/src/pages/Setting/Dashboard/SettingsUptimeKuma.jsx

@@ -56,7 +56,7 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
     slug: '',
   });
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(20);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [panelEnabled, setPanelEnabled] = useState(true);
 

web/classic/src/pages/Setting/Ratio/UpstreamRatioSync.jsx

@@ -122,7 +122,7 @@ export default function UpstreamRatioSync(props) {
 
   // 分页相关状态
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(20);
 
   // 搜索相关状态
   const [searchKeyword, setSearchKeyword] = useState('');

web/classic/src/pages/Setting/Ratio/hooks/useModelPricingEditorState.js

@@ -23,7 +23,7 @@ import {
   splitBillingExprAndRequestRules,
 } from '../components/requestRuleExpr';
 
-export const PAGE_SIZE = 10;
+export const PAGE_SIZE = 20;
 export const PRICE_SUFFIX = '$/1M tokens';
 const EMPTY_CANDIDATE_MODEL_NAMES = [];