ts

/**
 * 网站访问量统计
 *
 * https://events.vercount.one/
 */
const useVisitData = () => {
  const script = document.createElement('script')
  script.defer = true
  script.async = true
  // 调用 Vercount 接口
  script.src = 'https://events.vercount.one/js'
  document.head.appendChild(script)
}

export default useVisitData

ts

import DefaultTheme from 'vitepress/theme'
import { EnhanceAppContext, inBrowser } from 'vitepress'
import useVisitData from './hooks/useVisitData' // 网站访问统计 vercount

export default {
  extends: DefaultTheme,
  enhanceApp({ app, router }: EnhanceAppContext) {
    if (inBrowser) {
      // 访问量统计，路由加载完成，在加载页面组件后（在更新页面组件之前）调用
      router.onAfterPageLoad = () => {
        useVisitData()
      }
    }
  }
}

vue

<template>
  <div
    class="group bg-bg shadow-shadow relative flex h-full w-full flex-col overflow-hidden rounded-2xl p-6 shadow-xs transition-all duration-600 hover:shadow-xl"
  >
    <div class="mb-6 flex items-center justify-between">
      <div class="text-text1 text-lg font-bold">访问统计</div>
      <WIcon tag="count" class="w-4 h-4" />
    </div>
    <div class="flex flex-col gap-6">
      <div>
        <div class="mb-1 flex items-end justify-between">
          <span class="text-text2 text-sm font-bold">总访问量</span>
          <span class="text-text1 text-base font-bold" ref="pvEl">{{ pv }}</span>
        </div>
        <div class="h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
          <div class="bg-main h-full rounded-full" ref="pvBarEl" :style="{ width: defaultPvWidth }"></div>
        </div>
      </div>
      <div>
        <div class="mb-1 flex items-end justify-between">
          <span class="text-text2 text-sm font-bold">独立访客</span>
          <span class="text-text1 text-base font-bold" ref="uvEl">{{ uv }}</span>
        </div>
        <div class="h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
          <div class="bg-main h-full rounded-full" ref="uvBarEl" :style="{ width: defaultUvWidth }"></div>
        </div>
      </div>
    </div>
    <span id="vercount_value_site_pv" style="display: none" />
    <span id="vercount_value_site_uv" style="display: none" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getSessionStorage, setSessionStorage, numberWithCommas } from '../../utils/tools'
import WIcon from './WIcon.vue'

let sessionPv = getSessionStorage('pv')
let sessionUv = getSessionStorage('uv')
let defaultPvWidth = sessionPv ? '70%' : '0%'
let defaultUvWidth = sessionUv ? '45%' : '0%'
const pv = ref<string | number>(sessionPv ? numberWithCommas(parseInt(sessionPv)) : '♾️')
const uv = ref<string | number>(sessionUv ? numberWithCommas(parseInt(sessionUv)) : '♾️')

const pvEl = ref<HTMLElement | null>(null)
const pvBarEl = ref<HTMLElement | null>(null)
const uvEl = ref<HTMLElement | null>(null)
const uvBarEl = ref<HTMLElement | null>(null)

const MAX_RETRY_COUNT = 16 // 最大重试次数
const RETRY_DELAY = 500 // 重试间隔

// 统计数据获取状态
const statisticsState = {
  pv: { timeout: 0, retryCount: 0 },
  uv: { timeout: 0, retryCount: 0 }
}

