Merge branch 'main' into 3-16-next-lib

web/__tests__/apps/app-card-operations-flow.test.tsx

@@ -29,7 +29,7 @@ const mockOnPlanInfoChanged = vi.fn()
 const mockDeleteAppMutation = vi.fn().mockResolvedValue(undefined)
 let mockDeleteMutationPending = false
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
   }),
@@ -57,7 +57,7 @@ vi.mock('@headlessui/react', async () => {
   }
 })
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (loader: () => Promise<{ default: React.ComponentType }>) => {
     let Component: React.ComponentType<Record<string, unknown>> | null = null
     loader().then((mod) => {

web/__tests__/apps/app-list-browsing-flow.test.tsx

@@ -38,7 +38,7 @@ let mockShowTagManagementModal = false
 const mockRouterPush = vi.fn()
 const mockRouterReplace = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
     replace: mockRouterReplace,
@@ -46,7 +46,7 @@ vi.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (_loader: () => Promise<{ default: React.ComponentType }>) => {
     const LazyComponent = (props: Record<string, unknown>) => {
       return <div data-testid="dynamic-component" {...props} />

web/__tests__/apps/create-app-flow.test.tsx

@@ -35,7 +35,7 @@ const mockRouterPush = vi.fn()
 const mockRouterReplace = vi.fn()
 const mockOnPlanInfoChanged = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
     replace: mockRouterReplace,
@@ -117,7 +117,7 @@ vi.mock('ahooks', async () => {
 })
 
 // Mock dynamically loaded modals with test stubs
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (loader: () => Promise<{ default: React.ComponentType }>) => {
     let Component: React.ComponentType<Record<string, unknown>> | null = null
     loader().then((mod) => {

web/__tests__/billing/billing-integration.test.tsx

@@ -64,7 +64,7 @@ vi.mock('@/service/use-education', () => ({
 
 // ─── Navigation mocks ───────────────────────────────────────────────────────
 const mockRouterPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockRouterPush }),
   usePathname: () => '/billing',
   useSearchParams: () => new URLSearchParams(),

web/__tests__/billing/cloud-plan-payment-flow.test.tsx

@@ -54,7 +54,7 @@ vi.mock('@/app/components/base/toast', () => ({
 }))
 
 // ─── Navigation mocks ───────────────────────────────────────────────────────
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/billing',
   useSearchParams: () => new URLSearchParams(),

web/__tests__/billing/education-verification-flow.test.tsx

@@ -63,7 +63,7 @@ vi.mock('@/service/use-billing', () => ({
 }))
 
 // ─── Navigation mocks ───────────────────────────────────────────────────────
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockRouterPush }),
   usePathname: () => '/billing',
   useSearchParams: () => new URLSearchParams(),

web/__tests__/billing/partner-stack-flow.test.tsx

@@ -18,7 +18,7 @@ let mockSearchParams = new URLSearchParams()
 const mockMutateAsync = vi.fn()
 
 // ─── Module mocks ────────────────────────────────────────────────────────────
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSearchParams: () => mockSearchParams,
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/',

web/__tests__/billing/pricing-modal-flow.test.tsx

@@ -51,7 +51,7 @@ vi.mock('@/hooks/use-async-window-open', () => ({
 }))
 
 // ─── Navigation mocks ───────────────────────────────────────────────────────
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/billing',
   useSearchParams: () => new URLSearchParams(),

web/__tests__/datasets/document-management.test.tsx

@@ -13,7 +13,7 @@ import { DataSourceType } from '@/models/datasets'
 import { renderHookWithNuqs } from '@/test/nuqs-testing'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(''),
   useRouter: () => ({ push: mockPush }),
   usePathname: () => '/datasets/ds-1/documents',

web/__tests__/document-detail-navigation-fix.test.tsx

@@ -7,12 +7,12 @@ import type { Mock } from 'vitest'
  */
 
 import { fireEvent, render, screen } from '@testing-library/react'
-import { useRouter } from 'next/navigation'
+import { useRouter } from '@/next/navigation'
 import { useDocumentDetail, useDocumentMetadata } from '@/service/knowledge/use-document'
 
 // Mock Next.js router
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(() => ({
     push: mockPush,
   })),

web/__tests__/embedded-user-id-auth.test.tsx

@@ -8,7 +8,7 @@ const replaceMock = vi.fn()
 const backMock = vi.fn()
 const useSearchParamsMock = vi.fn(() => new URLSearchParams())
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: vi.fn(() => '/chatbot/test-app'),
   useRouter: vi.fn(() => ({
     replace: replaceMock,

web/__tests__/embedded-user-id-store.test.tsx

@@ -4,7 +4,7 @@ import WebAppStoreProvider, { useWebAppStore } from '@/context/web-app-context'
 
 import { AccessMode } from '@/models/access-control'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: vi.fn(() => '/chatbot/sample-app'),
   useSearchParams: vi.fn(() => {
     const params = new URLSearchParams()

web/__tests__/explore/sidebar-lifecycle-flow.test.tsx

@@ -19,7 +19,7 @@ const mockUninstall = vi.fn()
 const mockUpdatePinStatus = vi.fn()
 let mockInstalledApps: InstalledApp[] = []
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegments: () => mockSegments,
   useRouter: () => ({
     push: mockPush,

web/__tests__/share/text-generation-index-flow.test.tsx

@@ -5,7 +5,7 @@ import TextGeneration from '@/app/components/share/text-generation'
 
 const useSearchParamsMock = vi.fn(() => new URLSearchParams())
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSearchParams: () => useSearchParamsMock(),
 }))
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx

@@ -13,8 +13,6 @@ import {
   RiTerminalWindowLine,
 } from '@remixicon/react'
 import { useUnmount } from 'ahooks'
-import dynamic from 'next/dynamic'
-import { usePathname, useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -26,6 +24,8 @@ import { useStore as useTagStore } from '@/app/components/base/tag-management/st
 import { useAppContext } from '@/context/app-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
+import dynamic from '@/next/dynamic'
+import { usePathname, useRouter } from '@/next/navigation'
 import { fetchAppDetailDirect } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx

@@ -7,7 +7,6 @@ import {
   RiEqualizer2Line,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,6 +16,7 @@ import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import Indicator from '@/app/components/header/indicator'
 import { useAppContext } from '@/context/app-context'
+import { usePathname } from '@/next/navigation'
 import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps'
 import { cn } from '@/utils/classnames'
 import ConfigButton from './config-button'
@@ -254,7 +254,7 @@ const Panel: FC = () => {
             )}
           >
             <TracingIcon size="md" />
-            <div className="system-sm-semibold mx-2 text-text-secondary">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
+            <div className="mx-2 text-text-secondary system-sm-semibold">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
             <div className="rounded-md p-1">
               <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
             </div>
@@ -294,7 +294,7 @@ const Panel: FC = () => {
           >
             <div className="ml-4 mr-1 flex items-center">
               <Indicator color={enabled ? 'green' : 'gray'} />
-              <div className="system-xs-semibold-uppercase ml-1.5 text-text-tertiary">
+              <div className="ml-1.5 text-text-tertiary system-xs-semibold-uppercase">
                 {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`, { ns: 'app' })}
               </div>
             </div>

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx

@@ -9,7 +9,6 @@ import {
   RiFocus2Fill,
   RiFocus2Line,
 } from '@remixicon/react'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -23,6 +22,7 @@ import DatasetDetailContext from '@/context/dataset-detail'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { usePathname } from '@/next/navigation'
 import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
 import { cn } from '@/utils/classnames'
 

web/app/(commonLayout)/datasets/layout.spec.tsx

@@ -6,7 +6,7 @@ import DatasetsLayout from './layout'
 const mockReplace = vi.fn()
 const mockUseAppContext = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
   }),

web/app/(commonLayout)/datasets/layout.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
 import { ExternalApiPanelProvider } from '@/context/external-api-panel-context'
 import { ExternalKnowledgeApiProvider } from '@/context/external-knowledge-api-context'
+import { useRouter } from '@/next/navigation'
 
 export default function DatasetsLayout({ children }: { children: React.ReactNode }) {
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator, currentWorkspace, isLoadingCurrentWorkspace } = useAppContext()

web/app/(commonLayout)/education-apply/page.tsx

@@ -1,15 +1,15 @@
 'use client'
 
-import {
-  useRouter,
-  useSearchParams,
-} from 'next/navigation'
 import {
   useEffect,
   useMemo,
 } from 'react'
 import EducationApplyPage from '@/app/education-apply/education-apply-page'
 import { useProviderContext } from '@/context/provider-context'
+import {
+  useRouter,
+  useSearchParams,
+} from '@/next/navigation'
 
 export default function EducationApply() {
   const router = useRouter()

web/app/(commonLayout)/role-route-guard.spec.tsx

@@ -6,7 +6,7 @@ const mockReplace = vi.fn()
 const mockUseAppContext = vi.fn()
 let mockPathname = '/apps'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => mockPathname,
   useRouter: () => ({
     replace: mockReplace,

web/app/(commonLayout)/role-route-guard.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
+import { usePathname, useRouter } from '@/next/navigation'
 
 const datasetOperatorRedirectRoutes = ['/apps', '/app', '/explore', '/tools'] as const
 

web/app/(humanInputLayout)/form/[token]/form.tsx

@@ -9,7 +9,6 @@ import {
   RiInformation2Fill,
 } from '@remixicon/react'
 import { produce } from 'immer'
-import { useParams } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -21,6 +20,7 @@ import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-inp
 import Loading from '@/app/components/base/loading'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useParams } from '@/next/navigation'
 import { useGetHumanInputForm, useSubmitHumanInputForm } from '@/service/use-share'
 import { cn } from '@/utils/classnames'
 
@@ -106,17 +106,17 @@ const FormContent = () => {
               <RiCheckboxCircleFill className="h-8 w-8 text-text-success" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.thanks', { ns: 'share' })}</div>
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.recorded', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.thanks', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.recorded', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 text-text-tertiary system-2xs-regular-uppercase">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -134,17 +134,17 @@ const FormContent = () => {
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.expired', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.sorry', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.expired', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 text-text-tertiary system-2xs-regular-uppercase">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -162,17 +162,17 @@ const FormContent = () => {
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.completed', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.sorry', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.completed', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 text-text-tertiary system-2xs-regular-uppercase">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -190,7 +190,7 @@ const FormContent = () => {
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.rateLimitExceeded', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.rateLimitExceeded', { ns: 'share' })}</div>
             </div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
@@ -198,7 +198,7 @@ const FormContent = () => {
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -216,7 +216,7 @@ const FormContent = () => {
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.formNotFound', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.formNotFound', { ns: 'share' })}</div>
             </div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
@@ -224,7 +224,7 @@ const FormContent = () => {
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -245,7 +245,7 @@ const FormContent = () => {
           background={site.icon_background}
           imageUrl={site.icon_url}
         />
-        <div className="system-xl-semibold grow text-text-primary">{site.title}</div>
+        <div className="grow text-text-primary system-xl-semibold">{site.title}</div>
       </div>
       <div className="h-0 w-full grow overflow-y-auto">
         <div className="border-components-divider-subtle rounded-[20px] border bg-chat-bubble-bg p-4 shadow-lg backdrop-blur-sm">
@@ -277,7 +277,7 @@ const FormContent = () => {
             'flex shrink-0 items-center gap-1.5 px-1',
           )}
           >
-            <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+            <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
             <DifyLogo size="small" />
           </div>
         </div>

web/app/(shareLayout)/components/authenticated-layout.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import { useWebAppStore } from '@/context/web-app-context'
+import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
 import { useGetUserCanAccessApp } from '@/service/access-control'
 import { useGetWebAppInfo, useGetWebAppMeta, useGetWebAppParams } from '@/service/use-share'
 import { webAppLogout } from '@/service/webapp-auth'
@@ -81,7 +81,7 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-2">
         <AppUnavailable className="h-auto w-auto" code={403} unknownReason="no permission." />
-        <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
+        <span className="cursor-pointer text-text-tertiary system-sm-regular" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
       </div>
     )
   }

web/app/(shareLayout)/components/splash.tsx

@@ -1,11 +1,11 @@
 'use client'
 import type { FC, PropsWithChildren } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import { useWebAppStore } from '@/context/web-app-context'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchAccessToken } from '@/service/share'
 import { setWebAppAccessToken, setWebAppPassport, webAppLoginStatus, webAppLogout } from '@/service/webapp-auth'
 
@@ -95,7 +95,7 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-4">
         <AppUnavailable className="h-auto w-auto" code={code || t('common.appUnavailable', { ns: 'share' })} unknownReason={message} />
-        <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
+        <span className="cursor-pointer text-text-tertiary system-sm-regular" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
       </div>
     )
   }

web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx

@@ -1,14 +1,14 @@
 'use client'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import Countdown from '@/app/components/signin/countdown'
-
 import { useLocale } from '@/context/i18n'
+
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendWebAppResetPasswordCode, verifyWebAppResetPasswordCode } from '@/service/common'
 
 export default function CheckCode() {
@@ -69,8 +69,8 @@ export default function CheckCode() {
         <RiMailSendFill className="h-6 w-6 text-2xl" />
       </div>
       <div className="pb-4 pt-2">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-secondary body-md-regular">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -82,7 +82,7 @@ export default function CheckCode() {
 
       <form action="">
         <input type="text" className="hidden" />
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 text-text-secondary system-md-semibold">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) || ''} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -94,7 +94,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )

web/app/(shareLayout)/webapp-reset-password/page.tsx

@@ -1,8 +1,6 @@
 'use client'
 import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -10,9 +8,11 @@ import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
-
 import { useLocale } from '@/context/i18n'
 import useDocumentTitle from '@/hooks/use-document-title'
+
+import Link from '@/next/link'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendResetPasswordCode } from '@/service/common'
 
 export default function CheckCode() {
@@ -74,8 +74,8 @@ export default function CheckCode() {
         <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pb-4 pt-2">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('resetPassword', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-secondary body-md-regular">
           {t('resetPasswordDesc', { ns: 'login' })}
         </p>
       </div>
@@ -83,7 +83,7 @@ export default function CheckCode() {
       <form onSubmit={noop}>
         <input type="text" className="hidden" />
         <div className="mb-2">
-          <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+          <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">{t('email', { ns: 'login' })}</label>
           <div className="mt-1">
             <Input id="email" type="email" disabled={loading} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
           </div>
@@ -99,7 +99,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('backToLogin', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('backToLogin', { ns: 'login' })}</span>
       </Link>
     </div>
   )

web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx

@@ -1,13 +1,13 @@
 'use client'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import { validPassword } from '@/config'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { changeWebAppPasswordWithToken } from '@/service/common'
 import { cn } from '@/utils/classnames'
 
@@ -91,10 +91,10 @@ const ChangePasswordForm = () => {
       {!showSuccess && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h2 className="text-text-primary title-4xl-semi-bold">
               {t('changePassword', { ns: 'login' })}
             </h2>
-            <p className="body-md-regular mt-2 text-text-secondary">
+            <p className="mt-2 text-text-secondary body-md-regular">
               {t('changePasswordTip', { ns: 'login' })}
             </p>
           </div>
@@ -103,7 +103,7 @@ const ChangePasswordForm = () => {
             <div className="bg-white">
               {/* Password */}
               <div className="mb-5">
-                <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="password" className="my-2 text-text-secondary system-md-semibold">
                   {t('account.newPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -125,11 +125,11 @@ const ChangePasswordForm = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+                <div className="mt-1 text-text-secondary body-xs-regular">{t('error.passwordInvalid', { ns: 'login' })}</div>
               </div>
               {/* Confirm Password */}
               <div className="mb-5">
-                <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="confirmPassword" className="my-2 text-text-secondary system-md-semibold">
                   {t('account.confirmPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -170,7 +170,7 @@ const ChangePasswordForm = () => {
             <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
               <RiCheckboxCircleFill className="h-6 w-6 text-text-success" />
             </div>
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h2 className="text-text-primary title-4xl-semi-bold">
               {t('passwordChangedTip', { ns: 'login' })}
             </h2>
           </div>

web/app/(shareLayout)/webapp-signin/check-code/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 import type { FormEvent } from 'react'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -10,6 +9,7 @@ import Toast from '@/app/components/base/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
 import { useWebAppStore } from '@/context/web-app-context'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendWebAppEMailLoginCode, webAppEmailLoginWithCode } from '@/service/common'
 import { fetchAccessToken } from '@/service/share'
 import { setWebAppAccessToken, setWebAppPassport } from '@/service/webapp-auth'
@@ -110,8 +110,8 @@ export default function CheckCode() {
         <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pb-4 pt-2">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-secondary body-md-regular">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -122,7 +122,7 @@ export default function CheckCode() {
       </div>
 
       <form onSubmit={handleSubmit}>
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 text-text-secondary system-md-semibold">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input
           ref={codeInputRef}
           id="code"
@@ -142,7 +142,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )

web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx

@@ -1,11 +1,11 @@
 'use client'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect } from 'react'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
 import { SSOProtocol } from '@/types/feature'
 

web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx

@@ -1,5 +1,4 @@
 import { noop } from 'es-toolkit/function'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -8,6 +7,7 @@ import Toast from '@/app/components/base/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendWebAppEMailLoginCode } from '@/service/common'
 
 export default function MailAndCodeAuth() {
@@ -55,7 +55,7 @@ export default function MailAndCodeAuth() {
     <form onSubmit={noop}>
       <input type="text" className="hidden" />
       <div className="mb-2">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+        <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">{t('email', { ns: 'login' })}</label>
         <div className="mt-1">
           <Input id="email" type="email" value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
         </div>

web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx

@@ -1,7 +1,5 @@
 'use client'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -10,6 +8,8 @@ import Toast from '@/app/components/base/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
 import { useWebAppStore } from '@/context/web-app-context'
+import Link from '@/next/link'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { webAppLogin } from '@/service/common'
 import { fetchAccessToken } from '@/service/share'
 import { setWebAppAccessToken, setWebAppPassport } from '@/service/webapp-auth'
@@ -112,7 +112,7 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
   return (
     <form onSubmit={noop}>
       <div className="mb-3">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">
           {t('email', { ns: 'login' })}
         </label>
         <div className="mt-1">
@@ -130,7 +130,7 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
 
       <div className="mb-3">
         <label htmlFor="password" className="my-2 flex items-center justify-between">
-          <span className="system-md-semibold text-text-secondary">{t('password', { ns: 'login' })}</span>
+          <span className="text-text-secondary system-md-semibold">{t('password', { ns: 'login' })}</span>
           <Link
             href={`/webapp-reset-password?${searchParams.toString()}`}
             className={`system-xs-regular ${isEmailSetup ? 'text-components-button-secondary-accent-text' : 'pointer-events-none text-components-button-secondary-accent-text-disabled'}`}

web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx

@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import Toast from '@/app/components/base/toast'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchMembersOAuth2SSOUrl, fetchMembersOIDCSSOUrl, fetchMembersSAMLSSOUrl } from '@/service/share'
 import { SSOProtocol } from '@/types/feature'
 

web/app/(shareLayout)/webapp-signin/normalForm.tsx

@@ -1,12 +1,12 @@
 'use client'
 import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import Link from '@/next/link'
 import { LicenseStatus } from '@/types/feature'
 import { cn } from '@/utils/classnames'
 import MailAndCodeAuth from './components/mail-and-code-auth'
@@ -60,8 +60,8 @@ const NormalForm = () => {
               <RiContractLine className="h-5 w-5" />
               <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
             </div>
-            <p className="system-sm-medium text-text-primary">{t('licenseLost', { ns: 'login' })}</p>
-            <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseLostTip', { ns: 'login' })}</p>
+            <p className="text-text-primary system-sm-medium">{t('licenseLost', { ns: 'login' })}</p>
+            <p className="mt-1 text-text-tertiary system-xs-regular">{t('licenseLostTip', { ns: 'login' })}</p>
           </div>
         </div>
       </div>
@@ -76,8 +76,8 @@ const NormalForm = () => {
               <RiContractLine className="h-5 w-5" />
               <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
             </div>
-            <p className="system-sm-medium text-text-primary">{t('licenseExpired', { ns: 'login' })}</p>
-            <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseExpiredTip', { ns: 'login' })}</p>
+            <p className="text-text-primary system-sm-medium">{t('licenseExpired', { ns: 'login' })}</p>
+            <p className="mt-1 text-text-tertiary system-xs-regular">{t('licenseExpiredTip', { ns: 'login' })}</p>
           </div>
         </div>
       </div>
@@ -92,8 +92,8 @@ const NormalForm = () => {
               <RiContractLine className="h-5 w-5" />
               <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
             </div>
-            <p className="system-sm-medium text-text-primary">{t('licenseInactive', { ns: 'login' })}</p>
-            <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseInactiveTip', { ns: 'login' })}</p>
+            <p className="text-text-primary system-sm-medium">{t('licenseInactive', { ns: 'login' })}</p>
+            <p className="mt-1 text-text-tertiary system-xs-regular">{t('licenseInactiveTip', { ns: 'login' })}</p>
           </div>
         </div>
       </div>
@@ -104,8 +104,8 @@ const NormalForm = () => {
     <>
       <div className="mx-auto mt-8 w-full">
         <div className="mx-auto w-full">
-          <h2 className="title-4xl-semi-bold text-text-primary">{systemFeatures.branding.enabled ? t('pageTitleForE', { ns: 'login' }) : t('pageTitle', { ns: 'login' })}</h2>
-          <p className="body-md-regular mt-2 text-text-tertiary">{t('welcome', { ns: 'login' })}</p>
+          <h2 className="text-text-primary title-4xl-semi-bold">{systemFeatures.branding.enabled ? t('pageTitleForE', { ns: 'login' }) : t('pageTitle', { ns: 'login' })}</h2>
+          <p className="mt-2 text-text-tertiary body-md-regular">{t('welcome', { ns: 'login' })}</p>
         </div>
         <div className="relative">
           <div className="mt-6 flex flex-col gap-3">
@@ -122,7 +122,7 @@ const NormalForm = () => {
                 <div className="h-px w-full bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent"></div>
               </div>
               <div className="relative flex justify-center">
-                <span className="system-xs-medium-uppercase px-2 text-text-tertiary">{t('or', { ns: 'login' })}</span>
+                <span className="px-2 text-text-tertiary system-xs-medium-uppercase">{t('or', { ns: 'login' })}</span>
               </div>
             </div>
           )}
@@ -134,7 +134,7 @@ const NormalForm = () => {
                     <MailAndCodeAuth />
                     {systemFeatures.enable_email_password_login && (
                       <div className="cursor-pointer py-1 text-center" onClick={() => { updateAuthType('password') }}>
-                        <span className="system-xs-medium text-components-button-secondary-accent-text">{t('usePassword', { ns: 'login' })}</span>
+                        <span className="text-components-button-secondary-accent-text system-xs-medium">{t('usePassword', { ns: 'login' })}</span>
                       </div>
                     )}
                   </>
@@ -144,7 +144,7 @@ const NormalForm = () => {
                     <MailAndPasswordAuth isEmailSetup={systemFeatures.is_email_setup} />
                     {systemFeatures.enable_email_code_login && (
                       <div className="cursor-pointer py-1 text-center" onClick={() => { updateAuthType('code') }}>
-                        <span className="system-xs-medium text-components-button-secondary-accent-text">{t('useVerificationCode', { ns: 'login' })}</span>
+                        <span className="text-components-button-secondary-accent-text system-xs-medium">{t('useVerificationCode', { ns: 'login' })}</span>
                       </div>
                     )}
                   </>
@@ -158,8 +158,8 @@ const NormalForm = () => {
                 <div className="shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
                   <RiDoorLockLine className="h-5 w-5" />
                 </div>
-                <p className="system-sm-medium text-text-primary">{t('noLoginMethod', { ns: 'login' })}</p>
-                <p className="system-xs-regular mt-1 text-text-tertiary">{t('noLoginMethodTip', { ns: 'login' })}</p>
+                <p className="text-text-primary system-sm-medium">{t('noLoginMethod', { ns: 'login' })}</p>
+                <p className="mt-1 text-text-tertiary system-xs-regular">{t('noLoginMethodTip', { ns: 'login' })}</p>
               </div>
               <div className="relative my-2 py-2">
                 <div className="absolute inset-0 flex items-center" aria-hidden="true">
@@ -170,11 +170,11 @@ const NormalForm = () => {
           )}
           {!systemFeatures.branding.enabled && (
             <>
-              <div className="system-xs-regular mt-2 block w-full text-text-tertiary">
+              <div className="mt-2 block w-full text-text-tertiary system-xs-regular">
                 {t('tosDesc', { ns: 'login' })}
               &nbsp;
                 <Link
-                  className="system-xs-medium text-text-secondary hover:underline"
+                  className="text-text-secondary system-xs-medium hover:underline"
                   target="_blank"
                   rel="noopener noreferrer"
                   href="https://dify.ai/terms"
@@ -183,7 +183,7 @@ const NormalForm = () => {
                 </Link>
               &nbsp;&&nbsp;
                 <Link
-                  className="system-xs-medium text-text-secondary hover:underline"
+                  className="text-text-secondary system-xs-medium hover:underline"
                   target="_blank"
                   rel="noopener noreferrer"
                   href="https://dify.ai/privacy"
@@ -192,11 +192,11 @@ const NormalForm = () => {
                 </Link>
               </div>
               {IS_CE_EDITION && (
-                <div className="w-hull system-xs-regular mt-2 block text-text-tertiary">
+                <div className="w-hull mt-2 block text-text-tertiary system-xs-regular">
                   {t('goToInit', { ns: 'login' })}
               &nbsp;
                   <Link
-                    className="system-xs-medium text-text-secondary hover:underline"
+                    className="text-text-secondary system-xs-medium hover:underline"
                     href="/install"
                   >
                     {t('setAdminAccount', { ns: 'login' })}

web/app/(shareLayout)/webapp-signin/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,6 +7,7 @@ import AppUnavailable from '@/app/components/base/app-unavailable'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWebAppStore } from '@/context/web-app-context'
 import { AccessMode } from '@/models/access-control'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { webAppLogout } from '@/service/webapp-auth'
 import ExternalMemberSsoAuth from './components/external-member-sso-auth'
 import NormalForm from './normalForm'
@@ -45,7 +45,7 @@ const WebSSOForm: FC = () => {
   if (!systemFeatures.webapp_auth.enabled) {
     return (
       <div className="flex h-full items-center justify-center">
-        <p className="system-xs-regular text-text-tertiary">{t('webapp.disabled', { ns: 'login' })}</p>
+        <p className="text-text-tertiary system-xs-regular">{t('webapp.disabled', { ns: 'login' })}</p>
       </div>
     )
   }
@@ -63,7 +63,7 @@ const WebSSOForm: FC = () => {
   return (
     <div className="flex h-full flex-col items-center justify-center gap-y-4">
       <AppUnavailable className="h-auto w-auto" isUnknownReason={true} />
-      <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
+      <span className="cursor-pointer text-text-tertiary system-sm-regular" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
     </div>
   )
 }

web/app/account/(commonLayout)/account-page/email-change-modal.tsx

@@ -1,7 +1,6 @@
 import type { ResponseError } from '@/service/fetch'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -10,6 +9,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast/context'
+import { useRouter } from '@/next/navigation'
 import {
   checkEmailExisted,
   resetEmail,
@@ -209,14 +209,14 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       </div>
       {step === STEP.start && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.title', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.title', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-medium text-text-warning">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
-            <div className="body-md-regular text-text-secondary">
+            <div className="text-text-warning body-md-medium">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content1"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email }}
               />
             </div>
@@ -241,19 +241,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       )}
       {step === STEP.verifyOrigin && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-regular text-text-secondary">
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content2"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email }}
               />
             </div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
             <Input
               className="!w-full"
               placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -278,25 +278,25 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
+          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
             <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
             {time > 0 && (
               <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
             )}
             {!time && (
-              <span onClick={sendCodeToOriginEmail} className="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <span onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
             )}
           </div>
         </>
       )}
       {step === STEP.newEmail && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-regular text-text-secondary">{t('account.changeEmail.content3', { ns: 'common' })}</div>
+            <div className="text-text-secondary body-md-regular">{t('account.changeEmail.content3', { ns: 'common' })}</div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
             <Input
               className="!w-full"
               placeholder={t('account.changeEmail.emailPlaceholder', { ns: 'common' })}
@@ -305,10 +305,10 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               destructive={newEmailExited || unAvailableEmail}
             />
             {newEmailExited && (
-              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
+              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
             )}
             {unAvailableEmail && (
-              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
+              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
             )}
           </div>
           <div className="mt-3 space-y-2">
@@ -331,19 +331,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       )}
       {step === STEP.verifyNew && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-regular text-text-secondary">
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content4"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email: mail }}
               />
             </div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
             <Input
               className="!w-full"
               placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -368,13 +368,13 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
+          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
             <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
             {time > 0 && (
               <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
             )}
             {!time && (
-              <span onClick={sendCodeToNewEmail} className="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <span onClick={sendCodeToNewEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
             )}
           </div>
         </>

web/app/account/(commonLayout)/avatar.tsx

@@ -3,7 +3,6 @@ import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/r
 import {
   RiGraduationCapFill,
 } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 import { resetUser } from '@/app/components/base/amplitude/utils'
@@ -11,6 +10,7 @@ import { Avatar } from '@/app/components/base/avatar'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 import PremiumBadge from '@/app/components/base/premium-badge'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter } from '@/next/navigation'
 import { useLogout, useUserProfile } from '@/service/use-common'
 
 export type IAppSelector = {
@@ -77,7 +77,7 @@ export default function AppSelector() {
                   <div className="p-1">
                     <div className="flex flex-nowrap items-center px-3 py-2">
                       <div className="grow">
-                        <div className="system-md-medium break-all text-text-primary">
+                        <div className="break-all text-text-primary system-md-medium">
                           {userProfile.name}
                           {isEducationAccount && (
                             <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
@@ -86,7 +86,7 @@ export default function AppSelector() {
                             </PremiumBadge>
                           )}
                         </div>
-                        <div className="system-xs-regular break-all text-text-tertiary">{userProfile.email}</div>
+                        <div className="break-all text-text-tertiary system-xs-regular">{userProfile.email}</div>
                       </div>
                       <Avatar avatar={userProfile.avatar_url} name={userProfile.name} />
                     </div>

web/app/account/(commonLayout)/delete-account/components/check-email.tsx

@@ -1,10 +1,10 @@
 'use client'
-import Link from 'next/link'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import { useAppContext } from '@/context/app-context'
+import Link from '@/next/link'
 import { useSendDeleteAccountEmail } from '../state'
 
 type DeleteAccountProps = {
@@ -30,14 +30,14 @@ export default function CheckEmail(props: DeleteAccountProps) {
 
   return (
     <>
-      <div className="body-md-medium py-1 text-text-destructive">
+      <div className="py-1 text-text-destructive body-md-medium">
         {t('account.deleteTip', { ns: 'common' })}
       </div>
-      <div className="body-md-regular pb-2 pt-1 text-text-secondary">
+      <div className="pb-2 pt-1 text-text-secondary body-md-regular">
         {t('account.deletePrivacyLinkTip', { ns: 'common' })}
         <Link href="https://dify.ai/privacy" className="text-text-accent">{t('account.deletePrivacyLink', { ns: 'common' })}</Link>
       </div>
-      <label className="system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary">{t('account.deleteLabel', { ns: 'common' })}</label>
+      <label className="mb-1 mt-3 flex h-6 items-center text-text-secondary system-sm-semibold">{t('account.deleteLabel', { ns: 'common' })}</label>
       <Input
         placeholder={t('account.deletePlaceholder', { ns: 'common' }) as string}
         onChange={(e) => {

web/app/account/(commonLayout)/delete-account/components/feed-back.tsx

@@ -1,5 +1,4 @@
 'use client'
-import { useRouter } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -7,6 +6,7 @@ import CustomDialog from '@/app/components/base/dialog'
 import Textarea from '@/app/components/base/textarea'
 import Toast from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
+import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
 import { useDeleteAccountFeedback } from '../state'
 
@@ -54,7 +54,7 @@ export default function FeedBack(props: DeleteAccountProps) {
       className="max-w-[480px]"
       footer={false}
     >
-      <label className="system-sm-semibold mb-1 mt-3 flex items-center text-text-secondary">{t('account.feedbackLabel', { ns: 'common' })}</label>
+      <label className="mb-1 mt-3 flex items-center text-text-secondary system-sm-semibold">{t('account.feedbackLabel', { ns: 'common' })}</label>
       <Textarea
         rows={6}
         value={userFeedback}

web/app/account/(commonLayout)/delete-account/components/verify-email.tsx

@@ -1,10 +1,10 @@
 'use client'
-import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Countdown from '@/app/components/signin/countdown'
+import Link from '@/next/link'
 import { useAccountDeleteStore, useConfirmDeleteAccount, useSendDeleteAccountEmail } from '../state'
 
 const CODE_EXP = /[A-Z\d]{6}/gi
@@ -36,14 +36,14 @@ export default function VerifyEmail(props: DeleteAccountProps) {
   }, [emailToken, verificationCode, confirmDeleteAccount, props])
   return (
     <>
-      <div className="body-md-medium pt-1 text-text-destructive">
+      <div className="pt-1 text-text-destructive body-md-medium">
         {t('account.deleteTip', { ns: 'common' })}
       </div>
-      <div className="body-md-regular pb-2 pt-1 text-text-secondary">
+      <div className="pb-2 pt-1 text-text-secondary body-md-regular">
         {t('account.deletePrivacyLinkTip', { ns: 'common' })}
         <Link href="https://dify.ai/privacy" className="text-text-accent">{t('account.deletePrivacyLink', { ns: 'common' })}</Link>
       </div>
-      <label className="system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary">{t('account.verificationLabel', { ns: 'common' })}</label>
+      <label className="mb-1 mt-3 flex h-6 items-center text-text-secondary system-sm-semibold">{t('account.verificationLabel', { ns: 'common' })}</label>
       <Input
         minLength={6}
         maxLength={6}

web/app/account/(commonLayout)/header.tsx

@@ -1,11 +1,11 @@
 'use client'
 import { RiArrowRightUpLine, RiRobot2Line } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useRouter } from '@/next/navigation'
 import Avatar from './avatar'
 
 const Header = () => {
@@ -32,10 +32,10 @@ const Header = () => {
             : <DifyLogo />}
         </div>
         <div className="h-4 w-[1px] origin-center rotate-[11.31deg] bg-divider-regular" />
-        <p className="title-3xl-semi-bold relative mt-[-2px] text-text-primary">{t('account.account', { ns: 'common' })}</p>
+        <p className="relative mt-[-2px] text-text-primary title-3xl-semi-bold">{t('account.account', { ns: 'common' })}</p>
       </div>
       <div className="flex shrink-0 items-center gap-3">
-        <Button className="system-sm-medium gap-2 px-3 py-2" onClick={goToStudio}>
+        <Button className="gap-2 px-3 py-2 system-sm-medium" onClick={goToStudio}>
           <RiRobot2Line className="h-4 w-4" />
           <p>{t('account.studio', { ns: 'common' })}</p>
           <RiArrowRightUpLine className="h-4 w-4" />

web/app/account/oauth/authorize/page.tsx

@@ -7,7 +7,6 @@ import {
   RiMailLine,
   RiTranslate2,
 } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,6 +16,7 @@ import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { setPostLoginRedirect } from '@/app/signin/utils/post-login-redirect'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useIsLogin, useUserProfile } from '@/service/use-common'
 import { useAuthorizeOAuthApp, useOAuthAppInfo } from '@/service/use-oauth'
 

web/app/activate/activateForm.tsx

@@ -1,11 +1,11 @@
 'use client'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
-
 import useDocumentTitle from '@/hooks/use-document-title'
+
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useInvitationCheck } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
 

web/app/components/app-initializer.tsx

@@ -2,13 +2,13 @@
 
 import type { ReactNode } from 'react'
 import Cookies from 'js-cookie'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { parseAsBoolean, useQueryState } from 'nuqs'
 import { useCallback, useEffect, useState } from 'react'
 import {
   EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
   EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
 } from '@/app/education-apply/constants'
+import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
 import { sendGAEvent } from '@/utils/gtag'
 import { fetchSetupStatusWithCache } from '@/utils/setup-status'
 import { resolvePostLoginRedirect } from '../signin/utils/post-login-redirect'

web/app/components/app-sidebar/__tests__/index.spec.tsx

@@ -19,7 +19,7 @@ vi.mock('zustand/react/shallow', () => ({
   useShallow: (fn: unknown) => fn,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => mockPathname,
 }))
 

web/app/components/app-sidebar/__tests__/text-squeeze-fix-verification.spec.tsx

@@ -7,7 +7,7 @@ import { render } from '@testing-library/react'
 import * as React from 'react'
 
 // Mock Next.js navigation
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegment: () => 'overview',
 }))
 

web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { AppModeEnum } from '@/types/app'
 import AppInfoModals from '../app-info-modals'
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (loader: () => Promise<{ default: React.ComponentType }>) => {
     const LazyComp = React.lazy(loader)
     return function DynamicWrapper(props: Record<string, unknown>) {

web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts

@@ -23,7 +23,7 @@ let mockAppDetail: Record<string, unknown> | undefined = {
   icon_background: '#FFEAD5',
 }
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ replace: mockReplace }),
 }))
 

web/app/components/app-sidebar/app-info/app-info-modals.tsx

@@ -3,9 +3,9 @@ import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-moda
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { App, AppSSO } from '@/types/app'
-import dynamic from 'next/dynamic'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import dynamic from '@/next/dynamic'
 
 const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), { ssr: false })
 const CreateAppModal = dynamic(() => import('@/app/components/explore/create-app-modal'), { ssr: false })

web/app/components/app-sidebar/app-info/use-app-info-actions.ts

@@ -1,7 +1,6 @@
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import { useRouter } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -9,6 +8,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast/context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter } from '@/next/navigation'
 import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
 import { useInvalidateAppList } from '@/service/use-apps'
 import { fetchWorkflowDraft } from '@/service/workflow'

web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx

@@ -80,7 +80,7 @@ const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
   ...overrides,
 })
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ replace: mockReplace }),
 }))
 

web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx

@@ -90,7 +90,7 @@ const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
   ...overrides,
 })
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
   }),

web/app/components/app-sidebar/dataset-info/dropdown.tsx

@@ -1,11 +1,11 @@
 import type { DataSet } from '@/models/datasets'
 import { RiMoreFill } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import { useRouter } from '@/next/navigation'
 import { checkIsUsedInApp, deleteDataset } from '@/service/datasets'
 import { datasetDetailQueryKeyPrefix, useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { useInvalid } from '@/service/use-base'

web/app/components/app-sidebar/index.tsx

@@ -1,12 +1,12 @@
 import type { NavIcon } from './nav-link'
 import { useHover, useKeyPress } from 'ahooks'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { usePathname } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 import Divider from '../base/divider'
 import { getKeyboardKeyCodeBySystem } from '../workflow/utils'

web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx

@@ -4,12 +4,12 @@ import * as React from 'react'
 import NavLink from '..'
 
 // Mock Next.js navigation
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegment: () => 'overview',
 }))
 
 // Mock Next.js Link component
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: function MockLink({ children, href, className, title }: { children: React.ReactNode, href: string, className?: string, title?: string }) {
     return (
       <a href={href} className={className} title={title} data-testid="nav-link">

web/app/components/app-sidebar/nav-link/index.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { RemixiconComponentType } from '@remixicon/react'
-import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
 import * as React from 'react'
+import Link from '@/next/link'
+import { useSelectedLayoutSegment } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 
 export type NavIcon = React.ComponentType<

web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import ContextVar from './index'
 
 // Mock external dependencies only
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
 }))

web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import VarPicker from './var-picker'
 
 // Mock external dependencies only
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
 }))

web/app/components/app/configuration/dataset-config/select-dataset/index.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
 import { useInfiniteScroll } from 'ahooks'
-import Link from 'next/link'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -14,6 +13,7 @@ import Modal from '@/app/components/base/modal'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import FeatureIcon from '@/app/components/header/account-setting/model-provider-page/model-selector/feature-icon'
 import { useKnowledge } from '@/hooks/use-knowledge'
+import Link from '@/next/link'
 import { useInfiniteDatasets } from '@/service/knowledge/use-dataset'
 import { cn } from '@/utils/classnames'
 
@@ -126,7 +126,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
 
       {hasNoData && (
         <div
-          className="mt-6 flex h-[128px] items-center justify-center space-x-1  rounded-lg border text-[13px]"
+          className="mt-6 flex h-[128px] items-center justify-center space-x-1 rounded-lg border text-[13px]"
           style={{
             background: 'rgba(0, 0, 0, 0.02)',
             borderColor: 'rgba(0, 0, 0, 0.02',
@@ -195,7 +195,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
       )}
       {!isLoading && (
         <div className="mt-8 flex items-center justify-between">
-          <div className="text-sm  font-medium text-text-secondary">
+          <div className="text-sm font-medium text-text-secondary">
             {selected.length > 0 && `${selected.length} ${t('feature.dataSet.selected', { ns: 'appDebug' })}`}
           </div>
           <div className="flex space-x-2">

web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx

@@ -155,7 +155,7 @@ vi.mock('@/service/debug', () => ({
   stopChatMessageResponding: mockStopChatMessageResponding,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
   useParams: () => ({}),

web/app/components/app/configuration/index.tsx

@@ -23,7 +23,6 @@ import { useBoolean, useGetState } from 'ahooks'
 import { clone } from 'es-toolkit/object'
 import { isEqual } from 'es-toolkit/predicate'
 import { produce } from 'immer'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -72,6 +71,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { PromptMode } from '@/models/debug'
+import { usePathname } from '@/next/navigation'
 import { fetchAppDetailDirect, updateAppModelConfig } from '@/service/apps'
 import { fetchDatasets } from '@/service/datasets'
 import { fetchCollectionList } from '@/service/tools'
@@ -966,10 +966,10 @@ const Configuration: FC = () => {
               <div className="bg-default-subtle absolute left-0 top-0 h-14 w-full">
                 <div className="flex h-14 items-center justify-between px-6">
                   <div className="flex items-center">
-                    <div className="system-xl-semibold text-text-primary">{t('orchestrate', { ns: 'appDebug' })}</div>
+                    <div className="text-text-primary system-xl-semibold">{t('orchestrate', { ns: 'appDebug' })}</div>
                     <div className="flex h-[14px] items-center space-x-1 text-xs">
                       {isAdvancedMode && (
-                        <div className="system-xs-medium-uppercase ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
+                        <div className="ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary system-xs-medium-uppercase">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
                       )}
                     </div>
                   </div>
@@ -1030,8 +1030,8 @@ const Configuration: FC = () => {
                 <Config />
               </div>
               {!isMobile && (
-                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
-                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg ">
+                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto" style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
+                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg">
                     <Debug
                       isAPIKeySet={isAPIKeySet}
                       onSetting={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}

web/app/components/app/create-app-dialog/app-list/index.spec.tsx

@@ -62,7 +62,7 @@ vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
 vi.mock('@/utils/app-redirection', () => ({
   getRedirection: vi.fn(),
 }))
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
 }))
 

web/app/components/app/create-app-dialog/app-list/index.tsx

@@ -4,7 +4,6 @@ import type { CreateAppModalProps } from '@/app/components/explore/create-app-mo
 import type { App } from '@/models/explore'
 import { RiRobot2Line } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -19,6 +18,7 @@ import { usePluginDependencies } from '@/app/components/workflow/plugin-dependen
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { DSLImportMode } from '@/models/app'
+import { useRouter } from '@/next/navigation'
 import { importDSL } from '@/service/apps'
 import { fetchAppDetail } from '@/service/explore'
 import { useExploreAppList } from '@/service/use-explore'
@@ -165,7 +165,7 @@ const Apps = ({
     <div className="flex h-full flex-col">
       <div className="flex items-center justify-between border-b border-divider-burn py-3">
         <div className="min-w-[180px] pl-5">
-          <span className="title-xl-semi-bold text-text-primary">{t('newApp.startFromTemplate', { ns: 'app' })}</span>
+          <span className="text-text-primary title-xl-semi-bold">{t('newApp.startFromTemplate', { ns: 'app' })}</span>
         </div>
         <div className="flex max-w-[548px] flex-1 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1.5 shadow-md">
           <AppTypeSelector value={currentType} onChange={setCurrentType} />
@@ -195,10 +195,10 @@ const Apps = ({
             <>
               <div className="pb-1 pt-4">
                 {searchKeywords
-                  ? <p className="title-md-semi-bold text-text-tertiary">{searchFilteredList.length > 1 ? t('newApp.foundResults', { ns: 'app', count: searchFilteredList.length }) : t('newApp.foundResult', { ns: 'app', count: searchFilteredList.length })}</p>
+                  ? <p className="text-text-tertiary title-md-semi-bold">{searchFilteredList.length > 1 ? t('newApp.foundResults', { ns: 'app', count: searchFilteredList.length }) : t('newApp.foundResult', { ns: 'app', count: searchFilteredList.length })}</p>
                   : (
                       <div className="flex h-[22px] items-center">
-                        <AppCategoryLabel category={currCategory as AppCategories} className="title-md-semi-bold text-text-primary" />
+                        <AppCategoryLabel category={currCategory as AppCategories} className="text-text-primary title-md-semi-bold" />
                       </div>
                     )}
               </div>
@@ -250,8 +250,8 @@ function NoTemplateFound() {
       <div className="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-components-card-bg shadow-lg">
         <RiRobot2Line className="h-5 w-5 text-text-tertiary" />
       </div>
-      <p className="title-md-semi-bold text-text-primary">{t('newApp.noTemplateFound', { ns: 'app' })}</p>
-      <p className="system-sm-regular text-text-tertiary">{t('newApp.noTemplateFoundTip', { ns: 'app' })}</p>
+      <p className="text-text-primary title-md-semi-bold">{t('newApp.noTemplateFound', { ns: 'app' })}</p>
+      <p className="text-text-tertiary system-sm-regular">{t('newApp.noTemplateFoundTip', { ns: 'app' })}</p>
     </div>
   )
 }

web/app/components/app/create-app-modal/index.spec.tsx

@@ -1,13 +1,13 @@
 import type { App } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { useRouter } from 'next/navigation'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { trackEvent } from '@/app/components/base/amplitude'
-
 import { ToastContext } from '@/app/components/base/toast/context'
+
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter } from '@/next/navigation'
 import { createApp } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
@@ -23,7 +23,7 @@ vi.mock('ahooks', () => ({
   useKeyPress: vi.fn(),
   useHover: () => false,
 }))
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(),
 }))
 vi.mock('@/app/components/base/amplitude', () => ({

web/app/components/app/create-app-modal/index.tsx

@@ -4,8 +4,6 @@ import type { AppIconSelection } from '../../base/app-icon-picker'
 import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon/react'
 
 import { useDebounceFn, useKeyPress } from 'ahooks'
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -23,6 +21,8 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import useTheme from '@/hooks/use-theme'
+import Image from '@/next/image'
+import { useRouter } from '@/next/navigation'
 import { createApp } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
@@ -117,10 +117,10 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
           <div className="px-10">
             <div className="h-6 w-full 2xl:h-[139px]" />
             <div className="pb-6 pt-1">
-              <span className="title-2xl-semi-bold text-text-primary">{t('newApp.startFromBlank', { ns: 'app' })}</span>
+              <span className="text-text-primary title-2xl-semi-bold">{t('newApp.startFromBlank', { ns: 'app' })}</span>
             </div>
             <div className="mb-2 leading-6">
-              <span className="system-sm-semibold text-text-secondary">{t('newApp.chooseAppType', { ns: 'app' })}</span>
+              <span className="text-text-secondary system-sm-semibold">{t('newApp.chooseAppType', { ns: 'app' })}</span>
             </div>
             <div className="flex w-[660px] flex-col gap-4">
               <div>
@@ -160,7 +160,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     className="flex cursor-pointer items-center border-0 bg-transparent p-0"
                     onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                   >
-                    <span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
+                    <span className="text-text-tertiary system-2xs-medium-uppercase">{t('newApp.forBeginners', { ns: 'app' })}</span>
                     <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} />
                   </button>
                 </div>
@@ -212,7 +212,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <div className="flex items-center space-x-3">
                 <div className="flex-1">
                   <div className="mb-1 flex h-6 items-center">
-                    <label className="system-sm-semibold text-text-secondary">{t('newApp.captionName', { ns: 'app' })}</label>
+                    <label className="text-text-secondary system-sm-semibold">{t('newApp.captionName', { ns: 'app' })}</label>
                   </div>
                   <Input
                     value={name}
@@ -243,8 +243,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               </div>
               <div>
                 <div className="mb-1 flex h-6 items-center">
-                  <label className="system-sm-semibold text-text-secondary">{t('newApp.captionDescription', { ns: 'app' })}</label>
-                  <span className="system-xs-regular ml-1 text-text-tertiary">
+                  <label className="text-text-secondary system-sm-semibold">{t('newApp.captionDescription', { ns: 'app' })}</label>
+                  <span className="ml-1 text-text-tertiary system-xs-regular">
                     (
                     {t('newApp.optional', { ns: 'app' })}
                     )
@@ -260,7 +260,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
             </div>
             {isAppsFull && <AppsFull className="mt-4" loc="app-create" />}
             <div className="flex items-center justify-between pb-10 pt-5">
-              <div className="system-xs-regular flex cursor-pointer items-center gap-1 text-text-tertiary" onClick={onCreateFromTemplate}>
+              <div className="flex cursor-pointer items-center gap-1 text-text-tertiary system-xs-regular" onClick={onCreateFromTemplate}>
                 <span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
                 <div className="p-[1px]">
                   <RiArrowRightLine className="h-3.5 w-3.5" />
@@ -334,8 +334,8 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP
       onClick={onClick}
     >
       {icon}
-      <div className="system-sm-semibold mb-0.5 mt-2 text-text-secondary">{title}</div>
-      <div className="system-xs-regular line-clamp-2 text-text-tertiary" title={description}>{description}</div>
+      <div className="mb-0.5 mt-2 text-text-secondary system-sm-semibold">{title}</div>
+      <div className="line-clamp-2 text-text-tertiary system-xs-regular" title={description}>{description}</div>
     </div>
   )
 }
@@ -367,8 +367,8 @@ function AppPreview({ mode }: { mode: AppModeEnum }) {
   const previewInfo = modeToPreviewInfoMap[mode]
   return (
     <div className="px-8 py-4">
-      <h4 className="system-sm-semibold-uppercase text-text-secondary">{previewInfo.title}</h4>
-      <div className="system-xs-regular mt-1 min-h-8 max-w-96 text-text-tertiary">
+      <h4 className="text-text-secondary system-sm-semibold-uppercase">{previewInfo.title}</h4>
+      <div className="mt-1 min-h-8 max-w-96 text-text-tertiary system-xs-regular">
         <span>{previewInfo.description}</span>
       </div>
     </div>

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -4,7 +4,6 @@ import type { MouseEventHandler } from 'react'
 import { RiCloseLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
-import { useRouter } from 'next/navigation'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -22,6 +21,7 @@ import {
   DSLImportMode,
   DSLImportStatus,
 } from '@/models/app'
+import { useRouter } from '@/next/navigation'
 import {
   importDSL,
   importDSLConfirm,
@@ -232,7 +232,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         isShow={show}
         onClose={noop}
       >
-        <div className="title-2xl-semi-bold flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary">
+        <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary title-2xl-semi-bold">
           {t('importFromDSL', { ns: 'app' })}
           <div
             className="flex h-8 w-8 cursor-pointer items-center"
@@ -241,7 +241,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             <RiCloseLine className="h-5 w-5 text-text-tertiary" />
           </div>
         </div>
-        <div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
+        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
           {
             tabs.map(tab => (
               <div
@@ -275,7 +275,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           {
             currentTab === CreateFromDSLModalTab.FROM_URL && (
               <div>
-                <div className="system-md-semibold mb-1 text-text-secondary">DSL URL</div>
+                <div className="mb-1 text-text-secondary system-md-semibold">DSL URL</div>
                 <Input
                   placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                   value={dslUrlValue}
@@ -309,8 +309,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         className="w-[480px]"
       >
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="system-md-regular flex grow flex-col text-text-secondary">
+          <div className="text-text-primary title-2xl-semi-bold">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="flex grow flex-col text-text-secondary system-md-regular">
             <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
             <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
             <br />

web/app/components/app/log-annotation/index.spec.tsx

@@ -7,7 +7,7 @@ import { AppModeEnum } from '@/types/app'
 import LogAnnotation from './index'
 
 const mockRouterPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
   }),

web/app/components/app/log-annotation/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,6 +10,7 @@ import WorkflowLog from '@/app/components/app/workflow-log'
 import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
 import Loading from '@/app/components/base/loading'
 import TabSlider from '@/app/components/base/tab-slider-plain'
+import { useRouter } from '@/next/navigation'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
 

web/app/components/app/log/empty-element.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { FC, SVGProps } from 'react'
 import type { App } from '@/types/app'
-import Link from 'next/link'
 import * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import { AppModeEnum } from '@/types/app'
 import { getRedirectionPath } from '@/utils/app-redirection'
 import { basePath } from '@/utils/var'
@@ -28,11 +28,11 @@ const EmptyElement: FC<{ appDetail: App }> = ({ appDetail }) => {
   return (
     <div className="flex h-full items-center justify-center">
       <div className="box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4">
-        <span className="system-md-semibold text-text-secondary">
+        <span className="text-text-secondary system-md-semibold">
           {t('table.empty.element.title', { ns: 'appLog' })}
           <ThreeDotsIcon className="relative -left-1.5 -top-3 inline text-text-secondary" />
         </span>
-        <div className="system-sm-regular mt-2 text-text-tertiary">
+        <div className="mt-2 text-text-tertiary system-sm-regular">
           <Trans
             i18nKey="table.empty.element.content"
             ns="appLog"

web/app/components/app/log/index.tsx

@@ -4,13 +4,13 @@ import type { App } from '@/types/app'
 import { useDebounce } from 'ahooks'
 import dayjs from 'dayjs'
 import { omit } from 'es-toolkit/object'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import Pagination from '@/app/components/base/pagination'
 import { APP_PAGE_LIMIT } from '@/config'
+import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
 import { useChatConversations, useCompletionConversations } from '@/service/use-log'
 import { AppModeEnum } from '@/types/app'
 import EmptyElement from './empty-element'
@@ -118,7 +118,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
 
   return (
     <div className="flex h-full grow flex-col">
-      <p className="system-sm-regular shrink-0 text-text-tertiary">{t('description', { ns: 'appLog' })}</p>
+      <p className="shrink-0 text-text-tertiary system-sm-regular">{t('description', { ns: 'appLog' })}</p>
       <div className="flex max-h-[calc(100%-16px)] flex-1 grow flex-col py-4">
         <Filter isChatMode={isChatMode} appId={appDetail.id} queryParams={queryParams} setQueryParams={handleQueryParamsChange} />
         {total === undefined

web/app/components/app/log/list.tsx

@@ -14,7 +14,6 @@ import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
 import { get } from 'es-toolkit/compat'
 import { noop } from 'es-toolkit/function'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -38,6 +37,7 @@ import { WorkflowContextProvider } from '@/app/components/workflow/context'
 import { useAppContext } from '@/context/app-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
+import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
 import { fetchChatMessages, updateLogMessageAnnotations, updateLogMessageFeedbacks } from '@/service/log'
 import { AppSourceType } from '@/service/share'
 import { useChatConversationDetail, useCompletionConversationDetail } from '@/service/use-log'
@@ -96,7 +96,7 @@ const statusTdRender = (statusCount: StatusCount) => {
 
   if (statusCount.paused > 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="yellow" />
         <span className="text-util-colors-warning-warning-600">Pending</span>
       </div>
@@ -104,7 +104,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else if (statusCount.partial_success + statusCount.failed === 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="green" />
         <span className="text-util-colors-green-green-600">Success</span>
       </div>
@@ -112,7 +112,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else if (statusCount.failed === 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="green" />
         <span className="text-util-colors-green-green-600">Partial Success</span>
       </div>
@@ -120,7 +120,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="red" />
         <span className="text-util-colors-red-red-600">
           {statusCount.failed}
@@ -562,9 +562,9 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
       {/* Panel Header */}
       <div className="flex shrink-0 items-center gap-2 rounded-t-xl bg-components-panel-bg pb-2 pl-4 pr-3 pt-3">
         <div className="shrink-0">
-          <div className="system-xs-semibold-uppercase mb-0.5 text-text-primary">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
+          <div className="mb-0.5 text-text-primary system-xs-semibold-uppercase">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
           {isChatMode && (
-            <div className="system-2xs-regular-uppercase flex items-center text-text-secondary">
+            <div className="flex items-center text-text-secondary system-2xs-regular-uppercase">
               <Tooltip
                 popupContent={detail.id}
               >
@@ -574,7 +574,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
             </div>
           )}
           {!isChatMode && (
-            <div className="system-2xs-regular-uppercase text-text-secondary">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
+            <div className="text-text-secondary system-2xs-regular-uppercase">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
           )}
         </div>
         <div className="flex grow flex-wrap items-center justify-end gap-y-1">
@@ -600,7 +600,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
           ? (
               <div className="px-6 py-4">
                 <div className="flex h-[18px] items-center space-x-3">
-                  <div className="system-xs-semibold-uppercase text-text-tertiary">{t('table.header.output', { ns: 'appLog' })}</div>
+                  <div className="text-text-tertiary system-xs-semibold-uppercase">{t('table.header.output', { ns: 'appLog' })}</div>
                   <div
                     className="h-px grow"
                     style={{
@@ -692,7 +692,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
               </div>
               {hasMore && (
                 <div className="py-3 text-center">
-                  <div className="system-xs-regular text-text-tertiary">
+                  <div className="text-text-tertiary system-xs-regular">
                     {t('detail.loading', { ns: 'appLog' })}
                     ...
                   </div>
@@ -950,7 +950,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
         )}
         popupClassName={(isHighlight && !isChatMode) ? '' : '!hidden'}
       >
-        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'system-sm-regular overflow-hidden text-ellipsis whitespace-nowrap')}>
+        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular')}>
           {value || '-'}
         </div>
       </Tooltip>
@@ -963,7 +963,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
   return (
     <div className="relative mt-2 grow overflow-x-auto">
       <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
-        <thead className="system-xs-medium-uppercase text-text-tertiary">
+        <thead className="text-text-tertiary system-xs-medium-uppercase">
           <tr>
             <td className="w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1"></td>
             <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{isChatMode ? t('table.header.summary', { ns: 'appLog' }) : t('table.header.input', { ns: 'appLog' })}</td>
@@ -976,7 +976,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
             <td className="whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3">{t('table.header.time', { ns: 'appLog' })}</td>
           </tr>
         </thead>
-        <tbody className="system-sm-regular text-text-secondary">
+        <tbody className="text-text-secondary system-sm-regular">
           {logs.data.map((log: any) => {
             const endUser = log.from_end_user_session_id || log.from_account_name
             const leftValue = get(log, isChatMode ? 'name' : 'message.inputs.query') || (!isChatMode ? (get(log, 'message.query') || get(log, 'message.inputs.default_input')) : '') || ''

web/app/components/app/overview/app-card.tsx

@@ -14,7 +14,6 @@ import {
   RiVerifiedBadgeLine,
   RiWindowLine,
 } from '@remixicon/react'
-import { usePathname, useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -34,6 +33,7 @@ import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useDocLink } from '@/context/i18n'
 import { AccessMode } from '@/models/access-control'
+import { usePathname, useRouter } from '@/next/navigation'
 import { useAppWhiteListSubjects } from '@/service/access-control'
 import { fetchAppDetailDirect } from '@/service/apps'
 import { useAppWorkflow } from '@/service/use-workflow'
@@ -266,7 +266,7 @@ function AppCard({
           </div>
           {!isMinimalState && (
             <div className="flex flex-col items-start justify-center self-stretch">
-              <div className="system-xs-medium pb-1 text-text-tertiary">
+              <div className="pb-1 text-text-tertiary system-xs-medium">
                 {isApp
                   ? t('overview.appInfo.accessibleAddress', { ns: 'appOverview' })
                   : t('overview.apiInfo.accessibleAddress', { ns: 'appOverview' })}
@@ -319,9 +319,9 @@ function AppCard({
           )}
           {!isMinimalState && isApp && systemFeatures.webapp_auth.enabled && appDetail && (
             <div className="flex flex-col items-start justify-center self-stretch">
-              <div className="system-xs-medium pb-1 text-text-tertiary">{t('publishApp.title', { ns: 'app' })}</div>
+              <div className="pb-1 text-text-tertiary system-xs-medium">{t('publishApp.title', { ns: 'app' })}</div>
               <div
-                className="flex h-9 w-full cursor-pointer items-center gap-x-0.5  rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2"
+                className="flex h-9 w-full cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2"
                 onClick={handleClickAccessControl}
               >
                 <div className="flex grow items-center gap-x-1.5 pr-1">
@@ -329,32 +329,32 @@ function AppCard({
                     && (
                       <>
                         <RiBuildingLine className="h-4 w-4 shrink-0 text-text-secondary" />
-                        <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.organization', { ns: 'app' })}</p>
+                        <p className="text-text-secondary system-sm-medium">{t('accessControlDialog.accessItems.organization', { ns: 'app' })}</p>
                       </>
                     )}
                   {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS
                     && (
                       <>
                         <RiLockLine className="h-4 w-4 shrink-0 text-text-secondary" />
-                        <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
+                        <p className="text-text-secondary system-sm-medium">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
                       </>
                     )}
                   {appDetail?.access_mode === AccessMode.PUBLIC
                     && (
                       <>
                         <RiGlobalLine className="h-4 w-4 shrink-0 text-text-secondary" />
-                        <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.anyone', { ns: 'app' })}</p>
+                        <p className="text-text-secondary system-sm-medium">{t('accessControlDialog.accessItems.anyone', { ns: 'app' })}</p>
                       </>
                     )}
                   {appDetail?.access_mode === AccessMode.EXTERNAL_MEMBERS
                     && (
                       <>
                         <RiVerifiedBadgeLine className="h-4 w-4 shrink-0 text-text-secondary" />
-                        <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.external', { ns: 'app' })}</p>
+                        <p className="text-text-secondary system-sm-medium">{t('accessControlDialog.accessItems.external', { ns: 'app' })}</p>
                       </>
                     )}
                 </div>
-                {!isAppAccessSet && <p className="system-xs-regular shrink-0 text-text-tertiary">{t('publishApp.notSet', { ns: 'app' })}</p>}
+                {!isAppAccessSet && <p className="shrink-0 text-text-tertiary system-xs-regular">{t('publishApp.notSet', { ns: 'app' })}</p>}
                 <div className="flex h-4 w-4 shrink-0 items-center justify-center">
                   <RiArrowRightSLine className="h-4 w-4 text-text-quaternary" />
                 </div>
@@ -389,7 +389,7 @@ function AppCard({
                   >
                     <div className="flex items-center justify-center gap-[1px]">
                       <op.opIcon className="h-3.5 w-3.5" />
-                      <div className={`${(runningStatus || !disabled) ? 'text-text-tertiary' : 'text-components-button-ghost-text-disabled'} system-xs-medium px-[3px]`}>{op.opName}</div>
+                      <div className={`${(runningStatus || !disabled) ? 'text-text-tertiary' : 'text-components-button-ghost-text-disabled'} px-[3px] system-xs-medium`}>{op.opName}</div>
                     </div>
                   </Tooltip>
                 </Button>

web/app/components/app/overview/settings/index.tsx

@@ -4,7 +4,6 @@ import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppIconType, AppSSO, Language } from '@/types/app'
 import { RiArrowRightSLine, RiCloseLine } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -26,6 +25,7 @@ import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/con
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { languages } from '@/i18n-config/language'
+import Link from '@/next/link'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
 

web/app/components/app/overview/trigger-card.tsx

@@ -3,7 +3,6 @@ import type { AppDetailResponse } from '@/models/app'
 import type { AppTrigger } from '@/service/use-tools'
 import type { AppSSO } from '@/types/app'
 import type { I18nKeysByPrefix } from '@/types/i18n'
-import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
@@ -13,6 +12,7 @@ import { useTriggerStatusStore } from '@/app/components/workflow/store/trigger-s
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useAppContext } from '@/context/app-context'
 import { useDocLink } from '@/context/i18n'
+import Link from '@/next/link'
 import {
 
   useAppTriggers,
@@ -161,7 +161,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
                 <TriggerAll className="h-4 w-4 text-text-primary-on-surface" />
               </div>
               <div className="group w-full">
-                <div className="system-md-semibold min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary group-hover:text-text-primary">
+                <div className="min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary system-md-semibold group-hover:text-text-primary">
                   {triggerCount > 0
                     ? t('overview.triggerInfo.triggersAdded', { ns: 'appOverview', count: triggerCount })
                     : t('overview.triggerInfo.noTriggerAdded', { ns: 'appOverview' })}
@@ -179,12 +179,12 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
                   <div className="shrink-0">
                     {getTriggerIcon(trigger, triggerPlugins || [])}
                   </div>
-                  <div className="system-sm-medium min-w-0 flex-1 truncate text-text-secondary">
+                  <div className="min-w-0 flex-1 truncate text-text-secondary system-sm-medium">
                     {trigger.title}
                   </div>
                 </div>
                 <div className="flex shrink-0 items-center">
-                  <div className={`${trigger.status === 'enabled' ? 'text-text-success' : 'text-text-warning'} system-xs-semibold-uppercase whitespace-nowrap`}>
+                  <div className={`${trigger.status === 'enabled' ? 'text-text-success' : 'text-text-warning'} whitespace-nowrap system-xs-semibold-uppercase`}>
                     {trigger.status === 'enabled'
                       ? t('overview.status.running', { ns: 'appOverview' })
                       : t('overview.status.disable', { ns: 'appOverview' })}
@@ -204,7 +204,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
 
         {triggerCount === 0 && (
           <div className="p-3">
-            <div className="system-xs-regular leading-4 text-text-tertiary">
+            <div className="leading-4 text-text-tertiary system-xs-regular">
               {t('overview.triggerInfo.triggerStatusDescription', { ns: 'appOverview' })}
               {' '}
               <Link

web/app/components/app/switch-app-modal/index.spec.tsx

@@ -11,7 +11,7 @@ import SwitchAppModal from './index'
 
 const mockPush = vi.fn()
 const mockReplace = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
     replace: mockReplace,

web/app/components/app/switch-app-modal/index.tsx

@@ -3,7 +3,6 @@
 import type { App } from '@/types/app'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -20,6 +19,7 @@ import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter } from '@/next/navigation'
 import { deleteApp, switchApp } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'

web/app/components/app/text-generate/item/index.tsx

@@ -16,7 +16,6 @@ import {
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import copy from 'copy-to-clipboard'
-import { useParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -30,6 +29,7 @@ import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
 import NewAudioButton from '@/app/components/base/new-audio-button'
 import Toast from '@/app/components/base/toast'
+import { useParams } from '@/next/navigation'
 import { fetchTextGenerationMessage } from '@/service/debug'
 import { AppSourceType, fetchMoreLikeThis, submitHumanInputForm, updateFeedback } from '@/service/share'
 import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
@@ -244,7 +244,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                   )}
                   >
                     {taskId && (
-                      <div className={cn('system-2xs-medium-uppercase mb-2 flex items-center text-text-accent-secondary', isError && 'text-text-destructive')}>
+                      <div className={cn('mb-2 flex items-center text-text-accent-secondary system-2xs-medium-uppercase', isError && 'text-text-destructive')}>
                         <RiPlayList2Line className="mr-1 h-3 w-3" />
                         <span>{t('generation.execution', { ns: 'share' })}</span>
                         <span className="px-1">·</span>
@@ -264,7 +264,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                       <div className="flex items-center space-x-6 px-1">
                         <div
                           className={cn(
-                            'system-sm-semibold-uppercase cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
+                            'cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary system-sm-semibold-uppercase',
                             currentTab === 'RESULT' && 'border-util-colors-blue-brand-blue-brand-600 text-text-primary',
                           )}
                           onClick={() => switchTab('RESULT')}
@@ -273,7 +273,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                         </div>
                         <div
                           className={cn(
-                            'system-sm-semibold-uppercase cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
+                            'cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary system-sm-semibold-uppercase',
                             currentTab === 'DETAIL' && 'border-util-colors-blue-brand-blue-brand-600 text-text-primary',
                           )}
                           onClick={() => switchTab('DETAIL')}
@@ -306,7 +306,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                 </>
               )}
               {!workflowProcessData && taskId && (
-                <div className={cn('system-2xs-medium-uppercase sticky left-0 top-0 flex w-full items-center rounded-t-2xl bg-components-actionbar-bg p-4 pb-3 text-text-accent-secondary', isError && 'text-text-destructive')}>
+                <div className={cn('sticky left-0 top-0 flex w-full items-center rounded-t-2xl bg-components-actionbar-bg p-4 pb-3 text-text-accent-secondary system-2xs-medium-uppercase', isError && 'text-text-destructive')}>
                   <RiPlayList2Line className="mr-1 h-3 w-3" />
                   <span>{t('generation.execution', { ns: 'share' })}</span>
                   <span className="px-1">·</span>
@@ -314,7 +314,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                 </div>
               )}
               {isError && (
-                <div className="body-lg-regular p-4 pt-0 text-text-quaternary">{t('generation.batchFailed.outputPlaceholder', { ns: 'share' })}</div>
+                <div className="p-4 pt-0 text-text-quaternary body-lg-regular">{t('generation.batchFailed.outputPlaceholder', { ns: 'share' })}</div>
               )}
               {!workflowProcessData && !isError && (typeof content === 'string') && (
                 <div className={cn('p-4', taskId && 'pt-0')}>
@@ -324,7 +324,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
             </div>
             {/* meta data */}
             <div className={cn(
-              'system-xs-regular relative mt-1 h-4 px-4 text-text-quaternary',
+              'relative mt-1 h-4 px-4 text-text-quaternary system-xs-regular',
               isMobile && ((childMessageId || isQuerying) && depth < 3) && 'pl-10',
             )}
             >

web/app/components/app/text-generate/saved-items/index.spec.tsx

@@ -10,7 +10,7 @@ import SavedItems from './index'
 vi.mock('copy-to-clipboard', () => ({
   default: vi.fn(),
 }))
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({}),
   usePathname: () => '/',
 }))

web/app/components/app/workflow-log/detail.spec.tsx

@@ -19,7 +19,7 @@ import DetailPanel from './detail'
 // ============================================================================
 
 const mockRouterPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
   }),

web/app/components/app/workflow-log/detail.tsx

@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import { RiCloseLine, RiPlayLargeLine } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/app/store'
 import TooltipPlus from '@/app/components/base/tooltip'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
 import Run from '@/app/components/workflow/run'
+import { useRouter } from '@/next/navigation'
 
 type ILogDetail = {
   runID: string
@@ -31,7 +31,7 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </span>
       <div className="flex items-center bg-components-panel-bg">
-        <h1 className="system-xl-semibold shrink-0 px-4 py-1 text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
+        <h1 className="shrink-0 px-4 py-1 text-text-primary system-xl-semibold">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
         {canReplay && (
           <TooltipPlus
             popupContent={t('runDetail.testWithParams', { ns: 'appLog' })}

web/app/components/app/workflow-log/index.spec.tsx

@@ -47,13 +47,13 @@ vi.mock('ahooks', () => ({
   },
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: vi.fn(),
   }),
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href }: { children: React.ReactNode, href: string }) => <a href={href}>{children}</a>,
 }))
 

web/app/components/app/workflow-log/list.spec.tsx

@@ -23,7 +23,7 @@ import WorkflowAppLogList from './list'
 // ============================================================================
 
 const mockRouterPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
   }),

web/app/components/apps/__tests__/app-card.spec.tsx

@@ -11,7 +11,7 @@ import AppCard from '../app-card'
 
 // Mock next/navigation
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
@@ -111,7 +111,7 @@ vi.mock('@/utils/time', () => ({
 }))
 
 // Mock dynamic imports
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (importFn: () => Promise<unknown>) => {
     const fnString = importFn.toString()
 

web/app/components/apps/__tests__/list.spec.tsx

@@ -8,7 +8,7 @@ import List from '../list'
 
 const mockReplace = vi.fn()
 const mockRouter = { replace: mockReplace }
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => mockRouter,
   useSearchParams: () => new URLSearchParams(''),
 }))
@@ -124,7 +124,7 @@ vi.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
 }))
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (importFn: () => Promise<unknown>) => {
     const fnString = importFn.toString()
 

web/app/components/apps/__tests__/new-app-card.spec.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import CreateAppCard from '../new-app-card'
 
 const mockReplace = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
   }),
@@ -18,7 +18,7 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (importFn: () => Promise<{ default: React.ComponentType }>) => {
     const fnString = importFn.toString()
 

web/app/components/apps/app-card.tsx

@@ -7,8 +7,6 @@ import type { CreateAppModalProps } from '@/app/components/explore/create-app-mo
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { App } from '@/types/app'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
-import dynamic from 'next/dynamic'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -36,6 +34,8 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { AccessMode } from '@/models/access-control'
+import dynamic from '@/next/dynamic'
+import { useRouter } from '@/next/navigation'
 import { useGetUserCanAccessApp } from '@/service/access-control'
 import { copyApp, exportAppConfig, updateAppInfo } from '@/service/apps'
 import { fetchInstalledAppList } from '@/service/explore'

web/app/components/apps/footer.tsx

@@ -1,7 +1,7 @@
 import { RiDiscordFill, RiDiscussLine, RiGithubFill } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 
 type CustomLinkProps = {
   href: string
@@ -30,7 +30,7 @@ const Footer = () => {
   return (
     <footer className="relative shrink-0 grow-0 px-12 py-2">
       <h3 className="text-gradient text-xl font-semibold leading-tight">{t('join', { ns: 'app' })}</h3>
-      <p className="system-sm-regular mt-1 text-text-tertiary">{t('communityIntro', { ns: 'app' })}</p>
+      <p className="mt-1 text-text-tertiary system-sm-regular">{t('communityIntro', { ns: 'app' })}</p>
       <div className="mt-3 flex items-center gap-2">
         <CustomLink href="https://github.com/langgenius/dify">
           <RiGithubFill className="h-5 w-5 text-text-tertiary" />

web/app/components/apps/list.tsx

@@ -2,7 +2,6 @@
 
 import type { FC } from 'react'
 import { useDebounceFn } from 'ahooks'
-import dynamic from 'next/dynamic'
 import { parseAsStringLiteral, useQueryState } from 'nuqs'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -15,6 +14,7 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { CheckModal } from '@/hooks/use-pay'
+import dynamic from '@/next/dynamic'
 import { useInfiniteAppList } from '@/service/use-apps'
 import { AppModeEnum, AppModes } from '@/types/app'
 import { cn } from '@/utils/classnames'

web/app/components/apps/new-app-card.tsx

@@ -1,10 +1,5 @@
 'use client'
 
-import dynamic from 'next/dynamic'
-import {
-  useRouter,
-  useSearchParams,
-} from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,6 +8,11 @@ import { CreateFromDSLModalTab } from '@/app/components/app/create-from-dsl-moda
 import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 import AppListContext from '@/context/app-list-context'
 import { useProviderContext } from '@/context/provider-context'
+import dynamic from '@/next/dynamic'
+import {
+  useRouter,
+  useSearchParams,
+} from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 
 const CreateAppModal = dynamic(() => import('@/app/components/app/create-app-modal'), {

web/app/components/base/audio-btn/__tests__/index.spec.tsx

@@ -1,14 +1,14 @@
 import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import i18next from 'i18next'
-import { useParams, usePathname } from 'next/navigation'
+import { useParams, usePathname } from '@/next/navigation'
 import AudioBtn from '../index'
 
 const mockPlayAudio = vi.fn()
 const mockPauseAudio = vi.fn()
 const mockGetAudioPlayer = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(),
   usePathname: vi.fn(),
 }))

web/app/components/base/audio-btn/index.tsx

@@ -1,10 +1,10 @@
 'use client'
 import { t } from 'i18next'
-import { useParams, usePathname } from 'next/navigation'
 import { useState } from 'react'
 import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
 import Loading from '@/app/components/base/loading'
 import Tooltip from '@/app/components/base/tooltip'
+import { useParams, usePathname } from '@/next/navigation'
 import s from './style.module.css'
 
 type AudioBtnProps = {

web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx

@@ -25,7 +25,7 @@ vi.mock('../context', () => ({
   useChatWithHistoryContext: vi.fn(),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(() => ({
     push: vi.fn(),
     replace: vi.fn(),

web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx

@@ -22,7 +22,7 @@ vi.mock('../context', () => ({
   ChatWithHistoryContext: { Provider: ({ children }: { children: React.ReactNode }) => <div>{children}</div> },
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(() => ({
     push: vi.fn(),
     replace: vi.fn(),

web/app/components/base/chat/chat-with-history/__tests__/index.spec.tsx

@@ -26,7 +26,7 @@ vi.mock('@/hooks/use-document-title', () => ({
   default: vi.fn(),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(() => ({
     push: vi.fn(),
     replace: vi.fn(),

web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx

@@ -87,7 +87,7 @@ vi.mock('@/context/global-public-context', () => ({
 }))
 
 // Mock next/navigation
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
 }))

web/app/components/base/chat/chat/__tests__/content-switch.spec.tsx

@@ -38,7 +38,7 @@ describe('ContentSwitch', () => {
     expect(switchSibling).toHaveBeenCalledWith('prev')
   })
 
-  it('calls switchSibling with "next" when right button is clicked', async () => {
+  it('calls switchSibling with "@/next" when right button is clicked', async () => {
     const user = userEvent.setup()
     const switchSibling = vi.fn()
     render(<ContentSwitch {...defaultProps} switchSibling={switchSibling} />)
@@ -46,7 +46,7 @@ describe('ContentSwitch', () => {
     const nextButton = screen.getByRole('button', { name: /next/i })
     await user.click(nextButton)
 
-    expect(switchSibling).toHaveBeenCalledWith('next')
+    expect(switchSibling).toHaveBeenCalledWith('@/next')
   })
 
   it('applies disabled styles and prevents clicks when prevDisabled is true', async () => {

web/app/components/base/chat/chat/__tests__/hooks.spec.tsx

@@ -1,8 +1,8 @@
 import type { ChatConfig, ChatItemInTree } from '../../types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import { act, renderHook } from '@testing-library/react'
-import { useParams, usePathname } from 'next/navigation'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { useParams, usePathname } from '@/next/navigation'
 import { sseGet, ssePost } from '@/service/base'
 import { useChat } from '../hooks'
 
@@ -28,7 +28,7 @@ vi.mock('@/hooks/use-timestamp', () => ({
   default: () => ({ formatTime: vi.fn().mockReturnValue('10:00 AM') }),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(() => ({})),
   usePathname: vi.fn(() => ''),
   useRouter: vi.fn(() => ({})),

web/app/components/base/chat/chat/__tests__/question.spec.tsx

@@ -18,7 +18,7 @@ vi.mock('../content-switch', () => ({
   default: ({ count, currentIndex, switchSibling, prevDisabled, nextDisabled }: {
     count?: number
     currentIndex?: number
-    switchSibling: (direction: 'prev' | 'next') => void
+    switchSibling: (direction: 'prev' | '@/next') => void
     prevDisabled: boolean
     nextDisabled: boolean
   }) => {
@@ -38,7 +38,7 @@ vi.mock('../content-switch', () => ({
         <button
           type="button"
           aria-label="Next"
-          onClick={() => switchSibling('next')}
+          onClick={() => switchSibling('@/next')}
           disabled={nextDisabled}
         >
           Next
@@ -915,7 +915,7 @@ describe('Question component', () => {
 
   it('should handle missing switchSibling prop', async () => {
     const user = userEvent.setup()
-    const item = makeItem({ prevSibling: 'prev', nextSibling: 'next', siblingIndex: 1, siblingCount: 3 })
+    const item = makeItem({ prevSibling: 'prev', nextSibling: '@/next', siblingIndex: 1, siblingCount: 3 })
     renderWithProvider(item, vi.fn() as unknown as OnRegenerate, { switchSibling: undefined })
 
     const prevBtn = screen.getByRole('button', { name: /previous/i })

web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx

@@ -111,7 +111,7 @@ vi.mock('@/app/components/base/chat/chat/log', () => ({
   default: () => <button data-testid="log-btn"><div className="i-ri-file-list-3-line" /></button>,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(() => ({ appId: 'test-app' })),
   usePathname: vi.fn(() => '/apps/test-app'),
 }))

web/app/components/base/chat/chat/answer/index.tsx

@@ -127,7 +127,7 @@ const Answer: FC<AnswerProps> = ({
     }
   }, [])
 
-  const handleSwitchSibling = useCallback((direction: 'prev' | 'next') => {
+  const handleSwitchSibling = useCallback((direction: 'prev' | '@/next') => {
     if (direction === 'prev') {
       if (item.prevSibling)
         switchSibling?.(item.prevSibling)