style(frontend): 统一核心模块代码风格
- Composables: 优化 OAuth 相关 hooks 代码格式 - Stores: 规范状态管理模块格式 - Types: 统一类型定义格式 - Utils: 优化工具函数格式 - App.vue & style.css: 调整全局样式和主组件格式
This commit is contained in:
@@ -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
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user