From 01f990a5c955c2d781a4efdefb05d5f81cabd937 Mon Sep 17 00:00:00 2001 From: ianshaw Date: Thu, 25 Dec 2025 08:41:43 -0800 Subject: [PATCH] =?UTF-8?q?style(frontend):=20=E7=BB=9F=E4=B8=80=E6=A0=B8?= =?UTF-8?q?=E5=BF=83=E6=A8=A1=E5=9D=97=E4=BB=A3=E7=A0=81=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Composables: 优化 OAuth 相关 hooks 代码格式 - Stores: 规范状态管理模块格式 - Types: 统一类型定义格式 - Utils: 优化工具函数格式 - App.vue & style.css: 调整全局样式和主组件格式 --- frontend/src/App.vue | 28 +- frontend/src/composables/useAccountOAuth.ts | 26 +- frontend/src/composables/useOpenAIOAuth.ts | 5 +- frontend/src/stores/README.md | 91 +- frontend/src/stores/app.ts | 213 +++-- frontend/src/stores/auth.ts | 132 +-- frontend/src/stores/index.ts | 8 +- frontend/src/style.css | 92 +- frontend/src/types/index.ts | 930 ++++++++++---------- frontend/src/utils/format.ts | 5 +- 10 files changed, 775 insertions(+), 755 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 5a327688..89aa91bc 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -26,17 +26,25 @@ function updateFavicon(logoUrl: string) { } // Watch for site settings changes and update favicon/title -watch(() => appStore.siteLogo, (newLogo) => { - if (newLogo) { - updateFavicon(newLogo) - } -}, { immediate: true }) +watch( + () => appStore.siteLogo, + (newLogo) => { + if (newLogo) { + updateFavicon(newLogo) + } + }, + { immediate: true } +) -watch(() => appStore.siteName, (newName) => { - if (newName) { - document.title = `${newName} - AI API Gateway` - } -}, { immediate: true }) +watch( + () => appStore.siteName, + (newName) => { + if (newName) { + document.title = `${newName} - AI API Gateway` + } + }, + { immediate: true } +) onMounted(async () => { // Check if setup is needed diff --git a/frontend/src/composables/useAccountOAuth.ts b/frontend/src/composables/useAccountOAuth.ts index 7a4cb712..e0f77590 100644 --- a/frontend/src/composables/useAccountOAuth.ts +++ b/frontend/src/composables/useAccountOAuth.ts @@ -53,9 +53,10 @@ export function useAccountOAuth() { try { const proxyConfig = proxyId ? { proxy_id: proxyId } : {} - const endpoint = addMethod === 'oauth' - ? '/admin/accounts/generate-auth-url' - : '/admin/accounts/generate-setup-token-url' + const endpoint = + addMethod === 'oauth' + ? '/admin/accounts/generate-auth-url' + : '/admin/accounts/generate-setup-token-url' const response = await adminAPI.accounts.generateAuthUrl(endpoint, proxyConfig) authUrl.value = response.auth_url @@ -85,9 +86,10 @@ export function useAccountOAuth() { try { const proxyConfig = proxyId ? { proxy_id: proxyId } : {} - const endpoint = addMethod === 'oauth' - ? '/admin/accounts/exchange-code' - : '/admin/accounts/exchange-setup-token-code' + const endpoint = + addMethod === 'oauth' + ? '/admin/accounts/exchange-code' + : '/admin/accounts/exchange-setup-token-code' const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, { session_id: sessionId.value, @@ -121,9 +123,10 @@ export function useAccountOAuth() { try { const proxyConfig = proxyId ? { proxy_id: proxyId } : {} - const endpoint = addMethod === 'oauth' - ? '/admin/accounts/cookie-auth' - : '/admin/accounts/setup-token-cookie-auth' + const endpoint = + addMethod === 'oauth' + ? '/admin/accounts/cookie-auth' + : '/admin/accounts/setup-token-cookie-auth' const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, { session_id: '', @@ -142,7 +145,10 @@ export function useAccountOAuth() { // Parse multiple session keys const parseSessionKeys = (input: string): string[] => { - return input.split('\n').map(k => k.trim()).filter(k => k) + return input + .split('\n') + .map((k) => k.trim()) + .filter((k) => k) } // Build extra info from token response diff --git a/frontend/src/composables/useOpenAIOAuth.ts b/frontend/src/composables/useOpenAIOAuth.ts index a9b3800e..4b5ffe31 100644 --- a/frontend/src/composables/useOpenAIOAuth.ts +++ b/frontend/src/composables/useOpenAIOAuth.ts @@ -55,7 +55,10 @@ export function useOpenAIOAuth() { payload.redirect_uri = redirectUri } - const response = await adminAPI.accounts.generateAuthUrl('/admin/openai/generate-auth-url', payload) + const response = await adminAPI.accounts.generateAuthUrl( + '/admin/openai/generate-auth-url', + payload + ) authUrl.value = response.auth_url sessionId.value = response.session_id return true diff --git a/frontend/src/stores/README.md b/frontend/src/stores/README.md index 232f7be9..35c7df41 100644 --- a/frontend/src/stores/README.md +++ b/frontend/src/stores/README.md @@ -9,13 +9,16 @@ This directory contains all Pinia stores for the Sub2API frontend application. Manages user authentication state, login/logout, and token persistence. **State:** + - `user: User | null` - Current authenticated user - `token: string | null` - JWT authentication token **Computed:** + - `isAuthenticated: boolean` - Whether user is currently authenticated **Actions:** + - `login(credentials)` - Authenticate user with username/password - `register(userData)` - Register new user account - `logout()` - Clear authentication and logout @@ -27,14 +30,17 @@ Manages user authentication state, login/logout, and token persistence. Manages global UI state including sidebar, loading indicators, and toast notifications. **State:** + - `sidebarCollapsed: boolean` - Sidebar collapsed state - `loading: boolean` - Global loading state - `toasts: Toast[]` - Active toast notifications **Computed:** + - `hasActiveToasts: boolean` - Whether any toasts are active **Actions:** + - `toggleSidebar()` - Toggle sidebar state - `setSidebarCollapsed(collapsed)` - Set sidebar state explicitly - `setLoading(isLoading)` - Set loading state @@ -54,106 +60,104 @@ Manages global UI state including sidebar, loading indicators, and toast notific ### Auth Store ```typescript -import { useAuthStore } from '@/stores'; +import { useAuthStore } from '@/stores' // In component setup -const authStore = useAuthStore(); +const authStore = useAuthStore() // Initialize on app startup -authStore.checkAuth(); +authStore.checkAuth() // Login try { - await authStore.login({ username: 'user', password: 'pass' }); - console.log('Logged in:', authStore.user); + await authStore.login({ username: 'user', password: 'pass' }) + console.log('Logged in:', authStore.user) } catch (error) { - console.error('Login failed:', error); + console.error('Login failed:', error) } // Check authentication if (authStore.isAuthenticated) { - console.log('User is logged in:', authStore.user?.username); + console.log('User is logged in:', authStore.user?.username) } // Logout -authStore.logout(); +authStore.logout() ``` ### App Store ```typescript -import { useAppStore } from '@/stores'; +import { useAppStore } from '@/stores' // In component setup -const appStore = useAppStore(); +const appStore = useAppStore() // Sidebar control -appStore.toggleSidebar(); -appStore.setSidebarCollapsed(true); +appStore.toggleSidebar() +appStore.setSidebarCollapsed(true) // Loading state -appStore.setLoading(true); +appStore.setLoading(true) // ... do work -appStore.setLoading(false); +appStore.setLoading(false) // Or use helper await appStore.withLoading(async () => { - const data = await fetchData(); - return data; -}); + const data = await fetchData() + return data +}) // Toast notifications -appStore.showSuccess('Operation completed!'); -appStore.showError('Something went wrong!', 5000); -appStore.showInfo('FYI: This is informational'); -appStore.showWarning('Be careful!'); +appStore.showSuccess('Operation completed!') +appStore.showError('Something went wrong!', 5000) +appStore.showInfo('FYI: This is informational') +appStore.showWarning('Be careful!') // Custom toast -const toastId = appStore.showToast('info', 'Custom message', undefined); // No auto-dismiss +const toastId = appStore.showToast('info', 'Custom message', undefined) // No auto-dismiss // Later... -appStore.hideToast(toastId); +appStore.hideToast(toastId) ``` ### Combined Usage in Vue Component ```vue