From cfb1e0217f88b319aec484cac1b3cebad3fa187d Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Thu, 7 May 2026 20:08:54 +0800
Subject: [PATCH] tweaks

---
 web/features/deployments/detail/index.tsx     |   6 +-
 .../deployments/detail/overview-tab.tsx       |  48 +++---
 .../deployments/list/instance-card.tsx        | 154 +++++++++---------
 3 files changed, 102 insertions(+), 106 deletions(-)

diff --git a/web/features/deployments/detail/index.tsx b/web/features/deployments/detail/index.tsx
index 805d87124e..720c23b1e5 100644
--- a/web/features/deployments/detail/index.tsx
+++ b/web/features/deployments/detail/index.tsx
@@ -7,7 +7,8 @@ import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { getAppModeLabel } from '@/app/components/app-sidebar/app-info/app-mode-labels'
 import useDocumentTitle from '@/hooks/use-document-title'
-import { useRouter, useSelectedLayoutSegment } from '@/next/navigation'
+import Link from '@/next/link'
+import { useSelectedLayoutSegment } from '@/next/navigation'
 import { consoleQuery } from '@/service/client'
 import { DeployDrawer } from '../components/deploy-drawer'
 import { RollbackModal } from '../components/rollback-modal'
@@ -20,7 +21,6 @@ export function InstanceDetail({ instanceId, children }: {
 }) {
   const { t } = useTranslation('deployments')
   const { t: tCommon } = useTranslation()
-  const router = useRouter()
   const selectedSegment = useSelectedLayoutSegment()
   const selectedTab = selectedSegment ?? undefined
   const activeTab: InstanceDetailTabKey = isInstanceDetailTabKey(selectedTab) ? selectedTab : 'overview'
@@ -47,7 +47,7 @@ export function InstanceDetail({ instanceId, children }: {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-3 bg-background-body">
         <div className="title-xl-semi-bold text-text-primary">{t('detail.notFound')}</div>
-        <Button variant="secondary" onClick={() => router.push('/deployments')}>
+        <Button nativeButton={false} variant="secondary" render={<Link href="/deployments" />}>
           <span aria-hidden className="i-ri-arrow-left-line h-4 w-4" />
           {t('detail.backToInstances')}
         </Button>
diff --git a/web/features/deployments/detail/overview-tab.tsx b/web/features/deployments/detail/overview-tab.tsx
index 8e69bdc1ae..474aafd5d6 100644
--- a/web/features/deployments/detail/overview-tab.tsx
+++ b/web/features/deployments/detail/overview-tab.tsx
@@ -5,7 +5,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { getAppModeLabel } from '@/app/components/app-sidebar/app-info/app-mode-labels'
-import { useRouter } from '@/next/navigation'
+import Link from '@/next/link'
 import { consoleQuery } from '@/service/client'
 import { StatusBadge } from '../components/status-badge'
 import { DEPLOYMENT_PAGE_SIZE } from '../data'
@@ -17,6 +17,10 @@ import {
 
 type SwitchableTab = 'deploy' | 'versions' | 'access' | 'settings'
 
+function tabHref(appId: string, tab: SwitchableTab): string {
+  return `/deployments/${appId}/${tab}`
+}
+
 function Section({ title, action, children }: {
   title: string
   action?: ReactNode
@@ -79,7 +83,7 @@ function AccessOverviewRow({ label, enabled, hint, meta }: AccessOverviewRowProp
   )
 }
 
-function overviewDeploymentStatus(status?: string) {
+function overviewDeploymentStatus(status?: string): 'deploying' | 'deploy_failed' | 'ready' {
   const normalized = status?.toLowerCase() ?? ''
   if (normalized.includes('deploying') || normalized.includes('pending'))
     return 'deploying'
@@ -93,7 +97,6 @@ export function OverviewTab({ instanceId }: {
 }) {
   const { t } = useTranslation('deployments')
   const { t: tCommon } = useTranslation()
-  const router = useRouter()
   const input = { params: { appInstanceId: instanceId } }
   const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
     input,
@@ -121,10 +124,6 @@ export function OverviewTab({ instanceId }: {
 
   const appId = overviewApp.id
   const appName = overviewApp.name ?? appId
-  const switchTab = (tab: SwitchableTab) => {
-    router.push(`/deployments/${appId}/${tab}`)
-  }
-
   const appModeLabel = getAppModeLabel(overviewApp.mode ?? 'workflow', tCommon)
   const webappAccessUrl = webappUrl(overview?.access?.webappUrl)
   const cliUrl = overview?.access?.cliUrl
@@ -145,7 +144,7 @@ export function OverviewTab({ instanceId }: {
       <Section
         title={t('overview.deploymentStatus')}
         action={(
-          <Button size="small" variant="secondary" onClick={() => switchTab('deploy')}>
+          <Button nativeButton={false} size="small" variant="secondary" render={<Link href={tabHref(appId, 'deploy')} />}>
             {t('overview.viewDeployments')}
             <span className="i-ri-arrow-right-up-line h-3.5 w-3.5" />
           </Button>
@@ -160,20 +159,23 @@ export function OverviewTab({ instanceId }: {
                     ? t(canCreateRelease ? 'overview.noReleaseYet' : 'overview.noReleaseSourceUnavailable')
                     : t('overview.notDeployedYet')}
                 </div>
-                <Button
-                  size="small"
-                  variant="primary"
-                  disabled={releaseRows.length === 0 && !canCreateRelease}
-                  onClick={() => {
-                    if (releaseRows.length === 0) {
-                      switchTab('versions')
-                      return
-                    }
-                    openDeployDrawer({ appInstanceId: appId })
-                  }}
-                >
-                  {releaseRows.length === 0 ? t('overview.createRelease') : t('overview.deploy')}
-                </Button>
+                {releaseRows.length === 0
+                  ? canCreateRelease
+                    ? (
+                        <Button nativeButton={false} size="small" variant="primary" render={<Link href={tabHref(appId, 'versions')} />}>
+                          {t('overview.createRelease')}
+                        </Button>
+                      )
+                    : (
+                        <Button size="small" variant="primary" disabled>
+                          {t('overview.createRelease')}
+                        </Button>
+                      )
+                  : (
+                      <Button size="small" variant="primary" onClick={() => openDeployDrawer({ appInstanceId: appId })}>
+                        {t('overview.deploy')}
+                      </Button>
+                    )}
               </div>
             )
           : (
@@ -199,7 +201,7 @@ export function OverviewTab({ instanceId }: {
       <Section
         title={t('overview.accessStatus')}
         action={(
-          <Button size="small" variant="secondary" onClick={() => switchTab('access')}>
+          <Button nativeButton={false} size="small" variant="secondary" render={<Link href={tabHref(appId, 'access')} />}>
             {t('overview.configureAccess')}
             <span className="i-ri-arrow-right-up-line h-3.5 w-3.5" />
           </Button>
diff --git a/web/features/deployments/list/instance-card.tsx b/web/features/deployments/list/instance-card.tsx
index b560d7182c..8a8d8e143c 100644
--- a/web/features/deployments/list/instance-card.tsx
+++ b/web/features/deployments/list/instance-card.tsx
@@ -1,13 +1,13 @@
 'use client'
 
 import type { AppInstanceCard } from '@dify/contracts/enterprise/types.gen'
-import type { MouseEvent } from 'react'
 import type { AppModeEnum } from '@/types/app'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLinkItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@langgenius/dify-ui/dropdown-menu'
@@ -17,14 +17,13 @@ import { useTranslation } from 'react-i18next'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
-import { useRouter } from '@/next/navigation'
+import Link from '@/next/link'
 import { useDeploymentsStore } from '../store'
 
 export function InstanceCard({ app }: {
   app: AppInstanceCard
 }) {
   const { t } = useTranslation('deployments')
-  const router = useRouter()
   const { formatTimeFromNow } = useFormatTimeFromNow()
   const [menuOpen, setMenuOpen] = useState(false)
   const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer)
@@ -35,14 +34,7 @@ export function InstanceCard({ app }: {
   const appId = app.id
   const appName = app.name ?? appId
   const appMode = app.mode ?? 'workflow'
-  const navigateToDetail = () => router.push(`/deployments/${appId}/overview`)
-
-  const handleMenuAction = (e: MouseEvent<HTMLElement>, action: () => void) => {
-    e.stopPropagation()
-    e.preventDefault()
-    setMenuOpen(false)
-    action()
-  }
+  const detailHref = `/deployments/${appId}/overview`
 
   const statusCount = (status: string) =>
     app.statuses?.find(item => item.status === status)?.count ?? 0
@@ -122,75 +114,78 @@ export function InstanceCard({ app }: {
 
   return (
     <div
-      onClick={(e) => {
-        e.preventDefault()
-        navigateToDetail()
-      }}
       className="group relative col-span-1 inline-flex h-[160px] cursor-pointer flex-col rounded-xl border border-solid border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg"
     >
-      <div className="flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pt-[14px] pb-3">
-        <div className="relative shrink-0">
-          <AppIcon
-            size="large"
-            iconType="emoji"
-            icon={app.icon}
-            background={app.iconBackground}
-          />
-          <AppTypeIcon
-            type={appMode as AppModeEnum}
-            wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm"
-            className="h-3 w-3"
-          />
-        </div>
-        <div className="w-0 grow py-px">
-          <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
-            <div className="truncate" title={appName}>{appName}</div>
+      <Link
+        href={detailHref}
+        className="flex h-full flex-col rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+      >
+        <div className="flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pt-[14px] pb-3">
+          <div className="relative shrink-0">
+            <AppIcon
+              size="large"
+              iconType="emoji"
+              icon={app.icon}
+              background={app.iconBackground}
+            />
+            <AppTypeIcon
+              type={appMode as AppModeEnum}
+              wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm"
+              className="h-3 w-3"
+            />
           </div>
-          <div className="truncate text-[10px] leading-[18px] font-medium text-text-tertiary" title={appModeLabel}>
-            {appModeLabel}
+          <div className="w-0 grow py-px">
+            <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
+              <div className="truncate" title={appName}>{appName}</div>
+            </div>
+            <div className="truncate text-[10px] leading-[18px] font-medium text-text-tertiary" title={appModeLabel}>
+              {appModeLabel}
+            </div>
           </div>
         </div>
-      </div>
-      <div className="flex grow flex-col gap-2 px-[14px]">
-        <Tooltip>
-          <TooltipTrigger
-            render={(
-              <div className="flex min-w-0 items-center gap-1.5">
-                <span
-                  className={cn(
-                    'inline-flex h-5 shrink-0 items-center gap-1 rounded-md px-1.5 system-xs-medium',
-                    healthPillClass,
-                  )}
-                >
-                  <span className={cn('h-1.5 w-1.5 rounded-full', healthDotClass)} />
-                  {primaryText}
-                </span>
-                {secondaryParts.length > 0 && (
-                  <span className="truncate system-xs-regular text-text-tertiary">
-                    {secondaryParts.join(' · ')}
+        <div className="flex grow flex-col gap-2 px-[14px]">
+          <Tooltip>
+            <TooltipTrigger
+              render={(
+                <div className="flex min-w-0 items-center gap-1.5">
+                  <span
+                    className={cn(
+                      'inline-flex h-5 shrink-0 items-center gap-1 rounded-md px-1.5 system-xs-medium',
+                      healthPillClass,
+                    )}
+                  >
+                    <span className={cn('h-1.5 w-1.5 rounded-full', healthDotClass)} />
+                    {primaryText}
                   </span>
-                )}
-              </div>
-            )}
-          />
-          <TooltipContent>{statusTooltip}</TooltipContent>
-        </Tooltip>
-        <div className="flex min-w-0 items-center gap-1.5 system-xs-regular text-text-tertiary">
-          <span aria-hidden className="i-ri-apps-2-line h-3.5 w-3.5 shrink-0 text-text-quaternary" />
-          <span className="truncate" title={app.sourceAppName ?? appName}>
-            {t('card.fromApp', { name: app.sourceAppName ?? appName })}
-          </span>
+                  {secondaryParts.length > 0 && (
+                    <span className="truncate system-xs-regular text-text-tertiary">
+                      {secondaryParts.join(' · ')}
+                    </span>
+                  )}
+                </div>
+              )}
+            />
+            <TooltipContent>{statusTooltip}</TooltipContent>
+          </Tooltip>
+          <div className="flex min-w-0 items-center gap-1.5 system-xs-regular text-text-tertiary">
+            <span aria-hidden className="i-ri-apps-2-line h-3.5 w-3.5 shrink-0 text-text-quaternary" />
+            <span className="truncate" title={app.sourceAppName ?? appName}>
+              {t('card.fromApp', { name: app.sourceAppName ?? appName })}
+            </span>
+          </div>
         </div>
-      </div>
-      <div className="absolute right-0 bottom-1 left-0 flex h-[42px] shrink-0 items-center pt-1 pr-[6px] pb-[6px] pl-[14px]">
-        <div className="mr-[41px] flex min-w-0 grow items-center gap-1.5 system-xs-regular text-text-tertiary">
-          <span aria-hidden className="i-ri-time-line h-3.5 w-3.5 shrink-0 text-text-quaternary" />
-          <span className="truncate">
-            {lastDeployedAt
-              ? t('card.lastDeployed', { time: formatTimeFromNow(lastDeployedAt) })
-              : t('card.neverDeployed')}
-          </span>
+        <div className="absolute right-0 bottom-1 left-0 flex h-[42px] shrink-0 items-center pt-1 pr-[6px] pb-[6px] pl-[14px]">
+          <div className="mr-[41px] flex min-w-0 grow items-center gap-1.5 system-xs-regular text-text-tertiary">
+            <span aria-hidden className="i-ri-time-line h-3.5 w-3.5 shrink-0 text-text-quaternary" />
+            <span className="truncate">
+              {lastDeployedAt
+                ? t('card.lastDeployed', { time: formatTimeFromNow(lastDeployedAt) })
+                : t('card.neverDeployed')}
+            </span>
+          </div>
         </div>
+      </Link>
+      <div className="pointer-events-none absolute right-0 bottom-1 left-0 flex h-[42px] shrink-0 items-center pt-1 pr-[6px] pb-[6px] pl-[14px]">
         <div
           className={cn(
             'absolute top-1/2 right-[6px] flex -translate-y-1/2 items-center transition-opacity',
@@ -206,10 +201,6 @@ export function InstanceCard({ app }: {
                 menuOpen ? 'bg-state-base-hover shadow-none' : 'bg-transparent',
                 'flex h-8 w-8 items-center justify-center rounded-md border-none p-2 hover:bg-state-base-hover',
               )}
-              onClick={(e) => {
-                e.stopPropagation()
-                e.preventDefault()
-              }}
             >
               <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
             </DropdownMenuTrigger>
@@ -217,16 +208,19 @@ export function InstanceCard({ app }: {
               <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="w-[216px]">
                 <DropdownMenuItem
                   className="gap-2 px-3"
-                  onClick={e => handleMenuAction(e, () => openDeployDrawer({ appInstanceId: appId }))}
+                  onClick={() => {
+                    setMenuOpen(false)
+                    openDeployDrawer({ appInstanceId: appId })
+                  }}
                 >
                   <span className="system-sm-regular text-text-secondary">{t('card.menu.deploy')}</span>
                 </DropdownMenuItem>
-                <DropdownMenuItem
+                <DropdownMenuLinkItem
                   className="gap-2 px-3"
-                  onClick={e => handleMenuAction(e, navigateToDetail)}
+                  render={<Link href={detailHref} />}
                 >
                   <span className="system-sm-regular text-text-secondary">{t('card.menu.viewDetail')}</span>
-                </DropdownMenuItem>
+                </DropdownMenuLinkItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
                   aria-disabled