// 通用的统计数据获取方法
const getStatisticsData = (type: 'pv' | 'uv') => {
  const config = {
    pv: {
      selector: '#vercount_value_site_pv',
      counterEl: pvEl.value,
      barEl: pvBarEl.value,
      targetPercentage: 75,
      ref: pv,
      storageKey: 'pv'
    },
    uv: {
      selector: '#vercount_value_site_uv',
      counterEl: uvEl.value,
      barEl: uvBarEl.value,
      targetPercentage: 50,
      ref: uv,
      storageKey: 'uv'
    }
  }

  const currentConfig = config[type]
  const state = statisticsState[type]

  if (state.timeout) clearTimeout(state.timeout)

  if (state.retryCount >= MAX_RETRY_COUNT) {
    console.warn(`${type.toUpperCase()}数据获取失败，已达到最大重试次数`)
    currentConfig.ref.value = '♾️'
    return
  }

  state.timeout = window.setTimeout(() => {
    const element = document.querySelector(currentConfig.selector)
    const text = element?.innerHTML?.trim()

    if (element && text && text !== '') {
      const storedVal = getSessionStorage(currentConfig.storageKey)
      const start = storedVal || '0'
      const hasSession = !!storedVal
      const calculatedStartPercentage = hasSession ? currentConfig.targetPercentage - 5 : 0

      currentConfig.ref.value = numberWithCommas(parseInt(text))
      setSessionStorage(currentConfig.storageKey, text)
      state.retryCount = 0 // 重置重试计数

      // 调用封装的函数
      animateNumberAndProgressBar({
        counterEl: currentConfig.counterEl,
        barEl: currentConfig.barEl,
        start: parseFloat(start),
        end: parseInt(text),
        totalDuration: 2000,
        minPercentage: 5,
        targetPercentage: currentConfig.targetPercentage,
        startPercentage: calculatedStartPercentage
      })
    } else {
      state.retryCount++
      getStatisticsData(type)
    }
  }, RETRY_DELAY)
}

// 简化的调用方法
const getPV = () => getStatisticsData('pv')
const getUV = () => getStatisticsData('uv')

interface AnimateOptions {
  counterEl: HTMLElement | null
  barEl: HTMLElement | null
  start?: number
  end: number
  totalDuration?: number
  minPercentage?: number
  targetPercentage?: number
  startPercentage?: number
}

// 统计数字动画
const animateNumberAndProgressBar = ({
  counterEl,
  barEl,
  start = 0,
  end,
  totalDuration = 2000,
  minPercentage = 5,
  targetPercentage = 75,
  startPercentage: explicitStartPercentage
}: AnimateOptions) => {
  // 如果开始和结束的数字相同，直接返回
  if (start == end) {
    return
  }

  if (!counterEl || !barEl) return

  // 调整进度条起始位置，要基本符合进度条的长度
  const maxNum = (end * 100) / targetPercentage
  let startPercentage = explicitStartPercentage ?? (start / maxNum) * 100

  let startTime: number | null = null
  const totalSteps = end - start

  function animateCounter(timestamp: number) {
    if (!startTime) startTime = timestamp
    const elapsed = timestamp - (startTime ?? timestamp)

    const progress = Math.min(elapsed / totalDuration, 1)
    const currentNumber = Math.floor(start + progress * totalSteps)
    let stepPercentage = progress * (targetPercentage - startPercentage)
    // 保证肉眼能看到至少5%的变化
    if (targetPercentage - startPercentage < minPercentage) {
      stepPercentage = progress * minPercentage
      startPercentage = targetPercentage - minPercentage
    }

    const currentProgress = startPercentage + stepPercentage

    counterEl!.textContent = numberWithCommas(currentNumber)
    barEl!.style.width = currentProgress + '%'

    if (barEl!.style.display !== 'block') {
      barEl!.style.display = 'block'
    }

    if (progress < 1) {
      requestAnimationFrame(animateCounter)
    }
  }

  barEl.style.width = startPercentage + '%'
  barEl.style.display = 'block'

  requestAnimationFrame(animateCounter)
}

onMounted(() => {
  getUV()
  getPV()
})
</script>

ts

/**
 * 读取 sessionStorage
 * @param key 键名
 * @returns 值或 null
 */
export const getSessionStorage = (key: string): string | null => {
  if (typeof window === 'undefined') return null
  try {
    return sessionStorage.getItem(key)
  } catch (e) {
    console.warn(`[getSessionStorage] Failed to read ${key}:`, e)
    return null
  }
}

/**
 * 设置 sessionStorage
 * @param key 键名
 * @param value 键值
 */
