登录页面与组件样式调整

2025-03-19 15:49:18 +08:00
parent eaae095d0e
commit 906693be10
28 changed files with 1405 additions and 206 deletions
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -0,0 +1,135 @@
+// API工具函数
+
+// 定义后端服务URL和OAuth2配置
+const API_BASE_URL = process.env.API_BASE_URL
+const CLIENT_ID = process.env.CLIENT_ID
+const CLIENT_SECRET = process.env.CLIENT_SECRET
+
+// OAuth令牌缓存
+interface TokenCache {
+  token: string
+  expires: number // 过期时间戳
+}
+
+let tokenCache: TokenCache | null = null
+
+// 获取OAuth2访问令牌
+export async function getAccessToken(forceRefresh = false): Promise<string> {
+  try {
+    // 检查缓存的令牌是否可用
+    if (!forceRefresh && tokenCache && tokenCache.expires > Date.now()) {
+      return tokenCache.token
+    }
+
+    const addr = `http://${API_BASE_URL}/api/auth/token`
+    const body = {
+      client_id: CLIENT_ID,
+      client_secret: CLIENT_SECRET,
+      grant_type: 'client_credentials',
+    }
+
+    const response = await fetch(addr, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    })
+
+    if (!response.ok) {
+      throw new Error(`OAuth token request failed: ${response.status} ${await response.text()}`)
+    }
+
+    const data = await response.json()
+
+    // 缓存令牌和过期时间
+    // 通常后端会返回expires_in（秒为单位）
+    tokenCache = {
+      token: data.access_token,
+      expires: Date.now() + data.expires_in * 1000,
+    }
+
+    return tokenCache.token
+  }
+  catch (error) {
+    console.error('Failed to get access token:', error)
+    throw new Error('认证服务暂时不可用')
+  }
+}
+
+// 通用的API调用函数
+export async function call<R = undefined>(endpoint: string, data: unknown): Promise<ApiResponse<R>> {
+  try {
+    // 发送请求
+    let accessToken = getAccessToken()
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${await accessToken}`,
+      },
+      body: JSON.stringify(data),
+    }
+    let response = await fetch(`http://${API_BASE_URL}${endpoint}`, requestOptions)
+
+    // 如果返回401未授权，尝试刷新令牌并重试一次
+    if (response.status === 401) {
+      accessToken = getAccessToken(true) // 强制刷新令牌
+
+      // 使用新令牌重试请求
+      requestOptions.headers['Authorization'] = `Bearer ${await accessToken}`
+      response = await fetch(`http://${API_BASE_URL}${endpoint}`, requestOptions)
+    }
+
+    // 解析响应数据
+    const type = response.headers.get('Content-Type') ?? 'text/plain'
+    if (type.indexOf('application/json') !== -1) {
+      const json = await response.json()
+      if (!response.ok) {
+        console.log('响应不成功', `status=${response.status}`, json)
+        return {
+          success: false,
+          status: response.status,
+          message: json.message || '请求失败',
+        }
+      }
+      return {
+        success: true,
+        data: json,
+      }
+    }
+    else if (type.indexOf('text/plain') !== -1) {
+      const text = await response.text()
+      if (!response.ok) {
+        console.log('响应不成功', `status=${response.status}`, text)
+        return {
+          success: false,
+          status: response.status,
+          message: text || '请求失败',
+        }
+      }
+      return {
+        success: true,
+        data: undefined as unknown as R, // 强转类型，考虑优化
+      }
+    }
+    else {
+      throw new Error(`无法解析响应数据，未处理的 Content-Type: ${type}`)
+    }
+  }
+  catch (e) {
+    console.error('API call failed:', e)
+    throw new Error('服务调用失败', {cause: e})
+  }
+}
+
+// 统一的API响应类型
+export type ApiResponse<T = undefined> = {
+  success: false
+  status: number
+  message: string
+} | {
+  success: true
+  data: T
+}
+