web-component-gallery 1.3.12 → 2.0.2

package/utils/Axios.js

@@ -1,105 +1,114 @@
-// src/utils/http.js
 import axios from 'axios'
+import storage from './Storage'
+// 根据环境获取存储方式
+const storageMode = process.env.NODE_ENV === 'development' ? 'cookies' : 'local'
 
-// 创建 Axios 实例
-const createAxiosService = (options) => {
+class RequestManager {
+  constructor() {
+    this.pendingMap = new Map()
+  }
+
+  add(key, controller) {
+    this.cancel(key)
+    this.pendingMap.set(key, controller)
+  }
+
+  remove(key) {
+    this.pendingMap.delete(key)
+  }
+
+  cancel(key) {
+    const controller = this.pendingMap.get(key)
+    controller?.abort()
+    this.remove(key)
+  }
+}
+
+const createService = (options = {}) => {
+  const manager = new RequestManager()
   const service = axios.create({
     baseURL: options.baseURL,
-    timeout: 15000
+    timeout: options.timeout ?? 15000,
+    withCredentials: true
   })
 
-  // 请求拦截器
-  service.interceptors.request.use(
-    config => {
-      // 这里添加请求前的逻辑
-      const token = options.token
-      token && (config.headers['token'] = token)
-      
-      // 取消重复请求处理
-      const requestKey = `${config.url}-${config.method}`
-      cancelPendingRequest(requestKey)
-      const controller = new AbortController()
-      config.signal = controller.signal
-      addPendingRequest(requestKey, controller)
-      
-      return config
-    },
-    error => {
-      return Promise.reject(error)
-    }
-  )
+  // 请求拦截
+  service.interceptors.request.use(config => {
+    const tokenKey = options.tokenKey ?? 'token'
+    const token = storage[storageMode].get(tokenKey)
+    token && (config.headers[tokenKey] = token)
+    
+    const key = generateRequestKey(config)
+    const controller = new AbortController()
+    config.signal = controller.signal
+    
+    manager.add(key, controller)
+    return config
+  })
 
-  // 响应拦截器
+  // 响应拦截
   service.interceptors.response.use(
-    response => {
-      // 请求完成后移除pending状态
-      const requestKey = `${response.config.url}-${response.config.method}`
-      removePendingRequest(requestKey)
-      
-      // 处理业务逻辑
-      const { data, config, headers } = response
-      if (config.responseType == 'blob') return { response: data, headers }
-      if (data && data.code !== 200) {
-        return Promise.reject(response.data.message || '请求错误')
-      }
-      return response.data.data
-    },
+    response => handleResponse(response, options, manager),
     error => {
-      // 处理HTTP错误
-      if (error.response) {
-        options.requestErrorHandler(error.response.status)
-        switch (error.response.status) {
-          case 401:
-            console.error('认证失效，请重新登录')
-            break
-          case 403:
-            console.error('无权限访问该资源')
-            break
-          case 500:
-            console.error('服务器内部错误，请稍后重试')
-            break
-          default:
-            handleNetworkError(error)
-        }
-      } else if (error.message.includes('timeout')) {
-        console.error('请求超时，请检查网络后重试')
-      } else {
-        console.error('未知错误，请联系管理员')
+      // 请求是否被中断 / 取消
+      if (axios.isCancel(error)) {
+        console.warn('Request canceled:', error.message)
+        return Promise.reject(error)
       }
-      return Promise.reject(error)
+      handleError(error.response, options)
     }
   )
 
-  return service
+  // 扩展上传文件方法
+  return Object.assign(service, {
+    upload: (url, file, onProgress) => {
+      const formData = new FormData()
+      formData.append('file', file)
+      return service.post(url, formData, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+        onUploadProgress: (progressEvent) => {
+          if (progressEvent.lengthComputable && onProgress) {
+            const percent = Math.round(
+              (progressEvent.loaded * 100) / progressEvent.total
+            )
+            onProgress(percent)
+          }
+        }
+      })
+    }
+  })
 }
 
-// 请求管理相关函数
-const pendingRequests = new Map()
-
-function addPendingRequest(key, controller) {
-  pendingRequests.set(key, controller)
+function generateRequestKey(config) {
+  return `${config.url}-${config.method}-${JSON.stringify(config.params)}`
 }
 
-function removePendingRequest(key) {
-  if (pendingRequests.has(key)) {
-    pendingRequests.delete(key)
-  }
-}
+function handleResponse(response, options, manager) {
+  const key = generateRequestKey(response.config)
+  manager.remove(key)
 
-function cancelPendingRequest(key) {
-  if (pendingRequests.has(key)) {
-    pendingRequests.get(key).abort()
-    pendingRequests.delete(key)
-  }
+  const { data, config, headers } = response
+  
+  if (config.responseType === 'blob') return { data, headers }
+  if (data.code && data.code !== 200) return handleError(data, options)
+  return data?.data ?? data
 }
 
-function handleNetworkError(error) {
-  // 处理常规网络错误
-  console.error('网络连接异常:', error.message)
-  // 可根据不同错误码细化处理
-  if (navigator.onLine === false) {
-    console.error('当前网络不可用')
+function handleError(error, options, manager) {
+  
+  const errorMap = {
+    401: '认证失效，请重新登录',
+    403: '无权限访问该资源',
+    500: '服务器内部错误'
   }
+
+  const status = error.status ?? error.code
+  const message = errorMap[status] || error.msg || '网络请求异常'
+  
+  status && options.requestErrorHandler?.({status, message})
+  
+  console.error(message)
+  return Promise.reject(error)
 }
 
-export default createAxiosService
+export default createService

package/utils/Postcss.js

@@ -1,9 +1,13 @@
-module.exports.postcss = {
-  rootValue: 14, // 基准字体大小，通常是 16 或 37.5
-  propList: ['*'], // 需要转换的属性，* 表示全部属性都转换
-  unitPrecision: 5, // 允许 REM 单位增长到的十进制数
-  selectorBlackList: [], // 忽略转换的选择器
-  replace: true, // 替换包含 `px` 的规则，而不是添加替换后的副本
-  mediaQuery: false, // 不允许在媒体查询中转换 `px`
-  minPixelValue: 0 // 设置要替换的最小像素值
+module.exports = {
+  plugins: {
+    'postcss-pxtorem': {
+      rootValue: 14, // 基准字体大小，通常是 16 或 37.5
+      propList: ['*'], // 需要转换的属性，* 表示全部属性都转换
+      unitPrecision: 5, // 允许 REM 单位增长到的十进制数
+      selectorBlackList: [], // 忽略转换的选择器
+      replace: true, // 替换包含 `px` 的规则，而不是添加替换后的副本
+      mediaQuery: false, // 不允许在媒体查询中转换 `px`
+      minPixelValue: 0 // 设置要替换的最小像素值
+    }
+  }
 }

package/README.md

@@ -1,24 +0,0 @@
-# web-component-gallery
-
-## Project setup
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).