export const setSessionStorage = (key: string, value: string): void => {
  if (typeof window === 'undefined') return
  try {
    sessionStorage.setItem(key, value)
  } catch (e) {
    console.warn(`[setSessionStorage] Failed to write ${key}:`, e)
  }
}

/**
 * 文字统计 (中文字符按字数计，英文单词按1个计)
 * @param data 字符串
 * @returns 统计结果
 */
export const countWord = (data: string): number => {
  if (!data) return 0
  // 移除 Markdown 语法干扰（可选，视需求而定）
  const cleanData = data.replace(/!\[.*?\]\(.*?\)|\[.*?\]\(.*?\)|<.*?>/g, '')

  // 匹配中文字符、韩文、日文
  const cjkPattern = /[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF\u3040-\u309F\uAC00-\uD7AF]/g
  // 匹配英文单词、数字
  const wordPattern = /[a-zA-Z0-9_\u00C0-\u00FF]+/g

  const cjkMatches = cleanData.match(cjkPattern) || []
  const wordMatches = cleanData.match(wordPattern) || []

  return cjkMatches.length + wordMatches.length
}

/**
 * 数字千分位转换 1500 -> 1.5K，1500000 -> 1.5M
 * @param count 数字
 * @returns 格式化后的字符串
 */
export const countTransK = (count: number): string => {
  return new Intl.NumberFormat('en-US', {
    notation: 'compact',
    maximumFractionDigits: 1
  }).format(count)
}

/**
 * 将数字转化为千分位逗号分隔格式
 * @param num 数字
 * @returns 格式化后的字符串
 */
export const numberWithCommas = (num: number): string => {
  return num.toLocaleString('en-US')
}

/* #region format-date */
/**
 * 日期格式化程序
 * @param hasTime 是否包含时间
 * @returns Intl.DateTimeFormat 实例
 */
export const formatDate = (hasTime = false): Intl.DateTimeFormat => {
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    ...(hasTime && {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    })
  }
  return new Intl.DateTimeFormat('zh-CN', options)
}
/* #endregion format-date */

ts

import DefaultTheme from 'vitepress/theme'
import WStatistics from './components/WStatistics.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // 注册自定义全局组件
    app.component('weiz-statistics', WStatistics)
  }
}

vue

<template>
  <div>
    <weiz-statistics />
  </div>
</template>

vue

<template>
  <div class="text-text2 flex flex-wrap items-center gap-2 pt-4 pb-6 text-sm leading-relaxed font-medium break-keep md:gap-4">
    <div class="flex items-center" title="发表于">
      <WIcon tag="created" class="text-text2! mr-1 w-4 h-4" />
      <span>发表于 {{ firstCommit }}</span>
    </div>
    <div class="flex items-center" title="更新于">
      <WIcon tag="updated" class="text-text2! mr-1 w-4 h-4" />
      <span>更新于 {{ lastUpdated }}</span>
    </div>
    <div class="flex items-center" title="字数">
      <WIcon tag="word" class="text-text2! mr-1 w-4 h-4" />
      <span>总字数 {{ wordCount }}</span>
    </div>
    <div class="flex items-center" title="阅读量">
      <WIcon tag="user" class="text-text2! mr-1 w-4 h-4" />
      <span>阅读量 {{ pv }}<span id="vercount_value_page_pv" class="hidden" /></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { ref, onMounted, computed, onUnmounted, nextTick, watch } from 'vue'
import { countWord, countTransK, formatDate } from '../../utils/tools'
import WIcon from './WIcon.vue'

const { frontmatter, page } = useData()

