# 安裝 NProgress 核心庫(kù)和 lodash-es 工具庫(kù)
pnpm i nprogress lodash-es
# 安裝 TypeScript 類型定義（開(kāi)發(fā)依賴）
pnpm i @types/nprogress @types/lodash-es -D

# 路由進(jìn)度條，默認(rèn)開(kāi)啟（設(shè)置為 'false' 可關(guān)閉）
VITE_ROUTER_NPROGRESS = true
# 請(qǐng)求進(jìn)度條，默認(rèn)開(kāi)啟（設(shè)置為 'false' 可關(guān)閉）
VITE_REQUEST_NPROGRESS = true

// src/hooks/useProgress.ts
import { merge } from 'lodash-es'
import NProgress from 'nprogress'
import type { NProgressOptions } from 'nprogress'
interface ProgressConfig extends NProgressOptions {
  /** 是否顯示進(jìn)度條 */
  show: boolean
}
const DEFAULT_CONFIG: Partial<ProgressConfig> = {
  /** CSS3 緩沖動(dòng)畫(huà)字符串，支持 ease、linear、ease-in、ease-out、ease-in-out 以及自定義 cubic-bezier 等 */
  easing: 'ease',
  /** 指定進(jìn)度條的父容器，默認(rèn)為 body */
  parent: 'body',
  /** 是否顯示進(jìn)度條，可通過(guò)環(huán)境變量控制 */
  show: true,
  /** 是否顯示右側(cè)的環(huán)形進(jìn)度動(dòng)畫(huà) */
  showSpinner: false,
  /** 是否開(kāi)啟自動(dòng)遞增模式 */
  trickle: true,
  /** 設(shè)置開(kāi)始時(shí)最低百分比，范圍 0-1 */
  minimum: 0.08,
  /** 動(dòng)畫(huà)速度，單位毫秒 */
  speed: 200,
}
/**
 * 進(jìn)度條控制工具 Hook
 * @param config 自定義配置，會(huì)與默認(rèn)配置深度合并
 * @returns { start, done } 啟動(dòng)/結(jié)束進(jìn)度條方法
 */
export function useProgress(config: Partial<ProgressConfig> = {}) {
  const mergeConfig = merge({}, DEFAULT_CONFIG, config)
  NProgress.configure(mergeConfig)
  /**
   * 啟動(dòng)進(jìn)度條
   */
  function start() {
    if (!mergeConfig.show) return
    NProgress.start()
  }
  /**
   * 結(jié)束進(jìn)度條
   */
  function done() {
    if (!mergeConfig.show || !NProgress.isStarted()) return
    NProgress.done()
  }
  return { start, done }
}

// src/utils/request.ts

import axios, { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios'

const NProgress = useProgress({ show: import.meta.env.VITE_REQUEST_NPROGRESS !== 'false' })

const instance: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 15000,
})

// 請(qǐng)求攔截器
instance.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    NProgress.start()
    return config
  },
  (error) => {
    NProgress.done()
    return Promise.reject(error)
  },
)

// 響應(yīng)攔截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    NProgress.done()
    return response
  },
  (error) => {
    NProgress.done()
    return Promise.reject(error)
  },
)

export const request = instance

// src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [],
})

const NProgress = useProgress({ show: import.meta.env.VITE_ROUTER_NPROGRESS !== 'false' })

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

export default router

<template>
  <div class="app">
    <button @click="loadData">加載數(shù)據(jù)</button>
  </div>
</template>
<script setup lang="ts">
import { useProgress } from '@/hooks/useProgress'
const NProgress = useProgress({ show: import.meta.env.VITE_REQUEST_NPROGRESS !== 'false' })
async function loadData() {
  NProgress.start()
  try {
    await fetch('/api/data')
  } finally {
    NProgress.done()
  }
}
</script>

// src/styles/index.scss
@use './variables.scss';
@use './transition.scss';
@use 'nprogress/nprogress.css';
@use './element-plus/el-table.scss';
@use './element-plus/el-dialog.scss';
@use './element-plus/el-dropdown.scss';
body {
  font-family: var(--el-font-family);
  background-color: var(--el-bg-color-page);
}
#nprogress .bar {
  background-color: var(--el-color-primary);
}

// src/styles/nprogress.scss
#nprogress .bar {
  background-color: var(--el-color-primary);
  height: 3px;
  // 添加漸變效果
  background: linear-gradient(90deg, var(--el-color-primary-light-3) 0%, var(--el-color-primary) 100%);
}
#nprogress .peg {
  box-shadow: 0 0 10px var(--el-color-primary);
}
#nprogress .spinner-icon {
  border-top-color: var(--el-color-primary);
  border-left-color: var(--el-color-primary);
}

// src/styles/index.scss
@use './variables.scss';
@use './transition.scss';
@use './nprogress.scss'; // 替換為自定義樣式文件
@use './element-plus/el-table.scss';
@use './element-plus/el-dialog.scss';
@use './element-plus/el-dropdown.scss';
body {
  font-family: var(--el-font-family);
  background-color: var(--el-bg-color-page);
}
#nprogress .bar {
  background-color: var(--el-color-primary);
}

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './styles/index.scss' // 引入全局樣式
const app = createApp(App)
app.mount('#app')

const EASING_FUNCTIONS = {
  // 勻速運(yùn)動(dòng)
  linear: 'linear',

  // 標(biāo)準(zhǔn)緩動(dòng)
  ease: 'ease',
  easeIn: 'ease-in',
  easeOut: 'ease-out',
  easeInOut: 'ease-in-out',

  // 自定義貝塞爾曲線
  smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
  gentle: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
  swift: 'cubic-bezier(0.4, 0, 0.6, 1)',
}