feat: 接入旧站管理端并完整迁移后台能力
This commit is contained in:
yml
@@ -0,0 +1,289 @@
|
||||
import axios, { type AxiosResponse, type InternalAxiosRequestConfig, type AxiosError } from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { showToast } from 'vant'
|
||||
import { apiMonitor } from './monitor'
|
||||
import { debugError, debugLog } from '@/shared/utils/debug'
|
||||
import { getEffectiveSiteCode } from '@/stores/distributionSite'
|
||||
|
||||
function showError(message: string) {
|
||||
const isMobile = window.location.pathname.startsWith('/m')
|
||||
if (isMobile) {
|
||||
showToast({ message, icon: 'cross' })
|
||||
} else {
|
||||
ElMessage.error(message)
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'axios' {
|
||||
export interface AxiosRequestConfig {
|
||||
silent?: boolean
|
||||
skipErrorHandler?: boolean
|
||||
skipAuthRefresh?: boolean
|
||||
showLoading?: boolean
|
||||
_startTime?: number
|
||||
}
|
||||
}
|
||||
|
||||
// 开发环境日志记录
|
||||
function logRequest(config: InternalAxiosRequestConfig) {
|
||||
if (import.meta.env.DEV) {
|
||||
debugLog(`[API Request] ${config.method?.toUpperCase()} ${config.url}`, {
|
||||
params: config.params,
|
||||
data: config.data,
|
||||
headers: config.headers,
|
||||
})
|
||||
}
|
||||
|
||||
// 记录请求开始时间
|
||||
config._startTime = Date.now()
|
||||
}
|
||||
|
||||
function logResponse(response: AxiosResponse) {
|
||||
if (import.meta.env.DEV) {
|
||||
const duration = response.config._startTime ? Date.now() - response.config._startTime : 0
|
||||
debugLog(
|
||||
`[API Response] ${response.config.method?.toUpperCase()} ${response.config.url} (${duration}ms)`,
|
||||
{
|
||||
status: response.status,
|
||||
data: response.data,
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 记录性能指标
|
||||
if (response.config._startTime) {
|
||||
apiMonitor.record({
|
||||
url: response.config.url || '',
|
||||
method: response.config.method?.toUpperCase() || 'GET',
|
||||
duration: Date.now() - response.config._startTime,
|
||||
status: response.status,
|
||||
timestamp: Date.now(),
|
||||
success: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function logError(error: AxiosError) {
|
||||
if (import.meta.env.DEV) {
|
||||
const duration = error.config?._startTime ? Date.now() - error.config._startTime : 0
|
||||
debugError(
|
||||
`[API Error] ${error.config?.method?.toUpperCase()} ${error.config?.url} (${duration}ms)`,
|
||||
{
|
||||
status: error.response?.status,
|
||||
message: error.message,
|
||||
data: error.response?.data,
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 记录错误指标
|
||||
if (error.config?._startTime) {
|
||||
apiMonitor.record({
|
||||
url: error.config.url || '',
|
||||
method: error.config.method?.toUpperCase() || 'GET',
|
||||
duration: Date.now() - error.config._startTime,
|
||||
status: error.response?.status || 0,
|
||||
timestamp: Date.now(),
|
||||
success: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
import {
|
||||
clearAuthStorage,
|
||||
getAccessToken,
|
||||
getLoginPath,
|
||||
getRefreshToken,
|
||||
setAuthTokens,
|
||||
type AuthScope,
|
||||
} from '@/shared/utils/authStorage'
|
||||
import type { ApiResponse } from '@/shared/types/types'
|
||||
|
||||
export const apiClient = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 30000, // 增加到 30 秒，避免大文件上传超时
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
export async function unwrapData<T>(request: Promise<AxiosResponse<ApiResponse<T>>>) {
|
||||
const { data } = await request
|
||||
return data.data
|
||||
}
|
||||
|
||||
type RetryRequest = {
|
||||
resolve: (token: string) => void
|
||||
reject: (error: unknown) => void
|
||||
}
|
||||
|
||||
type RefreshState = {
|
||||
refreshing: boolean
|
||||
pendingRequests: RetryRequest[]
|
||||
}
|
||||
|
||||
type RetriableRequestConfig = InternalAxiosRequestConfig & {
|
||||
_retry?: boolean
|
||||
silent?: boolean
|
||||
skipErrorHandler?: boolean
|
||||
showLoading?: boolean
|
||||
}
|
||||
|
||||
const refreshStates: Record<AuthScope, RefreshState> = {
|
||||
user: {
|
||||
refreshing: false,
|
||||
pendingRequests: [],
|
||||
},
|
||||
admin: {
|
||||
refreshing: false,
|
||||
pendingRequests: [],
|
||||
},
|
||||
}
|
||||
|
||||
function resolvePendingRequests(scope: AuthScope, token: string) {
|
||||
const pendingRequests = refreshStates[scope].pendingRequests.splice(0)
|
||||
pendingRequests.forEach(({ resolve }) => resolve(token))
|
||||
}
|
||||
|
||||
function rejectPendingRequests(scope: AuthScope, error: unknown) {
|
||||
const pendingRequests = refreshStates[scope].pendingRequests.splice(0)
|
||||
pendingRequests.forEach(({ reject }) => reject(error))
|
||||
}
|
||||
|
||||
export async function refreshAccessToken(scope: AuthScope): Promise<string> {
|
||||
if (scope === 'admin') {
|
||||
await axios.post('/api/admin/auth/refresh', {}, { timeout: 10000, withCredentials: true })
|
||||
return ''
|
||||
}
|
||||
const refreshToken = getRefreshToken(scope)
|
||||
if (!refreshToken) throw new Error('no refresh token')
|
||||
|
||||
const { data } = await axios.post(
|
||||
'/api/auth/refresh',
|
||||
{ refresh_token: refreshToken },
|
||||
{ timeout: 10000 }
|
||||
)
|
||||
const tokens = {
|
||||
access_token: data.data.access_token,
|
||||
refresh_token: data.data.refresh_token,
|
||||
}
|
||||
setAuthTokens(scope, tokens)
|
||||
return tokens.access_token
|
||||
}
|
||||
|
||||
function getRequestScope(url = ''): AuthScope {
|
||||
return url.startsWith('/admin') ? 'admin' : 'user'
|
||||
}
|
||||
|
||||
export function redirectToLogin(scope: AuthScope) {
|
||||
clearAuthStorage(scope)
|
||||
const currentPath = window.location.pathname + window.location.search
|
||||
const loginPath = getLoginPath(scope, currentPath)
|
||||
if (currentPath.startsWith(loginPath)) return
|
||||
|
||||
if (scope === 'admin') {
|
||||
window.location.assign(loginPath)
|
||||
return
|
||||
}
|
||||
|
||||
window.location.assign(`${loginPath}?redirect=${encodeURIComponent(currentPath)}`)
|
||||
}
|
||||
|
||||
function isRefreshRequest(url = '') {
|
||||
return url.endsWith('/auth/refresh') || url.endsWith('/admin/auth/refresh')
|
||||
}
|
||||
|
||||
apiClient.interceptors.request.use(
|
||||
config => {
|
||||
const scope = getRequestScope(config.url || '')
|
||||
const token = getAccessToken(scope)
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
|
||||
const siteCode = getEffectiveSiteCode()
|
||||
if (siteCode && !config.headers['X-Distribution-Site-Code']) {
|
||||
config.headers['X-Distribution-Site-Code'] = siteCode
|
||||
}
|
||||
|
||||
// 记录请求日志
|
||||
logRequest(config)
|
||||
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
logError(error)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
apiClient.interceptors.response.use(
|
||||
response => {
|
||||
// 记录响应日志
|
||||
logResponse(response)
|
||||
return response
|
||||
},
|
||||
async error => {
|
||||
// 记录错误日志
|
||||
logError(error)
|
||||
|
||||
const originalRequest = error.config as RetriableRequestConfig | undefined
|
||||
if (
|
||||
!originalRequest ||
|
||||
error?.response?.status !== 401 ||
|
||||
originalRequest._retry ||
|
||||
originalRequest.skipAuthRefresh
|
||||
) {
|
||||
// 统一错误处理，支持 skipErrorHandler 跳过
|
||||
if (originalRequest && !originalRequest.silent && !originalRequest.skipErrorHandler) {
|
||||
const msg = error.response?.data?.message || error.message || '网络连接异常，请稍后重试'
|
||||
showError(msg)
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
|
||||
const requestUrl = originalRequest.url || ''
|
||||
const scope = getRequestScope(requestUrl)
|
||||
if (isRefreshRequest(requestUrl)) {
|
||||
redirectToLogin(scope)
|
||||
if (originalRequest && !originalRequest.silent) {
|
||||
showError('登录已失效，请重新登录')
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
|
||||
const state = refreshStates[scope]
|
||||
if (state.refreshing) {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
state.pendingRequests.push({ resolve, reject })
|
||||
}).then(newToken => {
|
||||
originalRequest._retry = true
|
||||
if (newToken) {
|
||||
originalRequest.headers.Authorization = `Bearer ${newToken}`
|
||||
}
|
||||
return apiClient(originalRequest)
|
||||
})
|
||||
}
|
||||
|
||||
state.refreshing = true
|
||||
try {
|
||||
const newToken = await refreshAccessToken(scope)
|
||||
resolvePendingRequests(scope, newToken)
|
||||
originalRequest._retry = true
|
||||
if (newToken) {
|
||||
originalRequest.headers.Authorization = `Bearer ${newToken}`
|
||||
}
|
||||
return apiClient(originalRequest)
|
||||
} catch (refreshError) {
|
||||
rejectPendingRequests(scope, refreshError)
|
||||
redirectToLogin(scope)
|
||||
if (originalRequest && !originalRequest.silent) {
|
||||
showError('会话已过期，请重新登录')
|
||||
}
|
||||
return Promise.reject(refreshError)
|
||||
} finally {
|
||||
state.refreshing = false
|
||||
}
|
||||
}
|
||||
)
|
||||
@@ -0,0 +1,72 @@
|
||||
import { apiClient } from './client'
|
||||
import type { ApiResponse } from '@/shared/types/types'
|
||||
import { optimizeImageForUpload } from '@/shared/utils/imageUpload'
|
||||
|
||||
export interface UploadedFile {
|
||||
object_key: string
|
||||
url: string
|
||||
thumbnail_url?: string
|
||||
medium_url?: string
|
||||
filename: string
|
||||
content_type: string
|
||||
size: number
|
||||
}
|
||||
|
||||
export async function uploadFile(file: File, scene: string) {
|
||||
const uploadTarget = await optimizeImageForUpload(file, scene)
|
||||
const form = new FormData()
|
||||
form.append('file', uploadTarget)
|
||||
form.append('scene', scene)
|
||||
const { data } = await apiClient.post<ApiResponse<UploadedFile>>('/files/upload', form, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function uploadAdminFile(
|
||||
file: File,
|
||||
scene: string,
|
||||
options: { optimize?: boolean } = {}
|
||||
) {
|
||||
const uploadTarget = options.optimize === false ? file : await optimizeImageForUpload(file, scene)
|
||||
const form = new FormData()
|
||||
form.append('file', uploadTarget)
|
||||
form.append('scene', scene)
|
||||
const { data } = await apiClient.post<ApiResponse<UploadedFile>>('/admin/files/upload', form, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchAdminFileBlob(key: string) {
|
||||
const { data } = await apiClient.get<Blob>('/admin/files/object', {
|
||||
params: { key },
|
||||
responseType: 'blob',
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
export async function fetchFileBlobByURL(fileURL: string) {
|
||||
let apiPath = fileURL
|
||||
try {
|
||||
const parsed = new URL(fileURL, window.location.origin)
|
||||
apiPath = parsed.pathname + parsed.search
|
||||
} catch {
|
||||
// keep as is
|
||||
}
|
||||
if (apiPath.startsWith('/api/')) {
|
||||
apiPath = apiPath.slice(4)
|
||||
}
|
||||
// 历史收款凭证存的是公开 URL，但 payment-cert 已转为私有，需精确识别 key 前缀后改走私有对象接口。
|
||||
if (apiPath.startsWith('/public/files/object')) {
|
||||
const queryIndex = apiPath.indexOf('?')
|
||||
const search = new URLSearchParams(queryIndex >= 0 ? apiPath.slice(queryIndex) : '')
|
||||
if ((search.get('key') || '').startsWith('payment-cert/')) {
|
||||
apiPath = `/files/object${queryIndex >= 0 ? apiPath.slice(queryIndex) : ''}`
|
||||
}
|
||||
}
|
||||
const { data } = await apiClient.get<Blob>(apiPath, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
return data
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* API 辅助函数
|
||||
* 提供类型安全的请求包装和通用错误处理
|
||||
*/
|
||||
|
||||
import type { AxiosRequestConfig } from 'axios'
|
||||
import type { ApiResponse } from '@/shared/types/types'
|
||||
import { apiClient } from './client'
|
||||
|
||||
/**
|
||||
* 包装 API 请求，自动解包响应数据
|
||||
*/
|
||||
export async function request<T>(config: AxiosRequestConfig): Promise<T> {
|
||||
const response = await apiClient.request<ApiResponse<T>>(config)
|
||||
return response.data.data
|
||||
}
|
||||
|
||||
/**
|
||||
* GET 请求
|
||||
*/
|
||||
export async function get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
|
||||
return request<T>({ ...config, method: 'GET', url })
|
||||
}
|
||||
|
||||
/**
|
||||
* POST 请求
|
||||
*/
|
||||
export async function post<T>(
|
||||
url: string,
|
||||
data?: unknown,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<T> {
|
||||
return request<T>({ ...config, method: 'POST', url, data })
|
||||
}
|
||||
|
||||
/**
|
||||
* PUT 请求
|
||||
*/
|
||||
export async function put<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
|
||||
return request<T>({ ...config, method: 'PUT', url, data })
|
||||
}
|
||||
|
||||
/**
|
||||
* DELETE 请求
|
||||
*/
|
||||
export async function del<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
|
||||
return request<T>({ ...config, method: 'DELETE', url })
|
||||
}
|
||||
|
||||
/**
|
||||
* PATCH 请求
|
||||
*/
|
||||
export async function patch<T>(
|
||||
url: string,
|
||||
data?: unknown,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<T> {
|
||||
return request<T>({ ...config, method: 'PATCH', url, data })
|
||||
}
|
||||
|
||||
/**
|
||||
* 静默请求 (不显示错误提示)
|
||||
*/
|
||||
export async function silentRequest<T>(config: AxiosRequestConfig): Promise<T> {
|
||||
return request<T>({ ...config, silent: true })
|
||||
}
|
||||
|
||||
/**
|
||||
* 带重试的请求
|
||||
*/
|
||||
export async function requestWithRetry<T>(
|
||||
config: AxiosRequestConfig,
|
||||
maxRetries = 3,
|
||||
retryDelay = 1000
|
||||
): Promise<T> {
|
||||
let lastError: Error | null = null
|
||||
|
||||
for (let attempt = 0; attempt <= maxRetries; attempt++) {
|
||||
try {
|
||||
return await request<T>(config)
|
||||
} catch (error) {
|
||||
lastError = error as Error
|
||||
|
||||
// 最后一次尝试，不再重试
|
||||
if (attempt === maxRetries) {
|
||||
throw error
|
||||
}
|
||||
|
||||
// 等待后重试
|
||||
await new Promise(resolve => setTimeout(resolve, retryDelay * (attempt + 1)))
|
||||
}
|
||||
}
|
||||
|
||||
throw lastError
|
||||
}
|
||||
|
||||
/**
|
||||
* 并发请求
|
||||
*/
|
||||
export async function concurrent<T extends readonly unknown[]>(
|
||||
requests: readonly [...{ [K in keyof T]: Promise<T[K]> }]
|
||||
): Promise<T> {
|
||||
return Promise.all(requests) as Promise<T>
|
||||
}
|
||||
|
||||
/**
|
||||
* 串行请求 (按顺序执行)
|
||||
*/
|
||||
export async function sequential<T>(requestFns: Array<() => Promise<T>>): Promise<T[]> {
|
||||
const results: T[] = []
|
||||
|
||||
for (const requestFn of requestFns) {
|
||||
const result = await requestFn()
|
||||
results.push(result)
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出所有辅助函数
|
||||
*/
|
||||
export const api = {
|
||||
request,
|
||||
get,
|
||||
post,
|
||||
put,
|
||||
delete: del,
|
||||
patch,
|
||||
silent: silentRequest,
|
||||
retry: requestWithRetry,
|
||||
concurrent,
|
||||
sequential,
|
||||
}
|
||||
|
||||
export default api
|
||||
@@ -0,0 +1,8 @@
|
||||
// API 基础设施
|
||||
export * from './client'
|
||||
export * from './files'
|
||||
export * from './helpers'
|
||||
export * from './monitor'
|
||||
|
||||
// 默认导出 apiClient
|
||||
export { apiClient as default } from './client'
|
||||
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* API 性能监控
|
||||
* 记录和分析 API 请求性能
|
||||
*/
|
||||
import { debugGroup, debugGroupEnd, debugLog, debugTable, debugWarn } from '@/shared/utils/debug'
|
||||
|
||||
interface RequestMetrics {
|
||||
url: string
|
||||
method: string
|
||||
duration: number
|
||||
status: number
|
||||
timestamp: number
|
||||
success: boolean
|
||||
}
|
||||
|
||||
class ApiMonitor {
|
||||
private metrics: RequestMetrics[] = []
|
||||
private maxMetrics = 100 // 只保留最近 100 条记录
|
||||
|
||||
/**
|
||||
* 记录请求指标
|
||||
*/
|
||||
record(metric: RequestMetrics) {
|
||||
this.metrics.push(metric)
|
||||
|
||||
// 限制数组大小
|
||||
if (this.metrics.length > this.maxMetrics) {
|
||||
this.metrics.shift()
|
||||
}
|
||||
|
||||
// 开发环境下，慢请求警告
|
||||
if (import.meta.env.DEV && metric.duration > 1000) {
|
||||
debugWarn(`[API 慢请求] ${metric.method} ${metric.url} 耗时 ${metric.duration}ms`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有指标
|
||||
*/
|
||||
getMetrics(): RequestMetrics[] {
|
||||
return [...this.metrics]
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取平均响应时间
|
||||
*/
|
||||
getAverageResponseTime(): number {
|
||||
if (this.metrics.length === 0) return 0
|
||||
const total = this.metrics.reduce((sum, m) => sum + m.duration, 0)
|
||||
return Math.round(total / this.metrics.length)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取成功率
|
||||
*/
|
||||
getSuccessRate(): number {
|
||||
if (this.metrics.length === 0) return 100
|
||||
const successCount = this.metrics.filter(m => m.success).length
|
||||
return Math.round((successCount / this.metrics.length) * 100)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最慢的请求
|
||||
*/
|
||||
getSlowestRequests(count = 5): RequestMetrics[] {
|
||||
return [...this.metrics].sort((a, b) => b.duration - a.duration).slice(0, count)
|
||||
}
|
||||
|
||||
/**
|
||||
* 按 URL 分组统计
|
||||
*/
|
||||
getStatsByUrl(): Record<string, { count: number; avgDuration: number; successRate: number }> {
|
||||
const urlStats: Record<string, RequestMetrics[]> = {}
|
||||
|
||||
this.metrics.forEach(metric => {
|
||||
if (!urlStats[metric.url]) {
|
||||
urlStats[metric.url] = []
|
||||
}
|
||||
urlStats[metric.url]!.push(metric)
|
||||
})
|
||||
|
||||
const result: Record<string, { count: number; avgDuration: number; successRate: number }> = {}
|
||||
|
||||
Object.entries(urlStats).forEach(([url, metrics]) => {
|
||||
const totalDuration = metrics.reduce((sum, m) => sum + m.duration, 0)
|
||||
const successCount = metrics.filter(m => m.success).length
|
||||
|
||||
result[url] = {
|
||||
count: metrics.length,
|
||||
avgDuration: Math.round(totalDuration / metrics.length),
|
||||
successRate: Math.round((successCount / metrics.length) * 100),
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空指标
|
||||
*/
|
||||
clear() {
|
||||
this.metrics = []
|
||||
}
|
||||
|
||||
/**
|
||||
* 打印性能报告
|
||||
*/
|
||||
printReport() {
|
||||
debugGroup('API 性能报告')
|
||||
debugLog('总请求数:', this.metrics.length)
|
||||
debugLog('平均响应时间:', this.getAverageResponseTime(), 'ms')
|
||||
debugLog('成功率:', this.getSuccessRate(), '%')
|
||||
debugLog('最慢的 5 个请求:')
|
||||
debugTable(
|
||||
this.getSlowestRequests(5).map(m => ({
|
||||
方法: m.method,
|
||||
URL: m.url,
|
||||
耗时: `${m.duration}ms`,
|
||||
状态: m.status,
|
||||
}))
|
||||
)
|
||||
debugLog('按 URL 统计:')
|
||||
debugTable(this.getStatsByUrl())
|
||||
debugGroupEnd()
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例
|
||||
export const apiMonitor = new ApiMonitor()
|
||||
|
||||
// 开发环境下暴露到 window 对象，方便调试
|
||||
if (import.meta.env.DEV) {
|
||||
;(window as any).__apiMonitor = apiMonitor
|
||||
debugLog('使用 __apiMonitor.printReport() 查看 API 性能报告')
|
||||
}
|
||||
Reference in New Issue
Block a user