Centralized management of external links (#4471)

Update the desktop guide links to make them platform and locale-aware

Edited by Terry:
Refactor external link management by introducing a centralized
useExternalLink composable with automatic locale and platform detection
for documentation URLs.

- Created useExternalLink composable - A new centralized utility for
managing all external links
- Dynamic docs URL builder (buildDocsUrl) - Automatically constructs
docs.comfy.org URLs with:
  - Locale detection (Chinese vs English)
  - Platform detection (macOS vs Windows for desktop)
  - Flexible path construction with options

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-4471-Add-platform-and-locale-aware-desktop-guide-URL-2346d73d3650815ea4a4dd64be575bbe)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Terry Jia <terryjia88@gmail.com>

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -29,7 +29,10 @@
 import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
+import { useExternalLink } from '@/composables/useExternalLink'
+
 const { t } = useI18n()
+const { buildDocsUrl } = useExternalLink()
 
 const { apiNodeNames, onLogin, onCancel } = defineProps<{
   apiNodeNames: string[]
@@ -38,6 +41,9 @@ const { apiNodeNames, onLogin, onCancel } = defineProps<{
 }>()
 
 const handleLearnMoreClick = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
+  window.open(
+    buildDocsUrl('/tutorials/api-nodes/faq', { includeLocale: true }),
+    '_blank'
+  )
 }
 </script>

src/components/dialog/content/setting/CreditsPanel.vue

@@ -123,6 +123,7 @@ import { computed, ref, watch } from 'vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
@@ -137,6 +138,7 @@ interface CreditHistoryItemData {
   isPositive: boolean
 }
 
+const { buildDocsUrl } = useExternalLink()
 const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
@@ -183,12 +185,17 @@ const handleMessageSupport = async () => {
 }
 
 const handleFaqClick = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
+  window.open(
+    buildDocsUrl('/tutorials/api-nodes/faq', { includeLocale: true }),
+    '_blank'
+  )
 }
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
+      includeLocale: true
+    }),
     '_blank'
   )
 }

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -143,6 +143,7 @@ import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -168,15 +169,6 @@ interface MenuItem {
 }
 
 // Constants
-const EXTERNAL_LINKS = {
-  DOCS: 'https://docs.comfy.org/',
-  DISCORD: 'https://www.comfy.org/discord',
-  GITHUB: 'https://github.com/comfyanonymous/ComfyUI',
-  DESKTOP_GUIDE_WINDOWS: 'https://docs.comfy.org/installation/desktop/windows',
-  DESKTOP_GUIDE_MACOS: 'https://docs.comfy.org/installation/desktop/macos',
-  UPDATE_GUIDE: 'https://docs.comfy.org/installation/update_comfyui'
-} as const
-
 const TIME_UNITS = {
   MINUTE: 60 * 1000,
   HOUR: 60 * 60 * 1000,
@@ -193,7 +185,8 @@ const SUBMENU_CONFIG = {
 } as const
 
 // Composables
-const { t, locale } = useI18n()
+const { t } = useI18n()
+const { staticUrls, buildDocsUrl } = useExternalLink()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
@@ -230,11 +223,12 @@ const moreItems = computed<MenuItem[]>(() => {
       visible: isElectron(),
       action: () => {
         trackResourceClick('docs', true)
-        const docsUrl =
-          electronAPI().getPlatform() === 'darwin'
-            ? EXTERNAL_LINKS.DESKTOP_GUIDE_MACOS
-            : EXTERNAL_LINKS.DESKTOP_GUIDE_WINDOWS
-        openExternalLink(docsUrl)
+        openExternalLink(
+          buildDocsUrl('/installation/desktop', {
+            includeLocale: true,
+            platform: true
+          })
+        )
         emit('close')
       }
     },
@@ -286,7 +280,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.docs'),
       action: () => {
         trackResourceClick('docs', true)
-        openExternalLink(EXTERNAL_LINKS.DOCS)
+        openExternalLink(buildDocsUrl('/', { includeLocale: true }))
         emit('close')
       }
     },
@@ -297,7 +291,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: 'Discord',
       action: () => {
         trackResourceClick('discord', true)
-        openExternalLink(EXTERNAL_LINKS.DISCORD)
+        openExternalLink(staticUrls.discord)
         emit('close')
       }
     },
