style(frontend): 统一核心模块代码风格

- Composables: 优化 OAuth 相关 hooks 代码格式
- Stores: 规范状态管理模块格式
- Types: 统一类型定义格式
- Utils: 优化工具函数格式
- App.vue & style.css: 调整全局样式和主组件格式
This commit is contained in:
ianshaw
2025-12-25 08:41:43 -08:00
parent 5763f5ced3
commit 01f990a5c9
10 changed files with 775 additions and 755 deletions

View File

@@ -3,47 +3,51 @@
* Manages global UI state including sidebar, loading indicators, and toast notifications
*/
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import type { Toast, ToastType, PublicSettings } from '@/types';
import { checkUpdates as checkUpdatesAPI, type VersionInfo, type ReleaseInfo } from '@/api/admin/system';
import { getPublicSettings as fetchPublicSettingsAPI } from '@/api/auth';
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import type { Toast, ToastType, PublicSettings } from '@/types'
import {
checkUpdates as checkUpdatesAPI,
type VersionInfo,
type ReleaseInfo
} from '@/api/admin/system'
import { getPublicSettings as fetchPublicSettingsAPI } from '@/api/auth'
export const useAppStore = defineStore('app', () => {
// ==================== State ====================
const sidebarCollapsed = ref<boolean>(false);
const mobileOpen = ref<boolean>(false);
const loading = ref<boolean>(false);
const toasts = ref<Toast[]>([]);
const sidebarCollapsed = ref<boolean>(false)
const mobileOpen = ref<boolean>(false)
const loading = ref<boolean>(false)
const toasts = ref<Toast[]>([])
// Public settings cache state
const publicSettingsLoaded = ref<boolean>(false);
const publicSettingsLoading = ref<boolean>(false);
const siteName = ref<string>('Sub2API');
const siteLogo = ref<string>('');
const siteVersion = ref<string>('');
const contactInfo = ref<string>('');
const apiBaseUrl = ref<string>('');
const docUrl = ref<string>('');
const publicSettingsLoaded = ref<boolean>(false)
const publicSettingsLoading = ref<boolean>(false)
const siteName = ref<string>('Sub2API')
const siteLogo = ref<string>('')
const siteVersion = ref<string>('')
const contactInfo = ref<string>('')
const apiBaseUrl = ref<string>('')
const docUrl = ref<string>('')
// Version cache state
const versionLoaded = ref<boolean>(false);
const versionLoading = ref<boolean>(false);
const currentVersion = ref<string>('');
const latestVersion = ref<string>('');
const hasUpdate = ref<boolean>(false);
const buildType = ref<string>('source');
const releaseInfo = ref<ReleaseInfo | null>(null);
const versionLoaded = ref<boolean>(false)
const versionLoading = ref<boolean>(false)
const currentVersion = ref<string>('')
const latestVersion = ref<string>('')
const hasUpdate = ref<boolean>(false)
const buildType = ref<string>('source')
const releaseInfo = ref<ReleaseInfo | null>(null)
// Auto-incrementing ID for toasts
let toastIdCounter = 0;
let toastIdCounter = 0
// ==================== Computed ====================
const hasActiveToasts = computed(() => toasts.value.length > 0);
const loadingCount = ref<number>(0);
const hasActiveToasts = computed(() => toasts.value.length > 0)
const loadingCount = ref<number>(0)
// ==================== Actions ====================
@@ -51,7 +55,7 @@ export const useAppStore = defineStore('app', () => {
* Toggle sidebar collapsed state
*/
function toggleSidebar(): void {
sidebarCollapsed.value = !sidebarCollapsed.value;
sidebarCollapsed.value = !sidebarCollapsed.value
}
/**
@@ -59,14 +63,14 @@ export const useAppStore = defineStore('app', () => {
* @param collapsed - Whether sidebar should be collapsed
*/
function setSidebarCollapsed(collapsed: boolean): void {
sidebarCollapsed.value = collapsed;
sidebarCollapsed.value = collapsed
}
/**
* Toggle mobile sidebar open state
*/
function toggleMobileSidebar(): void {
mobileOpen.value = !mobileOpen.value;
mobileOpen.value = !mobileOpen.value
}
/**
@@ -74,7 +78,7 @@ export const useAppStore = defineStore('app', () => {
* @param open - Whether mobile sidebar should be open
*/
function setMobileOpen(open: boolean): void {
mobileOpen.value = open;
mobileOpen.value = open
}
/**
@@ -83,11 +87,11 @@ export const useAppStore = defineStore('app', () => {
*/
function setLoading(isLoading: boolean): void {
if (isLoading) {
loadingCount.value++;
loadingCount.value++
} else {
loadingCount.value = Math.max(0, loadingCount.value - 1);
loadingCount.value = Math.max(0, loadingCount.value - 1)
}
loading.value = loadingCount.value > 0;
loading.value = loadingCount.value > 0
}
/**
@@ -97,30 +101,26 @@ export const useAppStore = defineStore('app', () => {
* @param duration - Auto-dismiss duration in ms (undefined = no auto-dismiss)
* @returns Toast ID for manual dismissal
*/
function showToast(
type: ToastType,
message: string,
duration?: number
): string {
const id = `toast-${++toastIdCounter}`;
function showToast(type: ToastType, message: string, duration?: number): string {
const id = `toast-${++toastIdCounter}`
const toast: Toast = {
id,
type,
message,
duration,
startTime: duration !== undefined ? Date.now() : undefined,
};
startTime: duration !== undefined ? Date.now() : undefined
}
toasts.value.push(toast);
toasts.value.push(toast)
// Auto-dismiss if duration is specified
if (duration !== undefined) {
setTimeout(() => {
hideToast(id);
}, duration);
hideToast(id)
}, duration)
}
return id;
return id
}
/**
@@ -129,7 +129,7 @@ export const useAppStore = defineStore('app', () => {
* @param duration - Auto-dismiss duration in ms (default: 3000)
*/
function showSuccess(message: string, duration: number = 3000): string {
return showToast('success', message, duration);
return showToast('success', message, duration)
}
/**
@@ -138,7 +138,7 @@ export const useAppStore = defineStore('app', () => {
* @param duration - Auto-dismiss duration in ms (default: 5000)
*/
function showError(message: string, duration: number = 5000): string {
return showToast('error', message, duration);
return showToast('error', message, duration)
}
/**
@@ -147,7 +147,7 @@ export const useAppStore = defineStore('app', () => {
* @param duration - Auto-dismiss duration in ms (default: 3000)
*/
function showInfo(message: string, duration: number = 3000): string {
return showToast('info', message, duration);
return showToast('info', message, duration)
}
/**
@@ -156,7 +156,7 @@ export const useAppStore = defineStore('app', () => {
* @param duration - Auto-dismiss duration in ms (default: 4000)
*/
function showWarning(message: string, duration: number = 4000): string {
return showToast('warning', message, duration);
return showToast('warning', message, duration)
}
/**
@@ -164,9 +164,9 @@ export const useAppStore = defineStore('app', () => {
* @param id - Toast ID to hide
*/
function hideToast(id: string): void {
const index = toasts.value.findIndex((t) => t.id === id);
const index = toasts.value.findIndex((t) => t.id === id)
if (index !== -1) {
toasts.value.splice(index, 1);
toasts.value.splice(index, 1)
}
}
@@ -174,7 +174,7 @@ export const useAppStore = defineStore('app', () => {
* Clear all toasts
*/
function clearAllToasts(): void {
toasts.value = [];
toasts.value = []
}
/**
@@ -184,11 +184,11 @@ export const useAppStore = defineStore('app', () => {
* @returns Promise resolving to operation result
*/
async function withLoading<T>(operation: () => Promise<T>): Promise<T> {
setLoading(true);
setLoading(true)
try {
return await operation();
return await operation()
} finally {
setLoading(false);
setLoading(false)
}
}
@@ -203,18 +203,15 @@ export const useAppStore = defineStore('app', () => {
operation: () => Promise<T>,
errorMessage?: string
): Promise<T | null> {
setLoading(true);
setLoading(true)
try {
return await operation();
return await operation()
} catch (error) {
const message =
errorMessage ||
(error as { message?: string }).message ||
'An error occurred';
showError(message);
return null;
const message = errorMessage || (error as { message?: string }).message || 'An error occurred'
showError(message)
return null
} finally {
setLoading(false);
setLoading(false)
}
}
@@ -223,10 +220,10 @@ export const useAppStore = defineStore('app', () => {
* Useful for cleanup or testing
*/
function reset(): void {
sidebarCollapsed.value = false;
loading.value = false;
loadingCount.value = 0;
toasts.value = [];
sidebarCollapsed.value = false
loading.value = false
loadingCount.value = 0
toasts.value = []
}
// ==================== Version Management ====================
@@ -244,30 +241,30 @@ export const useAppStore = defineStore('app', () => {
has_update: hasUpdate.value,
build_type: buildType.value,
release_info: releaseInfo.value || undefined,
cached: true,
};
cached: true
}
}
// Prevent duplicate requests
if (versionLoading.value) {
return null;
return null
}
versionLoading.value = true;
versionLoading.value = true
try {
const data = await checkUpdatesAPI(force);
currentVersion.value = data.current_version;
latestVersion.value = data.latest_version;
hasUpdate.value = data.has_update;
buildType.value = data.build_type || 'source';
releaseInfo.value = data.release_info || null;
versionLoaded.value = true;
return data;
const data = await checkUpdatesAPI(force)
currentVersion.value = data.current_version
latestVersion.value = data.latest_version
hasUpdate.value = data.has_update
buildType.value = data.build_type || 'source'
releaseInfo.value = data.release_info || null
versionLoaded.value = true
return data
} catch (error) {
console.error('Failed to fetch version:', error);
return null;
console.error('Failed to fetch version:', error)
return null
} finally {
versionLoading.value = false;
versionLoading.value = false
}
}
@@ -275,8 +272,8 @@ export const useAppStore = defineStore('app', () => {
* Clear version cache (e.g., after update)
*/
function clearVersionCache(): void {
versionLoaded.value = false;
hasUpdate.value = false;
versionLoaded.value = false
hasUpdate.value = false
}
// ==================== Public Settings Management ====================
@@ -299,31 +296,31 @@ export const useAppStore = defineStore('app', () => {
api_base_url: apiBaseUrl.value,
contact_info: contactInfo.value,
doc_url: docUrl.value,
version: siteVersion.value,
};
version: siteVersion.value
}
}
// Prevent duplicate requests
if (publicSettingsLoading.value) {
return null;
return null
}
publicSettingsLoading.value = true;
publicSettingsLoading.value = true
try {
const data = await fetchPublicSettingsAPI();
siteName.value = data.site_name || 'Sub2API';
siteLogo.value = data.site_logo || '';
siteVersion.value = data.version || '';
contactInfo.value = data.contact_info || '';
apiBaseUrl.value = data.api_base_url || '';
docUrl.value = data.doc_url || '';
publicSettingsLoaded.value = true;
return data;
const data = await fetchPublicSettingsAPI()
siteName.value = data.site_name || 'Sub2API'
siteLogo.value = data.site_logo || ''
siteVersion.value = data.version || ''
contactInfo.value = data.contact_info || ''
apiBaseUrl.value = data.api_base_url || ''
docUrl.value = data.doc_url || ''
publicSettingsLoaded.value = true
return data
} catch (error) {
console.error('Failed to fetch public settings:', error);
return null;
console.error('Failed to fetch public settings:', error)
return null
} finally {
publicSettingsLoading.value = false;
publicSettingsLoading.value = false
}
}
@@ -331,7 +328,7 @@ export const useAppStore = defineStore('app', () => {
* Clear public settings cache
*/
function clearPublicSettingsCache(): void {
publicSettingsLoaded.value = false;
publicSettingsLoaded.value = false
}
// ==================== Return Store API ====================
@@ -387,6 +384,6 @@ export const useAppStore = defineStore('app', () => {
// Public settings actions
fetchPublicSettings,
clearPublicSettingsCache,
};
});
clearPublicSettingsCache
}
})