🐛 fix: provider settings button unable to redirect (#10319)

* 🔧 refactor: replace Next.js router with React Router for navigation in ModelSwitchPanel

* 🔧 feat: 添加新多模态模型 Grok 4.1 Fast 和 Grok 4.1 Fast (Non-Reasoning) 到 xai.ts

Author: sxjeru

packages/model-bank/src/aiModels/xai.ts

@@ -6,13 +6,94 @@ const xaiChatModels: AIChatModelCard[] = [
     abilities: {
       functionCall: true,
       search: true,
+      structuredOutput: true,
       vision: true,
     },
     contextWindowTokens: 2_000_000,
-    description:
-      '我们很高兴发布 Grok 4 Fast，这是我们在成本效益推理模型方面的最新进展。',
-    displayName: 'Grok 4 Fast (Non-Reasoning)',
+    description: '前沿多模态模型，专门针对高性能代理工具调用进行优化。',
+    displayName: 'Grok 4.1 Fast (Non-Reasoning)',
+    enabled: true,
+    id: 'grok-4-1-fast-non-reasoning',
+    pricing: {
+      units: [
+        { name: 'textInput_cacheRead', rate: 0.05, strategy: 'fixed', unit: 'millionTokens' },
+        {
+          name: 'textInput',
+          strategy: 'tiered',
+          tiers: [
+            { rate: 0.2, upTo: 0.128 },
+            { rate: 0.4, upTo: 'infinity' },
+          ],
+          unit: 'millionTokens',
+        },
+        {
+          name: 'textOutput',
+          strategy: 'tiered',
+          tiers: [
+            { rate: 0.5, upTo: 0.128 },
+            { rate: 1, upTo: 'infinity' },
+          ],
+          unit: 'millionTokens',
+        },
+      ],
+    },
+    releasedAt: '2025-11-20',
+    settings: {
+      searchImpl: 'params',
+    },
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+      search: true,
+      structuredOutput: true,
+      vision: true,
+    },
+    contextWindowTokens: 2_000_000,
+    description: '前沿多模态模型，专门针对高性能代理工具调用进行优化。',
+    displayName: 'Grok 4.1 Fast',
     enabled: true,
+    id: 'grok-4-1-fast-reasoning',
+    pricing: {
+      units: [
+        { name: 'textInput_cacheRead', rate: 0.05, strategy: 'fixed', unit: 'millionTokens' },
+        {
+          name: 'textInput',
+          strategy: 'tiered',
+          tiers: [
+            { rate: 0.2, upTo: 0.128 },
+            { rate: 0.4, upTo: 'infinity' },
+          ],
+          unit: 'millionTokens',
+        },
+        {
+          name: 'textOutput',
+          strategy: 'tiered',
+          tiers: [
+            { rate: 0.5, upTo: 0.128 },
+            { rate: 1, upTo: 'infinity' },
+          ],
+          unit: 'millionTokens',
+        },
+      ],
+    },
+    releasedAt: '2025-11-20',
+    settings: {
+      searchImpl: 'params',
+    },
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      search: true,
+      vision: true,
+    },
+    contextWindowTokens: 2_000_000,
+    description: '我们很高兴发布 Grok 4 Fast，这是我们在成本效益推理模型方面的最新进展。',
+    displayName: 'Grok 4 Fast (Non-Reasoning)',
     id: 'grok-4-fast-non-reasoning',
     pricing: {
       units: [
@@ -51,10 +132,8 @@ const xaiChatModels: AIChatModelCard[] = [
       vision: true,
     },
     contextWindowTokens: 2_000_000,
-    description:
-      '我们很高兴发布 Grok 4 Fast，这是我们在成本效益推理模型方面的最新进展。',
+    description: '我们很高兴发布 Grok 4 Fast，这是我们在成本效益推理模型方面的最新进展。',
     displayName: 'Grok 4 Fast',
-    enabled: true,
     id: 'grok-4-fast-reasoning',
     pricing: {
       units: [

src/features/ModelSwitchPanel/index.tsx

@@ -2,11 +2,10 @@ import { ActionIcon, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import type { ItemType } from 'antd/es/menu/interface';
 import { LucideArrowRight, LucideBolt } from 'lucide-react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { type ReactNode, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
 import ActionDropdown from '@/features/ChatInput/ActionBar/components/ActionDropdown';
@@ -53,7 +52,7 @@ const ModelSwitchPanel = memo<IProps>(({ children, onOpenChange, open }) => {
     agentSelectors.currentAgentModelProvider(s),
     s.updateAgentConfig,
   ]);
-  const router = useRouter();
+  const navigate = useNavigate();
   const enabledList = useEnabledChatModels();
 
   const items = useMemo<ItemType[]>(() => {
@@ -78,7 +77,7 @@ const ModelSwitchPanel = memo<IProps>(({ children, onOpenChange, open }) => {
               </Flexbox>
             ),
             onClick: () => {
-              router.push(`/settings?active=provider&provider=${provider.id}`);
+              navigate(`/settings?active=provider&provider=${provider.id}`);
             },
           },
         ];
@@ -97,7 +96,7 @@ const ModelSwitchPanel = memo<IProps>(({ children, onOpenChange, open }) => {
             </Flexbox>
           ),
           onClick: () => {
-            router.push('/settings?active=provider');
+            navigate('/settings?active=provider');
           },
         },
       ];
@@ -114,18 +113,21 @@ const ModelSwitchPanel = memo<IProps>(({ children, onOpenChange, open }) => {
             provider={provider.id}
             source={provider.source}
           />
-          <Link href={`/settings?active=provider&provider=${provider.id}`}>
-            <ActionIcon
-              icon={LucideBolt}
-              size={'small'}
-              title={t('ModelSwitchPanel.goToSettings')}
-            />
-          </Link>
+          <ActionIcon
+            icon={LucideBolt}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              navigate(`/settings?active=provider&provider=${provider.id}`);
+            }}
+            size={'small'}
+            title={t('ModelSwitchPanel.goToSettings')}
+          />
         </Flexbox>
       ),
       type: 'group',
     }));
-  }, [enabledList]);
+  }, [enabledList, navigate, t, theme.colorTextTertiary]);
 
   const icon = <div className={styles.tag}>{children}</div>;