@@ -308,7 +302,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.github'),
       action: () => {
         trackResourceClick('github', true)
-        openExternalLink(EXTERNAL_LINKS.GITHUB)
+        openExternalLink(staticUrls.github)
         emit('close')
       }
     },
@@ -533,25 +527,19 @@ const onReleaseClick = (release: ReleaseNote): void => {
   trackResourceClick('release_notes', true)
   void releaseStore.handleShowChangelog(release.version)
   const versionAnchor = formatVersionAnchor(release.version)
-  const changelogUrl = `${getChangelogUrl()}#${versionAnchor}`
+  const changelogUrl = `${buildDocsUrl('/changelog', { includeLocale: true })}#${versionAnchor}`
   openExternalLink(changelogUrl)
   emit('close')
 }
 
 const onUpdate = (_: ReleaseNote): void => {
   trackResourceClick('docs', true)
-  openExternalLink(EXTERNAL_LINKS.UPDATE_GUIDE)
+  openExternalLink(
+    buildDocsUrl('/installation/update_comfyui', { includeLocale: true })
+  )
   emit('close')
 }
 
-// Generate language-aware changelog URL
-const getChangelogUrl = (): string => {
-  const isChineseLocale = locale.value === 'zh'
-  return isChineseLocale
-    ? 'https://docs.comfy.org/zh-CN/changelog'
-    : 'https://docs.comfy.org/changelog'
-}
-
 // Lifecycle
 onMounted(async () => {
   telemetry?.trackHelpCenterOpened({ source: 'sidebar' })

src/components/topbar/CurrentUserPopover.vue

@@ -101,6 +101,7 @@ import UserAvatar from '@/components/common/UserAvatar.vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useExternalLink } from '@/composables/useExternalLink'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
@@ -111,6 +112,8 @@ const emit = defineEmits<{
   close: []
 }>()
 
+const { buildDocsUrl } = useExternalLink()
+
 const planSettingsLabel = isCloud
   ? 'settingsCategories.PlanCredits'
   : 'settingsCategories.Credits'
@@ -145,7 +148,9 @@ const handleTopUp = () => {
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
+      includeLocale: true
+    }),
     '_blank'
   )
   emit('close')

src/components/topbar/LoginButton.vue

@@ -22,7 +22,7 @@
     <div>
       <div class="mb-1">{{ t('auth.loginButton.tooltipHelp') }}</div>
       <a
-        href="https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes"
+        :href="apiNodesOverviewUrl"
         target="_blank"
         class="text-neutral-500 hover:text-primary"
         >{{ t('auth.loginButton.tooltipLearnMore') }}</a
@@ -37,9 +37,17 @@ import Popover from 'primevue/popover'
 import { ref } from 'vue'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { t } from '@/i18n'
 
 const { isLoggedIn, handleSignIn } = useCurrentUser()
+const { buildDocsUrl } = useExternalLink()
+const apiNodesOverviewUrl = buildDocsUrl(
+  '/tutorials/api-nodes/overview#api-nodes',
+  {
+    includeLocale: true
+  }
+)
 const popoverRef = ref<InstanceType<typeof Popover> | null>(null)
 let hideTimeout: ReturnType<typeof setTimeout> | null = null
 let showTimeout: ReturnType<typeof setTimeout> | null = null

src/composables/useCoreCommands.ts

@@ -1,6 +1,7 @@
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { useModelSelectorDialog } from '@/composables/useModelSelectorDialog'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
@@ -76,6 +77,7 @@ export function useCoreCommands(): ComfyCommand[] {
   const canvasStore = useCanvasStore()
   const executionStore = useExecutionStore()
   const telemetry = useTelemetry()
+  const { staticUrls, buildDocsUrl } = useExternalLink()
 
   const bottomPanelStore = useBottomPanelStore()
 
@@ -761,10 +763,7 @@ export function useCoreCommands(): ComfyCommand[] {
           is_external: true,
           source: 'menu'
         })
