import { useAuthStore } from '~/stores/auth' interface ApiResponse { code: number msg: string data: T } async function request( url: string, body: unknown, extraHeaders?: Record ): Promise { const auth = useAuthStore() const router = useRouter() const headers: Record = { 'Content-Type': 'application/json', } if (auth.token) { headers['Authorization'] = auth.token } if (extraHeaders) { Object.assign(headers, extraHeaders) } const response = await fetch(url, { method: 'POST', headers, body: JSON.stringify(body), }) if (!response.ok) { throw new Error(`HTTP error: ${response.status}`) } const result: ApiResponse = await response.json() if (result.code === 18) { auth.logout() router.push('/') throw new Error(result.msg || 'Unauthorized') } if (result.code !== 0) { throw new Error(result.msg || 'Unknown error') } return result.data } // 读操作前缀:以这些开头的 api 方法视为只读,不触发处理中遮罩;其余(add/update/del/save/create…)视为写操作。 const READONLY_RE = /^(get|list|load|query|fetch|search|count|stat|export|check)/i function isMutating(method: string): boolean { return !READONLY_RE.test(method) } export function useApi() { const auth = useAuthStore() const { begin, end } = useLoading() // setup 期捕获全局遮罩控制 // 写操作(addproduct/updateproduct/delproduct/addproductversion… 及厂家/账号等增删改) // 统一套全屏遮罩:请求期间挡住整页、拦截点击,从根上杜绝重复提交/误点。只读 getXxx 不遮罩。 async function webApi(method: string, data?: unknown): Promise { const extraHeaders: Record = {} if (auth.currentAppId) { extraHeaders['X-App-Id'] = String(auth.currentAppId) } if (!isMutating(method)) { return request(`/web/api/api_${method}`, data ?? {}, extraHeaders) } begin() try { return await request(`/web/api/api_${method}`, data ?? {}, extraHeaders) } finally { end() } } async function consoleApi(path: string, data?: unknown): Promise { return request(`/console/api/${path}`, data ?? {}) } // 文件直传:后端(api_getcostoken)按「第三方服务配置→存储→阿里云 OSS」签发一个预签名 PUT URL, // 浏览器用同样的 Content-Type PUT 直传,最终 URL(去签名 query)作为文件地址返回。 // 注意:OSS 预签名 PUT 把 Content-Type 计入签名,故这里 PUT 的 Content-Type 必须与提交给后端 // 签名的 content_type 完全一致;filename 也要一并提交,后端才能拼出完整 object key。 // // opts.target='dist' 走「分发桶」(dl.ymaikj.com),用于 App 安装包;缺省走主桶(固件/产品图)。 // opts.onProgress 给大文件用:安装包几十 MB,没有进度的话用户只看到按钮转圈转两分钟, // 分不清是在传还是卡死了。 async function uploadFile( file: File, path: string, opts: { target?: string; appName?: string; onProgress?: (percent: number) => void } = {}, ): Promise { const contentType = file.type || 'application/octet-stream' // opts.appName:安装包是页面上选中的应用;固件/产品图是产品绑定的应用名。 // 安装包这条:X-App-Id 只有绑定了应用的运营/代理账号才有,超管页面上选的应用 // 不会进请求头,不带 app_name 就会被拒成「必须先选择应用」。 // 固件/产品图的目录由服务端按产品 appnames 决定,不看登录态的 X-App-Id。 const token = await webApi<{ upload_url?: string url?: string content_type?: string }>('getcostoken', { path, filename: file.name, content_type: contentType, target: opts.target || '', app_name: opts.appName || '', }) // ⚠️ 以后端回带的为准:服务端会按扩展名强制改写 Content-Type(安装包就是这样), // 而浏览器对 .apk 给出的 File.type 往往是**空字符串**。照 file.type 发 PUT 会与签名不符, // OSS 回 403 SignatureDoesNotMatch,报错里完全看不出是类型对不上。 const putType = token.content_type || contentType const uploadUrl = token.upload_url || token.url || '' if (!uploadUrl) { throw new Error('未获取到上传地址:请确认已在【第三方服务配置→存储】配置并启用「阿里云 OSS」') } // ⚠️ 用 XHR 不用 fetch:fetch 没有上传进度事件(只有下载方向的 stream), // 而这个入口就是给几十 MB 的安装包用的。 await new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open('PUT', uploadUrl, true) // 必须与后端签名时用的 Content-Type 完全一致,理由见上面 putType xhr.setRequestHeader('Content-Type', putType) if (opts.onProgress) { xhr.upload.onprogress = (e) => { if (e.lengthComputable) opts.onProgress!(Math.round((e.loaded / e.total) * 100)) } } xhr.onload = () => xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new Error(`上传失败:HTTP ${xhr.status}`)) // ⚠️ 跨域被拒时 XHR 只会走到 onerror 且拿不到任何细节(浏览器刻意不暴露), // 所以这里必须把最可能的原因写进文案,否则排查时只看到一句「网络错误」。 xhr.onerror = () => reject(new Error('上传失败:可能是目标存储桶没有配置跨域(CORS)规则,需允许来源 ' + location.origin + ' 的 PUT')) xhr.send(file) }) // 优先用后端给的裸 URL;兜底自己去掉签名 query。 return token.url || uploadUrl.split('?')[0] } return { webApi, consoleApi, uploadFile, } }