// 日期格式化
const dateFormatter = formatDate()
const format = (date: string | number | Date | undefined) => {
  if (!date) return ''
  return dateFormatter.format(new Date(date)).replace(/\//g, '-')
}

const firstCommit = computed(() => format(frontmatter.value.firstCommit))
const lastUpdated = computed(() => format(frontmatter.value.lastUpdated || page.value.lastUpdated))

// 字数统计
const wordCount = ref('')
const updateWordCount = () => {
  const docDomContainer = document.querySelector('#VPContent')
  const content = docDomContainer?.querySelector('.content-container .main')?.textContent || ''
  wordCount.value = countTransK(countWord(content))
}

// 阅读量 (使用 MutationObserver 替代轮询)
const pv = ref('♾️')
let observer: MutationObserver | null = null

const initPVObserver = () => {
  const pvEl = document.getElementById('vercount_value_page_pv')
  if (!pvEl) return

  // 如果已有内容，直接读取
  if (pvEl.textContent && pvEl.textContent.trim()) {
    const val = parseInt(pvEl.textContent.trim())
    if (!isNaN(val)) {
      pv.value = countTransK(val)
      return
    }
  }

  // 监听变化
  observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'childList' || mutation.type === 'characterData') {
        const text = pvEl.textContent?.trim()
        if (text) {
          const val = parseInt(text)
          if (!isNaN(val)) {
            pv.value = countTransK(val)
            observer?.disconnect() // 获取到值后停止监听
          }
        }
      }
    }
  })

  observer.observe(pvEl, { childList: true, characterData: true, subtree: true })
}

onMounted(() => {
  nextTick(() => {
    updateWordCount()
    initPVObserver()
  })
})

onUnmounted(() => {
  observer?.disconnect()
})

// 监听路由变化重新计算
watch(
  () => page.value.relativePath,
  () => {
    nextTick(() => {
      updateWordCount()
      pv.value = '...'
      observer?.disconnect()
      initPVObserver()
    })
  }
)
</script>

ts

/**
 * 读取 sessionStorage
 * @param key 键名
 * @returns 值或 null
 */
export const getSessionStorage = (key: string): string | null => {
  if (typeof window === 'undefined') return null
  try {
    return sessionStorage.getItem(key)
  } catch (e) {
    console.warn(`[getSessionStorage] Failed to read ${key}:`, e)
    return null
  }
}

/**
 * 设置 sessionStorage
 * @param key 键名
 * @param value 键值
 */
export const setSessionStorage = (key: string, value: string): void => {
  if (typeof window === 'undefined') return
  try {
    sessionStorage.setItem(key, value)
  } catch (e) {
    console.warn(`[setSessionStorage] Failed to write ${key}:`, e)
  }
}

/**
 * 文字统计 (中文字符按字数计，英文单词按1个计)
 * @param data 字符串
 * @returns 统计结果
 */
export const countWord = (data: string): number => {
  if (!data) return 0
  // 移除 Markdown 语法干扰（可选，视需求而定）
  const cleanData = data.replace(/!\[.*?\]\(.*?\)|\[.*?\]\(.*?\)|<.*?>/g, '')

  // 匹配中文字符、韩文、日文
  const cjkPattern = /[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF\u3040-\u309F\uAC00-\uD7AF]/g
  // 匹配英文单词、数字
  const wordPattern = /[a-zA-Z0-9_\u00C0-\u00FF]+/g

  const cjkMatches = cleanData.match(cjkPattern) || []
  const wordMatches = cleanData.match(wordPattern) || []

  return cjkMatches.length + wordMatches.length
}

/**
 * 数字千分位转换 1500 -> 1.5K，1500000 -> 1.5M
 * @param count 数字
 * @returns 格式化后的字符串
 */
export const countTransK = (count: number): string => {
  return new Intl.NumberFormat('en-US', {
    notation: 'compact',
    maximumFractionDigits: 1
  }).format(count)
}

/**
 * 将数字转化为千分位逗号分隔格式
 * @param num 数字
 * @returns 格式化后的字符串
 */
export const numberWithCommas = (num: number): string => {
  return num.toLocaleString('en-US')
}

/* #region format-date */
/**
 * 日期格式化程序
 * @param hasTime 是否包含时间
 * @returns Intl.DateTimeFormat 实例
 */
export const formatDate = (hasTime = false): Intl.DateTimeFormat => {
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    ...(hasTime && {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    })
  }
  return new Intl.DateTimeFormat('zh-CN', options)
}
/* #endregion format-date */