-        window.open(
-          'https://github.com/comfyanonymous/ComfyUI/issues',
-          '_blank'
-        )
+        window.open(staticUrls.githubIssues, '_blank')
       }
     },
     {
@@ -779,7 +778,7 @@ export function useCoreCommands(): ComfyCommand[] {
           is_external: true,
           source: 'menu'
         })
-        window.open('https://docs.comfy.org/', '_blank')
+        window.open(buildDocsUrl('/', { includeLocale: true }), '_blank')
       }
     },
     {
@@ -794,7 +793,7 @@ export function useCoreCommands(): ComfyCommand[] {
           is_external: true,
           source: 'menu'
         })
-        window.open('https://www.comfy.org/discord', '_blank')
+        window.open(staticUrls.discord, '_blank')
       }
     },
     {
@@ -861,7 +860,7 @@ export function useCoreCommands(): ComfyCommand[] {
           is_external: true,
           source: 'menu'
         })
-        window.open('https://forum.comfy.org/', '_blank')
+        window.open(staticUrls.forum, '_blank')
       }
     },
     {

src/composables/useExternalLink.ts

@@ -0,0 +1,99 @@
+import { computed } from 'vue'
+
+import { electronAPI, isElectron } from '@/utils/envUtil'
+import { useI18n } from 'vue-i18n'
+
+/**
+ * Composable for building docs.comfy.org URLs with automatic locale and platform detection
+ *
+ * @example
+ * ```ts
+ * const { buildDocsUrl } = useExternalLink()
+ *
+ * // Simple usage
+ * const changelogUrl = buildDocsUrl('/changelog', { includeLocale: true })
+ * // => 'https://docs.comfy.org/zh-CN/changelog' (if Chinese)
+ *
+ * // With platform detection
+ * const desktopUrl = buildDocsUrl('/installation/desktop', {
+ *   includeLocale: true,
+ *   platform: true
+ * })
+ * // => 'https://docs.comfy.org/zh-CN/installation/desktop/macos' (if Chinese + macOS)
+ * ```
+ */
+export function useExternalLink() {
+  const { locale } = useI18n()
+
+  const isChinese = computed(() => {
+    return locale.value === 'zh' || locale.value === 'zh-TW'
+  })
+
+  const platform = computed(() => {
+    if (!isElectron()) {
+      return null
+    }
+
+    const electronPlatform = electronAPI().getPlatform()
+    return electronPlatform === 'darwin' ? 'macos' : 'windows'
+  })
+
+  /**
+   * Build a docs.comfy.org URL with optional locale and platform
+   *
+   * @param path - The path after the domain (e.g., '/installation/desktop')
+   * @param options - Options for building the URL
+   * @param options.includeLocale - Whether to include locale prefix (default: false)
+   * @param options.platform - Whether to include platform suffix (default: false)
+   * @returns The complete docs URL
+   *
+   * @example
+   * ```ts
+   * buildDocsUrl('/changelog') // => 'https://docs.comfy.org/changelog'
+   * buildDocsUrl('/changelog', { includeLocale: true }) // => 'https://docs.comfy.org/zh-CN/changelog' (if Chinese)
+   * buildDocsUrl('/installation/desktop', { includeLocale: true, platform: true })
+   * // => 'https://docs.comfy.org/zh-CN/installation/desktop/macos' (if Chinese + macOS)
+   * ```
+   */
+  const buildDocsUrl = (
+    path: string,
+    options: {
+      includeLocale?: boolean
+      platform?: boolean
+    } = {}
+  ): string => {
+    const { includeLocale = false, platform: includePlatform = false } = options
+
+    let url = 'https://docs.comfy.org'
+
+    if (includeLocale && isChinese.value) {
+      url += '/zh-CN'
+    }
+
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`
+    url += normalizedPath
+
+    if (includePlatform && platform.value) {
+      url = url.endsWith('/') ? url : `${url}/`
+      url += platform.value
+    }
+
+    return url
+  }
+
+  const staticUrls = {
+    // Static external URLs
+    discord: 'https://www.comfy.org/discord',
+    github: 'https://github.com/comfyanonymous/ComfyUI',
+    githubIssues: 'https://github.com/comfyanonymous/ComfyUI/issues',
+    githubFrontend: 'https://github.com/Comfy-Org/ComfyUI_frontend',
+    githubElectron: 'https://github.com/Comfy-Org/electron',
+    forum: 'https://forum.comfy.org/',
+    comfyOrg: 'https://www.comfy.org/'
+  }
+
+  return {
+    buildDocsUrl,
+    staticUrls
+  }
+}

src/extensions/core/electronAdapter.ts

@@ -1,5 +1,6 @@
 import log from 'loglevel'
 
+import { useExternalLink } from '@/composables/useExternalLink'
 import { PYTHON_MIRROR } from '@/constants/uvMirrors'
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
@@ -8,13 +9,6 @@ import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { checkMirrorReachable } from '@/utils/electronMirrorCheck'
 import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
-
-// Desktop documentation URLs
-const DESKTOP_DOCS = {
-  WINDOWS: 'https://docs.comfy.org/installation/desktop/windows',
-  MACOS: 'https://docs.comfy.org/installation/desktop/macos'
-} as const
-
 ;(async () => {
   if (!isElectron()) return
 
@@ -22,6 +16,7 @@ const DESKTOP_DOCS = {
   const desktopAppVersion = await electronAPI.getElectronVersion()
   const workflowStore = useWorkflowStore()
   const toastStore = useToastStore()
+  const { staticUrls, buildDocsUrl } = useExternalLink()
 
   const onChangeRestartApp = (newValue: string, oldValue: string) => {
     // Add a delay to allow changes to take effect before restarting.
@@ -165,11 +160,13 @@ const DESKTOP_DOCS = {
         label: 'Desktop User Guide',
         icon: 'pi pi-book',
         function() {
-          const docsUrl =
-            electronAPI.getPlatform() === 'darwin'
-              ? DESKTOP_DOCS.MACOS
-              : DESKTOP_DOCS.WINDOWS
-          window.open(docsUrl, '_blank')
+          window.open(
+            buildDocsUrl('/installation/desktop', {
+              includeLocale: true,
+              platform: true
+            }),
+            '_blank'
+          )
         }
       },
       {
@@ -304,7 +301,7 @@ const DESKTOP_DOCS = {
     aboutPageBadges: [
       {
         label: 'ComfyUI_desktop v' + desktopAppVersion,
-        url: 'https://github.com/Comfy-Org/electron',
+        url: staticUrls.githubElectron,
         icon: 'pi pi-github'
       }
     ]

src/platform/cloud/subscription/components/SubscriptionPanel.vue

@@ -309,6 +309,7 @@ import Skeleton from 'primevue/skeleton'
 import TabPanel from 'primevue/tabpanel'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
+import { useExternalLink } from '@/composables/useExternalLink'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
@@ -316,6 +317,8 @@ import { useSubscriptionActions } from '@/platform/cloud/subscription/composable
 import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
 import { cn } from '@/utils/tailwindUtil'
 
+const { buildDocsUrl } = useExternalLink()
+
 const {
   isActiveSubscription,
   isCancelled,
@@ -340,7 +343,9 @@ const {
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
+      includeLocale: true
+    }),
     '_blank'
   )
 }

src/platform/updates/components/ReleaseNotificationToast.vue

@@ -46,14 +46,14 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
+import { useExternalLink } from '@/composables/useExternalLink'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 
 import type { ReleaseNote } from '../common/releaseService'
 import { useReleaseStore } from '../common/releaseStore'
 
-const { locale } = useI18n()
+const { buildDocsUrl } = useExternalLink()
 const releaseStore = useReleaseStore()
 
 // Local state for dismissed status
@@ -71,16 +71,12 @@ const shouldShow = computed(
 
 // Generate changelog URL with version anchor (language-aware)
 const changelogUrl = computed(() => {
-  const isChineseLocale = locale.value === 'zh'
-  const baseUrl = isChineseLocale
-    ? 'https://docs.comfy.org/zh-CN/changelog'
-    : 'https://docs.comfy.org/changelog'
-
+  const changelogBaseUrl = buildDocsUrl('/changelog', { includeLocale: true })
   if (latestRelease.value?.version) {
     const versionAnchor = formatVersionAnchor(latestRelease.value.version)
-    return `${baseUrl}#${versionAnchor}`
+    return `${changelogBaseUrl}#${versionAnchor}`
   }
-  return baseUrl
+  return changelogBaseUrl
 })
 
 // Auto-hide timer
