feat(ui): redesign model square pricing page

web/default/src/features/pricing/components/pricing-table.tsx

@@ -1,5 +1,4 @@
 import { useState, useCallback } from 'react'
-import { useNavigate } from '@tanstack/react-router'
 import {
   flexRender,
   getCoreRowModel,
@@ -29,11 +28,11 @@ export interface PricingTableProps {
   usdExchangeRate?: number
   tokenUnit?: TokenUnit
   showRechargePrice?: boolean
+  onModelClick?: (modelName: string) => void
 }
 
 export function PricingTable(props: PricingTableProps) {
   const { t } = useTranslation()
-  const navigate = useNavigate({ from: '/pricing/' })
   const {
     models,
     isLoading = false,
@@ -41,6 +40,7 @@ export function PricingTable(props: PricingTableProps) {
     usdExchangeRate = 1,
     tokenUnit = DEFAULT_TOKEN_UNIT,
     showRechargePrice = false,
+    onModelClick,
   } = props
 
   const [pagination, setPagination] = useState<PaginationState>({
@@ -68,13 +68,9 @@ export function PricingTable(props: PricingTableProps) {
 
   const handleRowClick = useCallback(
     (model: PricingModel) => {
-      navigate({
-        to: '/pricing/$modelId',
-        params: { modelId: model.model_name },
-        search: (prev) => prev,
-      })
+      onModelClick?.(model.model_name)
     },
-    [navigate]
+    [onModelClick]
   )
 
   return (