feat: 初始化船长·HeiXiu 桌面应用项目（错误是svg的问题）
Electron + React 19 + TypeScript + Ant Design 6 + Tailwind CSS 4 【核心架构】 - Electron 主进程（窗口管理、平台检测、图标适配） - Vite 构建链（双产物 dist/ + dist-electron/） - 共享层 shared/（类型、常量、工具函数） - IPC 通信框架 + 安全守卫 【主题系统】 - 蓝紫渐变主题（亮色/暗色双模式） - Ant Design ConfigProvider 适配（lightAlgorithm / darkAlgorithm） - Tailwind CSS 4 @theme 指令 + CSS 变量 - 设计令牌三处同步（tokens.ts / globals.css / antd-theme.ts） 【导航栏】 - 自定义 H5 导航栏替代系统菜单 - 个人版/企业版双布局 - 未登录拦截 + 事件总线驱动登录弹窗 【登录注册】 - Modal 弹层（Portal）+ Tabs 切换 - 登录/注册表单动态字段渲染 - 记住密码 / 自动登录 / 用户协议 【更新系统】 - 自定义 API 版本检查（替代 electron-updater generic provider） - 手动下载 + SHA512 校验 + spawn NSIS 安装 - 渲染进程更新状态机 Hook（useUpdater） - 检查更新按钮 + 下载进度展示 【构建工具链】 - build.mjs 构建总管（--win/--mac/--linux --personal/--enterprise --build/--clean/--sign/--upload/--publish） - scripts/ 自动化脚本（clean / generate-update-info / upload-oss / publish-release） - electron-builder NSIS 安装器（可选路径、多版本打包） - update-info.json 自动生成（fileSize/sha512/changelog/releaseDate） 【代码质量】 - ESLint + TypeScript strict + Prettier - husky + lint-staged（提交前自动检查） - commitlint（规范提交信息） - Playwright E2E + Vitest 单元测试框架 - rollup-plugin-visualizer 打包体积分析 【文档】 - README.md（快速开始 + 目录结构 + 命令速查） - UpdateA.md（发布手册：API/签名/发版流程/数据库） - CHANGELOG.md（更新日志） - .env.example（构建环境变量模板）
This commit is contained in:
285
src/services/request.ts
Normal file
285
src/services/request.ts
Normal file
@@ -0,0 +1,285 @@
|
||||
// ============================================================
|
||||
// Axios 请求封装
|
||||
//
|
||||
// 功能：
|
||||
// - 统一 BaseURL（环境变量 VITE_API_BASE_URL）
|
||||
// - 请求拦截器：自动附加 Token
|
||||
// - 响应拦截器：统一错误处理、业务码校验
|
||||
// - 类型安全的 GET / POST / PUT / DELETE / UPLOAD
|
||||
// - 请求超时、取消请求支持
|
||||
// ============================================================
|
||||
|
||||
import axios, {
|
||||
type AxiosInstance,
|
||||
type AxiosRequestConfig,
|
||||
type AxiosResponse,
|
||||
type InternalAxiosRequestConfig,
|
||||
} from 'axios';
|
||||
import type { ApiResponse } from './types';
|
||||
import { RequestError, RequestErrorType } from './types';
|
||||
import { emit, EVENTS } from '../utils/event-bus';
|
||||
|
||||
// ---------- 配置 ----------
|
||||
|
||||
/** API 基础地址（可通过 Vite 环境变量覆盖） */
|
||||
const BASE_URL = import.meta.env.VITE_API_BASE_URL;
|
||||
/** 请求超时时间（毫秒） */
|
||||
const TIMEOUT = 30000;
|
||||
|
||||
/** localStorage 中 Token 的键名 */
|
||||
const TOKEN_KEY = 'ele-heixiu-token';
|
||||
|
||||
// ---------- Token 管理 ----------
|
||||
|
||||
/** 获取存储的 Token */
|
||||
export function getToken(): string | null {
|
||||
try {
|
||||
return localStorage.getItem(TOKEN_KEY);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** 设置 Token */
|
||||
export function setToken(token: string): void {
|
||||
try {
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
} catch {
|
||||
/* 静默忽略 */
|
||||
}
|
||||
}
|
||||
|
||||
/** 清除 Token */
|
||||
export function clearToken(): void {
|
||||
try {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
} catch {
|
||||
/* 静默忽略 */
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Axios 实例 ----------
|
||||
|
||||
const instance: AxiosInstance = axios.create({
|
||||
baseURL: BASE_URL,
|
||||
timeout: TIMEOUT,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// ---------- 请求拦截器 ----------
|
||||
|
||||
instance.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
// 自动附加 Token
|
||||
const token = getToken();
|
||||
if (token && config.headers) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
() => {
|
||||
return Promise.reject(new RequestError(RequestErrorType.NETWORK, '请求配置失败'));
|
||||
},
|
||||
);
|
||||
|
||||
// ---------- 响应拦截器 ----------
|
||||
|
||||
instance.interceptors.response.use(
|
||||
(response: AxiosResponse<ApiResponse>) => {
|
||||
const { data } = response;
|
||||
|
||||
// HTTP 200 但业务码非 0 → 业务错误
|
||||
if (data && data.code !== 0) {
|
||||
const err = new RequestError(RequestErrorType.BUSINESS, data.message || '请求失败', {
|
||||
code: data.code,
|
||||
traceId: data.traceId,
|
||||
});
|
||||
|
||||
// 特殊业务码处理
|
||||
if (data.code === 401) {
|
||||
clearToken();
|
||||
emit(EVENTS.AUTH_REQUIRED);
|
||||
}
|
||||
|
||||
return Promise.reject(err);
|
||||
}
|
||||
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
// 请求已被取消
|
||||
if (axios.isCancel(error)) {
|
||||
return Promise.reject(new RequestError(RequestErrorType.CANCELLED, '请求已取消'));
|
||||
}
|
||||
|
||||
// 超时
|
||||
if (error.code === 'ECONNABORTED') {
|
||||
return Promise.reject(new RequestError(RequestErrorType.TIMEOUT, '请求超时，请检查网络'));
|
||||
}
|
||||
|
||||
// 无网络
|
||||
if (!error.response) {
|
||||
return Promise.reject(new RequestError(RequestErrorType.NETWORK, '网络异常，请检查连接'));
|
||||
}
|
||||
|
||||
// HTTP 状态码错误
|
||||
const { status, data } = error.response;
|
||||
let errMsg = '请求失败';
|
||||
|
||||
switch (status) {
|
||||
case 400:
|
||||
errMsg = '请求参数有误';
|
||||
break;
|
||||
case 401:
|
||||
errMsg = '登录已过期，请重新登录';
|
||||
clearToken();
|
||||
emit(EVENTS.AUTH_REQUIRED);
|
||||
break;
|
||||
case 403:
|
||||
errMsg = '没有访问权限';
|
||||
break;
|
||||
case 404:
|
||||
errMsg = '请求的资源不存在';
|
||||
break;
|
||||
case 500:
|
||||
errMsg = '服务器内部错误';
|
||||
break;
|
||||
case 502:
|
||||
errMsg = '网关错误';
|
||||
break;
|
||||
case 503:
|
||||
errMsg = '服务暂时不可用';
|
||||
break;
|
||||
}
|
||||
|
||||
return Promise.reject(
|
||||
new RequestError(RequestErrorType.HTTP, data?.message || errMsg, {
|
||||
httpStatus: status,
|
||||
code: data?.code,
|
||||
}),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
// ---------- 请求方法 ----------
|
||||
|
||||
/**
|
||||
* 发起 GET 请求
|
||||
* @param url - 请求路径
|
||||
* @param params - 查询参数
|
||||
* @param config - Axios 配置覆盖
|
||||
*/
|
||||
export async function get<T>(
|
||||
url: string,
|
||||
params?: Record<string, unknown>,
|
||||
config?: AxiosRequestConfig,
|
||||
): Promise<T> {
|
||||
const res = await instance.get<ApiResponse<T>>(url, { ...config, params });
|
||||
return res.data.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 发起 POST 请求（JSON）
|
||||
* @param url - 请求路径
|
||||
* @param data - 请求体
|
||||
* @param config - Axios 配置覆盖
|
||||
*/
|
||||
export async function post<T>(
|
||||
url: string,
|
||||
data?: unknown,
|
||||
config?: AxiosRequestConfig,
|
||||
): Promise<T> {
|
||||
const res = await instance.post<ApiResponse<T>>(url, data, config);
|
||||
return res.data.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 发起 PUT 请求（JSON）
|
||||
*/
|
||||
export async function put<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
|
||||
const res = await instance.put<ApiResponse<T>>(url, data, config);
|
||||
return res.data.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 发起 DELETE 请求
|
||||
*/
|
||||
export async function del<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
|
||||
const res = await instance.delete<ApiResponse<T>>(url, config);
|
||||
return res.data.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传（multipart/form-data）
|
||||
* @param url - 上传接口路径
|
||||
* @param formData - FormData 对象
|
||||
* @param onProgress - 上传进度回调 (0~100)
|
||||
*/
|
||||
export async function upload<T>(
|
||||
url: string,
|
||||
formData: FormData,
|
||||
onProgress?: (percent: number) => void,
|
||||
): Promise<T> {
|
||||
const res = await instance.post<ApiResponse<T>>(url, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
timeout: 120000, // 上传超时 2 分钟
|
||||
onUploadProgress: (progressEvent) => {
|
||||
if (onProgress && progressEvent.total) {
|
||||
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
||||
onProgress(percent);
|
||||
}
|
||||
},
|
||||
});
|
||||
return res.data.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件下载
|
||||
* @param url - 下载接口路径
|
||||
* @param filename - 保存的文件名
|
||||
*/
|
||||
export async function download(url: string, filename?: string): Promise<void> {
|
||||
const res = await instance.get(url, {
|
||||
responseType: 'blob',
|
||||
});
|
||||
|
||||
const blob = new Blob([res.data]);
|
||||
const downloadUrl = window.URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = downloadUrl;
|
||||
anchor.download = filename || 'download';
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
document.body.removeChild(anchor);
|
||||
window.URL.revokeObjectURL(downloadUrl);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建可取消的请求控制器
|
||||
* 用法：
|
||||
* const { controller, request } = createCancellableRequest();
|
||||
* request(get('/some/url')); // 发起请求
|
||||
* controller.abort(); // 取消请求
|
||||
*/
|
||||
export function createCancellableRequest() {
|
||||
const controller = new AbortController();
|
||||
return {
|
||||
controller,
|
||||
signal: controller.signal,
|
||||
/** 包裹一个请求 Promise，使其可通过 controller.abort() 取消 */
|
||||
request: <T>(promise: Promise<T>): Promise<T> => {
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
promise.then(resolve).catch(reject);
|
||||
controller.signal.addEventListener('abort', () => {
|
||||
reject(new RequestError(RequestErrorType.CANCELLED, '请求已取消'));
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// ---------- 导出 axios 实例（供高级场景直接使用） ----------
|
||||
export { instance as axiosInstance };
|
||||
export { RequestError, RequestErrorType };
|
||||
Reference in New Issue
Block a user