nuxt4-demo/app/composables/usePageTitle.ts

import type { MaybeRefOrGetter } from 'vue'
import { toValue } from 'vue'

/**
 * 统一设置 document title：`片段 · … · 站点名`（站点名来自后台 `siteName`）。
 */
export function usePageTitle(
  parts: MaybeRefOrGetter<readonly (string | null | undefined)[] | string | null | undefined>,
) {
  const { siteName } = useGlobalConfig()

  useHead(() => {
    const raw = toValue(parts)
    const list: (string | null | undefined)[] = Array.isArray(raw)
      ? [...raw]
      : [raw]

    const cleaned = list
      .map((s) => (typeof s === 'string' ? s.trim() : ''))
      .filter((s) => s.length > 0)

    const site = siteName.value.trim() || 'Person Panel'
    const prefix = cleaned.join(' · ')
    return {
      title: prefix ? `${prefix} · ${site}` : site,
    }
  })
}