@@ -121,7 +117,10 @@ const handleLearnMore = () => {
 }
 
 const handleUpdate = () => {
-  window.open('https://docs.comfy.org/installation/update_comfyui', '_blank')
+  window.open(
+    buildDocsUrl('/installation/update_comfyui', { includeLocale: true }),
+    '_blank'
+  )
   dismissToast()
 }
 

src/platform/updates/components/WhatsNewPopup.vue

@@ -67,13 +67,15 @@
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useExternalLink } from '@/composables/useExternalLink'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
 import type { ReleaseNote } from '../common/releaseService'
 import { useReleaseStore } from '../common/releaseStore'
 
-const { locale, t } = useI18n()
+const { t } = useI18n()
+const { buildDocsUrl } = useExternalLink()
 const releaseStore = useReleaseStore()
 
 // Define emits
@@ -96,16 +98,12 @@ const shouldShow = computed(
 
 // Generate changelog URL with version anchor (language-aware)
 const changelogUrl = computed(() => {
-  const isChineseLocale = locale.value === 'zh'
-  const baseUrl = isChineseLocale
-    ? 'https://docs.comfy.org/zh-CN/changelog'
-    : 'https://docs.comfy.org/changelog'
-
+  const changelogBaseUrl = buildDocsUrl('/changelog', { includeLocale: true })
   if (latestRelease.value?.version) {
     const versionAnchor = formatVersionAnchor(latestRelease.value.version)
-    return `${baseUrl}#${versionAnchor}`
+    return `${changelogBaseUrl}#${versionAnchor}`
   }
-  return baseUrl
+  return changelogBaseUrl
 })
 
 const formattedContent = computed(() => {
@@ -139,11 +137,6 @@ const closePopup = async () => {
   hide()
 }
 
-// const handleCTA = async () => {
-//   window.open('https://docs.comfy.org/installation/update_comfyui', '_blank')
-//   await closePopup()
-// }
-
 // Initialize on mount
 onMounted(async () => {
   // Fetch releases if not already loaded

src/stores/aboutPanelStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
+import { useExternalLink } from '@/composables/useExternalLink'
 import type { AboutPageBadge } from '@/types/comfy'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 
@@ -11,6 +12,7 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => {
   const frontendVersion = __COMFYUI_FRONTEND_VERSION__
   const extensionStore = useExtensionStore()
   const systemStatsStore = useSystemStatsStore()
+  const { staticUrls } = useExternalLink()
   const coreVersion = computed(
     () => systemStatsStore?.systemStats?.system?.comfyui_version ?? ''
   )
@@ -24,20 +26,20 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => {
           ? 'v' + electronAPI().getComfyUIVersion()
           : coreVersion.value
       }`,
-      url: 'https://github.com/comfyanonymous/ComfyUI',
+      url: staticUrls.github,
       icon: 'pi pi-github'
     },
     {
       label: `ComfyUI_frontend v${frontendVersion}`,
-      url: 'https://github.com/Comfy-Org/ComfyUI_frontend',
+      url: staticUrls.githubFrontend,
       icon: 'pi pi-github'
     },
     {
       label: 'Discord',
-      url: 'https://www.comfy.org/discord',
+      url: staticUrls.discord,
       icon: 'pi pi-discord'
     },
-    { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' }
+    { label: 'ComfyOrg', url: staticUrls.comfyOrg, icon: 'pi pi-globe' }
   ])
 
   const allBadges = computed<AboutPageBadge[]>(() => [

src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue

@@ -142,6 +142,7 @@ import ContentDivider from '@/components/common/ContentDivider.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { components } from '@/types/comfyRegistryTypes'
 import ManagerNavSidebar from '@/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue'
@@ -165,6 +166,7 @@ const { initialTab } = defineProps<{
 }>()
 
 const { t } = useI18n()
+const { buildDocsUrl } = useExternalLink()
 const comfyManagerStore = useComfyManagerStore()
 const { getPackById } = useComfyRegistryStore()
 const conflictAcknowledgment = useConflictAcknowledgment()
@@ -356,7 +358,9 @@ watch([isAllTab, searchResults], () => {
 
 const onClickWarningLink = () => {
   window.open(
-    'https://docs.comfy.org/troubleshooting/custom-node-issues',
+    buildDocsUrl('/troubleshooting/custom-node-issues', {
+      includeLocale: true
+    }),
     '_blank'
   )
 }

src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue

@@ -26,6 +26,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 
+import { useExternalLink } from '@/composables/useExternalLink'
 import { useDialogStore } from '@/stores/dialogStore'
 
 interface Props {
@@ -36,10 +37,13 @@ const props = withDefaults(defineProps<Props>(), {
   buttonText: undefined,
   onButtonClick: undefined
 })
+const { buildDocsUrl } = useExternalLink()
 const dialogStore = useDialogStore()
 const handleConflictInfoClick = () => {
   window.open(
-    'https://docs.comfy.org/troubleshooting/custom-node-issues',
+    buildDocsUrl('/troubleshooting/custom-node-issues', {
+      includeLocale: true
+    }),
     '_blank'
   )
 }

tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts

@@ -12,6 +12,11 @@ vi.mock('vue-i18n', () => ({
   useI18n: vi.fn(() => ({
     locale: { value: 'en' },
     t: vi.fn((key) => key)
+  })),
+  createI18n: vi.fn(() => ({
+    global: {
+      locale: { value: 'en' }
+    }
   }))
 }))
 

tests-ui/tests/composables/useCoreCommands.test.ts

@@ -1,11 +1,24 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
 
 import { useCoreCommands } from '@/composables/useCoreCommands'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 
+// Mock vue-i18n for useExternalLink
+const mockLocale = ref('en')
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('vue-i18n')>()
+  return {
+    ...actual,
+    useI18n: vi.fn(() => ({
+      locale: mockLocale
+    }))
+  }
+})
+
 vi.mock('@/scripts/app', () => {
   const mockGraphClear = vi.fn()
   const mockCanvas = { subgraph: undefined }

tests-ui/tests/composables/useExternalLink.test.ts

@@ -0,0 +1,144 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useExternalLink } from '@/composables/useExternalLink'
+
+// Mock the environment utilities
+vi.mock('@/utils/envUtil', () => ({
+  isElectron: vi.fn(),
+  electronAPI: vi.fn()
+}))
+
+// Mock vue-i18n
+const mockLocale = ref('en')
+vi.mock('vue-i18n', () => ({
+  useI18n: vi.fn(() => ({
+    locale: mockLocale
+  }))
+}))
+
+// Import after mocking to get the mocked versions
+import { electronAPI, isElectron } from '@/utils/envUtil'
+
+describe('useExternalLink', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset to default state
+    mockLocale.value = 'en'
+    vi.mocked(isElectron).mockReturnValue(false)
+  })
+
+  describe('staticUrls', () => {
+    it('should provide common external URLs', () => {
+      const { staticUrls } = useExternalLink()
+
+      // Static URLs
+      expect(staticUrls.discord).toBe('https://www.comfy.org/discord')
+      expect(staticUrls.github).toBe(
+        'https://github.com/comfyanonymous/ComfyUI'
+      )
+      expect(staticUrls.githubIssues).toBe(
+        'https://github.com/comfyanonymous/ComfyUI/issues'
+      )
+      expect(staticUrls.githubFrontend).toBe(
+        'https://github.com/Comfy-Org/ComfyUI_frontend'
+      )
+      expect(staticUrls.githubElectron).toBe(
+        'https://github.com/Comfy-Org/electron'
+      )
+      expect(staticUrls.forum).toBe('https://forum.comfy.org/')
+      expect(staticUrls.comfyOrg).toBe('https://www.comfy.org/')
+    })
+  })
+
+  describe('buildDocsUrl', () => {
+    it('should build basic docs URL without locale', () => {
+      mockLocale.value = 'en'
+      const { buildDocsUrl } = useExternalLink()
+
+      const url = buildDocsUrl('/changelog')
+      expect(url).toBe('https://docs.comfy.org/changelog')
+    })
+
+    it('should build docs URL with Chinese (zh) locale when requested', () => {
+      mockLocale.value = 'zh'
+      const { buildDocsUrl } = useExternalLink()
+
+      const url = buildDocsUrl('/changelog', { includeLocale: true })
+      expect(url).toBe('https://docs.comfy.org/zh-CN/changelog')
+    })
+
+    it('should build docs URL with Chinese (zh-TW) locale when requested', () => {
+      mockLocale.value = 'zh-TW'
+      const { buildDocsUrl } = useExternalLink()
+
+      const url = buildDocsUrl('/changelog', { includeLocale: true })
+      expect(url).toBe('https://docs.comfy.org/zh-CN/changelog')
+    })
+
+    it('should not include locale for English when requested', () => {
+      mockLocale.value = 'en'
+      const { buildDocsUrl } = useExternalLink()
+
+      const url = buildDocsUrl('/changelog', { includeLocale: true })
+      expect(url).toBe('https://docs.comfy.org/changelog')
+    })
+
+    it('should handle path without leading slash', () => {
+      const { buildDocsUrl } = useExternalLink()
+
+      const url = buildDocsUrl('changelog')
+      expect(url).toBe('https://docs.comfy.org/changelog')
+    })
+
+    it('should add platform suffix when requested', () => {
+      mockLocale.value = 'en'
+      vi.mocked(isElectron).mockReturnValue(true)
+      vi.mocked(electronAPI).mockReturnValue({
+        getPlatform: () => 'darwin'
+      } as ReturnType<typeof electronAPI>)
+
+      const { buildDocsUrl } = useExternalLink()
+      const url = buildDocsUrl('/installation/desktop', { platform: true })
+      expect(url).toBe('https://docs.comfy.org/installation/desktop/macos')
+    })
+
+    it('should add platform suffix with trailing slash', () => {
+      mockLocale.value = 'en'
+      vi.mocked(isElectron).mockReturnValue(true)
+      vi.mocked(electronAPI).mockReturnValue({
+        getPlatform: () => 'win32'
+      } as ReturnType<typeof electronAPI>)
+
+      const { buildDocsUrl } = useExternalLink()
+      const url = buildDocsUrl('/installation/desktop/', { platform: true })
+      expect(url).toBe('https://docs.comfy.org/installation/desktop/windows')
+    })
+
+    it('should combine locale and platform', () => {
+      mockLocale.value = 'zh'
+      vi.mocked(isElectron).mockReturnValue(true)
+      vi.mocked(electronAPI).mockReturnValue({
+        getPlatform: () => 'darwin'
+      } as ReturnType<typeof electronAPI>)
+
+      const { buildDocsUrl } = useExternalLink()
+      const url = buildDocsUrl('/installation/desktop', {
+        includeLocale: true,
+        platform: true
+      })
+      expect(url).toBe(
+        'https://docs.comfy.org/zh-CN/installation/desktop/macos'
+      )
+    })
+
+    it('should not add platform when not desktop', () => {
+      mockLocale.value = 'en'
+      vi.mocked(isElectron).mockReturnValue(false)
+
+      const { buildDocsUrl } = useExternalLink()
+      const url = buildDocsUrl('/installation/desktop', { platform: true })
+      expect(url).toBe('https://docs.comfy.org/installation/desktop')
+    })
+  })
+})